@charset "UTF-8";
/**
 * arches - Global style system focused on utility classes
 * @version v4.1.4x
 * @link https://github.com/ACC-Style/Arches/
 */
/**  Build Comment: including file /setup/__preheader.scss  **/
/** SCSS DOC: _preheader.scss **/
/** SCSS DOC: _helpers.scss **/
/** SCSS DOC: _utility-css.vars.scss **/
.carousel-alt.chevron-on .carousel-indicators li.active:before {
  -webkit-font-smoothing: antialiased;
  text-rendering: auto;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  font-weight: 900;
  line-height: 1;
  font-family: "Font Awesome 6 Pro", "Font Awesome 5 Pro";
}

/**  Build Comment: This Style Sheet was formatted to work best with the inclusion of Bootstrap ^5.1.0   **/
/**  Build Comment: Set Active Class  **/
/** SCSS DOC: __brand.base.scss **/
/**  Colors  **/
/** SCSS DOC: _colors.scss **/
/** Setting link color variables in scss **/
/*

Link Colors: Light

Link colors of a lighter shade in all of its states, default, hover, visited. Typically used to enhance visibility on dark backgrounds.

$link-color-dark			- #126657; Link Color dark			
$link-color-dark--hover	- #051f1a; Link Color dark--hover	
$link-color-dark--visited	- #42665f; Link Color dark--visited	

Weight:2

Styleguide DesignBase.Colors.LinksLight
 */
/*

Link Colors

Link colors  in all of its states, default, hover, visited.


$link-color-light			- #8cebda; Link Color light			
$link-color-light--hover	- #e8fbf8; Link Color light--hover	
$link-color-light--visited	- #84afa7; Link Color light--visited	
$link-color-dark			- #126657; Link Color dark			
$link-color-dark--hover	- #051f1a; Link Color dark--hover	
$link-color-dark--visited	- #42665f; Link Color dark--visited	

Weight:1

Styleguide DesignBase.Colors.Links
 */
/**  Fonts  **/
/* Define the "system" font family */
@font-face {
  font-style: normal;
  font-weight: 300;
  src: local(".SFNSText-Light"), local(".HelveticaNeueDeskInterface-Light"), local(".LucidaGrandeUI"), local("Ubuntu Light"), local("Segoe UI Light"), local("Roboto-Light"), local("DroidSans"), local("Tahoma");
  font-family: system;
}
html {
  -webkit-font-smoothing: antialiased;
  -webkit-line-break: after-white-space;
  -webkit-locale: "en";
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  line-break: white-space;
}

/**  Textures  **/
/**  logos  **/
/**  ACC Brands    *********************************/
/** SCSS DOC: __brand.library.scss **/
/**  Build Comment: Overlay and alter for library Branding 4.1.4x  **/
/** SCSS DOC:_brand.compile.scss **/
/** SCSS DOC: _root.cssvars.scss **/
:root {
  --primary-h: 193.288590604deg;
  --primary-s: 74.8743718593%;
  --primary-l: 39.0196078431%;
  --primary: hsl( var(--primary-h),var(--primary-s),var(--primary-l) );
  --secondary-h: 223.6363636364deg;
  --secondary-s: 5.069124424%;
  --secondary-l: 42.5490196078%;
  --secondary: hsl( var(--secondary-h),var(--secondary-s),var(--secondary-l) );
  --success-h: 137.8625954198deg;
  --success-s: 90.3448275862%;
  --success-l: 28.431372549%;
  --success: hsl( var(--success-h),var(--success-s),var(--success-l) );
  --shade-h: 0deg;
  --shade-s: 0.826446281%;
  --shade-l: 52.5490196078%;
  --shade: hsl( var(--shade-h),var(--shade-s),var(--shade-l) );
  --warning-h: 33.8613861386deg;
  --warning-s: 86.3247863248%;
  --warning-l: 45.8823529412%;
  --warning: hsl( var(--warning-h),var(--warning-s),var(--warning-l) );
  --alert-h: 0deg;
  --alert-s: 78.9473684211%;
  --alert-l: 48.431372549%;
  --alert: hsl( var(--alert-h),var(--alert-s),var(--alert-l) );
  --navigation-h: 221.8791946309deg;
  --navigation-s: 63.4042553191%;
  --navigation-l: 46.0784313725%;
  --navigation: hsl( var(--navigation-h),var(--navigation-s),var(--navigation-l) );
  --accent-h: 167.2340425532deg;
  --accent-s: 76.2162162162%;
  --accent-l: 36.2745098039%;
  --accent: hsl( var(--accent-h),var(--accent-s),var(--accent-l) );
  --info-h: 31.3043478261deg;
  --info-s: 11.1111111111%;
  --info-l: 59.4117647059%;
  --info: hsl( var(--info-h),var(--info-s),var(--info-l) );
  --highlight-h: 265.8536585366deg;
  --highlight-s: 48.2352941176%;
  --highlight-l: 50%;
  --highlight: hsl( var(--highlight-h),var(--highlight-s),var(--highlight-l) );
  --acc-h: 206.9491525424deg;
  --acc-s: 100%;
  --acc-l: 23.137254902%;
  --acc: hsl( var(--acc-h),var(--acc-s),var(--acc-l) );
  --link-color-light-h:169.2857142857deg;
  --link-color-light-s:70%;
  --link-color-light-l:73.5294117647%;
  --link-color-light: hsl( var(--link-color-light-h),var(--link-color-light-s),var(--link-color-light-l) );
  --link-color-light--hover-h:169.2857142857deg;
  --link-color-light--hover-s:70%;
  --link-color-light--hover-l:94.7058823529%;
  --link-color-light--hover: hsl( var(--link-color-light--hover-h),var(--link-color-light--hover-s),var(--link-color-light--hover-l) );
  --link-color-light--visited-h:169.2857142857deg;
  --link-color-light--visited-s:21%;
  --link-color-light--visited-l:60.2941176471%;
  --link-color-light--visited: hsl( var(--link-color-light--visited-h),var(--link-color-light--visited-s),var(--link-color-light--visited-l) );
  --link-color-dark-h:169.2857142857deg;
  --link-color-dark-s:70%;
  --link-color-dark-l:23.5294117647%;
  --link-color-dark: hsl( var(--link-color-dark-h),var(--link-color-dark-s),var(--link-color-dark-l) );
  --link-color-dark--hover-h:169.2857142857deg;
  --link-color-dark--hover-s:70%;
  --link-color-dark--hover-l:7.0588235294%;
  --link-color-dark--hover: hsl( var(--link-color-dark--hover-h),var(--link-color-dark--hover-s),var(--link-color-dark--hover-l) );
  --link-color-dark--visited-h:169.2857142857deg;
  --link-color-dark--visited-s:21%;
  --link-color-dark--visited-l:32.9411764706%;
  --link-color-dark--visited: hsl( var(--link-color-dark--visited-h),var(--link-color-dark--visited-s),var(--link-color-dark--visited-l) );
}

.carousel-alt.chevron-on .carousel-indicators li.active:before {
  -webkit-font-smoothing: antialiased;
  text-rendering: auto;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  font-weight: 900;
  line-height: 1;
  font-family: "Font Awesome 6 Pro", "Font Awesome 5 Pro";
}

/**  Build Comment: Render Root Variables  **/
/** SCSS DOC: __var.output.scss **/
/** This needs to run later then brand **/
/** SCSS DOC: _setup.boot.scss **/
/*!
 * Bootstrap v5.0.0-beta3 (https://getbootstrap.com/)
 * Copyright 2011-2021 The Bootstrap Authors
 * Copyright 2011-2021 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
 */
:root {
  --bs-blue: #2b58c0;
  --bs-indigo: #6610f2;
  --bs-purple: #976ad2;
  --bs-pink: #e83e8c;
  --bs-red: #dd1a1a;
  --bs-orange: #da8210;
  --bs-yellow: #ffc107;
  --bs-green: #06a022;
  --bs-teal: #198dae;
  --bs-cyan: #17a2b8;
  --bs-white: rgb(251, 247, 247);
  --bs-gray: #9e9b9b;
  --bs-gray-dark: #cdc9c9;
  --bs-gray-100: #2a2929;
  --bs-gray-200: #414040;
  --bs-gray-300: #595757;
  --bs-gray-400: #706e6e;
  --bs-gray-500: #878585;
  --bs-gray-600: #9e9b9b;
  --bs-gray-700: #b5b2b2;
  --bs-gray-800: #cdc9c9;
  --bs-gray-900: #e4e0e0;
  --bs-primary: #198dae;
  --bs-secondary: #676a72;
  --bs-success: #078a2e;
  --bs-accent: #16a385;
  --bs-info: #a3988c;
  --bs-warning: #da8210;
  --bs-alert: #dd1a1a;
  --bs-primary-rgb: 25, 141, 174;
  --bs-secondary-rgb: 103, 106, 114;
  --bs-success-rgb: 7, 138, 46;
  --bs-accent-rgb: 22, 163, 133;
  --bs-info-rgb: 163, 152, 140;
  --bs-warning-rgb: 218, 130, 16;
  --bs-alert-rgb: 221, 26, 26;
  --bs-white-rgb: 255, 255, 255;
  --bs-black-rgb: 19, 18, 18;
  --bs-body-color-rgb: 19, 18, 18;
  --bs-body-bg-rgb: 255, 255, 255;
  --bs-font-sans-serif: "Open Sans",-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
  --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
  --bs-body-font-family: var(--bs-font-sans-serif);
  --bs-body-font-size: 16px;
  --bs-body-font-size: 1rem;
  --bs-body-font-weight: 400;
  --bs-body-line-height: 1.6;
  --bs-body-color: rgb(19, 18, 18);
  --bs-body-bg: rgb(255, 255, 255);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

@media (prefers-reduced-motion: no-preference) {
  :root {
    scroll-behavior: smooth;
  }
}

body {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(19, 18, 18, 0);
  margin: 0;
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
  font-weight: var(--bs-body-font-weight);
  font-size: var(--bs-body-font-size);
  line-height: var(--bs-body-line-height);
  font-family: var(--bs-body-font-family);
  text-align: var(--bs-body-text-align);
}

hr {
  margin: 16px 0;
  margin: 1rem 0;
  border: 0;
  background-color: currentColor;
  color: inherit;
  opacity: 0.25;
}

hr:not([size]) {
  height: 1px;
}

h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1 {
  margin-top: 0;
  margin-bottom: 8px;
  margin-bottom: 0.5rem;
  font-weight: 300;
  line-height: 1.35;
  font-family: "Maven Pro","Muli","Open Sans",Verdana,Helvetica,sans-serif;
}

h1, .h1 {
  font-size: 28.832px;
  font-size: 1.8020324707rem;
}

h2, .h2 {
  font-size: 25.628px;
  font-size: 1.6018066406rem;
}

h3, .h3 {
  font-size: 22.781px;
  font-size: 1.423828125rem;
}

h4, .h4 {
  font-size: 20.25px;
  font-size: 1.265625rem;
}

h5, .h5 {
  font-size: 18px;
  font-size: 1.125rem;
}

h6, .h6 {
  font-size: 16px;
  font-size: 1rem;
}

p {
  margin-top: 0;
  margin-bottom: 16px;
  margin-bottom: 1rem;
}

abbr[title],
abbr[data-bs-original-title] {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
  cursor: help;
}

address {
  margin-bottom: 16px;
  margin-bottom: 1rem;
  font-style: normal;
  line-height: inherit;
}

ol,
ul {
  padding-left: 32px;
  padding-left: 2rem;
}

ol,
ul,
dl {
  margin-top: 0;
  margin-bottom: 16px;
  margin-bottom: 1rem;
}

ol ol,
ul ul,
ol ul,
ul ol {
  margin-bottom: 0;
}

dt {
  font-weight: 700;
}

dd {
  margin-bottom: 8px;
  margin-bottom: 0.5rem;
  margin-left: 0;
}

blockquote {
  margin: 0 0 16px;
  margin: 0 0 1rem;
}

b,
strong {
  font-weight: bolder;
}

small, .small {
  font-size: 0.875em;
}

mark, .mark {
  padding: 0.2em;
  background-color: hsla(var(--secondary-h), calc(var(--secondary-s) - var(--secondary-s) * 0.05), calc(var(--secondary-l) + (100% - var(--secondary-l)) * 0.1), 1);
}

sub,
sup {
  position: relative;
  font-size: 0.75em;
  line-height: 0;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

a {
  color: #198dae;
  text-decoration: none;
}
a:hover {
  color: #12637a;
  text-decoration: underline;
}

a:not([href]):not([class]), a:not([href]):not([class]):hover {
  color: inherit;
  text-decoration: none;
}

pre,
code,
kbd,
samp {
  font-size: 1em;
  font-family: var(--bs-font-monospace);
  direction: ltr /* rtl:ignore */;
  unicode-bidi: bidi-override;
}

pre {
  display: block;
  margin-top: 0;
  margin-bottom: 16px;
  margin-bottom: 1rem;
  overflow: auto;
  font-size: 0.875em;
}
pre code {
  color: inherit;
  font-size: inherit;
  word-break: normal;
}

code {
  word-wrap: break-word;
  color: #e83e8c;
  font-size: 0.875em;
}
a > code {
  color: inherit;
}

kbd {
  padding: 3.2px 6.4px;
  padding: 0.2rem 0.4rem;
  border-radius: 3px;
  background-color: #e7e7e7;
  color: rgb(255, 255, 255);
  font-size: 0.875em;
}
kbd kbd {
  padding: 0;
  font-weight: 700;
  font-size: 1em;
}

figure {
  margin: 0 0 16px;
  margin: 0 0 1rem;
}

img,
svg {
  vertical-align: middle;
}

table {
  border-collapse: collapse;
  caption-side: bottom;
}

caption {
  padding-top: 8px;
  padding-top: 0.5rem;
  padding-bottom: 8px;
  padding-bottom: 0.5rem;
  color: #b8b8b8;
  text-align: left;
}

th {
  text-align: inherit;
  text-align: -webkit-match-parent;
}

thead,
tbody,
tfoot,
tr,
td,
th {
  border-width: 0;
  border-style: solid;
  border-color: inherit;
}

label {
  display: inline-block;
}

button {
  border-radius: 0;
}

button:focus:not(:focus-visible) {
  outline: 0;
}

input,
button,
select,
optgroup,
textarea {
  margin: 0;
  font-size: inherit;
  line-height: inherit;
  font-family: inherit;
}

button,
select {
  text-transform: none;
}

[role=button] {
  cursor: pointer;
}

select {
  word-wrap: normal;
}
select:disabled {
  opacity: 1;
}

[list]::-webkit-calendar-picker-indicator {
  display: none;
}

button,
[type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button;
}
button:not(:disabled),
[type=button]:not(:disabled),
[type=reset]:not(:disabled),
[type=submit]:not(:disabled) {
  cursor: pointer;
}

::-moz-focus-inner {
  padding: 0;
  border-style: none;
}

textarea {
  resize: vertical;
}

fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

legend {
  width: 100%;
  margin-bottom: 8px;
  margin-bottom: 0.5rem;
  padding: 0;
  float: left;
  font-size: 24px;
  font-size: 1.5rem;
  line-height: inherit;
}
legend + * {
  clear: left;
}

::-webkit-datetime-edit-fields-wrapper,
::-webkit-datetime-edit-text,
::-webkit-datetime-edit-minute,
::-webkit-datetime-edit-hour-field,
::-webkit-datetime-edit-day-field,
::-webkit-datetime-edit-month-field,
::-webkit-datetime-edit-year-field {
  padding: 0;
}

::-webkit-inner-spin-button {
  height: auto;
}

[type=search] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}

/* rtl:raw:
[type="tel"],
[type="url"],
[type="email"],
[type="number"] {
  direction: ltr;
}
*/
::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-color-swatch-wrapper {
  padding: 0;
}

::file-selector-button {
  font: inherit;
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

output {
  display: inline-block;
}

iframe {
  border: 0;
}

summary {
  display: list-item;
  cursor: pointer;
}

progress {
  vertical-align: baseline;
}

[hidden] {
  display: none !important;
}

.lead {
  font-weight: 300;
  font-size: 20px;
  font-size: 1.25rem;
}

.display-1 {
  font-size: 51.957px;
  font-size: 3.2473210255rem;
}

.display-1,.display-2 {
  font-weight: 300;
  line-height: 1.35;
}

.display-2 {
  font-size: 46.184px;
  font-size: 2.8865075782rem;
}

.display-3 {
  font-size: 41.052px;
  font-size: 2.565784514rem;
}

.display-3,.display-4 {
  font-weight: 300;
  line-height: 1.35;
}

.display-4 {
  font-size: 36.491px;
  font-size: 2.2806973457rem;
}

.display-5 {
  font-size: 32.436px;
  font-size: 2.0272865295rem;
}

.display-5,.display-6 {
  font-weight: 300;
  line-height: 1.35;
}

.display-6 {
  font-size: 28.832px;
  font-size: 1.8020324707rem;
}

.list-unstyled,.list-inline {
  padding-left: 0;
  list-style: none;
}

.list-inline-item {
  display: inline-block;
}
.list-inline-item:not(:last-child) {
  margin-right: 8px;
  margin-right: 0.5rem;
}

.initialism {
  font-size: 0.875em;
  text-transform: uppercase;
}

.blockquote {
  margin-bottom: 16px;
  margin-bottom: 1rem;
  font-size: 20px;
  font-size: 1.25rem;
}
.blockquote > :last-child {
  margin-bottom: 0;
}

.blockquote-footer {
  margin-top: -16px;
  margin-top: -1rem;
  margin-bottom: 16px;
  margin-bottom: 1rem;
  color: #a1a0a0;
  font-size: 0.875em;
}
.blockquote-footer::before {
  content: "— ";
}

.img-fluid,.img-thumbnail {
  max-width: 100%;
  height: auto;
}

.img-thumbnail {
  padding: 4px;
  padding: 0.25rem;
  border: 1px solid #5a5959;
  border-radius: 6px;
  background-color: rgb(255, 255, 255);
}

.figure {
  display: inline-block;
}

.figure-img {
  margin-bottom: 8px;
  margin-bottom: 0.5rem;
  line-height: 1;
}

.figure-caption {
  color: #a1a0a0;
  font-size: 0.875em;
}

.container,
.container-fluid,
.container-xl,
.container-lg,
.container-md,
.container-sm {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: var(--bs-gutter-x, 16px);
  padding-right: var(--bs-gutter-x, 1rem);
  padding-left: var(--bs-gutter-x, 16px);
  padding-left: var(--bs-gutter-x, 1rem);
}

@media (min-width: 460px) {
  .container-sm, .container {
    max-width: 540px;
  }
}
@media (min-width: 768px) {
  .container-md, .container-sm, .container {
    max-width: 720px;
  }
}
@media (min-width: 1024px) {
  .container-lg, .container-md, .container-sm, .container {
    max-width: 960px;
  }
}
@media (min-width: 1200px) {
  .container-xl, .container-lg, .container-md, .container-sm, .container {
    max-width: 1140px;
  }
}
.row {
  --bs-gutter-x: 32px;
  --bs-gutter-x: 2rem;
  --bs-gutter-y: 0;
  display: flex;
  flex-wrap: wrap;
  margin-top: calc(-1 * var(--bs-gutter-y));
  margin-right: calc(-0.5 * var(--bs-gutter-x));
  margin-left: calc(-0.5 * var(--bs-gutter-x));
}
.row > * {
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  margin-top: var(--bs-gutter-y);
  padding-right: calc(var(--bs-gutter-x) * 0.5);
  padding-left: calc(var(--bs-gutter-x) * 0.5);
}

.col {
  flex: 1 0 0%;
}

.row-cols-auto > * {
  flex: 0 0 auto;
  width: auto;
}

.row-cols-1 > * {
  flex: 0 0 auto;
  width: 100%;
}

.row-cols-2 > * {
  flex: 0 0 auto;
  width: 50%;
}

.row-cols-3 > * {
  flex: 0 0 auto;
  width: 33.3333333333%;
}

.row-cols-4 > * {
  flex: 0 0 auto;
  width: 25%;
}

.row-cols-5 > * {
  flex: 0 0 auto;
  width: 20%;
}

.row-cols-6 > * {
  flex: 0 0 auto;
  width: 16.6666666667%;
}

.col-auto {
  flex: 0 0 auto;
  width: auto;
}

.col-1 {
  width: 8.33333333%;
}

.col-1,.col-2 {
  flex: 0 0 auto;
}

.col-2 {
  width: 16.66666667%;
}

.col-3 {
  width: 25%;
}

.col-3,.col-4 {
  flex: 0 0 auto;
}

.col-4 {
  width: 33.33333333%;
}

.col-5 {
  width: 41.66666667%;
}

.col-5,.col-6 {
  flex: 0 0 auto;
}

.col-6 {
  width: 50%;
}

.col-7 {
  width: 58.33333333%;
}

.col-7,.col-8 {
  flex: 0 0 auto;
}

.col-8 {
  width: 66.66666667%;
}

.col-9 {
  flex: 0 0 auto;
  width: 75%;
}

.col-10 {
  flex: 0 0 auto;
  width: 83.33333333%;
}

.col-11 {
  flex: 0 0 auto;
  width: 91.66666667%;
}

.col-12 {
  flex: 0 0 auto;
  width: 100%;
}

.offset-1 {
  margin-left: 8.33333333%;
}

.offset-2 {
  margin-left: 16.66666667%;
}

.offset-3 {
  margin-left: 25%;
}

.offset-4 {
  margin-left: 33.33333333%;
}

.offset-5 {
  margin-left: 41.66666667%;
}

.offset-6 {
  margin-left: 50%;
}

.offset-7 {
  margin-left: 58.33333333%;
}

.offset-8 {
  margin-left: 66.66666667%;
}

.offset-9 {
  margin-left: 75%;
}

.offset-10 {
  margin-left: 83.33333333%;
}

.offset-11 {
  margin-left: 91.66666667%;
}

.g-0,
.gx-0 {
  --bs-gutter-x: 0;
}

.g-0,
.gy-0 {
  --bs-gutter-y: 0;
}

.g-1,
.gx-1 {
  --bs-gutter-x: 4px;
  --bs-gutter-x: 0.25rem;
}

.g-1,
.gy-1 {
  --bs-gutter-y: 4px;
  --bs-gutter-y: 0.25rem;
}

.g-2,
.gx-2 {
  --bs-gutter-x: 8px;
  --bs-gutter-x: 0.5rem;
}

.g-2,
.gy-2 {
  --bs-gutter-y: 8px;
  --bs-gutter-y: 0.5rem;
}

.g-3,
.gx-3 {
  --bs-gutter-x: 16px;
  --bs-gutter-x: 1rem;
}

.g-3,
.gy-3 {
  --bs-gutter-y: 16px;
  --bs-gutter-y: 1rem;
}

.g-4,
.gx-4 {
  --bs-gutter-x: 32px;
  --bs-gutter-x: 2rem;
}

.g-4,
.gy-4 {
  --bs-gutter-y: 32px;
  --bs-gutter-y: 2rem;
}

.g-5,
.gx-5 {
  --bs-gutter-x: 48px;
  --bs-gutter-x: 3rem;
}

.g-5,
.gy-5 {
  --bs-gutter-y: 48px;
  --bs-gutter-y: 3rem;
}

@media (min-width: 460px) {
  .col-sm {
    flex: 1 0 0%;
  }
  .row-cols-sm-auto > * {
    flex: 0 0 auto;
    width: auto;
  }
  .row-cols-sm-1 > * {
    flex: 0 0 auto;
    width: 100%;
  }
  .row-cols-sm-2 > * {
    flex: 0 0 auto;
    width: 50%;
  }
  .row-cols-sm-3 > * {
    flex: 0 0 auto;
    width: 33.3333333333%;
  }
  .row-cols-sm-4 > * {
    flex: 0 0 auto;
    width: 25%;
  }
  .row-cols-sm-5 > * {
    flex: 0 0 auto;
    width: 20%;
  }
  .row-cols-sm-6 > * {
    flex: 0 0 auto;
    width: 16.6666666667%;
  }
  .col-sm-auto {
    flex: 0 0 auto;
    width: auto;
  }
  .col-sm-1 {
    flex: 0 0 auto;
    width: 8.33333333%;
  }
  .col-sm-2 {
    flex: 0 0 auto;
    width: 16.66666667%;
  }
  .col-sm-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .col-sm-4 {
    flex: 0 0 auto;
    width: 33.33333333%;
  }
  .col-sm-5 {
    flex: 0 0 auto;
    width: 41.66666667%;
  }
  .col-sm-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .col-sm-7 {
    flex: 0 0 auto;
    width: 58.33333333%;
  }
  .col-sm-8 {
    flex: 0 0 auto;
    width: 66.66666667%;
  }
  .col-sm-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .col-sm-10 {
    flex: 0 0 auto;
    width: 83.33333333%;
  }
  .col-sm-11 {
    flex: 0 0 auto;
    width: 91.66666667%;
  }
  .col-sm-12 {
    flex: 0 0 auto;
    width: 100%;
  }
  .offset-sm-0 {
    margin-left: 0;
  }
  .offset-sm-1 {
    margin-left: 8.33333333%;
  }
  .offset-sm-2 {
    margin-left: 16.66666667%;
  }
  .offset-sm-3 {
    margin-left: 25%;
  }
  .offset-sm-4 {
    margin-left: 33.33333333%;
  }
  .offset-sm-5 {
    margin-left: 41.66666667%;
  }
  .offset-sm-6 {
    margin-left: 50%;
  }
  .offset-sm-7 {
    margin-left: 58.33333333%;
  }
  .offset-sm-8 {
    margin-left: 66.66666667%;
  }
  .offset-sm-9 {
    margin-left: 75%;
  }
  .offset-sm-10 {
    margin-left: 83.33333333%;
  }
  .offset-sm-11 {
    margin-left: 91.66666667%;
  }
  .g-sm-0,
  .gx-sm-0 {
    --bs-gutter-x: 0;
  }
  .g-sm-0,
  .gy-sm-0 {
    --bs-gutter-y: 0;
  }
  .g-sm-1,
  .gx-sm-1 {
    --bs-gutter-x: 0.25rem;
  }
  .g-sm-1,
  .gy-sm-1 {
    --bs-gutter-y: 0.25rem;
  }
  .g-sm-2,
  .gx-sm-2 {
    --bs-gutter-x: 0.5rem;
  }
  .g-sm-2,
  .gy-sm-2 {
    --bs-gutter-y: 0.5rem;
  }
  .g-sm-3,
  .gx-sm-3 {
    --bs-gutter-x: 1rem;
  }
  .g-sm-3,
  .gy-sm-3 {
    --bs-gutter-y: 1rem;
  }
  .g-sm-4,
  .gx-sm-4 {
    --bs-gutter-x: 2rem;
  }
  .g-sm-4,
  .gy-sm-4 {
    --bs-gutter-y: 2rem;
  }
  .g-sm-5,
  .gx-sm-5 {
    --bs-gutter-x: 3rem;
  }
  .g-sm-5,
  .gy-sm-5 {
    --bs-gutter-y: 3rem;
  }
}
@media (min-width: 768px) {
  .col-md {
    flex: 1 0 0%;
  }
  .row-cols-md-auto > * {
    flex: 0 0 auto;
    width: auto;
  }
  .row-cols-md-1 > * {
    flex: 0 0 auto;
    width: 100%;
  }
  .row-cols-md-2 > * {
    flex: 0 0 auto;
    width: 50%;
  }
  .row-cols-md-3 > * {
    flex: 0 0 auto;
    width: 33.3333333333%;
  }
  .row-cols-md-4 > * {
    flex: 0 0 auto;
    width: 25%;
  }
  .row-cols-md-5 > * {
    flex: 0 0 auto;
    width: 20%;
  }
  .row-cols-md-6 > * {
    flex: 0 0 auto;
    width: 16.6666666667%;
  }
  .col-md-auto {
    flex: 0 0 auto;
    width: auto;
  }
  .col-md-1 {
    flex: 0 0 auto;
    width: 8.33333333%;
  }
  .col-md-2 {
    flex: 0 0 auto;
    width: 16.66666667%;
  }
  .col-md-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .col-md-4 {
    flex: 0 0 auto;
    width: 33.33333333%;
  }
  .col-md-5 {
    flex: 0 0 auto;
    width: 41.66666667%;
  }
  .col-md-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .col-md-7 {
    flex: 0 0 auto;
    width: 58.33333333%;
  }
  .col-md-8 {
    flex: 0 0 auto;
    width: 66.66666667%;
  }
  .col-md-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .col-md-10 {
    flex: 0 0 auto;
    width: 83.33333333%;
  }
  .col-md-11 {
    flex: 0 0 auto;
    width: 91.66666667%;
  }
  .col-md-12 {
    flex: 0 0 auto;
    width: 100%;
  }
  .offset-md-0 {
    margin-left: 0;
  }
  .offset-md-1 {
    margin-left: 8.33333333%;
  }
  .offset-md-2 {
    margin-left: 16.66666667%;
  }
  .offset-md-3 {
    margin-left: 25%;
  }
  .offset-md-4 {
    margin-left: 33.33333333%;
  }
  .offset-md-5 {
    margin-left: 41.66666667%;
  }
  .offset-md-6 {
    margin-left: 50%;
  }
  .offset-md-7 {
    margin-left: 58.33333333%;
  }
  .offset-md-8 {
    margin-left: 66.66666667%;
  }
  .offset-md-9 {
    margin-left: 75%;
  }
  .offset-md-10 {
    margin-left: 83.33333333%;
  }
  .offset-md-11 {
    margin-left: 91.66666667%;
  }
  .g-md-0,
  .gx-md-0 {
    --bs-gutter-x: 0;
  }
  .g-md-0,
  .gy-md-0 {
    --bs-gutter-y: 0;
  }
  .g-md-1,
  .gx-md-1 {
    --bs-gutter-x: 0.25rem;
  }
  .g-md-1,
  .gy-md-1 {
    --bs-gutter-y: 0.25rem;
  }
  .g-md-2,
  .gx-md-2 {
    --bs-gutter-x: 0.5rem;
  }
  .g-md-2,
  .gy-md-2 {
    --bs-gutter-y: 0.5rem;
  }
  .g-md-3,
  .gx-md-3 {
    --bs-gutter-x: 1rem;
  }
  .g-md-3,
  .gy-md-3 {
    --bs-gutter-y: 1rem;
  }
  .g-md-4,
  .gx-md-4 {
    --bs-gutter-x: 2rem;
  }
  .g-md-4,
  .gy-md-4 {
    --bs-gutter-y: 2rem;
  }
  .g-md-5,
  .gx-md-5 {
    --bs-gutter-x: 3rem;
  }
  .g-md-5,
  .gy-md-5 {
    --bs-gutter-y: 3rem;
  }
}
@media (min-width: 1024px) {
  .col-lg {
    flex: 1 0 0%;
  }
  .row-cols-lg-auto > * {
    flex: 0 0 auto;
    width: auto;
  }
  .row-cols-lg-1 > * {
    flex: 0 0 auto;
    width: 100%;
  }
  .row-cols-lg-2 > * {
    flex: 0 0 auto;
    width: 50%;
  }
  .row-cols-lg-3 > * {
    flex: 0 0 auto;
    width: 33.3333333333%;
  }
  .row-cols-lg-4 > * {
    flex: 0 0 auto;
    width: 25%;
  }
  .row-cols-lg-5 > * {
    flex: 0 0 auto;
    width: 20%;
  }
  .row-cols-lg-6 > * {
    flex: 0 0 auto;
    width: 16.6666666667%;
  }
  .col-lg-auto {
    flex: 0 0 auto;
    width: auto;
  }
  .col-lg-1 {
    flex: 0 0 auto;
    width: 8.33333333%;
  }
  .col-lg-2 {
    flex: 0 0 auto;
    width: 16.66666667%;
  }
  .col-lg-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .col-lg-4 {
    flex: 0 0 auto;
    width: 33.33333333%;
  }
  .col-lg-5 {
    flex: 0 0 auto;
    width: 41.66666667%;
  }
  .col-lg-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .col-lg-7 {
    flex: 0 0 auto;
    width: 58.33333333%;
  }
  .col-lg-8 {
    flex: 0 0 auto;
    width: 66.66666667%;
  }
  .col-lg-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .col-lg-10 {
    flex: 0 0 auto;
    width: 83.33333333%;
  }
  .col-lg-11 {
    flex: 0 0 auto;
    width: 91.66666667%;
  }
  .col-lg-12 {
    flex: 0 0 auto;
    width: 100%;
  }
  .offset-lg-0 {
    margin-left: 0;
  }
  .offset-lg-1 {
    margin-left: 8.33333333%;
  }
  .offset-lg-2 {
    margin-left: 16.66666667%;
  }
  .offset-lg-3 {
    margin-left: 25%;
  }
  .offset-lg-4 {
    margin-left: 33.33333333%;
  }
  .offset-lg-5 {
    margin-left: 41.66666667%;
  }
  .offset-lg-6 {
    margin-left: 50%;
  }
  .offset-lg-7 {
    margin-left: 58.33333333%;
  }
  .offset-lg-8 {
    margin-left: 66.66666667%;
  }
  .offset-lg-9 {
    margin-left: 75%;
  }
  .offset-lg-10 {
    margin-left: 83.33333333%;
  }
  .offset-lg-11 {
    margin-left: 91.66666667%;
  }
  .g-lg-0,
  .gx-lg-0 {
    --bs-gutter-x: 0;
  }
  .g-lg-0,
  .gy-lg-0 {
    --bs-gutter-y: 0;
  }
  .g-lg-1,
  .gx-lg-1 {
    --bs-gutter-x: 0.25rem;
  }
  .g-lg-1,
  .gy-lg-1 {
    --bs-gutter-y: 0.25rem;
  }
  .g-lg-2,
  .gx-lg-2 {
    --bs-gutter-x: 0.5rem;
  }
  .g-lg-2,
  .gy-lg-2 {
    --bs-gutter-y: 0.5rem;
  }
  .g-lg-3,
  .gx-lg-3 {
    --bs-gutter-x: 1rem;
  }
  .g-lg-3,
  .gy-lg-3 {
    --bs-gutter-y: 1rem;
  }
  .g-lg-4,
  .gx-lg-4 {
    --bs-gutter-x: 2rem;
  }
  .g-lg-4,
  .gy-lg-4 {
    --bs-gutter-y: 2rem;
  }
  .g-lg-5,
  .gx-lg-5 {
    --bs-gutter-x: 3rem;
  }
  .g-lg-5,
  .gy-lg-5 {
    --bs-gutter-y: 3rem;
  }
}
@media (min-width: 1200px) {
  .col-xl {
    flex: 1 0 0%;
  }
  .row-cols-xl-auto > * {
    flex: 0 0 auto;
    width: auto;
  }
  .row-cols-xl-1 > * {
    flex: 0 0 auto;
    width: 100%;
  }
  .row-cols-xl-2 > * {
    flex: 0 0 auto;
    width: 50%;
  }
  .row-cols-xl-3 > * {
    flex: 0 0 auto;
    width: 33.3333333333%;
  }
  .row-cols-xl-4 > * {
    flex: 0 0 auto;
    width: 25%;
  }
  .row-cols-xl-5 > * {
    flex: 0 0 auto;
    width: 20%;
  }
  .row-cols-xl-6 > * {
    flex: 0 0 auto;
    width: 16.6666666667%;
  }
  .col-xl-auto {
    flex: 0 0 auto;
    width: auto;
  }
  .col-xl-1 {
    flex: 0 0 auto;
    width: 8.33333333%;
  }
  .col-xl-2 {
    flex: 0 0 auto;
    width: 16.66666667%;
  }
  .col-xl-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .col-xl-4 {
    flex: 0 0 auto;
    width: 33.33333333%;
  }
  .col-xl-5 {
    flex: 0 0 auto;
    width: 41.66666667%;
  }
  .col-xl-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .col-xl-7 {
    flex: 0 0 auto;
    width: 58.33333333%;
  }
  .col-xl-8 {
    flex: 0 0 auto;
    width: 66.66666667%;
  }
  .col-xl-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .col-xl-10 {
    flex: 0 0 auto;
    width: 83.33333333%;
  }
  .col-xl-11 {
    flex: 0 0 auto;
    width: 91.66666667%;
  }
  .col-xl-12 {
    flex: 0 0 auto;
    width: 100%;
  }
  .offset-xl-0 {
    margin-left: 0;
  }
  .offset-xl-1 {
    margin-left: 8.33333333%;
  }
  .offset-xl-2 {
    margin-left: 16.66666667%;
  }
  .offset-xl-3 {
    margin-left: 25%;
  }
  .offset-xl-4 {
    margin-left: 33.33333333%;
  }
  .offset-xl-5 {
    margin-left: 41.66666667%;
  }
  .offset-xl-6 {
    margin-left: 50%;
  }
  .offset-xl-7 {
    margin-left: 58.33333333%;
  }
  .offset-xl-8 {
    margin-left: 66.66666667%;
  }
  .offset-xl-9 {
    margin-left: 75%;
  }
  .offset-xl-10 {
    margin-left: 83.33333333%;
  }
  .offset-xl-11 {
    margin-left: 91.66666667%;
  }
  .g-xl-0,
  .gx-xl-0 {
    --bs-gutter-x: 0;
  }
  .g-xl-0,
  .gy-xl-0 {
    --bs-gutter-y: 0;
  }
  .g-xl-1,
  .gx-xl-1 {
    --bs-gutter-x: 0.25rem;
  }
  .g-xl-1,
  .gy-xl-1 {
    --bs-gutter-y: 0.25rem;
  }
  .g-xl-2,
  .gx-xl-2 {
    --bs-gutter-x: 0.5rem;
  }
  .g-xl-2,
  .gy-xl-2 {
    --bs-gutter-y: 0.5rem;
  }
  .g-xl-3,
  .gx-xl-3 {
    --bs-gutter-x: 1rem;
  }
  .g-xl-3,
  .gy-xl-3 {
    --bs-gutter-y: 1rem;
  }
  .g-xl-4,
  .gx-xl-4 {
    --bs-gutter-x: 2rem;
  }
  .g-xl-4,
  .gy-xl-4 {
    --bs-gutter-y: 2rem;
  }
  .g-xl-5,
  .gx-xl-5 {
    --bs-gutter-x: 3rem;
  }
  .g-xl-5,
  .gy-xl-5 {
    --bs-gutter-y: 3rem;
  }
}
.table {
  --bs-table-bg: transparent;
  --bs-table-accent-bg: transparent;
  --bs-table-striped-color: rgb(19, 18, 18);
  --bs-table-striped-bg: rgba(19, 18, 18, 0.05);
  --bs-table-active-color: rgb(19, 18, 18);
  --bs-table-active-bg: rgba(19, 18, 18, 0.1);
  --bs-table-hover-color: rgb(19, 18, 18);
  --bs-table-hover-bg: rgba(19, 18, 18, 0.075);
  width: 100%;
  margin-bottom: 16px;
  margin-bottom: 1rem;
  border-color: hsla(var(--secondary-h), calc(var(--secondary-s) - var(--secondary-s) * 0.45), calc(var(--secondary-l) + (100% - var(--secondary-l)) * 0.9), 1);
  color: rgb(19, 18, 18);
  vertical-align: top;
}
.table > :not(caption) > * > * {
  padding: 8px 8px;
  padding: 0.5rem 0.5rem;
  border-bottom-width: 1px;
  background-color: var(--bs-table-bg);
  box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);
}
.table > tbody {
  vertical-align: inherit;
}
.table > thead {
  vertical-align: bottom;
}
.table > :not(:first-child) {
  border-top: 2px solid currentColor;
}

.caption-top {
  caption-side: top;
}

.table-sm > :not(caption) > * > * {
  padding: 4px 4px;
  padding: 0.25rem 0.25rem;
}

.table-bordered > :not(caption) > * {
  border-width: 1px 0;
}
.table-bordered > :not(caption) > * > * {
  border-width: 0 1px;
}

.table-borderless > :not(caption) > * > * {
  border-bottom-width: 0;
}
.table-borderless > :not(:first-child) {
  border-top-width: 0;
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
  --bs-table-accent-bg: var(--bs-table-striped-bg);
  color: var(--bs-table-striped-color);
}

.table-active {
  --bs-table-accent-bg: var(--bs-table-active-bg);
  color: var(--bs-table-active-color);
}

.table-hover > tbody > tr:hover > * {
  --bs-table-accent-bg: var(--bs-table-hover-bg);
  color: var(--bs-table-hover-color);
}

.table-primary {
  --bs-table-bg: #d1e8ef;
  --bs-table-striped-bg: #c8dde4;
  --bs-table-striped-color: rgb(19, 18, 18);
  --bs-table-active-bg: #bed3d9;
  --bs-table-active-color: rgb(19, 18, 18);
  --bs-table-hover-bg: #c3d8de;
  --bs-table-hover-color: rgb(19, 18, 18);
  border-color: #bed3d9;
  color: rgb(19, 18, 18);
}

.table-secondary {
  --bs-table-bg: #e1e1e3;
  --bs-table-striped-bg: #d7d7d9;
  --bs-table-striped-color: rgb(19, 18, 18);
  --bs-table-active-bg: #ccccce;
  --bs-table-active-color: rgb(19, 18, 18);
  --bs-table-hover-bg: #d2d1d3;
  --bs-table-hover-color: rgb(19, 18, 18);
  border-color: #ccccce;
  color: rgb(19, 18, 18);
}

.table-success {
  --bs-table-bg: #cde8d5;
  --bs-table-striped-bg: #c4ddcb;
  --bs-table-striped-color: rgb(19, 18, 18);
  --bs-table-active-bg: #bad3c2;
  --bs-table-active-color: rgb(19, 18, 18);
  --bs-table-hover-bg: #bfd8c6;
  --bs-table-hover-color: rgb(19, 18, 18);
  border-color: #bad3c2;
  color: rgb(19, 18, 18);
}

.table-accent {
  --bs-table-bg: #d0ede7;
  --bs-table-striped-bg: #c7e2dc;
  --bs-table-striped-color: rgb(19, 18, 18);
  --bs-table-active-bg: #bdd7d2;
  --bs-table-active-color: rgb(19, 18, 18);
  --bs-table-hover-bg: #c2ddd7;
  --bs-table-hover-color: rgb(19, 18, 18);
  border-color: #bdd7d2;
  color: rgb(19, 18, 18);
}

.table-info {
  --bs-table-bg: #edeae8;
  --bs-table-striped-bg: #e2dfdd;
  --bs-table-striped-color: rgb(19, 18, 18);
  --bs-table-active-bg: #d7d4d3;
  --bs-table-active-color: rgb(19, 18, 18);
  --bs-table-hover-bg: #dddad8;
  --bs-table-hover-color: rgb(19, 18, 18);
  border-color: #d7d4d3;
  color: rgb(19, 18, 18);
}

.table-warning {
  --bs-table-bg: #f8e6cf;
  --bs-table-striped-bg: #eddbc6;
  --bs-table-striped-color: rgb(19, 18, 18);
  --bs-table-active-bg: #e1d1bc;
  --bs-table-active-color: rgb(19, 18, 18);
  --bs-table-hover-bg: #e7d6c1;
  --bs-table-hover-color: rgb(19, 18, 18);
  border-color: #e1d1bc;
  color: rgb(19, 18, 18);
}

.table-alert {
  --bs-table-bg: #f8d1d1;
  --bs-table-striped-bg: #edc7c7;
  --bs-table-striped-color: rgb(19, 18, 18);
  --bs-table-active-bg: #e1bebe;
  --bs-table-active-color: rgb(19, 18, 18);
  --bs-table-hover-bg: #e7c3c3;
  --bs-table-hover-color: rgb(19, 18, 18);
  border-color: #e1bebe;
  color: rgb(19, 18, 18);
}

.table-responsive {
  -webkit-overflow-scrolling: touch;
  overflow-x: auto;
}

@media (max-width: 459.98px) {
  .table-responsive-sm {
    -webkit-overflow-scrolling: touch;
    overflow-x: auto;
  }
}
@media (max-width: 767.98px) {
  .table-responsive-md {
    -webkit-overflow-scrolling: touch;
    overflow-x: auto;
  }
}
@media (max-width: 1023.98px) {
  .table-responsive-lg {
    -webkit-overflow-scrolling: touch;
    overflow-x: auto;
  }
}
@media (max-width: 1199.98px) {
  .table-responsive-xl {
    -webkit-overflow-scrolling: touch;
    overflow-x: auto;
  }
}
.form-label {
  margin-bottom: 8px;
  margin-bottom: 0.5rem;
}

.col-form-label {
  margin-bottom: 0;
  font-size: inherit;
  line-height: 1.6;
}

.col-form-label,.col-form-label-lg {
  padding-top: calc(0.5rem + 1px);
  padding-bottom: calc(0.5rem + 1px);
}

.col-form-label-lg {
  font-size: 20.25px;
  font-size: 1.265625rem;
}

.col-form-label-sm {
  padding-top: calc(0.25rem + 1px);
  padding-bottom: calc(0.25rem + 1px);
  font-size: 14.222px;
  font-size: 0.8888888889rem;
}

.form-text {
  margin-top: 4px;
  margin-top: 0.25rem;
  color: #b8b8b8;
  font-size: 0.875em;
}

.form-control {
  display: block;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  width: 100%;
  padding: 8px 16px;
  padding: 0.5rem 1rem;
  border: 1px solid #717171;
  border-radius: 6px;
  background-clip: padding-box;
  background-color: rgb(255, 255, 255);
  color: rgb(19, 18, 18);
  font-weight: 400;
  font-size: 16px;
  font-size: 1rem;
  line-height: 1.6;
}
.form-control[type=file] {
  overflow: hidden;
}
.form-control[type=file]:not(:disabled):not([readonly]) {
  cursor: pointer;
}
.form-control:focus {
  border-color: #8cc6d7;
  outline: 0;
  background-color: rgb(255, 255, 255);
  box-shadow: 0 0 0 0.2rem rgba(25, 141, 174, 0.25);
  color: rgb(19, 18, 18);
}
.form-control::-webkit-date-and-time-value {
  height: 1.6em;
}
.form-control::-moz-placeholder {
  color: #a1a0a0;
  opacity: 1;
}
.form-control::placeholder {
  color: #a1a0a0;
  opacity: 1;
}
.form-control:disabled, .form-control[readonly] {
  background-color: #e7e7e7;
  opacity: 1;
}
.form-control::file-selector-button {
  margin: -8px -16px;
  margin: -0.5rem -1rem;
  margin-inline-end: 16px;
  margin-inline-end: 1rem;
  padding: 8px 16px;
  padding: 0.5rem 1rem;
  border-width: 0;
  border-style: solid;
  border-radius: 0;
  border-inline-end-width: 1px;
  border-color: inherit;
  background-color: var(--primary);
  color: rgb(255, 255, 255);
  pointer-events: none;
}
.form-control:hover:not(:disabled):not([readonly])::file-selector-button {
  background-color: hsla(var(--primary-h), calc(var(--primary-s) + (100% - var(--primary-s)) * 0.03), calc(var(--primary-l) - var(--primary-l) * 0.3), 1);
}
.form-control::-webkit-file-upload-button {
  margin: -8px -16px;
  margin: -0.5rem -1rem;
  margin-inline-end: 16px;
  margin-inline-end: 1rem;
  padding: 8px 16px;
  padding: 0.5rem 1rem;
  border-width: 0;
  border-style: solid;
  border-radius: 0;
  border-inline-end-width: 1px;
  border-color: inherit;
  background-color: var(--primary);
  color: rgb(255, 255, 255);
  pointer-events: none;
}
.form-control:hover:not(:disabled):not([readonly])::-webkit-file-upload-button {
  background-color: hsla(var(--primary-h), calc(var(--primary-s) + (100% - var(--primary-s)) * 0.03), calc(var(--primary-l) - var(--primary-l) * 0.3), 1);
}

.form-control-plaintext {
  display: block;
  width: 100%;
  margin-bottom: 0;
  padding: 8px 0;
  padding: 0.5rem 0;
  border: solid transparent;
  border-width: 1px 0;
  background-color: transparent;
  color: rgb(19, 18, 18);
  line-height: 1.6;
}
.form-control-plaintext.form-control-sm, .form-control-plaintext.form-control-lg {
  padding-right: 0;
  padding-left: 0;
}

.form-control-sm {
  min-height: calc(1.6em + 0.5rem + 2px);
  padding: 4px 8px;
  padding: 0.25rem 0.5rem;
  border-radius: 3px;
  font-size: 14.222px;
  font-size: 0.8888888889rem;
}
.form-control-sm::file-selector-button {
  margin: -4px -8px;
  margin: -0.25rem -0.5rem;
  margin-inline-end: 8px;
  margin-inline-end: 0.5rem;
  padding: 4px 8px;
  padding: 0.25rem 0.5rem;
}
.form-control-sm::-webkit-file-upload-button {
  margin: -4px -8px;
  margin: -0.25rem -0.5rem;
  margin-inline-end: 8px;
  margin-inline-end: 0.5rem;
  padding: 4px 8px;
  padding: 0.25rem 0.5rem;
}

.form-control-lg {
  min-height: calc(1.6em + 1rem + 2px);
  padding: 8px 16px;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  font-size: 20.25px;
  font-size: 1.265625rem;
}
.form-control-lg::file-selector-button {
  margin: -8px -16px;
  margin: -0.5rem -1rem;
  margin-inline-end: 16px;
  margin-inline-end: 1rem;
  padding: 8px 16px;
  padding: 0.5rem 1rem;
}
.form-control-lg::-webkit-file-upload-button {
  margin: -8px -16px;
  margin: -0.5rem -1rem;
  margin-inline-end: 16px;
  margin-inline-end: 1rem;
  padding: 8px 16px;
  padding: 0.5rem 1rem;
}

textarea.form-control {
  min-height: calc(1.6em + 1rem + 2px);
}
textarea.form-control-sm {
  min-height: calc(1.6em + 0.5rem + 2px);
}
textarea.form-control-lg {
  min-height: calc(1.6em + 1rem + 2px);
}

.form-control-color {
  width: 48px;
  width: 3rem;
  height: auto;
  padding: 8px;
  padding: 0.5rem;
}
.form-control-color:not(:disabled):not([readonly]) {
  cursor: pointer;
}
.form-control-color::-moz-color-swatch {
  height: 1.6em;
  border-radius: 6px;
}
.form-control-color::-webkit-color-swatch {
  height: 1.6em;
  border-radius: 6px;
}

.form-select {
  -moz-padding-start: calc(1rem - 3px);
  display: block;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  width: 100%;
  padding: 8px 48px 8px 16px;
  padding: 0.5rem 3rem 0.5rem 1rem;
  border: 1px solid #717171;
  border-radius: 6px;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%235a5959' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
  background-position: right 16px center;
  background-position: right 1rem center;
  background-size: 16px 12px;
  background-repeat: no-repeat;
  background-color: rgb(255, 255, 255);
  color: rgb(19, 18, 18);
  font-weight: 400;
  font-size: 16px;
  font-size: 1rem;
  line-height: 1.6;
}
.form-select:focus {
  border-color: #8cc6d7;
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(25, 141, 174, 0.25);
}
.form-select[multiple], .form-select[size]:not([size="1"]) {
  padding-right: 16px;
  padding-right: 1rem;
  background-image: none;
}
.form-select:disabled {
  background-color: #898989;
  color: #e7e7e7;
}
.form-select:-moz-focusring {
  color: transparent;
  text-shadow: 0 0 0 rgb(19, 18, 18);
}

.form-select-sm {
  padding-top: 4px;
  padding-top: 0.25rem;
  padding-bottom: 4px;
  padding-bottom: 0.25rem;
  padding-left: 8px;
  padding-left: 0.5rem;
  border-radius: 3px;
  font-size: 14.222px;
  font-size: 0.8888888889rem;
}

.form-select-lg {
  padding-top: 8px;
  padding-top: 0.5rem;
  padding-bottom: 8px;
  padding-bottom: 0.5rem;
  padding-left: 16px;
  padding-left: 1rem;
  border-radius: 6px;
  font-size: 20.25px;
  font-size: 1.265625rem;
}

.form-check {
  display: block;
  min-height: 25.6px;
  min-height: 1.6rem;
  margin-bottom: 2px;
  margin-bottom: 0.125rem;
  padding-left: 1.5em;
}
.form-check .form-check-input {
  margin-left: -1.5em;
  float: left;
}

.form-check-input {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  width: 1em;
  height: 1em;
  margin-top: 0.3em;
  border: 1px solid rgba(0, 0, 0, 0.25);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-color: rgb(255, 255, 255);
  -webkit-print-color-adjust: exact;
          color-adjust: exact;
  vertical-align: top;
}
.form-check-input[type=checkbox] {
  border-radius: 0.25em;
}
.form-check-input[type=radio] {
  border-radius: 50%;
}
.form-check-input:active {
  filter: brightness(90%);
}
.form-check-input:focus {
  border-color: #8cc6d7;
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(25, 141, 174, 0.25);
}
.form-check-input:checked {
  border-color: #198dae;
  background-color: #198dae;
}
.form-check-input:checked[type=checkbox] {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='rgb%28255, 255, 255%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
}
.form-check-input:checked[type=radio] {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='rgb%28255, 255, 255%29'/%3e%3c/svg%3e");
}
.form-check-input[type=checkbox]:indeterminate {
  border-color: #198dae;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='rgb%28255, 255, 255%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e");
  background-color: #198dae;
}
.form-check-input:disabled {
  filter: none;
  opacity: 0.5;
  pointer-events: none;
}
.form-check-input[disabled] ~ .form-check-label, .form-check-input:disabled ~ .form-check-label {
  opacity: 0.5;
}

.form-switch {
  padding-left: 2.5em;
}
.form-switch .form-check-input {
  width: 2em;
  margin-left: -2.5em;
  border-radius: 2em;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 0.25%29'/%3e%3c/svg%3e");
  background-position: left center;
}
.form-switch .form-check-input:focus {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%238cc6d7'/%3e%3c/svg%3e");
}
.form-switch .form-check-input:checked {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgb%28255, 255, 255%29'/%3e%3c/svg%3e");
  background-position: right center;
}

.form-check-inline {
  display: inline-block;
  margin-right: 16px;
  margin-right: 1rem;
}

.btn-check {
  clip: rect(0, 0, 0, 0);
  position: absolute;
  pointer-events: none;
}
.btn-check[disabled] + .btn, .btn-check:disabled + .btn {
  filter: none;
  opacity: 0.65;
  pointer-events: none;
}

.form-range {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  width: 100%;
  height: 22.4px;
  height: 1.4rem;
  padding: 0;
  background-color: transparent;
}
.form-range:focus {
  outline: 0;
}
.form-range:focus::-webkit-slider-thumb {
  box-shadow: 0 0 0 1px rgb(255, 255, 255), 0 0 0 0.2rem rgba(25, 141, 174, 0.25);
}
.form-range:focus::-moz-range-thumb {
  box-shadow: 0 0 0 1px rgb(255, 255, 255), 0 0 0 0.2rem rgba(25, 141, 174, 0.25);
}
.form-range::-moz-focus-outer {
  border: 0;
}
.form-range::-webkit-slider-thumb {
  -webkit-appearance: none;
          appearance: none;
  width: 16px;
  width: 1rem;
  height: 16px;
  height: 1rem;
  margin-top: -4px;
  margin-top: -0.25rem;
  border: 0;
  border-radius: 1rem;
  background-color: #198dae;
}
.form-range::-webkit-slider-thumb:active {
  background-color: #badde7;
}
.form-range::-webkit-slider-runnable-track {
  width: 100%;
  height: 8px;
  height: 0.5rem;
  border-radius: 1rem;
  border-color: transparent;
  background-color: #5a5959;
  color: transparent;
  cursor: pointer;
}
.form-range::-moz-range-thumb {
  -moz-appearance: none;
       appearance: none;
  width: 16px;
  width: 1rem;
  height: 16px;
  height: 1rem;
  border: 0;
  border-radius: 1rem;
  background-color: #198dae;
}
.form-range::-moz-range-thumb:active {
  background-color: #badde7;
}
.form-range::-moz-range-track {
  width: 100%;
  height: 8px;
  height: 0.5rem;
  border-radius: 1rem;
  border-color: transparent;
  background-color: #5a5959;
  color: transparent;
  cursor: pointer;
}
.form-range:disabled {
  pointer-events: none;
}
.form-range:disabled::-webkit-slider-thumb {
  background-color: #e7e7e7;
}
.form-range:disabled::-moz-range-thumb {
  background-color: #e7e7e7;
}

.form-floating {
  position: relative;
}
.form-floating > .form-control,
.form-floating > .form-select {
  height: calc(3.5rem + 2px);
  line-height: 1.25;
}
.form-floating > label {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  transform-origin: 0 0;
  border: 1px solid transparent;
  pointer-events: none;
}
.form-floating > label,.form-floating > .form-control {
  padding: 16px 16px;
  padding: 1rem 1rem;
}
.form-floating > .form-control::-moz-placeholder {
  color: transparent;
}
.form-floating > .form-control::placeholder {
  color: transparent;
}
.form-floating > .form-control:not(:-moz-placeholder-shown) {
  padding-top: 26px;
  padding-top: 1.625rem;
  padding-bottom: 10px;
  padding-bottom: 0.625rem;
}
.form-floating > .form-control:focus, .form-floating > .form-control:not(:placeholder-shown) {
  padding-top: 26px;
  padding-top: 1.625rem;
  padding-bottom: 10px;
  padding-bottom: 0.625rem;
}
.form-floating > .form-control:-webkit-autofill {
  padding-top: 26px;
  padding-top: 1.625rem;
  padding-bottom: 10px;
  padding-bottom: 0.625rem;
}
.form-floating > .form-select {
  padding-top: 26px;
  padding-top: 1.625rem;
  padding-bottom: 10px;
  padding-bottom: 0.625rem;
}
.form-floating > .form-control:not(:-moz-placeholder-shown) ~ label {
  transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
  opacity: 0.65;
}
.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label,
.form-floating > .form-select ~ label {
  transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
  opacity: 0.65;
}
.form-floating > .form-control:-webkit-autofill ~ label {
  transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
  opacity: 0.65;
}

.input-group {
  display: flex;
  position: relative;
  flex-wrap: wrap;
  align-items: stretch;
  width: 100%;
}
.input-group > .form-control,
.input-group > .form-select {
  position: relative;
  flex: 1 1 auto;
  width: 1%;
  min-width: 0;
}
.input-group > .form-control:focus,
.input-group > .form-select:focus {
  z-index: 3;
}
.input-group .btn {
  z-index: 2;
  position: relative;
}
.input-group .btn:focus {
  z-index: 3;
}

.input-group-text {
  display: flex;
  align-items: center;
  padding: 8px 16px;
  padding: 0.5rem 1rem;
  border: 1px solid #717171;
  border-radius: 6px;
  background-color: hsla(var(--secondary-h), calc(var(--secondary-s) - var(--secondary-s) * 0.375), calc(var(--secondary-l) + (100% - var(--secondary-l)) * 0.75), 1);
  color: rgb(19, 18, 18);
  font-weight: 400;
  font-size: 16px;
  font-size: 1rem;
  line-height: 1.6;
  text-align: center;
  white-space: nowrap;
}

.input-group-lg > .form-control,
.input-group-lg > .form-select,
.input-group-lg > .input-group-text,
.input-group-lg > .btn {
  padding: 8px 16px;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  font-size: 20.25px;
  font-size: 1.265625rem;
}

.input-group-sm > .form-control,
.input-group-sm > .form-select,
.input-group-sm > .input-group-text,
.input-group-sm > .btn {
  padding: 4px 8px;
  padding: 0.25rem 0.5rem;
  border-radius: 3px;
  font-size: 14.222px;
  font-size: 0.8888888889rem;
}

.input-group-lg > .form-select,
.input-group-sm > .form-select {
  padding-right: 64px;
  padding-right: 4rem;
}
.input-group:not(.has-validation) > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu),
.input-group:not(.has-validation) > .dropdown-toggle:nth-last-child(n+3),.input-group.has-validation > :nth-last-child(n+3):not(.dropdown-toggle):not(.dropdown-menu),
.input-group.has-validation > .dropdown-toggle:nth-last-child(n+4) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.input-group > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
  margin-left: -1px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.valid-feedback {
  display: none;
  width: 100%;
  margin-top: 4px;
  margin-top: 0.25rem;
  color: #078a2e;
  font-size: 0.875em;
}

.valid-tooltip {
  display: none;
  z-index: 5;
  position: absolute;
  top: 100%;
  max-width: 100%;
  margin-top: 1.6px;
  margin-top: 0.1rem;
  padding: 4px 8px;
  padding: 0.25rem 0.5rem;
  border-radius: 6px;
  background-color: rgba(7, 138, 46, 0.9);
  color: rgb(255, 255, 255);
  font-size: 14.222px;
  font-size: 0.8888888889rem;
}

.was-validated :valid ~ .valid-feedback,
.was-validated :valid ~ .valid-tooltip,
.is-valid ~ .valid-feedback,
.is-valid ~ .valid-tooltip {
  display: block;
}

.was-validated .form-control:valid, .form-control.is-valid {
  border-color: #078a2e;
}
.was-validated .form-control:valid:focus, .form-control.is-valid:focus {
  border-color: #078a2e;
  box-shadow: 0 0 0 0.2rem rgba(7, 138, 46, 0.25);
}

.was-validated .form-select:valid, .form-select.is-valid {
  border-color: #078a2e;
}
.was-validated .form-select:valid:focus, .form-select.is-valid:focus {
  border-color: #078a2e;
  box-shadow: 0 0 0 0.2rem rgba(7, 138, 46, 0.25);
}

.was-validated .form-check-input:valid, .form-check-input.is-valid {
  border-color: #078a2e;
}
.was-validated .form-check-input:valid:checked, .form-check-input.is-valid:checked {
  background-color: #078a2e;
}
.was-validated .form-check-input:valid:focus, .form-check-input.is-valid:focus {
  box-shadow: 0 0 0 0.2rem rgba(7, 138, 46, 0.25);
}
.was-validated .form-check-input:valid ~ .form-check-label, .form-check-input.is-valid ~ .form-check-label {
  color: #078a2e;
}

.form-check-inline .form-check-input ~ .valid-feedback {
  margin-left: 0.5em;
}

.was-validated .input-group .form-control:valid, .input-group .form-control.is-valid,
.was-validated .input-group .form-select:valid,
.input-group .form-select.is-valid {
  z-index: 1;
}
.was-validated .input-group .form-control:valid:focus, .input-group .form-control.is-valid:focus,
.was-validated .input-group .form-select:valid:focus,
.input-group .form-select.is-valid:focus {
  z-index: 3;
}

.invalid-feedback {
  display: none;
  width: 100%;
  margin-top: 4px;
  margin-top: 0.25rem;
  color: #dd1a1a;
  font-size: 0.875em;
}

.invalid-tooltip {
  display: none;
  z-index: 5;
  position: absolute;
  top: 100%;
  max-width: 100%;
  margin-top: 1.6px;
  margin-top: 0.1rem;
  padding: 4px 8px;
  padding: 0.25rem 0.5rem;
  border-radius: 6px;
  background-color: rgba(221, 26, 26, 0.9);
  color: rgb(255, 255, 255);
  font-size: 14.222px;
  font-size: 0.8888888889rem;
}

.was-validated :invalid ~ .invalid-feedback,
.was-validated :invalid ~ .invalid-tooltip,
.is-invalid ~ .invalid-feedback,
.is-invalid ~ .invalid-tooltip {
  display: block;
}

.was-validated .form-control:invalid, .form-control.is-invalid {
  border-color: #dd1a1a;
}
.was-validated .form-control:invalid:focus, .form-control.is-invalid:focus {
  border-color: #dd1a1a;
  box-shadow: 0 0 0 0.2rem rgba(221, 26, 26, 0.25);
}

.was-validated .form-select:invalid, .form-select.is-invalid {
  border-color: #dd1a1a;
}
.was-validated .form-select:invalid:focus, .form-select.is-invalid:focus {
  border-color: #dd1a1a;
  box-shadow: 0 0 0 0.2rem rgba(221, 26, 26, 0.25);
}

.was-validated .form-check-input:invalid, .form-check-input.is-invalid {
  border-color: #dd1a1a;
}
.was-validated .form-check-input:invalid:checked, .form-check-input.is-invalid:checked {
  background-color: #dd1a1a;
}
.was-validated .form-check-input:invalid:focus, .form-check-input.is-invalid:focus {
  box-shadow: 0 0 0 0.2rem rgba(221, 26, 26, 0.25);
}
.was-validated .form-check-input:invalid ~ .form-check-label, .form-check-input.is-invalid ~ .form-check-label {
  color: #dd1a1a;
}

.form-check-inline .form-check-input ~ .invalid-feedback {
  margin-left: 0.5em;
}

.was-validated .input-group .form-control:invalid, .input-group .form-control.is-invalid,
.was-validated .input-group .form-select:invalid,
.input-group .form-select.is-invalid {
  z-index: 2;
}
.was-validated .input-group .form-control:invalid:focus, .input-group .form-control.is-invalid:focus,
.was-validated .input-group .form-select:invalid:focus,
.input-group .form-select.is-invalid:focus {
  z-index: 3;
}

.btn {
  display: inline-block;
  padding: 8px 16px;
  padding: 0.5rem 1rem;
  border: 1px solid transparent;
  border-radius: 6px;
  background-color: transparent;
  font-weight: 400;
  font-size: 16px;
  font-size: 1rem;
  line-height: 1.6;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.btn,.btn:hover {
  color: rgb(19, 18, 18);
}
.btn:hover {
  text-decoration: none;
}
.btn-check:focus + .btn, .btn:focus {
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(25, 141, 174, 0.25);
}
.btn:disabled, .btn.disabled, fieldset:disabled .btn {
  opacity: 0.65;
  pointer-events: none;
}

.btn-primary {
  border-color: #198dae;
  background-color: #198dae;
  color: rgb(255, 255, 255);
}
.btn-primary:hover,.btn-check:focus + .btn-primary, .btn-primary:focus {
  border-color: #14718b;
  background-color: #157894;
  color: rgb(255, 255, 255);
}
.btn-check:focus + .btn-primary, .btn-primary:focus {
  box-shadow: 0 0 0 0.2rem rgba(60, 158, 186, 0.5);
}
.btn-check:checked + .btn-primary, .btn-check:active + .btn-primary, .btn-primary:active, .btn-primary.active, .show > .btn-primary.dropdown-toggle {
  border-color: #136a83;
  background-color: #14718b;
  color: rgb(255, 255, 255);
}
.btn-check:checked + .btn-primary:focus, .btn-check:active + .btn-primary:focus, .btn-primary:active:focus, .btn-primary.active:focus, .show > .btn-primary.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(60, 158, 186, 0.5);
}
.btn-primary:disabled, .btn-primary.disabled {
  border-color: #198dae;
  background-color: #198dae;
  color: rgb(255, 255, 255);
}

.btn-secondary {
  border-color: #676a72;
  background-color: #676a72;
  color: rgb(255, 255, 255);
}
.btn-secondary:hover,.btn-check:focus + .btn-secondary, .btn-secondary:focus {
  border-color: #52555b;
  background-color: #585a61;
  color: rgb(255, 255, 255);
}
.btn-check:focus + .btn-secondary, .btn-secondary:focus {
  box-shadow: 0 0 0 0.2rem rgba(126, 128, 135, 0.5);
}
.btn-check:checked + .btn-secondary, .btn-check:active + .btn-secondary, .btn-secondary:active, .btn-secondary.active, .show > .btn-secondary.dropdown-toggle {
  border-color: #4d5056;
  background-color: #52555b;
  color: rgb(255, 255, 255);
}
.btn-check:checked + .btn-secondary:focus, .btn-check:active + .btn-secondary:focus, .btn-secondary:active:focus, .btn-secondary.active:focus, .show > .btn-secondary.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(126, 128, 135, 0.5);
}
.btn-secondary:disabled, .btn-secondary.disabled {
  border-color: #676a72;
  background-color: #676a72;
  color: rgb(255, 255, 255);
}

.btn-success {
  border-color: #078a2e;
  background-color: #078a2e;
  color: rgb(255, 255, 255);
}
.btn-success:hover,.btn-check:focus + .btn-success, .btn-success:focus {
  border-color: #066e25;
  background-color: #067527;
  color: rgb(255, 255, 255);
}
.btn-check:focus + .btn-success, .btn-success:focus {
  box-shadow: 0 0 0 0.2rem rgba(44, 156, 77, 0.5);
}
.btn-check:checked + .btn-success, .btn-check:active + .btn-success, .btn-success:active, .btn-success.active, .show > .btn-success.dropdown-toggle {
  border-color: #056823;
  background-color: #066e25;
  color: rgb(255, 255, 255);
}
.btn-check:checked + .btn-success:focus, .btn-check:active + .btn-success:focus, .btn-success:active:focus, .btn-success.active:focus, .show > .btn-success.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(44, 156, 77, 0.5);
}
.btn-success:disabled, .btn-success.disabled {
  border-color: #078a2e;
  background-color: #078a2e;
  color: rgb(255, 255, 255);
}

.btn-accent {
  border-color: #16a385;
  background-color: #16a385;
  color: rgb(255, 255, 255);
}
.btn-accent:hover,.btn-check:focus + .btn-accent, .btn-accent:focus {
  border-color: #12826a;
  background-color: #138b71;
  color: rgb(255, 255, 255);
}
.btn-check:focus + .btn-accent, .btn-accent:focus {
  box-shadow: 0 0 0 0.2rem rgba(57, 177, 151, 0.5);
}
.btn-check:checked + .btn-accent, .btn-check:active + .btn-accent, .btn-accent:active, .btn-accent.active, .show > .btn-accent.dropdown-toggle {
  border-color: #117a64;
  background-color: #12826a;
  color: rgb(255, 255, 255);
}
.btn-check:checked + .btn-accent:focus, .btn-check:active + .btn-accent:focus, .btn-accent:active:focus, .btn-accent.active:focus, .show > .btn-accent.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(57, 177, 151, 0.5);
}
.btn-accent:disabled, .btn-accent.disabled {
  border-color: #16a385;
  background-color: #16a385;
  color: rgb(255, 255, 255);
}

.btn-info {
  border-color: #a3988c;
  background-color: #a3988c;
  color: rgb(19, 18, 18);
}
.btn-info:hover,.btn-check:focus + .btn-info, .btn-info:focus {
  border-color: #aca298;
  background-color: #b1a79d;
  color: rgb(19, 18, 18);
}
.btn-check:focus + .btn-info, .btn-info:focus {
  box-shadow: 0 0 0 0.2rem rgba(141, 132, 122, 0.5);
}
.btn-check:checked + .btn-info, .btn-check:active + .btn-info, .btn-info:active, .btn-info.active, .show > .btn-info.dropdown-toggle {
  border-color: #aca298;
  background-color: #b5ada3;
  color: rgb(19, 18, 18);
}
.btn-check:checked + .btn-info:focus, .btn-check:active + .btn-info:focus, .btn-info:active:focus, .btn-info.active:focus, .show > .btn-info.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(141, 132, 122, 0.5);
}
.btn-info:disabled, .btn-info.disabled {
  border-color: #a3988c;
  background-color: #a3988c;
  color: rgb(19, 18, 18);
}

.btn-warning {
  border-color: #da8210;
  background-color: #da8210;
  color: rgb(19, 18, 18);
}
.btn-warning:hover,.btn-check:focus + .btn-warning, .btn-warning:focus {
  border-color: #de8f28;
  background-color: #e09534;
  color: rgb(19, 18, 18);
}
.btn-check:focus + .btn-warning, .btn-warning:focus {
  box-shadow: 0 0 0 0.2rem rgba(188, 113, 16, 0.5);
}
.btn-check:checked + .btn-warning, .btn-check:active + .btn-warning, .btn-warning:active, .btn-warning.active, .show > .btn-warning.dropdown-toggle {
  border-color: #de8f28;
  background-color: #e19b40;
  color: rgb(19, 18, 18);
}
.btn-check:checked + .btn-warning:focus, .btn-check:active + .btn-warning:focus, .btn-warning:active:focus, .btn-warning.active:focus, .show > .btn-warning.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(188, 113, 16, 0.5);
}
.btn-warning:disabled, .btn-warning.disabled {
  border-color: #da8210;
  background-color: #da8210;
  color: rgb(19, 18, 18);
}

.btn-alert {
  border-color: #dd1a1a;
  background-color: #dd1a1a;
  color: rgb(255, 255, 255);
}
.btn-alert:hover,.btn-check:focus + .btn-alert, .btn-alert:focus {
  border-color: #b11515;
  background-color: #bc1616;
  color: rgb(255, 255, 255);
}
.btn-check:focus + .btn-alert, .btn-alert:focus {
  box-shadow: 0 0 0 0.2rem rgba(226, 60, 60, 0.5);
}
.btn-check:checked + .btn-alert, .btn-check:active + .btn-alert, .btn-alert:active, .btn-alert.active, .show > .btn-alert.dropdown-toggle {
  border-color: #a61414;
  background-color: #b11515;
  color: rgb(255, 255, 255);
}
.btn-check:checked + .btn-alert:focus, .btn-check:active + .btn-alert:focus, .btn-alert:active:focus, .btn-alert.active:focus, .show > .btn-alert.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(226, 60, 60, 0.5);
}
.btn-alert:disabled, .btn-alert.disabled {
  border-color: #dd1a1a;
  background-color: #dd1a1a;
  color: rgb(255, 255, 255);
}

.btn-outline-primary {
  border-color: #198dae;
  color: #198dae;
}
.btn-outline-primary:hover {
  border-color: #198dae;
  background-color: #198dae;
  color: rgb(255, 255, 255);
}
.btn-check:focus + .btn-outline-primary, .btn-outline-primary:focus {
  box-shadow: 0 0 0 0.2rem rgba(25, 141, 174, 0.5);
}
.btn-check:checked + .btn-outline-primary, .btn-check:active + .btn-outline-primary, .btn-outline-primary:active, .btn-outline-primary.active, .btn-outline-primary.dropdown-toggle.show {
  border-color: #198dae;
  background-color: #198dae;
  color: rgb(255, 255, 255);
}
.btn-check:checked + .btn-outline-primary:focus, .btn-check:active + .btn-outline-primary:focus, .btn-outline-primary:active:focus, .btn-outline-primary.active:focus, .btn-outline-primary.dropdown-toggle.show:focus {
  box-shadow: 0 0 0 0.2rem rgba(25, 141, 174, 0.5);
}
.btn-outline-primary:disabled, .btn-outline-primary.disabled {
  background-color: transparent;
  color: #198dae;
}

.btn-outline-secondary {
  border-color: #676a72;
  color: #676a72;
}
.btn-outline-secondary:hover {
  border-color: #676a72;
  background-color: #676a72;
  color: rgb(255, 255, 255);
}
.btn-check:focus + .btn-outline-secondary, .btn-outline-secondary:focus {
  box-shadow: 0 0 0 0.2rem rgba(103, 106, 114, 0.5);
}
.btn-check:checked + .btn-outline-secondary, .btn-check:active + .btn-outline-secondary, .btn-outline-secondary:active, .btn-outline-secondary.active, .btn-outline-secondary.dropdown-toggle.show {
  border-color: #676a72;
  background-color: #676a72;
  color: rgb(255, 255, 255);
}
.btn-check:checked + .btn-outline-secondary:focus, .btn-check:active + .btn-outline-secondary:focus, .btn-outline-secondary:active:focus, .btn-outline-secondary.active:focus, .btn-outline-secondary.dropdown-toggle.show:focus {
  box-shadow: 0 0 0 0.2rem rgba(103, 106, 114, 0.5);
}
.btn-outline-secondary:disabled, .btn-outline-secondary.disabled {
  background-color: transparent;
  color: #676a72;
}

.btn-outline-success {
  border-color: #078a2e;
  color: #078a2e;
}
.btn-outline-success:hover {
  border-color: #078a2e;
  background-color: #078a2e;
  color: rgb(255, 255, 255);
}
.btn-check:focus + .btn-outline-success, .btn-outline-success:focus {
  box-shadow: 0 0 0 0.2rem rgba(7, 138, 46, 0.5);
}
.btn-check:checked + .btn-outline-success, .btn-check:active + .btn-outline-success, .btn-outline-success:active, .btn-outline-success.active, .btn-outline-success.dropdown-toggle.show {
  border-color: #078a2e;
  background-color: #078a2e;
  color: rgb(255, 255, 255);
}
.btn-check:checked + .btn-outline-success:focus, .btn-check:active + .btn-outline-success:focus, .btn-outline-success:active:focus, .btn-outline-success.active:focus, .btn-outline-success.dropdown-toggle.show:focus {
  box-shadow: 0 0 0 0.2rem rgba(7, 138, 46, 0.5);
}
.btn-outline-success:disabled, .btn-outline-success.disabled {
  background-color: transparent;
  color: #078a2e;
}

.btn-outline-accent {
  border-color: #16a385;
  color: #16a385;
}
.btn-outline-accent:hover {
  border-color: #16a385;
  background-color: #16a385;
  color: rgb(255, 255, 255);
}
.btn-check:focus + .btn-outline-accent, .btn-outline-accent:focus {
  box-shadow: 0 0 0 0.2rem rgba(22, 163, 133, 0.5);
}
.btn-check:checked + .btn-outline-accent, .btn-check:active + .btn-outline-accent, .btn-outline-accent:active, .btn-outline-accent.active, .btn-outline-accent.dropdown-toggle.show {
  border-color: #16a385;
  background-color: #16a385;
  color: rgb(255, 255, 255);
}
.btn-check:checked + .btn-outline-accent:focus, .btn-check:active + .btn-outline-accent:focus, .btn-outline-accent:active:focus, .btn-outline-accent.active:focus, .btn-outline-accent.dropdown-toggle.show:focus {
  box-shadow: 0 0 0 0.2rem rgba(22, 163, 133, 0.5);
}
.btn-outline-accent:disabled, .btn-outline-accent.disabled {
  background-color: transparent;
  color: #16a385;
}

.btn-outline-info {
  border-color: #a3988c;
  color: #a3988c;
}
.btn-outline-info:hover {
  border-color: #a3988c;
  background-color: #a3988c;
  color: rgb(19, 18, 18);
}
.btn-check:focus + .btn-outline-info, .btn-outline-info:focus {
  box-shadow: 0 0 0 0.2rem rgba(163, 152, 140, 0.5);
}
.btn-check:checked + .btn-outline-info, .btn-check:active + .btn-outline-info, .btn-outline-info:active, .btn-outline-info.active, .btn-outline-info.dropdown-toggle.show {
  border-color: #a3988c;
  background-color: #a3988c;
  color: rgb(19, 18, 18);
}
.btn-check:checked + .btn-outline-info:focus, .btn-check:active + .btn-outline-info:focus, .btn-outline-info:active:focus, .btn-outline-info.active:focus, .btn-outline-info.dropdown-toggle.show:focus {
  box-shadow: 0 0 0 0.2rem rgba(163, 152, 140, 0.5);
}
.btn-outline-info:disabled, .btn-outline-info.disabled {
  background-color: transparent;
  color: #a3988c;
}

.btn-outline-warning {
  border-color: #da8210;
  color: #da8210;
}
.btn-outline-warning:hover {
  border-color: #da8210;
  background-color: #da8210;
  color: rgb(19, 18, 18);
}
.btn-check:focus + .btn-outline-warning, .btn-outline-warning:focus {
  box-shadow: 0 0 0 0.2rem rgba(218, 130, 16, 0.5);
}
.btn-check:checked + .btn-outline-warning, .btn-check:active + .btn-outline-warning, .btn-outline-warning:active, .btn-outline-warning.active, .btn-outline-warning.dropdown-toggle.show {
  border-color: #da8210;
  background-color: #da8210;
  color: rgb(19, 18, 18);
}
.btn-check:checked + .btn-outline-warning:focus, .btn-check:active + .btn-outline-warning:focus, .btn-outline-warning:active:focus, .btn-outline-warning.active:focus, .btn-outline-warning.dropdown-toggle.show:focus {
  box-shadow: 0 0 0 0.2rem rgba(218, 130, 16, 0.5);
}
.btn-outline-warning:disabled, .btn-outline-warning.disabled {
  background-color: transparent;
  color: #da8210;
}

.btn-outline-alert {
  border-color: #dd1a1a;
  color: #dd1a1a;
}
.btn-outline-alert:hover {
  border-color: #dd1a1a;
  background-color: #dd1a1a;
  color: rgb(255, 255, 255);
}
.btn-check:focus + .btn-outline-alert, .btn-outline-alert:focus {
  box-shadow: 0 0 0 0.2rem rgba(221, 26, 26, 0.5);
}
.btn-check:checked + .btn-outline-alert, .btn-check:active + .btn-outline-alert, .btn-outline-alert:active, .btn-outline-alert.active, .btn-outline-alert.dropdown-toggle.show {
  border-color: #dd1a1a;
  background-color: #dd1a1a;
  color: rgb(255, 255, 255);
}
.btn-check:checked + .btn-outline-alert:focus, .btn-check:active + .btn-outline-alert:focus, .btn-outline-alert:active:focus, .btn-outline-alert.active:focus, .btn-outline-alert.dropdown-toggle.show:focus {
  box-shadow: 0 0 0 0.2rem rgba(221, 26, 26, 0.5);
}
.btn-outline-alert:disabled, .btn-outline-alert.disabled {
  background-color: transparent;
  color: #dd1a1a;
}

.btn-link {
  color: #198dae;
  font-weight: 400;
  text-decoration: none;
}
.btn-link:hover {
  color: #12637a;
}
.btn-link:hover,.btn-link:focus {
  text-decoration: underline;
}
.btn-link:disabled, .btn-link.disabled {
  color: #898989;
}

.btn-lg, .btn-group-lg > .btn {
  padding: 8px 16px;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  font-size: 20.25px;
  font-size: 1.265625rem;
}

.btn-sm, .btn-group-sm > .btn {
  padding: 4px 8px;
  padding: 0.25rem 0.5rem;
  border-radius: 3px;
  font-size: 14.222px;
  font-size: 0.8888888889rem;
}

.fade:not(.show) {
  opacity: 0;
}

.collapse:not(.show) {
  display: none;
}

.collapsing {
  height: 0;
  overflow: hidden;
}
.collapsing.collapse-horizontal {
  width: 0;
  height: auto;
}

.dropup,
.dropend,
.dropdown,
.dropstart {
  position: relative;
}

.dropdown-toggle {
  white-space: nowrap;
}
.dropdown-toggle::after {
  display: inline-block;
  margin-left: 0.255em;
  border-top: 0.3em solid;
  border-right: 0.3em solid transparent;
  border-bottom: 0;
  border-left: 0.3em solid transparent;
  content: "";
  vertical-align: 0.255em;
}
.dropdown-toggle:empty::after {
  margin-left: 0;
}

.dropdown-menu {
  display: none;
  z-index: 1000;
  position: absolute;
  min-width: 160px;
  min-width: 10rem;
  margin: 0;
  padding: 8px 0;
  padding: 0.5rem 0;
  border: 1px solid rgba(19, 18, 18, 0.15);
  border-radius: 6px;
  background-clip: padding-box;
  background-color: rgb(255, 255, 255);
  color: rgb(19, 18, 18);
  font-size: 16px;
  font-size: 1rem;
  list-style: none;
  text-align: left;
}
.dropdown-menu[data-bs-popper] {
  top: 100%;
  left: 0;
  margin-top: 2px;
  margin-top: 0.125rem;
}

.dropdown-menu-start {
  --bs-position: start;
}
.dropdown-menu-start[data-bs-popper] {
  right: auto;
  left: 0;
}

.dropdown-menu-end {
  --bs-position: end;
}
.dropdown-menu-end[data-bs-popper] {
  right: 0;
  left: auto;
}

@media (min-width: 460px) {
  .dropdown-menu-sm-start {
    --bs-position: start;
  }
  .dropdown-menu-sm-start[data-bs-popper] {
    right: auto;
    left: 0;
  }
  .dropdown-menu-sm-end {
    --bs-position: end;
  }
  .dropdown-menu-sm-end[data-bs-popper] {
    right: 0;
    left: auto;
  }
}
@media (min-width: 768px) {
  .dropdown-menu-md-start {
    --bs-position: start;
  }
  .dropdown-menu-md-start[data-bs-popper] {
    right: auto;
    left: 0;
  }
  .dropdown-menu-md-end {
    --bs-position: end;
  }
  .dropdown-menu-md-end[data-bs-popper] {
    right: 0;
    left: auto;
  }
}
@media (min-width: 1024px) {
  .dropdown-menu-lg-start {
    --bs-position: start;
  }
  .dropdown-menu-lg-start[data-bs-popper] {
    right: auto;
    left: 0;
  }
  .dropdown-menu-lg-end {
    --bs-position: end;
  }
  .dropdown-menu-lg-end[data-bs-popper] {
    right: 0;
    left: auto;
  }
}
@media (min-width: 1200px) {
  .dropdown-menu-xl-start {
    --bs-position: start;
  }
  .dropdown-menu-xl-start[data-bs-popper] {
    right: auto;
    left: 0;
  }
  .dropdown-menu-xl-end {
    --bs-position: end;
  }
  .dropdown-menu-xl-end[data-bs-popper] {
    right: 0;
    left: auto;
  }
}
.dropup .dropdown-menu[data-bs-popper] {
  top: auto;
  bottom: 100%;
  margin-top: 0;
  margin-bottom: 2px;
  margin-bottom: 0.125rem;
}
.dropup .dropdown-toggle::after {
  display: inline-block;
  margin-left: 0.255em;
  border-top: 0;
  border-right: 0.3em solid transparent;
  border-bottom: 0.3em solid;
  border-left: 0.3em solid transparent;
  content: "";
  vertical-align: 0.255em;
}
.dropup .dropdown-toggle:empty::after {
  margin-left: 0;
}

.dropend .dropdown-menu[data-bs-popper] {
  top: 0;
  right: auto;
  left: 100%;
  margin-top: 0;
  margin-left: 2px;
  margin-left: 0.125rem;
}
.dropend .dropdown-toggle::after {
  display: inline-block;
  margin-left: 0.255em;
  border-top: 0.3em solid transparent;
  border-right: 0;
  border-bottom: 0.3em solid transparent;
  border-left: 0.3em solid;
  content: "";
  vertical-align: 0.255em;
}
.dropend .dropdown-toggle:empty::after {
  margin-left: 0;
}
.dropend .dropdown-toggle::after {
  vertical-align: 0;
}

.dropstart .dropdown-menu[data-bs-popper] {
  top: 0;
  right: 100%;
  left: auto;
  margin-top: 0;
  margin-right: 2px;
  margin-right: 0.125rem;
}
.dropstart .dropdown-toggle::after {
  display: inline-block;
  margin-left: 0.255em;
  content: "";
  vertical-align: 0.255em;
  display: none;
}
.dropstart .dropdown-toggle::before {
  display: inline-block;
  margin-right: 0.255em;
  border-top: 0.3em solid transparent;
  border-right: 0.3em solid;
  border-bottom: 0.3em solid transparent;
  content: "";
  vertical-align: 0.255em;
}
.dropstart .dropdown-toggle:empty::after {
  margin-left: 0;
}
.dropstart .dropdown-toggle::before {
  vertical-align: 0;
}

.dropdown-divider {
  height: 0;
  margin: 8px 0;
  margin: 0.5rem 0;
  overflow: hidden;
  border-top: 1px solid rgba(19, 18, 18, 0.15);
}

.dropdown-item {
  display: block;
  width: 100%;
  padding: 4px 16px;
  padding: 0.25rem 1rem;
  clear: both;
  border: 0;
  background-color: transparent;
  color: #e7e7e7;
  font-weight: 400;
  text-align: inherit;
  white-space: nowrap;
}
.dropdown-item:hover, .dropdown-item:focus {
  background-color: hsla(var(--accent-h), calc(var(--accent-s) + (100% - var(--accent-s)) * 0.03), calc(var(--accent-l) - var(--accent-l) * 0.3), 1);
  color: #d0d0d0;
  text-decoration: none;
}
.dropdown-item.active, .dropdown-item:active {
  background-color: #198dae;
  color: rgb(255, 255, 255);
  text-decoration: none;
}
.dropdown-item.disabled, .dropdown-item:disabled {
  background-color: transparent;
  color: #898989;
  pointer-events: none;
}

.dropdown-menu.show,.dropdown-header {
  display: block;
}

.dropdown-header {
  margin-bottom: 0;
  padding: 8px 16px;
  padding: 0.5rem 1rem;
  color: #a1a0a0;
  font-size: 14.222px;
  font-size: 0.8888888889rem;
  white-space: nowrap;
}

.dropdown-item-text {
  display: block;
  padding: 4px 16px;
  padding: 0.25rem 1rem;
  color: #e7e7e7;
}

.dropdown-menu-dark {
  border-color: rgba(19, 18, 18, 0.15);
  background-color: #d0d0d0;
  color: #5a5959;
}
.dropdown-menu-dark .dropdown-item {
  color: #5a5959;
}
.dropdown-menu-dark .dropdown-item:hover, .dropdown-menu-dark .dropdown-item:focus {
  background-color: rgba(255, 255, 255, 0.15);
  color: rgb(255, 255, 255);
}
.dropdown-menu-dark .dropdown-item.active, .dropdown-menu-dark .dropdown-item:active {
  background-color: #198dae;
  color: rgb(255, 255, 255);
}
.dropdown-menu-dark .dropdown-item.disabled, .dropdown-menu-dark .dropdown-item:disabled {
  color: #5a5959;
}
.dropdown-menu-dark .dropdown-divider {
  border-color: rgba(19, 18, 18, 0.15);
}
.dropdown-menu-dark .dropdown-item-text {
  color: #5a5959;
}
.dropdown-menu-dark .dropdown-header {
  color: #898989;
}

.btn-group,
.btn-group-vertical {
  display: inline-flex;
  position: relative;
  vertical-align: middle;
}
.btn-group > .btn,
.btn-group-vertical > .btn {
  position: relative;
  flex: 1 1 auto;
}
.btn-group > .btn-check:checked + .btn,
.btn-group > .btn-check:focus + .btn,
.btn-group > .btn:hover,
.btn-group > .btn:focus,
.btn-group > .btn:active,
.btn-group > .btn.active,
.btn-group-vertical > .btn-check:checked + .btn,
.btn-group-vertical > .btn-check:focus + .btn,
.btn-group-vertical > .btn:hover,
.btn-group-vertical > .btn:focus,
.btn-group-vertical > .btn:active,
.btn-group-vertical > .btn.active {
  z-index: 1;
}

.btn-toolbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}
.btn-toolbar .input-group {
  width: auto;
}

.btn-group > .btn:not(:first-child),
.btn-group > .btn-group:not(:first-child) {
  margin-left: -1px;
}
.btn-group > .btn:not(:last-child):not(.dropdown-toggle),
.btn-group > .btn-group:not(:last-child) > .btn {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.btn-group > .btn:nth-child(n+3),
.btn-group > :not(.btn-check) + .btn,
.btn-group > .btn-group:not(:first-child) > .btn {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.dropdown-toggle-split {
  padding-right: 12px;
  padding-right: 0.75rem;
  padding-left: 12px;
  padding-left: 0.75rem;
}
.dropdown-toggle-split::after, .dropup .dropdown-toggle-split::after, .dropend .dropdown-toggle-split::after {
  margin-left: 0;
}
.dropstart .dropdown-toggle-split::before {
  margin-right: 0;
}

.btn-sm + .dropdown-toggle-split, .btn-group-sm > .btn + .dropdown-toggle-split {
  padding-right: 6px;
  padding-right: 0.375rem;
  padding-left: 6px;
  padding-left: 0.375rem;
}

.btn-lg + .dropdown-toggle-split, .btn-group-lg > .btn + .dropdown-toggle-split {
  padding-right: 12px;
  padding-right: 0.75rem;
  padding-left: 12px;
  padding-left: 0.75rem;
}

.btn-group-vertical {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}
.btn-group-vertical > .btn,
.btn-group-vertical > .btn-group {
  width: 100%;
}
.btn-group-vertical > .btn:not(:first-child),
.btn-group-vertical > .btn-group:not(:first-child) {
  margin-top: -1px;
}
.btn-group-vertical > .btn:not(:last-child):not(.dropdown-toggle),
.btn-group-vertical > .btn-group:not(:last-child) > .btn {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
.btn-group-vertical > .btn ~ .btn,
.btn-group-vertical > .btn-group:not(:first-child) > .btn {
  border-top-right-radius: 0;
  border-top-left-radius: 0;
}

.nav {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 0;
  padding-left: 0;
  list-style: none;
}

.nav-link {
  display: block;
  padding: 8px 16px;
  padding: 0.5rem 1rem;
  color: #198dae;
}
.nav-link:hover, .nav-link:focus {
  color: #12637a;
  text-decoration: none;
}
.nav-link.disabled {
  color: #898989;
  cursor: default;
  pointer-events: none;
}

.nav-tabs {
  border-bottom: 1px solid #5a5959;
}
.nav-tabs .nav-link {
  margin-bottom: -1px;
  border: 1px solid transparent;
  border-top-right-radius: 6px;
  border-top-left-radius: 6px;
  background: none;
}
.nav-tabs .nav-link:hover, .nav-tabs .nav-link:focus {
  border-color: #424141 #424141 #5a5959;
  isolation: isolate;
}
.nav-tabs .nav-link.disabled {
  border-color: transparent;
  background-color: transparent;
  color: #898989;
}
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
  border-color: #5a5959 #5a5959 rgb(255, 255, 255);
  background-color: rgb(255, 255, 255);
  color: #b8b8b8;
}
.nav-tabs .dropdown-menu {
  margin-top: -1px;
  border-top-right-radius: 0;
  border-top-left-radius: 0;
}

.nav-pills .nav-link {
  border: 0;
  border-radius: 6px;
  background: none;
}
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  background-color: #198dae;
  color: rgb(255, 255, 255);
}

.nav-fill > .nav-link,
.nav-fill .nav-item {
  flex: 1 1 auto;
  text-align: center;
}

.nav-justified > .nav-link,
.nav-justified .nav-item {
  flex-grow: 1;
  flex-basis: 0;
  text-align: center;
}

.nav-fill .nav-item .nav-link,
.nav-justified .nav-item .nav-link {
  width: 100%;
}

.tab-content > .tab-pane {
  display: none;
}
.tab-content > .active {
  display: block;
}

.navbar {
  display: flex;
  position: relative;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  padding-top: 8px;
  padding-top: 0.5rem;
  padding-bottom: 8px;
  padding-bottom: 0.5rem;
}
.navbar > .container,
.navbar > .container-fluid,
.navbar > .container-sm,
.navbar > .container-md,
.navbar > .container-lg,
.navbar > .container-xl {
  display: flex;
  flex-wrap: inherit;
  align-items: center;
  justify-content: space-between;
}
.navbar-brand {
  margin-right: 16px;
  margin-right: 1rem;
  padding-top: 4.6px;
  padding-top: 0.2875rem;
  padding-bottom: 4.6px;
  padding-bottom: 0.2875rem;
  font-size: 20.25px;
  font-size: 1.265625rem;
  white-space: nowrap;
}
.navbar-brand:hover, .navbar-brand:focus {
  text-decoration: none;
}

.navbar-nav {
  display: flex;
  flex-direction: column;
  margin-bottom: 0;
  padding-left: 0;
  list-style: none;
}
.navbar-nav .nav-link {
  padding-right: 0;
  padding-left: 0;
}
.navbar-nav .dropdown-menu {
  position: static;
}

.navbar-text {
  padding-top: 8px;
  padding-top: 0.5rem;
  padding-bottom: 8px;
  padding-bottom: 0.5rem;
}

.navbar-collapse {
  flex-grow: 1;
  flex-basis: 100%;
  align-items: center;
}

.navbar-toggler {
  padding: 4px 12px;
  padding: 0.25rem 0.75rem;
  border: 1px solid transparent;
  border-radius: 6px;
  background-color: transparent;
  font-size: 20.25px;
  font-size: 1.265625rem;
  line-height: 1;
}
.navbar-toggler:hover,.navbar-toggler:focus {
  text-decoration: none;
}
.navbar-toggler:focus {
  outline: 0;
  box-shadow: 0 0 0 0.2rem;
}

.navbar-toggler-icon {
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  background-position: center;
  background-size: 100%;
  background-repeat: no-repeat;
  vertical-align: middle;
}

.navbar-nav-scroll {
  max-height: var(--bs-scroll-height, 75vh);
  overflow-y: auto;
}

@media (min-width: 460px) {
  .navbar-expand-sm {
    flex-wrap: nowrap;
    justify-content: flex-start;
  }
  .navbar-expand-sm .navbar-nav {
    flex-direction: row;
  }
  .navbar-expand-sm .navbar-nav .dropdown-menu {
    position: absolute;
  }
  .navbar-expand-sm .navbar-nav .nav-link {
    padding-right: 0.5rem;
    padding-left: 0.5rem;
  }
  .navbar-expand-sm .navbar-nav-scroll {
    overflow: visible;
  }
  .navbar-expand-sm .navbar-collapse {
    display: flex !important;
    flex-basis: auto;
  }
  .navbar-expand-sm .navbar-toggler,.navbar-expand-sm .offcanvas-header {
    display: none;
  }
  .navbar-expand-sm .offcanvas {
    visibility: visible !important;
    z-index: 1000;
    position: inherit;
    bottom: 0;
    flex-grow: 1;
    transform: none;
    border-right: 0;
    border-left: 0;
    background-color: transparent;
  }
  .navbar-expand-sm .offcanvas-top,
  .navbar-expand-sm .offcanvas-bottom {
    height: auto;
    border-top: 0;
    border-bottom: 0;
  }
  .navbar-expand-sm .offcanvas-body {
    display: flex;
    flex-grow: 0;
    padding: 0;
    overflow-y: visible;
  }
}
@media (min-width: 768px) {
  .navbar-expand-md {
    flex-wrap: nowrap;
    justify-content: flex-start;
  }
  .navbar-expand-md .navbar-nav {
    flex-direction: row;
  }
  .navbar-expand-md .navbar-nav .dropdown-menu {
    position: absolute;
  }
  .navbar-expand-md .navbar-nav .nav-link {
    padding-right: 0.5rem;
    padding-left: 0.5rem;
  }
  .navbar-expand-md .navbar-nav-scroll {
    overflow: visible;
  }
  .navbar-expand-md .navbar-collapse {
    display: flex !important;
    flex-basis: auto;
  }
  .navbar-expand-md .navbar-toggler,.navbar-expand-md .offcanvas-header {
    display: none;
  }
  .navbar-expand-md .offcanvas {
    visibility: visible !important;
    z-index: 1000;
    position: inherit;
    bottom: 0;
    flex-grow: 1;
    transform: none;
    border-right: 0;
    border-left: 0;
    background-color: transparent;
  }
  .navbar-expand-md .offcanvas-top,
  .navbar-expand-md .offcanvas-bottom {
    height: auto;
    border-top: 0;
    border-bottom: 0;
  }
  .navbar-expand-md .offcanvas-body {
    display: flex;
    flex-grow: 0;
    padding: 0;
    overflow-y: visible;
  }
}
@media (min-width: 1024px) {
  .navbar-expand-lg {
    flex-wrap: nowrap;
    justify-content: flex-start;
  }
  .navbar-expand-lg .navbar-nav {
    flex-direction: row;
  }
  .navbar-expand-lg .navbar-nav .dropdown-menu {
    position: absolute;
  }
  .navbar-expand-lg .navbar-nav .nav-link {
    padding-right: 0.5rem;
    padding-left: 0.5rem;
  }
  .navbar-expand-lg .navbar-nav-scroll {
    overflow: visible;
  }
  .navbar-expand-lg .navbar-collapse {
    display: flex !important;
    flex-basis: auto;
  }
  .navbar-expand-lg .navbar-toggler,.navbar-expand-lg .offcanvas-header {
    display: none;
  }
  .navbar-expand-lg .offcanvas {
    visibility: visible !important;
    z-index: 1000;
    position: inherit;
    bottom: 0;
    flex-grow: 1;
    transform: none;
    border-right: 0;
    border-left: 0;
    background-color: transparent;
  }
  .navbar-expand-lg .offcanvas-top,
  .navbar-expand-lg .offcanvas-bottom {
    height: auto;
    border-top: 0;
    border-bottom: 0;
  }
  .navbar-expand-lg .offcanvas-body {
    display: flex;
    flex-grow: 0;
    padding: 0;
    overflow-y: visible;
  }
}
@media (min-width: 1200px) {
  .navbar-expand-xl {
    flex-wrap: nowrap;
    justify-content: flex-start;
  }
  .navbar-expand-xl .navbar-nav {
    flex-direction: row;
  }
  .navbar-expand-xl .navbar-nav .dropdown-menu {
    position: absolute;
  }
  .navbar-expand-xl .navbar-nav .nav-link {
    padding-right: 0.5rem;
    padding-left: 0.5rem;
  }
  .navbar-expand-xl .navbar-nav-scroll {
    overflow: visible;
  }
  .navbar-expand-xl .navbar-collapse {
    display: flex !important;
    flex-basis: auto;
  }
  .navbar-expand-xl .navbar-toggler,.navbar-expand-xl .offcanvas-header {
    display: none;
  }
  .navbar-expand-xl .offcanvas {
    visibility: visible !important;
    z-index: 1000;
    position: inherit;
    bottom: 0;
    flex-grow: 1;
    transform: none;
    border-right: 0;
    border-left: 0;
    background-color: transparent;
  }
  .navbar-expand-xl .offcanvas-top,
  .navbar-expand-xl .offcanvas-bottom {
    height: auto;
    border-top: 0;
    border-bottom: 0;
  }
  .navbar-expand-xl .offcanvas-body {
    display: flex;
    flex-grow: 0;
    padding: 0;
    overflow-y: visible;
  }
}
.navbar-expand {
  flex-wrap: nowrap;
  justify-content: flex-start;
}
.navbar-expand .navbar-nav {
  flex-direction: row;
}
.navbar-expand .navbar-nav .dropdown-menu {
  position: absolute;
}
.navbar-expand .navbar-nav .nav-link {
  padding-right: 8px;
  padding-right: 0.5rem;
  padding-left: 8px;
  padding-left: 0.5rem;
}
.navbar-expand .navbar-nav-scroll {
  overflow: visible;
}
.navbar-expand .navbar-collapse {
  display: flex !important;
  flex-basis: auto;
}
.navbar-expand .navbar-toggler,.navbar-expand .offcanvas-header {
  display: none;
}
.navbar-expand .offcanvas {
  visibility: visible !important;
  z-index: 1000;
  position: inherit;
  bottom: 0;
  flex-grow: 1;
  transform: none;
  border-right: 0;
  border-left: 0;
  background-color: transparent;
}
.navbar-expand .offcanvas-top,
.navbar-expand .offcanvas-bottom {
  height: auto;
  border-top: 0;
  border-bottom: 0;
}
.navbar-expand .offcanvas-body {
  display: flex;
  flex-grow: 0;
  padding: 0;
  overflow-y: visible;
}
.navbar-light .navbar-brand,.navbar-light .navbar-brand:hover, .navbar-light .navbar-brand:focus {
  color: rgba(19, 18, 18, 0.9);
}
.navbar-light .navbar-nav .nav-link {
  color: rgba(19, 18, 18, 0.55);
}
.navbar-light .navbar-nav .nav-link:hover, .navbar-light .navbar-nav .nav-link:focus {
  color: rgba(19, 18, 18, 0.7);
}
.navbar-light .navbar-nav .nav-link.disabled {
  color: rgba(19, 18, 18, 0.3);
}
.navbar-light .navbar-nav .show > .nav-link,
.navbar-light .navbar-nav .nav-link.active {
  color: rgba(19, 18, 18, 0.9);
}
.navbar-light .navbar-toggler {
  border-color: rgba(19, 18, 18, 0.1);
  color: rgba(19, 18, 18, 0.55);
}
.navbar-light .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2819, 18, 18, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.navbar-light .navbar-text {
  color: rgba(19, 18, 18, 0.55);
}
.navbar-light .navbar-text a,
.navbar-light .navbar-text a:hover,
.navbar-light .navbar-text a:focus {
  color: rgba(19, 18, 18, 0.9);
}
.navbar-dark .navbar-brand,.navbar-dark .navbar-brand:hover, .navbar-dark .navbar-brand:focus {
  color: rgb(255, 255, 255);
}
.navbar-dark .navbar-nav .nav-link {
  color: white;
}
.navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .nav-link:focus {
  color: var(--acc);
}
.navbar-dark .navbar-nav .nav-link.disabled {
  color: rgba(255, 255, 255, 0.25);
}
.navbar-dark .navbar-nav .show > .nav-link,
.navbar-dark .navbar-nav .nav-link.active {
  color: rgb(255, 255, 255);
}
.navbar-dark .navbar-toggler {
  border-color: rgba(255, 255, 255, 0.1);
  color: white;
}
.navbar-dark .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='white' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.navbar-dark .navbar-text {
  color: white;
}
.navbar-dark .navbar-text a,
.navbar-dark .navbar-text a:hover,
.navbar-dark .navbar-text a:focus {
  color: rgb(255, 255, 255);
}

.card {
  word-wrap: break-word;
  display: flex;
  position: relative;
  flex-direction: column;
  min-width: 0;
  border: 1px solid rgba(19, 18, 18, 0.125);
  border-radius: 6px;
  background-clip: border-box;
  background-color: rgb(255, 255, 255);
}
.card > hr {
  margin-right: 0;
  margin-left: 0;
}
.card > .list-group {
  border-top: inherit;
  border-bottom: inherit;
}
.card > .list-group:first-child {
  border-top-width: 0;
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
}
.card > .list-group:last-child {
  border-bottom-width: 0;
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
}
.card > .card-header + .list-group,
.card > .list-group + .card-footer {
  border-top: 0;
}

.card-body {
  flex: 1 1 auto;
  padding: 16px 16px;
  padding: 1rem 1rem;
}

.card-title {
  margin-bottom: 8px;
  margin-bottom: 0.5rem;
}

.card-subtitle {
  margin-top: -4px;
  margin-top: -0.25rem;
}

.card-subtitle,.card-text:last-child {
  margin-bottom: 0;
}

.card-link:hover {
  text-decoration: none;
}
.card-link + .card-link {
  margin-left: 16px;
  margin-left: 1rem;
}

.card-header {
  margin-bottom: 0;
  padding: 8px 16px;
  padding: 0.5rem 1rem;
  border-bottom: 1px solid rgba(19, 18, 18, 0.125);
  background-color: rgba(19, 18, 18, 0.03);
}
.card-header:first-child {
  border-radius: 5px 5px 0 0;
}

.card-footer {
  padding: 8px 16px;
  padding: 0.5rem 1rem;
  border-top: 1px solid rgba(19, 18, 18, 0.125);
  background-color: rgba(19, 18, 18, 0.03);
}
.card-footer:last-child {
  border-radius: 0 0 5px 5px;
}

.card-header-tabs {
  margin-bottom: -8px;
  margin-bottom: -0.5rem;
  border-bottom: 0;
}

.card-header-tabs,.card-header-pills {
  margin-right: -8px;
  margin-right: -0.5rem;
  margin-left: -8px;
  margin-left: -0.5rem;
}

.card-img-overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 16px;
  padding: 1rem;
  border-radius: 5px;
}

.card-img,
.card-img-top,
.card-img-bottom {
  width: 100%;
}

.card-img,
.card-img-top {
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
}

.card-img,
.card-img-bottom {
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
}

.card-group > .card {
  margin-bottom: 16px;
  margin-bottom: 1rem;
}
@media (min-width: 460px) {
  .card-group {
    display: flex;
    flex-flow: row wrap;
  }
  .card-group > .card {
    flex: 1 0 0%;
    margin-bottom: 0;
  }
  .card-group > .card + .card {
    margin-left: 0;
    border-left: 0;
  }
  .card-group > .card:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
  .card-group > .card:not(:last-child) .card-img-top,
  .card-group > .card:not(:last-child) .card-header {
    border-top-right-radius: 0;
  }
  .card-group > .card:not(:last-child) .card-img-bottom,
  .card-group > .card:not(:last-child) .card-footer {
    border-bottom-right-radius: 0;
  }
  .card-group > .card:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
  .card-group > .card:not(:first-child) .card-img-top,
  .card-group > .card:not(:first-child) .card-header {
    border-top-left-radius: 0;
  }
  .card-group > .card:not(:first-child) .card-img-bottom,
  .card-group > .card:not(:first-child) .card-footer {
    border-bottom-left-radius: 0;
  }
}

.accordion-button {
  display: flex;
  position: relative;
  align-items: center;
  width: 100%;
  padding: 16px 20px;
  padding: 1rem 1.25rem;
  overflow-anchor: none;
  border: 0;
  border-radius: 0;
  background-color: rgb(255, 255, 255);
  color: rgb(19, 18, 18);
  font-size: 16px;
  font-size: 1rem;
  text-align: left;
}
.accordion-button:not(.collapsed) {
  background-color: #e8f4f7;
  box-shadow: inset 0 -1px 0 rgba(19, 18, 18, 0.125);
  color: #177f9d;
}
.accordion-button:not(.collapsed)::after {
  transform: rotate(180deg);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23177f9d'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
.accordion-button::after {
  flex-shrink: 0;
  width: 20px;
  width: 1.25rem;
  height: 20px;
  height: 1.25rem;
  margin-left: auto;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='rgb%2819, 18, 18%29'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  background-size: 1.25rem;
  background-repeat: no-repeat;
  content: "";
}
.accordion-button:hover {
  z-index: 2;
}
.accordion-button:focus {
  z-index: 3;
  border-color: #8cc6d7;
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(25, 141, 174, 0.25);
}

.accordion-header {
  margin-bottom: 0;
}

.accordion-item {
  border: 1px solid rgba(19, 18, 18, 0.125);
  background-color: rgb(255, 255, 255);
}
.accordion-item:first-of-type {
  border-top-right-radius: 6px;
  border-top-left-radius: 6px;
}
.accordion-item:first-of-type .accordion-button {
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
}
.accordion-item:not(:first-of-type) {
  border-top: 0;
}
.accordion-item:last-of-type {
  border-bottom-right-radius: 6px;
  border-bottom-left-radius: 6px;
}
.accordion-item:last-of-type .accordion-button.collapsed {
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
}
.accordion-item:last-of-type .accordion-collapse {
  border-bottom-right-radius: 6px;
  border-bottom-left-radius: 6px;
}

.accordion-body {
  padding: 16px 20px;
  padding: 1rem 1.25rem;
}

.accordion-flush .accordion-collapse {
  border-width: 0;
}
.accordion-flush .accordion-item {
  border-right: 0;
  border-left: 0;
  border-radius: 0;
}
.accordion-flush .accordion-item:first-child {
  border-top: 0;
}
.accordion-flush .accordion-item:last-child {
  border-bottom: 0;
}
.accordion-flush .accordion-item .accordion-button {
  border-radius: 0;
}

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 16px;
  margin-bottom: 1rem;
  padding: 0 0;
  list-style: none;
}

.breadcrumb-item + .breadcrumb-item {
  padding-left: 8px;
  padding-left: 0.5rem;
}
.breadcrumb-item + .breadcrumb-item::before {
  padding-right: 8px;
  padding-right: 0.5rem;
  float: left;
  content: var(--bs-breadcrumb-divider, "/") /* rtl: var(--bs-breadcrumb-divider, "/") */;
  color: #a1a0a0;
}
.breadcrumb-item.active {
  color: #a1a0a0;
}

.pagination {
  display: flex;
  padding-left: 0;
  list-style: none;
}

.page-link {
  display: block;
  position: relative;
  border: 1px solid #5a5959;
  background-color: rgb(255, 255, 255);
  color: #198dae;
}
.page-link:hover {
  z-index: 2;
  border-color: #5a5959;
  text-decoration: none;
}
.page-link:hover,.page-link:focus {
  background-color: #424141;
  color: #12637a;
}
.page-link:focus {
  z-index: 3;
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(25, 141, 174, 0.25);
}

.page-item:not(:first-child) .page-link {
  margin-left: -1px;
}
.page-item.active .page-link {
  z-index: 3;
  border-color: #198dae;
  background-color: #198dae;
  color: rgb(255, 255, 255);
}
.page-item.disabled .page-link {
  border-color: #5a5959;
  background-color: #e7e7e7;
  color: #898989;
  pointer-events: none;
}

.page-link {
  padding: 6px 12px;
  padding: 0.375rem 0.75rem;
}

.page-item:first-child .page-link {
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
}
.page-item:last-child .page-link {
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
}

.pagination-lg .page-link {
  padding: 12px 24px;
  padding: 0.75rem 1.5rem;
  font-size: 20.25px;
  font-size: 1.265625rem;
}
.pagination-lg .page-item:first-child .page-link {
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
}
.pagination-lg .page-item:last-child .page-link {
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
}

.pagination-sm .page-link {
  padding: 4px 8px;
  padding: 0.25rem 0.5rem;
  font-size: 14.222px;
  font-size: 0.8888888889rem;
}
.pagination-sm .page-item:first-child .page-link {
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
}
.pagination-sm .page-item:last-child .page-link {
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
}

.badge {
  display: inline-block;
  padding: 0.35em 0.65em;
  border-radius: 6px;
  color: rgb(255, 255, 255);
  font-weight: 700;
  font-size: 0.75em;
  line-height: 1;
  text-align: center;
  vertical-align: baseline;
  white-space: nowrap;
}
.badge:empty {
  display: none;
}

.btn .badge {
  position: relative;
  top: -1px;
}

.alert {
  position: relative;
  margin-bottom: 16px;
  margin-bottom: 1rem;
  padding: 16px 16px;
  padding: 1rem 1rem;
  border: 1px solid transparent;
  border-radius: 6px;
}

.alert-heading {
  color: inherit;
}

.alert-link {
  font-weight: 700;
}

.alert-dismissible {
  padding-right: 48px;
  padding-right: 3rem;
}
.alert-dismissible .btn-close {
  z-index: 2;
  position: absolute;
  top: 0;
  right: 0;
  padding: 20px 16px;
  padding: 1.25rem 1rem;
}

.alert-primary {
  border-color: #badde7;
  background-color: #d1e8ef;
  color: #0f5568;
}
.alert-primary .alert-link {
  color: #0c4453;
}

.alert-secondary {
  border-color: #d1d2d5;
  background-color: #e1e1e3;
  color: #3e4044;
}
.alert-secondary .alert-link {
  color: #323336;
}

.alert-success {
  border-color: #b5dcc0;
  background-color: #cde8d5;
  color: #04531c;
}
.alert-success .alert-link {
  color: #034216;
}

.alert-accent {
  border-color: #b9e3da;
  background-color: #d0ede7;
  color: #0d6250;
}
.alert-accent .alert-link {
  color: #0a4e40;
}

.alert-info {
  border-color: #e3e0dd;
  background-color: #edeae8;
  color: #625b54;
}
.alert-info .alert-link {
  color: #4e4943;
}

.alert-warning {
  border-color: #f4dab7;
  background-color: #f8e6cf;
  color: #834e0a;
}
.alert-warning .alert-link {
  color: #693e08;
}

.alert-alert {
  border-color: #f5baba;
  background-color: #f8d1d1;
  color: #851010;
}
.alert-alert .alert-link {
  color: #6a0d0d;
}

.progress {
  height: 16px;
  height: 1rem;
  border-radius: 6px;
  background-color: #424141;
  font-size: 12px;
  font-size: 0.75rem;
}

.progress,.progress-bar {
  display: flex;
  overflow: hidden;
}

.progress-bar {
  flex-direction: column;
  justify-content: center;
  background-color: #198dae;
  color: rgb(255, 255, 255);
  text-align: center;
  white-space: nowrap;
}

.progress-bar-striped {
  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-size: 1rem 1rem;
}

.list-group {
  display: flex;
  flex-direction: column;
  margin-bottom: 0;
  padding-left: 0;
  border-radius: 6px;
}

.list-group-numbered {
  list-style-type: none;
  counter-reset: section;
}
.list-group-numbered > li::before {
  content: counters(section, ".") ". ";
  counter-increment: section;
}

.list-group-item-action {
  width: 100%;
  color: #b8b8b8;
  text-align: inherit;
}
.list-group-item-action:hover, .list-group-item-action:focus {
  z-index: 1;
  background-color: #2b2a2a;
  color: #b8b8b8;
  text-decoration: none;
}
.list-group-item-action:active {
  background-color: #424141;
  color: rgb(19, 18, 18);
}

.list-group-item {
  display: block;
  position: relative;
  padding: 8px 16px;
  padding: 0.5rem 1rem;
  border: 1px solid rgba(19, 18, 18, 0.125);
  background-color: rgb(255, 255, 255);
  color: hsla(var(--primary-h), calc(var(--primary-s) + (100% - var(--primary-s)) * 0.07), calc(var(--primary-l) - var(--primary-l) * 0.7), 1);
}
.list-group-item:first-child {
  border-top-right-radius: inherit;
  border-top-left-radius: inherit;
}
.list-group-item:last-child {
  border-bottom-right-radius: inherit;
  border-bottom-left-radius: inherit;
}
.list-group-item.disabled, .list-group-item:disabled {
  background-color: #e7e7e7;
  color: #898989;
  pointer-events: none;
}
.list-group-item.active {
  z-index: 2;
  border-color: #198dae;
  background-color: #198dae;
  color: rgb(255, 255, 255);
}
.list-group-item + .list-group-item {
  border-top-width: 0;
}
.list-group-item + .list-group-item.active {
  margin-top: -1px;
  border-top-width: 1px;
}

.list-group-horizontal {
  flex-direction: row;
}
.list-group-horizontal > .list-group-item:first-child {
  border-top-right-radius: 0;
  border-bottom-left-radius: 6px;
}
.list-group-horizontal > .list-group-item:last-child {
  border-top-right-radius: 6px;
  border-bottom-left-radius: 0;
}
.list-group-horizontal > .list-group-item.active {
  margin-top: 0;
}
.list-group-horizontal > .list-group-item + .list-group-item {
  border-top-width: 1px;
  border-left-width: 0;
}
.list-group-horizontal > .list-group-item + .list-group-item.active {
  margin-left: -1px;
  border-left-width: 1px;
}

@media (min-width: 460px) {
  .list-group-horizontal-sm {
    flex-direction: row;
  }
  .list-group-horizontal-sm > .list-group-item:first-child {
    border-top-right-radius: 0;
    border-bottom-left-radius: 6px;
  }
  .list-group-horizontal-sm > .list-group-item:last-child {
    border-top-right-radius: 6px;
    border-bottom-left-radius: 0;
  }
  .list-group-horizontal-sm > .list-group-item.active {
    margin-top: 0;
  }
  .list-group-horizontal-sm > .list-group-item + .list-group-item {
    border-top-width: 1px;
    border-left-width: 0;
  }
  .list-group-horizontal-sm > .list-group-item + .list-group-item.active {
    margin-left: -1px;
    border-left-width: 1px;
  }
}
@media (min-width: 768px) {
  .list-group-horizontal-md {
    flex-direction: row;
  }
  .list-group-horizontal-md > .list-group-item:first-child {
    border-top-right-radius: 0;
    border-bottom-left-radius: 6px;
  }
  .list-group-horizontal-md > .list-group-item:last-child {
    border-top-right-radius: 6px;
    border-bottom-left-radius: 0;
  }
  .list-group-horizontal-md > .list-group-item.active {
    margin-top: 0;
  }
  .list-group-horizontal-md > .list-group-item + .list-group-item {
    border-top-width: 1px;
    border-left-width: 0;
  }
  .list-group-horizontal-md > .list-group-item + .list-group-item.active {
    margin-left: -1px;
    border-left-width: 1px;
  }
}
@media (min-width: 1024px) {
  .list-group-horizontal-lg {
    flex-direction: row;
  }
  .list-group-horizontal-lg > .list-group-item:first-child {
    border-top-right-radius: 0;
    border-bottom-left-radius: 6px;
  }
  .list-group-horizontal-lg > .list-group-item:last-child {
    border-top-right-radius: 6px;
    border-bottom-left-radius: 0;
  }
  .list-group-horizontal-lg > .list-group-item.active {
    margin-top: 0;
  }
  .list-group-horizontal-lg > .list-group-item + .list-group-item {
    border-top-width: 1px;
    border-left-width: 0;
  }
  .list-group-horizontal-lg > .list-group-item + .list-group-item.active {
    margin-left: -1px;
    border-left-width: 1px;
  }
}
@media (min-width: 1200px) {
  .list-group-horizontal-xl {
    flex-direction: row;
  }
  .list-group-horizontal-xl > .list-group-item:first-child {
    border-top-right-radius: 0;
    border-bottom-left-radius: 6px;
  }
  .list-group-horizontal-xl > .list-group-item:last-child {
    border-top-right-radius: 6px;
    border-bottom-left-radius: 0;
  }
  .list-group-horizontal-xl > .list-group-item.active {
    margin-top: 0;
  }
  .list-group-horizontal-xl > .list-group-item + .list-group-item {
    border-top-width: 1px;
    border-left-width: 0;
  }
  .list-group-horizontal-xl > .list-group-item + .list-group-item.active {
    margin-left: -1px;
    border-left-width: 1px;
  }
}
.list-group-flush {
  border-radius: 0;
}
.list-group-flush > .list-group-item {
  border-width: 0 0 1px;
}
.list-group-flush > .list-group-item:last-child {
  border-bottom-width: 0;
}

.list-group-item-primary {
  background-color: #d1e8ef;
  color: #051c23;
}
.list-group-item-primary.list-group-item-action:hover, .list-group-item-primary.list-group-item-action:focus {
  background-color: #bcd1d7;
  color: #051c23;
}
.list-group-item-primary.list-group-item-action.active {
  border-color: #051c23;
  background-color: #051c23;
  color: rgb(255, 255, 255);
}

.list-group-item-secondary {
  background-color: #e1e1e3;
  color: #151517;
}
.list-group-item-secondary.list-group-item-action:hover, .list-group-item-secondary.list-group-item-action:focus {
  background-color: #cbcbcc;
  color: #151517;
}
.list-group-item-secondary.list-group-item-action.active {
  border-color: #151517;
  background-color: #151517;
  color: rgb(255, 255, 255);
}

.list-group-item-success {
  background-color: #cde8d5;
  color: #011c09;
}
.list-group-item-success.list-group-item-action:hover, .list-group-item-success.list-group-item-action:focus {
  background-color: #b9d1c0;
  color: #011c09;
}
.list-group-item-success.list-group-item-action.active {
  border-color: #011c09;
  background-color: #011c09;
  color: rgb(255, 255, 255);
}

.list-group-item-accent {
  background-color: #d0ede7;
  color: #04211b;
}
.list-group-item-accent.list-group-item-action:hover, .list-group-item-accent.list-group-item-action:focus {
  background-color: #bbd5d0;
  color: #04211b;
}
.list-group-item-accent.list-group-item-action.active {
  border-color: #04211b;
  background-color: #04211b;
  color: rgb(255, 255, 255);
}

.list-group-item-info {
  background-color: #edeae8;
  color: #211e1c;
}
.list-group-item-info.list-group-item-action:hover, .list-group-item-info.list-group-item-action:focus {
  background-color: #d5d3d1;
  color: #211e1c;
}
.list-group-item-info.list-group-item-action.active {
  border-color: #211e1c;
  background-color: #211e1c;
  color: rgb(255, 255, 255);
}

.list-group-item-warning {
  background-color: #f8e6cf;
  color: #2c1a03;
}
.list-group-item-warning.list-group-item-action:hover, .list-group-item-warning.list-group-item-action:focus {
  background-color: #dfcfba;
  color: #2c1a03;
}
.list-group-item-warning.list-group-item-action.active {
  border-color: #2c1a03;
  background-color: #2c1a03;
  color: rgb(255, 255, 255);
}

.list-group-item-alert {
  background-color: #f8d1d1;
  color: #2c0505;
}
.list-group-item-alert.list-group-item-action:hover, .list-group-item-alert.list-group-item-action:focus {
  background-color: #dfbcbc;
  color: #2c0505;
}
.list-group-item-alert.list-group-item-action.active {
  border-color: #2c0505;
  background-color: #2c0505;
  color: rgb(255, 255, 255);
}

.btn-close {
  box-sizing: content-box;
  width: 1em;
  height: 1em;
  padding: 0.25em 0.25em;
  border: 0;
  border-radius: 6px;
  background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='rgb%2819, 18, 18%29'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
  color: rgb(19, 18, 18);
  opacity: 0.5;
}
.btn-close:hover {
  color: rgb(19, 18, 18);
  text-decoration: none;
  opacity: 0.75;
}
.btn-close:focus {
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(25, 141, 174, 0.25);
  opacity: 1;
}
.btn-close:disabled, .btn-close.disabled {
  opacity: 0.25;
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.btn-close-white {
  filter: invert(1) grayscale(100%) brightness(200%);
}

.toast {
  width: 350px;
  max-width: 100%;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 6px;
  background-clip: padding-box;
  background-color: rgba(255, 255, 255, 0.85);
  box-shadow: "0 1px 10px rgba(0 0 0 / 5%), 0 2px 4px rgba(0 0 0 /15%), 1px 5px 5px rgba(18 56 136 / 5%)";
  font-size: 14px;
  font-size: 0.875rem;
  pointer-events: auto;
}
.toast.showing {
  opacity: 0;
}
.toast:not(.show) {
  display: none;
}

.toast-container {
  width: -moz-max-content;
  width: max-content;
  max-width: 100%;
  pointer-events: none;
}
.toast-container > :not(:last-child) {
  margin-bottom: 16px;
  margin-bottom: 1rem;
}

.toast-header {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
  background-clip: padding-box;
  background-color: rgba(255, 255, 255, 0.85);
  color: #a1a0a0;
}
.toast-header .btn-close {
  margin-right: -6px;
  margin-right: -0.375rem;
  margin-left: 12px;
  margin-left: 0.75rem;
}

.toast-body {
  word-wrap: break-word;
  padding: 12px;
  padding: 0.75rem;
}

.modal {
  display: none;
  z-index: 1050;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  outline: 0;
}

.modal-dialog {
  position: relative;
  width: auto;
  margin: 8px;
  margin: 0.5rem;
  pointer-events: none;
}
.modal.fade .modal-dialog {
  transform: translate(0, -50px);
}
.modal.show .modal-dialog {
  transform: none;
}
.modal.modal-static .modal-dialog {
  transform: scale(1.02);
}

.modal-dialog-scrollable {
  height: calc(100% - 1rem);
}
.modal-dialog-scrollable .modal-content {
  max-height: 100%;
  overflow: hidden;
}
.modal-dialog-scrollable .modal-body {
  overflow-y: auto;
}

.modal-dialog-centered {
  display: flex;
  align-items: center;
  min-height: calc(100% - 1rem);
}

.modal-content {
  display: flex;
  position: relative;
  flex-direction: column;
  width: 100%;
  border: 1px solid rgba(19, 18, 18, 0.2);
  border-radius: 6px;
  outline: 0;
  background-clip: padding-box;
  background-color: rgb(255, 255, 255);
  pointer-events: auto;
}

.modal-backdrop {
  z-index: 1040;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgb(19, 18, 18);
}
.modal-backdrop.fade {
  opacity: 0;
}
.modal-backdrop.show {
  opacity: 0.5;
}

.modal-header {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
  padding: 16px 16px;
  padding: 1rem 1rem;
  border-bottom: 1px solid hsla(var(--secondary-h), calc(var(--secondary-s) - var(--secondary-s) * 0.45), calc(var(--secondary-l) + (100% - var(--secondary-l)) * 0.9), 1);
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
}
.modal-header .btn-close {
  margin: -8px -8px -8px auto;
  margin: -0.5rem -0.5rem -0.5rem auto;
  padding: 8px 8px;
  padding: 0.5rem 0.5rem;
}

.modal-title {
  margin-bottom: 0;
  line-height: 1.6;
}

.modal-body {
  position: relative;
  flex: 1 1 auto;
  padding: 16px;
  padding: 1rem;
}

.modal-footer {
  display: flex;
  flex-shrink: 0;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  padding: 12px;
  padding: 0.75rem;
  border-top: 1px solid hsla(var(--secondary-h), calc(var(--secondary-s) - var(--secondary-s) * 0.45), calc(var(--secondary-l) + (100% - var(--secondary-l)) * 0.9), 1);
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
}
.modal-footer > * {
  margin: 4px;
  margin: 0.25rem;
}

@media (min-width: 460px) {
  .modal-dialog {
    max-width: 500px;
    margin: 1.75rem auto;
  }
  .modal-dialog-scrollable {
    height: calc(100% - 3.5rem);
  }
  .modal-dialog-centered {
    min-height: calc(100% - 3.5rem);
  }
  .modal-sm {
    max-width: 300px;
  }
}
@media (min-width: 1024px) {
  .modal-lg,
  .modal-xl {
    max-width: 800px;
  }
}
@media (min-width: 1200px) {
  .modal-xl {
    max-width: 1140px;
  }
}
.modal-fullscreen {
  width: 100vw;
  max-width: none;
  height: 100%;
  margin: 0;
}
.modal-fullscreen .modal-content {
  height: 100%;
  border: 0;
  border-radius: 0;
}
.modal-fullscreen .modal-header {
  border-radius: 0;
}
.modal-fullscreen .modal-body {
  overflow-y: auto;
}
.modal-fullscreen .modal-footer {
  border-radius: 0;
}

@media (max-width: 459.98px) {
  .modal-fullscreen-sm-down {
    width: 100vw;
    max-width: none;
    height: 100%;
    margin: 0;
  }
  .modal-fullscreen-sm-down .modal-content {
    height: 100%;
    border: 0;
    border-radius: 0;
  }
  .modal-fullscreen-sm-down .modal-header {
    border-radius: 0;
  }
  .modal-fullscreen-sm-down .modal-body {
    overflow-y: auto;
  }
  .modal-fullscreen-sm-down .modal-footer {
    border-radius: 0;
  }
}
@media (max-width: 767.98px) {
  .modal-fullscreen-md-down {
    width: 100vw;
    max-width: none;
    height: 100%;
    margin: 0;
  }
  .modal-fullscreen-md-down .modal-content {
    height: 100%;
    border: 0;
    border-radius: 0;
  }
  .modal-fullscreen-md-down .modal-header {
    border-radius: 0;
  }
  .modal-fullscreen-md-down .modal-body {
    overflow-y: auto;
  }
  .modal-fullscreen-md-down .modal-footer {
    border-radius: 0;
  }
}
@media (max-width: 1023.98px) {
  .modal-fullscreen-lg-down {
    width: 100vw;
    max-width: none;
    height: 100%;
    margin: 0;
  }
  .modal-fullscreen-lg-down .modal-content {
    height: 100%;
    border: 0;
    border-radius: 0;
  }
  .modal-fullscreen-lg-down .modal-header {
    border-radius: 0;
  }
  .modal-fullscreen-lg-down .modal-body {
    overflow-y: auto;
  }
  .modal-fullscreen-lg-down .modal-footer {
    border-radius: 0;
  }
}
@media (max-width: 1199.98px) {
  .modal-fullscreen-xl-down {
    width: 100vw;
    max-width: none;
    height: 100%;
    margin: 0;
  }
  .modal-fullscreen-xl-down .modal-content {
    height: 100%;
    border: 0;
    border-radius: 0;
  }
  .modal-fullscreen-xl-down .modal-header {
    border-radius: 0;
  }
  .modal-fullscreen-xl-down .modal-body {
    overflow-y: auto;
  }
  .modal-fullscreen-xl-down .modal-footer {
    border-radius: 0;
  }
}
.tooltip {
  word-wrap: break-word;
  display: block;
  z-index: 1070;
  position: absolute;
  margin: 0;
  font-style: normal;
  font-weight: 400;
  font-size: 14.222px;
  font-size: 0.8888888889rem;
  line-height: 1.6;
  font-family: var(--bs-font-sans-serif);
  letter-spacing: normal;
  line-break: auto;
  text-align: left;
  text-align: start;
  text-decoration: none;
  text-shadow: none;
  text-transform: none;
  white-space: normal;
  word-break: normal;
  word-spacing: normal;
  opacity: 0;
}
.tooltip.show {
  opacity: 0.9;
}
.tooltip .tooltip-arrow {
  display: block;
  position: absolute;
  width: 12.8px;
  width: 0.8rem;
  height: 6.4px;
  height: 0.4rem;
}
.tooltip .tooltip-arrow::before {
  position: absolute;
  border-style: solid;
  border-color: transparent;
  content: "";
}

.bs-tooltip-top, .bs-tooltip-auto[data-popper-placement^=top] {
  padding: 6.4px 0;
  padding: 0.4rem 0;
}
.bs-tooltip-top .tooltip-arrow, .bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow {
  bottom: 0;
}
.bs-tooltip-top .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before {
  top: -1px;
  border-width: 6.4px 6.4px 0;
  border-width: 0.4rem 0.4rem 0;
  border-top-color: rgb(19, 18, 18);
}

.bs-tooltip-end, .bs-tooltip-auto[data-popper-placement^=right] {
  padding: 0 6.4px;
  padding: 0 0.4rem;
}
.bs-tooltip-end .tooltip-arrow, .bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow {
  left: 0;
  width: 6.4px;
  width: 0.4rem;
  height: 12.8px;
  height: 0.8rem;
}
.bs-tooltip-end .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow::before {
  right: -1px;
  border-width: 6.4px 6.4px 6.4px 0;
  border-width: 0.4rem 0.4rem 0.4rem 0;
  border-right-color: rgb(19, 18, 18);
}

.bs-tooltip-bottom, .bs-tooltip-auto[data-popper-placement^=bottom] {
  padding: 6.4px 0;
  padding: 0.4rem 0;
}
.bs-tooltip-bottom .tooltip-arrow, .bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow {
  top: 0;
}
.bs-tooltip-bottom .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before {
  bottom: -1px;
  border-width: 0 6.4px 6.4px;
  border-width: 0 0.4rem 0.4rem;
  border-bottom-color: rgb(19, 18, 18);
}

.bs-tooltip-start, .bs-tooltip-auto[data-popper-placement^=left] {
  padding: 0 6.4px;
  padding: 0 0.4rem;
}
.bs-tooltip-start .tooltip-arrow, .bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow {
  right: 0;
  width: 6.4px;
  width: 0.4rem;
  height: 12.8px;
  height: 0.8rem;
}
.bs-tooltip-start .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow::before {
  left: -1px;
  border-width: 6.4px 0 6.4px 6.4px;
  border-width: 0.4rem 0 0.4rem 0.4rem;
  border-left-color: rgb(19, 18, 18);
}

.tooltip-inner {
  max-width: 200px;
  padding: 4px 8px;
  padding: 0.25rem 0.5rem;
  border-radius: 6px;
  background-color: rgb(19, 18, 18);
  color: rgb(255, 255, 255);
  text-align: center;
}

.popover {
  word-wrap: break-word;
  z-index: 1060;
  top: 0;
  left: 0 /* rtl:ignore */;
  max-width: 276px;
  border: 1px solid rgba(19, 18, 18, 0.2);
  border-radius: 6px;
  background-clip: padding-box;
  background-color: rgb(255, 255, 255);
  font-style: normal;
  font-weight: 400;
  font-size: 14.222px;
  font-size: 0.8888888889rem;
  line-height: 1.6;
  font-family: var(--bs-font-sans-serif);
  letter-spacing: normal;
  line-break: auto;
  text-align: left;
  text-align: start;
  text-decoration: none;
  text-shadow: none;
  text-transform: none;
  white-space: normal;
  word-break: normal;
  word-spacing: normal;
}
.popover,.popover .popover-arrow {
  display: block;
  position: absolute;
}
.popover .popover-arrow {
  width: 16px;
  width: 1rem;
  height: 8px;
  height: 0.5rem;
}
.popover .popover-arrow::before, .popover .popover-arrow::after {
  display: block;
  position: absolute;
  border-style: solid;
  border-color: transparent;
  content: "";
}

.bs-popover-top > .popover-arrow, .bs-popover-auto[data-popper-placement^=top] > .popover-arrow {
  bottom: calc(-0.5rem - 1px);
}
.bs-popover-top > .popover-arrow::before, .bs-popover-auto[data-popper-placement^=top] > .popover-arrow::before {
  bottom: 0;
  border-width: 8px 8px 0;
  border-width: 0.5rem 0.5rem 0;
  border-top-color: rgba(19, 18, 18, 0.25);
}
.bs-popover-top > .popover-arrow::after, .bs-popover-auto[data-popper-placement^=top] > .popover-arrow::after {
  bottom: 1px;
  border-width: 8px 8px 0;
  border-width: 0.5rem 0.5rem 0;
  border-top-color: rgb(255, 255, 255);
}

.bs-popover-end > .popover-arrow, .bs-popover-auto[data-popper-placement^=right] > .popover-arrow {
  left: calc(-0.5rem - 1px);
  width: 8px;
  width: 0.5rem;
  height: 16px;
  height: 1rem;
}
.bs-popover-end > .popover-arrow::before, .bs-popover-auto[data-popper-placement^=right] > .popover-arrow::before {
  left: 0;
  border-width: 8px 8px 8px 0;
  border-width: 0.5rem 0.5rem 0.5rem 0;
  border-right-color: rgba(19, 18, 18, 0.25);
}
.bs-popover-end > .popover-arrow::after, .bs-popover-auto[data-popper-placement^=right] > .popover-arrow::after {
  left: 1px;
  border-width: 8px 8px 8px 0;
  border-width: 0.5rem 0.5rem 0.5rem 0;
  border-right-color: rgb(255, 255, 255);
}

.bs-popover-bottom > .popover-arrow, .bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow {
  top: calc(-0.5rem - 1px);
}
.bs-popover-bottom > .popover-arrow::before, .bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow::before {
  top: 0;
  border-width: 0 8px 8px 8px;
  border-width: 0 0.5rem 0.5rem 0.5rem;
  border-bottom-color: rgba(19, 18, 18, 0.25);
}
.bs-popover-bottom > .popover-arrow::after, .bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow::after {
  top: 1px;
  border-width: 0 8px 8px 8px;
  border-width: 0 0.5rem 0.5rem 0.5rem;
  border-bottom-color: rgb(255, 255, 255);
}
.bs-popover-bottom .popover-header::before, .bs-popover-auto[data-popper-placement^=bottom] .popover-header::before {
  display: block;
  position: absolute;
  top: 0;
  left: 50%;
  width: 16px;
  width: 1rem;
  margin-left: -8px;
  margin-left: -0.5rem;
  border-bottom: 1px solid #f0f0f0;
  content: "";
}

.bs-popover-start > .popover-arrow, .bs-popover-auto[data-popper-placement^=left] > .popover-arrow {
  right: calc(-0.5rem - 1px);
  width: 8px;
  width: 0.5rem;
  height: 16px;
  height: 1rem;
}
.bs-popover-start > .popover-arrow::before, .bs-popover-auto[data-popper-placement^=left] > .popover-arrow::before {
  right: 0;
  border-width: 8px 0 8px 8px;
  border-width: 0.5rem 0 0.5rem 0.5rem;
  border-left-color: rgba(19, 18, 18, 0.25);
}
.bs-popover-start > .popover-arrow::after, .bs-popover-auto[data-popper-placement^=left] > .popover-arrow::after {
  right: 1px;
  border-width: 8px 0 8px 8px;
  border-width: 0.5rem 0 0.5rem 0.5rem;
  border-left-color: rgb(255, 255, 255);
}

.popover-header {
  margin-bottom: 0;
  padding: 8px 16px;
  padding: 0.5rem 1rem;
  border-bottom: 1px solid rgba(19, 18, 18, 0.2);
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
  background-color: #f0f0f0;
  font-size: 16px;
  font-size: 1rem;
}
.popover-header:empty {
  display: none;
}

.popover-body {
  padding: 16px 16px;
  padding: 1rem 1rem;
  color: rgb(19, 18, 18);
}

.carousel {
  position: relative;
}

.carousel.pointer-event {
  touch-action: pan-y;
}

.carousel-inner {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.carousel-inner::after {
  display: block;
  clear: both;
  content: "";
}

.carousel-item {
  display: none;
  position: relative;
  width: 100%;
  margin-right: -100%;
  float: left;
  backface-visibility: hidden;
}

.carousel-item.active,
.carousel-item-next,
.carousel-item-prev {
  display: block;
}

/* rtl:begin:ignore */
.carousel-item-next:not(.carousel-item-start),
.active.carousel-item-end {
  transform: translateX(100%);
}

.carousel-item-prev:not(.carousel-item-end),
.active.carousel-item-start {
  transform: translateX(-100%);
}

/* rtl:end:ignore */
.carousel-fade .carousel-item {
  transform: none;
  opacity: 0;
  transition-property: opacity;
}
.carousel-fade .carousel-item.active,
.carousel-fade .carousel-item-next.carousel-item-start,
.carousel-fade .carousel-item-prev.carousel-item-end {
  z-index: 1;
  opacity: 1;
}
.carousel-fade .active.carousel-item-start,
.carousel-fade .active.carousel-item-end {
  z-index: 0;
  opacity: 0;
}

.carousel-control-prev,
.carousel-control-next {
  display: flex;
  z-index: 1;
  position: absolute;
  top: 0;
  bottom: 0;
  align-items: center;
  justify-content: center;
  width: 15%;
  padding: 0;
  border: 0;
  background: none;
  color: rgb(255, 255, 255);
  text-align: center;
  opacity: 0.5;
}
.carousel-control-prev:hover, .carousel-control-prev:focus,
.carousel-control-next:hover,
.carousel-control-next:focus {
  outline: 0;
  color: rgb(255, 255, 255);
  text-decoration: none;
  opacity: 0.9;
}

.carousel-control-prev {
  left: 0;
}

.carousel-control-next {
  right: 0;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
  display: inline-block;
  width: 32px;
  width: 2rem;
  height: 32px;
  height: 2rem;
  background-position: 50%;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

/* rtl:options: {
  "autoRename": true,
  "stringMap":[ {
    "name"    : "prev-next",
    "search"  : "prev",
    "replace" : "next"
  } ]
} */
.carousel-control-prev-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='rgb%28255, 255, 255%29'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e");
}

.carousel-control-next-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='rgb%28255, 255, 255%29'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.carousel-indicators {
  display: flex;
  z-index: 2;
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  justify-content: center;
  margin-right: 15%;
  margin-bottom: 16px;
  margin-bottom: 1rem;
  margin-left: 15%;
  padding: 0;
  list-style: none;
}
.carousel-indicators [data-bs-target] {
  box-sizing: content-box;
  flex: 0 1 auto;
  width: 30px;
  height: 3px;
  margin-right: 3px;
  margin-left: 3px;
  padding: 0;
  border: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  background-clip: padding-box;
  background-color: rgb(255, 255, 255);
  text-indent: -999px;
  cursor: pointer;
  opacity: 0.5;
}
.carousel-indicators .active {
  opacity: 1;
}

.carousel-caption {
  position: absolute;
  right: 15%;
  bottom: 20px;
  bottom: 1.25rem;
  left: 15%;
  padding-top: 20px;
  padding-top: 1.25rem;
  padding-bottom: 20px;
  padding-bottom: 1.25rem;
  color: rgb(255, 255, 255);
  text-align: center;
}

.carousel-dark .carousel-control-prev-icon,
.carousel-dark .carousel-control-next-icon {
  filter: invert(1) grayscale(100);
}
.carousel-dark .carousel-indicators [data-bs-target] {
  background-color: rgb(19, 18, 18);
}
.carousel-dark .carousel-caption {
  color: rgb(19, 18, 18);
}

@keyframes spinner-border {
  to {
    transform: rotate(360deg) /* rtl:ignore */;
  }
}
.spinner-border {
  display: inline-block;
  width: 32px;
  width: 2rem;
  height: 32px;
  height: 2rem;
  border: 0.25em solid currentColor;
  border-radius: 50%;
  border-right-color: transparent;
  vertical-align: -0.125em;
  animation: 0.75s linear infinite spinner-border;
}

.spinner-border-sm {
  width: 16px;
  width: 1rem;
  height: 16px;
  height: 1rem;
  border-width: 0.2em;
}

@keyframes spinner-grow {
  0% {
    transform: scale(0);
  }
  50% {
    transform: none;
    opacity: 1;
  }
}
.spinner-grow {
  display: inline-block;
  width: 32px;
  width: 2rem;
  height: 32px;
  height: 2rem;
  border-radius: 50%;
  background-color: currentColor;
  vertical-align: -0.125em;
  animation: 0.75s linear infinite spinner-grow;
  opacity: 0;
}

.spinner-grow-sm {
  width: 16px;
  width: 1rem;
  height: 16px;
  height: 1rem;
}

.offcanvas {
  display: flex;
  visibility: hidden;
  z-index: 1045;
  position: fixed;
  bottom: 0;
  flex-direction: column;
  max-width: 100%;
  outline: 0;
  background-clip: padding-box;
  background-color: rgb(255, 255, 255);
}

.offcanvas-backdrop {
  z-index: 1040;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgb(19, 18, 18);
}
.offcanvas-backdrop.fade {
  opacity: 0;
}
.offcanvas-backdrop.show {
  opacity: 0.5;
}

.offcanvas-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 16px;
  padding: 1rem 1rem;
}
.offcanvas-header .btn-close {
  margin-top: -8px;
  margin-top: -0.5rem;
  margin-right: -8px;
  margin-right: -0.5rem;
  margin-bottom: -8px;
  margin-bottom: -0.5rem;
  padding: 8px 8px;
  padding: 0.5rem 0.5rem;
}

.offcanvas-title {
  margin-bottom: 0;
  line-height: 1.6;
}

.offcanvas-body {
  flex-grow: 1;
  padding: 16px 16px;
  padding: 1rem 1rem;
  overflow-y: auto;
}

.offcanvas-start {
  top: 0;
  left: 0;
  width: 400px;
  transform: translateX(-100%);
  border-right: 1px solid rgba(19, 18, 18, 0.2);
}

.offcanvas-end {
  top: 0;
  right: 0;
  width: 400px;
  transform: translateX(100%);
  border-left: 1px solid rgba(19, 18, 18, 0.2);
}

.offcanvas-top {
  top: 0;
  transform: translateY(-100%);
  border-bottom: 1px solid rgba(19, 18, 18, 0.2);
}

.offcanvas-top,.offcanvas-bottom {
  right: 0;
  left: 0;
  height: 30vh;
  max-height: 100%;
}

.offcanvas-bottom {
  transform: translateY(100%);
  border-top: 1px solid rgba(19, 18, 18, 0.2);
}

.offcanvas.show {
  transform: none;
}

.clearfix::after {
  display: block;
  clear: both;
  content: "";
}

.link-primary {
  color: #198dae;
}
.link-primary:hover, .link-primary:focus {
  color: #14718b;
}

.link-secondary {
  color: #676a72;
}
.link-secondary:hover, .link-secondary:focus {
  color: #52555b;
}

.link-success {
  color: #078a2e;
}
.link-success:hover, .link-success:focus {
  color: #066e25;
}

.link-accent {
  color: #16a385;
}
.link-accent:hover, .link-accent:focus {
  color: #12826a;
}

.link-info {
  color: #a3988c;
}
.link-info:hover, .link-info:focus {
  color: #b5ada3;
}

.link-warning {
  color: #da8210;
}
.link-warning:hover, .link-warning:focus {
  color: #e19b40;
}

.link-alert {
  color: #dd1a1a;
}
.link-alert:hover, .link-alert:focus {
  color: #b11515;
}

.ratio {
  position: relative;
  width: 100%;
}
.ratio::before {
  display: block;
  padding-top: var(--bs-aspect-ratio);
  content: "";
}
.ratio > * {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.ratio-1x1 {
  --bs-aspect-ratio: 100%;
}

.ratio-4x3 {
  --bs-aspect-ratio: 75%;
}

.ratio-16x9 {
  --bs-aspect-ratio: 56.25%;
}

.ratio-21x9 {
  --bs-aspect-ratio: 42.8571428571%;
}

.fixed-top {
  top: 0;
}

.fixed-top,.fixed-bottom {
  z-index: 1030;
  position: fixed;
  right: 0;
  left: 0;
}

.fixed-bottom {
  bottom: 0;
}

.sticky-top {
  z-index: 1020;
  position: sticky;
  top: 0;
}

@media (min-width: 460px) {
  .sticky-sm-top {
    z-index: 1020;
    position: sticky;
    top: 0;
  }
}
@media (min-width: 768px) {
  .sticky-md-top {
    z-index: 1020;
    position: sticky;
    top: 0;
  }
}
@media (min-width: 1024px) {
  .sticky-lg-top {
    z-index: 1020;
    position: sticky;
    top: 0;
  }
}
@media (min-width: 1200px) {
  .sticky-xl-top {
    z-index: 1020;
    position: sticky;
    top: 0;
  }
}
.hstack {
  flex-direction: row;
  align-items: center;
}

.hstack,.vstack {
  display: flex;
  align-self: stretch;
}

.vstack {
  flex: 1 1 auto;
  flex-direction: column;
}

.visually-hidden,
.visually-hidden-focusable:not(:focus):not(:focus-within) {
  clip: rect(0, 0, 0, 0) !important;
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  white-space: nowrap !important;
}

.stretched-link::after {
  z-index: 1;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  content: "";
}

.text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vr {
  display: inline-block;
  align-self: stretch;
  width: 1px;
  min-height: 1em;
  background-color: currentColor;
  opacity: 0.25;
}

/*
Pagination

Pagination Design

<ul class="br-t_3 br_0 br_secondary br_solid font_n2 justify_end lh_2 pagination ul_none">
  <li class="disabled page-item">
    <a class="a:bg_secondary a:c_white-9 br_none h:bg_primary-n2 h:c_white lh_2 p_2 p-x_3 m-l_1 page-link disabled" href="#"><i class="fas fa-chevron-left"></i></a>
  </li>
  <li class="page-item">
    <a class="a:bg_secondary a:c_white-9 br_none h:bg_primary-n2 h:c_white lh_2 p_2 p-x_3 m-l_1 page-link" href="#">1</a>
  </li>
  <li class="page-item active">
    <a class="a:bg_secondary a:c_white-9 br_none h:bg_primary-n2 h:c_white lh_2 p_2 p-x_3 m-l_1 page-link"> 2 </a>
  </li>
  <li class="page-item">
    <a class="a:bg_secondary a:c_white-9 br_none h:bg_primary-n2 h:c_white lh_2 p_2 p-x_3 m-l_1 page-link" href="#">3</a>
  </li>
  <li class="page-item">
    <a class="a:bg_secondary a:c_white-9 br_none h:bg_primary-n2 h:c_white lh_2 p_2 p-x_3 m-l_1 page-link" href="#"><i class="fas fa-chevron-right"></i></a>
  </li>
</ul>

Weight: 100

Styleguide  Bootstrap.Pagination

*/
/*
Tabs

Description: A simple way to show small groups of content that should have the same level of reading hierarchy.  

Markup:
<nav class="bg_black-2 br_3 br_radius br_solid br_white-9 c_primary font_0 font_bold font_accent: p-x_0 p-x_4:md shadow_bevel-light" id="tabContentLight" role="tablist">
    <ul class="flex_column flex_row:md  nav">
        {{> "Structures.Tabs.Tabs.LinkActive" }}
        {{> "Structures.Tabs.Tabs.Link" }}
        {{> "Structures.Tabs.Tabs.LinkDisabled" }}
        </li>
    </ul>
</nav>
<div class="bg_black-_05 br-bl_radius br-br_radius m-x_3 p_4 reading-typography shadow_emboss-light tab-content" id="nav-tabContent">
    <div class="tab-pane fade show active" id="ActiveLink" role="tabpanel" aria-labelledby="ActiveLink">
        <h2 class="capitalize"> consectetur adipisicing elit </h2>
        Lorem ipsum dolor sit amet. Quisquam maxime consectetur, nisi sed ea perspiciatis a sit porro laboriosam ab sequi est quas optio dolorum at maiores quis incidunt inventore.</div>
    <div class="tab-pane fade" id="BasicLink" role="tabpanel" aria-labelledby="BasicLink">
        <h2 class="capitalize">Lorem ipsum dolor sit </h2>
        Amet consectetur adipisicing elit. Vero enim provident consequuntur perspiciatis. Eligendi placeat consequuntur veniam quidem temporibus labore quisquam commodi rem error cumque fugit suscipit nulla, excepturi eos.</div>
</div>

caution:  This item is not finalized and might be subject to change

Note: Limitations to the documentation system might cause javascript effects to animate or trigger incorrectly. 

Weight:0

Styleguide Structures.Tabs
*/
/*
Simple Tabs

Simple in page tabs 

Markup:
<nav class="bg_black-2 br_3 br_radius br_solid br_white-9 c_primary font_0 font_bold font_accent: p-x_0 p-x_4:md shadow_bevel-light">
    <ul class="flex_column flex_row:md  nav">
        {{> "Structures.Tabs.Tabs.LinkActive" }}
        {{> "Structures.Tabs.Tabs.Link" }}
        {{> "Structures.Tabs.Tabs.Link" }}
        {{> "Structures.Tabs.Tabs.LinkDisabled" }}
    </ul>
</nav>

Styleguide  Structures.Tabs.Tabs

*/
/*
Simple Tabs: Dark Mode

Reverse Colored Tabs for when on dark background

Markup:
<div class="m-y_4 bg_acc p_4" id="nav_jump">
    <nav class="bg_black-2 c_white br_3 br_radius br_solid br_white-5 font_0 font_bold font_ui p-x_0 p-x_4:md shadow_overlap-light">
        <ul class="flex_column flex_row:md ul_none nav">
        {{> "Structures.Tabs.TabsDark.LinkActive" }}
        {{> "Structures.Tabs.TabsDark.Link" }}
        {{> "Structures.Tabs.TabsDark.Link" }}
        {{> "Structures.Tabs.TabsDark.LinkDisabled" }}
        </ul>
    </nav>
</div>

Weight: 0

Styleguide  Structures.Tabs.TabsDark
*/
/*
Tab Dark: Active

Description: Active State of Dark Tab.  Add and remove the `active is-active` class from the li-tag toggle the active effect

Markup:
<li class="br-t_3 br_solid:md br_white-0 m-l_1 nav-item ">
    <a class="a:bg_accent h:underline-none c_white text-shadow_black-1 br-b_3 br_white-0 br_solid:md:md h:bg_secondary h:br_accent h:c_white m-y_n2:md nav-link p-y_3:md p-x_4 active">
        Active
    </a>
</li>

MarkupWrapperClasses: flex_column flex_row:md ul_none nav bg_acc br_3 br_radius br_solid br_acc-3 p-l_4

Weight:0

Styleguide  Structures.Tabs.TabsDark.LinkActive
*/
/*
Tab Dark: Basic

Description: Dark Tab Basic Nav

Markup:
<li class="br-t_3 br_solid:md br_white-0 m-l_1 nav-item">
    <a class="a:bg_accent h:underline-none c_white text-shadow_black-1 br-b_3 br_white-0 br_solid:md h:bg_secondary h:br_accent h:c_white m-y_n2:md nav-link p-y_3:md p-x_4">
        Link
    </a>
</li>


MarkupWrapperClasses: flex_column flex_row:md ul_none nav bg_acc br_3 br_radius br_solid br_acc-3 p-l_4

Weight:0


Styleguide  Structures.Tabs.TabsDark.Link
*/
/*
Tab Dark: Disabled

Description: Disabled decorations is a swap of many of the decoration classes with the removal of the hover and active classes.

Markup:
<li class="br-t_3 br_solid:md br_white-0 m-l_1 nav-item ">
    <a class="bg_white-2 br-b_3 br_solid:md br_white-0 c_white-4 cursor_not-allowed disabled h:underline-none m-y_n2:md nav-link opacity-5 p-x_4 p-y_3:md" href="/on-demand/industry-stage#nav_jump" target="_self">
        Disabled
    </a>
</li>

MarkupWrapperClasses: flex_column flex_row:md ul_none nav bg_acc br_3 br_radius br_solid br_acc-3 p-l_4 

Weight:0


Styleguide  Structures.Tabs.TabsDark.LinkDisabled
*/
/*
Tab: Active

Description: Active State of Dark Tab.  Add and remove the `active is-active` class from the li-tag toggle the active effect

Markup:
<li class=" br-t_3 br_solid:md br_white-0 m-l_1 nav-item">
    <a 
        id="ActiveLink-tab" data-bs-toggle="tab" data-bs-target="#ActiveLink"  role="tab" aria-controls="ActiveLink" aria-selected="true"
        class="active a:bg_accent-n2 h:underline-none a:c_white br-b_3 br_white-0 br_solid:md c_primary h:bg_acc-n3 h:br_accent h:c_white m-y_n2:md nav-link p-y_3:md p-x_4" 
        href="#">Active</a>
</li>

MarkupWrapperClasses: flex_column flex_row:md ul_none nav bg_black-2 br_3 br_radius br_solid br_white-9 c_primary font_0 font_bold font_accent: p-x_0 p-x_4:md shadow_bevel-light

Weight:0

Styleguide  Structures.Tabs.Tabs.LinkActive
*/
/*
Tab: Basic

Description: Active State of Dark Tab.  Add and remove the `active is-active` class from the li-tag toggle the active effect

Markup:
<li class="br-t_3 br_solid:md br_white-0 m-l_1 nav-item">
    <a 
    id="BasicLink-tab" data-bs-toggle="tab" data-bs-target="#BasicLink"  role="tab" aria-controls="BasicLink" aria-selected="true"
    class="a:bg_accent-n2 h:underline-none a:c_white br-b_3 br_white-0 br_solid:md c_primary h:bg_acc-n3 h:br_accent h:c_white m-y_n2:md nav-link p-y_3:md p-x_4" href="#">Link</a>
</li>


MarkupWrapperClasses: flex_column flex_row:md ul_none nav bg_black-2 br_3 br_radius br_solid br_white-9 c_primary font_0 font_bold font_accent: p-x_0 p-x_4:md shadow_bevel-light

Weight:0

Styleguide  Structures.Tabs.Tabs.Link
*/
/*
Tab: Disabled

Description: Disabled decorations is a swap of many of the decoration classes with the removal of the hover and active classes.

Markup:
<li class="br-t_3 br_white-0 br_solid:md m-l_1 nav-item">
    <a class="br-b_3 br_solid:md br_white-0 c_black-4 opacity-5 bg_black-1 disabled h:underline-none m-y_n2:md nav-link p-x_3 p-x_4" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>

MarkupWrapperClasses: flex_column flex_row:md ul_none nav bg_black-2 br_3 br_radius br_solid br_white-9 c_primary font_0 font_bold font_accent: p-x_0 p-x_4:md shadow_bevel-light

Weight:0

Styleguide  Structures.Tabs.Tabs.LinkDisabled
*/
/*
UI Tabs

The application systems of acc.org have tabs that sometimes overrun the tabs space areas because they need to show many options.

Markup:
<div class="br_solid br_1 br_black-3">
    <nav class="flex flex_row font_ui relative" id="tabContentLight" role="tablist">
        <ul class="flex flex_auto flex_nowrap flex_row:md flex_column nav overflow_hidden font-size_up ul_none">
            {{> "Structures.UITabs.Tabs.LinkActive" }}
            {{> "Structures.UITabs.Tabs" }}
            {{> "Structures.UITabs.Tabs.LinkDisabled" }}
        </ul>
    </nav>
    <div class="p_4 reading-typography tab-content br-t_1 br_solid br_black-3" id="nav-tabContent">
        <div class="tab-pane fade show active" id="ActiveLinkUI" role="tabpanel" aria-labelledby="ActiveLinkUI">
            {{> HTML.Typography.Sample }}
        </div>
        <div class="tab-pane fade" id="LinkUI" role="tabpanel" aria-labelledby="LinkUI">
            {{> HTML.Typography.Sample }}
        </div>
    </div>
</div>



Note: Limitations to the documentation system might cause javascript effects to animate or trigger incorrectly. 

Weight:0

Styleguide Structures.UITabs
*/
/*
UI Tabs Overflow

The application systems of acc.org have tabs that sometimes overrun the tabs space areas because they need to show many options.

Markup:
<div class="br_solid br_1 br_black-3">
    <nav class="flex flex_row font_ui relative" id="tabOverflow" role="tablist"> 
        <a class="disabled flex_row flex text_center bg_disabled bg_white br-r_1 br_black-3 br_solid c_black-8 c_disabled flex_auto flex_none h:bg_black-3 h:c_black h:undecorated nav-item opacity_disabled p-x_4:md p_3 relative text_center z_3">
                <i class="flex_auto self_center far fa-chevron-left"></i>
        </a>
        <ul class="flex flex_auto flex_nowrap flex_row:md nav overflow_hidden font-size_up ul_none">
            {{> "Structures.UITabs.Tabs.LinkActive" }}
            {{> "Structures.UITabs.Tabs" }}
            {{> "Structures.UITabs.Tabs" }}
            {{> "Structures.UITabs.Tabs" }}
            {{> "Structures.UITabs.Tabs" }}
            {{> "Structures.UITabs.Tabs" }}
            {{> "Structures.UITabs.Tabs.LinkDisabled" }}
        </ul>
        <a class="disabled flex_row flex text_center bg_disabled bg_white br-l_1 br_black-3 br_solid c_black-8 c_disabled flex_auto flex_none h:bg_black-3 h:c_black h:undecorated nav-item opacity_disabled p-x_4:md p_3 relative text_center z_3">
                <i class="flex_auto self_center far fa-chevron-right"></i>
        </a>
    </nav>
    <div class="p_4 reading-typography tab-content br-t_1 br_solid br_black-3" id="nav-tabContent">
        <div class="tab-pane fade show active" id="ActiveLinkUI" role="tabpanel" aria-labelledby="ActiveLinkUI">
            {{> HTML.Typography.Sample }}
        </div>
        <div class="tab-pane fade" id="LinkUI" role="tabpanel" aria-labelledby="LinkUI">
            {{> HTML.Typography.Sample }}
        </div>
    </div>
</div>

caution:  This item is not finalized and might be subject to change

Note: Custom JavaScript is needed to make this scroll back and forth, and will need to have disables applied when overflow has reached a max or min. 

Weight:0

Styleguide Structures.UITabs.Overflow
*/
/*
Tab: Default

Description: Active State of Tab.  Add and remove the `active is-active` class from the li-tag toggle the active effect

Markup:
<li id="LinkUI-tab" data-bs-toggle="tab" data-bs-target="#LinkUI"  role="tab" aria-controls="LinkUI" aria-selected="true" class=" nav-item relative p_3 p-x_4:md h:bg_black-3 br-l_1 br_black-3 br_solid flex_grow text_center bg_disabled opacity_disabled a:bg_accent-n1">
    <span 
         class="c_disabled h:undecorated expanded-click-area c_black-8 a:c_white-9 h:c_black " 
        >Link</span>
</li>

caution:  This item is not finalized and might be subject to change

Note: Limitations to the documentation system might cause javascript effects to animate or trigger incorrectly. 

MarkupWrapperClasses: flex ul_none

Weight:0

Styleguide  Structures.UITabs.Tabs
*/
/*
Tab: Active

Description: Active State of Dark Tab.  Add and remove the `active is-active` class from the li-tag toggle the active effect

Markup:
<li class="active nav-item relative p_3 p-x_4:md h:bg_black-3 br-l_1 br_black-3 br_solid flex_grow text_center bg_disabled opacity_disabled a:bg_accent-n1">
    <a 
        id="ActiveLinkUI-tab"
        data-bs-toggle="tab"
        data-bs-target="#ActiveLinkUI"
        role="tab"
        aria-controls="ActiveLinkUI"
        aria-selected="true"
        class="c_disabled h:undecorated expanded-click-area c_black-8 a:c_white-9 h:c_black " 
        href="#">Active</a>
</li>

MarkupWrapperClasses: flex ul_none

caution:  This item is not finalized and might be subject to change

Note: Limitations to the documentation system might cause javascript effects to animate or trigger incorrectly. 

Weight:0

Styleguide  Structures.UITabs.Tabs.LinkActive
*/
/*
Tab: Disabled

Description: Disabled decorations is a swap of many of the decoration classes with the removal of the hover and active classes.

Markup:
<li class="disabled nav-item relative p_3 p-x_4:md h:bg_black-3 br-l_1 br_black-3 br_solid flex_grow text_center bg_disabled opacity_disabled a:bg_accent-n1">
    <a class="c_disabled h:undecorated expanded-click-area c_black-8 a:c_white-9 h:c_black "
        href="#"
        tabindex="-1"
        aria-disabled="true">
        Disabled</a>
</li>

caution:  This item is not finalized and might be subject to change

Note: Limitations to the documentation system might cause javascript effects to animate or trigger incorrectly. 

MarkupWrapperClasses: flex ul_none

Weight:0

Styleguide  Structures.UITabs.Tabs.LinkDisabled
*/
/*
Scroll Overflow Script

Description: Javascript is needed to make the scrolls work on the page

Markup:


Weight:0

Styleguide  Structures.UITabs.Script
*/
/*
Sidebar Nav

Description: Side bar for any 3 layer nav on the site. the parent node is from the main nav.

Markup:
<nav class="nav-sub bg_primary c_white font_2 font_ui ">
    <ul class="ul_none flex_column flex">
        {{> "Navigation.Sidebar.Parent"}}
        {{> "Navigation.Sidebar.Child"}}
        {{> "Navigation.Sidebar.ChildWithChildren"}}
        {{> "Navigation.Sidebar.Child"}}
        {{> "Navigation.Sidebar.Child"}}
        {{> "Navigation.Sidebar.ChildWithGrandChildren"}}
    </ul>
</nav>

Weight:-1000

MarkupWrapperClasses: max-w_25 m_auto 


Note: Limitations to the documentation system might cause javascript effects to animate or trigger incorrectly. 


Styleguide Navigation.Sidebar
*/
/*
Parent NavItem

Description: The parent is singular in this nav it is always active and its direct children are always expanded so there is not need for a toggle.

Markup:
<li class="nav-item font-size_up" data-nav="parent">
    <div class="bg_black-4 ">
        <a class="text-shadow_black-1 block w_100 c_white p-y_2 p-x_4 w_100 h:c_white inline-block h:underline self_center">Parent Link: Tree starts from this node</a>
    </div>
</li>

Weight: -100

MarkupWrapperClasses: bg_primary c_white font_ui ul_none

Styleguide Navigation.Sidebar.Parent
*/
/*
Child NavItem

Description: Child and Grandchild nav items are built the same way with a spacer with or without a toggle depending on if they have children.

default     -  No added class 
active      -  Nav Item changes its decoration if this the page the user is on.

Markup:
<li class="nav-item {{modifier_class}}" 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"></i>
                </span>
            </div>
        </div>
        <div class="flex_auto self_center">
            <a class="text-shadow_black-1 {{modifier_class}} c_white-9 p-y_2 p-x_3 w_100 h:c_white inline-block h:underline self_center  a:bg_black-3">Child Link</a>
        </div>
    </div>
</li>

Weight: 10

MarkupWrapperClasses: bg_primary c_white font_ui ul_none

Styleguide Navigation.Sidebar.Child
*/
/*
Toggle Child

Description: Toggle elements are set to active if the attached node or its children are active. If the toggle is active the collapsed children navigation are open by default.

default     -  the toggle when it doesn't have an active class still shades on hover
active      -  shade the toggle

Markup:
<div class="{{modifier_class}} br-r_1 br_solid br_white-2 flex flex_column flex_none justify_start text-shadow_black-n1 c_white">
    {{> "Navigation.Toggle.Advanced" modifier_class=".childNavCollapse" }}
</div>

Weight: -10

Note: Limitations to the documentation system might cause javascript effects to animate or trigger incorrectly. 


MarkupWrapperClasses: bg_primary c_white font_ui ul_none

Styleguide Navigation.Sidebar.ChildToggle
*/
/*
Child NavItem With Children

Description: Child and Grandchild nav items are built the same way with a spacer with or without a toggle depending on if they have children.


Markup:
<li class="nav-item {{modifier_class}}" data-nav="child">
    <div class="flex flex_row">
        {{> "Navigation.Sidebar.ChildToggle" modifier_class="collapsed"}}
        <div class="flex_auto self_center">
            <a class="text-shadow_black-1 {{modifier_class}} c_white-9 p-y_2 p-x_3 w_100 h:c_white inline-block h:underline self_center  a:bg_black-3">Child with Children Links</a>
            <nav class="nav-sub-child bg_white-2 font-size_down collapse childNavCollapse" >
                <ul class="ul_none flex_column flex">
                    {{> "Navigation.Sidebar.Child" }}
                    {{> "Navigation.Sidebar.Child" }}
                    {{> "Navigation.Sidebar.Child" }}
                    {{> "Navigation.Sidebar.Child" }}
                </ul>
            </nav>
        </div>
    </div>
</li>

Weight: 15

Note: Limitations to the documentation system might cause javascript effects to animate or trigger incorrectly. 


MarkupWrapperClasses: bg_primary c_white font_ui ul_none

Styleguide Navigation.Sidebar.ChildWithChildren
*/
/*
Child NavItem With Grand Children

Description: Child and Grandchild nav items are built the same way with a spacer with or without a toggle depending on if they have children.

Markup:
<li class="nav-item active" data-nav="child">
    <div class="flex flex_row">
        {{> "Navigation.Sidebar.ChildToggle"  modifier_class="active"}}
        <div class="flex_auto self_center">
            <a class="text-shadow_black-1 active c_white-9 p-y_2 p-x_3 w_100 h:c_white inline-block h:underline self_center  a:bg_black-3">Child with Children Links</a>
            <nav class="nav-sub-child bg_white-2 font-size_down collapse childNavCollapse show">
                <ul class="ul_none flex_column flex">
                    {{> "Navigation.Sidebar.Child" }}
                    {{> "Navigation.Sidebar.Child" }}
                    {{> "Navigation.Sidebar.Child" }}
                    {{> "Navigation.Sidebar.Child" }}
                    <li class="nav-item  active " data-nav="grandchild">
                        <div class="flex flex_row">
                            {{> "Navigation.Sidebar.ChildToggle"  modifier_class="active"}}
                            <div class="flex_auto self_center">
                                <a class="text-shadow_black-1 active c_white-9 p-y_2 p-x_3 w_100 h:c_white inline-block h:underline self_center  a:bg_black-3">Child with Children Links</a>
                                <nav class="nav-sub-child bg_white-2 collapse show childNavCollapse">
                                    <ul class="ul_none flex_column flex">
                                        {{> "Navigation.Sidebar.GreatGrandchild"  }}
                                        {{> "Navigation.Sidebar.GreatGrandchild" }}
                                        {{> "Navigation.Sidebar.GreatGrandchild"  modifier_class="active"}}
                                        {{> "Navigation.Sidebar.GreatGrandchild" }}
                                    </ul>
                                </nav>
                            </div>
                        </div>
                    </li>
                </ul>
            </nav>
        </div>
    </div>
</li>

Weight: 15

MarkupWrapperClasses: bg_primary c_white font_ui ul_none

Note: Limitations to the documentation system might cause javascript effects to animate or trigger incorrectly. 

Styleguide Navigation.Sidebar.ChildWithGrandChildren
*/
/*
Great Grandchild NavItem

Description: Great Grand Children loose the spacer for toggles because they don't have any child navs and don't need the use of a toggle.

default     -  No added class 
active      -  Nav Item changes its decoration if this the page the user is on.

Markup:
<li class="nav-item {{modifier_class}} " data-nav="greatGrandChild">
    <div class="flex flex_row"> 
        <div class="flex_auto self_center">
            <a class=" {{modifier_class}} text-shadow_black-1  a:bg_black-3 c_white-9 p-y_2 p-r_3 p-l_4 w_100 h:c_white inline-block h:underline self_center">Great Grand Child Links</a>
        </div>
    </div>
</li>

Weight: 100

MarkupWrapperClasses: bg_primary c_white font_ui ul_none

Styleguide Navigation.Sidebar.GreatGrandchild
*/
/*
Bootstrap Toggle Rotation

The toggles for bootstrap collapses use a `+` icon that twists to an `x` when the elements doesn't have `collapsed` or `show` as a class. to reduce confusion the class has a set rotation and speed attached to it. `a:rotation` is applied to the tow specific icons `fa-times` and `fa-chevron-up` only.<div class="p-b_3"><span class="bg_highlight br_radius c_white inline-block font_n1 p-y_3 p-x_5 sg">These classes are effected by the parent having `collapsed` state.</span></div>

expanded                  - when the associated content is expanded the toggle will look like this
collapsed                       - when the associated content is collapsed the class is added to the toggle and it will look like this. 

Markup:
<div class="flex_none p_2 {{modifier_class}}" aria-expanded="false" data-bs-toggle="collapse" data-bs-target="#pageHubChild" aria-controls="#pageHubChild">
        <i class="a:rotation c_primary fa-fw fa-times fas self_center text_center"></i>
</div>
<div class="flex_none p_2 {{modifier_class}}" aria-expanded="false" data-bs-toggle="collapse" data-bs-target="#pageHubChild" aria-controls="#pageHubChild">
        <i class="a:rotation c_primary fa-fw fa-chevron-up fas self_center text_center"></i>
</div>
<div class="flex_none p_2 {{modifier_class}}" aria-expanded="false" data-bs-toggle="collapse" data-bs-target="#pageHubChild" aria-controls="#pageHubChild">
        <span class="fa-stack fa-2x">
        <i class="fas fa-minus fa-stack-1x"></i>
        <i class="fas fa-minus rotate_90 a:rotation fa-stack-1x "></i>
        </span>
</div>
<div class="flex_none p_2 {{modifier_class}}" aria-expanded="false" data-bs-toggle="collapse" data-bs-target="#pageHubChild" aria-controls="#pageHubChild">
        <span class="fa-stack fa-2x">
        <i class="fas fa-square fa-stack-2x c_black"></i>
        <i class="fas fa-minus fa-stack-1x c_white"></i>
        <i class="fas fa-minus rotate_90 a:rotation fa-stack-1x  c_white"></i>
        </span>
</div>


Weight: 100

Styleguide Navigation.Toggle.Rotation

*/
/*
Toggle 

Toggle elements of a collapse with user feed back of the icon rotating.

#targetName -  the name of the target of the collapse

Markup:
<div class="flex_none p_2" data-bs-toggle="collapse" data-bs-target="{{modifier_class}}" aria-controls="{{modifier_class}}" aria-expanded="true">
        <i class="a:rotation fa-fw fa-times fas self_center text_center"></i>
</div>

Weight: -10

MarkupWrapperClasses: bg_white font_ui flex c_primary

Styleguide Navigation.Toggle
*/
/*
Toggle Chevron

Toggle elements of a collapse with user feed back of the icon rotating.

#targetName -  the name of the target of the collapse

Markup:
<div class="a:bg_black-3 h:bg_black-4 flex_none p_2" data-bs-toggle="collapse" data-bs-target="{{modifier_class}}" aria-controls="{{modifier_class}}" aria-expanded="true">
        <i class="a:rotation fa-fw fa-chevron-up fas self_center text_center"></i>
</div>

Weight: -80

MarkupWrapperClasses: bg_white font_ui flex c_primary

Styleguide Navigation.Toggle.Chevron
*/
/*
Collapse Toggle Advanced

Toggle elements of a collapse with user feed back of the icon morphing.

#targetName -  the name of the target of the collapse

Markup:
<div class="flex_none" aria-expanded="false" data-bs-toggle="collapse" data-bs-target="{{modifier_class}}" aria-controls="{{modifier_class}}">
        <span class="fa-stack">
        <i class="fas fa-minus fa-stack-1x"></i>
        <i class="fas fa-minus rotate_90 a:rotation fa-stack-1x "></i>
        </span>
</div>

Weight: -100

MarkupWrapperClasses: bg_white font_ui flex c_primary

Styleguide Navigation.Toggle.Advanced
*/
/*
Collapse Toggle Advanced with Square

Toggle elements of a collapse with user feed back of the icon morphing.

#targetName -  the name of the target of the collapse

Markup:
<div class="flex_none" aria-expanded="false" data-bs-toggle="collapse" data-bs-target="{{modifier_class}}" aria-controls="{{modifier_class}}">
        <span class="fa-stack">
        <i class="fas fa-square fa-stack-2x"></i>
        <i class="fas fa-minus fa-stack-1x c_white"></i>
        <i class="fas fa-minus rotate_90 a:rotation fa-stack-1x  c_white"></i>
        </span>
</div>

Weight: -90

MarkupWrapperClasses: bg_white font_ui flex c_primary

Styleguide Navigation.Toggle.AdvancedSquare
*/
/*
Accordion

In content accordions are styled differently to User interface accordions.  The text of the header should allow for header tags to be added so the style should respond to the surrounding typography sizes.

Markup:
<div class="relative">
    <header id="accordion_header" class="flex flex_row sticky t_n2 bg_white shadow_overlap-light br_solid br_1 br_black-2 z_2 ">
        <div class="h:bg_primary-5 m_2 c_primary h:c_primary-n2 br_radius">
            {{> "Navigation.Toggle.Advanced" modifier_class="#content_accordion"}}
        </div>
        <div class=" font-size_up flex_auto flex flex_row justify_center p-y_2">
            <div class="flex_auto self_center reading-typography no-margins">
               <h3> Accordion Header Level 3</h3>
            </div>
        </div>
    </header>
    <main id="content_accordion" class="bg_black-_05 br-bl_radius br-br_radius m-x_0 m-x_3:md p_3 p_4:md reading-typography shadow_emboss-light tab-content transition_4"  aria-labelledby="accordion_header m-x_3" >
    {{> HTML.Typography.Sample }}
    </main>
</div>


Note: Limitations to the documentation system might cause javascript effects to animate or trigger incorrectly. 


Weight:0

Styleguide  Structures.Accordion
*/
/*
Accordion Child

Description: Sometimes the content needs be collapsed at a secondary level to make it scannable. 

Markup:
<div class="relative m-b_2">
    <header id="accordion_header-child" class="flex flex_row sticky t_5 bg_white shadow_bevel-light br_radius br_solid br_1 br_black-2 z_3 ">
        <div class="h:bg_primary-4 m_2 c_primary h:c_primary-n3 br_radius">
            {{> "Navigation.Toggle" modifier_class="#content_accordion-child"}}
        </div>
        <div class=" flex_auto flex flex_row justify_center p-y_2">
            <div class="flex_auto self_center reading-typography no-margins">
                <h4> Nested Accordion Header Level 4</h4>
            </div>
        </div>
    </header>
    <main id="content_accordion-child" class="bg_black-1 m-t_n2 br_radius p-t_3 p-x_3 p-x_4:md p-b_4 reading-typography tab-content transition_4 shadow_emboss-light"  aria-labelledby="accordion_header-child" >
    {{> HTML.Typography.Sample }}
    </main>
</div>


Note: Limitations to the documentation system might cause javascript effects to animate or trigger incorrectly. 


Weight:0

Styleguide Structures.Accordion.Child
*/
/*
Accordion Nested Example

In content accordions are styled differently to User interface accordions.  The text of the header should allow for header tags to be added so the style should respond to the surrounding typography sizes.

Markup:
<div class="relative">
    <header id="accordion_header-nested" class="flex flex_row sticky t_n2 bg_white shadow_overlap-light br_solid br_1 br_black-2 z_2 ">
        <div class="h:bg_primary-5 m_2 c_primary h:c_primary-n2 br_radius">
            {{> "Navigation.Toggle.Advanced" modifier_class="#content_accordion-parent"}}
        </div>
        <div class=" font-size_up flex_auto flex flex_row justify_center p-y_2">
            <div class="flex_auto self_center reading-typography no-margins">
               <h3> Accordion Header Level 3</h3>
            </div>
        </div>
    </header>
    <main id="content_accordion-parent" class="bg_black-_05 br-bl_radius br-br_radius m-x_3:md p_3 p_4:md reading-typography shadow_emboss-light tab-content transition_4"  aria-labelledby="accordion_header-nested" >
        <h2>Aenean commodo ligula eget dolor aenean massa</h2>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing 
        elit. Aenean commodo ligula eget dolor. Aenean massa. 
        Cum sociis natoque penatibus et magnis dis parturient 
        montes, nascetur ridiculus mus. Donec quam felis, 
        ultricies nec, pellentesque eu, pretium quis, sem.</p>    
        {{> Structures.Accordion.Child }}
        {{> Structures.Accordion.Child }}
    </main>
</div>


Note: Limitations to the documentation system might cause javascript effects to animate or trigger incorrectly. 


Weight:0

Styleguide  Structures.Accordion.Nested
*/
/*
Buttons

Basic Buttons

default		            - Medium buttons (default)
.btn-primary	            - Primary Class Button (default)
.btn-secondary 	            - Second Class Button
.btn-accent             - Button for call out actions
.btn-success                - Success State.
.btn-danger                  - Alert State.
.btn-warning	            - Warning State
.clear		            - All button states can become hollow
.radius		            - Give the button softer corners
.shadow.clear		    - Give a button a shadow
.btn-sm		            - Small buttons
.btn-lg		            - Large buttons
.disabled	            - Disabled buttons

Markup:
<a class="btn btn-primary {{modifier_class}}" href="#">{{modifier_class}} button</a>
<button class="btn btn-primary {{modifier_class}}" href="#">{{modifier_class}} button</button>

 Styleguide  Bootstrap.Button

*/
/*

Content Filler

This is a styleguide only element to show structure edges.

Markup:
<div class="h_30 c_accent-n4 font_xbold font_3 br_accent bg_accent-5 br_dashed br_1 m_3 p_5 grid items_center justify_center">Layout Zone: {{ modifier_class }}</div>

MarkupWrapperClasses: 

Weight: 100

Styleguide Page.Layouts.Filler
*/
/*

Grid Filler

This is a styleguide only element to show structure edges.

Markup:
<div class="w_auto h_100p c_highlight-n4 font_xbold font_3 br_dotted br_highlight bg_highlight-5 br_1 grid items_center justify_center lh_0 overflow_ellipsis">Grid Area: {{ modifier_class }}</div>

MarkupWrapperClasses: 

Weight: 100

Styleguide Page.Layouts.GridFiller
*/
/*

Sub Grid Filler

This is a styleguide only element to show structure edges.

Markup:
<div class="w_auto h_100p c_success-n4 font_xbold font_3 br_dotted br_success bg_success-5 br_1 grid items_center justify_center lh_0 overflow_ellipsis">Grid Area: {{ modifier_class }}</div>

MarkupWrapperClasses: 

Weight: 100

Styleguide Page.Layouts.SubGridFiller
*/
/*

Side Bar Area

This pattern is often used to push the sidebar bellow the main content area. 


Markup:
<div class="flex flex_row:md flex_column-reverse gap_4 gap_5:lg">
    <div class="flex_auto flex_100 max-w_20:lg">
    {{> "Page.Layouts.Filler"  modifier_class="Sidebar"}}
    </div>
    <div class="flex_auto flex_100 ">
    {{> "Page.Layouts.Filler"  modifier_class="Main"}}
    </div>
</div>

MarkupWrapperClasses: 

Weight: 0

Styleguide Page.Layouts.Sidebar
*/
/*

Side Bar Area With Ad

This pattern is often used to push the sidebar bellow the main content area. 


Markup:
<div class="flex flex_row:lg flex_column gap_4 gap_5:lg">
    <div class="flex_auto flex_100 flex flex_row:md flex_column-reverse gap_4 gap_5:lg">
        <div class="flex_auto flex_100 max-w_20:md">
            {{> "Page.Layouts.Filler" modifier_class="Sidebar"}}
        </div>
        <div class="flex_auto flex_100">
            {{> "Page.Layouts.Filler" modifier_class="Main"}}
        </div>
    </div>
    <div class="flex_auto flex_100 max_w-100 max-w_10:lg">
        {{> "Page.Layouts.Filler" modifier_class="Ad Rail"}}
    </div>
</div>   

MarkupWrapperClasses: 

Weight: 0

Styleguide Page.Layouts.SidebarAndAd
*/
/*
Agenda Item

Description:
Agenda items are sessions that are scheduled for a specific date, location, and time.

Weight:0

Styleguide Data.Agenda
*/
/*
Agenda ID

Description:
The ID given to an Agenda. This number is unique to the Agenda and is incremented for each new Agenda created.

Markup:
101

Weight:1

Styleguide Data.Agenda.ID
*/
/*
Channel Name

Description:
A channel is a visible category that an Agenda Item belongs to.

Markup:
Navigating Health Care Economics 


Weight:1

Styleguide Data.Agenda.ChannelName
*/
/*
Live Time

Description:
The time at which a Agenda is live.

Markup: @ {{> Data.Agenda.ReleaseTime }} – {{> Data.Agenda.ReleaseTime }} <abbr title="EASTERN TIME, UTC -4">EDT</abbr>

FORMAT: 12 hour with 'a.m.'/'p.m' and Abbreviation of Timezone.

NOTE: The 'a.m.'/'p.m.' if the same should only occur on the last time mark.  11:15 a.m. - 11:30 a.m. should be shortened to 11:15  - 11:30 a.m.

Weight:0

Styleguide Data.Agenda.LiveTime
*/
/*
Release Time

Description:
The time at which a Agenda is item is scheduled to be active, give access,  or start playing.

Markup: 11:15 a.m.

FORMAT: 12 hour with 'a.m.'/'p.m'.

Weight:0

Styleguide Data.Agenda.ReleaseTime
*/
/*
End Time

Description:
The time at which a Agenda item is scheduled to end.

Markup: 12:15 p.m.

FORMAT: 12 hour with 'a.m.'/'p.m'.

Weight:0

Styleguide Data.Agenda.EndTime
*/
/*
Live Date

Description:
There is usually a delay to when recording will make it to on demand. This is the time that recording will be available.

Markup: Saturday, Nov. 20, 2021 

FORMAT: Day-of-Week, Month-Abbreviation.  Day, Year

Weight:0

Styleguide Data.Agenda.LiveDate
*/
/*
On Demand Release Date and Time

Description:
There is usually a delay to when recording will make it to on demand. This is the time that recording will be available.

Markup: Saturday, Nov. 20, 2021 @ 8:00 p.m. <abbr title="EASTERN TIME, UTC -4">EDT</abbr>

FORMAT: Day-of-Week, Month-Abbreviation.  Day, Year @ Hour:Minute 'a.m.'/'p.m' Abbreviation-of-Timezone.  

NOTE:  Use the simple abbreviation for the timezone without Daylight Savings Time. IE: ET not EDT or EST.

Weight:0

Styleguide Data.Agenda.onDemandReleaseTime
*/
/*
Session 

A Session is a specific time slot in an Agenda. This could be either a single presentation or a series of presentations.

Markup:
Electrical Disorders - Rhythm and Conduction Disorders

Experiential: This is not an approved data point.

Weight:100

Styleguide Data.Session
*/
/*
Session Subtitle

The subtitle of a Session.

Markup:
Electrical Disorders - Rhythm and Conduction Disorders

Experiential: This is not an approved data point.

Weight:2

Styleguide Data.Session.Subtitle
*/
/*
Session Title

Description:
The title of a Session.

Markup:
Cardiovascular Update for the Clinician III

Weight:1

Styleguide Data.Session.Title
*/
/*
Session Identifier

Description:
The ID given to a session

Markup:
3652

Weight:0

Styleguide Data.Session.ID
*/
/*
Session Description

The description of a session.

Markup:
<p>Maxime et ea adipisci voluptas. Omnis nobis recusandae alias eius sed ipsam aut. Ipsam dolore qui. Soluta laudantium quae assumenda ipsa tempore voluptas et culpa. Et praesentium quasi. Quas ratione vero aspernatur.</p>

Weight:3

Styleguide Data.Session.Description
*/
/*
Presentation 

Description:
A presentation is a single part of education that can not be subdivided.

Weight:0

Styleguide Data.Presentation
*/
/*
Presentation Description

Description:
The Description of a presentation

Markup:Drug Coated Balloons

Weight:500

Styleguide Data.Presentation.Description
*/
/*
Presentation Title

Description:
The title of a presentation

Markup:
New York Cardiovascular Symposium 2021 Welcome Video and Introduction of Session and Faculty

Weight:0

Styleguide Data.Presentation.Title
*/
/*
Presentation Live Time

Description:
The Live Time of a Presentation

Markup:
11:45 – 11:49 a.m. <abbr title="EASTERN DAYLIGHT TIME, UTC -4">ET</abbr>

FORMAT: 12 hour with 'a.m.'/'p.m' and Abbreviation of Timezone.

NOTE: The 'a.m.'/'p.m.' if the same should only occur on the last time mark.  11:15 a.m. - 11:30 a.m. should be shortened to 11:15  - 11:30 a.m.


Weight:0

Styleguide Data.Presentation.LiveTime
*/
/*
Presentation ID

Description:
Unique system generated identifier for a presentation.

Markup:
15612

Weight:0

Styleguide Data.Presentation.ID
*/
/*
Faculty 

Description:
An educator who created or participated in a presentation

Weight:1000

Styleguide Data.Faculty
*/
/*
Photo

Description:
A photo of the faculty member

Markup:
<img
    class="aspect_1x1 w_100"
    src="https://i.pravatar.cc/300"
    alt="{{> "Data.Faculty.FullName" }}"
/>

MarkupWrapperClasses: max-w_30

FORMAT: 300px by 300px

Weight:0

Styleguide Data.Faculty.Photo
*/
/*
Full Name

The full name of the faculty member

Markup: Pepper H. Soda III, MD, FACC


FORMAT: First Name MI (if known) Last Name Suffix (Jr., Sr., the III ), Optional Degree, Optional ACC Honorifics, Optional Exceptions Honorifics

Weight:0

Styleguide Data.Faculty.FullName
*/
/*
Location

Description:
The location of the faculty member

Markup: New York, NY, USA

Weight:0

FORMAT: City, State, Country

NOTE:  if the conference country is USA you can drop the country if it is USA.

Styleguide Data.Faculty.Location
*/
/*
Title

Description:
the roles of the faculty member within the session

Markup:
{{> "Data.Faculty.Title.InstitutionTitle" }}, {{> "Data.Faculty.Title.InstitutionDivision" }}, {{> "Data.Faculty.Title.Institution" }}



FORMAT: Institution Title, Institution Division, Institution

NOTE: This format is currently not being enforced.

Weight:100

Styleguide Data.Faculty.Title
*/
/*
Institution

Description:
Institution of the faculty member where they hold a title

Markup:
Mount SugarLoaf Hospital

Weight:101

Styleguide Data.Faculty.Title.Institution
*/
/*
Institution Division

Description:
The Division of the Institution of the faculty member where they hold a title

Markup:
Department of Cardiology

Weight:102

Styleguide Data.Faculty.Title.InstitutionDivision
*/
/*
Institutional Title

Description:
the roles of the faculty member within the session

Markup:
Physician-in-Chief

Weight:103

Styleguide Data.Faculty.Title.InstitutionTitle
*/
/*
Twitter Handle

Description:
The handle of the faculty member on twitter

Markup:
Tweat_DrSoda

Weight:0

Styleguide Data.Faculty.TwitterHandle
*/
/*
Role

Description:
the roles of the faculty member within the session

Markup:
Co-Chair

Weight:0

Styleguide Data.Faculty.Role
*/
/*
Bio

Description:
simple html text that describes the faculty member

Markup:
<p>Omnis laboriosam vero dolorum harum nihil debitis placeat eligendi. Molestiae voluptatibus nemo eveniet. Vero ipsum eius. Alias sapiente quidem dolore dolorem atque alias est.</p>

Weight:0

Styleguide Data.Faculty.Bio
*/
/*
Identification Number

Description:
this id can both be used to link to the faculty member's page, the member's image, and disclosures

Markup:
122154254

Weight:0

Styleguide Data.Faculty.ID
*/
/*
Sponsor

Description:
Sponsor are industry that has offered money or support to an event.

Weight:0

Styleguide Data.Sponsor
*/
/*
Name

Markup:
LogoIpsum

Weight:-100

Styleguide Data.Sponsor.Name
*/
/*
Address

Description:
Sponsor's Name

Markup:
<address>
    <!-- http://microformats.org/wiki/hcard -->
    <div class="font_ui font_0">
        <ul class="ul_none  lh_2">
            <li><strong class="">Contact:</strong></li>
            <li class="">
                <span class="contact-person">Carlton Dooley</span>
            </li>
            <li><strong class="">Address:</strong></li>
            <li class="">
                <span class="street-address">3115 Clair Street</span>
            </li>
            <li cclass="locality">
                <span class="city-name">Killeen</span>,
                <span class="state-name">
                    <abbr title="Texas">TX</abbr>
                </span>
                <span class="postal-code">76543</span>
            </li>
        </ul>
        <ul class="ul_none lh_2">
            <li class="">
            <strong class="p-r_2 inline block:md inline:lg undecorated">Email:</strong>
                <a href="mailto:MemberCare@acc.org" class="email block:md inline:lg link">
                    <span class="">MemberCare@acc.org</span></a>
            </li>
            <li class="">
            <strong class="p-r_2 block:md inline:lg">Phone:</strong>
                <a tel="+1254-690-2946" href="tel:+1254-690-2946" class="tel block:md inline:lg link">
                    <span class=" ">(254) 690-2946</span>
                    </a>
            </li>
        </ul>
    </div>
</address>

Weight:20

Styleguide Data.Sponsor.Address
*/
/*
Logo

Description:
Logo of the Company

Markup:
<img  class="absolute t_0 r_0 l_0 b_0" style="object-fit: contain;height: 100%;width: 100%;" src="https://cdn.jsdelivr.net/gh/ACC-Style/Arches/dist/img/LoremIpsum.png"/>

MarkupWrapperClasses: max-w_40 relative h_20 w_100


Weight:10

Styleguide Data.Sponsor.Logo
*/
/*
Web Address

Markup:
http://wwww.LogoIpsum.com

Weight:25

Styleguide Data.Sponsor.WebAddress
*/
/*
Website Link

Markup:
<a class="website {{modifier_class}}" target="_blank"  href="{{> 'Data.Sponsor.WebAddress'}}">Website</a>

Weight:26

Styleguide Data.Sponsor.WebLink
*/
/*
Website Link

Markup:
<a class="website {{modifier_class}}" target="_blank"  href="{{> 'Data.Sponsor.WebAddress'}}">More</a>

Weight:26

Styleguide Data.Sponsor.MoreLink
*/
/*
PDF Link

Markup:
<a class="pdf {{modifier_class}}" target="_blank" href="{{> 'Data.Sponsor.WebAddress'}}.pdf">PDF</a>

Weight:26

Styleguide Data.Sponsor.PDFLink
*/
/*
Description

Description: Short html description of the sponsor or the product.

Markup:
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Non, consequuntur similique quibusdam deleniti fuga, ad laudantium vel assumenda incidunt impedit iure molestias! Et laboriosam nulla ut at officia ipsa quaerat?</p>
<ul>
    <li>Ut reiciendis et possimus rerum animi.</li>
<li>Reprehenderit quia et eaque cupiditate illo explicabo architecto.</li>
<li>Et cumque distinctio maxime maiores aut labore ut est esse.</li>
</ul>
<p>Et quia saepe corporis explicabo consectetur voluptatem iure. Quos nostrum autem. Et omnis nostrum eius autem aut voluptas illum. Et autem velit facere explicabo reiciendis voluptas. Ipsum vel et nisi in iste molestias sit. Eos et aut est ullam.</p>

Weight:3

Styleguide Data.Sponsor.Description
*/
/*
Award

Description: Awards and Recognition 

Weight:5

Styleguide Data.Award

*/
/*
Award Title

Description: Title of the award

Markup:
Pamela S. Douglas Distinguished Award for Leaderiship in Diversity and Inclusion

Weight:5

Styleguide Data.Award.Title

*/
/*
Award Description

Description: Description of the award can be html or text and may include a link.

Markup:
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Non, consequuntur similique quibusdam deleniti fuga, ad laudantium vel assumenda incidunt impedit iure molestias! Et laboriosam nulla ut at officia ipsa quaerat?</p>
<ul>
<li>Ut reiciendis et possimus rerum animi.</li>
<li>Reprehenderit quia et eaque cupiditate illo explicabo architecto.</li>
<li>Et cumque distinctio maxime maiores aut labore ut est esse.</li>
</ul>
<p>Et quia saepe corporis explicabo consectetur voluptatem iure. Quos nostrum autem. Et omnis nostrum eius autem aut voluptas illum. Et autem velit facere explicabo reiciendis voluptas. Ipsum vel et nisi in iste molestias sit. Eos et aut est ullam.</p>
<a href="https://acc.org" target="_blank">Watch Video</a>

Weight:5

Styleguide Data.Award.Description

*/
/*
Abstract 

A Abstract is a specific time slot in an Agenda. This could be either a single presentation or a series of presentations.

Markup:
Electrical Disorders - Rhythm and Conduction Disorders

Experiential: This is not an approved data point.

Weight:100

Styleguide Data.Abstract
*/
/*
Abstract Subtitle

The subtitle of a Abstract.

Markup:
Electrical Disorders - Rhythm and Conduction Disorders

Experiential: This is not an approved data point.

Weight:2

Styleguide Data.Abstract.Subtitle
*/
/*
Abstract Title

Description:
The title of a Abstract.

Markup:
Abstract on Cardiovascular Update for the Clinician Success H<sub>2</sub>

Weight:1

Styleguide Data.Abstract.Title
*/
/*
Abstract Identifier

Description:
The ID given to a Abstract

Markup:
3652

Weight:0

Styleguide Data.Abstract.ID
*/
/*
Abstract Description

The description of a Abstract.

Markup:
<p>Maxime et ea adipisci voluptas. Omnis nobis recusandae alias eius sed ipsam aut. Ipsam dolore qui. Soluta laudantium quae assumenda ipsa tempore voluptas et culpa. Et praesentium quasi. Quas ratione vero aspernatur.</p>

Weight:3

Styleguide Data.Abstract.Description
*/
/*
Action Buttons Clear Search

This action button is used to clear the search filters and parameters.


Markup:
<aside class="flex flex_none flex_column gap-y_3 m-l_auto:md  max-w_30:md p-b_4 p-b_4:md w_100">
      <nav aria-label="session actions" class="flex flex_none flex_row gap-x_2 gap-y_3 justify_between">
        <a href="#" aria-label="navigate to" class="br_1 br_solid br_white-3 btn btn-secondary flex_auto shadow_overlap-light">Clear Search <i class="fas fa-times p-l_3"></i></a>
      </nav>
</aside>

Weight:0

Styleguide Sub.ActionButtons.ClearSearch

*/
/*

Faceted Search

Facet Groups

Markup:
<li data-name="library-search-facet" class="bg_white-8 br_radius m-t_3 p_3  max-w_20:md {{ modifier_class }}" >
    <header class="flex font-size_up m-y_2">
        <div class="flex_auto  self_center p-l_0 lh_1 font-size_up font_medium">Drugs Generic </div>
          {{> "Sub.CollapseIcon" modifier_class="#CollapseFacetGroupID" }}
    </header>
    <main id="CollapseFacetGroupID" class="p_1 collapse show" style="">
        <ul class="p-y_3 ul_none br-t_1 br-b_1 br_primary-3 transition_3 br_solid">
            {{>  "Sub.Search.FacetCheckbox" modifier_class="facet_4606" }}
            {{>  "Sub.Search.FacetCheckbox" modifier_class="facet_7811" }}
            {{>  "Sub.Search.FacetCheckbox" modifier_class="facet_2302" }}
            {{>  "Sub.Search.FacetCheckbox" modifier_class="facet_7248" }}
            {{>  "Sub.Search.FacetCheckbox" modifier_class="facet_0918" }}
        </ul>
        <footer class="text_center font-size_down c_primary-n1 p-t_3"><span class="cursor_not-allowed c_black-3">less</span><span class="c_primary"> | </span><span class="link h:underline h:black link h:underline h:black cursor_pointer">more</span></footer>
    </main>
</li>

MarkupWrapperClasses: max-w_30 ul_none

NOTE: by default the facet group is collapsed, and only loads the first 10 facets with the sort order of count.  The more and less link disable when they have reached the limit of the group's length. The more link will load the next 10 facets. Collapsing the facet group will not change the exposed amount of facets revealed or hidden by the more and less links.

SubComponents: 
Sub.Search.FacetCheckbox - Single Facet Checkbox
Sub.CollapseIcon - Collapse Icon

Weight:0

Styleguide Sub.Search.Faceted
*/
/*

Faceted Search

Facet Groups

Markup:
<li data-name="library-search-facet" class="bg_white-8 br_radius m-t_3 p_3  max-w_20:md {{ modifier_class }}" >
    <header class="flex font-size_up m-y_2">
        <div class="flex_auto  self_center p-l_0 lh_1 font-size_up font_medium">Primary Category </div>
         {{> "Sub.CollapseIcon" modifier_class="#CollapseFacetGroupPrimaryID" }}
    </header>
    <main id="CollapseFacetGroupPrimaryID" class="p_1 collapse show" style="">
        <ul class="p-y_3 ul_none br-t_1 br-b_1 br_primary-3 transition_3 br_solid">
            {{>  "Sub.Search.FacetCheckbox" modifier_class="facet_6657" }}
            {{>  "Sub.Search.FacetCheckbox" modifier_class="facet_3237" }}
            {{>  "Sub.Search.FacetCheckbox" modifier_class="facet_6183" }}
            {{>  "Sub.Search.FacetCheckbox" modifier_class="facet_6433" }}
            {{>  "Sub.Search.FacetCheckbox" modifier_class="facet_8756" }}
        </ul>
        <footer class="text_center font-size_down c_primary-n1 p-t_3"><span class="cursor_not-allowed c_black-3">less</span><span class="c_primary"> | </span><span class="link h:underline h:black link h:underline h:black cursor_pointer">more</span></footer>
    </main>
</li>

MarkupWrapperClasses: max-w_30 ul_none

NOTE: by default the facet group is collapsed, and only loads the first 10 facets with the sort order of count.  The more and less link disable when they have reached the limit of the group's length. The more link will load the next 10 facets. Collapsing the facet group will not change the exposed amount of facets revealed or hidden by the more and less links.

SubComponents: 
Sub.Search.FacetCheckbox - Single Facet Checkbox
Sub.CollapseIcon - Collapse Icon

Weight:0

Styleguide Sub.Search.FacetedPrimary
*/
/*

Faceted Type Ahead

A type ahead search that adds a selected faceted filter to the search page. This is used when filters are exceptionally long and could be difficult to read when listed out.  Authors, and mesh terms can use this pattern to add them as a filter to the search page.

Markup:
<li data-name="library-search-facet" class="bg_white-8 br_radius m-t_3 p_3 max-w_20:md {{ modifier_class }}">
    <header class="flex font-size_up m-y_2">
        <div class="flex_auto  self_center p-l_0 lh_1 font-size_up font_medium">Type Ahead Filter</div>
    </header>
    <main class="p_1 collapse show">
        <div class="p_3 flex flex_row">
            <input class="br-tr_square br-br_square" type="text" name="" id="" placeholder="Filter Name">
            <button class="btn btn-secondary br-tl_square br-bl_square"><i class="fas fa-users"></i></button>
        </div>
    </main>
    <header class="flex font-size_up m-y_2">
        <div class="flex_auto self_center p-l_2 lh_1 font-size_down font_bold opacity_8">Filtering By</div>
        {{> "Sub.CollapseIcon" modifier_class="#collapseTypeAhead" }}
    </header>
    <main id="collapseTypeAhead" class="p_1 collapse show" style="">
        <ul class="p-y_3 ul_none br-t_1 br-b_1 br_primary-3 transition_3 br_solid">
            {{>  "Sub.Search.FacetCheckboxWithTrash" modifier_class="facet_6590" }}
            {{>  "Sub.Search.FacetCheckboxWithTrash" modifier_class="facet_2455" }}
        </ul>
        <footer class="text_center font-size_down c_primary-n1 p-t_3"><span class="cursor_not-allowed c_black-3">less</span><span class="c_primary"> | </span><span class="link h:underline h:black link h:underline h:black cursor_pointer">more</span></footer>
    </main>
</li> 

MarkupWrapperClasses:



Weight:100

Styleguide Sub.Search.Faceted.TypeAhead
*/
/*

Collapse/Expand

The collapse/expand icon is used to collapse and expand the facet group.

Markup:
<div class="c_primary-n2 flex flex_nowrap flex_row font-size_down h:c_primary-n3 h:opacity h:undecorated items_center lh_1 m-l_auto opacity_5 self_center toggle user-select_none p-l_4" data-bs-toggle="collapse" data-bs-target="{{modifier_class}}" role="button" aria-expanded="true" aria-controls="{{modifier_class}}">
  <div class="flex_none self_center"> collapse </div>
  <div class="flex_none" >
      <span class="fa-stack">
        <i class="fas fa-minus fa-stack-1x"></i>
        <i class="fas fa-minus rotate_90 a:rotation fa-stack-1x "></i>
      </span>
  </div>
</div>

Weight:0

Styleguide Sub.CollapseIcon
*/
/*

Collapse/Expand No Text

The collapse/expand icon is used to collapse and expand the facet group.

Markup:
<div class="toggle user-select_none" data-bs-toggle="collapse" data-bs-target="{{modifier_class}}" role="button" aria-expanded="true" aria-controls="{{modifier_class}}">
        <span class="fa-stack">
        <i class="fas fa-square fa-stack-2x"></i>
        <i class="fas fa-minus fa-stack-1x c_white"></i>
        <i class="fas fa-minus rotate_90 a:rotation fa-stack-1x  c_white"></i>
        </span>
</div>


Weight:0

Styleguide Sub.CollapseIcon.NoText
*/
/*

Facet Checkbox

The single checkbox for a facet.

Markup:
<li class="m-y_2">
    <div class="input flex user-select_none relative h:bg_black-1 br_radius">
        <div class="flex_none p-l_3 p-r_3 self_center"><input type="checkbox" name="check{{modifier_class}}" id="check{{modifier_class}}" class="font-size_up"></div>
        <div class="flex_auto self_center p-l_2 p-y_2"><label for="check{{modifier_class}}" class="font-size_up lh_2 block"><span class="font_regular p-y_2 inline-block p-y_1:md"> {{ modifier_class }}ut nobis est<small class="flex_auto p-l_2 font_light c_accent font-size_down-1">58</small></span></label></div>
        <!---->
    </div>
</li>

MarkupWrapperClasses: ul_none

Weight:0

Styleguide Sub.Search.FacetCheckbox
*/
/*

Facet Checkbox With Trash

The single checkbox that is generated by the type ahead filter search. The trash button removes the filter. 

Markup:
<li class="m-y_2">
    <div class="input flex user-select_none relative h:bg_black-1 br_radius">
        <div class="flex_none p-l_3 p-r_3 self_center"><input type="checkbox" name="checkfacet{{modifier_class}}" id="checkfacet{{modifier_class}}" class="font-size_up"></div>
        <div class="flex_auto self_center p-l_2 p-y_2"><label for="checkfacet{{modifier_class}}" class="font-size_up lh_2 block"><span class="font_regular p-y_2 inline-block p-y_1:md">  type ahead filter {{ modifier_class }}</span></label></div>
        <div class="">
            <button class="bg_transparent br_0 br_radius c_alert h:bg_alert-3 h:c_alert-n3 p-y_2"><i class="fas fa-trash"></i></button>
        </div>
        <!---->
    </div>
</li>

MarkupWrapperClasses: ul_none

Weight:0

Styleguide Sub.Search.FacetCheckboxWithTrash
*/
/*


Search Bar

Simple Search Bar


Markup:
<div class=" sticky jump-buttons_top  r_0 z_1">
<div class="absolute r_4 t_0  flex flex_row flex_nowrap gap-x_3">
<!--  Helper Jump links -->
  <a class="br-tl_square br-tr_square br_radius btn btn-accent btn-sm grid items_center justify_center m-l_auto self_center shadow_3" href="#SearchBarTop">
  <span><i class="fas fa-arrow-up"></i><i class="m-l_2 fas fa-search"></i></span>
  </a>
  <a href="#FilterNavContainer" class="br-tl_square br-tr_square br_radius btn btn-accent btn-sm display_none:md grid items_center justify_center m-l_auto self_center shadow_3">
  <span><i class="fas fa-arrow-down"></i><i class="m-l_2 fas fa-filter"></i></span>
  </a>
<!--  Helper Jump links -->  
</div>
</div>
<div class="bg_white br_radius p_4:lg p_3 shadow_overlap-light z_2 relative" >
    <h1 class="c_primary-n1 font_display m-b_3 m-t_0 flex flex_row justify_between"><span>Program</span>
      <a href="#FilterNavContainer" class="absolute br-tl_square br-tr_square br_radius btn btn-accent btn-sm display_none:md flex_none grid items_center justify_center m-l_auto r_3 self_center t_0">
      <span><i class="fas fa-arrow-down"></i><i class="fas fa-filter"></i></span>
      </a>
    </h1>
    <div class="flex_row flex gap-x_3">
      <div class="input-holder flex_auto flex flex_row self_end relative w_100">
          <input id="input_uniqueTextAnda" name="input_uniqueTextAnda" type="text" placeholder="Search" class=" br_2 flex_auto p-y_2 br_solid flex_auto p-l_4 lh_3 br_radius bg_white c_black bg_white f:bg_primary br_black-2 font_2:lg font_1:md font_0">
          <button class="absolute b_0 br-bl_square br-tl_square btn btn-primary flex_none grid items_center justify_center r_0 t_0" onClick="Search()">
          <i class="fas fa-search"></i>
          </button>
      </div>
      <button class="disabled flex_none grid items_center justify_center btn btn-alert">
        <i class="fas fa-times"></i>
      </button>
    </div>
</div>


MarkupWrapperClasses: 

Weight: 0

Styleguide  Sub.Search.Bar
*/
.jump-buttons_top {
  top: 0;
  top: 56px;
  top: 3.5rem;
}

/*


Program Bar

Some events don't need a search bar the program bar remains because it is need to hide the jump links.


Markup:
<div class=" sticky t_0 r_0 z_1">
<div class="absolute r_4 t_0  flex flex_row flex_nowrap gap-x_3">
<!--  Helper Jump links -->
  <a class="br-tl_square br-tr_square br_radius btn btn-accent btn-sm grid items_center justify_center m-l_auto self_center shadow_3" href="#SearchBarTop">
  <span><i class="fas fa-arrow-up"></i> top</span>
  </a>
  <a href="#FilterNavContainer" class="br-tl_square br-tr_square br_radius btn btn-accent btn-sm display_none:md grid items_center justify_center m-l_auto self_center shadow_3">
  <span><i class="fas fa-arrow-down"></i><i class="m-l_2 fas fa-filter"></i></span>
  </a>
<!--  Helper Jump links -->  
</div>
</div>
<div class="bg_white br_radius p_4:lg p_3 shadow_overlap-light z_2 relative" >
    <h1 class="c_primary-n1 font_display m-b_3 m-t_0 flex flex_row justify_between"><span>Program</span>
      <a href="#FilterNavContainer" class="absolute br-tl_square br-tr_square br_radius btn btn-accent btn-sm display_none:md flex_none grid items_center justify_center m-l_auto r_3 self_center t_0">
      <span><i class="fas fa-arrow-down"></i><i class="fas fa-filter"></i></span>
      </a>
    </h1>
</div>


MarkupWrapperClasses: 

Weight: 0

Styleguide  Sub.Search.NoBar
*/
/*

Result Overview

Small strip of data that shows the number of results and the time it took to search.

Markup:
<div class="c_secondary-n1 font_medium font-size_down-2 font_ui p_2 {{modifier_class}}">
  <ul class="ul_inline-pipe">
      <li>
        <ul class="ul_inline-comma">
            <li class="font_bold   no-after uppercase">Results:</li>
            <li class="c_accent-n1">230</li>  
        </ul>
      </li>
      <li>
        <ul class="ul_inline-comma">
            <li class="font_bold no-after uppercase">Filters:</li>
            <li><a class="h:underline c_primary-n1 c_primary-n2">Category A <i class="fas fa-times c_alert-n1 p_2"></i></a></li>
            <li><a class="h:underline c_primary-n1 c_primary-n2">Tag B  <i class="fas fa-times c_alert-n1 p_2"></i></a></li>
            <li><a class="h:underline c_primary-n1 c_primary-n2">Tag C <i class="fas fa-times c_alert-n1 p_2"></i></a></li>
        </ul>
      </li>
  </ul>
</div>



Weight:0

Styleguide Sub.Search.ResultOverview
*/
/*

Pagination

Pagination is used to navigate through the results.

Markup:
<nav aria-label="Pagination" class="flex flex_row p-b_5:lg p-b_4">
    <ul class="pagination flex flex_row ul_none justify_stretch relative lh_0 font_n1 font_medium m-x_auto shadow_bevel-light br_radius overflow_hidden">
        <li class="flex pagination-previous ">
            <a class="ease_out transition_1 f:outline_none h:undecorated a:bg_accent-n3 a:c_white c_black-7 h:c_black text_center inline-block w_auto cursor_pointer br-tl_radius br-bl_radius overflow_hidden br_square br-l_1 br_solid br_1 br_black-3 bg_white h:bg_black-3 p-y_3 p-x_3" style="min-height: unset;">
                <div class="flex block justify_center flex_column ">
                    <div class="flex_auto self_center justify_center flex">
                        <div class="flex flex_row nowrap"><i class="fas fa-arrow-left p-r_3 self_center"></i> <span class="show-for-sr display_none inline:md self_center">Prev</span></div>
                    </div>
                </div>
            </a>
        </li>
        <!---->
        <li class="flex">
            <a class="ease_out transition_1 f:outline_none h:undecorated a:bg_accent-n3 a:c_white c_black-7 h:c_black text_center inline-block w_auto cursor_pointer  br_square br-l_1 br_solid br_1 br_black-3 bg_white h:bg_black-3 p-y_3 p-x_3" style="min-height: unset;">
                <div class="flex block justify_center flex_column ">
                    <div class="flex_auto self_center justify_center flex"><i class="fas  fa-ellipsis-h left"></i></div>
                </div>
            </a>
        </li>
        <li class="flex">
            <a class="ease_out transition_1 f:outline_none h:undecorated a:bg_accent-n3 a:c_white c_black-7 h:c_black text_center inline-block w_auto cursor_pointer  br_square br-l_1 br_solid br_1 br_black-3 bg_white h:bg_black-3 p-y_3 p-x_3" style="min-height: unset;">
                <div class="flex block justify_center flex_column ">
                    <div class="flex_auto self_center justify_center flex">50 </div>
                </div>
            </a>
        </li>
        <li class="flex">
            <a class="active ease_out transition_1 f:outline_none h:undecorated a:bg_accent-n3 a:c_white c_black-7 h:c_black text_center inline-block w_auto cursor_pointer  br_square br-l_1 br_solid br_1 br_black-3 bg_white h:bg_black-3 p-y_3 p-x_3" style="min-height: unset;">
                <div class="flex block justify_center flex_column ">
                    <div class="flex_auto self_center justify_center flex">51 </div>
                </div>
            </a>
        </li>
        <li class="flex">
            <a class="ease_out transition_1 f:outline_none h:undecorated a:bg_accent-n3 a:c_white c_black-7 h:c_black text_center inline-block w_auto cursor_pointer  br_square br-l_1 br_solid br_1 br_black-3 bg_white h:bg_black-3 p-y_3 p-x_3" style="min-height: unset;">
                <div class="flex block justify_center flex_column ">
                    <div class="flex_auto self_center justify_center flex">52 </div>
                </div>
            </a>
        </li>
        <li class="flex">
            <a class="ease_out transition_1 f:outline_none h:undecorated a:bg_accent-n3 a:c_white c_black-7 h:c_black text_center inline-block w_auto cursor_pointer  br_square br-l_1 br_solid br_1 br_black-3 bg_white h:bg_black-3 p-y_3 p-x_3" style="min-height: unset;">
                <div class="flex block justify_center flex_column ">
                    <div class="flex_auto self_center justify_center flex">53 </div>
                </div>
            </a>
        </li>
        <li class="flex">
            <a class="ease_out transition_1 f:outline_none h:undecorated a:bg_accent-n3 a:c_white c_black-7 h:c_black text_center inline-block w_auto cursor_pointer  br_square br-l_1 br_solid br_1 br_black-3 bg_white h:bg_black-3 p-y_3 p-x_3" style="min-height: unset;">
                <div class="flex block justify_center flex_column ">
                    <div class="flex_auto self_center justify_center flex">54 </div>
                </div>
            </a>
        </li>
        <li class="flex">
            <a class="ease_out transition_1 f:outline_none h:undecorated a:bg_accent-n3 a:c_white c_black-7 h:c_black text_center inline-block w_auto cursor_pointer  br_square br-l_1 br_solid br_1 br_black-3 bg_white h:bg_black-3 p-y_3 p-x_3" style="min-height: unset;">
                <div class="flex block justify_center flex_column ">
                    <div class="flex_auto self_center justify_center flex"><i class="fas  fa-ellipsis-h right"></i></div>
                </div>
            </a>
        </li>
        <!---->
        <li class="flex pagination-next">                        
            <a class="ease_out transition_1 f:outline_none h:undecorated a:bg_accent-n3 a:c_white c_black-7 h:c_black text_center inline-block w_auto cursor_pointer  br-tr_radius br-br_radius overflow_hidden br_square br-l_1 br_solid br_1 br_black-3 bg_white h:bg_black-3 p-y_3 p-x_3" aria-label="Next Page" style="min-height: unset;">
                <div class="flex block justify_center flex_column ">
                    <div class="flex_auto self_center justify_center flex">
                        <div class="flex flex_row nowrap"><span class="show-for-sr display_none inline:md self_center">Next</span> <i class="fas fa-arrow-right p-l_3 self_center"></i></div>
                    </div>
                </div>
            </a>
        </li>
    </ul>
</nav>

MarkupWrapperClasses: 

Weight:0

Styleguide Sub.Pagination
*/
/*
Faculty List

When it is only important to show the credits listed and not the credit values this simple dot pattern is a good solution. 

block         - use block on the role type label to stack the faculty names.
inline-block  - use inline-block on the role type label to keep all the faculty in wrapping single line. 

Markup:
<ul class="ul_inline-semicolon font_regular font_copy">
  <li class="no-after font_medium c_primary-n1 block w_100 {{ modifier_class }}">Role Type 1:</li>
  <li>{{> "Data.Faculty.FullName" }} <span class="opacity_9 font_light m-l_2">( {{> "Data.Faculty.Location" }})<span></li>
  <li class="no-after font_medium c_primary-n1 block w_100  {{ modifier_class }}">Role Type 2:</li>
  <li>Dianna Denesik III <span class="opacity_9 font_light m-l_2">( {{> "Data.Faculty.Location" }})<span></li>
  <li>Miguel Romaguera <span class="opacity_9 font_light m-l_2">( {{> "Data.Faculty.Location" }})<span></li>  
  <li>Jeanette Franecki <span class="opacity_9 font_light m-l_2">( {{> "Data.Faculty.Location" }})<span></li>
</ul>

Data:
Data.Faculty.FullName - Full Name
Data.Faculty.FullName - Location

FORMAT: This element uses data that has strict data formatting requirements. See the data tab for more information.

Weight:0

Styleguide Sub.FacultyList

*/
/*
Aux Session Faculty List

When it is only important to show the credits listed and not the credit values this simple dot pattern is a good solution. 

block         - use block on the role type label to stack the faculty names.
inline-block  - use inline-block on the role type label to keep all the faculty in wrapping single line. 

Markup:
<h4 class="font-size_up c_black-6 font_medium capitalize"><i class="fas fa-users p-r_3"></i> Role Type 1</h4>
<div class="p-y_3 br-t_1  br_primary-2 br_solid font-size_down">
<ul class="ul_inline-semicolon font_regular font_copy">
  <li>Marty Little <span class="opacity_9 font_light m-l_2">( {{> "Data.Faculty.Location" }})<span></li>
  <li>Eileen Marvin <span class="opacity_9 font_light m-l_2">( {{> "Data.Faculty.Location" }})<span></li>  
  <li>Chelsea Dach DVM <span class="opacity_9 font_light m-l_2">( {{> "Data.Faculty.Location" }})<span></li>
</ul>
</div>
<h4 class="font-size_up c_black-6 font_medium capitalize"><i class="fas fa-users p-r_3"></i> Role Type 2</h4>
<div class="p-y_3 br-t_1  br_primary-2 br_solid font-size_down">
<ul class="ul_inline-semicolon font_regular font_copy">
  <li>Wm Price<span class="opacity_9 font_light m-l_2">( {{> "Data.Faculty.Location" }})<span></li>
  <li>Mrs. Jeffrey Cartwright <span class="opacity_9 font_light m-l_2">( {{> "Data.Faculty.Location" }})<span></li>  
  <li>CEmmett Spencer<span class="opacity_9 font_light m-l_2">( {{> "Data.Faculty.Location" }})<span></li>
</ul>
</div>


SubComponents:
Data.Faculty.FullName - Full Name
Data.Faculty.Location - Location


Weight:0

Styleguide Sub.FacultyList.AuxSession

*/
/*
Combined Faculty List

When a presentation is in a single state the combination of session roles and presentation roles are shown.

block         - use block on the role type label to stack the faculty names.
inline-block  - use inline-block on the role type label to keep all the faculty in wrapping single line. 

Markup:
<ul class="ul_inline-semicolon font_regular font_copy">
  <li class="no-after font_medium c_primary-n1 {{ modifier_class }}">Session Role Type 1:</li>
  <li>{{> "Data.Faculty.FullName" }} <span class="opacity_9 font_light m-l_2">( {{> "Data.Faculty.Location" }})<span></li>
  <li class="no-after font_medium c_primary-n1  {{ modifier_class }}">Session Role Type 2:</li>
  <li>Dianna Denesik III <span class="opacity_9 font_light m-l_2">( {{> "Data.Faculty.Location" }})<span></li>
  <li>Miguel Romaguera <span class="opacity_9 font_light m-l_2">( {{> "Data.Faculty.Location" }})<span></li>  
  <li>Jeanette Franecki <span class="opacity_9 font_light m-l_2">( {{> "Data.Faculty.Location" }})<span></li>
    <li class="no-after font_medium c_primary-n1 {{ modifier_class }}">Role Type 1:</li>
  <li>{{> "Data.Faculty.FullName" }} <span class="opacity_9 font_light m-l_2">( {{> "Data.Faculty.Location" }})<span></li>
  <li class="no-after font_medium c_primary-n1  {{ modifier_class }}">Role Type 2:</li>
  <li>Dianna Denesik III <span class="opacity_9 font_light m-l_2">( {{> "Data.Faculty.Location" }})<span></li>
  <li>Miguel Romaguera <span class="opacity_9 font_light m-l_2">( {{> "Data.Faculty.Location" }})<span></li>  
  <li>Jeanette Franecki <span class="opacity_9 font_light m-l_2">( {{> "Data.Faculty.Location" }})<span></li>
</ul>

SubComponents:
Data.Faculty.FullName - Full Name
Data.Faculty.FullName - Location


Weight:0

Styleguide Sub.FacultyList.SessionAndPresentation

*/
/*
Session Faculty List

When it is only important to show the credits listed and not the credit values this simple dot pattern is a good solution. 

block         - use block on the role type label to stack the faculty names.
inline-block  - use inline-block on the role type label to keep all the faculty in wrapping single line. 

Markup:
<ul class="ul_inline-semicolon font_regular font_copy">
  <li class="no-after font_medium c_primary-n1 {{ modifier_class }}">Session Role Type 1:</li>
  <li>{{> "Data.Faculty.FullName" }} <span class="opacity_9 font_light m-l_2">( {{> "Data.Faculty.Location" }})<span></li>
  <li class="no-after font_medium c_primary-n1  {{ modifier_class }}">Session Role Type 2:</li>
  <li>Dianna Denesik III <span class="opacity_9 font_light m-l_2">( {{> "Data.Faculty.Location" }})<span></li>
  <li>Miguel Romaguera <span class="opacity_9 font_light m-l_2">( {{> "Data.Faculty.Location" }})<span></li>  
  <li>Jeanette Franecki <span class="opacity_9 font_light m-l_2">( {{> "Data.Faculty.Location" }})<span></li>
</ul>

SubComponents:
Data.Faculty.FullName - Full Name
Data.Faculty.FullName - Location


Weight:0

Styleguide Sub.FacultyList.Session

*/
/*
No Location Faculty List

When you list non-event areas like Posters, and Abstracts the list removes the location of the person. 

block         - use block on the role type label to stack the faculty names.
inline-block  - use inline-block on the role type label to keep all the faculty in wrapping single line. 

Markup:
<ul class="ul_inline-semicolon font_regular font_copy">
  <li class="no-after font_medium c_primary-n1 {{ modifier_class }}">Role Type 1:</li>
  <li>{{> "Data.Faculty.FullName" }}</li>
  <li class="no-after font_medium c_primary-n1  {{ modifier_class }}">Role Type 2:</li>
  <li>Dianna Denesik III</li>
  <li>Miguel Romaguera</li>  
  <li>Jeanette Franecki</li>
</ul>

SubComponents:
Data.Faculty.FullName - Full Name


Weight:0

Styleguide Sub.FacultyList.NoLocation

*/
/*

Member Profile Data

Data for the Member Profile that is visible for the user.

Markup:
<section class="bg_acc-n2 br_1 br_black-2 br_round br_solid p-x_5:lg p_4 inset-level_up shadow_bevel-bold">
  <div class="c_white">
    <h2 class="br-b_1 br_solid br_white-6 c_white m-t_2 p-b_3 text_center">Account Information</h2>
    <ul class="ul_none p_0 m_0">
    <li class=""><strong>User Name:</strong> <span data-type="User Full Name">Regina Rutherford</span> </li>
    <li class=""><strong>Member ID:</strong> <span data-type="Member ID">0152151214</span> </li><li class=""><strong>Email:</strong> <span data-type="email">test@boo.com</span> </li>
    </ul>
  </div>
  <div class="bg_black-4 br_radius c_white m-b_n2 m-t_4 m-x_n4 p_4 shadow_emboss-light">
    <p class=""><strong>Click the 'Member Help' button to send along your member information to help diagnose this issue.</strong></p><div class="text_center"><a href="mailTO:membercare@acc.org?body='name,email,personify'" class="btn btn-primary c_white inline-block m-x_auto shadow_overlap-light text_center w_auto">Member Care</a></div>
  </div>
</section>

MarkupWrapperClasses: 

Weight:0

Styleguide Sub.System.MemberData

*/
/*

No Access Trouble Shooting

The instructions to the user when they land on the "No Access" to the page.

Markup:
<div class="inset-level_up-1 bg_white br_radius shadow_overlap-light relative br_solid br_1 br_black-2 p_4 relative ">
	<div class="reading-typography flex flex_column gap_4">
		<h2 class="">No Access to [PRODUCT NAME]</h2>
		<p>[PRODUCT DESCRIPTION].  To read more about the details of [PRODUCT NAME] click the learn more button.</p>
		<div class="flex flex_row gap_3 justify_center">
			<a href="[PRODUCT MARKETING URL]" class="w_100 block max-w_20 btn btn-secondary c_white font_bold font_ui h:c_white shadow_overlap-light " title="Navigate to [PRODUCT NAME] detail page">Learn More</a>
		</div>
	</div>
</div>	
<div class="inset-level_up-1 bg_white br_radius shadow_overlap-light relative br_solid br_1 br_black-2 p_4 relative ">
	<div class="reading-typography flex flex_column gap_4">
		<h2 class="font_bold">Registration Steps</h2>
		<ol class="counter_reset m_0 p_0 ul_none flex_column flex gap_4">
			<li class="flex flex_row">
				<span class="c_primary counter counter_increment flex_none float_left font_9 font_accent font_xbold lh_0 p-r_4 self_top p-t_4"></span>
				<div class="flex_auto">
					<p>To purchase, please click the "Register" button below. Once you have completed your purchase, please <strong class="uppercase m-x_2 p_2 bg_warning-3 br_radius p-x_3 font_xbold nowrap">wait 15 minutes</strong> to allow the system to process the information. </p>
				</div>
			</li>
			<li class="flex flex_row gap_3 justify_center">
				<a title="register for the  [PRODUCT NAME]" href="https://www.acc.org/Education-and-Meetings/Meetings/Meeting-Items/2022/01/01/01/04/ACC-Anywhere-ACC22-On-Demand" class="w_100 block max-w_20 btn btn-primary c_white font_bold font_ui h:c_white shadow_overlap-light ">Register</a>
			</li>
			<li class="flex flex_row">
				<span class="c_primary counter counter_increment flex_none float_left font_9 font_accent font_xbold lh_0 p-r_4 self_top p-t_4"></span>
				<div class="flex_auto">
					<p>If you have just registered and you have <strong class="uppercase m-x_2 p_2 bg_warning-3 br_radius p-x_3 font_xbold nowrap">waited 15 minutes</strong> and you have arrived here in error click the "Refresh Access" Button to get into [PRODUCT NAME].</p>
				</div>
			</li>
			<li class="flex flex_row gap_3 justify_center">
				<a title="reset the access from you account" href="[EVENT AUTHENTICATION URL]" class="w_100 block max-w_20 btn btn-primary c_white font_bold font_ui h:c_white shadow_overlap-light ">Refresh Access</a>
			</li>
			<li class="flex flex_row">
				<span class="c_primary counter counter_increment flex_none float_left font_9 font_accent font_xbold lh_0 p-r_4 self_top p-t_4"></span>
				<div class="flex_auto">
					<div class="flex flex_row:md flex_column">
						<div class="reading-typography flex flex_column gap_4 flex_50 p-r_5:md">
							<p class="font_bold">If you believe you have received this message in error, please contact <a href="mailto:MemberCare@ACC.org"><em>Member Care</em></a> </p>
							<ul class="ul_none p_3">
								<li class="font_bold">For additional questions, please contact ACC Member Care.</li>
								<li><strong>Email:</strong> <a href="mailto:MemberCare@ACC.org"><em>MemberCare@ACC.org</em></a></li>
								<li><strong>Phone:</strong> 202-375-6000 ext. 5603   </li>
								<li><strong>Toll-Free:</strong> 800-253-4636 ext. 5603</li>
							</ul>
						</div>
						<div class=" flex_50"`>
							{{> 'Sub.System.MemberData' }}
						</div>
					</div>
				</div>
			</li>
		</ol>
	</div>
</div>

MarkupWrapperClasses: 

Weight:0

Styleguide Sub.System.AccessTroubleShooting


*/
/*

Class Lists

This is a combination of the classes that build common decorative elements or spacing in the design.


MarkupWrapperClasses: 

Weight:99999

Styleguide Sub.ClassList
*/
/*

Body Classes

The list of classes used on the body tag

Markup:
bg_black-4 w_100 p_3:md p_2

MarkupWrapperClasses: 

Weight: 0

NOTE: Combination of classes used as a common decorators.

Styleguide Sub.ClassList.Body
*/
/*

Page Area

The list of classes used on the body tag

Markup:
p_2 p_3:md isolation_isolate br_radius bg_white-7

MarkupWrapperClasses: 

Weight: 0

NOTE: Combination of classes used as a common decorators.

Styleguide Sub.ClassList.Page
*/
/*

Inset Level_up

The list of classes used on the body tag

Markup:
inset-level_up bg_white-7 br_radius br_solid br_1 br_black-2

MarkupWrapperClasses: 

Weight: 0

NOTE: Combination of classes used as a common decorators.

Styleguide Sub.ClassList.Inset.up 
*/
/*

Inset Level_up-1

The list of classes used on the body tag

Markup:
inset-level_up-1 bg_white br_radius shadow_overlap-light relative br_solid br_1 br_black-2

MarkupWrapperClasses: 

Weight: 0

NOTE: Combination of classes used as a common decorators.

Styleguide Sub.ClassList.Inset.up-1 
*/
/*

Inset level_down

The list of classes used on the body tag

Markup:
inset-level_down bg_black-_05 shadow_emboss-light br_radius br_solid br_1 br_black-1

MarkupWrapperClasses: 

Weight: 0

NOTE: Combination of classes used as a common decorators.

Styleguide Sub.ClassList.Inset.down
*/
/*

Inset level_down-1

The list of classes used on the body tag

Markup:
inset-level_down-1 bg_black-1 shadow_emboss-light br_solid br_1 br_black-2 br_radius texture_light

MarkupWrapperClasses: 

Weight: 0

NOTE: Combination of classes used as a common decorators.

Styleguide Sub.ClassList.Inset.down-1
*/
/*

Inset level_down-2

The list of classes used on the body tag

Markup:
inset-level_down-2 bg_black-2 shadow_emboss-light br_solid br_1 br_black-3 br_radius  texture_light

MarkupWrapperClasses: 

Weight: 0

NOTE: Combination of classes used as a common decorators.

Styleguide Sub.ClassList.Inset.down-2
*/
/*

Inset padding Level 0

The list of classes used on the body tag

Markup:
p_2 p_3:md

MarkupWrapperClasses: 

Weight: 0

NOTE: Combination of classes used as a common decorators.

Styleguide Sub.ClassList.Inset.padding

*/
/*

Inset padding Level 1

The list of classes used on the body tag

Markup:
p_2 p_3:md p_4:lg

MarkupWrapperClasses: 

Weight: 0

NOTE: Combination of classes used as a common decorators.

Styleguide Sub.ClassList.Inset.padding.up-1

*/
/*

Inset Margin Level -1

The list of classes used on the body tag

Markup:
m-x_n2 m-x_n3:md m-x_n4:lg

MarkupWrapperClasses: 

Weight: 0

NOTE: Combination of classes used as a common decorators.

Styleguide Sub.ClassList.Inset.margin.down-1

*/
/*

Inset padding Level 2

The list of classes used on the body tag

Markup:
p_3 p_4:lg

MarkupWrapperClasses: 

Weight: 0

NOTE: Combination of classes used as a common decorators.

Styleguide Sub.ClassList.Inset.padding.up-2

*/
/*

Inset padding Level 3

The list of classes used on the body tag

Markup:
p_4

MarkupWrapperClasses: 

Weight: 0

NOTE: Combination of classes used as a common decorators.

Styleguide Sub.ClassList.Inset.padding.up-3

*/
/*

Inset padding Level 4

The list of classes used on the body tag

Markup:
p_4 p_5:lg

MarkupWrapperClasses: 

Weight: 0

NOTE: Combination of classes used as a common decorators.

Styleguide Sub.ClassList.Inset.padding.up-4

*/
/*

Vertical padding Level 0

The list of classes used on the body tag

Markup:
p-y_2 p-y_3:md

MarkupWrapperClasses: 

Weight: 0

NOTE: Combination of classes used as a common decorators.

Styleguide Sub.ClassList.Vertical.padding

*/
/*

Vertical padding Level 1

The list of classes used on the body tag

Markup:
p-y_2 p-y_3:md p-y_4:lg

MarkupWrapperClasses: 

Weight: 0

NOTE: Combination of classes used as a common decorators.

Styleguide Sub.ClassList.Vertical.padding.up-1

*/
/*

Vertical padding Level 2

The list of classes used on the body tag

Markup:
p-y_3 p-y_4:lg

MarkupWrapperClasses: 

Weight: 0

NOTE: Combination of classes used as a common decorators.

Styleguide Sub.ClassList.Vertical.padding.up-2

*/
/*

Vertical padding Level 3

The list of classes used on the body tag

Markup:
p-y_4 p-y_5:lg

MarkupWrapperClasses: 

Weight: 0

NOTE: Combination of classes used as a common decorators.

Styleguide Sub.ClassList.Vertical.padding.up-3

*/
/*

Border Top Primary

Used in dividing lists of items.

Markup:
 br-t_1  br_primary-2 br_solid

MarkupWrapperClasses: 

Weight:0

Styleguide Sub.ClassList.Border.PrimaryTop
*/
/*

Border Top Primary

Used in dividing lists of items.

Markup:
br-t_1 br_black-3 br_solid

MarkupWrapperClasses: 

Weight:0

Styleguide Sub.ClassList.Border.BlackTop
*/
/*

Credits Chiclets

Credits show in the design when they are available to be claimed by the media they are on. 

default		 -  there is no default version of credits it is always a type.
CME		 -  CME Credits
CNE	 -  CNE Credits

Markup:
<span class="bg_{{ modifier_class }}-n2 block br_1 br_black-3 br_round br_solid c_white font_bold font_ui lh_1 p-y_1 p_2 text-shadow_black-1 text_center">{{ modifier_class }}</span>

MarkupWrapperClasses:p_2 

Weight: 0

Styleguide Sub.Credit
*/
/*

Favorite/Bookmark Button

This button has an active and deactivate state depending on the users select of that media item. 

default		 -   plan button
active        -  the media item is selected

Markup:
<a class="inline-block m-x_n3 m-t_n1 {{modifier_class}}">
    <span class="fa-stack fa-2x a:c_alert-n2 c_secondary-2 h:c_alert-n3">
        <i class="fas fa-bookmark fa-stack-2x c_inherit-all text-shadow_black-1"></i>
        <i class="fa-heart c_black-4 h:c_white a:c_white fa-stack-1x fas font-size_down-1  text-shadow_black-n1"></i>
    </span>
</a>

MarkupWrapperClasses: 

Weight: 0


Styleguide Sub.ActionButtons.Favorite
*/
/*

Section Header

Section Headers are styled the same

default - plan header

Markup:
<header class="font_display font_regular  c_primary-n1 m-b_3 lh_1 m-b_4:lg m-t_3 "><h2 class="lh_1 m_0 font_regular lowercase font_3:lg font_2:md font_1">{{modifier_class}}</h2></header>

MarkupWrapperClasses: 

Weight:0

Styleguide Sub.Section.h2
*/
/*

Section Header Down

Section Headers are styled the same

default - plan header

Markup:
<header class="font_display font_regular  c_primary-n2 m-b_2 lh_1 m-b_3:lg m-t_2 "><h3 class="lh_1 m_0 font_regular lowercase font_2:lg font_1:md font_0">{{modifier_class}}</h3></header>

MarkupWrapperClasses: 

Weight:0

Styleguide Sub.Section.h3
*/
/*

Section Header

Section Headers are styled the same

default - plan header

Markup:
<header class="p-x_4 font_display font_regular  c_primary-n1 m-b_3 lh_1 m-b_4:lg m-t_3 "><h2 class="lh_1 m_0 font_regular lowercase font_3:lg font_2:md font_1">{{modifier_class}}</h2></header>

MarkupWrapperClasses: 

Weight:0

Styleguide Sub.Section.h2.with-padding
*/
/*

Section Header Down

Section Headers are styled the same

default - plan header

Markup:
<header class="p-x_4 font_display font_regular  c_primary-n2 m-b_2 lh_1 m-b_3:lg m-t_2 "><h3 class="lh_1 m_0 font_regular lowercase font_2:lg font_1:md font_0">{{modifier_class}}</h3></header>

MarkupWrapperClasses: 

Weight:0

Styleguide Sub.Section.h3.with-padding
*/
/*

Progress Player Bar

shows users where they left off with the player. 

default		 -  Has zero player
50          - 50% played 

Markup:
<aside class="bg_secondary-3 h:bg_primary-3 p-x_4 p-y_3 br_radius flex flex_row texture_dust relative">
    <a class="expanded-click-area" href="player@{{ modifier_class }}"><i class="fa fa-play p-x_3 c_primary"></i></a>
    <div class="progress w_100 self_center br_black-2 br_solid bg_black-4 br_1 br_round h_0lh font_n4">
        <div class="progress-bar bg_accent" role="progressbar" style="width: {{ modifier_class }}%" aria-valuenow="{{ modifier_class }}" aria-valuemax="100"></div>
    </div>
</aside>  

Styleguide Sub.ProgressBar
*/
/*

Time Markers

shows users where they results can be found in the result. 

Markup:
<aside class="flex flex_row flex_wrap font_ui {{> 'Sub.ClassList.Inset.down-1'}} {{> 'Sub.ClassList.Inset.padding'}}">
    <strong class="p-r_3 block w_100">Search Word Found At These Time Markers</strong>
    <ul class="ul_inline-pipe">
        <li class="c_primary uppercase font_medium"><a href="#" class="link"><i class="fas fa-play c_primary font-size_down-1 self_center"></i> start</a></li>
        <li><a href="#" class="link"><i class="fas fa-step-forward c_primary font-size_down-1 self_center"></i>  0:53</a></li>
        <li><a href="#" class="link"><i class="fas fa-step-forward c_primary font-size_down-1 self_center"></i>  2:30</a></li>
    </ul>
</aside>

MarkupWrapperClasses: 


ClassList:
Sub.ClassList.Inset.down-1 - Inset Down 1
Sub.ClassList.Inset.padding - Inset Padding

Weight:0

Styleguide Sub.Search.TimeMarkers
*/
/*

Carousel Custom Nav

Tiny Slider custom

Markup:
<div class="customize-tools">
    <ul class="controls ul_none font-size_up-2 c_black-6" id="slider1-customize-controls" aria-label="Carousel Navigation" tabindex="0">
        <li class="prev bg_white-8 h:bg_black-1 h:c_black-9 filter_blur absolute t_1 b_1 l_0 p_3 flex_column flex justify_center items_center br_primary-3 br_solid br_1 br-l_0 br-br_radius br-tr_radius shadow_overlap-light" aria-controls="customize" tabindex="-1" data-controls="prev">
            <i class="fal fa-chevron-left"></i>
        </li>
        <li class="next bg_white-8 h:bg_black-1 h:c_black-9 filter_blur absolute t_1 b_1 r_0 p_3 flex_column flex justify_center items_center br_primary-3 br_solid br_1 br-r_0 br-bl_radius br-tl_radius shadow_overlap-light" aria-controls="customize" tabindex="-1" data-controls="next">
            <i class="fal fa-chevron-right"></i>
        </li>
    </ul>
</div>


MarkupWrapperClasses: 

Weight: 0

Styleguide Sub.Carousel.CustomTools
*/
/*

Carousel Custom Nav Vertical

Tiny Slider custom

Markup:
<div class="customize-tools relative">
    <ul class="absolute b_4 r_0 l_0 controls ul_none font-size_up-2 c_black-6 flex flex_row gap-x_4" id="slider-customize-controls-vertical" aria-label="Carousel Navigation" tabindex="0">
        <li class="prev bg_white-8 block br-br_radius br-l_0 br-tr_radius br_1 br_primary-3 br_solid filter_blur flex flex_auto flex_column h:bg_black-1 h:c_black-9 items_center justify_center p_3 shadow_overlap-light w_50" aria-controls="customize" tabindex="-1" data-controls="prev">
            <i class="fal fa-chevron-up"></i>
        </li>
        <li class="next bg_white-8 block br-bl_radius br-r_0 br-tl_radius br_1 br_primary-3 br_solid filter_blur flex flex_auto flex_column h:bg_black-1 h:c_black-9 items_center justify_center p_3 shadow_overlap-light w_50" aria-controls="customize" tabindex="-1" data-controls="next">
            <i class="fal fa-chevron-down"></i>
        </li>
    </ul>
</div>


MarkupWrapperClasses: 

Weight: 0

Styleguide Sub.Carousel.CustomToolsVertical
*/
/*

Carousel Custom Disabled

Tiny Slider custom

Markup:
<div class="customize-tools">
<ul class="controls ul_none font-size_up-2 c_black-6" id="slider3-customize-controls" aria-label="Carousel Navigation" tabindex="0">
<li class="disabled prev bg_white-8 filter_blur absolute t_1 b_1 l_0 p_3 flex_column flex justify_center items_center br_primary-3 br_solid br_1 br-l_0 br-br_radius br-tr_radius shadow_overlap-light" aria-controls="slider3" tabindex="-1" data-controls="prev">
    <i class="fal fa-chevron-left opacity_3"></i>
</li>
<li class="disabled next bg_white-8  filter_blur absolute t_1 b_1 r_0 p_3 flex_column flex justify_center items_center br_primary-3 br_solid br_1 br-r_0 br-bl_radius br-tl_radius shadow_overlap-light" aria-controls="slider3" tabindex="-1" data-controls="next">
    <i class="fal fa-chevron-right opacity_3"></i>
</li>
</ul>
</div>


MarkupWrapperClasses: 

Weight: 0

Styleguide Sub.Carousel.CustomTools.Disabled
*/
/*

Duration

The length of the clip of video or all the of the lengths of the combined clips. 

Markup:
<li class="inline-block p-r_3 p_2 lh_0">
    <span class="font-size_up c_accent-n2 block"><i class="fal fa-clock"></i> 15</span>
    minutes
</li>

MarkupWrapperClasses: ul_none

Weight: 0



Styleguide Sub.Data.Duration 
*/
/*

Presentation Count

Number of presentations in the session. 

Markup:
<li class="inline-block p-r_3 p_2 lh_0">
    <span class="font-size_up c_accent-n2 block">4</span>
    presentations
</li>

MarkupWrapperClasses: ul_none

Weight: 0

Styleguide Sub.Data.PresentationCount
*/
/*

Attachment Link

Link to attachments. it should state pdf or zip depending 

Markup:
<li class="inline-block br_radius p-x_3 m-l_n3 p_2 z_3 self_end relative h:bg_black-2 lh_0">
    <a href="#" class="undecorated h:undecorated expanded-click-area">
    <span class="font-size_up c_primary-n2 block"><i class="fal fa-paperclip p-r_3"></i> <span class="p-r_3">PDF</span></span> 
        Attachments
    </a>
</li>

MarkupWrapperClasses: ul_none

Weight: 0

Styleguide Sub.Data.AttachmentLink
*/
/*

Attachment Link ZIP

Link to attachments. it should state pdf or zip depending 

Markup:
<li class="inline-block br_radius p-x_3 m-l_n3 p_2 z_3 self_end relative h:bg_black-2 lh_0">
    <a href="#" class="undecorated h:undecorated expanded-click-area">
    <span class="font-size_up c_primary-n2 block"><i class="fal fa-paperclip p-r_3"></i><span class="p-r_3">ZIP</span></span> 
        Attachments
    </a>
</li>

MarkupWrapperClasses: ul_none                                                                           

Weight: 0

Styleguide Sub.Data.AttachmentLink.ZIP
*/
/*

Like Buttons

This buttons are used to rate the videos and download the attachments.

Markup:
<ul class="ul_none flex flex_row lowercase flex flex_row gap_2">
    <li class="br_solid br_black-3 br_radius br_1 h:bg_black-3">
        <a class="p-y_3 p-x_4 " href="#"><i class="fal fa-thumbs-up"></i></a>
    </li>
    <li class="br_solid br_black-3 br_radius br_1 h:bg_black-3">
        <a class="p-y_3 p-x_4 " href="#"><i class="fal fa-thumbs-down"></i></a>
    </li>
    <li class="br_solid br_black-3 br_radius br_1 h:bg_black-3 m-l_auto">
        <a class="p-y_3 p-x_4 " href="#"><i class="fal fa-paperclip"></i> Attachments</a>
    </li>
</ul>

MarkupWrapperClasses: 

Weight:0

Styleguide Sub.ActionButtons.LikeAndAttachments
*/
/*

Breadcrumb First Item

The not first nor last item in the breadcrumb.

Markup:
<li class="flex flex_row flex_none h:c_primary lh_2 m-b_1 relative">
    <i class="fal fa-home fa-fw flex_none self_center c_primary font-size_up "></i>
    <a href="../home" class="inherit_all h:underline undecorated expanded-click-area overflow_ellipsis flex flex_nowrap nowrap" title="navigate to home page">
        <span class="display_none flex_auto inline:md self_center m-l_3">Home</span>
    </a>
</li>

MarkupWrapperClasses: ul_none

Weight:0

Styleguide Sub.Navigation.Breadcrumb.FirstItem
*/
/*

Breadcrumb Not-First Item

The not first nor last item in the breadcrumb.

Search - Search Page
Session Name - Session Page

Markup:
<li class="flex flex_row flex_auto flex_50 h:c_primary lh_2 m-b_1 overflow_hidden relative">
    <i class="fal fa-chevron-left fa-fw m-x_3 flex_none self_center c_primary font-size_down"></i>
    <a href="../watching" class="inherit_all h:underline undecorated expanded-click-area overflow_ellipsis flex flex_nowrap nowrap"  title="navigate to X Page">
        <span class=" flex_auto self_center">Page Type Label</span>
        <span class=" flex_auto self_center display_inline:md display_none">{{modifier_class}}</span>
    </a>
</li>

MarkupWrapperClasses: ul_none

Weight:0

Styleguide Sub.Navigation.Breadcrumb.NotFirstItem
*/
/*

Breadcrumb Last Item

The last Item in the Breadcrumb doesn't include a link to the page and is decorated as highlighted.

Search - Search Page
Session Name - Session Page

Markup:
<li class="flex flex_row flex_auto flex_50 lh_2 m-b_1 overflow_hidden relative c_black-7">
    <i class="fal fa-chevron-left c_primary-n2 m-x_3 self_center font-size_down"></i>
    <div class="flex flex_row flex_nowrap overflow_ellipsis nowrap">
        <span class=" flex_auto self_center">Page Type Label</span>
        <span class=" flex_auto self_center display_inline:md display_none font_medium">{{modifier_class}}</span>
    </div>
</li>

MarkupWrapperClasses: ul_none

Weight:0

Styleguide Sub.Navigation.Breadcrumb.LastItem
*/
/*

Credit Chiclets Horizontal

Horizontal list of credit chiclets.

Markup:
<ul class="flex flex_row font_n3 gap_2 justify_start flex_wrap  self_start ul_none uppercase">
    <li class="lh_0 flex_none">
        {{> 'Sub.Credit' modifier_class='CME' }}
    </li>
    <li class="lh_0 flex_none">
        {{> 'Sub.Credit' modifier_class='CNE' }}
    </li>
    <li class="lh_0 flex_none">
        {{> 'Sub.Credit' modifier_class='AAPA' }}
    </li>
</ul>

MarkupWrapperClasses: 

SubComponents:
Sub.Credit - Credit Chiclet

Weight:0

Styleguide Sub.Credit.Chiclets.Horizontal
*/
/*
Auxiliary Data

Description: Most players have auxiliary data zones that describe the playing element through credits, tags, and categories.

Markup:
<aside class="{{ modifier_class }}">    
    {{> "Sub.FacultyList.AuxSession"  modifier_class=""}}
    <h4 class="font-size_up c_black-6 font_medium capitalize">
        <i class="fas fa-file-certificate p-r_3"></i> Credits
    </h4>
    <div class="p-y_3 {{> 'Sub.ClassList.Border.PrimaryTop'}} font-size_down-1">
        {{> "Sub.Credit.Chiclets.Horizontal" }}
    </div>
    <h4 class="font-size_up  c_black-6 font_medium">
        <i class="fas fa-tag p-r_3"></i>
        category
    </h4>
    <div class="{{> 'Sub.ClassList.Border.PrimaryTop'}} font-size_down">
        {{> "Sub.Tags.Category" }}
    </div>
    <h4 class="font-size_up  c_black-6 font_medium">
        <i class="fas fa-tags p-r_3"></i> tags
    </h4>
    <div class="{{> 'Sub.ClassList.Border.PrimaryTop'}} font-size_down">
        {{> "Sub.Tags.Filter" }}
    </div>
</aside>

SubComponents:
Sub.Credits.NonAccredited - Non Accredited
Sub.FacultyList.AuxSession - Session Faculty Lists
Sub.Credit.Chiclets.Horizontal - Credit Chiclets Horizontal
Sub.Tags.Category - Category
Sub.Tags.Filter - Tags

ClassList:
Sub.ClassList.Border.PrimaryTop - Border Primary Top

Weight:0

Styleguide Sub.Player.AuxData
*/
/*
Category Tag

Category Tags are singular tags that divide content.  An item can only have a single tag from a category group. 

Markup:
<ul class="ul_inline-comma">
  <li>Channel 1</li>
  <li>{{>"Data.Agenda.ChannelName"}}</li>
</ul>


Weight:0

Styleguide Sub.Tags.Category

*/
/*
Filter Tags

Filter Tags are decorative tags that are used to filter content. Many tags from a single group can be applied to a single item.

Markup:
<ul class="ul_inline-comma">
    <li>Tag Name 1</li>
    <li>Daugherty - Larkin</li>
    <li>relationships</li>  
    <li>web-readiness</li>
</ul>


Weight:0

Styleguide Sub.Tags.Filter

*/
/*

Footer Logo

The ACC Logo in the footer.

Markup:
<div id="logo" class="bg_white br_1 br_black-1 br_round br-br_radius br-tl_radius  br_solid flex flex_none flex_row items_center justify_center  shadow_bevel-light {{> 'Sub.ClassList.Inset.padding.up-1'}} {{ modifier_class}} ">
    <h2 class="logo_condensed w_100 max-w_20">American College of Cardiology</h2>
</div>

MarkupWrapperClasses: 

Weight:0

Styleguide Sub.Footer.Logo
*/
/*

Legal RoadBlock Sub Components

The legal roadblock is a page that stops the user when they haven't accepted the terms of use or any other legal agreements needed for the use of the product.

MarkupWrapperClasses: 

Weight:0

Styleguide Sub.Legal
*/
/*

Legal Content Block

A legal block will block a user from the program if they user has not signed it.  If there is more then one user block all must be accepted before the user can proceed.

Markup:
<article class="isolation_isolate p_1 p-b_4 relative">
    <nav class="r_0 sticky t_0 z_1">
        <div class="absolute flex flex_nowrap flex_row gap-x_3 r_4">
            <!--  Helper Jump links -->
            <a class="c_white br-tl_square br-tr_square br_radius btn btn-accent btn-sm grid items_center justify_center m-l_auto self_center shadow_2" href="#TopAgreement1">
                <span><i class="fas fa-arrow-up p-r_2"></i>top</span>
            </a>
            <a class="c_white br-tl_square br-tr_square br_radius btn btn-accent btn-sm grid items_center justify_center m-l_auto self_center shadow_2" href="#Agreement1">
                <span><i class="fas fa-arrow-down p-r_2"></i>scroll down</span>
            </a>
            <!--  Helper Jump links -->
        </div>
    </nav>
    <header class="bg_white p-t_0 p-b_3 relative z_3">
        <h2 class="bg_white m-t_n2 m_0 {{> 'Sub.ClassList.Vertical.padding.up-1'}}">ACC Anywhere 2022 Credit Information, Terms of Service, and License Agreement </h2>
    </header>
    <main class="z_0 isolation_isolate {{> 'Sub.ClassList.Vertical.padding.up-1'}} {{> 'Sub.ClassList.Border.PrimaryTop' }}">
    <!---  Agreement HTML START -->
        <p class="font-size_up">The Terms of Service and License Agreement set forth below constitute a legal agreement (collectively, the "Agreement") between the American College of Cardiology Foundation ("ACCF") and You and your agents ("You" or “Your”) for the use of the ACC Anywhere 2022 (the "Product”).    </p><p class="font-size_up">
            By clicking on the Agree button below, and by using the Product, You accept and agree to be bound by all of the terms and conditions set forth in this Agreement. If You do not wish to accept the terms and conditions of this Agreement, You may not proceed to use the Product. </p>
        <p class="font-size_up"><a href="#" class="c_accent-n2 font_bold font_ui link" target="_blank">Click to Read Full Terms of Service.</a></p>
            <p class="">I hereby certify that I understand and agree to the terms stated in this Agreement and that this Agreement applies to my initial use of the Product and all other subsequent uses of the Product.</p>
            <!---  Agreement HTML END -->
    </main>
</article>

MarkupWrapperClasses: 

ClassList:
Sub.ClassList.Vertical.padding.up-1 - Vertical Padding Up 1
Sub.ClassList.Border.PrimaryTop - Border Primary Top

Weight:0

Styleguide Sub.Legal.ContentBlock
*/
/*

Legal Attestation Statement

This statement is used to attest that the user has read and accepted the legal agreement. This follows all Legal Content Blocks. Clicking the button will flip the `btn-secondary` state to 'btn-sucess active'

.btn-success.active - the accepted state

Markup:
<footer id="Agreement1">
    <div class="bg_acc br_radius c_white font_2 font_bold font_medium font_ui lh_1 m-b_3 p-y_4 p_3 text_center uppercase">By Clicking The Button Below, I Hereby Affirm That I Have Read, Fully Understand, And Agree To The Above Statements. </div>
    <button class="btn btn-secondary {{ modifier_class }} c_white h:undecorated float_right"><i class="fas fa-check display_none a:inline-block"></i> I agree</button>
</footer>


MarkupWrapperClasses: 

Weight:0

Styleguide Sub.Legal.AgreeButton
*/
/*

Search Filter Rail

The filter box on the search page.

Markup:
<div id="filterZone" class="{aspect_1_1:md} {nav-mined} nav-maxed self_start bg_black-3 br_1 br_black-2 br_radius br_solid flex_auto p_2 p_3:md  shadow_emboss-light transition_3 flex flex_column {{modifier_class}}">
	<nav id="FilterNavContainer" class="flex_auto overflow_hidden self_stretch font_4:lg font_3:md font_2 font_display font_display">
		<ul class="flex flex_column:md flex_row gap_3 justify_start:md ul_none w_100 w_auto:md">
			<li class="a:bg_primary a:c_white a:shadow_overlap-light {aspect_1_1:md} br_radius c_white-8 flex_none grid h:bg_black-7 h:c_white h:shadow_overlap-light nav-item p_0:md p_3">
				<a class="c_inherit-all h:undecorated p_3 lh_1 m-x_n1">
					<i class="far fa-filter p-x_2:md p-y_3 p-y_0:md"></i>
					<span class="font-size_down label lh_0 lowercase self_center font_medium {display_none:md}">Filter</span>
				</a>
			</li>
		</ul>
	</nav>
	<ul id="filterFacets" class="ul_none font_n1 {display_none} opacity_none transition_3 min-h_30:md">
		{{> 'Sub.Search.Faceted.TypeAhead' modifier_class="Filter1"}}
		{{> 'Sub.Search.FacetedPrimary' modifier_class="Filter2"}}
		{{> 'Sub.Search.Faceted' modifier_class="Filter3"}}
	</ul>
	<script>
		let filterZone = document.getElementById("filterZone");
		let filterZoneNav = filterZone.querySelector("nav");
		let filterFacets = filterZone.querySelector("#filterFacets");
		let filterZoneExpanded = true;
		filterZoneNav.addEventListener("click", function () {
			if (filterZoneExpanded) {
				filterFacets.classList.toggle("opacity_0");
				filterFacets.classList.toggle("opacity_none");
				setTimeout(function () {
					filterFacets.classList.toggle("{display_none}");
					filterFacets.classList.toggle("display_none");
					filterFacets.classList.toggle("min-h_0:md");
					filterFacets.classList.toggle("min-h_30:md");
					filterZone.classList.remove("{aspect_1_1:md}", "{nav-mined}", "nav-maxed");
					filterZone.classList.add("aspect_1_1:md", "nav-mined", "{nav-maxed}");
					filterZoneNav.querySelector("span.label").classList.toggle("{display_none:md}");
					filterZoneNav.querySelector("span.label").classList.toggle("display_none:md");
					filterZoneExpanded = false;
				}, 300);
				return;
			} else {
				filterZone.classList.add("{aspect_1_1:md}", "{nav-mined}", "nav-maxed");
				filterZone.classList.remove("aspect_1_1:md", "nav-mined", "{nav-maxed}");
				filterFacets.classList.toggle("min-h_0:md");
				filterFacets.classList.toggle("min-h_30:md");
				filterFacets.classList.toggle("{display_none}");
				filterFacets.classList.toggle("display_none");
				setTimeout(function () {
					filterFacets.classList.toggle("opacity_0");
					filterFacets.classList.toggle("opacity_none");
					filterZoneNav.querySelector("span.label").classList.toggle("{display_none:md}");
					filterZoneNav.querySelector("span.label").classList.toggle("display_none:md");
					filterZoneExpanded = true;
				}, 300);
				return;
			}
		});
	</script>
</div>

MarkupWrapperClasses: 


Weight: -1000

Styleguide Sub.Search.FilterRail
*/
/*

Youtube Embed Playlist

Markup:
<iframe width="560" height="315" src="https://www.youtube.com/embed/videoseries?list=PLCROrnGF2SYByKd5KHoqjRZXM4hwlHgjH" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

MarkupWrapperClasses: 

Weight:0

Styleguide Sub.YoutubeEmbedPlaylist
*/
@media only screen and (min-width : 1024px) {
  .jump-buttons_top {
    top: 0;
  }
}

/*

Layouts

This app design is based on levels of inset and overlaps in grid areas.

MarkupWrapperClasses: 

Weight: 100

Styleguide Page.Layouts
*/
/*

Base Grid Areas

The library base is a grid system that is used for the library page.

Markup:
<div class="BODY_TAG-stand-in grid:md flex flex_column {{> "Sub.ClassList.Body"}}">	
	<div class="page-wrapper grid {{> "Sub.ClassList.Page"}}">	
		<div class="grid:md grid-template_page flex flex_column gap_4:md gap_3">
			<div class="grid-area_menuArea">{{> "Page.Layouts.GridFiller"  modifier_class="M"}}</div>
			<header class="grid-area_headerArea">{{> "Page.Layouts.GridFiller"  modifier_class="BreadCrumb"}}</header>
			<section class="grid:md flex flex_column grid-template_filterAndContent grid-area_mainArea gap_4 p-y_3 p-y_0:md">
				<aside class="grid-area_filterArea col-end_filterArea order_last order_unset:md">
				{{> "Page.Layouts.SubGridFiller"  modifier_class="Filter"}}
				</aside>
				<div class="grid-area_contentArea grid:md flex flex_column columns_5 gap_4">
					<div class="col-start_1 col-end_1">
						{{> "Page.Layouts.SubGridFiller"  modifier_class="Grid Area 1"}}
					</div>
					<div class="col-start_2 col-end_2 ">
						{{> "Page.Layouts.SubGridFiller"  modifier_class="Grid Area 2"}}
					</div>
					<div class="col-start_3 col-end_3">
						{{> "Page.Layouts.SubGridFiller"  modifier_class="Grid Area 3"}}
					</div>
					<div class="col-start_4 col-end_4">
						{{> "Page.Layouts.SubGridFiller"  modifier_class="Grid Area 4"}}
						</div>
					<div class="col-start_5 col-end_5">
						{{> "Page.Layouts.SubGridFiller"  modifier_class="Grid Area 5"}}
					</div>
				</div>
			</section>
			<footer class="flex flex_column gap_4 grid-area_footerArea columns_5 grid:md m-t_auto p-y_0:md p-y_3">
				<div class="col-start col-end">{{> "Page.Layouts.SubGridFiller"  modifier_class="Footer"}}</div>
			</footer>
		</div>
	</div>
</div>

MarkupWrapperClasses: 

Weight:0

Styleguide Page.Layouts.PageGrid
*/
.grid-template_page {
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 4rem 1fr;
  grid-template-areas: "menuArea headerArea" "menuArea mainArea" "menuArea footerArea";
}

.grid-template_filterAndContent {
  grid-template-rows: 1fr;
  grid-template-columns: auto 1fr;
  grid-template-areas: "filterArea contentArea";
}

.grid-area_headerArea {
  -ms-grid-row: 1;
  -ms-grid-column: 2;
  grid-area: headerArea;
}

.grid-area_menuArea {
  -ms-grid-row: 1;
  -ms-grid-row-span: 3;
  -ms-grid-column: 1;
  grid-area: menuArea;
}

.grid-area_mainArea {
  -ms-grid-row: 2;
  -ms-grid-column: 2;
  grid-area: mainArea;
}

.grid-area_footerArea {
  -ms-grid-row: 3;
  -ms-grid-column: 2;
  grid-area: footerArea;
}

.grid-area_filterArea {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  grid-area: filterArea;
}

.grid-area_contentArea {
  -ms-grid-row: 1;
  -ms-grid-column: 2;
  grid-area: contentArea;
}

/*

Pages

Most of the pages in the design don't display correctly. in this styleguide because the the design is calculated off of the whole viewport.

MarkupWrapperClasses: 

Weight: -100

Styleguide Page.Pages
*/
/*

Sub Page No Filter

The sub pages have a common layouts.

Markup:
<div class="BODY_TAG-stand-in grid {{> "Sub.ClassList.Body"}}">	
	<div class="page-wrapper grid {{> "Sub.ClassList.Page"}}">	
		<div class="grid:md grid-template_page flex flex_column gap_4:md gap_3">
			{{> "Navigation.MainNav" modifier_class="grid-area_menuArea z_4" }}
			{{> "Navigation.Breadcrumb"}}
			<section class="grid:md flex flex_column grid-template_filterAndContent grid-area_mainArea gap_4 p-y_3 p-y_0:md font_1:lg font_0">
				<div class="grid:md flex flex_column columns_5 gap_4 col-start col-end">
					{{> "Page.Layouts.SubGridFiller"  modifier_class="Insert"}}
					{{> "Page.Layouts.SubGridFiller"  modifier_class="Insert"}}
					{{> "Page.Layouts.SubGridFiller"  modifier_class="Insert"}}
					{{> "Page.Layouts.SubGridFiller"  modifier_class="Insert"}}
					{{> "Page.Layouts.SubGridFiller"  modifier_class="Insert"}}
				</div>
			</section>
			<footer class="flex flex_column gap_4 grid-area_footerArea columns_5 grid:md m-t_auto p-y_0:md p-y_3">
				{{> "Navigation.Footer.Links" modifier_class="col-start col-end_4" }}
				{{> "Sub.Footer.Logo"  modifier_class="col-start_4 col-end" }}
			</footer>
		</div>
	</div>
</div>

MarkupWrapperClasses: 


NOTE: This page will not render 100% correctly because it is calculated based on the whole viewport and the styleguide has it wrapped in page dynamics..

Weight:0

Styleguide Page.Pages.NoFilter
*/
/*

Search Page

The sub pages have a common layouts.

Markup:
<div class="BODY_TAG-stand-in grid {{> "Sub.ClassList.Body"}}">	
	<div class="page-wrapper grid {{> "Sub.ClassList.Page"}}">	
		<div class="grid:md grid-template_page flex flex_column gap_4:md gap_3">
			{{> "Navigation.MainNav" modifier_class="grid-area_menuArea z_4" }}
			{{> "Navigation.Breadcrumb"}}
			<section class="grid:md flex flex_column grid-template_filterAndContent grid-area_mainArea gap_4 p-y_3 p-y_0:md font_1:lg font_0">
				{{> "Sub.Search.FilterRail"  modifier_class="grid-area_filterArea order_last order_unset:md"}}
				<div class="grid-area_contentArea row-start_1" id="SearchBarTop"> 
					{{> "Sub.Search.Bar"  }}
					<div class="{{> 'Sub.ClassList.Vertical.padding.up-1' }}">
						{{> "Sub.Search.ResultOverview"}}
					</div>
					<div class="{{> "Sub.ClassList.Inset.down-1"}} {{> 'Sub.ClassList.Inset.padding' }} ">
					<nav class="bg_black-2 br_3 br_radius br_solid br_white-9 c_primary font_0 font_bold font_accent: p-x_0 p-x_4:md shadow_bevel-light" id="tabContentLight" role="tablist">
						<ul class="flex_column flex_row:md  nav">
							{{> "Structures.Tabs.Tabs.LinkActive" }}
							{{> "Structures.Tabs.Tabs.Link" }}
							</li>
						</ul>
					</nav>
					<div class="tab-content" id="nav-tabContent">
						<div class="tab-pane fade show active" id="ActiveLink" role="tabpanel" aria-labelledby="ActiveLink">
							<ul class="ul_none flex flex_column gap_3 gap_4:lg {{> 'Sub.ClassList.Vertical.padding.up-1' }}">
								<li class="">{{> "Program.Session.Home"  modifier_class="Valvular Side Effect Arrhythmia Myocardial Pericardial Blood Vessel Electrocardiographic Chest Pain " }}</li>
								<li class="">{{> "Program.Session.Home"  modifier_class="Blood Vessel " }}</li>
								<li class="">{{> "Program.Session.Home"  modifier_class="" }}</li>
							</ul>
							<div class=""><button class="block btn btn-outline-secondary btn-sm m-b_3 m_auto p-x_5">Load More</button></div>
							</div>
						<div class="tab-pane fade" id="BasicLink" role="tabpanel" aria-labelledby="BasicLink">
							<ul class="ul_none flex flex_column gap_3 gap_4:lg {{> 'Sub.ClassList.Vertical.padding.up-1' }}">
								<li class=""> {{> "Program.Presentation.Search"  modifier_class="Blood Vessel " }}</li>
								<li class=""> {{> "Program.Presentation.Search"  modifier_class="Pharmacologic Electrocardiographic Pericardial Arteriosclerosis Myocardial Side Effect Arrhythmia " }}</li>
								<li class=""> {{> "Program.Presentation.Search"  modifier_class="" }}</li>
								<li class=""> {{> "Program.Presentation.Search"  modifier_class="Chest Pain Valvular Chest Pain " }}</li>
							</ul>
							<div class=""><button class="block btn btn-outline-secondary btn-sm m-b_3 m_auto p-x_5">Load More</button></div>
						</div>
					</div>
					</div>
				</div>
			</section>
			<footer class="flex flex_column gap_4 grid-area_footerArea columns_5 grid:md m-t_auto p-y_0:md p-y_3">
				{{> "Navigation.Footer.Links" modifier_class="col-start col-end_4" }}
				{{> "Sub.Footer.Logo"  modifier_class="col-start_4 col-end" }}
			</footer>
		</div>
	</div>
</div>

MarkupWrapperClasses: 

SubComponents:
Navigation.Breadcrumb -  Breadcrumb Bar


NOTE: This page will not render 100% correctly because it is calculated based on the whole viewport and the styleguide has it wrapped in page dynamics..

Weight:0

Styleguide Page.Pages.Search
*/
/*

Session Data Page

The sub pages have a common layouts.

Markup:
<div class="BODY_TAG-stand-in grid:md {{> 'Sub.ClassList.Body'}}">
	<div class="page-wrapper grid:md {{> 'Sub.ClassList.Page'}}">
		<div class="grid:md grid-template_page flex flex_column gap_4:md gap_3">
			{{> 'Navigation.MainNav' modifier_class='grid-area_menuArea z_4' }}
			{{> 'Navigation.Breadcrumb'}}
			<section class="flex flex_column font_0 font_1:lg gap_4 grid-area_mainArea columns_6 columns_5:lg grid:md p-y_0:md p-y_3">
				<div class="col-start col-end_3:lg col-end_4 flex flex_column gap_4 row-start_1">
					<section class="{{>'Sub.ClassList.Inset.up-1'}}">
						<div class="flex flex_row font_ui justify_start relative w_100">
						<main class="flex flex_auto flex_column font_0 font_1:md font_2:lg isolation_isolate justify_between relative w_100 {{>'Sub.ClassList.Inset.padding.up-2'}}">
							<h1 class="c_primary c_primary-n3 font-size_up-2 font_display font_regular lh_1 m_0"> {{> 'Data.Session.Title'}} Myocardial Pharmacologic </h1>
							</main>	
							<aside class="flex_none m-t_n2 m-t_n2:md m-t_n3:lg p-x_3:md">
								<ul class="flex flex_column flex_wrap gap_2 justify_start self_center ul_none uppercase p-x_3">
									<li class="flex_auto">
										{{> 'Sub.ActionButtons.Favorite' }}
									</li>
								</ul>
							</aside>
						</div>
						<nav class="{{>'Sub.ClassList.Inset.padding.up-3'}} font_2:lg font_1">
							<h3 class="c_black-8">How did you like this session?</h3>
							{{> 'Sub.ActionButtons.LikeAndAttachments' }}
						</nav>
						<section class="font_0 m_3 {{>'Sub.ClassList.Inset.down-1'}} {{>'Sub.ClassList.Inset.padding.up-2'}}">
							{{> 'Sub.Section.h3' modifier_class='session details'}} 
							{{> 'Sub.Player.AuxData'}}
						</section>
					</section>
				</div>
				<div class="col-end col-start_3:lg col-start_4 row-start_1">
					<section class="{{>'Sub.ClassList.Inset.up'}} {{>'Sub.ClassList.Inset.padding.up-2'}}">
						<div class="flex flex_row items_center">
						<span class="c_black-4 font_1 font_2:md font_3:lg font_display font_regular lh_1 m-b_3 m-b_4:lg m-t_3 p-l_3 p-r_4 self_end"><i class="fa-list-alt fas font-size_up-2"></i></span>
						{{> 'Sub.Section.h2' modifier_class='presentation playlist'}}</div>
						<div class="font_0 font_1:lg relative isolation_isolate">
							<ul class="flex flex_column justify_stretch gap_4 ul_none">
								{{> "Program.Presentation.List"}}
								{{> "Program.Presentation.List"}}
								{{> "Program.Presentation.List"}}
								{{> "Program.Presentation.List"}}
							</ul>
						</div>
					</section>
				</div>
			</section>
			<footer class="flex flex_column gap_4 grid-area_footerArea columns_5 grid:md m-t_auto p-y_0:md p-y_3">
				{{> "Navigation.Footer.Links" modifier_class="col-start
				col-end_4" }} {{> "Sub.Footer.Logo"
				modifier_class="col-start_4 col-end" }}
			</footer>
		</div>
	</div>
</div>

MarkupWrapperClasses: 


NOTE: This page will not render 100% correctly because it is calculated based on the whole viewport and the styleguide has it wrapped in page dynamics..

Weight:0

Styleguide Page.Pages.Session
*/
/*

Presentation Player

The sub pages have a common layouts.

Markup:
<div class="BODY_TAG-stand-in grid:md {{> 'Sub.ClassList.Body'}}">
	<div class="page-wrapper grid:md {{> 'Sub.ClassList.Page'}}">
		<div class="grid:md grid-template_page flex flex_column gap_4:md gap_3">
			{{> 'Navigation.MainNav' modifier_class='grid-area_menuArea z_4' }}
			{{> 'Navigation.Breadcrumb'}}
			<section class="flex flex_column font_0 font_1:lg gap_4 grid-area_mainArea columns_6 columns_5:lg grid:md p-y_0:md p-y_3">
				<div class="col-start col-end_4:lg col-end flex flex_column gap_4 row-start_1">
					<section class="{{>'Sub.ClassList.Inset.up-1'}}">
						<div class="flex flex_row font_ui justify_start relative w_100">
						<main class="flex flex_auto flex_column font_0 font_1:md font_2:lg isolation_isolate justify_between relative w_100 {{>'Sub.ClassList.Inset.padding.up-2'}}">
							<h1 class="c_black-5 font-size_down-1 font_medium font_ui lh_1 m-b_2 m-t_2 m_0">{{> 'Data.Session.Title'}} Electrocardiographic Cardiovascular Blood Vessel Blood Vessel </h1>
							<h2 class="c_primary c_primary-n3 font-size_up-2 font_display font_regular lh_1 m_0"> {{> 'Data.Presentation.Title'}} Myocardial  </h2>
							</main>	
							<aside class="flex_none m-t_n2 m-t_n2:md m-t_n3:lg p-x_3:md">
								<ul class="flex flex_column flex_wrap gap_2 justify_start self_center ul_none uppercase p-x_3">
									<li class="flex_auto">
										{{> 'Sub.ActionButtons.Favorite' }}
									</li>
								</ul>
							</aside>
						</div>
						<div class="player hd full flex_auto w_100 p_4:lg p_3">
							<div class="bg_acc aspect_16x9 c_white text_center  justify_center flex items_center">VIDEO EMBED</div>
						</div>
						<nav class="{{>'Sub.ClassList.Inset.padding.up-3'}} font_2:lg font_1">
							{{> 'Sub.Search.TimeMarkers'}}
							<h3 class="c_black-8">How did you like this presentation?</h3>
							{{> 'Sub.ActionButtons.LikeAndAttachments' }}
						</nav>
					</section>
				</div>
				<div class="col-end col-start_4:lg col-start flex flex_column flex_row:md flex_column:lg gap_4">
					<section class="flex_auto flex_50:md  flex_auto:lg flex_none:lg font_0 {{>'Sub.ClassList.Inset.up'}} {{>'Sub.ClassList.Inset.padding.up-2'}}">
						{{> 'Sub.Section.h2' modifier_class='presentation details'}}
						{{> 'Sub.Player.AuxData'}}
					</section>	
					<section class="flex_auto flex_50:md  flex_auto:lg flex_none:lg  font_0 {{>'Sub.ClassList.Inset.up'}} {{>'Sub.ClassList.Inset.padding.up-2'}}">
						{{> 'Sub.Section.h2' modifier_class='session details'}}
						<div class="p-y_3 br-t_1 br_black-2 br_solid font-size_down">
							{{> "Sub.FacultyList.AuxSession"  modifier_class=""}}
						</div>
						<section class="{{>'Sub.ClassList.Inset.down-1'}} {{>'Sub.ClassList.Inset.padding.up-2'}}">
							<div class="flex flex_row items_center">
							<span class="c_black-4 font_0 font_1:md font_2:lg font_display font_regular lh_1 m-b_3 m-b_4:lg m-t_3 p-l_3 p-r_4 self_end"><i class="fa-list-alt fas font-size_up-2"></i></span>
							{{> 'Sub.Section.h3' modifier_class='presentation playlist'}}</div>
							<div class="font_n2 font_n1:lg relative isolation_isolate">
								<ul class="flex flex_column justify_stretch gap_3 ul_none">
									{{> "Program.Presentation.Condensed" modifier_class="Myocardial Valvular Heart Disease Chest Pain Valvular Heart Disease Blood Vessel Pericardial Arrhythmia Clinical "}}
									{{> "Program.Presentation.CondensedPlaying" modifier_class="Blood Vessel Electrocardiographic Side Effect Valvular Side Effect Valvular Heart Disease Clinical Pharmacologic Valvular Heart Disease "}}
									{{> "Program.Presentation.Condensed" modifier_class="Chest Pain Electrocardiogram Pericardial Pericardial "}}
									{{> "Program.Presentation.Condensed" modifier_class="Blood Vessel Pharmacologic Electrocardiogram Pharmacologic Pharmacologic Blood Vessel "}}
								</ul>
							</div>
						</section>
					</section>	
				</div>
			</section>
			<footer class="flex flex_column gap_4 grid-area_footerArea columns_5 grid:md m-t_auto p-y_0:md p-y_3">
				{{> "Navigation.Footer.Links" modifier_class="col-start
				col-end_4" }} {{> "Sub.Footer.Logo"
				modifier_class="col-start_4 col-end" }}
			</footer>
		</div>
	</div>
</div>

MarkupWrapperClasses: 


NOTE: This page will not render 100% correctly because it is calculated based on the whole viewport and the styleguide has it wrapped in page dynamics..

Weight:0

Styleguide Page.Pages.Presentation
*/
/*

Credit Page

Credits Pages

Markup:
<a class="link" href="https://acc-style.github.io/PrototypingACCorg/library/credits/">LINK TO PROTOTYPE FOR THIS PAGE</a>


MarkupWrapperClasses: 


NOTE: This page will not render 100% correctly because it is calculated based on the whole viewport and the styleguide has it wrapped in page dynamics..

Weight:1000

Styleguide Page.Pages.Credit
*/
/*

Legal Roadblock

A roadblock page that forces users to log in to view and agree to the legal terms of the product.

Markup:
<div class="BODY_TAG-stand-in bg_black-4 w_100 p_4:md p_2 grid:md min-h_100">
	<div class="bg_white-8 br_radius grid:md isolation_isolate items_center justify_center m_auto max-w_50 p_2 p_3:md page-wrapper shadow_bevel-light">
		<div class="bg_black-2 br_radius">
			<section class="reading-typography inset-level_down-1 bg_black-1 shadow_emboss-light br_solid br_1 br_black-2 br_radius p_5:lg p_4 flex flex_column gap_3">
				<div>
					<div class="relative z_0 br_radius overflow_hidden ">
						<picture class="w_100 ">
							<source class="w_100" srcset=" https://acc-style.github.io/PrototypingACCorg/assets/images/lib/J22043_600x225.jpg" media="(min-width: 400px)">
							<img src="https://acc-style.github.io/PrototypingACCorg/assets/images/lib/J22043_400x300.jpg" class="w_100" alt="">
						</picture>
					</div>
					<div class="bg_white br_1 br_black-3 br_radius br_solid inset-level_up-1 m-t_n5 m-x_5 p_4 relative shadow_bevel-light t_n5 text_center">
						<h1 class="c_primary font_regular font_display">Legal Agreements</h1>
						<p class="font-size_up font_bold"> Please agree to all the legal agreements. </p>
					</div>
				</div>
				<div class="inset-level_up-1 bg_white br_radius shadow_overlap-light relative br_solid br_1 br_black-2 p_4 relative " id="TopAgreement1">
					<div class="relative isolation_isolate">
						<div class="sticky t_0 r_0 z_1">
							<div class="absolute r_4 t_0 flex flex_row flex_nowrap gap-x_3">
								<!--  Helper Jump links -->
								<a class="c_white br-tl_square br-tr_square br_radius btn btn-accent btn-sm grid items_center justify_center m-l_auto self_center shadow_3" href="#TopAgreement1">
									<span><i class="fas fa-arrow-up p-r_2"></i>top</span>
								</a>
								<a class="c_white br-tl_square br-tr_square br_radius btn btn-accent btn-sm grid items_center justify_center m-l_auto self_center shadow_3" href="#Agreement1">
									<span><i class="fas fa-arrow-down p-r_2"></i>scroll down</span>
								</a>
								<!--  Helper Jump links -->
							</div>
						</div>
						<div class="bg_white br-b_1 br_primary br_solid m-t_n2 p-t_0 relative z_3">
							<h2>ACC Anywhere 2022 Credit Information, Terms of Service, and License Agreement </h2>
						</div>
						<main class="z_0 isolation_isolate">
							<p class="font-size_up">The Terms of Service and License Agreement set forth below constitute a legal agreement (collectively, the "Agreement") between the American College of Cardiology Foundation ("ACCF") and You and your agents ("You" or “Your”) for the use of the ACC Anywhere 2022 (the "Product”).    </p><p class="font-size_up">
								By clicking on the Agree button below, and by using the Product, You accept and agree to be bound by all of the terms and conditions set forth in this Agreement. If You do not wish to accept the terms and conditions of this Agreement, You may not proceed to use the Product. </p>
							<p class="font-size_up"><a href="#" class="c_accent-n2 font_bold font_ui link" target="_blank">Click to Read Full Terms of Service.</a></p>
								<p class="">I hereby certify that I understand and agree to the terms stated in this Agreement and that this Agreement applies to my initial use of the Product and all other subsequent uses of the Product.</p>
						</main>
					</div>
					<footer id="Agreement1">
						<div class="bg_acc br_radius c_white font_2 font_bold font_medium font_ui lh_1 m-b_3 p-y_4 p_3 text_center uppercase">By Clicking The Button Below, I Hereby Affirm That I Have Read, Fully Understand, And Agree To The Above Statements. </div>
						<a href="#" class="btn btn-success c_white h:undecorated float_right"><i class="fas fa-check"></i> I agree</a>
					</footer>
				</div>
				<div class="inset-level_up-1 bg_white br_radius shadow_overlap-light relative br_solid br_1 br_black-2 p_4 relative isolation_isolate" id="TopAgreement2">
					<div class="relative">
						<div class="sticky t_0 r_0 z_1">
							<div class="absolute r_4 t_0 flex flex_row flex_nowrap gap-x_3">
								<!--  Helper Jump links -->
								<a class="c_white br-tl_square br-tr_square br_radius btn btn-accent btn-sm grid items_center justify_center m-l_auto self_center shadow_3" href="#TopAgreement2">
									<span><i class="fas fa-arrow-up p-r_2"></i>top</span>
								</a>
								<a class="c_white br-tl_square br-tr_square br_radius btn btn-accent btn-sm grid items_center justify_center m-l_auto self_center shadow_3" href="#Agreement2">
									<span><i class="fas fa-arrow-down p-r_2"></i>scroll down</span>
								</a>
								<!--  Helper Jump links -->
							</div>
						</div>
						<div class="bg_white br-b_1 br_primary br_solid m-t_n2 p-t_0 relative z_3">
							<h2>GDPR, Cookies and Privacy</h2>
							<p class="font-size_up"> Iure ut ratione magnam similique delectus deserunt occaecati.</p>
						</div>
						<main class="z_0 isolation_isolate">
							<p> Alias nulla qui eos fuga eos eligendi aut tempora. Nisi dicta aut non totam illo consequuntur. Aut aut voluptas est aspernatur placeat distinctio similique dolore laboriosam. Iure velit doloremque dolorum maiores praesentium. Animi exercitationem reiciendis incidunt rerum. Quam consequatur maiores officiis sit enim quidem.Libero dolores aspernatur consequatur labore consequatur sint sint atque. Quo commodi quod repellendus laborum natus amet. Enim aliquam sunt. Nesciunt repellat provident mollitia. Quis nemo modi. Unde ut nisi. Laboriosam et natus saepe a enim aut in voluptates quia. Sed libero alias voluptatum soluta accusantium nesciunt commodi. Eaque cumque quos neque cumque maiores. </p>
						</main>
					</div>
					<footer id="Agreement2">
						<div class="bg_acc br_radius c_white font_2 font_bold font_medium font_ui lh_1 m-b_3 p-y_4 p_3 text_center uppercase">By Clicking The Button Below, I Hereby Affirm That I Have Read, Fully Understand, And Agree To The Above Statements. </div>
						<a href="#" class="btn btn-secondary c_white h:undecorated float_right">I agree</a>
					</footer>
				</div>
				<div class="inset-level_up-1 bg_white br_radius relative p_4 text_center">
					<h4 class="font_bold c_primary-n2"> You can continue when all legal terms are agreed to. </h4>
					<a href="#" class="btn btn-disabled disabled block">Continue</a>
				</div>
			</section>
		</div>
	</div>
</div> 


MarkupWrapperClasses:

Weight:-100

Styleguide Page.Pages.OUTSIDE_APP.Legal
*/
/*

No Access

If a user is logged in but does not have access to the page, they will be redirected to this page.

Markup:
<div class="BODY_TAG-stand-in bg_black-4 w_100 p_4:md p_2 grid:md min-h_100">
	<div class="bg_white-8 br_radius grid:md isolation_isolate items_center justify_center m_auto max-w_50 p_2 p_3:md page-wrapper shadow_bevel-light">
		<div class="bg_black-2 br_radius">
			<section class=" inset-level_down-1 bg_black-1 shadow_emboss-light br_solid br_1 br_black-2 br_radius p_4:lg p_3 flex flex_column gap_4 ">
				<div>
					<div class="relative z_0 br_radius overflow_hidden reading-typography ">
						<picture class="w_100 ">
							<source class="w_100" srcset=" https://acc-style.github.io/PrototypingACCorg/assets/images/lib/J22043_600x225.jpg" media="(min-width: 400px)">
							<img src="https://acc-style.github.io/PrototypingACCorg/assets/images/lib/J22043_400x300.jpg" class="w_100" alt="">
						</picture>
					</div>
					<div class="bg_white br_1 br_black-3 br_radius br_solid inset-level_up-1 m-t_n5 m-x_5 p_4 relative shadow_bevel-light t_n5 text_center">
						<h1 class="font_display font_6 c_primary m-t_4">Sorry, but it appears this account doesn't have access to [PRODUCT NAME ShortCode]</h1>
					</div>
				</div>
				{{> 'Sub.System.AccessTroubleShooting'}}
			</section>
		</div>
	</div>
</div>


MarkupWrapperClasses:

Weight:-50

Styleguide Page.Pages.OUTSIDE_APP.NoAccess
*/
/*

EMPTY OUTSIDE APP TEMPLATE

There are some pages that live outside of access to the product.  They are used to provide information to the user.  This is the template for those pages.

Markup:
<div class="BODY_TAG-stand-in bg_black-4 w_100 p_4:md p_2 grid:md min-h_100">
	<div class="bg_white-8 br_radius grid:md isolation_isolate items_center justify_center m_auto max-w_50 p_2 p_3:md page-wrapper shadow_bevel-light">
		<div class="bg_black-2 br_radius">
			<section class="reading-typography  inset-level_down-1 bg_black-1 shadow_emboss-light br_solid br_1 br_black-2 br_radius p_4:lg p_3 flex flex_column gap_4 ">
				<div>
					<div class="relative z_0 br_radius overflow_hidden ">
						<picture class="w_100 ">
							<source class="w_100" srcset=" https://acc-style.github.io/PrototypingACCorg/assets/images/lib/J22043_600x225.jpg" media="(min-width: 400px)">
							<img src="https://acc-style.github.io/PrototypingACCorg/assets/images/lib/J22043_400x300.jpg" class="w_100" alt="">
						</picture>
					</div>
					<div class="bg_white br_1 br_black-3 br_radius br_solid inset-level_up-1 m-t_n5 m-x_5 p_4 relative shadow_bevel-light t_n5 text_center">
						<h1 class="c_primary font_regular font_display">No Access</h1>
						<p class="font-size_up font_bold"> We are sorry you don't seem to have access to this product.</p>
					</div>
				</div>
				<div class="inset-level_up-1 bg_white br_radius shadow_overlap-light relative br_solid br_1 br_black-2 p_4 relative " id="TopAgreement1">
					<!-- EMPTY  TEMPLATE SPACE FOR AGREEMENTS OR NO ACCESS. These Cards can be duplicated depending on need. -->
				</div>
			</section>
		</div>
	</div>
</div>


MarkupWrapperClasses:

Weight:-50

Styleguide Page.Pages.OUTSIDE_APP
*/
/*

Home

The sub pages have a common layouts.

Markup:
<div class="BODY_TAG-stand-in grid:md {{> 'Sub.ClassList.Body'}}">
	<div class="page-wrapper grid:md {{> 'Sub.ClassList.Page'}}">
		<div class="grid:md grid-template_page flex flex_column gap_4:md gap_3">
			{{> "Navigation.MainNav" modifier_class="grid-area_menuArea z_4" }}
			{{> "Structures.Home.Header" modifier_class="grid-area_headerArea" }}
			<section class="grid:md flex flex_column columns_5 gap_4  grid-area_mainArea p-y_3 p-y_0:md font_1:lg font_0 w_100">
				<div class="flex flex_column col-start col-end_5:lg col-end_4 font_0 font_1:lg font_ui font_regular w_100 {{> 'Sub.ClassList.Inset.up-1'}} {{> 'Sub.ClassList.Inset.padding.up-1'}}">
                    {{> 'Sub.Section.h2' modifier_class='Featured' }}    
                    {{> 'Structures.Home.Carousel'}}
                    {{> 'Sub.Section.Footer'  modifier_class='Featured' }}
                    {{> 'Sub.Section.h2' modifier_class='Hot Topics' }}
                    {{> 'Structures.Home.Carousel.Empty' modifier_class='Hot Topics'}}
                    {{> 'Sub.Section.Footer'  modifier_class='Hot Topics' }}
				</div>
				<div class="flex flex_column col-start_5:lg col-end col-start_4 w_100">
					<section class="font_0 font_1:lg font_ui font_regular flex_100 flex_auto {{> 'Sub.ClassList.Inset.up-1'}} {{> 'Sub.ClassList.Inset.padding.up-1'}}">
						{{> 'Sub.Section.h2' modifier_class="continue watching" }}
						<div class="font_n2 font_n1:lg relative isolation_isolate">
							<ul class="flex flex_column justify_stretch gap_0 ul_none {{> 'Sub.ClassList.Inset.down-1'}} {{> 'Sub.ClassList.Inset.padding.up-1'}}">
								{{> 'Program.Presentation.Condensed.Playable' modifier_class='Chest Pain '}}
								{{> 'Program.Presentation.Condensed.Playable' modifier_class=''}}
								{{> 'Program.Presentation.Condensed.Playable' modifier_class='Myocardial Side Effect '}}
								{{> 'Program.Presentation.Condensed.Playable' modifier_class='Pericardial Chest Pain '}}
								{{> 'Program.Presentation.Condensed.Playable' modifier_class=''}}
							</ul>
						</div>
						{{> 'Sub.Section.Footer'  modifier_class="continue watching" }}
					</section>
				</div>
				<div class="col-start col-end w_100">
					<section class='font_0 font_1:lg font_ui font_regular flex_100 flex_auto {{> 'Sub.ClassList.Inset.up'}} {{> 'Sub.ClassList.Inset.padding.up-1'}}'> {{> 'Sub.Section.h2' modifier_class='watch again' }}
						{{> 'Structures.Home.Carousel.Empty' modifier_class='watch again'}}
						{{> 'Sub.Section.Footer'  modifier_class='watch again' }}
						{{> 'Sub.Section.h2' modifier_class='saved' }}
						{{> 'Structures.Home.Carousel.Empty' modifier_class='saved' }}
						{{> 'Sub.Section.Footer'  modifier_class='saved' }}
					</section>
				</div>
			</section>
			<footer class="flex flex_column gap_4 grid-area_footerArea columns_5 grid:md m-t_auto p-y_0:md p-y_3">
				{{> 'Navigation.Footer.Links' modifier_class='col-start col-end_4' }}
				{{> 'Sub.Footer.Logo'  modifier_class='col-start_4 col-end' }}
			</footer>
		</div>
	</div>
</div>



MarkupWrapperClasses: 


NOTE: This page will not render 100% correctly because it is calculated based on the whole viewport and the styleguide has it wrapped in page dynamics..

Weight:0

Styleguide Page.Pages.Home
*/
/*

Header

Home page branding splash with ka site search. 

Markup:
<header class="p_3 p_0:md {{modifier_class}}">
    <section class="br_radius overflow_hidden relative z_1">
        <picture class="w_100">
            <source class="w_100" srcset="https://acc-style.github.io/PrototypingACCorg/assets/images/lib/J22043_1440x250.jpg" media="(min-width: 1200px)">
            <source class="w_100" srcset="https://acc-style.github.io/PrototypingACCorg/assets/images/lib/J22043_1200x250.jpg" media="(min-width: 1024px)">
            <source class="w_100" srcset="https://acc-style.github.io/PrototypingACCorg/assets/images/lib/J22043_768x200.jpg" media="(min-width: 768px)">
            <source class="w_100" srcset="https://acc-style.github.io/PrototypingACCorg/assets/images/lib/J22043_600x225.jpg" media="(min-width: 400px)">
            <img src="https://acc-style.github.io/PrototypingACCorg/assets/images/lib/J22043_400x300.jpg" class="w_100" alt="">
        </picture>
    </section>
    <div class="m_auto m-t_n4 t_n4 t_n5:lg m-t_n5:lg max-w_60:lg max-w_40:md p-x_3 p-x_5:md z_2 relative">
        {{> "Sub.Section.HeaderPanel"}}
    </div>
</header>

MarkupWrapperClasses: 

SubComponent: 
Sub.Section.HeaderPanel - Search Bar

Weight:0

Styleguide Structures.Home.Header
*/
/*

Home Search Link Inset

A central interaction point for the user on the homepage. 

Markup:
<div class="{{> 'Sub.ClassList.Inset.up-1'}}  {{> 'Sub.ClassList.Inset.padding.up-4'}}">
    {{> 'Sub.Section.SearchBar' modifier_class="disabled" }}
    {{> 'Navigation.Home.Utility' }} 
</div>

MarkupWrapperClasses: 

SubComponents:
Sub.Section.SearchBar - Search Bar with `disabled` Class
Navigation.Home.Utility - Quick Links

ClassList:
Sub.ClassList.Inset.up-1  - Inset up 1
Sub.ClassList.Inset.padding.up-4 - Padding up 4

Weight:0

Styleguide Sub.Section.HeaderPanel
*/
/*

Home Search Bar

The Search Bar is disabled on the Home Page when there is no content in the input field.


Markup:
<div class="input-holder flex flex_row self_end relative w_100 {{> "Sub.ClassList.Inset.padding"}}">
    <input id="input_uniqueTextAndButton" name="input_uniqueTextAndButton" type="text" placeholder="Search" class="br_2 flex_auto p-y_2 br_solid flex_auto p-l_4 lh_3 br_radius bg_white c_black bg_white f:bg_primary br_black-2 br-tl_square br-br_square br-r_0 font_2"/>
    <button  class="{{ modifier_class }} b_0 br-br_radius br-tr_radius br_none br_square btn btn-primary c_white ease_out f:outline_none font_2 font_regular font_ui h:br_primary-n3 h:underline inline-block r_0 t_0 text_center transition_1 undecorated w_auto" >
    <i class="fas fa-search"></i>
    <span class="inline-block:md display_none">Search</span>
    </button>
</div>

MarkupWrapperClasses: 

Weight:0

Styleguide Sub.Section.SearchBar
*/
/*

Section Footer

Section footer links to the Search Collection Page.

Markup:
<footer class="flex flex_row-reverse p-t_3 p-b_4"><a href="#" class="link self_end ">view all from &quot;{{modifier_class}}&quot; <i class="fal fa-chevron-circle-right m-r_3"></i></a></footer>   

MarkupWrapperClasses: 

Weight:0

Styleguide Sub.Section.Footer
*/
/*

Carousel 

Horizontal Carousels to have discoverable areas on the home pages.


Markup:
<div class="relative isolation_isolate overflow_hidden {{>'Sub.ClassList.Inset.margin.down-1'}}">
        <div id="slider1" class=" flex flex_row justify_stretch p-y_4 p-x_3 overflow_hidden m-y_3 {{> 'Sub.ClassList.Inset.down-1'}} ">
        {{> "Program.Session.Home"  modifier_class="Pericardial Clinical Electrocardiographic Valvular Electrocardiographic Clinical Valvular Heart Disease "}}
        {{> "Program.Session.Home"  modifier_class="Cardiovascular Electrocardiogram Valvular Heart Disease Pharmacologic "}}
        {{> "Program.Session.Home"  modifier_class="Valvular Heart Disease Pericardial "}}
        {{> "Program.Session.Home"  modifier_class=""}}        
        {{> "Program.Session.Home"  modifier_class="Clinical "}}
        {{> "Program.Session.Home"  modifier_class="Pericardial Electrocardiographic Valvular Heart Disease Chest Pain "}}        
        {{> "Program.Session.Home"  modifier_class="Blood Vessel Pericardial "}}
        {{> "Program.Session.Home"  modifier_class="Cardiovascular Chest Pain Pharmacologic Electrocardiographic Valvular Heart Disease "}}
    </div>
    {{> 'Sub.Carousel.CustomTools'}}
</div>
<script>
    document.addEventListener("DOMContentLoaded", function(event) { 
    let args ={
        items:1,
        mouseDrag: true,
        slideBy: "page",
        swipeAngle: false,
        autoplay: false,
        controls: true,
        nav: false,
        edgePadding: 0,
        loop:true,
        edgePadding:48,
        center:false,
        gutter:16,
        responsive: {
            1: {
                items: 1
            },
                    768: {
                items: 1
            },
            1200: {
                items: 2
            },
            1400: {
                items: 3
            }
        }};
        let slider1 = tns({ container: '#slider1', controlsContainer: "#slider1-customize-controls", ...args });
    });
</script>

MarkupWrapperClasses: 

Weight: 0

SubComponents:
Program.Session.Home    - Session

ClassList:
Sub.ClassList.Inset.margin.down-1 - Margin down 1
Sub.ClassList.Inset.down-1 - Inset down 1

NOTE: This design requires javascript. (tiny slider js)

Styleguide Structures.Home.Carousel
*/
/*

TinySlider.js

Script tags for tinySlider


Markup:
<h2> Slider CSS </h2>
<span class="user-select_all">https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.3/tiny-slider.css</span>
<h2> Slider JS </h2>
<span class="user-select_all">https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.2/min/tiny-slider.js</span>

MarkupWrapperClasses: 

Weight: 0


Styleguide Structures.Home.TinySlider
*/
/*


Carousel Empty State

The empty state of the carousel

Markup:
<div class="p-y_3 relative {{>'Sub.ClassList.Inset.margin.down-1'}}"> 
    <div class="tns-outer {{> 'Sub.ClassList.Inset.down-1'}}  font_0 font_ui font_regular" >
        <div class="tns-ovh">
            <div class="tns-inner" >
                <div id="slider3" class=" flex flex_row justify_stretch p-y_4 p-x_3 overflow_hidden  tns-slider tns-carousel tns-subpixel tns-calc tns-horizontal" >
                    <div class="tns-item  tns-slide-active p-x_5">
                        <article class="bg_white br_1 br_black-1 br_radius br_solid flex flex_grow shadow_overlap-light w_100">
                            <div class="flex flex_row justify_start relative w_100">
                                <main class="flex flex_column flex_auto justify_between flex_auto p-l_4 p-x_4:md  p-y_3 p-y_3:lg relative w_100 isolation_isolate reading-typography">
                                    <h2 class="">
                                       You don't have any previously {{modifier_class}} presentations.
                                    </h2>
                                    <p>This collection is based off of your watching history. Come back here when you want to review or re-watch what you have previously viewed.</p>
                                </main>
                            </div>
                        </article>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {{> 'Sub.Carousel.CustomTools.Disabled' }}
</div>

MarkupWrapperClasses: 

SubComponents:
Sub.Carousel.CustomTools.Disabled - Disabled Navigation

ClassList:
Sub.ClassList.Inset.margin.down-1 - Margin down 1
Sub.ClassList.Inset.down-1 - Inset Down 1

Weight: 0

Styleguide Structures.Home.Carousel.Empty
*/
/* nav */
.tns-nav {
  margin: 8px 0;
  margin: 0.5rem 0;
  text-align: center;
}
.tns-nav > [aria-controls] {
  width: 8px;
  width: 0.5rem;
  height: 8px;
  height: 0.5rem;
  min-height: 0;
  margin: 0 4px;
  margin: 0 0.25rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #ddd;
  line-height: 1;
}
.tns-nav > .tns-nav-active {
  background: #999;
}

.tns-item {
  display: flex !important;
}

.tns-visually-hidden {
  display: none;
}

/*

Continue Watching

Shows a short list of presentations

default		 - 

Markup:
    {{> 'Sub.Section.h2' modifier_class="continue watching" }}
    <div class="relative isolation_isolate overflow_hidden  {{> 'Sub.ClassList.Inset.down-1'}} ">
        <div id="SliderContinueWatching" class="flex flex_column gap_3 justify_stretch p-y_4 p-x_3 overflow_hidden m-y_3  {{> 'Sub.ClassList.Inset.down'}} ">
        {{> "Program.Presentation.Condensed"  modifier_class="Electrocardiographic "}}
        {{> "Program.Presentation.Condensed"  modifier_class="Valvular Heart Disease Pericardial Pharmacologic Clinical Valvular Heart Disease Arteriosclerosis Side Effect Valvular "}}
        {{> "Program.Presentation.Condensed"  modifier_class="Pharmacologic Blood Vessel "}}
        {{> "Program.Presentation.Condensed"  modifier_class="Clinical Electrocardiogram Side Effect Electrocardiogram Myocardial "}}
        {{> "Program.Presentation.Condensed"  modifier_class="Valvular Heart Disease Arrhythmia Clinical Valvular Heart Disease Arteriosclerosis Valvular Pharmacologic Pharmacologic Clinical "}}
        </div>
        {{> 'Sub.Carousel.CustomToolsVertical'}}
    </div>
    <footer class="flex flex_row-reverse p-t_3 p-b_4"><a href="#" class="link self_end ">view all from &quot;{{modifier_class}}&quot; <i class="fal fa-chevron-circle-right m-r_3"></i></a></footer>      
<script>
document.addEventListener("DOMContentLoaded", function(event) {   
let args2 ={
    items: 1,
    mouseDrag: true,
    axis: "vertical",
    slideBy: "page",
    swipeAngle: false,
    autoplay: false,
    controls: true,
    items:3,
    nav: false,
    edgePadding: 0,
    loop:true,
    edgePadding:0,
    center:true,
    gutter:16
    };
    let slider2 = tns({ container: '#SliderContinueWatching', controlsContainer: "#slider-customize-controls-vertical", ...args2 });
});</script>

MarkupWrapperClasses: main-area-offset p_2 p-x_5:md p-y_4:md isolation_isolate br_radius bg_white-7

NOTE: container: '#SliderContinueWatching', controlsContainer: "#slider-customize-controls-vertical" need to be unique to the slider. 

caution:  This item is not finalized and might be subject to change

Weight: 0



Styleguide Structures.Home.ContinuePlaying
*/
/*

Main Nav

THe library because it is an app uses a different style of nav which is more align to streaming software.


Markup:
<div style="height: calc(100vh - 1.5rem);" class="display_none flex:md sticky t_3  {{modifier_class}}">
        <nav style="height: calc(100vh - 1.5rem); width: 35rem;" id="navigation" class="absolute h_100vh shadow_emboss-light filter_blur overflow_hidden br_radius bg_black-7 flex:md flex_column:md justify_between p-t_0 p-b_3 p-l_3 p-r_3 p-b_4:md p-t_4:md p-r_0:md font_4:lg font_3:md font_2 transition_3 font_display nav-mined">
            <ul class="flex flex_column:md flex_row ul_none justify_around justify_start:md gap_3 w_100 w_auto:md">
                <li  id="mainDesktopNavTouchToggle" class="display_none flex:touch flex_row justify_end p-x_3 m-l_n3 ">
                    <span class="aspect_1x1 bg_accent br_round c_inherit-all c_white-8 grid h:c_white justify_center p_3 self_center text_center w_auto shadow_n3"><i class="block fa-chevron-circle-right fa-fw fas icon [rotate_180] self_center text-shadow_black-1 transition_2"></i></span>
                </li>
                <li class="nav-item flex_none br_radius p-t_3 m-t_n3 m-t_0:md p-t_0:md p-r_4:md m-r_n4:md c_white-8 h:bg_black-9 h:c_white a:c_white a:bg_primary h:shadow_overlap-light a:shadow_overlap-light active">
                    <a class="p_3 c_inherit-all h:undecorated flex flex_column flex_row:md" href="../home"><i class="icon fas fa-fw fa-home-heart p-x_2:md p-y_3 p-y_0:md self_center"></i><span class="label self_center p-l_3:md p-l_4:lg lowercase lh_0 active font_n2 font_3:md font_4:lg display_none:md opacity_0">Home</span></a>
                </li>
                <li class="nav-item flex_none br_radius p-t_3 m-t_n3 m-t_0:md p-t_0:md p-r_4:md m-r_n4:md c_white-8 h:bg_black-9 h:c_white a:c_white a:bg_primary h:shadow_overlap-light a:shadow_overlap-light ">
                    <a class="p_3 c_inherit-all h:undecorated flex flex_column flex_row:md " href="../search"><i class="icon fas fa-fw fa-search p-x_2:md p-y_3 p-y_0:md self_center"></i><span class="label self_center p-l_3:md p-l_4:lg lowercase lh_0 font_n2 font_3:md font_4:lg display_none:md opacity_0">Search</span></a>
                </li>
                <li class="nav-item flex_none br_radius p-t_3 m-t_n3 m-t_0:md p-t_0:md p-r_4:md m-r_n4:md c_white-8 h:bg_black-9 h:c_white a:c_white a:bg_primary h:shadow_overlap-light a:shadow_overlap-light ">
                    <a class="p_3 c_inherit-all h:undecorated flex flex_column flex_row:md" href="../saved"><i class="icon fas fa-fw fa-heart p-x_2:md p-y_3 p-y_0:md self_center"></i><span class="label self_center p-l_3:md p-l_4:lg lowercase lh_0 font_n2 font_3:md font_4:lg display_none:md opacity_0">Saved</span></a>
                </li>
                <li class="nav-item flex_none br_radius p-t_3 m-t_n3 m-t_0:md p-t_0:md p-r_4:md m-r_n4:md c_white-8 h:bg_black-9 h:c_white a:c_white a:bg_primary h:shadow_overlap-light a:shadow_overlap-light ">
                    <a class="p_3 c_inherit-all h:undecorated flex flex_column flex_row:md" href="../credits"><i class="icon fas fa-fw fa-award p-x_2:md p-y_3 p-y_0:md self_center"></i><span class="label self_center p-l_3:md p-l_4:lg lowercase lh_0 font_n2 font_3:md font_4:lg display_none:md opacity_0">Credits</span></a>
                </li>
                <li class="nav-item flex_none br_radius p-t_3 m-t_n3 m-t_0:md p-t_0:md p-r_4:md m-r_n4:md c_white-8 h:bg_black-9 h:c_white a:c_white a:bg_primary h:shadow_overlap-light a:shadow_overlap-light disabled cursor_not-allowed opacity_3 ">
                    <a class="p_3 c_inherit-all h:undecorated flex flex_column flex_row:md" href="../watching"><i class="icon fas fa-fw fa-play p-x_2:md p-y_3 p-y_0:md self_center"></i><span class="label self_center p-l_3:md p-l_4:lg lowercase lh_0 font_n2 font_3:md font_4:lg display_none:md opacity_0">Watching</span></a>
                </li>
            </ul>
            <ul class="flex_column:md flex_row ul_none justify_center gap_3 flex">
                <li class="nav-item flex_auto br_radius p-t_3 m-t_n3 m-t_0:md p-t_0:md p-r_4:md m-r_n4:md c_white-8 bg_acc-n1 h:bg_black-9 h:c_white a:c_white a:bg_primary h:shadow_overlap-light a:shadow_overlap-light">
                    <a class="p_3 c_inherit-all h:undecorated flex flex_column flex_row:md"><i class="icon fas fa-fw fa-sign-out-alt p-x_2 p-y_3 p-y_0:md self_center"></i><span class="label self_center p-l_3:md p-l_4:lg lowercase lh_0 font_n2 font_3:md font_4:lg display_none:md opacity_0">Log Out</span></a>
                </li>
            </ul>
        </nav>
    </div>
    <nav id="navigation_mobile" class="block display_none:md shadow_emboss-light filter_blur br_radius bg_black-6 p_2 sticky t_3 z_4">
        <ul class="flex flex_row ul_none justify_between">
            <li class="nav-item flex_auto br_radius c_white-8 h:bg_black-9 h:c_white a:c_white a:bg_primary h:shadow_overlap-light a:shadow_overlap-light active">
                <a class="c_inherit-all flex flex_column h:undecorated p_3" href="../home"><i class="icon fas fa-fw fa-home-heart p-y_2 self_center"></i><span class="label self_center  lowercase lh_0 active font_n2 h_1h">Home</span></a>
            </li>
            <li class="nav-item flex_auto br_radius c_white-8 h:bg_black-9 h:c_white a:c_white a:bg_primary h:shadow_overlap-light a:shadow_overlap-light ">
                <a class="c_inherit-all flex flex_column h:undecorated p_3" href="../search"><i class="icon fas fa-fw fa-search p-y_2 self_center"></i><span class="label self_center  lowercase lh_0 font_n2 h_1h ">Search</span></a>
            </li>
            <li class="nav-item flex_auto br_radius c_white-8 h:bg_black-9 h:c_white a:c_white a:bg_primary h:shadow_overlap-light a:shadow_overlap-light ">
                <a class="c_inherit-all flex flex_column h:undecorated p_3" href="../saved"><i class="icon fas fa-fw fa-heart p-y_2 self_center"></i><span class="label self_center  lowercase lh_0 font_n2 h_1h nowrap ">Saved</span></a>
            </li>
            <li class="nav-item flex_auto br_radius c_white-8 h:bg_black-9 h:c_white a:c_white a:bg_primary h:shadow_overlap-light a:shadow_overlap-light ">
                <a class="c_inherit-all flex flex_column h:undecorated p_3" href="../saved"><i class="icon fas fa-fw fa-award p-y_2 self_center"></i><span class="label self_center  lowercase lh_0 font_n2 h_1h ">Credits</span></a>
            </li>
            <li class="nav-item flex_auto br_radius c_white-8 h:bg_black-9 h:c_white a:c_white a:bg_primary h:shadow_overlap-light a:shadow_overlap-light disabled opacity_3 cursor_not-allowed ">
                <a class="c_inherit-all flex flex_column h:undecorated p_3" href="../watching"><i class="icon fas fa-fw fa-play p-y_2 self_center"></i><span class="label self_center lowercase lh_0 font_n2 h_1h ">Watching</span></a>
            </li>
            <li class="nav-item flex_auto br_radius c_white-8 bg_acc-n1 h:bg_black-9 h:c_white a:c_white a:bg_primary h:shadow_overlap-light a:shadow_overlap-light">
                <a class="c_inherit-all flex flex_column h:undecorated p_3"><i class="icon fas fa-fw fa-sign-out-alt p-y_2 self_center"></i><span class="label self_center lowercase lh_0 font_n2 nowrap h_1h">Log Out</span></a>
            </li>
        </ul>
    </nav>
    <script src="../js/library/library.main-nav.js"></script>
    <!-- These Styles are just for the styleguide and are not to be included with the pattern. -->

MarkupWrapperClasses: 

Weight: 0

NOTE: This design highly depends on Javascript.There are styles in the pattern that should be ignored because they are just to make the pattern show up correctly in documentation. https://raw.githubusercontent.com/ACC-Style/Arches/master/docs/js/library/library.main-nav.js

Styleguide Navigation.MainNav
*/
/*

Home Utility Nav

Small nav under the home page to quick link users to helpful pieces of content

Markup:
<nav class="utility-nav p-t_3 p-t_4:lg font_n3 font_0:md font_1:lg ">
    <ul class="flex flex_row ul_none justify_center">
        <li class="text_center p-x_2 block p-x_4:md lh_1">
            <a class="h:undecorated c_primary block h:c_secondary-n3 p_3 p_0:md"
                ><i class="fal fa-star  block inline:md"></i><span class="display_none inline:md"> featured</span></a
            >
        </li>
        <li class="text_center p-x_2 block p-x_4:md lh_1 br-l_1 br_solid br_black-4">
            <a class="h:undecorated c_primary block h:c_secondary-n3 p_3 p_0:md"
                ><i class="fal fa-sitemap  block inline:md"></i><span class="display_none inline:md"> hot topics</span></a
            >
        </li>
        <li class="text_center p-x_2 block p-x_4:md lh_1 text_center  br-l_1 br_solid br_black-4">
            <a class="h:undecorated c_primary block h:c_secondary-n3 p_3 p_0:md"
            ><i class="fal fa-heart block inline:md"></i><span class="display_none inline:md"> saved</span></a
        >
        </li>
        <li class="text_center p-x_2 block p-x_4:md lh_1 br-l_1 br_solid br_black-4">
            <a class="h:undecorated c_primary block h:c_secondary-n3 p_3 p_0:md"
            ><i class="fal fa-play  block inline:md"></i><span class="display_none inline:md"> continue watching</span></a
        >
        </li>
        <li class="text_center p-x_2 block p-x_4:md lh_1 br-l_1 br_solid br_black-4">
            <a class="h:undecorated c_primary block h:c_secondary-n3 p_3 p_0:md"
            ><i class="fal fa-sync  block inline:md"></i><span class="display_none inline:md"> watch again </span></a
        >
        </li>
    </ul>
</nav>

MarkupWrapperClasses: 

Weight: 0


Styleguide Navigation.Home.Utility
*/
/*

Breadcrumb Bar

Basic Nav that helps the user orientate the context of the page.

Markup:
<header class="grid-area_headerArea flex flex_row items_center justify_start flex_none z_1 {{> 'Sub.ClassList.Inset.up'}} {{> 'Sub.ClassList.Inset.padding.up-1'}}">
    <nav class="overflow_hidden lh_0  font_ui font_2 font_regular c_black-7 {{modifier_class}}" aria-label="Breadcrumb">
    <ol class="flex flex_no-wrap flex_row items_center overflow_hidden ul_none w_100 max-w_100"> 
        {{> 'Sub.Navigation.Breadcrumb.FirstItem' }}
        {{> 'Sub.Navigation.Breadcrumb.NotFirstItem' modifier_class="Session Shorten Name" }}
        {{> 'Sub.Navigation.Breadcrumb.LastItem' modifier_class="Presentation Shorten Name" }}
    </ol>   
</nav>
</header>

MarkupWrapperClasses: 

ClassList:
Sub.ClassList.Inset.padding.up-1 - Inset Padding Up 1
Sub.ClassList.Inset.up - Inset Level Up Decoration

SubComponents:
Sub.Navigation.Breadcrumb.FirstItem - First item
Sub.Navigation.Breadcrumb.NotFirstItem - Not first item
Sub.Navigation.Breadcrumb.LastItem - Last item

Weight:0

Styleguide Navigation.Breadcrumb
*/
/*

Footer Links

 The Apps Footer. 


Markup:
<div id="subfooter" class="bg_primary-1 flex_auto font_n1 z_1 br_radius texture_dust shadow_emboss-light {{> 'Sub.ClassList.Inset.padding.up-1' }} {{ modifier_class}}">
    <ul class="m_auto footer-bottom-links ul_none max-w_80">
        <li class="inline p_2"><a href="//www.acc.org/footer-pages/media-center" class="c_white-6 h:c_white">Media Center</a></li>
        <li class="inline p_2"><a href="//www.acc.org/footer-pages/quick-start-guide" class="c_white-6 h:c_white">ACC.org Quick Start Guide</a></li>
        <li class="inline p_2"><a class="c_white-6 h:c_white" href="//www.acc.org/footer-pages/advertising-and-sponsorship-policy">Advertising &amp; Sponsorship Policy</a></li>
        <li class="inline p_2"><a class="c_white-6 h:c_white" href="//www.acc.org/footer-pages/clinical-content-disclaimer">Clinical Content Disclaimer</a> </li>
        <li class="inline p_2"><a class="c_white-6 h:c_white" href="//www.acc.org/footer-pages/editorial-board">Editorial Board</a></li>
        <li class="inline p_2"><a class="c_white-6 h:c_white" href="//www.acc.org/footer-pages/privacy-policy">Privacy Policy</a></li>
        <li class="inline p_2"><a class="c_white-6 h:c_white" href="//www.acc.org/footer-pages/registered-user-agreement">Registered User Agreement</a></li>
        <li class="inline p_2"><a class="c_white-6 h:c_white" href="//www.acc.org/footer-pages/terms-and-conditions">Terms of Service</a></li>
        <li class="inline p_2"><a class="c_white-6 h:c_white" href="//www.acc.org/footer-pages/cookie-policy">Cookie Policy</a></li>
        <li class="inline p_2"><a class="c_white-6 h:c_white" href="//www.acc.org/footer-pages/member-hub-terms-of-use">Member Hub Terms of Use</a></li>
        <li class="inline p_2"><a class="c_white-6 h:c_white" href="//www.acc.org/sitemap-acc.xml">Site Map</a> </li>
    </ul> <!-- /footer-bottom-links -->
</div><!-- /subfooter -->

ClassList:
Sub.ClassList.Inset.padding.up-1 - Inset Padding Up 1


MarkupWrapperClasses: 

Weight: 0

Styleguide Navigation.Footer.Links
*/
/*

Sessions - Homepage

Session Designs on the home page.


Markup:
<div>
<article class="flex flex_grow w_100 {{> 'Sub.ClassList.Inset.up-1'}}">
    <div class="flex flex_row font_ui justify_start relative w_100">
        <main
            class="flex flex_column flex_auto justify_between flex_auto relative w_100 isolation_isolate {{> 'Sub.ClassList.Inset.padding.up-3'}}">
            <h2 class="font-size_up font_display font_regular lh_2 h:underline c_primary-n3 m-t_2">
                <a class="c_inherit-all expanded-click-area z_1">
                    Clinical Update for the Blood Vessel Myocardial Valvular Heart Disease Electrocardiographic Arrhythmia Blood Vessel Blood Vessel Blood Vessel  {{ modifier_class}} 
                </a>
            </h2>
            <ul
                class="ul_none flex flex_row flex_wrap justify_start font-size_down-1 c_black-7 m-t_auto lh_0 items_end gap_2">
                {{> 'Sub.Data.Duration'}}
                {{> 'Sub.Data.PresentationCount'}}
                {{> 'Sub.Data.AttachmentLink.ZIP'}}
            </ul>
            <ul class="flex flex_row font_n3 gap_2 justify_start flex_wrap  self_start ul_none uppercase">
                <li class="lh_0 flex_none">
                    {{> 'Sub.Credit' modifier_class='CME' }}
                </li>
                <li class="lh_0 flex_none">
                    {{> 'Sub.Credit' modifier_class='CNE' }}
                </li>
                <li class="lh_0 flex_none">
                    {{> 'Sub.Credit' modifier_class='AAPA' }}
                </li>
            </ul>
        </main>
        <aside class="flex_none p-x_3:md p-b_3 absolute flex_none p-b_3 p-r_2 r_0 t_n1">
            <ul
                class="b_3 flex flex_column flex_wrap font_n4 gap_2 justify_end:md justify_start r_4 self_center ul_none uppercase p-x_3 m-t_n2 items_center">
                <li class="flex_auto p-b_3 m-b_auto">
                    {{> 'Sub.ActionButtons.Favorite' }}
                </li>
            </ul>
        </aside>
    </div>
</article>
</div>




MarkupWrapperClasses: 

Data:
Data.Session.Title - Title

SubComponents: 
Sub.Credits - Credits



Weight: 0

Styleguide Program.Session.Home
*/
/*

Sessions - Homepage Version 2

Session Designs on the home page.


Markup:
<div>
<article class="flex flex_grow w_100 {{> 'Sub.ClassList.Inset.up-1'}}">
    <div class="flex flex_row font_ui justify_start relative w_100">
        <main
            class="flex flex_column flex_auto justify_between flex_auto relative w_100 isolation_isolate gap_3 {{> 'Sub.ClassList.Inset.padding.up-3'}}">
            <h2 class="font-size_up font_display font_regular lh_2 h:underline c_primary-n3 m-t_2">
                <span class="aspect_1x1 float_right font_n3 m-r_n3 m-t_n4 p-x_3" style="width:3.5em">
                    <span class="absolute t_n2 z_3 p-x_3 r_0">
                    {{> 'Sub.ActionButtons.Favorite' }}
                    </span>
                </span>
                <a class="c_inherit-all expanded-click-area z_1 inline">
                    Clinical Update for the  Electrocardiographic Cardiovascular Cardiovascular Pharmacologic Myocardial Cardiovascular Arrhythmia Electrocardiogram Electrocardiogram Pericardial Myocardial Cardiovascular Electrocardiogram Cardiovascular  {{ modifier_class }} 
                </a>
            </h2>
            <ul
                class="ul_none flex flex_row flex_wrap justify_start font-size_down-1 c_black-7 m-t_auto lh_0 items_end gap_2 clear_both">
                {{> 'Sub.Data.Duration'}}
                {{> 'Sub.Data.PresentationCount'}}
                {{> 'Sub.Data.AttachmentLink.ZIP'}}
            </ul>
            <ul class="flex flex_row font_n3 gap_2 justify_start flex_wrap  self_start ul_none uppercase">
                <li class="lh_0 flex_none">
                    {{> 'Sub.Credit' modifier_class='CME' }}
                </li>
                <li class="lh_0 flex_none">
                    {{> 'Sub.Credit' modifier_class='CNE' }}
                </li>
                <li class="lh_0 flex_none">
                    {{> 'Sub.Credit' modifier_class='AAPA' }}
                </li>
            </ul>
        </main>
    </div>
</article>
</div>

caution:  This item is not finalized and might be subject to change


MarkupWrapperClasses: 

Data:
Data.Session.Title - Title

SubComponents: 
Sub.Credits - Credits



Weight: 0

Styleguide Program.Session.Home_v2
*/
/*

Sessions - Search

Session Designs on the home page.


Markup:
<div>
<article class="flex flex_grow w_100 {{> 'Sub.ClassList.Inset.up-1'}}">
    <div class="flex flex_row font_ui justify_start relative w_100">
        <main
            class="flex flex_column gap_3 flex_auto justify_between flex_auto relative w_100 isolation_isolate {{> 'Sub.ClassList.Inset.padding.up-3'}}">
            <h2 class="font-size_up-1 font_display font_regular lh_1 h:underline c_primary-n3 m-t_2">
                <a class="c_inherit-all expanded-click-area z_1">
                    Clinical Update for the {{ modifier_class }} 
                </a>
            </h2>
            <ul
                class="ul_none flex flex_row flex_wrap justify_start font-size_down-1 c_black-7 m-t_auto lh_0 items_end gap_2">
                {{> 'Sub.Data.Duration'}}
                {{> 'Sub.Data.PresentationCount'}}
                 {{> 'Sub.Data.AttachmentLink.ZIP'}}
            </ul>
            <ul class="flex flex_row font_n3 gap_2 justify_start flex_wrap  self_start ul_none uppercase">
                <li class="lh_0 flex_none">
                    {{> 'Sub.Credit' modifier_class='CME' }}
                </li>
                <li class="lh_0 flex_none">
                    {{> 'Sub.Credit' modifier_class='CNE' }}
                </li>
                <li class="lh_0 flex_none">
                    {{> 'Sub.Credit' modifier_class='AAPA' }}
                </li>
            </ul>
        </main>
        <aside class="flex_none p-x_3:md p-b_3">
            <ul
                class="b_3 flex flex_column flex_wrap font_n3 gap_2 justify_end:md justify_start r_4 self_center ul_none uppercase p-x_3 m-t_n2 items_center">
                <li class="flex_auto p-b_3 m-b_auto">
                   {{> 'Sub.ActionButtons.Favorite' }}
                </li>
            </ul>
        </aside>
    </div>
</article>
</div>


MarkupWrapperClasses: 

Data:
Data.Session.Title - Title

SubComponents: 
Sub.Credits - Credits



Weight: 0

Styleguide Program.Session.Search
*/
/*

Presentation - Home

Presentation designs on the home page.

Markup:
<div>
	<article class="flex flex_grow flex_column w_100  {{> 'Sub.ClassList.Inset.up-1'}}">
		<div class="flex flex_column flex_auto justify_between flex_auto relative w_100 isolation_isolate {{> 'Sub.ClassList.Inset.padding.up-3'}} ">
			<div class="font_display m-b_3 lh_2 ">
				<h2 class="font-size_up font_display font_regular lh_2 h:underline c_primary-n3 m-t_2">
					<span class="aspect_1x1 float_right font_n3 m-r_n3 m-t_n4 p-x_3" style="width:3.5em">
						<span class="absolute t_n2 z_3 p-x_3 r_0">
							{{> 'Sub.ActionButtons.Favorite' }}
						</span>
					</span>
					<strong class="block c_black-6 uppercase font_bold font-size_down lh_1 m_0 "> {{> 'Data.Session.Title'}}</strong>
					<a class="c_inherit-all expanded-click-area z_1 inline"> Clinical Update for the Electrocardiographic Clinical Blood Vessel Valvular Heart Disease Valvular Electrocardiogram Electrocardiographic Pericardial Electrocardiogram Side Effect Myocardial Valvular Heart Disease Pharmacologic Pericardial  {{ modifier_class }}
					</a>
				</h2>
			</div>
			<div class="c_black-8 font_copy font-size_down-1">
				{{> 'Sub.FacultyList' }}
			</div>
			<ul class="ul_none flex flex_row flex_wrap justify_start font-size_down-1 c_black-7 m-t_auto lh_0 items_end gap_2">
				{{> 'Sub.Data.Duration'}}
				{{> 'Sub.Data.AttachmentLink'}}
			</ul>
            {{> 'Sub.Credit.Chiclets.Horizontal'}}
		</div>
		<div class="{{> 'Sub.ClassList.Inset.padding'}}">
			{{> 'Sub.ProgressBar' modifier_class="" }}
		</div>
	</article>
</div>


MarkupWrapperClasses: ul_none

Weight: 0

Data:
Data.Session.Title - Session Title
Data.Presentation.Title - Presentation Title

SubComponents: 
Sub.FacultyList - Faculty List
Sub.ProgressBar - Progress
Sub.Credits - Credits

Styleguide Program.Presentation.Home
*/
/*

Presentation - Home Version 2

Presentation designs on the home page.

Markup:
<div>
    <article class="flex flex_grow flex_column w_100  {{> 'Sub.ClassList.Inset.up-1'}}">
        <div class="flex flex_row font_ui justify_start relative w_100 gap_3">
            <main
                class="flex flex_column flex_auto justify_between flex_auto relative w_100 isolation_isolate {{> 'Sub.ClassList.Inset.padding.up-3'}} ">
                <div class="font_display m-b_3 lh_2 ">
                    <h2 class="font-size_up font_display font_regular lh_2 h:underline c_primary-n3 m-t_2">
					<span class="aspect_1x1 float_right font_n3 m-r_n3 m-t_n4 p-x_3" style="width:3.5em">
						<span class="absolute t_n2 z_3 p-x_3 r_0">
							{{> 'Sub.ActionButtons.Favorite' }}
						</span>
					</span>
					<strong class="block c_black-6 uppercase font_bold font-size_down lh_1 m_0 "> {{> 'Data.Session.Title'}}</strong>
					<a class="c_inherit-all expanded-click-area z_1 inline"> Clinical Update for the Blood Vessel Side Effect Side Effect Electrocardiogram Arrhythmia Cardiovascular Electrocardiogram Electrocardiogram Pharmacologic Pharmacologic Valvular Pericardial Clinical Electrocardiogram  {{ modifier_class }}
					</a>
				</h2>
                </div>
                <div class="c_black-8 font_copy font-size_down-1">
                    {{> 'Sub.FacultyList' }}
                </div>
                <ul class="ul_none flex flex_row flex_wrap justify_start font-size_down-1 c_black-7 m-t_auto lh_0 items_end gap_2">
                {{> 'Sub.Data.Duration'}}
                {{> 'Sub.Data.AttachmentLink'}}
                </ul>
                {{> 'Sub.Credit.Chiclets.Horizontal'}}
            </main>
            <aside class="flex_none p-x_3:md p-b_3">
                <ul
                    class="b_3 flex flex_column flex_wrap font_n3 gap_2 justify_end:md justify_start r_4 self_center ul_none uppercase p-x_3 m-t_n2 items_center">
                    <li class="flex_auto p-b_3 m-b_auto">
                        {{> 'Sub.ActionButtons.Favorite' }}
                    </li>
                </ul>
            </aside>
        </div>
        <div class="{{> 'Sub.ClassList.Inset.padding'}}">
            {{> 'Sub.ProgressBar' modifier_class="" }}
        </div>
    </article>
</div>

caution:  This item is not finalized and might be subject to change

MarkupWrapperClasses: ul_none

Weight: 0

Data:
Data.Session.Title - Session Title
Data.Presentation.Title - Presentation Title

SubComponents: 
Sub.FacultyList - Faculty List
Sub.ProgressBar - Progress
Sub.Credits - Credits

Styleguide Program.Presentation.Home_V2
*/
/*

Presentation - Search

Presentation designs on the Search page.

Markup:
<div>
    <article class="flex flex_grow flex_column w_100  {{> 'Sub.ClassList.Inset.up-1'}}">
        <div class="flex flex_column flex_auto gap_3 justify_between flex_auto relative w_100 isolation_isolate {{> 'Sub.ClassList.Inset.padding.up-3'}} ">
                <div class="font_display m-b_3 lh_2 ">
                    <h2 class="font-size_up font_display font_regular lh_2 h:underline c_primary-n3 m-t_2">
                        <span class="aspect_1x1 float_right font_n3 m-r_n3 m-t_n4 p-x_3" style="width:3.5em">
                            <span class="absolute t_n2 z_3 p-x_3 r_0">
                                {{> 'Sub.ActionButtons.Favorite' }}
                            </span>
                        </span>
                        <strong class="block c_black-6 uppercase font_bold font-size_down lh_1 m_0 "> {{> 'Data.Session.Title'}}</strong>
                        <a class="c_inherit-all expanded-click-area z_1 inline"> Clinical Update for the Chest Pain Arrhythmia Pharmacologic Valvular Valvular Heart Disease Electrocardiogram Arteriosclerosis Cardiovascular Valvular Heart Disease Myocardial Arrhythmia Valvular Valvular Heart Disease Valvular Heart Disease  {{ modifier_class }}
                        </a>
                    </h2>
                </div>
                <div class="c_black-8 font_copy font-size_down-1">
                    {{> 'Sub.FacultyList' }}
                </div>
                <ul class="ul_none flex flex_row flex_wrap justify_start font-size_down-1 c_black-7 m-t_auto lh_0 items_end gap_2">
                {{> 'Sub.Data.Duration'}}
                {{> 'Sub.Data.AttachmentLink'}}
                </ul>
                {{> 'Sub.Credit.Chiclets.Horizontal'}}
        </div>
        <div class="{{> 'Sub.ClassList.Inset.padding'}}">
            {{> 'Sub.Search.TimeMarkers' modifier_class="" }}
        </div>
    </article>
</div>


MarkupWrapperClasses: ul_none

Weight: 0

Data:
Data.Session.Title - Session Title
Data.Presentation.Title - Presentation Title

SubComponents: 
Sub.FacultyList - Faculty List
Sub.Credits - Credits
Sub.Search.TimeMarkers - Time Markers

Styleguide Program.Presentation.Search
*/
/*

Presentation - List

Presentation designs on the Search page.

Markup:
<div>
    <article class="flex flex_grow flex_column w_100  p-x_3:lg br-t_1 br_solid br_black-3">
        <div class="flex flex_column flex_auto gap_3 justify_between flex_auto relative w_100 isolation_isolate {{> 'Sub.ClassList.Inset.padding.up-3'}} ">
                <div class="font_display m-b_3 lh_2 ">
                    <h2 class="font-size_up-1 font_display font_regular lh_1 h:underline c_primary-n3 m_0">
                    <a class="c_inherit-all expanded-click-area z_1">
                        Presentation of the findings {{ modifier_class}} 
                    </a>
                    </h2>
                </div>
                <div class="c_black-8 font_copy font-size_down-1">
                    {{> 'Sub.FacultyList' }}
                </div>
                <ul class="ul_none flex flex_row flex_wrap justify_start font-size_down-1 c_black-7 m-t_auto lh_0 items_end gap_2">
                {{> 'Sub.Data.Duration'}}
                {{> 'Sub.Data.AttachmentLink'}}
                </ul>
        </div>
        <div class="{{> 'Sub.ClassList.Inset.padding'}}">
            {{> 'Sub.Search.TimeMarkers' modifier_class="" }}
        </div>
    </article>
</div>


MarkupWrapperClasses: ul_none

Weight: 0

Data:
Data.Session.Title - Session Title
Data.Presentation.Title - Presentation Title

SubComponents: 
Sub.FacultyList - Faculty List
Sub.Credits - Credits
Sub.Search.TimeMarkers - Time Markers

Styleguide Program.Presentation.List
*/
/*

Presentation - Condensed

Presentation designs on the Search page.

Markup:
<article class="br-t_1 br_black-3 br_solid flex flex_column flex_grow w_100 p-t_3">
    <div class="flex flex_row font_ui justify_start relative w_100 gap_3 {{> 'Sub.ClassList.Inset.padding'}} h:bg_white-8 br_radius">
        <main class="flex flex_column flex_auto gap_4 justify_between flex_auto relative w_100 isolation_isolate">
            <h2 class="font-size_up-1 lh_2 font_display font_regular lh_1 c_primary-n3 m_0">
                <a class="c_inherit-all expanded-click-area z_1 h:undecorated undecorated">
                    Presentation of the findings {{ modifier_class }} 
                </a>
            </h2>
        </main>
        <aside class="flex_auto flex flex_column items_center justify_center">
            <span class="font-size_down inline-block lh_0  c_black-8 text_center nowrap">
                <span class="font-size_up c_accent-n2 block ">
                <i class="fal fa-clock"></i>
                15
                </span>
                minutes
            </span>
        </aside>
    </div>
</article>


MarkupWrapperClasses: ul_none

Weight: 0

Data:
Data.Session.Title - Session Title
Data.Presentation.Title - Presentation Title

SubComponents: 
Sub.FacultyList - Faculty List
Sub.Credits - Credits
Sub.Search.TimeMarkers - Time Markers

Styleguide Program.Presentation.Condensed
*/
/*

Presentation - Condensed Playing

Presentation designs on the Search page.

Markup:
<article class="br-t_1 br_black-3 br_solid flex flex_column flex_grow w_100 p-t_3">
    <div class="flex flex_row font_ui justify_start relative w_100 gap_4 {{> 'Sub.ClassList.Inset.padding.up-3'}} {{> 'Sub.ClassList.Inset.up-1'}}">
        <main class="flex_auto">
            <h2 class="font-size_up-1 lh_2 font_display font_regular lh_1 c_primary-n3 m_0">
                <a class="c_inherit-all expanded-click-area z_1 h:undecorated undecorated">
                    Presentation of the findings {{ modifier_class }} 
                </a>
            </h2>
        </main>
        <aside class="flex_none flex flex_column items_center justify_center">
            <span class="font-size_up-2 inline-block lh_0  c_accent text_center nowrap">
                <i class="fas fa-play"></i>
            </span>
        </aside>
    </div>
</article>


MarkupWrapperClasses: ul_none

Weight: 0

Data:
Data.Session.Title - Session Title
Data.Presentation.Title - Presentation Title

SubComponents: 
Sub.FacultyList - Faculty List
Sub.Credits - Credits
Sub.Search.TimeMarkers - Time Markers

Styleguide Program.Presentation.CondensedPlaying
*/
/*

Presentation - Condensed Playable

Presentation designs on the Search page.

Markup:
<li class="flex flex_row font_ui justify_between br-t_1 br-b_1  br_solid br_black-1 m-b_n1 items_center relative w_100 gap_3 {{> 'Sub.ClassList.Inset.padding'}} h:bg_white-8 br_radius relative">
    <h3 class="font-size_up-1 lh_2 font_display font_regular lh_1 c_primary-n3 m_0 flex_auto">
        Presentation of the findings {{ modifier_class }} 
    </h3>
    <span class="flex_none flex flex_column items_center justify_center ">
        <a class="font-size_up-2 self_center block lh_0 c_primary br_radius aspect_1x1 text_center expanded-click-area nowrap p_4 h:bg_primary-n2 h:c_white bg_white-5 shadow_bevel-light">
            <i class="fas fa-play"></i>
        </a>
    </span>
</li>


MarkupWrapperClasses: ul_none

Weight: 0

Data:
Data.Session.Title - Session Title
Data.Presentation.Title - Presentation Title

SubComponents: 
Sub.FacultyList - Faculty List
Sub.Credits - Credits
Sub.Search.TimeMarkers - Time Markers

Styleguide Program.Presentation.Condensed.Playable
*/
/*
Tabs

Description: A simple way to show small groups of content that should have the same level of reading hierarchy.  

Markup:
<nav class="bg_black-2 br_3 br_radius br_solid br_white-9 c_primary font_0 font_bold font_accent: p-x_0 p-x_4:md shadow_bevel-light" id="tabContentLight" role="tablist">
    <ul class="flex_column flex_row:md  nav">
        {{> "Structures.Tabs.Tabs.LinkActive" }}
        {{> "Structures.Tabs.Tabs.Link" }}
        {{> "Structures.Tabs.Tabs.LinkDisabled" }}
        </li>
    </ul>
</nav>
<div class="bg_black-_05 br-bl_radius br-br_radius m-x_3 p_4 reading-typography shadow_emboss-light tab-content" id="nav-tabContent">
    <div class="tab-pane fade show active" id="ActiveLink" role="tabpanel" aria-labelledby="ActiveLink">
        <h2 class="capitalize"> consectetur adipisicing elit </h2>
        Lorem ipsum dolor sit amet. Quisquam maxime consectetur, nisi sed ea perspiciatis a sit porro laboriosam ab sequi est quas optio dolorum at maiores quis incidunt inventore.</div>
    <div class="tab-pane fade" id="BasicLink" role="tabpanel" aria-labelledby="BasicLink">
        <h2 class="capitalize">Lorem ipsum dolor sit </h2>
        Amet consectetur adipisicing elit. Vero enim provident consequuntur perspiciatis. Eligendi placeat consequuntur veniam quidem temporibus labore quisquam commodi rem error cumque fugit suscipit nulla, excepturi eos.</div>
</div>

caution:  This item is not finalized and might be subject to change

Note: Limitations to the documentation system might cause javascript effects to animate or trigger incorrectly. 

Weight:0

Styleguide Structures.Tabs
*/
/*
Simple Tabs

Simple in page tabs 

Markup:
<nav class="bg_black-2 br_3 br_radius br_solid br_white-9 c_primary font_0 font_bold font_accent: p-x_0 p-x_4:md shadow_bevel-light">
    <ul class="flex_column flex_row:md  nav">
        {{> "Structures.Tabs.Tabs.LinkActive" }}
        {{> "Structures.Tabs.Tabs.Link" }}
        {{> "Structures.Tabs.Tabs.Link" }}
        {{> "Structures.Tabs.Tabs.LinkDisabled" }}
    </ul>
</nav>

Styleguide  Structures.Tabs.Tabs

*/
/*
Simple Tabs: Dark Mode

Reverse Colored Tabs for when on dark background

Markup:
<div class="m-y_4 bg_acc p_4" id="nav_jump">
    <nav class="bg_black-2 c_white br_3 br_radius br_solid br_white-5 font_0 font_bold font_ui p-x_0 p-x_4:md shadow_overlap-light">
        <ul class="flex_column flex_row:md ul_none nav">
        {{> "Structures.Tabs.TabsDark.LinkActive" }}
        {{> "Structures.Tabs.TabsDark.Link" }}
        {{> "Structures.Tabs.TabsDark.Link" }}
        {{> "Structures.Tabs.TabsDark.LinkDisabled" }}
        </ul>
    </nav>
</div>

Weight: 0

Styleguide  Structures.Tabs.TabsDark
*/
/*
Tab Dark: Active

Description: Active State of Dark Tab.  Add and remove the `active is-active` class from the li-tag toggle the active effect

Markup:
<li class="br-t_3 br_solid:md br_white-0 m-l_1 nav-item ">
    <a class="a:bg_accent h:underline-none c_white text-shadow_black-1 br-b_3 br_white-0 br_solid:md:md h:bg_secondary h:br_accent h:c_white m-y_n2:md nav-link p-y_3:md p-x_4 active">
        Active
    </a>
</li>

MarkupWrapperClasses: flex_column flex_row:md ul_none nav bg_acc br_3 br_radius br_solid br_acc-3 p-l_4

Weight:0

Styleguide  Structures.Tabs.TabsDark.LinkActive
*/
/*
Tab Dark: Basic

Description: Dark Tab Basic Nav

Markup:
<li class="br-t_3 br_solid:md br_white-0 m-l_1 nav-item">
    <a class="a:bg_accent h:underline-none c_white text-shadow_black-1 br-b_3 br_white-0 br_solid:md h:bg_secondary h:br_accent h:c_white m-y_n2:md nav-link p-y_3:md p-x_4">
        Link
    </a>
</li>


MarkupWrapperClasses: flex_column flex_row:md ul_none nav bg_acc br_3 br_radius br_solid br_acc-3 p-l_4

Weight:0


Styleguide  Structures.Tabs.TabsDark.Link
*/
/*
Tab Dark: Disabled

Description: Disabled decorations is a swap of many of the decoration classes with the removal of the hover and active classes.

Markup:
<li class="br-t_3 br_solid:md br_white-0 m-l_1 nav-item ">
    <a class="bg_white-2 br-b_3 br_solid:md br_white-0 c_white-4 cursor_not-allowed disabled h:underline-none m-y_n2:md nav-link opacity-5 p-x_4 p-y_3:md" href="/on-demand/industry-stage#nav_jump" target="_self">
        Disabled
    </a>
</li>

MarkupWrapperClasses: flex_column flex_row:md ul_none nav bg_acc br_3 br_radius br_solid br_acc-3 p-l_4 

Weight:0


Styleguide  Structures.Tabs.TabsDark.LinkDisabled
*/
/*
Tab: Active

Description: Active State of Dark Tab.  Add and remove the `active is-active` class from the li-tag toggle the active effect

Markup:
<li class=" br-t_3 br_solid:md br_white-0 m-l_1 nav-item">
    <a 
        id="ActiveLink-tab" data-bs-toggle="tab" data-bs-target="#ActiveLink"  role="tab" aria-controls="ActiveLink" aria-selected="true"
        class="active a:bg_accent-n2 h:underline-none a:c_white br-b_3 br_white-0 br_solid:md c_primary h:bg_acc-n3 h:br_accent h:c_white m-y_n2:md nav-link p-y_3:md p-x_4" 
        href="#">Active</a>
</li>

MarkupWrapperClasses: flex_column flex_row:md ul_none nav bg_black-2 br_3 br_radius br_solid br_white-9 c_primary font_0 font_bold font_accent: p-x_0 p-x_4:md shadow_bevel-light

Weight:0

Styleguide  Structures.Tabs.Tabs.LinkActive
*/
/*
Tab: Basic

Description: Active State of Dark Tab.  Add and remove the `active is-active` class from the li-tag toggle the active effect

Markup:
<li class="br-t_3 br_solid:md br_white-0 m-l_1 nav-item">
    <a 
    id="BasicLink-tab" data-bs-toggle="tab" data-bs-target="#BasicLink"  role="tab" aria-controls="BasicLink" aria-selected="true"
    class="a:bg_accent-n2 h:underline-none a:c_white br-b_3 br_white-0 br_solid:md c_primary h:bg_acc-n3 h:br_accent h:c_white m-y_n2:md nav-link p-y_3:md p-x_4" href="#">Link</a>
</li>


MarkupWrapperClasses: flex_column flex_row:md ul_none nav bg_black-2 br_3 br_radius br_solid br_white-9 c_primary font_0 font_bold font_accent: p-x_0 p-x_4:md shadow_bevel-light

Weight:0

Styleguide  Structures.Tabs.Tabs.Link
*/
/*
Tab: Disabled

Description: Disabled decorations is a swap of many of the decoration classes with the removal of the hover and active classes.

Markup:
<li class="br-t_3 br_white-0 br_solid:md m-l_1 nav-item">
    <a class="br-b_3 br_solid:md br_white-0 c_black-4 opacity-5 bg_black-1 disabled h:underline-none m-y_n2:md nav-link p-x_3 p-x_4" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>

MarkupWrapperClasses: flex_column flex_row:md ul_none nav bg_black-2 br_3 br_radius br_solid br_white-9 c_primary font_0 font_bold font_accent: p-x_0 p-x_4:md shadow_bevel-light

Weight:0

Styleguide  Structures.Tabs.Tabs.LinkDisabled
*/
.filter_blur {
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
}

.h\:shadow_overlap-light:hover,.a\:shadow_overlap-light.active {
  box-shadow: 0 1px 10px rgba(0, 0, 0, 0.05), 0 2px 4px rgba(0, 0, 0, 0.3), 1px 5px 5px rgba(0, 0, 0, 0.01);
}

@media only screen and (min-width: 768px) {
  .nav-maxed {
    max-width: clamp(20em, 25rem, 100%);
  }
  .nav-mined {
    max-width: 4rem;
  }
}
html:not([data-scroll="0"]) #navigation_mobile .label {
  height: 0;
  opacity: 0 !important;
}

.tns-holder-design {
  width: 30%;
}

body {
  font-size: 16px;
  font-size: 1rem;
  font-family: var(--font-family_copy);
}

h1, .h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
  font-weight: var(--font_regular);
  font-family: var(--font-family_display);
}

h6, .h6 {
  font-weight: var(--font_bold);
}

p {
  line-height: 1.35;
}

ul,
ol {
  line-height: 1.6;
}

kbd,
code,
samp,
var {
  font-family: var(--font-family_mono);
}

form {
  border-color: rgba(19, 18, 18, 0.38);
}

label {
  font-weight: var(--font_bold);
}

label,input,
select,
textarea,
legend,
fieldset,
button {
  color: currentColor;
  font-size: 16px;
  font-size: 1rem;
  font-family: var(--font-family_ui);
}

input,
select,
textarea,
legend,
fieldset,
button {
  box-sizing: border-box;
}

button,
[type=button],
[type=submit],
[type=reset], [type=date],
[type=datetime],
[type=datetime-local],
[type=email],
[type=month],
[type=number],
[type=password],
[type=search],
[type=tel],
[type=text],
[type=url],
[type=week],
[type=time], select,
textarea {
  min-height: 1.5em;
  padding: 4px 8px;
  padding: 0.25rem 0.5rem;
  border-width: thin;
  border-radius: 6px;
  border-color: rgba(19, 18, 18, 0.25);
  line-height: 1.6;
}

input:focus,
select:focus,
textarea:focus {
  outline-color: hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.5);
  box-shadow: inset 1px 1px 2px 2px hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.12), inset 2px 2px 3px 0px hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.1), inset -2px -2px 3px 0px hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.1);
}

[type=date],
[type=datetime],
[type=datetime-local],
[type=email],
[type=month],
[type=number],
[type=password],
[type=search],
[type=tel],
[type=text],
[type=url],
[type=week],
[type=time], select,
textarea {
  width: 100%;
}

input,
select,
textarea,
legend,
fieldset,
button {
  box-sizing: border-box;
}

[type=color] {
  width: 24px;
  width: 1.5rem;
  height: 24px;
  height: 1.5rem;
  padding: 0;
  border-color: rgba(19, 18, 18, 0.25);
}

[type=radio],
[type=checkbox] {
  padding-left: 8px;
  padding-left: 0.5rem;
}

button,
[type=button],
[type=submit],
[type=reset] {
  width: auto;
  border-radius: 6px;
}

fieldset {
  margin: 8px 0;
  margin: 0.5rem 0;
  padding: 8px 16px;
  padding: 0.5rem 1rem;
  border-color: rgba(19, 18, 18, 0.1);
}

/*

 Basic Inputs

 Arches is strongly based on utility classes styling everything so it commonly just builds on either the base of the browser defaults or the defaults of the framework that is built on. This is a kitchen sink of html elements so you can see how this variation will effect html. There is No basic styling around the pure DOM with the utility class only.  To get full brand styling use a framework based version of arches.  

  Styleguide HTML.Inputs

*/
/*

  Text Inputs 

  Bellow is the comparison of using the basic Html input types with the utility classes only vs using the bootstrap pattern for the input.

Markup:
<div class="flex_row flex gap-x_5">
	<div class="flex_auto">
		<h3>Utility Class</h3>
		<label for="example-input-email" class='m-b_3'>Email address</label> 
		<input type="email" id="example-input-email" placeholder="Enter email"/>
	</div>
	<div class="flex_auto">
		<h3>Bootstrap</h3>
		<label for="exampleFormControlInput1" class="form-label">Email address</label>
		<input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com"/>
	</div>
</div>

  Styleguide HTML.Inputs.Text

*/
/*

Inputs UC

Utility Class only build inputs

Markup:
<form>
    <div class="m-b_3"><label class="m-b_3" for="example-input-email">Email address</label> <input type="email" id="example-input-email" placeholder="Enter email"></div>
    <div class="m-b_3"><label class="m-b_3" for="example-input-password1">Number</label> <input type="number" id="example-input-number" placeholder="Number"></div>
    <div class="m-b_3"><label class="m-b_3" for="example-input-password">Password</label> <input type="password" id="example-input-password" placeholder="Password"></div>
    <div class="m-b_3"><label class="m-b_3" for="example-input-search">Search</label> <input type="search" id="example-input-serach" placeholder="Search .."></div>
    <div class="m-b_3"><label class="m-b_3" for="example-input-tel">Telephone number</label> <input type="tel" id="example-input-tel" placeholder="Telephone number"></div>
    <div class="m-b_3"><label class="m-b_3" for="example-input-text">Text</label> <input type="text" id="example-input-text" placeholder="Enter some text here"></div>
    <div class="m-b_3"><label class="m-b_3" for="example-input-url">Url</label> <input type="url" id="example-input-url" placeholder="Enter a url here"></div>
    <div class="m-b_3"><label class="m-b_3" for="example-input-color">Color</label> <input type="color" id="example-inupt-color" placeholder="#fff"></div>
    <div class="m-b_3"><label class="m-b_3" for="example-input-date">Date</label> <input type="date" id="example-input-date" placeholder="date"></div>
    <div class="m-b_3"><label class="m-b_3" for="example-input-date-time">Date / Time</label> <input type="datetime" id="example-input-date-time" placeholder="date / time"></div>
    <div class="m-b_3"><label class="m-b_3" for="example-input-date-time-local">Date / Time local</label> <input type="datetime-local" id="example-input-date-time-local" placeholder="date / time local"></div>
    <div class="m-b_3"><label class="m-b_3" for="example-input-month">Month</label> <input type="month" id="example-input-month" placeholder="Month"></div>
    <div class="m-b_3"><label class="m-b_3" for="example-input-week">Week</label> <input type="week" id="example-input-week" placeholder="Week"></div>
    <div class="m-b_3"><label class="m-b_3" for="example-input-time">Time</label> <input type="time" id="example-input-time" placeholder="Time"></div>
    <div class="m-b_3"><label class="m-b_3" for="example-select1">Example select</label> <select id="example-select1">
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
        </select></div>
    <div><label for="example-select2">Example multiple select</label> <select multiple="" id="example-select2">
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
        </select></div>
    <div><label for="example-textarea">Example textarea</label> <textarea id="example-textarea" rows="3"></textarea></div>
    <div><label for="example-input-file">File input</label> <input type="file" id="example-input-file"></div>
    <fieldset>
        <legend>I am legend</legend>
        <div><label><input type="radio" name="options-radios" id="optionsR-radios1" value="option1" checked=""> Option one is this and that—be sure to include why it's great</label></div>
        <div><label><input type="radio" name="options-radios" id="options-radios2" value="option2"> Option two can be something else and selecting it will deselect option one</label></div>
        <div><label><input type="radio" name="optionsRadios" id="options-radios3" value="option3" disabled=""> Option three is disabled</label></div>
    </fieldset>
    <fieldset>
        <legend>I am also legend</legend><label for="checkbox-demo-1"><input type="checkbox" id="checkbox-demo-1"> Check me out</label> <label for="checkbox-demo-2"><input type="checkbox" id="checkbox-demo-2"> Or check me out</label>
    </fieldset>
    <div>
        <button type="button" name="button">Button</button>
        <input type="button" name="input" value="Input Button">
        <input type="submit" name="submit" value="Submit Button">
        <input type="reset" name="reset" value="Reset Button">
    </div>
</form>

Weight:100

Styleguide HTML.Inputs.All

*/
/*

Table

Basic Tables with this variation of Arches. Please note that the html can have a different look depending on the brand or the framework the variation is built on.  

<table><caption>Tables can have captions now.</caption><tbody><tr><th>Person</th><th>Number</th><th>Third Column</th></tr><tr><td>Someone Lastname</td><td>900</td><td>Nullam quis risus eget urna mollis ornare vel eu leo.</td></tr><tr><td><a href="#">Person Name</a></td><td>1200</td><td>Vestibulum id ligula porta felis euismod semper. Donec ullamcorper nulla non metus auctor fringilla.</td></tr><tr><td>Another Person</td><td>1500</td><td>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nullam id dolor id nibh ultricies vehicula ut id elit.</td></tr><tr><td>Last One</td><td>2800</td><td>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum.</td></tr></tbody></table>


Styleguide HTML.BasicTable

*/
table {
  font-size: 16px;
  font-size: 1rem;
  font-family: var(--font-family_ui);
}
table caption {
  padding: 8px;
  padding: 0.5rem;
}

th,
td {
  padding: 4px 8px;
  padding: 0.25rem 0.5rem;
  text-align: start;
}

thead {
  padding: 4px 8px 0;
  padding: 0.25rem 0.5rem 0;
  font-weight: var(--font_bold);
}

tbody {
  padding: 0 8px;
  padding: 0 0.5rem;
}

tfoot,
caption {
  padding: 0 8px 4px;
  padding: 0 0.5rem 0.25rem;
  font-size: 14.222px;
  font-size: 0.8888888889rem;
}

/*

Deprecated: Lorem Text Loader

It is often we need to have space held for a return of details or text.  

Markup:
<div class="max-w_40">
   <h1 class="lorem-loader font_3 m-y_3">&nbsp;</h1>
   <p class="m-y_2 font_0 lorem-loader">&nbsp;</p>
   <p class="m-y_2 font_0 lorem-loader">&nbsp;</p>
   <p class="m-y_2 font_0 lorem-loader">&nbsp;</p>
</div>

Styleguide Recipes.InteractiveExtras.Text Placeholder Loader


*/
/*

Aspect Ratio

To create an image placeholder use the lorem-loader plus an aspect of the intended image on th parent container while waiting for the image.The placeholder will be a 100% of the container so size the container properly. 

.aspect_8x10			- lock image to a 8 to 10 ratio
.aspect_1x1			- lock image to a 1 to 1 ratio
.aspect_2x1			- lock image to a 2 to 1 ratio
.aspect_3x2			- lock image to a 3 to 2 ratio   
.aspect_4x3			- lock image to a 4 to 3 ratio 
.aspect_16x9		- lock image to a 16 to 9 ratio 
.aspect_21x9		- lock image to a 21 to 9 ratio 
.aspect_4x1			- lock image to a 4 to 1 ratio 

Markup:
<div class="grid-w_2 max-w_20"  data-style="{{ modifier_class }}" >
   <div class="m-y_2 lorem-loader {{modifier_class}} ">&nbsp;</div>
</div>

Styleguide Recipes.InteractiveExtras.Placeholder Aspect Ratio
*/
.lorem-loader {
  -webkit-animation: Gradient 3s ease infinite;
  -moz-animation: Gradient 3s ease infinite;
  width: 100%;
  overflow: hidden;
  background: linear-gradient(-45deg, hsla(var(--shade-h), calc(var(--shade-s) - var(--shade-s) * 0.125), calc(var(--shade-l) + (100% - var(--shade-l)) * 0.25), 1), hsla(var(--shade-h), calc(var(--shade-s) - var(--shade-s) * 0.25), calc(var(--shade-l) + (100% - var(--shade-l)) * 0.5), 1));
  background-size: 400% 400%;
  color: #fff;
  animation: Gradient 3s ease infinite;
}
@keyframes Gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.icon-toggle_plus-minus-sub:before, .icon-toggle_check:before, .icon-toggle_check-circle:before, .icon-toggle_check-sqaure:before, .icon-toggle_arrow-circle:before, .icon-toggle_chevron-double-left-right:before, .icon-toggle_chevron-double-up-down:before, .icon-toggle_chevron-up-down:before, .icon-toggle_plus-minus:before, .icon-toggle_bars-times:before,.icon-toggle_plus-minus-sub:before, .icon-toggle_check:before, .icon-toggle_check-circle:before, .icon-toggle_check-sqaure:before, .icon-toggle_arrow-circle:before, .icon-toggle_chevron-double-left-right:before, .icon-toggle_chevron-double-up-down:before, .icon-toggle_chevron-up-down:before, .icon-toggle_plus-minus:before, .icon-toggle_bars-times:before {
  margin: 0 4px;
  margin: 0 0.25rem;
}

/*
Is Active Toggle 

Many momment there are needs for toggles of icon when the parent is in the state of `active`.  Used in tree navs, dropdowns, and collapsing areas. 

.icon-toggle_plus-minus 					-  Toggle between plus and minus square
.icon-toggle_chevron-up-down				- 	Toggle a chevron pointing up and then down.
.icon-toggle_chevron-double-up-down 		-  Toggle the double chevron to point up when active
.icon-toggle_chevron-double-left-right		- Toggle chevron left and right
.icon-toggle_arrow-circle 					-  Toggle the arrow to have a circle when active.
.icon-toggle_bars-times 					-  Toggle between bars and times
.icon-toggle_check-sqaure					-  Check Marks toggle on and off
.icon-toggle_check-circle 					-  Check Marks toggle on and off
.icon-toggle_check 							-  Check Marks toggle on and off

Markup:
<ul data-style="{{ modifier_class }}" class="ul_none m_0 p_0">
	<li class="m-t_1 is-active_toggle-function c_black a:c_white flex p-x_3 p-y_2 a:bg_primary font_1 bg_shade-2 ">	
	<i class="flex_none m-r_5 font_3 fas fa-fw {{ modifier_class }}"></i>
			<span class="flex_auto ">FA Solid {{ modifier_class }}</span>
			<span class="flex_shrink m-l_auto w_20 self_end a:_block display_none"> active </span>
	</li>
	<li class="m-t_1 is-active_toggle-function c_black a:c_white flex p-x_3 p-y_2 a:bg_primary font_1 bg_shade-2 ">	
	<i class="flex_none m-r_5 font_3 far  fa-fw {{ modifier_class }}"></i>
			<span class="flex_auto ">FA Regular {{ modifier_class }}</span>
			<span class="flex_shrink m-l_auto w_20 self_end a:_block display_none"> active </span>
	</li>
	<li class="m-t_1 is-active_toggle-function c_black a:c_white flex p-x_3 p-y_2 a:bg_primary font_1 bg_shade-2 ">	
	<i class="flex_none m-r_5 font_3 fal fa-fw {{ modifier_class }}"></i>
			<span class="flex_auto">FA Light {{ modifier_class }}</span>
			<span class="flex_shrink m-l_auto w_20 self_end a:_block display_none"> active </span>
	</li>
</ul>


Styleguide Recipes.InteractiveExtras.ToggleIcons
*/
.icon-toggle_bars-times:before {
  content: "\f0c9";
}
.active .icon-toggle_bars-times:before, .icon-toggle_bars-times:before.show, .show > .icon-toggle_bars-times:before, .active > .icon-toggle_bars-times:before {
  content: "\f00d";
}

.icon-toggle_plus-minus:before {
  content: "\f0fe";
}
.active .icon-toggle_plus-minus:before, .icon-toggle_plus-minus:before.show, .show > .icon-toggle_plus-minus:before, .active > .icon-toggle_plus-minus:before {
  content: "\f146";
}

.icon-toggle_chevron-up-down:before {
  content: "\f106";
}
.active .icon-toggle_chevron-up-down:before, .show .icon-toggle_chevron-up-down:before, .active > .icon-toggle_chevron-up-down:before {
  content: "\f107";
}

.icon-toggle_chevron-double-up-down:before {
  content: "\f103";
}
.active .icon-toggle_chevron-double-up-down:before, .show .icon-toggle_chevron-double-up-down:before, .active > .icon-toggle_chevron-double-up-down:before {
  content: "\f325";
}

.icon-toggle_chevron-double-left-right:before {
  content: "\f324";
}
.active .icon-toggle_chevron-double-left-right:before, .show .icon-toggle_chevron-double-left-right:before, .active > .icon-toggle_chevron-double-left-right:before {
  content: "\f323";
}

.icon-toggle_arrow-circle:before {
  content: "\f061";
}
.active .icon-toggle_arrow-circle:before, .show .icon-toggle_arrow-circle:before, .active > .icon-toggle_arrow-circle:before {
  content: "\f0a9";
}

.icon-toggle_check-sqaure:before {
  content: "\f0c8";
}
.active .icon-toggle_check-sqaure:before, .show .icon-toggle_check-sqaure:before, .active > .icon-toggle_check-sqaure:before {
  content: "\f14a";
}

.icon-toggle_check-circle:before {
  content: "\f111";
}
.active .icon-toggle_check-circle:before, .show .icon-toggle_check-circle:before, .active > .icon-toggle_check-circle:before {
  content: "\f058";
}

.icon-toggle_check:before {
  content: "";
}
.active .icon-toggle_check:before, .show .icon-toggle_check:before, .active > .icon-toggle_check:before {
  content: "\f00c";
}

/*
Social Links

The social links From the Footer.


Markup:
<section class="social p_4 m-y_2 bg_shade-n3 font_2">
    <ul class="flex social-bar ul_none c_white h:c_white m_0">
        <li class="flex_auto m-r_2"><a href="https://twitter.com/accintouch" target="_blank" class="twitter social-bar--button block m-b_0 p_3 c_white text_center opacity_7 h:opacity"><i class="fab fa-square-x-twitter"></i></a></li>
        <li class="flex_auto m-r_2"><a href="https://www.facebook.com/AmericanCollegeofCardiology" target="_blank" class="facebook social-bar--button block m-b_0 p_3 c_white text_center opacity_7 h:opacity"><i class="fab fa-facebook-square"></i></a></li>
        <li class="flex_auto m-r_2"><a href="https://www.linkedin.com/company/american-college-of-cardiology/" target="_blank" class="linkedin social-bar--button block m-b_0 p_3 c_white text_center opacity_7 h:opacity"><i class="fab fa-linkedin"></i></a></li>
        <li class="flex_auto m-r_2"><a href="http://www.youtube.com/user/ACCinTouch" target="_blank" class="youtube social-bar--button block m-b_0 p_3 c_white text_center opacity_7 h:opacity"><i class="fab fa-youtube"></i></a></li>
        <li class="flex_auto m-r_2"><a href="https://play.google.com/store/apps/dev?id=5189912010956845696&hl=en_US" target="_blank" class="google-play social-bar--button block m-b_0 p_3 c_white text_center opacity_7 h:opacity"><i class="fab fa-google-play"></i></a></li>
        <li class="flex_auto m-r_2"><a href="https://apps.apple.com/us/developer/american-college-of-cardiology/id502174543#see-all/i-phonei-pad-apps" target="_blank" class="apple-store social-bar--button block m-b_0 p_3 c_white text_center opacity_7 h:opacity"><i class="fab fa-apple"></i></a></li>
    </ul>
</section>




Styleguide Recipes.Social Links

*/
/*
Social Links Monochrome

The social links can be restyled to be smaller.


Markup:
<section class="social p_4 m-y_2 font_n1 bg_white">
    <ul class="flex social-bar ul_none m_0">
        <li class="flex_shrink m-r_2"><a href="https://twitter.com/accintouch" target="_blank" class="twitter c_shade-n2 bg_shade-4 block h:bg_accent h:c_white m-b_0 p-x_3 p_2 social-bar--button text_center transition_0"><i class="fab fa-square-x-twitter"></i></a></li>
        <li class="flex_shrink m-r_2"><a href="https://www.facebook.com/AmericanCollegeofCardiology" target="_blank" class="facebook c_shade-n2 bg_shade-4 block h:bg_accent h:c_white m-b_0 p-x_3 p_2 social-bar--button text_center transition_0"><i class="fab fa-facebook-square"></i></a></li>
        <li class="flex_shrink m-r_2"><a href="https://www.linkedin.com/company/american-college-of-cardiology/" target="_blank" class="linkedin c_shade-n2 bg_shade-4 block h:bg_accent h:c_white m-b_0 p-x_3 p_2 social-bar--button text_center transition_0"><i class="fab fa-linkedin"></i></a></li>
        <li class="flex_shrink m-r_2"><a href="http://www.youtube.com/user/ACCinTouch" target="_blank" class="youtube c_shade-n2 bg_shade-4 block h:bg_accent h:c_white m-b_0 p-x_3 p_2 social-bar--button text_center transition_0"><i class="fab fa-youtube"></i></a></li>
        <li class="flex_shrink m-r_2"><a href="https://play.google.com/store/apps/dev?id=5189912010956845696&hl=en_US" target="_blank" class="google-play c_shade-n2 bg_shade-4 block h:bg_accent h:c_white m-b_0 p-x_3 p_2 social-bar--button text_center transition_0"><i class="fab fa-google-play"></i></a></li>
        <li class="flex_shrink m-r_2"><a href="https://apps.apple.com/us/developer/american-college-of-cardiology/id502174543#see-all/i-phonei-pad-apps" target="_blank" class="apple-store c_shade-n2 bg_shade-4 block h:bg_accent h:c_white m-b_0 p-x_3 p_2 social-bar--button text_center transition_0"><i class="fab fa-apple"></i></a></li>
    </ul>
</section>




Styleguide Recipes.Social Links.Mono Chrome

*/
/*
Social Links Smaller

The social links can be restyled to be smaller.


Markup:
<section class="social p_4 m-y_2 font_0 max-w_20  bg_white">
    <ul class="flex social-bar ul_none c_white m_0">
        <li class="flex_auto m-r_2"><a href="https://twitter.com/accintouch" target="_blank" class="twitter social-bar--button br_radius block m-b_0 p_2 c_white-8 h:c_white text_center opacity_8 h:opacity"><i class="fab fa-square-x-twitter"></i></a></li>
        <li class="flex_auto m-r_2"><a href="https://www.facebook.com/AmericanCollegeofCardiology" target="_blank" class="facebook social-bar--button br_radius block m-b_0 p_2 c_white-8 h:c_white text_center opacity_8 h:opacity"><i class="fab fa-facebook-square"></i></a></li>
        <li class="flex_auto m-r_2"><a href="https://www.linkedin.com/company/american-college-of-cardiology/" target="_blank" class="linkedin social-bar--button br_radius block m-b_0 p_2 c_white-8 h:c_white text_center opacity_8 h:opacity"><i class="fab fa-linkedin"></i></a></li>
        <li class="flex_auto m-r_2"><a href="http://www.youtube.com/user/ACCinTouch" target="_blank" class="youtube social-bar--button br_radius block m-b_0 p_2 c_white-8 h:c_white text_center opacity_8 h:opacity"><i class="fab fa-youtube"></i></a></li>
        <li class="flex_auto m-r_2"><a href="https://play.google.com/store/apps/dev?id=5189912010956845696&hl=en_US" target="_blank" class="google-play social-bar--button br_radius block m-b_0 p_2 c_white-8 h:c_white text_center opacity_8 h:opacity"><i class="fab fa-google-play"></i></a></li>
        <li class="flex_auto m-r_2"><a href="https://apps.apple.com/us/developer/american-college-of-cardiology/id502174543#see-all/i-phonei-pad-apps" target="_blank" class="apple-store social-bar--button br_radius block m-b_0 p_2 c_white-8 h:c_white text_center opacity_8 h:opacity"><i class="fab fa-apple"></i></a></li>
    </ul>
</section>


Styleguide Recipes.Social Links.Smaller

*/
/*
Stars

Star ratings should be build throughout arches in a more dynamic way but this is an easy level of adding stars. 

Markup:
<ul class="ul_none flex flex_inline star-rating">
    <li class="flex_shrink"> <i class="fas fa-star"></i></li>
    <li class="flex_shrink"> <i class="fas fa-star"></i></li>
    <li class="flex_shrink"> <i class="fas fa-star"></i></li>
    <li class="flex_shrink"> <i class="fas fa-star"></i></li>
    <li class="flex_shrink"> <i class="fas fa-star"></i></li>
</ul>

Weight:0

caution: This item is not finalized and might be subject to change



Styleguide Recipes.InteractiveExtras.Stars
*/
.star-rating {
  color: hsla(var(--secondary-h), calc(var(--secondary-s) - var(--secondary-s) * 0.25), calc(var(--secondary-l) + (100% - var(--secondary-l)) * 0.5), 1);
}
.star-rating.rating-5 li:nth-child(-n+5),.star-rating.rating-4 li:nth-child(-n+4),.star-rating.rating-3 li:nth-child(-n+3),.star-rating.rating-2 li:nth-child(-n+2),.star-rating.rating-1 li:nth-child(-n+1) {
  color: hsla(var(--primary-h), calc(var(--primary-s) + (100% - var(--primary-s)) * 0.015), calc(var(--primary-l) - var(--primary-l) * 0.15), 1);
}

/*
 Design Base

 Arches is design inspired by a pad of paper in the hand.  Subtle Textures and Layer shadows keep the readability very high. 

 Weight: -1000

 Styleguide DesignBase
*/
/*

Fonts 

The ACC is focused on stable, conservative, clean fonts.   Roboto Slab is the standard serif fonts across all products at the ACC.  Muli is the current successor to Open Sans, and Maven is a slightly modern font to give a small level of interests which replaces Raleway, or Lato in other products.

 Styleguide DesignBase.Fonts
*/
/*

Accent Roboto Slab

A beautiful Accent font that shows a complexity and texture to the fonts used in the design. 

<div class=font_accent">
	<h2 class=font_accent group-divide-bottom font--name small-12">
		Roboto Slab
		<span class="sub-line">font-family: "Roboto Slab","Times New Roman","Lucida Bright",Georgia,serif, "slab"</span>
	</h2>
	<div class="font flex">
	<div class="bg_primary c_white flex flex_shrink font_10 justify_center m-r_5 p-x_5 text_center"><span class="flex_auto m_auto inline-block text_center self_center">RS<span></span></span></div>
		<div class="flex_auto font--example">
			<h3 class=font_accent font_6">Accent Font</h3>
			<div class="text-lowercase font_4">a b c d e f g h i j k l m n o p q r s t u v w x y z</div>
			<div class="text-uppercase font_4">a b c d e f g h i j k l m n o p q r s t u v w x y z</div>
			<div class="text-numbers font_4">0 1 2 3 4 5 6 7 8 9</div>
			<div class="text-lowercase font_2">a b c d e f g h i j k l m n o p q r s t u v w x y z</div>
			<div class="text-uppercase font_2">a b c d e f g h i j k l m n o p q r s t u v w x y z</div>
			<div class="text-numbers font_2">0 1 2 3 4 5 6 7 8 9</div>
		</div>
	</div>
</div>

 Weight: -10

 Styleguide DesignBase.Fonts.Accent
*/
/*

Display: Maven Pro

 A Slick font that has a slight interest used for headers and UI. 

<div class="font_display">
	<h2 class="font_display group-divide-bottom font--name small-12">
		Maven Pro
		<span class="sub-line">font-family: "Maven Pro","Muli","Open Sans",Verdana,Helvetica,sans-serif</span>
	</h2>
	<div class="font flex grid-padding-x grid-padding-y">
		<div class="bg_primary c_white flex flex_shrink font_10 justify_center m-r_5 p-x_5 text_center"><span class="flex_auto m_auto inline-block text_center self_center">MP<span></span></span></div>
		<div class="flex_auto font--example">
			<h3 class="font_display">Display Font</h3>
			<div class="text-lowercase font_4">a b c d e f g h i j k l m n o p q r s t u v w x y z</div>
			<div class="text-uppercase font_4">a b c d e f g h i j k l m n o p q r s t u v w x y z</div>
			<div class="text-numbers font_4">0 1 2 3 4 5 6 7 8 9</div>
			<div class="text-lowercase font_2">a b c d e f g h i j k l m n o p q r s t u v w x y z</div>
			<div class="text-uppercase font_2">a b c d e f g h i j k l m n o p q r s t u v w x y z</div>
			<div class="text-numbers font_2">0 1 2 3 4 5 6 7 8 9</div>
		</div>
	</div>
</div>

 Weight: -5

 Styleguide DesignBase.Fonts.Display
*/
/*

Copy: Open Sans

 A clean font for content and text of none UI elements. 

<div class="font_copy">
	<h2 class=" group-divide-bottom font--name small-12">
		"Open Sans"
		<span class="sub-line">font-family: ""Open Sans",-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif"</span>
	</h2>
	<div class="font flex grid-padding-x grid-padding-y">
		<div class="bg_primary c_white flex flex_shrink font_10 justify_center m-r_5 p-x_5 text_center"><span class="flex_auto m_auto inline-block text_center self_center">OS<span></span></span></div>
		<div class="felx_auto font--example">
			<h3 class="">Content Font</h3>
			<div class="text-lowercase font_4">a b c d e f g h i j k l m n o p q r s t u v w x y z</div>
			<div class="text-uppercase font_4">a b c d e f g h i j k l m n o p q r s t u v w x y z</div>
			<div class="text-numbers font_4">0 1 2 3 4 5 6 7 8 9</div>
			<div class="text-lowercase font_2">a b c d e f g h i j k l m n o p q r s t u v w x y z</div>
			<div class="text-uppercase font_2">a b c d e f g h i j k l m n o p q r s t u v w x y z</div>
			<div class="text-numbers font_2">0 1 2 3 4 5 6 7 8 9</div>
		</div>
	</div>
</div>

 Weight: 0

 Styleguide DesignBase.Fonts.Copy
*/
/*

UI: Open Sans

 A clean font for content and text of none UI elements. 

<div class="font_ui">
	<h2 class=" group-divide-bottom font--name small-12">
		"Open Sans"
		<span class="sub-line">font-family: ""Open Sans",-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif"</span>
	</h2>
	<div class="font flex grid-padding-x grid-padding-y">
		<div class="bg_primary c_white flex flex_shrink font_10 justify_center m-r_5 p-x_5 text_center"><span class="flex_auto m_auto inline-block text_center self_center">OS<span></span></span></div>
		<div class="felx_auto font--example">
			<h3 class="">Content Font</h3>
			<div class="text-lowercase font_4">a b c d e f g h i j k l m n o p q r s t u v w x y z</div>
			<div class="text-uppercase font_4">a b c d e f g h i j k l m n o p q r s t u v w x y z</div>
			<div class="text-numbers font_4">0 1 2 3 4 5 6 7 8 9</div>
			<div class="text-lowercase font_2">a b c d e f g h i j k l m n o p q r s t u v w x y z</div>
			<div class="text-uppercase font_2">a b c d e f g h i j k l m n o p q r s t u v w x y z</div>
			<div class="text-numbers font_2">0 1 2 3 4 5 6 7 8 9</div>
		</div>
	</div>
</div>

 Weight: 1

 Styleguide DesignBase.Fonts.UI
*/
/*

Icons: Font Awesome

The American College of Cardiology (ACC) employs Font Awesome icons for its websites and mobile applications. The organization uses either version 4 or version 5 of Font Awesome's icon sets, providing an extensive range of options for the website's visual design and functionality. Despite the release of version 6, there is no current initiative to upgrade due to the breaking changes that come with it. The ACC recognizes that icons convey meaning and has developed an icon dictionary to ensure consistent usage of icons throughout its digital platforms. This approach enhances the user experience by providing clear and concise communication through the use of symbols, while the Font Awesome library enables the ACC to quickly and efficiently incorporate high-quality icons into its digital content.

plus						 - fa-plus					
arrow-right					 - fa-arrow-right					
search						 - fa-search					
envelope					 - fa-envelope				
heart						 - fa-heart					
star						 - fa-star									
user						 - fa-user					


Markup:
<div class="relative br_black-2 br_solid br_1"><div class="flex flex_row"><div class="font_5 cell w-grid_3 text_center p_3 no-underline c_inherit flex_shrink justify_center h:bg_navigation-n3 h:c_white bg_black-1 expanded-click-area"><i class="fas fa-{{modifier_class}}"></i></div><div class="flex_auto p_4 p-y_2 self_center"><span class="c_black-8 h:c_black-9 text font_bold font_display">{{modifier_class}}</span></div></div></div>

MarkupWrapperClasses:


Styleguide DesignBase.IconsTrue
*/
/*

ACC's Blue

$acc-blue            -  #004176; acc

Styleguide DesignBase.Colors.ACC
*/
/*

Theme Colors 

Colors are based off of the ACC Scrub Colors.

map-get($theme-palette, primary)              -  #198dae; primary
map-get($theme-palette, secondary)            -  #676a72; secondary
map-get($theme-palette, shade)           	  - #878585; shade
map-get($theme-palette, accent)               -  #16a385;  accent
map-get($theme-palette, info)                 -  #a3988c; info
map-get($theme-palette, highlight)            -  #7742bd; highlight

Weight:-1000

Styleguide DesignBase.Colors
 */
/*

Action Colors  

Actionable colors used to respond to user inputs and messaging.

map-get($theme-palette, alert)                -  #dd1a1a; alert
map-get($theme-palette, warning)              -  #da8210; warning
map-get($theme-palette, success)              -  #078a2e;  success
map-get($theme-palette, navigation)           -  #2b58c0; navigation

Styleguide DesignBase.Colors.Actions
*/
/*

Color Coding  

Color 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. 

Styleguide DesignBase.Colors.ColorCoding

 */
/*

COR Colors  

(COR) Class of Recommendation is a color collect used in Guideline recommendations.

$cor-green                 	- #6fc284; I
$cor-yellow              	- #ffd44f; IIA
$cor-yellow-orange          - #faa74b; IIA
$cor-orange               	- #f15d4c;III and III-NoHarm
$cor-red               		- #ed1c00; III-harm

Weight: 10

Styleguide DesignBase.Colors.ColorCoding.COR

 */
/*

LOE Colors  

(LOE) level of Evidence is a color collect used in Guideline recommendations.

$loe-dark-blue                 	- rgb(62, 111, 183);LOE A
$loe-mid-blue              		- rgb(101, 156, 211);LOE B-R
$loe-light-blue                	- rgb(161, 193, 230);LOE B-NR
$loe-pale-blue                	- rgb(181, 213, 229); LOE C

Weight: 10

Styleguide DesignBase.Colors.ColorCoding.LOE

 */
/*

Credit Type Color Coding  

Credit Types in the ACC have a specific color coding.

$credit-AAPA                    - #e8c536; AAPA: American Academy of Physician Assistants (AAPA) Category 1 CME Credit  
$credit-ABP                     - #007a5b; ABP-MOC: American Board of Pediatrics   
$credit-ABPMOCII                     - #0b6d4c; ABP-MOC 2: American Board of Pediatrics MOC 2  
$credit-ABPMOCIV                     - #105a3b; ABP-MOC 4: American Board of Pediatrics MOC 4 
$credit-ATCEU                   - #775744; ATCEU: Athletic Trainer Continuing Education Unit   
$credit-CE                      - #a8a8a8; CE: Continuing CCA\Tech Education  
$credit-CME                     - #00a15b; CME: AMA PRA Category 1TM Credit(s)    
$credit-CNE                     - #198dae; CNE: Continuing Nurse Education  
$credit-CNErx                   - #52549e; CNErx: Continuing Nursing Education Pharmaceutical   
$credit-COP                     - #775891; COP: Certificate of Participation  
$credit-CPE                     - #992e2e; CPE: Continuing Pharmacy Education 
$credit-ECME                    - #d16528; ECME: European Board for Accreditation in Cardiology (EBAC) External CME Credit
$credit-IPCE                    - #6c36b3; IPCE: Interprofessional Continuing Education Credit
$credit-MOCII                   - #9a1267; MOC II: ABIM MOC Part II  
$credit-MOCIV                   - #d3248d; MOC IV: ABIM MOC Part IV    

Weight: 0

Styleguide DesignBase.Colors.ColorCoding.Credits

*/
/*

Clinical Pathway Colors  

Each 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.

$pathway-acute-coronary-syndromes 						- #009974;  Acute Coronary Syndromes
$pathway-arrhythmias-EP 								- #005b37;  arrhythmias and Clinical EP
$pathway-congenital-heart-disease 						- #fdb918;  Congenital Heart Disease
$pathway-ecg-stress-test 								- #d9691f;  Standard ECG, Stress Test
$pathway-heart-failure 									- #410d49;  Heart Failure and Cardiomyopathies
$pathway-invasive-cardiology 							- #c8b02f;  Invasive Cardiology Angiography and Intervention
$pathway-noninvasive-cardiology 						- #947b33;  Noninvasive Cardiology
$pathway-pandemic 										- #8e2582;  Pandemic "Covid"
$pathway-pericardial 									- #0079ad;  pericardial Disease
$pathway-prevention 									- #a01d51;  Prevention
$pathway-pulmonary-hypertension 						- #d60e7e;  Pulmonary Hypertension and Venous Thromboembolic Disease
$pathway-special 										- #00b6f1;  Special
$pathway-stable-ischemic-heart-disease 				- #0f3e65;  Stable ischemic Heart Disease
$pathway-valvular-heart-disease 						- #4f4190;  Valvular Heart Disease
$pathway-vascular-medicine 								- #ae171c;  Vascular Medicine

Weight: -1

Styleguide DesignBase.Colors.ColorCoding.Pathways

*/
/*

Registry CC

Credit Type Color codes in the ACC have a specific color coding.

$registry-cpmi                  -   #f22418;    Chest Pain MI Registry
$registry-afib                  -   #ffb300;    AFib Ablation Registry
$registry-cathpci               -   #0086d5;    CathPCI Registry
$registry-icd                   -   #80b800;    ICD Registry
$registry-impact                -   #4e1f73;    IMPACT Registry
$registry-pinnacle-primary      -   #0e4f1b;    PINNACLE Registry (Primary)
$registry-pinnacle-accent       -   #b3c4c4;    PINNACLE Registry (Accent)
$registry-focus                 -   #d6560d;    Patient Navigator Focus MI
$registry-pcibleeding           -   #c0268e;    Reducing Risk PCI Bleeding
$registry-laao                  -   #00667a;    LAAO Registry
$registry-pvi                   -   #00947f;    PVI Registry
$registry-auxdata               -   #04adad;    Auxiliar Data Collection
$registry-ststvt                -   #a20062;    STS ACC TVT Registry
$registry-diabetes              -   #7893b8;    Diabetes Collaborative 

Weight: 2000

Styleguide  DesignBase.Colors.ColorCoding.Registry

*/
/*

Journal

Journals of JACC have specific branding colors.

$journal-jc             - #002e5a;                       Journal of the American College of Cardiology: (JC)
$journal-adv            - #0000FF;                      JACC: Advances: (JC-ADV)
$journal-asia           - #ec2939;                     JACC: Asia: (JC-ASIA)
$journal-tran           - #1788c2;                     JACC: Basic to Translational Science: (JC-TRAN)
$journal-cvonc          - #00ae81;                    JACC: CardioOncology: (JC-CVONC)
$journal-case           - #f37321;                     JACC: Case Reports: (JC-CASE)
$journal-ep             - #8a5e96;                       JACC: Clinical Electrophysiology: (JC-EP)
$journal-hf             - #991326;                       JACC: Heart Failure: (JC-HF)
$journal-invt             - #038e92;                   JACC: Cardiovascular Interventions: (JC-INVT)
$journal-imag            - #c18a0e;                    JACC: Cardiovascular Imaging: (JC-IMAG)


Weight: 2000

Styleguide  DesignBase.Colors.ColorCoding.Journals

*/
/*

Social Network Colors  

Each 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.

$twitter            -   #000;  		twitter     
$facebook           -   #3b5998;  	facebook    
$linkedin           -   #007bb6;  	linkedin    
$apple-store        -   #ea4cc0;  	apple-store 
$google-play        -   #689f38;  	google-play 
$youtube            -   #bb0000;  	youtube     



Weight: 100

Styleguide DesignBase.Colors.ColorCoding.Social Networks

*/
/*
	Textures

	All 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. 

	.texture_light                       		- 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. 
	.texture_medium            					- medium texture are used for area that are hidden away.  Collapsable navs, areas, or sidebars ususaly use the medium texture.
	.texture_dust            					- 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.
	.texture_dark              					- This texture predominatly used on the footer. Its rich black will alway requrie reversed text and buttons to be readable.  
	.texture_cross            					- A mostly transparent cross texture used for alternating rows of content when a little extra texture is needed.
	.texture_disabled              				- This texture is used to paint disabled buttons and ui items giving it a greyed and X'ed out appearand. 

	Markup:
	<div class="{{modifier_class}} p_5 border-c_black-8 border-width_1 border_solid text_center bg_primary-4">{{modifier_class}} with a light primary color background</div>

	Styleguide DesignBase.Textures

 */
/*

primary: Color Variations 

The Modified versions of the primary color from this theme

Markup:

<div
	class="grid gap-x_2 gap-y_2 template-x_15 font_n1 p_4 bg_primary"
>
		<div class='p_3 bg_primary-n5'><h2 class= c_white >primary-n5</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #04151a;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#04151a</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 4, 21, 26 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>4, 21, 26</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 193.288590604deg ,77.0100502513%, 5.8529411765% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>193.288590604deg ,77.0100502513%, 5.8529411765%</span> </li> </ul> </div>
		<div class='p_3 bg_primary-n4'><h2 class= c_white >primary-n4</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #082a34;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#082a34</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 8, 42, 52 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>8, 42, 52</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 193.288590604deg ,76.6331658291%, 11.7058823529% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>193.288590604deg ,76.6331658291%, 11.7058823529%</span> </li> </ul> </div>
		<div class='p_3 bg_primary-n3'><h2 class= c_white >primary-n3</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #0d4757;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#0d4757</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 13, 71, 87 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>13, 71, 87</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 193.288590604deg ,76.1306532663%, 19.5098039216% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>193.288590604deg ,76.1306532663%, 19.5098039216%</span> </li> </ul> </div>
		<div class='p_3 bg_primary-n2'><h2 class= c_white >primary-n2</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #12637a;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#12637a</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 18, 99, 122 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>18, 99, 122</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 193.288590604deg ,75.6281407035%, 27.3137254902% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>193.288590604deg ,75.6281407035%, 27.3137254902%</span> </li> </ul> </div>
		<div class='p_3 bg_primary-n1'><h2 class= c_white >primary-n1</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #157894;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#157894</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 21, 120, 148 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>21, 120, 148</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 193.288590604deg ,75.2512562814%, 33.1666666667% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>193.288590604deg ,75.2512562814%, 33.1666666667%</span> </li> </ul> </div>
		<div class='p_3 bg_primary-0'><h2 class= c_white >primary-0</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #198dae;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#198dae</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 25, 141, 174 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>25, 141, 174</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 193.288590604deg, 74.8743718593%, 39.0196078431% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>193.288590604deg, 74.8743718593%, 39.0196078431%</span> </li> </ul> </div>
		<div class='p_3 bg_primary-1'><h2 class= c_black >primary-1</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #1da3c9;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#1da3c9</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 29, 163, 201 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>29, 163, 201</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 193.288590604deg ,71.1306532663%, 45.1176470588% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>193.288590604deg ,71.1306532663%, 45.1176470588%</span> </li> </ul> </div>
		<div class='p_3 bg_primary-2'><h2 class= c_black >primary-2</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #33bbe2;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#33bbe2</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 51, 187, 226 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>51, 187, 226</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 193.288590604deg ,65.5150753769%, 54.2647058824% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>193.288590604deg ,65.5150753769%, 54.2647058824%</span> </li> </ul> </div>
		<div class='p_3 bg_primary-3'><h2 class= c_black >primary-3</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #77d2eb;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#77d2eb</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 119, 210, 235 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>119, 210, 235</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 193.288590604deg ,56.1557788945%, 69.5098039216% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>193.288590604deg ,56.1557788945%, 69.5098039216%</span> </li> </ul> </div>
		<div class='p_3 bg_primary-4'><h2 class= c_black >primary-4</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #bbe8f5;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#bbe8f5</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 187, 232, 245 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>187, 232, 245</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 193.288590604deg ,46.7964824121%, 84.7549019608% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>193.288590604deg ,46.7964824121%, 84.7549019608%</span> </li> </ul> </div>
		<div class='p_3 bg_primary-5'><h2 class= c_black >primary-5</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #e4f6fb;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#e4f6fb</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 228, 246, 251 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>228, 246, 251</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 193.288590604deg ,41.1809045226%, 93.9019607843% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>193.288590604deg ,41.1809045226%, 93.9019607843%</span> </li> </ul> </div>
</div>




 HideCodeBlock: display_none 

Weight:0

Styleguide DesignBase.CrayonBox.primary

*/
/*

secondary: Color Variations 

The Modified versions of the secondary color from this theme

Markup:

<div
	class="grid gap-x_2 gap-y_2 template-x_15 font_n1 p_4 bg_secondary"
>
		<div class='p_3 bg_secondary-n5'><h2 class= c_white >secondary-n5</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #0f1011;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#0f1011</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 15, 16, 17 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>15, 16, 17</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 223.6363636364deg ,13.1382488479%, 6.3823529412% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>223.6363636364deg ,13.1382488479%, 6.3823529412%</span> </li> </ul> </div>
		<div class='p_3 bg_secondary-n4'><h2 class= c_white >secondary-n4</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #1f2022;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#1f2022</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 31, 32, 34 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>31, 32, 34</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 223.6363636364deg ,11.7142857143%, 12.7647058824% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>223.6363636364deg ,11.7142857143%, 12.7647058824%</span> </li> </ul> </div>
		<div class='p_3 bg_secondary-n3'><h2 class= c_white >secondary-n3</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #343539;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#343539</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 52, 53, 57 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>52, 53, 57</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 223.6363636364deg ,9.8156682028%, 21.2745098039% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>223.6363636364deg ,9.8156682028%, 21.2745098039%</span> </li> </ul> </div>
		<div class='p_3 bg_secondary-n2'><h2 class= c_white >secondary-n2</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #484a50;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#484a50</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 72, 74, 80 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>72, 74, 80</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 223.6363636364deg ,7.9170506912%, 29.7843137255% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>223.6363636364deg ,7.9170506912%, 29.7843137255%</span> </li> </ul> </div>
		<div class='p_3 bg_secondary-n1'><h2 class= c_white >secondary-n1</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #585a61;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#585a61</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 88, 90, 97 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>88, 90, 97</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 223.6363636364deg ,6.4930875576%, 36.1666666667% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>223.6363636364deg ,6.4930875576%, 36.1666666667%</span> </li> </ul> </div>
		<div class='p_3 bg_secondary-0'><h2 class= c_white >secondary-0</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #676a72;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#676a72</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 103, 106, 114 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>103, 106, 114</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 223.6363636364deg, 5.069124424%, 42.5490196078% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>223.6363636364deg, 5.069124424%, 42.5490196078%</span> </li> </ul> </div>
		<div class='p_3 bg_secondary-1'><h2 class= c_black >secondary-1</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #757881;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#757881</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 117, 120, 129 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>117, 120, 129</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 223.6363636364deg ,4.8156682028%, 48.2941176471% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>223.6363636364deg ,4.8156682028%, 48.2941176471%</span> </li> </ul> </div>
		<div class='p_3 bg_secondary-2'><h2 class= c_black >secondary-2</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #8c8f97;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#8c8f97</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 140, 143, 151 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>140, 143, 151</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 223.6363636364deg ,4.435483871%, 56.9117647059% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>223.6363636364deg ,4.435483871%, 56.9117647059%</span> </li> </ul> </div>
		<div class='p_3 bg_secondary-3'><h2 class= c_black >secondary-3</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #b2b4b9;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#b2b4b9</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 178, 180, 185 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>178, 180, 185</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 223.6363636364deg ,3.801843318%, 71.2745098039% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>223.6363636364deg ,3.801843318%, 71.2745098039%</span> </li> </ul> </div>
		<div class='p_3 bg_secondary-4'><h2 class= c_black >secondary-4</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #d9dadc;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#d9dadc</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 217, 218, 220 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>217, 218, 220</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 223.6363636364deg ,3.168202765%, 85.637254902% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>223.6363636364deg ,3.168202765%, 85.637254902%</span> </li> </ul> </div>
		<div class='p_3 bg_secondary-5'><h2 class= c_black >secondary-5</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #f0f0f1;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#f0f0f1</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 240, 240, 241 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>240, 240, 241</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 223.6363636364deg ,2.7880184332%, 94.2549019608% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>223.6363636364deg ,2.7880184332%, 94.2549019608%</span> </li> </ul> </div>
</div>




 HideCodeBlock: display_none 

Weight:0

Styleguide DesignBase.CrayonBox.secondary

*/
/*

success: Color Variations 

The Modified versions of the success color from this theme

Markup:

<div
	class="grid gap-x_2 gap-y_2 template-x_15 font_n1 p_4 bg_success"
>
		<div class='p_3 bg_success-n5'><h2 class= c_white >success-n5</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #011507;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#011507</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 1, 21, 7 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>1, 21, 7</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 137.8625954198deg ,91.1655172414%, 4.2647058824% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>137.8625954198deg ,91.1655172414%, 4.2647058824%</span> </li> </ul> </div>
		<div class='p_3 bg_success-n4'><h2 class= c_white >success-n4</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #02290e;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#02290e</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 2, 41, 14 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>2, 41, 14</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 137.8625954198deg ,91.0206896552%, 8.5294117647% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>137.8625954198deg ,91.0206896552%, 8.5294117647%</span> </li> </ul> </div>
		<div class='p_3 bg_success-n3'><h2 class= c_white >success-n3</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #044517;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#044517</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 4, 69, 23 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>4, 69, 23</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 137.8625954198deg ,90.8275862069%, 14.2156862745% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>137.8625954198deg ,90.8275862069%, 14.2156862745%</span> </li> </ul> </div>
		<div class='p_3 bg_success-n2'><h2 class= c_white >success-n2</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #056120;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#056120</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 5, 97, 32 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>5, 97, 32</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 137.8625954198deg ,90.6344827586%, 19.9019607843% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>137.8625954198deg ,90.6344827586%, 19.9019607843%</span> </li> </ul> </div>
		<div class='p_3 bg_success-n1'><h2 class= c_white >success-n1</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #067527;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#067527</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 6, 117, 39 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>6, 117, 39</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 137.8625954198deg ,90.4896551724%, 24.1666666667% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>137.8625954198deg ,90.4896551724%, 24.1666666667%</span> </li> </ul> </div>
		<div class='p_3 bg_success-0'><h2 class= c_white >success-0</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #078a2e;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#078a2e</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 7, 138, 46 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>7, 138, 46</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 137.8625954198deg, 90.3448275862%, 28.431372549% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>137.8625954198deg, 90.3448275862%, 28.431372549%</span> </li> </ul> </div>
		<div class='p_3 bg_success-1'><h2 class= c_black >success-1</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #09ad3a;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#09ad3a</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 9, 173, 58 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>9, 173, 58</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 137.8625954198deg ,85.8275862069%, 35.5882352941% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>137.8625954198deg ,85.8275862069%, 35.5882352941%</span> </li> </ul> </div>
		<div class='p_3 bg_success-2'><h2 class= c_black >success-2</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #0be14b;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#0be14b</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 11, 225, 75 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>11, 225, 75</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 137.8625954198deg ,79.0517241379%, 46.3235294118% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>137.8625954198deg ,79.0517241379%, 46.3235294118%</span> </li> </ul> </div>
		<div class='p_3 bg_success-3'><h2 class= c_black >success-3</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #51f682;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#51f682</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 81, 246, 130 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>81, 246, 130</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 137.8625954198deg ,67.7586206897%, 64.2156862745% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>137.8625954198deg ,67.7586206897%, 64.2156862745%</span> </li> </ul> </div>
		<div class='p_3 bg_success-4'><h2 class= c_black >success-4</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #a8fbc1;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#a8fbc1</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 168, 251, 193 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>168, 251, 193</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 137.8625954198deg ,56.4655172414%, 82.1078431373% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>137.8625954198deg ,56.4655172414%, 82.1078431373%</span> </li> </ul> </div>
		<div class='p_3 bg_success-5'><h2 class= c_black >success-5</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #dcfde6;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#dcfde6</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 220, 253, 230 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>220, 253, 230</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 137.8625954198deg ,49.6896551724%, 92.8431372549% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>137.8625954198deg ,49.6896551724%, 92.8431372549%</span> </li> </ul> </div>
</div>




 HideCodeBlock: display_none 

Weight:0

Styleguide DesignBase.CrayonBox.success

*/
/*

shade: Color Variations 

The Modified versions of the shade color from this theme

Markup:

<div
	class="grid gap-x_2 gap-y_2 template-x_15 font_n1 p_4 bg_shade"
>
		<div class='p_3 bg_shade-n5'><h2 class= c_white >shade-n5</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #141414;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#141414</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 20, 20, 20 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>20, 20, 20</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 0deg ,9.2561983471%, 7.8823529412% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>0deg ,9.2561983471%, 7.8823529412%</span> </li> </ul> </div>
		<div class='p_3 bg_shade-n4'><h2 class= c_white >shade-n4</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #292828;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#292828</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 41, 40, 40 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>41, 40, 40</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 0deg ,7.7685950413%, 15.7647058824% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>0deg ,7.7685950413%, 15.7647058824%</span> </li> </ul> </div>
		<div class='p_3 bg_shade-n3'><h2 class= c_white >shade-n3</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #444242;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#444242</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 68, 66, 66 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>68, 66, 66</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 0deg ,5.7851239669%, 26.2745098039% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>0deg ,5.7851239669%, 26.2745098039%</span> </li> </ul> </div>
		<div class='p_3 bg_shade-n2'><h2 class= c_white >shade-n2</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #5f5d5d;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#5f5d5d</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 95, 93, 93 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>95, 93, 93</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 0deg ,3.8016528926%, 36.7843137255% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>0deg ,3.8016528926%, 36.7843137255%</span> </li> </ul> </div>
		<div class='p_3 bg_shade-n1'><h2 class= c_white >shade-n1</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #737171;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#737171</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 115, 113, 113 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>115, 113, 113</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 0deg ,2.3140495868%, 44.6666666667% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>0deg ,2.3140495868%, 44.6666666667%</span> </li> </ul> </div>
		<div class='p_3 bg_shade-0'><h2 class= c_white >shade-0</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #878585;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#878585</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 135, 133, 133 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>135, 133, 133</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 0deg, 0.826446281%, 52.5490196078% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>0deg, 0.826446281%, 52.5490196078%</span> </li> </ul> </div>
		<div class='p_3 bg_shade-1'><h2 class= c_black >shade-1</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #939191;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#939191</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 147, 145, 145 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>147, 145, 145</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 0deg ,0.7851239669%, 57.2941176471% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>0deg ,0.7851239669%, 57.2941176471%</span> </li> </ul> </div>
		<div class='p_3 bg_shade-2'><h2 class= c_black >shade-2</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #a5a4a4;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#a5a4a4</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 165, 164, 164 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>165, 164, 164</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 0deg ,0.7231404959%, 64.4117647059% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>0deg ,0.7231404959%, 64.4117647059%</span> </li> </ul> </div>
		<div class='p_3 bg_shade-3'><h2 class= c_black >shade-3</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #c3c2c2;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#c3c2c2</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 195, 194, 194 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>195, 194, 194</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 0deg ,0.6198347107%, 76.2745098039% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>0deg ,0.6198347107%, 76.2745098039%</span> </li> </ul> </div>
		<div class='p_3 bg_shade-4'><h2 class= c_black >shade-4</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #e1e1e1;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#e1e1e1</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 225, 225, 225 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>225, 225, 225</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 0deg ,0.5165289256%, 88.137254902% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>0deg ,0.5165289256%, 88.137254902%</span> </li> </ul> </div>
		<div class='p_3 bg_shade-5'><h2 class= c_black >shade-5</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #f3f3f3;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#f3f3f3</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 243, 243, 243 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>243, 243, 243</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 0deg ,0.4545454545%, 95.2549019608% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>0deg ,0.4545454545%, 95.2549019608%</span> </li> </ul> </div>
</div>




 HideCodeBlock: display_none 

Weight:0

Styleguide DesignBase.CrayonBox.shade

*/
/*

warning: Color Variations 

The Modified versions of the warning color from this theme

Markup:

<div
	class="grid gap-x_2 gap-y_2 template-x_15 font_n1 p_4 bg_warning"
>
		<div class='p_3 bg_warning-n5'><h2 class= c_white >warning-n5</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #211402;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#211402</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 33, 20, 2 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>33, 20, 2</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 33.8613861386deg ,87.4871794872%, 6.8823529412% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>33.8613861386deg ,87.4871794872%, 6.8823529412%</span> </li> </ul> </div>
		<div class='p_3 bg_warning-n4'><h2 class= c_white >warning-n4</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #412705;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#412705</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 65, 39, 5 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>65, 39, 5</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 33.8613861386deg ,87.2820512821%, 13.7647058824% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>33.8613861386deg ,87.2820512821%, 13.7647058824%</span> </li> </ul> </div>
		<div class='p_3 bg_warning-n3'><h2 class= c_white >warning-n3</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #6d4108;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#6d4108</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 109, 65, 8 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>109, 65, 8</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 33.8613861386deg ,87.0085470085%, 22.9411764706% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>33.8613861386deg ,87.0085470085%, 22.9411764706%</span> </li> </ul> </div>
		<div class='p_3 bg_warning-n2'><h2 class= c_white >warning-n2</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #995b0b;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#995b0b</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 153, 91, 11 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>153, 91, 11</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 33.8613861386deg ,86.735042735%, 32.1176470588% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>33.8613861386deg ,86.735042735%, 32.1176470588%</span> </li> </ul> </div>
		<div class='p_3 bg_warning-n1'><h2 class= c_white >warning-n1</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #b96f0e;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#b96f0e</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 185, 111, 14 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>185, 111, 14</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 33.8613861386deg ,86.5299145299%, 39% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>33.8613861386deg ,86.5299145299%, 39%</span> </li> </ul> </div>
		<div class='p_3 bg_warning-0'><h2 class= c_white >warning-0</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #da8210;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#da8210</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 218, 130, 16 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>218, 130, 16</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 33.8613861386deg, 86.3247863248%, 45.8823529412% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>33.8613861386deg, 86.3247863248%, 45.8823529412%</span> </li> </ul> </div>
		<div class='p_3 bg_warning-1'><h2 class= c_black >warning-1</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #ee9118;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#ee9118</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 238, 145, 24 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>238, 145, 24</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 33.8613861386deg ,82.0085470085%, 51.2941176471% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>33.8613861386deg ,82.0085470085%, 51.2941176471%</span> </li> </ul> </div>
		<div class='p_3 bg_warning-2'><h2 class= c_black >warning-2</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #f1a33e;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#f1a33e</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 241, 163, 62 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>241, 163, 62</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 33.8613861386deg ,75.5341880342%, 59.4117647059% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>33.8613861386deg ,75.5341880342%, 59.4117647059%</span> </li> </ul> </div>
		<div class='p_3 bg_warning-3'><h2 class= c_black >warning-3</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #f6c27e;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#f6c27e</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 246, 194, 126 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>246, 194, 126</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 33.8613861386deg ,64.7435897436%, 72.9411764706% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>33.8613861386deg ,64.7435897436%, 72.9411764706%</span> </li> </ul> </div>
		<div class='p_3 bg_warning-4'><h2 class= c_black >warning-4</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #fae0bf;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#fae0bf</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 250, 224, 191 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>250, 224, 191</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 33.8613861386deg ,53.952991453%, 86.4705882353% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>33.8613861386deg ,53.952991453%, 86.4705882353%</span> </li> </ul> </div>
		<div class='p_3 bg_warning-5'><h2 class= c_black >warning-5</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #fdf3e5;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#fdf3e5</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 253, 243, 229 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>253, 243, 229</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 33.8613861386deg ,47.4786324786%, 94.5882352941% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>33.8613861386deg ,47.4786324786%, 94.5882352941%</span> </li> </ul> </div>
</div>




 HideCodeBlock: display_none 

Weight:0

Styleguide DesignBase.CrayonBox.warning

*/
/*

alert: Color Variations 

The Modified versions of the alert color from this theme

Markup:

<div
	class="grid gap-x_2 gap-y_2 template-x_15 font_n1 p_4 bg_alert"
>
		<div class='p_3 bg_alert-n5'><h2 class= c_white >alert-n5</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #210404;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#210404</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 33, 4, 4 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>33, 4, 4</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 0deg ,80.7368421053%, 7.2647058824% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>0deg ,80.7368421053%, 7.2647058824%</span> </li> </ul> </div>
		<div class='p_3 bg_alert-n4'><h2 class= c_white >alert-n4</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #420808;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#420808</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 66, 8, 8 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>66, 8, 8</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 0deg ,80.4210526316%, 14.5294117647% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>0deg ,80.4210526316%, 14.5294117647%</span> </li> </ul> </div>
		<div class='p_3 bg_alert-n3'><h2 class= c_white >alert-n3</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #6f0d0d;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#6f0d0d</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 111, 13, 13 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>111, 13, 13</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 0deg ,80%, 24.2156862745% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>0deg ,80%, 24.2156862745%</span> </li> </ul> </div>
		<div class='p_3 bg_alert-n2'><h2 class= c_white >alert-n2</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #9b1212;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#9b1212</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 155, 18, 18 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>155, 18, 18</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 0deg ,79.5789473684%, 33.9019607843% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>0deg ,79.5789473684%, 33.9019607843%</span> </li> </ul> </div>
		<div class='p_3 bg_alert-n1'><h2 class= c_white >alert-n1</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #bc1616;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#bc1616</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 188, 22, 22 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>188, 22, 22</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 0deg ,79.2631578947%, 41.1666666667% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>0deg ,79.2631578947%, 41.1666666667%</span> </li> </ul> </div>
		<div class='p_3 bg_alert-0'><h2 class= c_white >alert-0</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #dd1a1a;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#dd1a1a</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 221, 26, 26 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>221, 26, 26</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 0deg, 78.9473684211%, 48.431372549% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>0deg, 78.9473684211%, 48.431372549%</span> </li> </ul> </div>
		<div class='p_3 bg_alert-1'><h2 class= c_black >alert-1</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #e62b2b;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#e62b2b</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 230, 43, 43 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>230, 43, 43</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 0deg ,75%, 53.5882352941% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>0deg ,75%, 53.5882352941%</span> </li> </ul> </div>
		<div class='p_3 bg_alert-2'><h2 class= c_black >alert-2</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #ea4f4f;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#ea4f4f</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 234, 79, 79 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>234, 79, 79</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 0deg ,69.0789473684%, 61.3235294118% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>0deg ,69.0789473684%, 61.3235294118%</span> </li> </ul> </div>
		<div class='p_3 bg_alert-3'><h2 class= c_black >alert-3</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #f18989;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#f18989</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 241, 137, 137 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>241, 137, 137</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 0deg ,59.2105263158%, 74.2156862745% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>0deg ,59.2105263158%, 74.2156862745%</span> </li> </ul> </div>
		<div class='p_3 bg_alert-4'><h2 class= c_black >alert-4</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #f8c4c4;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#f8c4c4</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 248, 196, 196 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>248, 196, 196</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 0deg ,49.3421052632%, 87.1078431373% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>0deg ,49.3421052632%, 87.1078431373%</span> </li> </ul> </div>
		<div class='p_3 bg_alert-5'><h2 class= c_black >alert-5</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #fce7e7;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#fce7e7</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 252, 231, 231 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>252, 231, 231</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 0deg ,43.4210526316%, 94.8431372549% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>0deg ,43.4210526316%, 94.8431372549%</span> </li> </ul> </div>
</div>




 HideCodeBlock: display_none 

Weight:0

Styleguide DesignBase.CrayonBox.alert

*/
/*

navigation: Color Variations 

The Modified versions of the navigation color from this theme

Markup:

<div
	class="grid gap-x_2 gap-y_2 template-x_15 font_n1 p_4 bg_navigation"
>
		<div class='p_3 bg_navigation-n5'><h2 class= c_white >navigation-n5</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #060d1d;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#060d1d</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 6, 13, 29 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>6, 13, 29</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 221.8791946309deg ,66.514893617%, 6.9117647059% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>221.8791946309deg ,66.514893617%, 6.9117647059%</span> </li> </ul> </div>
		<div class='p_3 bg_navigation-n4'><h2 class= c_white >navigation-n4</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #0d1a3a;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#0d1a3a</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 13, 26, 58 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>13, 26, 58</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 221.8791946309deg ,65.9659574468%, 13.8235294118% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>221.8791946309deg ,65.9659574468%, 13.8235294118%</span> </li> </ul> </div>
		<div class='p_3 bg_navigation-n3'><h2 class= c_white >navigation-n3</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #162c60;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#162c60</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 22, 44, 96 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>22, 44, 96</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 221.8791946309deg ,65.2340425532%, 23.0392156863% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>221.8791946309deg ,65.2340425532%, 23.0392156863%</span> </li> </ul> </div>
		<div class='p_3 bg_navigation-n2'><h2 class= c_white >navigation-n2</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #1e3e86;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#1e3e86</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 30, 62, 134 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>30, 62, 134</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 221.8791946309deg ,64.5021276596%, 32.2549019608% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>221.8791946309deg ,64.5021276596%, 32.2549019608%</span> </li> </ul> </div>
		<div class='p_3 bg_navigation-n1'><h2 class= c_white >navigation-n1</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #254ba3;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#254ba3</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 37, 75, 163 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>37, 75, 163</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 221.8791946309deg ,63.9531914894%, 39.1666666667% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>221.8791946309deg ,63.9531914894%, 39.1666666667%</span> </li> </ul> </div>
		<div class='p_3 bg_navigation-0'><h2 class= c_white >navigation-0</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #2b58c0;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#2b58c0</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 43, 88, 192 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>43, 88, 192</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 221.8791946309deg, 63.4042553191%, 46.0784313725% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>221.8791946309deg, 63.4042553191%, 46.0784313725%</span> </li> </ul> </div>
		<div class='p_3 bg_navigation-1'><h2 class= c_black >navigation-1</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #3564d2;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#3564d2</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 53, 100, 210 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>53, 100, 210</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 221.8791946309deg ,60.2340425532%, 51.4705882353% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>221.8791946309deg ,60.2340425532%, 51.4705882353%</span> </li> </ul> </div>
		<div class='p_3 bg_navigation-2'><h2 class= c_black >navigation-2</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #567ed9;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#567ed9</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 86, 126, 217 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>86, 126, 217</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 221.8791946309deg ,55.4787234043%, 59.5588235294% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>221.8791946309deg ,55.4787234043%, 59.5588235294%</span> </li> </ul> </div>
		<div class='p_3 bg_navigation-3'><h2 class= c_black >navigation-3</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #8fa9e6;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#8fa9e6</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 143, 169, 230 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>143, 169, 230</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 221.8791946309deg ,47.5531914894%, 73.0392156863% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>221.8791946309deg ,47.5531914894%, 73.0392156863%</span> </li> </ul> </div>
		<div class='p_3 bg_navigation-4'><h2 class= c_black >navigation-4</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #c7d4f2;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#c7d4f2</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 199, 212, 242 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>199, 212, 242</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 221.8791946309deg ,39.6276595745%, 86.5196078431% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>221.8791946309deg ,39.6276595745%, 86.5196078431%</span> </li> </ul> </div>
		<div class='p_3 bg_navigation-5'><h2 class= c_black >navigation-5</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #e9eefa;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#e9eefa</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 233, 238, 250 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>233, 238, 250</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 221.8791946309deg ,34.8723404255%, 94.6078431373% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>221.8791946309deg ,34.8723404255%, 94.6078431373%</span> </li> </ul> </div>
</div>




 HideCodeBlock: display_none 

Weight:0

Styleguide DesignBase.CrayonBox.navigation

*/
/*

accent: Color Variations 

The Modified versions of the accent color from this theme

Markup:

<div
	class="grid gap-x_2 gap-y_2 template-x_15 font_n1 p_4 bg_accent"
>
		<div class='p_3 bg_accent-n5'><h2 class= c_white >accent-n5</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #031814;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#031814</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 3, 24, 20 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>3, 24, 20</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 167.2340425532deg ,78.2378378378%, 5.4411764706% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>167.2340425532deg ,78.2378378378%, 5.4411764706%</span> </li> </ul> </div>
		<div class='p_3 bg_accent-n4'><h2 class= c_white >accent-n4</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #073128;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#073128</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 7, 49, 40 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>7, 49, 40</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 167.2340425532deg ,77.8810810811%, 10.8823529412% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>167.2340425532deg ,77.8810810811%, 10.8823529412%</span> </li> </ul> </div>
		<div class='p_3 bg_accent-n3'><h2 class= c_white >accent-n3</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #0b5243;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#0b5243</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 11, 82, 67 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>11, 82, 67</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 167.2340425532deg ,77.4054054054%, 18.137254902% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>167.2340425532deg ,77.4054054054%, 18.137254902%</span> </li> </ul> </div>
		<div class='p_3 bg_accent-n2'><h2 class= c_white >accent-n2</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #0f725d;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#0f725d</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 15, 114, 93 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>15, 114, 93</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 167.2340425532deg ,76.9297297297%, 25.3921568627% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>167.2340425532deg ,76.9297297297%, 25.3921568627%</span> </li> </ul> </div>
		<div class='p_3 bg_accent-n1'><h2 class= c_white >accent-n1</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #138b71;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#138b71</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 19, 139, 113 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>19, 139, 113</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 167.2340425532deg ,76.572972973%, 30.8333333333% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>167.2340425532deg ,76.572972973%, 30.8333333333%</span> </li> </ul> </div>
		<div class='p_3 bg_accent-0'><h2 class= c_white >accent-0</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #16a385;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#16a385</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 22, 163, 133 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>22, 163, 133</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 167.2340425532deg, 76.2162162162%, 36.2745098039% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>167.2340425532deg, 76.2162162162%, 36.2745098039%</span> </li> </ul> </div>
		<div class='p_3 bg_accent-1'><h2 class= c_black >accent-1</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #1ac09c;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#1ac09c</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 26, 192, 156 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>26, 192, 156</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 167.2340425532deg ,72.4054054054%, 42.6470588235% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>167.2340425532deg ,72.4054054054%, 42.6470588235%</span> </li> </ul> </div>
		<div class='p_3 bg_accent-2'><h2 class= c_black >accent-2</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #28e2ba;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#28e2ba</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 40, 226, 186 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>40, 226, 186</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 167.2340425532deg ,66.6891891892%, 52.2058823529% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>167.2340425532deg ,66.6891891892%, 52.2058823529%</span> </li> </ul> </div>
		<div class='p_3 bg_accent-3'><h2 class= c_black >accent-3</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #70ecd1;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#70ecd1</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 112, 236, 209 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>112, 236, 209</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 167.2340425532deg ,57.1621621622%, 68.137254902% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>167.2340425532deg ,57.1621621622%, 68.137254902%</span> </li> </ul> </div>
		<div class='p_3 bg_accent-4'><h2 class= c_black >accent-4</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #b7f5e8;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#b7f5e8</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 183, 245, 232 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>183, 245, 232</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 167.2340425532deg ,47.6351351351%, 84.068627451% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>167.2340425532deg ,47.6351351351%, 84.068627451%</span> </li> </ul> </div>
		<div class='p_3 bg_accent-5'><h2 class= c_black >accent-5</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #e2fbf6;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#e2fbf6</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 226, 251, 246 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>226, 251, 246</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 167.2340425532deg ,41.9189189189%, 93.6274509804% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>167.2340425532deg ,41.9189189189%, 93.6274509804%</span> </li> </ul> </div>
</div>




 HideCodeBlock: display_none 

Weight:0

Styleguide DesignBase.CrayonBox.accent

*/
/*

info: Color Variations 

The Modified versions of the info color from this theme

Markup:

<div
	class="grid gap-x_2 gap-y_2 template-x_15 font_n1 p_4 bg_info"
>
		<div class='p_3 bg_info-n5'><h2 class= c_white >info-n5</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #191714;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#191714</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 25, 23, 20 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>25, 23, 20</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 31.3043478261deg ,18.6666666667%, 8.9117647059% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>31.3043478261deg ,18.6666666667%, 8.9117647059%</span> </li> </ul> </div>
		<div class='p_3 bg_info-n4'><h2 class= c_white >info-n4</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #332e28;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#332e28</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 51, 46, 40 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>51, 46, 40</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 31.3043478261deg ,17.3333333333%, 17.8235294118% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>31.3043478261deg ,17.3333333333%, 17.8235294118%</span> </li> </ul> </div>
		<div class='p_3 bg_info-n3'><h2 class= c_white >info-n3</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #544c43;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#544c43</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 84, 76, 67 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>84, 76, 67</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 31.3043478261deg ,15.5555555556%, 29.7058823529% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>31.3043478261deg ,15.5555555556%, 29.7058823529%</span> </li> </ul> </div>
		<div class='p_3 bg_info-n2'><h2 class= c_white >info-n2</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #766b5e;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#766b5e</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 118, 107, 94 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>118, 107, 94</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 31.3043478261deg ,13.7777777778%, 41.5882352941% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>31.3043478261deg ,13.7777777778%, 41.5882352941%</span> </li> </ul> </div>
		<div class='p_3 bg_info-n1'><h2 class= c_white >info-n1</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #8f8173;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#8f8173</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 143, 129, 115 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>143, 129, 115</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 31.3043478261deg ,12.4444444444%, 50.5% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>31.3043478261deg ,12.4444444444%, 50.5%</span> </li> </ul> </div>
		<div class='p_3 bg_info-0'><h2 class= c_white >info-0</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #a3988c;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#a3988c</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 163, 152, 140 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>163, 152, 140</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 31.3043478261deg, 11.1111111111%, 59.4117647059% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>31.3043478261deg, 11.1111111111%, 59.4117647059%</span> </li> </ul> </div>
		<div class='p_3 bg_info-1'><h2 class= c_black >info-1</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #aca298;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#aca298</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 172, 162, 152 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>172, 162, 152</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 31.3043478261deg ,10.5555555556%, 63.4705882353% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>31.3043478261deg ,10.5555555556%, 63.4705882353%</span> </li> </ul> </div>
		<div class='p_3 bg_info-2'><h2 class= c_black >info-2</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #bab2a9;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#bab2a9</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 186, 178, 169 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>186, 178, 169</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 31.3043478261deg ,9.7222222222%, 69.5588235294% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>31.3043478261deg ,9.7222222222%, 69.5588235294%</span> </li> </ul> </div>
		<div class='p_3 bg_info-3'><h2 class= c_black >info-3</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #d1ccc6;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#d1ccc6</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 209, 204, 198 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>209, 204, 198</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 31.3043478261deg ,8.3333333333%, 79.7058823529% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>31.3043478261deg ,8.3333333333%, 79.7058823529%</span> </li> </ul> </div>
		<div class='p_3 bg_info-4'><h2 class= c_black >info-4</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #e8e5e2;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#e8e5e2</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 232, 229, 226 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>232, 229, 226</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 31.3043478261deg ,6.9444444444%, 89.8529411765% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>31.3043478261deg ,6.9444444444%, 89.8529411765%</span> </li> </ul> </div>
		<div class='p_3 bg_info-5'><h2 class= c_black >info-5</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #f6f5f4;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#f6f5f4</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 246, 245, 244 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>246, 245, 244</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 31.3043478261deg ,6.1111111111%, 95.9411764706% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>31.3043478261deg ,6.1111111111%, 95.9411764706%</span> </li> </ul> </div>
</div>




 HideCodeBlock: display_none 

Weight:0

Styleguide DesignBase.CrayonBox.info

*/
/*

highlight: Color Variations 

The Modified versions of the highlight color from this theme

Markup:

<div
	class="grid gap-x_2 gap-y_2 template-x_15 font_n1 p_4 bg_highlight"
>
		<div class='p_3 bg_highlight-n5'><h2 class= c_white >highlight-n5</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #120a1c;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#120a1c</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 18, 10, 28 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>18, 10, 28</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 265.8536585366deg ,52.6352941176%, 7.5% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>265.8536585366deg ,52.6352941176%, 7.5%</span> </li> </ul> </div>
		<div class='p_3 bg_highlight-n4'><h2 class= c_white >highlight-n4</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #241439;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#241439</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 36, 20, 57 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>36, 20, 57</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 265.8536585366deg ,51.8588235294%, 15% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>265.8536585366deg ,51.8588235294%, 15%</span> </li> </ul> </div>
		<div class='p_3 bg_highlight-n3'><h2 class= c_white >highlight-n3</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #3c215f;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#3c215f</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 60, 33, 95 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>60, 33, 95</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 265.8536585366deg ,50.8235294118%, 25% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>265.8536585366deg ,50.8235294118%, 25%</span> </li> </ul> </div>
		<div class='p_3 bg_highlight-n2'><h2 class= c_white >highlight-n2</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #532e84;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#532e84</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 83, 46, 132 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>83, 46, 132</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 265.8536585366deg ,49.7882352941%, 35% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>265.8536585366deg ,49.7882352941%, 35%</span> </li> </ul> </div>
		<div class='p_3 bg_highlight-n1'><h2 class= c_white >highlight-n1</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #6538a1;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#6538a1</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 101, 56, 161 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>101, 56, 161</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 265.8536585366deg ,49.0117647059%, 42.5% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>265.8536585366deg ,49.0117647059%, 42.5%</span> </li> </ul> </div>
		<div class='p_3 bg_highlight-0'><h2 class= c_white >highlight-0</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #7742bd;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#7742bd</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 119, 66, 189 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>119, 66, 189</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 265.8536585366deg, 48.2352941176%, 50% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>265.8536585366deg, 48.2352941176%, 50%</span> </li> </ul> </div>
		<div class='p_3 bg_highlight-1'><h2 class= c_black >highlight-1</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #8555c4;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#8555c4</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 133, 85, 196 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>133, 85, 196</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 265.8536585366deg ,45.8235294118%, 55% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>265.8536585366deg ,45.8235294118%, 55%</span> </li> </ul> </div>
		<div class='p_3 bg_highlight-2'><h2 class= c_black >highlight-2</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #9971ce;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#9971ce</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 153, 113, 206 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>153, 113, 206</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 265.8536585366deg ,42.2058823529%, 62.5% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>265.8536585366deg ,42.2058823529%, 62.5%</span> </li> </ul> </div>
		<div class='p_3 bg_highlight-3'><h2 class= c_black >highlight-3</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #bba1de;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#bba1de</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 187, 161, 222 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>187, 161, 222</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 265.8536585366deg ,36.1764705882%, 75% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>265.8536585366deg ,36.1764705882%, 75%</span> </li> </ul> </div>
		<div class='p_3 bg_highlight-4'><h2 class= c_black >highlight-4</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #ddd0ef;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#ddd0ef</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 221, 208, 239 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>221, 208, 239</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 265.8536585366deg ,30.1470588235%, 87.5% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>265.8536585366deg ,30.1470588235%, 87.5%</span> </li> </ul> </div>
		<div class='p_3 bg_highlight-5'><h2 class= c_black >highlight-5</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #f1ecf8;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#f1ecf8</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 241, 236, 248 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>241, 236, 248</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 265.8536585366deg ,26.5294117647%, 95% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>265.8536585366deg ,26.5294117647%, 95%</span> </li> </ul> </div>
</div>




 HideCodeBlock: display_none 

Weight:0

Styleguide DesignBase.CrayonBox.highlight

*/
/*

acc: Color Variations 

The Modified versions of the acc color from this theme

Markup:

<div
	class="grid gap-x_2 gap-y_2 template-x_15 font_n1 p_4 bg_acc"
>
		<div class='p_3 bg_acc-n5'><h2 class= c_white >acc-n5</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #000a12;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#000a12</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 0, 10, 18 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>0, 10, 18</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 206.9491525424deg ,100%, 3.4705882353% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>206.9491525424deg ,100%, 3.4705882353%</span> </li> </ul> </div>
		<div class='p_3 bg_acc-n4'><h2 class= c_white >acc-n4</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #001423;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#001423</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 0, 20, 35 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>0, 20, 35</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 206.9491525424deg ,100%, 6.9411764706% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>206.9491525424deg ,100%, 6.9411764706%</span> </li> </ul> </div>
		<div class='p_3 bg_acc-n3'><h2 class= c_white >acc-n3</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #00213b;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#00213b</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 0, 33, 59 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>0, 33, 59</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 206.9491525424deg ,100%, 11.568627451% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>206.9491525424deg ,100%, 11.568627451%</span> </li> </ul> </div>
		<div class='p_3 bg_acc-n2'><h2 class= c_white >acc-n2</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #002e53;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#002e53</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 0, 46, 83 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>0, 46, 83</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 206.9491525424deg ,100%, 16.1960784314% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>206.9491525424deg ,100%, 16.1960784314%</span> </li> </ul> </div>
		<div class='p_3 bg_acc-n1'><h2 class= c_white >acc-n1</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #003764;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#003764</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 0, 55, 100 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>0, 55, 100</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 206.9491525424deg ,100%, 19.6666666667% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>206.9491525424deg ,100%, 19.6666666667%</span> </li> </ul> </div>
		<div class='p_3 bg_acc-0'><h2 class= c_white >acc-0</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #004176;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#004176</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 0, 65, 118 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>0, 65, 118</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 206.9491525424deg, 100%, 23.137254902% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>206.9491525424deg, 100%, 23.137254902%</span> </li> </ul> </div>
		<div class='p_3 bg_acc-1'><h2 class= c_black >acc-1</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #00579d;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#00579d</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 0, 87, 157 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>0, 87, 157</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 206.9491525424deg ,95%, 30.8235294118% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>206.9491525424deg ,95%, 30.8235294118%</span> </li> </ul> </div>
		<div class='p_3 bg_acc-2'><h2 class= c_black >acc-2</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #0077d8;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#0077d8</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 0, 119, 216 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>0, 119, 216</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 206.9491525424deg ,87.5%, 42.3529411765% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>206.9491525424deg ,87.5%, 42.3529411765%</span> </li> </ul> </div>
		<div class='p_3 bg_acc-3'><h2 class= c_black >acc-3</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #3ba7ff;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#3ba7ff</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 59, 167, 255 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>59, 167, 255</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 206.9491525424deg ,75%, 61.568627451% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>206.9491525424deg ,75%, 61.568627451%</span> </li> </ul> </div>
		<div class='p_3 bg_acc-4'><h2 class= c_black >acc-4</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #9dd3ff;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#9dd3ff</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 157, 211, 255 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>157, 211, 255</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 206.9491525424deg ,62.5%, 80.7843137255% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>206.9491525424deg ,62.5%, 80.7843137255%</span> </li> </ul> </div>
		<div class='p_3 bg_acc-5'><h2 class= c_black >acc-5</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #d8edff;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#d8edff</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 216, 237, 255 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>216, 237, 255</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 206.9491525424deg ,55%, 92.3137254902% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>206.9491525424deg ,55%, 92.3137254902%</span> </li> </ul> </div>
</div>




 HideCodeBlock: display_none 

Weight:0

Styleguide DesignBase.CrayonBox.acc

*/
/*
Crayon Box

This is all of the colors of the theme broken out with its modifications written in hex code.


Weight:0

HideCodeBlock: display_none 

Styleguide DesignBase.CrayonBox
*/
/*Adobe XD Color Map*/
/* $xd-color_primary-0: #198dae*/
/* $xd-color_primary-n5: #04151a*/
/* $xd-color_primary-n4: #082a34*/
/* $xd-color_primary-n3: #0d4757*/
/* $xd-color_primary-n2: #12637a*/
/* $xd-color_primary-n1: #157894*/
/* $xd-color_primary-1: #1da3c9*/
/* $xd-color_primary-2: #33bbe2*/
/* $xd-color_primary-3: #77d2eb*/
/* $xd-color_primary-4: #bbe8f5*/
/* $xd-color_primary-5: #e4f6fb*/
/* $xd-color_secondary-0: #676a72*/
/* $xd-color_secondary-n5: #0f1011*/
/* $xd-color_secondary-n4: #1f2022*/
/* $xd-color_secondary-n3: #343539*/
/* $xd-color_secondary-n2: #484a50*/
/* $xd-color_secondary-n1: #585a61*/
/* $xd-color_secondary-1: #757881*/
/* $xd-color_secondary-2: #8c8f97*/
/* $xd-color_secondary-3: #b2b4b9*/
/* $xd-color_secondary-4: #d9dadc*/
/* $xd-color_secondary-5: #f0f0f1*/
/* $xd-color_success-0: #078a2e*/
/* $xd-color_success-n5: #011507*/
/* $xd-color_success-n4: #02290e*/
/* $xd-color_success-n3: #044517*/
/* $xd-color_success-n2: #056120*/
/* $xd-color_success-n1: #067527*/
/* $xd-color_success-1: #09ad3a*/
/* $xd-color_success-2: #0be14b*/
/* $xd-color_success-3: #51f682*/
/* $xd-color_success-4: #a8fbc1*/
/* $xd-color_success-5: #dcfde6*/
/* $xd-color_shade-0: #878585*/
/* $xd-color_shade-n5: #141414*/
/* $xd-color_shade-n4: #292828*/
/* $xd-color_shade-n3: #444242*/
/* $xd-color_shade-n2: #5f5d5d*/
/* $xd-color_shade-n1: #737171*/
/* $xd-color_shade-1: #939191*/
/* $xd-color_shade-2: #a5a4a4*/
/* $xd-color_shade-3: #c3c2c2*/
/* $xd-color_shade-4: #e1e1e1*/
/* $xd-color_shade-5: #f3f3f3*/
/* $xd-color_warning-0: #da8210*/
/* $xd-color_warning-n5: #211402*/
/* $xd-color_warning-n4: #412705*/
/* $xd-color_warning-n3: #6d4108*/
/* $xd-color_warning-n2: #995b0b*/
/* $xd-color_warning-n1: #b96f0e*/
/* $xd-color_warning-1: #ee9118*/
/* $xd-color_warning-2: #f1a33e*/
/* $xd-color_warning-3: #f6c27e*/
/* $xd-color_warning-4: #fae0bf*/
/* $xd-color_warning-5: #fdf3e5*/
/* $xd-color_alert-0: #dd1a1a*/
/* $xd-color_alert-n5: #210404*/
/* $xd-color_alert-n4: #420808*/
/* $xd-color_alert-n3: #6f0d0d*/
/* $xd-color_alert-n2: #9b1212*/
/* $xd-color_alert-n1: #bc1616*/
/* $xd-color_alert-1: #e62b2b*/
/* $xd-color_alert-2: #ea4f4f*/
/* $xd-color_alert-3: #f18989*/
/* $xd-color_alert-4: #f8c4c4*/
/* $xd-color_alert-5: #fce7e7*/
/* $xd-color_navigation-0: #2b58c0*/
/* $xd-color_navigation-n5: #060d1d*/
/* $xd-color_navigation-n4: #0d1a3a*/
/* $xd-color_navigation-n3: #162c60*/
/* $xd-color_navigation-n2: #1e3e86*/
/* $xd-color_navigation-n1: #254ba3*/
/* $xd-color_navigation-1: #3564d2*/
/* $xd-color_navigation-2: #567ed9*/
/* $xd-color_navigation-3: #8fa9e6*/
/* $xd-color_navigation-4: #c7d4f2*/
/* $xd-color_navigation-5: #e9eefa*/
/* $xd-color_accent-0: #16a385*/
/* $xd-color_accent-n5: #031814*/
/* $xd-color_accent-n4: #073128*/
/* $xd-color_accent-n3: #0b5243*/
/* $xd-color_accent-n2: #0f725d*/
/* $xd-color_accent-n1: #138b71*/
/* $xd-color_accent-1: #1ac09c*/
/* $xd-color_accent-2: #28e2ba*/
/* $xd-color_accent-3: #70ecd1*/
/* $xd-color_accent-4: #b7f5e8*/
/* $xd-color_accent-5: #e2fbf6*/
/* $xd-color_info-0: #a3988c*/
/* $xd-color_info-n5: #191714*/
/* $xd-color_info-n4: #332e28*/
/* $xd-color_info-n3: #544c43*/
/* $xd-color_info-n2: #766b5e*/
/* $xd-color_info-n1: #8f8173*/
/* $xd-color_info-1: #aca298*/
/* $xd-color_info-2: #bab2a9*/
/* $xd-color_info-3: #d1ccc6*/
/* $xd-color_info-4: #e8e5e2*/
/* $xd-color_info-5: #f6f5f4*/
/* $xd-color_highlight-0: #7742bd*/
/* $xd-color_highlight-n5: #120a1c*/
/* $xd-color_highlight-n4: #241439*/
/* $xd-color_highlight-n3: #3c215f*/
/* $xd-color_highlight-n2: #532e84*/
/* $xd-color_highlight-n1: #6538a1*/
/* $xd-color_highlight-1: #8555c4*/
/* $xd-color_highlight-2: #9971ce*/
/* $xd-color_highlight-3: #bba1de*/
/* $xd-color_highlight-4: #ddd0ef*/
/* $xd-color_highlight-5: #f1ecf8*/
/* $xd-color_acc-0: #004176*/
/* $xd-color_acc-n5: #000a12*/
/* $xd-color_acc-n4: #001423*/
/* $xd-color_acc-n3: #00213b*/
/* $xd-color_acc-n2: #002e53*/
/* $xd-color_acc-n1: #003764*/
/* $xd-color_acc-1: #00579d*/
/* $xd-color_acc-2: #0077d8*/
/* $xd-color_acc-3: #3ba7ff*/
/* $xd-color_acc-4: #9dd3ff*/
/* $xd-color_acc-5: #d8edff*/
/*
Interactive Extras

Interactions can be enhanced with toggle icons or loading graphics to show the system is responding to user input.

Styleguide Recipes.InteractiveExtras
*/
.font .font--example {
  background-image: url(http://basehold.it/i/24);
}
.font .font--name {
  color: #000;
}
.font .font--dropcase_2x {
  color: #198dae;
}

/*

Basic HTML

The 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.  

Weight: -100

Styleguide HTML
*/
/*

Reading Typography

Reading typography is a container class to opt into an override of the basic typography from arches. Basic Typography is un-styled and rely on the most basic styles from the browser stylesheets so there is less overriding when making UI but it leaves reading typography lacking. Most ways typography content is added to a site is devoid of hooks to add styles to an element so work around that restriction and to unified styling across reading experiences the "reading-typography" class is used on the parent container.  Please note that the reading typography can still look a bit different look depending on the brand or the framework. <table><thead><tr><th>modifier class</th><th>customization</th><th>usage</th></tr></thead><tbody><tr><td><code>.inherit_color</code></td><td>removes all color rules from colored typography and sets it to inherit.</td><td>inverting a block of typography where all text and headlines should be white.</td></tr><tr><td><code>.font-size_up</code></td><td>shifts all typography up one font size step</td><td>intro blocks of text where the text. Or in articles where you can shift all text up a size.</td></tr><tr><td>`.font-size_down`</td><td>shifts all typography down one font size step.</td><td>citation blocks or boiler plate content where the text should be smaller and less impactful.</td></tr><tr><td><code>.links_dark</code></td><td>turns all links to the dark color standard.</td><td>this is used in junction with the <code>.inherit_color</code> class.</td></tr><tr><td><code>.links_light</code></td><td>turns all links to the light color standard.</td><td>this is used in junction with the <code>.inherit_color</code> class when text is on a dark background.</td></tr></tbody></table><small class="c_highlight block">* there are further advanced features if you want to apply CSS Property Overrides.</small> 

Markup:
<section class="max-w_65 reading-typography m_auto">
<div class="relative">
	<a target="_blank" href="https://css-tricks.com/almanac/selectors/n/not/"><picture class="w_100">
		<source class="w_100" srcset="https://via.placeholder.com/1440x200.png?text=Desktop+Large+wrapped+link" media="(min-width: 1200px)">
		<source class="w_100" srcset="https://via.placeholder.com/1200x200.png?text=Desktop+wrapped+link" media="(min-width: 1024px)">
		<source class="w_100" srcset="https://via.placeholder.com/768x200.png?text=Tablet+wrapped+link" media="(min-width: 768px)">
		<source class="w_100" srcset="https://via.placeholder.com/600x250.png?text=Mobile+wrapped+link" media="(min-width: 400px)"> <source class="w_100" srcset="https://via.placeholder.com/400x300.png?text=Mobile" media="(min-width: 400px)">
		<img src="https://via.placeholder.com/400x300.png?text=Mobile" class="w_100" alt="">
	</picture></a>
    <div class="absolute b_4 r_4 l_4 b_auto:lg t_4:lg r_4:lg r_4:md l_auto:md b_4:md t_4:md justify_center flex flex_row flex_column:md flex_row:lg gap-x_4 gap-y_4">
        <div class="bg_secondary-2 br_1 br_black-3 br_radius br_solid:lg br_none c_white font_medium font_ui gap-x_3 inline-block inline-flex justify_end m-x_2 p_2:lg p_0 relative shadow_overlap-light">
            <span class="font_bold font_ui self_center vertical-align_middle display_none inline:md p-x_3">User Name</span>
            <a class="btn bg_accent-n1 h:bg_accent-n3 br_solid br_black-2 br_1 c_white  h:c_white uppercase shadow_overlap-light font_ui font_bold" href="#">Log Out <i class="fas fa-sign-out p-l_2"></i></a>
        </div>
    </div>
</div>
  <h1>This is the primary heading and there should only be one of these per page</h1>
  <h6>sub heading</h6>
    <p>A small paragraph to <em>emphasis</em> and show <strong>important</strong> bits.</p>
    <ul>
        <li>This is a list item</li>
        <li>So is this - there could be more</li>
        <li>Make sure to style list items to:
            <ul>
                <li>Not forgetting child list items</li>
                <li>Not forgetting child list items</li>
                <li>Not forgetting child list items</li>
                <li>Not forgetting child list items</li>
            </ul>
        </li>
        <li>A couple more</li>
        <li>top level list items</li>
    </ul>
    <p>Don't forget <strong>Ordered lists</strong>:</p>
    <ol>
       <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
       <li>Aliquam tincidunt mauris eu risus.
        <ol>
            <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
            <li>Aliquam tincidunt mauris eu risus.</li>
        </ol>
        </li>
       <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
       <li>Aliquam tincidunt mauris eu risus.
    </li></ol>
    <h2>A sub heading which is not as important as the first, but is quite imporant overall</h2>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
    <table>
    <thead><tr>
            <th>Table Heading</th>
            <th>Table Heading</th>
        </tr></thead>
        <tbody>
        <tr>
            <td>table data</td>
            <td>table data</td>
        </tr>
        <tr>
            <td>table data</td>
            <td>table data</td>
        </tr>
        <tr>
            <td>table data</td>
            <td>table data</td>
        </tr>
        <tr>
            <td>table data</td>
            <td>table data</td>
        </tr>
    </tbody></table>    	
    <h3>A sub heading which is not as important as the second, but should be used with consideration</h3>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
    <blockquote><p>“Ooh - a blockquote! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.”</p></blockquote>
    <h4>A sub heading which is not as important as the second, but should be used with consideration</h4>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
    <pre><code>
#header h1 a { 
    display: block; 
    width: 300px; 
    height: 80px; 
}
</code></pre>
    <h5>A sub heading which is not as important as the second, but should be used with consideration</h5>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
    <dl>
   <dt>Definition list</dt>
   <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna 
	aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea 
	commodo consequat.</dd>
	   <dt>Lorem ipsum dolor sit amet</dt>
	   <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna 
	aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea 
	commodo consequat.</dd>
	</dl>
	<h6>This heading plays a relatively small bit part role, if you use it at all</h6>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<section>

Weight: -9

HideCodeBlock: display_none 

Styleguide HTML.Typography

*/
/*

Sample Typography

This text is used as a lorem content in many of our containers.  

.p_4                                                    - This is the basic typogrpahy from the browser.
.reading-typography.p_4                                 - this is the standard styling for typography of reading content
.reading-typography.font-size_up.p_4                    - This font increased their sizes across all typography in the container.
.reading-typography.font-size_down.p_4                  - This font decreses their sizes across all typography in the container.
.reading-typography.color_inherit.bg_acc.c_white.p_4.links_light    - This removes all color defining styles to make it easer to reverse colors. This sets all typography and borders to inherit their colors.

Markup:
<div class="{{modifier_class}}">
    <h1>Lorem Ipsum</h1>
    <p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. <a href="#random2" target="_blank">Pellentesque</a> sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#random">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
    <h2>Header Level 2</h2>
    <ol>
        <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
        <li>Aliquam tincidunt mauris eu risus.</li>
    </ol>
    <blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>
    <h3>Header Level 3</h3>
    <ul>
        <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
        <li>Aliquam tincidunt mauris eu risus.</li>
    </ul>
    <button class="btn btn-primary">Button</button>
</div>

Weight: -9

HideCodeBlock: display_none 

MarkupWrapperClasses: br_solid br_radius br_black-1 br_1 m_3 max-w_50

Styleguide HTML.Typography.Sample

*/
/*

Basic Typography

Basic Typography is unstyled and relys on the most basic styles from the browser stylesheets so there is less overriding when making UI but it leaves the reading of content text lacking. The overriding styles that are applied to Basic typography is a consistent font treatment (font sizing, font family, and font-weight) and what comes from the baseline frameworks that build the brand.  


Markup:
<h1>Basic Typography: <small>Lorem ipsum dolor sit amet, consectetuer adipiscing 
elit.</small></h1>
<h2>Aenean commodo ligula eget dolor aenean massa</h2>
<h3>Cut sociis natoque penatibus et magnis dis 
parturient montes nascetur ridiculus mus</h3>
<h4>Donec quam felis ultricies nec pellentesque eu 
pretium quis sem nlla consequat massa quis enim</h4>
<h5>Donec pede justo fringilla vel aliquet nec vulputate 
eget arcu</h5>
<h6>In enim justo rhoncus ut imperdiet a venenatis vitae 
justo</h6>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing 
elit. Aenean commodo ligula eget dolor. Aenean massa. 
Cum sociis natoque penatibus et magnis dis parturient 
montes, nascetur ridiculus mus. Donec quam felis, 
ultricies nec, pellentesque eu, pretium quis, sem.</p>
<article><p>This paragraph is nested inside an article. It contains many different, sometimes useful, <a href="https://www.w3schools.com/tags/">HTML5 tags</a>. Of course there are classics like <em>emphasis</em>, <strong>strong</strong>, and <small>small</small> but there are many others as well. Hover the following text for abbreviation tag: <abbr title="abbreviation">abbr</abbr>. Similarly, you can use acronym tag like this: <acronym title="For The Win">ftw</acronym>. You can define <del>deleted text</del> which often gets replaced with <ins>inserted</ins> text.</p><p>You can also use <kbd>keyboard text</kbd>, which sometimes is styled similarly to the <code>&lt;code&gt;</code> or <samp>samp</samp> tags. Even more specifically, there is a tag just for <var>variables</var>. Not to be mistaken with blockquotes below, the quote tag lets you denote something as <q>quoted text</q>. Lastly don't forget the sub (H<sub>2</sub>O) and sup (E = MC<sup>2</sup>) tags.</p></article>

Weight: -1000

HideCodeBlock: display_none 

MarkupWrapperClasses: max-w_65

Styleguide HTML.Unstyled

*/
/*
ACC Article

Markup:
<div id="reading-typography" class="reading-typography">
	<h1>Article Title</h1>
	<p>Tricuspid regurgitation (TR) is a common valvular disease estimated to affect &gt;1.5 million people in the U.S., with a yearly incidence of about 200,000 and &gt;300,000 patients in the U.S and Europe, respectively.<sup>1</sup> Stated another way, a clinically significant form of this valvular disease affects 4% (or 1 in 25) of patients ages 75 and older.<sup>2</sup></p>
	<p>Despite the current guidelines favoring early tricuspid valve repair, especially when undergoing concomitant left-sided cardiac surgery, most patients with TR receive <a href="#">lifetime medical</a> therapy until intractable right-sided heart failure (HF) and end-organ dysfunction appear.<sup>1</sup> In recent years, multiple studies have drawn attention to the poor prognosis of untreated TR, and demonstrated a clear tendency of excess mortality in patients with increasing severity of TR, highlighting the need for interventional options to improve outcomes.<sup>3</sup></p>
	<div class="aspect_1x1 font_0 max-w_25 relative float_right">
		<div class="absolute flex flex_row l_0">
			<div class="max-w_5">
				<img src="https://www.acc.org//-/media/Non-Clinical/Images/2022/10/CARDIOLOGY/22/Weintraub-Bill-600x600.jpg" alt="Bill Weintraub, MD, MACC" class="br_3 br_accent br_circle br_solid m-b_2 shadow_overlap-bold w_100">
			</div>
			<div class="m-l_n4 max-w_5">
				<img src="https://www.acc.org//-/media/Non-Clinical/Images/2022/10/CARDIOLOGY/22/Weintraub-Bill-600x600.jpg" alt="Bill Weintraub, MD, MACC" class="br_3 br_accent br_circle br_solid m-b_2 shadow_overlap-bold w_100">
			</div>
		</div>
		<div class="circle__inner">
			<div class="aspect_1x1 bg_acc br_circle circle__content circle__wrapper grid items_center justify_center p_4 radial-gradient_custom" style="--origin: at center;">
				<div class="c_white flex flex_column gap-y_4 p-x_5 p-y_4 text_center">
					<i class="c_accent fa-quote-left fas font-size_up-2 m-b_n2"></i><span class="font-size_up lh_2">The future of medicine is increasingly in the hands of those who are effective users of clinical data.</span><i class="c_accent fa-quote-right fas font-size_up-2 m-t_n2"></i>
					<cite class="font-size_down text_right">– <strong>Bill Weintraub, MD, MACC</strong></cite>
				</div>
			</div>
		</div>
	</div>
	<p>TR associated with left-sided valvular or myocardial disease is often a marker for late-stage chronic HF with limited treatment options and an unfavorable overall prognosis. However, isolated TR is also independently associated with excess mortality if left untreated. Thus, TR represents an important public health problem with an unmet clinical need.</p>
	<p>Surgical approaches, either repair or replacement, have been shown to carry a high risk of in-hospital mortality, reaching 10%, without significant improvement over the past 10 years.<sup>4</sup> As transcatheter interventional options for valvular heart disease continue to expand, transcatheter tricuspid valve repair through leaflet approximation or annuloplasty has been investigated.</p>
	<p>Despite studies showing promising results with greater survival and freedom from HF rehospitalization compared with conservative management, its use can be limited by anatomical infeasibility such as large leaflet coaptation gap, perforation, significant leaflet tethering with dense chordae, and leaflet impingement with a cardiac implantable electronic device lead.</p>
	<p>A myriad of investigational transcatheter tricuspid valve replacement (TTVR) devices have emerged as an alternative to surgery and to address this outstanding need, with promising early results related to safety, efficacy and improvements in patients' functional status and quality of life.</p>
	<h3>Orthotopic Valve Replacement</h3>
	<p>Orthotopic TTVR is a form of valve replacement performed by implanting a bioprosthetic valve on an existing tricuspid annulus, in a fashion similar to how it is performed in transcatheter aortic or mitral valve replacement. Several investigational devices are available with a variety of access and anchoring systems.</p>
	<h3>EVOQUE</h3>
	<p>The EVOQUE system (Edwards Lifesciences, Irvine, CA) is a self-expanding bovine pericardial valve mounted on a nitinol frame with a fabric skirt delivered through a transfemoral approach. The perimeter is surrounded by nine anchors that allow stabilization through anchoring to the annulus, leaflets and chords of the tricuspid apparatus. Its compassionate use in 27 patients with severe symptomatic TR at inoperable or high surgical risk has demonstrated 92% success with no periprocedural mortality.<sup>5</sup></p>
	<p>The reduction in TR remained excellent at one year (≤moderate in 96% and ≤mild in 87%) with sustained symptomatic improvement (NYHA I/II in 69% compared with 11% at baseline).<sup>5</sup> All-cause death and HF hospitalization at one year were both at 7% without any deaths being identified as device-related. An early feasibility trial of this device, TRISCEND, is ongoing with an early report of 56 patients demonstrating a similar success rate, reduction in TR and symptomatic improvement.<sup>6</sup></p>
	<h3>Lux-Valve</h3>
	<p>The Lux-Valve (Jenscare Biotechnology Co., Ningbo, China) is a bovine pericardium valve with a self-expanding nitinol atrial disc, self-adaptive fabric skirt, two graspers and an interventricular septal anchor. It is deployed via a minimally invasive right thoracotomy and transatrial approach. First-in-human experience including 31 patients reported a 100% technical success rate with TR reduction to ≤moderate and ≤mild in 100% and 85.2%, respectively at one year. Symptomatic improvement has persisted at one year with 82.8% maintaining NYHA I/II and a 96.8% survival rate.<sup>7</sup> A study investigating the second-generation LuX-Valve Plus delivered through transjugular access is currently underway (NCT05436028).</p>
	<h3>GATE</h3>
	<p>The GATE (NaviGate Cardiac Structures, Inc., Lake Forest, CA) device was the first TTVR performed and is composed of an equine pericardium tricuspid valve mounted on a nitinol alloy stent. Twelve right ventricular tines grasp the native leaflets and 12 right atrial winglets covered by microfiber polyester cloth provide a seal. It is delivered through a right thoracotomy and transatrial access. An early study including five patients reported 100% technical success, with all patients demonstrating TR reduction to ≤mild; however, one patient died before discharge.<sup>8</sup></p>
	<div class="c_white color_inherit float_right lh_2 linear-gradient_custom m-l_5:md m-t_0:md m-y_5 p_4 reading-typography w_100 w_55:md" style="--start-color:hsl(315deg 67% 37%);--end-color:hsl(292deg 68% 24%);">
		<h2>Prominent Stressors For CVD Among LGBTQIA+ Adults</h2>
		<p>Excess cardiovascular disease risk is associated with three categories of stressors, as described by the Minority Stress Model: psychosocial (depression, anxiety, stress); behavioral (diet quality, physical activity, substance use); and physiological (hypothalamic-pituitary-adrenal axis, chronic inflammation, autonomic nervous system&nbsp;dysfunction).<sup>4</sup></p>
		<p>Structural/institutional stressors are also in&nbsp;place. The Behavioral Risk Factor Surveillance System survey 2014-2017 found a higher rate of poverty in LGBT people compared with cisgender heterosexual people <a href="#21.pdf" target="_blank"> vs. 15.7%,&nbsp;respectively</a>).<sup>9</sup></p>
		<p>In 2018, a large portion of LGBTQIA+ individuals lived in states that did not have public accommodation (hospitals and schools) and employment nondiscrimination laws.<sup>10</sup></p>
		<p>For many transgender individuals, employee-sponsored health insurance is often not an option. Many employee-sponsored health insurance programs do not acknowledge partners or spouses with gender identities that align with the insured. More than two-thirds of gender minority adults report having experienced some form of discrimination from clinicians (including the use of abusive language). Roughly a quarter of transgender individuals have been denied health care by clinicians.<sup>11</sup></p>
		<h3>Cardiovascular Disease Risk Factors</h3>
		<p>The data on cardiovascular health in LGBTQIA+ adults are limited because of a lack of research and challenges with study design. In terms of cardiovascular disease risk factors, the use of tobacco products is more likely among LGBTQIA+ adults than cisgender heterosexual adults.<sup>12</sup> Alcohol and illicit drug use disorder, poor mental health and elevated body mass index are greater risk factors among sexual minority women than heterosexual women.<sup>13</sup> Current studies also suggest that decreased sleep duration, which has been associated with higher rates of hypertension, diabetes and cardiovascular disease, was higher among sexual minority women compared with heterosexual women.<sup>14</sup></p>
	</div>
	<h3>Cardiovalve</h3>
	<p>The Cardiovalve (Venus Medtech Inc., Hangzhou, China) is deployed through transfemoral access and consists of a bovine pericardial leaflet mounted on a dual nitinol atrial and ventricular frame creating 24 grasping points for anchoring. The atrial portion of the frame has a covered flange to allow sealing to prevent paravalvular leak. Its compassionate use has been reported in 15 patients demonstrating significant reduction in TR to ≤moderate in 100% and ≤mild in 8% at 30 days.<sup>9</sup> An early feasibility study is currently underway (NCT04100720).</p>
	<h3>Intrepid</h3>
	<p>The Intrepid (Medtronic Plc, Minneapolis, MN) is a transfemoral system with a bovine pericardial valve housed within a nitinol dual stent frame. Early experience with three patients reported technical success in all, and an early feasibility study is currently recruiting patients with a goal to include 15 patients (NCT04433065).<sup>10</sup></p>
	<div class="br-t_4 br_acc br_solid clear_both m-b_4">
		<div class="row m-t_1">
			<div class="col-sm-2 p-t_2">
				<img src="https://www.acc.org//-/media/Non-Clinical/Images/2022/11/CARDIOLOGY/24/Ueyama-Hiroki-600x600.jpg" alt="Hiroki Ueyama, MD" class="w_100 br_circle">
			</div>
			<div class="col-sm-2 p-t_2">
				<img src="https://www.acc.org//-/media/Non-Clinical/Images/2022/11/CARDIOLOGY/24/Byku-Isida-600x600.jpg" alt="Isida Byku, MD, FACC" class="w_100 br_circle">
			</div>
			<div class="col-sm-8">
				<p>This article was authored by <strong>Hiroki Ueyama, MD</strong>, and <strong>Isida Byku, MD, FACC</strong>, from the Division of Cardiology, Emory Structural Heart and Valve Center, Emory University Hospital Midtown, in Atlanta, GA.</p>
			</div>
		</div>
	</div>
	<h2>References</h2>
	<ol>
		<li>Asmarats L, Puri R, Latib A, Navia JL, Rodés-Cabau J. Transcatheter tricuspid valve interventions: Landscape, challenges, and future directions. <em>J Am Coll Cardiol</em> 2018;71:2935-56.</li>
		<li>Topilsky Y, Maltais S, Medina Inojosa J, et al. Burden of Tricuspid regurgitation in patients diagnosed in the community setting. <em>JACC Cardiovasc Imaging</em> 2019;12:433-42.</li>
		<li>Taramasso M, Benfari G, van der Bijl P, et al. Transcatheter versus medical treatment of patients with symptomatic severe tricuspid regurgitation. <em>J Am Coll Cardiol</em> 2019;74:2998-3008.</li>
		<li>Dreyfus J, Flagiello M, Bazire B, et al. Isolated tricuspid valve surgery: Impact of aetiology and clinical presentation on outcomes. <em>Eur Heart J</em> 2020;41:4304-17.</li>
		<li>Webb JG, Chuang AM, Meier D, et al. Transcatheter Tricuspid valve replacement with the evoque system: 1-year outcomes of a multicenter, first-in-human experience. <em>JACC Cardiovasc Interv</em> 2022;15:481-91.</li>
		<li>Kodali S, Hahn RT, George I, et al. Transfemoral tricuspid valve replacement in patients with tricuspid regurgitation: TRISCEND study 30-Day results. <em>JACC Cardiovasc Interv</em> 2022;15:471-80.</li>
		<li>Modine T. Transcatheter tricuspid valve replacement with the LuX-Valve system 1-Year results of a multicenter FIH experience. Presented at TVT 2022, June 8, 2022.</li>
		<li>Hahn RT, George I, Kodali SK, et al. Early Single-site experience with transcatheter tricuspid valve replacement. <em>JACC Cardiovasc Imaging</em> 2019;12:416-29.</li>
		<li>Fam NP. Cardiovalve TTVR update. Presented at TVT 2022, June 8, 2022.</li>
		<li>Bapat VN. The INTREPID Valve for severe tricuspid regurgitation: First-in-man case experience. Presented at TCT 2020.</li>
		<li>Lauten A, Figulla HR, Unbehaun A, et al. Interventional treatment of severe tricuspid regurgitation: Early clinical experience in a multicenter, observational, first-in-man study. <em>Circ Cardiovasc Interv</em> 2018;11:e006061.</li>
		<li>Dreger H, Mattig I, Hewing B, et al. Treatment of severe tricuspid regurgitation in patients with advanced heart failure with CAval Vein Implantation of the Edwards Sapien XT VALve (TRICAVAL): a randomised controlled trial. <em>EuroIntervention</em> 2020;15:1506-13.</li>
		<li>Lauten A, Doenst T, Hamadanchi A, Franz M, Figulla HR. Percutaneous bicaval valve implantation for transcatheter treatment of tricuspid regurgitation: clinical observations and 12-month follow-up. <em>Circ Cardiovasc Interv</em> 2014;7:268-72.</li>
		<li>Wild MG, Lubos E, Cruz-Gonzalez I, et al. Early clinical experience with the TRICENTO bicaval valved stent for treatment of symptomatic severe tricuspid regurgitation: A multicenter registry. <em>Circ Cardiovasc Interv</em> 2022;15:e011302.</li>
		<li>Lurz P, von Bardeleben R, Weber M, et al. Transcatheter edge-to-edge repair for treatment of tricuspid regurgitation. <em>J Am Coll Cardiol</em> 2021;77:229-39.</li>
		<li>Hahn RT. Transcatheter tricuspid valve repair:CLASP TR study one-year results. . Presented at EuroPCR 2022.</li>
		<li>Kodali S, Hahn RT, Eleid MF, et al. Feasibility study of the transcatheter valve repair system for severe tricuspid regurgitation. <em>J Am Coll Cardiol</em> 2021;77:345-56.</li>
		<li>Zack CJ, Fender EA, Chandrashekar P, et al. National trends and outcomes in isolated tricuspid valve surgery. <em>J Am Coll Cardiol</em> 2017;70:2953-60.</li>
	</ol>
</div>

MarkupWrapperClasses: max-w_60

HideCodeBlock: display_none 

Weight:100

Styleguide HTML.RealArticle

*/
/*

Links States

This shows the look and feel of all the states of a text link, color, underline and decoration.

Markup:
<ul class="flex flex_column ul_none">
    <li class="p_3"><a href="#random2">NORMAL: Donec non enim</a></li>
    <li class="p_3"><a href="#random1" class="pseudo-class-hover">HOVER:  Normal Donec non enim</a>
</li>
    <li class="p_3"><a href="#random3" class="pseudo-class-visited">VISITED: Normal Donec non enim</a>
</li>
</ul>


MarkupWrapperClasses: reading-typography

Weight:100

Styleguide HTML.Typography.Links
 */
.container,
.card {
  position: relative;
}

.table td,
.table th {
  text-align: left;
}
.table tbody tr:nth-of-type(odd) {
  background-color: rgba(19, 18, 18, 0.0078431373);
}
.table tr + tr {
  border-top: 1px solid rgba(19, 18, 18, 0.2509803922);
}
.table.unshaded tbody tr:nth-of-type(odd) {
  background-color: unset;
}

/*

Bootstrap

Bootstrap 5 is a complete UI framework with many features. Please familiarize yourself with bootstrap framework as you build. It will give you access to grid, forms and other UI items. https://getbootstrap.com/

Weight: -50

Styleguide  Bootstrap
*/
/*

Typography

The collection of typography when using the bootstrap foundation of arches.

Markup:
<article class="m-y_3" id="typography"><div><div class="bd-example"><p class="display-1">Display 1</p><p class="display-2">Display 2</p><p class="display-3">Display 3</p><p class="display-4">Display 4</p><p class="display-5">Display 5</p><p class="display-6">Display 6</p></div><div class="bd-example"><p class="h1">Heading 1</p><p class="h2">Heading 2</p><p class="h3">Heading 3</p><p class="h4">Heading 4</p><p class="h5">Heading 5</p><p class="h6">Heading 6</p></div><div class="bd-example"><p class="lead">This is a lead paragraph. It stands out from regular paragraphs.</p></div><div class="bd-example"><p>You can use the mark tag to <mark>highlight</mark> text.</p><p><del>This line of text is meant to be treated as deleted text.</del></p><p><s>This line of text is meant to be treated as no longer accurate.</s></p><p><ins>This line of text is meant to be treated as an addition to the document.</ins></p><p><u>This line of text will render as underlined.</u></p><p><small>This line of text is meant to be treated as fine print.</small></p><p><strong>This line rendered as bold text.</strong></p><p><em>This line rendered as italicized text.</em></p></div><div class="bd-example"><blockquote class="blockquote"><p>A well-known quote, contained in a blockquote element.</p><footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer></blockquote></div><div class="bd-example"><ul class="list-unstyled"><li>This is a list.</li><li>It appears completely unstyled.</li><li>Structurally, it's still a list.</li><li>However, this style only applies to immediate child elements.</li><li>Nested lists:<ul><li>are unaffected by this style</li><li>will still show a bullet</li><li>and have appropriate left margin</li></ul></li><li>This may still come in handy in some situations.</li></ul></div><div class="bd-example"><ul class="list-inline"><li class="list-inline-item">This is a list item.</li><li class="list-inline-item">And another one.</li><li class="list-inline-item">But they're displayed inline.</li></ul></div></div></article><article class="m-y_3" id="images"><div class="bd-heading sticky-xl-top m-y_3 bg_white p_3 br-b_1 br_solid br_black-1 shadow_overlap-light m-x_n4 bg_white z_3 p-b_3 self_start mt-5 m-b_3 mt-xl-0 mb-xl-2"><h3>Images</h3><a class="d-flex align-items-center" href="https://getbootstrap.com/docs/5.0/content/images/">Documentation</a></div><div><div class="bd-example"><svg class="bd-placeholder-img bd-placeholder-img-lg img-fluid" width="100%" height="250" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Responsive image" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96"></rect><text x="50%" y="50%" fill="#dee2e6" dy=".3em">Responsive image</text></svg></div><div class="bd-example"><svg class="bd-placeholder-img img-thumbnail" width="200" height="200" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera: 200x200" preserveAspectRatio="xMidYMid slice" focusable="false"><title>A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera</title><rect width="100%" height="100%" fill="#868e96"></rect><text x="50%" y="50%" fill="#dee2e6" dy=".3em">200x200</text></svg></div></div></article>

Weight: 100

Styleguide  Bootstrap.Typography
*/
/*

Tables

The collection of modifications you can do with tables out of the box from Bootstrap Arches.

Markup:
<article class="m-y_3" id="tables"><div class="bd-heading sticky-xl-top m-y_3 bg_white p_3 br-b_1 br_solid br_black-1 shadow_overlap-light m-x_n4 bg_white z_3 p-b_3 self_start mt-5 m-b_3 mt-xl-0 mb-xl-2"><h3>Tables</h3><a class="d-flex align-items-center" href="https://getbootstrap.com/docs/5.0/content/tables/">Documentation</a></div><div><div class="bd-example"><table class="table table-striped"><thead><tr><th scope="col">#</th><th scope="col">First</th><th scope="col">Last</th><th scope="col">Handle</th></tr></thead><tbody><tr><th scope="row">1</th><td>Mark</td><td>Otto</td><td>@mdo</td></tr><tr><th scope="row">2</th><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><th scope="row">3</th><td colspan="2">Larry the Bird</td><td>@twitter</td></tr></tbody></table></div><div class="bd-example"><table class="table table-dark table-borderless"><thead><tr><th scope="col">#</th><th scope="col">First</th><th scope="col">Last</th><th scope="col">Handle</th></tr></thead><tbody><tr><th scope="row">1</th><td>Mark</td><td>Otto</td><td>@mdo</td></tr><tr><th scope="row">2</th><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><th scope="row">3</th><td colspan="2">Larry the Bird</td><td>@twitter</td></tr></tbody></table></div><div class="bd-example"><table class="table table-hover"><thead><tr><th scope="col">Class</th><th scope="col">Heading</th><th scope="col">Heading</th></tr></thead><tbody><tr><th scope="row">Default</th><td>Cell</td><td>Cell</td></tr><tr class="table-primary"><th scope="row">Primary</th><td>Cell</td><td>Cell</td></tr><tr class="table-secondary"><th scope="row">Secondary</th><td>Cell</td><td>Cell</td></tr><tr class="table-success"><th scope="row">Success</th><td>Cell</td><td>Cell</td></tr><tr class="table-alert"><th scope="row">alert</th><td>Cell</td><td>Cell</td></tr><tr class="table-warning"><th scope="row">Warning</th><td>Cell</td><td>Cell</td></tr><tr class="table-info"><th scope="row">Info</th><td>Cell</td><td>Cell</td></tr><tr class="table-light"><th scope="row">Light</th><td>Cell</td><td>Cell</td></tr><tr class="table-dark"><th scope="row">Dark</th><td>Cell</td><td>Cell</td></tr></tbody></table></div><div class="bd-example"><table class="table table-sm table-bordered"><thead><tr><th scope="col">#</th><th scope="col">First</th><th scope="col">Last</th><th scope="col">Handle</th></tr></thead><tbody><tr><th scope="row">1</th><td>Mark</td><td>Otto</td><td>@mdo</td></tr><tr><th scope="row">2</th><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><th scope="row">3</th><td colspan="2">Larry the Bird</td><td>@twitter</td></tr></tbody></table></div></div></article><article class="m-y_3" id="figures"><div class="bd-heading sticky-xl-top m-y_3 bg_white p_3 br-b_1 br_solid br_black-1 shadow_overlap-light m-x_n4 bg_white z_3 p-b_3 self_start mt-5 m-b_3 mt-xl-0 mb-xl-2"><h3>Figures</h3><a class="d-flex align-items-center" href="https://getbootstrap.com/docs/5.0/content/figures/">Documentation</a></div><div><div class="bd-example"><figure class="figure"><svg class="bd-placeholder-img figure-img img-fluid rounded" width="400" height="300" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: 400x300" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96"></rect><text x="50%" y="50%" fill="#dee2e6" dy=".3em">400x300</text></svg><figcaption class="figure-caption">A caption for the above image.</figcaption></figure></div></div></article>



Weight: 500

Styleguide  Bootstrap.Table
*/
/*
Forms

Out of the box bootstrap forms. 

Markup:
<article class="m-y_3"
         id="overview">
    <div
         class="bd-heading sticky-xl-top m-y_3 bg_white p_3 br-b_1 br_solid br_black-1 shadow_overlap-light m-x_n4 align-self-start mt-5 m-b_3 mt-xl-0 mb-xl-2">
        <h3>Overview</h3><a
           class="d-flex align-items-center"
           target="_blank"
           href="https://getbootstrap.com/docs/5.0/forms/overview/">Documentation</a>
    </div>
    <div>
        <div class="bd-example">
            <form>
                <div class="m-b_3"><label
                           for="exampleInputEmail1"
                           class="form-label">Email
                        address</label> <input type="email"
                           class="form-control"
                           id="exampleInputEmail1"
                           aria-describedby="emailHelp">
                    <div id="emailHelp"
                         class="form-text">We'll never share
                        your email with anyone else.</div>
                </div>
                <div class="m-b_3"><label
                           for="exampleInputPassword1"
                           class="form-label">Password</label>
                    <input type="password"
                           class="form-control"
                           id="exampleInputPassword1"></div>
                <div class="m-b_3 form-check"><input
                           type="checkbox"
                           class="form-check-input"
                           id="exampleCheck1"> <label
                           class="form-check-label"
                           for="exampleCheck1">Check me
                        out</label></div>
                <fieldset class="m-b_3">
                    <legend>Radios buttons</legend>
                    <div class="form-check"><input
                               type="radio"
                               name="radios"
                               class="form-check-input"
                               id="exampleRadio1"> <label
                               class="form-check-label"
                               for="exampleRadio1">Default
                            radio</label></div>
                    <div class="m-b_3 form-check"><input
                               type="radio"
                               name="radios"
                               class="form-check-input"
                               id="exampleRadio2"> <label
                               class="form-check-label"
                               for="exampleRadio2">Another
                            radio</label></div>
                </fieldset>
                <div class="m-b_3"><label class="form-label"
                           for="customFile">Upload</label>
                    <input type="file"
                           class="form-control"
                           id="customFile"></div>
                <div class="m-b_3 form-check form-switch">
                    <input class="form-check-input"
                           type="checkbox"
                           id="flexSwitchCheckChecked"
                           checked> <label
                           class="form-check-label"
                           for="flexSwitchCheckChecked">Checked
                        switch checkbox input</label></div>
                <div class="m-b_3"><label for="customRange3"
                           class="form-label">Example
                        range</label> <input type="range"
                           class="form-range"
                           min="0"
                           max="5"
                           step="0.5"
                           id="customRange3"></div><button
                        type="submit"
                        class="btn btn-primary">Submit</button>
            </form>
        </div>
    </div>
</article>
<article class="m-y_3"
         id="disabled-forms">
    <div
         class="bd-heading sticky-xl-top m-y_3 bg_white p_3 br-b_1 br_solid br_black-1 shadow_overlap-light m-x_n4 align-self-start mt-5 m-b_3 mt-xl-0 mb-xl-2">
        <h3>Disabled forms</h3><a
           class="d-flex align-items-center"
           target="_blank"
           href="https://getbootstrap.com/docs/5.0/forms/overview/#disabled-forms">Documentation</a>
    </div>
    <div>
        <div class="bd-example">
            <form>
                <fieldset disabled
                          aria-label="Disabled fieldset example">
                    <div class="m-b_3"><label
                               for="disabledTextInput"
                               class="form-label">Disabled
                            input</label> <input type="text"
                               id="disabledTextInput"
                               class="form-control"
                               placeholder="Disabled input">
                    </div>
                    <div class="m-b_3"><label
                               for="disabledSelect"
                               class="form-label">Disabled
                            select menu</label> <select
                                id="disabledSelect"
                                class="form-select">
                            <option>Disabled select</option>
                        </select></div>
                    <div class="m-b_3">
                        <div class="form-check"><input
                                   class="form-check-input"
                                   type="checkbox"
                                   id="disabledFieldsetCheck"
                                   disabled> <label
                                   class="form-check-label"
                                   for="disabledFieldsetCheck">Can't
                                check this</label></div>
                    </div>
                    <fieldset class="m-b_3">
                        <legend>Disabled radios buttons
                        </legend>
                        <div class="form-check"><input
                                   type="radio"
                                   name="radios"
                                   class="form-check-input"
                                   id="disabledRadio1"
                                   disabled> <label
                                   class="form-check-label"
                                   for="disabledRadio1">Disabled
                                radio</label></div>
                        <div class="m-b_3 form-check"><input
                                   type="radio"
                                   name="radios"
                                   class="form-check-input"
                                   id="disabledRadio2"
                                   disabled> <label
                                   class="form-check-label"
                                   for="disabledRadio2">Another
                                radio</label></div>
                    </fieldset>
                    <div class="m-b_3"><label
                               class="form-label"
                               for="disabledCustomFile">Upload</label>
                        <input type="file"
                               class="form-control"
                               id="disabledCustomFile"
                               disabled></div>
                    <div
                         class="m-b_3 form-check form-switch">
                        <input class="form-check-input"
                               type="checkbox"
                               id="disabledSwitchCheckChecked"
                               checked
                               disabled> <label
                               class="form-check-label"
                               for="disabledSwitchCheckChecked">Disabled
                            checked switch checkbox
                            input</label></div>
                    <div class="m-b_3"><label
                               for="disabledRange"
                               class="form-label">Disabled
                            range</label> <input
                               type="range"
                               class="form-range"
                               min="0"
                               max="5"
                               step="0.5"
                               id="disabledRange"></div>
                    <button type="submit"
                            class="btn btn-primary">Submit</button>
                </fieldset>
            </form>
        </div>
    </div>
</article>
<article class="m-y_3"
         id="sizing">
    <div
         class="bd-heading sticky-xl-top m-y_3 bg_white p_3 br-b_1 br_solid br_black-1 shadow_overlap-light m-x_n4 align-self-start mt-5 m-b_3 mt-xl-0 mb-xl-2">
        <h3>Sizing</h3><a class="d-flex align-items-center"
           target="_blank"
           href="https://getbootstrap.com/docs/5.0/forms/form-control/#sizing">Documentation</a>
    </div>
    <div>
        <div class="bd-example">
            <div class="m-b_3"><input
                       class="form-control form-control-lg"
                       type="text"
                       placeholder=".form-control-lg"
                       aria-label=".form-control-lg example">
            </div>
            <div class="m-b_3"><select
                        class="form-select form-select-lg m-b_3"
                        aria-label=".form-select-lg example">
                    <option selected>Open this select menu
                    </option>
                    <option value="1">One</option>
                    <option value="2">Two</option>
                    <option value="3">Three</option>
                </select></div>
            <div class="m-b_3"><input type="file"
                       class="form-control form-control-lg"
                       aria-label="Large file input example">
            </div>
        </div>
        <div class="bd-example">
            <div class="m-b_3"><input
                       class="form-control form-control-sm"
                       type="text"
                       placeholder=".form-control-sm"
                       aria-label=".form-control-sm example">
            </div>
            <div class="m-b_3"><select
                        class="form-select form-select-sm"
                        aria-label=".form-select-sm example">
                    <option selected>Open this select menu
                    </option>
                    <option value="1">One</option>
                    <option value="2">Two</option>
                    <option value="3">Three</option>
                </select></div>
            <div class="m-b_3"><input type="file"
                       class="form-control form-control-sm"
                       aria-label="Small file input example">
            </div>
        </div>
    </div>
</article>
<article class="m-y_3"
         id="input-group">
    <div
         class="bd-heading sticky-xl-top m-y_3 bg_white p_3 br-b_1 br_solid br_black-1 shadow_overlap-light m-x_n4 align-self-start mt-5 m-b_3 mt-xl-0 mb-xl-2">
        <h3>Input group</h3><a
           class="d-flex align-items-center"
           target="_blank"
           href="https://getbootstrap.com/docs/5.0/forms/input-group/">Documentation</a>
    </div>
    <div>
        <div class="bd-example">
            <div class="input-group m-b_3"><span
                      class="input-group-text"
                      id="basic-addon1">@</span> <input
                       type="text"
                       class="form-control"
                       placeholder="Username"
                       aria-label="Username"
                       aria-describedby="basic-addon1">
            </div>
            <div class="input-group m-b_3"><input type="text"
                       class="form-control"
                       placeholder="Recipient's username"
                       aria-label="Recipient's username"
                       aria-describedby="basic-addon2">
                <span class="input-group-text"
                      id="basic-addon2">@example.com</span>
            </div><label for="basic-url"
                   class="form-label">Your vanity
                URL</label>
            <div class="input-group m-b_3"><span
                      class="input-group-text"
                      id="basic-addon3">https://example.com/users/</span>
                <input type="text"
                       class="form-control"
                       id="basic-url"
                       aria-describedby="basic-addon3">
            </div>
            <div class="input-group m-b_3"><span
                      class="input-group-text">$</span>
                <input type="text"
                       class="form-control"
                       aria-label="Amount (to the nearest dollar)">
                <span class="input-group-text">.00</span>
            </div>
            <div class="input-group"><span
                      class="input-group-text">With
                    textarea</span> <textarea
                          class="form-control"
                          aria-label="With textarea"></textarea>
            </div>
        </div>
    </div>
</article>
<article class="m-y_3"
         id="floating-labels">
    <div
         class="bd-heading sticky-xl-top m-y_3 bg_white p_3 br-b_1 br_solid br_black-1 shadow_overlap-light m-x_n4 align-self-start mt-5 m-b_3 mt-xl-0 mb-xl-2">
        <h3>Floating labels</h3><a
           class="d-flex align-items-center"
           target="_blank"
           href="https://getbootstrap.com/docs/5.0/forms/floating-labels/">Documentation</a>
    </div>
    <div>
        <div class="bd-example">
            <form>
                <div class="form-floating m-b_3 input-group-lg"><input
                           type="email"
                           class="form-control"
                           id="floatingInput"
                           placeholder="name@example.com">
                    <label for="floatingInput">Email
                        address</label></div>
                <div class="form-floating"><input
                           type="password"
                           class="form-control"
                           id="floatingPassword"
                           placeholder="Password"> <label
                           for="floatingPassword">Password</label>
                </div>
            </form>
        </div>
    </div>
</article>
<article class="m-y_3"
         id="validation">
    <div
         class="bd-heading sticky-xl-top m-y_3 bg_white p_3 br-b_1 br_solid br_black-1 shadow_overlap-light m-x_n4 align-self-start mt-5 m-b_3 mt-xl-0 mb-xl-2">
        <h3>Validation</h3><a
           class="d-flex align-items-center"
           target="_blank"
           href="https://getbootstrap.com/docs/5.0/forms/validation/">Documentation</a>
    </div>
    <div>
        <div class="bd-example">
            <form class="row g-3">
                <div class="col-md-4"><label
                           for="validationServer01"
                           class="form-label">First
                        name</label> <input type="text"
                           class="form-control is-valid"
                           id="validationServer01"
                           value="Mark"
                           required>
                    <div class="valid-feedback">Looks good!
                    </div>
                </div>
                <div class="col-md-4"><label
                           for="validationServer02"
                           class="form-label">Last
                        name</label> <input type="text"
                           class="form-control is-valid"
                           id="validationServer02"
                           value="Otto"
                           required>
                    <div class="valid-feedback">Looks good!
                    </div>
                </div>
                <div class="col-md-4"><label
                           for="validationServerUsername"
                           class="form-label">Username</label>
                    <div class="input-group has-validation">
                        <span class="input-group-text"
                              id="inputGroupPrepend3">@</span>
                        <input type="text"
                               class="form-control is-invalid"
                               id="validationServerUsername"
                               aria-describedby="inputGroupPrepend3"
                               required>
                        <div class="invalid-feedback">Please
                            choose a username.</div>
                    </div>
                </div>
                <div class="col-md-6 input-group-lg"><label
                           for="validationServer03"
                           class="form-label">City</label>
                    <input type="text"
                           class="form-control is-invalid"
                           id="validationServer03"
                           required>
                    <div class="invalid-feedback">Please
                        provide a valid city.</div>
                </div>
                <div class="col-md-3"><label
                           for="validationServer04"
                           class="form-label">State</label>
                    <select class="form-select is-invalid"
                            id="validationServer04"
                            required>
                        <option selected
                                disabled
                                value="">Choose...</option>
                        <option>...</option>
                    </select>
                    <div class="invalid-feedback">Please
                        select a valid state.</div>
                </div>
                <div class="col-md-3"><label
                           for="validationServer05"
                           class="form-label">Zip</label>
                    <input type="text"
                           class="form-control is-invalid"
                           id="validationServer05"
                           required>
                    <div class="invalid-feedback">Please
                        provide a valid zip.</div>
                </div>
                <div class="col-12">
                    <div class="form-check"><input
                               class="form-check-input is-invalid"
                               type="checkbox"
                               value=""
                               id="invalidCheck3"
                               required> <label
                               class="form-check-label"
                               for="invalidCheck3">Agree to
                            terms and conditions</label>
                        <div class="invalid-feedback">You
                            must agree before submitting.
                        </div>
                    </div>
                </div>
                <div class="col-12"><button
                            class="btn btn-primary"
                            type="submit">Submit
                        form</button></div>
            </form>
        </div>
    </div>
</article>


Weight: 800

Styleguide  Bootstrap.Forms
*/
/*
Components 

Out of the box html components from bootstrap

Markup:
<section id="components">
    <article class="m-y_3"
             id="accordion">
        <div
             class="bd-heading sticky-xl-top m-y_3 bg_white p_3 br-b_1 br_solid br_black-1 shadow_overlap-light m-x_n4 align-self-start m-t_5 m-b_3 ">
            <h3>Accordion</h3><a
               class="d-flex align-items-center"
               target="_blank"
               href="https://getbootstrap.com/docs/5.0/components/accordion/">Documentation</a>
        </div>
        <div>
            <div class="bd-example">
                <div class="accordion"
                     id="accordionExample">
                    <div class="accordion-item">
                        <h4 class="accordion-header"
                            id="headingOne"><button
                                    class="accordion-button"
                                    type="button"
                                    data-bs-toggle="collapse"
                                    data-bs-target="#collapseOne"
                                    aria-expanded="true"
                                    aria-controls="collapseOne">Accordion
                                Item #1</button></h4>
                        <div id="collapseOne"
                             class="accordion-collapse collapse show"
                             aria-labelledby="headingOne"
                             data-bs-parent="#accordionExample">
                            <div class="accordion-body">
                                <strong>This is the first
                                    item's accordion
                                    body.</strong> It is
                                hidden by default, until the
                                collapse plugin adds the
                                appropriate classes that we
                                use to style each element.
                                These classes control the
                                overall appearance, as well
                                as the showing and hiding
                                via CSS transitions. You can
                                modify any of this with
                                custom CSS or overriding our
                                default variables. It's also
                                worth noting that just about
                                any HTML can go within the
                                <code>.accordion-body</code>,
                                though the transition does
                                limit overflow.</div>
                        </div>
                    </div>
                    <div class="accordion-item">
                        <h4 class="accordion-header"
                            id="headingTwo"><button
                                    class="accordion-button collapsed"
                                    type="button"
                                    data-bs-toggle="collapse"
                                    data-bs-target="#collapseTwo"
                                    aria-expanded="false"
                                    aria-controls="collapseTwo">Accordion
                                Item #2</button></h4>
                        <div id="collapseTwo"
                             class="accordion-collapse collapse"
                             aria-labelledby="headingTwo"
                             data-bs-parent="#accordionExample">
                            <div class="accordion-body">
                                <strong>This is the second
                                    item's accordion
                                    body.</strong> It is
                                hidden by default, until the
                                collapse plugin adds the
                                appropriate classes that we
                                use to style each element.
                                These classes control the
                                overall appearance, as well
                                as the showing and hiding
                                via CSS transitions. You can
                                modify any of this with
                                custom CSS or overriding our
                                default variables. It's also
                                worth noting that just about
                                any HTML can go within the
                                <code>.accordion-body</code>,
                                though the transition does
                                limit overflow.</div>
                        </div>
                    </div>
                    <div class="accordion-item">
                        <h4 class="accordion-header"
                            id="headingThree"><button
                                    class="accordion-button collapsed"
                                    type="button"
                                    data-bs-toggle="collapse"
                                    data-bs-target="#collapseThree"
                                    aria-expanded="false"
                                    aria-controls="collapseThree">Accordion
                                Item #3</button></h4>
                        <div id="collapseThree"
                             class="accordion-collapse collapse"
                             aria-labelledby="headingThree"
                             data-bs-parent="#accordionExample">
                            <div class="accordion-body">
                                <strong>This is the third
                                    item's accordion
                                    body.</strong> It is
                                hidden by default, until the
                                collapse plugin adds the
                                appropriate classes that we
                                use to style each element.
                                These classes control the
                                overall appearance, as well
                                as the showing and hiding
                                via CSS transitions. You can
                                modify any of this with
                                custom CSS or overriding our
                                default variables. It's also
                                worth noting that just about
                                any HTML can go within the
                                <code>.accordion-body</code>,
                                though the transition does
                                limit overflow.</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </article>
    <article class="m-y_3"
             id="alerts">
        <div
             class="bd-heading sticky-xl-top m-y_3 bg_white p_3 br-b_1 br_solid br_black-1 shadow_overlap-light m-x_n4 align-self-start m-t_5 m-b_3 ">
            <h3>Alerts</h3><a
               class="d-flex align-items-center"
               target="_blank"
               href="https://getbootstrap.com/docs/5.0/components/alerts/">Documentation</a>
        </div>
        <div>
            <div class="bd-example">
                <div class="alert alert-primary alert-dismissible fade show"
                     role="alert">A simple primary alert
                    with <a href="#"
                       class="alert-link">an example
                        link</a>. Give it a click if you
                    like. <button type="button"
                            class="btn-close"
                            data-bs-dismiss="alert"
                            aria-label="Close"></button>
                </div>
                <div class="alert alert-secondary alert-dismissible fade show"
                     role="alert">A simple secondary alert
                    with <a href="#"
                       class="alert-link">an example
                        link</a>. Give it a click if you
                    like. <button type="button"
                            class="btn-close"
                            data-bs-dismiss="alert"
                            aria-label="Close"></button>
                </div>
                <div class="alert alert-success alert-dismissible fade show"
                     role="alert">A simple success alert
                    with <a href="#"
                       class="alert-link">an example
                        link</a>. Give it a click if you
                    like. <button type="button"
                            class="btn-close"
                            data-bs-dismiss="alert"
                            aria-label="Close"></button>
                </div>
                <div class="alert alert-alert alert-dismissible fade show"
                     role="alert">A simple alert alert with
                    <a href="#"
                       class="alert-link">an example
                        link</a>. Give it a click if you
                    like. <button type="button"
                            class="btn-close"
                            data-bs-dismiss="alert"
                            aria-label="Close"></button>
                </div>
                <div class="alert alert-warning alert-dismissible fade show"
                     role="alert">A simple warning alert
                    with <a href="#"
                       class="alert-link">an example
                        link</a>. Give it a click if you
                    like. <button type="button"
                            class="btn-close"
                            data-bs-dismiss="alert"
                            aria-label="Close"></button>
                </div>
                <div class="alert alert-info alert-dismissible fade show"
                     role="alert">A simple info alert with
                    <a href="#"
                       class="alert-link">an example
                        link</a>. Give it a click if you
                    like. <button type="button"
                            class="btn-close"
                            data-bs-dismiss="alert"
                            aria-label="Close"></button>
                </div>
                <div class="alert alert-light alert-dismissible fade show"
                     role="alert">A simple light alert with
                    <a href="#"
                       class="alert-link">an example
                        link</a>. Give it a click if you
                    like. <button type="button"
                            class="btn-close"
                            data-bs-dismiss="alert"
                            aria-label="Close"></button>
                </div>
                <div class="alert alert-dark alert-dismissible fade show"
                     role="alert">A simple dark alert with
                    <a href="#"
                       class="alert-link">an example
                        link</a>. Give it a click if you
                    like. <button type="button"
                            class="btn-close"
                            data-bs-dismiss="alert"
                            aria-label="Close"></button>
                </div>
            </div>
            <div class="bd-example">
                <div class="alert alert-success"
                     role="alert">
                    <h4 class="alert-heading">Well done!
                    </h4>
                    <p>Aww yeah, you successfully read this
                        important alert message. This
                        example text is going to run a bit
                        longer so that you can see how
                        spacing within an alert works with
                        this kind of content.</p>
                    <hr>
                    <p class="mb-0">Whenever you need to, be
                        sure to use margin utilities to keep
                        things nice and tidy.</p>
                </div>
            </div>
        </div>
    </article>
    <article class="m-y_3"
             id="badge">
        <div
             class="bd-heading sticky-xl-top m-y_3 bg_white p_3 br-b_1 br_solid br_black-1 shadow_overlap-light m-x_n4 align-self-start m-t_5 m-b_3 ">
            <h3>Badge</h3><a
               class="d-flex align-items-center"
               target="_blank"
               href="https://getbootstrap.com/docs/5.0/components/badge/">Documentation</a>
        </div>
        <div>
            <div class="bd-example">
                <p class="h1">Example heading <span
                          class="badge bg_primary">New</span>
                </p>
                <p class="h2">Example heading <span
                          class="badge bg_secondary">New</span>
                </p>
                <p class="h3">Example heading <span
                          class="badge bg_success">New</span>
                </p>
                <p class="h4">Example heading <span
                          class="badge bg_alert">New</span>
                </p>
                <p class="h5">Example heading <span
                          class="badge bg_warning c_dark">New</span>
                </p>
                <p class="h6">Example heading <span
                          class="badge bg_info c_dark">New</span>
                </p>
                <p class="h6">Example heading <span
                          class="badge bg_light c_dark">New</span>
                </p>
                <p class="h6">Example heading <span
                          class="badge bg_dark">New</span>
                </p>
            </div>
            <div class="bd-example"><span
                      class="badge rounded-pill bg_primary">Primary</span>
                <span
                      class="badge rounded-pill bg_secondary">Secondary</span>
                <span
                      class="badge rounded-pill bg_success">Success</span>
                <span
                      class="badge rounded-pill bg_alert">alert</span>
                <span
                      class="badge rounded-pill bg_warning c_dark">Warning</span>
                <span
                      class="badge rounded-pill bg_info c_dark">Info</span>
                <span
                      class="badge rounded-pill bg_light c_dark">Light</span>
                <span
                      class="badge rounded-pill bg_dark">Dark</span>
            </div>
        </div>
    </article>
    <article class="m-y_3"
             id="breadcrumb">
        <div
             class="bd-heading sticky-xl-top m-y_3 bg_white p_3 br-b_1 br_solid br_black-1 shadow_overlap-light m-x_n4 align-self-start m-t_5 m-b_3 ">
            <h3>Breadcrumb</h3><a
               class="d-flex align-items-center"
               target="_blank"
               href="https://getbootstrap.com/docs/5.0/components/breadcrumb/">Documentation</a>
        </div>
        <div>
            <div class="bd-example">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a
                               href="#">Home</a></li>
                        <li class="breadcrumb-item"><a
                               href="#">Library</a></li>
                        <li class="breadcrumb-item active"
                            aria-current="page">Data</li>
                    </ol>
                </nav>
            </div>
        </div>
    </article>
    <article class="m-y_3"
             id="buttons">
        <div
             class="bd-heading sticky-xl-top m-y_3 bg_white p_3 br-b_1 br_solid br_black-1 shadow_overlap-light m-x_n4 align-self-start m-t_5 m-b_3 ">
            <h3>Buttons</h3><a
               class="d-flex align-items-center"
               target="_blank"
               href="https://getbootstrap.com/docs/5.0/components/buttons/">Documentation</a>
        </div>
        <div>
            <div class="bd-example"><button type="button"
                        class="btn btn-primary">Primary</button>
                <button type="button"
                        class="btn btn-secondary">Secondary</button>
                <button type="button"
                        class="btn btn-success">Success</button>
                <button type="button"
                        class="btn btn-alert">alert</button>
                <button type="button"
                        class="btn btn-warning">Warning</button>
                <button type="button"
                        class="btn btn-info">Info</button>
                <button type="button"
                        class="btn btn-link">Link</button>
            </div>
            <div class="bd-example"><button type="button"
                        class="btn btn-outline-primary">Primary</button>
                <button type="button"
                        class="btn btn-outline-secondary">Secondary</button>
                <button type="button"
                        class="btn btn-outline-success">Success</button>
                <button type="button"
                        class="btn btn-outline-alert">alert</button>
                <button type="button"
                        class="btn btn-outline-warning">Warning</button>
                <button type="button"
                        class="btn btn-outline-info">Info</button>
            </div>
            <div class="bd-example"><button type="button"
                        class="btn btn-primary btn-sm">Small
                    button</button> <button type="button"
                        class="btn btn-primary">Standard
                    button</button> <button type="button"
                        class="btn btn-primary btn-lg">Large
                    button</button></div>
        </div>
    </article>
    <article class="m-y_3"
             id="button-group">
        <div
             class="bd-heading sticky-xl-top m-y_3 bg_white p_3 br-b_1 br_solid br_black-1 shadow_overlap-light m-x_n4 align-self-start m-t_5 m-b_3 ">
            <h3>Button group</h3><a
               class="d-flex align-items-center"
               target="_blank"
               href="https://getbootstrap.com/docs/5.0/components/button-group/">Documentation</a>
        </div>
        <div>
            <div class="bd-example">
                <div class="btn-toolbar"
                     role="toolbar"
                     aria-label="Toolbar with button groups">
                    <div class="btn-group m_3"
                         role="group"
                         aria-label="First group"><button
                                type="button"
                                class="btn btn-secondary">1</button>
                        <button type="button"
                                class="btn btn-secondary">2</button>
                        <button type="button"
                                class="btn btn-secondary">3</button>
                        <button type="button"
                                class="btn btn-secondary">4</button>
                    </div>
                    <div class="btn-group m_3"
                         role="group"
                         aria-label="Second group"><button
                                type="button"
                                class="btn btn-secondary">5</button>
                        <button type="button"
                                class="btn btn-secondary">6</button>
                        <button type="button"
                                class="btn btn-secondary">7</button>
                    </div>
                    <div class="btn-group"
                         role="group"
                         aria-label="Third group"><button
                                type="button"
                                class="btn btn-secondary">8</button>
                    </div>
                </div>
            </div>
        </div>
    </article>
    <article class="m-y_3"
             id="card">
        <div
             class="bd-heading sticky-xl-top m-y_3 bg_white p_3 br-b_1 br_solid br_black-1 shadow_overlap-light m-x_n4 align-self-start m-t_5 m-b_3 ">
            <h3>Card</h3><a
               class="d-flex align-items-center"
               target="_blank"
               href="https://getbootstrap.com/docs/5.0/components/card/">Documentation</a>
        </div>
        <div>
            <div class="bd-example">
                <div
                     class="row row_cols-1 row_cols-md-2 g-4">
                    <div class="col">
                        <div class="card"><svg
                                 class="bd-placeholder-img card-img-top"
                                 width="100%"
                                 height="180"
                                 xmlns="http://www.w3.org/2000/svg"
                                 role="img"
                                 aria-label="Placeholder: Image cap"
                                 preserveAspectRatio="xMidYMid slice"
                                 focusable="false">
                                <title>Placeholder</title>
                                <rect width="100%"
                                      height="100%"
                                      fill="#868e96"></rect>
                                <text x="50%"
                                      y="50%"
                                      fill="#dee2e6"
                                      dy=".3em">Image
                                    cap</text>
                            </svg>
                            <div class="card-body">
                                <h5 class="card-title">Card
                                    title</h5>
                                <p class="card-text">Some
                                    quick example text to
                                    build on the card title
                                    and make up the bulk of
                                    the card's content.</p>
                                <a href="#"
                                   class="btn btn-primary">Go
                                    somewhere</a>
                            </div>
                        </div>
                    </div>
                    <div class="col">
                        <div class="card">
                            <div class="card-header">
                                Featured</div>
                            <div class="card-body">
                                <h5 class="card-title">Card
                                    title</h5>
                                <p class="card-text">Some
                                    quick example text to
                                    build on the card title
                                    and make up the bulk of
                                    the card's content.</p>
                                <a href="#"
                                   class="btn btn-primary">Go
                                    somewhere</a>
                            </div>
                            <div
                                 class="card-footer c_muted">
                                2 days ago</div>
                        </div>
                    </div>
                    <div class="col">
                        <div class="card">
                            <div class="card-body">
                                <h5 class="card-title">Card
                                    title</h5>
                                <p class="card-text">Some
                                    quick example text to
                                    build on the card title
                                    and make up the bulk of
                                    the card's content.</p>
                            </div>
                            <ul
                                class="list-group list-group-flush">
                                <li class="list-group-item">
                                    An item</li>
                                <li class="list-group-item">
                                    A second item</li>
                                <li class="list-group-item">
                                    A third item</li>
                            </ul>
                            <div class="card-body"><a
                                   href="#"
                                   class="card-link">Card
                                    link</a> <a href="#"
                                   class="card-link">Another
                                    link</a></div>
                        </div>
                    </div>
                    <div class="col">
                        <div class="card">
                            <div class="row g-0">
                                <div class="col-md-4"><svg
                                         class="bd-placeholder-img"
                                         width="100%"
                                         height="250"
                                         xmlns="http://www.w3.org/2000/svg"
                                         role="img"
                                         aria-label="Placeholder: Image"
                                         preserveAspectRatio="xMidYMid slice"
                                         focusable="false">
                                        <title>Placeholder
                                        </title>
                                        <rect width="100%"
                                              height="100%"
                                              fill="#868e96">
                                        </rect><text x="50%"
                                              y="50%"
                                              fill="#dee2e6"
                                              dy=".3em">Image</text>
                                    </svg></div>
                                <div class="col-md-8">
                                    <div class="card-body">
                                        <h5
                                            class="card-title">
                                            Card title</h5>
                                        <p
                                           class="card-text">
                                            This is a wider
                                            card with
                                            supporting text
                                            below as a
                                            natural lead-in
                                            to additional
                                            content. This
                                            content is a
                                            little bit
                                            longer.</p>
                                        <p
                                           class="card-text">
                                            <small
                                                   class="c_muted">Last
                                                updated 3
                                                mins
                                                ago</small>
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </article>
    <article class="m-y_3"
             id="carousel">
        <div
             class="bd-heading sticky-xl-top m-y_3 bg_white p_3 br-b_1 br_solid br_black-1 shadow_overlap-light m-x_n4 align-self-start m-t_5 m-b_3 ">
            <h3>Carousel</h3><a
               class="d-flex align-items-center"
               target="_blank"
               href="https://getbootstrap.com/docs/5.0/components/carousel/">Documentation</a>
        </div>
        <div>
            <div class="bd-example">
                <div id="carouselExampleCaptions"
                     class="carousel slide"
                     data-bs-ride="carousel">
                    <div class="carousel-indicators"><button
                                type="button"
                                data-bs-target="#carouselExampleCaptions"
                                data-bs-slide-to="0"
                                class="active"
                                aria-current="true"
                                aria-label="Slide 1"></button>
                        <button type="button"
                                data-bs-target="#carouselExampleCaptions"
                                data-bs-slide-to="1"
                                aria-label="Slide 2"></button>
                        <button type="button"
                                data-bs-target="#carouselExampleCaptions"
                                data-bs-slide-to="2"
                                aria-label="Slide 3"></button>
                    </div>
                    <div class="carousel-inner">
                        <div class="carousel-item active">
                            <svg class="bd-placeholder-img bd-placeholder-img-lg d-block w_100"
                                 width="800"
                                 height="400"
                                 xmlns="http://www.w3.org/2000/svg"
                                 role="img"
                                 aria-label="Placeholder: First slide"
                                 preserveAspectRatio="xMidYMid slice"
                                 focusable="false">
                                <title>Placeholder</title>
                                <rect width="100%"
                                      height="100%"
                                      fill="#777"></rect>
                                <text x="50%"
                                      y="50%"
                                      fill="#555"
                                      dy=".3em">First
                                    slide</text>
                            </svg>
                            <div
                                 class="carousel-caption d-none d-md-block">
                                <h5>First slide label</h5>
                                <p>Some representative
                                    placeholder content for
                                    the first slide.</p>
                            </div>
                        </div>
                        <div class="carousel-item"><svg
                                 class="bd-placeholder-img bd-placeholder-img-lg d-block w_100"
                                 width="800"
                                 height="400"
                                 xmlns="http://www.w3.org/2000/svg"
                                 role="img"
                                 aria-label="Placeholder: Second slide"
                                 preserveAspectRatio="xMidYMid slice"
                                 focusable="false">
                                <title>Placeholder</title>
                                <rect width="100%"
                                      height="100%"
                                      fill="#666"></rect>
                                <text x="50%"
                                      y="50%"
                                      fill="#444"
                                      dy=".3em">Second
                                    slide</text>
                            </svg>
                            <div
                                 class="carousel-caption d-none d-md-block">
                                <h5>Second slide label</h5>
                                <p>Some representative
                                    placeholder content for
                                    the second slide.</p>
                            </div>
                        </div>
                        <div class="carousel-item"><svg
                                 class="bd-placeholder-img bd-placeholder-img-lg d-block w_100"
                                 width="800"
                                 height="400"
                                 xmlns="http://www.w3.org/2000/svg"
                                 role="img"
                                 aria-label="Placeholder: Third slide"
                                 preserveAspectRatio="xMidYMid slice"
                                 focusable="false">
                                <title>Placeholder</title>
                                <rect width="100%"
                                      height="100%"
                                      fill="#555"></rect>
                                <text x="50%"
                                      y="50%"
                                      fill="#333"
                                      dy=".3em">Third
                                    slide</text>
                            </svg>
                            <div
                                 class="carousel-caption d-none d-md-block">
                                <h5>Third slide label</h5>
                                <p>Some representative
                                    placeholder content for
                                    the third slide.</p>
                            </div>
                        </div>
                    </div><button
                            class="carousel-control-prev"
                            type="button"
                            data-bs-target="#carouselExampleCaptions"
                            data-bs-slide="prev"><span
                              class="carousel-control-prev-icon"
                              aria-hidden="true"></span>
                        <span
                              class="visually-hidden">Previous</span></button>
                    <button class="carousel-control-next"
                            type="button"
                            data-bs-target="#carouselExampleCaptions"
                            data-bs-slide="next"><span
                              class="carousel-control-next-icon"
                              aria-hidden="true"></span>
                        <span
                              class="visually-hidden">Next</span></button>
                </div>
            </div>
        </div>
    </article>
    <article class="m-y_3"
             id="dropdowns">
        <div
             class="bd-heading sticky-xl-top m-y_3 bg_white p_3 br-b_1 br_solid br_black-1 shadow_overlap-light m-x_n4 align-self-start m-t_5 m-b_3 ">
            <h3>Dropdowns</h3><a
               class="d-flex align-items-center"
               target="_blank"
               href="https://getbootstrap.com/docs/5.0/components/dropdowns/">Documentation</a>
        </div>
        <div>
            <div class="bd-example flex">
                <div
                     class="btn-group w_100 flex_wrap">
                    <div class="dropdown"><button
                                class="btn btn-secondary btn-sm dropdown-toggle"
                                type="button"
                                id="dropdownMenuButtonSM"
                                data-bs-toggle="dropdown"
                                aria-expanded="false">Dropdown
                            button</button>
                        <ul class="dropdown-menu"
                            aria-labelledby="dropdownMenuButtonSM">
                            <li>
                                <h6 class="dropdown-header">
                                    Dropdown header</h6>
                            </li>
                            <li><a class="dropdown-item"
                                   href="#">Action</a></li>
                            <li><a class="dropdown-item"
                                   href="#">Another
                                    action</a></li>
                            <li><a class="dropdown-item"
                                   href="#">Something else
                                    here</a></li>
                            <li>
                                <hr
                                    class="dropdown-divider">
                            </li>
                            <li><a class="dropdown-item"
                                   href="#">Separated
                                    link</a></li>
                        </ul>
                    </div>
                    <div class="dropdown"><button
                                class="btn btn-secondary dropdown-toggle"
                                type="button"
                                id="dropdownMenuButton"
                                data-bs-toggle="dropdown"
                                aria-expanded="false">Dropdown
                            button</button>
                        <ul class="dropdown-menu"
                            aria-labelledby="dropdownMenuButton">
                            <li>
                                <h6 class="dropdown-header">
                                    Dropdown header</h6>
                            </li>
                            <li><a class="dropdown-item"
                                   href="#">Action</a></li>
                            <li><a class="dropdown-item"
                                   href="#">Another
                                    action</a></li>
                            <li><a class="dropdown-item"
                                   href="#">Something else
                                    here</a></li>
                            <li>
                                <hr
                                    class="dropdown-divider">
                            </li>
                            <li><a class="dropdown-item"
                                   href="#">Separated
                                    link</a></li>
                        </ul>
                    </div>
                    <div class="dropdown"><button
                                class="btn btn-secondary btn-lg dropdown-toggle"
                                type="button"
                                id="dropdownMenuButtonLG"
                                data-bs-toggle="dropdown"
                                aria-expanded="false">Dropdown
                            button</button>
                        <ul class="dropdown-menu"
                            aria-labelledby="dropdownMenuButtonLG">
                            <li>
                                <h6 class="dropdown-header">
                                    Dropdown header</h6>
                            </li>
                            <li><a class="dropdown-item"
                                   href="#">Action</a></li>
                            <li><a class="dropdown-item"
                                   href="#">Another
                                    action</a></li>
                            <li><a class="dropdown-item"
                                   href="#">Something else
                                    here</a></li>
                            <li>
                                <hr
                                    class="dropdown-divider">
                            </li>
                            <li><a class="dropdown-item"
                                   href="#">Separated
                                    link</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="bd-example">
                <div class="btn-group"><button type="button"
                            class="btn btn-primary">Primary</button>
                    <button type="button"
                            class="btn btn-primary dropdown-toggle dropdown-toggle-split"
                            data-bs-toggle="dropdown"
                            aria-expanded="false"><span
                              class="visually-hidden">Toggle
                            Dropdown</span></button>
                    <ul class="dropdown-menu">
                        <li><a class="dropdown-item"
                               href="#">Action</a></li>
                        <li><a class="dropdown-item"
                               href="#">Another action</a>
                        </li>
                        <li><a class="dropdown-item"
                               href="#">Something else
                                here</a></li>
                    </ul>
                </div><!-- /btn-group -->
                <div class="btn-group"><button type="button"
                            class="btn btn-secondary">Secondary</button>
                    <button type="button"
                            class="btn btn-secondary dropdown-toggle dropdown-toggle-split"
                            data-bs-toggle="dropdown"
                            aria-expanded="false"><span
                              class="visually-hidden">Toggle
                            Dropdown</span></button>
                    <ul class="dropdown-menu">
                        <li><a class="dropdown-item"
                               href="#">Action</a></li>
                        <li><a class="dropdown-item"
                               href="#">Another action</a>
                        </li>
                        <li><a class="dropdown-item"
                               href="#">Something else
                                here</a></li>
                    </ul>
                </div><!-- /btn-group -->
                <div class="btn-group"><button type="button"
                            class="btn btn-success">Success</button>
                    <button type="button"
                            class="btn btn-success dropdown-toggle dropdown-toggle-split"
                            data-bs-toggle="dropdown"
                            aria-expanded="false"><span
                              class="visually-hidden">Toggle
                            Dropdown</span></button>
                    <ul class="dropdown-menu">
                        <li><a class="dropdown-item"
                               href="#">Action</a></li>
                        <li><a class="dropdown-item"
                               href="#">Another action</a>
                        </li>
                        <li><a class="dropdown-item"
                               href="#">Something else
                                here</a></li>
                    </ul>
                </div><!-- /btn-group -->
                <div class="btn-group"><button type="button"
                            class="btn btn-info">Info</button>
                    <button type="button"
                            class="btn btn-info dropdown-toggle dropdown-toggle-split"
                            data-bs-toggle="dropdown"
                            aria-expanded="false"><span
                              class="visually-hidden">Toggle
                            Dropdown</span></button>
                    <ul class="dropdown-menu">
                        <li><a class="dropdown-item"
                               href="#">Action</a></li>
                        <li><a class="dropdown-item"
                               href="#">Another action</a>
                        </li>
                        <li><a class="dropdown-item"
                               href="#">Something else
                                here</a></li>
                    </ul>
                </div><!-- /btn-group -->
                <div class="btn-group"><button type="button"
                            class="btn btn-warning">Warning</button>
                    <button type="button"
                            class="btn btn-warning dropdown-toggle dropdown-toggle-split"
                            data-bs-toggle="dropdown"
                            aria-expanded="false"><span
                              class="visually-hidden">Toggle
                            Dropdown</span></button>
                    <ul class="dropdown-menu">
                        <li><a class="dropdown-item"
                               href="#">Action</a></li>
                        <li><a class="dropdown-item"
                               href="#">Another action</a>
                        </li>
                        <li><a class="dropdown-item"
                               href="#">Something else
                                here</a></li>
                    </ul>
                </div><!-- /btn-group -->
                <div class="btn-group"><button type="button"
                            class="btn btn-alert">alert</button>
                    <button type="button"
                            class="btn btn-alert dropdown-toggle dropdown-toggle-split"
                            data-bs-toggle="dropdown"
                            aria-expanded="false"><span
                              class="visually-hidden">Toggle
                            Dropdown</span></button>
                    <ul class="dropdown-menu">
                        <li><a class="dropdown-item"
                               href="#">Action</a></li>
                        <li><a class="dropdown-item"
                               href="#">Another action</a>
                        </li>
                        <li><a class="dropdown-item"
                               href="#">Something else
                                here</a></li>
                    </ul>
                </div><!-- /btn-group -->
            </div>
            <div class="bd-example">
                <div
                     class="btn-group w_100 align-items-center justify-content-between flex-wrap">
                    <div class="dropend"><button
                                class="btn btn-secondary dropdown-toggle"
                                type="button"
                                id="dropendMenuButton"
                                data-bs-toggle="dropdown"
                                aria-expanded="false">Dropend
                            button</button>
                        <ul class="dropdown-menu"
                            aria-labelledby="dropendMenuButton">
                            <li>
                                <h6 class="dropdown-header">
                                    Dropdown header</h6>
                            </li>
                            <li><a class="dropdown-item"
                                   href="#">Action</a></li>
                            <li><a class="dropdown-item"
                                   href="#">Another
                                    action</a></li>
                            <li><a class="dropdown-item"
                                   href="#">Something else
                                    here</a></li>
                            <li>
                                <hr
                                    class="dropdown-divider">
                            </li>
                            <li><a class="dropdown-item"
                                   href="#">Separated
                                    link</a></li>
                        </ul>
                    </div>
                    <div class="dropup"><button
                                class="btn btn-secondary dropdown-toggle"
                                type="button"
                                id="dropupMenuButton"
                                data-bs-toggle="dropdown"
                                aria-expanded="false">Dropup
                            button</button>
                        <ul class="dropdown-menu"
                            aria-labelledby="dropupMenuButton">
                            <li>
                                <h6 class="dropdown-header">
                                    Dropdown header</h6>
                            </li>
                            <li><a class="dropdown-item"
                                   href="#">Action</a></li>
                            <li><a class="dropdown-item"
                                   href="#">Another
                                    action</a></li>
                            <li><a class="dropdown-item"
                                   href="#">Something else
                                    here</a></li>
                            <li>
                                <hr
                                    class="dropdown-divider">
                            </li>
                            <li><a class="dropdown-item"
                                   href="#">Separated
                                    link</a></li>
                        </ul>
                    </div>
                    <div class="dropstart"><button
                                class="btn btn-secondary dropdown-toggle"
                                type="button"
                                id="dropstartMenuButton"
                                data-bs-toggle="dropdown"
                                aria-expanded="false">Dropstart
                            button</button>
                        <ul class="dropdown-menu"
                            aria-labelledby="dropstartMenuButton">
                            <li>
                                <h6 class="dropdown-header">
                                    Dropdown header</h6>
                            </li>
                            <li><a class="dropdown-item"
                                   href="#">Action</a></li>
                            <li><a class="dropdown-item"
                                   href="#">Another
                                    action</a></li>
                            <li><a class="dropdown-item"
                                   href="#">Something else
                                    here</a></li>
                            <li>
                                <hr
                                    class="dropdown-divider">
                            </li>
                            <li><a class="dropdown-item"
                                   href="#">Separated
                                    link</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="bd-example">
                <div class="btn-group">
                    <div class="dropdown"><button
                                class="btn btn-secondary dropdown-toggle"
                                type="button"
                                id="dropdownRightMenuButton"
                                data-bs-toggle="dropdown"
                                aria-expanded="false">End-aligned
                            menu</button>
                        <ul class="dropdown-menu dropdown-menu-end"
                            aria-labelledby="dropdownRightMenuButton">
                            <li>
                                <h6 class="dropdown-header">
                                    Dropdown header</h6>
                            </li>
                            <li><a class="dropdown-item"
                                   href="#">Action</a></li>
                            <li><a class="dropdown-item"
                                   href="#">Another
                                    action</a></li>
                            <li>
                                <hr
                                    class="dropdown-divider">
                            </li>
                            <li><a class="dropdown-item"
                                   href="#">Separated
                                    link</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </article>
    <article class="m-y_3"
             id="list-group">
        <div
             class="bd-heading sticky-xl-top m-y_3 bg_white p_3 br-b_1 br_solid br_black-1 shadow_overlap-light m-x_n4 align-self-start m-t_5 m-b_3 ">
            <h3>List group</h3><a
               class="d-flex align-items-center"
               target="_blank"
               href="https://getbootstrap.com/docs/5.0/components/list-group/">Documentation</a>
        </div>
        <div>
            <div class="bd-example">
                <ul class="list-group">
                    <li class="list-group-item disabled"
                        aria-disabled="true">A disabled item
                    </li>
                    <li class="list-group-item">A second
                        item</li>
                    <li class="list-group-item">A third item
                    </li>
                    <li class="list-group-item">A fourth
                        item</li>
                    <li class="list-group-item">And a fifth
                        one</li>
                </ul>
            </div>
            <div class="bd-example">
                <ul class="list-group list-group-flush">
                    <li class="list-group-item">An item</li>
                    <li class="list-group-item">A second
                        item</li>
                    <li class="list-group-item">A third item
                    </li>
                    <li class="list-group-item">A fourth
                        item</li>
                    <li class="list-group-item">And a fifth
                        one</li>
                </ul>
            </div>
            <div class="bd-example">
                <div class="list-group"><a href="#"
                       class="list-group-item list-group-item-action">A
                        simple default list group item</a>
                    <a href="#"
                       class="list-group-item list-group-item-action list-group-item-primary">A
                        simple primary list group item</a>
                    <a href="#"
                       class="list-group-item list-group-item-action list-group-item-secondary">A
                        simple secondary list group item</a>
                    <a href="#"
                       class="list-group-item list-group-item-action list-group-item-success">A
                        simple success list group item</a>
                    <a href="#"
                       class="list-group-item list-group-item-action list-group-item-alert">A
                        simple alert list group item</a> <a
                       href="#"
                       class="list-group-item list-group-item-action list-group-item-warning">A
                        simple warning list group item</a>
                    <a href="#"
                       class="list-group-item list-group-item-action list-group-item-info">A
                        simple info list group item</a>
                </div>
            </div>
        </div>
    </article>
    <article class="m-y_3"
             id="modal">
        <div
             class="bd-heading sticky-xl-top m-y_3 bg_white p_3 br-b_1 br_solid br_black-1 shadow_overlap-light m-x_n4 align-self-start m-t_5 m-b_3 ">
            <h3>Modal</h3><a
               class="d-flex align-items-center"
               target="_blank"
               href="https://getbootstrap.com/docs/5.0/components/modal/">Documentation</a>
        </div>
        <div>
            <div class="bd-example">
                <div
                     class="d-flex justify-content-between flex-wrap">
                    <button type="button"
                            class="btn btn-primary"
                            data-bs-toggle="modal"
                            data-bs-target="#exampleModalDefault">Launch
                        demo modal</button> <button
                            type="button"
                            class="btn btn-primary"
                            data-bs-toggle="modal"
                            data-bs-target="#staticBackdropLive">Launch
                        static backdrop modal</button>
                    <button type="button"
                            class="btn btn-primary"
                            data-bs-toggle="modal"
                            data-bs-target="#exampleModalCenteredScrollable">Vertically
                        centered scrollable modal</button>
                    <button type="button"
                            class="btn btn-primary"
                            data-bs-toggle="modal"
                            data-bs-target="#exampleModalFullscreen">Full
                        screen</button></div>
            </div>
        </div>
    </article>
    <article class="m-y_3"
             id="navs">
        <div
             class="bd-heading sticky-xl-top m-y_3 bg_white p_3 br-b_1 br_solid br_black-1 shadow_overlap-light m-x_n4 align-self-start m-t_5 m-b_3 ">
            <h3>Navs</h3><a
               class="d-flex align-items-center"
               target="_blank"
               href="https://getbootstrap.com/docs/5.0/components/navs-tabs/">Documentation</a>
        </div>
        <div>
            <div class="bd-example">
                <nav class="nav"><a class="nav-link active"
                       aria-current="page"
                       href="#">Active</a> <a
                       class="nav-link"
                       href="#">Link</a> <a class="nav-link"
                       href="#">Link</a> <a
                       class="nav-link disabled"
                       href="#"
                       tabindex="-1"
                       aria-disabled="true">Disabled</a>
                </nav>
            </div>
            <div class="bd-example">
                <nav>
                    <div class="nav nav-tabs m-b_3"
                         id="nav-tab"
                         role="tablist"><button
                                class="nav-link active"
                                id="nav-home-tab"
                                data-bs-toggle="tab"
                                data-bs-target="#nav-home"
                                type="button"
                                role="tab"
                                aria-controls="nav-home"
                                aria-selected="true">Home</button>
                        <button class="nav-link"
                                id="nav-profile-tab"
                                data-bs-toggle="tab"
                                data-bs-target="#nav-profile"
                                type="button"
                                role="tab"
                                aria-controls="nav-profile"
                                aria-selected="false">Profile</button>
                        <button class="nav-link"
                                id="nav-contact-tab"
                                data-bs-toggle="tab"
                                data-bs-target="#nav-contact"
                                type="button"
                                role="tab"
                                aria-controls="nav-contact"
                                aria-selected="false">Contact</button>
                    </div>
                </nav>
                <div class="tab-content"
                     id="nav-tabContent">
                    <div class="tab-pane fade show active"
                         id="nav-home"
                         role="tabpanel"
                         aria-labelledby="nav-home-tab">
                        <p>Placeholder content for the tab
                            panel. This one relates to the
                            home tab. Takes you miles high,
                            so high, 'cause she’s got that
                            one international smile. There's
                            a stranger in my bed, there's a
                            pounding in my head. Oh, no. In
                            another life I would make you
                            stay. ‘Cause I, I’m capable of
                            anything. Suiting up for my
                            crowning battle. Used to steal
                            your parents' liquor and climb
                            to the roof. Tone, tan fit and
                            ready, turn it up cause its
                            gettin' heavy. Her love is like
                            a drug. I guess that I forgot I
                            had a choice.</p>
                    </div>
                    <div class="tab-pane fade"
                         id="nav-profile"
                         role="tabpanel"
                         aria-labelledby="nav-profile-tab">
                        <p>Placeholder content for the tab
                            panel. This one relates to the
                            profile tab. You got the finest
                            architecture. Passport stamps,
                            she's cosmopolitan. Fine, fresh,
                            fierce, we got it on lock. Never
                            planned that one day I'd be
                            losing you. She eats your heart
                            out. Your kiss is cosmic, every
                            move is magic. I mean the ones,
                            I mean like she's the one.
                            Greetings loved ones let's take
                            a journey. Just own the night
                            like the 4th of July! But you'd
                            rather get wasted.</p>
                    </div>
                    <div class="tab-pane fade"
                         id="nav-contact"
                         role="tabpanel"
                         aria-labelledby="nav-contact-tab">
                        <p>Placeholder content for the tab
                            panel. This one relates to the
                            contact tab. Her love is like a
                            drug. All my girls vintage
                            Chanel baby. Got a motel and
                            built a fort out of sheets.
                            'Cause she's the muse and the
                            artist. (This is how we do) So
                            you wanna play with magic. So
                            just be sure before you give it
                            all to me. I'm walking, I'm
                            walking on air (tonight). Skip
                            the talk, heard it all, time to
                            walk the walk. Catch her if you
                            can. Stinging like a bee I
                            earned my stripes.</p>
                    </div>
                </div>
            </div>
            <div class="bd-example">
                <ul class="nav nav-pills">
                    <li class="nav-item"><a
                           class="nav-link active"
                           aria-current="page"
                           href="#">Active</a></li>
                    <li class="nav-item"><a class="nav-link"
                           href="#">Link</a></li>
                    <li class="nav-item"><a class="nav-link"
                           href="#">Link</a></li>
                    <li class="nav-item"><a
                           class="nav-link disabled"
                           href="#"
                           tabindex="-1"
                           aria-disabled="true">Disabled</a>
                    </li>
                </ul>
            </div>
        </div>
    </article>
    <article class="m-y_3"
             id="pagination">
        <div
             class="bd-heading sticky-xl-top m-y_3 bg_white p_3 br-b_1 br_solid br_black-1 shadow_overlap-light m-x_n4 align-self-start m-t_5 m-b_3 ">
            <h3>Pagination</h3><a
               class="d-flex align-items-center"
               target="_blank"
               href="https://getbootstrap.com/docs/5.0/components/pagination/">Documentation</a>
        </div>
        <div>
            <div class="bd-example">
                <nav aria-label="Pagination example">
                    <ul class="pagination pagination-sm">
                        <li class="page-item"><a
                               class="page-link"
                               href="#">1</a></li>
                        <li class="page-item active"
                            aria-current="page"><a
                               class="page-link"
                               href="#">2</a></li>
                        <li class="page-item"><a
                               class="page-link"
                               href="#">3</a></li>
                    </ul>
                </nav>
            </div>
            <div class="bd-example">
                <nav
                     aria-label="Standard pagination example">
                    <ul class="pagination">
                        <li class="page-item"><a
                               class="page-link"
                               href="#"
                               aria-label="Previous"><span
                                      aria-hidden="true">«</span></a>
                        </li>
                        <li class="page-item"><a
                               class="page-link"
                               href="#">1</a></li>
                        <li class="page-item"><a
                               class="page-link"
                               href="#">2</a></li>
                        <li class="page-item"><a
                               class="page-link"
                               href="#">3</a></li>
                        <li class="page-item"><a
                               class="page-link"
                               href="#"
                               aria-label="Next"><span
                                      aria-hidden="true">»</span></a>
                        </li>
                    </ul>
                </nav>
            </div>
            <div class="bd-example">
                <nav
                     aria-label="Another pagination example">
                    <ul
                        class="pagination pagination-lg flex-wrap">
                        <li class="page-item disabled"><a
                               class="page-link"
                               href="#"
                               tabindex="-1"
                               aria-disabled="true">Previous</a>
                        </li>
                        <li class="page-item"><a
                               class="page-link"
                               href="#">1</a></li>
                        <li class="page-item active"
                            aria-current="page"><a
                               class="page-link"
                               href="#">2</a></li>
                        <li class="page-item"><a
                               class="page-link"
                               href="#">3</a></li>
                        <li class="page-item"><a
                               class="page-link"
                               href="#">Next</a></li>
                    </ul>
                </nav>
            </div>
        </div>
    </article>
    <article class="m-y_3"
             id="popovers">
        <div
             class="bd-heading sticky-xl-top m-y_3 bg_white p_3 br-b_1 br_solid br_black-1 shadow_overlap-light m-x_n4 align-self-start m-t_5 m-b_3 ">
            <h3>Popovers</h3><a
               class="d-flex align-items-center"
               target="_blank"
               href="https://getbootstrap.com/docs/5.0/components/popovers/">Documentation</a>
        </div>
        <div>
            <div class="bd-example"><button type="button"
                        class="btn btn-lg btn-alert"
                        data-bs-toggle="popover"
                        title="Popover title"
                        data-bs-content="And here's some amazing content. It's very engaging. Right?">Click
                    to toggle popover</button></div>
            <div class="bd-example"><button type="button"
                        class="btn btn-secondary"
                        data-bs-container="body"
                        data-bs-toggle="popover"
                        data-bs-placement="top"
                        data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Popover
                    on top</button> <button type="button"
                        class="btn btn-secondary"
                        data-bs-container="body"
                        data-bs-toggle="popover"
                        data-bs-placement="right"
                        data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Popover
                    on end</button> <button type="button"
                        class="btn btn-secondary"
                        data-bs-container="body"
                        data-bs-toggle="popover"
                        data-bs-placement="bottom"
                        data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Popover
                    on bottom</button> <button type="button"
                        class="btn btn-secondary"
                        data-bs-container="body"
                        data-bs-toggle="popover"
                        data-bs-placement="left"
                        data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Popover
                    on start</button></div>
        </div>
    </article>
    <article class="m-y_3"
             id="progress">
        <div
             class="bd-heading sticky-xl-top m-y_3 bg_white p_3 br-b_1 br_solid br_black-1 shadow_overlap-light m-x_n4 align-self-start m-t_5 m-b_3 ">
            <h3>Progress</h3><a
               class="d-flex align-items-center"
               target="_blank"
               href="https://getbootstrap.com/docs/5.0/components/progress/">Documentation</a>
        </div>
        <div>
            <div class="bd-example">
                <div class="progress m-b_3">
                    <div class="progress-bar"
                         role="progressbar"
                         aria-valuenow="0"
                         aria-valuemin="0"
                         aria-valuemax="100">0%</div>
                </div>
                <div class="progress m-b_3">
                    <div class="progress-bar bg_success w_25"
                         role="progressbar"
                         aria-valuenow="25"
                         aria-valuemin="0"
                         aria-valuemax="100">25%</div>
                </div>
                <div class="progress m-b_3">
                    <div class="progress-bar bg_info c_dark w_50"
                         role="progressbar"
                         aria-valuenow="50"
                         aria-valuemin="0"
                         aria-valuemax="100">50%</div>
                </div>
                <div class="progress m-b_3">
                    <div class="progress-bar bg_warning c_dark w_75"
                         role="progressbar"
                         aria-valuenow="75"
                         aria-valuemin="0"
                         aria-valuemax="100">75%</div>
                </div>
                <div class="progress">
                    <div class="progress-bar bg_alert w_100"
                         role="progressbar"
                         aria-valuenow="100"
                         aria-valuemin="0"
                         aria-valuemax="100">100%</div>
                </div>
            </div>
            <div class="bd-example">
                <div class="progress">
                    <div class="progress-bar"
                         role="progressbar"
                         style="width:15%"
                         aria-valuenow="15"
                         aria-valuemin="0"
                         aria-valuemax="100"></div>
                    <div class="progress-bar progress-bar-striped progress-bar-animated bg_success"
                         role="progressbar"
                         style="width:40%"
                         aria-valuenow="40"
                         aria-valuemin="0"
                         aria-valuemax="100"></div>
                </div>
            </div>
        </div>
    </article>
    <article class="m-y_3"
             id="scrollspy">
        <div
             class="bd-heading sticky-xl-top m-y_3 bg_white p_3 br-b_1 br_solid br_black-1 shadow_overlap-light m-x_n4 align-self-start m-t_5 m-b_3 ">
            <h3>Scrollspy</h3><a
               class="d-flex align-items-center"
               target="_blank"
               href="https://getbootstrap.com/docs/5.0/components/scrollspy/">Documentation</a>
        </div>
        <div>
            <div class="bd-example">
                <nav id="navbar-example2"
                     class="navbar navbar-light bg_light px-3">
                    <a class="navbar-brand"
                       href="#">Navbar</a>
                    <ul class="nav nav-pills">
                        <li class="nav-item"><a
                               class="nav-link"
                               href="#fat">@fat</a></li>
                        <li class="nav-item"><a
                               class="nav-link"
                               href="#mdo">@mdo</a></li>
                        <li class="nav-item dropdown"><a
                               class="nav-link dropdown-toggle"
                               data-bs-toggle="dropdown"
                               href="#"
                               role="button"
                               aria-expanded="false">Dropdown</a>
                            <ul class="dropdown-menu">
                                <li><a class="dropdown-item"
                                       href="#one">one</a>
                                </li>
                                <li><a class="dropdown-item"
                                       href="#two">two</a>
                                </li>
                                <li>
                                    <hr
                                        class="dropdown-divider">
                                </li>
                                <li><a class="dropdown-item"
                                       href="#three">three</a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </nav>
                <div data-bs-spy="scroll"
                     data-bs-target="#navbar-example2"
                     data-bs-offset="0"
                     class="scrollspy-example"
                     tabindex="0">
                    <h4 id="fat">@fat</h4>
                    <p>Placeholder content for the scrollspy
                        example. You got the finest
                        architecture. Passport stamps, she's
                        cosmopolitan. Fine, fresh, fierce,
                        we got it on lock. Never planned
                        that one day I'd be losing you. She
                        eats your heart out. Your kiss is
                        cosmic, every move is magic. I mean
                        the ones, I mean like she's the one.
                        Greetings loved ones let's take a
                        journey. Just own the night like the
                        4th of July! But you'd rather get
                        wasted.</p>
                    <h4 id="mdo">@mdo</h4>
                    <p>Placeholder content for the scrollspy
                        example. 'Cause she's the muse and
                        the artist. (This is how we do) So
                        you wanna play with magic. So just
                        be sure before you give it all to
                        me. I'm walking, I'm walking on air
                        (tonight). Skip the talk, heard it
                        all, time to walk the walk.</p>
                    <h4 id="one">one</h4>
                    <p>Placeholder content for the scrollspy
                        example. Takes you miles high, so
                        high, 'cause she’s got that one
                        international smile. There's a
                        stranger in my bed, there's a
                        pounding in my head. Oh, no. In
                        another life I would make you stay.
                        ‘Cause I, I’m capable of anything.
                        Suiting up for my crowning battle.
                        Used to steal your parents' liquor
                        and climb to the roof. Tone, tan fit
                        and ready, turn it up cause its
                        gettin' heavy. Her love is like a
                        drug. I guess that I forgot I had a
                        choice.</p>
                    <h4 id="two">two</h4>
                    <p>Placeholder content for the scrollspy
                        example. It's time to bring out the
                        big balloons. I'm walking, I'm
                        walking on air (tonight). Yeah, we
                        maxed our credit cards and got
                        kicked out of the bar. Yo, shout out
                        to all you kids, buying bottle
                        service, with your rent money. I'm
                        ma get your heart racing in my
                        skin-tight jeans. If you get the
                        chance you better keep her. Yo,
                        shout out to all you kids, buying
                        bottle service, with your rent
                        money.</p>
                    <h4 id="three">three</h4>
                    <p>Placeholder content for the scrollspy
                        example. If you wanna dance, if you
                        want it all, you know that I'm the
                        girl that you should call. Walk
                        through the storm I would. So let me
                        get you in your birthday suit. The
                        one that got away. Last Friday
                        night, yeah I think we broke the
                        law, always say we're gonna stop.
                        'Cause she's a little bit of Yoko,
                        And she's a little bit of 'Oh no'. I
                        want the jaw droppin', eye poppin',
                        head turnin', body shockin'. Yeah,
                        we maxed our credit cards and got
                        kicked out of the bar.</p>
                    <p>And some more placeholder content,
                        for good measure.</p>
                </div>
            </div>
        </div>
    </article>
    <article class="m-y_3"
             id="spinners">
        <div
             class="bd-heading sticky-xl-top m-y_3 bg_white p_3 br-b_1 br_solid br_black-1 shadow_overlap-light m-x_n4 align-self-start m-t_5 m-b_3 ">
            <h3>Spinners</h3><a
               class="d-flex align-items-center"
               target="_blank"
               href="https://getbootstrap.com/docs/5.0/components/spinners/">Documentation</a>
        </div>
        <div>
            <div class="bd-example">
                <div class="spinner-border c_primary"
                     role="status"><span
                          class="visually-hidden">Loading...</span>
                </div>
                <div class="spinner-border c_secondary"
                     role="status"><span
                          class="visually-hidden">Loading...</span>
                </div>
                <div class="spinner-border c_success"
                     role="status"><span
                          class="visually-hidden">Loading...</span>
                </div>
                <div class="spinner-border c_alert"
                     role="status"><span
                          class="visually-hidden">Loading...</span>
                </div>
                <div class="spinner-border c_warning"
                     role="status"><span
                          class="visually-hidden">Loading...</span>
                </div>
                <div class="spinner-border c_info"
                     role="status"><span
                          class="visually-hidden">Loading...</span>
                </div>
                <div class="spinner-border c_light"
                     role="status"><span
                          class="visually-hidden">Loading...</span>
                </div>
                <div class="spinner-border c_dark"
                     role="status"><span
                          class="visually-hidden">Loading...</span>
                </div>
            </div>
            <div class="bd-example">
                <div class="spinner-grow c_primary"
                     role="status"><span
                          class="visually-hidden">Loading...</span>
                </div>
                <div class="spinner-grow c_secondary"
                     role="status"><span
                          class="visually-hidden">Loading...</span>
                </div>
                <div class="spinner-grow c_success"
                     role="status"><span
                          class="visually-hidden">Loading...</span>
                </div>
                <div class="spinner-grow c_alert"
                     role="status"><span
                          class="visually-hidden">Loading...</span>
                </div>
                <div class="spinner-grow c_warning"
                     role="status"><span
                          class="visually-hidden">Loading...</span>
                </div>
                <div class="spinner-grow c_info"
                     role="status"><span
                          class="visually-hidden">Loading...</span>
                </div>
                <div class="spinner-grow c_light"
                     role="status"><span
                          class="visually-hidden">Loading...</span>
                </div>
                <div class="spinner-grow c_dark"
                     role="status"><span
                          class="visually-hidden">Loading...</span>
                </div>
            </div>
        </div>
    </article>
    <article class="m-y_3"
             id="toasts">
        <div
             class="bd-heading sticky-xl-top m-y_3 bg_white p_3 br-b_1 br_solid br_black-1 shadow_overlap-light m-x_n4 align-self-start m-t_5 m-b_3 ">
            <h3>Toasts</h3><a
               class="d-flex align-items-center"
               target="_blank"
               href="https://getbootstrap.com/docs/5.0/components/toasts/">Documentation</a>
        </div>
        <div>
            <div
                 class="bd-example bg_dark p-5 align-items-center">
                <div class="toast"
                     role="alert"
                     aria-live="assertive"
                     aria-atomic="true">
                    <div class="toast-header"><svg
                             class="bd-placeholder-img rounded m_3"
                             width="20"
                             height="20"
                             xmlns="http://www.w3.org/2000/svg"
                             aria-hidden="true"
                             preserveAspectRatio="xMidYMid slice"
                             focusable="false">
                            <rect width="100%"
                                  height="100%"
                                  fill="#007aff"></rect>
                        </svg> <strong
                                class="me-auto">Bootstrap</strong>
                        <small class="c_muted">11 mins
                            ago</small> <button
                                type="button"
                                class="btn-close"
                                data-bs-dismiss="toast"
                                aria-label="Close"></button>
                    </div>
                    <div class="toast-body">Hello, world!
                        This is a toast message.</div>
                </div>
            </div>
        </div>
    </article>
    <article class="mt-3 mb-5 pb-5"
             id="tooltips">
        <div
             class="bd-heading sticky-xl-top m-y_3 bg_white p_3 br-b_1 br_solid br_black-1 shadow_overlap-light m-x_n4 align-self-start m-t_5 m-b_3 ">
            <h3>Tooltips</h3><a
               class="d-flex align-items-center"
               target="_blank"
               href="https://getbootstrap.com/docs/5.0/components/tooltips/">Documentation</a>
        </div>
        <div>
            <div class="bd-example tooltip-demo"><button
                        type="button"
                        class="btn btn-secondary"
                        data-bs-toggle="tooltip"
                        data-bs-placement="top"
                        title="Tooltip on top">Tooltip on
                    top</button> <button type="button"
                        class="btn btn-secondary"
                        data-bs-toggle="tooltip"
                        data-bs-placement="right"
                        title="Tooltip on end">Tooltip on
                    end</button> <button type="button"
                        class="btn btn-secondary"
                        data-bs-toggle="tooltip"
                        data-bs-placement="bottom"
                        title="Tooltip on bottom">Tooltip on
                    bottom</button> <button type="button"
                        class="btn btn-secondary"
                        data-bs-toggle="tooltip"
                        data-bs-placement="left"
                        title="Tooltip on start">Tooltip on
                    start</button> <button type="button"
                        class="btn btn-secondary"
                        data-bs-toggle="tooltip"
                        data-bs-html="true"
                        title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">Tooltip
                    with HTML</button></div>
        </div>
    </article>
</section>



Weight: 1000

Styleguide  Bootstrap.Components
*/
.btn {
  font-weight: var(--font_medium);
  font-family: var(--font-family_ui);
  white-space: nowrap;
}

.btn.clear {
  border-color: transparent;
  background-color: transparent;
  color: var(--link-color-dark);
}
.btn.clear:hover {
  color: hsl(var(--link-color-dark-h), var(--link-color-dark-s), calc(var(-link-color-dark-l) * 0.5));
}

.btn-accent {
  background-color: hsla(var(--accent-h), calc(var(--accent-s) + (100% - var(--accent-s)) * 0.015), calc(var(--accent-l) - var(--accent-l) * 0.15), 1);
}
.btn-accent:hover {
  background-color: hsla(var(--accent-h), calc(var(--accent-s) + (100% - var(--accent-s)) * 0.05), calc(var(--accent-l) - var(--accent-l) * 0.5), 1);
}

.btn.shadow {
  box-shadow: 1.5px 1.5px 6px 0.75px rgba(0, 0, 0, 0.4);
}

.btn.shadow:hover {
  box-shadow: 0.5px 0.5px 2px 0.25px rgba(0, 0, 0, 0.1);
}

/*
Carousel ALT

A slide-show component for cycling through groups of images and text.
.no-controls            Will remove left and right arrow
.text-indicators        Converts the circle indicators to text tabs that lock to the right side of the images.
.chevron-on             Adds a light orange chevron on the '.active' indicator to increase its impact.


Markup:
<div
	id="carouselExampleFade"
	class="carousel carousel-alt slide no-controls text-indicators chevron-on"
>
	<ol class="carousel-indicators">
		<li data-target="#carouselExampleFade" data-slide-to="0" class="wrap" >
			quaerat odit assumenda
		</li>
		<li data-target="#carouselExampleFade" data-slide-to="1" class=" wrap">
			delectus sunt optio
		</li>
		<li data-target="#carouselExampleFade" data-slide-to="2" class=" wrap">
			deserunt quia quasi
		</li>
	</ol>
	<!-- Wrapper for slides -->
	<div class="carousel-inner" role="listbox">
		<div class="carousel-item active">
			<a><img class="block w_100" src="http://lorempixel.com/630/420/animals" alt="..."/></a>
			<div class="carousel-caption bg_black-7 text-shadow_black-1 text_center text_left:md font_2:md c_white p_3:lg p-b_4:lg p-y_3 lh_1 b_0 r_0 l_0">
                    <span class="title  font_display block m-b_2 font_4:md m-b_3:md">Cardiac Syncope Program Launches!</span>
                    <p><strong>NEW</strong>&nbsp;|&nbsp;Hear from an expert panel and complete four patient cases to test your knowledge on our Syncope Program! <a href="http://edu.acc.org/diweb/catalog/item/eid/SYNCOPE2019" title="" class="" target="_blank"><strong>Find out more!</strong></a></p>
                </div>
		</div>
		<div class="carousel-item">
			<a><img class="block w_100" src="http://lorempixel.com/630/420/nature" alt="..."/></a>
			<div class="carousel-caption bg_black-7 text-shadow_black-1 text_center text_left:md font_2:md c_white p_3:lg p-b_4:lg p-y_3 lh_1 b_0 r_0 l_0">
				<span class="title font_display block m-b_2 font_4:md m-b_3:md">sint explicabo sequi</span> Earum nihil omnis.
			</div>
		</div>
		<div class="carousel-item">
			<a><img class="block w_100" src="http://lorempixel.com/630/420/food" alt="..."/></a>
			<div class="carousel-caption bg_black-7 text-shadow_black-1 text_center text_left:md font_2:md c_white p_3:lg p-b_4:lg p-y_3 lh_1 b_0 r_0 l_0">
				<span class="title font_display block m-b_2 font_4:md m-b_3:md">sint explicabo sequi</span> Earum nihil omnis.
			</div>
		</div>
	</div>
	<!-- Controls -->
	<a
		class="left carousel-control-prev"
		href="#carouselExampleFade"
		role="button"
		data-slide="prev"
	>
		<i class="fas fa-chevron-left"></i>
		<span class="sr-only">Previous</span>
	</a>
	<a
		class="right carousel-control-next"
		href="#carouselExampleFade"
		role="button"
		data-slide="next"
	>
		<i class="fas fa-chevron-right"></i>
		<span class="sr-only">Next</span>
	</a>
</div>


Styleguide  Bootstrap.Carousel

*/
.carousel-alt {
  position: relative;
  max-width: 630px;
  margin: 0 auto 16px;
  margin: 0 auto 1rem;
  background: url("http://cdn.backgroundhost.com/backgrounds/subtlepatterns/subtle_surface.png");
  background-repeat: repeat;
}
.carousel-alt:before {
  display: block;
  width: 100%;
  padding-top: 66.6666666667%;
  content: "";
}
.carousel-alt > .carousel-inner {
  position: absolute;
  top: 0px;
  right: 0;
  bottom: 0;
  left: 0;
}
.carousel-alt .carousel-indicators {
  top: 0;
  right: 0;
  bottom: auto;
  left: 0;
  width: 100%;
  margin: 0;
  background-color: rgba(0, 0, 0, 0.6);
}
.carousel-alt .carousel-indicators li {
  box-sizing: content-box;
  width: 12px;
  height: 12px;
  margin-top: 5px;
  margin-bottom: 5px;
  overflow: hidden;
  border: none;
  border-radius: 25px;
  text-indent: -9999px;
}
.carousel-alt .carousel-indicators li.active {
  border-color: var(--accent);
  background-color: var(--accent);
}
.carousel-alt.chevron-on .carousel-indicators li.active:before {
  top: 4px;
  left: 4px;
  padding-top: 5px;
  content: "\f054";
  color: var(--accent);
  font-size: 1.6018066406em;
}
@media only screen and (min-width : 768px) {
  .carousel-alt.text-indicators {
    max-width: 900px;
  }
  .carousel-alt.text-indicators:before {
    padding-top: 46.6666666667%;
  }
  .carousel-alt.text-indicators .carousel-inner {
    width: 70%;
  }
  .carousel-alt.text-indicators .carousel-inner > .carousel-item {
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  .carousel-alt.text-indicators .carousel-inner > .carousel-item:before {
    display: inline-block;
    /* width: 100%; */
    width: 1px;
    margin-left: -1px;
    padding-top: 66.6666666667%;
    content: "";
  }
  .carousel-alt.text-indicators .carousel-inner > .carousel-item a {
    float: left;
  }
  .carousel-alt.text-indicators a[class^=carousel-control].right {
    right: 30%;
  }
  .carousel-alt.text-indicators .carousel-indicators {
    display: flex;
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    flex-direction: column;
    width: 30%;
    max-width: 300px;
    height: 100%;
  }
  .carousel-alt.text-indicators .carousel-indicators li {
    -moz-transition: background-color 0.25s ease-out;
    -webkit-transition: background-color 0.25s ease-out;
    display: block;
    position: relative;
    flex: 1 1 20%;
    flex-direction: column;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0.5rem 1rem;
    border: 1px solid hsla(var(--shade-h), calc(var(--shade-s) - var(--shade-s) * 0.25), calc(var(--shade-l) + (100% - var(--shade-l)) * 0.5), 1);
    border-radius: 0;
    background-color: hsla(var(--shade-h), calc(var(--shade-s) - var(--shade-s) * 0.375), calc(var(--shade-l) + (100% - var(--shade-l)) * 0.75), 1);
    font-size: 1.125em;
    text-align: left;
    text-indent: 0;
    transition: background-color 0.25s ease-out;
  }
  .carousel-alt.text-indicators .carousel-indicators li:first-child {
    border-top: 0;
  }
  .carousel-alt.text-indicators .carousel-indicators li:last-child {
    border-bottom: 0;
  }
  .carousel-alt.text-indicators .carousel-indicators li.active {
    padding-right: 10px;
    border-right: var(--accent) 10px solid;
    background-color: hsla(var(--shade-h), calc(var(--shade-s) + (100% - var(--shade-s)) * 0.015), calc(var(--shade-l) - var(--shade-l) * 0.15), 1);
    color: white;
  }
}

.carousel-control-prev,
.carousel-control-next {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 20%;
  min-width: 48px;
  min-width: 3rem;
  background-color: rgba(0, 0, 0, 0);
  font-size: 1.125em;
  text-align: center;
}
@media only screen and (min-width : 768px) {
  .no-controls .carousel-control-prev,
  .no-controls .carousel-control-next {
    display: none;
  }
  .carousel-control-prev,
  .carousel-control-next {
    width: 10%;
  }
}
@media only screen and (min-width : 768px) {
}
@media only screen and (min-width : 1024px) {
  .carousel-control-prev,
  .carousel-control-next {
    width: 5%;
  }
}
.carousel-control-prev:hover, .carousel-control-prev:focus,
.carousel-control-next:hover,
.carousel-control-next:focus {
  outline: 0;
  color: var(--accent);
  text-decoration: none;
}
.carousel-control-prev .fa,
.carousel-control-next .fa {
  display: inline-block;
  z-index: 5;
  position: absolute;
  top: 50%;
  margin-top: -10px;
}

.carousel-control-prev .fa {
  left: 50%;
  margin-left: -10px;
}

.carousel-control-next {
  right: 0;
  left: auto;
}
.carousel-control-next .fa {
  right: 50%;
  margin-right: -10px;
}

@media only screen and (min-width : 768px) {
  .carousel-control-prev .fas,
  .carousel-control-next .fas {
    width: 1.6875em;
    height: 1.6875em;
    margin-top: -0.5625em;
    font-size: 1.6875em;
  }
  .carousel-control-prev .fa {
    margin-left: -0.5625em;
  }
  .carousel-control-next .fa {
    margin-right: -0.5625em;
  }
}
.icon-toggle_bars-times:before {
  content: "\f2d3";
}
.collapsed > .icon-toggle_bars-times:before, .collapsed .icon-toggle_bars-times:before {
  content: "\f0c9";
}

.icon-toggle_plus-minus:before {
  content: "\f0fe";
}
.show > .icon-toggle_plus-minus:before {
  content: "\f146";
}

.icon-toggle_plus-minus-sub:before {
  content: "\f068";
}
.collapsed > .icon-toggle_plus-minus-sub:before, .collapsed .icon-toggle_plus-minus-sub:before {
  content: "\f067";
}

.navbar {
  font-family: var(--font-family_accent);
}

.dropdown-menu {
  font-family: var(--font-family_ui);
}

.nav-link {
  padding-right: 4px;
  padding-right: 0.25rem;
  padding-left: 4px;
  padding-left: 0.25rem;
}

.navbar-dark .navbar-nav .nav-link {
  color: inherit;
}

.navbar-primary .dropdown-toggle:after {
  display: none;
}

.navbar-primary .nav-item .nav-link {
  color: inherit;
}

.navbar-primary .nav-item:hover, .navbar-primary .nav-item:focus-visible {
  border-top-color: var(--accent);
  border-bottom-color: #fff;
  background-color: #fff;
  color: var(--acc);
}
@media only screen and (min-width : 768px) {
  .navbar-primary .nav-item {
    border-top: 0.25rem var(--acc) solid;
    border-bottom: 0.25rem var(--acc) solid;
  }
  .navbar-primary .nav-item:hover, .navbar-primary .nav-item:focus-visible {
    border-top-color: var(--accent);
    border-bottom-color: #fff;
    background-color: #fff;
    color: var(--acc);
  }
}

@media only screen and (min-width : 1024px) {
  .navbar-primary .navbar-nav .nav-item {
    border-top: 0.25rem var(--acc) solid;
    border-bottom: 0.25rem var(--acc) solid;
  }
  .navbar-primary .navbar-nav .nav-item .nav-link, .navbar-primary .navbar-nav .nav-item .nav-link:hover, .navbar-primary .navbar-nav .nav-item .nav-link:focus-visible {
    color: inherit;
  }
  .navbar-primary .navbar-nav .nav-item:hover, .navbar-primary .navbar-nav .nav-item:focus-visible {
    border-top-color: var(--accent);
    border-bottom-color: #fff;
    background-color: #fff;
    color: var(--acc);
  }
  .navbar-primary .navbar-nav .nav-item:hover .nav-link, .navbar-primary .navbar-nav .nav-item:hover .nav-link:hover, .navbar-primary .navbar-nav .nav-item:hover .nav-link:focus-visible, .navbar-primary .navbar-nav .nav-item:focus-visible .nav-link, .navbar-primary .navbar-nav .nav-item:focus-visible .nav-link:hover, .navbar-primary .navbar-nav .nav-item:focus-visible .nav-link:focus-visible {
    color: inherit;
  }
}

@media only screen and (min-width : 1024px) {
  .collapse.block\:lg {
    display: block;
  }
}
.dropdown-item {
  color: hsla(var(--primary-h), calc(var(--primary-s) + (100% - var(--primary-s)) * 0.015), calc(var(--primary-l) - var(--primary-l) * 0.15), 1);
}
.dropdown-item:hover, .dropdown-item:focus-visible {
  background-color: var(--accent);
  color: white;
}

.dropdown_column {
  min-width: 70vw;
}

@media only screen and (min-width : 768px) {
  .dropdown_column {
    min-width: 20rem;
  }
}
.navbar-primary .navbar-nav .nav-item.active {
  border-top-color: hsla(var(--secondary-h), calc(var(--secondary-s) - var(--secondary-s) * 0.125), calc(var(--secondary-l) + (100% - var(--secondary-l)) * 0.25), 1);
  border-bottom-color: hsla(var(--secondary-h), calc(var(--secondary-s) - var(--secondary-s) * 0.125), calc(var(--secondary-l) + (100% - var(--secondary-l)) * 0.25), 1);
  background-color: hsla(var(--secondary-h), calc(var(--secondary-s) - var(--secondary-s) * 0.125), calc(var(--secondary-l) + (100% - var(--secondary-l)) * 0.25), 1);
  color: #fff;
}
.navbar-primary .navbar-nav .nav-item.active .nav-link.active {
  color: inherit;
}
.navbar-primary .navbar-nav .nav-item.active:hover {
  border-top-color: var(--accent);
  color: var(--acc);
}

.accordion i.icon-toggle_plus-minus:before {
  content: "\f146";
}
.accordion .collapsed i.icon-toggle_plus-minus:before {
  content: "\f0fe";
}

/** SCSS DOC: __globalshame_framework.scss **/
/*# sourceMappingURL=maps/library_boot.css.map */
