@charset "UTF-8";
/**
 * arches - Global style system focused on utility classes
 * @version v4.1.4x
 * @link https://github.com/ACC-Style/Arches/
 */
/**  Build Comment: including file /setup/__preheader.scss  **/
/** SCSS DOC: _preheader.scss **/
/** SCSS DOC: _helpers.scss **/
/** SCSS DOC: _utility-css.vars.scss **/
/**  Build Comment: This Style Sheet was formatted to work best with the inclusion of Zurb Foundation ^6.6.1   **/
/**  Build Comment: Set Active Class  **/
/** SCSS DOC: __brand.base.scss **/
/**  Colors  **/
/** SCSS DOC: _colors.scss **/
/** Setting link color variables in scss **/
/*

Link Colors: Light

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

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

Weight:2

Styleguide DesignBase.Colors.LinksLight
 */
/*

Link Colors

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


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

Weight:1

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

/**  Textures  **/
.pagination .disabled:hover {
  background-position: top right;
  background-repeat: repeat;
  background-origin: border-box;
  background-attachment: local;
}

/**  logos  **/
/** SCSS DOC: __brand.mobile.scss **/
/** SCSS DOC: __brand.acc.scss **/
/**  ACC Brands    *********************************/
:root {
  --code-color: hsla(var(--accent-h), calc( var(--accent-s) + ((100% - var(--accent-s)) * 0.05) ), calc( var( --accent-l ) - ( var( --accent-l ) * 0.5 ) ), 1);
  --primary-h: 193.288590604deg;
  --primary-s: 74.8743718593%;
  --primary-l: 39.0196078431%;
  --primary: hsl( var(--primary-h),var(--primary-s),var(--primary-l) );
  --secondary-h: 223.6363636364deg;
  --secondary-s: 5.069124424%;
  --secondary-l: 42.5490196078%;
  --secondary: hsl( var(--secondary-h),var(--secondary-s),var(--secondary-l) );
  --success-h: 137.8625954198deg;
  --success-s: 90.3448275862%;
  --success-l: 28.431372549%;
  --success: hsl( var(--success-h),var(--success-s),var(--success-l) );
  --shade-h: 0deg;
  --shade-s: 0.826446281%;
  --shade-l: 52.5490196078%;
  --shade: hsl( var(--shade-h),var(--shade-s),var(--shade-l) );
  --warning-h: 33.8613861386deg;
  --warning-s: 86.3247863248%;
  --warning-l: 45.8823529412%;
  --warning: hsl( var(--warning-h),var(--warning-s),var(--warning-l) );
  --alert-h: 0deg;
  --alert-s: 78.9473684211%;
  --alert-l: 48.431372549%;
  --alert: hsl( var(--alert-h),var(--alert-s),var(--alert-l) );
  --navigation-h: 221.8791946309deg;
  --navigation-s: 63.4042553191%;
  --navigation-l: 46.0784313725%;
  --navigation: hsl( var(--navigation-h),var(--navigation-s),var(--navigation-l) );
  --accent-h: 167.2340425532deg;
  --accent-s: 76.2162162162%;
  --accent-l: 36.2745098039%;
  --accent: hsl( var(--accent-h),var(--accent-s),var(--accent-l) );
  --info-h: 31.3043478261deg;
  --info-s: 11.1111111111%;
  --info-l: 59.4117647059%;
  --info: hsl( var(--info-h),var(--info-s),var(--info-l) );
  --highlight-h: 265.8536585366deg;
  --highlight-s: 48.2352941176%;
  --highlight-l: 50%;
  --highlight: hsl( var(--highlight-h),var(--highlight-s),var(--highlight-l) );
  --acc-h: 206.9491525424deg;
  --acc-s: 100%;
  --acc-l: 23.137254902%;
  --acc: hsl( var(--acc-h),var(--acc-s),var(--acc-l) );
  --link-color-light-h:169.2857142857deg;
  --link-color-light-s:70%;
  --link-color-light-l:73.5294117647%;
  --link-color-light: hsl( var(--link-color-light-h),var(--link-color-light-s),var(--link-color-light-l) );
  --link-color-light--hover-h:169.2857142857deg;
  --link-color-light--hover-s:70%;
  --link-color-light--hover-l:94.7058823529%;
  --link-color-light--hover: hsl( var(--link-color-light--hover-h),var(--link-color-light--hover-s),var(--link-color-light--hover-l) );
  --link-color-light--visited-h:169.2857142857deg;
  --link-color-light--visited-s:21%;
  --link-color-light--visited-l:60.2941176471%;
  --link-color-light--visited: hsl( var(--link-color-light--visited-h),var(--link-color-light--visited-s),var(--link-color-light--visited-l) );
  --link-color-dark-h:169.2857142857deg;
  --link-color-dark-s:70%;
  --link-color-dark-l:23.5294117647%;
  --link-color-dark: hsl( var(--link-color-dark-h),var(--link-color-dark-s),var(--link-color-dark-l) );
  --link-color-dark--hover-h:169.2857142857deg;
  --link-color-dark--hover-s:70%;
  --link-color-dark--hover-l:7.0588235294%;
  --link-color-dark--hover: hsl( var(--link-color-dark--hover-h),var(--link-color-dark--hover-s),var(--link-color-dark--hover-l) );
  --link-color-dark--visited-h:169.2857142857deg;
  --link-color-dark--visited-s:21%;
  --link-color-dark--visited-l:32.9411764706%;
  --link-color-dark--visited: hsl( var(--link-color-dark--visited-h),var(--link-color-dark--visited-s),var(--link-color-dark--visited-l) );
}

/**  Build Comment: Overlay and alter for mobile Branding 4.1.4x  **/
/** SCSS DOC:_brand.compile.scss **/
/** SCSS DOC: _root.cssvars.scss **/

/**  Build Comment: Render Root Variables  **/
/** SCSS DOC: __var.output.scss **/
/** This needs to run later then brand **/
/**  Zurb Foundation Framework Setup Files. ***************************************/
/** SCSS DOC: _setup.zurb.scss **/
/**
* Foundation for Sites Settings
 */
/**
* Foundation for Sites Settings END
 */
/**
 * Foundation for Sites
 * Version 6.7.0
 * https://get.foundation
 * Licensed under MIT Open Source
 */
@media print, screen and (min-width: 40em) {
  .reveal.large, .reveal.small, .reveal.tiny, .reveal {
    right: auto;
    left: auto;
    margin: 0 auto;
  }
}
/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */
html {
  -webkit-text-size-adjust: 100%;
  line-height: 1.15;
}

body {
  margin: 0;
}

h1 {
  margin: 0.67em 0;
  font-size: 2em;
}

hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}

pre {
  font-size: 1em;
  font-family: monospace, monospace;
}

a {
  background-color: transparent;
}

abbr[title] {
  border-bottom: none;
  text-decoration: underline;
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

b,
strong {
  font-weight: bolder;
}

code,
kbd,
samp {
  font-size: 1em;
  font-family: monospace, monospace;
}

small {
  font-size: 80%;
}

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

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

img {
  border-style: none;
}

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

button,
input {
  overflow: visible;
}

button,
select {
  text-transform: none;
}

button,
[type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button;
}

button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
  padding: 0;
  border-style: none;
}

button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

legend {
  box-sizing: border-box;
  display: table;
  max-width: 100%;
  padding: 0;
  color: inherit;
  white-space: normal;
}

progress {
  vertical-align: baseline;
}

textarea {
  overflow: auto;
}

[type=checkbox],
[type=radio] {
  box-sizing: border-box;
  padding: 0;
}

[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
}

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

[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

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

details {
  display: block;
}

summary {
  display: list-item;
}

template,[hidden] {
  display: none;
}

.foundation-mq {
  font-family: "small=0em&medium=40em&large=64em&xlarge=75em&xxlarge=90em";
}

html {
  box-sizing: border-box;
  font-size: 100%;
}

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

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
  padding: 0;
  background: white;
  color: #131212;
  font-weight: normal;
  line-height: 1.5;
  font-family: "Open Sans", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
}

img {
  -ms-interpolation-mode: bicubic;
  display: inline-block;
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

textarea {
  height: auto;
  min-height: 50px;
}

textarea,select {
  border-radius: 0px;
}

select {
  box-sizing: border-box;
  width: 100%;
}

.map_canvas img,
.map_canvas embed,
.map_canvas object,
.mqa-display img,
.mqa-display embed,
.mqa-display object {
  max-width: none !important;
}

button {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  padding: 0;
  border: 0;
  border-radius: 0px;
  background: transparent;
  line-height: 1;
  cursor: auto;
}
[data-whatinput=mouse] button {
  outline: 0;
}

pre {
  overflow: auto;
}

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
}

.is-visible {
  display: block !important;
}

.is-hidden {
  display: none !important;
}

[type=text], [type=password], [type=date], [type=datetime], [type=datetime-local], [type=month], [type=week], [type=email], [type=number], [type=search], [type=tel], [type=time], [type=url], [type=color],
textarea {
  box-sizing: border-box;
  display: block;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  width: 100%;
  height: 39px;
  height: 2.4375rem;
  margin: 0 0 16px;
  margin: 0 0 1rem;
  padding: 8px;
  padding: 0.5rem;
  border: 1px solid #cacaca;
  border-radius: 0px;
  background-color: white;
  box-shadow: inset 0 1px 2px rgba(19, 18, 18, 0.1);
  color: #131212;
  font-weight: normal;
  font-size: 16px;
  font-size: 1rem;
  line-height: 1.5;
  font-family: inherit;
  transition: box-shadow 0.5s, border-color 0.25s ease-in-out;
}
[type=text]:focus, [type=password]:focus, [type=date]:focus, [type=datetime]:focus, [type=datetime-local]:focus, [type=month]:focus, [type=week]:focus, [type=email]:focus, [type=number]:focus, [type=search]:focus, [type=tel]:focus, [type=time]:focus, [type=url]:focus, [type=color]:focus,
textarea:focus {
  border: 1px solid #8a8a8a;
  outline: none;
  background-color: white;
  box-shadow: 0 0 5px #cacaca;
  transition: box-shadow 0.5s, border-color 0.25s ease-in-out;
}

textarea {
  max-width: 100%;
}
textarea[rows] {
  height: auto;
}

input:disabled, input[readonly],
textarea:disabled,
textarea[readonly] {
  background-color: #e6e6e6;
  cursor: not-allowed;
}

[type=submit],
[type=button] {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border-radius: 0px;
}

input[type=search] {
  box-sizing: border-box;
}

::-moz-placeholder {
  color: #cacaca;
}

::placeholder {
  color: #cacaca;
}

[type=file],
[type=checkbox],
[type=radio] {
  margin: 0 0 16px;
  margin: 0 0 1rem;
}

[type=checkbox] + label,
[type=radio] + label {
  display: inline-block;
  margin-right: 16px;
  margin-right: 1rem;
  margin-bottom: 0;
  margin-left: 8px;
  margin-left: 0.5rem;
  vertical-align: baseline;
}
[type=checkbox] + label[for],
[type=radio] + label[for] {
  cursor: pointer;
}

label > [type=checkbox],
label > [type=radio] {
  margin-right: 8px;
  margin-right: 0.5rem;
}

[type=file] {
  width: 100%;
}

label {
  display: block;
  margin: 0;
  color: #131212;
  font-weight: normal;
  font-size: 14px;
  font-size: 0.875rem;
  line-height: 1.8;
}
label.middle {
  margin: 0 0 16px;
  margin: 0 0 1rem;
  padding: 9px 0;
  padding: 0.5625rem 0;
  line-height: 1.5;
}

.help-text {
  margin-top: -8px;
  margin-top: -0.5rem;
  color: #131212;
  font-style: italic;
  font-size: 13px;
  font-size: 0.8125rem;
}

.input-group {
  display: flex;
  align-items: stretch;
  width: 100%;
  margin-bottom: 16px;
  margin-bottom: 1rem;
}
.input-group > :first-child, .input-group > :first-child.input-group-button > * {
  border-radius: 0px 0 0 0px;
}
.input-group > :last-child, .input-group > :last-child.input-group-button > * {
  border-radius: 0 0px 0px 0;
}

.input-group-button a,
.input-group-button input,
.input-group-button button,
.input-group-button label, .input-group-button, .input-group-field, .input-group-label {
  margin: 0;
  white-space: nowrap;
}

.input-group-label {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  padding: 0 16px;
  padding: 0 1rem;
  border: 1px solid #cacaca;
  background: #e6e6e6;
  color: #131212;
  text-align: center;
  white-space: nowrap;
}
.input-group-label:first-child {
  border-right: 0;
}
.input-group-label:last-child {
  border-left: 0;
}

.input-group-field {
  flex: 1 1 0px;
  min-width: 0;
  border-radius: 0;
}

.input-group-button {
  display: flex;
  flex: 0 0 auto;
  padding-top: 0;
  padding-bottom: 0;
  text-align: center;
}
.input-group-button a,
.input-group-button input,
.input-group-button button,
.input-group-button label {
  align-self: stretch;
  height: auto;
  padding-top: 0;
  padding-bottom: 0;
  font-size: 16px;
  font-size: 1rem;
}

fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

legend {
  max-width: 100%;
  margin-bottom: 8px;
  margin-bottom: 0.5rem;
}

.fieldset {
  margin: 18px 0;
  margin: 1.125rem 0;
  padding: 20px;
  padding: 1.25rem;
  border: 1px solid #cacaca;
}
.fieldset legend {
  margin: 0;
  margin-left: -3px;
  margin-left: -0.1875rem;
  padding: 0 3px;
  padding: 0 0.1875rem;
}

select {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  height: 39px;
  height: 2.4375rem;
  margin: 0 0 16px;
  margin: 0 0 1rem;
  padding: 8px;
  padding: 0.5rem;
  padding-right: 24px;
  padding-right: 1.5rem;
  border: 1px solid #cacaca;
  border-radius: 0px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='32' height='24' viewBox='0 0 32 24'><polygon points='0,0 32,0 16,24' style='fill: rgb%28138, 138, 138%29'></polygon></svg>");
  background-position: right -16px center;
  background-position: right -1rem center;
  background-size: 9px 6px;
  background-repeat: no-repeat;
  background-origin: content-box;
  background-color: white;
  color: #131212;
  font-weight: normal;
  font-size: 16px;
  font-size: 1rem;
  line-height: 1.5;
  font-family: inherit;
  transition: box-shadow 0.5s, border-color 0.25s ease-in-out;
}
@media screen and (min-width: 0\0 ) {
  select {
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAYCAYAAACbU/80AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAIpJREFUeNrEkckNgDAMBBfRkEt0ObRBBdsGXUDgmQfK4XhH2m8czQAAy27R3tsw4Qfe2x8uOO6oYLb6GlOor3GF+swURAOmUJ+RwtEJs9WvTGEYxBXqI1MQAZhCfUQKRzDMVj+TwrAIV6jvSUEkYAr1LSkcyTBb/V+KYfX7xAeusq3sLDtGH3kEGACPWIflNZfhRQAAAABJRU5ErkJggg==");
  }
}
select:focus {
  border: 1px solid #8a8a8a;
  outline: none;
  background-color: white;
  box-shadow: 0 0 5px #cacaca;
  transition: box-shadow 0.5s, border-color 0.25s ease-in-out;
}
select:disabled {
  background-color: #e6e6e6;
  cursor: not-allowed;
}
select::-ms-expand {
  display: none;
}
select[multiple] {
  height: auto;
  background-image: none;
}
select:not([multiple]) {
  padding-top: 0;
  padding-bottom: 0;
}

.is-invalid-input:not(:focus) {
  border-color: #dd1a1a;
  background-color: #fce8e8;
}
.is-invalid-input:not(:focus)::-moz-placeholder {
  color: #dd1a1a;
}
.is-invalid-input:not(:focus)::placeholder {
  color: #dd1a1a;
}

.is-invalid-label,.form-error {
  color: #dd1a1a;
}

.form-error {
  display: none;
  margin-top: -8px;
  margin-top: -0.5rem;
  margin-bottom: 16px;
  margin-bottom: 1rem;
  font-weight: bold;
  font-size: 12px;
  font-size: 0.75rem;
}
.form-error.is-visible {
  display: block;
}

div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
form,
p,
blockquote,
th,
td {
  margin: 0;
  padding: 0;
}

p {
  text-rendering: optimizeLegibility;
  margin-bottom: 16px;
  margin-bottom: 1rem;
  font-size: inherit;
  line-height: 1.6;
}

em,
i {
  font-style: italic;
}

em,
i,strong,
b {
  line-height: inherit;
}

strong,
b {
  font-weight: bold;
}

small {
  font-size: 80%;
  line-height: inherit;
}

h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
  text-rendering: optimizeLegibility;
  color: inherit;
  font-style: normal;
  font-weight: normal;
  font-family: "Maven Pro", "Open Sans", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
}
h1 small, .h1 small,
h2 small, .h2 small,
h3 small, .h3 small,
h4 small, .h4 small,
h5 small, .h5 small,
h6 small, .h6 small {
  color: #cacaca;
  line-height: 0;
}

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

h1, .h1,h2, .h2 {
  margin-top: 0;
  margin-bottom: 8px;
  margin-bottom: 0.5rem;
  line-height: 1.4;
}

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

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

h3, .h3,h4, .h4 {
  margin-top: 0;
  margin-bottom: 8px;
  margin-bottom: 0.5rem;
  line-height: 1.4;
}

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

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

h5, .h5,h6, .h6 {
  margin-top: 0;
  margin-bottom: 8px;
  margin-bottom: 0.5rem;
  line-height: 1.4;
}

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

@media print, screen and (min-width: 40em) {
  h1, .h1 {
    font-size: 2.0272865295rem;
  }

  h2, .h2 {
    font-size: 1.8020324707rem;
  }

  h3, .h3 {
    font-size: 1.6018066406rem;
  }

  h4, .h4 {
    font-size: 1.423828125rem;
  }

  h5, .h5 {
    font-size: 1.265625rem;
  }

  h6, .h6 {
    font-size: 1.125rem;
  }
}
a {
  color: #198dae;
  line-height: inherit;
  text-decoration: none;
  cursor: pointer;
}
a:hover, a:focus {
  color: #167996;
}
a img {
  border: 0;
}

hr {
  max-width: 1400px;
  max-width: 87.5rem;
  height: 0;
  margin: 20px auto;
  margin: 1.25rem auto;
  clear: both;
  border-top: 0;
  border-right: 0;
  border-bottom: 1px solid #cacaca;
  border-left: 0;
}

ul,
ol,
dl {
  margin-bottom: 16px;
  margin-bottom: 1rem;
  line-height: 1.6;
  list-style-position: outside;
}

li {
  font-size: inherit;
}

ul {
  list-style-type: disc;
}

ul,ol,ul ul, ul ol, ol ul, ol ol {
  margin-left: 20px;
  margin-left: 1.25rem;
}

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

dl {
  margin-bottom: 16px;
  margin-bottom: 1rem;
}
dl dt {
  margin-bottom: 4.8px;
  margin-bottom: 0.3rem;
  font-weight: bold;
}

blockquote {
  margin: 0 0 16px;
  margin: 0 0 1rem;
  padding: 9px 20px 0 19px;
  padding: 0.5625rem 1.25rem 0 1.1875rem;
  border-left: 1px solid #cacaca;
}
blockquote, blockquote p {
  color: #8a8a8a;
  line-height: 1.6;
}

abbr, abbr[title] {
  border-bottom: 1px dotted #131212;
  text-decoration: none;
  cursor: help;
}

figure,kbd {
  margin: 0;
}

kbd {
  padding: 2px 4px 0;
  padding: 0.125rem 0.25rem 0;
  background-color: #e6e6e6;
  color: #131212;
  font-family: Consolas, "Liberation Mono", Courier, monospace;
}

.subheader {
  margin-top: 3.2px;
  margin-top: 0.2rem;
  margin-bottom: 8px;
  margin-bottom: 0.5rem;
  color: #8a8a8a;
  font-weight: normal;
  line-height: 1.4;
}

.lead {
  font-size: 125%;
  line-height: 1.6;
}

.stat {
  font-size: 40px;
  font-size: 2.5rem;
  line-height: 1;
}
p + .stat {
  margin-top: -16px;
  margin-top: -1rem;
}

ul.no-bullet, ol.no-bullet {
  margin-left: 0;
  list-style: none;
}

.cite-block, cite {
  display: block;
  color: #8a8a8a;
  font-size: 13px;
  font-size: 0.8125rem;
}
.cite-block:before, cite:before {
  content: "— ";
}

.code-inline, code {
  word-wrap: break-word;
  display: inline;
  max-width: 100%;
  padding: 2px 5px 1px;
  padding: 0.125rem 0.3125rem 0.0625rem;
}

.code-inline, code,.code-block {
  border: 1px solid #cacaca;
  background-color: #e6e6e6;
  color: #131212;
  font-weight: normal;
  font-family: Consolas, "Liberation Mono", Courier, monospace;
}

.code-block {
  display: block;
  margin-bottom: 24px;
  margin-bottom: 1.5rem;
  padding: 16px;
  padding: 1rem;
  overflow: auto;
  white-space: pre;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

.text-center {
  text-align: center;
}

.text-justify {
  text-align: justify;
}

@media print, screen and (min-width: 40em) {
  .medium-text-left {
    text-align: left;
  }

  .medium-text-right {
    text-align: right;
  }

  .medium-text-center {
    text-align: center;
  }

  .medium-text-justify {
    text-align: justify;
  }
}
@media print, screen and (min-width: 64em) {
  .large-text-left {
    text-align: left;
  }

  .large-text-right {
    text-align: right;
  }

  .large-text-center {
    text-align: center;
  }

  .large-text-justify {
    text-align: justify;
  }
}
.show-for-print {
  display: none !important;
}

@media print {
  * {
    background: transparent !important;
    box-shadow: none !important;
    color: black !important;
    -webkit-print-color-adjust: economy;
            color-adjust: economy;
    text-shadow: none !important;
  }

  .show-for-print {
    display: block !important;
  }

  .hide-for-print {
    display: none !important;
  }

  table.show-for-print {
    display: table !important;
  }

  thead.show-for-print {
    display: table-header-group !important;
  }

  tbody.show-for-print {
    display: table-row-group !important;
  }

  tr.show-for-print {
    display: table-row !important;
  }

  td.show-for-print,th.show-for-print {
    display: table-cell !important;
  }

  a,
a:visited {
    text-decoration: underline;
  }

  a[href]:after {
    content: " (" attr(href) ")";
  }

  .ir a:after,
a[href^="javascript:"]:after,
a[href^="#"]:after {
    content: "";
  }

  abbr[title]:after {
    content: " (" attr(title) ")";
  }

  pre,
blockquote {
    border: 1px solid #8a8a8a;
    page-break-inside: avoid;
  }

  thead {
    display: table-header-group;
  }

  tr,
img {
    page-break-inside: avoid;
  }

  img {
    max-width: 100% !important;
  }

  @page {
    margin: 0.5cm;
  }
  p,
h2,
h3 {
    orphans: 3;
    widows: 3;
  }

  h2,
h3 {
    page-break-after: avoid;
  }

  .print-break-inside {
    page-break-inside: auto;
  }
}
.grid-container {
  max-width: 1400px;
  max-width: 87.5rem;
  margin-right: auto;
  margin-left: auto;
  padding-right: 10px;
  padding-right: 0.625rem;
  padding-left: 10px;
  padding-left: 0.625rem;
}
@media print, screen and (min-width: 40em) {
  .grid-container {
    padding-right: 0.9375rem;
    padding-left: 0.9375rem;
  }
}
.grid-container.fluid {
  max-width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: 10px;
  padding-right: 0.625rem;
  padding-left: 10px;
  padding-left: 0.625rem;
}
@media print, screen and (min-width: 40em) {
  .grid-container.fluid {
    padding-right: 0.9375rem;
    padding-left: 0.9375rem;
  }
}
.grid-container.full {
  max-width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: 0;
  padding-left: 0;
}

.grid-x {
  display: flex;
  flex-flow: row wrap;
}

.cell {
  flex: 0 0 auto;
  width: 100%;
  min-width: 0px;
  min-height: 0px;
}
.cell.auto {
  flex: 1 1 0px;
}
.cell.shrink {
  flex: 0 0 auto;
}
.grid-x > .auto,.grid-x > .shrink {
  width: auto;
}

.grid-x > .small-shrink, .grid-x > .small-full, .grid-x > .small-1, .grid-x > .small-2, .grid-x > .small-3, .grid-x > .small-4, .grid-x > .small-5, .grid-x > .small-6, .grid-x > .small-7, .grid-x > .small-8, .grid-x > .small-9, .grid-x > .small-10, .grid-x > .small-11, .grid-x > .small-12 {
  flex-basis: auto;
}

@media print, screen and (min-width: 40em) {
  .grid-x > .medium-shrink, .grid-x > .medium-full, .grid-x > .medium-1, .grid-x > .medium-2, .grid-x > .medium-3, .grid-x > .medium-4, .grid-x > .medium-5, .grid-x > .medium-6, .grid-x > .medium-7, .grid-x > .medium-8, .grid-x > .medium-9, .grid-x > .medium-10, .grid-x > .medium-11, .grid-x > .medium-12 {
    flex-basis: auto;
  }
}
@media print, screen and (min-width: 64em) {
  .grid-x > .large-shrink, .grid-x > .large-full, .grid-x > .large-1, .grid-x > .large-2, .grid-x > .large-3, .grid-x > .large-4, .grid-x > .large-5, .grid-x > .large-6, .grid-x > .large-7, .grid-x > .large-8, .grid-x > .large-9, .grid-x > .large-10, .grid-x > .large-11, .grid-x > .large-12 {
    flex-basis: auto;
  }
}
.grid-x > .small-12, .grid-x > .small-11, .grid-x > .small-10, .grid-x > .small-9, .grid-x > .small-8, .grid-x > .small-7, .grid-x > .small-6, .grid-x > .small-5, .grid-x > .small-4, .grid-x > .small-3, .grid-x > .small-2, .grid-x > .small-1 {
  flex: 0 0 auto;
}

.grid-x > .small-1 {
  width: 8.3333333333%;
}

.grid-x > .small-2 {
  width: 16.6666666667%;
}

.grid-x > .small-3 {
  width: 25%;
}

.grid-x > .small-4 {
  width: 33.3333333333%;
}

.grid-x > .small-5 {
  width: 41.6666666667%;
}

.grid-x > .small-6 {
  width: 50%;
}

.grid-x > .small-7 {
  width: 58.3333333333%;
}

.grid-x > .small-8 {
  width: 66.6666666667%;
}

.grid-x > .small-9 {
  width: 75%;
}

.grid-x > .small-10 {
  width: 83.3333333333%;
}

.grid-x > .small-11 {
  width: 91.6666666667%;
}

.grid-x > .small-12 {
  width: 100%;
}

@media print, screen and (min-width: 40em) {
  .grid-x > .medium-auto {
    flex: 1 1 0px;
    width: auto;
  }

  .grid-x > .medium-12, .grid-x > .medium-11, .grid-x > .medium-10, .grid-x > .medium-9, .grid-x > .medium-8, .grid-x > .medium-7, .grid-x > .medium-6, .grid-x > .medium-5, .grid-x > .medium-4, .grid-x > .medium-3, .grid-x > .medium-2, .grid-x > .medium-1, .grid-x > .medium-shrink {
    flex: 0 0 auto;
  }

  .grid-x > .medium-shrink {
    width: auto;
  }

  .grid-x > .medium-1 {
    width: 8.3333333333%;
  }

  .grid-x > .medium-2 {
    width: 16.6666666667%;
  }

  .grid-x > .medium-3 {
    width: 25%;
  }

  .grid-x > .medium-4 {
    width: 33.3333333333%;
  }

  .grid-x > .medium-5 {
    width: 41.6666666667%;
  }

  .grid-x > .medium-6 {
    width: 50%;
  }

  .grid-x > .medium-7 {
    width: 58.3333333333%;
  }

  .grid-x > .medium-8 {
    width: 66.6666666667%;
  }

  .grid-x > .medium-9 {
    width: 75%;
  }

  .grid-x > .medium-10 {
    width: 83.3333333333%;
  }

  .grid-x > .medium-11 {
    width: 91.6666666667%;
  }

  .grid-x > .medium-12 {
    width: 100%;
  }
}
@media print, screen and (min-width: 64em) {
  .grid-x > .large-auto {
    flex: 1 1 0px;
    width: auto;
  }

  .grid-x > .large-12, .grid-x > .large-11, .grid-x > .large-10, .grid-x > .large-9, .grid-x > .large-8, .grid-x > .large-7, .grid-x > .large-6, .grid-x > .large-5, .grid-x > .large-4, .grid-x > .large-3, .grid-x > .large-2, .grid-x > .large-1, .grid-x > .large-shrink {
    flex: 0 0 auto;
  }

  .grid-x > .large-shrink {
    width: auto;
  }

  .grid-x > .large-1 {
    width: 8.3333333333%;
  }

  .grid-x > .large-2 {
    width: 16.6666666667%;
  }

  .grid-x > .large-3 {
    width: 25%;
  }

  .grid-x > .large-4 {
    width: 33.3333333333%;
  }

  .grid-x > .large-5 {
    width: 41.6666666667%;
  }

  .grid-x > .large-6 {
    width: 50%;
  }

  .grid-x > .large-7 {
    width: 58.3333333333%;
  }

  .grid-x > .large-8 {
    width: 66.6666666667%;
  }

  .grid-x > .large-9 {
    width: 75%;
  }

  .grid-x > .large-10 {
    width: 83.3333333333%;
  }

  .grid-x > .large-11 {
    width: 91.6666666667%;
  }

  .grid-x > .large-12 {
    width: 100%;
  }
}
.grid-margin-x:not(.grid-x) > .cell {
  width: auto;
}

.grid-margin-y:not(.grid-y) > .cell {
  height: auto;
}

.grid-margin-x {
  margin-right: -10px;
  margin-right: -0.625rem;
  margin-left: -10px;
  margin-left: -0.625rem;
}
@media print, screen and (min-width: 40em) {
  .grid-margin-x {
    margin-right: -0.9375rem;
    margin-left: -0.9375rem;
  }
}
.grid-margin-x > .cell {
  width: calc(100% - 1.25rem);
  margin-right: 10px;
  margin-right: 0.625rem;
  margin-left: 10px;
  margin-left: 0.625rem;
}
@media print, screen and (min-width: 40em) {
  .grid-margin-x > .cell {
    width: calc(100% - 1.875rem);
    margin-right: 0.9375rem;
    margin-left: 0.9375rem;
  }
}
.grid-margin-x > .auto,.grid-margin-x > .shrink {
  width: auto;
}
.grid-margin-x > .small-1 {
  width: calc(8.3333333333% - 1.25rem);
}
.grid-margin-x > .small-2 {
  width: calc(16.6666666667% - 1.25rem);
}
.grid-margin-x > .small-3 {
  width: calc(25% - 1.25rem);
}
.grid-margin-x > .small-4 {
  width: calc(33.3333333333% - 1.25rem);
}
.grid-margin-x > .small-5 {
  width: calc(41.6666666667% - 1.25rem);
}
.grid-margin-x > .small-6 {
  width: calc(50% - 1.25rem);
}
.grid-margin-x > .small-7 {
  width: calc(58.3333333333% - 1.25rem);
}
.grid-margin-x > .small-8 {
  width: calc(66.6666666667% - 1.25rem);
}
.grid-margin-x > .small-9 {
  width: calc(75% - 1.25rem);
}
.grid-margin-x > .small-10 {
  width: calc(83.3333333333% - 1.25rem);
}
.grid-margin-x > .small-11 {
  width: calc(91.6666666667% - 1.25rem);
}
.grid-margin-x > .small-12 {
  width: calc(100% - 1.25rem);
}
@media print, screen and (min-width: 40em) {
  .grid-margin-x > .auto,.grid-margin-x > .shrink {
    width: auto;
  }
  .grid-margin-x > .small-1 {
    width: calc(8.3333333333% - 1.875rem);
  }
  .grid-margin-x > .small-2 {
    width: calc(16.6666666667% - 1.875rem);
  }
  .grid-margin-x > .small-3 {
    width: calc(25% - 1.875rem);
  }
  .grid-margin-x > .small-4 {
    width: calc(33.3333333333% - 1.875rem);
  }
  .grid-margin-x > .small-5 {
    width: calc(41.6666666667% - 1.875rem);
  }
  .grid-margin-x > .small-6 {
    width: calc(50% - 1.875rem);
  }
  .grid-margin-x > .small-7 {
    width: calc(58.3333333333% - 1.875rem);
  }
  .grid-margin-x > .small-8 {
    width: calc(66.6666666667% - 1.875rem);
  }
  .grid-margin-x > .small-9 {
    width: calc(75% - 1.875rem);
  }
  .grid-margin-x > .small-10 {
    width: calc(83.3333333333% - 1.875rem);
  }
  .grid-margin-x > .small-11 {
    width: calc(91.6666666667% - 1.875rem);
  }
  .grid-margin-x > .small-12 {
    width: calc(100% - 1.875rem);
  }
  .grid-margin-x > .medium-auto,.grid-margin-x > .medium-shrink {
    width: auto;
  }
  .grid-margin-x > .medium-1 {
    width: calc(8.3333333333% - 1.875rem);
  }
  .grid-margin-x > .medium-2 {
    width: calc(16.6666666667% - 1.875rem);
  }
  .grid-margin-x > .medium-3 {
    width: calc(25% - 1.875rem);
  }
  .grid-margin-x > .medium-4 {
    width: calc(33.3333333333% - 1.875rem);
  }
  .grid-margin-x > .medium-5 {
    width: calc(41.6666666667% - 1.875rem);
  }
  .grid-margin-x > .medium-6 {
    width: calc(50% - 1.875rem);
  }
  .grid-margin-x > .medium-7 {
    width: calc(58.3333333333% - 1.875rem);
  }
  .grid-margin-x > .medium-8 {
    width: calc(66.6666666667% - 1.875rem);
  }
  .grid-margin-x > .medium-9 {
    width: calc(75% - 1.875rem);
  }
  .grid-margin-x > .medium-10 {
    width: calc(83.3333333333% - 1.875rem);
  }
  .grid-margin-x > .medium-11 {
    width: calc(91.6666666667% - 1.875rem);
  }
  .grid-margin-x > .medium-12 {
    width: calc(100% - 1.875rem);
  }
}
@media print, screen and (min-width: 64em) {
  .grid-margin-x > .large-auto,.grid-margin-x > .large-shrink {
    width: auto;
  }
  .grid-margin-x > .large-1 {
    width: calc(8.3333333333% - 1.875rem);
  }
  .grid-margin-x > .large-2 {
    width: calc(16.6666666667% - 1.875rem);
  }
  .grid-margin-x > .large-3 {
    width: calc(25% - 1.875rem);
  }
  .grid-margin-x > .large-4 {
    width: calc(33.3333333333% - 1.875rem);
  }
  .grid-margin-x > .large-5 {
    width: calc(41.6666666667% - 1.875rem);
  }
  .grid-margin-x > .large-6 {
    width: calc(50% - 1.875rem);
  }
  .grid-margin-x > .large-7 {
    width: calc(58.3333333333% - 1.875rem);
  }
  .grid-margin-x > .large-8 {
    width: calc(66.6666666667% - 1.875rem);
  }
  .grid-margin-x > .large-9 {
    width: calc(75% - 1.875rem);
  }
  .grid-margin-x > .large-10 {
    width: calc(83.3333333333% - 1.875rem);
  }
  .grid-margin-x > .large-11 {
    width: calc(91.6666666667% - 1.875rem);
  }
  .grid-margin-x > .large-12 {
    width: calc(100% - 1.875rem);
  }
}

.grid-padding-x .grid-padding-x {
  margin-right: -10px;
  margin-right: -0.625rem;
  margin-left: -10px;
  margin-left: -0.625rem;
}
@media print, screen and (min-width: 40em) {
  .grid-padding-x .grid-padding-x {
    margin-right: -0.9375rem;
    margin-left: -0.9375rem;
  }
}
.grid-container:not(.full) > .grid-padding-x {
  margin-right: -10px;
  margin-right: -0.625rem;
  margin-left: -10px;
  margin-left: -0.625rem;
}
@media print, screen and (min-width: 40em) {
  .grid-container:not(.full) > .grid-padding-x {
    margin-right: -0.9375rem;
    margin-left: -0.9375rem;
  }
}
.grid-padding-x > .cell {
  padding-right: 10px;
  padding-right: 0.625rem;
  padding-left: 10px;
  padding-left: 0.625rem;
}
@media print, screen and (min-width: 40em) {
  .grid-padding-x > .cell {
    padding-right: 0.9375rem;
    padding-left: 0.9375rem;
  }
}

.small-up-1 > .cell {
  width: 100%;
}

.small-up-2 > .cell {
  width: 50%;
}

.small-up-3 > .cell {
  width: 33.3333333333%;
}

.small-up-4 > .cell {
  width: 25%;
}

.small-up-5 > .cell {
  width: 20%;
}

.small-up-6 > .cell {
  width: 16.6666666667%;
}

.small-up-7 > .cell {
  width: 14.2857142857%;
}

.small-up-8 > .cell {
  width: 12.5%;
}

@media print, screen and (min-width: 40em) {
  .medium-up-1 > .cell {
    width: 100%;
  }

  .medium-up-2 > .cell {
    width: 50%;
  }

  .medium-up-3 > .cell {
    width: 33.3333333333%;
  }

  .medium-up-4 > .cell {
    width: 25%;
  }

  .medium-up-5 > .cell {
    width: 20%;
  }

  .medium-up-6 > .cell {
    width: 16.6666666667%;
  }

  .medium-up-7 > .cell {
    width: 14.2857142857%;
  }

  .medium-up-8 > .cell {
    width: 12.5%;
  }
}
@media print, screen and (min-width: 64em) {
  .large-up-1 > .cell {
    width: 100%;
  }

  .large-up-2 > .cell {
    width: 50%;
  }

  .large-up-3 > .cell {
    width: 33.3333333333%;
  }

  .large-up-4 > .cell {
    width: 25%;
  }

  .large-up-5 > .cell {
    width: 20%;
  }

  .large-up-6 > .cell {
    width: 16.6666666667%;
  }

  .large-up-7 > .cell {
    width: 14.2857142857%;
  }

  .large-up-8 > .cell {
    width: 12.5%;
  }
}
.grid-margin-x.small-up-1 > .cell {
  width: calc(100% - 1.25rem);
}

.grid-margin-x.small-up-2 > .cell {
  width: calc(50% - 1.25rem);
}

.grid-margin-x.small-up-3 > .cell {
  width: calc(33.3333333333% - 1.25rem);
}

.grid-margin-x.small-up-4 > .cell {
  width: calc(25% - 1.25rem);
}

.grid-margin-x.small-up-5 > .cell {
  width: calc(20% - 1.25rem);
}

.grid-margin-x.small-up-6 > .cell {
  width: calc(16.6666666667% - 1.25rem);
}

.grid-margin-x.small-up-7 > .cell {
  width: calc(14.2857142857% - 1.25rem);
}

.grid-margin-x.small-up-8 > .cell {
  width: calc(12.5% - 1.25rem);
}

@media print, screen and (min-width: 40em) {
  .grid-margin-x.small-up-1 > .cell {
    width: calc(100% - 1.875rem);
  }

  .grid-margin-x.small-up-2 > .cell {
    width: calc(50% - 1.875rem);
  }

  .grid-margin-x.small-up-3 > .cell {
    width: calc(33.3333333333% - 1.875rem);
  }

  .grid-margin-x.small-up-4 > .cell {
    width: calc(25% - 1.875rem);
  }

  .grid-margin-x.small-up-5 > .cell {
    width: calc(20% - 1.875rem);
  }

  .grid-margin-x.small-up-6 > .cell {
    width: calc(16.6666666667% - 1.875rem);
  }

  .grid-margin-x.small-up-7 > .cell {
    width: calc(14.2857142857% - 1.875rem);
  }

  .grid-margin-x.small-up-8 > .cell {
    width: calc(12.5% - 1.875rem);
  }

  .grid-margin-x.medium-up-1 > .cell {
    width: calc(100% - 1.875rem);
  }

  .grid-margin-x.medium-up-2 > .cell {
    width: calc(50% - 1.875rem);
  }

  .grid-margin-x.medium-up-3 > .cell {
    width: calc(33.3333333333% - 1.875rem);
  }

  .grid-margin-x.medium-up-4 > .cell {
    width: calc(25% - 1.875rem);
  }

  .grid-margin-x.medium-up-5 > .cell {
    width: calc(20% - 1.875rem);
  }

  .grid-margin-x.medium-up-6 > .cell {
    width: calc(16.6666666667% - 1.875rem);
  }

  .grid-margin-x.medium-up-7 > .cell {
    width: calc(14.2857142857% - 1.875rem);
  }

  .grid-margin-x.medium-up-8 > .cell {
    width: calc(12.5% - 1.875rem);
  }
}
@media print, screen and (min-width: 64em) {
  .grid-margin-x.large-up-1 > .cell {
    width: calc(100% - 1.875rem);
  }

  .grid-margin-x.large-up-2 > .cell {
    width: calc(50% - 1.875rem);
  }

  .grid-margin-x.large-up-3 > .cell {
    width: calc(33.3333333333% - 1.875rem);
  }

  .grid-margin-x.large-up-4 > .cell {
    width: calc(25% - 1.875rem);
  }

  .grid-margin-x.large-up-5 > .cell {
    width: calc(20% - 1.875rem);
  }

  .grid-margin-x.large-up-6 > .cell {
    width: calc(16.6666666667% - 1.875rem);
  }

  .grid-margin-x.large-up-7 > .cell {
    width: calc(14.2857142857% - 1.875rem);
  }

  .grid-margin-x.large-up-8 > .cell {
    width: calc(12.5% - 1.875rem);
  }
}
.small-margin-collapse,.small-margin-collapse > .cell {
  margin-right: 0;
  margin-left: 0;
}
.small-margin-collapse > .small-1 {
  width: 8.3333333333%;
}
.small-margin-collapse > .small-2 {
  width: 16.6666666667%;
}
.small-margin-collapse > .small-3 {
  width: 25%;
}
.small-margin-collapse > .small-4 {
  width: 33.3333333333%;
}
.small-margin-collapse > .small-5 {
  width: 41.6666666667%;
}
.small-margin-collapse > .small-6 {
  width: 50%;
}
.small-margin-collapse > .small-7 {
  width: 58.3333333333%;
}
.small-margin-collapse > .small-8 {
  width: 66.6666666667%;
}
.small-margin-collapse > .small-9 {
  width: 75%;
}
.small-margin-collapse > .small-10 {
  width: 83.3333333333%;
}
.small-margin-collapse > .small-11 {
  width: 91.6666666667%;
}
.small-margin-collapse > .small-12 {
  width: 100%;
}
@media print, screen and (min-width: 40em) {
  .small-margin-collapse > .medium-1 {
    width: 8.3333333333%;
  }
  .small-margin-collapse > .medium-2 {
    width: 16.6666666667%;
  }
  .small-margin-collapse > .medium-3 {
    width: 25%;
  }
  .small-margin-collapse > .medium-4 {
    width: 33.3333333333%;
  }
  .small-margin-collapse > .medium-5 {
    width: 41.6666666667%;
  }
  .small-margin-collapse > .medium-6 {
    width: 50%;
  }
  .small-margin-collapse > .medium-7 {
    width: 58.3333333333%;
  }
  .small-margin-collapse > .medium-8 {
    width: 66.6666666667%;
  }
  .small-margin-collapse > .medium-9 {
    width: 75%;
  }
  .small-margin-collapse > .medium-10 {
    width: 83.3333333333%;
  }
  .small-margin-collapse > .medium-11 {
    width: 91.6666666667%;
  }
  .small-margin-collapse > .medium-12 {
    width: 100%;
  }
}
@media print, screen and (min-width: 64em) {
  .small-margin-collapse > .large-1 {
    width: 8.3333333333%;
  }
  .small-margin-collapse > .large-2 {
    width: 16.6666666667%;
  }
  .small-margin-collapse > .large-3 {
    width: 25%;
  }
  .small-margin-collapse > .large-4 {
    width: 33.3333333333%;
  }
  .small-margin-collapse > .large-5 {
    width: 41.6666666667%;
  }
  .small-margin-collapse > .large-6 {
    width: 50%;
  }
  .small-margin-collapse > .large-7 {
    width: 58.3333333333%;
  }
  .small-margin-collapse > .large-8 {
    width: 66.6666666667%;
  }
  .small-margin-collapse > .large-9 {
    width: 75%;
  }
  .small-margin-collapse > .large-10 {
    width: 83.3333333333%;
  }
  .small-margin-collapse > .large-11 {
    width: 91.6666666667%;
  }
  .small-margin-collapse > .large-12 {
    width: 100%;
  }
}

.small-padding-collapse {
  margin-right: 0;
  margin-left: 0;
}
.small-padding-collapse > .cell {
  padding-right: 0;
  padding-left: 0;
}

@media print, screen and (min-width: 40em) {
  .medium-margin-collapse,.medium-margin-collapse > .cell {
    margin-right: 0;
    margin-left: 0;
  }
  .medium-margin-collapse > .small-1 {
    width: 8.3333333333%;
  }
  .medium-margin-collapse > .small-2 {
    width: 16.6666666667%;
  }
  .medium-margin-collapse > .small-3 {
    width: 25%;
  }
  .medium-margin-collapse > .small-4 {
    width: 33.3333333333%;
  }
  .medium-margin-collapse > .small-5 {
    width: 41.6666666667%;
  }
  .medium-margin-collapse > .small-6 {
    width: 50%;
  }
  .medium-margin-collapse > .small-7 {
    width: 58.3333333333%;
  }
  .medium-margin-collapse > .small-8 {
    width: 66.6666666667%;
  }
  .medium-margin-collapse > .small-9 {
    width: 75%;
  }
  .medium-margin-collapse > .small-10 {
    width: 83.3333333333%;
  }
  .medium-margin-collapse > .small-11 {
    width: 91.6666666667%;
  }
  .medium-margin-collapse > .small-12 {
    width: 100%;
  }
  .medium-margin-collapse > .medium-1 {
    width: 8.3333333333%;
  }
  .medium-margin-collapse > .medium-2 {
    width: 16.6666666667%;
  }
  .medium-margin-collapse > .medium-3 {
    width: 25%;
  }
  .medium-margin-collapse > .medium-4 {
    width: 33.3333333333%;
  }
  .medium-margin-collapse > .medium-5 {
    width: 41.6666666667%;
  }
  .medium-margin-collapse > .medium-6 {
    width: 50%;
  }
  .medium-margin-collapse > .medium-7 {
    width: 58.3333333333%;
  }
  .medium-margin-collapse > .medium-8 {
    width: 66.6666666667%;
  }
  .medium-margin-collapse > .medium-9 {
    width: 75%;
  }
  .medium-margin-collapse > .medium-10 {
    width: 83.3333333333%;
  }
  .medium-margin-collapse > .medium-11 {
    width: 91.6666666667%;
  }
  .medium-margin-collapse > .medium-12 {
    width: 100%;
  }
}
@media print, screen and (min-width: 40em) {
}
@media print, screen and (min-width: 40em) {
}
@media print, screen and (min-width: 64em) {
  .medium-margin-collapse > .large-1 {
    width: 8.3333333333%;
  }
  .medium-margin-collapse > .large-2 {
    width: 16.6666666667%;
  }
  .medium-margin-collapse > .large-3 {
    width: 25%;
  }
  .medium-margin-collapse > .large-4 {
    width: 33.3333333333%;
  }
  .medium-margin-collapse > .large-5 {
    width: 41.6666666667%;
  }
  .medium-margin-collapse > .large-6 {
    width: 50%;
  }
  .medium-margin-collapse > .large-7 {
    width: 58.3333333333%;
  }
  .medium-margin-collapse > .large-8 {
    width: 66.6666666667%;
  }
  .medium-margin-collapse > .large-9 {
    width: 75%;
  }
  .medium-margin-collapse > .large-10 {
    width: 83.3333333333%;
  }
  .medium-margin-collapse > .large-11 {
    width: 91.6666666667%;
  }
  .medium-margin-collapse > .large-12 {
    width: 100%;
  }
}

@media print, screen and (min-width: 40em) {
  .medium-padding-collapse {
    margin-right: 0;
    margin-left: 0;
  }
  .medium-padding-collapse > .cell {
    padding-right: 0;
    padding-left: 0;
  }
}

@media print, screen and (min-width: 64em) {
  .large-margin-collapse,.large-margin-collapse > .cell {
    margin-right: 0;
    margin-left: 0;
  }
  .large-margin-collapse > .small-1 {
    width: 8.3333333333%;
  }
  .large-margin-collapse > .small-2 {
    width: 16.6666666667%;
  }
  .large-margin-collapse > .small-3 {
    width: 25%;
  }
  .large-margin-collapse > .small-4 {
    width: 33.3333333333%;
  }
  .large-margin-collapse > .small-5 {
    width: 41.6666666667%;
  }
  .large-margin-collapse > .small-6 {
    width: 50%;
  }
  .large-margin-collapse > .small-7 {
    width: 58.3333333333%;
  }
  .large-margin-collapse > .small-8 {
    width: 66.6666666667%;
  }
  .large-margin-collapse > .small-9 {
    width: 75%;
  }
  .large-margin-collapse > .small-10 {
    width: 83.3333333333%;
  }
  .large-margin-collapse > .small-11 {
    width: 91.6666666667%;
  }
  .large-margin-collapse > .small-12 {
    width: 100%;
  }
  .large-margin-collapse > .medium-1 {
    width: 8.3333333333%;
  }
  .large-margin-collapse > .medium-2 {
    width: 16.6666666667%;
  }
  .large-margin-collapse > .medium-3 {
    width: 25%;
  }
  .large-margin-collapse > .medium-4 {
    width: 33.3333333333%;
  }
  .large-margin-collapse > .medium-5 {
    width: 41.6666666667%;
  }
  .large-margin-collapse > .medium-6 {
    width: 50%;
  }
  .large-margin-collapse > .medium-7 {
    width: 58.3333333333%;
  }
  .large-margin-collapse > .medium-8 {
    width: 66.6666666667%;
  }
  .large-margin-collapse > .medium-9 {
    width: 75%;
  }
  .large-margin-collapse > .medium-10 {
    width: 83.3333333333%;
  }
  .large-margin-collapse > .medium-11 {
    width: 91.6666666667%;
  }
  .large-margin-collapse > .medium-12 {
    width: 100%;
  }
  .large-margin-collapse > .large-1 {
    width: 8.3333333333%;
  }
  .large-margin-collapse > .large-2 {
    width: 16.6666666667%;
  }
  .large-margin-collapse > .large-3 {
    width: 25%;
  }
  .large-margin-collapse > .large-4 {
    width: 33.3333333333%;
  }
  .large-margin-collapse > .large-5 {
    width: 41.6666666667%;
  }
  .large-margin-collapse > .large-6 {
    width: 50%;
  }
  .large-margin-collapse > .large-7 {
    width: 58.3333333333%;
  }
  .large-margin-collapse > .large-8 {
    width: 66.6666666667%;
  }
  .large-margin-collapse > .large-9 {
    width: 75%;
  }
  .large-margin-collapse > .large-10 {
    width: 83.3333333333%;
  }
  .large-margin-collapse > .large-11 {
    width: 91.6666666667%;
  }
  .large-margin-collapse > .large-12 {
    width: 100%;
  }
  .large-padding-collapse {
    margin-right: 0;
    margin-left: 0;
  }
  .large-padding-collapse > .cell {
    padding-right: 0;
    padding-left: 0;
  }
}
@media print, screen and (min-width: 64em) {
}
@media print, screen and (min-width: 64em) {
}
@media print, screen and (min-width: 64em) {
}

@media print, screen and (min-width: 64em) {
}

.small-offset-0 {
  margin-left: 0%;
}

.grid-margin-x > .small-offset-0 {
  margin-left: calc(0% + 0.625rem);
}

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

.grid-margin-x > .small-offset-1 {
  margin-left: calc(8.3333333333% + 0.625rem);
}

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

.grid-margin-x > .small-offset-2 {
  margin-left: calc(16.6666666667% + 0.625rem);
}

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

.grid-margin-x > .small-offset-3 {
  margin-left: calc(25% + 0.625rem);
}

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

.grid-margin-x > .small-offset-4 {
  margin-left: calc(33.3333333333% + 0.625rem);
}

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

.grid-margin-x > .small-offset-5 {
  margin-left: calc(41.6666666667% + 0.625rem);
}

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

.grid-margin-x > .small-offset-6 {
  margin-left: calc(50% + 0.625rem);
}

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

.grid-margin-x > .small-offset-7 {
  margin-left: calc(58.3333333333% + 0.625rem);
}

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

.grid-margin-x > .small-offset-8 {
  margin-left: calc(66.6666666667% + 0.625rem);
}

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

.grid-margin-x > .small-offset-9 {
  margin-left: calc(75% + 0.625rem);
}

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

.grid-margin-x > .small-offset-10 {
  margin-left: calc(83.3333333333% + 0.625rem);
}

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

.grid-margin-x > .small-offset-11 {
  margin-left: calc(91.6666666667% + 0.625rem);
}

@media print, screen and (min-width: 40em) {
  .medium-offset-0 {
    margin-left: 0%;
  }

  .grid-margin-x > .medium-offset-0 {
    margin-left: calc(0% + 0.9375rem);
  }

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

  .grid-margin-x > .medium-offset-1 {
    margin-left: calc(8.3333333333% + 0.9375rem);
  }

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

  .grid-margin-x > .medium-offset-2 {
    margin-left: calc(16.6666666667% + 0.9375rem);
  }

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

  .grid-margin-x > .medium-offset-3 {
    margin-left: calc(25% + 0.9375rem);
  }

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

  .grid-margin-x > .medium-offset-4 {
    margin-left: calc(33.3333333333% + 0.9375rem);
  }

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

  .grid-margin-x > .medium-offset-5 {
    margin-left: calc(41.6666666667% + 0.9375rem);
  }

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

  .grid-margin-x > .medium-offset-6 {
    margin-left: calc(50% + 0.9375rem);
  }

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

  .grid-margin-x > .medium-offset-7 {
    margin-left: calc(58.3333333333% + 0.9375rem);
  }

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

  .grid-margin-x > .medium-offset-8 {
    margin-left: calc(66.6666666667% + 0.9375rem);
  }

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

  .grid-margin-x > .medium-offset-9 {
    margin-left: calc(75% + 0.9375rem);
  }

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

  .grid-margin-x > .medium-offset-10 {
    margin-left: calc(83.3333333333% + 0.9375rem);
  }

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

  .grid-margin-x > .medium-offset-11 {
    margin-left: calc(91.6666666667% + 0.9375rem);
  }
}
@media print, screen and (min-width: 64em) {
  .large-offset-0 {
    margin-left: 0%;
  }

  .grid-margin-x > .large-offset-0 {
    margin-left: calc(0% + 0.9375rem);
  }

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

  .grid-margin-x > .large-offset-1 {
    margin-left: calc(8.3333333333% + 0.9375rem);
  }

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

  .grid-margin-x > .large-offset-2 {
    margin-left: calc(16.6666666667% + 0.9375rem);
  }

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

  .grid-margin-x > .large-offset-3 {
    margin-left: calc(25% + 0.9375rem);
  }

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

  .grid-margin-x > .large-offset-4 {
    margin-left: calc(33.3333333333% + 0.9375rem);
  }

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

  .grid-margin-x > .large-offset-5 {
    margin-left: calc(41.6666666667% + 0.9375rem);
  }

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

  .grid-margin-x > .large-offset-6 {
    margin-left: calc(50% + 0.9375rem);
  }

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

  .grid-margin-x > .large-offset-7 {
    margin-left: calc(58.3333333333% + 0.9375rem);
  }

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

  .grid-margin-x > .large-offset-8 {
    margin-left: calc(66.6666666667% + 0.9375rem);
  }

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

  .grid-margin-x > .large-offset-9 {
    margin-left: calc(75% + 0.9375rem);
  }

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

  .grid-margin-x > .large-offset-10 {
    margin-left: calc(83.3333333333% + 0.9375rem);
  }

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

  .grid-margin-x > .large-offset-11 {
    margin-left: calc(91.6666666667% + 0.9375rem);
  }
}
.grid-y {
  display: flex;
  flex-flow: column nowrap;
}
.grid-y > .cell {
  height: auto;
  max-height: none;
}
.grid-y > .auto,.grid-y > .shrink {
  height: auto;
}
.grid-y > .small-shrink, .grid-y > .small-full, .grid-y > .small-1, .grid-y > .small-2, .grid-y > .small-3, .grid-y > .small-4, .grid-y > .small-5, .grid-y > .small-6, .grid-y > .small-7, .grid-y > .small-8, .grid-y > .small-9, .grid-y > .small-10, .grid-y > .small-11, .grid-y > .small-12 {
  flex-basis: auto;
}
@media print, screen and (min-width: 40em) {
  .grid-y > .medium-shrink, .grid-y > .medium-full, .grid-y > .medium-1, .grid-y > .medium-2, .grid-y > .medium-3, .grid-y > .medium-4, .grid-y > .medium-5, .grid-y > .medium-6, .grid-y > .medium-7, .grid-y > .medium-8, .grid-y > .medium-9, .grid-y > .medium-10, .grid-y > .medium-11, .grid-y > .medium-12 {
    flex-basis: auto;
  }
}
@media print, screen and (min-width: 64em) {
  .grid-y > .large-shrink, .grid-y > .large-full, .grid-y > .large-1, .grid-y > .large-2, .grid-y > .large-3, .grid-y > .large-4, .grid-y > .large-5, .grid-y > .large-6, .grid-y > .large-7, .grid-y > .large-8, .grid-y > .large-9, .grid-y > .large-10, .grid-y > .large-11, .grid-y > .large-12 {
    flex-basis: auto;
  }
}
.grid-y > .small-12, .grid-y > .small-11, .grid-y > .small-10, .grid-y > .small-9, .grid-y > .small-8, .grid-y > .small-7, .grid-y > .small-6, .grid-y > .small-5, .grid-y > .small-4, .grid-y > .small-3, .grid-y > .small-2, .grid-y > .small-1 {
  flex: 0 0 auto;
}
.grid-y > .small-1 {
  height: 8.3333333333%;
}
.grid-y > .small-2 {
  height: 16.6666666667%;
}
.grid-y > .small-3 {
  height: 25%;
}
.grid-y > .small-4 {
  height: 33.3333333333%;
}
.grid-y > .small-5 {
  height: 41.6666666667%;
}
.grid-y > .small-6 {
  height: 50%;
}
.grid-y > .small-7 {
  height: 58.3333333333%;
}
.grid-y > .small-8 {
  height: 66.6666666667%;
}
.grid-y > .small-9 {
  height: 75%;
}
.grid-y > .small-10 {
  height: 83.3333333333%;
}
.grid-y > .small-11 {
  height: 91.6666666667%;
}
.grid-y > .small-12 {
  height: 100%;
}
@media print, screen and (min-width: 40em) {
  .grid-y > .medium-auto {
    flex: 1 1 0px;
    height: auto;
  }
  .grid-y > .medium-12, .grid-y > .medium-11, .grid-y > .medium-10, .grid-y > .medium-9, .grid-y > .medium-8, .grid-y > .medium-7, .grid-y > .medium-6, .grid-y > .medium-5, .grid-y > .medium-4, .grid-y > .medium-3, .grid-y > .medium-2, .grid-y > .medium-1, .grid-y > .medium-shrink {
    flex: 0 0 auto;
  }
  .grid-y > .medium-shrink {
    height: auto;
  }
  .grid-y > .medium-1 {
    height: 8.3333333333%;
  }
  .grid-y > .medium-2 {
    height: 16.6666666667%;
  }
  .grid-y > .medium-3 {
    height: 25%;
  }
  .grid-y > .medium-4 {
    height: 33.3333333333%;
  }
  .grid-y > .medium-5 {
    height: 41.6666666667%;
  }
  .grid-y > .medium-6 {
    height: 50%;
  }
  .grid-y > .medium-7 {
    height: 58.3333333333%;
  }
  .grid-y > .medium-8 {
    height: 66.6666666667%;
  }
  .grid-y > .medium-9 {
    height: 75%;
  }
  .grid-y > .medium-10 {
    height: 83.3333333333%;
  }
  .grid-y > .medium-11 {
    height: 91.6666666667%;
  }
  .grid-y > .medium-12 {
    height: 100%;
  }
}
@media print, screen and (min-width: 64em) {
  .grid-y > .large-auto {
    flex: 1 1 0px;
    height: auto;
  }
  .grid-y > .large-12, .grid-y > .large-11, .grid-y > .large-10, .grid-y > .large-9, .grid-y > .large-8, .grid-y > .large-7, .grid-y > .large-6, .grid-y > .large-5, .grid-y > .large-4, .grid-y > .large-3, .grid-y > .large-2, .grid-y > .large-1, .grid-y > .large-shrink {
    flex: 0 0 auto;
  }
  .grid-y > .large-shrink {
    height: auto;
  }
  .grid-y > .large-1 {
    height: 8.3333333333%;
  }
  .grid-y > .large-2 {
    height: 16.6666666667%;
  }
  .grid-y > .large-3 {
    height: 25%;
  }
  .grid-y > .large-4 {
    height: 33.3333333333%;
  }
  .grid-y > .large-5 {
    height: 41.6666666667%;
  }
  .grid-y > .large-6 {
    height: 50%;
  }
  .grid-y > .large-7 {
    height: 58.3333333333%;
  }
  .grid-y > .large-8 {
    height: 66.6666666667%;
  }
  .grid-y > .large-9 {
    height: 75%;
  }
  .grid-y > .large-10 {
    height: 83.3333333333%;
  }
  .grid-y > .large-11 {
    height: 91.6666666667%;
  }
  .grid-y > .large-12 {
    height: 100%;
  }
}

.grid-padding-y .grid-padding-y {
  margin-top: -10px;
  margin-top: -0.625rem;
  margin-bottom: -10px;
  margin-bottom: -0.625rem;
}
@media print, screen and (min-width: 40em) {
  .grid-padding-y .grid-padding-y {
    margin-top: -0.9375rem;
    margin-bottom: -0.9375rem;
  }
}
.grid-padding-y > .cell {
  padding-top: 10px;
  padding-top: 0.625rem;
  padding-bottom: 10px;
  padding-bottom: 0.625rem;
}
@media print, screen and (min-width: 40em) {
  .grid-padding-y > .cell {
    padding-top: 0.9375rem;
    padding-bottom: 0.9375rem;
  }
}

.grid-margin-y {
  margin-top: -10px;
  margin-top: -0.625rem;
  margin-bottom: -10px;
  margin-bottom: -0.625rem;
}
@media print, screen and (min-width: 40em) {
  .grid-margin-y {
    margin-top: -0.9375rem;
    margin-bottom: -0.9375rem;
  }
}
.grid-margin-y > .cell {
  height: calc(100% - 1.25rem);
  margin-top: 10px;
  margin-top: 0.625rem;
  margin-bottom: 10px;
  margin-bottom: 0.625rem;
}
@media print, screen and (min-width: 40em) {
  .grid-margin-y > .cell {
    height: calc(100% - 1.875rem);
    margin-top: 0.9375rem;
    margin-bottom: 0.9375rem;
  }
}
.grid-margin-y > .auto,.grid-margin-y > .shrink {
  height: auto;
}
.grid-margin-y > .small-1 {
  height: calc(8.3333333333% - 1.25rem);
}
.grid-margin-y > .small-2 {
  height: calc(16.6666666667% - 1.25rem);
}
.grid-margin-y > .small-3 {
  height: calc(25% - 1.25rem);
}
.grid-margin-y > .small-4 {
  height: calc(33.3333333333% - 1.25rem);
}
.grid-margin-y > .small-5 {
  height: calc(41.6666666667% - 1.25rem);
}
.grid-margin-y > .small-6 {
  height: calc(50% - 1.25rem);
}
.grid-margin-y > .small-7 {
  height: calc(58.3333333333% - 1.25rem);
}
.grid-margin-y > .small-8 {
  height: calc(66.6666666667% - 1.25rem);
}
.grid-margin-y > .small-9 {
  height: calc(75% - 1.25rem);
}
.grid-margin-y > .small-10 {
  height: calc(83.3333333333% - 1.25rem);
}
.grid-margin-y > .small-11 {
  height: calc(91.6666666667% - 1.25rem);
}
.grid-margin-y > .small-12 {
  height: calc(100% - 1.25rem);
}
@media print, screen and (min-width: 40em) {
  .grid-margin-y > .auto,.grid-margin-y > .shrink {
    height: auto;
  }
  .grid-margin-y > .small-1 {
    height: calc(8.3333333333% - 1.875rem);
  }
  .grid-margin-y > .small-2 {
    height: calc(16.6666666667% - 1.875rem);
  }
  .grid-margin-y > .small-3 {
    height: calc(25% - 1.875rem);
  }
  .grid-margin-y > .small-4 {
    height: calc(33.3333333333% - 1.875rem);
  }
  .grid-margin-y > .small-5 {
    height: calc(41.6666666667% - 1.875rem);
  }
  .grid-margin-y > .small-6 {
    height: calc(50% - 1.875rem);
  }
  .grid-margin-y > .small-7 {
    height: calc(58.3333333333% - 1.875rem);
  }
  .grid-margin-y > .small-8 {
    height: calc(66.6666666667% - 1.875rem);
  }
  .grid-margin-y > .small-9 {
    height: calc(75% - 1.875rem);
  }
  .grid-margin-y > .small-10 {
    height: calc(83.3333333333% - 1.875rem);
  }
  .grid-margin-y > .small-11 {
    height: calc(91.6666666667% - 1.875rem);
  }
  .grid-margin-y > .small-12 {
    height: calc(100% - 1.875rem);
  }
  .grid-margin-y > .medium-auto,.grid-margin-y > .medium-shrink {
    height: auto;
  }
  .grid-margin-y > .medium-1 {
    height: calc(8.3333333333% - 1.875rem);
  }
  .grid-margin-y > .medium-2 {
    height: calc(16.6666666667% - 1.875rem);
  }
  .grid-margin-y > .medium-3 {
    height: calc(25% - 1.875rem);
  }
  .grid-margin-y > .medium-4 {
    height: calc(33.3333333333% - 1.875rem);
  }
  .grid-margin-y > .medium-5 {
    height: calc(41.6666666667% - 1.875rem);
  }
  .grid-margin-y > .medium-6 {
    height: calc(50% - 1.875rem);
  }
  .grid-margin-y > .medium-7 {
    height: calc(58.3333333333% - 1.875rem);
  }
  .grid-margin-y > .medium-8 {
    height: calc(66.6666666667% - 1.875rem);
  }
  .grid-margin-y > .medium-9 {
    height: calc(75% - 1.875rem);
  }
  .grid-margin-y > .medium-10 {
    height: calc(83.3333333333% - 1.875rem);
  }
  .grid-margin-y > .medium-11 {
    height: calc(91.6666666667% - 1.875rem);
  }
  .grid-margin-y > .medium-12 {
    height: calc(100% - 1.875rem);
  }
}
@media print, screen and (min-width: 64em) {
  .grid-margin-y > .large-auto,.grid-margin-y > .large-shrink {
    height: auto;
  }
  .grid-margin-y > .large-1 {
    height: calc(8.3333333333% - 1.875rem);
  }
  .grid-margin-y > .large-2 {
    height: calc(16.6666666667% - 1.875rem);
  }
  .grid-margin-y > .large-3 {
    height: calc(25% - 1.875rem);
  }
  .grid-margin-y > .large-4 {
    height: calc(33.3333333333% - 1.875rem);
  }
  .grid-margin-y > .large-5 {
    height: calc(41.6666666667% - 1.875rem);
  }
  .grid-margin-y > .large-6 {
    height: calc(50% - 1.875rem);
  }
  .grid-margin-y > .large-7 {
    height: calc(58.3333333333% - 1.875rem);
  }
  .grid-margin-y > .large-8 {
    height: calc(66.6666666667% - 1.875rem);
  }
  .grid-margin-y > .large-9 {
    height: calc(75% - 1.875rem);
  }
  .grid-margin-y > .large-10 {
    height: calc(83.3333333333% - 1.875rem);
  }
  .grid-margin-y > .large-11 {
    height: calc(91.6666666667% - 1.875rem);
  }
  .grid-margin-y > .large-12 {
    height: calc(100% - 1.875rem);
  }
}

.grid-frame {
  position: relative;
  flex-wrap: nowrap;
  align-items: stretch;
  width: 100vw;
  overflow: hidden;
}

.cell .grid-frame {
  width: 100%;
}

.cell-block {
  max-width: 100%;
  overflow-x: auto;
}

.cell-block,.cell-block-y {
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: -ms-autohiding-scrollbar;
}

.cell-block-y {
  min-height: 100%;
  max-height: 100%;
  overflow-y: auto;
}

.cell-block-container {
  display: flex;
  flex-direction: column;
  max-height: 100%;
}
.cell-block-container > .grid-x {
  flex-wrap: nowrap;
  max-height: 100%;
}

@media print, screen and (min-width: 40em) {
  .medium-grid-frame {
    position: relative;
    flex-wrap: nowrap;
    align-items: stretch;
    width: 100vw;
    overflow: hidden;
  }

  .cell .medium-grid-frame {
    width: 100%;
  }

  .medium-cell-block {
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    max-width: 100%;
    overflow-x: auto;
  }

  .medium-cell-block-container {
    display: flex;
    flex-direction: column;
    max-height: 100%;
  }
  .medium-cell-block-container > .grid-x {
    flex-wrap: nowrap;
    max-height: 100%;
  }

  .medium-cell-block-y {
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    min-height: 100%;
    max-height: 100%;
    overflow-y: auto;
  }
}
@media print, screen and (min-width: 64em) {
  .large-grid-frame {
    position: relative;
    flex-wrap: nowrap;
    align-items: stretch;
    width: 100vw;
    overflow: hidden;
  }

  .cell .large-grid-frame {
    width: 100%;
  }

  .large-cell-block {
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    max-width: 100%;
    overflow-x: auto;
  }

  .large-cell-block-container {
    display: flex;
    flex-direction: column;
    max-height: 100%;
  }
  .large-cell-block-container > .grid-x {
    flex-wrap: nowrap;
    max-height: 100%;
  }

  .large-cell-block-y {
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    min-height: 100%;
    max-height: 100%;
    overflow-y: auto;
  }
}
.grid-y.grid-frame {
  position: relative;
  flex-wrap: nowrap;
  align-items: stretch;
  width: auto;
  height: 100vh;
  overflow: hidden;
}
@media print, screen and (min-width: 40em) {
  .grid-y.medium-grid-frame {
    position: relative;
    flex-wrap: nowrap;
    align-items: stretch;
    width: auto;
    height: 100vh;
    overflow: hidden;
  }
}
@media print, screen and (min-width: 64em) {
  .grid-y.large-grid-frame {
    position: relative;
    flex-wrap: nowrap;
    align-items: stretch;
    width: auto;
    height: 100vh;
    overflow: hidden;
  }
}

.cell .grid-y.grid-frame {
  height: 100%;
}
@media print, screen and (min-width: 40em) {
  .cell .grid-y.medium-grid-frame {
    height: 100%;
  }
}
@media print, screen and (min-width: 64em) {
  .cell .grid-y.large-grid-frame {
    height: 100%;
  }
}

.grid-margin-y {
  margin-top: -10px;
  margin-top: -0.625rem;
  margin-bottom: -10px;
  margin-bottom: -0.625rem;
}
@media print, screen and (min-width: 40em) {
  .grid-margin-y {
    margin-top: -0.9375rem;
    margin-bottom: -0.9375rem;
  }
}
.grid-margin-y > .cell {
  height: calc(100% - 1.25rem);
  margin-top: 10px;
  margin-top: 0.625rem;
  margin-bottom: 10px;
  margin-bottom: 0.625rem;
}
@media print, screen and (min-width: 40em) {
  .grid-margin-y > .cell {
    height: calc(100% - 1.875rem);
    margin-top: 0.9375rem;
    margin-bottom: 0.9375rem;
  }
}
.grid-margin-y > .auto,.grid-margin-y > .shrink {
  height: auto;
}
.grid-margin-y > .small-1 {
  height: calc(8.3333333333% - 1.25rem);
}
.grid-margin-y > .small-2 {
  height: calc(16.6666666667% - 1.25rem);
}
.grid-margin-y > .small-3 {
  height: calc(25% - 1.25rem);
}
.grid-margin-y > .small-4 {
  height: calc(33.3333333333% - 1.25rem);
}
.grid-margin-y > .small-5 {
  height: calc(41.6666666667% - 1.25rem);
}
.grid-margin-y > .small-6 {
  height: calc(50% - 1.25rem);
}
.grid-margin-y > .small-7 {
  height: calc(58.3333333333% - 1.25rem);
}
.grid-margin-y > .small-8 {
  height: calc(66.6666666667% - 1.25rem);
}
.grid-margin-y > .small-9 {
  height: calc(75% - 1.25rem);
}
.grid-margin-y > .small-10 {
  height: calc(83.3333333333% - 1.25rem);
}
.grid-margin-y > .small-11 {
  height: calc(91.6666666667% - 1.25rem);
}
.grid-margin-y > .small-12 {
  height: calc(100% - 1.25rem);
}
@media print, screen and (min-width: 40em) {
  .grid-margin-y > .auto,.grid-margin-y > .shrink {
    height: auto;
  }
  .grid-margin-y > .small-1 {
    height: calc(8.3333333333% - 1.875rem);
  }
  .grid-margin-y > .small-2 {
    height: calc(16.6666666667% - 1.875rem);
  }
  .grid-margin-y > .small-3 {
    height: calc(25% - 1.875rem);
  }
  .grid-margin-y > .small-4 {
    height: calc(33.3333333333% - 1.875rem);
  }
  .grid-margin-y > .small-5 {
    height: calc(41.6666666667% - 1.875rem);
  }
  .grid-margin-y > .small-6 {
    height: calc(50% - 1.875rem);
  }
  .grid-margin-y > .small-7 {
    height: calc(58.3333333333% - 1.875rem);
  }
  .grid-margin-y > .small-8 {
    height: calc(66.6666666667% - 1.875rem);
  }
  .grid-margin-y > .small-9 {
    height: calc(75% - 1.875rem);
  }
  .grid-margin-y > .small-10 {
    height: calc(83.3333333333% - 1.875rem);
  }
  .grid-margin-y > .small-11 {
    height: calc(91.6666666667% - 1.875rem);
  }
  .grid-margin-y > .small-12 {
    height: calc(100% - 1.875rem);
  }
  .grid-margin-y > .medium-auto,.grid-margin-y > .medium-shrink {
    height: auto;
  }
  .grid-margin-y > .medium-1 {
    height: calc(8.3333333333% - 1.875rem);
  }
  .grid-margin-y > .medium-2 {
    height: calc(16.6666666667% - 1.875rem);
  }
  .grid-margin-y > .medium-3 {
    height: calc(25% - 1.875rem);
  }
  .grid-margin-y > .medium-4 {
    height: calc(33.3333333333% - 1.875rem);
  }
  .grid-margin-y > .medium-5 {
    height: calc(41.6666666667% - 1.875rem);
  }
  .grid-margin-y > .medium-6 {
    height: calc(50% - 1.875rem);
  }
  .grid-margin-y > .medium-7 {
    height: calc(58.3333333333% - 1.875rem);
  }
  .grid-margin-y > .medium-8 {
    height: calc(66.6666666667% - 1.875rem);
  }
  .grid-margin-y > .medium-9 {
    height: calc(75% - 1.875rem);
  }
  .grid-margin-y > .medium-10 {
    height: calc(83.3333333333% - 1.875rem);
  }
  .grid-margin-y > .medium-11 {
    height: calc(91.6666666667% - 1.875rem);
  }
  .grid-margin-y > .medium-12 {
    height: calc(100% - 1.875rem);
  }
}
@media print, screen and (min-width: 64em) {
  .grid-margin-y > .large-auto,.grid-margin-y > .large-shrink {
    height: auto;
  }
  .grid-margin-y > .large-1 {
    height: calc(8.3333333333% - 1.875rem);
  }
  .grid-margin-y > .large-2 {
    height: calc(16.6666666667% - 1.875rem);
  }
  .grid-margin-y > .large-3 {
    height: calc(25% - 1.875rem);
  }
  .grid-margin-y > .large-4 {
    height: calc(33.3333333333% - 1.875rem);
  }
  .grid-margin-y > .large-5 {
    height: calc(41.6666666667% - 1.875rem);
  }
  .grid-margin-y > .large-6 {
    height: calc(50% - 1.875rem);
  }
  .grid-margin-y > .large-7 {
    height: calc(58.3333333333% - 1.875rem);
  }
  .grid-margin-y > .large-8 {
    height: calc(66.6666666667% - 1.875rem);
  }
  .grid-margin-y > .large-9 {
    height: calc(75% - 1.875rem);
  }
  .grid-margin-y > .large-10 {
    height: calc(83.3333333333% - 1.875rem);
  }
  .grid-margin-y > .large-11 {
    height: calc(91.6666666667% - 1.875rem);
  }
  .grid-margin-y > .large-12 {
    height: calc(100% - 1.875rem);
  }
}

.grid-frame.grid-margin-y {
  height: calc(100vh + 1.25rem);
}
@media print, screen and (min-width: 40em) {
  .grid-frame.grid-margin-y {
    height: calc(100vh + 1.875rem);
  }
}
@media print, screen and (min-width: 64em) {
  .grid-frame.grid-margin-y {
    height: calc(100vh + 1.875rem);
  }
}

@media print, screen and (min-width: 40em) {
  .grid-margin-y.medium-grid-frame {
    height: calc(100vh + 1.875rem);
  }
}
@media print, screen and (min-width: 64em) {
  .grid-margin-y.large-grid-frame {
    height: calc(100vh + 1.875rem);
  }
}
.button {
  -webkit-appearance: none;
  display: inline-block;
  margin: 0 0 16px 0;
  margin: 0 0 1rem 0;
  padding: 0.85em 1em;
  border: 1px solid transparent;
  border-radius: 0px;
  font-size: 16px;
  font-size: 1rem;
  line-height: 1;
  font-family: "Maven Pro", "Open Sans", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  transition: background-color 0.25s ease-out, color 0.25s ease-out;
}
[data-whatinput=mouse] .button {
  outline: 0;
}
.button.tiny {
  font-size: 11.237px;
  font-size: 0.7023319616rem;
}
.button.small {
  font-size: 14.222px;
  font-size: 0.8888888889rem;
}
.button.large {
  font-size: 20.25px;
  font-size: 1.265625rem;
}
.button.xlarge {
  font-size: 22.781px;
  font-size: 1.423828125rem;
}
.button.expanded {
  display: block;
  width: 100%;
  margin-right: 0;
  margin-left: 0;
}
.button, .button.disabled, .button[disabled], .button.disabled:hover, .button[disabled]:hover, .button.disabled:focus, .button[disabled]:focus {
  background-color: #198dae;
  color: white;
}
.button:hover, .button:focus {
  background-color: #157894;
  color: white;
}
.button.primary, .button.primary.disabled, .button.primary[disabled], .button.primary.disabled:hover, .button.primary[disabled]:hover, .button.primary.disabled:focus, .button.primary[disabled]:focus {
  background-color: #198dae;
  color: white;
}
.button.primary:hover, .button.primary:focus {
  background-color: #14718b;
  color: white;
}
.button.secondary, .button.secondary.disabled, .button.secondary[disabled], .button.secondary.disabled:hover, .button.secondary[disabled]:hover, .button.secondary.disabled:focus, .button.secondary[disabled]:focus {
  background-color: #676a72;
  color: white;
}
.button.secondary:hover, .button.secondary:focus {
  background-color: #52555b;
  color: white;
}
.button.success, .button.success.disabled, .button.success[disabled], .button.success.disabled:hover, .button.success[disabled]:hover, .button.success.disabled:focus, .button.success[disabled]:focus {
  background-color: #078a2e;
  color: white;
}
.button.success:hover, .button.success:focus {
  background-color: #066e25;
  color: white;
}
.button.shade, .button.shade.disabled, .button.shade[disabled], .button.shade.disabled:hover, .button.shade[disabled]:hover, .button.shade.disabled:focus, .button.shade[disabled]:focus {
  background-color: #878585;
  color: #131212;
}
.button.shade:hover, .button.shade:focus {
  background-color: #6c6a6a;
  color: #131212;
}
.button.warning, .button.warning.disabled, .button.warning[disabled], .button.warning.disabled:hover, .button.warning[disabled]:hover, .button.warning.disabled:focus, .button.warning[disabled]:focus {
  background-color: #da8210;
  color: #131212;
}
.button.warning:hover, .button.warning:focus {
  background-color: #ae680d;
  color: #131212;
}
.button.alert, .button.alert.disabled, .button.alert[disabled], .button.alert.disabled:hover, .button.alert[disabled]:hover, .button.alert.disabled:focus, .button.alert[disabled]:focus {
  background-color: #dd1a1a;
  color: white;
}
.button.alert:hover, .button.alert:focus {
  background-color: #b11515;
  color: white;
}
.button.navigation, .button.navigation.disabled, .button.navigation[disabled], .button.navigation.disabled:hover, .button.navigation[disabled]:hover, .button.navigation.disabled:focus, .button.navigation[disabled]:focus {
  background-color: #2b58c0;
  color: white;
}
.button.navigation:hover, .button.navigation:focus {
  background-color: #22469a;
  color: white;
}
.button.accent, .button.accent.disabled, .button.accent[disabled], .button.accent.disabled:hover, .button.accent[disabled]:hover, .button.accent.disabled:focus, .button.accent[disabled]:focus {
  background-color: #16a385;
  color: #131212;
}
.button.accent:hover, .button.accent:focus {
  background-color: #12826a;
  color: #131212;
}
.button.info, .button.info.disabled, .button.info[disabled], .button.info.disabled:hover, .button.info[disabled]:hover, .button.info.disabled:focus, .button.info[disabled]:focus {
  background-color: #a3988c;
  color: #131212;
}
.button.info:hover, .button.info:focus {
  background-color: #877a6c;
  color: #131212;
}
.button.highlight, .button.highlight.disabled, .button.highlight[disabled], .button.highlight.disabled:hover, .button.highlight[disabled]:hover, .button.highlight.disabled:focus, .button.highlight[disabled]:focus {
  background-color: #7742bd;
  color: white;
}
.button.highlight:hover, .button.highlight:focus {
  background-color: #5f3597;
  color: white;
}
.button.acc, .button.acc.disabled, .button.acc[disabled], .button.acc.disabled:hover, .button.acc[disabled]:hover, .button.acc.disabled:focus, .button.acc[disabled]:focus {
  background-color: #004176;
  color: white;
}
.button.acc:hover, .button.acc:focus {
  background-color: #00345e;
  color: white;
}
.button.hollow, .button.hollow:hover, .button.hollow:focus, .button.hollow.disabled, .button.hollow.disabled:hover, .button.hollow.disabled:focus, .button.hollow[disabled], .button.hollow[disabled]:hover, .button.hollow[disabled]:focus {
  background-color: transparent;
}
.button.hollow, .button.hollow.disabled, .button.hollow[disabled], .button.hollow.disabled:hover, .button.hollow[disabled]:hover, .button.hollow.disabled:focus, .button.hollow[disabled]:focus {
  border: 1px solid #198dae;
  color: #198dae;
}
.button.hollow:hover, .button.hollow:focus {
  border-color: #0d4757;
  color: #0d4757;
}
.button.hollow.primary, .button.hollow.primary.disabled, .button.hollow.primary[disabled], .button.hollow.primary.disabled:hover, .button.hollow.primary[disabled]:hover, .button.hollow.primary.disabled:focus, .button.hollow.primary[disabled]:focus {
  border: 1px solid #198dae;
  color: #198dae;
}
.button.hollow.primary:hover, .button.hollow.primary:focus {
  border-color: #0d4757;
  color: #0d4757;
}
.button.hollow.secondary, .button.hollow.secondary.disabled, .button.hollow.secondary[disabled], .button.hollow.secondary.disabled:hover, .button.hollow.secondary[disabled]:hover, .button.hollow.secondary.disabled:focus, .button.hollow.secondary[disabled]:focus {
  border: 1px solid #676a72;
  color: #676a72;
}
.button.hollow.secondary:hover, .button.hollow.secondary:focus {
  border-color: #343539;
  color: #343539;
}
.button.hollow.success, .button.hollow.success.disabled, .button.hollow.success[disabled], .button.hollow.success.disabled:hover, .button.hollow.success[disabled]:hover, .button.hollow.success.disabled:focus, .button.hollow.success[disabled]:focus {
  border: 1px solid #078a2e;
  color: #078a2e;
}
.button.hollow.success:hover, .button.hollow.success:focus {
  border-color: #044517;
  color: #044517;
}
.button.hollow.shade, .button.hollow.shade.disabled, .button.hollow.shade[disabled], .button.hollow.shade.disabled:hover, .button.hollow.shade[disabled]:hover, .button.hollow.shade.disabled:focus, .button.hollow.shade[disabled]:focus {
  border: 1px solid #878585;
  color: #878585;
}
.button.hollow.shade:hover, .button.hollow.shade:focus {
  border-color: #444242;
  color: #444242;
}
.button.hollow.warning, .button.hollow.warning.disabled, .button.hollow.warning[disabled], .button.hollow.warning.disabled:hover, .button.hollow.warning[disabled]:hover, .button.hollow.warning.disabled:focus, .button.hollow.warning[disabled]:focus {
  border: 1px solid #da8210;
  color: #da8210;
}
.button.hollow.warning:hover, .button.hollow.warning:focus {
  border-color: #6d4108;
  color: #6d4108;
}
.button.hollow.alert, .button.hollow.alert.disabled, .button.hollow.alert[disabled], .button.hollow.alert.disabled:hover, .button.hollow.alert[disabled]:hover, .button.hollow.alert.disabled:focus, .button.hollow.alert[disabled]:focus {
  border: 1px solid #dd1a1a;
  color: #dd1a1a;
}
.button.hollow.alert:hover, .button.hollow.alert:focus {
  border-color: #6f0d0d;
  color: #6f0d0d;
}
.button.hollow.navigation, .button.hollow.navigation.disabled, .button.hollow.navigation[disabled], .button.hollow.navigation.disabled:hover, .button.hollow.navigation[disabled]:hover, .button.hollow.navigation.disabled:focus, .button.hollow.navigation[disabled]:focus {
  border: 1px solid #2b58c0;
  color: #2b58c0;
}
.button.hollow.navigation:hover, .button.hollow.navigation:focus {
  border-color: #162c60;
  color: #162c60;
}
.button.hollow.accent, .button.hollow.accent.disabled, .button.hollow.accent[disabled], .button.hollow.accent.disabled:hover, .button.hollow.accent[disabled]:hover, .button.hollow.accent.disabled:focus, .button.hollow.accent[disabled]:focus {
  border: 1px solid #16a385;
  color: #16a385;
}
.button.hollow.accent:hover, .button.hollow.accent:focus {
  border-color: #0b5243;
  color: #0b5243;
}
.button.hollow.info, .button.hollow.info.disabled, .button.hollow.info[disabled], .button.hollow.info.disabled:hover, .button.hollow.info[disabled]:hover, .button.hollow.info.disabled:focus, .button.hollow.info[disabled]:focus {
  border: 1px solid #a3988c;
  color: #a3988c;
}
.button.hollow.info:hover, .button.hollow.info:focus {
  border-color: #544c43;
  color: #544c43;
}
.button.hollow.highlight, .button.hollow.highlight.disabled, .button.hollow.highlight[disabled], .button.hollow.highlight.disabled:hover, .button.hollow.highlight[disabled]:hover, .button.hollow.highlight.disabled:focus, .button.hollow.highlight[disabled]:focus {
  border: 1px solid #7742bd;
  color: #7742bd;
}
.button.hollow.highlight:hover, .button.hollow.highlight:focus {
  border-color: #3c215f;
  color: #3c215f;
}
.button.hollow.acc, .button.hollow.acc.disabled, .button.hollow.acc[disabled], .button.hollow.acc.disabled:hover, .button.hollow.acc[disabled]:hover, .button.hollow.acc.disabled:focus, .button.hollow.acc[disabled]:focus {
  border: 1px solid #004176;
  color: #004176;
}
.button.hollow.acc:hover, .button.hollow.acc:focus {
  border-color: #00213b;
  color: #00213b;
}
.button.clear, .button.clear:hover, .button.clear:focus, .button.clear.disabled, .button.clear.disabled:hover, .button.clear.disabled:focus, .button.clear[disabled], .button.clear[disabled]:hover, .button.clear[disabled]:focus {
  border-color: transparent;
  background-color: transparent;
}
.button.clear, .button.clear.disabled, .button.clear[disabled], .button.clear.disabled:hover, .button.clear[disabled]:hover, .button.clear.disabled:focus, .button.clear[disabled]:focus {
  color: #198dae;
}
.button.clear:hover, .button.clear:focus {
  color: #0d4757;
}
.button.clear.primary, .button.clear.primary.disabled, .button.clear.primary[disabled], .button.clear.primary.disabled:hover, .button.clear.primary[disabled]:hover, .button.clear.primary.disabled:focus, .button.clear.primary[disabled]:focus {
  color: #198dae;
}
.button.clear.primary:hover, .button.clear.primary:focus {
  color: #0d4757;
}
.button.clear.secondary, .button.clear.secondary.disabled, .button.clear.secondary[disabled], .button.clear.secondary.disabled:hover, .button.clear.secondary[disabled]:hover, .button.clear.secondary.disabled:focus, .button.clear.secondary[disabled]:focus {
  color: #676a72;
}
.button.clear.secondary:hover, .button.clear.secondary:focus {
  color: #343539;
}
.button.clear.success, .button.clear.success.disabled, .button.clear.success[disabled], .button.clear.success.disabled:hover, .button.clear.success[disabled]:hover, .button.clear.success.disabled:focus, .button.clear.success[disabled]:focus {
  color: #078a2e;
}
.button.clear.success:hover, .button.clear.success:focus {
  color: #044517;
}
.button.clear.shade, .button.clear.shade.disabled, .button.clear.shade[disabled], .button.clear.shade.disabled:hover, .button.clear.shade[disabled]:hover, .button.clear.shade.disabled:focus, .button.clear.shade[disabled]:focus {
  color: #878585;
}
.button.clear.shade:hover, .button.clear.shade:focus {
  color: #444242;
}
.button.clear.warning, .button.clear.warning.disabled, .button.clear.warning[disabled], .button.clear.warning.disabled:hover, .button.clear.warning[disabled]:hover, .button.clear.warning.disabled:focus, .button.clear.warning[disabled]:focus {
  color: #da8210;
}
.button.clear.warning:hover, .button.clear.warning:focus {
  color: #6d4108;
}
.button.clear.alert, .button.clear.alert.disabled, .button.clear.alert[disabled], .button.clear.alert.disabled:hover, .button.clear.alert[disabled]:hover, .button.clear.alert.disabled:focus, .button.clear.alert[disabled]:focus {
  color: #dd1a1a;
}
.button.clear.alert:hover, .button.clear.alert:focus {
  color: #6f0d0d;
}
.button.clear.navigation, .button.clear.navigation.disabled, .button.clear.navigation[disabled], .button.clear.navigation.disabled:hover, .button.clear.navigation[disabled]:hover, .button.clear.navigation.disabled:focus, .button.clear.navigation[disabled]:focus {
  color: #2b58c0;
}
.button.clear.navigation:hover, .button.clear.navigation:focus {
  color: #162c60;
}
.button.clear.accent, .button.clear.accent.disabled, .button.clear.accent[disabled], .button.clear.accent.disabled:hover, .button.clear.accent[disabled]:hover, .button.clear.accent.disabled:focus, .button.clear.accent[disabled]:focus {
  color: #16a385;
}
.button.clear.accent:hover, .button.clear.accent:focus {
  color: #0b5243;
}
.button.clear.info, .button.clear.info.disabled, .button.clear.info[disabled], .button.clear.info.disabled:hover, .button.clear.info[disabled]:hover, .button.clear.info.disabled:focus, .button.clear.info[disabled]:focus {
  color: #a3988c;
}
.button.clear.info:hover, .button.clear.info:focus {
  color: #544c43;
}
.button.clear.highlight, .button.clear.highlight.disabled, .button.clear.highlight[disabled], .button.clear.highlight.disabled:hover, .button.clear.highlight[disabled]:hover, .button.clear.highlight.disabled:focus, .button.clear.highlight[disabled]:focus {
  color: #7742bd;
}
.button.clear.highlight:hover, .button.clear.highlight:focus {
  color: #3c215f;
}
.button.clear.acc, .button.clear.acc.disabled, .button.clear.acc[disabled], .button.clear.acc.disabled:hover, .button.clear.acc[disabled]:hover, .button.clear.acc.disabled:focus, .button.clear.acc[disabled]:focus {
  color: #004176;
}
.button.clear.acc:hover, .button.clear.acc:focus {
  color: #00213b;
}
.button.disabled, .button[disabled] {
  cursor: not-allowed;
  opacity: 0.45;
}
.button.dropdown::after {
  display: block;
  display: inline-block;
  position: relative;
  top: 0.4em;
  width: 0;
  height: 0;
  margin-left: 1em;
  float: right;
  border-width: 0.4em;
  border-bottom-width: 0;
  border-style: solid;
  border-color: white transparent transparent;
  content: "";
}
.button.dropdown.hollow::after, .button.dropdown.clear::after,.button.dropdown.hollow.primary::after, .button.dropdown.clear.primary::after {
  border-top-color: #198dae;
}
.button.dropdown.hollow.secondary::after, .button.dropdown.clear.secondary::after {
  border-top-color: #676a72;
}
.button.dropdown.hollow.success::after, .button.dropdown.clear.success::after {
  border-top-color: #078a2e;
}
.button.dropdown.hollow.shade::after, .button.dropdown.clear.shade::after {
  border-top-color: #878585;
}
.button.dropdown.hollow.warning::after, .button.dropdown.clear.warning::after {
  border-top-color: #da8210;
}
.button.dropdown.hollow.alert::after, .button.dropdown.clear.alert::after {
  border-top-color: #dd1a1a;
}
.button.dropdown.hollow.navigation::after, .button.dropdown.clear.navigation::after {
  border-top-color: #2b58c0;
}
.button.dropdown.hollow.accent::after, .button.dropdown.clear.accent::after {
  border-top-color: #16a385;
}
.button.dropdown.hollow.info::after, .button.dropdown.clear.info::after {
  border-top-color: #a3988c;
}
.button.dropdown.hollow.highlight::after, .button.dropdown.clear.highlight::after {
  border-top-color: #7742bd;
}
.button.dropdown.hollow.acc::after, .button.dropdown.clear.acc::after {
  border-top-color: #004176;
}
.button.arrow-only::after {
  top: -0.1em;
  margin-left: 0;
  float: none;
}

a.button:hover, a.button:focus {
  text-decoration: none;
}

.button-group {
  display: flex;
  flex-grow: 1;
  flex-wrap: wrap;
  align-items: stretch;
  margin-bottom: 16px;
  margin-bottom: 1rem;
}
.button-group::before, .button-group::after {
  display: table;
  flex-basis: 0;
  order: 1;
  content: " ";
}
.button-group::after {
  clear: both;
}
.button-group::before, .button-group::after {
  display: none;
}
.button-group .button {
  flex: 0 0 auto;
  margin: 0;
  margin-right: 1px;
  margin-bottom: 1px;
  font-size: 16px;
  font-size: 1rem;
}
.button-group .button:last-child {
  margin-right: 0;
}
.button-group.tiny .button {
  font-size: 11.237px;
  font-size: 0.7023319616rem;
}
.button-group.small .button {
  font-size: 14.222px;
  font-size: 0.8888888889rem;
}
.button-group.large .button {
  font-size: 20.25px;
  font-size: 1.265625rem;
}
.button-group.xlarge .button {
  font-size: 22.781px;
  font-size: 1.423828125rem;
}
.button-group.expanded .button {
  flex: 1 1 0px;
}
.button-group.primary .button, .button-group.primary .button.disabled, .button-group.primary .button[disabled], .button-group.primary .button.disabled:hover, .button-group.primary .button[disabled]:hover, .button-group.primary .button.disabled:focus, .button-group.primary .button[disabled]:focus {
  background-color: #198dae;
  color: white;
}
.button-group.primary .button:hover, .button-group.primary .button:focus {
  background-color: #14718b;
  color: white;
}
.button-group.secondary .button, .button-group.secondary .button.disabled, .button-group.secondary .button[disabled], .button-group.secondary .button.disabled:hover, .button-group.secondary .button[disabled]:hover, .button-group.secondary .button.disabled:focus, .button-group.secondary .button[disabled]:focus {
  background-color: #676a72;
  color: white;
}
.button-group.secondary .button:hover, .button-group.secondary .button:focus {
  background-color: #52555b;
  color: white;
}
.button-group.success .button, .button-group.success .button.disabled, .button-group.success .button[disabled], .button-group.success .button.disabled:hover, .button-group.success .button[disabled]:hover, .button-group.success .button.disabled:focus, .button-group.success .button[disabled]:focus {
  background-color: #078a2e;
  color: white;
}
.button-group.success .button:hover, .button-group.success .button:focus {
  background-color: #066e25;
  color: white;
}
.button-group.shade .button, .button-group.shade .button.disabled, .button-group.shade .button[disabled], .button-group.shade .button.disabled:hover, .button-group.shade .button[disabled]:hover, .button-group.shade .button.disabled:focus, .button-group.shade .button[disabled]:focus {
  background-color: #878585;
  color: #131212;
}
.button-group.shade .button:hover, .button-group.shade .button:focus {
  background-color: #6c6a6a;
  color: #131212;
}
.button-group.warning .button, .button-group.warning .button.disabled, .button-group.warning .button[disabled], .button-group.warning .button.disabled:hover, .button-group.warning .button[disabled]:hover, .button-group.warning .button.disabled:focus, .button-group.warning .button[disabled]:focus {
  background-color: #da8210;
  color: #131212;
}
.button-group.warning .button:hover, .button-group.warning .button:focus {
  background-color: #ae680d;
  color: #131212;
}
.button-group.alert .button, .button-group.alert .button.disabled, .button-group.alert .button[disabled], .button-group.alert .button.disabled:hover, .button-group.alert .button[disabled]:hover, .button-group.alert .button.disabled:focus, .button-group.alert .button[disabled]:focus {
  background-color: #dd1a1a;
  color: white;
}
.button-group.alert .button:hover, .button-group.alert .button:focus {
  background-color: #b11515;
  color: white;
}
.button-group.navigation .button, .button-group.navigation .button.disabled, .button-group.navigation .button[disabled], .button-group.navigation .button.disabled:hover, .button-group.navigation .button[disabled]:hover, .button-group.navigation .button.disabled:focus, .button-group.navigation .button[disabled]:focus {
  background-color: #2b58c0;
  color: white;
}
.button-group.navigation .button:hover, .button-group.navigation .button:focus {
  background-color: #22469a;
  color: white;
}
.button-group.accent .button, .button-group.accent .button.disabled, .button-group.accent .button[disabled], .button-group.accent .button.disabled:hover, .button-group.accent .button[disabled]:hover, .button-group.accent .button.disabled:focus, .button-group.accent .button[disabled]:focus {
  background-color: #16a385;
  color: #131212;
}
.button-group.accent .button:hover, .button-group.accent .button:focus {
  background-color: #12826a;
  color: #131212;
}
.button-group.info .button, .button-group.info .button.disabled, .button-group.info .button[disabled], .button-group.info .button.disabled:hover, .button-group.info .button[disabled]:hover, .button-group.info .button.disabled:focus, .button-group.info .button[disabled]:focus {
  background-color: #a3988c;
  color: #131212;
}
.button-group.info .button:hover, .button-group.info .button:focus {
  background-color: #877a6c;
  color: #131212;
}
.button-group.highlight .button, .button-group.highlight .button.disabled, .button-group.highlight .button[disabled], .button-group.highlight .button.disabled:hover, .button-group.highlight .button[disabled]:hover, .button-group.highlight .button.disabled:focus, .button-group.highlight .button[disabled]:focus {
  background-color: #7742bd;
  color: white;
}
.button-group.highlight .button:hover, .button-group.highlight .button:focus {
  background-color: #5f3597;
  color: white;
}
.button-group.acc .button, .button-group.acc .button.disabled, .button-group.acc .button[disabled], .button-group.acc .button.disabled:hover, .button-group.acc .button[disabled]:hover, .button-group.acc .button.disabled:focus, .button-group.acc .button[disabled]:focus {
  background-color: #004176;
  color: white;
}
.button-group.acc .button:hover, .button-group.acc .button:focus {
  background-color: #00345e;
  color: white;
}
.button-group.hollow .button, .button-group.hollow .button:hover, .button-group.hollow .button:focus, .button-group.hollow .button.disabled, .button-group.hollow .button.disabled:hover, .button-group.hollow .button.disabled:focus, .button-group.hollow .button[disabled], .button-group.hollow .button[disabled]:hover, .button-group.hollow .button[disabled]:focus {
  background-color: transparent;
}
.button-group.hollow .button, .button-group.hollow .button.disabled, .button-group.hollow .button[disabled], .button-group.hollow .button.disabled:hover, .button-group.hollow .button[disabled]:hover, .button-group.hollow .button.disabled:focus, .button-group.hollow .button[disabled]:focus {
  border: 1px solid #198dae;
  color: #198dae;
}
.button-group.hollow .button:hover, .button-group.hollow .button:focus {
  border-color: #0d4757;
  color: #0d4757;
}
.button-group.hollow.primary .button, .button-group.hollow.primary .button.disabled, .button-group.hollow.primary .button[disabled], .button-group.hollow.primary .button.disabled:hover, .button-group.hollow.primary .button[disabled]:hover, .button-group.hollow.primary .button.disabled:focus, .button-group.hollow.primary .button[disabled]:focus, .button-group.hollow .button.primary, .button-group.hollow .button.primary.disabled, .button-group.hollow .button.primary[disabled], .button-group.hollow .button.primary.disabled:hover, .button-group.hollow .button.primary[disabled]:hover, .button-group.hollow .button.primary.disabled:focus, .button-group.hollow .button.primary[disabled]:focus {
  border: 1px solid #198dae;
  color: #198dae;
}
.button-group.hollow.primary .button:hover, .button-group.hollow.primary .button:focus, .button-group.hollow .button.primary:hover, .button-group.hollow .button.primary:focus {
  border-color: #0d4757;
  color: #0d4757;
}
.button-group.hollow.secondary .button, .button-group.hollow.secondary .button.disabled, .button-group.hollow.secondary .button[disabled], .button-group.hollow.secondary .button.disabled:hover, .button-group.hollow.secondary .button[disabled]:hover, .button-group.hollow.secondary .button.disabled:focus, .button-group.hollow.secondary .button[disabled]:focus, .button-group.hollow .button.secondary, .button-group.hollow .button.secondary.disabled, .button-group.hollow .button.secondary[disabled], .button-group.hollow .button.secondary.disabled:hover, .button-group.hollow .button.secondary[disabled]:hover, .button-group.hollow .button.secondary.disabled:focus, .button-group.hollow .button.secondary[disabled]:focus {
  border: 1px solid #676a72;
  color: #676a72;
}
.button-group.hollow.secondary .button:hover, .button-group.hollow.secondary .button:focus, .button-group.hollow .button.secondary:hover, .button-group.hollow .button.secondary:focus {
  border-color: #343539;
  color: #343539;
}
.button-group.hollow.success .button, .button-group.hollow.success .button.disabled, .button-group.hollow.success .button[disabled], .button-group.hollow.success .button.disabled:hover, .button-group.hollow.success .button[disabled]:hover, .button-group.hollow.success .button.disabled:focus, .button-group.hollow.success .button[disabled]:focus, .button-group.hollow .button.success, .button-group.hollow .button.success.disabled, .button-group.hollow .button.success[disabled], .button-group.hollow .button.success.disabled:hover, .button-group.hollow .button.success[disabled]:hover, .button-group.hollow .button.success.disabled:focus, .button-group.hollow .button.success[disabled]:focus {
  border: 1px solid #078a2e;
  color: #078a2e;
}
.button-group.hollow.success .button:hover, .button-group.hollow.success .button:focus, .button-group.hollow .button.success:hover, .button-group.hollow .button.success:focus {
  border-color: #044517;
  color: #044517;
}
.button-group.hollow.shade .button, .button-group.hollow.shade .button.disabled, .button-group.hollow.shade .button[disabled], .button-group.hollow.shade .button.disabled:hover, .button-group.hollow.shade .button[disabled]:hover, .button-group.hollow.shade .button.disabled:focus, .button-group.hollow.shade .button[disabled]:focus, .button-group.hollow .button.shade, .button-group.hollow .button.shade.disabled, .button-group.hollow .button.shade[disabled], .button-group.hollow .button.shade.disabled:hover, .button-group.hollow .button.shade[disabled]:hover, .button-group.hollow .button.shade.disabled:focus, .button-group.hollow .button.shade[disabled]:focus {
  border: 1px solid #878585;
  color: #878585;
}
.button-group.hollow.shade .button:hover, .button-group.hollow.shade .button:focus, .button-group.hollow .button.shade:hover, .button-group.hollow .button.shade:focus {
  border-color: #444242;
  color: #444242;
}
.button-group.hollow.warning .button, .button-group.hollow.warning .button.disabled, .button-group.hollow.warning .button[disabled], .button-group.hollow.warning .button.disabled:hover, .button-group.hollow.warning .button[disabled]:hover, .button-group.hollow.warning .button.disabled:focus, .button-group.hollow.warning .button[disabled]:focus, .button-group.hollow .button.warning, .button-group.hollow .button.warning.disabled, .button-group.hollow .button.warning[disabled], .button-group.hollow .button.warning.disabled:hover, .button-group.hollow .button.warning[disabled]:hover, .button-group.hollow .button.warning.disabled:focus, .button-group.hollow .button.warning[disabled]:focus {
  border: 1px solid #da8210;
  color: #da8210;
}
.button-group.hollow.warning .button:hover, .button-group.hollow.warning .button:focus, .button-group.hollow .button.warning:hover, .button-group.hollow .button.warning:focus {
  border-color: #6d4108;
  color: #6d4108;
}
.button-group.hollow.alert .button, .button-group.hollow.alert .button.disabled, .button-group.hollow.alert .button[disabled], .button-group.hollow.alert .button.disabled:hover, .button-group.hollow.alert .button[disabled]:hover, .button-group.hollow.alert .button.disabled:focus, .button-group.hollow.alert .button[disabled]:focus, .button-group.hollow .button.alert, .button-group.hollow .button.alert.disabled, .button-group.hollow .button.alert[disabled], .button-group.hollow .button.alert.disabled:hover, .button-group.hollow .button.alert[disabled]:hover, .button-group.hollow .button.alert.disabled:focus, .button-group.hollow .button.alert[disabled]:focus {
  border: 1px solid #dd1a1a;
  color: #dd1a1a;
}
.button-group.hollow.alert .button:hover, .button-group.hollow.alert .button:focus, .button-group.hollow .button.alert:hover, .button-group.hollow .button.alert:focus {
  border-color: #6f0d0d;
  color: #6f0d0d;
}
.button-group.hollow.navigation .button, .button-group.hollow.navigation .button.disabled, .button-group.hollow.navigation .button[disabled], .button-group.hollow.navigation .button.disabled:hover, .button-group.hollow.navigation .button[disabled]:hover, .button-group.hollow.navigation .button.disabled:focus, .button-group.hollow.navigation .button[disabled]:focus, .button-group.hollow .button.navigation, .button-group.hollow .button.navigation.disabled, .button-group.hollow .button.navigation[disabled], .button-group.hollow .button.navigation.disabled:hover, .button-group.hollow .button.navigation[disabled]:hover, .button-group.hollow .button.navigation.disabled:focus, .button-group.hollow .button.navigation[disabled]:focus {
  border: 1px solid #2b58c0;
  color: #2b58c0;
}
.button-group.hollow.navigation .button:hover, .button-group.hollow.navigation .button:focus, .button-group.hollow .button.navigation:hover, .button-group.hollow .button.navigation:focus {
  border-color: #162c60;
  color: #162c60;
}
.button-group.hollow.accent .button, .button-group.hollow.accent .button.disabled, .button-group.hollow.accent .button[disabled], .button-group.hollow.accent .button.disabled:hover, .button-group.hollow.accent .button[disabled]:hover, .button-group.hollow.accent .button.disabled:focus, .button-group.hollow.accent .button[disabled]:focus, .button-group.hollow .button.accent, .button-group.hollow .button.accent.disabled, .button-group.hollow .button.accent[disabled], .button-group.hollow .button.accent.disabled:hover, .button-group.hollow .button.accent[disabled]:hover, .button-group.hollow .button.accent.disabled:focus, .button-group.hollow .button.accent[disabled]:focus {
  border: 1px solid #16a385;
  color: #16a385;
}
.button-group.hollow.accent .button:hover, .button-group.hollow.accent .button:focus, .button-group.hollow .button.accent:hover, .button-group.hollow .button.accent:focus {
  border-color: #0b5243;
  color: #0b5243;
}
.button-group.hollow.info .button, .button-group.hollow.info .button.disabled, .button-group.hollow.info .button[disabled], .button-group.hollow.info .button.disabled:hover, .button-group.hollow.info .button[disabled]:hover, .button-group.hollow.info .button.disabled:focus, .button-group.hollow.info .button[disabled]:focus, .button-group.hollow .button.info, .button-group.hollow .button.info.disabled, .button-group.hollow .button.info[disabled], .button-group.hollow .button.info.disabled:hover, .button-group.hollow .button.info[disabled]:hover, .button-group.hollow .button.info.disabled:focus, .button-group.hollow .button.info[disabled]:focus {
  border: 1px solid #a3988c;
  color: #a3988c;
}
.button-group.hollow.info .button:hover, .button-group.hollow.info .button:focus, .button-group.hollow .button.info:hover, .button-group.hollow .button.info:focus {
  border-color: #544c43;
  color: #544c43;
}
.button-group.hollow.highlight .button, .button-group.hollow.highlight .button.disabled, .button-group.hollow.highlight .button[disabled], .button-group.hollow.highlight .button.disabled:hover, .button-group.hollow.highlight .button[disabled]:hover, .button-group.hollow.highlight .button.disabled:focus, .button-group.hollow.highlight .button[disabled]:focus, .button-group.hollow .button.highlight, .button-group.hollow .button.highlight.disabled, .button-group.hollow .button.highlight[disabled], .button-group.hollow .button.highlight.disabled:hover, .button-group.hollow .button.highlight[disabled]:hover, .button-group.hollow .button.highlight.disabled:focus, .button-group.hollow .button.highlight[disabled]:focus {
  border: 1px solid #7742bd;
  color: #7742bd;
}
.button-group.hollow.highlight .button:hover, .button-group.hollow.highlight .button:focus, .button-group.hollow .button.highlight:hover, .button-group.hollow .button.highlight:focus {
  border-color: #3c215f;
  color: #3c215f;
}
.button-group.hollow.acc .button, .button-group.hollow.acc .button.disabled, .button-group.hollow.acc .button[disabled], .button-group.hollow.acc .button.disabled:hover, .button-group.hollow.acc .button[disabled]:hover, .button-group.hollow.acc .button.disabled:focus, .button-group.hollow.acc .button[disabled]:focus, .button-group.hollow .button.acc, .button-group.hollow .button.acc.disabled, .button-group.hollow .button.acc[disabled], .button-group.hollow .button.acc.disabled:hover, .button-group.hollow .button.acc[disabled]:hover, .button-group.hollow .button.acc.disabled:focus, .button-group.hollow .button.acc[disabled]:focus {
  border: 1px solid #004176;
  color: #004176;
}
.button-group.hollow.acc .button:hover, .button-group.hollow.acc .button:focus, .button-group.hollow .button.acc:hover, .button-group.hollow .button.acc:focus {
  border-color: #00213b;
  color: #00213b;
}
.button-group.clear .button, .button-group.clear .button:hover, .button-group.clear .button:focus, .button-group.clear .button.disabled, .button-group.clear .button.disabled:hover, .button-group.clear .button.disabled:focus, .button-group.clear .button[disabled], .button-group.clear .button[disabled]:hover, .button-group.clear .button[disabled]:focus {
  border-color: transparent;
  background-color: transparent;
}
.button-group.clear .button, .button-group.clear .button.disabled, .button-group.clear .button[disabled], .button-group.clear .button.disabled:hover, .button-group.clear .button[disabled]:hover, .button-group.clear .button.disabled:focus, .button-group.clear .button[disabled]:focus {
  color: #198dae;
}
.button-group.clear .button:hover, .button-group.clear .button:focus {
  color: #0d4757;
}
.button-group.clear.primary .button, .button-group.clear.primary .button.disabled, .button-group.clear.primary .button[disabled], .button-group.clear.primary .button.disabled:hover, .button-group.clear.primary .button[disabled]:hover, .button-group.clear.primary .button.disabled:focus, .button-group.clear.primary .button[disabled]:focus, .button-group.clear .button.primary, .button-group.clear .button.primary.disabled, .button-group.clear .button.primary[disabled], .button-group.clear .button.primary.disabled:hover, .button-group.clear .button.primary[disabled]:hover, .button-group.clear .button.primary.disabled:focus, .button-group.clear .button.primary[disabled]:focus {
  color: #198dae;
}
.button-group.clear.primary .button:hover, .button-group.clear.primary .button:focus, .button-group.clear .button.primary:hover, .button-group.clear .button.primary:focus {
  color: #0d4757;
}
.button-group.clear.secondary .button, .button-group.clear.secondary .button.disabled, .button-group.clear.secondary .button[disabled], .button-group.clear.secondary .button.disabled:hover, .button-group.clear.secondary .button[disabled]:hover, .button-group.clear.secondary .button.disabled:focus, .button-group.clear.secondary .button[disabled]:focus, .button-group.clear .button.secondary, .button-group.clear .button.secondary.disabled, .button-group.clear .button.secondary[disabled], .button-group.clear .button.secondary.disabled:hover, .button-group.clear .button.secondary[disabled]:hover, .button-group.clear .button.secondary.disabled:focus, .button-group.clear .button.secondary[disabled]:focus {
  color: #676a72;
}
.button-group.clear.secondary .button:hover, .button-group.clear.secondary .button:focus, .button-group.clear .button.secondary:hover, .button-group.clear .button.secondary:focus {
  color: #343539;
}
.button-group.clear.success .button, .button-group.clear.success .button.disabled, .button-group.clear.success .button[disabled], .button-group.clear.success .button.disabled:hover, .button-group.clear.success .button[disabled]:hover, .button-group.clear.success .button.disabled:focus, .button-group.clear.success .button[disabled]:focus, .button-group.clear .button.success, .button-group.clear .button.success.disabled, .button-group.clear .button.success[disabled], .button-group.clear .button.success.disabled:hover, .button-group.clear .button.success[disabled]:hover, .button-group.clear .button.success.disabled:focus, .button-group.clear .button.success[disabled]:focus {
  color: #078a2e;
}
.button-group.clear.success .button:hover, .button-group.clear.success .button:focus, .button-group.clear .button.success:hover, .button-group.clear .button.success:focus {
  color: #044517;
}
.button-group.clear.shade .button, .button-group.clear.shade .button.disabled, .button-group.clear.shade .button[disabled], .button-group.clear.shade .button.disabled:hover, .button-group.clear.shade .button[disabled]:hover, .button-group.clear.shade .button.disabled:focus, .button-group.clear.shade .button[disabled]:focus, .button-group.clear .button.shade, .button-group.clear .button.shade.disabled, .button-group.clear .button.shade[disabled], .button-group.clear .button.shade.disabled:hover, .button-group.clear .button.shade[disabled]:hover, .button-group.clear .button.shade.disabled:focus, .button-group.clear .button.shade[disabled]:focus {
  color: #878585;
}
.button-group.clear.shade .button:hover, .button-group.clear.shade .button:focus, .button-group.clear .button.shade:hover, .button-group.clear .button.shade:focus {
  color: #444242;
}
.button-group.clear.warning .button, .button-group.clear.warning .button.disabled, .button-group.clear.warning .button[disabled], .button-group.clear.warning .button.disabled:hover, .button-group.clear.warning .button[disabled]:hover, .button-group.clear.warning .button.disabled:focus, .button-group.clear.warning .button[disabled]:focus, .button-group.clear .button.warning, .button-group.clear .button.warning.disabled, .button-group.clear .button.warning[disabled], .button-group.clear .button.warning.disabled:hover, .button-group.clear .button.warning[disabled]:hover, .button-group.clear .button.warning.disabled:focus, .button-group.clear .button.warning[disabled]:focus {
  color: #da8210;
}
.button-group.clear.warning .button:hover, .button-group.clear.warning .button:focus, .button-group.clear .button.warning:hover, .button-group.clear .button.warning:focus {
  color: #6d4108;
}
.button-group.clear.alert .button, .button-group.clear.alert .button.disabled, .button-group.clear.alert .button[disabled], .button-group.clear.alert .button.disabled:hover, .button-group.clear.alert .button[disabled]:hover, .button-group.clear.alert .button.disabled:focus, .button-group.clear.alert .button[disabled]:focus, .button-group.clear .button.alert, .button-group.clear .button.alert.disabled, .button-group.clear .button.alert[disabled], .button-group.clear .button.alert.disabled:hover, .button-group.clear .button.alert[disabled]:hover, .button-group.clear .button.alert.disabled:focus, .button-group.clear .button.alert[disabled]:focus {
  color: #dd1a1a;
}
.button-group.clear.alert .button:hover, .button-group.clear.alert .button:focus, .button-group.clear .button.alert:hover, .button-group.clear .button.alert:focus {
  color: #6f0d0d;
}
.button-group.clear.navigation .button, .button-group.clear.navigation .button.disabled, .button-group.clear.navigation .button[disabled], .button-group.clear.navigation .button.disabled:hover, .button-group.clear.navigation .button[disabled]:hover, .button-group.clear.navigation .button.disabled:focus, .button-group.clear.navigation .button[disabled]:focus, .button-group.clear .button.navigation, .button-group.clear .button.navigation.disabled, .button-group.clear .button.navigation[disabled], .button-group.clear .button.navigation.disabled:hover, .button-group.clear .button.navigation[disabled]:hover, .button-group.clear .button.navigation.disabled:focus, .button-group.clear .button.navigation[disabled]:focus {
  color: #2b58c0;
}
.button-group.clear.navigation .button:hover, .button-group.clear.navigation .button:focus, .button-group.clear .button.navigation:hover, .button-group.clear .button.navigation:focus {
  color: #162c60;
}
.button-group.clear.accent .button, .button-group.clear.accent .button.disabled, .button-group.clear.accent .button[disabled], .button-group.clear.accent .button.disabled:hover, .button-group.clear.accent .button[disabled]:hover, .button-group.clear.accent .button.disabled:focus, .button-group.clear.accent .button[disabled]:focus, .button-group.clear .button.accent, .button-group.clear .button.accent.disabled, .button-group.clear .button.accent[disabled], .button-group.clear .button.accent.disabled:hover, .button-group.clear .button.accent[disabled]:hover, .button-group.clear .button.accent.disabled:focus, .button-group.clear .button.accent[disabled]:focus {
  color: #16a385;
}
.button-group.clear.accent .button:hover, .button-group.clear.accent .button:focus, .button-group.clear .button.accent:hover, .button-group.clear .button.accent:focus {
  color: #0b5243;
}
.button-group.clear.info .button, .button-group.clear.info .button.disabled, .button-group.clear.info .button[disabled], .button-group.clear.info .button.disabled:hover, .button-group.clear.info .button[disabled]:hover, .button-group.clear.info .button.disabled:focus, .button-group.clear.info .button[disabled]:focus, .button-group.clear .button.info, .button-group.clear .button.info.disabled, .button-group.clear .button.info[disabled], .button-group.clear .button.info.disabled:hover, .button-group.clear .button.info[disabled]:hover, .button-group.clear .button.info.disabled:focus, .button-group.clear .button.info[disabled]:focus {
  color: #a3988c;
}
.button-group.clear.info .button:hover, .button-group.clear.info .button:focus, .button-group.clear .button.info:hover, .button-group.clear .button.info:focus {
  color: #544c43;
}
.button-group.clear.highlight .button, .button-group.clear.highlight .button.disabled, .button-group.clear.highlight .button[disabled], .button-group.clear.highlight .button.disabled:hover, .button-group.clear.highlight .button[disabled]:hover, .button-group.clear.highlight .button.disabled:focus, .button-group.clear.highlight .button[disabled]:focus, .button-group.clear .button.highlight, .button-group.clear .button.highlight.disabled, .button-group.clear .button.highlight[disabled], .button-group.clear .button.highlight.disabled:hover, .button-group.clear .button.highlight[disabled]:hover, .button-group.clear .button.highlight.disabled:focus, .button-group.clear .button.highlight[disabled]:focus {
  color: #7742bd;
}
.button-group.clear.highlight .button:hover, .button-group.clear.highlight .button:focus, .button-group.clear .button.highlight:hover, .button-group.clear .button.highlight:focus {
  color: #3c215f;
}
.button-group.clear.acc .button, .button-group.clear.acc .button.disabled, .button-group.clear.acc .button[disabled], .button-group.clear.acc .button.disabled:hover, .button-group.clear.acc .button[disabled]:hover, .button-group.clear.acc .button.disabled:focus, .button-group.clear.acc .button[disabled]:focus, .button-group.clear .button.acc, .button-group.clear .button.acc.disabled, .button-group.clear .button.acc[disabled], .button-group.clear .button.acc.disabled:hover, .button-group.clear .button.acc[disabled]:hover, .button-group.clear .button.acc.disabled:focus, .button-group.clear .button.acc[disabled]:focus {
  color: #004176;
}
.button-group.clear.acc .button:hover, .button-group.clear.acc .button:focus, .button-group.clear .button.acc:hover, .button-group.clear .button.acc:focus {
  color: #00213b;
}
.button-group.no-gaps .button {
  margin-right: -1px;
  margin-right: -0.0625rem;
}
.button-group.no-gaps .button + .button {
  border-left-color: transparent;
}
.button-group.stacked, .button-group.stacked-for-small, .button-group.stacked-for-medium {
  flex-wrap: wrap;
}
.button-group.stacked .button, .button-group.stacked-for-small .button, .button-group.stacked-for-medium .button {
  flex: 0 0 100%;
}
.button-group.stacked .button:last-child, .button-group.stacked-for-small .button:last-child, .button-group.stacked-for-medium .button:last-child {
  margin-bottom: 0;
}
.button-group.stacked.expanded .button, .button-group.stacked-for-small.expanded .button, .button-group.stacked-for-medium.expanded .button {
  flex: 1 1 0px;
}
@media print, screen and (min-width: 40em) {
  .button-group.stacked-for-small .button {
    flex: 0 0 auto;
    margin-bottom: 0;
  }
}
@media print, screen and (min-width: 64em) {
  .button-group.stacked-for-medium .button {
    flex: 0 0 auto;
    margin-bottom: 0;
  }
}
@media print, screen and (max-width: 39.99875em) {
  .button-group.stacked-for-small.expanded {
    display: block;
  }
  .button-group.stacked-for-small.expanded .button {
    display: block;
    margin-right: 0;
  }
}
@media print, screen and (max-width: 63.99875em) {
  .button-group.stacked-for-medium.expanded {
    display: block;
  }
  .button-group.stacked-for-medium.expanded .button {
    display: block;
    margin-right: 0;
  }
}

.close-button {
  z-index: 10;
  position: absolute;
  color: #8cc6d7;
  cursor: pointer;
}
[data-whatinput=mouse] .close-button {
  outline: 0;
}
.close-button:hover, .close-button:focus {
  color: white;
}
.close-button.small {
  top: 0em;
  right: 0px;
  right: 0rem;
  font-size: 1.125em;
  line-height: 1;
}

.close-button, .close-button.medium {
  top: 0px;
  top: 0rem;
  right: 0px;
  right: 0rem;
  font-size: 1.265625em;
  line-height: 1;
}

.label {
  display: inline-block;
  padding: 5.333px 8px;
  padding: 0.33333rem 0.5rem;
  border-radius: 0px;
  font-size: 12.8px;
  font-size: 0.8rem;
  line-height: 1;
  white-space: nowrap;
  cursor: default;
}
.label,.label.primary {
  background: #198dae;
  color: white;
}
.label.secondary {
  background: #676a72;
  color: white;
}
.label.success {
  background: #078a2e;
  color: white;
}
.label.shade {
  background: #878585;
  color: #131212;
}
.label.warning {
  background: #da8210;
  color: #131212;
}
.label.alert {
  background: #dd1a1a;
  color: white;
}
.label.navigation {
  background: #2b58c0;
  color: white;
}
.label.accent {
  background: #16a385;
  color: #131212;
}
.label.info {
  background: #a3988c;
  color: #131212;
}
.label.highlight {
  background: #7742bd;
  color: white;
}
.label.acc {
  background: #004176;
  color: white;
}

.progress {
  height: 16px;
  height: 1rem;
  margin-bottom: 16px;
  margin-bottom: 1rem;
  border-radius: 0px;
  background-color: #cacaca;
}
.progress.primary .progress-meter {
  background-color: #198dae;
}
.progress.secondary .progress-meter {
  background-color: #676a72;
}
.progress.success .progress-meter {
  background-color: #078a2e;
}
.progress.shade .progress-meter {
  background-color: #878585;
}
.progress.warning .progress-meter {
  background-color: #da8210;
}
.progress.alert .progress-meter {
  background-color: #dd1a1a;
}
.progress.navigation .progress-meter {
  background-color: #2b58c0;
}
.progress.accent .progress-meter {
  background-color: #16a385;
}
.progress.info .progress-meter {
  background-color: #a3988c;
}
.progress.highlight .progress-meter {
  background-color: #7742bd;
}
.progress.acc .progress-meter {
  background-color: #004176;
}

.progress-meter {
  display: block;
  position: relative;
  width: 0%;
  height: 100%;
  background-color: #198dae;
}

.progress-meter-text {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: 0;
  transform: translate(-50%, -50%);
  color: white;
  font-weight: bold;
  font-size: 12px;
  font-size: 0.75rem;
  white-space: nowrap;
}

.slider {
  position: relative;
  margin-top: 20px;
  margin-top: 1.25rem;
  margin-bottom: 36px;
  margin-bottom: 2.25rem;
  background-color: #e6e6e6;
  cursor: pointer;
  touch-action: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.slider,.slider-fill {
  height: 8px;
  height: 0.5rem;
}

.slider-fill {
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  max-width: 100%;
  background-color: #cacaca;
  transition: all 0.2s ease-in-out;
}
.slider-fill.is-dragging {
  transition: all 0s linear;
}

.slider-handle {
  display: inline-block;
  z-index: 1;
  position: absolute;
  top: 50%;
  left: 0;
  width: 22.4px;
  width: 1.4rem;
  height: 22.4px;
  height: 1.4rem;
  transform: translateY(-50%);
  border-radius: 0px;
  background-color: #198dae;
  touch-action: manipulation;
  transition: all 0.2s ease-in-out;
}
[data-whatinput=mouse] .slider-handle {
  outline: 0;
}
.slider-handle:hover {
  background-color: #157894;
}
.slider-handle.is-dragging {
  transition: all 0s linear;
}

.slider.disabled,
.slider[disabled] {
  cursor: not-allowed;
  opacity: 0.25;
}

.slider.vertical {
  display: inline-block;
  width: 8px;
  width: 0.5rem;
  height: 200px;
  height: 12.5rem;
  margin: 0 20px;
  margin: 0 1.25rem;
  transform: scale(1, -1);
}
.slider.vertical .slider-fill {
  top: 0;
  width: 8px;
  width: 0.5rem;
  max-height: 100%;
}
.slider.vertical .slider-handle {
  position: absolute;
  top: 0;
  left: 50%;
  width: 22.4px;
  width: 1.4rem;
  height: 22.4px;
  height: 1.4rem;
  transform: translateX(-50%);
}

.switch {
  position: relative;
  height: 32px;
  height: 2rem;
  margin-bottom: 16px;
  margin-bottom: 1rem;
  outline: 0;
  color: white;
  font-weight: bold;
  font-size: 14px;
  font-size: 0.875rem;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.switch-input {
  position: absolute;
  margin-bottom: 0;
  opacity: 0;
}

.switch-paddle {
  display: block;
  position: relative;
  width: 64px;
  width: 4rem;
  height: 32px;
  height: 2rem;
  border-radius: 0px;
  background: #cacaca;
  color: inherit;
  font-weight: inherit;
  cursor: pointer;
  transition: all 0.25s ease-out;
}
input + .switch-paddle {
  margin: 0;
}
.switch-paddle::after {
  display: block;
  position: absolute;
  top: 4px;
  top: 0.25rem;
  left: 4px;
  left: 0.25rem;
  width: 24px;
  width: 1.5rem;
  height: 24px;
  height: 1.5rem;
  transform: translate3d(0, 0, 0);
  border-radius: 0px;
  background: white;
  content: "";
  transition: all 0.25s ease-out;
}
input:checked ~ .switch-paddle {
  background: #198dae;
}
input:checked ~ .switch-paddle::after {
  left: 36px;
  left: 2.25rem;
}
input:disabled ~ .switch-paddle {
  cursor: not-allowed;
  opacity: 0.5;
}
[data-whatinput=mouse] input:focus ~ .switch-paddle {
  outline: 0;
}

.switch-inactive, .switch-active {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.switch-active {
  display: none;
  left: 8%;
}
input:checked + label > .switch-active {
  display: block;
}

.switch-inactive {
  right: 15%;
}
input:checked + label > .switch-inactive {
  display: none;
}
.switch.tiny,.switch.tiny .switch-paddle {
  height: 24px;
  height: 1.5rem;
}
.switch.tiny .switch-paddle {
  width: 48px;
  width: 3rem;
  font-size: 10px;
  font-size: 0.625rem;
}
.switch.tiny .switch-paddle::after {
  top: 4px;
  top: 0.25rem;
  left: 4px;
  left: 0.25rem;
  width: 16px;
  width: 1rem;
  height: 16px;
  height: 1rem;
}
.switch.tiny input:checked ~ .switch-paddle::after {
  left: 28px;
  left: 1.75rem;
}
.switch.small,.switch.small .switch-paddle {
  height: 28px;
  height: 1.75rem;
}
.switch.small .switch-paddle {
  width: 56px;
  width: 3.5rem;
  font-size: 12px;
  font-size: 0.75rem;
}
.switch.small .switch-paddle::after {
  top: 4px;
  top: 0.25rem;
  left: 4px;
  left: 0.25rem;
  width: 20px;
  width: 1.25rem;
  height: 20px;
  height: 1.25rem;
}
.switch.small input:checked ~ .switch-paddle::after {
  left: 32px;
  left: 2rem;
}
.switch.large,.switch.large .switch-paddle {
  height: 40px;
  height: 2.5rem;
}
.switch.large .switch-paddle {
  width: 80px;
  width: 5rem;
  font-size: 16px;
  font-size: 1rem;
}
.switch.large .switch-paddle::after {
  top: 4px;
  top: 0.25rem;
  left: 4px;
  left: 0.25rem;
  width: 32px;
  width: 2rem;
  height: 32px;
  height: 2rem;
}
.switch.large input:checked ~ .switch-paddle::after {
  left: 44px;
  left: 2.75rem;
}

table {
  width: 100%;
  margin-bottom: 16px;
  margin-bottom: 1rem;
  border-radius: 0px;
  border-collapse: collapse;
}
thead,
tbody,
tfoot {
  border: 1px solid #f2f2f2;
  background-color: white;
}

caption {
  padding: 8px 10px 10px;
  padding: 0.5rem 0.625rem 0.625rem;
  font-weight: bold;
}

thead {
  background: #f9f9f9;
}

thead,tfoot {
  color: #131212;
}

tfoot {
  background: #f2f2f2;
}

thead tr,
tfoot tr {
  background: transparent;
}
thead th,
thead td,
tfoot th,
tfoot td {
  font-weight: bold;
  text-align: left;
}

thead th,
thead td,
tfoot th,
tfoot td,tbody th,
tbody td {
  padding: 8px 10px 10px;
  padding: 0.5rem 0.625rem 0.625rem;
}

tbody tr:nth-child(even) {
  border-bottom: 0;
  background-color: #f2f2f2;
}
table.unstriped tbody,table.unstriped tbody tr {
  background-color: white;
}
table.unstriped tbody tr {
  border-bottom: 0;
  border-bottom: 1px solid #f2f2f2;
}

@media print, screen and (max-width: 63.99875em) {
  table.stack thead,table.stack tfoot {
    display: none;
  }
  table.stack tr,
table.stack th,
table.stack td {
    display: block;
  }
  table.stack td {
    border-top: 0;
  }
}

table.scroll {
  display: block;
  width: 100%;
  overflow-x: auto;
}

table.hover thead tr:hover {
  background-color: #f4f4f4;
}
table.hover tfoot tr:hover {
  background-color: #ededed;
}
table.hover tbody tr:hover {
  background-color: #fafafa;
}
table.hover:not(.unstriped) tr:nth-of-type(even):hover {
  background-color: #ededed;
}

.table-scroll {
  overflow-x: auto;
}

.badge {
  display: inline-block;
  min-width: 2.1em;
  padding: 0.3em;
  border-radius: 50%;
  font-size: 9.6px;
  font-size: 0.6rem;
  text-align: center;
}
.badge,.badge.primary {
  background: #198dae;
  color: white;
}
.badge.secondary {
  background: #676a72;
  color: white;
}
.badge.success {
  background: #078a2e;
  color: white;
}
.badge.shade {
  background: #878585;
  color: #131212;
}
.badge.warning {
  background: #da8210;
  color: #131212;
}
.badge.alert {
  background: #dd1a1a;
  color: white;
}
.badge.navigation {
  background: #2b58c0;
  color: white;
}
.badge.accent {
  background: #16a385;
  color: #131212;
}
.badge.info {
  background: #a3988c;
  color: #131212;
}
.badge.highlight {
  background: #7742bd;
  color: white;
}
.badge.acc {
  background: #004176;
  color: white;
}

.breadcrumbs {
  margin: 0 0 16px 0;
  margin: 0 0 1rem 0;
  list-style: none;
}
.breadcrumbs::before, .breadcrumbs::after {
  display: table;
  flex-basis: 0;
  order: 1;
  content: " ";
}
.breadcrumbs::after {
  clear: both;
}
.breadcrumbs li {
  float: left;
  color: #131212;
  font-size: 11px;
  font-size: 0.6875rem;
  text-transform: uppercase;
  cursor: default;
}
.breadcrumbs li:not(:last-child)::after {
  position: relative;
  margin: 0 12px;
  margin: 0 0.75rem;
  content: "/";
  color: #cacaca;
  opacity: 1;
}
.breadcrumbs a {
  color: #198dae;
}
.breadcrumbs a:hover {
  text-decoration: underline;
}
.breadcrumbs .disabled {
  color: #cacaca;
  cursor: not-allowed;
}

.callout {
  position: relative;
  margin: 0 0 16px 0;
  margin: 0 0 1rem 0;
  padding: 16px;
  padding: 1rem;
  border: 1px solid rgba(19, 18, 18, 0.25);
  border-radius: 0px;
  background-color: white;
  color: #131212;
}
.callout > :first-child {
  margin-top: 0;
}
.callout > :last-child {
  margin-bottom: 0;
}
.callout.primary {
  background-color: #d6f1f9;
  color: #131212;
}
.callout.secondary {
  background-color: #e8e9ea;
  color: #131212;
}
.callout.success {
  background-color: #cbfcda;
  color: #131212;
}
.callout.shade {
  background-color: #ededed;
  color: #131212;
}
.callout.warning {
  background-color: #fcedd8;
  color: #131212;
}
.callout.alert {
  background-color: #fbdcdc;
  color: #131212;
}
.callout.navigation {
  background-color: #dde5f7;
  color: #131212;
}
.callout.accent {
  background-color: #d4f9f1;
  color: #131212;
}
.callout.info {
  background-color: #f1f0ee;
  color: #131212;
}
.callout.highlight {
  background-color: #ebe3f5;
  color: #131212;
}
.callout.acc {
  background-color: #c4e5ff;
  color: #131212;
}
.callout.small {
  padding-top: 8px;
  padding-top: 0.5rem;
  padding-right: 8px;
  padding-right: 0.5rem;
  padding-bottom: 8px;
  padding-bottom: 0.5rem;
  padding-left: 8px;
  padding-left: 0.5rem;
}
.callout.large {
  padding-top: 48px;
  padding-top: 3rem;
  padding-right: 48px;
  padding-right: 3rem;
  padding-bottom: 48px;
  padding-bottom: 3rem;
  padding-left: 48px;
  padding-left: 3rem;
}

.card {
  display: flex;
  flex-grow: 1;
  flex-direction: column;
  margin-bottom: 16px;
  margin-bottom: 1rem;
  overflow: hidden;
  border: 1px solid #e6e6e6;
  border-radius: 0px;
  background: white;
  box-shadow: none;
  color: #131212;
}
.card > :last-child {
  margin-bottom: 0;
}

.card-divider {
  display: flex;
  flex: 0 1 auto;
  padding: 16px;
  padding: 1rem;
  background: #e6e6e6;
}
.card-divider > :last-child {
  margin-bottom: 0;
}

.card-section {
  flex: 1 0 auto;
  padding: 16px;
  padding: 1rem;
}
.card-section > :last-child {
  margin-bottom: 0;
}

.card-image {
  min-height: 1px;
}

.dropdown-pane {
  display: none;
  visibility: hidden;
  z-index: 10;
  position: absolute;
  width: 300px;
  padding: 16px;
  padding: 1rem;
  border: 1px solid #cacaca;
  border-radius: 0px;
  background-color: white;
  font-size: 16px;
  font-size: 1rem;
}
.dropdown-pane.is-opening {
  display: block;
}
.dropdown-pane.is-open {
  display: block;
  visibility: visible;
}

.dropdown-pane.tiny {
  width: 100px;
}

.dropdown-pane.small {
  width: 200px;
}

.dropdown-pane.large {
  width: 400px;
}

.pagination {
  margin-bottom: 16px;
  margin-bottom: 1rem;
  margin-left: 0;
}
.pagination::before, .pagination::after {
  display: table;
  flex-basis: 0;
  order: 1;
  content: " ";
}
.pagination::after {
  clear: both;
}
.pagination li {
  display: none;
  margin-right: 1px;
  margin-right: 0.0625rem;
  border-radius: 0px;
  font-size: 14px;
  font-size: 0.875rem;
}
.pagination li:last-child, .pagination li:first-child {
  display: inline-block;
}
@media print, screen and (min-width: 40em) {
  .pagination li {
    display: inline-block;
  }
}
.pagination a,
.pagination button {
  display: block;
  padding: 3px 10px;
  padding: 0.1875rem 0.625rem;
  border-radius: 0px;
  color: #131212;
}
.pagination a:hover,
.pagination button:hover {
  background: #e6e6e6;
}
.pagination .current {
  background: #198dae;
  color: white;
  cursor: default;
}
.pagination .current,.pagination .disabled {
  padding: 3px 10px;
  padding: 0.1875rem 0.625rem;
}
.pagination .disabled {
  color: #cacaca;
  cursor: not-allowed;
}
.pagination .disabled:hover {
  background: transparent;
}
.pagination .ellipsis::after {
  padding: 3px 10px;
  padding: 0.1875rem 0.625rem;
  content: "…";
  color: #131212;
}

.has-tip {
  display: inline-block;
  position: relative;
  border-bottom: dotted 1px #8a8a8a;
  font-weight: bold;
  cursor: help;
}

.tooltip {
  z-index: 1200;
  top: calc(100% + 0.6495rem);
  max-width: 160px;
  max-width: 10rem;
  padding: 12px;
  padding: 0.75rem;
  border-radius: 0px;
  background-color: #131212;
  color: white;
  font-size: 80%;
}
.tooltip,.tooltip::before {
  position: absolute;
}
.tooltip.bottom::before {
  display: block;
  bottom: 100%;
  width: 0;
  height: 0;
  border-width: 12px;
  border-width: 0.75rem;
  border-top-width: 0;
  border-style: solid;
  border-color: transparent transparent #131212;
  content: "";
}
.tooltip.bottom.align-center::before {
  left: 50%;
  transform: translateX(-50%);
}
.tooltip.top::before {
  display: block;
  top: 100%;
  bottom: auto;
  width: 0;
  height: 0;
  border-width: 12px;
  border-width: 0.75rem;
  border-bottom-width: 0;
  border-style: solid;
  border-color: #131212 transparent transparent;
  content: "";
}
.tooltip.top.align-center::before {
  left: 50%;
  transform: translateX(-50%);
}
.tooltip.left::before {
  display: block;
  left: 100%;
  width: 0;
  height: 0;
  border-width: 12px;
  border-width: 0.75rem;
  border-right-width: 0;
  border-style: solid;
  border-color: transparent transparent transparent #131212;
  content: "";
}
.tooltip.left.align-center::before {
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
}
.tooltip.right::before {
  display: block;
  right: 100%;
  left: auto;
  width: 0;
  height: 0;
  border-width: 12px;
  border-width: 0.75rem;
  border-left-width: 0;
  border-style: solid;
  border-color: transparent #131212 transparent transparent;
  content: "";
}
.tooltip.right.align-center::before {
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
}
.tooltip.align-top::before {
  top: 10%;
  bottom: auto;
}
.tooltip.align-bottom::before {
  top: auto;
  bottom: 10%;
}
.tooltip.align-left::before {
  right: auto;
  left: 10%;
}
.tooltip.align-right::before {
  right: 10%;
  left: auto;
}

.accordion {
  margin-left: 0;
  background: white;
  list-style-type: none;
}
.accordion[disabled] .accordion-title {
  cursor: not-allowed;
}

.accordion-item:first-child > :first-child {
  border-radius: 0px 0px 0 0;
}
.accordion-item:last-child > :last-child {
  border-radius: 0 0 0px 0px;
}

.accordion-title {
  display: block;
  position: relative;
  padding: 20px 16px;
  padding: 1.25rem 1rem;
  border: 1px solid #e6e6e6;
  border-bottom: 0;
  color: #198dae;
  font-size: 12px;
  font-size: 0.75rem;
  line-height: 1;
}
:last-child:not(.is-active) > .accordion-title {
  border-bottom: 1px solid #e6e6e6;
  border-radius: 0 0 0px 0px;
}
.accordion-title:hover, .accordion-title:focus {
  background-color: #e6e6e6;
}

.accordion-content {
  display: none;
  padding: 16px;
  padding: 1rem;
  border: 1px solid #e6e6e6;
  border-bottom: 0;
  background-color: white;
  color: #131212;
}
:last-child > .accordion-content:last-child {
  border-bottom: 1px solid #e6e6e6;
}

.media-object {
  display: flex;
  flex-wrap: nowrap;
  margin-bottom: 16px;
  margin-bottom: 1rem;
}
.media-object img {
  max-width: none;
}
@media print, screen and (max-width: 39.99875em) {
  .media-object.stack-for-small {
    flex-wrap: wrap;
  }
}

.media-object-section {
  flex: 0 1 auto;
}
.media-object-section:first-child {
  padding-right: 16px;
  padding-right: 1rem;
}
.media-object-section:last-child:not(:nth-child(2)) {
  padding-left: 16px;
  padding-left: 1rem;
}
.media-object-section > :last-child {
  margin-bottom: 0;
}
@media print, screen and (max-width: 39.99875em) {
  .stack-for-small .media-object-section {
    flex-basis: 100%;
    max-width: 100%;
    padding: 0;
    padding-bottom: 1rem;
  }
  .stack-for-small .media-object-section img {
    width: 100%;
  }
}
.media-object-section.main-section {
  flex: 1 1 0px;
}

.orbit,.orbit-container {
  position: relative;
}

.orbit-container {
  height: 0;
  margin: 0;
  overflow: hidden;
  list-style: none;
}

.orbit-slide {
  position: absolute;
  width: 100%;
}
.orbit-slide.no-motionui.is-active {
  top: 0;
  left: 0;
}

.orbit-figure {
  margin: 0;
}

.orbit-image {
  width: 100%;
  max-width: 100%;
  margin: 0;
}

.orbit-caption {
  bottom: 0;
  width: 100%;
  margin-bottom: 0;
  background-color: rgba(19, 18, 18, 0.5);
}

.orbit-caption,.orbit-next, .orbit-previous {
  position: absolute;
  padding: 16px;
  padding: 1rem;
  color: white;
}

.orbit-next, .orbit-previous {
  z-index: 10;
  top: 50%;
  transform: translateY(-50%);
}
[data-whatinput=mouse] .orbit-next, [data-whatinput=mouse] .orbit-previous {
  outline: 0;
}
.orbit-next:hover, .orbit-previous:hover, .orbit-next:active, .orbit-previous:active, .orbit-next:focus, .orbit-previous:focus {
  background-color: rgba(19, 18, 18, 0.5);
}

.orbit-previous {
  left: 0;
}

.orbit-next {
  right: 0;
  left: auto;
}

.orbit-bullets {
  position: relative;
  margin-top: 12.8px;
  margin-top: 0.8rem;
  margin-bottom: 12.8px;
  margin-bottom: 0.8rem;
  text-align: center;
}
[data-whatinput=mouse] .orbit-bullets {
  outline: 0;
}
.orbit-bullets button {
  width: 19.2px;
  width: 1.2rem;
  height: 19.2px;
  height: 1.2rem;
  margin: 1.6px;
  margin: 0.1rem;
  border-radius: 50%;
  background-color: #cacaca;
}
.orbit-bullets button:hover,.orbit-bullets button.is-active {
  background-color: #8a8a8a;
}

.responsive-embed,
.flex-video {
  position: relative;
  height: 0;
  margin-bottom: 16px;
  margin-bottom: 1rem;
  padding-bottom: 75%;
  overflow: hidden;
}
.responsive-embed iframe,
.responsive-embed object,
.responsive-embed embed,
.responsive-embed video,
.flex-video iframe,
.flex-video object,
.flex-video embed,
.flex-video video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.responsive-embed.widescreen,
.flex-video.widescreen {
  padding-bottom: 56.25%;
}

.tabs {
  margin: 0;
  border: 1px solid #e6e6e6;
  background: white;
  list-style-type: none;
}
.tabs::before, .tabs::after {
  display: table;
  flex-basis: 0;
  order: 1;
  content: " ";
}
.tabs::after {
  clear: both;
}

.tabs.vertical > li {
  display: block;
  width: auto;
  float: none;
}

.tabs.simple > li > a {
  padding: 0;
}
.tabs.simple > li > a:hover {
  background: transparent;
}

.tabs.primary {
  background: #198dae;
}
.tabs.primary > li > a {
  color: white;
}
.tabs.primary > li > a:hover, .tabs.primary > li > a:focus {
  background: #1b98bc;
}

.tabs-title {
  float: left;
}
.tabs-title > a {
  display: block;
  padding: 8px 16px;
  padding: 0.5rem 1rem;
  color: #198dae;
  font-size: 1em;
  line-height: 1;
}
[data-whatinput=mouse] .tabs-title > a {
  outline: 0;
}
.tabs-title > a:hover {
  background: white;
  color: #167996;
}

.tabs-title > a:focus, .tabs-title > a[aria-selected=true],.tabs-content {
  background: white;
  color: #131212;
}

.tabs-content {
  border: 1px solid #e6e6e6;
  border-top: 0;
  transition: all 0.5s ease;
}

.tabs-content.vertical {
  border: 1px solid #e6e6e6;
  border-left: 0;
}

.tabs-panel {
  display: none;
  padding: 16px;
  padding: 1rem;
}
.tabs-panel.is-active {
  display: block;
}

.thumbnail {
  display: inline-block;
  max-width: 100%;
  margin-bottom: 16px;
  margin-bottom: 1rem;
  border: 4px solid white;
  border-radius: 0px;
  box-shadow: 0 0 0 1px rgba(19, 18, 18, 0.2);
  line-height: 0;
}

a.thumbnail {
  transition: box-shadow 200ms ease-out;
}
a.thumbnail:hover, a.thumbnail:focus {
  box-shadow: 0 0 6px 1px rgba(25, 141, 174, 0.5);
}
a.thumbnail image {
  box-shadow: none;
}

.menu {
  display: flex;
  position: relative;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
}
[data-whatinput=mouse] .menu li {
  outline: 0;
}
.menu a,
.menu .button {
  display: block;
  padding: 11.2px 16px;
  padding: 0.7rem 1rem;
  line-height: 1;
  text-decoration: none;
}
.menu input,
.menu select,
.menu a,
.menu button {
  margin-bottom: 0;
}
.menu input {
  display: inline-block;
}
.menu, .menu.horizontal {
  flex-direction: row;
  flex-wrap: wrap;
}
.menu.vertical {
  flex-direction: column;
  flex-wrap: nowrap;
}
.menu.vertical.icon-top li a img,
.menu.vertical.icon-top li a i,
.menu.vertical.icon-top li a svg, .menu.vertical.icon-bottom li a img,
.menu.vertical.icon-bottom li a i,
.menu.vertical.icon-bottom li a svg {
  text-align: left;
}
.menu.expanded li {
  flex: 1 1 0px;
}
.menu.expanded.icon-top li a img,
.menu.expanded.icon-top li a i,
.menu.expanded.icon-top li a svg, .menu.expanded.icon-bottom li a img,
.menu.expanded.icon-bottom li a i,
.menu.expanded.icon-bottom li a svg {
  text-align: left;
}
.menu.simple {
  align-items: center;
}
.menu.simple li + li {
  margin-left: 16px;
  margin-left: 1rem;
}
.menu.simple a {
  padding: 0;
}
@media print, screen and (min-width: 40em) {
  .menu.medium-horizontal {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .menu.medium-vertical {
    flex-direction: column;
    flex-wrap: nowrap;
  }
  .menu.medium-expanded li,.menu.medium-simple li {
    flex: 1 1 0px;
  }
}
@media print, screen and (min-width: 64em) {
  .menu.large-horizontal {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .menu.large-vertical {
    flex-direction: column;
    flex-wrap: nowrap;
  }
  .menu.large-expanded li,.menu.large-simple li {
    flex: 1 1 0px;
  }
}
.menu.nested {
  margin-right: 0;
  margin-left: 16px;
  margin-left: 1rem;
}
.menu.icons a,.menu.icon-top a, .menu.icon-right a, .menu.icon-bottom a, .menu.icon-left a {
  display: flex;
}
.menu.icon-left li a, .menu.nested.icon-left li a {
  flex-flow: row nowrap;
}
.menu.icon-left li a img,
.menu.icon-left li a i,
.menu.icon-left li a svg, .menu.nested.icon-left li a img,
.menu.nested.icon-left li a i,
.menu.nested.icon-left li a svg {
  margin-right: 4px;
  margin-right: 0.25rem;
}
.menu.icon-right li a, .menu.nested.icon-right li a {
  flex-flow: row nowrap;
}
.menu.icon-right li a img,
.menu.icon-right li a i,
.menu.icon-right li a svg, .menu.nested.icon-right li a img,
.menu.nested.icon-right li a i,
.menu.nested.icon-right li a svg {
  margin-left: 4px;
  margin-left: 0.25rem;
}
.menu.icon-top li a, .menu.nested.icon-top li a {
  flex-flow: column nowrap;
}
.menu.icon-top li a img,
.menu.icon-top li a i,
.menu.icon-top li a svg, .menu.nested.icon-top li a img,
.menu.nested.icon-top li a i,
.menu.nested.icon-top li a svg {
  align-self: stretch;
  margin-bottom: 4px;
  margin-bottom: 0.25rem;
  text-align: center;
}
.menu.icon-bottom li a, .menu.nested.icon-bottom li a {
  flex-flow: column nowrap;
}
.menu.icon-bottom li a img,
.menu.icon-bottom li a i,
.menu.icon-bottom li a svg, .menu.nested.icon-bottom li a img,
.menu.nested.icon-bottom li a i,
.menu.nested.icon-bottom li a svg {
  align-self: stretch;
  margin-bottom: 4px;
  margin-bottom: 0.25rem;
  text-align: center;
}
.menu .is-active > a,.menu .active > a {
  background: #198dae;
  color: white;
}
.menu.align-left {
  justify-content: flex-start;
}
.menu.align-right li {
  display: flex;
  justify-content: flex-end;
}
.menu.align-right li .submenu li {
  justify-content: flex-start;
}
.menu.align-right.vertical li {
  display: block;
  text-align: right;
}
.menu.align-right.vertical li .submenu li,.menu.align-right.icon-top li a img,
.menu.align-right.icon-top li a i,
.menu.align-right.icon-top li a svg, .menu.align-right.icon-bottom li a img,
.menu.align-right.icon-bottom li a i,
.menu.align-right.icon-bottom li a svg {
  text-align: right;
}
.menu.align-right .nested {
  margin-right: 16px;
  margin-right: 1rem;
  margin-left: 0;
}
.menu.align-center li {
  display: flex;
  justify-content: center;
}
.menu.align-center li .submenu li {
  justify-content: flex-start;
}
.menu .menu-text {
  padding: 11.2px 16px;
  padding: 0.7rem 1rem;
  color: inherit;
  font-weight: bold;
  line-height: 1;
}
.menu-centered > .menu,.menu-centered > .menu li {
  justify-content: center;
}
.menu-centered > .menu li {
  display: flex;
}
.menu-centered > .menu li .submenu li {
  justify-content: flex-start;
}

.no-js [data-responsive-menu] ul {
  display: none;
}

.menu-icon {
  display: inline-block;
  position: relative;
  width: 20px;
  height: 16px;
  vertical-align: middle;
  cursor: pointer;
}
.menu-icon::after {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: white;
  box-shadow: 0 7px 0 white, 0 14px 0 white;
  content: "";
}
.menu-icon:hover::after {
  background: #cacaca;
  box-shadow: 0 7px 0 #cacaca, 0 14px 0 #cacaca;
}

.menu-icon.dark {
  display: inline-block;
  position: relative;
  width: 20px;
  height: 16px;
  vertical-align: middle;
  cursor: pointer;
}
.menu-icon.dark::after {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: #131212;
  box-shadow: 0 7px 0 #131212, 0 14px 0 #131212;
  content: "";
}
.menu-icon.dark:hover::after {
  background: #8a8a8a;
  box-shadow: 0 7px 0 #8a8a8a, 0 14px 0 #8a8a8a;
}

.accordion-menu li {
  width: 100%;
}
.accordion-menu a,.accordion-menu .is-accordion-submenu a {
  padding: 11.2px 16px;
  padding: 0.7rem 1rem;
}
.accordion-menu .nested.is-accordion-submenu {
  margin-right: 0;
  margin-left: 16px;
  margin-left: 1rem;
}
.accordion-menu.align-right .nested.is-accordion-submenu {
  margin-right: 16px;
  margin-right: 1rem;
  margin-left: 0;
}
.accordion-menu .is-accordion-submenu-parent:not(.has-submenu-toggle) > a {
  position: relative;
}
.accordion-menu .is-accordion-submenu-parent:not(.has-submenu-toggle) > a::after {
  display: block;
  position: absolute;
  top: 50%;
  right: 16px;
  right: 1rem;
  width: 0;
  height: 0;
  margin-top: -3px;
  border-width: 6px;
  border-bottom-width: 0;
  border-style: solid;
  border-color: #198dae transparent transparent;
  content: "";
}
.accordion-menu.align-left .is-accordion-submenu-parent > a::after {
  right: 16px;
  right: 1rem;
  left: auto;
}
.accordion-menu.align-right .is-accordion-submenu-parent > a::after {
  right: auto;
  left: 16px;
  left: 1rem;
}
.accordion-menu .is-accordion-submenu-parent[aria-expanded=true] > a::after {
  transform: rotate(180deg);
  transform-origin: 50% 50%;
}

.is-accordion-submenu-parent {
  position: relative;
}

.has-submenu-toggle > a {
  margin-right: 40px;
}

.submenu-toggle {
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  height: 40px;
  cursor: pointer;
}
.submenu-toggle::after {
  display: block;
  top: 0;
  bottom: 0;
  width: 0;
  height: 0;
  margin: auto;
  border-width: 6px;
  border-bottom-width: 0;
  border-style: solid;
  border-color: #198dae transparent transparent;
  content: "";
}

.submenu-toggle[aria-expanded=true]::after {
  transform: scaleY(-1);
  transform-origin: 50% 50%;
}

.submenu-toggle-text {
  clip: rect(0, 0, 0, 0) !important;
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  white-space: nowrap !important;
}

.is-drilldown {
  position: relative;
  overflow: hidden;
}
.is-drilldown li {
  display: block;
}
.is-drilldown.animate-height {
  transition: height 0.5s;
}

.drilldown a {
  padding: 11.2px 16px;
  padding: 0.7rem 1rem;
  background: white;
}
.drilldown .is-drilldown-submenu {
  z-index: -1;
  position: absolute;
  top: 0;
  left: 100%;
  width: 100%;
  background: white;
  transition: transform 0.15s linear;
}
.drilldown .is-drilldown-submenu.is-active {
  display: block;
  z-index: 1;
  transform: translateX(-100%);
}
.drilldown .is-drilldown-submenu.is-closing {
  transform: translateX(100%);
}
.drilldown .is-drilldown-submenu a {
  padding: 11.2px 16px;
  padding: 0.7rem 1rem;
}
.drilldown .nested.is-drilldown-submenu {
  margin-right: 0;
  margin-left: 0;
}
.drilldown .drilldown-submenu-cover-previous {
  min-height: 100%;
}
.drilldown .is-drilldown-submenu-parent > a {
  position: relative;
}
.drilldown .is-drilldown-submenu-parent > a::after {
  position: absolute;
  top: 50%;
  margin-top: -6px;
}
.drilldown .is-drilldown-submenu-parent > a::after,.drilldown.align-left .is-drilldown-submenu-parent > a::after {
  display: block;
  right: 16px;
  right: 1rem;
  width: 0;
  height: 0;
  border-width: 6px;
  border-right-width: 0;
  border-style: solid;
  border-color: transparent transparent transparent #198dae;
  content: "";
}
.drilldown.align-left .is-drilldown-submenu-parent > a::after {
  left: auto;
}
.drilldown.align-right .is-drilldown-submenu-parent > a::after {
  right: auto;
  left: 16px;
  left: 1rem;
}
.drilldown.align-right .is-drilldown-submenu-parent > a::after,.drilldown .js-drilldown-back > a::before {
  display: block;
  width: 0;
  height: 0;
  border-width: 6px;
  border-left-width: 0;
  border-style: solid;
  border-color: transparent #198dae transparent transparent;
  content: "";
}
.drilldown .js-drilldown-back > a::before {
  display: inline-block;
  margin-right: 12px;
  margin-right: 0.75rem;
  vertical-align: middle;
}

.dropdown.menu > li.opens-left > .is-dropdown-submenu {
  top: 100%;
  right: 0;
  left: auto;
}
.dropdown.menu > li.opens-right > .is-dropdown-submenu {
  top: 100%;
  right: auto;
  left: 0;
}
.dropdown.menu > li.is-dropdown-submenu-parent > a {
  position: relative;
  padding-right: 24px;
  padding-right: 1.5rem;
}
.dropdown.menu > li.is-dropdown-submenu-parent > a::after {
  display: block;
  right: 5px;
  left: auto;
  width: 0;
  height: 0;
  margin-top: -3px;
  border-width: 6px;
  border-bottom-width: 0;
  border-style: solid;
  border-color: #198dae transparent transparent;
  content: "";
}
[data-whatinput=mouse] .dropdown.menu a {
  outline: 0;
}
.dropdown.menu > li > a {
  padding: 11.2px 16px;
  padding: 0.7rem 1rem;
  background: white;
}
.dropdown.menu > li.is-active > a {
  background: transparent;
  color: #198dae;
}
.no-js .dropdown.menu ul {
  display: none;
}
.dropdown.menu .nested.is-dropdown-submenu {
  margin-right: 0;
  margin-left: 0;
}
.dropdown.menu.vertical > li .is-dropdown-submenu {
  top: 0;
}
.dropdown.menu.vertical > li.opens-left > .is-dropdown-submenu {
  top: 0;
  right: 100%;
  left: auto;
}
.dropdown.menu.vertical > li.opens-right > .is-dropdown-submenu {
  right: auto;
  left: 100%;
}
.dropdown.menu.vertical > li > a::after {
  right: 14px;
}
.dropdown.menu.vertical > li.opens-left > a::after {
  display: block;
  right: auto;
  left: 5px;
  width: 0;
  height: 0;
  border-width: 6px;
  border-left-width: 0;
  border-style: solid;
  border-color: transparent #198dae transparent transparent;
  content: "";
}
.dropdown.menu.vertical > li.opens-right > a::after {
  display: block;
  width: 0;
  height: 0;
  border-width: 6px;
  border-right-width: 0;
  border-style: solid;
  border-color: transparent transparent transparent #198dae;
  content: "";
}
@media print, screen and (min-width: 40em) {
  .dropdown.menu.medium-horizontal > li.opens-left > .is-dropdown-submenu {
    top: 100%;
    right: 0;
    left: auto;
  }
  .dropdown.menu.medium-horizontal > li.opens-right > .is-dropdown-submenu {
    top: 100%;
    right: auto;
    left: 0;
  }
  .dropdown.menu.medium-horizontal > li.is-dropdown-submenu-parent > a {
    position: relative;
    padding-right: 1.5rem;
  }
  .dropdown.menu.medium-horizontal > li.is-dropdown-submenu-parent > a::after {
    display: block;
    right: 5px;
    left: auto;
    width: 0;
    height: 0;
    margin-top: -3px;
    border-width: 6px;
    border-bottom-width: 0;
    border-style: solid;
    border-color: #198dae transparent transparent;
    content: "";
  }
  .dropdown.menu.medium-vertical > li .is-dropdown-submenu {
    top: 0;
  }
  .dropdown.menu.medium-vertical > li.opens-left > .is-dropdown-submenu {
    top: 0;
    right: 100%;
    left: auto;
  }
  .dropdown.menu.medium-vertical > li.opens-right > .is-dropdown-submenu {
    right: auto;
    left: 100%;
  }
  .dropdown.menu.medium-vertical > li > a::after {
    right: 14px;
  }
  .dropdown.menu.medium-vertical > li.opens-left > a::after {
    display: block;
    right: auto;
    left: 5px;
    width: 0;
    height: 0;
    border-width: 6px;
    border-left-width: 0;
    border-style: solid;
    border-color: transparent #198dae transparent transparent;
    content: "";
  }
  .dropdown.menu.medium-vertical > li.opens-right > a::after {
    display: block;
    width: 0;
    height: 0;
    border-width: 6px;
    border-right-width: 0;
    border-style: solid;
    border-color: transparent transparent transparent #198dae;
    content: "";
  }
}
@media print, screen and (min-width: 64em) {
  .dropdown.menu.large-horizontal > li.opens-left > .is-dropdown-submenu {
    top: 100%;
    right: 0;
    left: auto;
  }
  .dropdown.menu.large-horizontal > li.opens-right > .is-dropdown-submenu {
    top: 100%;
    right: auto;
    left: 0;
  }
  .dropdown.menu.large-horizontal > li.is-dropdown-submenu-parent > a {
    position: relative;
    padding-right: 1.5rem;
  }
  .dropdown.menu.large-horizontal > li.is-dropdown-submenu-parent > a::after {
    display: block;
    right: 5px;
    left: auto;
    width: 0;
    height: 0;
    margin-top: -3px;
    border-width: 6px;
    border-bottom-width: 0;
    border-style: solid;
    border-color: #198dae transparent transparent;
    content: "";
  }
  .dropdown.menu.large-vertical > li .is-dropdown-submenu {
    top: 0;
  }
  .dropdown.menu.large-vertical > li.opens-left > .is-dropdown-submenu {
    top: 0;
    right: 100%;
    left: auto;
  }
  .dropdown.menu.large-vertical > li.opens-right > .is-dropdown-submenu {
    right: auto;
    left: 100%;
  }
  .dropdown.menu.large-vertical > li > a::after {
    right: 14px;
  }
  .dropdown.menu.large-vertical > li.opens-left > a::after {
    display: block;
    right: auto;
    left: 5px;
    width: 0;
    height: 0;
    border-width: 6px;
    border-left-width: 0;
    border-style: solid;
    border-color: transparent #198dae transparent transparent;
    content: "";
  }
  .dropdown.menu.large-vertical > li.opens-right > a::after {
    display: block;
    width: 0;
    height: 0;
    border-width: 6px;
    border-right-width: 0;
    border-style: solid;
    border-color: transparent transparent transparent #198dae;
    content: "";
  }
}
.dropdown.menu.align-right .is-dropdown-submenu.first-sub {
  top: 100%;
  right: 0;
  left: auto;
}

.is-dropdown-menu.vertical {
  width: 100px;
}
.is-dropdown-menu.vertical.align-right {
  float: right;
}

.is-dropdown-submenu-parent {
  position: relative;
}
.is-dropdown-submenu-parent a::after {
  position: absolute;
  top: 50%;
  right: 5px;
  left: auto;
  margin-top: -6px;
}
.is-dropdown-submenu-parent.opens-inner > .is-dropdown-submenu {
  top: 100%;
  left: auto;
}
.is-dropdown-submenu-parent.opens-left > .is-dropdown-submenu {
  right: 100%;
  left: auto;
}
.is-dropdown-submenu-parent.opens-right > .is-dropdown-submenu {
  right: auto;
  left: 100%;
}

.is-dropdown-submenu {
  display: none;
  z-index: 1;
  position: absolute;
  top: 0;
  left: 100%;
  min-width: 200px;
  border: 1px solid #cacaca;
  background: white;
}
.dropdown .is-dropdown-submenu a {
  padding: 11.2px 16px;
  padding: 0.7rem 1rem;
}
.is-dropdown-submenu .is-dropdown-submenu-parent > a::after {
  right: 14px;
}
.is-dropdown-submenu .is-dropdown-submenu-parent.opens-left > a::after {
  display: block;
  right: auto;
  left: 5px;
  width: 0;
  height: 0;
  border-width: 6px;
  border-left-width: 0;
  border-style: solid;
  border-color: transparent #198dae transparent transparent;
  content: "";
}
.is-dropdown-submenu .is-dropdown-submenu-parent.opens-right > a::after {
  display: block;
  width: 0;
  height: 0;
  border-width: 6px;
  border-right-width: 0;
  border-style: solid;
  border-color: transparent transparent transparent #198dae;
  content: "";
}
.is-dropdown-submenu .is-dropdown-submenu {
  margin-top: -1px;
}
.is-dropdown-submenu > li {
  width: 100%;
}
.is-dropdown-submenu.js-dropdown-active {
  display: block;
}

.is-off-canvas-open {
  overflow: hidden;
}

.js-off-canvas-overlay {
  visibility: hidden;
  z-index: 11;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.25);
  opacity: 0;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}
.js-off-canvas-overlay.is-visible {
  visibility: visible;
  opacity: 1;
}
.js-off-canvas-overlay.is-closable {
  cursor: pointer;
}
.js-off-canvas-overlay.is-overlay-absolute {
  position: absolute;
}
.js-off-canvas-overlay.is-overlay-fixed {
  position: fixed;
}

.off-canvas-wrapper {
  position: relative;
  overflow: hidden;
}

.off-canvas {
  z-index: 12;
  position: fixed;
  backface-visibility: hidden;
  background: #e6e6e6;
  transition: transform 0.5s ease;
}
[data-whatinput=mouse] .off-canvas {
  outline: 0;
}
.off-canvas.is-transition-push {
  z-index: 12;
}
.off-canvas.is-closed {
  visibility: hidden;
}
.off-canvas.is-transition-overlap {
  z-index: 13;
}
.off-canvas.is-transition-overlap.is-open {
  box-shadow: 0 0 10px rgba(19, 18, 18, 0.7);
}
.off-canvas.is-open {
  transform: translate(0, 0);
}
.off-canvas-absolute {
  z-index: 12;
  position: absolute;
  backface-visibility: hidden;
  background: #e6e6e6;
  transition: transform 0.5s ease;
}
[data-whatinput=mouse] .off-canvas-absolute {
  outline: 0;
}
.off-canvas-absolute.is-transition-push {
  z-index: 12;
}
.off-canvas-absolute.is-closed {
  visibility: hidden;
}
.off-canvas-absolute.is-transition-overlap {
  z-index: 13;
}
.off-canvas-absolute.is-transition-overlap.is-open {
  box-shadow: 0 0 10px rgba(19, 18, 18, 0.7);
}
.off-canvas-absolute.is-open {
  transform: translate(0, 0);
}

.position-left {
  top: 0;
  left: 0;
  width: 250px;
  height: 100%;
  overflow-y: auto;
}
.position-left,.off-canvas-content .off-canvas.position-left {
  transform: translateX(-250px);
}
.off-canvas-content .off-canvas.position-left.is-transition-overlap.is-open {
  transform: translate(0, 0);
}

.off-canvas-content.is-open-left.has-transition-push {
  transform: translateX(250px);
}

.position-left.is-transition-push {
  box-shadow: inset -13px 0 20px -13px rgba(19, 18, 18, 0.25);
}

.position-right {
  top: 0;
  right: 0;
  width: 250px;
  height: 100%;
  overflow-y: auto;
}
.position-right,.off-canvas-content .off-canvas.position-right {
  transform: translateX(250px);
}
.off-canvas-content .off-canvas.position-right.is-transition-overlap.is-open {
  transform: translate(0, 0);
}

.off-canvas-content.is-open-right.has-transition-push {
  transform: translateX(-250px);
}

.position-right.is-transition-push {
  box-shadow: inset 13px 0 20px -13px rgba(19, 18, 18, 0.25);
}

.position-top {
  top: 0;
  left: 0;
  width: 100%;
  height: 250px;
  overflow-x: auto;
}
.position-top,.off-canvas-content .off-canvas.position-top {
  transform: translateY(-250px);
}
.off-canvas-content .off-canvas.position-top.is-transition-overlap.is-open {
  transform: translate(0, 0);
}

.off-canvas-content.is-open-top.has-transition-push {
  transform: translateY(250px);
}

.position-top.is-transition-push {
  box-shadow: inset 0 -13px 20px -13px rgba(19, 18, 18, 0.25);
}

.position-bottom {
  bottom: 0;
  left: 0;
  width: 100%;
  height: 250px;
  overflow-x: auto;
}
.position-bottom,.off-canvas-content .off-canvas.position-bottom {
  transform: translateY(250px);
}
.off-canvas-content .off-canvas.position-bottom.is-transition-overlap.is-open {
  transform: translate(0, 0);
}

.off-canvas-content.is-open-bottom.has-transition-push {
  transform: translateY(-250px);
}

.position-bottom.is-transition-push {
  box-shadow: inset 0 13px 20px -13px rgba(19, 18, 18, 0.25);
}

.off-canvas-content {
  transform: none;
  backface-visibility: hidden;
}
.off-canvas-content.has-transition-overlap, .off-canvas-content.has-transition-push {
  transition: transform 0.5s ease;
}
.off-canvas-content.has-transition-push,.off-canvas-content .off-canvas.is-open {
  transform: translate(0, 0);
}

@media print, screen and (min-width: 40em) {
  .position-left.reveal-for-medium {
    visibility: visible;
    z-index: 12;
    transform: none;
    transition: none;
  }
  .position-left.reveal-for-medium .close-button {
    display: none;
  }
  .off-canvas-content .position-left.reveal-for-medium {
    transform: none;
  }

  .off-canvas-content.has-reveal-left,.position-left.reveal-for-medium ~ .off-canvas-content {
    margin-left: 250px;
  }

  .position-right.reveal-for-medium {
    visibility: visible;
    z-index: 12;
    transform: none;
    transition: none;
  }
  .position-right.reveal-for-medium .close-button {
    display: none;
  }
  .off-canvas-content .position-right.reveal-for-medium {
    transform: none;
  }

  .off-canvas-content.has-reveal-right,.position-right.reveal-for-medium ~ .off-canvas-content {
    margin-right: 250px;
  }

  .position-top.reveal-for-medium {
    visibility: visible;
    z-index: 12;
    transform: none;
    transition: none;
  }
  .position-top.reveal-for-medium .close-button {
    display: none;
  }
  .off-canvas-content .position-top.reveal-for-medium {
    transform: none;
  }

  .off-canvas-content.has-reveal-top,.position-top.reveal-for-medium ~ .off-canvas-content {
    margin-top: 250px;
  }

  .position-bottom.reveal-for-medium {
    visibility: visible;
    z-index: 12;
    transform: none;
    transition: none;
  }
  .position-bottom.reveal-for-medium .close-button {
    display: none;
  }
  .off-canvas-content .position-bottom.reveal-for-medium {
    transform: none;
  }

  .off-canvas-content.has-reveal-bottom,.position-bottom.reveal-for-medium ~ .off-canvas-content {
    margin-bottom: 250px;
  }
}
@media print, screen and (min-width: 64em) {
  .position-left.reveal-for-large {
    visibility: visible;
    z-index: 12;
    transform: none;
    transition: none;
  }
  .position-left.reveal-for-large .close-button {
    display: none;
  }
  .off-canvas-content .position-left.reveal-for-large {
    transform: none;
  }

  .off-canvas-content.has-reveal-left,.position-left.reveal-for-large ~ .off-canvas-content {
    margin-left: 250px;
  }

  .position-right.reveal-for-large {
    visibility: visible;
    z-index: 12;
    transform: none;
    transition: none;
  }
  .position-right.reveal-for-large .close-button {
    display: none;
  }
  .off-canvas-content .position-right.reveal-for-large {
    transform: none;
  }

  .off-canvas-content.has-reveal-right,.position-right.reveal-for-large ~ .off-canvas-content {
    margin-right: 250px;
  }

  .position-top.reveal-for-large {
    visibility: visible;
    z-index: 12;
    transform: none;
    transition: none;
  }
  .position-top.reveal-for-large .close-button {
    display: none;
  }
  .off-canvas-content .position-top.reveal-for-large {
    transform: none;
  }

  .off-canvas-content.has-reveal-top,.position-top.reveal-for-large ~ .off-canvas-content {
    margin-top: 250px;
  }

  .position-bottom.reveal-for-large {
    visibility: visible;
    z-index: 12;
    transform: none;
    transition: none;
  }
  .position-bottom.reveal-for-large .close-button {
    display: none;
  }
  .off-canvas-content .position-bottom.reveal-for-large {
    transform: none;
  }

  .off-canvas-content.has-reveal-bottom,.position-bottom.reveal-for-large ~ .off-canvas-content {
    margin-bottom: 250px;
  }
}
@media print, screen and (min-width: 40em) {
  .off-canvas.in-canvas-for-medium {
    visibility: visible;
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    background: none;
    transition: none;
  }
  .off-canvas.in-canvas-for-medium.position-left, .off-canvas.in-canvas-for-medium.position-right, .off-canvas.in-canvas-for-medium.position-top, .off-canvas.in-canvas-for-medium.position-bottom {
    transform: none;
    box-shadow: none;
  }
  .off-canvas.in-canvas-for-medium .close-button {
    display: none;
  }
}
@media print, screen and (min-width: 64em) {
  .off-canvas.in-canvas-for-large {
    visibility: visible;
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    background: none;
    transition: none;
  }
  .off-canvas.in-canvas-for-large.position-left, .off-canvas.in-canvas-for-large.position-right, .off-canvas.in-canvas-for-large.position-top, .off-canvas.in-canvas-for-large.position-bottom {
    transform: none;
    box-shadow: none;
  }
  .off-canvas.in-canvas-for-large .close-button {
    display: none;
  }
}
html.is-reveal-open {
  position: fixed;
  width: 100%;
  overflow-y: hidden;
}
html.is-reveal-open.zf-has-scroll {
  overflow-y: scroll;
}
html.is-reveal-open body {
  overflow-y: hidden;
}

.reveal-overlay {
  z-index: 1005;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(19, 18, 18, 0.45);
}

.reveal-overlay,.reveal {
  display: none;
  overflow-y: auto;
}

.reveal {
  z-index: 1006;
  position: relative;
  top: 100px;
  margin-right: auto;
  margin-left: auto;
  padding: 16px;
  padding: 1rem;
  border: 1px solid #cacaca;
  border-radius: 0px;
  backface-visibility: hidden;
  background-color: white;
}
[data-whatinput=mouse] .reveal {
  outline: 0;
}
@media print, screen and (min-width: 40em) {
  .reveal {
    min-height: 0;
  }
}
.reveal .column {
  min-width: 0;
}
.reveal > :last-child {
  margin-bottom: 0;
}
@media print, screen and (min-width: 40em) {
  .reveal {
    width: 600px;
    max-width: 87.5rem;
  }
}
.reveal.collapse {
  padding: 0;
}
@media print, screen and (min-width: 40em) {
  .reveal.tiny {
    width: 30%;
    max-width: 87.5rem;
  }
  .reveal.small {
    width: 50%;
    max-width: 87.5rem;
  }
  .reveal.large {
    width: 90%;
    max-width: 87.5rem;
  }
}
@media print, screen and (min-width: 40em) {
}
@media print, screen and (min-width: 40em) {
}
.reveal.full {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  min-height: 100%;
  margin-left: 0;
  border: 0;
  border-radius: 0;
}
@media print, screen and (max-width: 39.99875em) {
  .reveal {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    max-width: none;
    height: 100%;
    min-height: 100%;
    margin-left: 0;
    border: 0;
    border-radius: 0;
  }
}
.reveal.without-overlay {
  position: fixed;
}

.sticky-container,.sticky {
  position: relative;
}

.sticky {
  z-index: 0;
  transform: translate3d(0, 0, 0);
}

.sticky.is-stuck {
  z-index: 5;
  position: fixed;
  width: 100%;
}
.sticky.is-stuck.is-at-top {
  top: 0;
}
.sticky.is-stuck.is-at-bottom {
  bottom: 0;
}

.sticky.is-anchored {
  position: relative;
  right: auto;
  left: auto;
}
.sticky.is-anchored.is-at-bottom {
  bottom: 0;
}

.title-bar {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 8px;
  padding: 0.5rem;
  background: #131212;
  color: white;
}
.title-bar .menu-icon {
  margin-right: 4px;
  margin-right: 0.25rem;
  margin-left: 4px;
  margin-left: 0.25rem;
}

.title-bar-left,
.title-bar-right {
  flex: 1 1 0px;
}

.title-bar-right {
  text-align: right;
}

.title-bar-title {
  display: inline-block;
  font-weight: bold;
  vertical-align: middle;
}

.top-bar {
  display: flex;
  flex-wrap: nowrap;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  padding: 8px;
  padding: 0.5rem;
}
.top-bar,
.top-bar ul {
  background-color: #e6e6e6;
}
.top-bar input {
  max-width: 200px;
  margin-right: 16px;
  margin-right: 1rem;
}
.top-bar .input-group-field {
  width: 100%;
  margin-right: 0;
}
.top-bar input.button {
  width: auto;
}
.top-bar .top-bar-left,
.top-bar .top-bar-right {
  flex: 0 0 100%;
  max-width: 100%;
}
@media print, screen and (min-width: 40em) {
  .top-bar {
    flex-wrap: nowrap;
  }
  .top-bar .top-bar-left {
    flex: 1 1 auto;
    margin-right: auto;
  }
  .top-bar .top-bar-right {
    flex: 0 1 auto;
    margin-left: auto;
  }
}
@media print, screen and (max-width: 63.99875em) {
  .top-bar.stacked-for-medium {
    flex-wrap: wrap;
  }
  .top-bar.stacked-for-medium .top-bar-left,
.top-bar.stacked-for-medium .top-bar-right {
    flex: 0 0 100%;
    max-width: 100%;
  }
}
@media print, screen and (max-width: 74.99875em) {
  .top-bar.stacked-for-large {
    flex-wrap: wrap;
  }
  .top-bar.stacked-for-large .top-bar-left,
.top-bar.stacked-for-large .top-bar-right {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

.top-bar-title {
  margin: 8px 16px 8px 0;
  margin: 0.5rem 1rem 0.5rem 0;
}

.top-bar-title,.top-bar-left,
.top-bar-right {
  flex: 0 0 auto;
}

.float-left {
  float: left !important;
}

.float-right {
  float: right !important;
}

.float-center {
  display: block;
  margin-right: auto;
  margin-left: auto;
}

.clearfix::before, .clearfix::after {
  display: table;
  flex-basis: 0;
  order: 1;
  content: " ";
}
.clearfix::after {
  clear: both;
}

.align-left {
  justify-content: flex-start;
}

.align-right {
  justify-content: flex-end;
}

.align-center {
  justify-content: center;
}

.align-justify {
  justify-content: space-between;
}

.align-spaced {
  justify-content: space-around;
}

.align-left.vertical.menu > li > a {
  justify-content: flex-start;
}

.align-right.vertical.menu > li > a {
  justify-content: flex-end;
}

.align-center.vertical.menu > li > a {
  justify-content: center;
}

.align-top {
  align-items: flex-start;
}

.align-self-top {
  align-self: flex-start;
}

.align-bottom {
  align-items: flex-end;
}

.align-self-bottom {
  align-self: flex-end;
}

.align-middle {
  align-items: center;
}

.align-self-middle {
  align-self: center;
}

.align-stretch {
  align-items: stretch;
}

.align-self-stretch {
  align-self: stretch;
}

.align-center-middle {
  align-content: center;
  align-items: center;
  justify-content: center;
}

.small-order-1 {
  order: 1;
}

.small-order-2 {
  order: 2;
}

.small-order-3 {
  order: 3;
}

.small-order-4 {
  order: 4;
}

.small-order-5 {
  order: 5;
}

.small-order-6 {
  order: 6;
}

@media print, screen and (min-width: 40em) {
  .medium-order-1 {
    order: 1;
  }

  .medium-order-2 {
    order: 2;
  }

  .medium-order-3 {
    order: 3;
  }

  .medium-order-4 {
    order: 4;
  }

  .medium-order-5 {
    order: 5;
  }

  .medium-order-6 {
    order: 6;
  }
}
@media print, screen and (min-width: 64em) {
  .large-order-1 {
    order: 1;
  }

  .large-order-2 {
    order: 2;
  }

  .large-order-3 {
    order: 3;
  }

  .large-order-4 {
    order: 4;
  }

  .large-order-5 {
    order: 5;
  }

  .large-order-6 {
    order: 6;
  }
}
.flex-container {
  display: flex;
}

.flex-child-auto {
  flex: 1 1 auto;
}

.flex-child-grow {
  flex: 1 0 auto;
}

.flex-child-shrink {
  flex: 0 1 auto;
}

.flex-dir-row {
  flex-direction: row;
}

.flex-dir-row-reverse {
  flex-direction: row-reverse;
}

.flex-dir-column {
  flex-direction: column;
}

.flex-dir-column-reverse {
  flex-direction: column-reverse;
}

@media print, screen and (min-width: 40em) {
  .medium-flex-container {
    display: flex;
  }

  .medium-flex-child-auto {
    flex: 1 1 auto;
  }

  .medium-flex-child-grow {
    flex: 1 0 auto;
  }

  .medium-flex-child-shrink {
    flex: 0 1 auto;
  }

  .medium-flex-dir-row {
    flex-direction: row;
  }

  .medium-flex-dir-row-reverse {
    flex-direction: row-reverse;
  }

  .medium-flex-dir-column {
    flex-direction: column;
  }

  .medium-flex-dir-column-reverse {
    flex-direction: column-reverse;
  }
}
@media print, screen and (min-width: 64em) {
  .large-flex-container {
    display: flex;
  }

  .large-flex-child-auto {
    flex: 1 1 auto;
  }

  .large-flex-child-grow {
    flex: 1 0 auto;
  }

  .large-flex-child-shrink {
    flex: 0 1 auto;
  }

  .large-flex-dir-row {
    flex-direction: row;
  }

  .large-flex-dir-row-reverse {
    flex-direction: row-reverse;
  }

  .large-flex-dir-column {
    flex-direction: column;
  }

  .large-flex-dir-column-reverse {
    flex-direction: column-reverse;
  }
}
.hide {
  display: none !important;
}

.invisible {
  visibility: hidden;
}

.visible {
  visibility: visible;
}

@media print, screen and (max-width: 39.99875em) {
  .hide-for-small-only {
    display: none !important;
  }
}

@media screen and (max-width: 0em), screen and (min-width: 40em) {
  .show-for-small-only {
    display: none !important;
  }
}

@media print, screen and (min-width: 40em) {
  .hide-for-medium {
    display: none !important;
  }
}

@media screen and (max-width: 39.99875em) {
  .show-for-medium {
    display: none !important;
  }
}

@media print, screen and (min-width: 40em) and (max-width: 63.99875em) {
  .hide-for-medium-only {
    display: none !important;
  }
}

@media screen and (max-width: 39.99875em), screen and (min-width: 64em) {
  .show-for-medium-only {
    display: none !important;
  }
}

@media print, screen and (min-width: 64em) {
  .hide-for-large {
    display: none !important;
  }
}

@media screen and (max-width: 63.99875em) {
  .show-for-large {
    display: none !important;
  }
}

@media print, screen and (min-width: 64em) and (max-width: 74.99875em) {
  .hide-for-large-only {
    display: none !important;
  }
}

@media screen and (max-width: 63.99875em), screen and (min-width: 75em) {
  .show-for-large-only {
    display: none !important;
  }
}

.show-for-sr,
.show-on-focus {
  clip: rect(0, 0, 0, 0) !important;
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  white-space: nowrap !important;
}

.show-on-focus:active, .show-on-focus:focus {
  clip: auto !important;
  position: static !important;
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
  white-space: normal !important;
}

.show-for-landscape,
.hide-for-portrait {
  display: block !important;
}
@media screen and (orientation: landscape) {
  .show-for-landscape,
.hide-for-portrait {
    display: block !important;
  }
}
@media screen and (orientation: portrait) {
  .show-for-landscape,
.hide-for-portrait {
    display: none !important;
  }
}

.hide-for-landscape,
.show-for-portrait {
  display: none !important;
}
@media screen and (orientation: landscape) {
  .hide-for-landscape,
.show-for-portrait {
    display: none !important;
  }
}
@media screen and (orientation: portrait) {
  .hide-for-landscape,
.show-for-portrait {
    display: block !important;
  }
}

/*
	Foundation

	Combination of UCs and Base Components from the Framework can make an infinate amount of alterations to designs and layouts. Bellow are some alteratoins to Foudations Components with the Utiltity Classes. 

	Weight: 1000

	Styleguide  Recipes Zurb

*/
/* Styleguide recipes.zurb */
/* Styleguide Recipes.010 */
/*
	Quicklinks

	small list navs used in header structures of websites.

	<ul class="menu quicklinks ul_none">
		<li class="quicklinks__item br_solid br_0 br-r_1 br_primary-1 p-x_2"><a href="#" class="quicklinks__link h:bg_primary-5 c_black font_n1 lh_1 p-x_2">First</a></li>
		<li class="quicklinks__item br_solid br_0 br-r_1 br_primary-1 p-x_2"><a href="#" class="quicklinks__link h:bg_primary-5 c_black font_n1 lh_1 p-x_2">One</a></li>
		<li class="quicklinks__item br_solid br_0 br-r_1 br_primary-1 p-x_2"><a href="#" class="quicklinks__link h:bg_primary-5 c_black font_n1 lh_1 p-x_2">Two</a></li>
		<li class="quicklinks__item br_solid br_0 br-r_1 br_primary-1 p-x_2"><a href="#" class="quicklinks__link h:bg_primary-5 c_black font_n1 lh_1 p-x_2">Three</a></li>
		<li class="quicklinks__item"><a href="#" class="quicklinks__link  h:bg_primary-5 c_black font_n1 lh_1 p-x_2">End</a></li>
	</ul>

	Styleguide   Recipes Zurb.Quicklinks
 */
/*
Cards

Build from the basicfoundation card utility classes can be added to make many variations on the theme.

bg_primary			- textures are slightly transparent so they can be colored with background-color classess
bg_shade		- textures are slightly transparent so they can be colored with background-color classess
bg_highlight 		- textures are slightly transparent so they can be colored with background-color classess
bg_warning			- textures are slightly transparent so they can be colored with background-color classess
bg_alert			- textures are slightly transparent so they can be colored with background-color classess

Markup:
<div class="p_4 texture_light bg_shade-4">
	<div class="card shadow_2 max-w_30">
		<div class="card-divider font_accent: border-top-left-square c_white font_3 p_4 texture_dust {{modifier_class}}">
			This is a header
		</div>
		<img src="https://picsum.photos/400/300">
		<div class="card-section">
			<h4>This is a card.</h4>
			<p>It has an easy to override visual style, and is appropriately subdued.</p>
		</div>
	</div>
</div>


Styleguide Containers.Cards

 */
/*
Page Messages

Page Messages are altered cards to bring attention to the content we are trying to convey to the user

primary				- This page message is used for X
shade			- This page message is used for X
highlight 		- This page message is used for X
warning				- This page message is used for X
alert					- This page message is used for X

Markup:
<div class="p_5 texture_light bg_shade-4">
	<div class="card shadow_2 bg_{{modifier_class}}-5">
		<div class=" font_accent: br-tl_square c_white font_3 p_4 texture_dust bg_{{modifier_class}}">
			This is page message
		</div>
		<div class="card-section">
			<div class="grid-x">
				<div class="cell shrink p_4 font_5 c_{{modifier_class}}-n3"><i class="fas fa-check"></i></div>
				<div class="cell auto p_4">
					Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam voluptate
					consectetur ab pariatur ullam quo sit maiores corrupti voluptates neque
					illum aperiam laudantium provident fugit, nihil labore incidunt at
					impedit?
				</div>
			</div>
		</div>
		<div class="card-section br_0 br-t_1 br_solid br_{{modifier_class}}">
			<a href="#" class="button br_radius float-right bg_{{modifier_class}}-n1"><i class="fas fa-times"></i>&nbsp;close</a>
		</div>
	</div>
</div>

Styleguide  Recipes Zurb.Page Messages
*/
/*
User Card

Member Cards Used in the CSTool give a great represendation on how complex the UI can be with a combination of UCs

Markup:
<div class="p_5 p-t_3 p-b_3 texture_light bg_shade-4">
<div class="user-card shadow br_solid br_black-1 bg_white">
   <div class="grid-x">
      <div class="cell auto p_3">
         <div class="member-name font_1 font_accent: lh_2 member-name p-x_3 p-y-l_4">David Y. Wilder <a class="bg_shade-4 float-right font_0 hover:bg_shade p-l_3 p-r_3 p_2"><i class="fas fa-share-alt-square"></i></a>
         </div>
         <div>
            <ul class="details no-bullet p-l_3 p-r_3 m_0 font_0 grid-x grid-margin-x">
            <li class="br_0 br-b_1 br_shade-5 br_0 br_solid p_2 cell small-12"><i class="m-l_3 m-r_3 c_shade-2 fal fa-user-slash"></i>NPI
            </li>
            <li class="br-b_1 br_shade-5 br_0 br_solid p_2 cell small-12"><i class="m-l_3 m-r_3 c_shade-2 fal fa-hashtag"></i>1696062374299
            </li>
            <li class="br-b_1 br_shade-5 br_0 br_solid p_2 cell small-12"><i class="m-l_3 m-r_3 c_shade-2 fal fa-at"></i>Donec@quis.org <a class="link float-right p_2"><i class="fal fa-pencil"></i></a>
            </li>
            <li class="br-b_1 br_shade-5 br_0 br_solid p_2 cell small-12"><i class="m-l_3 m-r_3 c_shade-2 fal fa-map-pin"></i>Polatlı
            </li>
            <li class="br-b_1 br_shade-5 br_0 br_solid p_2 cell small-12"><i class="m-l_3 m-r_3 c_shade-2 fal fa-badge-check"></i>75988 <a href="#" class="link float-right p_2"><i class="fal fa-exchange-alt"></i></a>
            </li>
            <li class="br-b_1 br_shade-5 br_0 br_solid p_2 cell small-12"><i class="m-l_3 m-r_3 c_shade-2 fal fa-user-circle"></i>neque.et@neque.net <a href="#" class="link float-right p_2"><i class="fal fa-pencil"></i></a>
            </li>
            <li class="br-b_1 br_shade-5 br_0 br_solid p_2 cell small-12"><i class="m-l_3 m-r_3 c_shade-2 fal fa-key"></i>GRW95WZD9VY <a href="#" class="link float-right p_2"><i class="fal fa-pencil"></i></a>
            </li></ul>
      <div class="p_4 flex font_n1">
         <i class="m-l_3 c_shade-2 fal fa-users-crown flex-shrink"></i>
         <a class="link m-l_3 m-r_3 flex-auto"> <i class="fas fa-chevron-circle-right p-r_3"></i>1 linked account(s) </a>
         <a class="link float-right m-l_3 m-r_3 flex-1">manage &nbsp; <i class="fal fa-pencil"></i></a>
      </div>
   </div>
   </div>
      <div class="cell shrink texture_light bg_shade-3 m-r_3 c_shade-1 font_n2">
         <ul class="flag no-bullet">
            <li class="is-active_toggle-function center member">
               <div class="a:bg_acc a:color_white p_3"><i class="fal fa-user-md"></i>
               </div>
            </li>
            <li class="is-active_toggle-function center accbadge active">
               <div class="a:bg_success-n1 a:color_white p_3"><i class="fal fa-badge-check"></i>
               </div>
            </li>
            <li class="is-active_toggle-function center iscience">
               <div class="a:bg_hightlight a:color_white p_3"><i class="fal fa-flask"></i>
               </div>
            </li>
            <li class="is-active_toggle-function center bruteforce">
               <div class="a:bg_alert a:color_white p_3"><i class="fal fa-lock-alt"></i>
               </div>
            </li>
            <li class="is-active_toggle-function center expobadge">
               <div class="a:bg_warning-n3 a:color_white p_3"><i class="fal fa-exclamation-circle"></i>
               </div>
            </li>
         </ul>
      </div>
   </div>
</div>
</div>

Styleguide  Recipes Zurb.User Card
*/
/*
	Button Group

	Markup:
	<div class="button-group">
		<a class="button is-active primary"><i class="far icon-toggle_arrow-circle"></i> One</a>
		<a class="button shade"><i class="far icon-toggle_arrow-circle"></i> Two</a>
		<a class="button shade"><i class="far icon-toggle_arrow-circle"></i> Three</a>
	</div>

	Styleguide  Foundation.Navigation.Button Group
*/
/* 
    Grid Button Splash

    Markup:
    <div class="grid-y lh_1 " style="width:412px;height: 732px; background-image:url('https://picsum.photos/412/732/?image=857')">
        <div class="cell small-6 grid-x">
            <div class="small-8 cell c_white p_5 lh_1 text-left">
                <h1 class="font_5 font_display lh_1">Annual Scientific Session</h1>
                <h2 class="font_1 font_bold">2018 | New Orleans</h2>
            </div>
            <div class="small-4 cell c_white text_center">
                <div class="grid-y grid-frame">
                    <div class="small-6 cell p-t_5 shaddow_n2 br_solid h:bg_black-8 br_white-1 br_1 bg_black-1 "><i class="fas m_2 fa-users-class font_4"></i>
                    <div class="font_0 m-t_3">Conference</div></div>
                    <div class="small-6 cell p-t_5 shaddow_n2 br_solid h:bg_black-8 br_white-1 br_1 bg_black-2"><i class="fas m_2 fa-users-crown font_4"></i>
                    <div class="font_0 m-t_3">After Party</div></div>
                </div>
            </div>
        </div>
        <div class="cell small-3 grid-x">
            <div class="small-4 cell shadow_n1 br_white-1 br_1 br_solid h:bg_black-8 bg_black-2 c_white p-t_5 text_center"><i
                    class="fas m_2 fa-calendar-alt font_4"></i>
                <div class="font_0 m-t_3">Events</div>
            </div>
            <div class="small-4 cell shadow_n2 br_white-1 br_1 br_solid h:bg_black-8 bg_black-3 c_white p-t_5 text_center"><i
                    class="fas m_2 fa-map-marked  font_4"></i>
                <div class="font_0 m-t_3">Maps</div>
            </div>
            <div class="small-4 cell shadow_n3 br_white-1 br_1 br_solid h:bg_black-8 bg_black-4 c_white p-t_5 text_center"><i
                    class="fas m_2 fa-cogs font_4"></i>
                <div class="font_0 m-t_3">Options</div>
            </div>
        </div>
        <div class="cell small-3 grid-x">
            <div class="small-4 cell shadow_n2 br_white-1 br_1 br_solid h:bg_black-8 bg_black-5 c_white p-t_5 text_center"><i
                    class="fas m_2 fa-alarm-clock font_4"></i>
                <div class="font_0 m-t_3">Upcoming</div>
            </div>
            <div class="small-4 cell shadow_n3 br_white-1 br_1 br_solid h:bg_black-8 bg_black-4 c_white p-t_5 text_center"><i
                    class="fas m_2 fa-badge-check font_4"></i>
                <div class="font_0 m-t_3">Claim Credits</div>
            </div>
            <div class="small-4 cell shadow_n3 br_white-1 br_1 br_solid h:bg_black-8 bg_black-6 c_white p-t_5 text_center"><i
                    class="fas m_2 fa-chess-rook font_4"></i>
                <div class="font_0 m-t_3">Find a Room</div>
            </div>
        </div>
    </div>  

    Styleguide  Foundation.Grid Buttons
    */
/*
    RECIPE: Accordians

    Accordions are elements that help you organize and navigate multiple documents in a single container. They can be used for switching between items in the container.

    Markup: 
    <ul class="accordion" data-accordion>
        <li class="accordion-item is-active" data-accordion-item>
            <!-- Accordion tab title -->
            <a href="#" class="accordion-title font_1 font_accent: hover:bg_primary-4"><i class="fas icon-toggle_plus-minus fa-fw"></i> Accordion 1</a>
            <!-- Accordion tab content: it would start in the open state due to using the `is-active` state class. -->
            <div class="accordion-content" data-tab-content>
                <p>Panel 1. Lorem ipsum dolor</p>
                <a href="#">Nowhere to Go</a>
            </div>
        </li>
        <li class="accordion-item" data-accordion-item>
            <!-- Accordion tab title -->
            <a href="#"class="accordion-title  font_1 font_accent: hover:bg_primary-4"><i class="fas icon-toggle_plus-minus fa-fw"></i>Accordion 2</a>
            <!-- Accordion tab content: it would start in the open state due to using the `is-active` state class. -->
            <div class="accordion-content" data-tab-content>
                <p>Panel 1. Lorem ipsum dolor</p>
                <a href="#">Nowhere to Go</a>
            </div>
        </li>
    </ul>

    Styleguide  Recipes Zurb.Accordians

*/
body {
  font-size: 16px;
  font-size: 1rem;
  font-family: var(--font-family_copy);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: var(--font_regular);
  font-family: var(--font-family_display);
}

h6 {
  font-weight: var(--font_bold);
}

p {
  line-height: 1.35;
}

ul,
ol {
  line-height: 1.6;
}

kbd,
code,
samp,
var {
  font-family: var(--font-family_mono);
}

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

label {
  font-weight: var(--font_bold);
}

label,input,
select,
textarea,
legend,
fieldset,
button {
  color: currentColor;
  font-size: 16px;
  font-size: 1rem;
  font-family: var(--font-family_ui);
}

input,
select,
textarea,
legend,
fieldset,
button {
  box-sizing: border-box;
}

button,
[type=button],
[type=submit],
[type=reset], [type=date],
[type=datetime],
[type=datetime-local],
[type=email],
[type=month],
[type=number],
[type=password],
[type=search],
[type=tel],
[type=text],
[type=url],
[type=week],
[type=time], select,
textarea {
  min-height: 1.5em;
  padding: 4px 8px;
  padding: 0.25rem 0.5rem;
  border-width: thin;
  border-radius: 6px;
  border-color: rgba(19, 18, 18, 0.25);
  line-height: 1.6;
}

input:focus,
select:focus,
textarea:focus {
  outline-color: hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.5);
  box-shadow: inset 1px 1px 2px 2px hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.12), inset 2px 2px 3px 0px hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.1), inset -2px -2px 3px 0px hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.1);
}

[type=date],
[type=datetime],
[type=datetime-local],
[type=email],
[type=month],
[type=number],
[type=password],
[type=search],
[type=tel],
[type=text],
[type=url],
[type=week],
[type=time], select,
textarea {
  width: 100%;
}

input,
select,
textarea,
legend,
fieldset,
button {
  box-sizing: border-box;
}

[type=color] {
  width: 24px;
  width: 1.5rem;
  height: 24px;
  height: 1.5rem;
  padding: 0;
  border-color: rgba(19, 18, 18, 0.25);
}

[type=radio],
[type=checkbox] {
  padding-left: 8px;
  padding-left: 0.5rem;
}

button,
[type=button],
[type=submit],
[type=reset] {
  width: auto;
  border-radius: 6px;
}

fieldset {
  margin: 8px 0;
  margin: 0.5rem 0;
  padding: 8px 16px;
  padding: 0.5rem 1rem;
  border-color: rgba(19, 18, 18, 0.1);
}

/*

 Basic Inputs

 Arches is strongly based on utility classes styling everything so it commonly just builds on either the base of the browser defaults or the defaults of the framework that is built on. This is a kitchen sink of html elements so you can see how this variation will effect html. There is No basic styling around the pure DOM with the utility class only.  To get full brand styling use a framework based version of arches.  

  Styleguide HTML.Inputs

*/
/*

  Text Inputs 

  Bellow is the comparison of using the basic Html input types with the utility classes only vs using the bootstrap pattern for the input.

Markup:
<div class="flex_row flex gap-x_5">
	<div class="flex_auto">
		<h3>Utility Class</h3>
		<label for="example-input-email" class='m-b_3'>Email address</label> 
		<input type="email" id="example-input-email" placeholder="Enter email"/>
	</div>
	<div class="flex_auto">
		<h3>Bootstrap</h3>
		<label for="exampleFormControlInput1" class="form-label">Email address</label>
		<input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com"/>
	</div>
</div>

  Styleguide HTML.Inputs.Text

*/
/*

Inputs UC

Utility Class only build inputs

Markup:
<form>
    <div class="m-b_3"><label class="m-b_3" for="example-input-email">Email address</label> <input type="email" id="example-input-email" placeholder="Enter email"></div>
    <div class="m-b_3"><label class="m-b_3" for="example-input-password1">Number</label> <input type="number" id="example-input-number" placeholder="Number"></div>
    <div class="m-b_3"><label class="m-b_3" for="example-input-password">Password</label> <input type="password" id="example-input-password" placeholder="Password"></div>
    <div class="m-b_3"><label class="m-b_3" for="example-input-search">Search</label> <input type="search" id="example-input-serach" placeholder="Search .."></div>
    <div class="m-b_3"><label class="m-b_3" for="example-input-tel">Telephone number</label> <input type="tel" id="example-input-tel" placeholder="Telephone number"></div>
    <div class="m-b_3"><label class="m-b_3" for="example-input-text">Text</label> <input type="text" id="example-input-text" placeholder="Enter some text here"></div>
    <div class="m-b_3"><label class="m-b_3" for="example-input-url">Url</label> <input type="url" id="example-input-url" placeholder="Enter a url here"></div>
    <div class="m-b_3"><label class="m-b_3" for="example-input-color">Color</label> <input type="color" id="example-inupt-color" placeholder="#fff"></div>
    <div class="m-b_3"><label class="m-b_3" for="example-input-date">Date</label> <input type="date" id="example-input-date" placeholder="date"></div>
    <div class="m-b_3"><label class="m-b_3" for="example-input-date-time">Date / Time</label> <input type="datetime" id="example-input-date-time" placeholder="date / time"></div>
    <div class="m-b_3"><label class="m-b_3" for="example-input-date-time-local">Date / Time local</label> <input type="datetime-local" id="example-input-date-time-local" placeholder="date / time local"></div>
    <div class="m-b_3"><label class="m-b_3" for="example-input-month">Month</label> <input type="month" id="example-input-month" placeholder="Month"></div>
    <div class="m-b_3"><label class="m-b_3" for="example-input-week">Week</label> <input type="week" id="example-input-week" placeholder="Week"></div>
    <div class="m-b_3"><label class="m-b_3" for="example-input-time">Time</label> <input type="time" id="example-input-time" placeholder="Time"></div>
    <div class="m-b_3"><label class="m-b_3" for="example-select1">Example select</label> <select id="example-select1">
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
        </select></div>
    <div><label for="example-select2">Example multiple select</label> <select multiple="" id="example-select2">
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
        </select></div>
    <div><label for="example-textarea">Example textarea</label> <textarea id="example-textarea" rows="3"></textarea></div>
    <div><label for="example-input-file">File input</label> <input type="file" id="example-input-file"></div>
    <fieldset>
        <legend>I am legend</legend>
        <div><label><input type="radio" name="options-radios" id="optionsR-radios1" value="option1" checked=""> Option one is this and that—be sure to include why it's great</label></div>
        <div><label><input type="radio" name="options-radios" id="options-radios2" value="option2"> Option two can be something else and selecting it will deselect option one</label></div>
        <div><label><input type="radio" name="optionsRadios" id="options-radios3" value="option3" disabled=""> Option three is disabled</label></div>
    </fieldset>
    <fieldset>
        <legend>I am also legend</legend><label for="checkbox-demo-1"><input type="checkbox" id="checkbox-demo-1"> Check me out</label> <label for="checkbox-demo-2"><input type="checkbox" id="checkbox-demo-2"> Or check me out</label>
    </fieldset>
    <div>
        <button type="button" name="button">Button</button>
        <input type="button" name="input" value="Input Button">
        <input type="submit" name="submit" value="Submit Button">
        <input type="reset" name="reset" value="Reset Button">
    </div>
</form>

Weight:100

Styleguide HTML.Inputs.All

*/
/*

Table

Basic Tables with this variation of Arches. Please note that the html can have a different look depending on the brand or the framework the variation is built on.  

<table><caption>Tables can have captions now.</caption><tbody><tr><th>Person</th><th>Number</th><th>Third Column</th></tr><tr><td>Someone Lastname</td><td>900</td><td>Nullam quis risus eget urna mollis ornare vel eu leo.</td></tr><tr><td><a href="#">Person Name</a></td><td>1200</td><td>Vestibulum id ligula porta felis euismod semper. Donec ullamcorper nulla non metus auctor fringilla.</td></tr><tr><td>Another Person</td><td>1500</td><td>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nullam id dolor id nibh ultricies vehicula ut id elit.</td></tr><tr><td>Last One</td><td>2800</td><td>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum.</td></tr></tbody></table>


Styleguide HTML.BasicTable

*/
table {
  font-size: 16px;
  font-size: 1rem;
  font-family: var(--font-family_ui);
}
table caption {
  padding: 8px;
  padding: 0.5rem;
}

th,
td {
  padding: 4px 8px;
  padding: 0.25rem 0.5rem;
  text-align: start;
}

thead {
  padding: 4px 8px 0;
  padding: 0.25rem 0.5rem 0;
  font-weight: var(--font_bold);
}

tbody {
  padding: 0 8px;
  padding: 0 0.5rem;
}

tfoot,
caption {
  padding: 0 8px 4px;
  padding: 0 0.5rem 0.25rem;
  font-size: 14.222px;
  font-size: 0.8888888889rem;
}

/*

Deprecated: Lorem Text Loader

It is often we need to have space held for a return of details or text.  

Markup:
<div class="max-w_40">
   <h1 class="lorem-loader font_3 m-y_3">&nbsp;</h1>
   <p class="m-y_2 font_0 lorem-loader">&nbsp;</p>
   <p class="m-y_2 font_0 lorem-loader">&nbsp;</p>
   <p class="m-y_2 font_0 lorem-loader">&nbsp;</p>
</div>

Styleguide Recipes.InteractiveExtras.Text Placeholder Loader


*/
/*

Aspect Ratio

To create an image placeholder use the lorem-loader plus an aspect of the intended image on th parent container while waiting for the image.The placeholder will be a 100% of the container so size the container properly. 

.aspect_8x10			- lock image to a 8 to 10 ratio
.aspect_1x1			- lock image to a 1 to 1 ratio
.aspect_2x1			- lock image to a 2 to 1 ratio
.aspect_3x2			- lock image to a 3 to 2 ratio   
.aspect_4x3			- lock image to a 4 to 3 ratio 
.aspect_16x9		- lock image to a 16 to 9 ratio 
.aspect_21x9		- lock image to a 21 to 9 ratio 
.aspect_4x1			- lock image to a 4 to 1 ratio 

Markup:
<div class="grid-w_2 max-w_20"  data-style="{{ modifier_class }}" >
   <div class="m-y_2 lorem-loader {{modifier_class}} ">&nbsp;</div>
</div>

Styleguide Recipes.InteractiveExtras.Placeholder Aspect Ratio
*/
.lorem-loader {
  -webkit-animation: Gradient 3s ease infinite;
  -moz-animation: Gradient 3s ease infinite;
  width: 100%;
  overflow: hidden;
  background: linear-gradient(-45deg, hsla(var(--shade-h), calc( var( --shade-s ) - ( var( --shade-s ) * 0.125 ) ), calc( var(--shade-l) + ((100% - var(--shade-l)) * 0.25) ), 1), hsla(var(--shade-h), calc( var( --shade-s ) - ( var( --shade-s ) * 0.25 ) ), calc( var(--shade-l) + ((100% - var(--shade-l)) * 0.5) ), 1));
  background-size: 400% 400%;
  color: #fff;
  animation: Gradient 3s ease infinite;
}
@keyframes Gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.icon-toggle_check:before, .icon-toggle_check-circle:before, .icon-toggle_check-sqaure:before, .icon-toggle_arrow-circle:before, .icon-toggle_chevron-double-left-right:before, .icon-toggle_chevron-double-up-down:before, .icon-toggle_chevron-up-down:before, .icon-toggle_plus-minus:before, .icon-toggle_bars-times:before,.icon-toggle_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 `is-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"> is-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"> is-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"> is-active </span>
	</li>
</ul>


Styleguide Recipes.InteractiveExtras.ToggleIcons
*/
.icon-toggle_bars-times:before {
  content: "\f0c9";
}
.is-active .icon-toggle_bars-times:before, .icon-toggle_bars-times:before.show, .show > .icon-toggle_bars-times:before, .is-active > .icon-toggle_bars-times:before {
  content: "\f00d";
}

.icon-toggle_plus-minus:before {
  content: "\f0fe";
}
.is-active .icon-toggle_plus-minus:before, .icon-toggle_plus-minus:before.show, .show > .icon-toggle_plus-minus:before, .is-active > .icon-toggle_plus-minus:before {
  content: "\f146";
}

.icon-toggle_chevron-up-down:before {
  content: "\f106";
}
.is-active .icon-toggle_chevron-up-down:before, .show .icon-toggle_chevron-up-down:before, .is-active > .icon-toggle_chevron-up-down:before {
  content: "\f107";
}

.icon-toggle_chevron-double-up-down:before {
  content: "\f103";
}
.is-active .icon-toggle_chevron-double-up-down:before, .show .icon-toggle_chevron-double-up-down:before, .is-active > .icon-toggle_chevron-double-up-down:before {
  content: "\f325";
}

.icon-toggle_chevron-double-left-right:before {
  content: "\f324";
}
.is-active .icon-toggle_chevron-double-left-right:before, .show .icon-toggle_chevron-double-left-right:before, .is-active > .icon-toggle_chevron-double-left-right:before {
  content: "\f323";
}

.icon-toggle_arrow-circle:before {
  content: "\f061";
}
.is-active .icon-toggle_arrow-circle:before, .show .icon-toggle_arrow-circle:before, .is-active > .icon-toggle_arrow-circle:before {
  content: "\f0a9";
}

.icon-toggle_check-sqaure:before {
  content: "\f0c8";
}
.is-active .icon-toggle_check-sqaure:before, .show .icon-toggle_check-sqaure:before, .is-active > .icon-toggle_check-sqaure:before {
  content: "\f14a";
}

.icon-toggle_check-circle:before {
  content: "\f111";
}
.is-active .icon-toggle_check-circle:before, .show .icon-toggle_check-circle:before, .is-active > .icon-toggle_check-circle:before {
  content: "\f058";
}

.icon-toggle_check:before {
  content: "";
}
.is-active .icon-toggle_check:before, .show .icon-toggle_check:before, .is-active > .icon-toggle_check:before {
  content: "\f00c";
}

/*
Social Links

The social links From the Footer.


Markup:
<section class="social p_4 m-y_2 bg_shade-n3 font_2">
    <ul class="flex social-bar ul_none c_white h:c_white m_0">
        <li class="flex_auto m-r_2"><a href="https://twitter.com/accintouch" target="_blank" class="twitter social-bar--button block m-b_0 p_3 c_white text_center opacity_7 h:opacity"><i class="fab fa-square-x-twitter"></i></a></li>
        <li class="flex_auto m-r_2"><a href="https://www.facebook.com/AmericanCollegeofCardiology" target="_blank" class="facebook social-bar--button block m-b_0 p_3 c_white text_center opacity_7 h:opacity"><i class="fab fa-facebook-square"></i></a></li>
        <li class="flex_auto m-r_2"><a href="https://www.linkedin.com/company/american-college-of-cardiology/" target="_blank" class="linkedin social-bar--button block m-b_0 p_3 c_white text_center opacity_7 h:opacity"><i class="fab fa-linkedin"></i></a></li>
        <li class="flex_auto m-r_2"><a href="http://www.youtube.com/user/ACCinTouch" target="_blank" class="youtube social-bar--button block m-b_0 p_3 c_white text_center opacity_7 h:opacity"><i class="fab fa-youtube"></i></a></li>
        <li class="flex_auto m-r_2"><a href="https://play.google.com/store/apps/dev?id=5189912010956845696&hl=en_US" target="_blank" class="google-play social-bar--button block m-b_0 p_3 c_white text_center opacity_7 h:opacity"><i class="fab fa-google-play"></i></a></li>
        <li class="flex_auto m-r_2"><a href="https://apps.apple.com/us/developer/american-college-of-cardiology/id502174543#see-all/i-phonei-pad-apps" target="_blank" class="apple-store social-bar--button block m-b_0 p_3 c_white text_center opacity_7 h:opacity"><i class="fab fa-apple"></i></a></li>
    </ul>
</section>




Styleguide Recipes.Social Links

*/
/*
Social Links Monochrome

The social links can be restyled to be smaller.


Markup:
<section class="social p_4 m-y_2 font_n1 bg_white">
    <ul class="flex social-bar ul_none m_0">
        <li class="flex_shrink m-r_2"><a href="https://twitter.com/accintouch" target="_blank" class="twitter c_shade-n2 bg_shade-4 block h:bg_accent h:c_white m-b_0 p-x_3 p_2 social-bar--button text_center transition_0"><i class="fab fa-square-x-twitter"></i></a></li>
        <li class="flex_shrink m-r_2"><a href="https://www.facebook.com/AmericanCollegeofCardiology" target="_blank" class="facebook c_shade-n2 bg_shade-4 block h:bg_accent h:c_white m-b_0 p-x_3 p_2 social-bar--button text_center transition_0"><i class="fab fa-facebook-square"></i></a></li>
        <li class="flex_shrink m-r_2"><a href="https://www.linkedin.com/company/american-college-of-cardiology/" target="_blank" class="linkedin c_shade-n2 bg_shade-4 block h:bg_accent h:c_white m-b_0 p-x_3 p_2 social-bar--button text_center transition_0"><i class="fab fa-linkedin"></i></a></li>
        <li class="flex_shrink m-r_2"><a href="http://www.youtube.com/user/ACCinTouch" target="_blank" class="youtube c_shade-n2 bg_shade-4 block h:bg_accent h:c_white m-b_0 p-x_3 p_2 social-bar--button text_center transition_0"><i class="fab fa-youtube"></i></a></li>
        <li class="flex_shrink m-r_2"><a href="https://play.google.com/store/apps/dev?id=5189912010956845696&hl=en_US" target="_blank" class="google-play c_shade-n2 bg_shade-4 block h:bg_accent h:c_white m-b_0 p-x_3 p_2 social-bar--button text_center transition_0"><i class="fab fa-google-play"></i></a></li>
        <li class="flex_shrink m-r_2"><a href="https://apps.apple.com/us/developer/american-college-of-cardiology/id502174543#see-all/i-phonei-pad-apps" target="_blank" class="apple-store c_shade-n2 bg_shade-4 block h:bg_accent h:c_white m-b_0 p-x_3 p_2 social-bar--button text_center transition_0"><i class="fab fa-apple"></i></a></li>
    </ul>
</section>




Styleguide Recipes.Social Links.Mono Chrome

*/
/*
Social Links Smaller

The social links can be restyled to be smaller.


Markup:
<section class="social p_4 m-y_2 font_0 max-w_20  bg_white">
    <ul class="flex social-bar ul_none c_white m_0">
        <li class="flex_auto m-r_2"><a href="https://twitter.com/accintouch" target="_blank" class="twitter social-bar--button br_radius block m-b_0 p_2 c_white-8 h:c_white text_center opacity_8 h:opacity"><i class="fab fa-square-x-twitter"></i></a></li>
        <li class="flex_auto m-r_2"><a href="https://www.facebook.com/AmericanCollegeofCardiology" target="_blank" class="facebook social-bar--button br_radius block m-b_0 p_2 c_white-8 h:c_white text_center opacity_8 h:opacity"><i class="fab fa-facebook-square"></i></a></li>
        <li class="flex_auto m-r_2"><a href="https://www.linkedin.com/company/american-college-of-cardiology/" target="_blank" class="linkedin social-bar--button br_radius block m-b_0 p_2 c_white-8 h:c_white text_center opacity_8 h:opacity"><i class="fab fa-linkedin"></i></a></li>
        <li class="flex_auto m-r_2"><a href="http://www.youtube.com/user/ACCinTouch" target="_blank" class="youtube social-bar--button br_radius block m-b_0 p_2 c_white-8 h:c_white text_center opacity_8 h:opacity"><i class="fab fa-youtube"></i></a></li>
        <li class="flex_auto m-r_2"><a href="https://play.google.com/store/apps/dev?id=5189912010956845696&hl=en_US" target="_blank" class="google-play social-bar--button br_radius block m-b_0 p_2 c_white-8 h:c_white text_center opacity_8 h:opacity"><i class="fab fa-google-play"></i></a></li>
        <li class="flex_auto m-r_2"><a href="https://apps.apple.com/us/developer/american-college-of-cardiology/id502174543#see-all/i-phonei-pad-apps" target="_blank" class="apple-store social-bar--button br_radius block m-b_0 p_2 c_white-8 h:c_white text_center opacity_8 h:opacity"><i class="fab fa-apple"></i></a></li>
    </ul>
</section>


Styleguide Recipes.Social Links.Smaller

*/
/*
Stars

Star ratings should be build throughout arches in a more dynamic way but this is an easy level of adding stars. 

Markup:
<ul class="ul_none flex flex_inline star-rating">
    <li class="flex_shrink"> <i class="fas fa-star"></i></li>
    <li class="flex_shrink"> <i class="fas fa-star"></i></li>
    <li class="flex_shrink"> <i class="fas fa-star"></i></li>
    <li class="flex_shrink"> <i class="fas fa-star"></i></li>
    <li class="flex_shrink"> <i class="fas fa-star"></i></li>
</ul>

Weight:0

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



Styleguide Recipes.InteractiveExtras.Stars
*/
.star-rating {
  color: hsla(var(--secondary-h), calc( var( --secondary-s ) - ( var( --secondary-s ) * 0.25 ) ), calc( var(--secondary-l) + ((100% - var(--secondary-l)) * 0.5) ), 1);
}
.star-rating.rating-5 li:nth-child(-n+5),.star-rating.rating-4 li:nth-child(-n+4),.star-rating.rating-3 li:nth-child(-n+3),.star-rating.rating-2 li:nth-child(-n+2),.star-rating.rating-1 li:nth-child(-n+1) {
  color: hsla(var(--primary-h), calc( var(--primary-s) + ((100% - var(--primary-s)) * 0.015) ), calc( var( --primary-l ) - ( var( --primary-l ) * 0.15 ) ), 1);
}

/*
 Design Base

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

 Weight: -1000

 Styleguide DesignBase
*/
/*

Fonts 

The ACC is focused on stable, conservative, clean fonts.   Roboto Slab is the standard serif fonts across all products at the ACC.  Muli is the current successor to Open Sans, and Maven is a slightly modern font to give a small level of interests which replaces Raleway, or Lato in other products.

 Styleguide DesignBase.Fonts
*/
/*

Accent Roboto Slab

A beautiful Accent font that shows a complexity and texture to the fonts used in the design. 

<div class=font_accent">
	<h2 class=font_accent group-divide-bottom font--name small-12">
		Roboto Slab
		<span class="sub-line">font-family: "Roboto Slab","Times New Roman","Lucida Bright",Georgia,serif, "slab"</span>
	</h2>
	<div class="font flex">
	<div class="bg_primary c_white flex flex_shrink font_10 justify_center m-r_5 p-x_5 text_center"><span class="flex_auto m_auto inline-block text_center self_center">RS<span></span></span></div>
		<div class="flex_auto font--example">
			<h3 class=font_accent font_6">Accent Font</h3>
			<div class="text-lowercase font_4">a b c d e f g h i j k l m n o p q r s t u v w x y z</div>
			<div class="text-uppercase font_4">a b c d e f g h i j k l m n o p q r s t u v w x y z</div>
			<div class="text-numbers font_4">0 1 2 3 4 5 6 7 8 9</div>
			<div class="text-lowercase font_2">a b c d e f g h i j k l m n o p q r s t u v w x y z</div>
			<div class="text-uppercase font_2">a b c d e f g h i j k l m n o p q r s t u v w x y z</div>
			<div class="text-numbers font_2">0 1 2 3 4 5 6 7 8 9</div>
		</div>
	</div>
</div>

 Weight: -10

 Styleguide DesignBase.Fonts.Accent
*/
/*

Display: Maven Pro

 A Slick font that has a slight interest used for headers and UI. 

<div class="font_display">
	<h2 class="font_display group-divide-bottom font--name small-12">
		Maven Pro
		<span class="sub-line">font-family: "Maven Pro","Muli","Open Sans",Verdana,Helvetica,sans-serif</span>
	</h2>
	<div class="font flex grid-padding-x grid-padding-y">
		<div class="bg_primary c_white flex flex_shrink font_10 justify_center m-r_5 p-x_5 text_center"><span class="flex_auto m_auto inline-block text_center self_center">MP<span></span></span></div>
		<div class="flex_auto font--example">
			<h3 class="font_display">Display Font</h3>
			<div class="text-lowercase font_4">a b c d e f g h i j k l m n o p q r s t u v w x y z</div>
			<div class="text-uppercase font_4">a b c d e f g h i j k l m n o p q r s t u v w x y z</div>
			<div class="text-numbers font_4">0 1 2 3 4 5 6 7 8 9</div>
			<div class="text-lowercase font_2">a b c d e f g h i j k l m n o p q r s t u v w x y z</div>
			<div class="text-uppercase font_2">a b c d e f g h i j k l m n o p q r s t u v w x y z</div>
			<div class="text-numbers font_2">0 1 2 3 4 5 6 7 8 9</div>
		</div>
	</div>
</div>

 Weight: -5

 Styleguide DesignBase.Fonts.Display
*/
/*

Copy: Open Sans

 A clean font for content and text of none UI elements. 

<div class="font_copy">
	<h2 class=" group-divide-bottom font--name small-12">
		"Open Sans"
		<span class="sub-line">font-family: ""Open Sans",-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif"</span>
	</h2>
	<div class="font flex grid-padding-x grid-padding-y">
		<div class="bg_primary c_white flex flex_shrink font_10 justify_center m-r_5 p-x_5 text_center"><span class="flex_auto m_auto inline-block text_center self_center">OS<span></span></span></div>
		<div class="felx_auto font--example">
			<h3 class="">Content Font</h3>
			<div class="text-lowercase font_4">a b c d e f g h i j k l m n o p q r s t u v w x y z</div>
			<div class="text-uppercase font_4">a b c d e f g h i j k l m n o p q r s t u v w x y z</div>
			<div class="text-numbers font_4">0 1 2 3 4 5 6 7 8 9</div>
			<div class="text-lowercase font_2">a b c d e f g h i j k l m n o p q r s t u v w x y z</div>
			<div class="text-uppercase font_2">a b c d e f g h i j k l m n o p q r s t u v w x y z</div>
			<div class="text-numbers font_2">0 1 2 3 4 5 6 7 8 9</div>
		</div>
	</div>
</div>

 Weight: 0

 Styleguide DesignBase.Fonts.Copy
*/
/*

UI: Open Sans

 A clean font for content and text of none UI elements. 

<div class="font_ui">
	<h2 class=" group-divide-bottom font--name small-12">
		"Open Sans"
		<span class="sub-line">font-family: ""Open Sans",-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif"</span>
	</h2>
	<div class="font flex grid-padding-x grid-padding-y">
		<div class="bg_primary c_white flex flex_shrink font_10 justify_center m-r_5 p-x_5 text_center"><span class="flex_auto m_auto inline-block text_center self_center">OS<span></span></span></div>
		<div class="felx_auto font--example">
			<h3 class="">Content Font</h3>
			<div class="text-lowercase font_4">a b c d e f g h i j k l m n o p q r s t u v w x y z</div>
			<div class="text-uppercase font_4">a b c d e f g h i j k l m n o p q r s t u v w x y z</div>
			<div class="text-numbers font_4">0 1 2 3 4 5 6 7 8 9</div>
			<div class="text-lowercase font_2">a b c d e f g h i j k l m n o p q r s t u v w x y z</div>
			<div class="text-uppercase font_2">a b c d e f g h i j k l m n o p q r s t u v w x y z</div>
			<div class="text-numbers font_2">0 1 2 3 4 5 6 7 8 9</div>
		</div>
	</div>
</div>

 Weight: 1

 Styleguide DesignBase.Fonts.UI
*/
/*

Icons: Font Awesome

The American College of Cardiology (ACC) employs Font Awesome icons for its websites and mobile applications. The organization uses either version 4 or version 5 of Font Awesome's icon sets, providing an extensive range of options for the website's visual design and functionality. Despite the release of version 6, there is no current initiative to upgrade due to the breaking changes that come with it. The ACC recognizes that icons convey meaning and has developed an icon dictionary to ensure consistent usage of icons throughout its digital platforms. This approach enhances the user experience by providing clear and concise communication through the use of symbols, while the Font Awesome library enables the ACC to quickly and efficiently incorporate high-quality icons into its digital content.

plus						 - fa-plus					
arrow-right					 - fa-arrow-right					
search						 - fa-search					
envelope					 - fa-envelope				
heart						 - fa-heart					
star						 - fa-star									
user						 - fa-user					


Markup:
<div class="relative br_black-2 br_solid br_1"><div class="flex flex_row"><div class="font_5 cell w-grid_3 text_center p_3 no-underline c_inherit flex_shrink justify_center h:bg_navigation-n3 h:c_white bg_black-1 expanded-click-area"><i class="fas fa-{{modifier_class}}"></i></div><div class="flex_auto p_4 p-y_2 self_center"><span class="c_black-8 h:c_black-9 text font_bold font_display">{{modifier_class}}</span></div></div></div>

MarkupWrapperClasses:


Styleguide DesignBase.IconsTrue
*/
/*

ACC's Blue

$acc-blue            -  #004176; acc

Styleguide DesignBase.Colors.ACC
*/
/*

Theme Colors 

Colors are based off of the ACC Scrub Colors.

map-get($theme-palette, primary)              -  #198dae; primary
map-get($theme-palette, secondary)            -  #676a72; secondary
map-get($theme-palette, shade)           	  - #878585; shade
map-get($theme-palette, accent)               -  #16a385;  accent
map-get($theme-palette, info)                 -  #a3988c; info
map-get($theme-palette, highlight)            -  #7742bd; highlight

Weight:-1000

Styleguide DesignBase.Colors
 */
/*

Action Colors  

Actionable colors used to respond to user inputs and messaging.

map-get($theme-palette, alert)                -  #dd1a1a; alert
map-get($theme-palette, warning)              -  #da8210; warning
map-get($theme-palette, success)              -  #078a2e;  success
map-get($theme-palette, navigation)           -  #2b58c0; navigation

Styleguide DesignBase.Colors.Actions
*/
/*

Color Coding  

Color Coding is used in specific products and concepts to illustrate cohesion and collections. All of these color codes are used universally through out the college and have an associated meaning. All of these colors are just used for reference and have no associated decorator classes.  You must include the the associated color-code_x.css have access to utlity classes that will color using the bellow colors. 

Styleguide DesignBase.Colors.ColorCoding

 */
/*

COR Colors  

(COR) Class of Recommendation is a color collect used in Guideline recommendations.

$cor-green                 	- #6fc284; I
$cor-yellow              	- #ffd44f; IIA
$cor-yellow-orange          - #faa74b; IIA
$cor-orange               	- #f15d4c;III and III-NoHarm
$cor-red               		- #ed1c00; III-harm

Weight: 10

Styleguide DesignBase.Colors.ColorCoding.COR

 */
/*

LOE Colors  

(LOE) level of Evidence is a color collect used in Guideline recommendations.

$loe-dark-blue                 	- #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                    - #6c36b3; IPCE: Interprofessional Continuing Education Credit
$credit-MOCII                   - #9a1267; MOC II: ABIM MOC Part II  
$credit-MOCIV                   - #d3248d; MOC IV: ABIM MOC Part IV    

Weight: 0

Styleguide DesignBase.Colors.ColorCoding.Credits

*/
/*

Clinical Pathway Colors  

Each of the clinical pathways has a distinctive color.  These colors are used to give a distinct theme to our clinical apps, marketing, pdf's and tools.

$pathway-acute-coronary-syndromes 						- #009974;  Acute Coronary Syndromes
$pathway-arrhythmias-EP 								- #005b37;  arrhythmias and Clinical EP
$pathway-congenital-heart-disease 						- #fdb918;  Congenital Heart Disease
$pathway-ecg-stress-test 								- #d9691f;  Standard ECG, Stress Test
$pathway-heart-failure 									- #410d49;  Heart Failure and Cardiomyopathies
$pathway-invasive-cardiology 							- #c8b02f;  Invasive Cardiology Angiography and Intervention
$pathway-noninvasive-cardiology 						- #947b33;  Noninvasive Cardiology
$pathway-pandemic 										- #8e2582;  Pandemic "Covid"
$pathway-pericardial 									- #0079ad;  pericardial Disease
$pathway-prevention 									- #a01d51;  Prevention
$pathway-pulmonary-hypertension 						- #d60e7e;  Pulmonary Hypertension and Venous Thromboembolic Disease
$pathway-special 										- #00b6f1;  Special
$pathway-stable-ischemic-heart-disease 				- #0f3e65;  Stable ischemic Heart Disease
$pathway-valvular-heart-disease 						- #4f4190;  Valvular Heart Disease
$pathway-vascular-medicine 								- #ae171c;  Vascular Medicine

Weight: -1

Styleguide DesignBase.Colors.ColorCoding.Pathways

*/
/*

Registry CC

Credit Type Color codes in the ACC have a specific color coding.

$registry-cpmi                  -   #f22418;    Chest Pain MI Registry
$registry-afib                  -   #ffb300;    AFib Ablation Registry
$registry-cathpci               -   #0086d5;    CathPCI Registry
$registry-icd                   -   #80b800;    ICD Registry
$registry-impact                -   #4e1f73;    IMPACT Registry
$registry-pinnacle-primary      -   #0e4f1b;    PINNACLE Registry (Primary)
$registry-pinnacle-accent       -   #b3c4c4;    PINNACLE Registry (Accent)
$registry-focus                 -   #d6560d;    Patient Navigator Focus MI
$registry-pcibleeding           -   #c0268e;    Reducing Risk PCI Bleeding
$registry-laao                  -   #00667a;    LAAO Registry
$registry-pvi                   -   #00947f;    PVI Registry
$registry-auxdata               -   #04adad;    Auxiliar Data Collection
$registry-ststvt                -   #a20062;    STS ACC TVT Registry
$registry-diabetes              -   #7893b8;    Diabetes Collaborative 

Weight: 2000

Styleguide  DesignBase.Colors.ColorCoding.Registry

*/
/*

Journal

Journals of JACC have specific branding colors.

$journal-jc             - #002e5a;                       Journal of the American College of Cardiology: (JC)
$journal-adv            - #0000FF;                      JACC: Advances: (JC-ADV)
$journal-asia           - #ec2939;                     JACC: Asia: (JC-ASIA)
$journal-tran           - #1788c2;                     JACC: Basic to Translational Science: (JC-TRAN)
$journal-cvonc          - #00ae81;                    JACC: CardioOncology: (JC-CVONC)
$journal-case           - #f37321;                     JACC: Case Reports: (JC-CASE)
$journal-ep             - #8a5e96;                       JACC: Clinical Electrophysiology: (JC-EP)
$journal-hf             - #991326;                       JACC: Heart Failure: (JC-HF)
$journal-invt             - #038e92;                   JACC: Cardiovascular Interventions: (JC-INVT)
$journal-imag            - #c18a0e;                    JACC: Cardiovascular Imaging: (JC-IMAG)


Weight: 2000

Styleguide  DesignBase.Colors.ColorCoding.Journals

*/
/*

Social Network Colors  

Each of the social networks has a distinctive color. These colors are used to give a distinct theme to the social nav that is in different locations.

$twitter            -   #000;  		twitter     
$facebook           -   #3b5998;  	facebook    
$linkedin           -   #007bb6;  	linkedin    
$apple-store        -   #ea4cc0;  	apple-store 
$google-play        -   #689f38;  	google-play 
$youtube            -   #bb0000;  	youtube     



Weight: 100

Styleguide DesignBase.Colors.ColorCoding.Social Networks

*/
/*
	Textures

	All textures in the Arches design are a subtle variation of transparent.   Allowing for colors to bleed through from behind.  Different textures have intentions or are reserved for certain usagaes. 

	.texture_light                       		- Light textures is reserved for the base of a page where it can gve a soft area for text or cards to live on top of. 
	.texture_medium            					- medium texture are used for area that are hidden away.  Collapsable navs, areas, or sidebars ususaly use the medium texture.
	.texture_dust            					- Dust is the most transparent texture allowing for the color of the background to show through the most.  This is used for the painted tops of cards, or score bars.
	.texture_dark              					- This texture predominatly used on the footer. Its rich black will alway requrie reversed text and buttons to be readable.  
	.texture_cross            					- A mostly transparent cross texture used for alternating rows of content when a little extra texture is needed.
	.texture_disabled              				- This texture is used to paint disabled buttons and ui items giving it a greyed and X'ed out appearand. 

	Markup:
	<div class="{{modifier_class}} p_5 border-c_black-8 border-width_1 border_solid text_center bg_primary-4">{{modifier_class}} with a light primary color background</div>

	Styleguide DesignBase.Textures

 */
/*

primary: Color Variations 

The Modified versions of the primary color from this theme

Markup:

<div
	class="grid gap-x_2 gap-y_2 template-x_15 font_n1 p_4 bg_primary"
>
		<div class='p_3 bg_primary-n5'><h2 class= c_white >primary-n5</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #04151a;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#04151a</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 4, 21, 26 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>4, 21, 26</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 193.288590604deg ,77.0100502513%, 5.8529411765% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>193.288590604deg ,77.0100502513%, 5.8529411765%</span> </li> </ul> </div>
		<div class='p_3 bg_primary-n4'><h2 class= c_white >primary-n4</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #082a34;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#082a34</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 8, 42, 52 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>8, 42, 52</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 193.288590604deg ,76.6331658291%, 11.7058823529% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>193.288590604deg ,76.6331658291%, 11.7058823529%</span> </li> </ul> </div>
		<div class='p_3 bg_primary-n3'><h2 class= c_white >primary-n3</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #0d4757;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#0d4757</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 13, 71, 87 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>13, 71, 87</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 193.288590604deg ,76.1306532663%, 19.5098039216% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>193.288590604deg ,76.1306532663%, 19.5098039216%</span> </li> </ul> </div>
		<div class='p_3 bg_primary-n2'><h2 class= c_white >primary-n2</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #12637a;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#12637a</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 18, 99, 122 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>18, 99, 122</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 193.288590604deg ,75.6281407035%, 27.3137254902% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>193.288590604deg ,75.6281407035%, 27.3137254902%</span> </li> </ul> </div>
		<div class='p_3 bg_primary-n1'><h2 class= c_white >primary-n1</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #157894;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#157894</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 21, 120, 148 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>21, 120, 148</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 193.288590604deg ,75.2512562814%, 33.1666666667% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>193.288590604deg ,75.2512562814%, 33.1666666667%</span> </li> </ul> </div>
		<div class='p_3 bg_primary-0'><h2 class= c_white >primary-0</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #198dae;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#198dae</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 25, 141, 174 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>25, 141, 174</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 193.288590604deg, 74.8743718593%, 39.0196078431% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>193.288590604deg, 74.8743718593%, 39.0196078431%</span> </li> </ul> </div>
		<div class='p_3 bg_primary-1'><h2 class= c_black >primary-1</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #1da3c9;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#1da3c9</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 29, 163, 201 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>29, 163, 201</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 193.288590604deg ,71.1306532663%, 45.1176470588% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>193.288590604deg ,71.1306532663%, 45.1176470588%</span> </li> </ul> </div>
		<div class='p_3 bg_primary-2'><h2 class= c_black >primary-2</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #33bbe2;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#33bbe2</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 51, 187, 226 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>51, 187, 226</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 193.288590604deg ,65.5150753769%, 54.2647058824% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>193.288590604deg ,65.5150753769%, 54.2647058824%</span> </li> </ul> </div>
		<div class='p_3 bg_primary-3'><h2 class= c_black >primary-3</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #77d2eb;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#77d2eb</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 119, 210, 235 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>119, 210, 235</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 193.288590604deg ,56.1557788945%, 69.5098039216% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>193.288590604deg ,56.1557788945%, 69.5098039216%</span> </li> </ul> </div>
		<div class='p_3 bg_primary-4'><h2 class= c_black >primary-4</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #bbe8f5;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#bbe8f5</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 187, 232, 245 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>187, 232, 245</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 193.288590604deg ,46.7964824121%, 84.7549019608% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>193.288590604deg ,46.7964824121%, 84.7549019608%</span> </li> </ul> </div>
		<div class='p_3 bg_primary-5'><h2 class= c_black >primary-5</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #e4f6fb;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#e4f6fb</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 228, 246, 251 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>228, 246, 251</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 193.288590604deg ,41.1809045226%, 93.9019607843% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>193.288590604deg ,41.1809045226%, 93.9019607843%</span> </li> </ul> </div>
</div>




 HideCodeBlock: display_none 

Weight:0

Styleguide DesignBase.CrayonBox.primary

*/
/*

secondary: Color Variations 

The Modified versions of the secondary color from this theme

Markup:

<div
	class="grid gap-x_2 gap-y_2 template-x_15 font_n1 p_4 bg_secondary"
>
		<div class='p_3 bg_secondary-n5'><h2 class= c_white >secondary-n5</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #0f1011;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#0f1011</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 15, 16, 17 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>15, 16, 17</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 223.6363636364deg ,13.1382488479%, 6.3823529412% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>223.6363636364deg ,13.1382488479%, 6.3823529412%</span> </li> </ul> </div>
		<div class='p_3 bg_secondary-n4'><h2 class= c_white >secondary-n4</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #1f2022;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#1f2022</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 31, 32, 34 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>31, 32, 34</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 223.6363636364deg ,11.7142857143%, 12.7647058824% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>223.6363636364deg ,11.7142857143%, 12.7647058824%</span> </li> </ul> </div>
		<div class='p_3 bg_secondary-n3'><h2 class= c_white >secondary-n3</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #343539;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#343539</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 52, 53, 57 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>52, 53, 57</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 223.6363636364deg ,9.8156682028%, 21.2745098039% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>223.6363636364deg ,9.8156682028%, 21.2745098039%</span> </li> </ul> </div>
		<div class='p_3 bg_secondary-n2'><h2 class= c_white >secondary-n2</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #484a50;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#484a50</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 72, 74, 80 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>72, 74, 80</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 223.6363636364deg ,7.9170506912%, 29.7843137255% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>223.6363636364deg ,7.9170506912%, 29.7843137255%</span> </li> </ul> </div>
		<div class='p_3 bg_secondary-n1'><h2 class= c_white >secondary-n1</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #585a61;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#585a61</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 88, 90, 97 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>88, 90, 97</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 223.6363636364deg ,6.4930875576%, 36.1666666667% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>223.6363636364deg ,6.4930875576%, 36.1666666667%</span> </li> </ul> </div>
		<div class='p_3 bg_secondary-0'><h2 class= c_white >secondary-0</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #676a72;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#676a72</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 103, 106, 114 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>103, 106, 114</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 223.6363636364deg, 5.069124424%, 42.5490196078% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>223.6363636364deg, 5.069124424%, 42.5490196078%</span> </li> </ul> </div>
		<div class='p_3 bg_secondary-1'><h2 class= c_black >secondary-1</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #757881;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#757881</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 117, 120, 129 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>117, 120, 129</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 223.6363636364deg ,4.8156682028%, 48.2941176471% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>223.6363636364deg ,4.8156682028%, 48.2941176471%</span> </li> </ul> </div>
		<div class='p_3 bg_secondary-2'><h2 class= c_black >secondary-2</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #8c8f97;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#8c8f97</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 140, 143, 151 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>140, 143, 151</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 223.6363636364deg ,4.435483871%, 56.9117647059% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>223.6363636364deg ,4.435483871%, 56.9117647059%</span> </li> </ul> </div>
		<div class='p_3 bg_secondary-3'><h2 class= c_black >secondary-3</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #b2b4b9;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#b2b4b9</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 178, 180, 185 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>178, 180, 185</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 223.6363636364deg ,3.801843318%, 71.2745098039% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>223.6363636364deg ,3.801843318%, 71.2745098039%</span> </li> </ul> </div>
		<div class='p_3 bg_secondary-4'><h2 class= c_black >secondary-4</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #d9dadc;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#d9dadc</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 217, 218, 220 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>217, 218, 220</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 223.6363636364deg ,3.168202765%, 85.637254902% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>223.6363636364deg ,3.168202765%, 85.637254902%</span> </li> </ul> </div>
		<div class='p_3 bg_secondary-5'><h2 class= c_black >secondary-5</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #f0f0f1;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#f0f0f1</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 240, 240, 241 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>240, 240, 241</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 223.6363636364deg ,2.7880184332%, 94.2549019608% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>223.6363636364deg ,2.7880184332%, 94.2549019608%</span> </li> </ul> </div>
</div>




 HideCodeBlock: display_none 

Weight:0

Styleguide DesignBase.CrayonBox.secondary

*/
/*

success: Color Variations 

The Modified versions of the success color from this theme

Markup:

<div
	class="grid gap-x_2 gap-y_2 template-x_15 font_n1 p_4 bg_success"
>
		<div class='p_3 bg_success-n5'><h2 class= c_white >success-n5</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #011507;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#011507</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 1, 21, 7 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>1, 21, 7</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 137.8625954198deg ,91.1655172414%, 4.2647058824% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>137.8625954198deg ,91.1655172414%, 4.2647058824%</span> </li> </ul> </div>
		<div class='p_3 bg_success-n4'><h2 class= c_white >success-n4</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #02290e;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#02290e</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 2, 41, 14 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>2, 41, 14</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 137.8625954198deg ,91.0206896552%, 8.5294117647% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>137.8625954198deg ,91.0206896552%, 8.5294117647%</span> </li> </ul> </div>
		<div class='p_3 bg_success-n3'><h2 class= c_white >success-n3</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #044517;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#044517</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 4, 69, 23 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>4, 69, 23</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 137.8625954198deg ,90.8275862069%, 14.2156862745% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>137.8625954198deg ,90.8275862069%, 14.2156862745%</span> </li> </ul> </div>
		<div class='p_3 bg_success-n2'><h2 class= c_white >success-n2</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #056120;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#056120</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 5, 97, 32 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>5, 97, 32</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 137.8625954198deg ,90.6344827586%, 19.9019607843% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>137.8625954198deg ,90.6344827586%, 19.9019607843%</span> </li> </ul> </div>
		<div class='p_3 bg_success-n1'><h2 class= c_white >success-n1</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #067527;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#067527</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 6, 117, 39 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>6, 117, 39</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 137.8625954198deg ,90.4896551724%, 24.1666666667% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>137.8625954198deg ,90.4896551724%, 24.1666666667%</span> </li> </ul> </div>
		<div class='p_3 bg_success-0'><h2 class= c_white >success-0</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #078a2e;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#078a2e</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 7, 138, 46 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>7, 138, 46</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 137.8625954198deg, 90.3448275862%, 28.431372549% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>137.8625954198deg, 90.3448275862%, 28.431372549%</span> </li> </ul> </div>
		<div class='p_3 bg_success-1'><h2 class= c_black >success-1</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #09ad3a;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#09ad3a</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 9, 173, 58 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>9, 173, 58</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 137.8625954198deg ,85.8275862069%, 35.5882352941% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>137.8625954198deg ,85.8275862069%, 35.5882352941%</span> </li> </ul> </div>
		<div class='p_3 bg_success-2'><h2 class= c_black >success-2</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #0be14b;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#0be14b</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 11, 225, 75 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>11, 225, 75</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 137.8625954198deg ,79.0517241379%, 46.3235294118% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>137.8625954198deg ,79.0517241379%, 46.3235294118%</span> </li> </ul> </div>
		<div class='p_3 bg_success-3'><h2 class= c_black >success-3</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #51f682;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#51f682</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 81, 246, 130 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>81, 246, 130</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 137.8625954198deg ,67.7586206897%, 64.2156862745% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>137.8625954198deg ,67.7586206897%, 64.2156862745%</span> </li> </ul> </div>
		<div class='p_3 bg_success-4'><h2 class= c_black >success-4</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #a8fbc1;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#a8fbc1</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 168, 251, 193 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>168, 251, 193</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 137.8625954198deg ,56.4655172414%, 82.1078431373% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>137.8625954198deg ,56.4655172414%, 82.1078431373%</span> </li> </ul> </div>
		<div class='p_3 bg_success-5'><h2 class= c_black >success-5</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #dcfde6;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#dcfde6</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 220, 253, 230 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>220, 253, 230</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 137.8625954198deg ,49.6896551724%, 92.8431372549% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>137.8625954198deg ,49.6896551724%, 92.8431372549%</span> </li> </ul> </div>
</div>




 HideCodeBlock: display_none 

Weight:0

Styleguide DesignBase.CrayonBox.success

*/
/*

shade: Color Variations 

The Modified versions of the shade color from this theme

Markup:

<div
	class="grid gap-x_2 gap-y_2 template-x_15 font_n1 p_4 bg_shade"
>
		<div class='p_3 bg_shade-n5'><h2 class= c_white >shade-n5</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #141414;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#141414</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 20, 20, 20 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>20, 20, 20</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 0deg ,9.2561983471%, 7.8823529412% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>0deg ,9.2561983471%, 7.8823529412%</span> </li> </ul> </div>
		<div class='p_3 bg_shade-n4'><h2 class= c_white >shade-n4</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #292828;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#292828</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 41, 40, 40 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>41, 40, 40</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 0deg ,7.7685950413%, 15.7647058824% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>0deg ,7.7685950413%, 15.7647058824%</span> </li> </ul> </div>
		<div class='p_3 bg_shade-n3'><h2 class= c_white >shade-n3</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #444242;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#444242</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 68, 66, 66 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>68, 66, 66</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 0deg ,5.7851239669%, 26.2745098039% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>0deg ,5.7851239669%, 26.2745098039%</span> </li> </ul> </div>
		<div class='p_3 bg_shade-n2'><h2 class= c_white >shade-n2</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #5f5d5d;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#5f5d5d</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 95, 93, 93 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>95, 93, 93</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 0deg ,3.8016528926%, 36.7843137255% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>0deg ,3.8016528926%, 36.7843137255%</span> </li> </ul> </div>
		<div class='p_3 bg_shade-n1'><h2 class= c_white >shade-n1</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #737171;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#737171</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 115, 113, 113 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>115, 113, 113</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 0deg ,2.3140495868%, 44.6666666667% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>0deg ,2.3140495868%, 44.6666666667%</span> </li> </ul> </div>
		<div class='p_3 bg_shade-0'><h2 class= c_white >shade-0</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #878585;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#878585</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 135, 133, 133 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>135, 133, 133</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 0deg, 0.826446281%, 52.5490196078% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>0deg, 0.826446281%, 52.5490196078%</span> </li> </ul> </div>
		<div class='p_3 bg_shade-1'><h2 class= c_black >shade-1</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #939191;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#939191</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 147, 145, 145 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>147, 145, 145</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 0deg ,0.7851239669%, 57.2941176471% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>0deg ,0.7851239669%, 57.2941176471%</span> </li> </ul> </div>
		<div class='p_3 bg_shade-2'><h2 class= c_black >shade-2</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #a5a4a4;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#a5a4a4</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 165, 164, 164 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>165, 164, 164</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 0deg ,0.7231404959%, 64.4117647059% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>0deg ,0.7231404959%, 64.4117647059%</span> </li> </ul> </div>
		<div class='p_3 bg_shade-3'><h2 class= c_black >shade-3</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #c3c2c2;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#c3c2c2</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 195, 194, 194 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>195, 194, 194</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 0deg ,0.6198347107%, 76.2745098039% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>0deg ,0.6198347107%, 76.2745098039%</span> </li> </ul> </div>
		<div class='p_3 bg_shade-4'><h2 class= c_black >shade-4</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #e1e1e1;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#e1e1e1</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 225, 225, 225 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>225, 225, 225</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 0deg ,0.5165289256%, 88.137254902% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>0deg ,0.5165289256%, 88.137254902%</span> </li> </ul> </div>
		<div class='p_3 bg_shade-5'><h2 class= c_black >shade-5</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #f3f3f3;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#f3f3f3</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 243, 243, 243 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>243, 243, 243</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 0deg ,0.4545454545%, 95.2549019608% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>0deg ,0.4545454545%, 95.2549019608%</span> </li> </ul> </div>
</div>




 HideCodeBlock: display_none 

Weight:0

Styleguide DesignBase.CrayonBox.shade

*/
/*

warning: Color Variations 

The Modified versions of the warning color from this theme

Markup:

<div
	class="grid gap-x_2 gap-y_2 template-x_15 font_n1 p_4 bg_warning"
>
		<div class='p_3 bg_warning-n5'><h2 class= c_white >warning-n5</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #211402;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#211402</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 33, 20, 2 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>33, 20, 2</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 33.8613861386deg ,87.4871794872%, 6.8823529412% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>33.8613861386deg ,87.4871794872%, 6.8823529412%</span> </li> </ul> </div>
		<div class='p_3 bg_warning-n4'><h2 class= c_white >warning-n4</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #412705;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#412705</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 65, 39, 5 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>65, 39, 5</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 33.8613861386deg ,87.2820512821%, 13.7647058824% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>33.8613861386deg ,87.2820512821%, 13.7647058824%</span> </li> </ul> </div>
		<div class='p_3 bg_warning-n3'><h2 class= c_white >warning-n3</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #6d4108;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#6d4108</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 109, 65, 8 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>109, 65, 8</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 33.8613861386deg ,87.0085470085%, 22.9411764706% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>33.8613861386deg ,87.0085470085%, 22.9411764706%</span> </li> </ul> </div>
		<div class='p_3 bg_warning-n2'><h2 class= c_white >warning-n2</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #995b0b;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#995b0b</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 153, 91, 11 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>153, 91, 11</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 33.8613861386deg ,86.735042735%, 32.1176470588% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>33.8613861386deg ,86.735042735%, 32.1176470588%</span> </li> </ul> </div>
		<div class='p_3 bg_warning-n1'><h2 class= c_white >warning-n1</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #b96f0e;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#b96f0e</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 185, 111, 14 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>185, 111, 14</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 33.8613861386deg ,86.5299145299%, 39% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>33.8613861386deg ,86.5299145299%, 39%</span> </li> </ul> </div>
		<div class='p_3 bg_warning-0'><h2 class= c_white >warning-0</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #da8210;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#da8210</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 218, 130, 16 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>218, 130, 16</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 33.8613861386deg, 86.3247863248%, 45.8823529412% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>33.8613861386deg, 86.3247863248%, 45.8823529412%</span> </li> </ul> </div>
		<div class='p_3 bg_warning-1'><h2 class= c_black >warning-1</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #ee9118;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#ee9118</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 238, 145, 24 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>238, 145, 24</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 33.8613861386deg ,82.0085470085%, 51.2941176471% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>33.8613861386deg ,82.0085470085%, 51.2941176471%</span> </li> </ul> </div>
		<div class='p_3 bg_warning-2'><h2 class= c_black >warning-2</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #f1a33e;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#f1a33e</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 241, 163, 62 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>241, 163, 62</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 33.8613861386deg ,75.5341880342%, 59.4117647059% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>33.8613861386deg ,75.5341880342%, 59.4117647059%</span> </li> </ul> </div>
		<div class='p_3 bg_warning-3'><h2 class= c_black >warning-3</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #f6c27e;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#f6c27e</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 246, 194, 126 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>246, 194, 126</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 33.8613861386deg ,64.7435897436%, 72.9411764706% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>33.8613861386deg ,64.7435897436%, 72.9411764706%</span> </li> </ul> </div>
		<div class='p_3 bg_warning-4'><h2 class= c_black >warning-4</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #fae0bf;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#fae0bf</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 250, 224, 191 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>250, 224, 191</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 33.8613861386deg ,53.952991453%, 86.4705882353% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>33.8613861386deg ,53.952991453%, 86.4705882353%</span> </li> </ul> </div>
		<div class='p_3 bg_warning-5'><h2 class= c_black >warning-5</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #fdf3e5;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#fdf3e5</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 253, 243, 229 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>253, 243, 229</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 33.8613861386deg ,47.4786324786%, 94.5882352941% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>33.8613861386deg ,47.4786324786%, 94.5882352941%</span> </li> </ul> </div>
</div>




 HideCodeBlock: display_none 

Weight:0

Styleguide DesignBase.CrayonBox.warning

*/
/*

alert: Color Variations 

The Modified versions of the alert color from this theme

Markup:

<div
	class="grid gap-x_2 gap-y_2 template-x_15 font_n1 p_4 bg_alert"
>
		<div class='p_3 bg_alert-n5'><h2 class= c_white >alert-n5</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #210404;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#210404</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 33, 4, 4 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>33, 4, 4</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 0deg ,80.7368421053%, 7.2647058824% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>0deg ,80.7368421053%, 7.2647058824%</span> </li> </ul> </div>
		<div class='p_3 bg_alert-n4'><h2 class= c_white >alert-n4</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #420808;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#420808</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 66, 8, 8 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>66, 8, 8</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 0deg ,80.4210526316%, 14.5294117647% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>0deg ,80.4210526316%, 14.5294117647%</span> </li> </ul> </div>
		<div class='p_3 bg_alert-n3'><h2 class= c_white >alert-n3</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #6f0d0d;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#6f0d0d</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 111, 13, 13 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>111, 13, 13</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 0deg ,80%, 24.2156862745% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>0deg ,80%, 24.2156862745%</span> </li> </ul> </div>
		<div class='p_3 bg_alert-n2'><h2 class= c_white >alert-n2</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #9b1212;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#9b1212</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 155, 18, 18 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>155, 18, 18</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 0deg ,79.5789473684%, 33.9019607843% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>0deg ,79.5789473684%, 33.9019607843%</span> </li> </ul> </div>
		<div class='p_3 bg_alert-n1'><h2 class= c_white >alert-n1</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #bc1616;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#bc1616</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 188, 22, 22 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>188, 22, 22</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 0deg ,79.2631578947%, 41.1666666667% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>0deg ,79.2631578947%, 41.1666666667%</span> </li> </ul> </div>
		<div class='p_3 bg_alert-0'><h2 class= c_white >alert-0</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #dd1a1a;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#dd1a1a</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 221, 26, 26 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>221, 26, 26</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 0deg, 78.9473684211%, 48.431372549% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>0deg, 78.9473684211%, 48.431372549%</span> </li> </ul> </div>
		<div class='p_3 bg_alert-1'><h2 class= c_black >alert-1</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #e62b2b;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#e62b2b</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 230, 43, 43 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>230, 43, 43</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 0deg ,75%, 53.5882352941% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>0deg ,75%, 53.5882352941%</span> </li> </ul> </div>
		<div class='p_3 bg_alert-2'><h2 class= c_black >alert-2</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #ea4f4f;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#ea4f4f</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 234, 79, 79 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>234, 79, 79</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 0deg ,69.0789473684%, 61.3235294118% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>0deg ,69.0789473684%, 61.3235294118%</span> </li> </ul> </div>
		<div class='p_3 bg_alert-3'><h2 class= c_black >alert-3</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #f18989;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#f18989</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 241, 137, 137 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>241, 137, 137</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 0deg ,59.2105263158%, 74.2156862745% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>0deg ,59.2105263158%, 74.2156862745%</span> </li> </ul> </div>
		<div class='p_3 bg_alert-4'><h2 class= c_black >alert-4</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #f8c4c4;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#f8c4c4</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 248, 196, 196 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>248, 196, 196</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 0deg ,49.3421052632%, 87.1078431373% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>0deg ,49.3421052632%, 87.1078431373%</span> </li> </ul> </div>
		<div class='p_3 bg_alert-5'><h2 class= c_black >alert-5</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #fce7e7;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#fce7e7</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 252, 231, 231 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>252, 231, 231</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 0deg ,43.4210526316%, 94.8431372549% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>0deg ,43.4210526316%, 94.8431372549%</span> </li> </ul> </div>
</div>




 HideCodeBlock: display_none 

Weight:0

Styleguide DesignBase.CrayonBox.alert

*/
/*

navigation: Color Variations 

The Modified versions of the navigation color from this theme

Markup:

<div
	class="grid gap-x_2 gap-y_2 template-x_15 font_n1 p_4 bg_navigation"
>
		<div class='p_3 bg_navigation-n5'><h2 class= c_white >navigation-n5</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #060d1d;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#060d1d</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 6, 13, 29 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>6, 13, 29</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 221.8791946309deg ,66.514893617%, 6.9117647059% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>221.8791946309deg ,66.514893617%, 6.9117647059%</span> </li> </ul> </div>
		<div class='p_3 bg_navigation-n4'><h2 class= c_white >navigation-n4</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #0d1a3a;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#0d1a3a</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 13, 26, 58 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>13, 26, 58</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 221.8791946309deg ,65.9659574468%, 13.8235294118% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>221.8791946309deg ,65.9659574468%, 13.8235294118%</span> </li> </ul> </div>
		<div class='p_3 bg_navigation-n3'><h2 class= c_white >navigation-n3</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #162c60;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#162c60</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 22, 44, 96 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>22, 44, 96</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 221.8791946309deg ,65.2340425532%, 23.0392156863% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>221.8791946309deg ,65.2340425532%, 23.0392156863%</span> </li> </ul> </div>
		<div class='p_3 bg_navigation-n2'><h2 class= c_white >navigation-n2</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #1e3e86;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#1e3e86</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 30, 62, 134 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>30, 62, 134</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 221.8791946309deg ,64.5021276596%, 32.2549019608% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>221.8791946309deg ,64.5021276596%, 32.2549019608%</span> </li> </ul> </div>
		<div class='p_3 bg_navigation-n1'><h2 class= c_white >navigation-n1</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #254ba3;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#254ba3</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 37, 75, 163 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>37, 75, 163</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 221.8791946309deg ,63.9531914894%, 39.1666666667% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>221.8791946309deg ,63.9531914894%, 39.1666666667%</span> </li> </ul> </div>
		<div class='p_3 bg_navigation-0'><h2 class= c_white >navigation-0</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #2b58c0;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#2b58c0</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 43, 88, 192 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>43, 88, 192</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 221.8791946309deg, 63.4042553191%, 46.0784313725% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>221.8791946309deg, 63.4042553191%, 46.0784313725%</span> </li> </ul> </div>
		<div class='p_3 bg_navigation-1'><h2 class= c_black >navigation-1</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #3564d2;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#3564d2</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 53, 100, 210 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>53, 100, 210</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 221.8791946309deg ,60.2340425532%, 51.4705882353% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>221.8791946309deg ,60.2340425532%, 51.4705882353%</span> </li> </ul> </div>
		<div class='p_3 bg_navigation-2'><h2 class= c_black >navigation-2</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #567ed9;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#567ed9</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 86, 126, 217 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>86, 126, 217</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 221.8791946309deg ,55.4787234043%, 59.5588235294% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>221.8791946309deg ,55.4787234043%, 59.5588235294%</span> </li> </ul> </div>
		<div class='p_3 bg_navigation-3'><h2 class= c_black >navigation-3</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #8fa9e6;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#8fa9e6</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 143, 169, 230 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>143, 169, 230</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 221.8791946309deg ,47.5531914894%, 73.0392156863% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>221.8791946309deg ,47.5531914894%, 73.0392156863%</span> </li> </ul> </div>
		<div class='p_3 bg_navigation-4'><h2 class= c_black >navigation-4</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #c7d4f2;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#c7d4f2</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 199, 212, 242 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>199, 212, 242</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 221.8791946309deg ,39.6276595745%, 86.5196078431% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>221.8791946309deg ,39.6276595745%, 86.5196078431%</span> </li> </ul> </div>
		<div class='p_3 bg_navigation-5'><h2 class= c_black >navigation-5</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #e9eefa;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#e9eefa</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 233, 238, 250 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>233, 238, 250</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 221.8791946309deg ,34.8723404255%, 94.6078431373% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>221.8791946309deg ,34.8723404255%, 94.6078431373%</span> </li> </ul> </div>
</div>




 HideCodeBlock: display_none 

Weight:0

Styleguide DesignBase.CrayonBox.navigation

*/
/*

accent: Color Variations 

The Modified versions of the accent color from this theme

Markup:

<div
	class="grid gap-x_2 gap-y_2 template-x_15 font_n1 p_4 bg_accent"
>
		<div class='p_3 bg_accent-n5'><h2 class= c_white >accent-n5</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #031814;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#031814</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 3, 24, 20 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>3, 24, 20</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 167.2340425532deg ,78.2378378378%, 5.4411764706% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>167.2340425532deg ,78.2378378378%, 5.4411764706%</span> </li> </ul> </div>
		<div class='p_3 bg_accent-n4'><h2 class= c_white >accent-n4</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #073128;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#073128</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 7, 49, 40 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>7, 49, 40</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 167.2340425532deg ,77.8810810811%, 10.8823529412% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>167.2340425532deg ,77.8810810811%, 10.8823529412%</span> </li> </ul> </div>
		<div class='p_3 bg_accent-n3'><h2 class= c_white >accent-n3</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #0b5243;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#0b5243</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 11, 82, 67 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>11, 82, 67</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 167.2340425532deg ,77.4054054054%, 18.137254902% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>167.2340425532deg ,77.4054054054%, 18.137254902%</span> </li> </ul> </div>
		<div class='p_3 bg_accent-n2'><h2 class= c_white >accent-n2</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #0f725d;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#0f725d</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 15, 114, 93 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>15, 114, 93</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 167.2340425532deg ,76.9297297297%, 25.3921568627% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>167.2340425532deg ,76.9297297297%, 25.3921568627%</span> </li> </ul> </div>
		<div class='p_3 bg_accent-n1'><h2 class= c_white >accent-n1</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #138b71;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#138b71</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 19, 139, 113 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>19, 139, 113</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 167.2340425532deg ,76.572972973%, 30.8333333333% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>167.2340425532deg ,76.572972973%, 30.8333333333%</span> </li> </ul> </div>
		<div class='p_3 bg_accent-0'><h2 class= c_white >accent-0</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #16a385;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#16a385</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 22, 163, 133 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>22, 163, 133</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 167.2340425532deg, 76.2162162162%, 36.2745098039% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>167.2340425532deg, 76.2162162162%, 36.2745098039%</span> </li> </ul> </div>
		<div class='p_3 bg_accent-1'><h2 class= c_black >accent-1</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #1ac09c;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#1ac09c</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 26, 192, 156 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>26, 192, 156</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 167.2340425532deg ,72.4054054054%, 42.6470588235% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>167.2340425532deg ,72.4054054054%, 42.6470588235%</span> </li> </ul> </div>
		<div class='p_3 bg_accent-2'><h2 class= c_black >accent-2</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #28e2ba;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#28e2ba</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 40, 226, 186 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>40, 226, 186</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 167.2340425532deg ,66.6891891892%, 52.2058823529% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>167.2340425532deg ,66.6891891892%, 52.2058823529%</span> </li> </ul> </div>
		<div class='p_3 bg_accent-3'><h2 class= c_black >accent-3</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #70ecd1;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#70ecd1</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 112, 236, 209 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>112, 236, 209</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 167.2340425532deg ,57.1621621622%, 68.137254902% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>167.2340425532deg ,57.1621621622%, 68.137254902%</span> </li> </ul> </div>
		<div class='p_3 bg_accent-4'><h2 class= c_black >accent-4</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #b7f5e8;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#b7f5e8</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 183, 245, 232 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>183, 245, 232</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 167.2340425532deg ,47.6351351351%, 84.068627451% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>167.2340425532deg ,47.6351351351%, 84.068627451%</span> </li> </ul> </div>
		<div class='p_3 bg_accent-5'><h2 class= c_black >accent-5</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #e2fbf6;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#e2fbf6</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 226, 251, 246 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>226, 251, 246</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 167.2340425532deg ,41.9189189189%, 93.6274509804% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>167.2340425532deg ,41.9189189189%, 93.6274509804%</span> </li> </ul> </div>
</div>




 HideCodeBlock: display_none 

Weight:0

Styleguide DesignBase.CrayonBox.accent

*/
/*

info: Color Variations 

The Modified versions of the info color from this theme

Markup:

<div
	class="grid gap-x_2 gap-y_2 template-x_15 font_n1 p_4 bg_info"
>
		<div class='p_3 bg_info-n5'><h2 class= c_white >info-n5</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #191714;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#191714</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 25, 23, 20 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>25, 23, 20</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 31.3043478261deg ,18.6666666667%, 8.9117647059% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>31.3043478261deg ,18.6666666667%, 8.9117647059%</span> </li> </ul> </div>
		<div class='p_3 bg_info-n4'><h2 class= c_white >info-n4</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #332e28;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#332e28</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 51, 46, 40 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>51, 46, 40</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 31.3043478261deg ,17.3333333333%, 17.8235294118% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>31.3043478261deg ,17.3333333333%, 17.8235294118%</span> </li> </ul> </div>
		<div class='p_3 bg_info-n3'><h2 class= c_white >info-n3</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #544c43;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#544c43</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 84, 76, 67 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>84, 76, 67</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 31.3043478261deg ,15.5555555556%, 29.7058823529% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>31.3043478261deg ,15.5555555556%, 29.7058823529%</span> </li> </ul> </div>
		<div class='p_3 bg_info-n2'><h2 class= c_white >info-n2</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #766b5e;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#766b5e</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 118, 107, 94 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>118, 107, 94</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 31.3043478261deg ,13.7777777778%, 41.5882352941% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>31.3043478261deg ,13.7777777778%, 41.5882352941%</span> </li> </ul> </div>
		<div class='p_3 bg_info-n1'><h2 class= c_white >info-n1</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #8f8173;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#8f8173</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 143, 129, 115 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>143, 129, 115</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 31.3043478261deg ,12.4444444444%, 50.5% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>31.3043478261deg ,12.4444444444%, 50.5%</span> </li> </ul> </div>
		<div class='p_3 bg_info-0'><h2 class= c_white >info-0</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #a3988c;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#a3988c</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 163, 152, 140 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>163, 152, 140</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 31.3043478261deg, 11.1111111111%, 59.4117647059% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>31.3043478261deg, 11.1111111111%, 59.4117647059%</span> </li> </ul> </div>
		<div class='p_3 bg_info-1'><h2 class= c_black >info-1</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #aca298;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#aca298</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 172, 162, 152 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>172, 162, 152</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 31.3043478261deg ,10.5555555556%, 63.4705882353% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>31.3043478261deg ,10.5555555556%, 63.4705882353%</span> </li> </ul> </div>
		<div class='p_3 bg_info-2'><h2 class= c_black >info-2</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #bab2a9;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#bab2a9</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 186, 178, 169 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>186, 178, 169</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 31.3043478261deg ,9.7222222222%, 69.5588235294% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>31.3043478261deg ,9.7222222222%, 69.5588235294%</span> </li> </ul> </div>
		<div class='p_3 bg_info-3'><h2 class= c_black >info-3</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #d1ccc6;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#d1ccc6</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 209, 204, 198 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>209, 204, 198</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 31.3043478261deg ,8.3333333333%, 79.7058823529% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>31.3043478261deg ,8.3333333333%, 79.7058823529%</span> </li> </ul> </div>
		<div class='p_3 bg_info-4'><h2 class= c_black >info-4</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #e8e5e2;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#e8e5e2</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 232, 229, 226 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>232, 229, 226</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 31.3043478261deg ,6.9444444444%, 89.8529411765% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>31.3043478261deg ,6.9444444444%, 89.8529411765%</span> </li> </ul> </div>
		<div class='p_3 bg_info-5'><h2 class= c_black >info-5</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #f6f5f4;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#f6f5f4</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 246, 245, 244 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>246, 245, 244</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 31.3043478261deg ,6.1111111111%, 95.9411764706% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>31.3043478261deg ,6.1111111111%, 95.9411764706%</span> </li> </ul> </div>
</div>




 HideCodeBlock: display_none 

Weight:0

Styleguide DesignBase.CrayonBox.info

*/
/*

highlight: Color Variations 

The Modified versions of the highlight color from this theme

Markup:

<div
	class="grid gap-x_2 gap-y_2 template-x_15 font_n1 p_4 bg_highlight"
>
		<div class='p_3 bg_highlight-n5'><h2 class= c_white >highlight-n5</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #120a1c;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#120a1c</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 18, 10, 28 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>18, 10, 28</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 265.8536585366deg ,52.6352941176%, 7.5% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>265.8536585366deg ,52.6352941176%, 7.5%</span> </li> </ul> </div>
		<div class='p_3 bg_highlight-n4'><h2 class= c_white >highlight-n4</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #241439;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#241439</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 36, 20, 57 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>36, 20, 57</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 265.8536585366deg ,51.8588235294%, 15% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>265.8536585366deg ,51.8588235294%, 15%</span> </li> </ul> </div>
		<div class='p_3 bg_highlight-n3'><h2 class= c_white >highlight-n3</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #3c215f;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#3c215f</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 60, 33, 95 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>60, 33, 95</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 265.8536585366deg ,50.8235294118%, 25% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>265.8536585366deg ,50.8235294118%, 25%</span> </li> </ul> </div>
		<div class='p_3 bg_highlight-n2'><h2 class= c_white >highlight-n2</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #532e84;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#532e84</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 83, 46, 132 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>83, 46, 132</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 265.8536585366deg ,49.7882352941%, 35% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>265.8536585366deg ,49.7882352941%, 35%</span> </li> </ul> </div>
		<div class='p_3 bg_highlight-n1'><h2 class= c_white >highlight-n1</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #6538a1;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#6538a1</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 101, 56, 161 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>101, 56, 161</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 265.8536585366deg ,49.0117647059%, 42.5% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>265.8536585366deg ,49.0117647059%, 42.5%</span> </li> </ul> </div>
		<div class='p_3 bg_highlight-0'><h2 class= c_white >highlight-0</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #7742bd;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#7742bd</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 119, 66, 189 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>119, 66, 189</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 265.8536585366deg, 48.2352941176%, 50% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>265.8536585366deg, 48.2352941176%, 50%</span> </li> </ul> </div>
		<div class='p_3 bg_highlight-1'><h2 class= c_black >highlight-1</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #8555c4;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#8555c4</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 133, 85, 196 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>133, 85, 196</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 265.8536585366deg ,45.8235294118%, 55% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>265.8536585366deg ,45.8235294118%, 55%</span> </li> </ul> </div>
		<div class='p_3 bg_highlight-2'><h2 class= c_black >highlight-2</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #9971ce;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#9971ce</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 153, 113, 206 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>153, 113, 206</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 265.8536585366deg ,42.2058823529%, 62.5% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>265.8536585366deg ,42.2058823529%, 62.5%</span> </li> </ul> </div>
		<div class='p_3 bg_highlight-3'><h2 class= c_black >highlight-3</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #bba1de;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#bba1de</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 187, 161, 222 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>187, 161, 222</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 265.8536585366deg ,36.1764705882%, 75% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>265.8536585366deg ,36.1764705882%, 75%</span> </li> </ul> </div>
		<div class='p_3 bg_highlight-4'><h2 class= c_black >highlight-4</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #ddd0ef;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#ddd0ef</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 221, 208, 239 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>221, 208, 239</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 265.8536585366deg ,30.1470588235%, 87.5% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>265.8536585366deg ,30.1470588235%, 87.5%</span> </li> </ul> </div>
		<div class='p_3 bg_highlight-5'><h2 class= c_black >highlight-5</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #f1ecf8;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#f1ecf8</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 241, 236, 248 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>241, 236, 248</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 265.8536585366deg ,26.5294117647%, 95% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>265.8536585366deg ,26.5294117647%, 95%</span> </li> </ul> </div>
</div>




 HideCodeBlock: display_none 

Weight:0

Styleguide DesignBase.CrayonBox.highlight

*/
/*

acc: Color Variations 

The Modified versions of the acc color from this theme

Markup:

<div
	class="grid gap-x_2 gap-y_2 template-x_15 font_n1 p_4 bg_acc"
>
		<div class='p_3 bg_acc-n5'><h2 class= c_white >acc-n5</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #000a12;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#000a12</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 0, 10, 18 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>0, 10, 18</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 206.9491525424deg ,100%, 3.4705882353% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>206.9491525424deg ,100%, 3.4705882353%</span> </li> </ul> </div>
		<div class='p_3 bg_acc-n4'><h2 class= c_white >acc-n4</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #001423;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#001423</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 0, 20, 35 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>0, 20, 35</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 206.9491525424deg ,100%, 6.9411764706% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>206.9491525424deg ,100%, 6.9411764706%</span> </li> </ul> </div>
		<div class='p_3 bg_acc-n3'><h2 class= c_white >acc-n3</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #00213b;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#00213b</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 0, 33, 59 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>0, 33, 59</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 206.9491525424deg ,100%, 11.568627451% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>206.9491525424deg ,100%, 11.568627451%</span> </li> </ul> </div>
		<div class='p_3 bg_acc-n2'><h2 class= c_white >acc-n2</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #002e53;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#002e53</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 0, 46, 83 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>0, 46, 83</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 206.9491525424deg ,100%, 16.1960784314% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>206.9491525424deg ,100%, 16.1960784314%</span> </li> </ul> </div>
		<div class='p_3 bg_acc-n1'><h2 class= c_white >acc-n1</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #003764;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#003764</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 0, 55, 100 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>0, 55, 100</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 206.9491525424deg ,100%, 19.6666666667% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>206.9491525424deg ,100%, 19.6666666667%</span> </li> </ul> </div>
		<div class='p_3 bg_acc-0'><h2 class= c_white >acc-0</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #004176;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#004176</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 0, 65, 118 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>0, 65, 118</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 206.9491525424deg, 100%, 23.137254902% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>206.9491525424deg, 100%, 23.137254902%</span> </li> </ul> </div>
		<div class='p_3 bg_acc-1'><h2 class= c_black >acc-1</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #00579d;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#00579d</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 0, 87, 157 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>0, 87, 157</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 206.9491525424deg ,95%, 30.8235294118% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>206.9491525424deg ,95%, 30.8235294118%</span> </li> </ul> </div>
		<div class='p_3 bg_acc-2'><h2 class= c_black >acc-2</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #0077d8;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#0077d8</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 0, 119, 216 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>0, 119, 216</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 206.9491525424deg ,87.5%, 42.3529411765% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>206.9491525424deg ,87.5%, 42.3529411765%</span> </li> </ul> </div>
		<div class='p_3 bg_acc-3'><h2 class= c_black >acc-3</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #3ba7ff;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#3ba7ff</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 59, 167, 255 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>59, 167, 255</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 206.9491525424deg ,75%, 61.568627451% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>206.9491525424deg ,75%, 61.568627451%</span> </li> </ul> </div>
		<div class='p_3 bg_acc-4'><h2 class= c_black >acc-4</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #9dd3ff;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#9dd3ff</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 157, 211, 255 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>157, 211, 255</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 206.9491525424deg ,62.5%, 80.7843137255% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>206.9491525424deg ,62.5%, 80.7843137255%</span> </li> </ul> </div>
		<div class='p_3 bg_acc-5'><h2 class= c_black >acc-5</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #d8edff;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#d8edff</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 216, 237, 255 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>216, 237, 255</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 206.9491525424deg ,55%, 92.3137254902% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>206.9491525424deg ,55%, 92.3137254902%</span> </li> </ul> </div>
</div>




 HideCodeBlock: display_none 

Weight:0

Styleguide DesignBase.CrayonBox.acc

*/
/*
Crayon Box

This is all of the colors of the theme broken out with its modifications written in hex code.


Weight:0

HideCodeBlock: display_none 

Styleguide DesignBase.CrayonBox
*/
/*Adobe XD Color Map*/
/* $xd-color_primary-0: #198dae*/
/* $xd-color_primary-n5: #04151a*/
/* $xd-color_primary-n4: #082a34*/
/* $xd-color_primary-n3: #0d4757*/
/* $xd-color_primary-n2: #12637a*/
/* $xd-color_primary-n1: #157894*/
/* $xd-color_primary-1: #1da3c9*/
/* $xd-color_primary-2: #33bbe2*/
/* $xd-color_primary-3: #77d2eb*/
/* $xd-color_primary-4: #bbe8f5*/
/* $xd-color_primary-5: #e4f6fb*/
/* $xd-color_secondary-0: #676a72*/
/* $xd-color_secondary-n5: #0f1011*/
/* $xd-color_secondary-n4: #1f2022*/
/* $xd-color_secondary-n3: #343539*/
/* $xd-color_secondary-n2: #484a50*/
/* $xd-color_secondary-n1: #585a61*/
/* $xd-color_secondary-1: #757881*/
/* $xd-color_secondary-2: #8c8f97*/
/* $xd-color_secondary-3: #b2b4b9*/
/* $xd-color_secondary-4: #d9dadc*/
/* $xd-color_secondary-5: #f0f0f1*/
/* $xd-color_success-0: #078a2e*/
/* $xd-color_success-n5: #011507*/
/* $xd-color_success-n4: #02290e*/
/* $xd-color_success-n3: #044517*/
/* $xd-color_success-n2: #056120*/
/* $xd-color_success-n1: #067527*/
/* $xd-color_success-1: #09ad3a*/
/* $xd-color_success-2: #0be14b*/
/* $xd-color_success-3: #51f682*/
/* $xd-color_success-4: #a8fbc1*/
/* $xd-color_success-5: #dcfde6*/
/* $xd-color_shade-0: #878585*/
/* $xd-color_shade-n5: #141414*/
/* $xd-color_shade-n4: #292828*/
/* $xd-color_shade-n3: #444242*/
/* $xd-color_shade-n2: #5f5d5d*/
/* $xd-color_shade-n1: #737171*/
/* $xd-color_shade-1: #939191*/
/* $xd-color_shade-2: #a5a4a4*/
/* $xd-color_shade-3: #c3c2c2*/
/* $xd-color_shade-4: #e1e1e1*/
/* $xd-color_shade-5: #f3f3f3*/
/* $xd-color_warning-0: #da8210*/
/* $xd-color_warning-n5: #211402*/
/* $xd-color_warning-n4: #412705*/
/* $xd-color_warning-n3: #6d4108*/
/* $xd-color_warning-n2: #995b0b*/
/* $xd-color_warning-n1: #b96f0e*/
/* $xd-color_warning-1: #ee9118*/
/* $xd-color_warning-2: #f1a33e*/
/* $xd-color_warning-3: #f6c27e*/
/* $xd-color_warning-4: #fae0bf*/
/* $xd-color_warning-5: #fdf3e5*/
/* $xd-color_alert-0: #dd1a1a*/
/* $xd-color_alert-n5: #210404*/
/* $xd-color_alert-n4: #420808*/
/* $xd-color_alert-n3: #6f0d0d*/
/* $xd-color_alert-n2: #9b1212*/
/* $xd-color_alert-n1: #bc1616*/
/* $xd-color_alert-1: #e62b2b*/
/* $xd-color_alert-2: #ea4f4f*/
/* $xd-color_alert-3: #f18989*/
/* $xd-color_alert-4: #f8c4c4*/
/* $xd-color_alert-5: #fce7e7*/
/* $xd-color_navigation-0: #2b58c0*/
/* $xd-color_navigation-n5: #060d1d*/
/* $xd-color_navigation-n4: #0d1a3a*/
/* $xd-color_navigation-n3: #162c60*/
/* $xd-color_navigation-n2: #1e3e86*/
/* $xd-color_navigation-n1: #254ba3*/
/* $xd-color_navigation-1: #3564d2*/
/* $xd-color_navigation-2: #567ed9*/
/* $xd-color_navigation-3: #8fa9e6*/
/* $xd-color_navigation-4: #c7d4f2*/
/* $xd-color_navigation-5: #e9eefa*/
/* $xd-color_accent-0: #16a385*/
/* $xd-color_accent-n5: #031814*/
/* $xd-color_accent-n4: #073128*/
/* $xd-color_accent-n3: #0b5243*/
/* $xd-color_accent-n2: #0f725d*/
/* $xd-color_accent-n1: #138b71*/
/* $xd-color_accent-1: #1ac09c*/
/* $xd-color_accent-2: #28e2ba*/
/* $xd-color_accent-3: #70ecd1*/
/* $xd-color_accent-4: #b7f5e8*/
/* $xd-color_accent-5: #e2fbf6*/
/* $xd-color_info-0: #a3988c*/
/* $xd-color_info-n5: #191714*/
/* $xd-color_info-n4: #332e28*/
/* $xd-color_info-n3: #544c43*/
/* $xd-color_info-n2: #766b5e*/
/* $xd-color_info-n1: #8f8173*/
/* $xd-color_info-1: #aca298*/
/* $xd-color_info-2: #bab2a9*/
/* $xd-color_info-3: #d1ccc6*/
/* $xd-color_info-4: #e8e5e2*/
/* $xd-color_info-5: #f6f5f4*/
/* $xd-color_highlight-0: #7742bd*/
/* $xd-color_highlight-n5: #120a1c*/
/* $xd-color_highlight-n4: #241439*/
/* $xd-color_highlight-n3: #3c215f*/
/* $xd-color_highlight-n2: #532e84*/
/* $xd-color_highlight-n1: #6538a1*/
/* $xd-color_highlight-1: #8555c4*/
/* $xd-color_highlight-2: #9971ce*/
/* $xd-color_highlight-3: #bba1de*/
/* $xd-color_highlight-4: #ddd0ef*/
/* $xd-color_highlight-5: #f1ecf8*/
/* $xd-color_acc-0: #004176*/
/* $xd-color_acc-n5: #000a12*/
/* $xd-color_acc-n4: #001423*/
/* $xd-color_acc-n3: #00213b*/
/* $xd-color_acc-n2: #002e53*/
/* $xd-color_acc-n1: #003764*/
/* $xd-color_acc-1: #00579d*/
/* $xd-color_acc-2: #0077d8*/
/* $xd-color_acc-3: #3ba7ff*/
/* $xd-color_acc-4: #9dd3ff*/
/* $xd-color_acc-5: #d8edff*/
/*
Interactive Extras

Interactions can be enhanced with toggle icons or loading graphics to show the system is responding to user input.

Styleguide Recipes.InteractiveExtras
*/
.font .font--example {
  background-image: url(http://basehold.it/i/24);
}
.font .font--name {
  color: #000;
}
.font .font--dropcase_2x {
  color: #198dae;
}

/*

Basic HTML

The Arches Design System, at its core, is a Utility Class Styling Design.  It is built not to prescribe the design of the HTML and components but to paint with classes to create complicated UI without having to create more styles.  Arches rely on the browser or branding defaults for basic HTML styling.  Below is a kitchen sink of HTML elements so you can see how this variation look without further alteration from adding classes. There is No basic styling around the pure DOM with the utility class only, and there is improved styling as you add Bootstrap or Foundation.  

Weight: -100

Styleguide HTML
*/
/*

Reading Typography

Reading typography is a container class to opt into an override of the basic typography from arches. Basic Typography is un-styled and rely on the most basic styles from the browser stylesheets so there is less overriding when making UI but it leaves reading typography lacking. Most ways typography content is added to a site is devoid of hooks to add styles to an element so work around that restriction and to unified styling across reading experiences the "reading-typography" class is used on the parent container.  Please note that the reading typography can still look a bit different look depending on the brand or the framework. <table><thead><tr><th>modifier class</th><th>customization</th><th>usage</th></tr></thead><tbody><tr><td><code>.inherit_color</code></td><td>removes all color rules from colored typography and sets it to inherit.</td><td>inverting a block of typography where all text and headlines should be white.</td></tr><tr><td><code>.font-size_up</code></td><td>shifts all typography up one font size step</td><td>intro blocks of text where the text. Or in articles where you can shift all text up a size.</td></tr><tr><td>`.font-size_down`</td><td>shifts all typography down one font size step.</td><td>citation blocks or boiler plate content where the text should be smaller and less impactful.</td></tr><tr><td><code>.links_dark</code></td><td>turns all links to the dark color standard.</td><td>this is used in junction with the <code>.inherit_color</code> class.</td></tr><tr><td><code>.links_light</code></td><td>turns all links to the light color standard.</td><td>this is used in junction with the <code>.inherit_color</code> class when text is on a dark background.</td></tr></tbody></table><small class="c_highlight block">* there are further advanced features if you want to apply CSS Property Overrides.</small> 

Markup:
<section class="max-w_65 reading-typography m_auto">
<div class="relative">
	<a target="_blank" href="https://css-tricks.com/almanac/selectors/n/not/"><picture class="w_100">
		<source class="w_100" srcset="https://via.placeholder.com/1440x200.png?text=Desktop+Large+wrapped+link" media="(min-width: 1200px)">
		<source class="w_100" srcset="https://via.placeholder.com/1200x200.png?text=Desktop+wrapped+link" media="(min-width: 1024px)">
		<source class="w_100" srcset="https://via.placeholder.com/768x200.png?text=Tablet+wrapped+link" media="(min-width: 768px)">
		<source class="w_100" srcset="https://via.placeholder.com/600x250.png?text=Mobile+wrapped+link" media="(min-width: 400px)"> <source class="w_100" srcset="https://via.placeholder.com/400x300.png?text=Mobile" media="(min-width: 400px)">
		<img src="https://via.placeholder.com/400x300.png?text=Mobile" class="w_100" alt="">
	</picture></a>
    <div class="absolute b_4 r_4 l_4 b_auto:lg t_4:lg r_4:lg r_4:md l_auto:md b_4:md t_4:md justify_center flex flex_row flex_column:md flex_row:lg gap-x_4 gap-y_4">
        <div class="bg_secondary-2 br_1 br_black-3 br_radius br_solid:lg br_none c_white font_medium font_ui gap-x_3 inline-block inline-flex justify_end m-x_2 p_2:lg p_0 relative shadow_overlap-light">
            <span class="font_bold font_ui self_center vertical-align_middle display_none inline:md p-x_3">User Name</span>
            <a class="btn bg_accent-n1 h:bg_accent-n3 br_solid br_black-2 br_1 c_white  h:c_white uppercase shadow_overlap-light font_ui font_bold" href="#">Log Out <i class="fas fa-sign-out p-l_2"></i></a>
        </div>
    </div>
</div>
  <h1>This is the primary heading and there should only be one of these per page</h1>
  <h6>sub heading</h6>
    <p>A small paragraph to <em>emphasis</em> and show <strong>important</strong> bits.</p>
    <ul>
        <li>This is a list item</li>
        <li>So is this - there could be more</li>
        <li>Make sure to style list items to:
            <ul>
                <li>Not forgetting child list items</li>
                <li>Not forgetting child list items</li>
                <li>Not forgetting child list items</li>
                <li>Not forgetting child list items</li>
            </ul>
        </li>
        <li>A couple more</li>
        <li>top level list items</li>
    </ul>
    <p>Don't forget <strong>Ordered lists</strong>:</p>
    <ol>
       <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
       <li>Aliquam tincidunt mauris eu risus.
        <ol>
            <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
            <li>Aliquam tincidunt mauris eu risus.</li>
        </ol>
        </li>
       <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
       <li>Aliquam tincidunt mauris eu risus.
    </li></ol>
    <h2>A sub heading which is not as important as the first, but is quite imporant overall</h2>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
    <table>
    <thead><tr>
            <th>Table Heading</th>
            <th>Table Heading</th>
        </tr></thead>
        <tbody>
        <tr>
            <td>table data</td>
            <td>table data</td>
        </tr>
        <tr>
            <td>table data</td>
            <td>table data</td>
        </tr>
        <tr>
            <td>table data</td>
            <td>table data</td>
        </tr>
        <tr>
            <td>table data</td>
            <td>table data</td>
        </tr>
    </tbody></table>    	
    <h3>A sub heading which is not as important as the second, but should be used with consideration</h3>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
    <blockquote><p>“Ooh - a blockquote! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.”</p></blockquote>
    <h4>A sub heading which is not as important as the second, but should be used with consideration</h4>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
    <pre><code>
#header h1 a { 
    display: block; 
    width: 300px; 
    height: 80px; 
}
</code></pre>
    <h5>A sub heading which is not as important as the second, but should be used with consideration</h5>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
    <dl>
   <dt>Definition list</dt>
   <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna 
	aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea 
	commodo consequat.</dd>
	   <dt>Lorem ipsum dolor sit amet</dt>
	   <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna 
	aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea 
	commodo consequat.</dd>
	</dl>
	<h6>This heading plays a relatively small bit part role, if you use it at all</h6>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<section>

Weight: -9

HideCodeBlock: display_none 

Styleguide HTML.Typography

*/
/*

Sample Typography

This text is used as a lorem content in many of our containers.  

.p_4                                                    - This is the basic typogrpahy from the browser.
.reading-typography.p_4                                 - this is the standard styling for typography of reading content
.reading-typography.font-size_up.p_4                    - This font increased their sizes across all typography in the container.
.reading-typography.font-size_down.p_4                  - This font decreses their sizes across all typography in the container.
.reading-typography.color_inherit.bg_acc.c_white.p_4.links_light    - This removes all color defining styles to make it easer to reverse colors. This sets all typography and borders to inherit their colors.

Markup:
<div class="{{modifier_class}}">
    <h1>Lorem Ipsum</h1>
    <p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. <a href="#random2" target="_blank">Pellentesque</a> sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#random">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
    <h2>Header Level 2</h2>
    <ol>
        <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
        <li>Aliquam tincidunt mauris eu risus.</li>
    </ol>
    <blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>
    <h3>Header Level 3</h3>
    <ul>
        <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
        <li>Aliquam tincidunt mauris eu risus.</li>
    </ul>
    <button class="btn btn-primary">Button</button>
</div>

Weight: -9

HideCodeBlock: display_none 

MarkupWrapperClasses: br_solid br_radius br_black-1 br_1 m_3 max-w_50

Styleguide HTML.Typography.Sample

*/
/*

Basic Typography

Basic Typography is unstyled and relys on the most basic styles from the browser stylesheets so there is less overriding when making UI but it leaves the reading of content text lacking. The overriding styles that are applied to Basic typography is a consistent font treatment (font sizing, font family, and font-weight) and what comes from the baseline frameworks that build the brand.  


Markup:
<h1>Basic Typography: <small>Lorem ipsum dolor sit amet, consectetuer adipiscing 
elit.</small></h1>
<h2>Aenean commodo ligula eget dolor aenean massa</h2>
<h3>Cut sociis natoque penatibus et magnis dis 
parturient montes nascetur ridiculus mus</h3>
<h4>Donec quam felis ultricies nec pellentesque eu 
pretium quis sem nlla consequat massa quis enim</h4>
<h5>Donec pede justo fringilla vel aliquet nec vulputate 
eget arcu</h5>
<h6>In enim justo rhoncus ut imperdiet a venenatis vitae 
justo</h6>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing 
elit. Aenean commodo ligula eget dolor. Aenean massa. 
Cum sociis natoque penatibus et magnis dis parturient 
montes, nascetur ridiculus mus. Donec quam felis, 
ultricies nec, pellentesque eu, pretium quis, sem.</p>
<article><p>This paragraph is nested inside an article. It contains many different, sometimes useful, <a href="https://www.w3schools.com/tags/">HTML5 tags</a>. Of course there are classics like <em>emphasis</em>, <strong>strong</strong>, and <small>small</small> but there are many others as well. Hover the following text for abbreviation tag: <abbr title="abbreviation">abbr</abbr>. Similarly, you can use acronym tag like this: <acronym title="For The Win">ftw</acronym>. You can define <del>deleted text</del> which often gets replaced with <ins>inserted</ins> text.</p><p>You can also use <kbd>keyboard text</kbd>, which sometimes is styled similarly to the <code>&lt;code&gt;</code> or <samp>samp</samp> tags. Even more specifically, there is a tag just for <var>variables</var>. Not to be mistaken with blockquotes below, the quote tag lets you denote something as <q>quoted text</q>. Lastly don't forget the sub (H<sub>2</sub>O) and sup (E = MC<sup>2</sup>) tags.</p></article>

Weight: -1000

HideCodeBlock: display_none 

MarkupWrapperClasses: max-w_65

Styleguide HTML.Unstyled

*/
/*
ACC Article

Markup:
<div id="reading-typography" class="reading-typography">
	<h1>Article Title</h1>
	<p>Tricuspid regurgitation (TR) is a common valvular disease estimated to affect &gt;1.5 million people in the U.S., with a yearly incidence of about 200,000 and &gt;300,000 patients in the U.S and Europe, respectively.<sup>1</sup> Stated another way, a clinically significant form of this valvular disease affects 4% (or 1 in 25) of patients ages 75 and older.<sup>2</sup></p>
	<p>Despite the current guidelines favoring early tricuspid valve repair, especially when undergoing concomitant left-sided cardiac surgery, most patients with TR receive <a href="#">lifetime medical</a> therapy until intractable right-sided heart failure (HF) and end-organ dysfunction appear.<sup>1</sup> In recent years, multiple studies have drawn attention to the poor prognosis of untreated TR, and demonstrated a clear tendency of excess mortality in patients with increasing severity of TR, highlighting the need for interventional options to improve outcomes.<sup>3</sup></p>
	<div class="aspect_1x1 font_0 max-w_25 relative float_right">
		<div class="absolute flex flex_row l_0">
			<div class="max-w_5">
				<img src="https://www.acc.org//-/media/Non-Clinical/Images/2022/10/CARDIOLOGY/22/Weintraub-Bill-600x600.jpg" alt="Bill Weintraub, MD, MACC" class="br_3 br_accent br_circle br_solid m-b_2 shadow_overlap-bold w_100">
			</div>
			<div class="m-l_n4 max-w_5">
				<img src="https://www.acc.org//-/media/Non-Clinical/Images/2022/10/CARDIOLOGY/22/Weintraub-Bill-600x600.jpg" alt="Bill Weintraub, MD, MACC" class="br_3 br_accent br_circle br_solid m-b_2 shadow_overlap-bold w_100">
			</div>
		</div>
		<div class="circle__inner">
			<div class="aspect_1x1 bg_acc br_circle circle__content circle__wrapper grid items_center justify_center p_4 radial-gradient_custom" style="--origin: at center;">
				<div class="c_white flex flex_column gap-y_4 p-x_5 p-y_4 text_center">
					<i class="c_accent fa-quote-left fas font-size_up-2 m-b_n2"></i><span class="font-size_up lh_2">The future of medicine is increasingly in the hands of those who are effective users of clinical data.</span><i class="c_accent fa-quote-right fas font-size_up-2 m-t_n2"></i>
					<cite class="font-size_down text_right">– <strong>Bill Weintraub, MD, MACC</strong></cite>
				</div>
			</div>
		</div>
	</div>
	<p>TR associated with left-sided valvular or myocardial disease is often a marker for late-stage chronic HF with limited treatment options and an unfavorable overall prognosis. However, isolated TR is also independently associated with excess mortality if left untreated. Thus, TR represents an important public health problem with an unmet clinical need.</p>
	<p>Surgical approaches, either repair or replacement, have been shown to carry a high risk of in-hospital mortality, reaching 10%, without significant improvement over the past 10 years.<sup>4</sup> As transcatheter interventional options for valvular heart disease continue to expand, transcatheter tricuspid valve repair through leaflet approximation or annuloplasty has been investigated.</p>
	<p>Despite studies showing promising results with greater survival and freedom from HF rehospitalization compared with conservative management, its use can be limited by anatomical infeasibility such as large leaflet coaptation gap, perforation, significant leaflet tethering with dense chordae, and leaflet impingement with a cardiac implantable electronic device lead.</p>
	<p>A myriad of investigational transcatheter tricuspid valve replacement (TTVR) devices have emerged as an alternative to surgery and to address this outstanding need, with promising early results related to safety, efficacy and improvements in patients' functional status and quality of life.</p>
	<h3>Orthotopic Valve Replacement</h3>
	<p>Orthotopic TTVR is a form of valve replacement performed by implanting a bioprosthetic valve on an existing tricuspid annulus, in a fashion similar to how it is performed in transcatheter aortic or mitral valve replacement. Several investigational devices are available with a variety of access and anchoring systems.</p>
	<h3>EVOQUE</h3>
	<p>The EVOQUE system (Edwards Lifesciences, Irvine, CA) is a self-expanding bovine pericardial valve mounted on a nitinol frame with a fabric skirt delivered through a transfemoral approach. The perimeter is surrounded by nine anchors that allow stabilization through anchoring to the annulus, leaflets and chords of the tricuspid apparatus. Its compassionate use in 27 patients with severe symptomatic TR at inoperable or high surgical risk has demonstrated 92% success with no periprocedural mortality.<sup>5</sup></p>
	<p>The reduction in TR remained excellent at one year (≤moderate in 96% and ≤mild in 87%) with sustained symptomatic improvement (NYHA I/II in 69% compared with 11% at baseline).<sup>5</sup> All-cause death and HF hospitalization at one year were both at 7% without any deaths being identified as device-related. An early feasibility trial of this device, TRISCEND, is ongoing with an early report of 56 patients demonstrating a similar success rate, reduction in TR and symptomatic improvement.<sup>6</sup></p>
	<h3>Lux-Valve</h3>
	<p>The Lux-Valve (Jenscare Biotechnology Co., Ningbo, China) is a bovine pericardium valve with a self-expanding nitinol atrial disc, self-adaptive fabric skirt, two graspers and an interventricular septal anchor. It is deployed via a minimally invasive right thoracotomy and transatrial approach. First-in-human experience including 31 patients reported a 100% technical success rate with TR reduction to ≤moderate and ≤mild in 100% and 85.2%, respectively at one year. Symptomatic improvement has persisted at one year with 82.8% maintaining NYHA I/II and a 96.8% survival rate.<sup>7</sup> A study investigating the second-generation LuX-Valve Plus delivered through transjugular access is currently underway (NCT05436028).</p>
	<h3>GATE</h3>
	<p>The GATE (NaviGate Cardiac Structures, Inc., Lake Forest, CA) device was the first TTVR performed and is composed of an equine pericardium tricuspid valve mounted on a nitinol alloy stent. Twelve right ventricular tines grasp the native leaflets and 12 right atrial winglets covered by microfiber polyester cloth provide a seal. It is delivered through a right thoracotomy and transatrial access. An early study including five patients reported 100% technical success, with all patients demonstrating TR reduction to ≤mild; however, one patient died before discharge.<sup>8</sup></p>
	<div class="c_white color_inherit float_right lh_2 linear-gradient_custom m-l_5:md m-t_0:md m-y_5 p_4 reading-typography w_100 w_55:md" style="--start-color:hsl(315deg 67% 37%);--end-color:hsl(292deg 68% 24%);">
		<h2>Prominent Stressors For CVD Among LGBTQIA+ Adults</h2>
		<p>Excess cardiovascular disease risk is associated with three categories of stressors, as described by the Minority Stress Model: psychosocial (depression, anxiety, stress); behavioral (diet quality, physical activity, substance use); and physiological (hypothalamic-pituitary-adrenal axis, chronic inflammation, autonomic nervous system&nbsp;dysfunction).<sup>4</sup></p>
		<p>Structural/institutional stressors are also in&nbsp;place. The Behavioral Risk Factor Surveillance System survey 2014-2017 found a higher rate of poverty in LGBT people compared with cisgender heterosexual people <a href="#21.pdf" target="_blank"> vs. 15.7%,&nbsp;respectively</a>).<sup>9</sup></p>
		<p>In 2018, a large portion of LGBTQIA+ individuals lived in states that did not have public accommodation (hospitals and schools) and employment nondiscrimination laws.<sup>10</sup></p>
		<p>For many transgender individuals, employee-sponsored health insurance is often not an option. Many employee-sponsored health insurance programs do not acknowledge partners or spouses with gender identities that align with the insured. More than two-thirds of gender minority adults report having experienced some form of discrimination from clinicians (including the use of abusive language). Roughly a quarter of transgender individuals have been denied health care by clinicians.<sup>11</sup></p>
		<h3>Cardiovascular Disease Risk Factors</h3>
		<p>The data on cardiovascular health in LGBTQIA+ adults are limited because of a lack of research and challenges with study design. In terms of cardiovascular disease risk factors, the use of tobacco products is more likely among LGBTQIA+ adults than cisgender heterosexual adults.<sup>12</sup> Alcohol and illicit drug use disorder, poor mental health and elevated body mass index are greater risk factors among sexual minority women than heterosexual women.<sup>13</sup> Current studies also suggest that decreased sleep duration, which has been associated with higher rates of hypertension, diabetes and cardiovascular disease, was higher among sexual minority women compared with heterosexual women.<sup>14</sup></p>
	</div>
	<h3>Cardiovalve</h3>
	<p>The Cardiovalve (Venus Medtech Inc., Hangzhou, China) is deployed through transfemoral access and consists of a bovine pericardial leaflet mounted on a dual nitinol atrial and ventricular frame creating 24 grasping points for anchoring. The atrial portion of the frame has a covered flange to allow sealing to prevent paravalvular leak. Its compassionate use has been reported in 15 patients demonstrating significant reduction in TR to ≤moderate in 100% and ≤mild in 8% at 30 days.<sup>9</sup> An early feasibility study is currently underway (NCT04100720).</p>
	<h3>Intrepid</h3>
	<p>The Intrepid (Medtronic Plc, Minneapolis, MN) is a transfemoral system with a bovine pericardial valve housed within a nitinol dual stent frame. Early experience with three patients reported technical success in all, and an early feasibility study is currently recruiting patients with a goal to include 15 patients (NCT04433065).<sup>10</sup></p>
	<div class="br-t_4 br_acc br_solid clear_both m-b_4">
		<div class="row m-t_1">
			<div class="col-sm-2 p-t_2">
				<img src="https://www.acc.org//-/media/Non-Clinical/Images/2022/11/CARDIOLOGY/24/Ueyama-Hiroki-600x600.jpg" alt="Hiroki Ueyama, MD" class="w_100 br_circle">
			</div>
			<div class="col-sm-2 p-t_2">
				<img src="https://www.acc.org//-/media/Non-Clinical/Images/2022/11/CARDIOLOGY/24/Byku-Isida-600x600.jpg" alt="Isida Byku, MD, FACC" class="w_100 br_circle">
			</div>
			<div class="col-sm-8">
				<p>This article was authored by <strong>Hiroki Ueyama, MD</strong>, and <strong>Isida Byku, MD, FACC</strong>, from the Division of Cardiology, Emory Structural Heart and Valve Center, Emory University Hospital Midtown, in Atlanta, GA.</p>
			</div>
		</div>
	</div>
	<h2>References</h2>
	<ol>
		<li>Asmarats L, Puri R, Latib A, Navia JL, Rodés-Cabau J. Transcatheter tricuspid valve interventions: Landscape, challenges, and future directions. <em>J Am Coll Cardiol</em> 2018;71:2935-56.</li>
		<li>Topilsky Y, Maltais S, Medina Inojosa J, et al. Burden of Tricuspid regurgitation in patients diagnosed in the community setting. <em>JACC Cardiovasc Imaging</em> 2019;12:433-42.</li>
		<li>Taramasso M, Benfari G, van der Bijl P, et al. Transcatheter versus medical treatment of patients with symptomatic severe tricuspid regurgitation. <em>J Am Coll Cardiol</em> 2019;74:2998-3008.</li>
		<li>Dreyfus J, Flagiello M, Bazire B, et al. Isolated tricuspid valve surgery: Impact of aetiology and clinical presentation on outcomes. <em>Eur Heart J</em> 2020;41:4304-17.</li>
		<li>Webb JG, Chuang AM, Meier D, et al. Transcatheter Tricuspid valve replacement with the evoque system: 1-year outcomes of a multicenter, first-in-human experience. <em>JACC Cardiovasc Interv</em> 2022;15:481-91.</li>
		<li>Kodali S, Hahn RT, George I, et al. Transfemoral tricuspid valve replacement in patients with tricuspid regurgitation: TRISCEND study 30-Day results. <em>JACC Cardiovasc Interv</em> 2022;15:471-80.</li>
		<li>Modine T. Transcatheter tricuspid valve replacement with the LuX-Valve system 1-Year results of a multicenter FIH experience. Presented at TVT 2022, June 8, 2022.</li>
		<li>Hahn RT, George I, Kodali SK, et al. Early Single-site experience with transcatheter tricuspid valve replacement. <em>JACC Cardiovasc Imaging</em> 2019;12:416-29.</li>
		<li>Fam NP. Cardiovalve TTVR update. Presented at TVT 2022, June 8, 2022.</li>
		<li>Bapat VN. The INTREPID Valve for severe tricuspid regurgitation: First-in-man case experience. Presented at TCT 2020.</li>
		<li>Lauten A, Figulla HR, Unbehaun A, et al. Interventional treatment of severe tricuspid regurgitation: Early clinical experience in a multicenter, observational, first-in-man study. <em>Circ Cardiovasc Interv</em> 2018;11:e006061.</li>
		<li>Dreger H, Mattig I, Hewing B, et al. Treatment of severe tricuspid regurgitation in patients with advanced heart failure with CAval Vein Implantation of the Edwards Sapien XT VALve (TRICAVAL): a randomised controlled trial. <em>EuroIntervention</em> 2020;15:1506-13.</li>
		<li>Lauten A, Doenst T, Hamadanchi A, Franz M, Figulla HR. Percutaneous bicaval valve implantation for transcatheter treatment of tricuspid regurgitation: clinical observations and 12-month follow-up. <em>Circ Cardiovasc Interv</em> 2014;7:268-72.</li>
		<li>Wild MG, Lubos E, Cruz-Gonzalez I, et al. Early clinical experience with the TRICENTO bicaval valved stent for treatment of symptomatic severe tricuspid regurgitation: A multicenter registry. <em>Circ Cardiovasc Interv</em> 2022;15:e011302.</li>
		<li>Lurz P, von Bardeleben R, Weber M, et al. Transcatheter edge-to-edge repair for treatment of tricuspid regurgitation. <em>J Am Coll Cardiol</em> 2021;77:229-39.</li>
		<li>Hahn RT. Transcatheter tricuspid valve repair:CLASP TR study one-year results. . Presented at EuroPCR 2022.</li>
		<li>Kodali S, Hahn RT, Eleid MF, et al. Feasibility study of the transcatheter valve repair system for severe tricuspid regurgitation. <em>J Am Coll Cardiol</em> 2021;77:345-56.</li>
		<li>Zack CJ, Fender EA, Chandrashekar P, et al. National trends and outcomes in isolated tricuspid valve surgery. <em>J Am Coll Cardiol</em> 2017;70:2953-60.</li>
	</ol>
</div>

MarkupWrapperClasses: max-w_60

HideCodeBlock: display_none 

Weight:100

Styleguide HTML.RealArticle

*/
/*

Links States

This shows the look and feel of all the states of a text link, color, underline and decoration.

Markup:
<ul class="flex flex_column ul_none">
    <li class="p_3"><a href="#random2">NORMAL: Donec non enim</a></li>
    <li class="p_3"><a href="#random1" class="pseudo-class-hover">HOVER:  Normal Donec non enim</a>
</li>
    <li class="p_3"><a href="#random3" class="pseudo-class-visited">VISITED: Normal Donec non enim</a>
</li>
</ul>


MarkupWrapperClasses: reading-typography

Weight:100

Styleguide HTML.Typography.Links
 */
.container,
.card {
  position: relative;
}

/*
  Table

  There is a basic styling around the pure DOM of a table.   But to get full brand styling alter the parent tag to <table class='table'>.

  Markup:
  <table>
    <thead>
      <tr>
        <th>Table Header</th>
        <th>Table Header</th>
        <th>Table Header</th>
        <th>Table Header</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Content Goes Here</td>
        <td>This is longer content Donec id elit non mi porta gravida at eget metus.</td>
        <td>Content Goes Here</td>
        <td>Content Goes Here</td>
      </tr>
      <tr>
        <td>Content Goes Here</td>
        <td>This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.</td>
        <td>Content Goes Here</td>
        <td>Content Goes Here</td>
      </tr>
      <tr>
        <td>Content Goes Here</td>
        <td>This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.</td>
        <td>Content Goes Here</td>
        <td>Content Goes Here</td>
      </tr>
    </tbody>
  </table>

 Styleguide HTML.Table
*/
/*

Table Styled

<table class='table'> will style the table with the generic branded coloring and spacing. 

Markup:
<table class="table">
  <thead class="thead">
    <tr>
      <th>table header</th>
      <th>table header</th>
      <th>table header</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>table row 1 table cell A
        <br>
        <small class="c_primary">this is small text in blue</small>
      </td>
      <td>table row 1 table cell B
        <br>
        <small class="c_highlight">this is small text with magenta</small>
      </td>
      <td>table row 1 table cell C</td>
    </tr>
    <tr>
      <td>table row 2 table cell A</td>
      <td>table row 2 table cell B</td>
      <td>table row 2 table cell C</td>
    </tr>
  </tbody>
  <tfoot class="tfoot">
    <tr>
      <td colspan="3">footer cell</td>
    </tr>
  </tfoot>
</table>

Styleguide HTML.Table.BasicStyle
*/
.table {
  border-spacing: 0;
}
.table .thead,
.table thead {
  background-color: white;
}
.table .thead th,
.table .thead td,
.table thead th,
.table thead td {
  border-bottom: 2px solid hsla(var(--primary-h), calc( var( --primary-s ) - ( var( --primary-s ) * 0.05 ) ), calc( var(--primary-l) + ((100% - var(--primary-l)) * 0.1) ), 1);
}
.table .tfoot,
.table tfoot {
  background-color: hsla(var(--shade-h), calc( var( --shade-s ) - ( var( --shade-s ) * 0.45 ) ), calc( var(--shade-l) + ((100% - var(--shade-l)) * 0.9) ), 1);
}
.table .tfoot th,
.table .tfoot td,
.table tfoot th,
.table tfoot td {
  border-top: 1px solid hsla(var(--shade-h), calc( var( --shade-s ) - ( var( --shade-s ) * 0.05 ) ), calc( var(--shade-l) + ((100% - var(--shade-l)) * 0.1) ), 1);
  font-style: italic;
}

/*

Table Column Shaded

`<table class="table column-shaded">` gives a blue tint to every other column in the table.



Markup:
<table class="table column-shaded">
  <thead>
    <tr>
      <th>table header</th>
      <th>table header</th>
      <th>table header</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>row 1 cell A</td>
      <td>row 1 cell B</td>
      <td>row 1 cell C</td>
    </tr>
    <tr>
      <td>row 2 cell A</td>
      <td>row 2 cell B</td>
      <td>row 2 cell C</td>
    </tr>
    <tr>
      <td>row 3 cell A</td>
      <td>row 3 cell B</td>
      <td>row 3 cell C</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="3">footer cell</td>
    </tr>
  </tfoot>
</table>

Styleguide HTML.Table.ColumnShaded
*/
.table.column-shaded .thead th:nth-child(even),
.table.column-shaded thead th:nth-child(even) {
  background-color: hsla(var(--acc-h), calc( var( --acc-s ) - ( var( --acc-s ) * 0.45 ) ), calc( var(--acc-l) + ((100% - var(--acc-l)) * 0.9) ), 1);
}
.table.column-shaded .tbody td:nth-child(even),
.table.column-shaded tbody td:nth-child(even) {
  background-color: hsla(var(--primary-h), calc( var( --primary-s ) - ( var( --primary-s ) * 0.45 ) ), calc( var(--primary-l) + ((100% - var(--primary-l)) * 0.9) ), 1);
}
.table.column-shaded .tbody tr:nth-child(even) td:nth-child(even),
.table.column-shaded tbody tr:nth-child(even) td:nth-child(even) {
  background-color: hsla(var(--acc-h), calc( var( --acc-s ) - ( var( --acc-s ) * 0.375 ) ), calc( var(--acc-l) + ((100% - var(--acc-l)) * 0.75) ), 1);
}

/*


Table Unshaded

`<table class="table unshaded"> removes the shadding for rows and footer giving a cleaner table. This table type is great for small data sets and removes the 100% wide table that is default in all other tables.  

Markup:
<table class="table unshaded">
  <thead>
    <tr>
      <th>table header</th>
      <th>table header</th>
      <th>table header</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>row 1 cell A</td>
      <td>row 1 cell B</td>
      <td>row 1 cell C</td>
    </tr>
    <tr>
      <td>row 2 cell A</td>
      <td>row 2 cell B</td>
      <td>row 2 cell C</td>
    </tr>
    <tr>
      <td>row 3 cell A</td>
      <td>row 3 cell B</td>
      <td>row 3 cell C</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="3">footer cell</td>
    </tr>
  </tfoot>
</table>

Styleguide HTML.Table.Unshaded
*/
.table.unshaded {
  width: auto;
  border: none;
}
.table.unshaded thead {
  border-top: none;
  border-right: none;
  border-left: none;
}
.table.unshaded tbody tr:nth-child(even) {
  background-color: unset;
}
.table.unshaded tbody tr + tr td {
  border-top: 1px hsla(var(--shade-h), calc( var( --shade-s ) - ( var( --shade-s ) * 0.45 ) ), calc( var(--shade-l) + ((100% - var(--shade-l)) * 0.9) ), 1) solid;
}
.table.unshaded tfoot {
  background-color: unset;
}

/*

Table Column Shading: recipe

Table shading can be much more dynamic and varied if you are willing to build with utlity classes(UC's). You can see few variations of tables bellow that have been quickly been made with a basic table and background color classes applied to cells. 

.primary          - column colored variations of primary
.info             - column colored variations of info 
.accent      - column colored variations of highlighted 

Markup:
<table class="table">
  <thead>
    <tr>
      <th>table header</th>
      <th class="bg_{{modifier_class}}-4">table header</th>
      <th>table header</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>row 1 cell A</td>
      <td class="bg_{{modifier_class}}-5">row 1 cell B</td>
      <td>row 1 cell C</td>
    </tr>
    <tr>
      <td>row 2 cell A</td>
      <td class="bg_{{modifier_class}}-4">row 2 cell B</td>
      <td>row 2 cell C</td>
    </tr>
    <tr>
      <td>row 3 cell A</td>
      <td class="bg_{{modifier_class}}-5">row 3 cell B</td>
      <td>row 3 cell C</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="3">footer cell</td>
    </tr>
  </tfoot>
</table>

Styleguide HTML.Table.UtilityClasses.Shading
*/
/*
Table Cell States: RECIPE

States can be easily applied to the tables using UC's


Markup:
<table class="table">
  <tr>
    <td class="bg_alert-4 border_solid border-width_1 border_alert font-weight_bold text_center">
      <i class="fas fa-times-circle"></i>
    </td>
    <td class="">
    </td>
    <td class="">Text</td>
    <td class="bg_warning-4 border_solid border-width_1 border_warning font-weight_bold">
      <i class="fas fa-exclamation-triangle"></i> Warning</td>
  </tr>
  <tr>
    <td class="">
    </td>
    <td class="bg_info-4 border_solid border-width_1 border_info font-weight_bold text_center">
      <i class="fas fa-lightbulb-exclamation"></i>
    </td>
    <td class="">Text</td>
    <td class="bg_info-4 border_solid border-width_1 border_info font-weight_bold">
      <i class="fas fa-lightbulb-exclamation"></i>
      Info</td>
  </tr>
  <tr>
    <td class="">
    </td>
    <td class="warning icon">
    </td>  
    <td class="bg_alert-4 border_solid border-width_1 border_alert font-weight_bold">Alert</td>
    <td class=""> Text</td>
  </tr>
  <tr>
    <td class="success icon">
    </td>
    <td class="info icon">
    </td>
    <td class="bg_success-4 border_solid border-width_1 border_success font-weight_bold"><i class="fas fa-check"></i> Success</td>
    <td class=""> text</td>
  </tr>
</table>

Styleguide HTML.Table.UtilityClasses.CellStates
*/
/*

Table Seperators: RECIPE

Styling seperators on tables is now completely controled by utility classes giving much more flexablity to designs.



Markup:
<table class="table stripped">
  <thead>
    <tr>
      <th>table header</th>
      <th>table header</th>
      <th>table header</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>row 1 cell A</td>
      <td>row 1 cell B</td>
      <td>row 1 cell C</td>
    </tr>
    <tr class="bg_info-1 border_solid border-left-width_0  border-right-width_0 border-width_1 border border_info font-weight_bold font_n2 text-left c_white">
      <td colspan='3' class="p_2">Separator With Info</td>
    </tr>
    <tr>
      <td>row 1 cell A</td>
      <td>row 1 cell B</td>
      <td>row 1 cell C</td>
    </tr>
    <tr class="bg_success-1 border_solid border-left-width_0  border-right-width_0 border-width_1 border border_success font-weight_bold font_n2 text-left c_white">
      <td colspan='3' class="p_2">Separator With success</td>
    </tr>
    <tr>
      <td>row 1 cell A</td>
      <td>row 1 cell B</td>
      <td>row 1 cell C</td>
    </tr>
    <tr class="bg_alert-1 border_solid border-left-width_0 border-right-width_0 border-width_1 border border_alert font-weight_bold font_n2 text-left c_white">
      <td colspan='3' class="p_2">Separator With Alert</td>
    </tr>
    <tr>
      <td>row 1 cell A</td>
      <td>row 1 cell B</td>
      <td>row 1 cell C</td>
    </tr>
   <tr class="bg_warning-1 border_solid border-left-width_0  border-right-width_0 border-width_1 border border_warning font-weight_bold font_n2 text-left">
      <td colspan='3' class="p_2">Separator With warning</td>
    </tr>
    <tr>
      <td>row 1 cell A</td>
      <td>row 1 cell B</td>
      <td>row 1 cell C</td>
    </tr>
   <tr class="bg_shade-3 border_solid border-left-width_0  border-right-width_0 border-width_1 border border_shade font-weight_bold font_n2 text-left">
      <td colspan='3' class="p_2">Separator With disabled</td>
    </tr>
    <tr>
      <td>row 1 cell A</td>
      <td>row 1 cell B</td>
      <td>row 1 cell C</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="3">footer cell</td>
    </tr>
  </tfoot>
</table>

Styleguide HTML.Table.UtilityClasses.RowSeperators
*/
/*
Buttons

Basic Buttons

.primary	            	- Primary Class Button (default)
.secondary 	            - Second Class Button
.shade 	            	- Shade Class Button
.navigation             - Button reserved for navigation elements
.success                - Success State.
.alert                  - Alert State.
.warning	            	- Warning State
.hollow		            - All button states can become hollow
.clear		            - All button states can become hollow
.dropdown		        	- All button states can become hollow
.radius		            - Give the button softer corners
.shadow.clear		   	- Give a button a shadow
.tiny		           		- tiny buttons
.small		            - Small buttons
default		            - Medium buttons (default)
.large		            - Large buttons
.xlarge		            - Large buttons
.disabled	            - Disabled buttons

Markup:
<a data-style="{{ modifier_class }}"  class="button {{modifier_class}}">{{modifier_class}} button</a>

 Styleguide HTML.Buttons
*/
.button {
  white-space: nowrap;
}
.button.hollow,.button.clear {
  background-color: transparent;
}
.button.clear {
  border-color: transparent;
}
.button.shadow {
  box-shadow: 1.5px 1.5px 6px 0.75px rgba(0, 0, 0, 0.4);
}
.button.shadow:hover {
  box-shadow: 0.5px 0.5px 2px 0.25px rgba(0, 0, 0, 0.1);
}

.close-button {
  right: 0;
  left: 0;
  width: 100%;
  border-top: #198dae 9px solid;
  text-align: right;
}
.close-button span {
  padding: 0 0.2em;
  background: #198dae;
  vertical-align: top;
}
.close-button:focus {
  outline: none;
}

/*

    Question Structure

    shade - default decoration when there is no validation run on the input.

    Markup:
    <div data-style="{{ modifier_class }}"  class="question required {{modifier_class}}">
    <label for="input-x" class="label-holder grid-x c_{{modifier_class}} font_1">
        <span class="text cell shrink">Question Text</span>
        <span class="required-holder cell shrink">
            <i class="fas fa-asterisk c_warning font_n3 vertical-align_t"></i>
        </span>
    </label>
    <div class="input-holder grid-x c_{{modifier_class}}">
        <div class="alert br_{{modifier_class}}-3  bg_{{modifier_class}}-4  value-space cell shrink  br_solid br-w_1 p_3 p-b_2 b_shade-4 texture_light">
            <span class="c_{{modifier_class}} p_2"><i class="fas fa-fw fa-exclamation-square"></i></span>
        </div>
        <div class="warning br_{{modifier_class}}-3  bg_{{modifier_class}}-4  value-space cell shrink  br_solid br-w_1 p_3 p-b_2 b_shade-4 texture_light">
            <span class="c_{{modifier_class}} p_2"><i class="fas fa-fw fa-exclamation-triangle"></i></span>
        </div>
        <div class="info br_{{modifier_class}}-3  bg_{{modifier_class}}-4  value-space cell shrink  br_solid br-w_1 p_3 p-b_2 b_shade-4 texture_light">
            <span class="c_{{modifier_class}} p_2"><i class="fas fa-fw fa-lightbulb-exclamation"></i></span>
        </div>
        <div class="success br_{{modifier_class}}-3  bg_{{modifier_class}}-4  value-space cell shrink  br_solid br-w_1 p_3 p-b_2 b_shade-4 texture_light">
            <span class="c_{{modifier_class}} p_2"><i class="fas fa-fw fa-check-square"></i></span>
        </div>
        <div class="input-space cell auto">
            <input id="input-x" type="text" class="m-b_0 br_{{modifier_class}}-3 " />
        </div>
    </div>
    <div class="message-holder font_n1">
        <div class="alert p_2 bg_alert-n1 c_white">
        <i class="fas fa-fw fa-exclamation-square m-r_3 m-l_2"></i> Error message</div>
        <div class="warning p_2 bg_warning-n1 c_white">
        <i class="fas fa-fw fa-exclamation-triangle m-r_3 m-l_2"></i> Warning message</div>
        <div class="info p_2 bg_info-n1 c_white">
        <i class="fas fa-fw fa-lightbulb-exclamation m-r_3 m-l_2"></i> Informational message about your input</div>
    </div>
    <div class="hint-holder m-t_2 font_n1 c_shade p_2 p-t_0">This is some hint-holder text</div>
    </div>

    Weight: -1

    Styleguide Questions.Introduction
*/
/*

    Question Structure with States applied

    shade - default decoration when there is no validation run on the input.
    alert   - alert settings for questions
    warning - warning decoration for when required is missing. 
    info - sometimes inputs show extra informaiton when an item is selected or when a value is entered.
    success - On rare occations it is needed for a success response on an input.

    Markup:
    <div class="question required {{modifier_class}}">
    <label for="input-x" class="label-holder grid-x c_{{modifier_class}} font_1">
        <span class="text cell shrink">Question Text</span>
        <span class="required-holder cell shrink">
            <i class="fas fa-asterisk c_warning font_n3 vertical-align_t"></i>
        </span>
        </label>
    <div class="input-holder grid-x c_{{modifier_class}}">
        <div class="alert br_{{modifier_class}}-3  bg_{{modifier_class}}-4  value-space cell shrink  br_solid br-w_1 p_3 p-b_2 b_shade-4 texture_light">
            <span class="c_{{modifier_class}} p_2"><i class="fas fa-fw fa-exclamation-square"></i></span>
        </div>
        <div class="warning br_{{modifier_class}}-3  bg_{{modifier_class}}-4  value-space cell shrink  br_solid br-w_1 p_3 p-b_2 b_shade-4 texture_light">
            <span class="c_{{modifier_class}} p_2"><i class="fas fa-fw fa-exclamation-triangle"></i></span>
        </div>
        <div class="info br_{{modifier_class}}-3  bg_{{modifier_class}}-4  value-space cell shrink  br_solid br-w_1 p_3 p-b_2 b_shade-4 texture_light">
            <span class="c_{{modifier_class}} p_2"><i class="fas fa-fw fa-lightbulb-exclamation"></i></span>
        </div>
        <div class="success br_{{modifier_class}}-3  bg_{{modifier_class}}-4  value-space cell shrink  br_solid br-w_1 p_3 p-b_2 b_shade-4 texture_light">
            <span class="c_{{modifier_class}} p_2"><i class="fas fa-fw fa-check-square"></i></span>
        </div>
        <div class="input-space cell auto">
            <input id="input-x" type="text" class="m-b_0 br_{{modifier_class}}-3 " />
        </div>
    </div>
    <div class="message-holder font_n1 font_bold">
            <div class="alert br_alert-n1 c_alert">
            <i class="fas fa-fw fa-exclamation-square m-r_3 m-l_2 "></i> Error message</div>
            <div class="warning br_warning-n1 c_warning ">
            <i class="fas fa-fw fa-exclamation-triangle m-r_3 m-l_2"></i> Warning message</div>
            <div class="info br_info-n1 c_info ">
            <i class="fas fa-fw fa-lightbulb-exclamation m-r_3 m-l_2"></i> Informational message about your input</div>
            <div class="success br_success-n1 c_success ">
            <i class="fas fa-fw fa-lightbulb-exclamation m-r_3 m-l_2"></i> succes message are rare but sometimes needed.</div>
        </div>
    <div class="hint-holder m-t_2 font_n1 c_shade p_2 p-t_0">This is some hint-holder text</div>
    </div>

    Styleguide Questions.States
*/
.question div.alert,
.question div.warning,
.question div.info,
.question div.success {
  display: none;
}

.alert.question div.alert,
.warning.question div.warning,
.info.question div.info,
.success.question div.success {
  display: block;
}

.alert.question select {
  border-color: hsla(var(--alert-h), calc( var( --alert-s ) - ( var( --alert-s ) * 0.125 ) ), calc( var(--alert-l) + ((100% - var(--alert-l)) * 0.25) ), 1);
  color: hsla(var(--alert-h), calc( var(--alert-s) + ((100% - var(--alert-s)) * 0.03) ), calc( var( --alert-l ) - ( var( --alert-l ) * 0.3 ) ), 1);
}

.warning.question select {
  border-color: hsla(var(--warning-h), calc( var( --warning-s ) - ( var( --warning-s ) * 0.125 ) ), calc( var(--warning-l) + ((100% - var(--warning-l)) * 0.25) ), 1);
  color: hsla(var(--warning-h), calc( var(--warning-s) + ((100% - var(--warning-s)) * 0.03) ), calc( var( --warning-l ) - ( var( --warning-l ) * 0.3 ) ), 1);
}

.info.question select {
  border-color: hsla(var(--info-h), calc( var( --info-s ) - ( var( --info-s ) * 0.125 ) ), calc( var(--info-l) + ((100% - var(--info-l)) * 0.25) ), 1);
  color: hsla(var(--info-h), calc( var(--info-s) + ((100% - var(--info-s)) * 0.03) ), calc( var( --info-l ) - ( var( --info-l ) * 0.3 ) ), 1);
}

.success.question select {
  border-color: hsla(var(--success-h), calc( var( --success-s ) - ( var( --success-s ) * 0.125 ) ), calc( var(--success-l) + ((100% - var(--success-l)) * 0.25) ), 1);
  color: hsla(var(--success-h), calc( var(--success-s) + ((100% - var(--success-s)) * 0.03) ), calc( var( --success-l ) - ( var( --success-l ) * 0.3 ) ), 1);
}

.required .required-holder {
  display: inline-flex;
}

.switch {
  margin-bottom: 0;
}

.switch-value {
  margin-left: 8px;
  margin-left: 0.5rem;
}

.question {
  display: flex;
  flex-direction: column;
}

.label-holder,.input-holder,.message-holder {
  flex: 1 0 auto;
}

.message-holder div {
  padding: 4px;
  padding: 0.25rem;
  border-top-width: 4px;
  border-top-width: 0.25rem;
  border-top-style: solid;
}

.hint-holder {
  flex: 1 0 auto;
}

/*

    Question Input Value Area

    shade - default decoration when there is no validation run on the input.
    alert   - alert settings for questions
    warning - warning decoration for when required is missing. 
    info - sometimes inputs show extra informaiton when an item is selected or when a value is entered.
    success - On rare occations it is needed for a success response on an input.

    Markup:
    <div class="question required {{modifier_class}}">
        <label for="input-x" class="label-holder grid-x c_{{modifier_class}} font_1">
        <span class="text cell shrink">Question Text</span>
        <span class="required-holder cell shrink">
            <i class="fas fa-asterisk c_warning font_n3 vertical-align_t"></i>
        </span>
        </label>
        <div class="input-holder grid-x c_{{modifier_class}}">
            <div class="alert br_{{modifier_class}}-3  bg_{{modifier_class}}-4  value-space cell shrink  br_solid br-w_1 p_3 p-b_2 b_shade-4 texture_light">
                <span class="c_{{modifier_class}} p_2"><i class="fas fa-fw fa-exclamation-square"></i></span>
            </div>
            <div class="warning br_{{modifier_class}}-3  bg_{{modifier_class}}-4  value-space cell shrink  br_solid br-w_1 p_3 p-b_2 b_shade-4 texture_light">
                <span class="c_{{modifier_class}} p_2"><i class="fas fa-fw fa-exclamation-triangle"></i></span>
            </div>
            <div class="info br_{{modifier_class}}-3  bg_{{modifier_class}}-4  value-space cell shrink  br_solid br-w_1 p_3 p-b_2 b_shade-4 texture_light">
                <span class="c_{{modifier_class}} p_2"><i class="fas fa-fw fa-lightbulb-exclamation"></i></span>
            </div>
            <div class="success br_{{modifier_class}}-3  bg_{{modifier_class}}-4  value-space cell shrink  br_solid br-w_1 p_3 p-b_2 b_shade-4 texture_light">
                <span class="c_{{modifier_class}} p_2"><i class="fas fa-fw fa-check-square"></i></span>
            </div>
            <div class="input-space cell auto">
                <input id="input-x" type="text" class="m-b_0 br_{{modifier_class}}-3 " />
            </div>
            <div class="br_{{modifier_class}}-3  bg_{{modifier_class}}-4  value-space cell shrink br_solid br-w_1 p_3 p-b_2 b_shade-4 texture_light">
                <span class="value">Years</span>
            </div>
        </div>
        <div class="message-holder font_n1 font_bold">
            <div class="alert br_alert-n1 c_alert">
            <i class="fas fa-fw fa-exclamation-square m-r_3 m-l_2 "></i> Error message</div>
            <div class="warning br_warning-n1 c_warning ">
            <i class="fas fa-fw fa-exclamation-triangle m-r_3 m-l_2"></i> Warning message</div>
            <div class="info br_info-n1 c_info ">
            <i class="fas fa-fw fa-lightbulb-exclamation m-r_3 m-l_2"></i> Informational message about your input</div>
        </div>
        <div class="hint-holder m-t_2 font_n1 c_shade p_2 p-t_0">This is some hint-holder text</div>
    </div>

    Styleguide Questions.Value Area
*/
/*

    Question with grouped inputs

    shade - default decoration when there is no validation run on the input.
    alert - alerts show up when errors are validated from the input.

    Markup:
    <div class="question required {{modifier_class}}">
        <label for="input-x" class="label-holder grid-x c_{{modifier_class}} font_1">
            <span class="text cell shrink">Question Text</span>
            <span class="required-holder cell shrink">
                <i class="fas fa-asterisk c_warning font_n3 vertical-align_t"></i>
            </span>
            </label>
        <div class="input-holder grid-x c_{{modifier_class}}">
            <div class="alert br_{{modifier_class}}-3  bg_{{modifier_class}}-4  value-space cell shrink  br_solid br-w_1 p_3 p-b_2 b_shade-4 texture_light">
                <span class="c_{{modifier_class}} p_2"><i class="fas fa-fw fa-exclamation-square"></i></span>
            </div>
            <div class="warning br_{{modifier_class}}-3  bg_{{modifier_class}}-4  value-space cell shrink  br_solid br-w_1 p_3 p-b_2 b_shade-4 texture_light">
                <span class="c_{{modifier_class}} p_2"><i class="fas fa-fw fa-exclamation-triangle"></i></span>
            </div>
            <div class="info br_{{modifier_class}}-3  bg_{{modifier_class}}-4  value-space cell shrink  br_solid br-w_1 p_3 p-b_2 b_shade-4 texture_light">
                <span class="c_{{modifier_class}} p_2"><i class="fas fa-fw fa-lightbulb-exclamation"></i></span>
            </div>
            <div class="success br_{{modifier_class}}-3  bg_{{modifier_class}}-4  value-space cell shrink  br_solid br-w_1 p_3 p-b_2 b_shade-4 texture_light">
                <span class="c_{{modifier_class}} p_2"><i class="fas fa-fw fa-check-square"></i></span>
            </div>
            <div class="input-space cell small-2">
                <select name="" id="" class="m-b_0">
                    <option value="">All</option>
                    <option value="">Group A</option>
                    <option value="">Group B</option>
                </select>
            </div>       
            <div class="input-space cell auto">
                <input id="input-x" type="text" class="m-b_0 br_{{modifier_class}}-3 " />
            </div>
            <div class="br_{{modifier_class}}-3  bg_{{modifier_class}}-4 c_{{modifier_class}}-n2  value-space cell shrink  br_solid br-w_1 p_3 p-b_2 b_shade-4 texture_light">
                <span class="value">Years</span>
            </div>
        </div>
        <div class="message-holder font_n1 font_bold">
            <div class="alert br_alert-n1 c_alert">
            <i class="fas fa-fw fa-exclamation-square m-r_3 m-l_2 "></i> Error message</div>
            <div class="warning br_warning-n1 c_warning ">
            <i class="fas fa-fw fa-exclamation-triangle m-r_3 m-l_2"></i> Warning message</div>
            <div class="info br_info-n1 c_info ">
            <i class="fas fa-fw fa-lightbulb-exclamation m-r_3 m-l_2"></i> Informational message about your input</div>
        </div>
        <div class="hint-holder m-t_2 font_n1 c_shade p_2 p-t_0">This is some hint-holder text</div>
    </div>

    Styleguide Questions.Grouped Inputs
*/
/*

    Question with Switches

    shade - default decoration when there is no validation run on the input.
    alert - alert on the area of inputs
    warning - warning decoration for when required is missing. 
    info - sometimes inputs show extra informaiton when an item is selected or when a value is entered.

    Markup:
    <div class="question required {{modifier_class}}">
        <label for="tinySwitch_{{modifier_class}}" class="grid-x c_{{modifier_class}} font_1 label-holder">
            <span class="text cell shrink">Question Text</span>
            <span class="required-holder cell shrink">
                <i class="fas fa-asterisk c_warning font_n3 vertical-align_t"></i>
            </span>
        </label>
        <div class="input-holder grid-x c_{{modifier_class}}">
            <div class="alert br_{{modifier_class}}-3  bg_{{modifier_class}}-4  value-space cell shrink  br_solid br-w_1 p_3 p-b_2 b_shade-4 texture_light">
                <span class="c_{{modifier_class}} p_2"><i class="fas fa-fw fa-exclamation-square"></i></span>
            </div>
            <div class="warning br_{{modifier_class}}-3  bg_{{modifier_class}}-4  value-space cell shrink  br_solid br-w_1 p_3 p-b_2 b_shade-4 texture_light">
                <span class="c_{{modifier_class}} p_2"><i class="fas fa-fw fa-exclamation-triangle"></i></span>
            </div>
            <div class="info br_{{modifier_class}}-3  bg_{{modifier_class}}-4  value-space cell shrink  br_solid br-w_1 p_3 p-b_2 b_shade-4 texture_light">
                <span class="c_{{modifier_class}} p_2"><i class="fas fa-fw fa-lightbulb-exclamation"></i></span>
            </div>
            <div class="success br_{{modifier_class}}-3  bg_{{modifier_class}}-4  value-space cell shrink  br_solid br-w_1 p_3 p-b_2 b_shade-4 texture_light">
                <span class="c_{{modifier_class}} p_2"><i class="fas fa-fw fa-check-square"></i></span>
            </div>
            <div class="input-space cell auto grid-x">
                <div class="cell grid-x p_3 p-r_0 small-12 medium-6">
                    <div class="switch tiny radius cell shrink">
                        <input class="switch-input" id="tinySwitch_{{modifier_class}}" type="checkbox" name="exampleSwitch">
                        <label class="switch-paddle" for="tinySwitch_{{modifier_class}}">
                            <span class="show-for-sr">Tiny Sandwiches Enabled</span>
                        </label>
                    </div>
                    <label class="switch-value cell auto font_bold" for="tinySwitch_{{modifier_class}}">No Question</label>
                </div>
                <div class="cell grid-x p_3 p-r_0 small-12 medium-6">
                    <div class="switch tiny radius cell shrink">
                        <input class="switch-input" id="tinySwitchNo_{{modifier_class}}" type="checkbox" name="exampleSwitch">
                        <label class="switch-paddle" for="tinySwitchNo_{{modifier_class}}">
                            <span class="show-for-sr">Tiny Sandwiches Enabled</span>
                        </label>
                    </div>
                    <label class="switch-value cell auto font_bold" for="tinySwitchNo_{{modifier_class}}">Yes Question</label>
                </div>
            </div>     
        </div>
        <div class="message-holder font_n1 font_bold">
            <div class="alert br_alert-n1 c_alert">
            <i class="fas fa-fw fa-exclamation-square m-r_3 m-l_2 "></i> Error message</div>
            <div class="warning br_warning-n1 c_warning ">
            <i class="fas fa-fw fa-exclamation-triangle m-r_3 m-l_2"></i> Warning message</div>
            <div class="info br_info-n1 c_info ">
            <i class="fas fa-fw fa-lightbulb-exclamation m-r_3 m-l_2"></i> Informational message about your input</div>
        </div>
        <div class="hint-holder m-t_2 font_n1 c_shade p_2 p-t_0">This is some hint-holder text</div>
    </div>

    Styleguide Questions.Switches
*/
/*
 Pagination

 This is what pagination should look like and its modifications.

 Markup:
 <nav aria-label="Pagination" class="border_solid border_primary border-top-width_3">
  <ul class="pagination font_display font_bold">
    <li class="pagination-previous disabled"><i class="fas fa-chevron-left"></i> <span class="show-for-sr">page</span></li>
    <li class="current"><span class="show-for-sr">You're on page</span> 1</li>
    <li><a href="#" aria-label="Page 2">2</a></li>
    <li><a href="#" aria-label="Page 3">3</a></li>
    <li><a href="#" aria-label="Page 4">4</a></li>
    <li class="fal fa-ellipsis-h" aria-hidden="true"></li>
    <li><a href="#" aria-label="Page 12">12</a></li>
    <li><a href="#" aria-label="Page 13">13</a></li>
    <li class="pagination-next"><a href="#" aria-label="Next page"><i class="fas fa-chevron-right"></i><span class="show-for-sr">page</span></a></li>
  </ul>
</nav>

 Styleguide Navigation.Pagination
*/
.pagination-previous,
.pagination-next {
  background: hsla(var(--shade-h), calc( var( --shade-s ) - ( var( --shade-s ) * 0.25 ) ), calc( var(--shade-l) + ((100% - var(--shade-l)) * 0.5) ), 1);
}

.pagination .disabled:hover {
  background-image: url("../img/cross_disabled.png");
}

/*
 Pagination in Card

 This is what pagination should look like and its modifications.

 Markup:
 <div class="card shadow_2" >
    <div class="card-section">
        <h4>This is a card.</h4>
    </div>
    <nav aria-label="Pagination" class=" pagination-container">
      <ul class="pagination font_display font_bold float-right">
        <li class="pagination-previous disabled"><i class="fas fa-chevron-left"></i> <span class="show-for-sr">page</span></li>
        <li class="current"><span class="show-for-sr">You're on page</span> 1</li>
        <li class=""><a href="#" aria-label="Page 2">2</a></li>
        <li class=""><a href="#" aria-label="Page 3">3</a></li>
        <li class=""><a href="#" aria-label="Page 4">4</a></li>
        <li class=" fal fa-ellipsis-h " aria-hidden="true"></li>
        <li class=""><a href="#" aria-label="Page 12">12</a></li>
        <li class=""><a href="#" aria-label="Page 13">13</a></li>
        <li class="pagination-next"><a href="#" aria-label="Next page"><i class="fas fa-chevron-right"></i><span class="show-for-sr">page</span></a></li>
      </ul>
    </nav>
</div>

 Styleguide Navigation.Pagination.Cards
*/
.pagination-container {
  padding: 0 8px;
  padding: 0 0.5rem;
  background: var(--primary);
}
.pagination-container .pagination {
  margin-bottom: 8px;
  margin-bottom: 0.5rem;
}
.pagination-container .current {
  background: white;
  color: var(--primary);
}
.pagination-container a:not([class=pagination-previous]):not([class=pagination-next]) {
  color: white;
}
.pagination-container a:not([class=pagination-previous]):not([class=pagination-next]):hover {
  color: #131212;
}

/*

  Breadcrumbs

  Markup:
  <nav aria-label="You are here:" role="navigation">
    <ul class="breadcrumbs font_1">
      <li><a href="#0">Home</a></li>
      <li><a href="#0">Features</a></li>
      <li class="font-italic">Gene Splicing</li>
      <li>
        <span class="show-for-sr">Current: </span> Cloning
      </li>
    </ul>
  </nav>

  Styleguide Navigation.Breadcrumbs
*/
/*

  Switches

  Markup:
  <div class="switch tiny switch_radius p_5">
    <input class="switch-input" id="tinySwitch" type="checkbox" name="exampleSwitch">
    <label class="switch-paddle" for="tinySwitch">
      <span class="show-for-sr">Tiny Sandwiches Enabled</span>
    </label>
  </div>
  <div class="switch small round p_5">
    <input class="switch-input" id="smallSwitch" type="checkbox" name="exampleSwitch">
    <label class="switch-paddle" for="smallSwitch">
      <span class="show-for-sr">Small Portions Only</span>
    </label>
  </div>
  <div class="switch large p_5">
    <input class="switch-input" id="largeSwitch" type="checkbox" name="exampleSwitch">
    <label class="switch-paddle" for="largeSwitch">
      <span class="show-for-sr">Show Large Elephants</span>
    </label>
  </div>

  Styleguide HTML.Switches
  */
/*

  Progress Bars

  Markup:
<div class="row">
  <div class="primary progress" role="progressbar" tabindex="0" aria-valuenow="25" aria-valuemin="0" aria-valuetext="25 percent" aria-valuemax="100">
    <div class="progress-meter" style="width: 25%">
      <p class="progress-meter-text">25%</p>
    </div>
  </div>
</div>
<div class="row">
  <div class="warning progress">
    <div class="progress-meter" style="width: 50%">
      <p class="progress-meter-text">50%</p>
    </div>
  </div>
</div>
<div class="row">
  <div class="alert progress">
    <div class="progress-meter" style="width: 75%">
      <p class="progress-meter-text">75%</p>
    </div>
  </div>
</div>
<div class="row">
  <div class="success progress" role="progressbar" tabindex="0" aria-valuenow="100" aria-valuemin="0" aria-valuetext="100 percent" aria-valuemax="100">
    <div class="progress-meter" style="width: 100%">
      <p class="progress-meter-text">100%</p>
    </div>
  </div>
</div>

  Styleguide HTML.ProgressBars
  */
/*

  Call Out Example

  Markup:
  <div class="callout" data-closable>
    <button class="close-button" aria-label="Close alert" type="button" data-close>
      <span aria-hidden="true"><i class="fas fa-times"></i></span>
    </button>
    <div class="p_3 p-x_4">
    <h1>Hello User</h1>
    <p>This is a callout with close button example.</p>
    </div>
  </div>

  Styleguide HTML.Callout
*/
/*

  Accordian

  You can see how on the third accordian how utility classes can be added to tranform the look and feel, and you can add toggle icons as well

  Markup:
  <ul class="accordion" data-accordion>
    <li class="accordion-item is-active" data-accordion-item>
      <a href="#" class="accordion-title">Accordion 1</a>
      <div class="accordion-content" data-tab-content >
        <p>Panel 1. Lorem ipsum dolor</p>
        <a href="#">Nowhere to Go</a>
      </div>
    </li>
    <li class="accordion-item" data-accordion-item>
      <a href="#" class="accordion-title"><i class="fas icon-toggle_plus-minus"></i> Accordion 2</a>
      <div class="accordion-content" data-tab-content>
        <textarea></textarea>
        <button class="button">I do nothing!</button>
      </div>
    </li>
    <li class="accordion-item" data-accordion-item>
      <a href="#" class="accordion-title font_2 bg_primary-3 h:c_white h:bg_primary"><i class="fas icon-toggle_caret-circle-right-down"></i> Accordion 3</a>
      <div class="accordion-content shadow_n1 texture_light" data-tab-content>
        Type your name!
        <input type="text"></input>
      </div>
    </li>
  </ul>

  Styleguide Containers.Accordian
*/
/*
    Tabs

    Markup:
    <ul class="texture_light tabs"data-active-collapse="true"data-tabs id="collapsing-tabs">
        <li class="tabs-title is-active"><a href="#panel1c"aria-selected="true">Tab 1</a></li>
        <li class="tabs-title"><a href="#panel2c">Tab 2</a></li>
        <li class="tabs-title"><a href="#panel3c">Tab 3</a></li>
        <li class="tabs-title"><a href="#panel4c">Tab 4</a></li>
    </ul>
    <div class="tabs-content" data-tabs-content="collapsing-tabs">
        <div class="tabs-panel is-active" id="panel1c">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
        <div class="tabs-panel" id="panel2c">
            <p>Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus.</p>
        </div>
        <div class="tabs-panel" id="panel3c">
            <img src="https://picsum.photos/400/300">
        </div>
        <div class="tabs-panel" id="panel4c">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
    </div>

    Styleguide Navigation.Tabs

*/
/*
    Tabs Inset Area

    Markup:
    <div class="bg_white br_1 br_shade-4 br_solid p_4">
        hello this is some text
    </div>
    <ul class="texture_light tabs br_primary bg_primary-3 shadow_n3 p-x_2 p-t_3 br-b_0" data-active-collapse="true" data-tabs id="collapsing-tabs">
        <li class="tabs-title m-x_1 is-active"><a class="br-tr_radius br-tl_radius h:bg_white br_primary"href="#panel-demo2-1c"aria-selected="true"><i class="fal icon-complete_check"></i>Tab 1</a></li>
        <li class="tabs-title m-x_1"><a class="h:c_white br-tr_radius br-tl_radius h:bg_primary" href="#panel-demo2-2c"><i class="fal icon-complete_check"></i>Tab 2</a></li>
        <li class="tabs-title m-x_1"><a class="h:c_white br-tr_radius br-tl_radius h:bg_primary" href="#panel-demo2-3c"><i class="fal icon-complete_check"></i>Tab 3</a></li>
        <li class="tabs-title m-x_1"><a class="h:c_white br-tr_radius br-tl_radius h:bg_primary" href="#panel-demo2-4c"><i class="fal icon-complete_check"></i>Tab 4</a></li>
    </ul>
    <div class="tabs-content" data-tabs-content="collapsing-tabs">
        <div class="tabs-panel card-section  is-active" id="panel-demo2-1c">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
        <div class="tabs-panel card-section" id="panel-demo2-2c">
            <p>Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus.</p>
        </div>
        <div class="tabs-panel card-section" id="panel-demo2-3c">
            <img src="https://picsum.photos/400/300">
        </div>
        <div class="tabs-panel card-section" id="panel-demo2-4c">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
    </div>

    Styleguide Navigation.Tabs.Inset

*/
/*
    Tabs In A Card

    Use Case: When content of a card needs to be toggled rather then a whole section of a page.

    Markup:
        <div class="card shadow_2 cell small-6 large-4" style="max-width: 500px;">
      <div class=font_accent border-top-left-square c_white font_3 p_4 texture_dust bg_primary">
      This is a header
      </div>
    <ul class="texture_light tabs br_0 bg_primary br_none texture_dust p-x_2 p-t_3 br-b_0" data-active-collapse="true" data-tabs id="collapsing-tabs">
        <li class="tabs-title m-x_1 is-active"><a class="br-tr_radius br-tl_radius h:bg_white br_primary"href="#panel-demo2-1c"aria-selected="true"><i class="fal icon-complete_check"></i>Overview</a></li>
        <li class="tabs-title m-x_1"><a class="h:c_white c_white-3 br-tr_radius br-tl_radius h:bg_primary-n2" href="#panel-demo2-2c"><i class="fal icon-complete_check"></i>Details</a></li>
        <li class="tabs-title m-x_1"><a class="h:c_white c_white-3 br-tr_radius br-tl_radius h:bg_primary-n2" href="#panel-demo2-3c"><i class="fal icon-complete_check"></i>Extra</a></li>
    </ul>
    <div class="tabs-content" data-tabs-content="collapsing-tabs">
        <div class="tabs-panel-demo2 is-active p-x_4 p-y_3" id="panel-demo2-1c">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
        <div class="tabs-panel-demo2  p-x_4 p-y_3" id="panel-demo2-2c">
            <p>Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus.</p>
        </div>
        <div class="tabs-panel-demo2  p-x_4 p-y_3" id="panel-demo2-3c">
            <img src="https://picsum.photos/400/300">
        </div>
    </div>
    </div>

    Styleguide Navigation.Tabs.OnCard

*/
/** SCSS DOC: __globalshame_framework.scss **/
/*# sourceMappingURL=maps/mobile_zurb.css.map */
