@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 **/
.card.testimonial .blockquote p:before, .card.testimonial .blockquote p:after,
.card.testimonial .blockquote-cite:before,
.card.testimonial .blockquote-cite:after,
.card.product .blockquote p:before,
.card.product .blockquote p:after,
.card.product .blockquote-cite:before,
.card.product .blockquote-cite:after, .carousel-alt.chevron-on .carousel-indicators li.active:before {
  -webkit-font-smoothing: antialiased;
  text-rendering: auto;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  font-weight: 900;
  line-height: 1;
  font-family: "Font Awesome 6 Pro", "Font Awesome 5 Pro";
}

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

Link Colors: Light

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

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

Weight:2

Styleguide DesignBase.Colors.LinksLight
 */
/*

Link Colors

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


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

Weight:1

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

/**  Textures  **/
/**  logos  **/
/**  CV Quality Brands    *********************************/
/** SCSS DOC: __brand.cvquality.scss **/
/**  CV Quality Colors  **/

.c_primary-alt,.h\:c_primary-alt:hover {
  color: #d2e6f6 !important;
}

.br_primary-alt,.bg_primary-alt {
  background-color: #d2e6f6 !important;
}

.c_mix-teal-orange {
  color: #58b5a5 !important;
}

.c_mix-orange-teal {
  color: #acbd65 !important;
}

.br_mix-teal-orange {
  border-color: #58b5a5 !important;
}

.br_mix-orange-teal {
  border-color: #acbd65 !important;
}

.bg_mix-teal-orange {
  background-color: #58b5a5 !important;
}

.bg_mix-orange-teal {
  background-color: #acbd65 !important;
}

/*
	Background Colors Alt

	These Alternate colors are single use to embelish a design. These colors <strong>DO NOT</strong> have extra modifiers.    

	.bg_primary-alt				-	Primary Alt
	.bg_mix-teal-orange			-	Mix of 60% Teal And 40% Orange 
	.bg_mix-orange-teal			-	Mix of 60% Orange and 40% Teal 	


	Markup:
	<div class="{{modifier_class}} p_3 c_white">Background Color of {{modifier_class}}</div>

	Styleguide DesignBase.Backgrounds
*/
/*
	Border Colors Alt

	These Alternate colors are single use to embelish a design. These colors <strong>DO NOT</strong> have extra modifiers.    

	.br_primary-alt            		- light orange
	.br_mix-teal-orange				-	Mix of 60% Teal And 40% Orange 
	.br_mix-orange-teal				-	Mix of 60% Orange and 40% Teal 	


	Markup:
	<div class="{{modifier_class}} br_solid br_4">Border Color of {{modifier_class}}</div>

	Styleguide DesignBase.Borders

*/
/*

CVQuality Full Pallete 

Credit Types in the ACC have a specific color coding.

$orange-dark   			  -   #e87d1e;  	Orange Dark   	
$orange-light   		  -   #ffc425;  	Orange Light   
$warm-grey   			    -   #a1a0a4;  	Warm Grey   	
$warm-grey-light   		-   #d6d4d4;  	Warm Grey Light  
$warm-grey-dark   		-  #6f6b6f;  	Warm Grey Dark   
$off-white   			    -   #fafafa;  	Off White   	
$off-black   			    -  #131212;  	Off Black   	
$soft-blue   			    -   #a4cded;  	Soft Blue   	
$soft-grey   			    -   #eceaea;  	Soft Grey   	
$error-color   			  -  #990000;  	Error Color   	
$scrub-teal   			  -  #0088aa;  	Scrub  Teal   	
$scrub-teal-light   	-  #05aee5;  	Scrub Teal Light 
$scrub-teal-dark   		-  #047294;  	Scrub Teal Dark  
$mix-teal_orange   		-  #58B5A5;  	Mix of 60% Teal And 40% Orange  
$mix-orange_teal   		-  #ACBD65;  	Mix of 60% Orange and 40% Teal  

Weight: 1

Styleguide DesignBase.Colors.Full Pallate

*/
.gradient_teal, .btn-primary,
.h\:gradient_teal:hover {
  background: #047294;
  /* Old browsers */
  /* IE9 SVG, needs conditional override of 'filter' to 'none' */
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzA1YWVlNSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMjgzYWIiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
  /* FF3.6+ */
  /* Chrome,Safari4+ */
  /* Chrome10+,Safari5.1+ */
  /* Opera 11.10+ */
  /* IE10+ */
  background: linear-gradient(to bottom, #05aee5 0%, #047294 100%);
  /* W3C */
}

.gradient_teal-reverse, .btn-primary:hover,
.h\:gradient_teal-reverse:hover {
  background: #047294;
  /* Old browsers */
  /* IE9 SVG, needs conditional override of 'filter' to 'none' */
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzA1YWVlNSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMjgzYWIiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
  /* FF3.6+ */
  /* Chrome,Safari4+ */
  /* Chrome10+,Safari5.1+ */
  /* Opera 11.10+ */
  /* IE10+ */
  background: linear-gradient(to bottom, #047294 0%, #0088aa 100%);
  /* W3C */
}

.gradient_grey, .btn-shade,
.h\:gradient_grey-reverse:hover {
  background: #a1a0a4;
  /* Old browsers */
  /* IE9 SVG, needs conditional override of 'filter' to 'none' */
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzA1YWVlNSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMjgzYWIiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
  /* FF3.6+ */
  /* Chrome,Safari4+ */
  /* Chrome10+,Safari5.1+ */
  /* Opera 11.10+ */
  /* IE10+ */
  background: linear-gradient(to bottom, #a1a0a4 0%, #817c7b 100%);
  /* W3C */
}

.gradient_grey-reverse, .btn-shade:hover,
.h\:gradient_grey-reverse:hover {
  background: #817c7b;
  /* Old browsers */
  /* IE9 SVG, needs conditional override of 'filter' to 'none' */
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzA1YWVlNSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMjgzYWIiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
  /* FF3.6+ */
  /* Chrome,Safari4+ */
  /* Chrome10+,Safari5.1+ */
  /* Opera 11.10+ */
  /* IE10+ */
  background: linear-gradient(to bottom, #817c7b 0%, #a1a0a4 100%);
  /* W3C */
}

.gradient_lightblue {
  background: #a4cded;
  /* FF3.6+ */
  /* Chrome,Safari4+ */
  /* Chrome10+,Safari5.1+ */
  /* Opera 11.10+ */
  /* IE10+ */
  background-image: linear-gradient(to bottom, #fafafa 1%, #d2e6f6 100%);
  /* Old browsers */
  background-attachment: fixed;
  /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=" $off-white", endColorstr="$soft-blue", GradientType=0);
  /* IE6-9 */
}

.gradient_lightgrey {
  background: #ffffff;
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlY2VhZWEiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
  background: linear-gradient(to bottom, #ffffff 0%, #eceaea 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#ffffff", endColorstr=" $soft-grey", GradientType=0);
}

.gradient_orange {
  background: #a1a0a4;
  /* Old browsers */
  /* IE9 SVG, needs conditional override of 'filter' to 'none' */
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzA1YWVlNSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMjgzYWIiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
  /* FF3.6+ */
  /* Chrome,Safari4+ */
  /* Chrome10+,Safari5.1+ */
  /* Opera 11.10+ */
  /* IE10+ */
  background: linear-gradient(to bottom, #e87d1e 0%, #f4a122 100%);
  /* W3C */
}

.gradient_warmgrey,
.h\:gradient_warmgrey-reverse:hover {
  background: #a1a0a4;
  /* Old browsers */
  /* IE9 SVG, needs conditional override of 'filter' to 'none' */
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzA1YWVlNSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMjgzYWIiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
  /* FF3.6+ */
  /* Chrome,Safari4+ */
  /* Chrome10+,Safari5.1+ */
  /* Opera 11.10+ */
  /* IE10+ */
  background: linear-gradient(to bottom, #d6d4d4 0%, #a1a0a4 100%);
  /* W3C */
}

.gradient_warmgrey-reverse,
.h\:gradient_warmgrey-reverse:hover {
  background: #a1a0a4;
  /* Old browsers */
  /* IE9 SVG, needs conditional override of 'filter' to 'none' */
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzA1YWVlNSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMjgzYWIiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
  /* FF3.6+ */
  /* Chrome,Safari4+ */
  /* Chrome10+,Safari5.1+ */
  /* Opera 11.10+ */
  /* IE10+ */
  background: linear-gradient(to bottom, #a1a0a4 0%, #d6d4d4 100%);
  /* W3C */
}

:root {
  --code-color:#58b5a5;
  --primary-h: 192deg;
  --primary-s: 100%;
  --primary-l: 33.3333333333%;
  --primary: hsl( var(--primary-h),var(--primary-s),var(--primary-l) );
  --secondary-h: 28.2178217822deg;
  --secondary-s: 81.4516129032%;
  --secondary-l: 51.3725490196%;
  --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: 10.9090909091deg;
  --shade-s: 4.4897959184%;
  --shade-l: 51.9607843137%;
  --shade: hsl( var(--shade-h),var(--shade-s),var(--shade-l) );
  --warning-h: 36.2857142857deg;
  --warning-s: 90.5172413793%;
  --warning-l: 54.5098039216%;
  --warning: hsl( var(--warning-h),var(--warning-s),var(--warning-l) );
  --alert-h: 0deg;
  --alert-s: 100%;
  --alert-l: 30%;
  --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: 43.7614678899deg;
  --accent-s: 100%;
  --accent-l: 57.2549019608%;
  --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: 194.7321428571deg;
  --highlight-s: 95.7264957265%;
  --highlight-l: 45.8823529412%;
  --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 cvquality Branding 4.1.4x  **/
/** SCSS DOC:_brand.compile.scss **/
/** SCSS DOC: _root.cssvars.scss **/

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

/**  Build Comment: Render Root Variables  **/
/** SCSS DOC: __var.output.scss **/
/** This needs to run later then brand **/
/** SCSS DOC: _setup.boot.scss **/
/*!
 * Bootstrap v5.0.0-beta3 (https://getbootstrap.com/)
 * Copyright 2011-2021 The Bootstrap Authors
 * Copyright 2011-2021 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
 */
:root {
  --bs-blue: #2b58c0;
  --bs-indigo: #6610f2;
  --bs-purple: #976ad2;
  --bs-pink: #e83e8c;
  --bs-red: #dd1a1a;
  --bs-orange: #da8210;
  --bs-yellow: #ffc107;
  --bs-green: #06a022;
  --bs-teal: #198dae;
  --bs-cyan: #17a2b8;
  --bs-white: #fbf7f7;
  --bs-gray: #9e9b9b;
  --bs-gray-dark: #cdc9c9;
  --bs-gray-100: #2a2929;
  --bs-gray-200: #414040;
  --bs-gray-300: #595757;
  --bs-gray-400: #706e6e;
  --bs-gray-500: #878585;
  --bs-gray-600: #9e9b9b;
  --bs-gray-700: #b5b2b2;
  --bs-gray-800: #cdc9c9;
  --bs-gray-900: #e4e0e0;
  --bs-primary: #0088aa;
  --bs-secondary: #e87d1e;
  --bs-success: #078a2e;
  --bs-accent: #ffc425;
  --bs-info: #a3988c;
  --bs-warning: #f4a122;
  --bs-alert: #990000;
  --bs-primary-rgb: 0, 136, 170;
  --bs-secondary-rgb: 232, 125, 30;
  --bs-success-rgb: 7, 138, 46;
  --bs-accent-rgb: 255, 196, 37;
  --bs-info-rgb: 163, 152, 140;
  --bs-warning-rgb: 244, 161, 34;
  --bs-alert-rgb: 153, 0, 0;
  --bs-white-rgb: 255, 255, 255;
  --bs-black-rgb: 19, 18, 18;
  --bs-body-color-rgb: 19, 18, 18;
  --bs-body-bg-rgb: 255, 255, 255;
  --bs-font-sans-serif: "Lato","Open Sans","system-ui",sans-serif;
  --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
  --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
  --bs-body-font-family: var(--bs-font-sans-serif);
  --bs-body-font-size: 16px;
  --bs-body-font-size: 1rem;
  --bs-body-font-weight: 400;
  --bs-body-line-height: 1.6;
  --bs-body-color: #131212;
  --bs-body-bg: white;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

dt {
  font-weight: 700;
}

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

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

b,
strong {
  font-weight: bolder;
}

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

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

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

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

a {
  color: #0088aa;
  text-decoration: none;
}
a:hover {
  color: #005f77;
  text-decoration: underline;
}

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

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

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

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

kbd {
  padding: 3.2px 6.4px;
  padding: 0.2rem 0.4rem;
  border-radius: 3px;
  background-color: #e4e0e0;
  color: white;
  font-size: 0.875em;
}
kbd kbd {
  padding: 0;
  font-weight: 700;
  font-size: 1em;
}

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

img,
svg {
  vertical-align: middle;
}

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

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

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

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

label {
  display: inline-block;
}

button {
  border-radius: 0;
}

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

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

button,
select {
  text-transform: none;
}

[role=button] {
  cursor: pointer;
}

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

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

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

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

textarea {
  resize: vertical;
}

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

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

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

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

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

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

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

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

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

output {
  display: inline-block;
}

iframe {
  border: 0;
}

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

progress {
  vertical-align: baseline;
}

[hidden] {
  display: none !important;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.img-thumbnail {
  padding: 4px;
  padding: 0.25rem;
  border: 1px solid #595757;
  border-radius: 6px;
  background-color: white;
}

.figure {
  display: inline-block;
}

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

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

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

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

.col {
  flex: 1 0 0%;
}

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

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

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

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

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

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

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

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

.col-1 {
  width: 8.33333333%;
}

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

.col-2 {
  width: 16.66666667%;
}

.col-3 {
  width: 25%;
}

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

.col-4 {
  width: 33.33333333%;
}

.col-5 {
  width: 41.66666667%;
}

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

.col-6 {
  width: 50%;
}

.col-7 {
  width: 58.33333333%;
}

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

.col-8 {
  width: 66.66666667%;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@media (min-width: 460px) {
  .col-sm {
    flex: 1 0 0%;
  }

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

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

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

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

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

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

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

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

  .col-sm-1 {
    flex: 0 0 auto;
    width: 8.33333333%;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .g-sm-5,
.gy-sm-5 {
    --bs-gutter-y: 3rem;
  }
}
@media (min-width: 768px) {
  .col-md {
    flex: 1 0 0%;
  }

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

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

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

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

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

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

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

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

  .col-md-1 {
    flex: 0 0 auto;
    width: 8.33333333%;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .g-md-5,
.gy-md-5 {
    --bs-gutter-y: 3rem;
  }
}
@media (min-width: 1024px) {
  .col-lg {
    flex: 1 0 0%;
  }

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

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

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

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

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

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

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

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

  .col-lg-1 {
    flex: 0 0 auto;
    width: 8.33333333%;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .g-lg-5,
.gy-lg-5 {
    --bs-gutter-y: 3rem;
  }
}
@media (min-width: 1200px) {
  .col-xl {
    flex: 1 0 0%;
  }

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

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

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

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

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

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

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

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

  .col-xl-1 {
    flex: 0 0 auto;
    width: 8.33333333%;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .g-xl-5,
.gy-xl-5 {
    --bs-gutter-y: 3rem;
  }
}
.table {
  --bs-table-bg: transparent;
  --bs-table-accent-bg: transparent;
  --bs-table-striped-color: #131212;
  --bs-table-striped-bg: rgba(19, 18, 18, 0.05);
  --bs-table-active-color: #131212;
  --bs-table-active-bg: rgba(19, 18, 18, 0.1);
  --bs-table-hover-color: #131212;
  --bs-table-hover-bg: rgba(19, 18, 18, 0.075);
  width: 100%;
  margin-bottom: 16px;
  margin-bottom: 1rem;
  border-color: hsla(var(--secondary-h), calc( var( --secondary-s ) - ( var( --secondary-s ) * 0.45 ) ), calc( var(--secondary-l) + ((100% - var(--secondary-l)) * 0.9) ), 1);
  color: #131212;
  vertical-align: top;
}
.table > :not(caption) > * > * {
  padding: 8px 8px;
  padding: 0.5rem 0.5rem;
  border-bottom-width: 1px;
  background-color: var(--bs-table-bg);
  box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);
}
.table > tbody {
  vertical-align: inherit;
}
.table > thead {
  vertical-align: bottom;
}
.table > :not(:first-child) {
  border-top: 2px solid currentColor;
}

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

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

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

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

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

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

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

.table-primary {
  --bs-table-bg: #cce7ee;
  --bs-table-striped-bg: #c3dce3;
  --bs-table-striped-color: #131212;
  --bs-table-active-bg: #bad2d8;
  --bs-table-active-color: #131212;
  --bs-table-hover-bg: #bed7de;
  --bs-table-hover-color: #131212;
  border-color: #bad2d8;
  color: #131212;
}

.table-secondary {
  --bs-table-bg: #fae5d2;
  --bs-table-striped-bg: #eedac8;
  --bs-table-striped-color: #131212;
  --bs-table-active-bg: #e3d0bf;
  --bs-table-active-color: #131212;
  --bs-table-hover-bg: #e9d5c4;
  --bs-table-hover-color: #131212;
  border-color: #e3d0bf;
  color: #131212;
}

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

.table-accent {
  --bs-table-bg: #fff3d3;
  --bs-table-striped-bg: #f3e8c9;
  --bs-table-striped-color: #131212;
  --bs-table-active-bg: #e7ddc0;
  --bs-table-active-color: #131212;
  --bs-table-hover-bg: #ede2c5;
  --bs-table-hover-color: #131212;
  border-color: #e7ddc0;
  color: #131212;
}

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

.table-warning {
  --bs-table-bg: #fdecd3;
  --bs-table-striped-bg: #f1e1c9;
  --bs-table-striped-color: #131212;
  --bs-table-active-bg: #e6d6c0;
  --bs-table-active-color: #131212;
  --bs-table-hover-bg: #ebdcc5;
  --bs-table-hover-color: #131212;
  border-color: #e6d6c0;
  color: #131212;
}

.table-alert {
  --bs-table-bg: #ebcccc;
  --bs-table-striped-bg: #e0c3c3;
  --bs-table-striped-color: #131212;
  --bs-table-active-bg: #d5b9b9;
  --bs-table-active-color: #131212;
  --bs-table-hover-bg: #dbbebe;
  --bs-table-hover-color: #131212;
  border-color: #d5b9b9;
  color: #131212;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.form-range {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  width: 100%;
  height: 22.4px;
  height: 1.4rem;
  padding: 0;
  background-color: transparent;
}
.form-range:focus {
  outline: 0;
}
.form-range:focus::-webkit-slider-thumb {
  box-shadow: 0 0 0 1px white, 0 0 0 0.2rem rgba(0, 136, 170, 0.25);
}
.form-range:focus::-moz-range-thumb {
  box-shadow: 0 0 0 1px white, 0 0 0 0.2rem rgba(0, 136, 170, 0.25);
}
.form-range::-moz-focus-outer {
  border: 0;
}
.form-range::-webkit-slider-thumb {
  -webkit-appearance: none;
          appearance: none;
  width: 16px;
  width: 1rem;
  height: 16px;
  height: 1rem;
  margin-top: -4px;
  margin-top: -0.25rem;
  border: 0;
  border-radius: 1rem;
  background-color: #0088aa;
}
.form-range::-webkit-slider-thumb:active {
  background-color: #b3dbe6;
}
.form-range::-webkit-slider-runnable-track {
  width: 100%;
  height: 8px;
  height: 0.5rem;
  border-radius: 1rem;
  border-color: transparent;
  background-color: #595757;
  color: transparent;
  cursor: pointer;
}
.form-range::-moz-range-thumb {
  -moz-appearance: none;
       appearance: none;
  width: 16px;
  width: 1rem;
  height: 16px;
  height: 1rem;
  border: 0;
  border-radius: 1rem;
  background-color: #0088aa;
}
.form-range::-moz-range-thumb:active {
  background-color: #b3dbe6;
}
.form-range::-moz-range-track {
  width: 100%;
  height: 8px;
  height: 0.5rem;
  border-radius: 1rem;
  border-color: transparent;
  background-color: #595757;
  color: transparent;
  cursor: pointer;
}
.form-range:disabled {
  pointer-events: none;
}
.form-range:disabled::-webkit-slider-thumb {
  background-color: #e4e0e0;
}
.form-range:disabled::-moz-range-thumb {
  background-color: #e4e0e0;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.btn-primary {
  border-color: #0088aa;
  background-color: #0088aa;
  color: white;
}
.btn-primary:hover,.btn-check:focus + .btn-primary, .btn-primary:focus {
  border-color: #006d88;
  background-color: #007491;
  color: white;
}
.btn-check:focus + .btn-primary, .btn-primary:focus {
  box-shadow: 0 0 0 0.2rem rgba(38, 154, 183, 0.5);
}
.btn-check:checked + .btn-primary, .btn-check:active + .btn-primary, .btn-primary:active, .btn-primary.active, .show > .btn-primary.dropdown-toggle {
  border-color: #006680;
  background-color: #006d88;
  color: white;
}
.btn-check:checked + .btn-primary:focus, .btn-check:active + .btn-primary:focus, .btn-primary:active:focus, .btn-primary.active:focus, .show > .btn-primary.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(38, 154, 183, 0.5);
}
.btn-primary:disabled, .btn-primary.disabled {
  border-color: #0088aa;
  background-color: #0088aa;
  color: white;
}

.btn-secondary {
  border-color: #e87d1e;
  background-color: #e87d1e;
  color: #131212;
}
.btn-secondary:hover,.btn-check:focus + .btn-secondary, .btn-secondary:focus {
  border-color: #ea8a35;
  background-color: #eb9140;
  color: #131212;
}
.btn-check:focus + .btn-secondary, .btn-secondary:focus {
  box-shadow: 0 0 0 0.2rem rgba(200, 109, 28, 0.5);
}
.btn-check:checked + .btn-secondary, .btn-check:active + .btn-secondary, .btn-secondary:active, .btn-secondary.active, .show > .btn-secondary.dropdown-toggle {
  border-color: #ea8a35;
  background-color: #ed974b;
  color: #131212;
}
.btn-check:checked + .btn-secondary:focus, .btn-check:active + .btn-secondary:focus, .btn-secondary:active:focus, .btn-secondary.active:focus, .show > .btn-secondary.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(200, 109, 28, 0.5);
}
.btn-secondary:disabled, .btn-secondary.disabled {
  border-color: #e87d1e;
  background-color: #e87d1e;
  color: #131212;
}

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

.btn-accent {
  border-color: #ffc425;
  background-color: #ffc425;
  color: #131212;
}
.btn-accent:hover,.btn-check:focus + .btn-accent, .btn-accent:focus {
  border-color: #ffca3b;
  background-color: #ffcd46;
  color: #131212;
}
.btn-check:focus + .btn-accent, .btn-accent:focus {
  box-shadow: 0 0 0 0.2rem rgba(220, 169, 34, 0.5);
}
.btn-check:checked + .btn-accent, .btn-check:active + .btn-accent, .btn-accent:active, .btn-accent.active, .show > .btn-accent.dropdown-toggle {
  border-color: #ffca3b;
  background-color: #ffd051;
  color: #131212;
}
.btn-check:checked + .btn-accent:focus, .btn-check:active + .btn-accent:focus, .btn-accent:active:focus, .btn-accent.active:focus, .show > .btn-accent.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(220, 169, 34, 0.5);
}
.btn-accent:disabled, .btn-accent.disabled {
  border-color: #ffc425;
  background-color: #ffc425;
  color: #131212;
}

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

.btn-warning {
  border-color: #f4a122;
  background-color: #f4a122;
  color: #131212;
}
.btn-warning:hover,.btn-check:focus + .btn-warning, .btn-warning:focus {
  border-color: #f5aa38;
  background-color: #f6af43;
  color: #131212;
}
.btn-check:focus + .btn-warning, .btn-warning:focus {
  box-shadow: 0 0 0 0.2rem rgba(210, 140, 32, 0.5);
}
.btn-check:checked + .btn-warning, .btn-check:active + .btn-warning, .btn-warning:active, .btn-warning.active, .show > .btn-warning.dropdown-toggle {
  border-color: #f5aa38;
  background-color: #f6b44e;
  color: #131212;
}
.btn-check:checked + .btn-warning:focus, .btn-check:active + .btn-warning:focus, .btn-warning:active:focus, .btn-warning.active:focus, .show > .btn-warning.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(210, 140, 32, 0.5);
}
.btn-warning:disabled, .btn-warning.disabled {
  border-color: #f4a122;
  background-color: #f4a122;
  color: #131212;
}

.btn-alert {
  border-color: #990000;
  background-color: #990000;
  color: white;
}
.btn-alert:hover,.btn-check:focus + .btn-alert, .btn-alert:focus {
  border-color: #7a0000;
  background-color: #820000;
  color: white;
}
.btn-check:focus + .btn-alert, .btn-alert:focus {
  box-shadow: 0 0 0 0.2rem rgba(168, 38, 38, 0.5);
}
.btn-check:checked + .btn-alert, .btn-check:active + .btn-alert, .btn-alert:active, .btn-alert.active, .show > .btn-alert.dropdown-toggle {
  border-color: #730000;
  background-color: #7a0000;
  color: white;
}
.btn-check:checked + .btn-alert:focus, .btn-check:active + .btn-alert:focus, .btn-alert:active:focus, .btn-alert.active:focus, .show > .btn-alert.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(168, 38, 38, 0.5);
}
.btn-alert:disabled, .btn-alert.disabled {
  border-color: #990000;
  background-color: #990000;
  color: white;
}

.btn-outline-primary {
  border-color: #0088aa;
  color: #0088aa;
}
.btn-outline-primary:hover {
  border-color: #0088aa;
  background-color: #0088aa;
  color: white;
}
.btn-check:focus + .btn-outline-primary, .btn-outline-primary:focus {
  box-shadow: 0 0 0 0.2rem rgba(0, 136, 170, 0.5);
}
.btn-check:checked + .btn-outline-primary, .btn-check:active + .btn-outline-primary, .btn-outline-primary:active, .btn-outline-primary.active, .btn-outline-primary.dropdown-toggle.show {
  border-color: #0088aa;
  background-color: #0088aa;
  color: white;
}
.btn-check:checked + .btn-outline-primary:focus, .btn-check:active + .btn-outline-primary:focus, .btn-outline-primary:active:focus, .btn-outline-primary.active:focus, .btn-outline-primary.dropdown-toggle.show:focus {
  box-shadow: 0 0 0 0.2rem rgba(0, 136, 170, 0.5);
}
.btn-outline-primary:disabled, .btn-outline-primary.disabled {
  background-color: transparent;
  color: #0088aa;
}

.btn-outline-secondary {
  border-color: #e87d1e;
  color: #e87d1e;
}
.btn-outline-secondary:hover {
  border-color: #e87d1e;
  background-color: #e87d1e;
  color: #131212;
}
.btn-check:focus + .btn-outline-secondary, .btn-outline-secondary:focus {
  box-shadow: 0 0 0 0.2rem rgba(232, 125, 30, 0.5);
}
.btn-check:checked + .btn-outline-secondary, .btn-check:active + .btn-outline-secondary, .btn-outline-secondary:active, .btn-outline-secondary.active, .btn-outline-secondary.dropdown-toggle.show {
  border-color: #e87d1e;
  background-color: #e87d1e;
  color: #131212;
}
.btn-check:checked + .btn-outline-secondary:focus, .btn-check:active + .btn-outline-secondary:focus, .btn-outline-secondary:active:focus, .btn-outline-secondary.active:focus, .btn-outline-secondary.dropdown-toggle.show:focus {
  box-shadow: 0 0 0 0.2rem rgba(232, 125, 30, 0.5);
}
.btn-outline-secondary:disabled, .btn-outline-secondary.disabled {
  background-color: transparent;
  color: #e87d1e;
}

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

.btn-outline-accent {
  border-color: #ffc425;
  color: #ffc425;
}
.btn-outline-accent:hover {
  border-color: #ffc425;
  background-color: #ffc425;
  color: #131212;
}
.btn-check:focus + .btn-outline-accent, .btn-outline-accent:focus {
  box-shadow: 0 0 0 0.2rem rgba(255, 196, 37, 0.5);
}
.btn-check:checked + .btn-outline-accent, .btn-check:active + .btn-outline-accent, .btn-outline-accent:active, .btn-outline-accent.active, .btn-outline-accent.dropdown-toggle.show {
  border-color: #ffc425;
  background-color: #ffc425;
  color: #131212;
}
.btn-check:checked + .btn-outline-accent:focus, .btn-check:active + .btn-outline-accent:focus, .btn-outline-accent:active:focus, .btn-outline-accent.active:focus, .btn-outline-accent.dropdown-toggle.show:focus {
  box-shadow: 0 0 0 0.2rem rgba(255, 196, 37, 0.5);
}
.btn-outline-accent:disabled, .btn-outline-accent.disabled {
  background-color: transparent;
  color: #ffc425;
}

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

.btn-outline-warning {
  border-color: #f4a122;
  color: #f4a122;
}
.btn-outline-warning:hover {
  border-color: #f4a122;
  background-color: #f4a122;
  color: #131212;
}
.btn-check:focus + .btn-outline-warning, .btn-outline-warning:focus {
  box-shadow: 0 0 0 0.2rem rgba(244, 161, 34, 0.5);
}
.btn-check:checked + .btn-outline-warning, .btn-check:active + .btn-outline-warning, .btn-outline-warning:active, .btn-outline-warning.active, .btn-outline-warning.dropdown-toggle.show {
  border-color: #f4a122;
  background-color: #f4a122;
  color: #131212;
}
.btn-check:checked + .btn-outline-warning:focus, .btn-check:active + .btn-outline-warning:focus, .btn-outline-warning:active:focus, .btn-outline-warning.active:focus, .btn-outline-warning.dropdown-toggle.show:focus {
  box-shadow: 0 0 0 0.2rem rgba(244, 161, 34, 0.5);
}
.btn-outline-warning:disabled, .btn-outline-warning.disabled {
  background-color: transparent;
  color: #f4a122;
}

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

.btn-link {
  color: #0088aa;
  font-weight: 400;
  text-decoration: none;
}
.btn-link:hover {
  color: #005f77;
}
.btn-link:hover,.btn-link:focus {
  text-decoration: underline;
}
.btn-link:disabled, .btn-link.disabled {
  color: #878585;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.dropdown-menu-dark {
  border-color: rgba(19, 18, 18, 0.15);
  background-color: #cdc9c9;
  color: #595757;
}
.dropdown-menu-dark .dropdown-item {
  color: #595757;
}
.dropdown-menu-dark .dropdown-item:hover, .dropdown-menu-dark .dropdown-item:focus {
  background-color: rgba(255, 255, 255, 0.15);
  color: white;
}
.dropdown-menu-dark .dropdown-item.active, .dropdown-menu-dark .dropdown-item:active {
  background-color: #0088aa;
  color: white;
}
.dropdown-menu-dark .dropdown-item.disabled, .dropdown-menu-dark .dropdown-item:disabled {
  color: #595757;
}
.dropdown-menu-dark .dropdown-divider {
  border-color: rgba(19, 18, 18, 0.15);
}
.dropdown-menu-dark .dropdown-item-text {
  color: #595757;
}
.dropdown-menu-dark .dropdown-header {
  color: #878585;
}

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

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

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

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

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

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

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

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

.nav-link {
  display: block;
  padding: 8px 16px;
  padding: 0.5rem 1rem;
  color: #0088aa;
}
.nav-link:hover, .nav-link:focus {
  color: #005f77;
  text-decoration: none;
}
.nav-link.disabled {
  color: #878585;
  cursor: default;
  pointer-events: none;
}

.nav-tabs {
  border-bottom: 1px solid #595757;
}
.nav-tabs .nav-link {
  margin-bottom: -1px;
  border: 1px solid transparent;
  border-top-right-radius: 6px;
  border-top-left-radius: 6px;
  background: none;
}
.nav-tabs .nav-link:hover, .nav-tabs .nav-link:focus {
  border-color: #414040 #414040 #595757;
  isolation: isolate;
}
.nav-tabs .nav-link.disabled {
  border-color: transparent;
  background-color: transparent;
  color: #878585;
}
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
  border-color: #595757 #595757 white;
  background-color: white;
  color: #b5b2b2;
}
.nav-tabs .dropdown-menu {
  margin-top: -1px;
  border-top-right-radius: 0;
  border-top-left-radius: 0;
}

.nav-pills .nav-link {
  border: 0;
  border-radius: 6px;
  background: none;
}
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  background-color: #0088aa;
  color: white;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.page-link {
  display: block;
  position: relative;
  border: 1px solid #595757;
  background-color: white;
  color: #0088aa;
}
.page-link:hover {
  z-index: 2;
  border-color: #595757;
  text-decoration: none;
}
.page-link:hover,.page-link:focus {
  background-color: #414040;
  color: #005f77;
}
.page-link:focus {
  z-index: 3;
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(0, 136, 170, 0.25);
}

.page-item:not(:first-child) .page-link {
  margin-left: -1px;
}
.page-item.active .page-link {
  z-index: 3;
  border-color: #0088aa;
  background-color: #0088aa;
  color: white;
}
.page-item.disabled .page-link {
  border-color: #595757;
  background-color: #e4e0e0;
  color: #878585;
  pointer-events: none;
}

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

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

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

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

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

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

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

.alert-heading {
  color: inherit;
}

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

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

.alert-primary {
  border-color: #b3dbe6;
  background-color: #cce7ee;
  color: #005266;
}
.alert-primary .alert-link {
  color: #004252;
}

.alert-secondary {
  border-color: #f8d8bc;
  background-color: #fae5d2;
  color: #8b4b12;
}
.alert-secondary .alert-link {
  color: #6f3c0e;
}

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

.alert-accent {
  border-color: #ffedbe;
  background-color: #fff3d3;
  color: #997616;
}
.alert-accent .alert-link {
  color: #7a5e12;
}

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

.alert-warning {
  border-color: #fce3bd;
  background-color: #fdecd3;
  color: #926114;
}
.alert-warning .alert-link {
  color: #754e10;
}

.alert-alert {
  border-color: #e0b3b3;
  background-color: #ebcccc;
  color: #5c0000;
}
.alert-alert .alert-link {
  color: #4a0000;
}

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

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

.progress-bar {
  flex-direction: column;
  justify-content: center;
  background-color: #0088aa;
  color: white;
  text-align: center;
  white-space: nowrap;
}

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

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

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

.list-group-item-action {
  width: 100%;
  color: #b5b2b2;
  text-align: inherit;
}
.list-group-item-action:hover, .list-group-item-action:focus {
  z-index: 1;
  background-color: #2a2929;
  color: #b5b2b2;
  text-decoration: none;
}
.list-group-item-action:active {
  background-color: #414040;
  color: #131212;
}

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

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

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

.list-group-item-primary {
  background-color: #cce7ee;
  color: #001b22;
}
.list-group-item-primary.list-group-item-action:hover, .list-group-item-primary.list-group-item-action:focus {
  background-color: #b8d0d6;
  color: #001b22;
}
.list-group-item-primary.list-group-item-action.active {
  border-color: #001b22;
  background-color: #001b22;
  color: white;
}

.list-group-item-secondary {
  background-color: #fae5d2;
  color: #2e1906;
}
.list-group-item-secondary.list-group-item-action:hover, .list-group-item-secondary.list-group-item-action:focus {
  background-color: #e1cebd;
  color: #2e1906;
}
.list-group-item-secondary.list-group-item-action.active {
  border-color: #2e1906;
  background-color: #2e1906;
  color: white;
}

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

.list-group-item-accent {
  background-color: #fff3d3;
  color: #332707;
}
.list-group-item-accent.list-group-item-action:hover, .list-group-item-accent.list-group-item-action:focus {
  background-color: #e6dbbe;
  color: #332707;
}
.list-group-item-accent.list-group-item-action.active {
  border-color: #332707;
  background-color: #332707;
  color: white;
}

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

.list-group-item-warning {
  background-color: #fdecd3;
  color: #312007;
}
.list-group-item-warning.list-group-item-action:hover, .list-group-item-warning.list-group-item-action:focus {
  background-color: #e4d4be;
  color: #312007;
}
.list-group-item-warning.list-group-item-action.active {
  border-color: #312007;
  background-color: #312007;
  color: white;
}

.list-group-item-alert {
  background-color: #ebcccc;
  color: #1f0000;
}
.list-group-item-alert.list-group-item-action:hover, .list-group-item-alert.list-group-item-action:focus {
  background-color: #d4b8b8;
  color: #1f0000;
}
.list-group-item-alert.list-group-item-action.active {
  border-color: #1f0000;
  background-color: #1f0000;
  color: white;
}

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

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

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

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

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

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

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

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

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

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

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

.modal-backdrop {
  z-index: 1040;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #131212;
}
.modal-backdrop.fade {
  opacity: 0;
}
.modal-backdrop.show {
  opacity: 0.5;
}

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

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

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

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

@media (min-width: 460px) {
  .modal-dialog {
    max-width: 500px;
    margin: 1.75rem auto;
  }

  .modal-dialog-scrollable {
    height: calc(100% - 3.5rem);
  }

  .modal-dialog-centered {
    min-height: calc(100% - 3.5rem);
  }

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

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

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

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

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

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

.tooltip-inner {
  max-width: 200px;
  padding: 4px 8px;
  padding: 0.25rem 0.5rem;
  border-radius: 6px;
  background-color: #131212;
  color: white;
  text-align: center;
}

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

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

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

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

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

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

.popover-body {
  padding: 16px 16px;
  padding: 1rem 1rem;
  color: #131212;
}

.carousel {
  position: relative;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.offcanvas-backdrop {
  z-index: 1040;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #131212;
}
.offcanvas-backdrop.fade {
  opacity: 0;
}
.offcanvas-backdrop.show {
  opacity: 0.5;
}

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

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

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

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

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

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

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

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

.offcanvas.show {
  transform: none;
}

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

.link-primary {
  color: #0088aa;
}
.link-primary:hover, .link-primary:focus {
  color: #006d88;
}

.link-secondary {
  color: #e87d1e;
}
.link-secondary:hover, .link-secondary:focus {
  color: #ed974b;
}

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

.link-accent {
  color: #ffc425;
}
.link-accent:hover, .link-accent:focus {
  color: #ffd051;
}

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

.link-warning {
  color: #f4a122;
}
.link-warning:hover, .link-warning:focus {
  color: #f6b44e;
}

.link-alert {
  color: #990000;
}
.link-alert:hover, .link-alert:focus {
  color: #7a0000;
}

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

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

.ratio-4x3 {
  --bs-aspect-ratio: calc(3 / 4 * 100%);
}

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

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

.fixed-top {
  top: 0;
}

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

.fixed-bottom {
  bottom: 0;
}

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

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

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

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

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

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

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

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

h2, .h2,
h3,
.h3 {
  color: #ffc425;
}

/*
Scrollable Table

Sometimes you have a table that will need a scrable comparison. 

Markup:
<div class="table-scrollable-container">
<div class="instructions c_shade"> <i class="fa fa-long-arrow-left"></i> Scroll For Software Companies  <i class="fa fa-long-arrow-right"></i> </div>
    <table class="overflow_hidden relative table-scrollable flex flex_row">
        <thead class="b_0 bg_shade-5 br-r_1 br_primary-1 br_solid flex_shrink float_left l_0 relative:lg relative:md shadow_3 t_0 w_40">
            <tr class=""flex flex_column>
                <th>Certified NCDR Software Vendor</th>
                <th>IMPACT Registry</th>
                <th>ACTION Registry</th>
                <th>PVI Registry</th>
                <th>CathPCI Registry</th>
                <th>ICD Registry</th>
                <th>AFib Registry</th>
            </tr>
        </thead>
        <tbody class="flex_auto float_right overflow_scroll scrollbar-mini w_60">
            <tr>
                <td><a href="#157" class="parent-cell">ARMUS Corporation</a></td>
                <td>Certified 04/21/2017</td>
                <td>Certified 12/23/14</td>
                <td>Certified October 18, 2017
                </td>
                <td>Certified - Interoperable with ACTION v2 07/14/10</td>
                <td>Certified 08/05/2016</td>
                <td>Certified 08/05/2016</td>
            </tr>
            <tr>
                <td><a href="#101" class="parent-cell">Axis Clinical Software, Inc.</a></td>
                <td>Certified 08/24/2016</td>
                <td>Interoperable with CathPCI and ICD v4 01/13/15</td>
                <td>Certified 11/07/2014</td>
                <td>Certified Interoperable with ACTION v2 10/28/11 and ICD v2 04/13/12
                    <br><b>*Metric License </b></td>
                <td>Certified 05/27/16
                    <br><b>*Metric License </b></td>
                <td>Certified 07/29/2016</td>
            </tr>
            <tr>
                <td><a href="#127" class="parent-cell">BayaTree, LLC</a></td>
                <td>&nbsp;
                </td>
                <td>Certified 07/12/2017</td>
                <td>&nbsp;
                </td>
                <td>Certified 08/18/2009</td>
                <td>Certified 05/24/16</td>
                <td>Certified 09/09/2016</td>
            </tr>
            <tr>
                <td><a href="#179" class="parent-cell">CardioAccess, Inc.</a></td>
                <td>Certified 06/03/2016</td>
                <td>&nbsp;
                </td>
                <td>&nbsp;
                </td>
                <td>&nbsp;
                </td>
                <td>&nbsp;
                </td>
                <td>&nbsp;
                </td>
            </tr>
            <tr>
                <td><a href="#110" class="parent-cell">CardioPulse</a></td>
                <td>&nbsp;
                </td>
                <td>Interoperable with CathPCI v4 and ICD v2 04/10/15</td>
                <td>&nbsp;
                </td>
                <td>Interoperable with ICD v2 and ACTION v2 9/6/11</td>
                <td>Certified 09/08/2016</td>
                <td>Certified 10/18/2017</td>
            </tr>
            <tr>
                <td><a href="#103" class="parent-cell">Cedaron Medical, Inc.</a></td>
                <td>Certified 01/15/2016</td>
                <td>Interoperable with CathPCI and ICD v4 11/24/14
                    <br><b>*Metric License </b></td>
                <td>Certified 06/03/2014
                    <br><b>*Metric License </b></td>
                <td>Certified Interoperable with ACTION v2 05/04/10
                    <br><b>*Metric License </b></td>
                <td>Certified 05/25/16
                    <br><b>*Metric License </b></td>
                <td>Certified 07/13/2016</td>
            </tr>
            <tr>
                <td><a href="#140" class="parent-cell">Epic</a></td>
                <td>&nbsp;
                </td>
                <td>&nbsp;
                </td>
                <td>&nbsp;
                </td>
                <td>Certified 06/09/2009</td>
                <td>Certified 04/28/2016</td>
                <td>Certified 04/12/2017</td>
            </tr>
            <tr>
                <td><a href="#205" class="parent-cell">Flexible Informatics</a></td>
                <td>&nbsp;
                </td>
                <td>&nbsp;
                </td>
                <td>&nbsp;
                </td>
                <td>&nbsp;
                </td>
                <td>Certified 07/13/2017</td>
                <td>Certified 07/25/2017</td>
            </tr>
            <tr>
                <td><a href="#105" class="parent-cell">GE Healthcare</a></td>
                <td>&nbsp;
                </td>
                <td>&nbsp;
                </td>
                <td>&nbsp;
                </td>
                <td>Certified 03/06/2009</td>
                <td>Certified 07/07/16</td>
                <td>Certified 07/12/2016</td>
            </tr>
            <tr>
                <td><a href="#200" class="parent-cell">Health Level</a></td>
                <td>&nbsp;
                </td>
                <td>&nbsp;
                </td>
                <td>&nbsp;
                </td>
                <td>Certified v4.4 12/07/2016</td>
                <td>&nbsp;
                </td>
                <td>&nbsp;
                </td>
            </tr>
            <tr>
                <td><a href="#108" class="parent-cell">heartbase</a></td>
                <td>&nbsp;
                </td>
                <td>Interoperable with CathPCI and ICD 05/01/15</td>
                <td>Certified 06/18/2014</td>
                <td>Interoperable with ACTION v2 and ICD v2 03/29/13
                    <br><b>*Metric License </b></td>
                <td>Certified 06/08/16</td>
                <td>Certified 08/03/2016</td>
            </tr>
            <tr>
                <td><a href="#118" class="parent-cell">Juniper Consulting Group</a></td>
                <td>&nbsp;
                </td>
                <td>&nbsp;
                </td>
                <td>&nbsp;
                </td>
                <td>Certified 06/22/2009</td>
                <td>Certified 05/24/16</td>
                <td>Certified 11/10/2016</td>
            </tr>
            <tr>
                <td><a href="#111" class="parent-cell">LUMEDX</a></td>
                <td>Certified 03/17/2016
                    <br><b>*Metric License </b></td>
                <td>Interoperable with CathPCI and ICD v4 02/05/15</td>
                <td>Certified 05/11/2015</td>
                <td>Interoperable with ACTION v2</td>
                <td>Certified 08/10/16
                    <br><b>*Metric License </b></td>
                <td>Certified 12/22/2016</td>
            </tr>
            <tr>
                <td><a href="#183" class="parent-cell">Navion Healthcare Solutions</a></td>
                <td>&nbsp;
                </td>
                <td>Certified 01/23/15
                    <br><b>*Metric License </b></td>
                <td>&nbsp;
                </td>
                <td>Certified 04/01/2013
                    <br><b>*Metric License </b></td>
                <td>Certified 08/09/16
                    <br><b>*Metric License </b></td>
                <td>Certified 04/19/2017</td>
            </tr>
            <tr>
                <td><a href="#199" class="parent-cell">Q-Centrix</a></td>
                <td>&nbsp;
                </td>
                <td>Certified v2.4 05/17/2016
                    <br><b>*Metric License </b></td>
                <td>&nbsp;
                </td>
                <td>Certified 04/28/16
                    <br><b>*Metric License </b></td>
                <td>Certified 11/22/2016</td>
                <td>Certified 10/12/2017</td>
            </tr>
            <tr>
                <td><a href="#138" class="parent-cell">Quantros, Inc.</a></td>
                <td>&nbsp;
                </td>
                <td>&nbsp;
                </td>
                <td>&nbsp;
                </td>
                <td>Certified 09/30/2009</td>
                <td>&nbsp;
                </td>
                <td>&nbsp;
                </td>
            </tr>
            <tr>
                <td><a href="#153" class="parent-cell">Quintiles</a></td>
                <td>&nbsp;
                </td>
                <td>Certified 03/10/15</td>
                <td>&nbsp;
                </td>
                <td>&nbsp;
                </td>
                <td>&nbsp;
                </td>
                <td>&nbsp;
                </td>
            </tr>
            <tr>
                <td><a href="#176" class="parent-cell">Scientific Software Solutions, Inc.</a></td>
                <td>Certified 02/05/2016</td>
                <td>&nbsp;
                </td>
                <td>&nbsp;
                </td>
                <td>&nbsp;
                </td>
                <td>&nbsp;
                </td>
                <td>&nbsp;
                </td>
            </tr>
            <tr>
                <td><a href="#174" class="parent-cell">SoftLink International Inc.</a></td>
                <td>&nbsp;
                </td>
                <td>&nbsp;
                </td>
                <td>&nbsp;
                </td>
                <td>Certified 05/02/2012</td>
                <td>Certified 05/26/2016</td>
                <td>Certified 05/26/2016</td>
            </tr>
        </tbody>
    </table>
</div>

Styleguide HTML.Table.Scrollable
*/
.table-scrollable-container:after {
  display: table;
  clear: both;
  content: "";
}
.table-scrollable-container thead th {
  height: 112px;
  height: 7rem;
}
.table-scrollable-container tbody {
  white-space: nowrap;
}
.table-scrollable-container tbody tr {
  white-space: normal;
}
.table-scrollable-container tbody td {
  height: 112px;
  height: 7rem;
}
.table-scrollable-container .instructions {
  display: block;
  width: 100%;
  padding: 4px 16px;
  padding: 0.25rem 1rem;
  font-size: 0.8888888889em;
  text-align: center;
}
.table-scrollable-container .instructions .fa {
  margin: 0 4px;
  margin: 0 0.25rem;
}

.table-scrollable .parent-cell {
  font-size: 1.125em;
}
/*
Pagination

Pagination Design

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

Weight: 100

Styleguide  Bootstrap.Pagination

*/
/*
Tabs

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

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

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

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

Weight:0

Styleguide Structures.Tabs
*/
/*
Simple Tabs

Simple in page tabs 

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

Styleguide  Structures.Tabs.Tabs

*/
/*
Simple Tabs: Dark Mode

Reverse Colored Tabs for when on dark background

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

Weight: 0

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

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

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

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

Weight:0

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

Description: Dark Tab Basic Nav

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


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

Weight:0


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

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

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

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

Weight:0


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

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

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

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

Weight:0

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

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

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


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

Weight:0

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

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

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

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

Weight:0

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

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

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



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

Weight:0

Styleguide Structures.UITabs
*/
/*
UI Tabs Overflow

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

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

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

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

Weight:0

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

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

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

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

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

MarkupWrapperClasses: flex ul_none

Weight:0

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

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

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

MarkupWrapperClasses: flex ul_none

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

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

Weight:0

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

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

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

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

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

MarkupWrapperClasses: flex ul_none

Weight:0

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

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

Markup:


Weight:0

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

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

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

Weight:-1000

MarkupWrapperClasses: max-w_25 m_auto 


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


Styleguide Navigation.Sidebar
*/
/*
Parent NavItem

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

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

Weight: -100

MarkupWrapperClasses: bg_primary c_white font_ui ul_none

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

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

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

Markup:
<li class="nav-item {{modifier_class}}" data-nav="child">
    <div class="flex flex_row">
        <div class="flex flex_column flex_none justify_start">
            <div class="flex_none">
                <span class="fa-stack">
                    <i class="fas fa-spacer fa-stack-1x"></i>
                </span>
            </div>
        </div>
        <div class="flex_auto self_center">
            <a class="text-shadow_black-1 {{modifier_class}} c_white-9 p-y_2 p-x_3 w_100 h:c_white inline-block h:underline self_center  a:bg_black-3">Child Link</a>
        </div>
    </div>
</li>

Weight: 10

MarkupWrapperClasses: bg_primary c_white font_ui ul_none

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

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

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

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

Weight: -10

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


MarkupWrapperClasses: bg_primary c_white font_ui ul_none

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

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


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

Weight: 15

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


MarkupWrapperClasses: bg_primary c_white font_ui ul_none

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

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

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

Weight: 15

MarkupWrapperClasses: bg_primary c_white font_ui ul_none

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

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

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

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

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

Weight: 100

MarkupWrapperClasses: bg_primary c_white font_ui ul_none

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

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

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

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


Weight: 100

Styleguide Navigation.Toggle.Rotation

*/
/*
Toggle 

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

#targetName -  the name of the target of the collapse

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

Weight: -10

MarkupWrapperClasses: bg_white font_ui flex c_primary

Styleguide Navigation.Toggle
*/
/*
Toggle Chevron

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

#targetName -  the name of the target of the collapse

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

Weight: -80

MarkupWrapperClasses: bg_white font_ui flex c_primary

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

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

#targetName -  the name of the target of the collapse

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

Weight: -100

MarkupWrapperClasses: bg_white font_ui flex c_primary

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

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

#targetName -  the name of the target of the collapse

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

Weight: -90

MarkupWrapperClasses: bg_white font_ui flex c_primary

Styleguide Navigation.Toggle.AdvancedSquare
*/
/*
Accordion

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

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


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


Weight:0

Styleguide  Structures.Accordion
*/
/*
Accordion Child

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

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


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


Weight:0

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

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

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


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


Weight:0

Styleguide  Structures.Accordion.Nested
*/
/*
Buttons

Basic Buttons

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

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

 Styleguide  Bootstrap.Button

*/
/*
Footer

The Footer of CVQuality.org 

Markup:
<div id="footer-wrap" class="">
	<!-- ********************************** breadcrumbs ********************************** -->
	<div id="breadcrumbs" class="br-b_3 br-t_1 br_0 br_accent br_solid br_t_3 breadcrumbs-container c_shade font_0 font_ui p-x_4 p_3">
		<b class="breadcrumbs-title">YOU ARE HERE: </b>
		Home
	</div>
	<!-- This is the inner footer that we cache -->
	<div id="footer" role="contentinfo" class="bg_shade-2 flex flex_column flex_inline flex_row:md flex_wrap p-x_3 p-y_0:lg p-y_4 w_100">
		<div class="br-l_1 br_so br_solid:lg br_white-3 flex_auto font_ui m-l_4:lg m-y_4:lg order-1 p-l_3:md p-l_4:lg p-y_4:md p-x_0 p-x_3 p-y_4:lg w-grid_2:lg w-grid_6:md">
			<h2 class="br-b_1 br_dotted:md br_dotted:lg br_white-6 c_shade-n4 font_0:md font_1 font_ui font_bold m-b_0:md m-b_2 m-b_2:lg m-t_4:md p-b_3 table-cell vertical-align_bottom w_10" style="height: 4rem;">
				Quality Improvement for Institutions:
			</h2>
			<ul class="font_n1:lg font_0 font_ui m-b_4 p-t_2 ul_none">
				<li class="text-indent_n1 p-l_4 p-l_r">
					<a class="nav-link c_white h:underline p-y_0" href="/home" id="msFooter_rptQii_hypLnk_0" target="_top">
						Home
					</a>
				</li>
				<li class="text-indent_n1 p-l_4 p-l_r">
					<a class="nav-link c_white h:underline p-y_0" href="/About-QII" id="msFooter_rptQii_hypLnk_1" target="_top">
						About
					</a>
				</li>
				<li class="text-indent_n1 p-l_4 p-l_r">
					<a class="nav-link c_white h:underline p-y_0" href="/Get-Started" id="msFooter_rptQii_hypLnk_2" target="_top">
						Get Started
					</a>
				</li>
				<li class="text-indent_n1 p-l_4 p-l_r">
					<a class="nav-link c_white h:underline p-y_0" href="/News" id="msFooter_rptQii_hypLnk_3" target="_top">
						News
					</a>
				</li>
			</ul>
		</div>
		<div class="br-r_1 br_0 br_solid:lg br_white-3 flex_auto font_ui m-r_4:lg m-y_4:lg order-1 p-r_4:lg p-x_3 p-y_4:md w-grid_2:lg w-grid_6:md">
			<h2 class="br-b_1 br_dotted:md br_dotted:lg font_1 br_white-6 c_shade-n5 font_0:md font_ui font_bold m-b_0 m-b_2:lg m-t_4:md nowrap p-b_3 table-cell vertical-align_bottom w_10" style="height: 4rem;">Offerings:</h2>
			<ul class="font_n1:lg font_0 font_ui m-b_4 p-t_2 ul_none">
				<li class="nav-item text-indent_n1 p-l_4 p-l_r">
					<a class="nav-link c_white h:underline p-y_0" href="/NCDR-Home" id="msFooter_rptOfferings_hypLnk_0" target="_top">
						NCDR
					</a>
				</li>
				<li class="nav-item text-indent_n1 p-l_4 p-l_r">
					<a class="nav-link c_white h:underline p-y_0" href="/Initiatives" id="msFooter_rptOfferings_hypLnk_1" target="_top">
						Initiatives
					</a>
				</li>
				<li class="nav-item text-indent_n1 p-l_4 p-l_r">
					<a class="nav-link c_white h:underline p-y_0" href="/qi-communications-kit" id="msFooter_rptOfferings_hypLnk_2" target="_top">
						QI Participation Kit
					</a>
				</li>
				<li class="nav-item text-indent_n1 p-l_4 p-l_r">
					<a class="nav-link c_white h:underline p-y_0" href="/Clinical-Toolkits" id="msFooter_rptOfferings_hypLnk_3" target="_top">
						Clinical Toolkits
					</a>
				</li>
				<li class="nav-item text-indent_n1 p-l_4 p-l_r">
					<a class="nav-link c_white h:underline p-y_0" href="/accreditation" target="_self">
						Accreditation
					</a>
				</li>
			</ul>
		</div>
		<!-- column 4 -->
		<div class="flex_auto order_0:md order_last p-x_3 p-y_4:lg relative w-grid:12:md w-grid_12 w-grid_3:lg">
			<div class="bg_left block display_none:md logo_condensed seal_primary" style="height: 80px;">
				<span class="alt">logo_primary-alt max-w_20</span>
			</div>
<div class="bg_left block:md display_none logo_primary" style="height: 100px;">
				<span class="alt">logo_primary-alt max-w_20</span>
			</div>
			<section class="address c_shade-n4 p-l_0:md p-y_0:md p-y_3">
				<address>
					<!-- http://microformats.org/wiki/hcard -->
					<h4 class="m-b_0 font_bold m-b_2:md font_copy font_normal font_1:md font_2 m-t_4:md">
						Heart House
					</h4>
					<div class="flex flex_column flex_row:md font_n1 lh_1 font_ui">
						<ul class="flex_auto p-r_4 ul_none w_10:md w_50:lg">
							<li class="m-b_1 m-b_2:md font_normal">
								<span class="street-address">2400 N. St. NW</span>
							</li>
							<li class="m-b_1 m-b_2:md font_normal">
								<span class="locality ">Washington</span>,
								<span class="city-name ">
									<abbr title="District of Colombia">DC</abbr>
								</span>
								<span class="postal-code">20037</span>
							</li>
							<li class="m-b_1 m-b_2:md font_normal">
								<a href="mailto:MemberCare@acc.org" class="email c_shade-n4 h:c_shade-n5 h:underline">
									<strong class="p-r_2">Email:</strong>
									<span class="">MemberCare@acc.org</span></a>
							</li>
						</ul>
						<ul class="flex_auto p-l_0:lg p-l_4:md ul_none w_50:lg w_50:md">
							<li class="m-b_1 m-b_2:md font_normal">
								<a tel="+12023756000" href="tel:+12023756000" class="tel c_shade-n4 h:c_shade-n5 h:underline">
									<strong class="p-r_2">Phone:</strong><span class="">(202) 375-6000, ext. 5603</span></a>
							</li>
							<li class="m-b_1 m-b_2:md font_normal">
								<a tel="+18002574737" href="tel:+18002534636.5603" class="tel c_shade-n4 h:c_shade-n5 h:underline">
									<strong class="p-r_2">Toll Free:</strong><span class="">(800) 253-4636, ext. 5603</span></a>
							</li>
							<li class="m-b_1 m-b_2:md font_normal">
								<a fax="+12023757000" href="fax:+12023757000" class="fax c_shade-n4 h:c_shade-n5 h:underline">
									<strong class="p-r_2">Fax:</strong>
									<span class="">(202) 375-7000</span>
								</a>
							</li>
						</ul>
					</div>
				</address>
			</section>
		</div>
		<div class="flex_auto order-10 order_last p-x_3 p-y_4:lg relative w-grid_3:lg w-grid_6:md">
			<section class="acc-websites m-y_3">
				<nav class="font_ui w_100 font_0"><h3 class="br-b_1 br_dotted br_white-4 c_shade-n4 font_0 font_ui font_bold m-b_2 p-b_3 w_100">Improving Cardiovascular Care</h3>
					<ul class="lh_4 ul_none">
						<li class="">
							<a target="_blank" class="block c_shade-5 h:bg_black-2 h:c_white flex" href="http://www.acc.org">
								<span class="flex_auto m-l_2">Acc</span>
								<i class="fa-external-link-square fas flex_shrink  p-r_3 self_center"></i>
							</a>
						</li>
						<li class="">
							<a target="_blank" class="c_shade-5 block h:bg_black-2 h:c_white flex" href="https://cvquality.acc.org/Accreditation?">
								<span class="flex_auto m-l_2 self_center">Accreditation Services</span>
								<i class=" fa-external-link-square fas flex_shrink p-r_3 self_center"></i>
							</a>
						</li>
						<li class="">
							<a target="_blank" class="c_shade-5 block h:bg_black-2 h:c_white flex" href="http://www.ncdr.com">
								<span class="flex_auto inline-block m-l_2 self_center">NCDR</span>
								<i class=" fa-external-link-square fas flex_shrink p-r_3 self_center"></i>
							</a>
						</li>
						<li class="">
							<a target="_blank" class="c_shade-5 block h:bg_black-2 h:c_white flex" href="http://www.cardiosmart.org">
								<span class="flex_auto inline-block m-l_2 self_center">CardioSmart</span>
								<i class=" fa-external-link-square fas flex_shrink p-r_3 self_center"></i>
							</a>
						</li>
						<li class="">
							<a target="_blank" class="c_shade-5 block h:bg_black-2 h:c_white flex" href="http://www.onlinejacc.org/">
								<span class="flex_auto inline-block m-l_2 self_center">JACC</span>
								<i class=" fa-external-link-square fas flex_shrink p-r_3 self_center"></i>
							</a>
						</li>
					</ul>
				</nav>
			</section>
			<section class="b_4 l_0 m-t_4 p-t_5 r_0 social">
				<ul class="flex social-bar ul_none c_white h:c_white m_0">
					<li class="flex_auto m-r_2">
						<a href="https://twitter.com/accintouch" target="_blank" class="twitter social-bar--button block m-b_0 p_3 c_white text_center opacity_7 h:opacity"><i class="fab fa-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&amp;hl=en_US" target="_blank" class="google-play social-bar--button block m-b_0 p_3 c_white text_center opacity_7 h:opacity"><i class="fab fa-google-play"></i></a>
					</li>
					<li class="flex_auto m-r_2">
						<a href="https://apps.apple.com/us/developer/american-college-of-cardiology/id502174543#see-all/i-phonei-pad-apps" target="_blank" class="apple-store social-bar--button block m-b_0 p_3 c_white text_center opacity_7 h:opacity"><i class="fab fa-apple"></i></a>
					</li>
				</ul>
			</section>
		</div>
	</div>
	<!-- / footer -->
	<div id="subfooter" class="bg_shade-n1 br-b_2 br_0 br_accent-n1 br_solid c_white font_n1 p-x_4 p-y_4">
		<ul class="block footer-bottom-links ul_none">
			<li class="inline p_2">
				<a href="//www.acc.org/footer-pages/media-center" class="c_white-6 h:c_white">Media Center</a>
			</li>
			<li class="inline p_2">
				<a href="//www.acc.org/footer-pages/quick-start-guide" class="c_white-6 h:c_white">ACC.org Quick Start Guide</a>
			</li>
			<li class="inline p_2">
				<a class="c_white-6 h:c_white" href="//www.acc.org/footer-pages/advertising-and-sponsorship-policy">Advertising &amp; Sponsorship Policy</a>
			</li>
			<li class="inline p_2">
				<a class="c_white-6 h:c_white" href="//www.acc.org/footer-pages/clinical-content-disclaimer">Clinical Content Disclaimer</a>
			</li>
			<li class="inline p_2">
				<a class="c_white-6 h:c_white" href="//www.acc.org/footer-pages/editorial-board">Editorial Board</a>
			</li>
			<li class="inline p_2">
				<a class="c_white-6 h:c_white" href="//www.acc.org/footer-pages/privacy-policy">Privacy Policy</a>
			</li>
			<li class="inline p_2">
				<a class="c_white-6 h:c_white" href="//www.acc.org/footer-pages/registered-user-agreement">Registered User Agreement</a>
			</li>
			<li class="inline p_2">
				<a class="c_white-6 h:c_white" href="//www.acc.org/footer-pages/terms-and-conditions">Terms of Service</a>
			</li>
			<li class="inline p_2">
				<a class="c_white-6 h:c_white" href="//www.acc.org/footer-pages/cookie-policy">Cookie Policy</a>
			</li>
			<li class="inline p_2">
				<a class="c_white-6 h:c_white" href="//www.acc.org/footer-pages/member-hub-terms-of-use">Member Hub Terms of Use</a>
			</li>
			<li class="inline p_2">
				<a class="c_white-6 h:c_white" href="//www.acc.org/sitemap-acc.xml">Site Map</a>
			</li>
		</ul>
		<!-- /footer-bottom-links -->
		<p class="c_white-5 font_italic font_n2 legal m-b_2 m-t_3">
			© 2019 American College of Cardiology Foundation. All rights reserved.
		</p>
	</div>
	<!-- /subfooter -->
</div>

Weight: -50

Styleguide Recipes.Navs.FooterCardioSmart

*/
/*
Cards

Basic Cards

Markup:
<div class="card">
 <h3 class="card-header c_black">Basic Card</h3>
  <div class="card-body">
    <p>cupidatat eu dolor dolor aliquip aliqua velit esse magna culpa qui fugiat ad culpa consectetur sint tempor elit dolor eu anim nisi quis consectetur laborum laboris proident consectetur mollit esse</p>
  </div>
   <div class="card-footer"> <a href="#" class="btn btn-primary btn-block">Action</a></div>
</div>

Styleguide Recipes.Cards
*/
/*
Highlighted Card

Highlighted Cards are stylized cards with a soft blue background and changes all header sizes and text to a bit larger. These cards are used as hero area or for extra interest.


Markup:
<div class="bg_primary-5 br_primary-4 br_radius card highlighted">
 <h2 class="bg_tansparent br-b_0 c_secondary c_shade-n4 card-header font_1 font_2:md font_3:lg p-b_3 p-x_3 p-x_3:md p-x_4:lg uppercase">Highlighted Card</h2>
  <div class="card-body font_0 font_1:md font_ui lh_2 p-b_0 p-x_3 p-x_3:md p-x_4:lg p-y_0">
    <p>Repudiandae adipisci illum omnis et suscipit at amet ex. Error magni laborum autem et rerum porro asperiores sunt. Et veritatis rerum voluptas hic eum sint. Ipsa labore eos autem cupiditate ut molestiae sit fugiat. Rerum sit dolorem veritatis est quia nesciunt tenetur ut. Animi earum illo sed incidunt fuga.</p>
  </div>
   <div class="bg_tansparent br-t_0 card-footer p-t_0 p-x_3 p-x_3:md p-x_4:lg"> <a href="#" class="btn btn-block btn-primary font_0:md font_n1">Action</a></div>
</div>

Styleguide Recipes.Cards.Highlight
*/
/*
Card Positions

Placing cards inside of content areas is needed within the design.  Placing some utility classes will acomplish this with a responsive toggle. 
| Style Combo       | Effect                                          | Classes                                                   |
| ----------------- | ----------------------------------------------- | --------------------------------------------------------- |
| position-right-lg | floats the card when the veiwport is large up.  | max-w_20 clear_right\:lg float_right\:lg w_20:lg           |
| position-right-md | floats the card when the veiwport is medium up. | max-w_20 clear_right\:md float_right\:md w_40\:md w_20\:lg |
| position-right-sm | floats the card when the veiwport is small up.  | max-w_20 clear_right float_right w_50 w_40\:md w_20\:lg    |
| position-left-lg  | floats the card when the veiwport is small up.  | max-w_20 clear_left\:lg float_left\:lg w_20:lg             |
| position-left-md  | floats the card when the veiwport is medium up. | max-w_20 clear_left\:md float_left\:md w_40\:md w_20\:lg   |
| position-left-sm  | floats the card when the veiwport is large up.  | max-w_20 clear_left float_left w_50 w_40\:md w_20\:lg      |


Markup:
<div class="bg_primary-alt br_1 br_primary-4 br_radius card highlighted shadow_1 max-w_20 clear_right float_right w_50 w_40\:md w_20\:lg ">
 <h2 class="bg_tansparent br-b_0 c_secondary c_shade-n4 card-header font_1 font_2:md font_display p-b_3 p-x_3 p-x_3:md p-x_4:lg uppercase">Positioned Small Right</h2>
  <div class="card-body font_0 font_1:md font_ui lh_2 p-b_0 p-x_3 p-x_3:md p-x_4:lg p-y_0">
  <p class=" font_n2"> Container Classes:max-w_1 clear_right float_right w_50 w_40:md w_20:lg</p>  
  <p>Repudiandae adipisci illum omnis et suscipit at amet ex. Error magni laborum autem et rerum porro asperiores sunt. Et veritatis rerum voluptas hic eum sint. Ipsa labore eos autem cupiditate ut molestiae sit fugiat. Rerum sit dolorem veritatis est quia nesciunt tenetur ut. Animi earum illo sed incidunt fuga.</p>
  </div>
   <div class="bg_tansparent br-t_0 card-footer p-t_0 p-x_3 p-x_3:md p-x_4:lg"> <a href="#" class="btn btn-block btn-primary font_0:md font_n1">Action</a></div>
</div>

Styleguide Recipes.Cards.Positon
*/
/*
Info Card

Info Cards are stylized cards with a warm grey background and changes all headers to bold.  These cards are side notes to the main content

Markup:
<div class="bg_shade-4 br_radius card info shadow_n1 br_0">
 <h2 class="bg_tansparent br-b_0 c_shade-n4 card-header font_1 font_2:md font_display p-b_3 p-x_3 p-x_3:md p-x_4:lg">Info Card</h2>
  <div class="card-body font_0 font_1:md font_ui lh_2 p-b_0 p-x_3 p-x_3:md p-x_4:lg p-y_0">
    <p>aliqua mollit consectetur labore ipsum velit officia nulla anim magna est id elit irure qui dolor exercitation incididunt exercitation proident anim officia veniam reprehenderit laboris incididunt irure enim amet esse</p>
  </div>
   <div class="bg_tansparent br-t_0 card-footer p-t_0 p-x_3 p-x_3:md p-x_4:lg"> <a href="#" class="btn btn-block btn-primary font_0:md font_n1">Action</a></div>
</div>

Styleguide Recipes.Cards.Info
*/
/*
Notice Card

Notice Cards are side notes usually associated with an action button.

Markup:
<div class="bg_primary-alt br_1  br_shade-4 card info text_center">
 <h2 class="bg_tansparent br-b_0 br_shade-4 c_primary-n2 card-header font_1 font_2:md font_3:lg font_display p-b_3 p-x_3 p-x_3:md p-x_4:lg triangle_left">Notice Card</h2>
  <div class="card-body font_0 font_1:md font_ui lh_2 p-b_0 p-x_3 p-x_3:md p-x_4:lg p-y_0">
    <p>aliqua mollit consectetur labore ipsum velit officia nulla anim magna est id elit irure qui dolor exercitation incididunt exercitation proident anim officia veniam reprehenderit laboris incididunt irure enim amet esse</p>
  </div>
   <div class="bg_tansparent br-t_0 card-footer p-t_0 p-x_3 p-x_3:md p-x_4:lg"> <a href="#" class="btn btn-block btn-primary font_0:md font_n1">Action</a></div>
</div>

Styleguide Recipes.Cards.Notice
*/
/*
Notice Card Alt

Notice Cards are side notes usually associated with an action button.

Markup:
<div class="bg_shade-4 br_0   card info text_center">
 <h2 class="bg_tansparent br-b_0 br_secondary-alt c_secondary card-header font_1 font_2:md font_3:lg font_display p-b_3 p-x_3 p-x_3:md p-x_4:lg triangle_left">Notice Card</h2>
  <div class="card-body font_0 font_1:md font_ui lh_2 p-b_0 p-x_3 p-x_3:md p-x_4:lg p-y_0">
    <p>aliqua mollit consectetur labore ipsum velit officia nulla anim magna est id elit irure qui dolor exercitation incididunt exercitation proident anim officia veniam reprehenderit laboris incididunt irure enim amet esse</p>
  </div>
   <div class="bg_tansparent br-t_0 card-footer p-t_0 p-x_3 p-x_3:md p-x_4:lg"> <a href="#" class="btn btn-block btn-shade font_0:md font_n1">Action</a></div>
</div>

Styleguide Recipes.Cards.Notice Alt
*/
/*
Address Card

Decorated address card for accreditation

Markup:
<div class="bg_shade-5 p_3 p_4:md">
	<address class="m-b_3 m-x_2 vcard">
		<h4 class="c_secondary font_1 font_bold font_ui m-b_2 m-t_3">Questions About Accreditation?</h4>
		<div class="contact font_n1">
			<ul class="ul_none">
				<li><a href="mailto:" class="c_shade-n3 email link">non@.org</a></li>
				<li><a href="tel:" class="c_shade-n3 link tel">55-555-55555</a></li>
				<li><a href="fax:" class="c_shade-n3 fax link">55-444-55555</a></li>
			</ul>
		</div>
		<h4 class="c_secondary font_1 font_bold font_ui m-b_2 m-t_3">Office Hours:</h4>
		<div class="font_n1 openning-hours">
			<ul class="ul_none">
				<li><span class="time">8:00am - 4pm EST</span><br /></li>
				<li><span class="days">Monday - Firday</span></li>
				<li>
					<a href="blank.pdf" class="block c_shade-n3 link"
						>Holiday Schedule &nbsp;<i class="fa-calendar far"></i
					></a>
				</li>
			</ul>
		</div>
		<h4 class="c_secondary font_1 font_bold font_ui m-b_2 m-t_3">Mailing &amp; Shipping</h4>
		<span class=".org"></span>
		<ul class="ul_none adr">
			<li class="street-address">2400 N St. NW</li>
			<li>
				<span class="locality">Washington</span>,
				<span class="country-name"><abbr title="District of Colombia">DC</abbr></span>
				<span class="postal-code display_none">20006</span>
			</li>
		</ul>
		<nav class="nav-social-button mono-grey">
			<h4 class="c_secondary font_1 font_bold font_ui m-b_2 m-t_3">Follow Us</h4>
			<ul class="flex m_0 social-bar ul_none">
				<li class="flex_shrink m-r_1">
					<a
						href="https://twitter.com/accintouch"
						target="_blank"
						class="bg_shade-1 block br-bl_radius br-tl_radius c_shade-5 h:bg_secondary h:c_white m-b_0 p-x_3 p_2 social-bar--button text_center transition_0 twitter"
						><i class="fab fa-square-x-twitter"></i
					></a>
				</li>
				<li class="flex_shrink m-r_1">
					<a
						href="https://www.facebook.com/AmericanCollegeofCardiology"
						target="_blank"
						class="facebook c_shade-5 bg_shade-1 block h:bg_secondary 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_1">
					<a
						href="https://www.linkedin.com/company/american-college-of-cardiology/"
						target="_blank"
						class="linkedin c_shade-5 bg_shade-1 block h:bg_secondary 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_1">
					<a
						href="http://www.youtube.com/user/ACCinTouch"
						target="_blank"
						class="youtube c_shade-5 bg_shade-1 block h:bg_secondary 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_1">
					<a
						href="https://play.google.com/store/apps/dev?id=5189912010956845696&amp;hl=en_US"
						target="_blank"
						class="google-play c_shade-5 bg_shade-1 block h:bg_secondary 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_1">
					<a
						href="https://apps.apple.com/us/developer/american-college-of-cardiology/id502174543#see-all/i-phonei-pad-apps"
						target="_blank"
						class="apple-store bg_shade-1 block br-br_radius br-tr_radius c_shade-5 h:bg_secondary 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>
		</nav>
	</address>
</div>

Styleguide Recipes.Cards.Address
*/
/* 
Score Card

The Score Box Generic is currently used on the Assessments Page. These repeated boxes are used to show the score with each section of the assessment.


Markup:
<div class="bg_shade-5 box p-x_3 p-y_2 score">
     <h3>veniam quis veniam enim</h3>
     <div class="flex results-points">
         <span class="flex_auto points-possible"><span class="points-breakdown">(0 of 96 possible points)</span></span>
         <span class="c_secondary flex_shrink font_2 points-total">0</span>
     </div>
</div>
<div class="m-t_3 overall-score">
    <span class="c_secondary float_right font_n1 your-score-label">Your Score</span>
    <div class="br-t_2 br_shade br_solid clear_both flex results-points">
        <span class="br-b_1 br_secondary br_dashed flex_auto p-t_4 points-possible">
               <span class="c_secondary font_2 font_bold font_ui m-b_n4 p_3 title">Overall Score</span> <span class="c_shade-1 font_italic points-breakdown">(0 of 96 possible points)</span>
        </span>
        <span class="bg_secondary br_shade c_white flex_shrink font_1 p_3 points-total triangle_top">
            0%
        </span>
    </div>
</div>

Styleguide Recipes.Cards.Score Card
*/
/* 
Date

Style a date marker


Markup:
<div class="br_3 br_primary br_solid event-date flex flex_column font_display lh_1 p-x_2 text_center">
  <span class="month font_2">May</span>
  <span class="day font_3 font_bold">12</span>
  <span class="bg_primary c_white-9 font_0 font_1 font_bold m-b_n2 m-x_n2 year">2018</span>
</div>

Styleguide Recipes.Cards.Date
*/
/* 
Date

Style a date marker

Markup:
<div class="br_shade-2 card event">
    <div class="bg_shade-4 br-l_1 br-t_1 br_solid br_white-5 card-header flex">
            <div class="flex_shrink"><div class="bg_white br_3 br_primary br_solid event-date flex flex_column font_display lh_1 p-x_2 text_center">
  <span class="month font_2">May</span>
  <span class="day font_3 font_bold">12</span>
  <span class="bg_primary c_white-9 font_0 font_1 font_bold m-b_n2 m-x_n2 year">2018</span>
    </div></div>
            <div class="event-details flex_grow lh_1 p-l_4">
                <div class="c_secondary-n1 font_2 m-b_2 title">voluptate anim consequat tempor adipisicing aliquip non do</div>
                <div class="c_primary font_0 font_bold location-title m-b_2">Grand Hayatt</div>
                <div class="c_shade-n4 font_n1 location">Cincinnati, OH </div>
                <span class="font_italic font_n2 full-date p-r_3">May 12, 2018</span><span class="time font_italic font_n2 p-r_3"><span class="begin">8:00AM</span> - <span class="end">2:00PM</span> <span class="timezone">(EST)</span></span>
            </div>
    </div>
    <div class="card-body font_0 p-x_3 p-x_4:md p-y_3 p-y_4:md">
        <p>Eu dolore ullamco laboris veniam commodo pariatur pariatur proident ea. Esse in in nisi non eiusmod consequat pariatur officia mollit incididunt qui consectetur est. Ex aute non amet elit. Voluptate commodo minim sit Lorem occaecat sit aute reprehenderit. Dolore pariatur cupidatat velit anim enim veniam mollit aute fugiat magna do. Culpa non veniam non officia exercitation laborum dolor irure exercitation tempor adipisicing tempor elit nulla.</p>
    </div>
    <div class="bg_shade-5 c_shade-1 card-footer font_n1 text_center"><strong>Add to Calendar: </strong><a href="#" class="link">Outlook</a> | <a href="#" class="link">Google</a> | <a href="#" class="link">iCal</a></div>
    <div class="bg_shade-5 br-t_0 card-footer p-t_0"><a href="#" class="bg_secondary br_radius btn btn-secondary btn-block c_white font_bold h:bg_secondary-n2 h:shadow shadow_2">Register</a></div></div>

    Styleguide Recipes.Cards.Date Event
*/
/*
Testimonial Card

Graphic areas that hold testimonials.

Markup:
<div class="card testimonial">
	<header class="card-header bg_primary-alt br_primary-3 br_solid br_1">
		<img
			class="card-img br_raund img-thumbnail"
			src="https://unsplash.it/200/200?random=0.08080712330559026"
		/>
	</header>
	<div class="card-body">
		<article class="blockquote">
			<p>cillum tempor aliquip amet commodo aute qui veniam Lorem cillum sunt laboris consectetur nisi cillum</p>
			<cite class="blockquote-cite">Someone famous</cite>
		</article>
	</div>
</div>

 Styleguide Recipes.Cards.Testimonials

*/
/*
Product Card

Graphic areas that hold a snippet of a product.

Markup:
<div class="card product">
  <header class="card-header bg_shade-3">
     <img class="card-img" src="https://cvquality.acc.org/images/default-source/accreditation/afbutton.jpg?sfvrsn=f32980bf_2" alt="">
  </header>
  <div class="card-body">
    <article>
     <h2 class="m-0">incididunt est culpa</h2>
      <p>aliqua adipisicing sint exercitation nostrud pariatur amet ut est fugiat excepteur ad elit mollit cillum</p>
      <a class="btn btn-primary" href="#">Link To Product &nbsp; <i class="fa fa-external-link-square"></i></a>
    </article>
  </div>
</div>


 Styleguide Recipes.Cards.Products

*/
/*
List

CVquatlity has some lists through out the design that go beyond basic lists. Below are collection of them and where they can be found. 


 Styleguide Recipes.Lists
*/
/*
Map Result List

Result lists is the list view of all of the pins on the map


Markup:
<ul class="bg_shade-2 font_ui result-list ul_none">
      <li class="address bg_shade-4 br-r_4 br_solid br_white-0 h:bg_shade-n2 h:br_accent h:c_accent-alt p_2 p_3:md p_4:lg relative transition_1">
         <div class="c_primary-n2 expanded-click-area font_1 h:c_white name">proident ad velit sit</div>
         <div class="address-line">sunt magna ea exercitation</div>
         <div class="address-line">nisi qui culpa labore</div>
      </li>
      <li class="address bg_shade-4 br-r_4 br_solid br_white-0 h:bg_shade-n2 h:br_accent h:c_accent-alt m-t_1 p_2 p_3:md p_4:lg relative transition_1">
         <div class="c_primary-n2 expanded-click-area font_1 h:c_white name">proident ad velit sit</div>
         <div class="address-line">sunt magna ea exercitation</div>
         <div class="address-line">nisi qui culpa labore</div>
      </li>
</ul>

 Styleguide Recipes.Lists.Map
*/
/*
Side Nav

Side Nav DOM

Markup:
<nav class="hidden-print nav-sub max-w-25">
    <ul
        class="bg_shade-5 br-b_1 br-t_1 br_secondary br_solid flex flex_column font_0 font_bold font_ui nav">
        <li data-nav="parent"
            class="nav-item parent"><a
               class="nav-link p-y_2 c_shade-n3 h:bg_black-2 h:c_black"
               href="/accreditation/about-accreditation"
               target="_self"><i
                   class="fa fa-holder toggle"></i>About
                Accreditation</a>
            <ul data-nav="child"
                class="flex_column font_n1 nav text-indent_2 bg_shade-4">
                <li class="nav-item"><a
                       class="nav-link p-y_2 c_shade-n3 h:bg_black-2 h:c_black"
                       href="/accreditation/about-accreditation/benefits-of-accreditation"
                       target="_self"><i
                           class="fa fa-holder toggle"></i>Benefits
                        of Accreditation</a></li>
                <li class="nav-item"><a
                       class="nav-link p-y_2 c_shade-n3 h:bg_black-2 h:c_black"
                       href="/accreditation/about-accreditation/steps-to-accreditation"
                       target="_self"><i
                           class="fa fa-holder toggle"></i>Pathway
                        to Accreditation</a></li>
                <li class="nav-item"><a
                       class="nav-link p-y_2 c_shade-n3 h:bg_black-2 h:c_black"
                       href="/accreditation/about-accreditation/testimonials-and-success-stories"
                       target="_self"><i
                           class="fa fa-holder toggle"></i>Testimonials
                        and Success Stories</a></li>
                <li class="nav-item"><a
                       class="nav-link p-y_2 c_shade-n3 h:bg_black-2 h:c_black"
                       href="/accreditation/about-accreditation/value-of-process-improvement"
                       target="_self"><i
                           class="fa fa-holder toggle"></i>Value
                        of Process Improvement</a></li>
                <li class="nav-item"><a
                       class="nav-link p-y_2 c_shade-n3 h:bg_black-2 h:c_black"
                       href="/accreditation/about-accreditation/faqs"
                       target="_self"><i
                           class="fa fa-holder toggle"></i>FAQs</a>
                </li>
                <li class="nav-item"><a
                       class="nav-link p-y_2 c_shade-n3 h:bg_black-2 h:c_black"
                       href="/accreditation/about-accreditation/accreditation-for-systems"
                       target="_self"><i
                           class="fa fa-holder toggle"></i>System-Wide
                        Accreditation</a></li>
            </ul>
        </li>
        <li data-nav="parent"
            class="is-active nav-item parent"><a
               class="a:c_secondary c_shade-n3 fa-caret-right h:bg_white-4 icon-before nav-link p-y_2"
               href="/accreditation/services"
               target="_self"><i
                   class="fa fa-holder toggle"></i>Products
                and Services</a>
            <ul data-nav="child"
                class="bg_shade-4 flex_column font_n1 nav text-indent_1">
                <li class="nav-item parent"><a
                       class="h:bg_black-1 c_shade-n3 fa-caret-right icon-before nav-link p-y_2"
                       href="/accreditation/services/CCL"
                       target="_self"><i
                           class="fa fa-holder toggle"></i>Cardiac
                        Cath Lab Accreditation</a>
                    <ul
                        class="nav flex_column bg_black-2 font_n1 text-indent_3">
                        <li class="nav-item"><a
                               class="nav-link c_shade-n4 p-y_2"
                               href="/accreditation/services/CCL/OnDemandCathLabwebianrs"
                               target="_self">On-Demand Cath
                                Lab Webinars</a></li>
                        <li class="nav-item"><a
                               class="nav-link nav-link c_shade-n4 p-y_2"
                               href="/accreditation/services/CCL/CCLBenefits"
                               target="_self">Cardiac Cath
                                Lab Features Benefits</a>
                        </li>
                        <li class="nav-item"><a
                               class="nav-link nav-link c_shade-n4 p-y_2"
                               href="/accreditation/services/CCL/cardiac-cath-lab-accreditation-training"
                               target="_self">Cardiac Cath
                                Lab Accreditation
                                Training</a></li>
                    </ul>
                </li>
                <li class="nav-item parent"><a
                       class="nav-link c_shade-n3 fa-caret-right icon-before nav-link p-y_2"
                       href="/accreditation/services/chest-pain-center-accreditation"
                       target="_self"><i
                           class="fa fa-holder toggle"></i>Chest
                        Pain Center Accreditation</a>
                    <ul
                        class="nav flex_column bg_black-2 font_n1 text-indent_3">
                        <li class="nav-item"><a
                               class="nav-link c_shade-n4 nav-link p-y_2"
                               href="/accreditation/services/chest-pain-center-accreditation/cpcwebinars"
                               target="_self"><i
                                   class="fa fa-holder toggle"></i>On-Demand
                                Chest Pain Center
                                Webinars</a></li>
                        <li class="nav-item"><a
                               class="nav-link c_shade-n4 nav-link p-y_2"
                               href="/accreditation/services/chest-pain-center-accreditation/CPCDesignations"
                               target="_self"><i
                                   class="fa fa-holder toggle"></i>Chest
                                Pain Center Accreditation
                                Designations</a></li>
                        <li class="nav-item"><a
                               class="nav-link c_shade-n4 nav-link p-y_2"
                               href="/accreditation/services/chest-pain-center-accreditation/CPCBenefits"
                               target="_self"><i
                                   class="fa fa-holder toggle"></i>Chest
                                Pain Center Accreditation
                                Features Benefits</a></li>
                        <li class="nav-item"><a
                               class="nav-link c_shade-n4 nav-link p-y_2"
                               href="/accreditation/services/chest-pain-center-accreditation/CPCsupplementalED"
                               target="_self"><i
                                   class="fa fa-holder toggle"></i>Supplemental
                                Education</a></li>
                        <li class="nav-item"><a
                               class="nav-link c_shade-n4 nav-link p-y_2"
                               href="/accreditation/services/chest-pain-center-accreditation/CPCGuidelines"
                               target="_self"><i
                                   class="fa fa-holder toggle"></i>Chest
                                Pain Center Accreditation
                                Guidelines</a></li>
                        <li class="nav-item"><a
                               class="nav-link c_shade-n4 nav-link p-y_2"
                               href="/accreditation/services/chest-pain-center-accreditation/CPCArticles"
                               target="_self"><i
                                   class="fa fa-holder toggle"></i>Chest
                                Pain Center Accreditation
                                Articles Abstracts</a></li>
                        <li class="nav-item"><a
                               class="nav-link c_shade-n4 nav-link p-y_2"
                               href="/accreditation/services/chest-pain-center-accreditation/CPCPublications"
                               target="_self"><i
                                   class="fa fa-holder toggle"></i>Chest
                                Pain Center Accreditation
                                Pubs</a></li>
                        <li class="nav-item"><a
                               class="nav-link c_shade-n4 nav-link p-y_2"
                               href="/accreditation/services/chest-pain-center-accreditation/CPCQuestions"
                               target="_self"><i
                                   class="fa fa-holder toggle"></i>Chest
                                Pain Center FAQs</a></li>
                        <li class="nav-item"><a
                               class="nav-link c_shade-n4 nav-link p-y_2"
                               href="/accreditation/services/chest-pain-center-accreditation/chest-pain-center-accreditation-training"
                               target="_self"><i
                                   class="fa fa-holder toggle"></i>Chest
                                Pain Center Accreditation
                                Training</a></li>
                    </ul>
                </li>
                <li class="nav-item parent"><a
                       class="h:bg_black-1 c_shade-n3 fa-caret-right icon-before nav-link p-y_2"
                       href="/accreditation/services/EP"
                       target="_self"><i
                           class="fa fa-holder toggle"></i>Electrophysiology
                        Accreditation</a>
                    <ul
                        class="nav flex_column bg_black-2 font_n1 text-indent_3">
                        <li class="nav-item"><a
                               class="nav-link c_shade-n4 p-y_2"
                               href="/accreditation/services/EP/register-for-webinar"
                               target="_self"><i
                                   class="fa fa-holder toggle"></i>On-Demand
                                EP Webinars</a></li>
                        <li class="nav-item"><a
                               class="nav-link c_shade-n4 p-y_2"
                               href="/accreditation/services/EP/EPBenefits"
                               target="_self"><i
                                   class="fa fa-holder toggle"></i>Electrophysiology
                                Features Benefits</a></li>
                        <li class="nav-item"><a
                               class="nav-link c_shade-n4 p-y_2"
                               href="/accreditation/services/EP/electrophysiology-accreditation-training"
                               target="_self"><i
                                   class="fa fa-holder toggle"></i>Electrophysiology
                                Accreditation Training</a>
                        </li>
                    </ul>
                </li>
                <li class="nav-item parent"><a
                       class="h:bg_black-1 c_shade-n3 fa-caret-right icon-before nav-link p-y_2"
                       href="/accreditation/services/HF"
                       target="_self"><i
                           class="fa fa-holder toggle"></i>Heart
                        Failure Accreditation</a>
                    <ul
                        class="nav flex_column bg_black-2 font_n1 text-indent_3">
                        <li class="nav-item"><a
                               class="nav-link c_shade-n4 p-y_2"
                               href="/accreditation/services/HF/hfwebinars"
                               target="_self"><i
                                   class="fa fa-holder toggle"></i>On-Demand
                                Heart Failure Webinars</a>
                        </li>
                        <li class="nav-item"><a
                               class="nav-link c_shade-n4 p-y_2"
                               href="/accreditation/services/HF/HFBenefits"
                               target="_self"><i
                                   class="fa fa-holder toggle"></i>Heart
                                Failure Accreditation
                                Features Benefits</a></li>
                        <li class="nav-item"><a
                               class="nav-link c_shade-n4 p-y_2"
                               href="/accreditation/services/HF/supplementalED"
                               target="_self"><i
                                   class="fa fa-holder toggle"></i>Supplemental
                                Education</a></li>
                        <li class="nav-item"><a
                               class="nav-link c_shade-n4 p-y_2"
                               href="/accreditation/services/HF/HFGuidelines"
                               target="_self"><i
                                   class="fa fa-holder toggle"></i>Heart
                                Failure Accreditation
                                Guidelines</a></li>
                        <li class="nav-item"><a
                               class="nav-link c_shade-n4 p-y_2"
                               href="/accreditation/services/HF/HFArticles"
                               target="_self"><i
                                   class="fa fa-holder toggle"></i>Heart
                                Failure Accreditation
                                Articles and Abstracts</a>
                        </li>
                        <li class="nav-item"><a
                               class="nav-link c_shade-n4 p-y_2"
                               href="/accreditation/services/HF/HFPublications"
                               target="_self"><i
                                   class="fa fa-holder toggle"></i>Heart
                                Failure Accreditation
                                Publications</a></li>
                        <li class="nav-item"><a
                               class="nav-link c_shade-n4 p-y_2"
                               href="/accreditation/services/HF/HFQuestions"
                               target="_self"><i
                                   class="fa fa-holder toggle"></i>Heart
                                Failure FAQs</a></li>
                        <li class="nav-item"><a
                               class="nav-link c_shade-n4 p-y_2"
                               href="/accreditation/services/HF/heart-failure-accreditation-training"
                               target="_self"><i
                                   class="fa fa-holder toggle"></i>Heart
                                Failure Accreditation
                                Training</a></li>
                    </ul>
                </li>
                <li class="nav-item parent"><a
                       class="h:bg_black-1 c_shade-n3 fa-caret-right icon-before nav-link p-y_2"
                       href="/accreditation/services/TCV"
                       target="_self"><i
                           class="fa fa-holder toggle"></i>Transcatheter
                        Valve Certification</a>
                    <ul
                        class="nav flex_column bg_black-2 font_n1 text-indent_3">
                        <li class="nav-item"><a
                               class="nav-link c_shade-n4 p-y_2"
                               href="/accreditation/services/TCV/TCV-certification-training"
                               target="_self"><i
                                   class="fa fa-holder toggle"></i>Transcatheter
                                Valve Certification
                                Training</a></li>
                    </ul>
                </li>
                <li class="nav-item"><a
                       class="h:bg_black-1 c_shade-n3 nav-link p-y_2"
                       href="/accreditation/services/C4Certification"
                       target="_self"><i
                           class="fa fa-holder toggle"></i>C4
                        Certification</a></li>
            </ul>
        </li>
        <li class="nav-item"><a
               class="a:c_secondary c_shade-n3 fa-caret-right h:bg_white-4 icon-before nav-link p-y_2"
               href="/accreditation/heartcare-center-recognition-program"
               target="_self"><i
                   class="fa fa-holder toggle"></i>HeartCARE
                Center Recognition Program</a></li>
        <li class="nav-item"><a
               class="a:c_secondary c_shade-n3 fa-caret-right h:bg_white-4 icon-before nav-link p-y_2"
               href="/accreditation/acc-quality-summit-2020"
               target="_self"><i
                   class="fa fa-holder toggle"></i>ACC
                Quality Summit</a></li>
        <li class="nav-item active current"><a
               class="a:c_secondary c_shade-n3 fa-caret-right h:bg_white-4 icon-before nav-link p-y_2"
               href="/accreditation/brand"
               target="_self"><i
                   class="fa fa-holder toggle"></i>Promote
                Your Achievement</a></li>
    </ul>
</nav>



Styleguide Recipes.Navs.SideNav
*/
/*
Side Nav Parent

Decoration classes with UC's to make the nav look like the primary level.

Markup:
<nav class="hidden-print nav-sub max-w-25">
	<ul class="bg_shade-5 br-b_1 br-t_1 br_secondary br_solid flex flex_column font_0 font_bold font_ui nav">
		<li data-nav="parent" class="nav-item parent">
			<a class="a:c_secondary c_shade-n3 fa-caret-right h:bg_white-4 icon-before nav-link p-y_2" target="_self">
				Link with children
			</a>
		</li>
		<li  class="nav-item">
			<a class="a:c_secondary c_shade-n3 h:bg_white-4 nav-link p-y_2" target="_self">
				Link without children
			</a>
		</li>
		<li data-nav="parent" class="nav-item parent active">
			<a class="a:c_secondary c_shade-n3 fa-caret-down h:bg_white-4 icon-before nav-link p-y_2"t arget="_self">
				Link that is active
			</a>
		</li>
	</ul>
</nav>

Weight: 1

Styleguide Recipes.Navs.Primary Level
*/
/*
Side Nav Child

Decoration classes with UC's to make the nav look like the child of the primary level.

Markup:
<nav class="hidden-print nav-sub max-w-25">
	<ul class="bg_shade-5 br-b_1 br-t_1 br_secondary br_solid flex flex_column font_0 font_bold font_ui nav">
		<li data-nav="parent" class="nav-item parent">
			<a class="a:c_secondary c_shade-n3 fa-caret-right h:bg_white-4 icon-before nav-link p-y_2" target="_self">
				Parent Link
			</a>
			<ul class="flex_column font_n1 nav text-indent_2 bg_shade-4">
				<li data-nav="parent" class="nav-item parent">
					<a class="nav-link p-y_2 c_shade-n3 h:bg_black-2 h:c_black" target="_self">
						Link with children
					</a>
				</li>
				<li  class="nav-item">
					<a class="a:c_secondary c_shade-n3 h:bg_white-4 nav-link p-y_2" target="_self">
						Link without children
					</a>
				</li>
				<li data-nav="parent" class="nav-item parent active">
					<a class="a:c_secondary c_shade-n3 fa-caret-down h:bg_white-4 icon-before nav-link p-y_2"t arget="_self">
						Link that is active
					</a>
				</li>
			</ul>
		</li>
	</ul>
</nav>

Weight: 2

Styleguide Recipes.Navs.Child Level
*/
/*
Side Nav Gran Child

Decoration classes with UC's to make the nav look like the child of the primary level.

Markup:
<nav class="hidden-print nav-sub max-w-25">
	<ul class="bg_shade-5 br-b_1 br-t_1 br_secondary br_solid flex flex_column font_0 font_bold font_ui nav">
		<li data-nav="parent" class="nav-item parent">
			<a class="nav-link p-y_2 c_shade-n3 h:bg_black-2 h:c_black" target="_self">
				Link with children
			</a>
		</li>
		<li  class="nav-item">
			<a class="nav-link p-y_2 c_shade-n3 h:bg_black-2 h:c_black" target="_self">
				Link without children
			</a>
		</li>
		<li data-nav="parent" class="nav-item parent active">
			<a class="nav-link p-y_2 c_shade-n3 h:bg_black-2 h:c_black" target="_self">
				Link that is active
			</a>
		</li>
	</ul>
</nav>

Weight: 3

Styleguide Recipes.Navs.Grand Child Level
*/
/*
Decorators

The Cvquality design employs a collection of unique decorators that are either accomplished by styles added on top of Arches or are collections of Utility Classes to make the effect. Bellow are the list of standardized decorators in the design. 


Styleguide Recipes.Decorator
*/
/*
Dividers

There are many dividers in the design. Bellow are the types and how to create them. 
| Style Combo     | Effect                                                            | Classes                       |
| --------------- | ----------------------------------------------------------------- | ----------------------------- |
| item-divider    | dividing items from eachother like between paragraphs.            | br_shade-4 br_dashed br_1 |
| group-divider   | A mid weight divider to show the differnce between grouped items. | br_accent br_dotted br_1      |
| section-divider | A strong division between Secotions of a page                     | br_primary br_solid br_2      |
| spacer          | No decoration but adds space between objects                      | br_0                          |



Markup:
<hr class="divider br_0 br-b_1 br_dotted br_accent">
<p>Est veniam anim duis ex irure occaecat velit voluptate. Exercitation incididunt ea esse duis voluptate esse veniam est officia id voluptate. In labore cupidatat do nulla anim labore. Esse ipsum velit sunt eu eiusmod fugiat sit culpa. Qui occaecat adipisicing minim minim minim ipsum esse ut id adipisicing duis duis. Esse esse ut amet ullamco. Est excepteur sunt laboris anim.</p>
<hr class="divider br_0 br-b_1 br_dashed br_shade-4">
<strong>There is a spacer between the two sentences</strong>
<p>Cupidatat id incididunt tempor magna consectetur laboris cillum laborum. Enim non reprehenderit eiusmod nisi velit veniam ea eiusmod esse aute proident. Laborum pariatur consequat cillum est officia exercitation esse et consectetur ea ad sint. Sunt esse do cupidatat laborum. Deserunt occaecat id tempor consectetur velit pariatur nulla fugiat sit laboris ipsum.</p>
<hr class="br_none"/>
<p>Est veniam anim duis ex irure occaecat velit voluptate. Exercitation incididunt ea esse duis voluptate esse veniam est officia id voluptate. In labore cupidatat do nulla anim labore. Esse ipsum velit sunt eu eiusmod fugiat sit culpa. Qui occaecat adipisicing minim minim minim ipsum esse ut id adipisicing duis duis. Esse esse ut amet ullamco. Est excepteur sunt laboris anim.</p>
<hr class=" br_0 br-b_1 br_primary br_solid">
<p>Est veniam anim duis ex irure occaecat velit voluptate. Exercitation incididunt ea esse duis voluptate esse veniam est officia id voluptate. In labore cupidatat do nulla anim labore. Esse ipsum velit sunt eu eiusmod fugiat sit culpa. Qui occaecat adipisicing minim minim minim ipsum esse ut id adipisicing duis duis. Esse esse ut amet ullamco. Est excepteur sunt laboris anim.</p>

Styleguide Recipes.Decorator.Dividers
*/
body {
  font-size: 16px;
  font-size: 1rem;
  font-family: var(--font-family_copy);
}

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

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

p {
  line-height: 1.35;
}

ul,
ol {
  line-height: 1.6;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

/*

 Basic Inputs

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

  Styleguide HTML.Inputs

*/
/*

  Text Inputs 

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

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

  Styleguide HTML.Inputs.Text

*/
/*

Inputs UC

Utility Class only build inputs

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

Weight:100

Styleguide HTML.Inputs.All

*/
/*

Table

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

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


Styleguide HTML.BasicTable

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

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

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

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

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

/*

Deprecated: Lorem Text Loader

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

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

Styleguide Recipes.InteractiveExtras.Text Placeholder Loader


*/
/*

Aspect Ratio

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

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

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

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

.icon-toggle_plus-minus-sub:before, .icon-toggle_check:before, .icon-toggle_check-circle:before, .icon-toggle_check-sqaure:before, .icon-toggle_arrow-circle:before, .icon-toggle_chevron-double-left-right:before, .icon-toggle_chevron-double-up-down:before, .icon-toggle_chevron-up-down:before, .icon-toggle_plus-minus:before, .icon-toggle_bars-times:before,.icon-toggle_plus-minus-sub:before, .icon-toggle_check:before, .icon-toggle_check-circle:before, .icon-toggle_check-sqaure:before, .icon-toggle_arrow-circle:before, .icon-toggle_chevron-double-left-right:before, .icon-toggle_chevron-double-up-down:before, .icon-toggle_chevron-up-down:before, .icon-toggle_plus-minus:before, .icon-toggle_bars-times:before {
  margin: 0 4px;
  margin: 0 0.25rem;
}

/*
Is Active Toggle 

Many momment there are needs for toggles of icon when the parent is in the state of `active`.  Used in tree navs, dropdowns, and collapsing areas. 

.icon-toggle_plus-minus 					-  Toggle between plus and minus square
.icon-toggle_chevron-up-down				- 	Toggle a chevron pointing up and then down.
.icon-toggle_chevron-double-up-down 		-  Toggle the double chevron to point up when active
.icon-toggle_chevron-double-left-right		- Toggle chevron left and right
.icon-toggle_arrow-circle 					-  Toggle the arrow to have a circle when active.
.icon-toggle_bars-times 					-  Toggle between bars and times
.icon-toggle_check-sqaure					-  Check Marks toggle on and off
.icon-toggle_check-circle 					-  Check Marks toggle on and off
.icon-toggle_check 							-  Check Marks toggle on and off

Markup:
<ul data-style="{{ modifier_class }}" class="ul_none m_0 p_0">
	<li class="m-t_1 is-active_toggle-function c_black a:c_white flex p-x_3 p-y_2 a:bg_primary font_1 bg_shade-2 ">	
	<i class="flex_none m-r_5 font_3 fas fa-fw {{ modifier_class }}"></i>
			<span class="flex_auto ">FA Solid {{ modifier_class }}</span>
			<span class="flex_shrink m-l_auto w_20 self_end a:_block display_none"> active </span>
	</li>
	<li class="m-t_1 is-active_toggle-function c_black a:c_white flex p-x_3 p-y_2 a:bg_primary font_1 bg_shade-2 ">	
	<i class="flex_none m-r_5 font_3 far  fa-fw {{ modifier_class }}"></i>
			<span class="flex_auto ">FA Regular {{ modifier_class }}</span>
			<span class="flex_shrink m-l_auto w_20 self_end a:_block display_none"> active </span>
	</li>
	<li class="m-t_1 is-active_toggle-function c_black a:c_white flex p-x_3 p-y_2 a:bg_primary font_1 bg_shade-2 ">	
	<i class="flex_none m-r_5 font_3 fal fa-fw {{ modifier_class }}"></i>
			<span class="flex_auto">FA Light {{ modifier_class }}</span>
			<span class="flex_shrink m-l_auto w_20 self_end a:_block display_none"> active </span>
	</li>
</ul>


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

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

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

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

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

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

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

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

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

/*
Social Links

The social links From the Footer.


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




Styleguide Recipes.Social Links

*/
/*
Social Links Monochrome

The social links can be restyled to be smaller.


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




Styleguide Recipes.Social Links.Mono Chrome

*/
/*
Social Links Smaller

The social links can be restyled to be smaller.


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


Styleguide Recipes.Social Links.Smaller

*/
/*
Stars

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

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

Weight:0

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



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

/*
 Design Base

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

 Weight: -1000

 Styleguide DesignBase
*/
/*

Fonts 

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

 Styleguide DesignBase.Fonts
*/
/*

Accent Roboto Slab

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

<div class=font_accent">
	<h2 class=font_accent group-divide-bottom font--name small-12">
		Roboto Slab
		<span class="sub-line">font-family: "Roboto Slab","Times New Roman","Lucida Bright",Georgia,"slab",serif</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: Lato

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

<div class="font_copy">
	<h2 class=" group-divide-bottom font--name small-12">
		"Lato"
		<span class="sub-line">font-family: ""Lato","Open Sans","system-ui",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">Lt<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: Lato

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

<div class="font_ui">
	<h2 class=" group-divide-bottom font--name small-12">
		"Lato"
		<span class="sub-line">font-family: ""Lato","Open Sans","system-ui",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">Lt<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)              -  #0088aa; primary
map-get($theme-palette, secondary)            -  #e87d1e; secondary
map-get($theme-palette, shade)           	  - #8a817f; shade
map-get($theme-palette, accent)               -  #ffc425;  accent
map-get($theme-palette, info)                 -  #a3988c; info
map-get($theme-palette, highlight)            -  #05aee5; highlight

Weight:-1000

Styleguide DesignBase.Colors
 */
/*

Action Colors  

Actionable colors used to respond to user inputs and messaging.

map-get($theme-palette, alert)                -  #990000; alert
map-get($theme-palette, warning)              -  #f4a122; 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: #00141a;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#00141a</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 0, 20, 26 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>0, 20, 26</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 192deg ,100%, 5% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>192deg ,100%, 5%</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: #002933;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#002933</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 0, 41, 51 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>0, 41, 51</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 192deg ,100%, 10% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>192deg ,100%, 10%</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: #004455;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#004455</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 0, 68, 85 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>0, 68, 85</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 192deg ,100%, 16.6666666667% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>192deg ,100%, 16.6666666667%</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: #005f77;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#005f77</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 0, 95, 119 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>0, 95, 119</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 192deg ,100%, 23.3333333333% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>192deg ,100%, 23.3333333333%</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: #007491;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#007491</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 0, 116, 145 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>0, 116, 145</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 192deg ,100%, 28.3333333333% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>192deg ,100%, 28.3333333333%</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: #0088aa;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#0088aa</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 0, 136, 170 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>0, 136, 170</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 192deg, 100%, 33.3333333333% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>192deg, 100%, 33.3333333333%</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: #00a3cc;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#00a3cc</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 0, 163, 204 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>0, 163, 204</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 192deg ,95%, 40% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>192deg ,95%, 40%</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: #00ccff;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#00ccff</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 0, 204, 255 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>0, 204, 255</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 192deg ,87.5%, 50% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>192deg ,87.5%, 50%</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: #55ddff;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#55ddff</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 85, 221, 255 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>85, 221, 255</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 192deg ,75%, 66.6666666667% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>192deg ,75%, 66.6666666667%</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: #aaeeff;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#aaeeff</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 170, 238, 255 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>170, 238, 255</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 192deg ,62.5%, 83.3333333333% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>192deg ,62.5%, 83.3333333333%</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: #ddf8ff;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#ddf8ff</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 221, 248, 255 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>221, 248, 255</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 192deg ,55%, 93.3333333333% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>192deg ,55%, 93.3333333333%</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: #241304;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#241304</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 36, 19, 4 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>36, 19, 4</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 28.2178217822deg ,83.0282258065%, 7.7058823529% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>28.2178217822deg ,83.0282258065%, 7.7058823529%</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: #472507;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#472507</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 71, 37, 7 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>71, 37, 7</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 28.2178217822deg ,82.75%, 15.4117647059% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>28.2178217822deg ,82.75%, 15.4117647059%</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: #773e0c;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#773e0c</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 119, 62, 12 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>119, 62, 12</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 28.2178217822deg ,82.3790322581%, 25.6862745098% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>28.2178217822deg ,82.3790322581%, 25.6862745098%</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: #a65711;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#a65711</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 166, 87, 17 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>166, 87, 17</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 28.2178217822deg ,82.0080645161%, 35.9607843137% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>28.2178217822deg ,82.0080645161%, 35.9607843137%</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: #ca6a15;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#ca6a15</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 202, 106, 21 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>202, 106, 21</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 28.2178217822deg ,81.7298387097%, 43.6666666667% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>28.2178217822deg ,81.7298387097%, 43.6666666667%</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: #e87d1e;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#e87d1e</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 232, 125, 30 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>232, 125, 30</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 28.2178217822deg, 81.4516129032%, 51.3725490196% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>28.2178217822deg, 81.4516129032%, 51.3725490196%</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: #ea8a35;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#ea8a35</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 234, 138, 53 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>234, 138, 53</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 28.2178217822deg ,77.3790322581%, 56.2352941176% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>28.2178217822deg ,77.3790322581%, 56.2352941176%</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: #ee9e56;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#ee9e56</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 238, 158, 86 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>238, 158, 86</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 28.2178217822deg ,71.2701612903%, 63.5294117647% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>28.2178217822deg ,71.2701612903%, 63.5294117647%</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: #f4be8f;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#f4be8f</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 244, 190, 143 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>244, 190, 143</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 28.2178217822deg ,61.0887096774%, 75.6862745098% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>28.2178217822deg ,61.0887096774%, 75.6862745098%</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: #f9dfc7;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#f9dfc7</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 249, 223, 199 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>249, 223, 199</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 28.2178217822deg ,50.9072580645%, 87.8431372549% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>28.2178217822deg ,50.9072580645%, 87.8431372549%</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: #fdf2e9;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#fdf2e9</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 253, 242, 233 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>253, 242, 233</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 28.2178217822deg ,44.7983870968%, 95.137254902% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>28.2178217822deg ,44.7983870968%, 95.137254902%</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: #151313;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#151313</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 21, 19, 19 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>21, 19, 19</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 10.9090909091deg ,12.6081632653%, 7.7941176471% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>10.9090909091deg ,12.6081632653%, 7.7941176471%</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: #2a2726;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#2a2726</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 42, 39, 38 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>42, 39, 38</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 10.9090909091deg ,11.1755102041%, 15.5882352941% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>10.9090909091deg ,11.1755102041%, 15.5882352941%</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: #45403f;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#45403f</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 69, 64, 63 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>69, 64, 63</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 10.9090909091deg ,9.2653061224%, 25.9803921569% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>10.9090909091deg ,9.2653061224%, 25.9803921569%</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: #615a59;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#615a59</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 97, 90, 89 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>97, 90, 89</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 10.9090909091deg ,7.3551020408%, 36.3725490196% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>10.9090909091deg ,7.3551020408%, 36.3725490196%</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: #766d6c;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#766d6c</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 118, 109, 108 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>118, 109, 108</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 10.9090909091deg ,5.9224489796%, 44.1666666667% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>10.9090909091deg ,5.9224489796%, 44.1666666667%</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: #8a817f;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#8a817f</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 138, 129, 127 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>138, 129, 127</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 10.9090909091deg, 4.4897959184%, 51.9607843137% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>10.9090909091deg, 4.4897959184%, 51.9607843137%</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: #968e8c;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#968e8c</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 150, 142, 140 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>150, 142, 140</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 10.9090909091deg ,4.2653061224%, 56.7647058824% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>10.9090909091deg ,4.2653061224%, 56.7647058824%</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: #a7a19f;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#a7a19f</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 167, 161, 159 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>167, 161, 159</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 10.9090909091deg ,3.9285714286%, 63.9705882353% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>10.9090909091deg ,3.9285714286%, 63.9705882353%</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: #c5c0bf;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#c5c0bf</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 197, 192, 191 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>197, 192, 191</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 10.9090909091deg ,3.3673469388%, 75.9803921569% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>10.9090909091deg ,3.3673469388%, 75.9803921569%</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: #e2e0df;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#e2e0df</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 226, 224, 223 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>226, 224, 223</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 10.9090909091deg ,2.806122449%, 87.9901960784% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>10.9090909091deg ,2.806122449%, 87.9901960784%</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: #f3f2f2;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#f3f2f2</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 243, 242, 242 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>243, 242, 242</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 10.9090909091deg ,2.4693877551%, 95.1960784314% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>10.9090909091deg ,2.4693877551%, 95.1960784314%</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: #281902;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#281902</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 40, 25, 2 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>40, 25, 2</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 36.2857142857deg ,91.3232758621%, 8.1764705882% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>36.2857142857deg ,91.3232758621%, 8.1764705882%</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: #4f3204;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#4f3204</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 79, 50, 4 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>79, 50, 4</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 36.2857142857deg ,91.1810344828%, 16.3529411765% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>36.2857142857deg ,91.1810344828%, 16.3529411765%</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: #845307;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#845307</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 132, 83, 7 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>132, 83, 7</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 36.2857142857deg ,90.9913793103%, 27.2549019608% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>36.2857142857deg ,90.9913793103%, 27.2549019608%</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: #b97409;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#b97409</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 185, 116, 9 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>185, 116, 9</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 36.2857142857deg ,90.8017241379%, 38.1568627451% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>36.2857142857deg ,90.8017241379%, 38.1568627451%</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: #e18d0b;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#e18d0b</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 225, 141, 11 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>225, 141, 11</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 36.2857142857deg ,90.6594827586%, 46.3333333333% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>36.2857142857deg ,90.6594827586%, 46.3333333333%</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: #f4a122;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#f4a122</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 244, 161, 34 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>244, 161, 34</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 36.2857142857deg, 90.5172413793%, 54.5098039216% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>36.2857142857deg, 90.5172413793%, 54.5098039216%</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: #f5aa38;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#f5aa38</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 245, 170, 56 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>245, 170, 56</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 36.2857142857deg ,85.9913793103%, 59.0588235294% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>36.2857142857deg ,85.9913793103%, 59.0588235294%</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: #f7b959;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#f7b959</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 247, 185, 89 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>247, 185, 89</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 36.2857142857deg ,79.2025862069%, 65.8823529412% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>36.2857142857deg ,79.2025862069%, 65.8823529412%</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: #fad091;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#fad091</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 250, 208, 145 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>250, 208, 145</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 36.2857142857deg ,67.8879310345%, 77.2549019608% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>36.2857142857deg ,67.8879310345%, 77.2549019608%</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: #fce8c8;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#fce8c8</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 252, 232, 200 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>252, 232, 200</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 36.2857142857deg ,56.5732758621%, 88.6274509804% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>36.2857142857deg ,56.5732758621%, 88.6274509804%</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: #fef6e9;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#fef6e9</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 254, 246, 233 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>254, 246, 233</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 36.2857142857deg ,49.7844827586%, 95.4509803922% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>36.2857142857deg ,49.7844827586%, 95.4509803922%</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: #170000;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#170000</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 23, 0, 0 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>23, 0, 0</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 0deg ,100%, 4.5% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>0deg ,100%, 4.5%</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: #2e0000;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#2e0000</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 46, 0, 0 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>46, 0, 0</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 0deg ,100%, 9% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>0deg ,100%, 9%</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: #4d0000;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#4d0000</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 77, 0, 0 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>77, 0, 0</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 0deg ,100%, 15% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>0deg ,100%, 15%</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: #6b0000;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#6b0000</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 107, 0, 0 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>107, 0, 0</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 0deg ,100%, 21% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>0deg ,100%, 21%</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: #820000;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#820000</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 130, 0, 0 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>130, 0, 0</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 0deg ,100%, 25.5% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>0deg ,100%, 25.5%</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: #990000;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#990000</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 153, 0, 0 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>153, 0, 0</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 0deg, 100%, 30% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>0deg, 100%, 30%</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: #bd0000;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#bd0000</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 189, 0, 0 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>189, 0, 0</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 0deg ,95%, 37% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>0deg ,95%, 37%</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: #f20000;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#f20000</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 242, 0, 0 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>242, 0, 0</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 0deg ,87.5%, 47.5% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>0deg ,87.5%, 47.5%</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: #ff4d4d;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#ff4d4d</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 255, 77, 77 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>255, 77, 77</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 0deg ,75%, 65% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>0deg ,75%, 65%</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: #ffa6a6;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#ffa6a6</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 255, 166, 166 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>255, 166, 166</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 0deg ,62.5%, 82.5% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>0deg ,62.5%, 82.5%</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: #ffdbdb;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#ffdbdb</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 255, 219, 219 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>255, 219, 219</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 0deg ,55%, 93% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>0deg ,55%, 93%</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: #2c2000;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#2c2000</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 44, 32, 0 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>44, 32, 0</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 43.7614678899deg ,100%, 8.5882352941% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>43.7614678899deg ,100%, 8.5882352941%</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: #584000;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#584000</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 88, 64, 0 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>88, 64, 0</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 43.7614678899deg ,100%, 17.1764705882% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>43.7614678899deg ,100%, 17.1764705882%</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: #926a00;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#926a00</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 146, 106, 0 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>146, 106, 0</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 43.7614678899deg ,100%, 28.6274509804% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>43.7614678899deg ,100%, 28.6274509804%</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: #cc9500;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#cc9500</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 204, 149, 0 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>204, 149, 0</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 43.7614678899deg ,100%, 40.0784313725% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>43.7614678899deg ,100%, 40.0784313725%</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: #f8b500;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#f8b500</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 248, 181, 0 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>248, 181, 0</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 43.7614678899deg ,100%, 48.6666666667% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>43.7614678899deg ,100%, 48.6666666667%</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: #ffc425;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#ffc425</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 255, 196, 37 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>255, 196, 37</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 43.7614678899deg, 100%, 57.2549019608% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>43.7614678899deg, 100%, 57.2549019608%</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: #ffca3b;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#ffca3b</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 255, 202, 59 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>255, 202, 59</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 43.7614678899deg ,95%, 61.5294117647% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>43.7614678899deg ,95%, 61.5294117647%</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: #ffd35c;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#ffd35c</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 255, 211, 92 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>255, 211, 92</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 43.7614678899deg ,87.5%, 67.9411764706% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>43.7614678899deg ,87.5%, 67.9411764706%</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: #ffe292;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#ffe292</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 255, 226, 146 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>255, 226, 146</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 43.7614678899deg ,75%, 78.6274509804% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>43.7614678899deg ,75%, 78.6274509804%</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: #fff0c9;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#fff0c9</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 255, 240, 201 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>255, 240, 201</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 43.7614678899deg ,62.5%, 89.3137254902% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>43.7614678899deg ,62.5%, 89.3137254902%</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: #fff9e9;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#fff9e9</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 255, 249, 233 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>255, 249, 233</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 43.7614678899deg ,55%, 95.7254901961% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>43.7614678899deg ,55%, 95.7254901961%</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: #011a22;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#011a22</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 1, 26, 34 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>1, 26, 34</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 194.7321428571deg ,96.0897435897%, 6.8823529412% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>194.7321428571deg ,96.0897435897%, 6.8823529412%</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: #023445;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#023445</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 2, 52, 69 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>2, 52, 69</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 194.7321428571deg ,96.0256410256%, 13.7647058824% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>194.7321428571deg ,96.0256410256%, 13.7647058824%</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: #035773;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#035773</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 3, 87, 115 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>3, 87, 115</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 194.7321428571deg ,95.9401709402%, 22.9411764706% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>194.7321428571deg ,95.9401709402%, 22.9411764706%</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: #047aa0;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#047aa0</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 4, 122, 160 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>4, 122, 160</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 194.7321428571deg ,95.8547008547%, 32.1176470588% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>194.7321428571deg ,95.8547008547%, 32.1176470588%</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: #0494c3;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#0494c3</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 4, 148, 195 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>4, 148, 195</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 194.7321428571deg ,95.7905982906%, 39% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>194.7321428571deg ,95.7905982906%, 39%</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: #05aee5;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#05aee5</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 5, 174, 229 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>5, 174, 229</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 194.7321428571deg, 95.7264957265%, 45.8823529412% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>194.7321428571deg, 95.7264957265%, 45.8823529412%</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: #0cbffa;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#0cbffa</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 12, 191, 250 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>12, 191, 250</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 194.7321428571deg ,90.9401709402%, 51.2941176471% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>194.7321428571deg ,90.9401709402%, 51.2941176471%</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: #34cafb;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#34cafb</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 52, 202, 251 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>52, 202, 251</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 194.7321428571deg ,83.7606837607%, 59.4117647059% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>194.7321428571deg ,83.7606837607%, 59.4117647059%</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: #78dcfc;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#78dcfc</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 120, 220, 252 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>120, 220, 252</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 194.7321428571deg ,71.7948717949%, 72.9411764706% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>194.7321428571deg ,71.7948717949%, 72.9411764706%</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: #bbedfe;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#bbedfe</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 187, 237, 254 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>187, 237, 254</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 194.7321428571deg ,59.8290598291%, 86.4705882353% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>194.7321428571deg ,59.8290598291%, 86.4705882353%</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: #e4f8fe;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#e4f8fe</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 228, 248, 254 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>228, 248, 254</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 194.7321428571deg ,52.6495726496%, 94.5882352941% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>194.7321428571deg ,52.6495726496%, 94.5882352941%</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: #0088aa*/
/* $xd-color_primary-n5: #00141a*/
/* $xd-color_primary-n4: #002933*/
/* $xd-color_primary-n3: #004455*/
/* $xd-color_primary-n2: #005f77*/
/* $xd-color_primary-n1: #007491*/
/* $xd-color_primary-1: #00a3cc*/
/* $xd-color_primary-2: #00ccff*/
/* $xd-color_primary-3: #55ddff*/
/* $xd-color_primary-4: #aaeeff*/
/* $xd-color_primary-5: #ddf8ff*/
/* $xd-color_secondary-0: #e87d1e*/
/* $xd-color_secondary-n5: #241304*/
/* $xd-color_secondary-n4: #472507*/
/* $xd-color_secondary-n3: #773e0c*/
/* $xd-color_secondary-n2: #a65711*/
/* $xd-color_secondary-n1: #ca6a15*/
/* $xd-color_secondary-1: #ea8a35*/
/* $xd-color_secondary-2: #ee9e56*/
/* $xd-color_secondary-3: #f4be8f*/
/* $xd-color_secondary-4: #f9dfc7*/
/* $xd-color_secondary-5: #fdf2e9*/
/* $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: #8a817f*/
/* $xd-color_shade-n5: #151313*/
/* $xd-color_shade-n4: #2a2726*/
/* $xd-color_shade-n3: #45403f*/
/* $xd-color_shade-n2: #615a59*/
/* $xd-color_shade-n1: #766d6c*/
/* $xd-color_shade-1: #968e8c*/
/* $xd-color_shade-2: #a7a19f*/
/* $xd-color_shade-3: #c5c0bf*/
/* $xd-color_shade-4: #e2e0df*/
/* $xd-color_shade-5: #f3f2f2*/
/* $xd-color_warning-0: #f4a122*/
/* $xd-color_warning-n5: #281902*/
/* $xd-color_warning-n4: #4f3204*/
/* $xd-color_warning-n3: #845307*/
/* $xd-color_warning-n2: #b97409*/
/* $xd-color_warning-n1: #e18d0b*/
/* $xd-color_warning-1: #f5aa38*/
/* $xd-color_warning-2: #f7b959*/
/* $xd-color_warning-3: #fad091*/
/* $xd-color_warning-4: #fce8c8*/
/* $xd-color_warning-5: #fef6e9*/
/* $xd-color_alert-0: #990000*/
/* $xd-color_alert-n5: #170000*/
/* $xd-color_alert-n4: #2e0000*/
/* $xd-color_alert-n3: #4d0000*/
/* $xd-color_alert-n2: #6b0000*/
/* $xd-color_alert-n1: #820000*/
/* $xd-color_alert-1: #bd0000*/
/* $xd-color_alert-2: #f20000*/
/* $xd-color_alert-3: #ff4d4d*/
/* $xd-color_alert-4: #ffa6a6*/
/* $xd-color_alert-5: #ffdbdb*/
/* $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: #ffc425*/
/* $xd-color_accent-n5: #2c2000*/
/* $xd-color_accent-n4: #584000*/
/* $xd-color_accent-n3: #926a00*/
/* $xd-color_accent-n2: #cc9500*/
/* $xd-color_accent-n1: #f8b500*/
/* $xd-color_accent-1: #ffca3b*/
/* $xd-color_accent-2: #ffd35c*/
/* $xd-color_accent-3: #ffe292*/
/* $xd-color_accent-4: #fff0c9*/
/* $xd-color_accent-5: #fff9e9*/
/* $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: #05aee5*/
/* $xd-color_highlight-n5: #011a22*/
/* $xd-color_highlight-n4: #023445*/
/* $xd-color_highlight-n3: #035773*/
/* $xd-color_highlight-n2: #047aa0*/
/* $xd-color_highlight-n1: #0494c3*/
/* $xd-color_highlight-1: #0cbffa*/
/* $xd-color_highlight-2: #34cafb*/
/* $xd-color_highlight-3: #78dcfc*/
/* $xd-color_highlight-4: #bbedfe*/
/* $xd-color_highlight-5: #e4f8fe*/
/* $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: #0088aa;
}

/*

Basic HTML

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

Weight: -100

Styleguide HTML
*/
/*

Reading Typography

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

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

Weight: -9

HideCodeBlock: display_none 

Styleguide HTML.Typography

*/
/*

Sample Typography

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

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

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

Weight: -9

HideCodeBlock: display_none 

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

Styleguide HTML.Typography.Sample

*/
/*

Basic Typography

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


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

Weight: -1000

HideCodeBlock: display_none 

MarkupWrapperClasses: max-w_65

Styleguide HTML.Unstyled

*/
/*
ACC Article

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

MarkupWrapperClasses: max-w_60

HideCodeBlock: display_none 

Weight:100

Styleguide HTML.RealArticle

*/
/*

Links States

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

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


MarkupWrapperClasses: reading-typography

Weight:100

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

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

/*

Bootstrap

Bootstrap 5 is a complete UI framework with many features. Please familiarize yourself with bootstrap framework as you build. It will give you access to grid, forms and other UI items. https://getbootstrap.com/

Weight: -50

Styleguide  Bootstrap
*/
/*

Typography

The collection of typography when using the bootstrap foundation of arches.

Markup:
<article class="m-y_3" id="typography"><div><div class="bd-example"><p class="display-1">Display 1</p><p class="display-2">Display 2</p><p class="display-3">Display 3</p><p class="display-4">Display 4</p><p class="display-5">Display 5</p><p class="display-6">Display 6</p></div><div class="bd-example"><p class="h1">Heading 1</p><p class="h2">Heading 2</p><p class="h3">Heading 3</p><p class="h4">Heading 4</p><p class="h5">Heading 5</p><p class="h6">Heading 6</p></div><div class="bd-example"><p class="lead">This is a lead paragraph. It stands out from regular paragraphs.</p></div><div class="bd-example"><p>You can use the mark tag to <mark>highlight</mark> text.</p><p><del>This line of text is meant to be treated as deleted text.</del></p><p><s>This line of text is meant to be treated as no longer accurate.</s></p><p><ins>This line of text is meant to be treated as an addition to the document.</ins></p><p><u>This line of text will render as underlined.</u></p><p><small>This line of text is meant to be treated as fine print.</small></p><p><strong>This line rendered as bold text.</strong></p><p><em>This line rendered as italicized text.</em></p></div><div class="bd-example"><blockquote class="blockquote"><p>A well-known quote, contained in a blockquote element.</p><footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer></blockquote></div><div class="bd-example"><ul class="list-unstyled"><li>This is a list.</li><li>It appears completely unstyled.</li><li>Structurally, it's still a list.</li><li>However, this style only applies to immediate child elements.</li><li>Nested lists:<ul><li>are unaffected by this style</li><li>will still show a bullet</li><li>and have appropriate left margin</li></ul></li><li>This may still come in handy in some situations.</li></ul></div><div class="bd-example"><ul class="list-inline"><li class="list-inline-item">This is a list item.</li><li class="list-inline-item">And another one.</li><li class="list-inline-item">But they're displayed inline.</li></ul></div></div></article><article class="m-y_3" id="images"><div class="bd-heading sticky-xl-top m-y_3 bg_white p_3 br-b_1 br_solid br_black-1 shadow_overlap-light m-x_n4 bg_white z_3 p-b_3 self_start mt-5 m-b_3 mt-xl-0 mb-xl-2"><h3>Images</h3><a class="d-flex align-items-center" href="https://getbootstrap.com/docs/5.0/content/images/">Documentation</a></div><div><div class="bd-example"><svg class="bd-placeholder-img bd-placeholder-img-lg img-fluid" width="100%" height="250" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Responsive image" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96"></rect><text x="50%" y="50%" fill="#dee2e6" dy=".3em">Responsive image</text></svg></div><div class="bd-example"><svg class="bd-placeholder-img img-thumbnail" width="200" height="200" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera: 200x200" preserveAspectRatio="xMidYMid slice" focusable="false"><title>A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera</title><rect width="100%" height="100%" fill="#868e96"></rect><text x="50%" y="50%" fill="#dee2e6" dy=".3em">200x200</text></svg></div></div></article>

Weight: 100

Styleguide  Bootstrap.Typography
*/
/*

Tables

The collection of modifications you can do with tables out of the box from Bootstrap Arches.

Markup:
<article class="m-y_3" id="tables"><div class="bd-heading sticky-xl-top m-y_3 bg_white p_3 br-b_1 br_solid br_black-1 shadow_overlap-light m-x_n4 bg_white z_3 p-b_3 self_start mt-5 m-b_3 mt-xl-0 mb-xl-2"><h3>Tables</h3><a class="d-flex align-items-center" href="https://getbootstrap.com/docs/5.0/content/tables/">Documentation</a></div><div><div class="bd-example"><table class="table table-striped"><thead><tr><th scope="col">#</th><th scope="col">First</th><th scope="col">Last</th><th scope="col">Handle</th></tr></thead><tbody><tr><th scope="row">1</th><td>Mark</td><td>Otto</td><td>@mdo</td></tr><tr><th scope="row">2</th><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><th scope="row">3</th><td colspan="2">Larry the Bird</td><td>@twitter</td></tr></tbody></table></div><div class="bd-example"><table class="table table-dark table-borderless"><thead><tr><th scope="col">#</th><th scope="col">First</th><th scope="col">Last</th><th scope="col">Handle</th></tr></thead><tbody><tr><th scope="row">1</th><td>Mark</td><td>Otto</td><td>@mdo</td></tr><tr><th scope="row">2</th><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><th scope="row">3</th><td colspan="2">Larry the Bird</td><td>@twitter</td></tr></tbody></table></div><div class="bd-example"><table class="table table-hover"><thead><tr><th scope="col">Class</th><th scope="col">Heading</th><th scope="col">Heading</th></tr></thead><tbody><tr><th scope="row">Default</th><td>Cell</td><td>Cell</td></tr><tr class="table-primary"><th scope="row">Primary</th><td>Cell</td><td>Cell</td></tr><tr class="table-secondary"><th scope="row">Secondary</th><td>Cell</td><td>Cell</td></tr><tr class="table-success"><th scope="row">Success</th><td>Cell</td><td>Cell</td></tr><tr class="table-alert"><th scope="row">alert</th><td>Cell</td><td>Cell</td></tr><tr class="table-warning"><th scope="row">Warning</th><td>Cell</td><td>Cell</td></tr><tr class="table-info"><th scope="row">Info</th><td>Cell</td><td>Cell</td></tr><tr class="table-light"><th scope="row">Light</th><td>Cell</td><td>Cell</td></tr><tr class="table-dark"><th scope="row">Dark</th><td>Cell</td><td>Cell</td></tr></tbody></table></div><div class="bd-example"><table class="table table-sm table-bordered"><thead><tr><th scope="col">#</th><th scope="col">First</th><th scope="col">Last</th><th scope="col">Handle</th></tr></thead><tbody><tr><th scope="row">1</th><td>Mark</td><td>Otto</td><td>@mdo</td></tr><tr><th scope="row">2</th><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><th scope="row">3</th><td colspan="2">Larry the Bird</td><td>@twitter</td></tr></tbody></table></div></div></article><article class="m-y_3" id="figures"><div class="bd-heading sticky-xl-top m-y_3 bg_white p_3 br-b_1 br_solid br_black-1 shadow_overlap-light m-x_n4 bg_white z_3 p-b_3 self_start mt-5 m-b_3 mt-xl-0 mb-xl-2"><h3>Figures</h3><a class="d-flex align-items-center" href="https://getbootstrap.com/docs/5.0/content/figures/">Documentation</a></div><div><div class="bd-example"><figure class="figure"><svg class="bd-placeholder-img figure-img img-fluid rounded" width="400" height="300" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: 400x300" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96"></rect><text x="50%" y="50%" fill="#dee2e6" dy=".3em">400x300</text></svg><figcaption class="figure-caption">A caption for the above image.</figcaption></figure></div></div></article>



Weight: 500

Styleguide  Bootstrap.Table
*/
/*
Forms

Out of the box bootstrap forms. 

Markup:
<article class="m-y_3"
         id="overview">
    <div
         class="bd-heading sticky-xl-top m-y_3 bg_white p_3 br-b_1 br_solid br_black-1 shadow_overlap-light m-x_n4 align-self-start mt-5 m-b_3 mt-xl-0 mb-xl-2">
        <h3>Overview</h3><a
           class="d-flex align-items-center"
           target="_blank"
           href="https://getbootstrap.com/docs/5.0/forms/overview/">Documentation</a>
    </div>
    <div>
        <div class="bd-example">
            <form>
                <div class="m-b_3"><label
                           for="exampleInputEmail1"
                           class="form-label">Email
                        address</label> <input type="email"
                           class="form-control"
                           id="exampleInputEmail1"
                           aria-describedby="emailHelp">
                    <div id="emailHelp"
                         class="form-text">We'll never share
                        your email with anyone else.</div>
                </div>
                <div class="m-b_3"><label
                           for="exampleInputPassword1"
                           class="form-label">Password</label>
                    <input type="password"
                           class="form-control"
                           id="exampleInputPassword1"></div>
                <div class="m-b_3 form-check"><input
                           type="checkbox"
                           class="form-check-input"
                           id="exampleCheck1"> <label
                           class="form-check-label"
                           for="exampleCheck1">Check me
                        out</label></div>
                <fieldset class="m-b_3">
                    <legend>Radios buttons</legend>
                    <div class="form-check"><input
                               type="radio"
                               name="radios"
                               class="form-check-input"
                               id="exampleRadio1"> <label
                               class="form-check-label"
                               for="exampleRadio1">Default
                            radio</label></div>
                    <div class="m-b_3 form-check"><input
                               type="radio"
                               name="radios"
                               class="form-check-input"
                               id="exampleRadio2"> <label
                               class="form-check-label"
                               for="exampleRadio2">Another
                            radio</label></div>
                </fieldset>
                <div class="m-b_3"><label class="form-label"
                           for="customFile">Upload</label>
                    <input type="file"
                           class="form-control"
                           id="customFile"></div>
                <div class="m-b_3 form-check form-switch">
                    <input class="form-check-input"
                           type="checkbox"
                           id="flexSwitchCheckChecked"
                           checked> <label
                           class="form-check-label"
                           for="flexSwitchCheckChecked">Checked
                        switch checkbox input</label></div>
                <div class="m-b_3"><label for="customRange3"
                           class="form-label">Example
                        range</label> <input type="range"
                           class="form-range"
                           min="0"
                           max="5"
                           step="0.5"
                           id="customRange3"></div><button
                        type="submit"
                        class="btn btn-primary">Submit</button>
            </form>
        </div>
    </div>
</article>
<article class="m-y_3"
         id="disabled-forms">
    <div
         class="bd-heading sticky-xl-top m-y_3 bg_white p_3 br-b_1 br_solid br_black-1 shadow_overlap-light m-x_n4 align-self-start mt-5 m-b_3 mt-xl-0 mb-xl-2">
        <h3>Disabled forms</h3><a
           class="d-flex align-items-center"
           target="_blank"
           href="https://getbootstrap.com/docs/5.0/forms/overview/#disabled-forms">Documentation</a>
    </div>
    <div>
        <div class="bd-example">
            <form>
                <fieldset disabled
                          aria-label="Disabled fieldset example">
                    <div class="m-b_3"><label
                               for="disabledTextInput"
                               class="form-label">Disabled
                            input</label> <input type="text"
                               id="disabledTextInput"
                               class="form-control"
                               placeholder="Disabled input">
                    </div>
                    <div class="m-b_3"><label
                               for="disabledSelect"
                               class="form-label">Disabled
                            select menu</label> <select
                                id="disabledSelect"
                                class="form-select">
                            <option>Disabled select</option>
                        </select></div>
                    <div class="m-b_3">
                        <div class="form-check"><input
                                   class="form-check-input"
                                   type="checkbox"
                                   id="disabledFieldsetCheck"
                                   disabled> <label
                                   class="form-check-label"
                                   for="disabledFieldsetCheck">Can't
                                check this</label></div>
                    </div>
                    <fieldset class="m-b_3">
                        <legend>Disabled radios buttons
                        </legend>
                        <div class="form-check"><input
                                   type="radio"
                                   name="radios"
                                   class="form-check-input"
                                   id="disabledRadio1"
                                   disabled> <label
                                   class="form-check-label"
                                   for="disabledRadio1">Disabled
                                radio</label></div>
                        <div class="m-b_3 form-check"><input
                                   type="radio"
                                   name="radios"
                                   class="form-check-input"
                                   id="disabledRadio2"
                                   disabled> <label
                                   class="form-check-label"
                                   for="disabledRadio2">Another
                                radio</label></div>
                    </fieldset>
                    <div class="m-b_3"><label
                               class="form-label"
                               for="disabledCustomFile">Upload</label>
                        <input type="file"
                               class="form-control"
                               id="disabledCustomFile"
                               disabled></div>
                    <div
                         class="m-b_3 form-check form-switch">
                        <input class="form-check-input"
                               type="checkbox"
                               id="disabledSwitchCheckChecked"
                               checked
                               disabled> <label
                               class="form-check-label"
                               for="disabledSwitchCheckChecked">Disabled
                            checked switch checkbox
                            input</label></div>
                    <div class="m-b_3"><label
                               for="disabledRange"
                               class="form-label">Disabled
                            range</label> <input
                               type="range"
                               class="form-range"
                               min="0"
                               max="5"
                               step="0.5"
                               id="disabledRange"></div>
                    <button type="submit"
                            class="btn btn-primary">Submit</button>
                </fieldset>
            </form>
        </div>
    </div>
</article>
<article class="m-y_3"
         id="sizing">
    <div
         class="bd-heading sticky-xl-top m-y_3 bg_white p_3 br-b_1 br_solid br_black-1 shadow_overlap-light m-x_n4 align-self-start mt-5 m-b_3 mt-xl-0 mb-xl-2">
        <h3>Sizing</h3><a class="d-flex align-items-center"
           target="_blank"
           href="https://getbootstrap.com/docs/5.0/forms/form-control/#sizing">Documentation</a>
    </div>
    <div>
        <div class="bd-example">
            <div class="m-b_3"><input
                       class="form-control form-control-lg"
                       type="text"
                       placeholder=".form-control-lg"
                       aria-label=".form-control-lg example">
            </div>
            <div class="m-b_3"><select
                        class="form-select form-select-lg m-b_3"
                        aria-label=".form-select-lg example">
                    <option selected>Open this select menu
                    </option>
                    <option value="1">One</option>
                    <option value="2">Two</option>
                    <option value="3">Three</option>
                </select></div>
            <div class="m-b_3"><input type="file"
                       class="form-control form-control-lg"
                       aria-label="Large file input example">
            </div>
        </div>
        <div class="bd-example">
            <div class="m-b_3"><input
                       class="form-control form-control-sm"
                       type="text"
                       placeholder=".form-control-sm"
                       aria-label=".form-control-sm example">
            </div>
            <div class="m-b_3"><select
                        class="form-select form-select-sm"
                        aria-label=".form-select-sm example">
                    <option selected>Open this select menu
                    </option>
                    <option value="1">One</option>
                    <option value="2">Two</option>
                    <option value="3">Three</option>
                </select></div>
            <div class="m-b_3"><input type="file"
                       class="form-control form-control-sm"
                       aria-label="Small file input example">
            </div>
        </div>
    </div>
</article>
<article class="m-y_3"
         id="input-group">
    <div
         class="bd-heading sticky-xl-top m-y_3 bg_white p_3 br-b_1 br_solid br_black-1 shadow_overlap-light m-x_n4 align-self-start mt-5 m-b_3 mt-xl-0 mb-xl-2">
        <h3>Input group</h3><a
           class="d-flex align-items-center"
           target="_blank"
           href="https://getbootstrap.com/docs/5.0/forms/input-group/">Documentation</a>
    </div>
    <div>
        <div class="bd-example">
            <div class="input-group m-b_3"><span
                      class="input-group-text"
                      id="basic-addon1">@</span> <input
                       type="text"
                       class="form-control"
                       placeholder="Username"
                       aria-label="Username"
                       aria-describedby="basic-addon1">
            </div>
            <div class="input-group m-b_3"><input type="text"
                       class="form-control"
                       placeholder="Recipient's username"
                       aria-label="Recipient's username"
                       aria-describedby="basic-addon2">
                <span class="input-group-text"
                      id="basic-addon2">@example.com</span>
            </div><label for="basic-url"
                   class="form-label">Your vanity
                URL</label>
            <div class="input-group m-b_3"><span
                      class="input-group-text"
                      id="basic-addon3">https://example.com/users/</span>
                <input type="text"
                       class="form-control"
                       id="basic-url"
                       aria-describedby="basic-addon3">
            </div>
            <div class="input-group m-b_3"><span
                      class="input-group-text">$</span>
                <input type="text"
                       class="form-control"
                       aria-label="Amount (to the nearest dollar)">
                <span class="input-group-text">.00</span>
            </div>
            <div class="input-group"><span
                      class="input-group-text">With
                    textarea</span> <textarea
                          class="form-control"
                          aria-label="With textarea"></textarea>
            </div>
        </div>
    </div>
</article>
<article class="m-y_3"
         id="floating-labels">
    <div
         class="bd-heading sticky-xl-top m-y_3 bg_white p_3 br-b_1 br_solid br_black-1 shadow_overlap-light m-x_n4 align-self-start mt-5 m-b_3 mt-xl-0 mb-xl-2">
        <h3>Floating labels</h3><a
           class="d-flex align-items-center"
           target="_blank"
           href="https://getbootstrap.com/docs/5.0/forms/floating-labels/">Documentation</a>
    </div>
    <div>
        <div class="bd-example">
            <form>
                <div class="form-floating m-b_3 input-group-lg"><input
                           type="email"
                           class="form-control"
                           id="floatingInput"
                           placeholder="name@example.com">
                    <label for="floatingInput">Email
                        address</label></div>
                <div class="form-floating"><input
                           type="password"
                           class="form-control"
                           id="floatingPassword"
                           placeholder="Password"> <label
                           for="floatingPassword">Password</label>
                </div>
            </form>
        </div>
    </div>
</article>
<article class="m-y_3"
         id="validation">
    <div
         class="bd-heading sticky-xl-top m-y_3 bg_white p_3 br-b_1 br_solid br_black-1 shadow_overlap-light m-x_n4 align-self-start mt-5 m-b_3 mt-xl-0 mb-xl-2">
        <h3>Validation</h3><a
           class="d-flex align-items-center"
           target="_blank"
           href="https://getbootstrap.com/docs/5.0/forms/validation/">Documentation</a>
    </div>
    <div>
        <div class="bd-example">
            <form class="row g-3">
                <div class="col-md-4"><label
                           for="validationServer01"
                           class="form-label">First
                        name</label> <input type="text"
                           class="form-control is-valid"
                           id="validationServer01"
                           value="Mark"
                           required>
                    <div class="valid-feedback">Looks good!
                    </div>
                </div>
                <div class="col-md-4"><label
                           for="validationServer02"
                           class="form-label">Last
                        name</label> <input type="text"
                           class="form-control is-valid"
                           id="validationServer02"
                           value="Otto"
                           required>
                    <div class="valid-feedback">Looks good!
                    </div>
                </div>
                <div class="col-md-4"><label
                           for="validationServerUsername"
                           class="form-label">Username</label>
                    <div class="input-group has-validation">
                        <span class="input-group-text"
                              id="inputGroupPrepend3">@</span>
                        <input type="text"
                               class="form-control is-invalid"
                               id="validationServerUsername"
                               aria-describedby="inputGroupPrepend3"
                               required>
                        <div class="invalid-feedback">Please
                            choose a username.</div>
                    </div>
                </div>
                <div class="col-md-6 input-group-lg"><label
                           for="validationServer03"
                           class="form-label">City</label>
                    <input type="text"
                           class="form-control is-invalid"
                           id="validationServer03"
                           required>
                    <div class="invalid-feedback">Please
                        provide a valid city.</div>
                </div>
                <div class="col-md-3"><label
                           for="validationServer04"
                           class="form-label">State</label>
                    <select class="form-select is-invalid"
                            id="validationServer04"
                            required>
                        <option selected
                                disabled
                                value="">Choose...</option>
                        <option>...</option>
                    </select>
                    <div class="invalid-feedback">Please
                        select a valid state.</div>
                </div>
                <div class="col-md-3"><label
                           for="validationServer05"
                           class="form-label">Zip</label>
                    <input type="text"
                           class="form-control is-invalid"
                           id="validationServer05"
                           required>
                    <div class="invalid-feedback">Please
                        provide a valid zip.</div>
                </div>
                <div class="col-12">
                    <div class="form-check"><input
                               class="form-check-input is-invalid"
                               type="checkbox"
                               value=""
                               id="invalidCheck3"
                               required> <label
                               class="form-check-label"
                               for="invalidCheck3">Agree to
                            terms and conditions</label>
                        <div class="invalid-feedback">You
                            must agree before submitting.
                        </div>
                    </div>
                </div>
                <div class="col-12"><button
                            class="btn btn-primary"
                            type="submit">Submit
                        form</button></div>
            </form>
        </div>
    </div>
</article>


Weight: 800

Styleguide  Bootstrap.Forms
*/
/*
Components 

Out of the box html components from bootstrap

Markup:
<section id="components">
    <article class="m-y_3"
             id="accordion">
        <div
             class="bd-heading sticky-xl-top m-y_3 bg_white p_3 br-b_1 br_solid br_black-1 shadow_overlap-light m-x_n4 align-self-start m-t_5 m-b_3 ">
            <h3>Accordion</h3><a
               class="d-flex align-items-center"
               target="_blank"
               href="https://getbootstrap.com/docs/5.0/components/accordion/">Documentation</a>
        </div>
        <div>
            <div class="bd-example">
                <div class="accordion"
                     id="accordionExample">
                    <div class="accordion-item">
                        <h4 class="accordion-header"
                            id="headingOne"><button
                                    class="accordion-button"
                                    type="button"
                                    data-bs-toggle="collapse"
                                    data-bs-target="#collapseOne"
                                    aria-expanded="true"
                                    aria-controls="collapseOne">Accordion
                                Item #1</button></h4>
                        <div id="collapseOne"
                             class="accordion-collapse collapse show"
                             aria-labelledby="headingOne"
                             data-bs-parent="#accordionExample">
                            <div class="accordion-body">
                                <strong>This is the first
                                    item's accordion
                                    body.</strong> It is
                                hidden by default, until the
                                collapse plugin adds the
                                appropriate classes that we
                                use to style each element.
                                These classes control the
                                overall appearance, as well
                                as the showing and hiding
                                via CSS transitions. You can
                                modify any of this with
                                custom CSS or overriding our
                                default variables. It's also
                                worth noting that just about
                                any HTML can go within the
                                <code>.accordion-body</code>,
                                though the transition does
                                limit overflow.</div>
                        </div>
                    </div>
                    <div class="accordion-item">
                        <h4 class="accordion-header"
                            id="headingTwo"><button
                                    class="accordion-button collapsed"
                                    type="button"
                                    data-bs-toggle="collapse"
                                    data-bs-target="#collapseTwo"
                                    aria-expanded="false"
                                    aria-controls="collapseTwo">Accordion
                                Item #2</button></h4>
                        <div id="collapseTwo"
                             class="accordion-collapse collapse"
                             aria-labelledby="headingTwo"
                             data-bs-parent="#accordionExample">
                            <div class="accordion-body">
                                <strong>This is the second
                                    item's accordion
                                    body.</strong> It is
                                hidden by default, until the
                                collapse plugin adds the
                                appropriate classes that we
                                use to style each element.
                                These classes control the
                                overall appearance, as well
                                as the showing and hiding
                                via CSS transitions. You can
                                modify any of this with
                                custom CSS or overriding our
                                default variables. It's also
                                worth noting that just about
                                any HTML can go within the
                                <code>.accordion-body</code>,
                                though the transition does
                                limit overflow.</div>
                        </div>
                    </div>
                    <div class="accordion-item">
                        <h4 class="accordion-header"
                            id="headingThree"><button
                                    class="accordion-button collapsed"
                                    type="button"
                                    data-bs-toggle="collapse"
                                    data-bs-target="#collapseThree"
                                    aria-expanded="false"
                                    aria-controls="collapseThree">Accordion
                                Item #3</button></h4>
                        <div id="collapseThree"
                             class="accordion-collapse collapse"
                             aria-labelledby="headingThree"
                             data-bs-parent="#accordionExample">
                            <div class="accordion-body">
                                <strong>This is the third
                                    item's accordion
                                    body.</strong> It is
                                hidden by default, until the
                                collapse plugin adds the
                                appropriate classes that we
                                use to style each element.
                                These classes control the
                                overall appearance, as well
                                as the showing and hiding
                                via CSS transitions. You can
                                modify any of this with
                                custom CSS or overriding our
                                default variables. It's also
                                worth noting that just about
                                any HTML can go within the
                                <code>.accordion-body</code>,
                                though the transition does
                                limit overflow.</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </article>
    <article class="m-y_3"
             id="alerts">
        <div
             class="bd-heading sticky-xl-top m-y_3 bg_white p_3 br-b_1 br_solid br_black-1 shadow_overlap-light m-x_n4 align-self-start m-t_5 m-b_3 ">
            <h3>Alerts</h3><a
               class="d-flex align-items-center"
               target="_blank"
               href="https://getbootstrap.com/docs/5.0/components/alerts/">Documentation</a>
        </div>
        <div>
            <div class="bd-example">
                <div class="alert alert-primary alert-dismissible fade show"
                     role="alert">A simple primary alert
                    with <a href="#"
                       class="alert-link">an example
                        link</a>. Give it a click if you
                    like. <button type="button"
                            class="btn-close"
                            data-bs-dismiss="alert"
                            aria-label="Close"></button>
                </div>
                <div class="alert alert-secondary alert-dismissible fade show"
                     role="alert">A simple secondary alert
                    with <a href="#"
                       class="alert-link">an example
                        link</a>. Give it a click if you
                    like. <button type="button"
                            class="btn-close"
                            data-bs-dismiss="alert"
                            aria-label="Close"></button>
                </div>
                <div class="alert alert-success alert-dismissible fade show"
                     role="alert">A simple success alert
                    with <a href="#"
                       class="alert-link">an example
                        link</a>. Give it a click if you
                    like. <button type="button"
                            class="btn-close"
                            data-bs-dismiss="alert"
                            aria-label="Close"></button>
                </div>
                <div class="alert alert-alert alert-dismissible fade show"
                     role="alert">A simple alert alert with
                    <a href="#"
                       class="alert-link">an example
                        link</a>. Give it a click if you
                    like. <button type="button"
                            class="btn-close"
                            data-bs-dismiss="alert"
                            aria-label="Close"></button>
                </div>
                <div class="alert alert-warning alert-dismissible fade show"
                     role="alert">A simple warning alert
                    with <a href="#"
                       class="alert-link">an example
                        link</a>. Give it a click if you
                    like. <button type="button"
                            class="btn-close"
                            data-bs-dismiss="alert"
                            aria-label="Close"></button>
                </div>
                <div class="alert alert-info alert-dismissible fade show"
                     role="alert">A simple info alert with
                    <a href="#"
                       class="alert-link">an example
                        link</a>. Give it a click if you
                    like. <button type="button"
                            class="btn-close"
                            data-bs-dismiss="alert"
                            aria-label="Close"></button>
                </div>
                <div class="alert alert-light alert-dismissible fade show"
                     role="alert">A simple light alert with
                    <a href="#"
                       class="alert-link">an example
                        link</a>. Give it a click if you
                    like. <button type="button"
                            class="btn-close"
                            data-bs-dismiss="alert"
                            aria-label="Close"></button>
                </div>
                <div class="alert alert-dark alert-dismissible fade show"
                     role="alert">A simple dark alert with
                    <a href="#"
                       class="alert-link">an example
                        link</a>. Give it a click if you
                    like. <button type="button"
                            class="btn-close"
                            data-bs-dismiss="alert"
                            aria-label="Close"></button>
                </div>
            </div>
            <div class="bd-example">
                <div class="alert alert-success"
                     role="alert">
                    <h4 class="alert-heading">Well done!
                    </h4>
                    <p>Aww yeah, you successfully read this
                        important alert message. This
                        example text is going to run a bit
                        longer so that you can see how
                        spacing within an alert works with
                        this kind of content.</p>
                    <hr>
                    <p class="mb-0">Whenever you need to, be
                        sure to use margin utilities to keep
                        things nice and tidy.</p>
                </div>
            </div>
        </div>
    </article>
    <article class="m-y_3"
             id="badge">
        <div
             class="bd-heading sticky-xl-top m-y_3 bg_white p_3 br-b_1 br_solid br_black-1 shadow_overlap-light m-x_n4 align-self-start m-t_5 m-b_3 ">
            <h3>Badge</h3><a
               class="d-flex align-items-center"
               target="_blank"
               href="https://getbootstrap.com/docs/5.0/components/badge/">Documentation</a>
        </div>
        <div>
            <div class="bd-example">
                <p class="h1">Example heading <span
                          class="badge bg_primary">New</span>
                </p>
                <p class="h2">Example heading <span
                          class="badge bg_secondary">New</span>
                </p>
                <p class="h3">Example heading <span
                          class="badge bg_success">New</span>
                </p>
                <p class="h4">Example heading <span
                          class="badge bg_alert">New</span>
                </p>
                <p class="h5">Example heading <span
                          class="badge bg_warning c_dark">New</span>
                </p>
                <p class="h6">Example heading <span
                          class="badge bg_info c_dark">New</span>
                </p>
                <p class="h6">Example heading <span
                          class="badge bg_light c_dark">New</span>
                </p>
                <p class="h6">Example heading <span
                          class="badge bg_dark">New</span>
                </p>
            </div>
            <div class="bd-example"><span
                      class="badge rounded-pill bg_primary">Primary</span>
                <span
                      class="badge rounded-pill bg_secondary">Secondary</span>
                <span
                      class="badge rounded-pill bg_success">Success</span>
                <span
                      class="badge rounded-pill bg_alert">alert</span>
                <span
                      class="badge rounded-pill bg_warning c_dark">Warning</span>
                <span
                      class="badge rounded-pill bg_info c_dark">Info</span>
                <span
                      class="badge rounded-pill bg_light c_dark">Light</span>
                <span
                      class="badge rounded-pill bg_dark">Dark</span>
            </div>
        </div>
    </article>
    <article class="m-y_3"
             id="breadcrumb">
        <div
             class="bd-heading sticky-xl-top m-y_3 bg_white p_3 br-b_1 br_solid br_black-1 shadow_overlap-light m-x_n4 align-self-start m-t_5 m-b_3 ">
            <h3>Breadcrumb</h3><a
               class="d-flex align-items-center"
               target="_blank"
               href="https://getbootstrap.com/docs/5.0/components/breadcrumb/">Documentation</a>
        </div>
        <div>
            <div class="bd-example">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a
                               href="#">Home</a></li>
                        <li class="breadcrumb-item"><a
                               href="#">Library</a></li>
                        <li class="breadcrumb-item active"
                            aria-current="page">Data</li>
                    </ol>
                </nav>
            </div>
        </div>
    </article>
    <article class="m-y_3"
             id="buttons">
        <div
             class="bd-heading sticky-xl-top m-y_3 bg_white p_3 br-b_1 br_solid br_black-1 shadow_overlap-light m-x_n4 align-self-start m-t_5 m-b_3 ">
            <h3>Buttons</h3><a
               class="d-flex align-items-center"
               target="_blank"
               href="https://getbootstrap.com/docs/5.0/components/buttons/">Documentation</a>
        </div>
        <div>
            <div class="bd-example"><button type="button"
                        class="btn btn-primary">Primary</button>
                <button type="button"
                        class="btn btn-secondary">Secondary</button>
                <button type="button"
                        class="btn btn-success">Success</button>
                <button type="button"
                        class="btn btn-alert">alert</button>
                <button type="button"
                        class="btn btn-warning">Warning</button>
                <button type="button"
                        class="btn btn-info">Info</button>
                <button type="button"
                        class="btn btn-link">Link</button>
            </div>
            <div class="bd-example"><button type="button"
                        class="btn btn-outline-primary">Primary</button>
                <button type="button"
                        class="btn btn-outline-secondary">Secondary</button>
                <button type="button"
                        class="btn btn-outline-success">Success</button>
                <button type="button"
                        class="btn btn-outline-alert">alert</button>
                <button type="button"
                        class="btn btn-outline-warning">Warning</button>
                <button type="button"
                        class="btn btn-outline-info">Info</button>
            </div>
            <div class="bd-example"><button type="button"
                        class="btn btn-primary btn-sm">Small
                    button</button> <button type="button"
                        class="btn btn-primary">Standard
                    button</button> <button type="button"
                        class="btn btn-primary btn-lg">Large
                    button</button></div>
        </div>
    </article>
    <article class="m-y_3"
             id="button-group">
        <div
             class="bd-heading sticky-xl-top m-y_3 bg_white p_3 br-b_1 br_solid br_black-1 shadow_overlap-light m-x_n4 align-self-start m-t_5 m-b_3 ">
            <h3>Button group</h3><a
               class="d-flex align-items-center"
               target="_blank"
               href="https://getbootstrap.com/docs/5.0/components/button-group/">Documentation</a>
        </div>
        <div>
            <div class="bd-example">
                <div class="btn-toolbar"
                     role="toolbar"
                     aria-label="Toolbar with button groups">
                    <div class="btn-group m_3"
                         role="group"
                         aria-label="First group"><button
                                type="button"
                                class="btn btn-secondary">1</button>
                        <button type="button"
                                class="btn btn-secondary">2</button>
                        <button type="button"
                                class="btn btn-secondary">3</button>
                        <button type="button"
                                class="btn btn-secondary">4</button>
                    </div>
                    <div class="btn-group m_3"
                         role="group"
                         aria-label="Second group"><button
                                type="button"
                                class="btn btn-secondary">5</button>
                        <button type="button"
                                class="btn btn-secondary">6</button>
                        <button type="button"
                                class="btn btn-secondary">7</button>
                    </div>
                    <div class="btn-group"
                         role="group"
                         aria-label="Third group"><button
                                type="button"
                                class="btn btn-secondary">8</button>
                    </div>
                </div>
            </div>
        </div>
    </article>
    <article class="m-y_3"
             id="card">
        <div
             class="bd-heading sticky-xl-top m-y_3 bg_white p_3 br-b_1 br_solid br_black-1 shadow_overlap-light m-x_n4 align-self-start m-t_5 m-b_3 ">
            <h3>Card</h3><a
               class="d-flex align-items-center"
               target="_blank"
               href="https://getbootstrap.com/docs/5.0/components/card/">Documentation</a>
        </div>
        <div>
            <div class="bd-example">
                <div
                     class="row row_cols-1 row_cols-md-2 g-4">
                    <div class="col">
                        <div class="card"><svg
                                 class="bd-placeholder-img card-img-top"
                                 width="100%"
                                 height="180"
                                 xmlns="http://www.w3.org/2000/svg"
                                 role="img"
                                 aria-label="Placeholder: Image cap"
                                 preserveAspectRatio="xMidYMid slice"
                                 focusable="false">
                                <title>Placeholder</title>
                                <rect width="100%"
                                      height="100%"
                                      fill="#868e96"></rect>
                                <text x="50%"
                                      y="50%"
                                      fill="#dee2e6"
                                      dy=".3em">Image
                                    cap</text>
                            </svg>
                            <div class="card-body">
                                <h5 class="card-title">Card
                                    title</h5>
                                <p class="card-text">Some
                                    quick example text to
                                    build on the card title
                                    and make up the bulk of
                                    the card's content.</p>
                                <a href="#"
                                   class="btn btn-primary">Go
                                    somewhere</a>
                            </div>
                        </div>
                    </div>
                    <div class="col">
                        <div class="card">
                            <div class="card-header">
                                Featured</div>
                            <div class="card-body">
                                <h5 class="card-title">Card
                                    title</h5>
                                <p class="card-text">Some
                                    quick example text to
                                    build on the card title
                                    and make up the bulk of
                                    the card's content.</p>
                                <a href="#"
                                   class="btn btn-primary">Go
                                    somewhere</a>
                            </div>
                            <div
                                 class="card-footer c_muted">
                                2 days ago</div>
                        </div>
                    </div>
                    <div class="col">
                        <div class="card">
                            <div class="card-body">
                                <h5 class="card-title">Card
                                    title</h5>
                                <p class="card-text">Some
                                    quick example text to
                                    build on the card title
                                    and make up the bulk of
                                    the card's content.</p>
                            </div>
                            <ul
                                class="list-group list-group-flush">
                                <li class="list-group-item">
                                    An item</li>
                                <li class="list-group-item">
                                    A second item</li>
                                <li class="list-group-item">
                                    A third item</li>
                            </ul>
                            <div class="card-body"><a
                                   href="#"
                                   class="card-link">Card
                                    link</a> <a href="#"
                                   class="card-link">Another
                                    link</a></div>
                        </div>
                    </div>
                    <div class="col">
                        <div class="card">
                            <div class="row g-0">
                                <div class="col-md-4"><svg
                                         class="bd-placeholder-img"
                                         width="100%"
                                         height="250"
                                         xmlns="http://www.w3.org/2000/svg"
                                         role="img"
                                         aria-label="Placeholder: Image"
                                         preserveAspectRatio="xMidYMid slice"
                                         focusable="false">
                                        <title>Placeholder
                                        </title>
                                        <rect width="100%"
                                              height="100%"
                                              fill="#868e96">
                                        </rect><text x="50%"
                                              y="50%"
                                              fill="#dee2e6"
                                              dy=".3em">Image</text>
                                    </svg></div>
                                <div class="col-md-8">
                                    <div class="card-body">
                                        <h5
                                            class="card-title">
                                            Card title</h5>
                                        <p
                                           class="card-text">
                                            This is a wider
                                            card with
                                            supporting text
                                            below as a
                                            natural lead-in
                                            to additional
                                            content. This
                                            content is a
                                            little bit
                                            longer.</p>
                                        <p
                                           class="card-text">
                                            <small
                                                   class="c_muted">Last
                                                updated 3
                                                mins
                                                ago</small>
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </article>
    <article class="m-y_3"
             id="carousel">
        <div
             class="bd-heading sticky-xl-top m-y_3 bg_white p_3 br-b_1 br_solid br_black-1 shadow_overlap-light m-x_n4 align-self-start m-t_5 m-b_3 ">
            <h3>Carousel</h3><a
               class="d-flex align-items-center"
               target="_blank"
               href="https://getbootstrap.com/docs/5.0/components/carousel/">Documentation</a>
        </div>
        <div>
            <div class="bd-example">
                <div id="carouselExampleCaptions"
                     class="carousel slide"
                     data-bs-ride="carousel">
                    <div class="carousel-indicators"><button
                                type="button"
                                data-bs-target="#carouselExampleCaptions"
                                data-bs-slide-to="0"
                                class="active"
                                aria-current="true"
                                aria-label="Slide 1"></button>
                        <button type="button"
                                data-bs-target="#carouselExampleCaptions"
                                data-bs-slide-to="1"
                                aria-label="Slide 2"></button>
                        <button type="button"
                                data-bs-target="#carouselExampleCaptions"
                                data-bs-slide-to="2"
                                aria-label="Slide 3"></button>
                    </div>
                    <div class="carousel-inner">
                        <div class="carousel-item active">
                            <svg class="bd-placeholder-img bd-placeholder-img-lg d-block w_100"
                                 width="800"
                                 height="400"
                                 xmlns="http://www.w3.org/2000/svg"
                                 role="img"
                                 aria-label="Placeholder: First slide"
                                 preserveAspectRatio="xMidYMid slice"
                                 focusable="false">
                                <title>Placeholder</title>
                                <rect width="100%"
                                      height="100%"
                                      fill="#777"></rect>
                                <text x="50%"
                                      y="50%"
                                      fill="#555"
                                      dy=".3em">First
                                    slide</text>
                            </svg>
                            <div
                                 class="carousel-caption d-none d-md-block">
                                <h5>First slide label</h5>
                                <p>Some representative
                                    placeholder content for
                                    the first slide.</p>
                            </div>
                        </div>
                        <div class="carousel-item"><svg
                                 class="bd-placeholder-img bd-placeholder-img-lg d-block w_100"
                                 width="800"
                                 height="400"
                                 xmlns="http://www.w3.org/2000/svg"
                                 role="img"
                                 aria-label="Placeholder: Second slide"
                                 preserveAspectRatio="xMidYMid slice"
                                 focusable="false">
                                <title>Placeholder</title>
                                <rect width="100%"
                                      height="100%"
                                      fill="#666"></rect>
                                <text x="50%"
                                      y="50%"
                                      fill="#444"
                                      dy=".3em">Second
                                    slide</text>
                            </svg>
                            <div
                                 class="carousel-caption d-none d-md-block">
                                <h5>Second slide label</h5>
                                <p>Some representative
                                    placeholder content for
                                    the second slide.</p>
                            </div>
                        </div>
                        <div class="carousel-item"><svg
                                 class="bd-placeholder-img bd-placeholder-img-lg d-block w_100"
                                 width="800"
                                 height="400"
                                 xmlns="http://www.w3.org/2000/svg"
                                 role="img"
                                 aria-label="Placeholder: Third slide"
                                 preserveAspectRatio="xMidYMid slice"
                                 focusable="false">
                                <title>Placeholder</title>
                                <rect width="100%"
                                      height="100%"
                                      fill="#555"></rect>
                                <text x="50%"
                                      y="50%"
                                      fill="#333"
                                      dy=".3em">Third
                                    slide</text>
                            </svg>
                            <div
                                 class="carousel-caption d-none d-md-block">
                                <h5>Third slide label</h5>
                                <p>Some representative
                                    placeholder content for
                                    the third slide.</p>
                            </div>
                        </div>
                    </div><button
                            class="carousel-control-prev"
                            type="button"
                            data-bs-target="#carouselExampleCaptions"
                            data-bs-slide="prev"><span
                              class="carousel-control-prev-icon"
                              aria-hidden="true"></span>
                        <span
                              class="visually-hidden">Previous</span></button>
                    <button class="carousel-control-next"
                            type="button"
                            data-bs-target="#carouselExampleCaptions"
                            data-bs-slide="next"><span
                              class="carousel-control-next-icon"
                              aria-hidden="true"></span>
                        <span
                              class="visually-hidden">Next</span></button>
                </div>
            </div>
        </div>
    </article>
    <article class="m-y_3"
             id="dropdowns">
        <div
             class="bd-heading sticky-xl-top m-y_3 bg_white p_3 br-b_1 br_solid br_black-1 shadow_overlap-light m-x_n4 align-self-start m-t_5 m-b_3 ">
            <h3>Dropdowns</h3><a
               class="d-flex align-items-center"
               target="_blank"
               href="https://getbootstrap.com/docs/5.0/components/dropdowns/">Documentation</a>
        </div>
        <div>
            <div class="bd-example flex">
                <div
                     class="btn-group w_100 flex_wrap">
                    <div class="dropdown"><button
                                class="btn btn-secondary btn-sm dropdown-toggle"
                                type="button"
                                id="dropdownMenuButtonSM"
                                data-bs-toggle="dropdown"
                                aria-expanded="false">Dropdown
                            button</button>
                        <ul class="dropdown-menu"
                            aria-labelledby="dropdownMenuButtonSM">
                            <li>
                                <h6 class="dropdown-header">
                                    Dropdown header</h6>
                            </li>
                            <li><a class="dropdown-item"
                                   href="#">Action</a></li>
                            <li><a class="dropdown-item"
                                   href="#">Another
                                    action</a></li>
                            <li><a class="dropdown-item"
                                   href="#">Something else
                                    here</a></li>
                            <li>
                                <hr
                                    class="dropdown-divider">
                            </li>
                            <li><a class="dropdown-item"
                                   href="#">Separated
                                    link</a></li>
                        </ul>
                    </div>
                    <div class="dropdown"><button
                                class="btn btn-secondary dropdown-toggle"
                                type="button"
                                id="dropdownMenuButton"
                                data-bs-toggle="dropdown"
                                aria-expanded="false">Dropdown
                            button</button>
                        <ul class="dropdown-menu"
                            aria-labelledby="dropdownMenuButton">
                            <li>
                                <h6 class="dropdown-header">
                                    Dropdown header</h6>
                            </li>
                            <li><a class="dropdown-item"
                                   href="#">Action</a></li>
                            <li><a class="dropdown-item"
                                   href="#">Another
                                    action</a></li>
                            <li><a class="dropdown-item"
                                   href="#">Something else
                                    here</a></li>
                            <li>
                                <hr
                                    class="dropdown-divider">
                            </li>
                            <li><a class="dropdown-item"
                                   href="#">Separated
                                    link</a></li>
                        </ul>
                    </div>
                    <div class="dropdown"><button
                                class="btn btn-secondary btn-lg dropdown-toggle"
                                type="button"
                                id="dropdownMenuButtonLG"
                                data-bs-toggle="dropdown"
                                aria-expanded="false">Dropdown
                            button</button>
                        <ul class="dropdown-menu"
                            aria-labelledby="dropdownMenuButtonLG">
                            <li>
                                <h6 class="dropdown-header">
                                    Dropdown header</h6>
                            </li>
                            <li><a class="dropdown-item"
                                   href="#">Action</a></li>
                            <li><a class="dropdown-item"
                                   href="#">Another
                                    action</a></li>
                            <li><a class="dropdown-item"
                                   href="#">Something else
                                    here</a></li>
                            <li>
                                <hr
                                    class="dropdown-divider">
                            </li>
                            <li><a class="dropdown-item"
                                   href="#">Separated
                                    link</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="bd-example">
                <div class="btn-group"><button type="button"
                            class="btn btn-primary">Primary</button>
                    <button type="button"
                            class="btn btn-primary dropdown-toggle dropdown-toggle-split"
                            data-bs-toggle="dropdown"
                            aria-expanded="false"><span
                              class="visually-hidden">Toggle
                            Dropdown</span></button>
                    <ul class="dropdown-menu">
                        <li><a class="dropdown-item"
                               href="#">Action</a></li>
                        <li><a class="dropdown-item"
                               href="#">Another action</a>
                        </li>
                        <li><a class="dropdown-item"
                               href="#">Something else
                                here</a></li>
                    </ul>
                </div><!-- /btn-group -->
                <div class="btn-group"><button type="button"
                            class="btn btn-secondary">Secondary</button>
                    <button type="button"
                            class="btn btn-secondary dropdown-toggle dropdown-toggle-split"
                            data-bs-toggle="dropdown"
                            aria-expanded="false"><span
                              class="visually-hidden">Toggle
                            Dropdown</span></button>
                    <ul class="dropdown-menu">
                        <li><a class="dropdown-item"
                               href="#">Action</a></li>
                        <li><a class="dropdown-item"
                               href="#">Another action</a>
                        </li>
                        <li><a class="dropdown-item"
                               href="#">Something else
                                here</a></li>
                    </ul>
                </div><!-- /btn-group -->
                <div class="btn-group"><button type="button"
                            class="btn btn-success">Success</button>
                    <button type="button"
                            class="btn btn-success dropdown-toggle dropdown-toggle-split"
                            data-bs-toggle="dropdown"
                            aria-expanded="false"><span
                              class="visually-hidden">Toggle
                            Dropdown</span></button>
                    <ul class="dropdown-menu">
                        <li><a class="dropdown-item"
                               href="#">Action</a></li>
                        <li><a class="dropdown-item"
                               href="#">Another action</a>
                        </li>
                        <li><a class="dropdown-item"
                               href="#">Something else
                                here</a></li>
                    </ul>
                </div><!-- /btn-group -->
                <div class="btn-group"><button type="button"
                            class="btn btn-info">Info</button>
                    <button type="button"
                            class="btn btn-info dropdown-toggle dropdown-toggle-split"
                            data-bs-toggle="dropdown"
                            aria-expanded="false"><span
                              class="visually-hidden">Toggle
                            Dropdown</span></button>
                    <ul class="dropdown-menu">
                        <li><a class="dropdown-item"
                               href="#">Action</a></li>
                        <li><a class="dropdown-item"
                               href="#">Another action</a>
                        </li>
                        <li><a class="dropdown-item"
                               href="#">Something else
                                here</a></li>
                    </ul>
                </div><!-- /btn-group -->
                <div class="btn-group"><button type="button"
                            class="btn btn-warning">Warning</button>
                    <button type="button"
                            class="btn btn-warning dropdown-toggle dropdown-toggle-split"
                            data-bs-toggle="dropdown"
                            aria-expanded="false"><span
                              class="visually-hidden">Toggle
                            Dropdown</span></button>
                    <ul class="dropdown-menu">
                        <li><a class="dropdown-item"
                               href="#">Action</a></li>
                        <li><a class="dropdown-item"
                               href="#">Another action</a>
                        </li>
                        <li><a class="dropdown-item"
                               href="#">Something else
                                here</a></li>
                    </ul>
                </div><!-- /btn-group -->
                <div class="btn-group"><button type="button"
                            class="btn btn-alert">alert</button>
                    <button type="button"
                            class="btn btn-alert dropdown-toggle dropdown-toggle-split"
                            data-bs-toggle="dropdown"
                            aria-expanded="false"><span
                              class="visually-hidden">Toggle
                            Dropdown</span></button>
                    <ul class="dropdown-menu">
                        <li><a class="dropdown-item"
                               href="#">Action</a></li>
                        <li><a class="dropdown-item"
                               href="#">Another action</a>
                        </li>
                        <li><a class="dropdown-item"
                               href="#">Something else
                                here</a></li>
                    </ul>
                </div><!-- /btn-group -->
            </div>
            <div class="bd-example">
                <div
                     class="btn-group w_100 align-items-center justify-content-between flex-wrap">
                    <div class="dropend"><button
                                class="btn btn-secondary dropdown-toggle"
                                type="button"
                                id="dropendMenuButton"
                                data-bs-toggle="dropdown"
                                aria-expanded="false">Dropend
                            button</button>
                        <ul class="dropdown-menu"
                            aria-labelledby="dropendMenuButton">
                            <li>
                                <h6 class="dropdown-header">
                                    Dropdown header</h6>
                            </li>
                            <li><a class="dropdown-item"
                                   href="#">Action</a></li>
                            <li><a class="dropdown-item"
                                   href="#">Another
                                    action</a></li>
                            <li><a class="dropdown-item"
                                   href="#">Something else
                                    here</a></li>
                            <li>
                                <hr
                                    class="dropdown-divider">
                            </li>
                            <li><a class="dropdown-item"
                                   href="#">Separated
                                    link</a></li>
                        </ul>
                    </div>
                    <div class="dropup"><button
                                class="btn btn-secondary dropdown-toggle"
                                type="button"
                                id="dropupMenuButton"
                                data-bs-toggle="dropdown"
                                aria-expanded="false">Dropup
                            button</button>
                        <ul class="dropdown-menu"
                            aria-labelledby="dropupMenuButton">
                            <li>
                                <h6 class="dropdown-header">
                                    Dropdown header</h6>
                            </li>
                            <li><a class="dropdown-item"
                                   href="#">Action</a></li>
                            <li><a class="dropdown-item"
                                   href="#">Another
                                    action</a></li>
                            <li><a class="dropdown-item"
                                   href="#">Something else
                                    here</a></li>
                            <li>
                                <hr
                                    class="dropdown-divider">
                            </li>
                            <li><a class="dropdown-item"
                                   href="#">Separated
                                    link</a></li>
                        </ul>
                    </div>
                    <div class="dropstart"><button
                                class="btn btn-secondary dropdown-toggle"
                                type="button"
                                id="dropstartMenuButton"
                                data-bs-toggle="dropdown"
                                aria-expanded="false">Dropstart
                            button</button>
                        <ul class="dropdown-menu"
                            aria-labelledby="dropstartMenuButton">
                            <li>
                                <h6 class="dropdown-header">
                                    Dropdown header</h6>
                            </li>
                            <li><a class="dropdown-item"
                                   href="#">Action</a></li>
                            <li><a class="dropdown-item"
                                   href="#">Another
                                    action</a></li>
                            <li><a class="dropdown-item"
                                   href="#">Something else
                                    here</a></li>
                            <li>
                                <hr
                                    class="dropdown-divider">
                            </li>
                            <li><a class="dropdown-item"
                                   href="#">Separated
                                    link</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="bd-example">
                <div class="btn-group">
                    <div class="dropdown"><button
                                class="btn btn-secondary dropdown-toggle"
                                type="button"
                                id="dropdownRightMenuButton"
                                data-bs-toggle="dropdown"
                                aria-expanded="false">End-aligned
                            menu</button>
                        <ul class="dropdown-menu dropdown-menu-end"
                            aria-labelledby="dropdownRightMenuButton">
                            <li>
                                <h6 class="dropdown-header">
                                    Dropdown header</h6>
                            </li>
                            <li><a class="dropdown-item"
                                   href="#">Action</a></li>
                            <li><a class="dropdown-item"
                                   href="#">Another
                                    action</a></li>
                            <li>
                                <hr
                                    class="dropdown-divider">
                            </li>
                            <li><a class="dropdown-item"
                                   href="#">Separated
                                    link</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </article>
    <article class="m-y_3"
             id="list-group">
        <div
             class="bd-heading sticky-xl-top m-y_3 bg_white p_3 br-b_1 br_solid br_black-1 shadow_overlap-light m-x_n4 align-self-start m-t_5 m-b_3 ">
            <h3>List group</h3><a
               class="d-flex align-items-center"
               target="_blank"
               href="https://getbootstrap.com/docs/5.0/components/list-group/">Documentation</a>
        </div>
        <div>
            <div class="bd-example">
                <ul class="list-group">
                    <li class="list-group-item disabled"
                        aria-disabled="true">A disabled item
                    </li>
                    <li class="list-group-item">A second
                        item</li>
                    <li class="list-group-item">A third item
                    </li>
                    <li class="list-group-item">A fourth
                        item</li>
                    <li class="list-group-item">And a fifth
                        one</li>
                </ul>
            </div>
            <div class="bd-example">
                <ul class="list-group list-group-flush">
                    <li class="list-group-item">An item</li>
                    <li class="list-group-item">A second
                        item</li>
                    <li class="list-group-item">A third item
                    </li>
                    <li class="list-group-item">A fourth
                        item</li>
                    <li class="list-group-item">And a fifth
                        one</li>
                </ul>
            </div>
            <div class="bd-example">
                <div class="list-group"><a href="#"
                       class="list-group-item list-group-item-action">A
                        simple default list group item</a>
                    <a href="#"
                       class="list-group-item list-group-item-action list-group-item-primary">A
                        simple primary list group item</a>
                    <a href="#"
                       class="list-group-item list-group-item-action list-group-item-secondary">A
                        simple secondary list group item</a>
                    <a href="#"
                       class="list-group-item list-group-item-action list-group-item-success">A
                        simple success list group item</a>
                    <a href="#"
                       class="list-group-item list-group-item-action list-group-item-alert">A
                        simple alert list group item</a> <a
                       href="#"
                       class="list-group-item list-group-item-action list-group-item-warning">A
                        simple warning list group item</a>
                    <a href="#"
                       class="list-group-item list-group-item-action list-group-item-info">A
                        simple info list group item</a>
                </div>
            </div>
        </div>
    </article>
    <article class="m-y_3"
             id="modal">
        <div
             class="bd-heading sticky-xl-top m-y_3 bg_white p_3 br-b_1 br_solid br_black-1 shadow_overlap-light m-x_n4 align-self-start m-t_5 m-b_3 ">
            <h3>Modal</h3><a
               class="d-flex align-items-center"
               target="_blank"
               href="https://getbootstrap.com/docs/5.0/components/modal/">Documentation</a>
        </div>
        <div>
            <div class="bd-example">
                <div
                     class="d-flex justify-content-between flex-wrap">
                    <button type="button"
                            class="btn btn-primary"
                            data-bs-toggle="modal"
                            data-bs-target="#exampleModalDefault">Launch
                        demo modal</button> <button
                            type="button"
                            class="btn btn-primary"
                            data-bs-toggle="modal"
                            data-bs-target="#staticBackdropLive">Launch
                        static backdrop modal</button>
                    <button type="button"
                            class="btn btn-primary"
                            data-bs-toggle="modal"
                            data-bs-target="#exampleModalCenteredScrollable">Vertically
                        centered scrollable modal</button>
                    <button type="button"
                            class="btn btn-primary"
                            data-bs-toggle="modal"
                            data-bs-target="#exampleModalFullscreen">Full
                        screen</button></div>
            </div>
        </div>
    </article>
    <article class="m-y_3"
             id="navs">
        <div
             class="bd-heading sticky-xl-top m-y_3 bg_white p_3 br-b_1 br_solid br_black-1 shadow_overlap-light m-x_n4 align-self-start m-t_5 m-b_3 ">
            <h3>Navs</h3><a
               class="d-flex align-items-center"
               target="_blank"
               href="https://getbootstrap.com/docs/5.0/components/navs-tabs/">Documentation</a>
        </div>
        <div>
            <div class="bd-example">
                <nav class="nav"><a class="nav-link active"
                       aria-current="page"
                       href="#">Active</a> <a
                       class="nav-link"
                       href="#">Link</a> <a class="nav-link"
                       href="#">Link</a> <a
                       class="nav-link disabled"
                       href="#"
                       tabindex="-1"
                       aria-disabled="true">Disabled</a>
                </nav>
            </div>
            <div class="bd-example">
                <nav>
                    <div class="nav nav-tabs m-b_3"
                         id="nav-tab"
                         role="tablist"><button
                                class="nav-link active"
                                id="nav-home-tab"
                                data-bs-toggle="tab"
                                data-bs-target="#nav-home"
                                type="button"
                                role="tab"
                                aria-controls="nav-home"
                                aria-selected="true">Home</button>
                        <button class="nav-link"
                                id="nav-profile-tab"
                                data-bs-toggle="tab"
                                data-bs-target="#nav-profile"
                                type="button"
                                role="tab"
                                aria-controls="nav-profile"
                                aria-selected="false">Profile</button>
                        <button class="nav-link"
                                id="nav-contact-tab"
                                data-bs-toggle="tab"
                                data-bs-target="#nav-contact"
                                type="button"
                                role="tab"
                                aria-controls="nav-contact"
                                aria-selected="false">Contact</button>
                    </div>
                </nav>
                <div class="tab-content"
                     id="nav-tabContent">
                    <div class="tab-pane fade show active"
                         id="nav-home"
                         role="tabpanel"
                         aria-labelledby="nav-home-tab">
                        <p>Placeholder content for the tab
                            panel. This one relates to the
                            home tab. Takes you miles high,
                            so high, 'cause she’s got that
                            one international smile. There's
                            a stranger in my bed, there's a
                            pounding in my head. Oh, no. In
                            another life I would make you
                            stay. ‘Cause I, I’m capable of
                            anything. Suiting up for my
                            crowning battle. Used to steal
                            your parents' liquor and climb
                            to the roof. Tone, tan fit and
                            ready, turn it up cause its
                            gettin' heavy. Her love is like
                            a drug. I guess that I forgot I
                            had a choice.</p>
                    </div>
                    <div class="tab-pane fade"
                         id="nav-profile"
                         role="tabpanel"
                         aria-labelledby="nav-profile-tab">
                        <p>Placeholder content for the tab
                            panel. This one relates to the
                            profile tab. You got the finest
                            architecture. Passport stamps,
                            she's cosmopolitan. Fine, fresh,
                            fierce, we got it on lock. Never
                            planned that one day I'd be
                            losing you. She eats your heart
                            out. Your kiss is cosmic, every
                            move is magic. I mean the ones,
                            I mean like she's the one.
                            Greetings loved ones let's take
                            a journey. Just own the night
                            like the 4th of July! But you'd
                            rather get wasted.</p>
                    </div>
                    <div class="tab-pane fade"
                         id="nav-contact"
                         role="tabpanel"
                         aria-labelledby="nav-contact-tab">
                        <p>Placeholder content for the tab
                            panel. This one relates to the
                            contact tab. Her love is like a
                            drug. All my girls vintage
                            Chanel baby. Got a motel and
                            built a fort out of sheets.
                            'Cause she's the muse and the
                            artist. (This is how we do) So
                            you wanna play with magic. So
                            just be sure before you give it
                            all to me. I'm walking, I'm
                            walking on air (tonight). Skip
                            the talk, heard it all, time to
                            walk the walk. Catch her if you
                            can. Stinging like a bee I
                            earned my stripes.</p>
                    </div>
                </div>
            </div>
            <div class="bd-example">
                <ul class="nav nav-pills">
                    <li class="nav-item"><a
                           class="nav-link active"
                           aria-current="page"
                           href="#">Active</a></li>
                    <li class="nav-item"><a class="nav-link"
                           href="#">Link</a></li>
                    <li class="nav-item"><a class="nav-link"
                           href="#">Link</a></li>
                    <li class="nav-item"><a
                           class="nav-link disabled"
                           href="#"
                           tabindex="-1"
                           aria-disabled="true">Disabled</a>
                    </li>
                </ul>
            </div>
        </div>
    </article>
    <article class="m-y_3"
             id="pagination">
        <div
             class="bd-heading sticky-xl-top m-y_3 bg_white p_3 br-b_1 br_solid br_black-1 shadow_overlap-light m-x_n4 align-self-start m-t_5 m-b_3 ">
            <h3>Pagination</h3><a
               class="d-flex align-items-center"
               target="_blank"
               href="https://getbootstrap.com/docs/5.0/components/pagination/">Documentation</a>
        </div>
        <div>
            <div class="bd-example">
                <nav aria-label="Pagination example">
                    <ul class="pagination pagination-sm">
                        <li class="page-item"><a
                               class="page-link"
                               href="#">1</a></li>
                        <li class="page-item active"
                            aria-current="page"><a
                               class="page-link"
                               href="#">2</a></li>
                        <li class="page-item"><a
                               class="page-link"
                               href="#">3</a></li>
                    </ul>
                </nav>
            </div>
            <div class="bd-example">
                <nav
                     aria-label="Standard pagination example">
                    <ul class="pagination">
                        <li class="page-item"><a
                               class="page-link"
                               href="#"
                               aria-label="Previous"><span
                                      aria-hidden="true">«</span></a>
                        </li>
                        <li class="page-item"><a
                               class="page-link"
                               href="#">1</a></li>
                        <li class="page-item"><a
                               class="page-link"
                               href="#">2</a></li>
                        <li class="page-item"><a
                               class="page-link"
                               href="#">3</a></li>
                        <li class="page-item"><a
                               class="page-link"
                               href="#"
                               aria-label="Next"><span
                                      aria-hidden="true">»</span></a>
                        </li>
                    </ul>
                </nav>
            </div>
            <div class="bd-example">
                <nav
                     aria-label="Another pagination example">
                    <ul
                        class="pagination pagination-lg flex-wrap">
                        <li class="page-item disabled"><a
                               class="page-link"
                               href="#"
                               tabindex="-1"
                               aria-disabled="true">Previous</a>
                        </li>
                        <li class="page-item"><a
                               class="page-link"
                               href="#">1</a></li>
                        <li class="page-item active"
                            aria-current="page"><a
                               class="page-link"
                               href="#">2</a></li>
                        <li class="page-item"><a
                               class="page-link"
                               href="#">3</a></li>
                        <li class="page-item"><a
                               class="page-link"
                               href="#">Next</a></li>
                    </ul>
                </nav>
            </div>
        </div>
    </article>
    <article class="m-y_3"
             id="popovers">
        <div
             class="bd-heading sticky-xl-top m-y_3 bg_white p_3 br-b_1 br_solid br_black-1 shadow_overlap-light m-x_n4 align-self-start m-t_5 m-b_3 ">
            <h3>Popovers</h3><a
               class="d-flex align-items-center"
               target="_blank"
               href="https://getbootstrap.com/docs/5.0/components/popovers/">Documentation</a>
        </div>
        <div>
            <div class="bd-example"><button type="button"
                        class="btn btn-lg btn-alert"
                        data-bs-toggle="popover"
                        title="Popover title"
                        data-bs-content="And here's some amazing content. It's very engaging. Right?">Click
                    to toggle popover</button></div>
            <div class="bd-example"><button type="button"
                        class="btn btn-secondary"
                        data-bs-container="body"
                        data-bs-toggle="popover"
                        data-bs-placement="top"
                        data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Popover
                    on top</button> <button type="button"
                        class="btn btn-secondary"
                        data-bs-container="body"
                        data-bs-toggle="popover"
                        data-bs-placement="right"
                        data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Popover
                    on end</button> <button type="button"
                        class="btn btn-secondary"
                        data-bs-container="body"
                        data-bs-toggle="popover"
                        data-bs-placement="bottom"
                        data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Popover
                    on bottom</button> <button type="button"
                        class="btn btn-secondary"
                        data-bs-container="body"
                        data-bs-toggle="popover"
                        data-bs-placement="left"
                        data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Popover
                    on start</button></div>
        </div>
    </article>
    <article class="m-y_3"
             id="progress">
        <div
             class="bd-heading sticky-xl-top m-y_3 bg_white p_3 br-b_1 br_solid br_black-1 shadow_overlap-light m-x_n4 align-self-start m-t_5 m-b_3 ">
            <h3>Progress</h3><a
               class="d-flex align-items-center"
               target="_blank"
               href="https://getbootstrap.com/docs/5.0/components/progress/">Documentation</a>
        </div>
        <div>
            <div class="bd-example">
                <div class="progress m-b_3">
                    <div class="progress-bar"
                         role="progressbar"
                         aria-valuenow="0"
                         aria-valuemin="0"
                         aria-valuemax="100">0%</div>
                </div>
                <div class="progress m-b_3">
                    <div class="progress-bar bg_success w_25"
                         role="progressbar"
                         aria-valuenow="25"
                         aria-valuemin="0"
                         aria-valuemax="100">25%</div>
                </div>
                <div class="progress m-b_3">
                    <div class="progress-bar bg_info c_dark w_50"
                         role="progressbar"
                         aria-valuenow="50"
                         aria-valuemin="0"
                         aria-valuemax="100">50%</div>
                </div>
                <div class="progress m-b_3">
                    <div class="progress-bar bg_warning c_dark w_75"
                         role="progressbar"
                         aria-valuenow="75"
                         aria-valuemin="0"
                         aria-valuemax="100">75%</div>
                </div>
                <div class="progress">
                    <div class="progress-bar bg_alert w_100"
                         role="progressbar"
                         aria-valuenow="100"
                         aria-valuemin="0"
                         aria-valuemax="100">100%</div>
                </div>
            </div>
            <div class="bd-example">
                <div class="progress">
                    <div class="progress-bar"
                         role="progressbar"
                         style="width:15%"
                         aria-valuenow="15"
                         aria-valuemin="0"
                         aria-valuemax="100"></div>
                    <div class="progress-bar progress-bar-striped progress-bar-animated bg_success"
                         role="progressbar"
                         style="width:40%"
                         aria-valuenow="40"
                         aria-valuemin="0"
                         aria-valuemax="100"></div>
                </div>
            </div>
        </div>
    </article>
    <article class="m-y_3"
             id="scrollspy">
        <div
             class="bd-heading sticky-xl-top m-y_3 bg_white p_3 br-b_1 br_solid br_black-1 shadow_overlap-light m-x_n4 align-self-start m-t_5 m-b_3 ">
            <h3>Scrollspy</h3><a
               class="d-flex align-items-center"
               target="_blank"
               href="https://getbootstrap.com/docs/5.0/components/scrollspy/">Documentation</a>
        </div>
        <div>
            <div class="bd-example">
                <nav id="navbar-example2"
                     class="navbar navbar-light bg_light px-3">
                    <a class="navbar-brand"
                       href="#">Navbar</a>
                    <ul class="nav nav-pills">
                        <li class="nav-item"><a
                               class="nav-link"
                               href="#fat">@fat</a></li>
                        <li class="nav-item"><a
                               class="nav-link"
                               href="#mdo">@mdo</a></li>
                        <li class="nav-item dropdown"><a
                               class="nav-link dropdown-toggle"
                               data-bs-toggle="dropdown"
                               href="#"
                               role="button"
                               aria-expanded="false">Dropdown</a>
                            <ul class="dropdown-menu">
                                <li><a class="dropdown-item"
                                       href="#one">one</a>
                                </li>
                                <li><a class="dropdown-item"
                                       href="#two">two</a>
                                </li>
                                <li>
                                    <hr
                                        class="dropdown-divider">
                                </li>
                                <li><a class="dropdown-item"
                                       href="#three">three</a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </nav>
                <div data-bs-spy="scroll"
                     data-bs-target="#navbar-example2"
                     data-bs-offset="0"
                     class="scrollspy-example"
                     tabindex="0">
                    <h4 id="fat">@fat</h4>
                    <p>Placeholder content for the scrollspy
                        example. You got the finest
                        architecture. Passport stamps, she's
                        cosmopolitan. Fine, fresh, fierce,
                        we got it on lock. Never planned
                        that one day I'd be losing you. She
                        eats your heart out. Your kiss is
                        cosmic, every move is magic. I mean
                        the ones, I mean like she's the one.
                        Greetings loved ones let's take a
                        journey. Just own the night like the
                        4th of July! But you'd rather get
                        wasted.</p>
                    <h4 id="mdo">@mdo</h4>
                    <p>Placeholder content for the scrollspy
                        example. 'Cause she's the muse and
                        the artist. (This is how we do) So
                        you wanna play with magic. So just
                        be sure before you give it all to
                        me. I'm walking, I'm walking on air
                        (tonight). Skip the talk, heard it
                        all, time to walk the walk.</p>
                    <h4 id="one">one</h4>
                    <p>Placeholder content for the scrollspy
                        example. Takes you miles high, so
                        high, 'cause she’s got that one
                        international smile. There's a
                        stranger in my bed, there's a
                        pounding in my head. Oh, no. In
                        another life I would make you stay.
                        ‘Cause I, I’m capable of anything.
                        Suiting up for my crowning battle.
                        Used to steal your parents' liquor
                        and climb to the roof. Tone, tan fit
                        and ready, turn it up cause its
                        gettin' heavy. Her love is like a
                        drug. I guess that I forgot I had a
                        choice.</p>
                    <h4 id="two">two</h4>
                    <p>Placeholder content for the scrollspy
                        example. It's time to bring out the
                        big balloons. I'm walking, I'm
                        walking on air (tonight). Yeah, we
                        maxed our credit cards and got
                        kicked out of the bar. Yo, shout out
                        to all you kids, buying bottle
                        service, with your rent money. I'm
                        ma get your heart racing in my
                        skin-tight jeans. If you get the
                        chance you better keep her. Yo,
                        shout out to all you kids, buying
                        bottle service, with your rent
                        money.</p>
                    <h4 id="three">three</h4>
                    <p>Placeholder content for the scrollspy
                        example. If you wanna dance, if you
                        want it all, you know that I'm the
                        girl that you should call. Walk
                        through the storm I would. So let me
                        get you in your birthday suit. The
                        one that got away. Last Friday
                        night, yeah I think we broke the
                        law, always say we're gonna stop.
                        'Cause she's a little bit of Yoko,
                        And she's a little bit of 'Oh no'. I
                        want the jaw droppin', eye poppin',
                        head turnin', body shockin'. Yeah,
                        we maxed our credit cards and got
                        kicked out of the bar.</p>
                    <p>And some more placeholder content,
                        for good measure.</p>
                </div>
            </div>
        </div>
    </article>
    <article class="m-y_3"
             id="spinners">
        <div
             class="bd-heading sticky-xl-top m-y_3 bg_white p_3 br-b_1 br_solid br_black-1 shadow_overlap-light m-x_n4 align-self-start m-t_5 m-b_3 ">
            <h3>Spinners</h3><a
               class="d-flex align-items-center"
               target="_blank"
               href="https://getbootstrap.com/docs/5.0/components/spinners/">Documentation</a>
        </div>
        <div>
            <div class="bd-example">
                <div class="spinner-border c_primary"
                     role="status"><span
                          class="visually-hidden">Loading...</span>
                </div>
                <div class="spinner-border c_secondary"
                     role="status"><span
                          class="visually-hidden">Loading...</span>
                </div>
                <div class="spinner-border c_success"
                     role="status"><span
                          class="visually-hidden">Loading...</span>
                </div>
                <div class="spinner-border c_alert"
                     role="status"><span
                          class="visually-hidden">Loading...</span>
                </div>
                <div class="spinner-border c_warning"
                     role="status"><span
                          class="visually-hidden">Loading...</span>
                </div>
                <div class="spinner-border c_info"
                     role="status"><span
                          class="visually-hidden">Loading...</span>
                </div>
                <div class="spinner-border c_light"
                     role="status"><span
                          class="visually-hidden">Loading...</span>
                </div>
                <div class="spinner-border c_dark"
                     role="status"><span
                          class="visually-hidden">Loading...</span>
                </div>
            </div>
            <div class="bd-example">
                <div class="spinner-grow c_primary"
                     role="status"><span
                          class="visually-hidden">Loading...</span>
                </div>
                <div class="spinner-grow c_secondary"
                     role="status"><span
                          class="visually-hidden">Loading...</span>
                </div>
                <div class="spinner-grow c_success"
                     role="status"><span
                          class="visually-hidden">Loading...</span>
                </div>
                <div class="spinner-grow c_alert"
                     role="status"><span
                          class="visually-hidden">Loading...</span>
                </div>
                <div class="spinner-grow c_warning"
                     role="status"><span
                          class="visually-hidden">Loading...</span>
                </div>
                <div class="spinner-grow c_info"
                     role="status"><span
                          class="visually-hidden">Loading...</span>
                </div>
                <div class="spinner-grow c_light"
                     role="status"><span
                          class="visually-hidden">Loading...</span>
                </div>
                <div class="spinner-grow c_dark"
                     role="status"><span
                          class="visually-hidden">Loading...</span>
                </div>
            </div>
        </div>
    </article>
    <article class="m-y_3"
             id="toasts">
        <div
             class="bd-heading sticky-xl-top m-y_3 bg_white p_3 br-b_1 br_solid br_black-1 shadow_overlap-light m-x_n4 align-self-start m-t_5 m-b_3 ">
            <h3>Toasts</h3><a
               class="d-flex align-items-center"
               target="_blank"
               href="https://getbootstrap.com/docs/5.0/components/toasts/">Documentation</a>
        </div>
        <div>
            <div
                 class="bd-example bg_dark p-5 align-items-center">
                <div class="toast"
                     role="alert"
                     aria-live="assertive"
                     aria-atomic="true">
                    <div class="toast-header"><svg
                             class="bd-placeholder-img rounded m_3"
                             width="20"
                             height="20"
                             xmlns="http://www.w3.org/2000/svg"
                             aria-hidden="true"
                             preserveAspectRatio="xMidYMid slice"
                             focusable="false">
                            <rect width="100%"
                                  height="100%"
                                  fill="#007aff"></rect>
                        </svg> <strong
                                class="me-auto">Bootstrap</strong>
                        <small class="c_muted">11 mins
                            ago</small> <button
                                type="button"
                                class="btn-close"
                                data-bs-dismiss="toast"
                                aria-label="Close"></button>
                    </div>
                    <div class="toast-body">Hello, world!
                        This is a toast message.</div>
                </div>
            </div>
        </div>
    </article>
    <article class="mt-3 mb-5 pb-5"
             id="tooltips">
        <div
             class="bd-heading sticky-xl-top m-y_3 bg_white p_3 br-b_1 br_solid br_black-1 shadow_overlap-light m-x_n4 align-self-start m-t_5 m-b_3 ">
            <h3>Tooltips</h3><a
               class="d-flex align-items-center"
               target="_blank"
               href="https://getbootstrap.com/docs/5.0/components/tooltips/">Documentation</a>
        </div>
        <div>
            <div class="bd-example tooltip-demo"><button
                        type="button"
                        class="btn btn-secondary"
                        data-bs-toggle="tooltip"
                        data-bs-placement="top"
                        title="Tooltip on top">Tooltip on
                    top</button> <button type="button"
                        class="btn btn-secondary"
                        data-bs-toggle="tooltip"
                        data-bs-placement="right"
                        title="Tooltip on end">Tooltip on
                    end</button> <button type="button"
                        class="btn btn-secondary"
                        data-bs-toggle="tooltip"
                        data-bs-placement="bottom"
                        title="Tooltip on bottom">Tooltip on
                    bottom</button> <button type="button"
                        class="btn btn-secondary"
                        data-bs-toggle="tooltip"
                        data-bs-placement="left"
                        title="Tooltip on start">Tooltip on
                    start</button> <button type="button"
                        class="btn btn-secondary"
                        data-bs-toggle="tooltip"
                        data-bs-html="true"
                        title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">Tooltip
                    with HTML</button></div>
        </div>
    </article>
</section>



Weight: 1000

Styleguide  Bootstrap.Components
*/
.btn {
  font-weight: var(--font_medium);
  font-family: var(--font-family_ui);
  white-space: nowrap;
}

.btn.clear {
  border-color: transparent;
  background-color: transparent;
  color: var(--link-color-dark);
}
.btn.clear:hover {
  color: hsl(var(--link-color-dark-h), var(--link-color-dark-s), calc( var(-link-color-dark-l ) * .5 ));
}

.btn-accent {
  background-color: hsla(var(--accent-h), calc( var(--accent-s) + ((100% - var(--accent-s)) * 0.015) ), calc( var( --accent-l ) - ( var( --accent-l ) * 0.15 ) ), 1);
}
.btn-accent:hover {
  background-color: hsla(var(--accent-h), calc( var(--accent-s) + ((100% - var(--accent-s)) * 0.05) ), calc( var( --accent-l ) - ( var( --accent-l ) * 0.5 ) ), 1);
}

.btn.shadow {
  box-shadow: 1.5px 1.5px 6px 0.75px rgba(0, 0, 0, 0.4);
}

.btn.shadow:hover {
  box-shadow: 0.5px 0.5px 2px 0.25px rgba(0, 0, 0, 0.1);
}

/*
Carousel ALT

A slide-show component for cycling through groups of images and text.
.no-controls            Will remove left and right arrow
.text-indicators        Converts the circle indicators to text tabs that lock to the right side of the images.
.chevron-on             Adds a light orange chevron on the '.active' indicator to increase its impact.


Markup:
<div
	id="carouselExampleFade"
	class="carousel carousel-alt slide no-controls text-indicators chevron-on"
>
	<ol class="carousel-indicators">
		<li data-target="#carouselExampleFade" data-slide-to="0" class="wrap" >
			quaerat odit assumenda
		</li>
		<li data-target="#carouselExampleFade" data-slide-to="1" class=" wrap">
			delectus sunt optio
		</li>
		<li data-target="#carouselExampleFade" data-slide-to="2" class=" wrap">
			deserunt quia quasi
		</li>
	</ol>
	<!-- Wrapper for slides -->
	<div class="carousel-inner" role="listbox">
		<div class="carousel-item active">
			<a><img class="block w_100" src="http://lorempixel.com/630/420/animals" alt="..."/></a>
			<div class="carousel-caption bg_black-7 text-shadow_black-1 text_center text_left:md font_2:md c_white p_3:lg p-b_4:lg p-y_3 lh_1 b_0 r_0 l_0">
                    <span class="title  font_display block m-b_2 font_4:md m-b_3:md">Cardiac Syncope Program Launches!</span>
                    <p><strong>NEW</strong>&nbsp;|&nbsp;Hear from an expert panel and complete four patient cases to test your knowledge on our Syncope Program! <a href="http://edu.acc.org/diweb/catalog/item/eid/SYNCOPE2019" title="" class="" target="_blank"><strong>Find out more!</strong></a></p>
                </div>
		</div>
		<div class="carousel-item">
			<a><img class="block w_100" src="http://lorempixel.com/630/420/nature" alt="..."/></a>
			<div class="carousel-caption bg_black-7 text-shadow_black-1 text_center text_left:md font_2:md c_white p_3:lg p-b_4:lg p-y_3 lh_1 b_0 r_0 l_0">
				<span class="title font_display block m-b_2 font_4:md m-b_3:md">sint explicabo sequi</span> Earum nihil omnis.
			</div>
		</div>
		<div class="carousel-item">
			<a><img class="block w_100" src="http://lorempixel.com/630/420/food" alt="..."/></a>
			<div class="carousel-caption bg_black-7 text-shadow_black-1 text_center text_left:md font_2:md c_white p_3:lg p-b_4:lg p-y_3 lh_1 b_0 r_0 l_0">
				<span class="title font_display block m-b_2 font_4:md m-b_3:md">sint explicabo sequi</span> Earum nihil omnis.
			</div>
		</div>
	</div>
	<!-- Controls -->
	<a
		class="left carousel-control-prev"
		href="#carouselExampleFade"
		role="button"
		data-slide="prev"
	>
		<i class="fas fa-chevron-left"></i>
		<span class="sr-only">Previous</span>
	</a>
	<a
		class="right carousel-control-next"
		href="#carouselExampleFade"
		role="button"
		data-slide="next"
	>
		<i class="fas fa-chevron-right"></i>
		<span class="sr-only">Next</span>
	</a>
</div>


Styleguide  Bootstrap.Carousel

*/
.carousel-alt {
  position: relative;
  max-width: 630px;
  margin: 0 auto 16px;
  margin: 0 auto 1rem;
  background: url("http://cdn.backgroundhost.com/backgrounds/subtlepatterns/subtle_surface.png");
  background-repeat: repeat;
}
.carousel-alt:before {
  display: block;
  width: 100%;
  padding-top: 66.6666666667%;
  content: "";
}
.carousel-alt > .carousel-inner {
  position: absolute;
  top: 0px;
  right: 0;
  bottom: 0;
  left: 0;
}
.carousel-alt .carousel-indicators {
  top: 0;
  right: 0;
  bottom: auto;
  left: 0;
  width: 100%;
  margin: 0;
  background-color: rgba(0, 0, 0, 0.6);
}
.carousel-alt .carousel-indicators li {
  box-sizing: content-box;
  width: 12px;
  height: 12px;
  margin-top: 5px;
  margin-bottom: 5px;
  overflow: hidden;
  border: none;
  border-radius: 25px;
  text-indent: -9999px;
}
.carousel-alt .carousel-indicators li.active {
  border-color: var(--accent);
  background-color: var(--accent);
}
.carousel-alt.chevron-on .carousel-indicators li.active:before {
  top: 4px;
  left: 4px;
  padding-top: 5px;
  content: "\f054";
  color: var(--accent);
  font-size: 1.6018066406em;
}
@media only screen and (min-width : 768px) {
  .carousel-alt.text-indicators {
    max-width: 900px;
  }
  .carousel-alt.text-indicators:before {
    padding-top: 46.6666666667%;
  }
  .carousel-alt.text-indicators .carousel-inner {
    width: 70%;
  }
  .carousel-alt.text-indicators .carousel-inner > .carousel-item {
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  .carousel-alt.text-indicators .carousel-inner > .carousel-item:before {
    display: inline-block;
    /* width: 100%; */
    width: 1px;
    margin-left: -1px;
    padding-top: 66.6666666667%;
    content: "";
  }
  .carousel-alt.text-indicators .carousel-inner > .carousel-item a {
    float: left;
  }
  .carousel-alt.text-indicators a[class^=carousel-control].right {
    right: 30%;
  }
  .carousel-alt.text-indicators .carousel-indicators {
    display: flex;
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    flex-direction: column;
    width: 30%;
    max-width: 300px;
    height: 100%;
  }
  .carousel-alt.text-indicators .carousel-indicators li {
    -moz-transition: background-color 0.25s ease-out;
    -webkit-transition: background-color 0.25s ease-out;
    display: block;
    position: relative;
    flex: 1 1 20%;
    flex-direction: column;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0.5rem 1rem;
    border: 1px solid hsla(var(--shade-h), calc( var( --shade-s ) - ( var( --shade-s ) * 0.25 ) ), calc( var(--shade-l) + ((100% - var(--shade-l)) * 0.5) ), 1);
    border-radius: 0;
    background-color: hsla(var(--shade-h), calc( var( --shade-s ) - ( var( --shade-s ) * 0.375 ) ), calc( var(--shade-l) + ((100% - var(--shade-l)) * 0.75) ), 1);
    font-size: 1.125em;
    text-align: left;
    text-indent: 0;
    transition: background-color 0.25s ease-out;
  }
  .carousel-alt.text-indicators .carousel-indicators li:first-child {
    border-top: 0;
  }
  .carousel-alt.text-indicators .carousel-indicators li:last-child {
    border-bottom: 0;
  }
  .carousel-alt.text-indicators .carousel-indicators li.active {
    padding-right: 10px;
    border-right: var(--accent) 10px solid;
    background-color: hsla(var(--shade-h), calc( var(--shade-s) + ((100% - var(--shade-s)) * 0.015) ), calc( var( --shade-l ) - ( var( --shade-l ) * 0.15 ) ), 1);
    color: white;
  }
}

.carousel-control-prev,
.carousel-control-next {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 20%;
  min-width: 48px;
  min-width: 3rem;
  background-color: rgba(0, 0, 0, 0);
  font-size: 1.125em;
  text-align: center;
}
@media only screen and (min-width : 768px) {
  .no-controls .carousel-control-prev,
.no-controls .carousel-control-next {
    display: none;
  }
  .carousel-control-prev,
.carousel-control-next {
    width: 10%;
  }
}
@media only screen and (min-width : 768px) {
}
@media only screen and (min-width : 1024px) {
  .carousel-control-prev,
.carousel-control-next {
    width: 5%;
  }
}
.carousel-control-prev:hover, .carousel-control-prev:focus,
.carousel-control-next:hover,
.carousel-control-next:focus {
  outline: 0;
  color: var(--accent);
  text-decoration: none;
}
.carousel-control-prev .fa,
.carousel-control-next .fa {
  display: inline-block;
  z-index: 5;
  position: absolute;
  top: 50%;
  margin-top: -10px;
}

.carousel-control-prev .fa {
  left: 50%;
  margin-left: -10px;
}

.carousel-control-next {
  right: 0;
  left: auto;
}
.carousel-control-next .fa {
  right: 50%;
  margin-right: -10px;
}

@media only screen and (min-width : 768px) {
  .carousel-control-prev .fas,
.carousel-control-next .fas {
    width: 1.6875em;
    height: 1.6875em;
    margin-top: -0.5625em;
    font-size: 1.6875em;
  }

  .carousel-control-prev .fa {
    margin-left: -0.5625em;
  }

  .carousel-control-next .fa {
    margin-right: -0.5625em;
  }
}
.icon-toggle_bars-times:before {
  content: "\f2d3";
}
.collapsed > .icon-toggle_bars-times:before, .collapsed .icon-toggle_bars-times:before {
  content: "\f0c9";
}

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

.icon-toggle_plus-minus-sub:before {
  content: "\f068";
}
.collapsed > .icon-toggle_plus-minus-sub:before, .collapsed .icon-toggle_plus-minus-sub:before {
  content: "\f067";
}

.navbar {
  font-family: var(--font-family_accent);
}

.dropdown-menu {
  font-family: var(--font-family_ui);
}

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

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

.navbar-primary .dropdown-toggle:after {
  display: none;
}

.navbar-primary .nav-item .nav-link {
  color: inherit;
}

.navbar-primary .nav-item:hover, .navbar-primary .nav-item:focus-visible {
  border-top-color: var(--accent);
  border-bottom-color: #fff;
  background-color: #fff;
  color: var(--acc);
}
@media only screen and (min-width : 768px) {
  .navbar-primary .nav-item {
    border-top: 0.25rem var(--acc) solid;
    border-bottom: 0.25rem var(--acc) solid;
  }
  .navbar-primary .nav-item:hover, .navbar-primary .nav-item:focus-visible {
    border-top-color: var(--accent);
    border-bottom-color: #fff;
    background-color: #fff;
    color: var(--acc);
  }
}

@media only screen and (min-width : 1024px) {
  .navbar-primary .navbar-nav .nav-item {
    border-top: 0.25rem var(--acc) solid;
    border-bottom: 0.25rem var(--acc) solid;
  }
  .navbar-primary .navbar-nav .nav-item .nav-link, .navbar-primary .navbar-nav .nav-item .nav-link:hover, .navbar-primary .navbar-nav .nav-item .nav-link:focus-visible {
    color: inherit;
  }
  .navbar-primary .navbar-nav .nav-item:hover, .navbar-primary .navbar-nav .nav-item:focus-visible {
    border-top-color: var(--accent);
    border-bottom-color: #fff;
    background-color: #fff;
    color: var(--acc);
  }
  .navbar-primary .navbar-nav .nav-item:hover .nav-link, .navbar-primary .navbar-nav .nav-item:hover .nav-link:hover, .navbar-primary .navbar-nav .nav-item:hover .nav-link:focus-visible, .navbar-primary .navbar-nav .nav-item:focus-visible .nav-link, .navbar-primary .navbar-nav .nav-item:focus-visible .nav-link:hover, .navbar-primary .navbar-nav .nav-item:focus-visible .nav-link:focus-visible {
    color: inherit;
  }
}

@media only screen and (min-width : 1024px) {
  .collapse.block\:lg {
    display: block;
  }
}
.dropdown-item {
  color: hsla(var(--primary-h), calc( var(--primary-s) + ((100% - var(--primary-s)) * 0.015) ), calc( var( --primary-l ) - ( var( --primary-l ) * 0.15 ) ), 1);
}
.dropdown-item:hover, .dropdown-item:focus-visible {
  background-color: var(--accent);
  color: white;
}

.dropdown_column {
  min-width: 70vw;
}

@media only screen and (min-width : 768px) {
  .dropdown_column {
    min-width: 20rem;
  }
}
.navbar-primary .navbar-nav .nav-item.active {
  border-top-color: hsla(var(--secondary-h), calc( var( --secondary-s ) - ( var( --secondary-s ) * 0.125 ) ), calc( var(--secondary-l) + ((100% - var(--secondary-l)) * 0.25) ), 1);
  border-bottom-color: hsla(var(--secondary-h), calc( var( --secondary-s ) - ( var( --secondary-s ) * 0.125 ) ), calc( var(--secondary-l) + ((100% - var(--secondary-l)) * 0.25) ), 1);
  background-color: hsla(var(--secondary-h), calc( var( --secondary-s ) - ( var( --secondary-s ) * 0.125 ) ), calc( var(--secondary-l) + ((100% - var(--secondary-l)) * 0.25) ), 1);
  color: #fff;
}
.navbar-primary .navbar-nav .nav-item.active .nav-link.active {
  color: inherit;
}
.navbar-primary .navbar-nav .nav-item.active:hover {
  border-top-color: var(--accent);
  color: var(--acc);
}

.accordion i.icon-toggle_plus-minus:before {
  content: "\f146";
}
.accordion .collapsed i.icon-toggle_plus-minus:before {
  content: "\f0fe";
}

.navbar {
  font-family: var(--font-family_accent);
}

.dropdown-menu {
  font-family: var(--font-family_ui);
}

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

.navbar-primary .dropdown-toggle:after {
  display: none;
}

@media only screen and (min-width : 768px) {
  .navbar-primary.navbar-expand-md .nav-item {
    border-top: 0.25rem var(--accent) solid;
    border-bottom: 0;
  }
  .navbar-primary.navbar-expand-md .nav-item.active, .navbar-primary.navbar-expand-md .nav-item.show, .navbar-primary.navbar-expand-md .nav-item:hover {
    border-top-color: hsla(var(--secondary-h), calc( var(--secondary-s) + ((100% - var(--secondary-s)) * 0.015) ), calc( var( --secondary-l ) - ( var( --secondary-l ) * 0.15 ) ), 1);
    border-bottom-color: #fff;
    background-color: hsla(var(--shade-h), calc( var(--shade-s) + ((100% - var(--shade-s)) * 0.015) ), calc( var( --shade-l ) - ( var( --shade-l ) * 0.15 ) ), 1);
  }
  .navbar-primary.navbar-expand-md .nav-item.active .nav-link, .navbar-primary.navbar-expand-md .nav-item.show .nav-link, .navbar-primary.navbar-expand-md .nav-item:hover .nav-link {
    color: white;
  }
  .navbar-primary.navbar-expand-md .nav-item .nav-item {
    border-top: none 0px;
    border-bottom: none 0px;
  }
}

@media only screen and (min-width : 1024px) {
  .navbar-primary.navbar-expand-lg .nav-item {
    border-top: 0.25rem var(--accent) solid;
    border-bottom: 0;
  }
  .navbar-primary.navbar-expand-lg .nav-item.active, .navbar-primary.navbar-expand-lg .nav-item.show, .navbar-primary.navbar-expand-lg .nav-item:hover {
    border-top-color: hsla(var(--secondary-h), calc( var(--secondary-s) + ((100% - var(--secondary-s)) * 0.015) ), calc( var( --secondary-l ) - ( var( --secondary-l ) * 0.15 ) ), 1);
    border-bottom-color: #fff;
    background-color: hsla(var(--shade-h), calc( var(--shade-s) + ((100% - var(--shade-s)) * 0.015) ), calc( var( --shade-l ) - ( var( --shade-l ) * 0.15 ) ), 1);
  }
  .navbar-primary.navbar-expand-lg .nav-item.active .nav-link, .navbar-primary.navbar-expand-lg .nav-item.show .nav-link, .navbar-primary.navbar-expand-lg .nav-item:hover .nav-link {
    color: white;
  }
}
.navbar-primary.navbar-expand-lg .nav-item.dropdown .nav-item {
  border-top: none 0px;
  border-bottom: none 0px;
}

@media only screen and (min-width : 460px) {
  .navbar-expand-sm .dropdown:hover > .dropdown-menu {
    display: block;
  }
}
@media only screen and (min-width : 768px) {
  .navbar-expand-md .dropdown:hover > .dropdown-menu {
    display: block;
  }
}
@media only screen and (min-width : 1024px) {
  .navbar-expand-lg .dropdown:hover > .dropdown-menu {
    display: block;
  }
}

.dropdown-item {
  color: hsla(var(--primary-h), calc( var(--primary-s) + ((100% - var(--primary-s)) * 0.015) ), calc( var( --primary-l ) - ( var( --primary-l ) * 0.15 ) ), 1);
}
.dropdown-item:hover {
  color: white;
}

.show > i.icon-toggle_plus-minus:before, .dropdown:hover i.icon-toggle_plus-minus:before {
  content: "\f146";
}

/* 

Primary Nav 

The Header Nav of ACC.org 

Markup:
<div class="flex relative font_display font_medium">
	<nav class="bg_shade-1  flex_auto font_0 font_1:lg font_display navbar navbar-dark navbar-expand-lg navbar-primary p-x_0 uppercase">
		<a class="br_white-2 flex is-active_toggle-function m-l_3 m-l_n2 m-y_2 navbar-toggler p-l_2 p-r_3 p-y_2 collapsed" type="button" data-toggle="collapse" data-target="#navbarLoginContent" aria-controls="navbarLoginContent" aria-expanded="false" aria-label="Toggle navigation">
			<i class="a:c_secondary c_white fas flex_shrink font_0 icon-toggle_bars-times self_center"></i><span class="a:c_acc-2 c_white flex_auto self_center">&nbsp;Menu</span>
		</a>
		<div class="navbar-collapse collapse" id="navbarLoginContent" style="">
			<ul class="expand expanded flex flex_column flex_row:lg nav text_center:lg text_left w_100">
				<li class="nav-item flex_shrink">
					<a class="active c_white h:bg_shade nav-link p-x_4 p-x_5:lg" href="//www.acc.org/guidelines#doctype=Guidelines" title="Access ACC guidelines and clinical policy documents as well as related resources"><i class="fas fa-home"></i><span class="display_none:lg p-x_3">Home</span></a>
				</li>
				<li class="nav-item flex_auto dropdown lh_2">
					<a class="c_white dropdown-toggle h:bg_shade is-active_toggle-function nav-link p-x_4" href="/NCDR-Home" target="_self" data-delay="300" data-close-others="false" id="clinicalTopicsDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="far faw icon-toggle_plus-minus display_none:lg m-l_n2 m-r_2"></i>Clinical Topics</a>
					<div class="absolute:lg br_1 br_none br_shade-3 br_solid:lg c_white dropdown-menu font_bold l_0 m-t_0 m-x_0 m-x_0:lg p_0 r_0 relative w_100" aria-labelledby="clinicalTopicsDropdown">
						<ul class="bg_shade-5 font_0 font_bold lh_1 ul_none">
							<li class="nav-item"><a class="c_black-8 dropdown-item h:bg_black-2 h:c_white nav-link p-x_5 text-indent_n1 wrap" href="/NCDR-Home/about-ncdr" target="_self">About NCDR</a></li>
							<li class="nav-item"><a class="c_black-8 dropdown-item h:bg_black-2 h:c_white nav-link p-x_5 text-indent_n1 wrap" href="/NCDR-Home/registries" target="_self">Registries</a></li>
							<li class="nav-item"><a class="c_black-8 dropdown-item h:bg_black-2 h:c_white nav-link p-x_5 text-indent_n1 wrap" href="/NCDR-Home/data-collection" target="_self">Data Collection</a></li>
							<li class="nav-item"><a class="c_black-8 dropdown-item h:bg_black-2 h:c_white nav-link p-x_5 text-indent_n1 wrap" href="/NCDR-Home/reports" target="_self">Reports</a></li>
							<li class="nav-item"><a class="c_black-8 dropdown-item h:bg_black-2 h:c_white nav-link p-x_5 text-indent_n1 wrap" href="/NCDR-Home/quality-payment-program" target="_self">Quality Payment Program</a></li>
							<li class="nav-item"><a class="c_black-8 dropdown-item h:bg_black-2 h:c_white nav-link p-x_5 text-indent_n1 wrap" href="/NCDR-Home/research" target="_self">Research</a></li>
							<li class="nav-item"><a class="c_black-8 dropdown-item h:bg_black-2 h:c_white nav-link p-x_5 text-indent_n1 wrap" href="/NCDR-Home/analytics" target="_self">Analytics</a></li>
							<li class="nav-item"><a class="c_black-8 dropdown-item h:bg_black-2 h:c_white nav-link p-x_5 text-indent_n1 wrap" href="/NCDR-Home/annual-conference" target="_self">ACC Quality Summit</a></li>
							<li class="nav-item"><a class="c_black-8 dropdown-item h:bg_black-2 h:c_white nav-link p-x_5 text-indent_n1 wrap" href="/NCDR-Home/ncdr-learning-center" target="_self">NCDR Learning Center</a></li>
							<li class="nav-item"><a class="c_black-8 dropdown-item h:bg_black-2 h:c_white nav-link p-x_5 text-indent_n1 wrap" href="/NCDR-Home/transform-ldl-c-risk" target="_self">TRANSFORM LDL C Risk</a></li>
							<li class="nav-item"><a class="c_black-8 dropdown-item h:bg_black-2 h:c_white nav-link p-x_5 text-indent_n1 wrap" href="/NCDR-Home/participant-directory" target="_self">Participant Directory</a></li>
							<li class="nav-item"><a class="c_black-8 dropdown-item h:bg_black-2 h:c_white nav-link p-x_5 text-indent_n1 wrap" href="/NCDR-Home/acc-public-reporting" target="_self">ACC Public Reporting</a></li>
							<li class="nav-item"><a class="c_black-8 dropdown-item h:bg_black-2 h:c_white nav-link p-x_5 text-indent_n1 wrap" href="/NCDR-Home/clinical-quality-coach" target="_self">NCDR Clinical Quality Coach Practice Dashboard</a></li>
							<li class="nav-item"><a class="c_black-8 dropdown-item h:bg_black-2 h:c_white nav-link p-x_5 text-indent_n1 wrap" href="https://www.ncdr.com/webncdr/Login?ReturnUrl=/webncdr/home/registry-selection" target="_self">Registry Participant Login</a></li>
							<li class="nav-item"><a class="c_black-8 dropdown-item h:bg_black-2 h:c_white nav-link p-x_5 text-indent_n1 wrap" href="/NCDR-Home/join-a-registry" target="_self">Join a Registry</a></li>
						</ul>
					</div>
				</li>
				<li class="nav-item flex_auto">
					<a class="nav-link active h:bg_shade c_white p-x_4" href="#">deserunt</a>
				</li>
				<li class="nav-item flex_auto">
					<a class="nav-link h:bg_shade c_white p-x_4" href="#">sit dolor commodo</a>
				</li>
				<li class="nav-item flex_auto">
					<a class="nav-link h:bg_shade c_white p-x_4" href="#">adipisicing</a>
				</li>
			</ul>
		</div>
	</nav>
	<nav class="absolute flex_shrink font_0 font_1:lg gradient_teal navbar navbar-dark navbar-expand p-b_1 p_0 r_0 relative:lg">
		<ul class="navbar-nav">
			<li class="dropdown h:gradient_teal-reverse nav-item show">
				<a class="block is-active_toggle-function nav-link p-x_5:lg" id="myACCDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"><i class="far icon-toggle_chevron-up-down"></i> Sign In</a>
				<div class="br_none br_solid:lg dropdown-menu dropdown-menu-right font_0 m-t_n1 p_0 r_0 show" aria-labelledby="navbarDropdown">
					<ul class="ul_none">
						<li class="nav-item">
							<a class="dropdown-item nav-link bg_secondary h:bg_secondary-n2 c_white flex" href="#">
								<span class="flex_auto inline-block p-l_2 p-r_4 uppercase">CV Quality </span>
								<span class="c_white-7 flex-shrink font_n1 p-x_3 self_center">Log Out <i class="fas fa-sign-out"></i></span></a>
						</li>
						<li class="nav-item">
							<a class="dropdown-item nav-link flex bg_primary-n1 h:bg_primary-n3 c_white" href="#"><span class="flex_auto inline-block p-l_2 p-r_4 uppercase">Accreditation</span>
								<span class="c_white-7 flex-shrink font_n1 p-x_3 self_center">Log In <i class="fas fa-sign-in"></i></span></a>
						</li>
						<li class="nav-item">
							<a class="dropdown-item nav-link flex bg_primary-n1 h:bg_primary-n3 c_white" href="#"><span class="flex_auto inline-block p-l_2 p-r_4 uppercase">NCDR</span>
								<span class="c_white-7 flex-shrink font_n1 p-x_3 self_center">Log In <i class="fas fa-sign-in"></i></span></a>
						</li>
					</ul>
				</div>
			</li>
			<li class="br-l_1 br_solid br_white-3 h:gradient_teal-reverse nav-item">
				<a class=" nav-link" href="#" title="Sign Out of all Systems"><i class="fas fa-sign-out-alt"></i></a>
			</li>
		</ul>
	</nav>
</div>

Weight: -100 

Styleguide Recipes.Navs.Primary

*/
.card.testimonial,
.card.product {
  margin-top: 0;
  padding: 0;
  border-width: 1px;
  border-style: solid;
}
@media only screen and (min-width : 768px) {
  .card.testimonial,
.card.product {
    margin-top: 100px;
  }
}
.card.testimonial .card-header,
.card.product .card-header {
  margin-bottom: 75px;
}
@media only screen and (min-width : 768px) {
  .card.testimonial .card-header,
.card.product .card-header {
    margin-bottom: 0;
  }
}
.card.testimonial .card-img,
.card.product .card-img {
  width: 100px;
  height: 100px;
  margin: 20px auto -50px;
}
@media only screen and (min-width : 768px) {
  .card.testimonial .card-img,
.card.product .card-img {
    width: 200px;
    height: 200px;
    margin: -100px auto 20px;
  }
}
.card.testimonial .card-body,
.card.product .card-body {
  position: relative;
  padding: 10px 1em 1em;
}
.card.testimonial .blockquote,
.card.product .blockquote {
  position: relative;
  text-align: center;
}
.card.testimonial .blockquote p,
.card.testimonial .blockquote-cite,
.card.product .blockquote p,
.card.product .blockquote-cite {
  display: block;
}
.card.testimonial .blockquote p,
.card.product .blockquote p {
  font-size: 1.125em;
}
.card.testimonial .blockquote p:before, .card.testimonial .blockquote p:after,
.card.product .blockquote p:before,
.card.product .blockquote p:after {
  color: #ffc425;
}
.card.testimonial .blockquote p:before,
.card.product .blockquote p:before {
  margin-right: 0.5em;
  content: "\f10d";
}
.card.testimonial .blockquote p:after,
.card.product .blockquote p:after {
  margin-left: 0.5em;
  content: "\f10e";
}
.card.testimonial .blockquote-cite,
.card.product .blockquote-cite {
  position: relative;
  right: 0;
  color: hsla(var(--shade-h), calc( var( --shade-s ) - ( var( --shade-s ) * 0.125 ) ), calc( var(--shade-l) + ((100% - var(--shade-l)) * 0.25) ), 1);
  font-size: 1em;
}
.card.testimonial .blockquote-cite:after,
.card.product .blockquote-cite:after {
  margin-left: 0.5em;
  content: "\f007";
}

/**
* Horizontal Testimonial are compact containers for Testimonial Data Type 
*
* @molecule Testimonial Card (.horizontal)
* @section Card > Testimonial
* @flag contained
* @markup
*  <div class="card testimonial horizontal">
*    <header class="card-header">
*       <img class="card-img  img-thumbnail" src="@{image:200:200}"/>
*    </header>
*    <div class="card-body">
*      <article class="blockquote">
*        <p>@{lipsum:15:words}</p>
*        <cite class="blockquote-cite">Someone famous</cite>
*      </article>
*    </div>
*  </div>
*
*/
@media only screen and (min-width : 768px) {
  .card.testimonial.horizontal,
.card.product {
    display: block;
    display: flex;
    flex-direction: row;
    margin-top: 0;
  }
  .card.testimonial.horizontal .card-header,
.card.testimonial.horizontal .card-body,
.card.product .card-header,
.card.product .card-body {
    flex: 0 1 auto;
    width: unset;
    margin: 0;
    padding: 10px;
    float: none;
    vertical-align: middle;
  }
  .card.testimonial.horizontal .card-img,
.card.product .card-img {
    width: 125px;
    height: 125px;
    margin: 10px;
  }
  .card.testimonial.horizontal .card-header,
.card.product .card-header {
    min-width: 160px;
  }
  .card.testimonial.horizontal .card-body,
.card.product .card-body {
    text-align: left;
  }
  .card.testimonial.horizontal .card-body .blockquote-cite,
.card.product .card-body .blockquote-cite {
    float: none;
  }
  .card.testimonial.horizontal .blockquote,
.card.product .blockquote {
    text-align: left;
  }
  .card.testimonial.horizontal .blockquote-cite,
.card.product .blockquote-cite {
    display: block;
    text-align: right;
  }
}

.card.testimonial.horizontal.undecorated,
.card.testimonial.undecorated {
  margin-top: 0;
}
.card.testimonial.horizontal.undecorated .card-header,
.card.testimonial.undecorated .card-header {
  display: none !important;
}

.card.testimonial.vertical-spacing {
  margin-bottom: 120px;
}

/*
Webinar

Graphic areas that hold a snippet of a webinar.
| Classes          | Effect                       |
| ---------------- | ---------------------------- |
| .ep-webinar      | Changes the product graphic. |
| .afib-webinar    | Changes the product graphic. |
| .cathlab-webinar | Changes the product graphic. |
| .cpc-webinar     | Changes the product graphic. |
| .fsed-webinar    | Changes the product graphic. |
| .hf-webinar      | Changes the product graphic. |



.ep-webinar      	- 	 Changes the product graphic.
.afib-webinar    	- 	 Changes the product graphic.
.cathlab-webinar 	- 	 Changes the product graphic.
.cpc-webinar     	- 	 Changes the product graphic.
.fsed-webinar    	- 	 Changes the product graphic.
.hf-webinar      	- 	 Changes the product graphic.

Markup:
<div class="bg_shade-5 br_4 br_none br_radius br_shade-4 br_solid card flex_row:md shadow_3"  data-style="{{ modifier_class }}" >
    <div class="bg_black-1 card-header br_0 flex_shrink">
        <div class="bg_white br_2 br_shade-3 br_solid {{modifier_class}} m-b_3 p_2 webinar"></div>
		<div class="action">
			<a class="btn btn-block btn-primary c_white">View Webinar <i class="fa fa-play-circle" aria-hidden="true"></i></a>
		</div>
    </div>
    <div class="card-body flex_auto">
        <div class="title">
        	<a>labore ad nisi velit labore commodo nisi tempor occaecat fugiat anim commodo</a>
        </div>
        <div class="view-time"><strong>View Time:</strong>&nbsp;<span>71 minutes</span></div>
    </div>
</div>


 Styleguide Recipes.Cards.Webinar

*/
/*
Webinar Buttons

Graphic areas that hold a snippet of a webinar.
| Style Combo | Effect                                                             | Classes                                      |
| ----------- | ------------------------------------------------------------------ | -------------------------------------------- |
| primary     | Alters the button style to a btn-primary instead of just a link.   | btn-primary c_white                          |
| shade   | Alters the button style to a btn-shade instead of just a link. | btn-shade c_white                        |
| success     | Alters the button style to a btn-success instead of just a link.   | bg_success h:bg_success-n2 br_radius c_white |



.btn-primary.c_white                            -  Alters the button style to a btn-primary instead of just a link.  
.btn-shade.c_white                          -  Alters the button style to a btn-shade instead of just a link.
.bg_success.h:bg_success-n2.br_radius.c_white   -  Alters the button style to a btn-success instead of just a link.  

Markup:
<div class="bg_shade-5 br_4 br_none br_radius br_shade-4 br_solid card flex_row:md shadow_3"  data-style="{{ modifier_class }}" >
    <div class="bg_black-1 card-header  br_0 flex_shrink">
        <div class="bg_white br_2 br_shade-3 br_solid ep-webinar m-b_3 p_2 webinar"></div>
		<div class="action">
			<a class="btn btn-block {{modifier_class}}">View Webinar <i class="fa fa-play-circle" aria-hidden="true"></i></a>
		</div>
    </div>
    <div class="card-body flex_auto">
        <div class="title">
        	<a>labore ad nisi velit labore commodo nisi tempor occaecat fugiat anim commodo</a>
        </div>
        <div class="view-time"><strong>View Time:</strong>&nbsp;<span>71 minutes</span></div>
    </div>
</div>


 Styleguide Recipes.Cards.Webinar Buttons

*/
.webinar {
  width: 100%;
  height: 140px;
  background-image: url(../img/cvquality/webinar/webinar-thumbnail.jpg);
  background-position: center center;
  background-size: contain;
  background-repeat: no-repeat;
}
.webinar.ep-webinar {
  background-image: url(../img/cvquality/webinar/ep-webinar-thumbnail.jpg);
}
.webinar.afib-webinar {
  background-image: url(../img/cvquality/webinar/afib-webinar-thumbnail.jpg);
}
.webinar.cathlab-webinar {
  background-image: url(../img/cvquality/webinar/cathlab-webinar-thumbnail.jpg);
}
.webinar.cpc-webinar {
  background-image: url(../img/cvquality/webinar/cpc-webinar-thumbnail.jpg);
}
.webinar.fsed-webinar {
  background-image: url(../img/cvquality/webinar/fsed-webinar-thumbnail.jpg);
}
.webinar.hf-webinar {
  background-image: url(../img/cvquality/webinar/hf-webinar-thumbnail.jpg);
}

/*
Jumbotron

Jumbotron are hero content areas. Larger marketing text with a colored backgrounds to grab the user or mark the page as important. By default Jumbotron is dark text on a light grey background the UC's add some predefined colored backgrounds allow for modificaiton of the area. The backgrounds were generated by this online generator https://qrohlf.com/trianglify-generator/.
| Class        | Effect                                               |
| ------------ | ---------------------------------------------------- |
| .orange-blue | orange to blue background                            |
| .orange-grey | orange to grey background                            |
| .blue-grey   | blue to grey background                              |
| .soft        | softens the edges of the triangles in the background |
| .blur        | blurs the back to a smooth gradient                  |

.orange-blue 		      - 	orange to blue background
.orange-grey 		      - 	orange to grey background
.blue-grey 			      - 	blue to grey background
.soft				      - 	softens the edges of the triangles in the background 
.blur.blue-grey 	      - 	blurs the back to a smooth gradient

 Markup:
<div class="jumbotron relative overflow_hidden br_round {{modifier_class}}">
   <div class="container p-x_4 max-w_60 w_auto m_auto">
         <h1 class="c_black font_10:lg font_6 font_8:md">I am a Jumbotron!</h1>
         <p class="font_1 font_1:md font_3:lg">Doloribus omnis facere voluptatibus beatae.</p>
         <div><a class="br_radius btn btn-primary gradient_teal h:gradient_teal-reverse" href="#" role="button">Learn more</a></div>
   </div>
</div>

Weight: 50

Styleguide Recipes.Containers.Jumbotron

*/
.jumbotron:before {
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  display: block;
  z-index: 1;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: url("../img/cvquality/pattern-grey.png") no-repeat center center;
  background-size: cover;
  content: "";
}
.jumbotron.orange-blue:before {
  background-image: url("../img/cvquality/pattern-orange-blue.png");
}
.jumbotron.orange-grey:before {
  background-image: url("../img/cvquality/pattern-orange-grey.png");
}
.jumbotron.blue-grey:before {
  background-image: url("../img/cvquality/pattern-blue-grey.png");
}
.jumbotron.soft:before {
  -webkit-filter: blur(3px);
  -moz-filter: blur(3px);
  -o-filter: blur(3px);
  -ms-filter: blur(3px);
  top: -3px;
  right: -3px;
  bottom: -3px;
  left: -3px;
  filter: blur(3px);
}
.jumbotron.blur:before {
  -webkit-filter: blur(25px);
  -moz-filter: blur(25px);
  -o-filter: blur(25px);
  -ms-filter: blur(25px);
  top: -25px;
  right: -25px;
  bottom: -25px;
  left: -25px;
  filter: blur(25px);
}
.jumbotron .container {
  z-index: 3;
}

/*
Triangles

Colored Triangles are used through out the cvquality design.  To add triangle that adhears to the side of a container and takes on the color of the border color of the container. 

.triangle_left   -  left placed triangle.
.triangle_right   -  right placed triangle.
.triangle_bottom   -  bottom placed triangle.
.triangle_top   -  top placed triangle.

Markup:
<div class="bg_shade-5 br_1 br_accent br_radius card highlighted shadow_1 ">
 <div class="{{modifier_class}} br_accent"><h2 class="bg_tansparent br-b_0 c_accent c_shade-n4 card-header font_1 font_2:md font_bold font_display p-b_3 p-x_3 p-x_3:md p-x_4:lg uppercase">Highlighted Card</h2>
  <div class="card-body font_0 font_1:md font_ui lh_2 p-b_0 p-x_3 p-x_3:md p-x_4:lg p-y_0">
    <p>Repudiandae adipisci illum omnis et suscipit at amet ex. Error magni laborum autem et rerum porro asperiores sunt. Et veritatis rerum voluptas hic eum sint. Ipsa labore eos autem cupiditate ut molestiae sit fugiat. Rerum sit dolorem veritatis est quia nesciunt tenetur ut. Animi earum illo sed incidunt fuga.</p>
  </div>
   <div class="bg_tansparent br-t_0 card-footer p-t_0 p-x_3 p-x_3:md p-x_4:lg"> <a href="#" class="btn btn-block btn-primary font_0:md font_n1">Action</a></div></div>
</div>

Styleguide Recipes.Decorator.Triangles
*/
*[class*=triangle] {
  position: relative;
}

*[class*=triangle]::before {
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  content: "";
}

.triangle_left::before,
.triangle_right::before {
  top: 50%;
  margin-top: -0.5em;
}

.triangle_top::before,
.triangle_bottom::before {
  left: 50%;
  margin-left: -0.5em;
}

.triangle_left {
  margin-left: 0.75em;
}

.triangle_right {
  margin-right: 0.75em;
}

.triangle_top {
  margin-top: 0.75em;
}

.triangle_bottom {
  margin-bottom: 0.75em;
}

.triangle_left::before {
  left: -0.75em;
  border-width: 0.5em 0 0.5em 0.75em;
  border-top-color: #0000;
  border-right-color: #0000;
  border-bottom-color: #0000;
  border-left-color: inherit;
}

.triangle_right::before {
  right: -0.75em;
  border-width: 0.5em 0.75em 0.5em 0;
  border-top-color: #0000;
  border-right-color: inherit;
  border-bottom-color: #0000;
  border-left-color: #0000;
}

.triangle_top::before {
  top: -0.75em;
  border-width: 0.75em 0.5em 0 0.5em;
  border-top-color: inherit;
  border-right-color: #0000;
  border-bottom-color: #0000;
  border-left-color: #0000;
}

.triangle_bottom::before {
  bottom: -0.75em;
  border-width: 0 0.5em 0.75em 0.5em;
  border-top-color: #0000;
  border-right-color: #0000;
  border-bottom-color: inherit;
  border-left-color: #0000;
}

/*
Backend Content Decorators

sfEditor-show					- a class for showing items that might be only useful for a backend CMS User.
visible-anonymous-block 		- decoration for containers that hold content for users not logged in.
visible-authenticated-block		- decoration for containers that hold content for users are authenticated.


Markup:
<div class="{{modifier_class}} ">
	<h3 class="m_4">{{modifier_class}}</h3>
</div>


MarkupWrapperClasses: sfPageEditor

HideCodeBlock: display_none

Weight: 10000

Styleguide Sitefinity.BackEndAuthenticated
*/
.sfPageEditor .visible-anonymous-block, .sfPageEditor .visible-authenticated-block {
  display: block !important;
  margin: 5px;
  border: 2px dotted transparent;
  opacity: 0.75;
}

.sfPageEditor .visible-anonymous-block:after, .sfPageEditor .visible-anonymous-block:before, .sfPageEditor .visible-authenticated-block:after, .sfPageEditor .visible-authenticated-block:before {
  display: block;
  position: relative;
  font-size: 12px;
  text-align: center;
}

.sfEditor-show {
  display: none;
}

.sfPageEditor .sfEditor-show {
  display: block !important;
  opacity: 0.5;
}

.sfPageEditor .visible-anonymous-block img,
.sfPageEditor .visible-authenticated-block img {
  display: none;
}
.sfPageEditor .visible-authenticated-block {
  border-color: hsla(var(--accent-h), calc( var( --accent-s ) - ( var( --accent-s ) * 0.125 ) ), calc( var(--accent-l) + ((100% - var(--accent-l)) * 0.25) ), 1);
  background-color: hsla(var(--accent-h), calc( var( --accent-s ) - ( var( --accent-s ) * 0.45 ) ), calc( var(--accent-l) + ((100% - var(--accent-l)) * 0.9) ), 1);
}
.sfPageEditor .visible-authenticated-block:after, .sfPageEditor .visible-authenticated-block:before {
  content: "AUTHENTICATED CONTENT -  Permision/Role/Authenticated";
  color: hsla(var(--accent-h), calc( var(--accent-s) + ((100% - var(--accent-s)) * 0.015) ), calc( var( --accent-l ) - ( var( --accent-l ) * 0.15 ) ), 1);
}
.sfPageEditor .visible-anonymous-block {
  border-color: hsla(var(--highlight-h), calc( var( --highlight-s ) - ( var( --highlight-s ) * 0.125 ) ), calc( var(--highlight-l) + ((100% - var(--highlight-l)) * 0.25) ), 1);
  background-color: hsla(var(--highlight-h), calc( var( --highlight-s ) - ( var( --highlight-s ) * 0.45 ) ), calc( var(--highlight-l) + ((100% - var(--highlight-l)) * 0.9) ), 1);
}
.sfPageEditor .visible-anonymous-block:after, .sfPageEditor .visible-anonymous-block:before {
  content: "ANONYMOUS CONTENT - Permision/Role/Anonymous";
  color: hsla(var(--highlight-h), calc( var(--highlight-s) + ((100% - var(--highlight-s)) * 0.015) ), calc( var( --highlight-l ) - ( var( --highlight-l ) * 0.15 ) ), 1);
}

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