@charset "UTF-8";
/** Function Test **/
/**
 * arches - Global style system focused on utility classes
 * @version v1.2.0
 * @link https://github.com/ACC-Style/Arches/
 */
/**  Pre Header - modular scale default break points utility    *********************************/
/**  Version: 1.1.0    *********************************/
/*  
get-themecolor()

Gets a color value that fits into the set color patterns for usage in new css.

 $key - The color name to be modified [primary,secondary,etc...]
 $modifier   - The color shift you desire default is 0 but you can pass in [-5,-4,...0,1...4,5]. 

 Styleguide: mixins.get-themecolor
*/
/*  
util-style()

Gets utilty style and prints it.

 $key - The name of the css class
 $modifier   - the size of the style needed. 

 Styleguide: mixins.utlity-style
*/
.carousel-alt.chevron-on .carousel-indicators li.active:before, .icon-after:after, a.link[target=_blank]:after, a.link[href^=http][target=_blank]:after, a.link[href^=https][target=_blank]:after, a.link[href^="mailto:"]:after, a.link[href^="tel:"]:after,
a.link-light[target=_blank]:after,
a.link-light[href^=http][target=_blank]:after,
a.link-light[href^=https][target=_blank]:after,
a.link-light[href^="mailto:"]:after,
a.link-light[href^="tel:"]:after,
.reading-typography a[target=_blank]:after,
.reading-typography a[href^=http][target=_blank]:after,
.reading-typography a[href^=https][target=_blank]:after,
.reading-typography a[href^="mailto:"]:after,
.reading-typography a[href^="tel:"]:after, .icon-before:before, a.link[href$=".pdf"]:before, a.link[href$=".doc"]:before, a.link[href$=".docx"]:before, a.link[href$=".txt"]:before, a.link[href$=".zip"]:before, a.link[href*=".ppt"]:before, a.link[href*=".pptx"]:before, a.link[href$=".csv"]:before, a.link[href$=".xls"]:before, a.link[href$=".xlsx"]:before, a.link[href$=".mp4"]:before, a.link[href$=".mov"]:before,
a.link-light[href$=".pdf"]:before,
a.link-light[href$=".doc"]:before,
a.link-light[href$=".docx"]:before,
a.link-light[href$=".txt"]:before,
a.link-light[href$=".zip"]:before,
a.link-light[href*=".ppt"]:before,
a.link-light[href*=".pptx"]:before,
a.link-light[href$=".csv"]:before,
a.link-light[href$=".xls"]:before,
a.link-light[href$=".xlsx"]:before,
a.link-light[href$=".mp4"]:before,
a.link-light[href$=".mov"]:before,
.reading-typography a[href$=".pdf"]:before,
.reading-typography a[href$=".doc"]:before,
.reading-typography a[href$=".docx"]:before,
.reading-typography a[href$=".txt"]:before,
.reading-typography a[href$=".zip"]:before,
.reading-typography a[href*=".ppt"]:before,
.reading-typography a[href*=".pptx"]:before,
.reading-typography a[href$=".csv"]:before,
.reading-typography a[href$=".xls"]:before,
.reading-typography a[href$=".xlsx"]:before,
.reading-typography a[href$=".mp4"]:before,
.reading-typography a[href$=".mov"]:before {
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-family: "Font Awesome 5 Pro";
  font-style: normal;
  font-variant: normal;
  font-weight: 900;
  line-height: 1;
  text-rendering: auto;
}

/**Set Active Class**/
/** Utility Class Built on top of Bootstrap ^4.4.1 **/
/** Built With Base Branding 1.2.0 **/
/**  ACC Brands    *********************************/
/** Built With acc Branding **/
/**  Default Brands    *********************************/
/**  Colors  **/
/**  Fonts  **/
/* Define the "system" font family */
@font-face {
  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;
  font-style: normal;
  font-weight: 300;
}
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  **/
/*!
 * 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: #7742bd;
  --bs-pink: #e83e8c;
  --bs-red: #dd1a1a;
  --bs-orange: #da8210;
  --bs-yellow: #ffc107;
  --bs-green: #078a2e;
  --bs-teal: #198dae;
  --bs-cyan: #17a2b8;
  --bs-white: white;
  --bs-gray: #a1a0a0;
  --bs-gray-dark: #d0d0d0;
  --bs-primary: #198dae;
  --bs-secondary: #676a72;
  --bs-success: #078a2e;
  --bs-accent: #16a385;
  --bs-info: #a3988c;
  --bs-warning: #da8210;
  --bs-alert: #dd1a1a;
  --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));
}

*,
*::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: white;
  color: #131212;
  font-family: var(--bs-font-sans-serif);
  font-size: 16px;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
}

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-family: "Maven Pro","Muli","Open Sans","system",sans-serif;
  font-weight: 300;
  line-height: 1.35;
}

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: #7c8089;
}

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-family: var(--bs-font-monospace);
  font-size: 1em;
  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: white;
  font-size: 0.875em;
}
kbd kbd {
  padding: 0;
  font-size: 1em;
  font-weight: 700;
}

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-family: inherit;
  font-size: inherit;
  line-height: 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-size: 20px;
  font-size: 1.25rem;
  font-weight: 300;
}

.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: white;
}

.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: 480px) {
  .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(var(--bs-gutter-y) * -1);
  margin-right: calc(var(--bs-gutter-x) / -2);
  margin-left: calc(var(--bs-gutter-x) / -2);
}
.row > * {
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  margin-top: var(--bs-gutter-y);
  padding-right: calc(var(--bs-gutter-x) / 2);
  padding-left: calc(var(--bs-gutter-x) / 2);
}

.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.3333333333%;
}

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

.col-2 {
  width: 16.6666666667%;
}

.col-3 {
  width: 25%;
}

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

.col-4 {
  width: 33.3333333333%;
}

.col-5 {
  width: 41.6666666667%;
}

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

.col-6 {
  width: 50%;
}

.col-7 {
  width: 58.3333333333%;
}

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

.col-8 {
  width: 66.6666666667%;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.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: 480px) {
  .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.3333333333%;
  }

  .col-sm-2 {
    flex: 0 0 auto;
    width: 16.6666666667%;
  }

  .col-sm-3 {
    flex: 0 0 auto;
    width: 25%;
  }

  .col-sm-4 {
    flex: 0 0 auto;
    width: 33.3333333333%;
  }

  .col-sm-5 {
    flex: 0 0 auto;
    width: 41.6666666667%;
  }

  .col-sm-6 {
    flex: 0 0 auto;
    width: 50%;
  }

  .col-sm-7 {
    flex: 0 0 auto;
    width: 58.3333333333%;
  }

  .col-sm-8 {
    flex: 0 0 auto;
    width: 66.6666666667%;
  }

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

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

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

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

  .offset-sm-0 {
    margin-left: 0;
  }

  .offset-sm-1 {
    margin-left: 8.3333333333%;
  }

  .offset-sm-2 {
    margin-left: 16.6666666667%;
  }

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

  .offset-sm-4 {
    margin-left: 33.3333333333%;
  }

  .offset-sm-5 {
    margin-left: 41.6666666667%;
  }

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

  .offset-sm-7 {
    margin-left: 58.3333333333%;
  }

  .offset-sm-8 {
    margin-left: 66.6666666667%;
  }

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

  .offset-sm-10 {
    margin-left: 83.3333333333%;
  }

  .offset-sm-11 {
    margin-left: 91.6666666667%;
  }

  .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.3333333333%;
  }

  .col-md-2 {
    flex: 0 0 auto;
    width: 16.6666666667%;
  }

  .col-md-3 {
    flex: 0 0 auto;
    width: 25%;
  }

  .col-md-4 {
    flex: 0 0 auto;
    width: 33.3333333333%;
  }

  .col-md-5 {
    flex: 0 0 auto;
    width: 41.6666666667%;
  }

  .col-md-6 {
    flex: 0 0 auto;
    width: 50%;
  }

  .col-md-7 {
    flex: 0 0 auto;
    width: 58.3333333333%;
  }

  .col-md-8 {
    flex: 0 0 auto;
    width: 66.6666666667%;
  }

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

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

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

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

  .offset-md-0 {
    margin-left: 0;
  }

  .offset-md-1 {
    margin-left: 8.3333333333%;
  }

  .offset-md-2 {
    margin-left: 16.6666666667%;
  }

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

  .offset-md-4 {
    margin-left: 33.3333333333%;
  }

  .offset-md-5 {
    margin-left: 41.6666666667%;
  }

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

  .offset-md-7 {
    margin-left: 58.3333333333%;
  }

  .offset-md-8 {
    margin-left: 66.6666666667%;
  }

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

  .offset-md-10 {
    margin-left: 83.3333333333%;
  }

  .offset-md-11 {
    margin-left: 91.6666666667%;
  }

  .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.3333333333%;
  }

  .col-lg-2 {
    flex: 0 0 auto;
    width: 16.6666666667%;
  }

  .col-lg-3 {
    flex: 0 0 auto;
    width: 25%;
  }

  .col-lg-4 {
    flex: 0 0 auto;
    width: 33.3333333333%;
  }

  .col-lg-5 {
    flex: 0 0 auto;
    width: 41.6666666667%;
  }

  .col-lg-6 {
    flex: 0 0 auto;
    width: 50%;
  }

  .col-lg-7 {
    flex: 0 0 auto;
    width: 58.3333333333%;
  }

  .col-lg-8 {
    flex: 0 0 auto;
    width: 66.6666666667%;
  }

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

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

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

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

  .offset-lg-0 {
    margin-left: 0;
  }

  .offset-lg-1 {
    margin-left: 8.3333333333%;
  }

  .offset-lg-2 {
    margin-left: 16.6666666667%;
  }

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

  .offset-lg-4 {
    margin-left: 33.3333333333%;
  }

  .offset-lg-5 {
    margin-left: 41.6666666667%;
  }

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

  .offset-lg-7 {
    margin-left: 58.3333333333%;
  }

  .offset-lg-8 {
    margin-left: 66.6666666667%;
  }

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

  .offset-lg-10 {
    margin-left: 83.3333333333%;
  }

  .offset-lg-11 {
    margin-left: 91.6666666667%;
  }

  .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.3333333333%;
  }

  .col-xl-2 {
    flex: 0 0 auto;
    width: 16.6666666667%;
  }

  .col-xl-3 {
    flex: 0 0 auto;
    width: 25%;
  }

  .col-xl-4 {
    flex: 0 0 auto;
    width: 33.3333333333%;
  }

  .col-xl-5 {
    flex: 0 0 auto;
    width: 41.6666666667%;
  }

  .col-xl-6 {
    flex: 0 0 auto;
    width: 50%;
  }

  .col-xl-7 {
    flex: 0 0 auto;
    width: 58.3333333333%;
  }

  .col-xl-8 {
    flex: 0 0 auto;
    width: 66.6666666667%;
  }

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

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

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

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

  .offset-xl-0 {
    margin-left: 0;
  }

  .offset-xl-1 {
    margin-left: 8.3333333333%;
  }

  .offset-xl-2 {
    margin-left: 16.6666666667%;
  }

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

  .offset-xl-4 {
    margin-left: 33.3333333333%;
  }

  .offset-xl-5 {
    margin-left: 41.6666666667%;
  }

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

  .offset-xl-7 {
    margin-left: 58.3333333333%;
  }

  .offset-xl-8 {
    margin-left: 66.6666666667%;
  }

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

  .offset-xl-10 {
    margin-left: 83.3333333333%;
  }

  .offset-xl-11 {
    margin-left: 91.6666666667%;
  }

  .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-striped-color: #131212;
  --bs-table-striped-bg: rgba(19, 18, 18, 0.05);
  --bs-table-active-color: #131212;
  --bs-table-active-bg: rgba(19, 18, 18, 0.1);
  --bs-table-hover-color: #131212;
  --bs-table-hover-bg: rgba(19, 18, 18, 0.075);
  width: 100%;
  margin-bottom: 16px;
  margin-bottom: 1rem;
  border-color: #f0f0f1;
  color: #131212;
  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(:last-child) > :last-child > * {
  border-bottom-color: 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-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: #131212;
  --bs-table-active-bg: #bed3d9;
  --bs-table-active-color: #131212;
  --bs-table-hover-bg: #c3d8de;
  --bs-table-hover-color: #131212;
  border-color: #bed3d9;
  color: #131212;
}

.table-secondary {
  --bs-table-bg: #e1e1e3;
  --bs-table-striped-bg: #d7d7d9;
  --bs-table-striped-color: #131212;
  --bs-table-active-bg: #ccccce;
  --bs-table-active-color: #131212;
  --bs-table-hover-bg: #d2d1d3;
  --bs-table-hover-color: #131212;
  border-color: #ccccce;
  color: #131212;
}

.table-success {
  --bs-table-bg: #cde8d5;
  --bs-table-striped-bg: #c4ddcb;
  --bs-table-striped-color: #131212;
  --bs-table-active-bg: #bad3c2;
  --bs-table-active-color: #131212;
  --bs-table-hover-bg: #bfd8c6;
  --bs-table-hover-color: #131212;
  border-color: #bad3c2;
  color: #131212;
}

.table-accent {
  --bs-table-bg: #d0ede7;
  --bs-table-striped-bg: #c7e2dc;
  --bs-table-striped-color: #131212;
  --bs-table-active-bg: #bdd7d2;
  --bs-table-active-color: #131212;
  --bs-table-hover-bg: #c2ddd7;
  --bs-table-hover-color: #131212;
  border-color: #bdd7d2;
  color: #131212;
}

.table-info {
  --bs-table-bg: #edeae8;
  --bs-table-striped-bg: #e2dfdd;
  --bs-table-striped-color: #131212;
  --bs-table-active-bg: #d7d4d3;
  --bs-table-active-color: #131212;
  --bs-table-hover-bg: #dddad8;
  --bs-table-hover-color: #131212;
  border-color: #d7d4d3;
  color: #131212;
}

.table-warning {
  --bs-table-bg: #f8e6cf;
  --bs-table-striped-bg: #eddbc6;
  --bs-table-striped-color: #131212;
  --bs-table-active-bg: #e1d1bc;
  --bs-table-active-color: #131212;
  --bs-table-hover-bg: #e7d6c1;
  --bs-table-hover-color: #131212;
  border-color: #e1d1bc;
  color: #131212;
}

.table-alert {
  --bs-table-bg: #f8d1d1;
  --bs-table-striped-bg: #edc7c7;
  --bs-table-striped-color: #131212;
  --bs-table-active-bg: #e1bebe;
  --bs-table-active-color: #131212;
  --bs-table-hover-bg: #e7c3c3;
  --bs-table-hover-color: #131212;
  border-color: #e1bebe;
  color: #131212;
}

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

@media (max-width: 479.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 {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  display: block;
  width: 100%;
  padding: 8px 16px;
  padding: 0.5rem 1rem;
  border: 1px solid #717171;
  border-radius: 6px;
  background-clip: padding-box;
  background-color: white;
  color: #131212;
  font-size: 16px;
  font-size: 1rem;
  font-weight: 400;
  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: white;
  box-shadow: 0 0 0 0.2rem rgba(25, 141, 174, 0.25);
  color: #131212;
}
.form-control::-webkit-date-and-time-value {
  height: 1.6em;
}
.form-control::-moz-placeholder {
  color: #a1a0a0;
  opacity: 1;
}
.form-control:-ms-input-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;
  -webkit-margin-end: 16px;
          margin-inline-end: 16px;
  -webkit-margin-end: 1rem;
          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: #198dae;
  color: white;
  pointer-events: none;
}
.form-control:hover:not(:disabled):not([readonly])::file-selector-button {
  background-color: #10596e;
}
.form-control::-webkit-file-upload-button {
  margin: -8px -16px;
  margin: -0.5rem -1rem;
  -webkit-margin-end: 16px;
          margin-inline-end: 16px;
  -webkit-margin-end: 1rem;
          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: #198dae;
  color: white;
  pointer-events: none;
}
.form-control:hover:not(:disabled):not([readonly])::-webkit-file-upload-button {
  background-color: #10596e;
}

.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: #131212;
  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;
  -webkit-margin-end: 8px;
          margin-inline-end: 8px;
  -webkit-margin-end: 0.5rem;
          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;
  -webkit-margin-end: 8px;
          margin-inline-end: 8px;
  -webkit-margin-end: 0.5rem;
          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;
  -webkit-margin-end: 16px;
          margin-inline-end: 16px;
  -webkit-margin-end: 1rem;
          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;
  -webkit-margin-end: 16px;
          margin-inline-end: 16px;
  -webkit-margin-end: 1rem;
          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 {
  max-width: 48px;
  max-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 {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  display: block;
  width: 100%;
  padding: 8px 48px 8px 16px;
  padding: 0.5rem 3rem 0.5rem 1rem;
  border: 1px solid #717171;
  border-radius: 6px;
  background-color: white;
  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-repeat: no-repeat;
  background-size: 16px 12px;
  color: #131212;
  font-size: 16px;
  font-size: 1rem;
  font-weight: 400;
  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 #131212;
}

.form-select-sm {
  padding-top: 4px;
  padding-top: 0.25rem;
  padding-bottom: 4px;
  padding-bottom: 0.25rem;
  padding-left: 8px;
  padding-left: 0.5rem;
  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;
  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;
  -webkit-print-color-adjust: exact;
          color-adjust: exact;
  width: 1em;
  height: 1em;
  margin-top: 0.3em;
  border: 1px solid rgba(0, 0, 0, 0.25);
  background-color: white;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  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='white' 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='white'/%3e%3c/svg%3e");
}
.form-check-input[type=checkbox]:indeterminate {
  border-color: #198dae;
  background-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='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e");
}
.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='white'/%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 white, 0 0 0 0.2rem rgba(25, 141, 174, 0.25);
}
.form-range:focus::-moz-range-thumb {
  box-shadow: 0 0 0 1px white, 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);
  padding: 16px 16px;
  padding: 1rem 1rem;
}
.form-floating > label {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  padding: 16px 16px;
  padding: 1rem 1rem;
  transform-origin: 0 0;
  border: 1px solid transparent;
  pointer-events: none;
}
.form-floating > .form-control::-moz-placeholder {
  color: transparent;
}
.form-floating > .form-control:-ms-input-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:not(:-ms-input-placeholder) {
  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:not(:-ms-input-placeholder) ~ 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: #dddee0;
  color: #131212;
  font-size: 16px;
  font-size: 1rem;
  font-weight: 400;
  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: white;
  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: 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: white;
  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: 3;
}

.btn {
  display: inline-block;
  padding: 8px 16px;
  padding: 0.5rem 1rem;
  border: 1px solid transparent;
  border-radius: 6px;
  background-color: transparent;
  color: #131212;
  font-size: 16px;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.btn:hover {
  color: #131212;
  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: white;
}
.btn-primary:hover,.btn-check:focus + .btn-primary, .btn-primary:focus {
  border-color: #14718b;
  background-color: #157894;
  color: white;
}
.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: white;
}
.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: white;
}

.btn-secondary {
  border-color: #676a72;
  background-color: #676a72;
  color: white;
}
.btn-secondary:hover,.btn-check:focus + .btn-secondary, .btn-secondary:focus {
  border-color: #52555b;
  background-color: #585a61;
  color: white;
}
.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: white;
}
.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: white;
}

.btn-success {
  border-color: #078a2e;
  background-color: #078a2e;
  color: white;
}
.btn-success:hover,.btn-check:focus + .btn-success, .btn-success:focus {
  border-color: #066e25;
  background-color: #067527;
  color: white;
}
.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: white;
}
.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: white;
}

.btn-accent {
  border-color: #16a385;
  background-color: #16a385;
  color: white;
}
.btn-accent:hover,.btn-check:focus + .btn-accent, .btn-accent:focus {
  border-color: #12826a;
  background-color: #138b71;
  color: white;
}
.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: white;
}
.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: white;
}

.btn-info {
  border-color: #a3988c;
  background-color: #a3988c;
  color: #131212;
}
.btn-info:hover,.btn-check:focus + .btn-info, .btn-info:focus {
  border-color: #aca298;
  background-color: #b1a79d;
  color: #131212;
}
.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: #131212;
}
.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: #131212;
}

.btn-warning {
  border-color: #da8210;
  background-color: #da8210;
  color: #131212;
}
.btn-warning:hover,.btn-check:focus + .btn-warning, .btn-warning:focus {
  border-color: #de8f28;
  background-color: #e09534;
  color: #131212;
}
.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: #131212;
}
.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: #131212;
}

.btn-alert {
  border-color: #dd1a1a;
  background-color: #dd1a1a;
  color: white;
}
.btn-alert:hover,.btn-check:focus + .btn-alert, .btn-alert:focus {
  border-color: #b11515;
  background-color: #bc1616;
  color: white;
}
.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: white;
}
.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: white;
}

.btn-outline-primary {
  border-color: #198dae;
  color: #198dae;
}
.btn-outline-primary:hover {
  border-color: #198dae;
  background-color: #198dae;
  color: white;
}
.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: white;
}
.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: white;
}
.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: white;
}
.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: white;
}
.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: white;
}
.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: white;
}
.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: white;
}
.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: #131212;
}
.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: #131212;
}
.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: #131212;
}
.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: #131212;
}
.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: white;
}
.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: white;
}
.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;
}

.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;
  vertical-align: 0.255em;
  content: "";
}
.dropdown-toggle:empty::after {
  margin-left: 0;
}

.dropdown-menu {
  display: none;
  z-index: 1000;
  position: absolute;
  top: 100%;
  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: white;
  color: #131212;
  font-size: 16px;
  font-size: 1rem;
  list-style: none;
  text-align: left;
}
.dropdown-menu[data-bs-popper] {
  left: 0;
  margin-top: 2px;
  margin-top: 0.125rem;
}

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

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

@media (min-width: 480px) {
  .dropdown-menu-sm-start {
    --bs-position: start;
  }
  .dropdown-menu-sm-start[data-bs-popper] {
    right: auto /* rtl:ignore */;
    left: 0 /* rtl:ignore */;
  }

  .dropdown-menu-sm-end {
    --bs-position: end;
  }
  .dropdown-menu-sm-end[data-bs-popper] {
    right: 0 /* rtl:ignore */;
    left: auto /* rtl:ignore */;
  }
}
@media (min-width: 768px) {
  .dropdown-menu-md-start {
    --bs-position: start;
  }
  .dropdown-menu-md-start[data-bs-popper] {
    right: auto /* rtl:ignore */;
    left: 0 /* rtl:ignore */;
  }

  .dropdown-menu-md-end {
    --bs-position: end;
  }
  .dropdown-menu-md-end[data-bs-popper] {
    right: 0 /* rtl:ignore */;
    left: auto /* rtl:ignore */;
  }
}
@media (min-width: 1024px) {
  .dropdown-menu-lg-start {
    --bs-position: start;
  }
  .dropdown-menu-lg-start[data-bs-popper] {
    right: auto /* rtl:ignore */;
    left: 0 /* rtl:ignore */;
  }

  .dropdown-menu-lg-end {
    --bs-position: end;
  }
  .dropdown-menu-lg-end[data-bs-popper] {
    right: 0 /* rtl:ignore */;
    left: auto /* rtl:ignore */;
  }
}
@media (min-width: 1200px) {
  .dropdown-menu-xl-start {
    --bs-position: start;
  }
  .dropdown-menu-xl-start[data-bs-popper] {
    right: auto /* rtl:ignore */;
    left: 0 /* rtl:ignore */;
  }

  .dropdown-menu-xl-end {
    --bs-position: end;
  }
  .dropdown-menu-xl-end[data-bs-popper] {
    right: 0 /* rtl:ignore */;
    left: auto /* rtl:ignore */;
  }
}
.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;
  vertical-align: 0.255em;
  content: "";
}
.dropup .dropdown-toggle:empty::after {
  margin-left: 0;
}

.dropend .dropdown-menu {
  top: 0;
  right: auto;
  left: 100%;
}
.dropend .dropdown-menu[data-bs-popper] {
  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;
  vertical-align: 0.255em;
  content: "";
}
.dropend .dropdown-toggle:empty::after {
  margin-left: 0;
}
.dropend .dropdown-toggle::after {
  vertical-align: 0;
}

.dropstart .dropdown-menu {
  top: 0;
  right: 100%;
  left: auto;
}
.dropstart .dropdown-menu[data-bs-popper] {
  margin-top: 0;
  margin-right: 2px;
  margin-right: 0.125rem;
}
.dropstart .dropdown-toggle::after {
  display: inline-block;
  margin-left: 0.255em;
  vertical-align: 0.255em;
  content: "";
  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;
  vertical-align: 0.255em;
  content: "";
}
.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: #0e6754;
  color: #d0d0d0;
  text-decoration: none;
}
.dropdown-item.active, .dropdown-item:active {
  background-color: #198dae;
  color: white;
  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: white;
}
.dropdown-menu-dark .dropdown-item.active, .dropdown-menu-dark .dropdown-item:active {
  background-color: #198dae;
  color: white;
}
.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;
}
.nav-link:hover, .nav-link:focus {
  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 white;
  background-color: white;
  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: white;
}

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

.nav-justified > .nav-link,
.nav-justified .nav-item {
  flex-basis: 0;
  flex-grow: 1;
  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-basis: 100%;
  flex-grow: 1;
  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-repeat: no-repeat;
  background-size: 100%;
  vertical-align: middle;
}

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

@media (min-width: 480px) {
  .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 {
    display: none;
  }
}
@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 {
    display: none;
  }
}
@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 {
    display: none;
  }
}
@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 {
    display: none;
  }
}
.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 {
  display: none;
}
.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,.navbar-dark .navbar-nav .nav-link {
  color: white;
}
.navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .nav-link:focus {
  color: #004176;
}
.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: white;
}
.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,.navbar-dark .navbar-text a,
.navbar-dark .navbar-text a:hover,
.navbar-dark .navbar-text a:focus {
  color: white;
}

.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: white;
}
.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: 480px) {
  .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 {
  overflow-anchor: none;
  display: flex;
  position: relative;
  align-items: center;
  width: 100%;
  padding: 16px 20px;
  padding: 1rem 1.25rem;
  border: 0;
  border-radius: 0;
  background-color: white;
  color: #131212;
  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='%23131212'%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-repeat: no-repeat;
  background-size: 1.25rem;
  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 {
  margin-bottom: -1px;
  border: 1px solid rgba(19, 18, 18, 0.125);
  background-color: white;
}
.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:last-of-type {
  margin-bottom: 0;
  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;
  color: #a1a0a0;
  content: var(--bs-breadcrumb-divider, "/") /* rtl: var(--bs-breadcrumb-divider, "/") */;
}
.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: white;
  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: white;
}
.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: white;
  font-size: 0.75em;
  font-weight: 700;
  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: white;
  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: #131212;
}

.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: white;
  color: #061f26;
}
.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: white;
}
.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: 480px) {
  .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: white;
}

.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: white;
}

.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: white;
}

.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: white;
}

.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: white;
}

.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: white;
}

.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: white;
}

.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='%23131212'%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: #131212;
  opacity: 0.5;
}
.btn-close:hover {
  color: #131212;
  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;
      -ms-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 hsla(0, 0%, 0%, 0.05), 0 2px 4px rgba(0,0,0,.3), 1px 5px 5px rgba(0,0,0,.01)";
  font-size: 14px;
  font-size: 0.875rem;
  pointer-events: auto;
}
.toast:not(.showing):not(.show) {
  opacity: 0;
}
.toast.hide {
  display: none;
}

.toast-container {
  width: -webkit-max-content;
  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-open {
  overflow: hidden;
}
.modal-open .modal {
  overflow-x: hidden;
  overflow-y: auto;
}

.modal {
  display: none;
  z-index: 1050;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  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: white;
  pointer-events: auto;
}

.modal-backdrop {
  z-index: 1040;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #131212;
}
.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 #f0f0f1;
  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 #f0f0f1;
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
}
.modal-footer > * {
  margin: 4px;
  margin: 0.25rem;
}

.modal-scrollbar-measure {
  position: absolute;
  top: -9999px;
  width: 50px;
  height: 50px;
  overflow: scroll;
}

@media (min-width: 480px) {
  .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: 479.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-family: var(--bs-font-sans-serif);
  font-size: 14.222px;
  font-size: 0.8888888889rem;
  font-style: normal;
  font-weight: 400;
  letter-spacing: normal;
  line-break: auto;
  line-height: 1.6;
  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: #131212;
}

.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: #131212;
}

.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: #131212;
}

.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: #131212;
}

.tooltip-inner {
  max-width: 200px;
  padding: 4px 8px;
  padding: 0.25rem 0.5rem;
  border-radius: 6px;
  background-color: #131212;
  color: white;
  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: white;
  font-family: var(--bs-font-sans-serif);
  font-size: 14.222px;
  font-size: 0.8888888889rem;
  font-style: normal;
  font-weight: 400;
  letter-spacing: normal;
  line-break: auto;
  line-height: 1.6;
  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: white;
}

.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: white;
}

.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: white;
}
.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: white;
}

.popover-header {
  margin-bottom: 0;
  padding: 8px 16px;
  padding: 0.5rem 1rem;
  border-bottom: 1px solid #d8d8d8;
  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: #131212;
}

.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;
  -webkit-backface-visibility: hidden;
          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: white;
  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: white;
  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-repeat: no-repeat;
  background-size: 100% 100%;
}

/* 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='white'%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='white'%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: white;
  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: white;
  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: #131212;
}
.carousel-dark .carousel-caption {
  color: #131212;
}

@-webkit-keyframes spinner-border {
  to {
    transform: rotate(360deg) /* rtl:ignore */;
  }
}

@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: text-bottom;
  -webkit-animation: 0.75s linear infinite spinner-border;
          animation: 0.75s linear infinite spinner-border;
}

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

@-webkit-keyframes spinner-grow {
  0% {
    transform: scale(0);
  }
  50% {
    transform: none;
    opacity: 1;
  }
}

@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: text-bottom;
  -webkit-animation: 0.75s linear infinite spinner-grow;
          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: 1040;
  position: fixed;
  bottom: 0;
  flex-direction: column;
  max-width: 100%;
  outline: 0;
  background-clip: padding-box;
  background-color: white;
}

.offcanvas-header {
  display: flex;
  justify-content: space-between;
  padding: 16px 16px;
  padding: 1rem 1rem;
}
.offcanvas-header .btn-close {
  margin: -8px -8px -8px auto;
  margin: -0.5rem -0.5rem -0.5rem auto;
  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-bottom {
  right: 0;
  left: 0;
  height: 30vh;
  max-height: 100%;
  transform: translateY(100%);
  border-top: 1px solid rgba(19, 18, 18, 0.2);
}

.offcanvas.show {
  transform: none;
}

.offcanvas-backdrop::before {
  z-index: 1039;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(19, 18, 18, 0.5);
  content: "";
}

.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: calc(3 / 4 * 100%);
}

.ratio-16x9 {
  --bs-aspect-ratio: calc(9 / 16 * 100%);
}

.ratio-21x9 {
  --bs-aspect-ratio: calc(9 / 21 * 100%);
}

.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: 480px) {
  .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;
  }
}
.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;
}

/*
	Recipes

	Combination of UCs can make complex and rich UI elements.  Here is a collection of curated UI that can be used in projects by just following these patterns.

	Weight: 900

	Styleguide Recipes

*/
/* Nav Recipes.00x */
/*
    Mobile Nav

    Placed in applications used for navigation in mobile apps.

    Markup:
    <div class="texture-medium bg_shade-3 relative" style="max-width:412px;max-height:732px;width:100vw;height:100vh">
    <div id="nav" class="bg_acc c_white shadow_3 font_2 flex sticky b_0 l_0 r_0 w_100">
        <a href="#/" class="text_center p_2 flex_auto center clear c_shade-5 c_white hover-text_primary-4 m-bottom_0 router-link-exact-active router-link-active"><i class="fas m_2 fa-sign-out-alt"></i></a>
        <a href="#/search" class="text_center p_2 flex_auto center clear c_shade-5 c_white hover-text_primary-4 m-bottom_0"><i class="fas m_2 fa-search"></i></a>
        <a href="#/shared" class="text_center p_2 flex_auto center clear c_shade-5 c_white hover-text_primary-4 m-bottom_0"><span class="fa-layers fa-fw"><i class="fas m_2 fa-share-alt-square"></i></span></a>
        <a href="#/history" class="text_center p_2 flex_auto center clear c_shade-5 c_white hover-text_primary-4 m-bottom_0"><span class="fa-layers fa-fw"><i class="fas m_2 fa-history"></i></span></a>
        <a href="#/about" class="text_center p_2 flex_auto center clear c_shade-5 c_white hover-text_primary-4 m-bottom_0"><i class="fas m_2 fa-info-square"></i></a>
    </div>
    </div>

    Styleguide Recipes.mobile nav
*/
/* Nav Recipes.04x */
.address {
  font-style: unset;
}

@media only screen and (min-width: 640px) {
  .reverse-indent {
    display: inline-block;
    width: 100%;
    margin-left: 1em;
    padding-right: 1em;
    text-indent: -1em;
  }

  .reverse-indent:after {
    display: table;
    clear: both;
    content: "";
  }
}
/*
    Generic Footer

    This defines the web footer 

    Markup:
<div class="footer">
<div class="p-t_3 p-b_3 p_4 flex br_0 br-t_3 lh_2 br_solid br_shade-n1 c_shade-1 texture_light bg_shade-1">
&nbsp;
</div>
<div class="flex flex_column flex_row:lg justify_between p_4 p_5-large texture_dark" style="
">
<div class="flex_auto max-w_30 p-l_4:md p-r_5:md">
    <div class="logo_primary-alt  max-w_20"><span class="alt">logo_primary-alt max-w_10</span></div>
       {{> "Recipes.Footer.Address" modifier_class=""}}
       {{> "Recipes.Footer.Social" modifier_class=""}}
    </div>
    <div class="flex_shrink p-l_4:md p-r_4:md w_100 w_auto:md">
     {{> "Recipes.Footer.ACC Product Links" modifier_class=""}}
    </div>
</div>
 {{> "Recipes.Footer.Subfooter" modifier_class=""}}
 {{> "Recipes.Footer.Cite" }}
</div>

    Styleguide Recipes.Footer
*/
/*
Sub Footer

Description: ACC has some basic legal information that should be on every property. 

Markup:
<!-- subfooter -->
<div id="subfooter" class="bg_primary font_n1 p-x_4 p-y_4">
    <ul class="block footer-bottom-links ul_none">
        <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 -->


Weight: 0

 Styleguide Recipes.Footer.Subfooter
*/
/*
	Cite and Copyright

	Contains copy right 

	Markup:
    <div class="texture_light bg_shade-1 p_4">
        <cite class="c_shade-1 font_italic font_bold font_n2 p_2 lh_2">&copy; 2015 American College of Cardiology</cite>
    </div>


	Styleguide Recipes.Footer.Cite

*/
/*
Address

Address and contact information for Heart House

Markup:
<section class="address c_white">
    <h3 class=font_accent font_1 m-b_0 font_normal font_regular">American College of Cardiology</h3>
    <address>
        <!-- http://microformats.org/wiki/hcard -->
        <h4 class="m-b_0 font_bold font_copy font_normal font_1 m-t_4">Heart House</h4>
        <div class="flex font_copy font_0">
        <div class="flex_shrink p-r_5 m-r_5">
            <ul class="ul_none  lh_0">
                <li class="m-b_1 m-b_3:md font_normal">
                    <span class="street-address">2400 N. St. NW</span>
                </li>
                <li class="m-b_1 m-b_3:md font_normal">
                    <span class="locality ">Washington</span>,
                    <span class="city-name ">
                <abbr title="District of Colombia">DC</abbr>
                </span>
                    <span class="postal-code">20037</span>
                </li>
                <li class="m-b_1 m-b_3:md font_normal">
                    <a href="mailto:MemberCare@acc.org" class="email c_white text_underline  h:c_white ">
                        <strong class="p-r_2 inline block:md inline:lg">Email:</strong>
                        <span class="inline block:md inline:lg">MemberCare@acc.org</span></a>
                </li>
            </ul>
        </div>
        <div class="flex_auto w_50">
        <ul class="ul_none lh_0">
            <li class="m-b_1 m-b_3:md font_normal">
                <a tel="+12023756000" href="tel:+12023756000" class="tel c_white h:c_white h:underline">
                <strong class="p-r_2 block:md inline:lg">Phone:</strong><span class=" block:md inline:lg">(202) 375-6000, ext. 5603</span></a>
            </li>
            <li class="m-b_1 m-b_3:md font_normal">
                <a tel="+18002574737" href="tel:+18002534636.5603" class="tel c_white h:c_white h:underline">
                <strong class="p-r_2 block:md inline:lg">Toll Free:</strong><span class=" block:md inline:lg">(800) 253-4636, ext. 5603</span></a>
            </li>
            <li class="m-b_1 m-b_3:md font_normal">
                <a fax="+12023757000" href="fax:+12023757000" class="fax c_white h:c_white h:underline">
                <strong class="p-r_2 block:md inline:lg">Fax:</strong>
                <span class="block:md inline:lg">(202) 375-7000</span>
                </a>
            </li>
        </ul>
        </div>
        </div>
    </address>
</section>

MarkupWrapperClasses:
    texture_dark p_4 max-w_30

Styleguide Recipes.Footer.Address

*/
/*
Fat Footers Links

Footers in the ACC sometimes have fat footers with a list of categories and links. 

Markup:
<section class="flex_auto p-x_3 p-y_4:lg w_1-third:lg w_50:md font_ui is-active_toggle-function">
    <h2 class="font_2 font_3:lg font_display p-t_2 m-b_0:md m-b_2 br_none:md ">
        <span class="toggle display_none:md ">
        <i class="fas fa-minus-square c_white-8 p-r_4"></i></span>
        <a class="c_highlight h:c_secondary-3" href="">Conditions &amp; Topics</a>
    </h2>
    <ul class="block:md display_none font_0:lg font_n1 m-b_4 ul_none a:_block">
        <li class="text-indent_n1 p-l_4">
            <a class="c_white h:c_secondary-3 h:underline" href="foo.html">Angina</a>
        </li>
        <li class="text-indent_n1 p-l_4">
            <a class="c_white h:c_secondary-3 h:underline" href="foo.html">Aortic Aneurysm</a>
        </li>
        <li class="text-indent_n1 p-l_4">
            <a class="c_white h:c_secondary-3 h:underline" href="foo.html">Atrial Fibrillation</a>
        </li>
        <li class="text-indent_n1 p-l_4">
            <a class="c_white h:c_secondary-3 h:underline" href="foo.html">Bradycardia</a>
        </li>
    </ul>
</section>

MarkupWrapperClasses:
    texture_dark p_4


Styleguide Recipes.Footer.Fat Footer-Links

*/
/*
ACC Product Links

Links to the other major products in the ACC portfolio 

Markup:
<!-- ACC Product Links -->
<section class="acc-websites flex_auto">
        <h3 class="font_0 font_1:md c_white font_regular font_accent: m-b_3 m-b_4:lg m-t_4:lg m-t_5 text_center text_left:lg w_100">
            Transforming Education to Knowledge</h3>
        <ul class="ul_none lh_2 font_0">
            <li class="c_white">
                <a target="_blank" class="c_white flex flex_row h:bg_black-2 h:c_white justify_between p-x_2 p_3" href="http://www.acc.org">
                    <span class="flex_auto inline-block p-l_3">ACC</span>
                    <i class="c_white fa-external-link-square fas flex_shrink float_right h:c_white p-r_3"></i>
                </a>
            </li>
            <li class="c_white br_solid br_0 br-t_1  br_white-5">
                <a target="_blank" class="h:bg_black-2  h:c_white c_white p-x_2 p_3  justify_between flex flex_row " href="https://cvquality.acc.org/Accreditation?">
                    <span class="inline-block flex_auto p-l_3">Accreditation Services</span>
                    <i class="float_right flex_shrink fas p-r_3 c_white h:c_white fa-external-link-square "></i>
                </a>
            </li>
            <li class="c_white br_solid br_0 br-t_1  br_white-5">
                <a target="_blank" class="h:bg_black-2  h:c_white c_white p-x_2 p_3 justify_between flex flex_row " href="http://www.cardiosmart.org">
                    <span class="inline-block flex_auto p-l_3">CardioSmart</span>
                    <i class="float_right flex_shrink fas p-r_3 c_white h:c_white fa-external-link-square "></i>
                </a>
            </li>
            <li class="c_white br_solid br_0 br-t_1  br_white-5">
                <a target="_blank" class="h:bg_black-2  h:c_white c_white p-x_2 p_3 justify_between flex flex_row " href="https://cvquality.acc.org/">
                    <span class="inline-block flex_auto p-l_3">CV Quality</span>
                    <i class="float_right flex_shrink fas p-r_3 c_white h:c_white fa-external-link-square "></i>
                </a>
            </li>
            <li class="c_white br_solid br_0 br-t_1  br_white-5">
                <a target="_blank" class="h:bg_black-2  h:c_white c_white p-x_2 p_3 justify_between flex flex_row " href="http://www.onlinejacc.org/">
                    <span class="inline-block flex_auto p-l_3">JACC Journal</span>
                    <i class="float_right flex_shrink fas p-r_3 c_white fa-external-link-square "></i>
                </a>
            </li>
            <li class="c_white br_solid br_0 br-t_1  br_white-5">
                <a target="_blank" class="h:bg_black-2  h:c_white c_white p-x_2 p_3 justify_between flex flex_row " href="http://www.ncdr.com">
                    <span class="inline-block flex_auto p-l_3">NCDR</span>
                    <i class="float_right flex_shrink fas p-r_3 c_white h:c_white fa-external-link-square "></i>
                </a>
            </li>
        </ul>
    </section>
<!-- /ACC Product Links -->

MarkupWrapperClasses:
texture_dark p_4

Styleguide Recipes.Footer.ACC Product Links

*/
/*
Social Links

The college has a collection of social or secondary platforms we interact with.

Markup:
<!-- Social -->
<h4 class="c_white font_regular font_accent: m-b_3 m-b_4:lg text_center text_left:lg">Stay Connected
</h4>
<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="bg_twitter social-bar--button block m-b_0 p_3 c_white-8 h:c_white text_center h:bg_primary-n1"><i class="fab fa-twitter-square"></i></a></li>
    <li class="flex_auto m-r_2"><a href="https://www.facebook.com/AmericanCollegeofCardiology" target="_blank" class="bg_facebook social-bar--button block m-b_0 p_3 c_white-8 h:c_white text_center h:bg_primary-n1"><i class="fab fa-facebook-square"></i></a></li>
    <li class="flex_auto m-r_2"><a href="https://www.instagram.com/americancollegeofcardiology" target="_blank" class="bg_instagram social-bar--button block m-b_0 p_3 c_white-8 h:c_white text_center h:bg_primary-n1"><i class="fab fa-instagram"></i></a></li>
    <li class="flex_auto m-r_2"><a href="http://www.youtube.com/user/ACCinTouch" target="_blank" class="bg_youtube social-bar--button block m-b_0 p_3 c_white-8 h:c_white text_center h:bg_primary-n1"><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&amp;hl=en_US" target="_blank" class="bg_google-play social-bar--button block m-b_0 p_3 c_white-8 h:c_white text_center h:bg_primary-n1"><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="bg_apple-store social-bar--button block m-b_0 p_3 c_white-8 h:c_white text_center h:bg_primary-n1"><i class="fab fa-apple"></i></a></li>
</ul>
<!-- Social -->

MarkupWrapperClasses:
texture_dark p_4 max-w_40

Styleguide Recipes.Footer.Social

*/
/* Nav Recipes.04x */
/*
    Quick Utility Links

   Quick Links are only text links that are used for special cross marketing to sister sites and utility pages like about, home, extra.  

    Markup:
<nav data-attr="utlity-nav">
	<ul class="flex ul_none justify_end">
		<li class="p-x_3 flex_shrink">
			<a class="h:underline c_primary h:c_secondary-n1"
				href="//www.acc.org/guidelines#doctype=Guidelines"
				title="Access ACC guidelines and clinical policy documents as well as related resources"
				>Guidelines</a
			>
		</li>
		<li class="p-x_3 flex_shrink br-l_1 br_solid br_black-4">
			<a class="h:underline c_primary h:c_secondary-n1" href="http://www.onlinejacc.org/" target="_blank" title="JACC.org"
				>JACC</a
			>
		</li>
		<li class="p-x_3 flex_shrink br-l_1 br_solid br_black-4">
			<a class="h:underline c_primary h:c_secondary-n1"
				href="http://accscientificsession.acc.org"
				target="_blank"
				title="ACC Annual Scientific Session Together With World Congress of Cardiology Website"
				>ACC.20/WCC</a
			>
		</li>
		<li class="p-x_3 flex_shrink br-l_1 br_solid br_black-4">
			<a class="h:underline c_primary h:c_secondary-n1"
				href="https://www.acc.org/membership/current-members?promo_creative=current_members&amp;promo_position=utility&amp;promo_name=navigation"
				>Members</a
			>
		</li>
		<li class="p-x_3 flex_shrink br-l_1 br_solid br_black-4">
			<a class="h:underline c_primary h:c_secondary-n1"
				href="https://www.acc.org/membership/join-us?promo_creative=joinacc&amp;promo_position=utility&amp;promo_name=navigation"
				>Join ACC</a
			>
		</li>
	</ul>
</nav>


    Styleguide Recipes.Utility Links
*/
/* Nav Recipes.04x */
/*
Advertisment Spaces

Advertising comes in static size so wrapper areas ease the alignment issues when in shared column spaces.  

    Markup:
<div class="br_1 br_black-2 br_radius br_solid p-y_4 p_2">
   <div id="Adslot-x" style="width:300px; height:250px;" class="bg_acc m_auto max-w_100">
      <img src="https://picsum.photos/300/250"/>
   </div>
   <small class="block c_black-5 font_n2 m-b_n3 m-t_2 text_center uppercase">advertisment</small>
</div>

MarkupWrapperClasses:
    max-w_30

Styleguide Recipes.Advertisement
*/
/* content Recipes.100 */
/*
Ordered Cards

Having cards order on page to help users find there way through steps can some times be very helpful. 

Markup:
<div class="flex texture_medium counter_reset p_5">
   <div class="card texture_light bg_white shadow_2 flex_auto m-x_3">
      <div class="flex font_accent:  font_3 br-t_square c_white font_3 texture_dust bg_alert">
            <div class="flex_shrink p_3  bg_alert-n4"><span class="counter counter_increment font_5 lh_0 font_display c_whsite"></span></div>
      <div class="flex_auto p_3">First it is bad</div>
      </div>
      <div class="card-section p-x_4 p-y_3">
      <h4>This is a card.</h4>
      <p>It has an easy to override visual style, and is appropriately subdued.</p>
      </div>
   </div>
      <div class="card texture_light bg_white shadow_2 flex_auto m-x_3">
      <div class="flex font_accent:  font_3 br-t_square c_white font_3 texture_dust bg_warning">
            <div class="flex_shrink p_3  bg_warning-n4"><span class="counter counter_increment font_5 lh_0 font_display c_whsite"></span></div>
      <div class="flex_auto p_3">Then it is not right</div>
      </div>
      <div class="card-section p-x_4 p-y_3">
      <h4>This is a card.</h4>
      <p>It has an easy to override visual style, and is appropriately subdued.</p>
      </div>
   </div>
      <div class="card texture_light bg_white shadow_2 flex_auto m-x_3">
      <div class="flex font_accent:  font_3 br-t_square c_white font_3 texture_dust bg_success">
            <div class="flex_shrink p_3  bg_success-n4"><span class="counter counter_increment font_5 lh_0 font_display c_whsite"></span></div>
      <div class="flex_auto p_3">At last it is good</div>
      </div>
      <div class="card-section p-x_4 p-y_3">
      <h4>This is a card.</h4>
      <p>It has an easy to override visual style, and is appropriately subdued.</p>
      </div>
   </div>
</div>

Styleguide Recipes.Ordered Cards
*/
/* content Recipes.250 */
/*
Guideline Result

Section Results from the guideline search tool can have variations of content type but the shells have the basic content layout. 

section - basic layout of a result which returns a paragraph as a result


Markup:
<div class="p_5 p-y_4 bg_shade-3 texture_medium">
<article class="bg_white br_1 br_shade-3 br_solid grid-container m_auto max-w_85 p_3 result section shadow_overlap-light">
<header class="flex font_1 font_display">
    <div class="flex_auto result-title overflow_ellipsis nowrap font_2 wrap">
        <span class="c_shade-n5 font_accent:"><span class="c_acc font_bold p-r_3">5.1</span>Genetic Predisposition</span><br>
        <span class="font_italic c_shade-3 font_n1">section</span>
    </div>
    <div class="felx_shrink m-l_3 font_bold">
          <div class="br_2 br_radius br_shade-3 br_solid flex font_bold m-l_3 shadow_emboss-light"><div class="bg_loe-B-BR-0 flex_auto p-x_3 p-y_1">B-BR</div><div class="flex_auto bg_cor-IIA p-x_3 p-y_1">II</div></div>
    </div>
</header>
<div class="br-b_1 br_dotted br_primary-4 p-b_3"><nav class="flex font_n2 display_none">
    <a href="#saveToLibrary" class="felx_shrink bg_primary_5 link-fulldoc m-r_1 p-y_1 p-x_2 br_primary-5 c_shade-n3 hover:c_white hover:bg_primary br_solid br_shade-3 br_1 br_radius"><i class="fas fa-save m-r_3"></i><span>SAVE</span></a>
    <a href="#shareResult" class="felx_shrink bg_primary_5 link-pdf m-x_1 p-y_1 p-x_2 br_primary-5 c_shade-n3 hover:c_white hover:bg_primary br_solid br_shade-3 br_1 br_radius"><i class="fas fa-file-pdf m-r_3"></i><span>SHARE</span></a>
    <a href="#printResult" class="felx_shrink bg_primary_5 link-hub m-x_1 p-y_1 p-x_2 br_primary-5 c_shade-n3 hover:c_white hover:bg_primary br_solid br_shade-3 br_1 br_radius"><i class="fas fa-print m-r_3"></i><span>PRINT</span></a>
    </nav></div><main class="font_0 p-t_2 p-y_4 p_3 result-content">
    <section id="sec22.1">
		<p id="p2145">Hypertension is a complex polygenic disorder in which many genes or gene combinations influenceBP<a class="inline-reference" href="#bib200">[1]</a>,&nbsp;<a class="inline-reference" href="#bib201">[2]</a>. Although several monogenic forms of hypertension have been identified, such asglucocorticoid-remediable aldosteronism, Liddle’s syndrome, Gordon’s syndrome, and others in whichsingle-gene mutations fully explain the pathophysiology of hypertension, these disorders are rare<a class="inline-reference" href="#bib202">(S5.1-3)</a>. The current tabulation of known genetic variantscontributing to BP and hypertension includes more than 25 rare mutations and 120 single-nucleotidepolymorphisms<a class="inline-reference" href="#bib202">[1]</a>,&nbsp;<a class="inline-reference" href="#bib203">[2]</a>. However, even with the discovery of multiple single-nucleotide polymorphismsinfluencing control of BP since completion of the Human Genome Project in 2003, the associated variants haveonly small effects. Indeed, at present, the collective effect of all BP loci identified through genome-wideassociation studies accounts for only about 3.5% of BP variability<a class="inline-reference" href="#bib203">(S5.1-4)</a>. The presence of a high number of small-effect alleles associated withhigher BP results in a more rapid increase in BP with age<a class="inline-reference" href="#bib204">(S5.1-5)</a>. Future studies will need to better elucidate genetic expression, epigeneticeffects, transcriptomics, and proteomics that link genotypes with underlying pathophysiological mechanisms.</p>
	</section>
</main>
<footer class="result-docuemnt br-t_1 br_0 br_solid br_acc-3 p-t_2 is-active bg_shade-5 m-x_n3 p-x_4 p-y_2">
    <div class="clear-fix overflow_ellipsis document-title overflow_ellipsis font_accent: c_acc-1 nowrap font_n1">
       <i class="fas icon-toggle_chevron-up-down"></i> International Organization for Standardization. (2016). Occupational health and safety management systems—Requirements
        with Heart
    </div>
    <div class="result-document-publish-date font_n2 c_shade">Focused Update: March 15, 2018</div>
    <nav class="flex font_n1">
        <a href="#fulldoc" class="felx_shrink link-fulldoc m-r_3 p-y_2 c_shade-n3 hover:c_primary"><i class="fas fa-share-square m-r_3"></i><span>FULL DOC</span></a>
        <a href="#pdfdownload" class="felx_shrink link-pdf m-x_3 p-y_2 c_shade-n3 hover:c_primary"><i class="fas fa-file-pdf m-r_3"></i><span>PDF</span></a>
        <a href="#hublink" class="felx_shrink link-hub m-x_3 p-y_2 c_shade-n3 hover:c_primary"><i class="fas fa-share-alt m-r_3"></i><span>HUB</span></a>
    </nav>
</footer>
<aside class="bg_shade-4 m-x_n3 m-b_n3 p_2">
    <div class="flex font_n2 c_shade-1  p_2 p-x_4">
        <strong class="felx_shrink c_shade"><i class="fas fa-quote"></i>cite document:&nbsp;</strong>
        <span class="flex_auto overflow_ellipsis nowrap">International Organization for Standardization. (2016). Occupational health and safety management systems—Requirements with Heart</span>
    </div>
</aside>
</article>
</div>

    Styleguide Recipes.Guideline.Result
*/
/*
RECIPE: Guidline Section

Results from the guideline search tool can have variations of content type but the shells have the basic content layout. 


Markup:
<div class="p_5 p-y_4 bg_shade-3 texture_medium">
    <article class="bg_white br_1 br_shade-3 br_solid grid-container p_3 result shadow_overlap-light">
        <header class="flex font_1 font_display">
            <div class="flex_auto result-title overflow_ellipsis nowrap font_1 wrap">
                <span class="c_acc font_accent:">Result Title</span>
                <span class="font_italic c_shade-3 font_n1"></span>
            </div>
            <div class="felx_shrink flex m-l_3 font_bold">
                  <div class="felx_shrink m-l_3 font_bold">
          <div class="br_2 br_radius br_shade-3 br_solid flex font_bold m-l_3 shadow_emboss-light"><div class="bg_loe-A flex_auto p-x_3 p-y_1">A</div><div class="flex_auto bg_cor-I p-x_3 p-y_1">I</div></div>
    </div>
            </div>
        </header>
        <nav class="flex font_n2">
            <a href="#saveToLibrary" class="felx_shrink bg_primary_5 link-fulldoc m-r_1 p-y_1 p-x_2 br_primary-5 c_shade-n3 hover:c_white hover:bg_primary br_solid br_shade-3 br_1 br_radius"><i class="fas fa-save m-r_3"></i><span>SAVE</span></a>
            <a href="#shareResult" class="felx_shrink bg_primary_5 link-pdf m-x_1 p-y_1 p-x_2 br_primary-5 c_shade-n3 hover:c_white hover:bg_primary br_solid br_shade-3 br_1 br_radius"><i class="fas fa-file-pdf m-r_3"></i><span>SHARE</span></a>
            <a href="#printResult" class="felx_shrink bg_primary_5 link-hub m-x_1 p-y_1 p-x_2 br_primary-5 c_shade-n3 hover:c_white hover:bg_primary br_solid br_shade-3 br_1 br_radius"><i class="fas fa-print m-r_3"></i><span>PRINT</span></a>
        </nav>
        <main class="result-content p-y_2">
            <p class="lh_3 font_0 m-b_0">Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem aperiam alias explicabo impedit eius, ducimus nihil animi sapiente placeat ullam sequi, hic quod <span class="bg_highlight-4 c_highlight-n4  underline p-x_2">expedita laboriosam</span>, dolor et. Maiores, illum animi!</p>
        </main>
        <footer class="result-docuemnt br-t_1 br_0 br_dashed br_acc-3 p-t_2 is-active">
            <div class="clear-fix document-title overflow_ellipsis font_accent: c_acc-1 nowrap font_n1">
            <i class="fas icon-toggle_chevron-up-down"></i> International Organization for Standardization. (2016). Occupational health and safety management systems—Requirements
                with Heart
            </div>
            <div class="result-document-publish-date font_n2 c_shade">Focused Update: March 15, 2018</div>
            <nav class="flex font_n2">
                <a href="#fulldoc" class="felx_shrink link-fulldoc m-r_3 p-y_2 c_shade-n3 hover:c_primary"><i class="fas fa-share-square m-r_3"></i><span>FULL DOC</span></a>
                <a href="#pdfdownload" class="felx_shrink link-pdf m-x_3 p-y_2 c_shade-n3 hover:c_primary"><i class="fas fa-file-pdf m-r_3"></i><span>PDF</span></a>
                <a href="#hublink" class="felx_shrink link-hub m-x_3 p-y_2 c_shade-n3 hover:c_primary"><i class="fas fa-share-alt m-r_3"></i><span>HUB</span></a>
            </nav>
        </footer>
        <aside class="bg_shade-4 m-x_n3 m-b_n3 p_2">
            <div class="flex font_n3 c_shade-1  p_1 p-x_3">
                <strong class="felx_shrink c_shade"><i class="fas fa-quote"></i>cite document:&nbsp;</strong>
                <span class="flex_auto overflow_ellipsis nowrap">International Organization for Standardization. (2016). Occupational health and safety management systems—Requirements with Heart</span>
            </div>
        </aside>
    </article>
</div>

Styleguide Recipes.Guideline.ResultAlt
*/
/*
	ACC.org Recipes

	The use of Utiltiy Class give us the ablitiy to create much of the UI needed for ACC.org without expanding on the base of the styles that are written.  Included are patterns to create some of the complex UI inside of ACC.org

	Weight: 2000

	Styleguide Recipes

*/
/*
ACC.org Footer

The Footer of ACC.org 

Markup:
<div id="footer-wrap" class="max-w_90">
<!-- ********************************** breadcrumbs ********************************** -->
<div id="breadcrumbs" class="bg_acc breadcrumbs-container c_white font_0 font_ui p-x_4 p_3">
	<b class="breadcrumbs-title">YOU ARE HERE: </b>
	Home
</div>
<!-- This is the inner footer that we cache -->
<div id="footer" role="contentinfo" class="flex bg_shade-n3 flex_column flex_inline flex_wrap flex_row:md p-x_3 p-y_4 p-y_0:lg w_100">
	<div class="flex_auto p-x_3 p-y_4:lg w_25:lg w_50:md font_ui">
		<h2 class="font_0 font_1:lg font_accent: m-b_0:md m-b_2">
			<a href="//www.acc.org/guidelines" target="_parent" title="Guidelines" class="c_white h:c_primary-3">Guidelines</a>
		</h2>
		<h2 class="font_0 font_1:lg font_accent: m-b_0:md m-b_2  m-t_4:md">
			<a class="c_white h:c_primary-3" href="//www.acc.org/jacc-journals">JACC Journals on ACC.org</a>
		</h2>
		<ul class="block:md display_none font_0:lg font_n1 m-b_4 ul_none">
			<li class="reverse-indent">
				<a class="c_white h:c_primary-3" href="http://www.acc.org/jacc-journals?w_nav=FN#journal=Journal of the American College of Cardiology">JACC Journals</a>
			</li>
			<li class="reverse-indent">
				<a class="c_white h:c_primary-3" href="http://www.acc.org/jacc-journals?w_nav=FN#journal=JACC: Basic to Translational Science">JACC: Basic to Translational Science</a>
			</li>
			<li class="reverse-indent">
				<a class="c_white h:c_primary-3" href="http://www.onlinejacc.org/CardioOncology" target="_blank">JACC: CardioOncology</a>
			</li>
			<li class="reverse-indent">
				<a class="c_white h:c_primary-3" href="//www.acc.org/jacc-journals#journal=JACC: Cardiovascular Imaging" target="_parent" title="JACC: Cardiovascular Imaging">JACC: Cardiovascular Imaging
				</a>
			</li>
			<li class="reverse-indent">
				<a class="c_white h:c_primary-3" href="//www.acc.org/jacc-journals#journal=JACC: Cardiovascular Interventions" target="_parent" title="JACC: Cardiovascular Interventions">JACC: Cardiovascular Interventions
				</a>
			</li>
			<li class="reverse-indent">
				<a class="c_white h:c_primary-3" href="https://casereports.onlinejacc.org/" target="_blank">JACC: Case Reports</a>
			</li>
			<li class="reverse-indent">
				<a class="c_white h:c_primary-3" href="http://www.acc.org/jacc-journals?w_nav=FN#journal=JACC: Clinical Electrophysiology">JACC: Clinical Electrophysiology</a>
			</li>
			<li class="reverse-indent">
				<a class="c_white h:c_primary-3" href="//www.acc.org/jacc-journals#journal=JACC: Heart Failure" target="_parent" title="JACC Heart Failure">JACC Heart Failure</a>
			</li>
		</ul>
		<h2 class="font_0 font_1:lg font_accent: m-b_0:md m-b_2 m-t_4:md">
			<a class="c_white h:c_primary-3" href="//www.acc.org/membership" target="_parent" title="Membership ">Membership
			</a>
		</h2>
		<ul class="block:md display_none font_0:lg font_n1 m-b_4 ul_none">
			<li class="reverse-indent">
				<a class="c_white h:c_primary-3" href="//www.acc.org/membership/about-membership">About Membership</a>
			</li>
			<li class="reverse-indent">
				<a class="c_white h:c_primary-3" href="//www.acc.org/membership/become-a-member">Become a Member</a>
			</li>
			<li class="reverse-indent">
				<a class="c_white h:c_primary-3" href="//www.acc.org/membership/renew-your-membership">Renew Your Membership</a>
			</li>
			<li class="reverse-indent">
				<a class="c_white h:c_primary-3" href="//www.acc.org/membership/member-benefits-and-resources">Member Benefits and Resources</a>
			</li>
			<li class="reverse-indent">
				<a class="c_white h:c_primary-3" href="//www.acc.org/membership/sections-and-councils">Member Sections</a>
			</li>
			<li class="reverse-indent"><a class="c_white h:c_primary-3" href="//www.acc.org/membership/chapters">Chapters</a></li>
			<li class="reverse-indent"><a class="c_white h:c_primary-3" href="//www.acc.org">Member Directory</a></li>
		</ul>
		<h2 class="font_0 font_1:lg font_accent: m-b_0:md m-b_2 m-t_4:md">
			<a class="c_white h:c_primary-3" href="//www.acc.org/about-acc" title="About ACC">About ACC</a>
		</h2>
		<ul class="block:md display_none font_0:lg font_n1 m-b_4 ul_none">
			<li class="reverse-indent">
				<a class="c_white h:c_primary-3" href="//www.acc.org/about-acc/our-strategic-direction">Our Strategic Direction</a>
			</li>
			<li class="reverse-indent">
				<a class="c_white h:c_primary-3" href="//www.acc.org/about-acc/our-history" target="_parent" title="Our History ">Our History
				</a>
			</li>
			<li class="reverse-indent">
				<a class="c_white h:c_primary-3" href="//www.acc.org/about-acc/our-bylaws-and-code-of-ethics">Our Bylaws and Code of Ethics</a>
			</li>
			<li class="reverse-indent">
				<a class="c_white h:c_primary-3" href="//www.acc.org/about-acc/leadership">Leadership and Governance</a>
			</li>
			<li class="reverse-indent">
				<a class="c_white h:c_primary-3" href="//www.acc.org/about-acc/industry-relations">Industry Relations</a>
			</li>
			<li class="reverse-indent">
				<a class="c_white h:c_primary-3" href="//www.acc.org/about-acc/support-the-acc">Support the ACC</a>
			</li>
			<li class="reverse-indent">
				<a class="c_white h:c_primary-3" href="//www.acc.org/about-acc/jobs-at-the-acc">Jobs at the ACC</a>
			</li>
			<li class="reverse-indent">
				<a class="c_white h:c_primary-3" href="//www.acc.org/about-acc/press-releases">Press Releases</a>
			</li>
			<li class="reverse-indent"><a class="c_white h:c_primary-3" href="//www.acc.org/about-acc/social-media">Social Media</a></li>
			<li class="reverse-indent">
				<a class="c_white h:c_primary-3" href="//www.acc.org/about-acc/book-our-conference-center">Book Our Conference Center</a>
			</li>
		</ul>
	</div>
	<div class="flex_auto p-x_3 p-y_4:lg w_25:lg w_50:md font_ui">
		<h2 class="font_0 font_1:lg font_accent: m-b_0:md m-b_2">
			<a class="c_white h:c_primary-3" href="//www.acc.org/clinical-topics">Clinical Topics</a>
		</h2>
		<ul class="block:md display_none font_0:lg font_n1 m-b_4 ul_none">
			<li class="reverse-indent">
				<a class="c_white h:c_primary-3" href="//www.acc.org/clinical-topics/acute-coronary-syndromes">Acute Coronary Syndromes</a>
			</li>
			<li class="reverse-indent">
				<a class="c_white h:c_primary-3" href="//www.acc.org/clinical-topics/anticoagulation-management">Anticoagulation Management</a>
			</li>
			<li class="reverse-indent">
				<a class="c_white h:c_primary-3" href="//www.acc.org/clinical-topics/arrhythmias-and-clinical-ep">Arrhythmias and Clinical EP</a>
			</li>
			<li class="reverse-indent">
				<a class="c_white h:c_primary-3" href="//www.acc.org/clinical-topics/cardiac-surgery">Cardiac Surgery</a>
			</li>
			<li class="reverse-indent">
				<a class="c_white h:c_primary-3" href="//www.acc.org/clinical-topics/cardio-oncology">Cardio-Oncology</a>
			</li>
			<li class="reverse-indent">
				<a class="c_white h:c_primary-3" href="//www.acc.org/clinical-topics/stable-ischemic-heart-disease/chronic-angina">Chronic Angina</a>
			</li>
			<li class="reverse-indent">
				<a class="c_white h:c_primary-3" href="//www.acc.org/clinical-topics/congenital-heart-disease-pediatric-cardiology">Congenital Heart Disease and Pediatric Cardiology</a>
			</li>
			<li class="reverse-indent">
				<a class="c_white h:c_primary-3" href="//www.acc.org/clinical-topics/diabetes-and-cardiometabolic-disease">Diabetes and Cardiometabolic Disease</a>
			</li>
			<li class="reverse-indent">
				<a class="c_white h:c_primary-3" href="//www.acc.org/clinical-topics/dyslipidemia">Dyslipidemia</a>
			</li>
			<li class="reverse-indent">
				<a class="c_white h:c_primary-3" href="//www.acc.org/clinical-topics/geriatric-cardiology">Geriatric Cardiology</a>
			</li>
			<li class="reverse-indent">
				<a class="c_white h:c_primary-3" href="//www.acc.org/clinical-topics/heart-failure-and-cardiomyopathies">Heart Failure and Cardiomyopathies</a>
			</li>
			<li class="reverse-indent">
				<a class="c_white h:c_primary-3" href="//www.acc.org/clinical-topics/dyslipidemia/hypertriglyceridemia">Hypertriglyceridemia</a>
			</li>
			<li class="reverse-indent">
				<a class="c_white h:c_primary-3" href="//www.acc.org/clinical-topics/invasive-cardiovascular-angiography-and-intervention">Invasive Cardiovascular Angiography and Intervention</a>
			</li>
			<li class="reverse-indent">
				<a class="c_white h:c_primary-3" href="//www.acc.org/clinical-topics/noninvasive-imaging">Noninvasive Imaging</a>
			</li>
			<li class="reverse-indent">
				<a class="c_white h:c_primary-3" href="//www.acc.org/clinical-topics/pericardial-disease">Pericardial Disease</a>
			</li>
			<li class="reverse-indent"><a class="c_white h:c_primary-3" href="//www.acc.org/clinical-topics/prevention">Prevention</a></li>
			<li class="reverse-indent">
				<a class="c_white h:c_primary-3" href="//www.acc.org/clinical-topics/pulmonary-hypertension-and-venous-thromboembolism">Pulmonary Hypertension and Venous Thromboembolism</a>
			</li>
			<li class="reverse-indent">
				<a class="c_white h:c_primary-3" href="//www.acc.org/clinical-topics/sports-and-exercise-cardiology">Sports and Exercise Cardiology</a>
			</li>
			<li class="reverse-indent">
				<a class="c_white h:c_primary-3" href="//www.acc.org/clinical-topics/stable-ischemic-heart-disease">Stable Ischemic Heart Disease</a>
			</li>
			<li class="reverse-indent">
				<a class="c_white h:c_primary-3" href="//www.acc.org/clinical-topics/valvular-heart-disease">Valvular Heart Disease</a>
			</li>
			<li class="reverse-indent">
				<a class="c_white h:c_primary-3" href="//www.acc.org/clinical-topics/vascular-medicine">Vascular Medicine</a>
			</li>
		</ul>
	</div>
	<div class="flex_auto p-x_3 p-y_4:lg w_25:lg w_50:md font_ui">
		<h2 class="font_0 font_1:lg font_accent: m-b_0:md m-b_2">
			<a class="c_white h:c_primary-3" href="//www.acc.org/latest-in-cardiology">Latest in Cardiology</a>
		</h2>
		<ul class="block:md display_none font_0:lg font_n1 m-b_4 ul_none">
			<li class="reverse-indent">
				<a class="c_white h:c_primary-3" href="//www.acc.org/latest-in-cardiology#theme=Clinical Updates and Discoveries">Clinical Updates &amp; Discoveries</a>
			</li>
			<li class="reverse-indent">
				<a class="c_white h:c_primary-3" href="//www.acc.org/latest-in-cardiology#theme=Advocacy and Policy">Advocacy &amp; Policy</a>
			</li>
			<li class="reverse-indent">
				<a class="c_white h:c_primary-3" href="//www.acc.org/latest-in-cardiology#theme=Perspectives and Analysis">Perspectives &amp; Analysis</a>
			</li>
			<li class="reverse-indent">
				<a class="c_white h:c_primary-3" href="//www.acc.org/latest-in-cardiology#theme=Meeting Coverage">Meeting Coverage</a>
			</li>
			<li class="reverse-indent">
				<a class="c_white h:c_primary-3" href="//www.acc.org/membership/member-benefits-and-resources/acc-member-publications">ACC Member Publications</a>
			</li>
			<li class="reverse-indent">
				<a class="c_white h:c_primary-3" href="//www.acc.org/latest-in-cardiology/features/podcasts">ACC Podcasts</a>
			</li>
		</ul>
		<h2 class="font_0 font_1:lg font_accent: m-b_0:md m-b_2 m-t_4:md">
			<a class="c_white h:c_primary-3" href="//www.acc.org/education-and-meetings">Education and Meetings</a>
		</h2>
		<ul class="block:md display_none font_0:lg font_n1 m-b_4 ul_none">
			<li class="reverse-indent"><a class="c_white h:c_primary-3" href="//www.acc.org">Online Learning Catalog</a></li>
			<li class="reverse-indent">
				<a class="c_white h:c_primary-3" href="//www.acc.org/education-and-meetings/maintenance-of-certification-information-hub">Understanding MOC</a>
			</li>
			<li class="reverse-indent">
				<a class="c_white h:c_primary-3" href="//www.acc.org/education-and-meetings/products-and-resources">Products and Resources</a>
			</li>
			<li class="reverse-indent">
				<a class="c_white h:c_primary-3" href="//www.acc.org/education-and-meetings/image-and-slide-gallery">Image and Slide Gallery</a>
			</li>
			<li class="reverse-indent">
				<a class="c_white h:c_primary-3" href="//www.acc.org/education-and-meetings/meetings">Meetings</a>
			</li>
			<li class="reverse-indent">
				<a class="c_white h:c_primary-3" href="https://accscientificsession.acc.org/" target="_blank">Annual Scientific Session</a>
			</li>
		</ul>
		<h2 class="font_0 font_1:lg font_accent: m-b_0:md m-b_2 m-t_4:md">
			<a class="c_white h:c_primary-3" href="//www.acc.org/tools-and-practice-support">Tools and Practice Support</a>
		</h2>
		<ul class="block:md display_none font_0:lg font_n1 m-b_4 ul_none">
			<li class="reverse-indent">
				<a class="c_white h:c_primary-3" href="http://cvquality.acc.org/">Quality Improvement for Institutions</a>
			</li>
			<li class="reverse-indent"><a class="c_white h:c_primary-3 block" href="https://www.ncdr.com/webncdr/" target="_blank">NCDR <i class="c_white fa-external-link-square fal h:c_white m-l_3 p-r_3 p-t_2" style="text-indent: 0;"></i></a></li>
			<li class="reverse-indent">
				<a class="c_white h:c_primary-3" href="https://www.cardiosmart.org/" target="_blank">CardioSmart  <i class="c_white fa-external-link-square fal h:c_white m-l_3 p-r_3 p-t_2" style="text-indent: 0;"></i></a>
			</li>
			<li class="reverse-indent">
				<a class="c_white h:c_primary-3" href="https://cvquality.acc.org/Accreditation" target="_blank">Accreditation Services  <i class="c_white fa-external-link-square fal h:c_white m-l_3 p-r_3 p-t_2" style="text-indent: 0;"></i></a>
			</li>
			<li class="reverse-indent">
				<a class="c_white h:c_primary-3" href="//www.acc.org/tools-and-practice-support/clinical-toolkits">Clinical Toolkits</a>
			</li>
			<li class="reverse-indent">
				<a class="c_white h:c_primary-3" href="//www.acc.org/tools-and-practice-support/mobile-resources">Mobile Resources</a>
			</li>
			<li class="reverse-indent">
				<a class="c_white h:c_primary-3" href="//www.acc.org/tools-and-practice-support/advocacy-at-the-acc" target="_parent">Advocacy at the ACC</a>
			</li>
			<li class="reverse-indent">
				<a class="c_white h:c_primary-3 " href="http://www.healthecareers.com/acc" target="_blank">Cardiology Careers <i class="c_white fa-external-link-square fal h:c_white m-l_3 p-r_3 p-t_2" style="text-indent: 0;"></i></a>
			</li>
			<li class="reverse-indent">
				<a class="c_white h:c_primary-3" href="//www.acc.org/tools-and-practice-support/practice-solutions">Practice Solutions</a>
			</li>
			<li class="reverse-indent">
				<a class="c_white h:c_primary-3" href="//www.acc.org/tools-and-practice-support/quality-programs">Quality Programs</a>
			</li>
		</ul>
	</div>
	<!-- column 4 -->
	<div class="flex_auto p-x_3 p-y_4:lg w_25:lg w_50:md relative">
		<section class="acc-websites m-y_3">
			<nav class="clearfix block font_bold font_ui w_100">
				<ul class="font_1 lh_4 ul_none">
					<li class="">
						<a target="_blank" class="c_white block flex h:bg_black-2 h:c_white" href="http://www.acc.org">
							<span class="inline-block flex_auto p-l_3 self_center">ACC</span>
							<i class="flex_shrink self_center fas p-r_3 c_white h:c_white fa-external-link-square "></i>
						</a>
					</li>
					<li class="">
						<a target="_blank" class="c_white block flex h:bg_black-2 h:c_white" href="https://cvquality.acc.org/Accreditation?">
							<span class="inline-block flex_auto p-l_3 self_center">Accreditation Services</span>
							<i class="flex_shrink self_center fas p-r_3 c_white h:c_white fa-external-link-square "></i>
						</a>
					</li>
					<li class="">
						<a target="_blank" class="c_white block flex h:bg_black-2 h:c_white" href="http://www.cardiosmart.org">
							<span class="inline-block flex_auto p-l_3 self_center">CardioSmart</span>
							<i class="flex_shrink self_center fas p-r_3 c_white h:c_white fa-external-link-square "></i>
						</a>
					</li>
					<li class="">
						<a target="_blank" class="c_white block flex h:bg_black-2 h:c_white" href="http://www.onlinejacc.org/">
							<span class="inline-block flex_auto p-l_3 self_center">JACC Journals</span>
							<i class="flex_shrink self_center fas p-r_3 c_white fa-external-link-square "></i>
						</a>
					</li>
					<li class="">
						<a target="_blank" class="c_white block flex h:bg_black-2 h:c_white" href="http://www.ncdr.com">
							<span class="inline-block flex_auto p-l_3 self_center">NCDR</span>
							<i class="flex_shrink self_center fas p-r_3 c_white h:c_white fa-external-link-square "></i>
						</a>
					</li>
				</ul>
			</nav>
		</section>
		<section class="address c_white">
			<address>
				<!-- http://microformats.org/wiki/hcard -->
				<h4 class="m-b_0 font_bold font_copy font_normal font_1 m-t_4:md">Heart House</h4>
				<div class="font_ui font_0">
					<ul class="ul_none  lh_2">
						<li class="m-b_1 m-b_3:md font_normal">
							<span class="street-address">2400 N. St. NW</span>
						</li>
						<li class="m-b_1 m-b_3:md font_normal">
							<span class="locality ">Washington</span>,
							<span class="city-name ">
								<abbr title="District of Colombia">DC</abbr>
							</span>
							<span class="postal-code">20037</span>
						</li>
						<li class="m-b_1 m-b_3:md font_normal">
							<a href="mailto:MemberCare@acc.org" class="email c_white text_underline  h:c_white ">
								<strong class="p-r_2 inline block:md inline:lg">Email:</strong>
								<span class="inline block:md inline:lg">MemberCare@acc.org</span></a>
						</li>
					</ul>
					<ul class="ul_none lh_2">
						<li class="m-b_1 m-b_3:md font_normal">
							<a tel="+12023756000" href="tel:+12023756000" class="tel c_white h:c_white h:underline">
								<strong class="p-r_2 block:md inline:lg">Phone:</strong><span class=" block:md inline:lg">(202) 375-6000, ext. 5603</span></a>
						</li>
						<li class="m-b_1 m-b_3:md font_normal">
							<a tel="+18002574737" href="tel:+18002534636.5603" class="tel c_white h:c_white h:underline">
								<strong class="p-r_2 block:md inline:lg">Toll Free:</strong><span class=" block:md inline:lg">(800) 253-4636, ext. 5603</span></a>
						</li>
						<li class="m-b_1 m-b_3:md font_normal">
							<a fax="+12023757000" href="fax:+12023757000" class="fax c_white h:c_white h:underline">
								<strong class="p-r_2 block:md inline:lg">Fax:</strong>
								<span class="block:md inline:lg">(202) 375-7000</span>
							</a>
						</li>
					</ul>
				</div>
			</address>
			<div class="logo_primary-alt max-w_30 bg_left" style="max-height: 90px;">
				<span class="alt-text">logo_primary-alt max-w_10</span>
			</div>
		</section>
		<section class="absolute:md b_4 l_0 m-t_4 p-t_0:md p-t_5 r_0 relative social">
			<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-twitter-square"></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>
	</div>
</div>
<!-- / footer -->
<div id="subfooter bg_primary-n1 c_white" class="bg_primary c_white font_n1 p-x_4 p-y_4">
	<ul class="block footer-bottom-links ul_none">
		<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 -->
	<p class="c_white-5 font_italic font_n2 legal m-b_2 m-t_3">
		© 2019 American College of Cardiology Foundation. All rights reserved.
	</p>
</div>
<!-- /subfooter -->
</div>

Weight: -1

Styleguide Recipes.Footer.Complete

*/
body {
  font-family: "Open Sans",-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-size: 1rem;
}

h1, .h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
  font-family: "Maven Pro","Muli","Open Sans","system",sans-serif;
  font-weight: 400;
}

h6, .h6 {
  font-weight: 700;
}

p {
  line-height: 1.35;
}

ul,
ol {
  line-height: 1.6;
}

kbd,
code,
samp,
var {
  font-family: SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
}

form {
  border-color: rgba(19, 18, 18, 0.38);
}

label {
  font-weight: 700;
}

label,input,
select,
textarea,
legend,
fieldset,
button {
  color: currentColor;
  font-family: "Open Sans",-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-size: 1rem;
}

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-color: rgba(19, 18, 18, 0.25);
  line-height: 1.125;
}

[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 utlity class only.  To get full brand styling use a framework based version of arches.  

<form>
	<div><label for="example-input-email">Email address</label> <input type="email" id="example-input-email"
			placeholder="Enter email"></div>
	<div><label for="example-input-password1">Number</label> <input type="number" id="example-input-number"
			placeholder="Number"></div>
	<div><label for="example-input-password">Password</label> <input type="password" id="example-input-password"
			placeholder="Password"></div>
	<div><label for="example-input-search">Search</label> <input type="search" id="example-input-serach"
			placeholder="Search .."></div>
	<div><label for="example-input-tel">Telephone number</label> <input type="tel" id="example-input-tel"
			placeholder="Telephone number"></div>
	<div><label for="example-input-text">Text</label> <input type="text" id="example-input-text"
			placeholder="Enter some text here"></div>
	<div><label for="example-input-url">Url</label> <input type="url" id="example-input-url"
			placeholder="Enter a url here"></div>
	<div><label for="example-input-color">Color</label> <input type="color" id="example-inupt-color"
			placeholder="#fff"></div>
	<div><label for="example-input-date">Date</label> <input type="date" id="example-input-date"
			placeholder="date"></div>
	<div><label for="example-input-date-time">Date / Time</label> <input type="datetime"
			id="example-input-date-time" placeholder="date / time"></div>
	<div><label 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><label for="example-input-month">Month</label> <input type="month" id="example-input-month"
			placeholder="Month"></div>
	<div><label for="example-input-week">Week</label> <input type="week" id="example-input-week"
			placeholder="Week"></div>
	<div><label for="example-input-time">Time</label> <input type="time" id="example-input-time"
			placeholder="Time"></div>
	<div><label 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&mdash;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>

 Styleguide HTML.Inputs

*/
/*

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-family: "Open Sans",-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-size: 1rem;
}
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: 700;
}

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;
}

/*
Logos

Logos in the design come in 4 variations the primary logo, the condensed logo, and alte version which are the reverse of primary and reversed.  All logos are controled by the width and will maintain there aspect ratios to respond to the container they are in.  For 508 compliance please place the brand name in the logo.

.logo_primary	            		-   	Primary Logo great for desktop displays best used for when the logo can be taller then 80px.
.logo_primary-alt 	            	-   	Primary Logo reversed for dark background situations.
.logo_condensed.max-w_15             -  	 	Smaller Mobile Friendly Logo these logos and be readable between 40px to 80px in height. 
.logo_primary-alt.max-w_15         -  	 	Smaller Logo Reversed.

Markup:
<div class="{{modifier_class}}" data-style="{{ modifier_class }}" >
	<span class="alt">{{modifier_class}}</span>
</div>

MarkupWrapperClasses:
    bg_shade-2 max-w_40

Styleguide DesignBase.Logos

*/
[class*=logo_],
[class*=seal_] {
  overflow: hidden;
  background-color: transparent;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  text-indent: -9999px;
}
[class*=logo_]:before,
[class*=seal_]:before {
  width: 1px;
  height: 0;
  margin-left: -1px;
  float: left;
  content: "";
}
[class*=logo_]:after,
[class*=seal_]:after {
  display: table;
  clear: both;
  content: "";
}
[class*=logo_] > .alt-text:before,
[class*=seal_] > .alt-text:before {
  display: none;
}

.logo_primary {
  background-image: url("../img/ACC_primaryLogo.svg");
}
.logo_primary:before {
  padding-top: 33.3333333333%;
}
.logo_primary > span.alt-text:before {
  content: "Logo of the American College Of Cardiology";
}

.logo_primary-alt {
  background-image: url("../img/ACC_primaryLogo-alt.svg");
}
.logo_primary-alt:before {
  padding-top: 33.3333333333%;
}
.logo_primary-alt > span.alt-text:before {
  content: "Logo of the American College Of Cardiology";
}

.logo_condensed {
  background-image: url("../img/ACC_mobileLogo.svg");
}
.logo_condensed:before {
  padding-top: 33.3333333333%;
}
.logo_condensed > span.alt-text:before {
  content: "Logo of the American College Of Cardiology";
}

.logo_condensed-alt {
  background-image: url("../img/ACC_mobileLogo-alt.svg");
}
.logo_condensed-alt:before {
  padding-top: 33.3333333333%;
}
.logo_condensed-alt > span.alt-text:before {
  content: "Logo of the American College Of Cardiology";
}

/*
Seals

Seals in the design come in 3 variations the default, small, and tiny.  All Seals will maintain their aspect ratios and will respond to the container, but seals have a max width.  For 508 compliance, please place the brand name in the seal.

.seal_normal	            - Full size seal great for desktop displays best used for when the seal can be taller then 100px.
.seal_small	            - Condensed size seal great for Tablet displays best used for when the seal is between 100px to 40px.
.seal_tiny	            - Smallest of the seals best used for icons when seal is 40px and bellow


Markup:
<div class="{{modifier_class}} m_auto" data-style="{{ modifier_class }}">
	<span class="alt-text">{{modifier_class}}</span>
</div>

MarkupWrapperClasses:
	bg_shade-2 max-w_40

Styleguide DesignBase.Seals

*/
.seal_normal {
  background-image: url("../img/ACC_seal.svg");
}
.seal_normal:before {
  padding-top: 100%;
}
.seal_normal > span.alt-text:before {
  content: "Seal of the American College Of Cardiology";
}

.seal_small {
  max-width: 100px;
  background-image: url("../img/ACC_sealCondensed.svg");
}
.seal_small:before {
  padding-top: 100%;
}
.seal_small > span.alt-text:before {
  content: "Seal of the American College Of Cardiology";
}

.seal_tiny {
  max-width: 40px;
  background-image: url("../img/ACC_sealCondensed-alt.svg");
}
.seal_tiny:before {
  padding-top: 100%;
}
.seal_tiny > span.alt-text:before {
  content: "Seal of the American College Of Cardiology";
}

.seal_normal-alt {
  background-image: url("../img/ACC_seal-reverse.svg");
}
.seal_normal-alt:before {
  padding-top: 100%;
}
.seal_normal-alt > span.alt-text:before {
  content: "Seal of the American College Of Cardiology";
}

.seal_small-alt {
  max-width: 100px;
  background-image: url("../img/ACC_sealCondensed-reverse.svg");
}
.seal_small-alt:before {
  padding-top: 100%;
}
.seal_small-alt > span.alt-text:before {
  content: "Seal of the American College Of Cardiology";
}

.seal_tiny-alt {
  max-width: 40px;
  background-image: url("../img/ACC_sealCondensed-alt-reverse.svg");
}
.seal_tiny-alt:before {
  padding-top: 100%;
}
.seal_tiny-alt > span.alt-text:before {
  content: "Seal of the American College Of Cardiology";
}

/*

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
*/
/*

Lorem + 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_1x2			- lock image to a 1 to 2 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
*/
div[class*=aspect_],
.lorem-loader {
  width: 100%;
  overflow: hidden;
}
div[class*=aspect_]:before,
.lorem-loader:before {
  width: 1px;
  height: 0;
  margin-left: -1px;
  float: left;
  content: "";
}
div[class*=aspect_]:after,
.lorem-loader:after {
  display: table;
  clear: both;
  content: "";
}

.aspect_2x1:before {
  padding-top: 200%;
}

.aspect_1x1:before {
  padding-top: 100%;
}

.aspect_1x2:before {
  padding-top: 50%;
}

.aspect_4x3:before {
  padding-top: 75%;
}

.aspect_3x2:before {
  padding-top: 66.6666666667%;
}

.aspect_16x9:before {
  padding-top: 56.25%;
}

.aspect_21x9:before {
  padding-top: 42.8571428571%;
}

.aspect_4x1:before {
  padding-top: 25%;
}

.lorem-loader {
  -webkit-animation: Gradient 3s ease infinite;
  -moz-animation: Gradient 3s ease infinite;
  background: linear-gradient(-45deg, #b5b5b5, #d0d0d0);
  background-size: 400% 400%;
  color: #fff;
  animation: Gradient 3s ease infinite;
}

@-webkit-keyframes Gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@keyframes Gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
/*
Link Decorator

Links with the `.link` will auto decorate with an icon of the corresponding file type
| File            | Effect                                         |
| --------------- | ---------------------------------------------- |
| .pdf            | Portable Document Format                       |
| .doc            | Word Document                                  |
| .txt            | Text Document                                  |
| .ppt            | Power Point                                    |
| mailto:         | Email                                          |
| tel:            | Telephone                                      |
| fax:            | Fax                                            |
| target=`_blank` | External Link icons will appear after any link |



Markup:
<div class="p_4">
 <a class="link" href="abc.pdf">A link that is a Pdf Document</a><br/>
 <a class="link" href="abc.doc">A link that is a Word Document</a><br/>
 <a class="link" href="https://www.abc.ppt">An External link that is a Power Point Document</a><br/>
 <a class="link" href="tel:1-555-555-5555">1-555-555-5555</a><br/>
 <a class="link" href="mailto:test@abc.org">test@abc.org</a><br/>
 <a class="link" href="xyz.zip">A link that is a Zip Document</a><br/></div>
<div class="bg_shade-n3 p_4">
 <a class="link-light" href="abc.pdf">A link that is a Pdf Document</a><br/>
 <a class="link-light" href="abc.doc">A link that is a Word Document</a><br/>
 <a class="link-light" href="https://www.abc.ppt">An External link that is a Power Point Document</a><br/>
 <a class="link-light" href="tel:1-555-555-5555">1-555-555-5555</a><br/>
 <a class="link-light" href="mailto:test@abc.org">test@abc.org</a><br/>
 <a class="link-light" href="xyz.zip">A link that is a Zip Document</a><br/>
</div>

 Styleguide Recipes.InteractiveExtras.Links
 */
.icon-before:before, a.link[href$=".pdf"]:before, a.link[href$=".doc"]:before, a.link[href$=".docx"]:before, a.link[href$=".txt"]:before, a.link[href$=".zip"]:before, a.link[href*=".ppt"]:before, a.link[href*=".pptx"]:before, a.link[href$=".csv"]:before, a.link[href$=".xls"]:before, a.link[href$=".xlsx"]:before, a.link[href$=".mp4"]:before, a.link[href$=".mov"]:before,
a.link-light[href$=".pdf"]:before,
a.link-light[href$=".doc"]:before,
a.link-light[href$=".docx"]:before,
a.link-light[href$=".txt"]:before,
a.link-light[href$=".zip"]:before,
a.link-light[href*=".ppt"]:before,
a.link-light[href*=".pptx"]:before,
a.link-light[href$=".csv"]:before,
a.link-light[href$=".xls"]:before,
a.link-light[href$=".xlsx"]:before,
a.link-light[href$=".mp4"]:before,
a.link-light[href$=".mov"]:before,
.reading-typography a[href$=".pdf"]:before,
.reading-typography a[href$=".doc"]:before,
.reading-typography a[href$=".docx"]:before,
.reading-typography a[href$=".txt"]:before,
.reading-typography a[href$=".zip"]:before,
.reading-typography a[href*=".ppt"]:before,
.reading-typography a[href*=".pptx"]:before,
.reading-typography a[href$=".csv"]:before,
.reading-typography a[href$=".xls"]:before,
.reading-typography a[href$=".xlsx"]:before,
.reading-typography a[href$=".mp4"]:before,
.reading-typography a[href$=".mov"]:before {
  width: 1.28571429em;
  margin-right: 4px;
  margin-right: 0.25rem;
  text-align: center;
}

.icon-after:after, a.link[target=_blank]:after, a.link[href^=http][target=_blank]:after, a.link[href^=https][target=_blank]:after, a.link[href^="mailto:"]:after, a.link[href^="tel:"]:after,
a.link-light[target=_blank]:after,
a.link-light[href^=http][target=_blank]:after,
a.link-light[href^=https][target=_blank]:after,
a.link-light[href^="mailto:"]:after,
a.link-light[href^="tel:"]:after,
.reading-typography a[target=_blank]:after,
.reading-typography a[href^=http][target=_blank]:after,
.reading-typography a[href^=https][target=_blank]:after,
.reading-typography a[href^="mailto:"]:after,
.reading-typography a[href^="tel:"]:after {
  width: 1.28571429em;
  margin-left: 4px;
  margin-left: 0.25rem;
  text-align: center;
}

.link, .reading-typography a {
  color: #094135;
}
.link:hover, .reading-typography a:hover {
  color: black;
}

.link-light {
  color: #1ccea8;
}
.link-light:hover {
  color: #92f0dc;
}

a.link:hover,
a.link-light:hover,
.reading-typography a:hover {
  text-decoration: underline;
}
a.link[href$=".pdf"]:before,
a.link-light[href$=".pdf"]:before,
.reading-typography a[href$=".pdf"]:before {
  content: "";
}
a.link[href$=".doc"]:before, a.link[href$=".docx"]:before, a.link[href$=".txt"]:before,
a.link-light[href$=".doc"]:before,
a.link-light[href$=".docx"]:before,
a.link-light[href$=".txt"]:before,
.reading-typography a[href$=".doc"]:before,
.reading-typography a[href$=".docx"]:before,
.reading-typography a[href$=".txt"]:before {
  content: "";
}
a.link[href$=".zip"]:before,
a.link-light[href$=".zip"]:before,
.reading-typography a[href$=".zip"]:before {
  content: "";
}
a.link[href*=".ppt"]:before, a.link[href*=".pptx"]:before,
a.link-light[href*=".ppt"]:before,
a.link-light[href*=".pptx"]:before,
.reading-typography a[href*=".ppt"]:before,
.reading-typography a[href*=".pptx"]:before {
  content: "";
}
a.link[href$=".csv"]:before, a.link[href$=".xls"]:before, a.link[href$=".xlsx"]:before,
a.link-light[href$=".csv"]:before,
a.link-light[href$=".xls"]:before,
a.link-light[href$=".xlsx"]:before,
.reading-typography a[href$=".csv"]:before,
.reading-typography a[href$=".xls"]:before,
.reading-typography a[href$=".xlsx"]:before {
  content: "";
}
a.link[href$=".mp4"]:before, a.link[href$=".mov"]:before,
a.link-light[href$=".mp4"]:before,
a.link-light[href$=".mov"]:before,
.reading-typography a[href$=".mp4"]:before,
.reading-typography a[href$=".mov"]:before {
  content: "";
}
a.link[target=_blank]:after, a.link[href^=http][target=_blank]:after, a.link[href^=https][target=_blank]:after,
a.link-light[target=_blank]:after,
a.link-light[href^=http][target=_blank]:after,
a.link-light[href^=https][target=_blank]:after,
.reading-typography a[target=_blank]:after,
.reading-typography a[href^=http][target=_blank]:after,
.reading-typography a[href^=https][target=_blank]:after {
  content: "";
}
a.link[href^="mailto:"]:after,
a.link-light[href^="mailto:"]:after,
.reading-typography a[href^="mailto:"]:after {
  content: "";
}
a.link[href^="tel:"]:after,
a.link-light[href^="tel:"]:after,
.reading-typography a[href^="tel:"]:after {
  content: "";
}
a.link[href^="fax:"]:after,
a.link-light[href^="fax:"]:after,
.reading-typography a[href^="fax:"]:after {
  content: "";
}

/*

Expanded Click Area

allows for a relative container to be clickable by the link. 

Markup:
<div class="card shadow_2 cell small-6 large-4 max-w_40"  data-style="{{ modifier_class }}" >
  <div class=" font_accent: border-top-left-square c_white font_3 p_4 texture_dust card-divider bg_primary card-header">
    This is a header
  </div>
  <img src="https://picsum.photos/400/300">
  <div class="card-section card-body">
    <h4>This is a card.</h4>
	 <p>It has an easy to override visual style, and is appropriately subdued.</p>
	 <a href="#" class="expanded-click-area button btn btn-primary">I am so clickable</a>
  </div>
</div>

Styleguide Recipes.InteractiveExtras.Expanded Click Area
*/
.expanded-click-area::after {
  z-index: 1;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: transparent;
  content: "";
  pointer-events: auto;
}

.sfPageEditor .expanded-click-area::after {
  background-color: #9acd322e;
}

.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: "";
}
.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: "";
}

.icon-toggle_plus-minus:before {
  content: "";
}
.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: "";
}

.icon-toggle_chevron-up-down:before {
  content: "";
}
.active .icon-toggle_chevron-up-down:before, .show .icon-toggle_chevron-up-down:before, .active > .icon-toggle_chevron-up-down:before {
  content: "";
}

.icon-toggle_chevron-double-up-down:before {
  content: "";
}
.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: "";
}

.icon-toggle_chevron-double-left-right:before {
  content: "";
}
.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: "";
}

.icon-toggle_arrow-circle:before {
  content: "";
}
.active .icon-toggle_arrow-circle:before, .show .icon-toggle_arrow-circle:before, .active > .icon-toggle_arrow-circle:before {
  content: "";
}

.icon-toggle_check-sqaure:before {
  content: "";
}
.active .icon-toggle_check-sqaure:before, .show .icon-toggle_check-sqaure:before, .active > .icon-toggle_check-sqaure:before {
  content: "";
}

.icon-toggle_check-circle:before {
  content: "";
}
.active .icon-toggle_check-circle:before, .show .icon-toggle_check-circle:before, .active > .icon-toggle_check-circle:before {
  content: "";
}

.icon-toggle_check:before {
  content: "";
}
.active .icon-toggle_check:before, .show .icon-toggle_check:before, .active > .icon-toggle_check:before {
  content: "";
}

/*

Scrollbar Mini

Give a mini scroll bar to a content area. 

Markup:
<div class="card shadow_2 cell small-6 large-4 max-w_30" >
    <div class=" font_accent: border-top-left-square c_white font_3 p_4 texture_dust card-divider bg_primary card-header">
    This is a header
    </div>
    <div class="card-section card-body p_4 scrollbar-mini overflow_auto" style="max-height:300px;">
        <h4>This is a card.</h4>
        <p class="font_1">It has an easy to override visual style, and is appropriately subdued.</p>
        <img src="https://picsum.photos/400/300">
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sequi dolorem et maxime, officiis nulla vel? Numquam quas voluptatibus, voluptatem fuga saepe animi nemo voluptatum repellendus in natus libero, nobis illum!</p>
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sequi dolorem et maxime, officiis nulla vel? Numquam quas voluptatibus, voluptatem fuga saepe animi nemo voluptatum repellendus in natus libero, nobis illum!</p>
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sequi dolorem et maxime, officiis nulla vel? Numquam quas voluptatibus, voluptatem fuga saepe animi nemo voluptatum repellendus in natus libero, nobis illum!</p>  
    </div>
    <div class="card-divider card-footer br_0 br_solid br-t_1 br_primary"> <a href="#" class="button btn btn-primary">I am so clickable</a></div>
</div>

Styleguide Recipes.InteractiveExtras.Scrollbar
*/
/* Let's get this party started */
.scrollbar-mini::-webkit-scrollbar {
  width: 6.4px;
  width: 0.4rem;
  height: 6.4px;
  height: 0.4rem;
}

/* Track */
.scrollbar-mini::-webkit-scrollbar-track {
  background-color: rgba(55, 55, 55, 0.1);
  box-shadow: inset 1px 1px 4px 0.5px rgba(0, 0, 0, 0.2);
}

/* Handle */
.scrollbar-mini::-webkit-scrollbar-thumb {
  border-radius: 25px;
  background: #138b71;
  box-shadow: inset 1px 1px 4px 0.5px rgba(0, 0, 0, 0.2);
}

.scrollbar-mini::-webkit-scrollbar-thumb:window-inactive {
  background: rgba(19, 139, 113, 0.1);
}

.scrollbar-mini::-webkit-scrollbar-track:window-inactive {
  background: rgba(55, 55, 55, 0.1);
}

/*
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-twitter-square"></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-twitter-square"></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-twitter-square"></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 throught 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

Styleguide Recipes.InteractiveExtras.Stars
*/
.star-rating {
  color: #c1c3c7;
}
.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: #157894;
}

/*
 Design Base

 Arches is design inspired by a pad of paper in the hand.  Subtle Textures and Layer shadows keep the readablity very high. 

 Weight: -50

 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 beuatiful 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+cemter"><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","system",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+cemter"><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+cemter"><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+cemter"><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

Below are just a few of the icons available from Font Awesome Pro.

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_shade-4 br_solid br_1"><div class="flex"><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_shade-5 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_shade h:c_shade-n2 text font_bold font_display">{{modifier_class}}</span></div></div></div>

MarkupWrapperClasses:
m_0 p_0 grid justify-start items-start gap-x_0 gap-y_0 template-x_15

Styleguide DesignBase.Icons
*/
/*

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)           	  - #898989; shade
map-get($theme-palette, accent)               -  #16a385;  accent
map-get($theme-palette, info)                 -  #a3988c; info
map-get($theme-palette, highlight)            -  #7742bd; highlight

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 assoicated 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 Recomendation is a color collect used in Guideline recomendations.

$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 Evedence is a color collect used in Guideline recomendations.

$loe-dark-blue                 	- #3e6fb7;LOE A
$loe-mid-blue              		- #659cd3;LOE B-R
$loe-light-blue                	- #a1c1e6;LOE B-NR
$loe-pale-blue                	- #b5d5e5; 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                    - #6f3db1; 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-arrthythmias-EP 								- #005b37;  Arrthythmias 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-preicardial 									- #0079ad;  Preicardial Disease
$pathway-prevention 									- #a01d51;  Prevention
$pathway-pulmonary-hypertension 						- #d60e7e;  Pulmonary Hypertension and Venous Thromboembolic Disease
$pathway-special 										- #00b6f1;  Special
$pathway-stable-ischemnic-heart-disease 				- #0f3e65;  Stable Ischemnic 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

*/
/*

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            -   #00aced;  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

 */
/*

Color Variations primary

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"
	style="background-color: #198dae;"
>
	<div class="p_3 bg_primary-n5 p-t_5">
		<div class="p_3 bg_white-7 c_black m-t_4">
			<div class="font-size_down font_bold" >primary-n5</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HEX:</span
				>
				<span class="user-select_all font_accent lowercase"
					>#030e11</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>RGB:</span
				><span class="user-select_all font_accent lowercase"
					>3, 14, 17</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HSL:</span
				><span class="user-select_all font_accent lowercase"
					>193deg, 75%, 4%</span
				>
			</div>
		</div>
	</div>
	<div class="p_3 bg_primary-n4 p-t_5">
		<div class="p_3 bg_white-7 c_black m-t_4">
			<div class="font-size_down font_bold" >primary-n4</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HEX:</span
				>
				<span class="user-select_all font_accent lowercase"
					>#061f26</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>RGB:</span
				><span class="user-select_all font_accent lowercase"
					>6, 31, 38</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HSL:</span
				><span class="user-select_all font_accent lowercase"
					>193deg, 75%, 9%</span
				>
			</div>
		</div>
	</div>
	<div class="p_3 bg_primary-n3 p-t_5">
		<div class="p_3 bg_white-7 c_black m-t_4">
			<div class="font-size_down font_bold" >primary-n3</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HEX:</span
				>
				<span class="user-select_all font_accent lowercase"
					>#0a3846</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>RGB:</span
				><span class="user-select_all font_accent lowercase"
					>10, 56, 70</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HSL:</span
				><span class="user-select_all font_accent lowercase"
					>193deg, 75%, 16%</span
				>
			</div>
		</div>
	</div>
	<div class="p_3 bg_primary-n2 p-t_5">
		<div class="p_3 bg_white-7 c_black m-t_4">
			<div class="font-size_down font_bold" >primary-n2</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HEX:</span
				>
				<span class="user-select_all font_accent lowercase"
					>#10596e</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>RGB:</span
				><span class="user-select_all font_accent lowercase"
					>16, 89, 110</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HSL:</span
				><span class="user-select_all font_accent lowercase"
					>193deg, 75%, 25%</span
				>
			</div>
		</div>
	</div>
	<div class="p_3 bg_primary-n1 p-t_5">
		<div class="p_3 bg_white-7 c_black m-t_4">
			<div class="font-size_down font_bold" >primary-n1</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HEX:</span
				>
				<span class="user-select_all font_accent lowercase"
					>#157894</span
				>
			</div>
			<div class="flex flex_inline">
				<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
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HSL:</span
				><span class="user-select_all font_accent lowercase"
					>193deg, 75%, 33%</span
				>
			</div>
		</div>
	</div>
    <div class="p_3 bg_primary p-t_5">
		<div class="p_3 bg_white-7 c_black m-t_4">
			<div class="font-size_down font_bold" >primary</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HEX:</span
				>
				<span class="user-select_all font_accent lowercase"
					>#198dae</span
				>
			</div>
			<div class="flex flex_inline">
				<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
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HSL:</span
				><span class="user-select_all font_accent lowercase"
					>193deg, 75%, 39%</span
				>
			</div>
		</div>
	</div>
    <div class="p_3 bg_primary-1 p-t_5">
		<div class="p_3 bg_white-7 c_black m-t_4">
			<div class="font-size_down font_bold" >primary-1</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HEX:</span
				>
				<span class="user-select_all font_accent lowercase"
					>#1faed7</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>RGB:</span
				><span class="user-select_all font_accent lowercase"
					>31, 174, 215</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HSL:</span
				><span class="user-select_all font_accent lowercase"
					>193deg, 75%, 48%</span
				>
			</div>
		</div>
	</div>
    <div class="p_3 bg_primary-2 p-t_5">
		<div class="p_3 bg_white-7 c_black m-t_4">
			<div class="font-size_down font_bold" >primary-2</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HEX:</span
				>
				<span class="user-select_all font_accent lowercase"
					>#54c6e6</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>RGB:</span
				><span class="user-select_all font_accent lowercase"
					>84, 198, 230</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HSL:</span
				><span class="user-select_all font_accent lowercase"
					>193deg, 75%, 62%</span
				>
			</div>
		</div>
	</div>
	<div class="p_3 bg_primary-3 p-t_5">
		<div class="p_3 bg_white-7 c_black m-t_4">
			<div class="font-size_down font_bold" >primary-3</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HEX:</span
				>
				<span class="user-select_all font_accent lowercase"
					>#92dbef</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>RGB:</span
				><span class="user-select_all font_accent lowercase"
					>146, 219, 239</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HSL:</span
				><span class="user-select_all font_accent lowercase"
					>193deg, 75%, 76%</span
				>
			</div>
		</div>
	</div>
    <div class="p_3 bg_primary-4 p-t_5">
		<div class="p_3 bg_white-7 c_black m-t_4">
			<div class="font-size_down font_bold" >primary-4</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HEX:</span
				>
				<span class="user-select_all font_accent lowercase"
					>#c3ebf6</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>RGB:</span
				><span class="user-select_all font_accent lowercase"
					>195, 235, 246</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HSL:</span
				><span class="user-select_all font_accent lowercase"
					>193deg, 75%, 87%</span
				>
			</div>
		</div>
	</div>
    <div class="p_3 bg_primary-5 p-t_5">
		<div class="p_3 bg_white-7 c_black m-t_4">
			<div class="font-size_down font_bold" >primary-5</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HEX:</span
				>
				<span class="user-select_all font_accent lowercase"
					>#e4f6fb</span
				>
			</div>
			<div class="flex flex_inline">
				<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
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HSL:</span
				><span class="user-select_all font_accent lowercase"
					>193deg, 75%, 94%</span
				>
			</div>
		</div>
	</div>
</div>





Weight:0

Styleguide DesignBase.CrayonBox.primary

*/
/*

Color Variations secondary

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"
	style="background-color: #676a72;"
>
	<div class="p_3 bg_secondary-n5 p-t_5">
		<div class="p_3 bg_white-7 c_black m-t_4">
			<div class="font-size_down font_bold" >secondary-n5</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HEX:</span
				>
				<span class="user-select_all font_accent lowercase"
					>#0a0b0b</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>RGB:</span
				><span class="user-select_all font_accent lowercase"
					>10, 11, 11</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HSL:</span
				><span class="user-select_all font_accent lowercase"
					>224deg, 5%, 4%</span
				>
			</div>
		</div>
	</div>
	<div class="p_3 bg_secondary-n4 p-t_5">
		<div class="p_3 bg_white-7 c_black m-t_4">
			<div class="font-size_down font_bold" >secondary-n4</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HEX:</span
				>
				<span class="user-select_all font_accent lowercase"
					>#171719</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>RGB:</span
				><span class="user-select_all font_accent lowercase"
					>23, 23, 25</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HSL:</span
				><span class="user-select_all font_accent lowercase"
					>224deg, 5%, 9%</span
				>
			</div>
		</div>
	</div>
	<div class="p_3 bg_secondary-n3 p-t_5">
		<div class="p_3 bg_white-7 c_black m-t_4">
			<div class="font-size_down font_bold" >secondary-n3</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HEX:</span
				>
				<span class="user-select_all font_accent lowercase"
					>#292a2e</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>RGB:</span
				><span class="user-select_all font_accent lowercase"
					>41, 42, 46</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HSL:</span
				><span class="user-select_all font_accent lowercase"
					>224deg, 5%, 17%</span
				>
			</div>
		</div>
	</div>
	<div class="p_3 bg_secondary-n2 p-t_5">
		<div class="p_3 bg_white-7 c_black m-t_4">
			<div class="font-size_down font_bold" >secondary-n2</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HEX:</span
				>
				<span class="user-select_all font_accent lowercase"
					>#414348</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>RGB:</span
				><span class="user-select_all font_accent lowercase"
					>65, 67, 72</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HSL:</span
				><span class="user-select_all font_accent lowercase"
					>224deg, 5%, 27%</span
				>
			</div>
		</div>
	</div>
	<div class="p_3 bg_secondary-n1 p-t_5">
		<div class="p_3 bg_white-7 c_black m-t_4">
			<div class="font-size_down font_bold" >secondary-n1</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HEX:</span
				>
				<span class="user-select_all font_accent lowercase"
					>#585a61</span
				>
			</div>
			<div class="flex flex_inline">
				<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
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HSL:</span
				><span class="user-select_all font_accent lowercase"
					>224deg, 5%, 36%</span
				>
			</div>
		</div>
	</div>
    <div class="p_3 bg_secondary p-t_5">
		<div class="p_3 bg_white-7 c_black m-t_4">
			<div class="font-size_down font_bold" >secondary</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HEX:</span
				>
				<span class="user-select_all font_accent lowercase"
					>#676a72</span
				>
			</div>
			<div class="flex flex_inline">
				<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
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HSL:</span
				><span class="user-select_all font_accent lowercase"
					>224deg, 5%, 43%</span
				>
			</div>
		</div>
	</div>
    <div class="p_3 bg_secondary-1 p-t_5">
		<div class="p_3 bg_white-7 c_black m-t_4">
			<div class="font-size_down font_bold" >secondary-1</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HEX:</span
				>
				<span class="user-select_all font_accent lowercase"
					>#7c8089</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>RGB:</span
				><span class="user-select_all font_accent lowercase"
					>124, 128, 137</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HSL:</span
				><span class="user-select_all font_accent lowercase"
					>224deg, 5%, 51%</span
				>
			</div>
		</div>
	</div>
    <div class="p_3 bg_secondary-2 p-t_5">
		<div class="p_3 bg_white-7 c_black m-t_4">
			<div class="font-size_down font_bold" >secondary-2</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HEX:</span
				>
				<span class="user-select_all font_accent lowercase"
					>#9ea1a7</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>RGB:</span
				><span class="user-select_all font_accent lowercase"
					>158, 161, 167</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HSL:</span
				><span class="user-select_all font_accent lowercase"
					>224deg, 5%, 64%</span
				>
			</div>
		</div>
	</div>
	<div class="p_3 bg_secondary-3 p-t_5">
		<div class="p_3 bg_white-7 c_black m-t_4">
			<div class="font-size_down font_bold" >secondary-3</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HEX:</span
				>
				<span class="user-select_all font_accent lowercase"
					>#c1c3c7</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>RGB:</span
				><span class="user-select_all font_accent lowercase"
					>193, 195, 199</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HSL:</span
				><span class="user-select_all font_accent lowercase"
					>224deg, 5%, 77%</span
				>
			</div>
		</div>
	</div>
    <div class="p_3 bg_secondary-4 p-t_5">
		<div class="p_3 bg_white-7 c_black m-t_4">
			<div class="font-size_down font_bold" >secondary-4</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HEX:</span
				>
				<span class="user-select_all font_accent lowercase"
					>#dddee0</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>RGB:</span
				><span class="user-select_all font_accent lowercase"
					>221, 222, 224</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HSL:</span
				><span class="user-select_all font_accent lowercase"
					>224deg, 5%, 87%</span
				>
			</div>
		</div>
	</div>
    <div class="p_3 bg_secondary-5 p-t_5">
		<div class="p_3 bg_white-7 c_black m-t_4">
			<div class="font-size_down font_bold" >secondary-5</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HEX:</span
				>
				<span class="user-select_all font_accent lowercase"
					>#f0f0f1</span
				>
			</div>
			<div class="flex flex_inline">
				<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
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HSL:</span
				><span class="user-select_all font_accent lowercase"
					>224deg, 5%, 94%</span
				>
			</div>
		</div>
	</div>
</div>





Weight:0

Styleguide DesignBase.CrayonBox.secondary

*/
/*

Color Variations success

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"
	style="background-color: #078a2e;"
>
	<div class="p_3 bg_success-n5 p-t_5">
		<div class="p_3 bg_white-7 c_black m-t_4">
			<div class="font-size_down font_bold" >success-n5</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HEX:</span
				>
				<span class="user-select_all font_accent lowercase"
					>#010e05</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>RGB:</span
				><span class="user-select_all font_accent lowercase"
					>1, 14, 5</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HSL:</span
				><span class="user-select_all font_accent lowercase"
					>138deg, 90%, 3%</span
				>
			</div>
		</div>
	</div>
	<div class="p_3 bg_success-n4 p-t_5">
		<div class="p_3 bg_white-7 c_black m-t_4">
			<div class="font-size_down font_bold" >success-n4</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HEX:</span
				>
				<span class="user-select_all font_accent lowercase"
					>#021e0a</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>RGB:</span
				><span class="user-select_all font_accent lowercase"
					>2, 30, 10</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HSL:</span
				><span class="user-select_all font_accent lowercase"
					>138deg, 90%, 6%</span
				>
			</div>
		</div>
	</div>
	<div class="p_3 bg_success-n3 p-t_5">
		<div class="p_3 bg_white-7 c_black m-t_4">
			<div class="font-size_down font_bold" >success-n3</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HEX:</span
				>
				<span class="user-select_all font_accent lowercase"
					>#033712</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>RGB:</span
				><span class="user-select_all font_accent lowercase"
					>3, 55, 18</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HSL:</span
				><span class="user-select_all font_accent lowercase"
					>138deg, 90%, 11%</span
				>
			</div>
		</div>
	</div>
	<div class="p_3 bg_success-n2 p-t_5">
		<div class="p_3 bg_white-7 c_black m-t_4">
			<div class="font-size_down font_bold" >success-n2</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HEX:</span
				>
				<span class="user-select_all font_accent lowercase"
					>#04571d</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>RGB:</span
				><span class="user-select_all font_accent lowercase"
					>4, 87, 29</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HSL:</span
				><span class="user-select_all font_accent lowercase"
					>138deg, 90%, 18%</span
				>
			</div>
		</div>
	</div>
	<div class="p_3 bg_success-n1 p-t_5">
		<div class="p_3 bg_white-7 c_black m-t_4">
			<div class="font-size_down font_bold" >success-n1</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HEX:</span
				>
				<span class="user-select_all font_accent lowercase"
					>#067527</span
				>
			</div>
			<div class="flex flex_inline">
				<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
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HSL:</span
				><span class="user-select_all font_accent lowercase"
					>138deg, 90%, 24%</span
				>
			</div>
		</div>
	</div>
    <div class="p_3 bg_success p-t_5">
		<div class="p_3 bg_white-7 c_black m-t_4">
			<div class="font-size_down font_bold" >success</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HEX:</span
				>
				<span class="user-select_all font_accent lowercase"
					>#078a2e</span
				>
			</div>
			<div class="flex flex_inline">
				<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
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HSL:</span
				><span class="user-select_all font_accent lowercase"
					>138deg, 90%, 28%</span
				>
			</div>
		</div>
	</div>
    <div class="p_3 bg_success-1 p-t_5">
		<div class="p_3 bg_white-7 c_black m-t_4">
			<div class="font-size_down font_bold" >success-1</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HEX:</span
				>
				<span class="user-select_all font_accent lowercase"
					>#0abe3f</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>RGB:</span
				><span class="user-select_all font_accent lowercase"
					>10, 190, 63</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HSL:</span
				><span class="user-select_all font_accent lowercase"
					>138deg, 90%, 39%</span
				>
			</div>
		</div>
	</div>
    <div class="p_3 bg_success-2 p-t_5">
		<div class="p_3 bg_white-7 c_black m-t_4">
			<div class="font-size_down font_bold" >success-2</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HEX:</span
				>
				<span class="user-select_all font_accent lowercase"
					>#24f462</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>RGB:</span
				><span class="user-select_all font_accent lowercase"
					>36, 244, 98</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HSL:</span
				><span class="user-select_all font_accent lowercase"
					>138deg, 90%, 55%</span
				>
			</div>
		</div>
	</div>
	<div class="p_3 bg_success-3 p-t_5">
		<div class="p_3 bg_white-7 c_black m-t_4">
			<div class="font-size_down font_bold" >success-3</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HEX:</span
				>
				<span class="user-select_all font_accent lowercase"
					>#74f89b</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>RGB:</span
				><span class="user-select_all font_accent lowercase"
					>116, 248, 155</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HSL:</span
				><span class="user-select_all font_accent lowercase"
					>138deg, 90%, 71%</span
				>
			</div>
		</div>
	</div>
    <div class="p_3 bg_success-4 p-t_5">
		<div class="p_3 bg_white-7 c_black m-t_4">
			<div class="font-size_down font_bold" >success-4</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HEX:</span
				>
				<span class="user-select_all font_accent lowercase"
					>#b3fbc8</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>RGB:</span
				><span class="user-select_all font_accent lowercase"
					>179, 251, 200</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HSL:</span
				><span class="user-select_all font_accent lowercase"
					>138deg, 90%, 84%</span
				>
			</div>
		</div>
	</div>
    <div class="p_3 bg_success-5 p-t_5">
		<div class="p_3 bg_white-7 c_black m-t_4">
			<div class="font-size_down font_bold" >success-5</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HEX:</span
				>
				<span class="user-select_all font_accent lowercase"
					>#dcfde6</span
				>
			</div>
			<div class="flex flex_inline">
				<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
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HSL:</span
				><span class="user-select_all font_accent lowercase"
					>138deg, 90%, 93%</span
				>
			</div>
		</div>
	</div>
</div>





Weight:0

Styleguide DesignBase.CrayonBox.success

*/
/*

Color Variations shade

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"
	style="background-color: #898989;"
>
	<div class="p_3 bg_shade-n5 p-t_5">
		<div class="p_3 bg_white-7 c_black m-t_4">
			<div class="font-size_down font_bold" >shade-n5</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HEX:</span
				>
				<span class="user-select_all font_accent lowercase"
					>#0e0e0e</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>RGB:</span
				><span class="user-select_all font_accent lowercase"
					>14, 14, 14</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HSL:</span
				><span class="user-select_all font_accent lowercase"
					>0deg, 0%, 5%</span
				>
			</div>
		</div>
	</div>
	<div class="p_3 bg_shade-n4 p-t_5">
		<div class="p_3 bg_white-7 c_black m-t_4">
			<div class="font-size_down font_bold" >shade-n4</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HEX:</span
				>
				<span class="user-select_all font_accent lowercase"
					>#1e1e1e</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>RGB:</span
				><span class="user-select_all font_accent lowercase"
					>30, 30, 30</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HSL:</span
				><span class="user-select_all font_accent lowercase"
					>0deg, 0%, 12%</span
				>
			</div>
		</div>
	</div>
	<div class="p_3 bg_shade-n3 p-t_5">
		<div class="p_3 bg_white-7 c_black m-t_4">
			<div class="font-size_down font_bold" >shade-n3</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HEX:</span
				>
				<span class="user-select_all font_accent lowercase"
					>#373737</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>RGB:</span
				><span class="user-select_all font_accent lowercase"
					>55, 55, 55</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HSL:</span
				><span class="user-select_all font_accent lowercase"
					>0deg, 0%, 21%</span
				>
			</div>
		</div>
	</div>
	<div class="p_3 bg_shade-n2 p-t_5">
		<div class="p_3 bg_white-7 c_black m-t_4">
			<div class="font-size_down font_bold" >shade-n2</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HEX:</span
				>
				<span class="user-select_all font_accent lowercase"
					>#565656</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>RGB:</span
				><span class="user-select_all font_accent lowercase"
					>86, 86, 86</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HSL:</span
				><span class="user-select_all font_accent lowercase"
					>0deg, 0%, 34%</span
				>
			</div>
		</div>
	</div>
	<div class="p_3 bg_shade-n1 p-t_5">
		<div class="p_3 bg_white-7 c_black m-t_4">
			<div class="font-size_down font_bold" >shade-n1</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HEX:</span
				>
				<span class="user-select_all font_accent lowercase"
					>#747474</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>RGB:</span
				><span class="user-select_all font_accent lowercase"
					>116, 116, 116</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HSL:</span
				><span class="user-select_all font_accent lowercase"
					>0deg, 0%, 46%</span
				>
			</div>
		</div>
	</div>
    <div class="p_3 bg_shade p-t_5">
		<div class="p_3 bg_white-7 c_black m-t_4">
			<div class="font-size_down font_bold" >shade</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HEX:</span
				>
				<span class="user-select_all font_accent lowercase"
					>#898989</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>RGB:</span
				><span class="user-select_all font_accent lowercase"
					>137, 137, 137</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HSL:</span
				><span class="user-select_all font_accent lowercase"
					>0deg, 0%, 54%</span
				>
			</div>
		</div>
	</div>
    <div class="p_3 bg_shade-1 p-t_5">
		<div class="p_3 bg_white-7 c_black m-t_4">
			<div class="font-size_down font_bold" >shade-1</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HEX:</span
				>
				<span class="user-select_all font_accent lowercase"
					>#9b9b9b</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>RGB:</span
				><span class="user-select_all font_accent lowercase"
					>155, 155, 155</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HSL:</span
				><span class="user-select_all font_accent lowercase"
					>0deg, 0%, 61%</span
				>
			</div>
		</div>
	</div>
    <div class="p_3 bg_shade-2 p-t_5">
		<div class="p_3 bg_white-7 c_black m-t_4">
			<div class="font-size_down font_bold" >shade-2</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HEX:</span
				>
				<span class="user-select_all font_accent lowercase"
					>#b5b5b5</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>RGB:</span
				><span class="user-select_all font_accent lowercase"
					>181, 181, 181</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HSL:</span
				><span class="user-select_all font_accent lowercase"
					>0deg, 0%, 71%</span
				>
			</div>
		</div>
	</div>
	<div class="p_3 bg_shade-3 p-t_5">
		<div class="p_3 bg_white-7 c_black m-t_4">
			<div class="font-size_down font_bold" >shade-3</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HEX:</span
				>
				<span class="user-select_all font_accent lowercase"
					>#d0d0d0</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>RGB:</span
				><span class="user-select_all font_accent lowercase"
					>208, 208, 208</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HSL:</span
				><span class="user-select_all font_accent lowercase"
					>0deg, 0%, 81%</span
				>
			</div>
		</div>
	</div>
    <div class="p_3 bg_shade-4 p-t_5">
		<div class="p_3 bg_white-7 c_black m-t_4">
			<div class="font-size_down font_bold" >shade-4</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HEX:</span
				>
				<span class="user-select_all font_accent lowercase"
					>#e5e5e5</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>RGB:</span
				><span class="user-select_all font_accent lowercase"
					>229, 229, 229</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HSL:</span
				><span class="user-select_all font_accent lowercase"
					>0deg, 0%, 90%</span
				>
			</div>
		</div>
	</div>
    <div class="p_3 bg_shade-5 p-t_5">
		<div class="p_3 bg_white-7 c_black m-t_4">
			<div class="font-size_down font_bold" >shade-5</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HEX:</span
				>
				<span class="user-select_all font_accent lowercase"
					>#f3f3f3</span
				>
			</div>
			<div class="flex flex_inline">
				<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
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HSL:</span
				><span class="user-select_all font_accent lowercase"
					>0deg, 0%, 95%</span
				>
			</div>
		</div>
	</div>
</div>





Weight:0

Styleguide DesignBase.CrayonBox.shade

*/
/*

Color Variations warning

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"
	style="background-color: #da8210;"
>
	<div class="p_3 bg_warning-n5 p-t_5">
		<div class="p_3 bg_white-7 c_black m-t_4">
			<div class="font-size_down font_bold" >warning-n5</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HEX:</span
				>
				<span class="user-select_all font_accent lowercase"
					>#160d02</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>RGB:</span
				><span class="user-select_all font_accent lowercase"
					>22, 13, 2</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HSL:</span
				><span class="user-select_all font_accent lowercase"
					>34deg, 86%, 5%</span
				>
			</div>
		</div>
	</div>
	<div class="p_3 bg_warning-n4 p-t_5">
		<div class="p_3 bg_white-7 c_black m-t_4">
			<div class="font-size_down font_bold" >warning-n4</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HEX:</span
				>
				<span class="user-select_all font_accent lowercase"
					>#301d04</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>RGB:</span
				><span class="user-select_all font_accent lowercase"
					>48, 29, 4</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HSL:</span
				><span class="user-select_all font_accent lowercase"
					>34deg, 86%, 10%</span
				>
			</div>
		</div>
	</div>
	<div class="p_3 bg_warning-n3 p-t_5">
		<div class="p_3 bg_white-7 c_black m-t_4">
			<div class="font-size_down font_bold" >warning-n3</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HEX:</span
				>
				<span class="user-select_all font_accent lowercase"
					>#573406</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>RGB:</span
				><span class="user-select_all font_accent lowercase"
					>87, 52, 6</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HSL:</span
				><span class="user-select_all font_accent lowercase"
					>34deg, 86%, 18%</span
				>
			</div>
		</div>
	</div>
	<div class="p_3 bg_warning-n2 p-t_5">
		<div class="p_3 bg_white-7 c_black m-t_4">
			<div class="font-size_down font_bold" >warning-n2</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HEX:</span
				>
				<span class="user-select_all font_accent lowercase"
					>#89520a</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>RGB:</span
				><span class="user-select_all font_accent lowercase"
					>137, 82, 10</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HSL:</span
				><span class="user-select_all font_accent lowercase"
					>34deg, 86%, 29%</span
				>
			</div>
		</div>
	</div>
	<div class="p_3 bg_warning-n1 p-t_5">
		<div class="p_3 bg_white-7 c_black m-t_4">
			<div class="font-size_down font_bold" >warning-n1</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HEX:</span
				>
				<span class="user-select_all font_accent lowercase"
					>#b96f0e</span
				>
			</div>
			<div class="flex flex_inline">
				<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
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HSL:</span
				><span class="user-select_all font_accent lowercase"
					>34deg, 86%, 39%</span
				>
			</div>
		</div>
	</div>
    <div class="p_3 bg_warning p-t_5">
		<div class="p_3 bg_white-7 c_black m-t_4">
			<div class="font-size_down font_bold" >warning</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HEX:</span
				>
				<span class="user-select_all font_accent lowercase"
					>#da8210</span
				>
			</div>
			<div class="flex flex_inline">
				<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
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HSL:</span
				><span class="user-select_all font_accent lowercase"
					>34deg, 86%, 46%</span
				>
			</div>
		</div>
	</div>
    <div class="p_3 bg_warning-1 p-t_5">
		<div class="p_3 bg_white-7 c_black m-t_4">
			<div class="font-size_down font_bold" >warning-1</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HEX:</span
				>
				<span class="user-select_all font_accent lowercase"
					>#ef9724</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>RGB:</span
				><span class="user-select_all font_accent lowercase"
					>239, 151, 36</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HSL:</span
				><span class="user-select_all font_accent lowercase"
					>34deg, 86%, 54%</span
				>
			</div>
		</div>
	</div>
    <div class="p_3 bg_warning-2 p-t_5">
		<div class="p_3 bg_white-7 c_black m-t_4">
			<div class="font-size_down font_bold" >warning-2</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HEX:</span
				>
				<span class="user-select_all font_accent lowercase"
					>#f3b25d</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>RGB:</span
				><span class="user-select_all font_accent lowercase"
					>243, 178, 93</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HSL:</span
				><span class="user-select_all font_accent lowercase"
					>34deg, 86%, 66%</span
				>
			</div>
		</div>
	</div>
	<div class="p_3 bg_warning-3 p-t_5">
		<div class="p_3 bg_white-7 c_black m-t_4">
			<div class="font-size_down font_bold" >warning-3</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HEX:</span
				>
				<span class="user-select_all font_accent lowercase"
					>#f7ce98</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>RGB:</span
				><span class="user-select_all font_accent lowercase"
					>247, 206, 152</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HSL:</span
				><span class="user-select_all font_accent lowercase"
					>34deg, 86%, 78%</span
				>
			</div>
		</div>
	</div>
    <div class="p_3 bg_warning-4 p-t_5">
		<div class="p_3 bg_white-7 c_black m-t_4">
			<div class="font-size_down font_bold" >warning-4</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HEX:</span
				>
				<span class="user-select_all font_accent lowercase"
					>#fbe4c6</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>RGB:</span
				><span class="user-select_all font_accent lowercase"
					>251, 228, 198</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HSL:</span
				><span class="user-select_all font_accent lowercase"
					>34deg, 86%, 88%</span
				>
			</div>
		</div>
	</div>
    <div class="p_3 bg_warning-5 p-t_5">
		<div class="p_3 bg_white-7 c_black m-t_4">
			<div class="font-size_down font_bold" >warning-5</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HEX:</span
				>
				<span class="user-select_all font_accent lowercase"
					>#fdf3e5</span
				>
			</div>
			<div class="flex flex_inline">
				<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
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HSL:</span
				><span class="user-select_all font_accent lowercase"
					>34deg, 86%, 95%</span
				>
			</div>
		</div>
	</div>
</div>





Weight:0

Styleguide DesignBase.CrayonBox.warning

*/
/*

Color Variations alert

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"
	style="background-color: #dd1a1a;"
>
	<div class="p_3 bg_alert-n5 p-t_5">
		<div class="p_3 bg_white-7 c_black m-t_4">
			<div class="font-size_down font_bold" >alert-n5</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HEX:</span
				>
				<span class="user-select_all font_accent lowercase"
					>#160303</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>RGB:</span
				><span class="user-select_all font_accent lowercase"
					>22, 3, 3</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HSL:</span
				><span class="user-select_all font_accent lowercase"
					>0deg, 79%, 5%</span
				>
			</div>
		</div>
	</div>
	<div class="p_3 bg_alert-n4 p-t_5">
		<div class="p_3 bg_white-7 c_black m-t_4">
			<div class="font-size_down font_bold" >alert-n4</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HEX:</span
				>
				<span class="user-select_all font_accent lowercase"
					>#310606</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>RGB:</span
				><span class="user-select_all font_accent lowercase"
					>49, 6, 6</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HSL:</span
				><span class="user-select_all font_accent lowercase"
					>0deg, 79%, 11%</span
				>
			</div>
		</div>
	</div>
	<div class="p_3 bg_alert-n3 p-t_5">
		<div class="p_3 bg_white-7 c_black m-t_4">
			<div class="font-size_down font_bold" >alert-n3</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HEX:</span
				>
				<span class="user-select_all font_accent lowercase"
					>#580a0a</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>RGB:</span
				><span class="user-select_all font_accent lowercase"
					>88, 10, 10</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HSL:</span
				><span class="user-select_all font_accent lowercase"
					>0deg, 79%, 19%</span
				>
			</div>
		</div>
	</div>
	<div class="p_3 bg_alert-n2 p-t_5">
		<div class="p_3 bg_white-7 c_black m-t_4">
			<div class="font-size_down font_bold" >alert-n2</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HEX:</span
				>
				<span class="user-select_all font_accent lowercase"
					>#8b1010</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>RGB:</span
				><span class="user-select_all font_accent lowercase"
					>139, 16, 16</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HSL:</span
				><span class="user-select_all font_accent lowercase"
					>0deg, 79%, 31%</span
				>
			</div>
		</div>
	</div>
	<div class="p_3 bg_alert-n1 p-t_5">
		<div class="p_3 bg_white-7 c_black m-t_4">
			<div class="font-size_down font_bold" >alert-n1</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HEX:</span
				>
				<span class="user-select_all font_accent lowercase"
					>#bc1616</span
				>
			</div>
			<div class="flex flex_inline">
				<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
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HSL:</span
				><span class="user-select_all font_accent lowercase"
					>0deg, 79%, 41%</span
				>
			</div>
		</div>
	</div>
    <div class="p_3 bg_alert p-t_5">
		<div class="p_3 bg_white-7 c_black m-t_4">
			<div class="font-size_down font_bold" >alert</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HEX:</span
				>
				<span class="user-select_all font_accent lowercase"
					>#dd1a1a</span
				>
			</div>
			<div class="flex flex_inline">
				<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
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HSL:</span
				><span class="user-select_all font_accent lowercase"
					>0deg, 79%, 48%</span
				>
			</div>
		</div>
	</div>
    <div class="p_3 bg_alert-1 p-t_5">
		<div class="p_3 bg_white-7 c_black m-t_4">
			<div class="font-size_down font_bold" >alert-1</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HEX:</span
				>
				<span class="user-select_all font_accent lowercase"
					>#e73737</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>RGB:</span
				><span class="user-select_all font_accent lowercase"
					>231, 55, 55</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HSL:</span
				><span class="user-select_all font_accent lowercase"
					>0deg, 79%, 56%</span
				>
			</div>
		</div>
	</div>
    <div class="p_3 bg_alert-2 p-t_5">
		<div class="p_3 bg_white-7 c_black m-t_4">
			<div class="font-size_down font_bold" >alert-2</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HEX:</span
				>
				<span class="user-select_all font_accent lowercase"
					>#ee6b6b</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>RGB:</span
				><span class="user-select_all font_accent lowercase"
					>238, 107, 107</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HSL:</span
				><span class="user-select_all font_accent lowercase"
					>0deg, 79%, 68%</span
				>
			</div>
		</div>
	</div>
	<div class="p_3 bg_alert-3 p-t_5">
		<div class="p_3 bg_white-7 c_black m-t_4">
			<div class="font-size_down font_bold" >alert-3</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HEX:</span
				>
				<span class="user-select_all font_accent lowercase"
					>#f4a1a1</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>RGB:</span
				><span class="user-select_all font_accent lowercase"
					>244, 161, 161</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HSL:</span
				><span class="user-select_all font_accent lowercase"
					>0deg, 79%, 79%</span
				>
			</div>
		</div>
	</div>
    <div class="p_3 bg_alert-4 p-t_5">
		<div class="p_3 bg_white-7 c_black m-t_4">
			<div class="font-size_down font_bold" >alert-4</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HEX:</span
				>
				<span class="user-select_all font_accent lowercase"
					>#f9cbcb</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>RGB:</span
				><span class="user-select_all font_accent lowercase"
					>249, 203, 203</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HSL:</span
				><span class="user-select_all font_accent lowercase"
					>0deg, 79%, 89%</span
				>
			</div>
		</div>
	</div>
    <div class="p_3 bg_alert-5 p-t_5">
		<div class="p_3 bg_white-7 c_black m-t_4">
			<div class="font-size_down font_bold" >alert-5</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HEX:</span
				>
				<span class="user-select_all font_accent lowercase"
					>#fce7e7</span
				>
			</div>
			<div class="flex flex_inline">
				<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
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HSL:</span
				><span class="user-select_all font_accent lowercase"
					>0deg, 79%, 95%</span
				>
			</div>
		</div>
	</div>
</div>





Weight:0

Styleguide DesignBase.CrayonBox.alert

*/
/*

Color Variations navigation

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"
	style="background-color: #2b58c0;"
>
	<div class="p_3 bg_navigation-n5 p-t_5">
		<div class="p_3 bg_white-7 c_black m-t_4">
			<div class="font-size_down font_bold" >navigation-n5</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HEX:</span
				>
				<span class="user-select_all font_accent lowercase"
					>#040913</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>RGB:</span
				><span class="user-select_all font_accent lowercase"
					>4, 9, 19</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HSL:</span
				><span class="user-select_all font_accent lowercase"
					>222deg, 63%, 5%</span
				>
			</div>
		</div>
	</div>
	<div class="p_3 bg_navigation-n4 p-t_5">
		<div class="p_3 bg_white-7 c_black m-t_4">
			<div class="font-size_down font_bold" >navigation-n4</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HEX:</span
				>
				<span class="user-select_all font_accent lowercase"
					>#09132a</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>RGB:</span
				><span class="user-select_all font_accent lowercase"
					>9, 19, 42</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HSL:</span
				><span class="user-select_all font_accent lowercase"
					>222deg, 63%, 10%</span
				>
			</div>
		</div>
	</div>
	<div class="p_3 bg_navigation-n3 p-t_5">
		<div class="p_3 bg_white-7 c_black m-t_4">
			<div class="font-size_down font_bold" >navigation-n3</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HEX:</span
				>
				<span class="user-select_all font_accent lowercase"
					>#11234d</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>RGB:</span
				><span class="user-select_all font_accent lowercase"
					>17, 35, 77</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HSL:</span
				><span class="user-select_all font_accent lowercase"
					>222deg, 63%, 18%</span
				>
			</div>
		</div>
	</div>
	<div class="p_3 bg_navigation-n2 p-t_5">
		<div class="p_3 bg_white-7 c_black m-t_4">
			<div class="font-size_down font_bold" >navigation-n2</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HEX:</span
				>
				<span class="user-select_all font_accent lowercase"
					>#1b3779</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>RGB:</span
				><span class="user-select_all font_accent lowercase"
					>27, 55, 121</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HSL:</span
				><span class="user-select_all font_accent lowercase"
					>222deg, 63%, 29%</span
				>
			</div>
		</div>
	</div>
	<div class="p_3 bg_navigation-n1 p-t_5">
		<div class="p_3 bg_white-7 c_black m-t_4">
			<div class="font-size_down font_bold" >navigation-n1</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HEX:</span
				>
				<span class="user-select_all font_accent lowercase"
					>#254ba3</span
				>
			</div>
			<div class="flex flex_inline">
				<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
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HSL:</span
				><span class="user-select_all font_accent lowercase"
					>222deg, 63%, 39%</span
				>
			</div>
		</div>
	</div>
    <div class="p_3 bg_navigation p-t_5">
		<div class="p_3 bg_white-7 c_black m-t_4">
			<div class="font-size_down font_bold" >navigation</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HEX:</span
				>
				<span class="user-select_all font_accent lowercase"
					>#2b58c0</span
				>
			</div>
			<div class="flex flex_inline">
				<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
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HSL:</span
				><span class="user-select_all font_accent lowercase"
					>222deg, 63%, 46%</span
				>
			</div>
		</div>
	</div>
    <div class="p_3 bg_navigation-1 p-t_5">
		<div class="p_3 bg_white-7 c_black m-t_4">
			<div class="font-size_down font_bold" >navigation-1</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HEX:</span
				>
				<span class="user-select_all font_accent lowercase"
					>#406dd4</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>RGB:</span
				><span class="user-select_all font_accent lowercase"
					>64, 109, 212</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HSL:</span
				><span class="user-select_all font_accent lowercase"
					>222deg, 63%, 54%</span
				>
			</div>
		</div>
	</div>
    <div class="p_3 bg_navigation-2 p-t_5">
		<div class="p_3 bg_white-7 c_black m-t_4">
			<div class="font-size_down font_bold" >navigation-2</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HEX:</span
				>
				<span class="user-select_all font_accent lowercase"
					>#7193df</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>RGB:</span
				><span class="user-select_all font_accent lowercase"
					>113, 147, 223</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HSL:</span
				><span class="user-select_all font_accent lowercase"
					>222deg, 63%, 66%</span
				>
			</div>
		</div>
	</div>
	<div class="p_3 bg_navigation-3 p-t_5">
		<div class="p_3 bg_white-7 c_black m-t_4">
			<div class="font-size_down font_bold" >navigation-3</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HEX:</span
				>
				<span class="user-select_all font_accent lowercase"
					>#a5baeb</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>RGB:</span
				><span class="user-select_all font_accent lowercase"
					>165, 186, 235</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HSL:</span
				><span class="user-select_all font_accent lowercase"
					>222deg, 63%, 78%</span
				>
			</div>
		</div>
	</div>
    <div class="p_3 bg_navigation-4 p-t_5">
		<div class="p_3 bg_white-7 c_black m-t_4">
			<div class="font-size_down font_bold" >navigation-4</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HEX:</span
				>
				<span class="user-select_all font_accent lowercase"
					>#ced9f4</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>RGB:</span
				><span class="user-select_all font_accent lowercase"
					>206, 217, 244</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HSL:</span
				><span class="user-select_all font_accent lowercase"
					>222deg, 63%, 88%</span
				>
			</div>
		</div>
	</div>
    <div class="p_3 bg_navigation-5 p-t_5">
		<div class="p_3 bg_white-7 c_black m-t_4">
			<div class="font-size_down font_bold" >navigation-5</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HEX:</span
				>
				<span class="user-select_all font_accent lowercase"
					>#e9eefa</span
				>
			</div>
			<div class="flex flex_inline">
				<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
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HSL:</span
				><span class="user-select_all font_accent lowercase"
					>222deg, 63%, 95%</span
				>
			</div>
		</div>
	</div>
</div>





Weight:0

Styleguide DesignBase.CrayonBox.navigation

*/
/*

Color Variations accent

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"
	style="background-color: #16a385;"
>
	<div class="p_3 bg_accent-n5 p-t_5">
		<div class="p_3 bg_white-7 c_black m-t_4">
			<div class="font-size_down font_bold" >accent-n5</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HEX:</span
				>
				<span class="user-select_all font_accent lowercase"
					>#02100d</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>RGB:</span
				><span class="user-select_all font_accent lowercase"
					>2, 16, 13</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HSL:</span
				><span class="user-select_all font_accent lowercase"
					>167deg, 76%, 4%</span
				>
			</div>
		</div>
	</div>
	<div class="p_3 bg_accent-n4 p-t_5">
		<div class="p_3 bg_white-7 c_black m-t_4">
			<div class="font-size_down font_bold" >accent-n4</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HEX:</span
				>
				<span class="user-select_all font_accent lowercase"
					>#05241d</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>RGB:</span
				><span class="user-select_all font_accent lowercase"
					>5, 36, 29</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HSL:</span
				><span class="user-select_all font_accent lowercase"
					>167deg, 76%, 8%</span
				>
			</div>
		</div>
	</div>
	<div class="p_3 bg_accent-n3 p-t_5">
		<div class="p_3 bg_white-7 c_black m-t_4">
			<div class="font-size_down font_bold" >accent-n3</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HEX:</span
				>
				<span class="user-select_all font_accent lowercase"
					>#094135</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>RGB:</span
				><span class="user-select_all font_accent lowercase"
					>9, 65, 53</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HSL:</span
				><span class="user-select_all font_accent lowercase"
					>167deg, 76%, 15%</span
				>
			</div>
		</div>
	</div>
	<div class="p_3 bg_accent-n2 p-t_5">
		<div class="p_3 bg_white-7 c_black m-t_4">
			<div class="font-size_down font_bold" >accent-n2</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HEX:</span
				>
				<span class="user-select_all font_accent lowercase"
					>#0e6754</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>RGB:</span
				><span class="user-select_all font_accent lowercase"
					>14, 103, 84</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HSL:</span
				><span class="user-select_all font_accent lowercase"
					>167deg, 76%, 23%</span
				>
			</div>
		</div>
	</div>
	<div class="p_3 bg_accent-n1 p-t_5">
		<div class="p_3 bg_white-7 c_black m-t_4">
			<div class="font-size_down font_bold" >accent-n1</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HEX:</span
				>
				<span class="user-select_all font_accent lowercase"
					>#138b71</span
				>
			</div>
			<div class="flex flex_inline">
				<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
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HSL:</span
				><span class="user-select_all font_accent lowercase"
					>167deg, 76%, 31%</span
				>
			</div>
		</div>
	</div>
    <div class="p_3 bg_accent p-t_5">
		<div class="p_3 bg_white-7 c_black m-t_4">
			<div class="font-size_down font_bold" >accent</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HEX:</span
				>
				<span class="user-select_all font_accent lowercase"
					>#16a385</span
				>
			</div>
			<div class="flex flex_inline">
				<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
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HSL:</span
				><span class="user-select_all font_accent lowercase"
					>167deg, 76%, 36%</span
				>
			</div>
		</div>
	</div>
    <div class="p_3 bg_accent-1 p-t_5">
		<div class="p_3 bg_white-7 c_black m-t_4">
			<div class="font-size_down font_bold" >accent-1</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HEX:</span
				>
				<span class="user-select_all font_accent lowercase"
					>#1ccea8</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>RGB:</span
				><span class="user-select_all font_accent lowercase"
					>28, 206, 168</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HSL:</span
				><span class="user-select_all font_accent lowercase"
					>167deg, 76%, 46%</span
				>
			</div>
		</div>
	</div>
    <div class="p_3 bg_accent-2 p-t_5">
		<div class="p_3 bg_white-7 c_black m-t_4">
			<div class="font-size_down font_bold" >accent-2</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HEX:</span
				>
				<span class="user-select_all font_accent lowercase"
					>#4be7c5</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>RGB:</span
				><span class="user-select_all font_accent lowercase"
					>75, 231, 197</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HSL:</span
				><span class="user-select_all font_accent lowercase"
					>167deg, 76%, 60%</span
				>
			</div>
		</div>
	</div>
	<div class="p_3 bg_accent-3 p-t_5">
		<div class="p_3 bg_white-7 c_black m-t_4">
			<div class="font-size_down font_bold" >accent-3</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HEX:</span
				>
				<span class="user-select_all font_accent lowercase"
					>#8cf0da</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>RGB:</span
				><span class="user-select_all font_accent lowercase"
					>140, 240, 218</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HSL:</span
				><span class="user-select_all font_accent lowercase"
					>167deg, 76%, 75%</span
				>
			</div>
		</div>
	</div>
    <div class="p_3 bg_accent-4 p-t_5">
		<div class="p_3 bg_white-7 c_black m-t_4">
			<div class="font-size_down font_bold" >accent-4</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HEX:</span
				>
				<span class="user-select_all font_accent lowercase"
					>#c0f6eb</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>RGB:</span
				><span class="user-select_all font_accent lowercase"
					>192, 246, 235</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HSL:</span
				><span class="user-select_all font_accent lowercase"
					>167deg, 76%, 86%</span
				>
			</div>
		</div>
	</div>
    <div class="p_3 bg_accent-5 p-t_5">
		<div class="p_3 bg_white-7 c_black m-t_4">
			<div class="font-size_down font_bold" >accent-5</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HEX:</span
				>
				<span class="user-select_all font_accent lowercase"
					>#e2fbf6</span
				>
			</div>
			<div class="flex flex_inline">
				<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
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HSL:</span
				><span class="user-select_all font_accent lowercase"
					>167deg, 76%, 94%</span
				>
			</div>
		</div>
	</div>
</div>





Weight:0

Styleguide DesignBase.CrayonBox.accent

*/
/*

Color Variations info

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"
	style="background-color: #a3988c;"
>
	<div class="p_3 bg_info-n5 p-t_5">
		<div class="p_3 bg_white-7 c_black m-t_4">
			<div class="font-size_down font_bold" >info-n5</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HEX:</span
				>
				<span class="user-select_all font_accent lowercase"
					>#110f0d</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>RGB:</span
				><span class="user-select_all font_accent lowercase"
					>17, 15, 13</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HSL:</span
				><span class="user-select_all font_accent lowercase"
					>31deg, 11%, 6%</span
				>
			</div>
		</div>
	</div>
	<div class="p_3 bg_info-n4 p-t_5">
		<div class="p_3 bg_white-7 c_black m-t_4">
			<div class="font-size_down font_bold" >info-n4</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HEX:</span
				>
				<span class="user-select_all font_accent lowercase"
					>#25211e</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>RGB:</span
				><span class="user-select_all font_accent lowercase"
					>37, 33, 30</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HSL:</span
				><span class="user-select_all font_accent lowercase"
					>31deg, 11%, 13%</span
				>
			</div>
		</div>
	</div>
	<div class="p_3 bg_info-n3 p-t_5">
		<div class="p_3 bg_white-7 c_black m-t_4">
			<div class="font-size_down font_bold" >info-n3</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HEX:</span
				>
				<span class="user-select_all font_accent lowercase"
					>#433d36</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>RGB:</span
				><span class="user-select_all font_accent lowercase"
					>67, 61, 54</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HSL:</span
				><span class="user-select_all font_accent lowercase"
					>31deg, 11%, 24%</span
				>
			</div>
		</div>
	</div>
	<div class="p_3 bg_info-n2 p-t_5">
		<div class="p_3 bg_white-7 c_black m-t_4">
			<div class="font-size_down font_bold" >info-n2</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HEX:</span
				>
				<span class="user-select_all font_accent lowercase"
					>#6a6055</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>RGB:</span
				><span class="user-select_all font_accent lowercase"
					>106, 96, 85</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HSL:</span
				><span class="user-select_all font_accent lowercase"
					>31deg, 11%, 37%</span
				>
			</div>
		</div>
	</div>
	<div class="p_3 bg_info-n1 p-t_5">
		<div class="p_3 bg_white-7 c_black m-t_4">
			<div class="font-size_down font_bold" >info-n1</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HEX:</span
				>
				<span class="user-select_all font_accent lowercase"
					>#8f8173</span
				>
			</div>
			<div class="flex flex_inline">
				<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
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HSL:</span
				><span class="user-select_all font_accent lowercase"
					>31deg, 11%, 51%</span
				>
			</div>
		</div>
	</div>
    <div class="p_3 bg_info p-t_5">
		<div class="p_3 bg_white-7 c_black m-t_4">
			<div class="font-size_down font_bold" >info</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HEX:</span
				>
				<span class="user-select_all font_accent lowercase"
					>#a3988c</span
				>
			</div>
			<div class="flex flex_inline">
				<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
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HSL:</span
				><span class="user-select_all font_accent lowercase"
					>31deg, 11%, 59%</span
				>
			</div>
		</div>
	</div>
    <div class="p_3 bg_info-1 p-t_5">
		<div class="p_3 bg_white-7 c_black m-t_4">
			<div class="font-size_down font_bold" >info-1</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HEX:</span
				>
				<span class="user-select_all font_accent lowercase"
					>#b1a79d</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>RGB:</span
				><span class="user-select_all font_accent lowercase"
					>177, 167, 157</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HSL:</span
				><span class="user-select_all font_accent lowercase"
					>31deg, 11%, 66%</span
				>
			</div>
		</div>
	</div>
    <div class="p_3 bg_info-2 p-t_5">
		<div class="p_3 bg_white-7 c_black m-t_4">
			<div class="font-size_down font_bold" >info-2</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HEX:</span
				>
				<span class="user-select_all font_accent lowercase"
					>#c5beb7</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>RGB:</span
				><span class="user-select_all font_accent lowercase"
					>197, 190, 183</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HSL:</span
				><span class="user-select_all font_accent lowercase"
					>31deg, 11%, 74%</span
				>
			</div>
		</div>
	</div>
	<div class="p_3 bg_info-3 p-t_5">
		<div class="p_3 bg_white-7 c_black m-t_4">
			<div class="font-size_down font_bold" >info-3</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HEX:</span
				>
				<span class="user-select_all font_accent lowercase"
					>#dad6d1</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>RGB:</span
				><span class="user-select_all font_accent lowercase"
					>218, 214, 209</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HSL:</span
				><span class="user-select_all font_accent lowercase"
					>31deg, 11%, 84%</span
				>
			</div>
		</div>
	</div>
    <div class="p_3 bg_info-4 p-t_5">
		<div class="p_3 bg_white-7 c_black m-t_4">
			<div class="font-size_down font_bold" >info-4</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HEX:</span
				>
				<span class="user-select_all font_accent lowercase"
					>#ebe8e6</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>RGB:</span
				><span class="user-select_all font_accent lowercase"
					>235, 232, 230</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HSL:</span
				><span class="user-select_all font_accent lowercase"
					>31deg, 11%, 91%</span
				>
			</div>
		</div>
	</div>
    <div class="p_3 bg_info-5 p-t_5">
		<div class="p_3 bg_white-7 c_black m-t_4">
			<div class="font-size_down font_bold" >info-5</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HEX:</span
				>
				<span class="user-select_all font_accent lowercase"
					>#f6f5f4</span
				>
			</div>
			<div class="flex flex_inline">
				<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
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HSL:</span
				><span class="user-select_all font_accent lowercase"
					>31deg, 11%, 96%</span
				>
			</div>
		</div>
	</div>
</div>





Weight:0

Styleguide DesignBase.CrayonBox.info

*/
/*

Color Variations highlight

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"
	style="background-color: #7742bd;"
>
	<div class="p_3 bg_highlight-n5 p-t_5">
		<div class="p_3 bg_white-7 c_black m-t_4">
			<div class="font-size_down font_bold" >highlight-n5</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HEX:</span
				>
				<span class="user-select_all font_accent lowercase"
					>#0c0713</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>RGB:</span
				><span class="user-select_all font_accent lowercase"
					>12, 7, 19</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HSL:</span
				><span class="user-select_all font_accent lowercase"
					>266deg, 48%, 5%</span
				>
			</div>
		</div>
	</div>
	<div class="p_3 bg_highlight-n4 p-t_5">
		<div class="p_3 bg_white-7 c_black m-t_4">
			<div class="font-size_down font_bold" >highlight-n4</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HEX:</span
				>
				<span class="user-select_all font_accent lowercase"
					>#1a0f2a</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>RGB:</span
				><span class="user-select_all font_accent lowercase"
					>26, 15, 42</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HSL:</span
				><span class="user-select_all font_accent lowercase"
					>266deg, 48%, 11%</span
				>
			</div>
		</div>
	</div>
	<div class="p_3 bg_highlight-n3 p-t_5">
		<div class="p_3 bg_white-7 c_black m-t_4">
			<div class="font-size_down font_bold" >highlight-n3</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HEX:</span
				>
				<span class="user-select_all font_accent lowercase"
					>#301a4c</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>RGB:</span
				><span class="user-select_all font_accent lowercase"
					>48, 26, 76</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HSL:</span
				><span class="user-select_all font_accent lowercase"
					>266deg, 48%, 20%</span
				>
			</div>
		</div>
	</div>
	<div class="p_3 bg_highlight-n2 p-t_5">
		<div class="p_3 bg_white-7 c_black m-t_4">
			<div class="font-size_down font_bold" >highlight-n2</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HEX:</span
				>
				<span class="user-select_all font_accent lowercase"
					>#4b2a77</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>RGB:</span
				><span class="user-select_all font_accent lowercase"
					>75, 42, 119</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HSL:</span
				><span class="user-select_all font_accent lowercase"
					>266deg, 48%, 32%</span
				>
			</div>
		</div>
	</div>
	<div class="p_3 bg_highlight-n1 p-t_5">
		<div class="p_3 bg_white-7 c_black m-t_4">
			<div class="font-size_down font_bold" >highlight-n1</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HEX:</span
				>
				<span class="user-select_all font_accent lowercase"
					>#6538a1</span
				>
			</div>
			<div class="flex flex_inline">
				<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
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HSL:</span
				><span class="user-select_all font_accent lowercase"
					>266deg, 48%, 43%</span
				>
			</div>
		</div>
	</div>
    <div class="p_3 bg_highlight p-t_5">
		<div class="p_3 bg_white-7 c_black m-t_4">
			<div class="font-size_down font_bold" >highlight</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HEX:</span
				>
				<span class="user-select_all font_accent lowercase"
					>#7742bd</span
				>
			</div>
			<div class="flex flex_inline">
				<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
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HSL:</span
				><span class="user-select_all font_accent lowercase"
					>266deg, 48%, 50%</span
				>
			</div>
		</div>
	</div>
    <div class="p_3 bg_highlight-1 p-t_5">
		<div class="p_3 bg_white-7 c_black m-t_4">
			<div class="font-size_down font_bold" >highlight-1</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HEX:</span
				>
				<span class="user-select_all font_accent lowercase"
					>#8b5ec7</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>RGB:</span
				><span class="user-select_all font_accent lowercase"
					>139, 94, 199</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HSL:</span
				><span class="user-select_all font_accent lowercase"
					>266deg, 48%, 58%</span
				>
			</div>
		</div>
	</div>
    <div class="p_3 bg_highlight-2 p-t_5">
		<div class="p_3 bg_white-7 c_black m-t_4">
			<div class="font-size_down font_bold" >highlight-2</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HEX:</span
				>
				<span class="user-select_all font_accent lowercase"
					>#a988d5</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>RGB:</span
				><span class="user-select_all font_accent lowercase"
					>169, 136, 213</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HSL:</span
				><span class="user-select_all font_accent lowercase"
					>266deg, 48%, 69%</span
				>
			</div>
		</div>
	</div>
	<div class="p_3 bg_highlight-3 p-t_5">
		<div class="p_3 bg_white-7 c_black m-t_4">
			<div class="font-size_down font_bold" >highlight-3</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HEX:</span
				>
				<span class="user-select_all font_accent lowercase"
					>#c9b3e5</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>RGB:</span
				><span class="user-select_all font_accent lowercase"
					>201, 179, 229</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HSL:</span
				><span class="user-select_all font_accent lowercase"
					>266deg, 48%, 80%</span
				>
			</div>
		</div>
	</div>
    <div class="p_3 bg_highlight-4 p-t_5">
		<div class="p_3 bg_white-7 c_black m-t_4">
			<div class="font-size_down font_bold" >highlight-4</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HEX:</span
				>
				<span class="user-select_all font_accent lowercase"
					>#e1d5f0</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>RGB:</span
				><span class="user-select_all font_accent lowercase"
					>225, 213, 240</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HSL:</span
				><span class="user-select_all font_accent lowercase"
					>266deg, 48%, 89%</span
				>
			</div>
		</div>
	</div>
    <div class="p_3 bg_highlight-5 p-t_5">
		<div class="p_3 bg_white-7 c_black m-t_4">
			<div class="font-size_down font_bold" >highlight-5</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HEX:</span
				>
				<span class="user-select_all font_accent lowercase"
					>#f1ecf8</span
				>
			</div>
			<div class="flex flex_inline">
				<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
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HSL:</span
				><span class="user-select_all font_accent lowercase"
					>266deg, 48%, 95%</span
				>
			</div>
		</div>
	</div>
</div>





Weight:0

Styleguide DesignBase.CrayonBox.highlight

*/
/*

Color Variations acc

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"
	style="background-color: #004176;"
>
	<div class="p_3 bg_acc-n5 p-t_5">
		<div class="p_3 bg_white-7 c_black m-t_4">
			<div class="font-size_down font_bold" >acc-n5</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HEX:</span
				>
				<span class="user-select_all font_accent lowercase"
					>#00070c</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>RGB:</span
				><span class="user-select_all font_accent lowercase"
					>0, 7, 12</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HSL:</span
				><span class="user-select_all font_accent lowercase"
					>207deg, 100%, 2%</span
				>
			</div>
		</div>
	</div>
	<div class="p_3 bg_acc-n4 p-t_5">
		<div class="p_3 bg_white-7 c_black m-t_4">
			<div class="font-size_down font_bold" >acc-n4</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HEX:</span
				>
				<span class="user-select_all font_accent lowercase"
					>#000e1a</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>RGB:</span
				><span class="user-select_all font_accent lowercase"
					>0, 14, 26</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HSL:</span
				><span class="user-select_all font_accent lowercase"
					>207deg, 100%, 5%</span
				>
			</div>
		</div>
	</div>
	<div class="p_3 bg_acc-n3 p-t_5">
		<div class="p_3 bg_white-7 c_black m-t_4">
			<div class="font-size_down font_bold" >acc-n3</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HEX:</span
				>
				<span class="user-select_all font_accent lowercase"
					>#001a2f</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>RGB:</span
				><span class="user-select_all font_accent lowercase"
					>0, 26, 47</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HSL:</span
				><span class="user-select_all font_accent lowercase"
					>207deg, 100%, 9%</span
				>
			</div>
		</div>
	</div>
	<div class="p_3 bg_acc-n2 p-t_5">
		<div class="p_3 bg_white-7 c_black m-t_4">
			<div class="font-size_down font_bold" >acc-n2</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HEX:</span
				>
				<span class="user-select_all font_accent lowercase"
					>#00294a</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>RGB:</span
				><span class="user-select_all font_accent lowercase"
					>0, 41, 74</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HSL:</span
				><span class="user-select_all font_accent lowercase"
					>207deg, 100%, 15%</span
				>
			</div>
		</div>
	</div>
	<div class="p_3 bg_acc-n1 p-t_5">
		<div class="p_3 bg_white-7 c_black m-t_4">
			<div class="font-size_down font_bold" >acc-n1</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HEX:</span
				>
				<span class="user-select_all font_accent lowercase"
					>#003764</span
				>
			</div>
			<div class="flex flex_inline">
				<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
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HSL:</span
				><span class="user-select_all font_accent lowercase"
					>207deg, 100%, 20%</span
				>
			</div>
		</div>
	</div>
    <div class="p_3 bg_acc p-t_5">
		<div class="p_3 bg_white-7 c_black m-t_4">
			<div class="font-size_down font_bold" >acc</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HEX:</span
				>
				<span class="user-select_all font_accent lowercase"
					>#004176</span
				>
			</div>
			<div class="flex flex_inline">
				<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
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HSL:</span
				><span class="user-select_all font_accent lowercase"
					>207deg, 100%, 23%</span
				>
			</div>
		</div>
	</div>
    <div class="p_3 bg_acc-1 p-t_5">
		<div class="p_3 bg_white-7 c_black m-t_4">
			<div class="font-size_down font_bold" >acc-1</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HEX:</span
				>
				<span class="user-select_all font_accent lowercase"
					>#0061b1</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>RGB:</span
				><span class="user-select_all font_accent lowercase"
					>0, 97, 177</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HSL:</span
				><span class="user-select_all font_accent lowercase"
					>207deg, 100%, 35%</span
				>
			</div>
		</div>
	</div>
    <div class="p_3 bg_acc-2 p-t_5">
		<div class="p_3 bg_white-7 c_black m-t_4">
			<div class="font-size_down font_bold" >acc-2</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HEX:</span
				>
				<span class="user-select_all font_accent lowercase"
					>#0890ff</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>RGB:</span
				><span class="user-select_all font_accent lowercase"
					>8, 144, 255</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HSL:</span
				><span class="user-select_all font_accent lowercase"
					>207deg, 100%, 52%</span
				>
			</div>
		</div>
	</div>
	<div class="p_3 bg_acc-3 p-t_5">
		<div class="p_3 bg_white-7 c_black m-t_4">
			<div class="font-size_down font_bold" >acc-3</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HEX:</span
				>
				<span class="user-select_all font_accent lowercase"
					>#62b9ff</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>RGB:</span
				><span class="user-select_all font_accent lowercase"
					>98, 185, 255</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HSL:</span
				><span class="user-select_all font_accent lowercase"
					>207deg, 100%, 69%</span
				>
			</div>
		</div>
	</div>
    <div class="p_3 bg_acc-4 p-t_5">
		<div class="p_3 bg_white-7 c_black m-t_4">
			<div class="font-size_down font_bold" >acc-4</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HEX:</span
				>
				<span class="user-select_all font_accent lowercase"
					>#a9d8ff</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>RGB:</span
				><span class="user-select_all font_accent lowercase"
					>169, 216, 255</span
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HSL:</span
				><span class="user-select_all font_accent lowercase"
					>207deg, 100%, 83%</span
				>
			</div>
		</div>
	</div>
    <div class="p_3 bg_acc-5 p-t_5">
		<div class="p_3 bg_white-7 c_black m-t_4">
			<div class="font-size_down font_bold" >acc-5</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HEX:</span
				>
				<span class="user-select_all font_accent lowercase"
					>#d8edff</span
				>
			</div>
			<div class="flex flex_inline">
				<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
				>
			</div>
			<div class="flex flex_inline">
				<span class="user-select_none opacity_6 font_bold font_ui uppercase"
					>HSL:</span
				><span class="user-select_all font_accent lowercase"
					>207deg, 100%, 92%</span
				>
			</div>
		</div>
	</div>
</div>





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

Styleguide DesignBase.CrayonBox
*/
/*Adobe XD Color Map*/
/* $xd-color_primary-0: #198dae*/
/* $xd-color_primary-n5: #030e11*/
/* $xd-color_primary-n4: #061f26*/
/* $xd-color_primary-n3: #0a3846*/
/* $xd-color_primary-n2: #10596e*/
/* $xd-color_primary-n1: #157894*/
/* $xd-color_primary-1: #1faed7*/
/* $xd-color_primary-2: #54c6e6*/
/* $xd-color_primary-3: #92dbef*/
/* $xd-color_primary-4: #c3ebf6*/
/* $xd-color_primary-5: #e4f6fb*/
/* $xd-color_secondary-0: #676a72*/
/* $xd-color_secondary-n5: #0a0b0b*/
/* $xd-color_secondary-n4: #171719*/
/* $xd-color_secondary-n3: #292a2e*/
/* $xd-color_secondary-n2: #414348*/
/* $xd-color_secondary-n1: #585a61*/
/* $xd-color_secondary-1: #7c8089*/
/* $xd-color_secondary-2: #9ea1a7*/
/* $xd-color_secondary-3: #c1c3c7*/
/* $xd-color_secondary-4: #dddee0*/
/* $xd-color_secondary-5: #f0f0f1*/
/* $xd-color_success-0: #078a2e*/
/* $xd-color_success-n5: #010e05*/
/* $xd-color_success-n4: #021e0a*/
/* $xd-color_success-n3: #033712*/
/* $xd-color_success-n2: #04571d*/
/* $xd-color_success-n1: #067527*/
/* $xd-color_success-1: #0abe3f*/
/* $xd-color_success-2: #24f462*/
/* $xd-color_success-3: #74f89b*/
/* $xd-color_success-4: #b3fbc8*/
/* $xd-color_success-5: #dcfde6*/
/* $xd-color_shade-0: #898989*/
/* $xd-color_shade-n5: #0e0e0e*/
/* $xd-color_shade-n4: #1e1e1e*/
/* $xd-color_shade-n3: #373737*/
/* $xd-color_shade-n2: #565656*/
/* $xd-color_shade-n1: #747474*/
/* $xd-color_shade-1: #9b9b9b*/
/* $xd-color_shade-2: #b5b5b5*/
/* $xd-color_shade-3: #d0d0d0*/
/* $xd-color_shade-4: #e5e5e5*/
/* $xd-color_shade-5: #f3f3f3*/
/* $xd-color_warning-0: #da8210*/
/* $xd-color_warning-n5: #160d02*/
/* $xd-color_warning-n4: #301d04*/
/* $xd-color_warning-n3: #573406*/
/* $xd-color_warning-n2: #89520a*/
/* $xd-color_warning-n1: #b96f0e*/
/* $xd-color_warning-1: #ef9724*/
/* $xd-color_warning-2: #f3b25d*/
/* $xd-color_warning-3: #f7ce98*/
/* $xd-color_warning-4: #fbe4c6*/
/* $xd-color_warning-5: #fdf3e5*/
/* $xd-color_alert-0: #dd1a1a*/
/* $xd-color_alert-n5: #160303*/
/* $xd-color_alert-n4: #310606*/
/* $xd-color_alert-n3: #580a0a*/
/* $xd-color_alert-n2: #8b1010*/
/* $xd-color_alert-n1: #bc1616*/
/* $xd-color_alert-1: #e73737*/
/* $xd-color_alert-2: #ee6b6b*/
/* $xd-color_alert-3: #f4a1a1*/
/* $xd-color_alert-4: #f9cbcb*/
/* $xd-color_alert-5: #fce7e7*/
/* $xd-color_navigation-0: #2b58c0*/
/* $xd-color_navigation-n5: #040913*/
/* $xd-color_navigation-n4: #09132a*/
/* $xd-color_navigation-n3: #11234d*/
/* $xd-color_navigation-n2: #1b3779*/
/* $xd-color_navigation-n1: #254ba3*/
/* $xd-color_navigation-1: #406dd4*/
/* $xd-color_navigation-2: #7193df*/
/* $xd-color_navigation-3: #a5baeb*/
/* $xd-color_navigation-4: #ced9f4*/
/* $xd-color_navigation-5: #e9eefa*/
/* $xd-color_accent-0: #16a385*/
/* $xd-color_accent-n5: #02100d*/
/* $xd-color_accent-n4: #05241d*/
/* $xd-color_accent-n3: #094135*/
/* $xd-color_accent-n2: #0e6754*/
/* $xd-color_accent-n1: #138b71*/
/* $xd-color_accent-1: #1ccea8*/
/* $xd-color_accent-2: #4be7c5*/
/* $xd-color_accent-3: #8cf0da*/
/* $xd-color_accent-4: #c0f6eb*/
/* $xd-color_accent-5: #e2fbf6*/
/* $xd-color_info-0: #a3988c*/
/* $xd-color_info-n5: #110f0d*/
/* $xd-color_info-n4: #25211e*/
/* $xd-color_info-n3: #433d36*/
/* $xd-color_info-n2: #6a6055*/
/* $xd-color_info-n1: #8f8173*/
/* $xd-color_info-1: #b1a79d*/
/* $xd-color_info-2: #c5beb7*/
/* $xd-color_info-3: #dad6d1*/
/* $xd-color_info-4: #ebe8e6*/
/* $xd-color_info-5: #f6f5f4*/
/* $xd-color_highlight-0: #7742bd*/
/* $xd-color_highlight-n5: #0c0713*/
/* $xd-color_highlight-n4: #1a0f2a*/
/* $xd-color_highlight-n3: #301a4c*/
/* $xd-color_highlight-n2: #4b2a77*/
/* $xd-color_highlight-n1: #6538a1*/
/* $xd-color_highlight-1: #8b5ec7*/
/* $xd-color_highlight-2: #a988d5*/
/* $xd-color_highlight-3: #c9b3e5*/
/* $xd-color_highlight-4: #e1d5f0*/
/* $xd-color_highlight-5: #f1ecf8*/
/* $xd-color_acc-0: #004176*/
/* $xd-color_acc-n5: #00070c*/
/* $xd-color_acc-n4: #000e1a*/
/* $xd-color_acc-n3: #001a2f*/
/* $xd-color_acc-n2: #00294a*/
/* $xd-color_acc-n1: #003764*/
/* $xd-color_acc-1: #0061b1*/
/* $xd-color_acc-2: #0890ff*/
/* $xd-color_acc-3: #62b9ff*/
/* $xd-color_acc-4: #a9d8ff*/
/* $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: -10

Styleguide HTML
*/
/*

Reading Typography

Reading typography is a container class to opt into an override of the basic typography from arches. 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 reading typography lacking. Most ways typogrpahy 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 experiances the "reading-typography" class is used on the parrent container.  Please note that the reading typography can still look a bit different look depending on the brand or the framework.  

Markup:
<section class="max-w_65 reading-typography">
  <h1>This is the primary heading and there should only be one of these per page</h1>
    <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

Styleguide HTML.Typography

*/
/*

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:
<section class="max-w_65">
<h1>Basic Typography: <small>Lorem ipsum dolor sit amet, consectetuer adipiscing 
elit.</small></h1>
<h2>Aenean commodo ligula eget dolor aenean massa</h2>
<h3>Cum 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>
</section>

Weight: -9

Styleguide HTML.Unstyled

*/
/*
ACC Article

Markup:
<div class="reading-typography">
    <div class="the-text">
        <div class="contribution-to-literature">
            <h2>Contribution To Literature:</h2>
            <p></p>
            <p>The HOME-PE trial showed that risk stratification can identify approximately one-third of PE patients who can be safely treated at home.</p>
            <p></p>
        </div>
        <div class="description">
            <h2>Description:</h2>
            <p></p>
            <p>The goal of the trial was to evaluate two risk stratification tools among patients diagnosed with pulmonary embolism (PE).</p>
            <p></p>
        </div>
        <div class="study-design">
            <h2>Study Design</h2>
            <p></p>
            <ul>
                <li>Randomized</li>
                <li>Parallel</li>
                <li>Open-label</li>
            </ul>
            <p>Eligible patients were randomized to risk stratification with the HESTIA rule (n = 984) versus the simplified Pulmonary Embolism Severity Index (PESI) score (n = 986). Low-risk patients were discharged home, while &gt; low-risk patients were admitted to the hospital.</p>
            <p>The HESTIA rule is considered low-risk if none of the following apply: hemodynamic instability, thrombolysis or embolectomy, active bleeding or high-risk of bleeding, supplemental oxygen, PE diagnosed during anticoagulation treatment, severe pain requiring intravenous medication, medical or social reason for hospitalization, severe renal or hepatic impairment, or pregnancy.</p>
            <p>The PESI score assigns a score for each of the following: age &gt;80 years, history of cancer, chronic cardiopulmonary disease, systolic blood pressure &lt;100 mm Hg, heart rate ≥110 beats per minute, or oxygen saturation &lt;90%. Low risk is considered a score of 0. </p>
            <ul>
                <li>Total number of enrollees: 1,970</li>
                <li>Duration of follow-up: 90 days</li>
                <li>Mean patient age: 64 years</li>
                <li>Percentage female:
                <ul>
                <li>Total number of enrollees: 1,970</li>
                <li>Duration of follow-up: 90 days</li>
                <li>Mean patient age: 64 years</li>
                <li>Percentage female: 48%</li>
            </ul></li>
            </ul>
            <p>Inclusion criteria:</p>
            <ul>
                <li>Patients diagnosed with PE</li>
            </ul>
            <p>Other salient features/characteristics: </p>
            <ul>
                <li>In the HESTIA group, 62% were hospitalized, while 38% were managed at home.</li>
                <li>In the PESI group, 64% were hospitalized, while 36% were managed at home.</li>
            </ul>
            <p></p>
        </div>
        <div class="principal-findings">
            <h2>Principal Findings:</h2>
            <p></p>
            <p>The primary outcome, all-cause death, recurrent VTE, or major bleeding at 30 days, occurred in 3.8% of the HESTIA group compared with 3.6% of the PESI group (p for noninferiority = 0.005). </p>
            <p>Secondary outcomes:</p>
            <ul>
                <li>Proportion of patients actually treated as outpatients: 38.4% of the HESTIA group compared with 36.6% of the PESI group (p for superiority = 0.41)</li>
                <li>Rate of low-risk patients eligible for outpatient care: 39.4% of the HESTIA group compared with 48.4% of the PESI group</li>
                <li>Patients treated as outpatients among eligible patients: 88.4% of the HESTIA group compared with 64.8% of the PESI group</li>
            </ul>
            <p></p>
        </div>
        <div class="interpretation">
            <h2>Interpretation:</h2>
            <p>Among patients with PE, risk stratification with the HESTIA rule was noninferior to the PESI score on all-cause death, recurrent VTE, or major bleeding. The two strategies were similar regarding the proportion of patients treated at home. By using risk stratification, approximately one-third of low-risk patients with PE could be safely managed at home.<br></p>
        </div>
        <div class="legacy-references" id="references-for-article">
            <h2>References:</h2>
            <p></p>
            <p>Presented by Dr. Pierre-Marie Roy at the European Society of Cardiology Virtual Congress, August 31, 2020.</p>
            <p></p>
        </div>
        <p class="topics-list"><b>Clinical Topics:</b> <a href="http://www.acc.org/clinical-topics/anticoagulation-management">Anticoagulation Management, </a><a href="http://www.acc.org/clinical-topics/invasive-cardiovascular-angiography-and-intervention">Invasive Cardiovascular Angiography and Intervention, </a><a href="http://www.acc.org/clinical-topics/prevention">Prevention, </a><a href="http://www.acc.org/clinical-topics/pulmonary-hypertension-and-venous-thromboembolism">Pulmonary Hypertension and Venous Thromboembolism, </a><a href="http://www.acc.org/clinical-topics/vascular-medicine">Vascular Medicine, </a><a href="http://www.acc.org/clinical-topics/anticoagulation-management/anticoagulation-management-and-venothromboembolism">Anticoagulation Management and Venothromboembolism, </a><a href="http://www.acc.org/clinical-topics/invasive-cardiovascular-angiography-and-intervention/interventions-and-vascular-medicine">Interventions and Vascular Medicine</a> </p>
        <p class="keywords-list"><b>Keywords:</b> <i>ESC Congress, </i><i>ESC20, </i><i>Anticoagulants, </i><i>Blood Pressure, </i><i>Embolectomy, </i><i>Hemorrhage, </i><i>Neoplasms, </i><i>Outpatients, </i><i>Patient Discharge, </i><i>Pulmonary Embolism, </i><i>Primary Prevention, </i><i>Risk Assessment, </i><i>Thrombolytic Therapy, </i><i>Thromboembolism, </i><i>Vascular Diseases, </i><i>Venous Thromboembolism</i> </p>
        <a href="#" id="backToListings" class="parent back-to-listing">&lt; Back to Listings</a>
    </div>
</div>

MarkupWrapperClasses: max-w_60

Weight:100

Styleguide HTML.RealArticle

*/
.container,
.card {
  position: relative;
}

.table td,
.table th {
  text-align: left;
}
.table tbody tr:nth-of-type(odd) {
  background-color: #13121202;
}
.table tr + tr {
  border-top: 1px solid #13121240;
}
.table.unshaded tbody tr:nth-of-type(odd) {
  background-color: unset;
}

/*

Bootstrap

<div class="bg-blend_luminosity bg_acc bg_cover br_round overflow_hidden relative" style="
    background-image: url(https://picsum.photos/2000/400?grayscale&amp;blur=2);
	">
	<div class="c_white-8 container font-blend_luminosity m_0 p-x_4  p-y_4 w_auto">
			<h1 class="font_10:lg font_6 font_8:md lh_0">CVQuality's Bootstrap</h1>
			<p class="c_white font_1 font_1:md font_3:lg">Bootstrap 4 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.</p>
			<div class="flex">
				<div class="flex_shrink p_2">
					<a class="br_radius btn btn-primary c_white  gradient_teal h:gradient_teal-reverse" href="section-recipes-bootstrap.html#kssref-recipes-bootstrap-kitchensink" role="button">Kitchen Sink</a>
				</div>
				<div class="flex_shrink p_2">
					<a class="br_radius btn btn-primary c_white  gradient_teal h:gradient_teal-reverse" href="https://getbootstrap.com/docs/4.0/getting-started/introduction/" role="button">Bootstrap</a>
				</div>
			</div>
	</div>
	</div>

Weight: 1000

Styleguide  Recipes 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  Recipes 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  Recipes 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  Recipes 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  Recipes Bootstrap.Components
*/
/*
Buttons

Basic Buttons

default		            - Medium buttons (default)
.btn-primary	            - Primary Class Button (default)
.btn-secondary 	            - Second Class Button
.btn-accent             - Button for call out acctions
.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>

 Styleguide Recipes Bootstrap.Button
*/
.btn {
  font-family: "Open Sans",-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-weight: 500;
  white-space: nowrap;
}

.btn.clear {
  border-color: transparent;
  background-color: transparent;
  color: #094135;
}
.btn.clear:hover {
  color: black;
}

.btn-accent {
  background-color: #138b71;
}
.btn-accent:hover {
  background-color: #094135;
}

.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  Recipes 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: #16a385;
  background-color: #16a385;
}
.carousel-alt.chevron-on .carousel-indicators li.active:before {
  top: 4px;
  left: 4px;
  padding-top: 5px;
  color: #16a385;
  font-size: 1.6018066406em;
  content: "";
}
@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%;
    float: left;
    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 #d0d0d0;
    border-radius: 0;
    background-color: #e5e5e5;
    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: #16a385 10px solid;
    background-color: #747474;
    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;
  }
}
@media only screen and (min-width : 768px) {
  .carousel-control-prev,
.carousel-control-next {
    width: 10%;
  }
}
@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: #16a385;
  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: "";
}
.collapsed > .icon-toggle_bars-times:before, .collapsed .icon-toggle_bars-times:before {
  content: "";
}

.icon-toggle_plus-minus:before {
  content: "";
}
.show > .icon-toggle_plus-minus:before {
  content: "";
}

.icon-toggle_plus-minus-sub:before {
  content: "";
}
.collapsed > .icon-toggle_plus-minus-sub:before, .collapsed .icon-toggle_plus-minus-sub:before {
  content: "";
}

.navbar {
  font-family: "Roboto Slab","Times New Roman","Lucida Bright",Georgia,serif, "slab";
}

.dropdown-menu br-t_0 {
  font-family: "Open Sans",-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.nav-link {
  padding-right: 4px;
  padding-right: 0.25rem;
  padding-left: 4px;
  padding-left: 0.25rem;
}

.navbar-dark .navbar-nav .nav-link {
  color: white;
}

.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, .navbar-primary .nav-item:active {
  border-top-color: #16a385;
  border-bottom-color: #fff;
  background-color: #fff;
  color: #004176;
}
@media only screen and (min-width : 768px) {
  .navbar-primary .nav-item {
    border-top: 0.25rem #004176 solid;
    border-bottom: 0.25rem #004176 solid;
  }
  .navbar-primary .nav-item:hover, .navbar-primary .nav-item:focus, .navbar-primary .nav-item:active {
    border-top-color: #16a385;
    border-bottom-color: #fff;
    background-color: #fff;
    color: #004176;
  }
}

@media only screen and (min-width : 1024px) {
  .navbar-primary .navbar-nav .nav-item {
    border-top: 0.25rem #004176 solid;
    border-bottom: 0.25rem #004176 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, .navbar-primary .navbar-nav .nav-item .nav-link:active {
    color: #fff;
  }
  .navbar-primary .navbar-nav .nav-item:hover, .navbar-primary .navbar-nav .nav-item:focus, .navbar-primary .navbar-nav .nav-item:active {
    border-top-color: #16a385;
    border-bottom-color: #fff;
    background-color: #fff;
    color: #004176;
  }
  .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, .navbar-primary .navbar-nav .nav-item:hover .nav-link:active, .navbar-primary .navbar-nav .nav-item:focus .nav-link, .navbar-primary .navbar-nav .nav-item:focus .nav-link:hover, .navbar-primary .navbar-nav .nav-item:focus .nav-link:focus, .navbar-primary .navbar-nav .nav-item:focus .nav-link:active, .navbar-primary .navbar-nav .nav-item:active .nav-link, .navbar-primary .navbar-nav .nav-item:active .nav-link:hover, .navbar-primary .navbar-nav .nav-item:active .nav-link:focus, .navbar-primary .navbar-nav .nav-item:active .nav-link:active {
    color: #004176;
  }
}

@media only screen and (min-width : 1024px) {
  .collapse.block\:lg {
    display: block;
  }
}
.dropdown-item {
  color: #157894;
}
.dropdown-item:hover, .dropdown-item:focus {
  background-color: #16a385;
  color: white;
}

.dropdown_column {
  min-width: 70vw;
}

@media only screen and (min-width : 768px) {
  .dropdown_column {
    min-width: 20rem;
  }
}
/* 

Header Nav

The Header Nav of ACC.org. <span class="font_n1 font_italic c_warning">This is sample data and might not reflect the full design or content needed in production.</span>

Markup:
<div class="flex c_white relative">
	<nav class="flex_auto navbar navbar-primary p_0 navbar-expand-lg navbar-dark bg_acc font_1 relative">
		{{> "Recipes.BrandedNav.Hamburger" }}
		<div class="collapse navbar-collapse" id="navBarMainNav">
			<ul class="navbar-nav flex flex_row:lg flex_column justify_around w_100">
				<li class="nav-item relative text_left text_center:lg  flex_shrink">
					<a class="nav-link expanded-click-area nowrap p-l_4 p-l_0:lg" href="//www.acc.org/" title="Home of the American College of Cardiology"><i class="fas fa-home p-x_3:lg"></i><span class="display_none:lg">&nbsp;Home</span></a>
				</li>
				<li class="display_none:lg relative nav-item relative text_left text_center:lg  flex_auto">
					<a class="nav-link expanded-click-area nowrap p-l_4 p-l_0:lg" href="//www.acc.org/guidelines#doctype=Guidelines" title="Access ACC guidelines and clinical policy documents as well as related resources">Guidelines</a>
				</li>
				<li class="nav-item relative text_left text_center:lg  flex_auto dropdown ">
					<a class="nav-link nowrap p-l_4 p-l_0:lg dropdown-toggle a:c_white display_none:lg inline-block"
                               id="clinicalTopicsDropdown"
                               role="button"
                               data-bs-toggle="dropdown"
                               aria-haspopup="true"
                               aria-expanded="false"><i
                                   class="far fa icon-toggle_plus-minus m-l_n2 m-r_2 "></i></a>
                            <a class="nav-link nowrap p-l_0  a:c_white inline-block"
                               href="/clinical-topics">Clinical
                                Topics</a>
					<div class="dropdown-menu br-t_0 br_none br_solid:lg br_square m-t_0 m-t_2:lg" aria-labelledby="clinicalTopicsDropdown">
						{{> "Recipes.BrandedNav.Dropdown.AltContent" }}
					</div>
				</li>
				<li class="nav-item relative text_left text_center:lg  flex_auto ">
					<a class="nav-link expanded-click-area nowrap p-l_4 p-l_0:lg" href="#">Latest In Cardiology</a>
				</li>
				<li class="nav-item relative text_left text_center:lg  flex_auto dropdown">
					<a class="nav-link nowrap p-l_4 p-l_0:lg dropdown-toggle a:c_white display_none:lg inline-block"
						id="eduDropdown"
						role="button"
						data-bs-toggle="dropdown"
						aria-haspopup="true"
						aria-expanded="false"><i
							class="far fa icon-toggle_plus-minus m-l_n2 m-r_2 "></i>
					</a>
					<a class="nav-link nowrap p-l_0  a:c_white inline-block"
						href="/Edu-Edu">Education and Meetings</a>
					<div class="dropdown-menu br-t_0 dropdown-menu-end  br_none br_solid:lg br_square m-t_0 m-t_2:lg" aria-labelledby="eduDropdown">
						{{> "Recipes.BrandedNav.Dropdown" }}
					</div>
				</li>
				<li class="nav-item relative text_left text_center:lg  flex_auto dropdown">
					<a class="nav-link nowrap p-l_4 p-l_0:lg dropdown-toggle a:c_white display_none:lg inline-block"
						id="toolDropdown"
						role="button"
						data-bs-toggle="dropdown"
						aria-haspopup="true"
						aria-expanded="false"><i
							class="far fa icon-toggle_plus-minus m-l_n2 m-r_2 "></i>
					</a>
					<a class="nav-link nowrap p-l_0  a:c_white inline-block"
						href="/Edu-Edu">Tools &amp; Practice Support</a>	
					<div class="dropdown-menu br-t_0  dropdown-menu-end br_none br_solid:lg br_square m-t_0 m-t_2:lg" aria-labelledby="toolDropdown">
						{{> "Recipes.BrandedNav.Dropdown.DoubleColumn" }}
					</div>
				</li>
				<li class="display_none:lg nav-item relative text_left text_center:lg  flex_auto ">
					<a class="nav-link expanded-click-area nowrap p-l_4 p-l_0:lg" href="//www.acc.org/membership" title="Access exclusive member features and groups or learn about ACC membership">Membership</a>
				</li>
				<li class="display_none:lg nav-item relative text_left text_center:lg  flex_auto ">
					<a class="nav-link expanded-click-area nowrap p-l_4 p-l_0:lg" href="//www.acc.org/about-acc" title="Learn about the ACC organization">About ACC</a>
				</li>
				<li class="display_none:lg nav-item relative text_left text_center:lg  flex_auto ">
					<a class="nav-link expanded-click-area nowrap p-l_4 p-l_0:lg" href="http://www.onlinejacc.org/" target="_blank" title="JACC.org">JACC</a>
				</li>
				<li class="display_none:lg nav-item relative text_left text_center:lg  flex_auto ">
					<a class="nav-link expanded-click-area nowrap p-l_4 p-l_0:lg" href="http://accscientificsession.acc.org" target="_blank" title="ACC Annual Scientific Session Website">ACC.19</a>
				</li>
			</ul>
		</div>
	</nav>
	{{> "Recipes.BrandedNav.Login" }}
</div>

MarkupWrapperClasses:
    max-w_70 m_auto

Weight: -100 

Styleguide Recipes.BrandedNav

*/
/*
Mobile Menu Nav (Hamburger)

Description: A button that triggers the menu to show or hide  with the site.

Markup:
<div class="relative"><button class="br_solid br_2 br_white-2 collapsed m-l_3 m-y_3 navbar-toggler p_2 expanded-click-area collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#navBarMainNav" aria-controls="navBarMainNav" aria-expanded="false" aria-label="Toggle navigation">
	<i class="icon-toggle_bars-times fas fa a:c_acc-2 c_white"></i><span class="a:c_acc-2 c_white p-x_3 uppercase font_accent">Menu</span>
</button>
</div>

MarkupWrapperClasses:
flex_auto navbar navbar-primary p_0 navbar-expand-lg navbar-dark bg_acc font_1 show


Weight:0

Styleguide Recipes.BrandedNav.Hamburger
*/
/*
Login Nav

The ACC.org Nav has a shade nav that houses the login and profile nav with a shade color. To make sure it doesn't resize when the main nav expands the login nav needs to be placed absolutely. 

Markup:
<nav class="absolute bg_primary br-t_1 br-b_1  br_primary br_solid br_none flex_shrink font_0 font_1:lg m-l_auto navbar navbar-dark navbar-expand p-y_2 r_0 t_0 relative:lg" >
	<ul class="navbar-nav">
		<li class="nav-item relative flex_shrink dropdown">
			<a class="nav-link expanded-click-area a:c_white h:c_white nowrap"
				 role="button"
				 id="dropdownMyACC"
				 data-bs-toggle="dropdown"
				 aria-expanded="false"
				>My ACC <i class="far icon-toggle_chevron-up-down"></i></a>
			<div 
			class="dropdown-menu br-t_0 dropdown-menu-end br_none br_solid:lg m-t_0 m-t_2:lg font_0" aria-labelledby="dropdownMyACC"  
			>
				<div class="flex flex_column flex_row:md p-x_2:lg m-x_n1 m-x_0:lg">
					<div class="p-x_2 p-y_0 dropdown_column">
						<ul class="ul_none lh_2 m_0">
							<li>
								<a class="dropdown-item transition_4 wrap text-indent_n1 p-l_5 lh_2" href="/my-acc/my-profile">My Profile</a>
							</li>
							<li>
								<a class="dropdown-item transition_4 wrap text-indent_n1 p-l_5 lh_2" href="/my-acc/my-training-program">My Training Programs</a>
							</li>
							<li>
								<a class="dropdown-item transition_4 wrap text-indent_n1 p-l_5 lh_2" href="/my-acc/my-membership">My Membership</a>
							</li>
							<li>
								<a class="dropdown-item transition_4 wrap text-indent_n1 p-l_5 lh_2" href="/my-acc/my-library">My Library</a>
							</li>
							<li>
								<a class="dropdown-item transition_4 wrap text-indent_n1 p-l_5 lh_2" href="http://edu.acc.org/diweb/dashboard">My Learning Dashboard</a>
							</li>
							<li>
								<a class="dropdown-item transition_4 wrap text-indent_n1 p-l_5 lh_2" href="http://edu.acc.org/diweb/grades">My Transcript</a>
							</li>
							<li>
								<a class="dropdown-item transition_4 wrap text-indent_n1 p-l_5 lh_2" href="/my-acc/ncdr-physician-dashboard">NCDR Physician Dashboard</a>
							</li>
							<li>
								<a class="dropdown-item transition_4 wrap text-indent_n1 p-l_5 lh_2" href="/my-acc/my-communication-preferences">My Communication Preferences</a>
							</li>
							<li>
								<a class="dropdown-item transition_4 wrap text-indent_n1 p-l_5 lh_2" href="https://memberhub.acc.org/">ACC Member Hub</a>
							</li>
							<li>
								<a class="dropdown-item transition_4 wrap text-indent_n1 p-l_5 lh_2" href="/my-acc/my-purchase-history">My Purchases</a>
							</li>
							<li>
								<a class="dropdown-item transition_4 wrap text-indent_n1 p-l_5 lh_2" href="/my-acc/personalization">Personalize ACC.org</a>
							</li>
							<div class="dropdown-divider m-y_3"></div>
							<li class="">
								<a class="dropdown-item transition_4 wrap text-indent_n1 p-l_5 lh_2" href="/RemoteLogOff"> Logout</a>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</li>
		<li class="nav-item">
			<a class=" nav-link" href="#"><i class="far fa-shopping-cart"></i></a>
		</li>
		<!--<li class="nav-item">
			<a class=" nav-link" href="#"><i class="fas fa-sign-out-alt"></i></a>
		</li>-->
	</ul>
</nav>

Weight: 100

MarkupWrapperClasses:
    flex max-w_60 m_auto

Styleguide Recipes.BrandedNav.Login

*/
/*
JavaScript: Snippet to Show on Hover

Description: 

Markup:
<script>
document.addEventListener("DOMContentLoaded", function(){
// make it as accordion for smaller screens
if (window.innerWidth > 992) {
	document.querySelectorAll('.navbar .nav-item').forEach(function(everyitem){
		everyitem.addEventListener('mouseover', function(e){
			let el_link = this.querySelector('a[data-bs-toggle]');
			if(el_link != null){
				let nextEl = this.querySelector('.dropdown-menu');
				el_link.classList.add('show');
				nextEl.classList.add('show');
				nextEl.setAttribute("data-bs-popper", "none")
			}
		});
		everyitem.addEventListener('mouseleave', function(e){
			let el_link = this.querySelector('a[data-bs-toggle]');
			if(el_link != null){
				let nextEl = this.querySelector('.dropdown-menu');
				el_link.classList.remove('show');
				nextEl.classList.remove('show');
				nextEl.removeAttribute('data-bs-popper');
			}
		})
	});
}
// end if innerWidth
}); 
</script>


Weight:0

Styleguide Recipes.BrandedNav.JavaScript
*/
/*
Responsive Top Nav with Single Layer Nav

The Header Nav with no dropdown navs but with elements that show up only in the mobile viewport

Markup:
<nav class="navbar navbar-primary p_0 navbar-expand-lg navbar-dark bg_acc font_1">
	{{> "Recipes.BrandedNav.Hamburger" }}
	<div class="collapse navbar-collapse" id="navBarMainNav">
		<ul class="navbar-nav">
			<li class="display_none:lg nav-item">
				<a class="nav-link" href="//www.acc.org/" title="Home of the American College of Cardiology<span class="text-indent_n1 inline-block m-l_4"><i class="fas fa-home"></i><span class="display_none:lg">&nbsp;Home</span></a
				>
			</li>
			<li class="display_none:lg nav-item">
				<a
					class="nav-link" href="//www.acc.org/guidelines#doctype=Guidelines" title="Access ACC guidelines and clinical policy documents as well as related resources" >Guidelines</a
				>
			</li>
			<li class="nav-item">
				<a class="nav-link" href="/clinical-topics" >Clinical Topics</a
				>
			</li>	
			<li class="nav-item">
				<a class="nav-link" href="#">Latest In Cardiology</a>
			</li>
			<li class="display_none:lg nav-item">
				<a
					class="nav-link"
					href="//www.acc.org/membership"
					title="Access exclusive member features and groups or learn about ACC membership"
					>Membership</a
				>
			</li>
			<li class="display_none:lg nav-item">
				<a class="nav-link" href="//www.acc.org/about-acc" title="Learn about the ACC organization"
					>About ACC</a
				>
			</li>
			<li class="display_none:lg nav-item">
				<a class="nav-link" href="http://www.onlinejacc.org/" target="_blank" title="JACC.org">JACC <i class="c_white fa-external-link-square fal h:c_white m-l_3 p-r_3 p-t_2" style="text-indent: 0;"></i></a>
			</li>
			<li class="display_none:lg nav-item">
				<a
					class="nav-link"
					href="http://accscientificsession.acc.org"
					target="_blank"
					title="ACC Annual Scientific Session Website"
					>ACC.19 <i class="c_white fa-external-link-square fal h:c_white m-l_3 p-r_3 p-t_2" style="text-indent: 0;"></i></a
				>
			</li>
		</ul>
	</div>
</nav>

MarkupWrapperClasses:
    max-w_60 m_auto

Weight: 1

Styleguide Recipes.BrandedNav.Simple

*/
/*
Dropdown Double Column

The Header Nav of ACC.org

Markup:
<div class="flex flex_column flex_row:md p-x_2:lg m-x_n1 m-x_0:lg">
	<div class="p-x_2 p-y_0 p-y_2:md dropdown_column w_50:md">
		{{> "Recipes.BrandedNav.Dropdown.List.Simple" }}
	</div>
	<div
		class="p-x_2 p-y_0 p-y_2:md br-l_1 br_none br_shade-4 br_solid:lg br_solid:md dropdown_column w_50:md"
	>
		{{> "Recipes.BrandedNav.Dropdown.List.SubLinks" }}
	</div>
</div>


MarkupWrapperClasses:
    br_none br_solid:lg dropdown-menu br-t_0 m-t_0 m-t_2:lg m-x_0:lg m-x_n4 shadow_overlap-light show relative

Weight: 55

	Styleguide Recipes.BrandedNav.Dropdown.DoubleColumn

*/
/*
Dropdown Single Column

The Header Nav of ACC.org

Markup:
<div class="flex flex_column flex_row:md p-x_2:lg m-x_n1 m-x_0:lg">
	<div class="p-x_2 p-y_0 p-y_2:md dropdown_column">
		{{> "Recipes.BrandedNav.Dropdown.List.Simple" }}
	</div>
</div>


MarkupWrapperClasses:
    br_none br_solid:lg dropdown-menu br-t_0 m-t_0 m-t_2:lg m-x_0:lg m-x_n4 shadow_overlap-light show relative

Weight: 50

	Styleguide Recipes.BrandedNav.Dropdown

*/
/*
Dropdown with Sub Links

The Header Nav of ACC.org

Markup:
<div class="flex flex_column flex_row:md p-x_2:lg m-x_n1 m-x_0:lg">
	<div class="p-x_2 p-y_0 p-y_3:md dropdown_column">
		{{> "Recipes.BrandedNav.Dropdown.List.SubLinks" }}
	</div>
</div>

MarkupWrapperClasses:
	br_none br_solid:lg dropdown-menu br-t_0 m-t_0 m-t_2:lg m-x_0:lg m-x_n4 shadow_overlap-light show relative

Weight: 2

Styleguide Recipes.BrandedNav.Dropdown.SubLinks

*/
/*
Nav Dropdown with Alternate Content in Links

It is easy to add images in replace of text links in the navs.   

Markup:
<div class="flex flex_column flex_row:md p-x_2:lg m-x_n1 m-x_0:lg">
	<div class="p-x_2 p-y_0 p-y_2:md order_2 order_1:md dropdown_column w_50:md">
				{{> "Recipes.BrandedNav.Dropdown.List.AltContent" }}
	</div>
	<div
		class="p-x_2 p-y_0 p-y_2:md br-l_1 br_none br_shade-4 br_solid:lg br_solid:md order_1 order_2:md dropdown_column w_50:md"
	>
			{{> "Recipes.BrandedNav.Dropdown.List.SubLinks" }}
	</div>
</div>

MarkupWrapperClasses:
	br_none br_solid:lg dropdown-menu br-t_0 m-t_0 m-t_2:lg m-x_0:lg m-x_n4 shadow_overlap-light show relative


Weight: 60

Styleguide Recipes.BrandedNav.Dropdown.AltContent

*/
/*
Dropdown Nav List

Description: Simple single layer of links in a drop down 

Markup:
<ul class="ul_none lh_2 m_0 max-w_25 w_100">
	<li class="m-b_2">
		<a
			class="dropdown-item transition_4 wrap"
			href="/clinical-topics/acute-coronary-syndromes"
			><span class="text-indent_n1 inline-block m-l_4">Acute Coronary Syndromes</span></span></a
		>
	</li>
	<li class="m-b_2">
		<a
			class="dropdown-item transition_4 wrap"
			href="/clinical-topics/anticoagulation-management"
			title="Anticoagulation Management"
			><span class="text-indent_n1 inline-block m-l_4">Anticoagulation Management</span></a
		>
	</li>
	<li class="m-b_2">
		<a
			class="dropdown-item transition_4 wrap"
			href="/clinical-topics/arrhythmias-and-clinical-ep"
			><span class="text-indent_n1 inline-block m-l_4">Arrhythmias and Clinical EP</span></a
		>
	</li>
	<li class="m-b_2">
		<a
			class="dropdown-item transition_4 wrap"
			href="/clinical-topics/acute-coronary-syndromes/atherosclerotic-disease-cad-pad"
			><span class="text-indent_n1 inline-block m-l_4">Atherosclerotic Disease (CAD/PAD)</span></a
		>
	</li>
	<li class="m-b_2">
		<a
			class="dropdown-item transition_4 wrap"
			href="/clinical-topics/cardiac-surgery"
			><span class="text-indent_n1 inline-block m-l_4">Cardiac Surgery</span></a
		>
	</li>
	<li class="m-b_2">
		<a
			class="dropdown-item transition_4 wrap"
			href="/clinical-topics/cardio-oncology"
			><span class="text-indent_n1 inline-block m-l_4">Cardio-Oncology</span></a
		>
	</li>
	<li class="m-b_2">
		<a
			class="dropdown-item transition_4 wrap"
			href="/clinical-topics/congenital-heart-disease-pediatric-cardiology"
			><span class="text-indent_n1 inline-block m-l_4">Congenital Heart Disease and Pediatric Cardiology</span></a
		>
	</li>
	<li class="m-b_2">
		<a
			class="dropdown-item transition_4 wrap"
			href="/clinical-topics/diabetes-and-cardiometabolic-disease"
			><span class="text-indent_n1 inline-block m-l_4">Diabetes and Cardiometabolic Disease</span></a
		>
	</li>
	<li class="m-b_2">
		<a
			class="dropdown-item transition_4 wrap"
			href="/clinical-topics/dyslipidemia"
			title="Dyslipidemia"
			><span class="text-indent_n1 inline-block m-l_4">Dyslipidemia</span></a
		>
	</li>
	<li class="m-b_2">
		<a
			class="dropdown-item transition_4 wrap"
			href="/clinical-topics/geriatric-cardiology"
			><span class="text-indent_n1 inline-block m-l_4">Geriatric Cardiology</span></a
		>
	</li>
	<li class="m-b_2">
		<a
			class="dropdown-item transition_4 wrap"
			href="/clinical-topics/heart-failure-and-cardiomyopathies"
			title="Heart Failure and Cardiomyopathies"
			><span class="text-indent_n1 inline-block m-l_4">Heart Failure and Cardiomyopathies</span></a
		>
	</li>
</ul>


Weight:1000

Styleguide Recipes.BrandedNav.Dropdown.List.Simple
*/
/*
Dropdown Nav List with Sub Links

Description: Simple single layer of links in a drop down 

Markup:
<ul class="ul_none lh_2"
    id="SubLinkCollapseParent">
    <li class="m-b_2">
        <a class="dropdown-item transition_4 wrap"
           href="/clinical-topics/acute-coronary-syndromes"><span
                  class="text-indent_n1 inline-block m-l_4">Acute
                Coronary Syndromes</span></span></a>
    </li>
    <li class="m-b_2">
        <a class="dropdown-item transition_4 wrap"
           href="/clinical-topics/anticoagulation-management"
           title="Anticoagulation Management"><span
                  class="text-indent_n1 inline-block m-l_4">Anticoagulation
                Management</span></a>
    </li>
    <li class="m-b_2">
        <div
             class="flex justify_start p-l_4 transition_4 dropdown-item">
            <button class="flex_shrink p-r_2 p_0 self_center toggler inline-block br_none bg_tansparent c_inherit-all h:undecorated collapsed"
                    data-bs-toggle="collapse"
                    role="button"
                    aria-expanded="true"
                    aria-controls="learningCollapse"
                    data-bs-target="#learningCollapse"
                    onclick="event.stopPropagation()">
                <i
                   class="far fa icon-toggle_plus-minus-sub display_none:lg m-l_n2 m-r_2"></i>
            </button>
            <a class="flex_grow self_center wrap text-indent_n1 inline-block m-l_4 c_inherit-all h:undecorated"
               href="#">Online Learning Catalog</a>
        </div>
        <ul class="ul_none lh_3 font-size_down collapse transition_4 block:lg"
            id="learningCollapse">
            <li class="">
                <a class="dropdown-item transition_4 wrap text-indent_n1 p-l_5"
                   href="/earncredit"><span
                          class="text-indent_n1 inline-block m-l_5">Earn
                        Credit</span></a>
            </li>
            <li class="">
                <a class="dropdown-item transition_4 wrap text-indent_n1 p-l_5"
                   href="/education-and-meetings/products-and-resources/board-prep-offerings"
                   title="Board Prep Offerings"><span
                          class="text-indent_n1 inline-block m-l_5">Board
                        Prep Offerings</span></a>
            </li>
            <li class="">
                <a class="dropdown-item transition_4 wrap text-indent_n1 p-l_5"
                   href="/education-and-meetings/education-catalog"><span
                          class="text-indent_n1 inline-block m-l_5">View
                        the Entire Catalog</span></a>
            </li>
        </ul>
    </li>
    <li class="m-b_2">
        <div
             class="flex justify_start p-l_4 transition_4 dropdown-item">
            <button class="flex_shrink p-r_2 p_0 self_center toggler inline-block br_none bg_tansparent c_inherit-all h:undecorated collapsed"
                    data-bs-toggle="collapse"
                    role="button"
                    aria-expanded="true"
                    aria-controls="productsCollapse"
                    data-bs-target="#productsCollapse"
                    onclick="event.stopPropagation()">
                <i
                   class="far fa icon-toggle_plus-minus-sub display_none:lg m-l_n2 m-r_2"></i>
            </button>
            <a class="flex_grow self_center wrap text-indent_n1 inline-block m-l_4 c_inherit-all h:undecorated"
               href="/education-and-meetings/education-catalog">Products</a>
        </div>
        <ul class="ul_none lh_3 font-size_down collapse transition_4 block:lg"
            id="productsCollapse">
            <li class="">
                <a class="dropdown-item transition_4 wrap text-indent_n1 p-l_5"
                   href="/education-and-meetings/products-and-resources/accsap"><span
                          class="text-indent_n1 inline-block m-l_5">ACCSAP</span></a>
            </li>
            <li class="">
                <a class="dropdown-item transition_4 wrap text-indent_n1 p-l_5"
                   href="/education-and-meetings/products-and-resources/accel-audio"><span
                          class="text-indent_n1 inline-block m-l_5">ACCEL</span></a>
            </li>
            <li class="">
                <a class="dropdown-item transition_4 wrap text-indent_n1 p-l_5"
                   href="/education-and-meetings/products-and-resources/cardiosource-plus"><span
                          class="text-indent_n1 inline-block m-l_5">CardioSource
                        Plus for Institutions and
                        Practices</span></a>
            </li>
            <li class="">
                <a class="dropdown-item transition_4 wrap text-indent_n1 p-l_5"
                   href="/education-and-meetings/products-and-resources/cathsap"><span
                          class="text-indent_n1 inline-block m-l_5">CathSAP</span></a>
            </li>
            <li class="">
                <a class="dropdown-item transition_4 wrap text-indent_n1 p-l_5"
                   href="/education-and-meetings/products-and-resources/ecg-drill-and-practice"
                   title="ECG Drill and Practice"><span
                          class="text-indent_n1 inline-block m-l_5">ECG
                        Drill and Practice</span></a>
            </li>
            <li class="">
                <a class="dropdown-item transition_4 wrap text-indent_n1 p-l_5"
                   href="/education-and-meetings/products-and-resources/echosap"><span
                          class="text-indent_n1 inline-block m-l_5">EchoSAP</span></a>
            </li>
            <li class="">
                <a class="dropdown-item transition_4 wrap text-indent_n1 p-l_5"
                   href="/education-and-meetings/products-and-resources/epsap"><span
                          class="text-indent_n1 inline-block m-l_5">EP
                        SAP</span></a>
            </li>
            <li class="">
                <a class="dropdown-item transition_4 wrap text-indent_n1 p-l_5"
                   href="/education-and-meetings/products-and-resources/heart-songs-5"><span
                          class="text-indent_n1 inline-block m-l_5">Heart
                        Songs</span></a>
            </li>
            <li class="">
                <a class="dropdown-item transition_4 wrap text-indent_n1 p-l_5"
                   href="/education-and-meetings/products-and-resources/iscience"><span
                          class="text-indent_n1 inline-block m-l_5">iScience</span></a>
            </li>
            <li class="">
                <a class="dropdown-item transition_4 wrap text-indent_n1 p-l_5"
                   href="/education-and-meetings/products-and-resources/recent-advances-in-clinical-nuclear-cardiology-and-cardiac-ct-mod"><span
                          class="text-indent_n1 inline-block m-l_5">Nuclear
                        Cardiology and Cardiac CT Meeting on
                        Demand</span></a>
            </li>
            <li class="">
                <a class="dropdown-item transition_4 wrap text-indent_n1 p-l_5"
                   href="/education-and-meetings/products-and-resources/rightsteps-optimizing-medical-therapy-for-chronic-heart-failure"><span
                          class="text-indent_n1 inline-block m-l_5">RightSTEPS
                        Optimizing Medical Therapy for
                        Chronic Heart
                        Failure</span></a>
            </li>
        </ul>
    </li>
</ul>


Weight:1005

Styleguide Recipes.BrandedNav.Dropdown.List.SubLinks
*/
/*
Dropdown Nav List with Alt Content

Description: Some columns take images instead of text in dropdown links 

Markup:
<ul class="ul_none lh_2">
	<li class="relative m-x_2:md m-x_3">
		<a
			href="http://cvquality.acc.org/?_ga=2.33577825.159963902.1562853382-843642371.1562007133"
			target="_blank"
			class="transition_1 h:opacity opacity_8"
			><img
				src="https://www.acc.org/~/media/Non-Clinical/Images/External%20Site%20Logos/ACC_QII_logo.png"
				alt="QII" class="w_100 max-w_20"
		/></a>
	</li>
	<li class="relative m-x_2:md m-x_3">
		<a href="http://cvquality.acc.org/NCDR-Home.aspx?_ga=2.91395290.159963902.1562853382-843642371.1562007133" target="_blank" class="transition_1 h:opacity opacity_8"><img src="https://www.acc.org/~/media/Non-Clinical/Images/External Site Logos/ACC_NCDR_logo.png" alt="NCDR" class="w_100 max-w_20"></a>
	</li>
</ul>

Weight:1010

Styleguide Recipes.BrandedNav.Dropdown.List.AltContent
*/
.accordion i.icon-toggle_plus-minus:before {
  content: "";
}
.accordion .collapsed i.icon-toggle_plus-minus:before {
  content: "";
}

#search-holder {
  z-index: 3000;
  position: relative;
  width: 400px;
  float: right;
  clear: right;
  clear: both;
  border: 1px solid #c1c3c7;
  border-radius: 3px;
}
#search-holder input {
  box-sizing: border-box;
  position: absolute;
  left: 0;
  width: 100%;
  color: #ccc;
  font-size: 1.2em;
  line-height: 1.5em;
}
#search-holder button {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 26px;
  height: 26px;
  overflow: hidden;
  border: 0;
  background: #fff url(../images/icon-search.png) 50% 50% no-repeat;
  text-indent: -99em;
}
#search-holder button:hover {
  cursor: pointer;
}
#search-holder .coveo-omnibox {
  top: 30px;
}
#search-holder .coveo-query-box-clear {
  display: none !important;
}

.search-bar {
  width: 100%;
  height: auto;
  float: left;
}

#nav-search-label {
  position: absolute;
  overflow: hidden;
  text-indent: -99em;
}

#nav-search-in {
  display: block;
  position: relative;
  width: 200px;
  height: 30px;
  padding: 0 24px 0 10px;
  float: left;
  overflow: hidden;
  border-right: 1px #c1c3c7 solid;
  border-radius: 3px 0 0 3px;
  background: #e6e6e6;
}
#nav-search-in #nav-search-in-content {
  display: inline-block;
  max-width: 90px;
  margin: 0;
  padding: 6px 0 0 0;
  overflow: hidden;
  text-indent: 1px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#nav-search-in.nav-facade-active .nav-down-arrow {
  display: inline-block;
  position: absolute;
  top: 11px;
  right: 10px;
  width: 9px;
  height: 5px;
  background: url("../images/search_arrow.png");
}
#nav-search-in.nav-facade-active #searchDropdownBox {
  visibility: visible;
  top: 0;
  left: 0;
  width: auto;
  height: 29px;
  cursor: pointer;
  opacity: 0;
}

#searchDropdownBox {
  visibility: hidden;
  position: absolute;
  top: 3px;
  left: 5px;
  width: 190px;
  margin: 0;
  padding: 0;
  border: 1px solid #DDDDDD;
  outline: medium none;
  color: black;
}

.nav-searchfield-outer {
  position: relative;
  width: 245px;
  height: 30px;
  float: left;
}

#twotabsearchtextbox {
  width: 100%;
  margin: 6px 0 0 6px;
  padding: 0;
  border: medium none;
  outline: medium none;
  background: none repeat scroll 0 0 transparent;
}

.nav-submit-button {
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  height: 28px;
  margin: 0;
  padding: 0 0 0 3px;
  overflow: hidden;
}
.nav-submit-button .nav-submit-input {
  width: 34px;
  margin: 0;
  padding: 0;
  border: medium none;
  color: white;
  cursor: pointer;
}

/*Coveo Changes*/
#twotabsearchtextbox .magic-box-underlay {
  height: auto;
}

#twotabsearchtextbox .magic-box {
  border-width: 0;
}

#twotabsearchtextbox .CoveoSearchbox input {
  height: 30px;
  padding: 0;
}

#twotabsearchtextbox .magic-box .magic-box-input {
  height: 30px;
}

#twotabsearchtextbox .CoveoSearchButton {
  width: 32px;
  height: 30px;
}

#twotabsearchtextbox #search-holder {
  height: 32px;
}

#twotabsearchtextbox .magic-box.magic-box-notEmpty .magic-box-clear {
  width: 32px;
}

#twotabsearchtextbox .magic-box .magic-box-clear {
  height: 30px;
  line-height: 24px;
}

#twotabsearchtextbox .magic-box .magic-box-clear .magic-box-icon:before {
  font-size: 16px;
}

#twotabsearchtextbox .magic-box .magic-box-suggestions .magic-box-suggestion,#twotabsearchtextbox .magic-box .magic-box-suggestions .magic-box-suggestion-seperator {
  padding-top: 0.5em;
  padding-bottom: 0;
  font-size: 12px;
  line-height: 14px;
}
/*# sourceMappingURL=maps/acc_boot.css.map */