@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 **/
[target=_blank].link::after, [target=_blank].link_icons::after, [target=_blank].link-light::after, .links_light.reading-typography a[target=_blank]:not(.btn, .not-link)::after, [target=_blank].link::after, :where(.reading-typography) a[target=_blank]:not(.btn, .not-link)::after, :where(.reading-typography) details > summary[target=_blank]::after, .links_dark.reading-typography a[target=_blank]:not(.btn, .not-link)::after, [href^=http][target=_blank].link::after, [href^=http][target=_blank].link_icons::after, [href^=http][target=_blank].link-light::after, .links_light.reading-typography a[href^=http][target=_blank]:not(.btn, .not-link)::after, [href^=http][target=_blank].link::after, :where(.reading-typography) a[href^=http][target=_blank]:not(.btn, .not-link)::after, :where(.reading-typography) details > summary[href^=http][target=_blank]::after, [href^=https][target=_blank].link::after, [href^=https][target=_blank].link_icons::after, [href^=https][target=_blank].link-light::after, .links_light.reading-typography a[href^=https][target=_blank]:not(.btn, .not-link)::after, [href^=https][target=_blank].link::after, :where(.reading-typography) a[href^=https][target=_blank]:not(.btn, .not-link)::after, :where(.reading-typography) details > summary[href^=https][target=_blank]::after, [href^="mailto:"].link::after, [href^="mailto:"].link_icons::after, [href^="mailto:"].link-light::after, .links_light.reading-typography a[href^="mailto:"]:not(.btn, .not-link)::after, [href^="mailto:"].link::after, :where(.reading-typography) a[href^="mailto:"]:not(.btn, .not-link)::after, :where(.reading-typography) details > summary[href^="mailto:"]::after, .links_dark.reading-typography a[href^="mailto:"]:not(.btn, .not-link)::after, [href^="tel:"].link::after, [href^="tel:"].link_icons::after, [href^="tel:"].link-light::after, .links_light.reading-typography a[href^="tel:"]:not(.btn, .not-link)::after, [href^="tel:"].link::after, :where(.reading-typography) a[href^="tel:"]:not(.btn, .not-link)::after, :where(.reading-typography) details > summary[href^="tel:"]::after, .links_dark.reading-typography a[href^="tel:"]:not(.btn, .not-link)::after, [href^="fax:"].link::after, [href^="fax:"].link_icons::after, [href^="fax:"].link-light::after, .links_light.reading-typography a[href^="fax:"]:not(.btn, .not-link)::after, [href^="fax:"].link::after, :where(.reading-typography) a[href^="fax:"]:not(.btn, .not-link)::after, :where(.reading-typography) details > summary[href^="fax:"]::after, .links_dark.reading-typography a[href^="fax:"]:not(.btn, .not-link)::after, [href*=".pdf"].link::before, [href*=".pdf"].link_icons::before, [href*=".pdf"].link-light::before, .links_light.reading-typography a[href*=".pdf"]:not(.btn, .not-link)::before, [href*=".pdf"].link::before, :where(.reading-typography) a[href*=".pdf"]:not(.btn, .not-link)::before, :where(.reading-typography) details > summary[href*=".pdf"]::before, .links_dark.reading-typography a[href*=".pdf"]:not(.btn, .not-link)::before, [href*=".doc"].link::before, [href*=".doc"].link_icons::before, [href*=".doc"].link-light::before, .links_light.reading-typography a[href*=".doc"]:not(.btn, .not-link)::before, [href*=".doc"].link::before, :where(.reading-typography) a[href*=".doc"]:not(.btn, .not-link)::before, :where(.reading-typography) details > summary[href*=".doc"]::before, .links_dark.reading-typography a[href*=".doc"]:not(.btn, .not-link)::before, [href*=".docx"].link::before, [href*=".docx"].link_icons::before, [href*=".docx"].link-light::before, .links_light.reading-typography a[href*=".docx"]:not(.btn, .not-link)::before, [href*=".docx"].link::before, :where(.reading-typography) a[href*=".docx"]:not(.btn, .not-link)::before, :where(.reading-typography) details > summary[href*=".docx"]::before, .links_dark.reading-typography a[href*=".docx"]:not(.btn, .not-link)::before, [href*=".txt"].link::before, [href*=".txt"].link_icons::before, [href*=".txt"].link-light::before, .links_light.reading-typography a[href*=".txt"]:not(.btn, .not-link)::before, [href*=".txt"].link::before, :where(.reading-typography) a[href*=".txt"]:not(.btn, .not-link)::before, :where(.reading-typography) details > summary[href*=".txt"]::before, .links_dark.reading-typography a[href*=".txt"]:not(.btn, .not-link)::before, [href*=".zip"].link::before, [href*=".zip"].link_icons::before, [href*=".zip"].link-light::before, .links_light.reading-typography a[href*=".zip"]:not(.btn, .not-link)::before, [href*=".zip"].link::before, :where(.reading-typography) a[href*=".zip"]:not(.btn, .not-link)::before, :where(.reading-typography) details > summary[href*=".zip"]::before, .links_dark.reading-typography a[href*=".zip"]:not(.btn, .not-link)::before, [href*=".ppt"].link::before, [href*=".ppt"].link_icons::before, [href*=".ppt"].link-light::before, .links_light.reading-typography a[href*=".ppt"]:not(.btn, .not-link)::before, [href*=".ppt"].link::before, :where(.reading-typography) a[href*=".ppt"]:not(.btn, .not-link)::before, :where(.reading-typography) details > summary[href*=".ppt"]::before, .links_dark.reading-typography a[href*=".ppt"]:not(.btn, .not-link)::before, [href*=".pptx"].link::before, [href*=".pptx"].link_icons::before, [href*=".pptx"].link-light::before, .links_light.reading-typography a[href*=".pptx"]:not(.btn, .not-link)::before, [href*=".pptx"].link::before, :where(.reading-typography) a[href*=".pptx"]:not(.btn, .not-link)::before, :where(.reading-typography) details > summary[href*=".pptx"]::before, .links_dark.reading-typography a[href*=".pptx"]:not(.btn, .not-link)::before, [href*=".csv"].link::before, [href*=".csv"].link_icons::before, [href*=".csv"].link-light::before, .links_light.reading-typography a[href*=".csv"]:not(.btn, .not-link)::before, [href*=".csv"].link::before, :where(.reading-typography) a[href*=".csv"]:not(.btn, .not-link)::before, :where(.reading-typography) details > summary[href*=".csv"]::before, .links_dark.reading-typography a[href*=".csv"]:not(.btn, .not-link)::before, [href*=".xls"].link::before, [href*=".xls"].link_icons::before, [href*=".xls"].link-light::before, .links_light.reading-typography a[href*=".xls"]:not(.btn, .not-link)::before, [href*=".xls"].link::before, :where(.reading-typography) a[href*=".xls"]:not(.btn, .not-link)::before, :where(.reading-typography) details > summary[href*=".xls"]::before, .links_dark.reading-typography a[href*=".xls"]:not(.btn, .not-link)::before, [href*=".xlsx"].link::before, [href*=".xlsx"].link_icons::before, [href*=".xlsx"].link-light::before, .links_light.reading-typography a[href*=".xlsx"]:not(.btn, .not-link)::before, [href*=".xlsx"].link::before, :where(.reading-typography) a[href*=".xlsx"]:not(.btn, .not-link)::before, :where(.reading-typography) details > summary[href*=".xlsx"]::before, .links_dark.reading-typography a[href*=".xlsx"]:not(.btn, .not-link)::before, [href*=".mp4"].link::before, [href*=".mp4"].link_icons::before, [href*=".mp4"].link-light::before, .links_light.reading-typography a[href*=".mp4"]:not(.btn, .not-link)::before, [href*=".mp4"].link::before, :where(.reading-typography) a[href*=".mp4"]:not(.btn, .not-link)::before, :where(.reading-typography) details > summary[href*=".mp4"]::before, .links_dark.reading-typography a[href*=".mp4"]:not(.btn, .not-link)::before, [href*=".mov"].link::before, [href*=".mov"].link_icons::before, [href*=".mov"].link-light::before, .links_light.reading-typography a[href*=".mov"]:not(.btn, .not-link)::before, [href*=".mov"].link::before, :where(.reading-typography) a[href*=".mov"]:not(.btn, .not-link)::before, :where(.reading-typography) details > summary[href*=".mov"]::before, .links_dark.reading-typography a[href*=".mov"]:not(.btn, .not-link)::before, .pdf.link::before, .pdf.link_icons::before, .pdf.link-light::before, .links_light.reading-typography a.pdf:not(.btn, .not-link)::before, .pdf.link::before, :where(.reading-typography) a.pdf:not(.btn, .not-link)::before, :where(.reading-typography) details > summary.pdf::before, .links_dark.reading-typography a.pdf:not(.btn, .not-link)::before, .zip.link::before, .zip.link_icons::before, .zip.link-light::before, .links_light.reading-typography a.zip:not(.btn, .not-link)::before, .zip.link::before, :where(.reading-typography) a.zip:not(.btn, .not-link)::before, :where(.reading-typography) details > summary.zip::before, .links_dark.reading-typography a.zip:not(.btn, .not-link)::before, .file.link::before, .file.link_icons::before, .file.link-light::before, .links_light.reading-typography a.file:not(.btn, .not-link)::before, .file.link::before, :where(.reading-typography) a.file:not(.btn, .not-link)::before, :where(.reading-typography) details > summary.file::before, .links_dark.reading-typography a.file:not(.btn, .not-link)::before, .sheet.link::before, .sheet.link_icons::before, .sheet.link-light::before, .links_light.reading-typography a.sheet:not(.btn, .not-link)::before, .sheet.link::before, :where(.reading-typography) a.sheet:not(.btn, .not-link)::before, :where(.reading-typography) details > summary.sheet::before, .links_dark.reading-typography a.sheet:not(.btn, .not-link)::before, .powerpoint.link::before, .powerpoint.link_icons::before, .powerpoint.link-light::before, .links_light.reading-typography a.powerpoint:not(.btn, .not-link)::before, .powerpoint.link::before, :where(.reading-typography) a.powerpoint:not(.btn, .not-link)::before, :where(.reading-typography) details > summary.powerpoint::before, .links_dark.reading-typography a.powerpoint:not(.btn, .not-link)::before, .video.link::before, .video.link_icons::before, .video.link-light::before, .links_light.reading-typography a.video:not(.btn, .not-link)::before, .video.link::before, :where(.reading-typography) a.video:not(.btn, .not-link)::before, :where(.reading-typography) details > summary.video::before, .links_dark.reading-typography a.video:not(.btn, .not-link)::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 should only be used as an augmenting stylesheet  **/
/**  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  **/
.disabled, .texture_dynamic, .texture_cross, .texture_disabled, .texture_dust, .texture_dark, .texture_medium, .texture_light {
  background-position: top right;
  background-repeat: repeat;
  background-origin: border-box;
  background-attachment: local;
}

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

[target=_blank].link::after, [target=_blank].link_icons::after, [target=_blank].link-light::after, .links_light.reading-typography a[target=_blank]:not(.btn, .not-link)::after, [target=_blank].link::after, :where(.reading-typography) a[target=_blank]:not(.btn, .not-link)::after, :where(.reading-typography) details > summary[target=_blank]::after, .links_dark.reading-typography a[target=_blank]:not(.btn, .not-link)::after, [href^=http][target=_blank].link::after, [href^=http][target=_blank].link_icons::after, [href^=http][target=_blank].link-light::after, .links_light.reading-typography a[href^=http][target=_blank]:not(.btn, .not-link)::after, [href^=http][target=_blank].link::after, :where(.reading-typography) a[href^=http][target=_blank]:not(.btn, .not-link)::after, :where(.reading-typography) details > summary[href^=http][target=_blank]::after, [href^=https][target=_blank].link::after, [href^=https][target=_blank].link_icons::after, [href^=https][target=_blank].link-light::after, .links_light.reading-typography a[href^=https][target=_blank]:not(.btn, .not-link)::after, [href^=https][target=_blank].link::after, :where(.reading-typography) a[href^=https][target=_blank]:not(.btn, .not-link)::after, :where(.reading-typography) details > summary[href^=https][target=_blank]::after, [href^="mailto:"].link::after, [href^="mailto:"].link_icons::after, [href^="mailto:"].link-light::after, .links_light.reading-typography a[href^="mailto:"]:not(.btn, .not-link)::after, [href^="mailto:"].link::after, :where(.reading-typography) a[href^="mailto:"]:not(.btn, .not-link)::after, :where(.reading-typography) details > summary[href^="mailto:"]::after, .links_dark.reading-typography a[href^="mailto:"]:not(.btn, .not-link)::after, [href^="tel:"].link::after, [href^="tel:"].link_icons::after, [href^="tel:"].link-light::after, .links_light.reading-typography a[href^="tel:"]:not(.btn, .not-link)::after, [href^="tel:"].link::after, :where(.reading-typography) a[href^="tel:"]:not(.btn, .not-link)::after, :where(.reading-typography) details > summary[href^="tel:"]::after, .links_dark.reading-typography a[href^="tel:"]:not(.btn, .not-link)::after, [href^="fax:"].link::after, [href^="fax:"].link_icons::after, [href^="fax:"].link-light::after, .links_light.reading-typography a[href^="fax:"]:not(.btn, .not-link)::after, [href^="fax:"].link::after, :where(.reading-typography) a[href^="fax:"]:not(.btn, .not-link)::after, :where(.reading-typography) details > summary[href^="fax:"]::after, .links_dark.reading-typography a[href^="fax:"]:not(.btn, .not-link)::after, [href*=".pdf"].link::before, [href*=".pdf"].link_icons::before, [href*=".pdf"].link-light::before, .links_light.reading-typography a[href*=".pdf"]:not(.btn, .not-link)::before, [href*=".pdf"].link::before, :where(.reading-typography) a[href*=".pdf"]:not(.btn, .not-link)::before, :where(.reading-typography) details > summary[href*=".pdf"]::before, .links_dark.reading-typography a[href*=".pdf"]:not(.btn, .not-link)::before, [href*=".doc"].link::before, [href*=".doc"].link_icons::before, [href*=".doc"].link-light::before, .links_light.reading-typography a[href*=".doc"]:not(.btn, .not-link)::before, [href*=".doc"].link::before, :where(.reading-typography) a[href*=".doc"]:not(.btn, .not-link)::before, :where(.reading-typography) details > summary[href*=".doc"]::before, .links_dark.reading-typography a[href*=".doc"]:not(.btn, .not-link)::before, [href*=".docx"].link::before, [href*=".docx"].link_icons::before, [href*=".docx"].link-light::before, .links_light.reading-typography a[href*=".docx"]:not(.btn, .not-link)::before, [href*=".docx"].link::before, :where(.reading-typography) a[href*=".docx"]:not(.btn, .not-link)::before, :where(.reading-typography) details > summary[href*=".docx"]::before, .links_dark.reading-typography a[href*=".docx"]:not(.btn, .not-link)::before, [href*=".txt"].link::before, [href*=".txt"].link_icons::before, [href*=".txt"].link-light::before, .links_light.reading-typography a[href*=".txt"]:not(.btn, .not-link)::before, [href*=".txt"].link::before, :where(.reading-typography) a[href*=".txt"]:not(.btn, .not-link)::before, :where(.reading-typography) details > summary[href*=".txt"]::before, .links_dark.reading-typography a[href*=".txt"]:not(.btn, .not-link)::before, [href*=".zip"].link::before, [href*=".zip"].link_icons::before, [href*=".zip"].link-light::before, .links_light.reading-typography a[href*=".zip"]:not(.btn, .not-link)::before, [href*=".zip"].link::before, :where(.reading-typography) a[href*=".zip"]:not(.btn, .not-link)::before, :where(.reading-typography) details > summary[href*=".zip"]::before, .links_dark.reading-typography a[href*=".zip"]:not(.btn, .not-link)::before, [href*=".ppt"].link::before, [href*=".ppt"].link_icons::before, [href*=".ppt"].link-light::before, .links_light.reading-typography a[href*=".ppt"]:not(.btn, .not-link)::before, [href*=".ppt"].link::before, :where(.reading-typography) a[href*=".ppt"]:not(.btn, .not-link)::before, :where(.reading-typography) details > summary[href*=".ppt"]::before, .links_dark.reading-typography a[href*=".ppt"]:not(.btn, .not-link)::before, [href*=".pptx"].link::before, [href*=".pptx"].link_icons::before, [href*=".pptx"].link-light::before, .links_light.reading-typography a[href*=".pptx"]:not(.btn, .not-link)::before, [href*=".pptx"].link::before, :where(.reading-typography) a[href*=".pptx"]:not(.btn, .not-link)::before, :where(.reading-typography) details > summary[href*=".pptx"]::before, .links_dark.reading-typography a[href*=".pptx"]:not(.btn, .not-link)::before, [href*=".csv"].link::before, [href*=".csv"].link_icons::before, [href*=".csv"].link-light::before, .links_light.reading-typography a[href*=".csv"]:not(.btn, .not-link)::before, [href*=".csv"].link::before, :where(.reading-typography) a[href*=".csv"]:not(.btn, .not-link)::before, :where(.reading-typography) details > summary[href*=".csv"]::before, .links_dark.reading-typography a[href*=".csv"]:not(.btn, .not-link)::before, [href*=".xls"].link::before, [href*=".xls"].link_icons::before, [href*=".xls"].link-light::before, .links_light.reading-typography a[href*=".xls"]:not(.btn, .not-link)::before, [href*=".xls"].link::before, :where(.reading-typography) a[href*=".xls"]:not(.btn, .not-link)::before, :where(.reading-typography) details > summary[href*=".xls"]::before, .links_dark.reading-typography a[href*=".xls"]:not(.btn, .not-link)::before, [href*=".xlsx"].link::before, [href*=".xlsx"].link_icons::before, [href*=".xlsx"].link-light::before, .links_light.reading-typography a[href*=".xlsx"]:not(.btn, .not-link)::before, [href*=".xlsx"].link::before, :where(.reading-typography) a[href*=".xlsx"]:not(.btn, .not-link)::before, :where(.reading-typography) details > summary[href*=".xlsx"]::before, .links_dark.reading-typography a[href*=".xlsx"]:not(.btn, .not-link)::before, [href*=".mp4"].link::before, [href*=".mp4"].link_icons::before, [href*=".mp4"].link-light::before, .links_light.reading-typography a[href*=".mp4"]:not(.btn, .not-link)::before, [href*=".mp4"].link::before, :where(.reading-typography) a[href*=".mp4"]:not(.btn, .not-link)::before, :where(.reading-typography) details > summary[href*=".mp4"]::before, .links_dark.reading-typography a[href*=".mp4"]:not(.btn, .not-link)::before, [href*=".mov"].link::before, [href*=".mov"].link_icons::before, [href*=".mov"].link-light::before, .links_light.reading-typography a[href*=".mov"]:not(.btn, .not-link)::before, [href*=".mov"].link::before, :where(.reading-typography) a[href*=".mov"]:not(.btn, .not-link)::before, :where(.reading-typography) details > summary[href*=".mov"]::before, .links_dark.reading-typography a[href*=".mov"]:not(.btn, .not-link)::before, .pdf.link::before, .pdf.link_icons::before, .pdf.link-light::before, .links_light.reading-typography a.pdf:not(.btn, .not-link)::before, .pdf.link::before, :where(.reading-typography) a.pdf:not(.btn, .not-link)::before, :where(.reading-typography) details > summary.pdf::before, .links_dark.reading-typography a.pdf:not(.btn, .not-link)::before, .zip.link::before, .zip.link_icons::before, .zip.link-light::before, .links_light.reading-typography a.zip:not(.btn, .not-link)::before, .zip.link::before, :where(.reading-typography) a.zip:not(.btn, .not-link)::before, :where(.reading-typography) details > summary.zip::before, .links_dark.reading-typography a.zip:not(.btn, .not-link)::before, .file.link::before, .file.link_icons::before, .file.link-light::before, .links_light.reading-typography a.file:not(.btn, .not-link)::before, .file.link::before, :where(.reading-typography) a.file:not(.btn, .not-link)::before, :where(.reading-typography) details > summary.file::before, .links_dark.reading-typography a.file:not(.btn, .not-link)::before, .sheet.link::before, .sheet.link_icons::before, .sheet.link-light::before, .links_light.reading-typography a.sheet:not(.btn, .not-link)::before, .sheet.link::before, :where(.reading-typography) a.sheet:not(.btn, .not-link)::before, :where(.reading-typography) details > summary.sheet::before, .links_dark.reading-typography a.sheet:not(.btn, .not-link)::before, .powerpoint.link::before, .powerpoint.link_icons::before, .powerpoint.link-light::before, .links_light.reading-typography a.powerpoint:not(.btn, .not-link)::before, .powerpoint.link::before, :where(.reading-typography) a.powerpoint:not(.btn, .not-link)::before, :where(.reading-typography) details > summary.powerpoint::before, .links_dark.reading-typography a.powerpoint:not(.btn, .not-link)::before, .video.link::before, .video.link_icons::before, .video.link-light::before, .links_light.reading-typography a.video:not(.btn, .not-link)::before, .video.link::before, :where(.reading-typography) a.video:not(.btn, .not-link)::before, :where(.reading-typography) details > summary.video::before, .links_dark.reading-typography a.video:not(.btn, .not-link)::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.none.scss **/
/**  Build Comment: Basic UC File  **/
/**  Utility Classes    *********************************/
/**  Logos  **/
/*
Anatomy

<h2>Anatomy of a Utility Class</h2>
The breakdown of the names for UCs follow a structured patter for easy muscle memory learning. 
<p class="font_2">All of the Style Names follow this ordered pattern of construction.</p>
<ol class="font_1 font_bold m-y_4 br_solid br_1 br_shade-4 lh_4 m_0 p_0" style="list-style-position: inside;">
        <li class="p_3 m_0 bg_success-3">State - Hover <em>(Optional: always ends with a colon)</em></li>
        <li class="p_3 m_0 bg_primary-3">Style Name</li>
        <li class="p_3 m_0 bg_alert-3">Style Name Modifier <em>(Optional: always starts with a hyphen)</em></li>
         <li class="p_3 m_0 bg_warning-3">Divider or Equal To <em>(Optional: if it is a style value pair use the underscore as an equals)</em></li>
        <li class="p_3 m_0 bg_highlight-3">Value</li>
        <li class="p_3 m_0 bg_alert-3">Value Modifier <em>(Optional: always starts with a hyphen)</em></li>
        <li class="p_3 m_0 bg_accent-3">Breakpoint <em>(Optional: always starts with a colon)</em></li>
  </ol>
  <div class="font_2">
      <div class="font_bold font_3">Example 1</div>
      <div class="font_1 m-t_2">Make the background color primary modified by the shading of negative 2 when the cursor has hovered over it.</div>
      <div class="h:bg_primary-n3 h:c_white  m-y_4 p_4 br_solid br_shade-3 br_1">I have the class h:bg_primary-n2</div>
      <div class="font_bold font_1">Long Name</div>
      <div class="flex m-t_3">
            <div class="flex_auto bg_success-3 p_3">hover:</div>
            <div class="flex_auto bg_primary-3 p_3">background-color</div>
            <div class="flex_auto bg_warning-3 p_3">_</div>
            <div class="flex_auto bg_highlight-3 p_3">primary</div>
            <div class="flex_auto bg_alert-3 p_3">Modify Negative 2</div>
      </div>
      <div class="font_bold font_1">Utility Class</div>
      <div class="flex m-t_3">
        <div class="flex_auto bg_success-3 p_3">h:</div>
        <div class="flex_auto bg_primary-3 p_3">bg</div>
        <div class="flex_auto bg_warning-3 p_3">_</div>
        <div class="flex_auto bg_highlight-3 p_3">primary</div>
        <div class="flex_auto bg_alert-3 p_3">-n2</div>
      </div>
      <ol class="font_0 font_bold c_black m-y_4 br_solid br_1 br_shade-4 lh_4 p_0 m_0" style="list-style-position: inside;">
          <li class="bg_success-3 p_3 m_0">'h' => Interaction State </li>
          <li class="bg_primary-3 p_3 m_0">'bg' => Style Name</li>
          <li class="bg_warning-3 p_3 m_0">`_` => Value Divider think of this as an equal mark</li>
          <li class="bg_highlight-3 p_3 m_0">`primary` => Value</li>
          <li class="bg_alert-3 p_3 m_0">`n2` => Modifier Values most follow a [n5 , n4, n3, n2, n1, {0 is
          default} , 1, 2, 3, 4, 5, color names, or shade values]</li>
          <li class="bg_accent-3 p_3 m_0">`lg`=> Breakpoint Value</li>
      </ol>   
  </div>
  <div class="font_2">
      <div class="font_bold font_3">Long Name Example 2</div>
      <div class="font_1 m-t_2">Add 1 rem of padding to the top when screen is medium and up</div>
      <div class="flex m-t_3">
        <div class="flex_auto bg_primary-3 p_3">padding</div>
        <div class="flex_auto bg_alert-3 p_3">top</div>
        <div class="flex_auto bg_warning-3 p_3">Equals</div>
        <div class="flex_auto bg_highlight-3 p_3">value 4 = 1rem </div>
        <div class="flex_auto bg_accent-3 p_3">at the medium breakpoint</div>
      </div>
       <div class="font_bold font_1">Utility Class Example</div>
            <div class="flex m-t_3"><div class="flex_auto bg_primary-3 p_3">p</div>
            <div class="flex_auto bg_alert-3 p_3">-t</div>
            <div class="flex_auto bg_warning-3 p_3">_</div>
            <div class="flex_auto bg_highlight-3 p_3">4</div>
            <div class="flex_auto bg_accent-3 p_3">:md</div>
        </div>
  </div>

 Styleguide Anatomy.Parts
*/
/*
Interaction State

Pseudo  DOM states
| states      | Short Name | CSS      | Currently Used                         |
| ----------- | ---------- | -------- | -------------------------------------- |
| hover       | h:         | :hover   | Yes                                    |
| active      | a:         | :active  | <span class="c_warning">Partial</span> |
| ~~visited~~ | ~~v:~~     | :visited | <span class="c_alert">Not Used</span>  |

 Weight: 100

Styleguide Anatomy.State
*/
/*
Style Names

## List of the short hand for style names

The breakdown of the names for UCs follow a structured patter for easy muscle memory learning. 
| CSS Style                               | Short Name | has modifier                 | Uses Stepped Value                         |
| --------------------------------------- | ---------- | ---------------------------- | ------------------------------------------ |
| background-color                        | .bg        |                              | <i class="fas fa-check"></i> as a modifier |
| border-color                            | .br        |                              | <i class="fas fa-check"></i> as a modifier |
| border-radius                           | .br        | <i class="fas fa-check"></i> |                                            |
| border-width                            | .br        | <i class="fas fa-check"></i> | <i class="fas fa-check"></i>               |
| color                                   | .c         |                              | <i class="fas fa-check"></i> as a modifier |
| clear                                   | .clear     |                              |                                            |
| display                                 | .          |                              |                                            |
| flex                                    | .flex      |                              |                                            |
| float                                   | .float     |                              |                                            |
| font-size                               | .font      |                              | <i class="fas fa-check"></i>               |
| font-family                             | .font      |                              |                                            |
| font-weight                             | .font      |                              |                                            |
| font-style                              | .font      |                              |                                            |
| height                                  | .h         |                              |                                            |
| justify-content                         | .justify   |                              |                                            |
| margin                                  | .m         | <i class="fas fa-check"></i> | <i class="fas fa-check"></i>               |
| overflow                                | .overflow  |                              |                                            |
| padding                                 | .p         | <i class="fas fa-check"></i> | <i class="fas fa-check"></i>               |
| position                                | .          |                              |                                            |
| <em class="p-l_4 c_primary">top</em>    | .t         |                              | <i class="fas fa-check"></i>               |
| <em class="p-l_4 c_primary">right</em>  | .r         |                              | <i class="fas fa-check"></i>               |
| <em class="p-l_4 c_primary">bottom</em> | .b         |                              | <i class="fas fa-check"></i>               |
| <em class="p-l_4 c_primary">left</em>   | .l         |                              | <i class="fas fa-check"></i>               |
| line-height                             | .lh        |                              | <i class="fas fa-check"></i>               |
| width                                   | .w         |                              |                                            |
| max-width                               | .max-w     |                              |                                            |

Weight:200

 Styleguide Anatomy.Style
*/
/*
Name Modifiers

## List of CSS Style Name Modifiers

The breakdown of the names for UCs follow a structured patter for easy muscle memory learning. 
| Style        | Short Name | Example                    |
| ------------ | ---------- | -------------------------- |
| top          | -t         | margin-top                 |
| bottom       | -b         | margin-bottom              |
| left         | -l         | margin-left                |
| right        | -r         | margin-right               |
| top-right    | -tr         | border-top-right-radius    |
| top-left     | -tl         | border-top-left-radius     |
| bottom-right | -br         | border-bottom-right-radius |
| bottom-left  | -bl         | border-bottom-left-radius  |

Weight:300

 Styleguide Anatomy.StyleModifiers
*/
/*
Common Values

## List of the positive to negative stepped values

### Values

| Value Postfix | Font Size | Margin, top, left, right, bottom | Padding              | Line Height | border-width | Color Modifier         |
| ------------- | --------- | -------------------------------- | -------------------- | ----------- | ------------ | ---------------------- |
| n5            | ms(-5)    | -2 \* X<sup>†</sup>              | N/A                  | N/A         | N/A          | mix(color, black, 90%) |
| n4            | ms(-4)    | -1 \* X<sup>†</sup>              | N/A                  | N/A         | N/A          | mix(color, black, 70%) |
| n3            | ms(-3)    | -.5 \* X<sup>†</sup>             | N/A                  | N/A         | N/A          | mix(color, black, 50%) |
| n2            | ms(-2)    | -.25 \* X<sup>†</sup>            | N/A                  | N/A         | N/A          | mix(color, black, 30%) |
| n1            | ms(-1)    | -.1 \* X<sup>†</sup>             | N/A                  | N/A         | N/A          | mix(color, black, 10%) |
| 0             | ms(0)     | 0                                | 0                    | 0           | 0            | color @ 100%           |
| 1             | ms(1)     | .1 \* X<sup>†</sup>              | .1 \* X<sup>†</sup>  | 1           | 1px          | mix(color, white, 10%) |
| 2             | ms(2)     | .25 \* X<sup>†</sup>             | .25 \* X<sup>†</sup> | 1.45        | 3px          | mix(color, white, 30%) |
| 3             | ms(3)     | .5 \* X<sup>†</sup>              | 5 \* X<sup>†</sup>   | 1.65        | 5px          | mix(color, white, 50%) |
| 4             | ms(4)     | 1 \* X<sup>†</sup>               | 1 \* X<sup>†</sup>   | 1.75        | .5rem        | mix(color, white, 70%) |
| 5             | ms(5)     | 2 \* X<sup>†</sup>               | 2 \* X<sup>†</sup>   | 2           | 1rem         | mix(color, white, 90%) |

<sup>†</sup> x = global spacing 1 rem

Weight:400

 Styleguide Anatomy.ValuesStepped
*/
/*
Alternate Values

## Alternate Values

#### Border Radius

| Value Postfix | Border Radius Values |
| ------------- | -------------------- |
| square        | 0                    |
| radius        | 5px or Global Radius |
| round         | 25px                 |
| circle        | 100%                 |

#### Border Style

| Value Postfix | Border Style Values |
| ------------- | ------------------- |
| none          | none                |
| dashed        | dashed              |
| solid         | solid               |

#### Display

| Value Postfix | Display      |
| ------------- | ------------ |
| none          | none         |
| block         | block        |
| inline        | inline       |
| inline-block  | inline-block |
| flex          | flex         |

#### Overflow

| Value Postfix | Overflow |
| ------------- | -------- |
| auto          | auto     |
| clip          | clip     |
| scroll        | scroll   |
| hidden        | hidden   |
| ellipsis      | ellipsis |
| visible       | visible  |
| unset         | unset    |

#### max-width

| Value Postfix | dimension | Use case            |
| ------------- | --------- | ------------------- |
| 5             | 5 rem     |                     |
| 10            | 10rem     |                     |
| 15            | 15rem     |                     |
| 20            | 20rem     | Small Phone Size    |
| 25            | 25rem     |                     |
| 30            | 30rem     | Short Readable Zone |
| 35            | 35rem     | Short Readable Zone |
| 40            | 40rem     | Short Readable Zone |
| 45            | 45rem     | Readable Zone       |
| 50            | 50rem     | Readable Zone       |
| 55            | 55rem     | Readable Zone       |
| 60            | 60rem     | Readable Zone       |
| 65            | 65rem     | Readable Zone       |
| 70            | 70rem     | Readable Zone       |
| 75            | 75rem     |                     |
| 80            | 80rem     |                     |
| 85            | 85rem     | Max Desktop Range   |
| 90            | 90rem     | Max Desktop Range   |
| 95            | 95rem     | Max Desktop Range   |

 Weight: 450

Styleguide Anatomy.ValuesAlternate
*/
/*
Break Points

| break point | Short Name | css             | dimension | Currently Used                  |
| ----------- | ---------- | --------------- | --------- | ------------------------------- |
| all sizes   | ''         | min-width: 0em  | 0px       | default                         |
| ~~small~~   | ':sm'      | min-width: 30em | 480px     | <span class="c_alert">No</span> |
| medium      | ':md'      | min-width: 40em | 640px     | Yes                             |
| large       | ':lg'      | min-width: 40em | 1024px    | Yes                             |

 Weight: 500

Styleguide Anatomy.Breakpoints
*/
/*
Extra Credit

## Reserved Names

#### Reserved Words and Modifier Descriptors

These words should be used to describe states and generic elements of the UI and should be used instead of some variation or alternate name.

#### Component Name Modifier

Components styling is most are

-   ** -container ** or UI Name with no modifier (Use instead of holder when items are UI based)
-   ** -group ** or UI Name with no modifier (Use instead of list, holder, collection when items or repeatable Content)
-   ** -item ** or UI Name with no modifier (generic child of container or group)
-   ** -separator ** (a visual treatment or break between items within a container or group )

#### States

-   show
-   hide
-   is-active
-   is-complete
-   is-disabled
-   is-current
-   is-selected
-   focus
-   success
-   hover
-   warning
-   alert (Depreciate the use of ‘error’ for the native descriptor from foundation)
-   primary
-   secondary
-   reverse

## Colors

-   State Colors
    -   -success, -green
    -   -warning, -orange
    -   -alert, -red
    -   -primary, -productColor
    -   -secondary
    -   -highlight
-   Black
-   White
-   Black and White have transparencies
    -   -10 alpha,
    -   -20 alpha,
    -   -30 alpha,
    -   -40 alpha,
    -   -50 alpha,
    -   -60 alpha,
    -   -70 alpha,
    -   -80 alpha,
    -   -90 alpha

 Weight: 1000

Styleguide Anatomy.ExtraCredit
*/
.reading-typography {
  text-rendering: auto;
}

:where(.reading-typography) {
  font-weight: var(--font_regular);
  font-size: 16px;
  font-size: 1rem;
  font-family: var(--font-family_copy);
}
:where(.reading-typography) :where(h1, h2, h3, h4, h5, h6) {
  margin-bottom: 12px;
  margin-bottom: 0.75rem;
  color: inherit;
}
:where(.reading-typography) :where(h1, h2, h3, h4, h5, h6):not(:first-child) {
  margin-top: 24px;
  margin-top: 1.5rem;
}
:where(.reading-typography) :where(h1, h2, h3, h4, h5, h6) + :where(h1, h2, h3, h4, h5, h6):not(:first-child) {
  margin-top: -6px;
  margin-top: -0.375rem;
}
:where(.reading-typography) h6, :where(.reading-typography) h5, :where(.reading-typography) h4, :where(.reading-typography) h3, :where(.reading-typography) h2, :where(.reading-typography) h1 {
  font-family: var(--font-family_display);
}
:where(.reading-typography) li, :where(.reading-typography) p {
  line-height: 1.35;
  font-family: var(--font-family_copy);
}
:where(.reading-typography) h3, :where(.reading-typography) h2, :where(.reading-typography) h1 {
  line-height: 1.125;
}
:where(.reading-typography) h6, :where(.reading-typography) h5, :where(.reading-typography) h4 {
  line-height: 1.35;
}
:where(.reading-typography) h1 {
  font-size: 28.832px;
  font-size: 1.8020324707rem;
}
:where(.reading-typography) h2 {
  font-size: 25.628px;
  font-size: 1.6018066406rem;
}
:where(.reading-typography) h3 {
  font-size: 22.781px;
  font-size: 1.423828125rem;
}
:where(.reading-typography) h4 {
  font-size: 20.25px;
  font-size: 1.265625rem;
}
:where(.reading-typography) h5 {
  font-weight: var(--font_bold);
  font-size: 18px;
  font-size: 1.125rem;
}
:where(.reading-typography) h6 {
  font-weight: var(--font_bold);
  font-size: 18px;
  font-size: 1.125rem;
}
:where(.reading-typography) li {
  margin-top: 4px;
  margin-top: 0.25rem;
  margin-bottom: 8px;
  margin-bottom: 0.5rem;
  padding-left: 4px;
  padding-left: 0.25rem;
}
:where(.reading-typography) ul,
:where(.reading-typography) ol {
  padding-left: 32px;
  padding-left: 2rem;
  list-style-position: outside;
}
:where(.reading-typography) ul {
  list-style-type: disc;
}
:where(.reading-typography) ul ul {
  list-style-type: circle;
}
:where(.reading-typography) ol {
  list-style-type: decimal;
}
:where(.reading-typography) ol ol {
  list-style-type: lower-alpha;
}
:where(.reading-typography) li > ul,
:where(.reading-typography) li > ol {
  margin-left: 16px;
  margin-left: 1rem;
  padding-left: 16px;
  padding-left: 1rem;
}
:where(.reading-typography) li + li {
  margin-top: 8px;
  margin-top: 0.5rem;
}
:where(.reading-typography) li:last-child {
  margin-bottom: 8px;
  margin-bottom: 0.5rem;
}
:where(.reading-typography) p + p {
  margin-top: 8px;
  margin-top: 0.5rem;
}
:where(.reading-typography) abbr {
  -webkit-text-decoration: 1px dotted inherit;
          text-decoration: 1px dotted inherit;
}
:where(.reading-typography) hr {
  margin: 16px 0;
  margin: 1rem 0;
}
:where(.reading-typography) img, :where(.reading-typography) a img {
  width: 100%;
  margin: 0;
  border: 0px none;
}
:where(.reading-typography) a:has(> img) {
  display: inline-block;
}
:where(.reading-typography) p,
:where(.reading-typography) ul,
:where(.reading-typography) ol,
:where(.reading-typography) dl,
:where(.reading-typography) table {
  margin-top: 8px;
  margin-top: 0.5rem;
  margin-bottom: 16px;
  margin-bottom: 1rem;
  font-size: max(16px, 16px);
  font-size: max(1rem, 16px);
}
:where(.reading-typography) table {
  border-color: inherit;
  color: inherit;
}
:where(.reading-typography) table {
  width: 100%;
}
:where(.reading-typography) thead {
  border-block-end: 1px solid currentColor;
}
:where(.reading-typography).no-margins h1,
:where(.reading-typography).no-margins h2,
:where(.reading-typography).no-margins h3,
:where(.reading-typography).no-margins h4,
:where(.reading-typography).no-margins h5,
:where(.reading-typography).no-margins h6 {
  margin: 0 !important;
}
:where(.reading-typography) code {
  color: inherit;
  font-family: var(--font-family_mono);
}
:where(.reading-typography) a:not([href], [class]), :where(.reading-typography) a:not([href], [class]):hover {
  color: inherit;
  text-decoration: none;
}
:where(.reading-typography) a:not(.btn, .not-link) {
  font-weight: var(--font_medium);
}
:where(.reading-typography):not(.color_inherit) :where(h1, h2, h3, h4, h5, h6) {
  color: var(--custom-color, #157894);
}
:where(.reading-typography):not(.color_inherit) table {
  border-color: var(--custom-color, #157894);
}
:where(.reading-typography):not(.color_inherit) thead {
  border-block-end-color: var(--custom-color, #157894);
  color: var(--custom-color, #157894);
}
:where(.reading-typography):not(.color_inherit) code {
  color: var(--code-color, var(--accent));
}
:where(.reading-typography):not(.color_inherit) abbr {
  -webkit-text-decoration: 1px dotted var(--highlight);
          text-decoration: 1px dotted var(--highlight);
}
:where(.reading-typography):not(.color_inherit) ::marker {
  color: var(--custom-color, currentColor);
}

.color_inherit:where(.reading-typography) {
  --custom-color:inherit;
}
.color_inherit:where(.reading-typography) :where(h1, h2, h3, h4, h5, h6) {
  color: var(--custom-color, inherit);
}
.color_inherit:where(.reading-typography) table {
  border-color: var(--custom-color, inherit);
}
.color_inherit:where(.reading-typography) thead {
  border-block-end-color: var(--custom-color, inherit);
  color: var(--custom-color, inherit);
}
.color_inherit:where(.reading-typography) code {
  color: currentColor;
}
.color_inherit:where(.reading-typography) abbr {
  -webkit-text-decoration: 1px dotted var(--custom-color, inherit);
          text-decoration: 1px dotted var(--custom-color, inherit);
}
.color_inherit:where(.reading-typography) ::marker {
  color: var(--custom-color, currentColor);
}

:root {
  --custom-font-size-modifier: $ms-ratio;
}

.font-size_up:where(.reading-typography) {
  --custom-font-size-up: var(--custom-font-size-modifier);
  font-size: calc(1rem * var(--custom-font-size-up));
}
.font-size_up:where(.reading-typography) h1 {
  font-size: calc(2.0272865295rem * var(--custom-font-size-up));
}
.font-size_up:where(.reading-typography) h2 {
  font-size: calc(1.8020324707rem * var(--custom-font-size-up));
}
.font-size_up:where(.reading-typography) h3 {
  font-size: calc(1.6018066406rem * var(--custom-font-size-up));
}
.font-size_up:where(.reading-typography) h4 {
  font-size: calc(1.423828125rem * var(--custom-font-size-up));
}
.font-size_up:where(.reading-typography) h5, .font-size_up:where(.reading-typography) h6 {
  font-size: calc(1.265625rem * var(--custom-font-size-up));
}
.font-size_up:where(.reading-typography) p,
.font-size_up:where(.reading-typography) ul,
.font-size_up:where(.reading-typography) ol,
.font-size_up:where(.reading-typography) dl,
.font-size_up:where(.reading-typography) details,
.font-size_up:where(.reading-typography) table {
  font-size: calc(1.125rem * var(--custom-font-size-up));
}

.font-size_down:where(.reading-typography) {
  --custom-font-size-down:calc( 1/ var(--custom-font-size-modifier) );
  font-size: calc(1rem * var(--custom-font-size-down));
}
.font-size_down:where(.reading-typography) h1 {
  font-size: calc(1.6018066406rem * var(--custom-font-size-down));
}
.font-size_down:where(.reading-typography) h2 {
  font-size: calc(1.423828125rem * var(--custom-font-size-down));
}
.font-size_down:where(.reading-typography) h3 {
  font-size: calc(1.265625rem * var(--custom-font-size-down));
}
.font-size_down:where(.reading-typography) h4 {
  font-size: calc(1.125rem * var(--custom-font-size-down));
}
.font-size_down:where(.reading-typography) h5 {
  font-size: calc(1rem * var(--custom-font-size-down));
}
.font-size_down:where(.reading-typography) h6 {
  font-size: calc(1rem * var(--custom-font-size-down));
}
.font-size_down:where(.reading-typography) p,
.font-size_down:where(.reading-typography) ul,
.font-size_down:where(.reading-typography) ol,
.font-size_down:where(.reading-typography) dl,
.font-size_down:where(.reading-typography) details,
.font-size_down:where(.reading-typography) table {
  margin-block-start: 4px;
  margin-block-start: 0.25rem;
  margin-block-end: 8px;
  margin-block-end: 0.5rem;
  font-size: calc(1rem * var(--custom-font-size-down));
}

/*
Typography

These utility classes enable the manipulation of features such as font size, weight, decoration, white-space, and overflow, providing greater control over the typographic elements in your design.

Weight: -100

Styleguide Typography
*/
/*
Font

Weight: 0

Styleguide Typography.Font
*/
/*
Text

Weight: 1

Styleguide Typography.Text
*/
/* No Styleguide reference. */
.font_unset {
  font-style: unset;
  font-weight: unset;
  font-size: unset;
  text-align: unset;
  text-decoration: unset;
  text-transform: unset;
  white-space: unset;
}

/*
  Font Weight

These classes are examples of CSS styles that operate as utility classes to control font weight across various text elements.

.font_light   -   Light, 100
.font_regular   -   Regular, 300
.font_medium   -   Medium, 500
.font_bold   -   Bold, 700
.font_xbold   -   Extra Bold, 900

  Markup:
  <div class="{{modifier_class}} font_normal font_2 font_ui">
    <div class="lowercase">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="uppercase">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>

Weight: -80

  Styleguide Typography.Font.Weight
 */
:root {
  --font_light:300;
  --font_regular:400;
  --font_medium:500;
  --font_bold:700;
  --font_xbold:900;
}

.font_light {
  font-weight: var(--font_light, 300);
}

.font_regular, .reading-typography {
  font-weight: var(--font_regular, 400);
}

.font_medium, .btn_acc-primary {
  font-weight: var(--font_medium, 500);
}

.font_bold, strong, b {
  font-weight: var(--font_bold, 700);
}

.font_xbold {
  font-weight: var(--font_xbold, 900);
}

/*
  Font Family

You can modify the font family used in your text elements with these simple utility classe.

  .font_accent            -  Font Accent: Primarily used in main navigation elements and certain headers.
  .font_display         -  Font Display: Employed in headlines and buttons.      
  .font_copy          -  Font Copy: Typically used in content text.          
  .font_ui          -  Font UI: Applied to components like navigation elements and dense user interface elements.           
  .font_mono         - Font Mono: This is commonly used in quotations, data displays, or code snippets    

  Markup:
  <div class="{{modifier_class}} font_3">
    <div class="lowercase">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="uppercase">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>

  Styleguide Typography.Font.Family
 */
.font_accent {
  font-family: "Roboto Slab","Times New Roman","Lucida Bright",Georgia,serif, "slab";
}

.font_display, .reading-typography:where(h1, h2, h3, h4, h5, h6) {
  font-family: "Maven Pro","Muli","Open Sans",Verdana,Helvetica,sans-serif;
}

.font_copy, .reading-typography,.font_ui {
  font-family: "Open Sans",-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.font_mono {
  font-family: SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
}

:root {
  --font-family_accent: "Roboto Slab","Times New Roman","Lucida Bright",Georgia,serif, "slab";
}

.font_accent {
  --font_light:200;
  --font_regular:400;
  --font_medium:500;
  --font_bold:700;
  --font_xbold:900;
  font-family: "Roboto Slab","Times New Roman","Lucida Bright",Georgia,serif, "slab";
  font-family: var(--font-family_accent);
}

:root {
  --font-family_display: "Maven Pro","Muli","Open Sans",Verdana,Helvetica,sans-serif;
}

.font_display, .reading-typography:where(h1, h2, h3, h4, h5, h6) {
  --font_light:400;
  --font_regular:450;
  --font_medium:550;
  --font_bold:700;
  --font_xbold:900;
  font-family: "Maven Pro","Muli","Open Sans",Verdana,Helvetica,sans-serif;
  font-family: var(--font-family_display);
}

:root {
  --font-family_copy: "Open Sans",-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.font_copy, .reading-typography {
  --font_light:300;
  --font_regular:400;
  --font_medium:500;
  --font_bold:675;
  --font_xbold:800;
  font-family: "Open Sans",-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-family: var(--font-family_copy);
}

:root {
  --font-family_ui: "Open Sans",-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.font_ui {
  --font_light:300;
  --font_regular:400;
  --font_medium:500;
  --font_bold:675;
  --font_xbold:800;
  font-family: "Open Sans",-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-family: var(--font-family_ui);
}

/*
  Font Style

  These utility classes allow you to adjust the style of your text:

  .font_normal            - Sets font style to normal
  .font_italic            - Sets font style to italic      

  Markup:
  <div class="{{modifier_class}} font_normal font_2">
    <div class="lowercase">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="uppercase">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>

  Styleguide Typography.Font.Style
 */
.font_normal {
  font-style: normal !important;
}

.font_italic {
  font-style: italic !important;
}

/*
Font Color

Using these straightforward utility classes, you can adjust the color of your text.

.c_white - text that's white
.c_black -  text that's black
.c_primary -  text that's primary
.c_alert -  text that's alert
.c_info -  text that's info
.c_warning -  text that's warning the user
.c_inherit - text that inherits from its parent

Markup:
<div class="{{modifier_class}} font_normal font_2 font_bold bg_shade-4 p_3">
  <div class="text-lowercase">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">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>

Weight: -90

Styleguide Typography.Font.Color
 */

.c_primary,.c_primary-0 {
  color: var(--primary) !important;
}

.c_primary-1 {
  color: hsla(var(--primary-h), calc(var(--primary-s) - var(--primary-s) * 0.05), calc(var(--primary-l) + (100% - var(--primary-l)) * 0.1), 1) !important;
}

.c_primary-2 {
  color: hsla(var(--primary-h), calc(var(--primary-s) - var(--primary-s) * 0.125), calc(var(--primary-l) + (100% - var(--primary-l)) * 0.25), 1) !important;
}

.c_primary-3 {
  color: hsla(var(--primary-h), calc(var(--primary-s) - var(--primary-s) * 0.25), calc(var(--primary-l) + (100% - var(--primary-l)) * 0.5), 1) !important;
}

.c_primary-4 {
  color: hsla(var(--primary-h), calc(var(--primary-s) - var(--primary-s) * 0.375), calc(var(--primary-l) + (100% - var(--primary-l)) * 0.75), 1) !important;
}

.c_primary-5 {
  color: hsla(var(--primary-h), calc(var(--primary-s) - var(--primary-s) * 0.45), calc(var(--primary-l) + (100% - var(--primary-l)) * 0.9), 1) !important;
}

.c_primary-n1 {
  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) !important;
}

.c_primary-n2 {
  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) !important;
}

.c_primary-n3 {
  color: hsla(var(--primary-h), calc(var(--primary-s) + (100% - var(--primary-s)) * 0.05), calc(var(--primary-l) - var(--primary-l) * 0.5), 1) !important;
}

.c_primary-n4 {
  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) !important;
}

.c_primary-n5 {
  color: hsla(var(--primary-h), calc(var(--primary-s) + (100% - var(--primary-s)) * 0.085), calc(var(--primary-l) - var(--primary-l) * 0.85), 1) !important;
}

.c_secondary,.c_secondary-0 {
  color: var(--secondary) !important;
}

.c_secondary-1 {
  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) !important;
}

.c_secondary-2 {
  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) !important;
}

.c_secondary-3 {
  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) !important;
}

.c_secondary-4 {
  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) !important;
}

.c_secondary-5 {
  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) !important;
}

.c_secondary-n1 {
  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) !important;
}

.c_secondary-n2 {
  color: hsla(var(--secondary-h), calc(var(--secondary-s) + (100% - var(--secondary-s)) * 0.03), calc(var(--secondary-l) - var(--secondary-l) * 0.3), 1) !important;
}

.c_secondary-n3 {
  color: hsla(var(--secondary-h), calc(var(--secondary-s) + (100% - var(--secondary-s)) * 0.05), calc(var(--secondary-l) - var(--secondary-l) * 0.5), 1) !important;
}

.c_secondary-n4 {
  color: hsla(var(--secondary-h), calc(var(--secondary-s) + (100% - var(--secondary-s)) * 0.07), calc(var(--secondary-l) - var(--secondary-l) * 0.7), 1) !important;
}

.c_secondary-n5 {
  color: hsla(var(--secondary-h), calc(var(--secondary-s) + (100% - var(--secondary-s)) * 0.085), calc(var(--secondary-l) - var(--secondary-l) * 0.85), 1) !important;
}

.c_success,.c_success-0 {
  color: var(--success) !important;
}

.c_success-1 {
  color: hsla(var(--success-h), calc(var(--success-s) - var(--success-s) * 0.05), calc(var(--success-l) + (100% - var(--success-l)) * 0.1), 1) !important;
}

.c_success-2 {
  color: hsla(var(--success-h), calc(var(--success-s) - var(--success-s) * 0.125), calc(var(--success-l) + (100% - var(--success-l)) * 0.25), 1) !important;
}

.c_success-3 {
  color: hsla(var(--success-h), calc(var(--success-s) - var(--success-s) * 0.25), calc(var(--success-l) + (100% - var(--success-l)) * 0.5), 1) !important;
}

.c_success-4 {
  color: hsla(var(--success-h), calc(var(--success-s) - var(--success-s) * 0.375), calc(var(--success-l) + (100% - var(--success-l)) * 0.75), 1) !important;
}

.c_success-5 {
  color: hsla(var(--success-h), calc(var(--success-s) - var(--success-s) * 0.45), calc(var(--success-l) + (100% - var(--success-l)) * 0.9), 1) !important;
}

.c_success-n1 {
  color: hsla(var(--success-h), calc(var(--success-s) + (100% - var(--success-s)) * 0.015), calc(var(--success-l) - var(--success-l) * 0.15), 1) !important;
}

.c_success-n2 {
  color: hsla(var(--success-h), calc(var(--success-s) + (100% - var(--success-s)) * 0.03), calc(var(--success-l) - var(--success-l) * 0.3), 1) !important;
}

.c_success-n3 {
  color: hsla(var(--success-h), calc(var(--success-s) + (100% - var(--success-s)) * 0.05), calc(var(--success-l) - var(--success-l) * 0.5), 1) !important;
}

.c_success-n4 {
  color: hsla(var(--success-h), calc(var(--success-s) + (100% - var(--success-s)) * 0.07), calc(var(--success-l) - var(--success-l) * 0.7), 1) !important;
}

.c_success-n5 {
  color: hsla(var(--success-h), calc(var(--success-s) + (100% - var(--success-s)) * 0.085), calc(var(--success-l) - var(--success-l) * 0.85), 1) !important;
}

.c_shade,.c_shade-0 {
  color: var(--shade) !important;
}

.c_shade-1 {
  color: hsla(var(--shade-h), calc(var(--shade-s) - var(--shade-s) * 0.05), calc(var(--shade-l) + (100% - var(--shade-l)) * 0.1), 1) !important;
}

.c_shade-2 {
  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) !important;
}

.c_shade-3 {
  color: hsla(var(--shade-h), calc(var(--shade-s) - var(--shade-s) * 0.25), calc(var(--shade-l) + (100% - var(--shade-l)) * 0.5), 1) !important;
}

.c_shade-4 {
  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) !important;
}

.c_shade-5 {
  color: hsla(var(--shade-h), calc(var(--shade-s) - var(--shade-s) * 0.45), calc(var(--shade-l) + (100% - var(--shade-l)) * 0.9), 1) !important;
}

.c_shade-n1 {
  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) !important;
}

.c_shade-n2 {
  color: hsla(var(--shade-h), calc(var(--shade-s) + (100% - var(--shade-s)) * 0.03), calc(var(--shade-l) - var(--shade-l) * 0.3), 1) !important;
}

.c_shade-n3 {
  color: hsla(var(--shade-h), calc(var(--shade-s) + (100% - var(--shade-s)) * 0.05), calc(var(--shade-l) - var(--shade-l) * 0.5), 1) !important;
}

.c_shade-n4 {
  color: hsla(var(--shade-h), calc(var(--shade-s) + (100% - var(--shade-s)) * 0.07), calc(var(--shade-l) - var(--shade-l) * 0.7), 1) !important;
}

.c_shade-n5 {
  color: hsla(var(--shade-h), calc(var(--shade-s) + (100% - var(--shade-s)) * 0.085), calc(var(--shade-l) - var(--shade-l) * 0.85), 1) !important;
}

.c_warning,.c_warning-0 {
  color: var(--warning) !important;
}

.c_warning-1 {
  color: hsla(var(--warning-h), calc(var(--warning-s) - var(--warning-s) * 0.05), calc(var(--warning-l) + (100% - var(--warning-l)) * 0.1), 1) !important;
}

.c_warning-2 {
  color: hsla(var(--warning-h), calc(var(--warning-s) - var(--warning-s) * 0.125), calc(var(--warning-l) + (100% - var(--warning-l)) * 0.25), 1) !important;
}

.c_warning-3 {
  color: hsla(var(--warning-h), calc(var(--warning-s) - var(--warning-s) * 0.25), calc(var(--warning-l) + (100% - var(--warning-l)) * 0.5), 1) !important;
}

.c_warning-4 {
  color: hsla(var(--warning-h), calc(var(--warning-s) - var(--warning-s) * 0.375), calc(var(--warning-l) + (100% - var(--warning-l)) * 0.75), 1) !important;
}

.c_warning-5 {
  color: hsla(var(--warning-h), calc(var(--warning-s) - var(--warning-s) * 0.45), calc(var(--warning-l) + (100% - var(--warning-l)) * 0.9), 1) !important;
}

.c_warning-n1 {
  color: hsla(var(--warning-h), calc(var(--warning-s) + (100% - var(--warning-s)) * 0.015), calc(var(--warning-l) - var(--warning-l) * 0.15), 1) !important;
}

.c_warning-n2 {
  color: hsla(var(--warning-h), calc(var(--warning-s) + (100% - var(--warning-s)) * 0.03), calc(var(--warning-l) - var(--warning-l) * 0.3), 1) !important;
}

.c_warning-n3 {
  color: hsla(var(--warning-h), calc(var(--warning-s) + (100% - var(--warning-s)) * 0.05), calc(var(--warning-l) - var(--warning-l) * 0.5), 1) !important;
}

.c_warning-n4 {
  color: hsla(var(--warning-h), calc(var(--warning-s) + (100% - var(--warning-s)) * 0.07), calc(var(--warning-l) - var(--warning-l) * 0.7), 1) !important;
}

.c_warning-n5 {
  color: hsla(var(--warning-h), calc(var(--warning-s) + (100% - var(--warning-s)) * 0.085), calc(var(--warning-l) - var(--warning-l) * 0.85), 1) !important;
}

.c_alert,.c_alert-0 {
  color: var(--alert) !important;
}

.c_alert-1 {
  color: hsla(var(--alert-h), calc(var(--alert-s) - var(--alert-s) * 0.05), calc(var(--alert-l) + (100% - var(--alert-l)) * 0.1), 1) !important;
}

.c_alert-2 {
  color: hsla(var(--alert-h), calc(var(--alert-s) - var(--alert-s) * 0.125), calc(var(--alert-l) + (100% - var(--alert-l)) * 0.25), 1) !important;
}

.c_alert-3 {
  color: hsla(var(--alert-h), calc(var(--alert-s) - var(--alert-s) * 0.25), calc(var(--alert-l) + (100% - var(--alert-l)) * 0.5), 1) !important;
}

.c_alert-4 {
  color: hsla(var(--alert-h), calc(var(--alert-s) - var(--alert-s) * 0.375), calc(var(--alert-l) + (100% - var(--alert-l)) * 0.75), 1) !important;
}

.c_alert-5 {
  color: hsla(var(--alert-h), calc(var(--alert-s) - var(--alert-s) * 0.45), calc(var(--alert-l) + (100% - var(--alert-l)) * 0.9), 1) !important;
}

.c_alert-n1 {
  color: hsla(var(--alert-h), calc(var(--alert-s) + (100% - var(--alert-s)) * 0.015), calc(var(--alert-l) - var(--alert-l) * 0.15), 1) !important;
}

.c_alert-n2 {
  color: hsla(var(--alert-h), calc(var(--alert-s) + (100% - var(--alert-s)) * 0.03), calc(var(--alert-l) - var(--alert-l) * 0.3), 1) !important;
}

.c_alert-n3 {
  color: hsla(var(--alert-h), calc(var(--alert-s) + (100% - var(--alert-s)) * 0.05), calc(var(--alert-l) - var(--alert-l) * 0.5), 1) !important;
}

.c_alert-n4 {
  color: hsla(var(--alert-h), calc(var(--alert-s) + (100% - var(--alert-s)) * 0.07), calc(var(--alert-l) - var(--alert-l) * 0.7), 1) !important;
}

.c_alert-n5 {
  color: hsla(var(--alert-h), calc(var(--alert-s) + (100% - var(--alert-s)) * 0.085), calc(var(--alert-l) - var(--alert-l) * 0.85), 1) !important;
}

.c_navigation,.c_navigation-0 {
  color: var(--navigation) !important;
}

.c_navigation-1 {
  color: hsla(var(--navigation-h), calc(var(--navigation-s) - var(--navigation-s) * 0.05), calc(var(--navigation-l) + (100% - var(--navigation-l)) * 0.1), 1) !important;
}

.c_navigation-2 {
  color: hsla(var(--navigation-h), calc(var(--navigation-s) - var(--navigation-s) * 0.125), calc(var(--navigation-l) + (100% - var(--navigation-l)) * 0.25), 1) !important;
}

.c_navigation-3 {
  color: hsla(var(--navigation-h), calc(var(--navigation-s) - var(--navigation-s) * 0.25), calc(var(--navigation-l) + (100% - var(--navigation-l)) * 0.5), 1) !important;
}

.c_navigation-4 {
  color: hsla(var(--navigation-h), calc(var(--navigation-s) - var(--navigation-s) * 0.375), calc(var(--navigation-l) + (100% - var(--navigation-l)) * 0.75), 1) !important;
}

.c_navigation-5 {
  color: hsla(var(--navigation-h), calc(var(--navigation-s) - var(--navigation-s) * 0.45), calc(var(--navigation-l) + (100% - var(--navigation-l)) * 0.9), 1) !important;
}

.c_navigation-n1 {
  color: hsla(var(--navigation-h), calc(var(--navigation-s) + (100% - var(--navigation-s)) * 0.015), calc(var(--navigation-l) - var(--navigation-l) * 0.15), 1) !important;
}

.c_navigation-n2 {
  color: hsla(var(--navigation-h), calc(var(--navigation-s) + (100% - var(--navigation-s)) * 0.03), calc(var(--navigation-l) - var(--navigation-l) * 0.3), 1) !important;
}

.c_navigation-n3 {
  color: hsla(var(--navigation-h), calc(var(--navigation-s) + (100% - var(--navigation-s)) * 0.05), calc(var(--navigation-l) - var(--navigation-l) * 0.5), 1) !important;
}

.c_navigation-n4 {
  color: hsla(var(--navigation-h), calc(var(--navigation-s) + (100% - var(--navigation-s)) * 0.07), calc(var(--navigation-l) - var(--navigation-l) * 0.7), 1) !important;
}

.c_navigation-n5 {
  color: hsla(var(--navigation-h), calc(var(--navigation-s) + (100% - var(--navigation-s)) * 0.085), calc(var(--navigation-l) - var(--navigation-l) * 0.85), 1) !important;
}

.c_accent,.c_accent-0 {
  color: var(--accent) !important;
}

.c_accent-1 {
  color: hsla(var(--accent-h), calc(var(--accent-s) - var(--accent-s) * 0.05), calc(var(--accent-l) + (100% - var(--accent-l)) * 0.1), 1) !important;
}

.c_accent-2 {
  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) !important;
}

.c_accent-3 {
  color: hsla(var(--accent-h), calc(var(--accent-s) - var(--accent-s) * 0.25), calc(var(--accent-l) + (100% - var(--accent-l)) * 0.5), 1) !important;
}

.c_accent-4 {
  color: hsla(var(--accent-h), calc(var(--accent-s) - var(--accent-s) * 0.375), calc(var(--accent-l) + (100% - var(--accent-l)) * 0.75), 1) !important;
}

.c_accent-5 {
  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) !important;
}

.c_accent-n1 {
  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) !important;
}

.c_accent-n2 {
  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) !important;
}

.c_accent-n3 {
  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) !important;
}

.c_accent-n4 {
  color: hsla(var(--accent-h), calc(var(--accent-s) + (100% - var(--accent-s)) * 0.07), calc(var(--accent-l) - var(--accent-l) * 0.7), 1) !important;
}

.c_accent-n5 {
  color: hsla(var(--accent-h), calc(var(--accent-s) + (100% - var(--accent-s)) * 0.085), calc(var(--accent-l) - var(--accent-l) * 0.85), 1) !important;
}

.c_info,.c_info-0 {
  color: var(--info) !important;
}

.c_info-1 {
  color: hsla(var(--info-h), calc(var(--info-s) - var(--info-s) * 0.05), calc(var(--info-l) + (100% - var(--info-l)) * 0.1), 1) !important;
}

.c_info-2 {
  color: hsla(var(--info-h), calc(var(--info-s) - var(--info-s) * 0.125), calc(var(--info-l) + (100% - var(--info-l)) * 0.25), 1) !important;
}

.c_info-3 {
  color: hsla(var(--info-h), calc(var(--info-s) - var(--info-s) * 0.25), calc(var(--info-l) + (100% - var(--info-l)) * 0.5), 1) !important;
}

.c_info-4 {
  color: hsla(var(--info-h), calc(var(--info-s) - var(--info-s) * 0.375), calc(var(--info-l) + (100% - var(--info-l)) * 0.75), 1) !important;
}

.c_info-5 {
  color: hsla(var(--info-h), calc(var(--info-s) - var(--info-s) * 0.45), calc(var(--info-l) + (100% - var(--info-l)) * 0.9), 1) !important;
}

.c_info-n1 {
  color: hsla(var(--info-h), calc(var(--info-s) + (100% - var(--info-s)) * 0.015), calc(var(--info-l) - var(--info-l) * 0.15), 1) !important;
}

.c_info-n2 {
  color: hsla(var(--info-h), calc(var(--info-s) + (100% - var(--info-s)) * 0.03), calc(var(--info-l) - var(--info-l) * 0.3), 1) !important;
}

.c_info-n3 {
  color: hsla(var(--info-h), calc(var(--info-s) + (100% - var(--info-s)) * 0.05), calc(var(--info-l) - var(--info-l) * 0.5), 1) !important;
}

.c_info-n4 {
  color: hsla(var(--info-h), calc(var(--info-s) + (100% - var(--info-s)) * 0.07), calc(var(--info-l) - var(--info-l) * 0.7), 1) !important;
}

.c_info-n5 {
  color: hsla(var(--info-h), calc(var(--info-s) + (100% - var(--info-s)) * 0.085), calc(var(--info-l) - var(--info-l) * 0.85), 1) !important;
}

.c_highlight,.c_highlight-0 {
  color: var(--highlight) !important;
}

.c_highlight-1 {
  color: hsla(var(--highlight-h), calc(var(--highlight-s) - var(--highlight-s) * 0.05), calc(var(--highlight-l) + (100% - var(--highlight-l)) * 0.1), 1) !important;
}

.c_highlight-2 {
  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) !important;
}

.c_highlight-3 {
  color: hsla(var(--highlight-h), calc(var(--highlight-s) - var(--highlight-s) * 0.25), calc(var(--highlight-l) + (100% - var(--highlight-l)) * 0.5), 1) !important;
}

.c_highlight-4 {
  color: hsla(var(--highlight-h), calc(var(--highlight-s) - var(--highlight-s) * 0.375), calc(var(--highlight-l) + (100% - var(--highlight-l)) * 0.75), 1) !important;
}

.c_highlight-5 {
  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) !important;
}

.c_highlight-n1 {
  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) !important;
}

.c_highlight-n2 {
  color: hsla(var(--highlight-h), calc(var(--highlight-s) + (100% - var(--highlight-s)) * 0.03), calc(var(--highlight-l) - var(--highlight-l) * 0.3), 1) !important;
}

.c_highlight-n3 {
  color: hsla(var(--highlight-h), calc(var(--highlight-s) + (100% - var(--highlight-s)) * 0.05), calc(var(--highlight-l) - var(--highlight-l) * 0.5), 1) !important;
}

.c_highlight-n4 {
  color: hsla(var(--highlight-h), calc(var(--highlight-s) + (100% - var(--highlight-s)) * 0.07), calc(var(--highlight-l) - var(--highlight-l) * 0.7), 1) !important;
}

.c_highlight-n5 {
  color: hsla(var(--highlight-h), calc(var(--highlight-s) + (100% - var(--highlight-s)) * 0.085), calc(var(--highlight-l) - var(--highlight-l) * 0.85), 1) !important;
}

.c_acc,.c_acc-0 {
  color: var(--acc) !important;
}

.c_acc-1 {
  color: hsla(var(--acc-h), calc(var(--acc-s) - var(--acc-s) * 0.05), calc(var(--acc-l) + (100% - var(--acc-l)) * 0.1), 1) !important;
}

.c_acc-2 {
  color: hsla(var(--acc-h), calc(var(--acc-s) - var(--acc-s) * 0.125), calc(var(--acc-l) + (100% - var(--acc-l)) * 0.25), 1) !important;
}

.c_acc-3 {
  color: hsla(var(--acc-h), calc(var(--acc-s) - var(--acc-s) * 0.25), calc(var(--acc-l) + (100% - var(--acc-l)) * 0.5), 1) !important;
}

.c_acc-4 {
  color: hsla(var(--acc-h), calc(var(--acc-s) - var(--acc-s) * 0.375), calc(var(--acc-l) + (100% - var(--acc-l)) * 0.75), 1) !important;
}

.c_acc-5 {
  color: hsla(var(--acc-h), calc(var(--acc-s) - var(--acc-s) * 0.45), calc(var(--acc-l) + (100% - var(--acc-l)) * 0.9), 1) !important;
}

.c_acc-n1 {
  color: hsla(var(--acc-h), calc(var(--acc-s) + (100% - var(--acc-s)) * 0.015), calc(var(--acc-l) - var(--acc-l) * 0.15), 1) !important;
}

.c_acc-n2 {
  color: hsla(var(--acc-h), calc(var(--acc-s) + (100% - var(--acc-s)) * 0.03), calc(var(--acc-l) - var(--acc-l) * 0.3), 1) !important;
}

.c_acc-n3 {
  color: hsla(var(--acc-h), calc(var(--acc-s) + (100% - var(--acc-s)) * 0.05), calc(var(--acc-l) - var(--acc-l) * 0.5), 1) !important;
}

.c_acc-n4 {
  color: hsla(var(--acc-h), calc(var(--acc-s) + (100% - var(--acc-s)) * 0.07), calc(var(--acc-l) - var(--acc-l) * 0.7), 1) !important;
}

.c_acc-n5 {
  color: hsla(var(--acc-h), calc(var(--acc-s) + (100% - var(--acc-s)) * 0.085), calc(var(--acc-l) - var(--acc-l) * 0.85), 1) !important;
}

/*
Font Color: Black & White

black and white fonts can be modified to have levels of transparency between 0-9.

.c_white - text that's white
.c_black -  text that's black


Markup:
<div class="font_normal font_2 bg_primary font_ui">
  <div class="{{modifier_class}} p_3">
    <div class="font_3 font_bold">{{modifier_class}} </div>
    <div class="text-lowercase">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">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>
    <div class="{{modifier_class}}-0 p_3">
    <div class="font_3 font_bold">{{modifier_class}}-0 </div>
    <div class="text-lowercase">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">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>
    <div class="{{modifier_class}}-1 p_3">
    <div class="font_3 font_bold">{{modifier_class}}-1 </div>
    <div class="text-lowercase">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">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>
    <div class="{{modifier_class}}-2 p_3">
    <div class="font_3 font_bold">{{modifier_class}}-2 </div>
    <div class="text-lowercase">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">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>
    <div class="{{modifier_class}}-3 p_3">
    <div class="font_3 font_bold">{{modifier_class}}-3 </div>
    <div class="text-lowercase">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">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>
    <div class="{{modifier_class}}-4 p_3">
    <div class="font_3 font_bold">{{modifier_class}}-4 </div>
    <div class="text-lowercase">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">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>
    <div class="{{modifier_class}}-5 p_3">
    <div class="font_3 font_bold">{{modifier_class}}-5 </div>
    <div class="text-lowercase">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">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>
    <div class="{{modifier_class}}-9 p_3">
    <div class="font_3 font_bold">{{modifier_class}}-6 </div>
    <div class="text-lowercase">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">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>
      <div class="{{modifier_class}}-7 p_3">
    <div class="font_3 font_bold">{{modifier_class}}-7 </div>
    <div class="text-lowercase">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">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>
      <div class="{{modifier_class}}-8 p_3">
    <div class="font_3 font_bold">{{modifier_class}}-8 </div>
    <div class="text-lowercase">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">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>
      <div class="{{modifier_class}}-9 p_3">
    <div class="font_3 font_bold">{{modifier_class}}-9 </div>
    <div class="text-lowercase">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">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>
</div>

NOTE: It's important to note that, unlike other text colors, these colors are transparent. If you're aiming for grey, opaque text, you should use the .shade_(n) utility class.

Weight: -91


Styleguide Typography.Font.Color.Black&White
 */
.c_white, .btn_acc-primary {
  color: rgb(255, 255, 255) !important;
}

.c_black {
  color: rgb(19, 18, 18) !important;
}

.c_black-0 {
  color: rgba(19, 18, 18, 0) !important;
}

.c_black-_01 {
  color: rgba(19, 18, 18, 0.005) !important;
}

.c_black-_05 {
  color: rgba(19, 18, 18, 0.0075) !important;
}

.c_black-1 {
  color: rgba(19, 18, 18, 0.025) !important;
}

.c_black-2 {
  color: rgba(19, 18, 18, 0.1) !important;
}

.c_black-3 {
  color: rgba(19, 18, 18, 0.25) !important;
}

.c_black-4 {
  color: rgba(19, 18, 18, 0.38) !important;
}

.c_black-5, .btn.disabled, button.btn.disabled, input[type=button].btn.disabled, input[type=reset].btn.disabled, input[type=submit].btn.disabled, .btn_acc-primary.disabled {
  color: rgba(19, 18, 18, 0.5) !important;
}

.c_black-6 {
  color: rgba(19, 18, 18, 0.62) !important;
}

.c_black-7 {
  color: rgba(19, 18, 18, 0.75) !important;
}

.c_black-8 {
  color: rgba(19, 18, 18, 0.9) !important;
}

.c_black-9 {
  color: rgba(19, 18, 18, 0.975) !important;
}

.c_black-none {
  color: #131212 !important;
}

.c_white-0 {
  color: rgba(255, 255, 255, 0) !important;
}

.c_white-_01 {
  color: rgba(255, 255, 255, 0.005) !important;
}

.c_white-_05 {
  color: rgba(255, 255, 255, 0.0075) !important;
}

.c_white-1 {
  color: rgba(255, 255, 255, 0.025) !important;
}

.c_white-2 {
  color: rgba(255, 255, 255, 0.1) !important;
}

.c_white-3 {
  color: rgba(255, 255, 255, 0.25) !important;
}

.c_white-4 {
  color: rgba(255, 255, 255, 0.38) !important;
}

.c_white-5 {
  color: rgba(255, 255, 255, 0.5) !important;
}

.c_white-6 {
  color: rgba(255, 255, 255, 0.62) !important;
}

.c_white-7 {
  color: rgba(255, 255, 255, 0.75) !important;
}

.c_white-8 {
  color: rgba(255, 255, 255, 0.9) !important;
}

.c_white-9 {
  color: rgba(255, 255, 255, 0.975) !important;
}

.c_white-none {
  color: white !important;
}

.c_inherit,.h\:c_inherit:hover,.c_inherit-all:hover, .c_inherit-all:active, .c_inherit-all:visited, .c_inherit-all:focus, .c_inherit-all {
  color: inherit;
}

/*
  Font Size

    <div class="p-b_3"><span class="bg_accent br_radius c_white inline-block font_n1 p-7_3 p-x_5 sg">Is Responsive: breakpoint modifiers</span></div>You can alter the size of the font with font_[x] test 1
    <table class='clear_both'><thead class='font_bold uppercase'><th>class</th><th class='text_right'>css property</th><th>value</th></thead><tbody><tr><td class='c_primary-n2'> .font_0</td><td class='text_right'> font-size :</td><td> 1rem 16px  </td></tr> <tr><td class='c_primary-n2'> .font_1</td><td class='text_right'> font-size :</td><td> 1.125rem 18px  </td></tr> <tr><td class='c_primary-n2'> .font_2</td><td class='text_right'> font-size :</td><td> 1.265625rem 20.25px  </td></tr> <tr><td class='c_primary-n2'> .font_3</td><td class='text_right'> font-size :</td><td> 1.423828125rem 22.78125px  </td></tr> <tr><td class='c_primary-n2'> .font_4</td><td class='text_right'> font-size :</td><td> 1.6018066406rem 25.62890625px  </td></tr> <tr><td class='c_primary-n2'> .font_5</td><td class='text_right'> font-size :</td><td> 1.8020324707rem 28.8325195313px  </td></tr> <tr><td class='c_primary-n2'> .font_6</td><td class='text_right'> font-size :</td><td> 2.0272865295rem 32.4365844727px  </td></tr> <tr><td class='c_primary-n2'> .font_7</td><td class='text_right'> font-size :</td><td> 2.2806973457rem 36.4911575317px  </td></tr> <tr><td class='c_primary-n2'> .font_8</td><td class='text_right'> font-size :</td><td> 2.565784514rem 41.0525522232px  </td></tr> <tr><td class='c_primary-n2'> .font_9</td><td class='text_right'> font-size :</td><td> 2.8865075782rem 46.1841212511px  </td></tr> <tr><td class='c_primary-n2'> .font_10</td><td class='text_right'> font-size :</td><td> 3.2473210255rem 51.9571364075px  </td></tr> <tr><td class='c_primary-n2'> .font_n1</td><td class='text_right'> font-size :</td><td> 0.8888888889rem 14.2222222222px  </td></tr> <tr><td class='c_primary-n2'> .font_n2</td><td class='text_right'> font-size :</td><td> 0.7901234568rem 12.6419753086px  </td></tr> <tr><td class='c_primary-n2'> .font_n3</td><td class='text_right'> font-size :</td><td> 0.7023319616rem 11.2373113855px  </td></tr> <tr><td class='c_primary-n2'> .font_n4</td><td class='text_right'> font-size :</td><td> 0.624295077rem 9.9887212315px  </td></tr> <tr><td class='c_primary-n2'> .font_n5</td><td class='text_right'> font-size :</td><td> 0.5549289573rem 8.8788633169px  </td></tr> </tbody></table>

  .font_10 - 10x
  .font_9 - 9x
  .font_8 - 8x
  .font_7 - 7x
  .font_6 - 6x
  .font_5 - Largest
  .font_4 - Large
  .font_3 - Big
  .font_2 - Big-ish
  .font_1 - Slightly Bigger
  .font_0 - Default Size
  .font_n1 - Shrunk
  .font_n2 - small
  .font_n3 - smaller
  .font_n4 - even smaller
  .font_n5 - smallest

  Markup:
  <div class="{{modifier_class}} font_normal">
    <div class="lowercase pre-wrap">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="uppercase pre-wrap">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>

  Weight: -100

  Styleguide Typography.Font.Size
 */
.font_0 {
  font-size: 16px;
  font-size: 1rem;
}

.font_1, .btn_acc-primary {
  font-size: 18px;
  font-size: 1.125rem;
}

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

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

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

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

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

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

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

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

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

.font_n1 {
  font-size: 14.222px;
  font-size: 0.8888888889rem;
}

.font_n2 {
  font-size: 12.641px;
  font-size: 0.7901234568rem;
}

.font_n3 {
  font-size: 11.237px;
  font-size: 0.7023319616rem;
}

.font_n4 {
  font-size: 9.988px;
  font-size: 0.624295077rem;
}

.font_n5 {
  font-size: 8.878px;
  font-size: 0.5549289573rem;
}

@media only screen and (width > 768px) {
  .font_0\:md {
    font-size: 1rem;
  }
  .font_1\:md {
    font-size: 1.125rem;
  }
  .font_2\:md, .btn_acc-primary {
    font-size: 1.265625rem;
  }
  .font_3\:md {
    font-size: 1.423828125rem;
  }
  .font_4\:md {
    font-size: 1.6018066406rem;
  }
  .font_5\:md {
    font-size: 1.8020324707rem;
  }
  .font_6\:md {
    font-size: 2.0272865295rem;
  }
  .font_7\:md {
    font-size: 2.2806973457rem;
  }
  .font_8\:md {
    font-size: 2.565784514rem;
  }
  .font_9\:md {
    font-size: 2.8865075782rem;
  }
  .font_10\:md {
    font-size: 3.2473210255rem;
  }
  .font_n1\:md {
    font-size: 0.8888888889rem;
  }
  .font_n2\:md {
    font-size: 0.7901234568rem;
  }
  .font_n3\:md {
    font-size: 0.7023319616rem;
  }
  .font_n4\:md {
    font-size: 0.624295077rem;
  }
  .font_n5\:md {
    font-size: 0.5549289573rem;
  }
}
@media only screen and (width > 1024px) {
  .font_0\:lg {
    font-size: 1rem;
  }
  .font_1\:lg {
    font-size: 1.125rem;
  }
  .font_2\:lg {
    font-size: 1.265625rem;
  }
  .font_3\:lg {
    font-size: 1.423828125rem;
  }
  .font_4\:lg {
    font-size: 1.6018066406rem;
  }
  .font_5\:lg {
    font-size: 1.8020324707rem;
  }
  .font_6\:lg {
    font-size: 2.0272865295rem;
  }
  .font_7\:lg {
    font-size: 2.2806973457rem;
  }
  .font_8\:lg {
    font-size: 2.565784514rem;
  }
  .font_9\:lg {
    font-size: 2.8865075782rem;
  }
  .font_10\:lg {
    font-size: 3.2473210255rem;
  }
  .font_n1\:lg {
    font-size: 0.8888888889rem;
  }
  .font_n2\:lg {
    font-size: 0.7901234568rem;
  }
  .font_n3\:lg {
    font-size: 0.7023319616rem;
  }
  .font_n4\:lg {
    font-size: 0.624295077rem;
  }
  .font_n5\:lg {
    font-size: 0.5549289573rem;
  }
}
@media only screen and (width > 1200px) {
  .font_0\:xl {
    font-size: 1rem;
  }
  .font_1\:xl {
    font-size: 1.125rem;
  }
  .font_2\:xl {
    font-size: 1.265625rem;
  }
  .font_3\:xl {
    font-size: 1.423828125rem;
  }
  .font_4\:xl {
    font-size: 1.6018066406rem;
  }
  .font_5\:xl {
    font-size: 1.8020324707rem;
  }
  .font_6\:xl {
    font-size: 2.0272865295rem;
  }
  .font_7\:xl {
    font-size: 2.2806973457rem;
  }
  .font_8\:xl {
    font-size: 2.565784514rem;
  }
  .font_9\:xl {
    font-size: 2.8865075782rem;
  }
  .font_10\:xl {
    font-size: 3.2473210255rem;
  }
  .font_n1\:xl {
    font-size: 0.8888888889rem;
  }
  .font_n2\:xl {
    font-size: 0.7901234568rem;
  }
  .font_n3\:xl {
    font-size: 0.7023319616rem;
  }
  .font_n4\:xl {
    font-size: 0.624295077rem;
  }
  .font_n5\:xl {
    font-size: 0.5549289573rem;
  }
}
.font-size_up {
  font-size: calc(1em * 1.125);
}

.font-size_down {
  font-size: calc(1em / 1.125);
}

.font-size_up-1 {
  font-size: calc(1em * 1.125 * 1.125);
}

.font-size_down-1 {
  font-size: calc(1em / 1.125 / 1.125);
}

.font-size_up-2 {
  font-size: calc(1em * 1.125 * 1.125 * 1.125);
}

.font-size_down-2 {
  font-size: calc(1em / 1.125 / 1.125 / 1.125);
}

/*
  Text Wrap

  <div class="p-b_3"><span class="bg_accent br_radius c_white inline-block font_n1 p-7_3 p-x_5 sg">Is Responsive: breakpoint modifiers</span></div> You can alter the wrapping style with these UCs.

  .wrap           - alter the wrapping style to wrap
  .pre-wrap       - alter the wrapping style to pre-wrap    
  .nowrap         - alter the wrapping style to nowrap  

  Markup:
  <div class="{{modifier_class}} font_normal max-w_30">
    Quae sapiente reprehenderit explicabo esse consequatur error fugiat. Voluptas odit ipsam architecto quae perspiciatis nostrum autem at. Ut veritatis molestiae distinctio autem repudiandae voluptatem voluptatibus aspernatur.
  </div>

  Styleguide Typography.Text.Wrap
 */
.wrap, .wrap_pretty, .wrap_balance {
  white-space: normal;
}

.pre-wrap {
  letter-spacing: -0.01em;
  white-space: pre-wrap;
}

.nowrap {
  white-space: nowrap;
}

@media only screen and (width > 768px) {
  .wrap\:md {
    white-space: normal;
  }
  .pre-wrap\:md {
    letter-spacing: -0.01em;
    white-space: pre-wrap;
  }
  .nowrap\:md {
    white-space: nowrap;
  }
}
@media only screen and (width > 1024px) {
  .wrap\:lg {
    white-space: normal;
  }
  .pre-wrap\:lg {
    letter-spacing: -0.01em;
    white-space: pre-wrap;
  }
  .nowrap\:lg {
    white-space: nowrap;
  }
}
/*
Text Wrap Style

This controls how the browser trys to wrap text.

.wrap_balance    - keeps text even across lines
.wrap_pretty     - attempts to reduce orphans

Markup:
<h1 class="max-w_30 {{modifier_class}} bg_highlight-5 box-break_clone p_2 inline-block">Iure ad ipsam minus. Voluptatem nisi voluptas vitae et repudiandae possimus blanditiis. Officia quis soluta saepe doloremque numquam modi et facilis. Et dolorum totam. Harum voluptatem laboriosam rerum repellat corporis modi. Totam amet architecto nemo reiciendis ipsum corporis et quaerat ea.</h1>

Styleguide Typography.Text.Wrap.Style
*/
.wrap_balance {
  text-wrap-style: balance;
}

.wrap_pretty {
  text-wrap-style: pretty;
}

.wb_break-all {
  word-break: break-all;
}

.wb_word-break {
  word-break: word-break;
}

.wb_keep-all {
  word-break: keep-all;
}

.wb_normal {
  word-break: normal;
}

.wb_unset {
  word-break: unset;
}

@media only screen and (width > 1024px) {
  .wb_break-all {
    word-break: break-all;
  }
  .wb_word-break {
    word-break: word-break;
  }
  .wb_keep-all {
    word-break: keep-all;
  }
  .wb_normal {
    word-break: normal;
  }
  .wb_unset {
    word-break: unset;
  }
  .wb_break-all {
    word-break: break-all;
  }
  .wb_word-break {
    word-break: word-break;
  }
  .wb_keep-all {
    word-break: keep-all;
  }
  .wb_normal {
    word-break: normal;
  }
  .wb_unset {
    word-break: unset;
  }
}
@media only screen and (width > 1024px) {
}
/*
	Text Decoration

	Decoration can be easily added to text through these UCs.  

  .underline			        - solid underline the text
  .dotted			            - dotted underline the text
  .double                 - double underline the text
  .dashed                 - dashed underline the text
  .undecorated            - unset the decoration of the text     
  .uppercase              - uppercase the text    
  .lowercase              - lowercase the text
  .capitalize             - capitalize the text

	Markup:
	<div class="{{modifier_class}} p_3 br_solid font_bold br_black-1 br_1 bg bg_primary c_white">text has a decoration of {{modifier_class}} <a>I am a link also decorated</a></div>

	Styleguide Typography.Text.Decoration

 */
.lowercase {
  text-transform: lowercase;
}

.uppercase {
  text-transform: uppercase;
}

.capitalize {
  text-transform: capitalize;
}

.underline {
  text-decoration: underline;
}

.dotted {
  -webkit-text-decoration: dotted;
          text-decoration: dotted;
}

.double {
  -webkit-text-decoration: double;
          text-decoration: double;
}

.dashed {
  -webkit-text-decoration: dashed;
          text-decoration: dashed;
}

.undecorated {
  text-decoration: none;
}

/*
	Text Shadows

	Shadows can be easily added to text there is limited shadows black and white and negative black and white  

	.text-shadow_white-n1			- inset white shadow
	.text-shadow_white-1			- white shadow
	.text-shadow_black-n1			- inset black shadow
	.text-shadow_black-1			- black shadow
	.text-shadow_none			- no shadow


	Markup:
	<div class="{{modifier_class}} p_3 br_solid font_bold br_black-1 br_1 bg bg_primary c_white">text has shadow of {{modifier_class}}</div>

	Styleguide Typography.Text.Shadow

 */
.text-shadow_none {
  text-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
}

.text-shadow_white-1 {
  text-shadow: 2px 2px 2px rgba(255, 255, 255, 0.25);
}

.text-shadow_black-1 {
  text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.25);
}

.text-shadow_white-n1 {
  text-shadow: -1px -1px 2px rgba(255, 255, 255, 0.5);
}

.text-shadow_black-n1 {
  text-shadow: -1px -1px 2px rgba(0, 0, 0, 0.5);
}

/*
Text Indent

Indent text needs to have a modifier to like `text-indent_2

text-indent_n3       - text-indent of  negative 3 rem
text-indent_n2       - text-indent of  negative 2 rem
text-indent_n1       - text-indent of  negative 1 rem
text-indent_0       - text-indent  of   positive 0 rem
text-indent_1       - text-indent  of   positive 1 rem
text-indent_2       - text-indent  of   positive 2 rem
text-indent_3       - text-indent  of   positive 3 rem

Markup:
<div class="font_normal font_1 m-x_5 br_solid br-l_1 br_black-4">
<p class="">text that has no indent/p>
<p class="{{modifier_class}}">text that has an indent magnitude of {{modifier_class}} </p>
</div>

Styleguide Typography.Text.Indent

 */
.text-indent_0 {
  text-indent: 0;
}

.text-indent_n1 {
  text-indent: -1em;
}

.text-indent_n2 {
  text-indent: -2em;
}

.text-indent_n3 {
  text-indent: -3em;
}

.text-indent_1 {
  text-indent: 1em;
}

.text-indent_2 {
  text-indent: 2em;
}

.text-indent_3 {
  text-indent: 3em;
}

/*
  Line Height

  Change the line height of text with `lh_x`.

  .lh_0             -  0
  .lh_1             -  1           
  .lh_2             -  1.25  
  .lh_3             -  1.45  
  .lh_4             -  1.75     
  .lh_5             -  2.5     

  Markup:
  <div class="font_normal font_1 p_3">
    <h3 class="font_2 font_bold c_shade_3 p-b_3">{{modifier_class}}</h3>
    <p class="{{modifier_class}}">Lorem ipsum dolor sit amet, consectetur adipiscing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>

  Styleguide Typography.Text.LineHeight
 */
.lh_0 {
  line-height: 1 !important;
}

.lh_1 {
  line-height: 1.125 !important;
}

.lh_2, .btn_acc-primary {
  line-height: 1.35 !important;
}

.lh_3 {
  line-height: 1.6 !important;
}

.lh_4 {
  line-height: 1.8 !important;
}

.lh_5 {
  line-height: 2.5 !important;
}

/*
  Alignment

  Change the alignment of text.

  .text_right             -  right alignment
  .text_center             -  center alignment           
  .text_left             -  left alignment      

  Markup:
  <div class="font_normal font_1 p_3">
    <h3 class="font_2 font_bold c_shade_3 p-b_3 {{modifier_class}}">{{modifier_class}}</h3>
    <p class="{{modifier_class}} lh_2">Lorem ipsum dolor sit amet, consectetur adipiscing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>

  Styleguide Typography.Text.Alignment
 */
.text_unset {
  text-align: unset !important;
}

.text_center, .btn_acc-primary {
  text-align: center !important;
}

.text_left {
  text-align: left !important;
}

.text_right {
  text-align: right !important;
}

.text_start {
  text-align: start !important;
}

.text_end {
  text-align: end !important;
}

@media only screen and (width > 768px) {
  .text_unset\:md {
    text-align: unset !important;
  }
  .text_center\:md {
    text-align: center !important;
  }
  .text_left\:md {
    text-align: left !important;
  }
  .text_right\:md {
    text-align: right !important;
  }
  .text_start\:md {
    text-align: start !important;
  }
  .text_end\:md {
    text-align: end !important;
  }
}
@media only screen and (width > 1024px) {
  .text_unset\:lg {
    text-align: unset !important;
  }
  .text_center\:lg {
    text-align: center !important;
  }
  .text_left\:lg {
    text-align: left !important;
  }
  .text_right\:lg {
    text-align: right !important;
  }
  .text_start\:lg {
    text-align: start !important;
  }
  .text_end\:lg {
    text-align: end !important;
  }
}
/*
List

Description: A major part of the construction of the web and the content of the web are lists.

Weight: 110

Styleguide List
*/
/*
  List Type

  Change the type of a list.

  .ul_none            -  none
  .ul_bullet          -  bullet          
  .ul_square          -  square      

Markup:
  <div class="font_normal font_1 p_3">
    <h3 class="font_2 font_bold c_shade_3 p-b_3">{{modifier_class}}</h3>
    <ul class="{{modifier_class}}">
    <li>Lorem, ipsum dolor sit amet consectetur adipisicing elit.</li>
    <li>Lorem, ipsum dolor sit amet consectetur adipisicing elit.</li>
    <li>Lorem, ipsum dolor sit amet consectetur adipisicing elit.</li>
    <li>Lorem, ipsum dolor sit amet consectetur adipisicing elit.</li>
    <li>Lorem, ipsum dolor sit amet consectetur adipisicing elit.</li>
    </ul>
</div>

Weight: 0

  Styleguide List.Type
 */
.ul_none {
  margin: 0;
  padding: 0;
  list-style-type: none !important;
}

.ul_bullet {
  list-style-type: disc !important;
}

.ul_circle {
  list-style-type: circle !important;
}

.ul_square {
  list-style-type: square !important;
}

.ul_lowercase {
  list-style-type: lower-alpha !important;
}

.ul_uppercase {
  list-style-type: upper-alpha !important;
}

/*
Marker

Markers classes change the styles and looks of the the list item maker.  Marker must attach to the parent UL or Ol and will not style the grand children.

.marker_primary - primary colored list markers.
.marker_secondary - secondary colored list markers.
.marker_accent - accent colored list markers.
.marker_alert - alert colored list markers.
.marker_warning - warning colored list markers.
.marker_success - success colored list markers.
.marker_highlight - highlight colored list markers.
.marker_black - black colored list markers.
.marker_white - white colored list markers.

Markup:
<ul class="{{ modifier_class }}">
    <li>List Item Text</li>
    <li>List Item Text</li>
    <li>List Item Text
    <ul class="">
        <li>List Item Grand Children</li>
        <li>List Item Grand Children</li>
    </ul>
    </li>
</ul>
<ol class="{{ modifier_class }}">
    <li>List Item Text</li>
    <li>List Item Text</li>
    <li>List Item Text</li>
</ol>

MarkupWrapperClasses: bg_black-2 p_5

Weight:10

Styleguide List.Marker
*/
.marker_primary > *::marker {
  color: #198dae;
}

.marker_secondary > *::marker {
  color: #676a72;
}

.marker_success > *::marker {
  color: #078a2e;
}

.marker_shade > *::marker {
  color: #878585;
}

.marker_warning > *::marker {
  color: #da8210;
}

.marker_alert > *::marker {
  color: #dd1a1a;
}

.marker_navigation > *::marker {
  color: #2b58c0;
}

.marker_accent > *::marker {
  color: #16a385;
}

.marker_info > *::marker {
  color: #a3988c;
}

.marker_highlight > *::marker {
  color: #7742bd;
}

.marker_acc > *::marker {
  color: #004176;
}

.marker_black > *::marker {
  color: rgb(19, 18, 18);
}

.marker_white > *::marker {
  color: rgb(255, 255, 255);
}

/*
Counters

Add counters in front of collections without the need of an OL or UL for an advanced list type. Counters cannot be nested!

Weight: 250

Styleguide List.counters

*/
/* No styleguide reference. */
/*
	Counter Basics

	Counter can be incremented by the `counter_increment` class.  

	Markup:
    <div class="counter_reset">
        <div class="bg_primary-2 p_3 m_3"><span class="font_bold counter counter_increment">:</span> Item, Object, or Section</div>
        <div class="bg_primary-2 p_3 m_3"><span class="font_bold counter counter_increment">:</span> Item, Object, or Section</div>
        <div class="bg_primary-2 p_3 m_3"><span class="font_bold counter counter_increment">:</span> Item, Object, or Section</div>
 	</div>

	 Weight: -100

	Styleguide List.counters.basics

*/
.counter_reset {
  counter-reset: a;
}

.counter_increment {
  counter-increment: a;
}

.counter:before {
  content: counter(a);
}

/*
	Counter Sub

	Counter Subs can be nested inside of counters

	Markup:
    <div class="counter_reset ">
        <div class="bg_primary-2 p_3 m_3"><span class="font_bold counter counter_increment counter_upper-alpha"></span> Item, Object, or Section</div>
            <div class="counter-sub_reset">
                <div class="m_3 p_2 p-l_4 bg_primary-3"><span class="font_bold counter counter_upper-alpha"></span>.<span class="font_bold counter-sub counter-sub_increment counter-sub_lower-alpha"></span> Sub Item</div>
                <div class="m_3 p_2 p-l_4 bg_primary-3"><span class="font_bold counter counter_upper-alpha"></span>.<span class="font_bold counter-sub counter-sub_increment counter-sub_lower-alpha"></span> Sub Item</div>
                <div class="m_3 p_2 p-l_4 bg_primary-3"><span class="font_bold counter counter_upper-alpha"></span>.<span class="font_bold counter-sub counter-sub_increment counter-sub_lower-alpha"></span> Sub Item</div>
            </div>
        <div class="bg_primary-2 p_3 m_3"><span class="font_bold counter counter_increment counter_upper-alpha"></span> Item, Object, or Section</div>
        <div class="bg_primary-2 p_3 m_3"><span class="font_bold counter counter_increment counter_upper-alpha"></span> Item, Object, or Section</div>
 	</div>

	Styleguide List.counters.sub counters

*/
.counter-sub_reset {
  counter-reset: b;
}

.counter-sub_increment {
  counter-increment: b;
}

/*
	Counter Types

	Create different types of list with the counter types

	counter 										- Defualt Number Listing
	counter_lower-alpha         - Lowercase Alphabetic Listing
	counter_upper-alpha         - Uppercase Alphabetic Listing
	counter_lower-roman         - Lowercase Roman Listing
	counter_upper-roman         - Uppercase Roman Listing

	Markup:
	<div class="counter_reset">
			<div class="m_3 p_3 bg_primary-2"><span class="{{modifier_class}} font_bold counter_increment"></span> Item, Object, or Section</div>
			<div class="m_3 p_3 bg_primary-2"><span class="{{modifier_class}} font_bold counter_increment"></span> Item, Object, or Section</div>
			<div class="m_3 p_3 bg_primary-2"><span class="{{modifier_class}} font_bold counter_increment"></span> Item, Object, or Section</div>
 	</div>

	Styleguide List.counters.types

*/
.counter_lower-alpha:before {
  content: counter(a, lower-alpha);
}

.counter_upper-alpha:before {
  content: counter(a, upper-alpha);
}

.counter_lower-roman:before {
  content: counter(a, lower-roman);
}

.counter_upper-roman:before {
  content: counter(a, upper-roman);
}

.counter-sub:before {
  content: counter(b);
}

.counter-sub_lower-alpha:before {
  content: counter(b, lower-alpha);
}

.counter-sub_upper-alpha:before {
  content: counter(b, upper-alpha);
}

.counter-sub_lower-roman:before {
  content: counter(b, lower-roman);
}

.counter-sub_upper-roman:before {
  content: counter(b, upper-roman);
}

/*
	Order Markers

	Quickly decorate the counter with a circle.  Change the  bgground and font color with utility classes to acheive different effects.


	Markup:
    <div class="counter_reset">
        <div class="m_3 p_3"><span class="font_bold counter counter_increment order-marker bg_primary-2"></span> Item, Object, or Section</div>
        <div class="m_3 p_3"><span class="font_bold counter counter_increment order-marker font_10 br-tr_round br-br_round bg_highlight-2"></span> Item, Object, or Section</div>
        <div class="m_3 p_3"><span class="font_bold counter counter_increment order-marker bg_info-2"></span> Item, Object, or Section</div>
        <div class="m_3 p_3"><span class="font_bold counter counter_increment order-marker bg_warning-2"></span> Item, Object, or Section</div>
    </div>

	Weight: 100

	Styleguide List.counters.markers

*/
.order-marker {
  box-sizing: border-box;
  display: inline-block;
  position: relative;
  width: 1.5em;
  height: 1.5em;
  margin-right: 0;
  margin-right: 0.5em;
  margin-bottom: 0;
  padding: 0.75em 0 0 0;
  line-height: 0;
  text-align: center;
  vertical-align: top;
}

/*
Inline Lists

Inline Lists are for separated items on a single line.

.ul_row.gap_4                -  basic ul with no separators but formatted with flex row
.ul_inline                -  basic inline ul with no separators
.ul_inline-comma            -  wrapping line of text that is separated by commas
.ul_inline-semicolon          -  wrapping line of text that is separated by semicolons          
.ul_inline-pipe          -  wrapping line of text that is separated by pipes     

Markup:
<div class="font_normal font_1 p_3">
  <h3 class="font_2 font_bold c_shade_3 p-b_3">{{modifier_class}}</h3>
  <ul class="{{modifier_class}}">
    <li>Evelyn Watsica II</li>
    <li>Linda Lang</li>
    <li>Laurie Greenfelder</li>
    <li>Katie Wiegand</li>
    <li>Brittany Conn</li>
  </ul>
</div>
<style>
[class^="ul_inline"] > li:last-child::after {
    content:"" !important;
    padding-inline-start: 0 !important;
    padding-inline-end: 0 !important;
}
</style>


NOTE: The limitations of the styleguide around compound pseudo selector :not(:last-child):after means a trailing divider shows up in documentation but not in production applications. Added a workaround to hide the divider via the following style tag in the example.  This is not necessary in production applications.


Weight: 1000

Styleguide List.InlineType

*/
.ul_row, .ul_inline, .ul_inline-comma,
.ul_inline-semicolon,
.ul_inline-pipe {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  justify-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ul_row > li, .ul_inline > li, .ul_inline-comma > li,
.ul_inline-semicolon > li,
.ul_inline-pipe > li {
  flex: 0 1 auto;
  margin: 0;
}

.ul_inline, .ul_inline-comma,
.ul_inline-semicolon,
.ul_inline-pipe {
  display: inline-flex;
}

.ul_inline-comma > li:not(:last-child)::after,
.ul_inline-semicolon > li:not(:last-child)::after,
.ul_inline-pipe > li:not(:last-child)::after {
  margin: 0;
  padding-inline-start: 0;
  padding-inline-end: 0.5em;
  opacity: 0.6;
}
.ul_inline-comma li.no-after,
.ul_inline-semicolon li.no-after,
.ul_inline-pipe li.no-after {
  padding-inline-end: 0.5em;
}
.ul_inline-comma li.no-after::after,
.ul_inline-semicolon li.no-after::after,
.ul_inline-pipe li.no-after::after {
  display: none !important;
}

.ul_inline-comma > li:not(:last-child)::after {
  content: ",";
}

.ul_inline-semicolon > li:not(:last-child)::after {
  content: ";";
}

.ul_inline-pipe > li:not(:last-child)::after {
  padding-inline-start: 0.5em;
  content: "|";
}

/*
Margin

<div class="p-b_3"><span class="bg_accent br_radius c_white inline-block font_n1 p-7_3 p-x_5 sg">Is Responsive: breakpoint modifiers</span></div>Margin classes are mobile first with postfix modifier for `:md`and `:lg` variations for responsive sizing. Margins that use the short codes of all margin, auto, x margins, and y margin are override by specific side margins. 			

m_0     	 		-  margin: 0 
m_n5 	 			-  margin:	 -2rem
m_n2 	 			-  margin:	 -0.25rem
m_4  	 			-  margin: 1rem
m-l_n5       	-  margin-left:	 -2rem
m-l_1        	-  margin-left: 1px
m-l_2        	-  margin-left: 0.25rem
m-l_3        	-  margin-left: 0.5rem
m-x_auto     	-  margin-left, margin-right: auto
m-y_3   	 		-  margin-top, margin-bottom: 0.5rem

Markup:
<div class="bg_warning-3 d-block br_1 br_solid">
	<div class="{{modifier_class}} p_2 bg_primary text_center c_white cell auto opacity_5 d-block max-w_30">Object  With Margins Inside Container</div>
</div>

Styleguide Layouts.Margin

 */
.m_0 {
  margin: 0  !important;
}

.m_n6 {
  margin: -64px  !important;
  margin: -4rem  !important;
}

.m_n5 {
  margin: -32px  !important;
  margin: -2rem  !important;
}

.m_n4 {
  margin: -16px  !important;
  margin: -1rem  !important;
}

.m_n3 {
  margin: -8px  !important;
  margin: -0.5rem  !important;
}

.m_n2 {
  margin: -4px  !important;
  margin: -0.25rem  !important;
}

.m_n1 {
  margin: -1px  !important;
}

.m_1 {
  margin: 1px  !important;
}

.m_2 {
  margin: 4px  !important;
  margin: 0.25rem  !important;
}

.m_3 {
  margin: 8px  !important;
  margin: 0.5rem  !important;
}

.m_4 {
  margin: 16px  !important;
  margin: 1rem  !important;
}

.m_5 {
  margin: 32px  !important;
  margin: 2rem  !important;
}

.m_6 {
  margin: 64px  !important;
  margin: 4rem  !important;
}

.m_auto {
  margin: auto  !important;
}

.m_unset {
  margin: unset  !important;
}

.m-y_0 {
  margin-top: 0  !important;
  margin-bottom: 0  !important;
}

.m-y_n6 {
  margin-top: -64px  !important;
  margin-top: -4rem  !important;
  margin-bottom: -64px  !important;
  margin-bottom: -4rem  !important;
}

.m-y_n5 {
  margin-top: -32px  !important;
  margin-top: -2rem  !important;
  margin-bottom: -32px  !important;
  margin-bottom: -2rem  !important;
}

.m-y_n4 {
  margin-top: -16px  !important;
  margin-top: -1rem  !important;
  margin-bottom: -16px  !important;
  margin-bottom: -1rem  !important;
}

.m-y_n3 {
  margin-top: -8px  !important;
  margin-top: -0.5rem  !important;
  margin-bottom: -8px  !important;
  margin-bottom: -0.5rem  !important;
}

.m-y_n2 {
  margin-top: -4px  !important;
  margin-top: -0.25rem  !important;
  margin-bottom: -4px  !important;
  margin-bottom: -0.25rem  !important;
}

.m-y_n1 {
  margin-top: -1px  !important;
  margin-bottom: -1px  !important;
}

.m-y_1 {
  margin-top: 1px  !important;
  margin-bottom: 1px  !important;
}

.m-y_2 {
  margin-top: 4px  !important;
  margin-top: 0.25rem  !important;
  margin-bottom: 4px  !important;
  margin-bottom: 0.25rem  !important;
}

.m-y_3 {
  margin-top: 8px  !important;
  margin-top: 0.5rem  !important;
  margin-bottom: 8px  !important;
  margin-bottom: 0.5rem  !important;
}

.m-y_4 {
  margin-top: 16px  !important;
  margin-top: 1rem  !important;
  margin-bottom: 16px  !important;
  margin-bottom: 1rem  !important;
}

.m-y_5 {
  margin-top: 32px  !important;
  margin-top: 2rem  !important;
  margin-bottom: 32px  !important;
  margin-bottom: 2rem  !important;
}

.m-y_6 {
  margin-top: 64px  !important;
  margin-top: 4rem  !important;
  margin-bottom: 64px  !important;
  margin-bottom: 4rem  !important;
}

.m-y_auto {
  margin-top: auto  !important;
  margin-bottom: auto  !important;
}

.m-y_unset {
  margin-top: unset  !important;
  margin-bottom: unset  !important;
}

.m-x_0 {
  margin-right: 0  !important;
  margin-left: 0  !important;
}

.m-x_n6 {
  margin-right: -64px  !important;
  margin-right: -4rem  !important;
  margin-left: -64px  !important;
  margin-left: -4rem  !important;
}

.m-x_n5 {
  margin-right: -32px  !important;
  margin-right: -2rem  !important;
  margin-left: -32px  !important;
  margin-left: -2rem  !important;
}

.m-x_n4 {
  margin-right: -16px  !important;
  margin-right: -1rem  !important;
  margin-left: -16px  !important;
  margin-left: -1rem  !important;
}

.m-x_n3 {
  margin-right: -8px  !important;
  margin-right: -0.5rem  !important;
  margin-left: -8px  !important;
  margin-left: -0.5rem  !important;
}

.m-x_n2 {
  margin-right: -4px  !important;
  margin-right: -0.25rem  !important;
  margin-left: -4px  !important;
  margin-left: -0.25rem  !important;
}

.m-x_n1 {
  margin-right: -1px  !important;
  margin-left: -1px  !important;
}

.m-x_1 {
  margin-right: 1px  !important;
  margin-left: 1px  !important;
}

.m-x_2 {
  margin-right: 4px  !important;
  margin-right: 0.25rem  !important;
  margin-left: 4px  !important;
  margin-left: 0.25rem  !important;
}

.m-x_3 {
  margin-right: 8px  !important;
  margin-right: 0.5rem  !important;
  margin-left: 8px  !important;
  margin-left: 0.5rem  !important;
}

.m-x_4 {
  margin-right: 16px  !important;
  margin-right: 1rem  !important;
  margin-left: 16px  !important;
  margin-left: 1rem  !important;
}

.m-x_5 {
  margin-right: 32px  !important;
  margin-right: 2rem  !important;
  margin-left: 32px  !important;
  margin-left: 2rem  !important;
}

.m-x_6 {
  margin-right: 64px  !important;
  margin-right: 4rem  !important;
  margin-left: 64px  !important;
  margin-left: 4rem  !important;
}

.m-x_auto {
  margin-right: auto  !important;
  margin-left: auto  !important;
}

.m-x_unset {
  margin-right: unset  !important;
  margin-left: unset  !important;
}

.m-t_0 {
  margin-top: 0  !important;
}

.m-t_n6 {
  margin-top: -64px  !important;
  margin-top: -4rem  !important;
}

.m-t_n5 {
  margin-top: -32px  !important;
  margin-top: -2rem  !important;
}

.m-t_n4 {
  margin-top: -16px  !important;
  margin-top: -1rem  !important;
}

.m-t_n3 {
  margin-top: -8px  !important;
  margin-top: -0.5rem  !important;
}

.m-t_n2 {
  margin-top: -4px  !important;
  margin-top: -0.25rem  !important;
}

.m-t_n1 {
  margin-top: -1px  !important;
}

.m-t_1 {
  margin-top: 1px  !important;
}

.m-t_2 {
  margin-top: 4px  !important;
  margin-top: 0.25rem  !important;
}

.m-t_3 {
  margin-top: 8px  !important;
  margin-top: 0.5rem  !important;
}

.m-t_4 {
  margin-top: 16px  !important;
  margin-top: 1rem  !important;
}

.m-t_5 {
  margin-top: 32px  !important;
  margin-top: 2rem  !important;
}

.m-t_6 {
  margin-top: 64px  !important;
  margin-top: 4rem  !important;
}

.m-t_auto {
  margin-top: auto  !important;
}

.m-t_unset {
  margin-top: unset  !important;
}

.m-b_0 {
  margin-bottom: 0  !important;
}

.m-b_n6 {
  margin-bottom: -64px  !important;
  margin-bottom: -4rem  !important;
}

.m-b_n5 {
  margin-bottom: -32px  !important;
  margin-bottom: -2rem  !important;
}

.m-b_n4 {
  margin-bottom: -16px  !important;
  margin-bottom: -1rem  !important;
}

.m-b_n3 {
  margin-bottom: -8px  !important;
  margin-bottom: -0.5rem  !important;
}

.m-b_n2 {
  margin-bottom: -4px  !important;
  margin-bottom: -0.25rem  !important;
}

.m-b_n1 {
  margin-bottom: -1px  !important;
}

.m-b_1 {
  margin-bottom: 1px  !important;
}

.m-b_2 {
  margin-bottom: 4px  !important;
  margin-bottom: 0.25rem  !important;
}

.m-b_3 {
  margin-bottom: 8px  !important;
  margin-bottom: 0.5rem  !important;
}

.m-b_4 {
  margin-bottom: 16px  !important;
  margin-bottom: 1rem  !important;
}

.m-b_5 {
  margin-bottom: 32px  !important;
  margin-bottom: 2rem  !important;
}

.m-b_6 {
  margin-bottom: 64px  !important;
  margin-bottom: 4rem  !important;
}

.m-b_auto {
  margin-bottom: auto  !important;
}

.m-b_unset {
  margin-bottom: unset  !important;
}

.m-l_0 {
  margin-left: 0  !important;
}

.m-l_n6 {
  margin-left: -64px  !important;
  margin-left: -4rem  !important;
}

.m-l_n5 {
  margin-left: -32px  !important;
  margin-left: -2rem  !important;
}

.m-l_n4 {
  margin-left: -16px  !important;
  margin-left: -1rem  !important;
}

.m-l_n3 {
  margin-left: -8px  !important;
  margin-left: -0.5rem  !important;
}

.m-l_n2 {
  margin-left: -4px  !important;
  margin-left: -0.25rem  !important;
}

.m-l_n1 {
  margin-left: -1px  !important;
}

.m-l_1 {
  margin-left: 1px  !important;
}

.m-l_2 {
  margin-left: 4px  !important;
  margin-left: 0.25rem  !important;
}

.m-l_3 {
  margin-left: 8px  !important;
  margin-left: 0.5rem  !important;
}

.m-l_4 {
  margin-left: 16px  !important;
  margin-left: 1rem  !important;
}

.m-l_5 {
  margin-left: 32px  !important;
  margin-left: 2rem  !important;
}

.m-l_6 {
  margin-left: 64px  !important;
  margin-left: 4rem  !important;
}

.m-l_auto {
  margin-left: auto  !important;
}

.m-l_unset {
  margin-left: unset  !important;
}

.m-r_0 {
  margin-right: 0  !important;
}

.m-r_n6 {
  margin-right: -64px  !important;
  margin-right: -4rem  !important;
}

.m-r_n5 {
  margin-right: -32px  !important;
  margin-right: -2rem  !important;
}

.m-r_n4 {
  margin-right: -16px  !important;
  margin-right: -1rem  !important;
}

.m-r_n3 {
  margin-right: -8px  !important;
  margin-right: -0.5rem  !important;
}

.m-r_n2 {
  margin-right: -4px  !important;
  margin-right: -0.25rem  !important;
}

.m-r_n1 {
  margin-right: -1px  !important;
}

.m-r_1 {
  margin-right: 1px  !important;
}

.m-r_2 {
  margin-right: 4px  !important;
  margin-right: 0.25rem  !important;
}

.m-r_3 {
  margin-right: 8px  !important;
  margin-right: 0.5rem  !important;
}

.m-r_4 {
  margin-right: 16px  !important;
  margin-right: 1rem  !important;
}

.m-r_5 {
  margin-right: 32px  !important;
  margin-right: 2rem  !important;
}

.m-r_6 {
  margin-right: 64px  !important;
  margin-right: 4rem  !important;
}

.m-r_auto {
  margin-right: auto  !important;
}

.m-r_unset {
  margin-right: unset  !important;
}

@media only screen and (width > 768px) {
  .m_0\:md {
    margin: 0  !important;
  }
  .m_n6\:md {
    margin: -4rem  !important;
  }
  .m_n5\:md {
    margin: -2rem  !important;
  }
  .m_n4\:md {
    margin: -1rem  !important;
  }
  .m_n3\:md {
    margin: -0.5rem  !important;
  }
  .m_n2\:md {
    margin: -0.25rem  !important;
  }
  .m_n1\:md {
    margin: -1px  !important;
  }
  .m_1\:md {
    margin: 1px  !important;
  }
  .m_2\:md {
    margin: 0.25rem  !important;
  }
  .m_3\:md {
    margin: 0.5rem  !important;
  }
  .m_4\:md {
    margin: 1rem  !important;
  }
  .m_5\:md {
    margin: 2rem  !important;
  }
  .m_6\:md {
    margin: 4rem  !important;
  }
  .m_auto\:md {
    margin: auto  !important;
  }
  .m_unset\:md {
    margin: unset  !important;
  }
  .m-y_0\:md {
    margin-top: 0  !important;
    margin-bottom: 0  !important;
  }
  .m-y_n6\:md {
    margin-top: -4rem  !important;
    margin-bottom: -4rem  !important;
  }
  .m-y_n5\:md {
    margin-top: -2rem  !important;
    margin-bottom: -2rem  !important;
  }
  .m-y_n4\:md {
    margin-top: -1rem  !important;
    margin-bottom: -1rem  !important;
  }
  .m-y_n3\:md {
    margin-top: -0.5rem  !important;
    margin-bottom: -0.5rem  !important;
  }
  .m-y_n2\:md {
    margin-top: -0.25rem  !important;
    margin-bottom: -0.25rem  !important;
  }
  .m-y_n1\:md {
    margin-top: -1px  !important;
    margin-bottom: -1px  !important;
  }
  .m-y_1\:md {
    margin-top: 1px  !important;
    margin-bottom: 1px  !important;
  }
  .m-y_2\:md {
    margin-top: 0.25rem  !important;
    margin-bottom: 0.25rem  !important;
  }
  .m-y_3\:md {
    margin-top: 0.5rem  !important;
    margin-bottom: 0.5rem  !important;
  }
  .m-y_4\:md {
    margin-top: 1rem  !important;
    margin-bottom: 1rem  !important;
  }
  .m-y_5\:md {
    margin-top: 2rem  !important;
    margin-bottom: 2rem  !important;
  }
  .m-y_6\:md {
    margin-top: 4rem  !important;
    margin-bottom: 4rem  !important;
  }
  .m-y_auto\:md {
    margin-top: auto  !important;
    margin-bottom: auto  !important;
  }
  .m-y_unset\:md {
    margin-top: unset  !important;
    margin-bottom: unset  !important;
  }
  .m-x_0\:md {
    margin-right: 0  !important;
    margin-left: 0  !important;
  }
  .m-x_n6\:md {
    margin-right: -4rem  !important;
    margin-left: -4rem  !important;
  }
  .m-x_n5\:md {
    margin-right: -2rem  !important;
    margin-left: -2rem  !important;
  }
  .m-x_n4\:md {
    margin-right: -1rem  !important;
    margin-left: -1rem  !important;
  }
  .m-x_n3\:md {
    margin-right: -0.5rem  !important;
    margin-left: -0.5rem  !important;
  }
  .m-x_n2\:md {
    margin-right: -0.25rem  !important;
    margin-left: -0.25rem  !important;
  }
  .m-x_n1\:md {
    margin-right: -1px  !important;
    margin-left: -1px  !important;
  }
  .m-x_1\:md {
    margin-right: 1px  !important;
    margin-left: 1px  !important;
  }
  .m-x_2\:md {
    margin-right: 0.25rem  !important;
    margin-left: 0.25rem  !important;
  }
  .m-x_3\:md {
    margin-right: 0.5rem  !important;
    margin-left: 0.5rem  !important;
  }
  .m-x_4\:md {
    margin-right: 1rem  !important;
    margin-left: 1rem  !important;
  }
  .m-x_5\:md {
    margin-right: 2rem  !important;
    margin-left: 2rem  !important;
  }
  .m-x_6\:md {
    margin-right: 4rem  !important;
    margin-left: 4rem  !important;
  }
  .m-x_auto\:md {
    margin-right: auto  !important;
    margin-left: auto  !important;
  }
  .m-x_unset\:md {
    margin-right: unset  !important;
    margin-left: unset  !important;
  }
  .m-t_0\:md {
    margin-top: 0  !important;
  }
  .m-t_n6\:md {
    margin-top: -4rem  !important;
  }
  .m-t_n5\:md {
    margin-top: -2rem  !important;
  }
  .m-t_n4\:md {
    margin-top: -1rem  !important;
  }
  .m-t_n3\:md {
    margin-top: -0.5rem  !important;
  }
  .m-t_n2\:md {
    margin-top: -0.25rem  !important;
  }
  .m-t_n1\:md {
    margin-top: -1px  !important;
  }
  .m-t_1\:md {
    margin-top: 1px  !important;
  }
  .m-t_2\:md {
    margin-top: 0.25rem  !important;
  }
  .m-t_3\:md {
    margin-top: 0.5rem  !important;
  }
  .m-t_4\:md {
    margin-top: 1rem  !important;
  }
  .m-t_5\:md {
    margin-top: 2rem  !important;
  }
  .m-t_6\:md {
    margin-top: 4rem  !important;
  }
  .m-t_auto\:md {
    margin-top: auto  !important;
  }
  .m-t_unset\:md {
    margin-top: unset  !important;
  }
  .m-b_0\:md {
    margin-bottom: 0  !important;
  }
  .m-b_n6\:md {
    margin-bottom: -4rem  !important;
  }
  .m-b_n5\:md {
    margin-bottom: -2rem  !important;
  }
  .m-b_n4\:md {
    margin-bottom: -1rem  !important;
  }
  .m-b_n3\:md {
    margin-bottom: -0.5rem  !important;
  }
  .m-b_n2\:md {
    margin-bottom: -0.25rem  !important;
  }
  .m-b_n1\:md {
    margin-bottom: -1px  !important;
  }
  .m-b_1\:md {
    margin-bottom: 1px  !important;
  }
  .m-b_2\:md {
    margin-bottom: 0.25rem  !important;
  }
  .m-b_3\:md {
    margin-bottom: 0.5rem  !important;
  }
  .m-b_4\:md {
    margin-bottom: 1rem  !important;
  }
  .m-b_5\:md {
    margin-bottom: 2rem  !important;
  }
  .m-b_6\:md {
    margin-bottom: 4rem  !important;
  }
  .m-b_auto\:md {
    margin-bottom: auto  !important;
  }
  .m-b_unset\:md {
    margin-bottom: unset  !important;
  }
  .m-l_0\:md {
    margin-left: 0  !important;
  }
  .m-l_n6\:md {
    margin-left: -4rem  !important;
  }
  .m-l_n5\:md {
    margin-left: -2rem  !important;
  }
  .m-l_n4\:md {
    margin-left: -1rem  !important;
  }
  .m-l_n3\:md {
    margin-left: -0.5rem  !important;
  }
  .m-l_n2\:md {
    margin-left: -0.25rem  !important;
  }
  .m-l_n1\:md {
    margin-left: -1px  !important;
  }
  .m-l_1\:md {
    margin-left: 1px  !important;
  }
  .m-l_2\:md {
    margin-left: 0.25rem  !important;
  }
  .m-l_3\:md {
    margin-left: 0.5rem  !important;
  }
  .m-l_4\:md {
    margin-left: 1rem  !important;
  }
  .m-l_5\:md {
    margin-left: 2rem  !important;
  }
  .m-l_6\:md {
    margin-left: 4rem  !important;
  }
  .m-l_auto\:md {
    margin-left: auto  !important;
  }
  .m-l_unset\:md {
    margin-left: unset  !important;
  }
  .m-r_0\:md {
    margin-right: 0  !important;
  }
  .m-r_n6\:md {
    margin-right: -4rem  !important;
  }
  .m-r_n5\:md {
    margin-right: -2rem  !important;
  }
  .m-r_n4\:md {
    margin-right: -1rem  !important;
  }
  .m-r_n3\:md {
    margin-right: -0.5rem  !important;
  }
  .m-r_n2\:md {
    margin-right: -0.25rem  !important;
  }
  .m-r_n1\:md {
    margin-right: -1px  !important;
  }
  .m-r_1\:md {
    margin-right: 1px  !important;
  }
  .m-r_2\:md {
    margin-right: 0.25rem  !important;
  }
  .m-r_3\:md {
    margin-right: 0.5rem  !important;
  }
  .m-r_4\:md {
    margin-right: 1rem  !important;
  }
  .m-r_5\:md {
    margin-right: 2rem  !important;
  }
  .m-r_6\:md {
    margin-right: 4rem  !important;
  }
  .m-r_auto\:md {
    margin-right: auto  !important;
  }
  .m-r_unset\:md {
    margin-right: unset  !important;
  }
}
@media only screen and (width > 1024px) {
  .m_0\:lg {
    margin: 0  !important;
  }
  .m_n6\:lg {
    margin: -4rem  !important;
  }
  .m_n5\:lg {
    margin: -2rem  !important;
  }
  .m_n4\:lg {
    margin: -1rem  !important;
  }
  .m_n3\:lg {
    margin: -0.5rem  !important;
  }
  .m_n2\:lg {
    margin: -0.25rem  !important;
  }
  .m_n1\:lg {
    margin: -1px  !important;
  }
  .m_1\:lg {
    margin: 1px  !important;
  }
  .m_2\:lg {
    margin: 0.25rem  !important;
  }
  .m_3\:lg {
    margin: 0.5rem  !important;
  }
  .m_4\:lg {
    margin: 1rem  !important;
  }
  .m_5\:lg {
    margin: 2rem  !important;
  }
  .m_6\:lg {
    margin: 4rem  !important;
  }
  .m_auto\:lg {
    margin: auto  !important;
  }
  .m_unset\:lg {
    margin: unset  !important;
  }
  .m-y_0\:lg {
    margin-top: 0  !important;
    margin-bottom: 0  !important;
  }
  .m-y_n6\:lg {
    margin-top: -4rem  !important;
    margin-bottom: -4rem  !important;
  }
  .m-y_n5\:lg {
    margin-top: -2rem  !important;
    margin-bottom: -2rem  !important;
  }
  .m-y_n4\:lg {
    margin-top: -1rem  !important;
    margin-bottom: -1rem  !important;
  }
  .m-y_n3\:lg {
    margin-top: -0.5rem  !important;
    margin-bottom: -0.5rem  !important;
  }
  .m-y_n2\:lg {
    margin-top: -0.25rem  !important;
    margin-bottom: -0.25rem  !important;
  }
  .m-y_n1\:lg {
    margin-top: -1px  !important;
    margin-bottom: -1px  !important;
  }
  .m-y_1\:lg {
    margin-top: 1px  !important;
    margin-bottom: 1px  !important;
  }
  .m-y_2\:lg {
    margin-top: 0.25rem  !important;
    margin-bottom: 0.25rem  !important;
  }
  .m-y_3\:lg {
    margin-top: 0.5rem  !important;
    margin-bottom: 0.5rem  !important;
  }
  .m-y_4\:lg {
    margin-top: 1rem  !important;
    margin-bottom: 1rem  !important;
  }
  .m-y_5\:lg {
    margin-top: 2rem  !important;
    margin-bottom: 2rem  !important;
  }
  .m-y_6\:lg {
    margin-top: 4rem  !important;
    margin-bottom: 4rem  !important;
  }
  .m-y_auto\:lg {
    margin-top: auto  !important;
    margin-bottom: auto  !important;
  }
  .m-y_unset\:lg {
    margin-top: unset  !important;
    margin-bottom: unset  !important;
  }
  .m-x_0\:lg {
    margin-right: 0  !important;
    margin-left: 0  !important;
  }
  .m-x_n6\:lg {
    margin-right: -4rem  !important;
    margin-left: -4rem  !important;
  }
  .m-x_n5\:lg {
    margin-right: -2rem  !important;
    margin-left: -2rem  !important;
  }
  .m-x_n4\:lg {
    margin-right: -1rem  !important;
    margin-left: -1rem  !important;
  }
  .m-x_n3\:lg {
    margin-right: -0.5rem  !important;
    margin-left: -0.5rem  !important;
  }
  .m-x_n2\:lg {
    margin-right: -0.25rem  !important;
    margin-left: -0.25rem  !important;
  }
  .m-x_n1\:lg {
    margin-right: -1px  !important;
    margin-left: -1px  !important;
  }
  .m-x_1\:lg {
    margin-right: 1px  !important;
    margin-left: 1px  !important;
  }
  .m-x_2\:lg {
    margin-right: 0.25rem  !important;
    margin-left: 0.25rem  !important;
  }
  .m-x_3\:lg {
    margin-right: 0.5rem  !important;
    margin-left: 0.5rem  !important;
  }
  .m-x_4\:lg {
    margin-right: 1rem  !important;
    margin-left: 1rem  !important;
  }
  .m-x_5\:lg {
    margin-right: 2rem  !important;
    margin-left: 2rem  !important;
  }
  .m-x_6\:lg {
    margin-right: 4rem  !important;
    margin-left: 4rem  !important;
  }
  .m-x_auto\:lg {
    margin-right: auto  !important;
    margin-left: auto  !important;
  }
  .m-x_unset\:lg {
    margin-right: unset  !important;
    margin-left: unset  !important;
  }
  .m-t_0\:lg {
    margin-top: 0  !important;
  }
  .m-t_n6\:lg {
    margin-top: -4rem  !important;
  }
  .m-t_n5\:lg {
    margin-top: -2rem  !important;
  }
  .m-t_n4\:lg {
    margin-top: -1rem  !important;
  }
  .m-t_n3\:lg {
    margin-top: -0.5rem  !important;
  }
  .m-t_n2\:lg {
    margin-top: -0.25rem  !important;
  }
  .m-t_n1\:lg {
    margin-top: -1px  !important;
  }
  .m-t_1\:lg {
    margin-top: 1px  !important;
  }
  .m-t_2\:lg {
    margin-top: 0.25rem  !important;
  }
  .m-t_3\:lg {
    margin-top: 0.5rem  !important;
  }
  .m-t_4\:lg {
    margin-top: 1rem  !important;
  }
  .m-t_5\:lg {
    margin-top: 2rem  !important;
  }
  .m-t_6\:lg {
    margin-top: 4rem  !important;
  }
  .m-t_auto\:lg {
    margin-top: auto  !important;
  }
  .m-t_unset\:lg {
    margin-top: unset  !important;
  }
  .m-b_0\:lg {
    margin-bottom: 0  !important;
  }
  .m-b_n6\:lg {
    margin-bottom: -4rem  !important;
  }
  .m-b_n5\:lg {
    margin-bottom: -2rem  !important;
  }
  .m-b_n4\:lg {
    margin-bottom: -1rem  !important;
  }
  .m-b_n3\:lg {
    margin-bottom: -0.5rem  !important;
  }
  .m-b_n2\:lg {
    margin-bottom: -0.25rem  !important;
  }
  .m-b_n1\:lg {
    margin-bottom: -1px  !important;
  }
  .m-b_1\:lg {
    margin-bottom: 1px  !important;
  }
  .m-b_2\:lg {
    margin-bottom: 0.25rem  !important;
  }
  .m-b_3\:lg {
    margin-bottom: 0.5rem  !important;
  }
  .m-b_4\:lg {
    margin-bottom: 1rem  !important;
  }
  .m-b_5\:lg {
    margin-bottom: 2rem  !important;
  }
  .m-b_6\:lg {
    margin-bottom: 4rem  !important;
  }
  .m-b_auto\:lg {
    margin-bottom: auto  !important;
  }
  .m-b_unset\:lg {
    margin-bottom: unset  !important;
  }
  .m-l_0\:lg {
    margin-left: 0  !important;
  }
  .m-l_n6\:lg {
    margin-left: -4rem  !important;
  }
  .m-l_n5\:lg {
    margin-left: -2rem  !important;
  }
  .m-l_n4\:lg {
    margin-left: -1rem  !important;
  }
  .m-l_n3\:lg {
    margin-left: -0.5rem  !important;
  }
  .m-l_n2\:lg {
    margin-left: -0.25rem  !important;
  }
  .m-l_n1\:lg {
    margin-left: -1px  !important;
  }
  .m-l_1\:lg {
    margin-left: 1px  !important;
  }
  .m-l_2\:lg {
    margin-left: 0.25rem  !important;
  }
  .m-l_3\:lg {
    margin-left: 0.5rem  !important;
  }
  .m-l_4\:lg {
    margin-left: 1rem  !important;
  }
  .m-l_5\:lg {
    margin-left: 2rem  !important;
  }
  .m-l_6\:lg {
    margin-left: 4rem  !important;
  }
  .m-l_auto\:lg {
    margin-left: auto  !important;
  }
  .m-l_unset\:lg {
    margin-left: unset  !important;
  }
  .m-r_0\:lg {
    margin-right: 0  !important;
  }
  .m-r_n6\:lg {
    margin-right: -4rem  !important;
  }
  .m-r_n5\:lg {
    margin-right: -2rem  !important;
  }
  .m-r_n4\:lg {
    margin-right: -1rem  !important;
  }
  .m-r_n3\:lg {
    margin-right: -0.5rem  !important;
  }
  .m-r_n2\:lg {
    margin-right: -0.25rem  !important;
  }
  .m-r_n1\:lg {
    margin-right: -1px  !important;
  }
  .m-r_1\:lg {
    margin-right: 1px  !important;
  }
  .m-r_2\:lg {
    margin-right: 0.25rem  !important;
  }
  .m-r_3\:lg {
    margin-right: 0.5rem  !important;
  }
  .m-r_4\:lg {
    margin-right: 1rem  !important;
  }
  .m-r_5\:lg {
    margin-right: 2rem  !important;
  }
  .m-r_6\:lg {
    margin-right: 4rem  !important;
  }
  .m-r_auto\:lg {
    margin-right: auto  !important;
  }
  .m-r_unset\:lg {
    margin-right: unset  !important;
  }
}
/*
Padding

<div class="p-b_3"><span class="bg_accent br_radius c_white inline-block font_n1 p-7_3 p-x_5 sg">Is Responsive: breakpoint modifiers</span></div>Quickly alter the padding of an object. <table class='clear_both'><thead class='font_bold uppercase'><th>class</th><th>responsive modifiers</th><th class='text_right'>css property</th><th>value</th></thead><tbody><tr><td class='c_primary-n2'> .p_0</td><td class=''>.p_0:md, .p_0:lg</td><td class='text_right'> padding :</td><td> 0 </td></tr> <tr><td class='c_primary-n2'> .p_1</td><td class=''>.p_1:md, .p_1:lg</td><td class='text_right'> padding :</td><td> 1px </td></tr> <tr><td class='c_primary-n2'> .p_2</td><td class=''>.p_2:md, .p_2:lg</td><td class='text_right'> padding :</td><td> 0.25rem </td></tr> <tr><td class='c_primary-n2'> .p_3</td><td class=''>.p_3:md, .p_3:lg</td><td class='text_right'> padding :</td><td> 0.5rem </td></tr> <tr><td class='c_primary-n2'> .p_4</td><td class=''>.p_4:md, .p_4:lg</td><td class='text_right'> padding :</td><td> 1rem </td></tr> <tr><td class='c_primary-n2'> .p_5</td><td class=''>.p_5:md, .p_5:lg</td><td class='text_right'> padding :</td><td> 2rem </td></tr> <tr><td class='c_primary-n2'> .p_6</td><td class=''>.p_6:md, .p_6:lg</td><td class='text_right'> padding :</td><td> 4rem </td></tr> </tbody></table>

.p_0      	-  padding: 0 
.p_1   				-  padding: 1px
.p_2   -  padding: 0.25rem
.p_3   -  padding: 0.5rem
.p_4   -  padding: 1rem
.p_5   -  padding: 2rem
.p-x_5             	 - left and right paddings set to 2x of global padding 
.p-y_5             	 - top and bottom paddings set to 2x of global padding 
.p-t_4          	- Top padding set to global padding
.p-r_4        	- Right padding set to global padding
.p-l_4        	 - Left padding set to global padding
.p-b_4      	 - Bottom padding set to global padding

Markup:
<div class="{{modifier_class}} br_solid br_transparent bg_alert-3  text_center">
	<div class="bg_primary-5 text_center">Content With Padding</div>
</div>

Styleguide Layouts.Padding

 */
.p_0 {
  padding: 0  !important;
}

.p_1 {
  padding: 1px  !important;
}

.p_2 {
  padding: 4px  !important;
  padding: 0.25rem  !important;
}

.p_3 {
  padding: 8px  !important;
  padding: 0.5rem  !important;
}

.p_4 {
  padding: 16px  !important;
  padding: 1rem  !important;
}

.p_5 {
  padding: 32px  !important;
  padding: 2rem  !important;
}

.p_6 {
  padding: 64px  !important;
  padding: 4rem  !important;
}

.p-y_0 {
  padding-top: 0  !important;
  padding-bottom: 0  !important;
}

.p-y_1 {
  padding-top: 1px  !important;
  padding-bottom: 1px  !important;
}

.p-y_2 {
  padding-top: 4px  !important;
  padding-top: 0.25rem  !important;
  padding-bottom: 4px  !important;
  padding-bottom: 0.25rem  !important;
}

.p-y_3, .btn_acc-primary {
  padding-top: 8px  !important;
  padding-top: 0.5rem  !important;
  padding-bottom: 8px  !important;
  padding-bottom: 0.5rem  !important;
}

.p-y_4 {
  padding-top: 16px  !important;
  padding-top: 1rem  !important;
  padding-bottom: 16px  !important;
  padding-bottom: 1rem  !important;
}

.p-y_5 {
  padding-top: 32px  !important;
  padding-top: 2rem  !important;
  padding-bottom: 32px  !important;
  padding-bottom: 2rem  !important;
}

.p-y_6 {
  padding-top: 64px  !important;
  padding-top: 4rem  !important;
  padding-bottom: 64px  !important;
  padding-bottom: 4rem  !important;
}

.p-x_0 {
  padding-right: 0  !important;
  padding-left: 0  !important;
}

.p-x_1 {
  padding-right: 1px  !important;
  padding-left: 1px  !important;
}

.p-x_2 {
  padding-right: 4px  !important;
  padding-right: 0.25rem  !important;
  padding-left: 4px  !important;
  padding-left: 0.25rem  !important;
}

.p-x_3 {
  padding-right: 8px  !important;
  padding-right: 0.5rem  !important;
  padding-left: 8px  !important;
  padding-left: 0.5rem  !important;
}

.p-x_4, .btn_acc-primary {
  padding-right: 16px  !important;
  padding-right: 1rem  !important;
  padding-left: 16px  !important;
  padding-left: 1rem  !important;
}

.p-x_5 {
  padding-right: 32px  !important;
  padding-right: 2rem  !important;
  padding-left: 32px  !important;
  padding-left: 2rem  !important;
}

.p-x_6 {
  padding-right: 64px  !important;
  padding-right: 4rem  !important;
  padding-left: 64px  !important;
  padding-left: 4rem  !important;
}

.p-t_0 {
  padding-top: 0  !important;
}

.p-t_1 {
  padding-top: 1px  !important;
}

.p-t_2 {
  padding-top: 4px  !important;
  padding-top: 0.25rem  !important;
}

.p-t_3 {
  padding-top: 8px  !important;
  padding-top: 0.5rem  !important;
}

.p-t_4 {
  padding-top: 16px  !important;
  padding-top: 1rem  !important;
}

.p-t_5 {
  padding-top: 32px  !important;
  padding-top: 2rem  !important;
}

.p-t_6 {
  padding-top: 64px  !important;
  padding-top: 4rem  !important;
}

.p-b_0 {
  padding-bottom: 0  !important;
}

.p-b_1 {
  padding-bottom: 1px  !important;
}

.p-b_2 {
  padding-bottom: 4px  !important;
  padding-bottom: 0.25rem  !important;
}

.p-b_3 {
  padding-bottom: 8px  !important;
  padding-bottom: 0.5rem  !important;
}

.p-b_4 {
  padding-bottom: 16px  !important;
  padding-bottom: 1rem  !important;
}

.p-b_5 {
  padding-bottom: 32px  !important;
  padding-bottom: 2rem  !important;
}

.p-b_6 {
  padding-bottom: 64px  !important;
  padding-bottom: 4rem  !important;
}

.p-l_0 {
  padding-left: 0  !important;
}

.p-l_1 {
  padding-left: 1px  !important;
}

.p-l_2 {
  padding-left: 4px  !important;
  padding-left: 0.25rem  !important;
}

.p-l_3 {
  padding-left: 8px  !important;
  padding-left: 0.5rem  !important;
}

.p-l_4 {
  padding-left: 16px  !important;
  padding-left: 1rem  !important;
}

.p-l_5 {
  padding-left: 32px  !important;
  padding-left: 2rem  !important;
}

.p-l_6 {
  padding-left: 64px  !important;
  padding-left: 4rem  !important;
}

.p-r_0 {
  padding-right: 0  !important;
}

.p-r_1 {
  padding-right: 1px  !important;
}

.p-r_2 {
  padding-right: 4px  !important;
  padding-right: 0.25rem  !important;
}

.p-r_3 {
  padding-right: 8px  !important;
  padding-right: 0.5rem  !important;
}

.p-r_4 {
  padding-right: 16px  !important;
  padding-right: 1rem  !important;
}

.p-r_5 {
  padding-right: 32px  !important;
  padding-right: 2rem  !important;
}

.p-r_6 {
  padding-right: 64px  !important;
  padding-right: 4rem  !important;
}

@media only screen and (width > 768px) {
  .p_0\:md {
    padding: 0  !important;
  }
  .p_1\:md {
    padding: 1px  !important;
  }
  .p_2\:md {
    padding: 0.25rem  !important;
  }
  .p_3\:md {
    padding: 0.5rem  !important;
  }
  .p_4\:md {
    padding: 1rem  !important;
  }
  .p_5\:md {
    padding: 2rem  !important;
  }
  .p_6\:md {
    padding: 4rem  !important;
  }
  .p-y_0\:md {
    padding-top: 0  !important;
    padding-bottom: 0  !important;
  }
  .p-y_1\:md {
    padding-top: 1px  !important;
    padding-bottom: 1px  !important;
  }
  .p-y_2\:md {
    padding-top: 0.25rem  !important;
    padding-bottom: 0.25rem  !important;
  }
  .p-y_3\:md {
    padding-top: 0.5rem  !important;
    padding-bottom: 0.5rem  !important;
  }
  .p-y_4\:md {
    padding-top: 1rem  !important;
    padding-bottom: 1rem  !important;
  }
  .p-y_5\:md {
    padding-top: 2rem  !important;
    padding-bottom: 2rem  !important;
  }
  .p-y_6\:md {
    padding-top: 4rem  !important;
    padding-bottom: 4rem  !important;
  }
  .p-x_0\:md {
    padding-right: 0  !important;
    padding-left: 0  !important;
  }
  .p-x_1\:md {
    padding-right: 1px  !important;
    padding-left: 1px  !important;
  }
  .p-x_2\:md {
    padding-right: 0.25rem  !important;
    padding-left: 0.25rem  !important;
  }
  .p-x_3\:md {
    padding-right: 0.5rem  !important;
    padding-left: 0.5rem  !important;
  }
  .p-x_4\:md {
    padding-right: 1rem  !important;
    padding-left: 1rem  !important;
  }
  .p-x_5\:md {
    padding-right: 2rem  !important;
    padding-left: 2rem  !important;
  }
  .p-x_6\:md {
    padding-right: 4rem  !important;
    padding-left: 4rem  !important;
  }
  .p-t_0\:md {
    padding-top: 0  !important;
  }
  .p-t_1\:md {
    padding-top: 1px  !important;
  }
  .p-t_2\:md {
    padding-top: 0.25rem  !important;
  }
  .p-t_3\:md {
    padding-top: 0.5rem  !important;
  }
  .p-t_4\:md {
    padding-top: 1rem  !important;
  }
  .p-t_5\:md {
    padding-top: 2rem  !important;
  }
  .p-t_6\:md {
    padding-top: 4rem  !important;
  }
  .p-b_0\:md {
    padding-bottom: 0  !important;
  }
  .p-b_1\:md {
    padding-bottom: 1px  !important;
  }
  .p-b_2\:md {
    padding-bottom: 0.25rem  !important;
  }
  .p-b_3\:md {
    padding-bottom: 0.5rem  !important;
  }
  .p-b_4\:md {
    padding-bottom: 1rem  !important;
  }
  .p-b_5\:md {
    padding-bottom: 2rem  !important;
  }
  .p-b_6\:md {
    padding-bottom: 4rem  !important;
  }
  .p-l_0\:md {
    padding-left: 0  !important;
  }
  .p-l_1\:md {
    padding-left: 1px  !important;
  }
  .p-l_2\:md {
    padding-left: 0.25rem  !important;
  }
  .p-l_3\:md {
    padding-left: 0.5rem  !important;
  }
  .p-l_4\:md {
    padding-left: 1rem  !important;
  }
  .p-l_5\:md {
    padding-left: 2rem  !important;
  }
  .p-l_6\:md {
    padding-left: 4rem  !important;
  }
  .p-r_0\:md {
    padding-right: 0  !important;
  }
  .p-r_1\:md {
    padding-right: 1px  !important;
  }
  .p-r_2\:md {
    padding-right: 0.25rem  !important;
  }
  .p-r_3\:md {
    padding-right: 0.5rem  !important;
  }
  .p-r_4\:md {
    padding-right: 1rem  !important;
  }
  .p-r_5\:md {
    padding-right: 2rem  !important;
  }
  .p-r_6\:md {
    padding-right: 4rem  !important;
  }
}
@media only screen and (width > 1024px) {
  .p_0\:lg {
    padding: 0  !important;
  }
  .p_1\:lg {
    padding: 1px  !important;
  }
  .p_2\:lg {
    padding: 0.25rem  !important;
  }
  .p_3\:lg {
    padding: 0.5rem  !important;
  }
  .p_4\:lg {
    padding: 1rem  !important;
  }
  .p_5\:lg {
    padding: 2rem  !important;
  }
  .p_6\:lg {
    padding: 4rem  !important;
  }
  .p-y_0\:lg {
    padding-top: 0  !important;
    padding-bottom: 0  !important;
  }
  .p-y_1\:lg {
    padding-top: 1px  !important;
    padding-bottom: 1px  !important;
  }
  .p-y_2\:lg {
    padding-top: 0.25rem  !important;
    padding-bottom: 0.25rem  !important;
  }
  .p-y_3\:lg {
    padding-top: 0.5rem  !important;
    padding-bottom: 0.5rem  !important;
  }
  .p-y_4\:lg {
    padding-top: 1rem  !important;
    padding-bottom: 1rem  !important;
  }
  .p-y_5\:lg {
    padding-top: 2rem  !important;
    padding-bottom: 2rem  !important;
  }
  .p-y_6\:lg {
    padding-top: 4rem  !important;
    padding-bottom: 4rem  !important;
  }
  .p-x_0\:lg {
    padding-right: 0  !important;
    padding-left: 0  !important;
  }
  .p-x_1\:lg {
    padding-right: 1px  !important;
    padding-left: 1px  !important;
  }
  .p-x_2\:lg {
    padding-right: 0.25rem  !important;
    padding-left: 0.25rem  !important;
  }
  .p-x_3\:lg {
    padding-right: 0.5rem  !important;
    padding-left: 0.5rem  !important;
  }
  .p-x_4\:lg {
    padding-right: 1rem  !important;
    padding-left: 1rem  !important;
  }
  .p-x_5\:lg {
    padding-right: 2rem  !important;
    padding-left: 2rem  !important;
  }
  .p-x_6\:lg {
    padding-right: 4rem  !important;
    padding-left: 4rem  !important;
  }
  .p-t_0\:lg {
    padding-top: 0  !important;
  }
  .p-t_1\:lg {
    padding-top: 1px  !important;
  }
  .p-t_2\:lg {
    padding-top: 0.25rem  !important;
  }
  .p-t_3\:lg {
    padding-top: 0.5rem  !important;
  }
  .p-t_4\:lg {
    padding-top: 1rem  !important;
  }
  .p-t_5\:lg {
    padding-top: 2rem  !important;
  }
  .p-t_6\:lg {
    padding-top: 4rem  !important;
  }
  .p-b_0\:lg {
    padding-bottom: 0  !important;
  }
  .p-b_1\:lg {
    padding-bottom: 1px  !important;
  }
  .p-b_2\:lg {
    padding-bottom: 0.25rem  !important;
  }
  .p-b_3\:lg {
    padding-bottom: 0.5rem  !important;
  }
  .p-b_4\:lg {
    padding-bottom: 1rem  !important;
  }
  .p-b_5\:lg {
    padding-bottom: 2rem  !important;
  }
  .p-b_6\:lg {
    padding-bottom: 4rem  !important;
  }
  .p-l_0\:lg {
    padding-left: 0  !important;
  }
  .p-l_1\:lg {
    padding-left: 1px  !important;
  }
  .p-l_2\:lg {
    padding-left: 0.25rem  !important;
  }
  .p-l_3\:lg {
    padding-left: 0.5rem  !important;
  }
  .p-l_4\:lg {
    padding-left: 1rem  !important;
  }
  .p-l_5\:lg {
    padding-left: 2rem  !important;
  }
  .p-l_6\:lg {
    padding-left: 4rem  !important;
  }
  .p-r_0\:lg {
    padding-right: 0  !important;
  }
  .p-r_1\:lg {
    padding-right: 1px  !important;
  }
  .p-r_2\:lg {
    padding-right: 0.25rem  !important;
  }
  .p-r_3\:lg {
    padding-right: 0.5rem  !important;
  }
  .p-r_4\:lg {
    padding-right: 1rem  !important;
  }
  .p-r_5\:lg {
    padding-right: 2rem  !important;
  }
  .p-r_6\:lg {
    padding-right: 4rem  !important;
  }
}
@media (hover: none) and (pointer: coarse) {
  .p_0\:touch {
    padding: 0  !important;
  }
  .p_1\:touch {
    padding: 1px  !important;
  }
  .p_2\:touch {
    padding: 0.25rem  !important;
  }
  .p_3\:touch {
    padding: 0.5rem  !important;
  }
  .p_4\:touch {
    padding: 1rem  !important;
  }
  .p_5\:touch {
    padding: 2rem  !important;
  }
  .p_6\:touch {
    padding: 4rem  !important;
  }
  .p-y_0\:touch {
    padding-top: 0  !important;
    padding-bottom: 0  !important;
  }
  .p-y_1\:touch {
    padding-top: 1px  !important;
    padding-bottom: 1px  !important;
  }
  .p-y_2\:touch {
    padding-top: 0.25rem  !important;
    padding-bottom: 0.25rem  !important;
  }
  .p-y_3\:touch {
    padding-top: 0.5rem  !important;
    padding-bottom: 0.5rem  !important;
  }
  .p-y_4\:touch {
    padding-top: 1rem  !important;
    padding-bottom: 1rem  !important;
  }
  .p-y_5\:touch {
    padding-top: 2rem  !important;
    padding-bottom: 2rem  !important;
  }
  .p-y_6\:touch {
    padding-top: 4rem  !important;
    padding-bottom: 4rem  !important;
  }
  .p-x_0\:touch {
    padding-right: 0  !important;
    padding-left: 0  !important;
  }
  .p-x_1\:touch {
    padding-right: 1px  !important;
    padding-left: 1px  !important;
  }
  .p-x_2\:touch {
    padding-right: 0.25rem  !important;
    padding-left: 0.25rem  !important;
  }
  .p-x_3\:touch {
    padding-right: 0.5rem  !important;
    padding-left: 0.5rem  !important;
  }
  .p-x_4\:touch {
    padding-right: 1rem  !important;
    padding-left: 1rem  !important;
  }
  .p-x_5\:touch {
    padding-right: 2rem  !important;
    padding-left: 2rem  !important;
  }
  .p-x_6\:touch {
    padding-right: 4rem  !important;
    padding-left: 4rem  !important;
  }
  .p-t_0\:touch {
    padding-top: 0  !important;
  }
  .p-t_1\:touch {
    padding-top: 1px  !important;
  }
  .p-t_2\:touch {
    padding-top: 0.25rem  !important;
  }
  .p-t_3\:touch {
    padding-top: 0.5rem  !important;
  }
  .p-t_4\:touch {
    padding-top: 1rem  !important;
  }
  .p-t_5\:touch {
    padding-top: 2rem  !important;
  }
  .p-t_6\:touch {
    padding-top: 4rem  !important;
  }
  .p-b_0\:touch {
    padding-bottom: 0  !important;
  }
  .p-b_1\:touch {
    padding-bottom: 1px  !important;
  }
  .p-b_2\:touch {
    padding-bottom: 0.25rem  !important;
  }
  .p-b_3\:touch {
    padding-bottom: 0.5rem  !important;
  }
  .p-b_4\:touch {
    padding-bottom: 1rem  !important;
  }
  .p-b_5\:touch {
    padding-bottom: 2rem  !important;
  }
  .p-b_6\:touch {
    padding-bottom: 4rem  !important;
  }
  .p-l_0\:touch {
    padding-left: 0  !important;
  }
  .p-l_1\:touch {
    padding-left: 1px  !important;
  }
  .p-l_2\:touch {
    padding-left: 0.25rem  !important;
  }
  .p-l_3\:touch {
    padding-left: 0.5rem  !important;
  }
  .p-l_4\:touch {
    padding-left: 1rem  !important;
  }
  .p-l_5\:touch {
    padding-left: 2rem  !important;
  }
  .p-l_6\:touch {
    padding-left: 4rem  !important;
  }
  .p-r_0\:touch {
    padding-right: 0  !important;
  }
  .p-r_1\:touch {
    padding-right: 1px  !important;
  }
  .p-r_2\:touch {
    padding-right: 0.25rem  !important;
  }
  .p-r_3\:touch {
    padding-right: 0.5rem  !important;
  }
  .p-r_4\:touch {
    padding-right: 1rem  !important;
  }
  .p-r_5\:touch {
    padding-right: 2rem  !important;
  }
  .p-r_6\:touch {
    padding-right: 4rem  !important;
  }
}
/*
Position Type

<div class="p-b_3"><span class="bg_accent br_radius c_white inline-block font_n1 p-7_3 p-x_5 sg">Is Responsive: breakpoint modifiers</span></div>Quickly alter the position type and location of an object with 'absolute' and 'top'

.initial        	 -  position: initial 
.inherit       -  position: inherit
.relative      -  position: relative
.absolute      -  position: absolute
.fixed         -  position: fixed
.sticky        -  position: sticky
.unset         -  position: unset

Markup:
<div class="br_solid br_transparent bg_accent-3 relative p_5" style="height:200px;">
	<div class="bg_primary-5 text_center {{modifier_class}}">Position {{modifier_class}}</div>
</div>

Styleguide Layouts.Position

 */
.initial {
  position: initial  !important;
}

.inherit {
  position: inherit  !important;
}

.relative {
  position: relative  !important;
}

.absolute {
  position: absolute  !important;
}

.fixed {
  position: fixed  !important;
}

.sticky {
  position: sticky  !important;
}

.unset {
  position: unset  !important;
}

@media only screen and (width > 768px) {
  .initial\:md {
    position: initial  !important;
  }
  .inherit\:md {
    position: inherit  !important;
  }
  .relative\:md {
    position: relative  !important;
  }
  .absolute\:md {
    position: absolute  !important;
  }
  .fixed\:md {
    position: fixed  !important;
  }
  .sticky\:md {
    position: sticky  !important;
  }
  .unset\:md {
    position: unset  !important;
  }
}
@media only screen and (width > 1024px) {
  .initial\:lg {
    position: initial  !important;
  }
  .inherit\:lg {
    position: inherit  !important;
  }
  .relative\:lg {
    position: relative  !important;
  }
  .absolute\:lg {
    position: absolute  !important;
  }
  .fixed\:lg {
    position: fixed  !important;
  }
  .sticky\:lg {
    position: sticky  !important;
  }
  .unset\:lg {
    position: unset  !important;
  }
}
/*
Location Position


Directional Position

The directional positioning classes are used to specify the positioning of an element in a specific direction. The directional positioning classes are most useful when combined with the "absolute" positioning mode, but it can also be used with other positioning modes. It allows you to specify the positioning of an element in a specific direction, such as inset, top, right, bottom, or left.


Styleguide Layouts.Location


*/
/*
Inset


<div><span class="bg_accent br_radius c_white inline-block font_n1 p-7_3 p-x_5 sg">Is Responsive: breakpoint modifiers</span></div>The "inset" CSS property allows you to specify the positioning of an element's four edges within its containing element. It provides a convenient shorthand for defining the values of "top," "right," "bottom," and "left" properties simultaneously. By using the "inset" property, you can easily control the placement of an element without the need to specify each edge individually.

.inset_auto - modify inset of an absolute positioned block 
.inset_0 - modify inset of an absolute positioned block 
.inset_3 - modify inset of an absolute positioned block
.inset_5 - modify inset of an absolute positioned block
.inset_n3 - modify inset of an absolute positioned block
.inset_n5 - modify inset of an absolute positioned block


Markup:
<div class=" br_solid br_black br_1 bg_accent-3 relative p_5" style="height:200px;">
	<div class="bg_white-5 m_auto text_center absolute {{modifier_class}} opacity_5 br_solid br_black-5 br_1">Position Absolute {{modifier_class}}</div>
</div>

NOTE: The ".inset_x" CSS class has lower specificity in the cascade, enabling a corresponding directional class to override its positioning at that specific responsive layer.

Styleguide Layouts.Location.Inset

 */
/*
Directional Position

<div class="p-b_3"><span class="bg_accent br_radius c_white inline-block font_n1 p-7_3 p-x_5 sg">Is Responsive: breakpoint modifiers</span></div>Quickly alter the position type and location of an object with top, bottom, left, and right position modifiers. All of these modifiers will follow the rules of the containers position type. All of the examples below are using absolute positions to have the greatest effect. 

.t_1 - modify top of an absolute positioned block 
.t_5 - modify top of an absolute positioned block
.b_1 - modify bottom of an absolute positioned block 
.b_5 - modify bottom of an absolute positioned block
.r_5 - modify left of an absolute positioned block 
.l_5 - modify right of an absolute positioned block 


Markup:
<div class=" br_solid br_transparent bg_accent-3 relative p_5" style="height:200px;">
	<div class="bg_primary-5 text_center absolute {{modifier_class}}">Position Absolute {{modifier_class}}</div>
</div>

Styleguide Layouts.Location.Position

 */
.inset_100 {
  inset: 100%;
}

.inset_auto {
  inset: auto;
}

.inset_unset {
  inset: unset;
}

.inset_0 {
  inset: 0;
}

.inset_n6 {
  inset: -64px;
  inset: -4rem;
}

.inset_n5 {
  inset: -32px;
  inset: -2rem;
}

.inset_n4 {
  inset: -16px;
  inset: -1rem;
}

.inset_n3 {
  inset: -8px;
  inset: -0.5rem;
}

.inset_n2 {
  inset: -4px;
  inset: -0.25rem;
}

.inset_n1 {
  inset: -1px;
}

.inset_1 {
  inset: 1px;
}

.inset_2 {
  inset: 4px;
  inset: 0.25rem;
}

.inset_3 {
  inset: 8px;
  inset: 0.5rem;
}

.inset_4 {
  inset: 16px;
  inset: 1rem;
}

.inset_5,.inset_6 {
  inset: 32px;
  inset: 2rem;
}

.t_100 {
  top: 100%;
}

.t_auto {
  top: auto;
}

.t_unset {
  top: unset;
}

.t_0 {
  top: 0;
}

.t_n6 {
  top: -64px;
  top: -4rem;
}

.t_n5 {
  top: -32px;
  top: -2rem;
}

.t_n4 {
  top: -16px;
  top: -1rem;
}

.t_n3 {
  top: -8px;
  top: -0.5rem;
}

.t_n2 {
  top: -4px;
  top: -0.25rem;
}

.t_n1 {
  top: -1px;
}

.t_1 {
  top: 1px;
}

.t_2 {
  top: 4px;
  top: 0.25rem;
}

.t_3 {
  top: 8px;
  top: 0.5rem;
}

.t_4 {
  top: 16px;
  top: 1rem;
}

.t_5,.t_6 {
  top: 32px;
  top: 2rem;
}

.b_100 {
  bottom: 100%;
}

.b_auto {
  bottom: auto;
}

.b_unset {
  bottom: unset;
}

.b_0 {
  bottom: 0;
}

.b_n6 {
  bottom: -64px;
  bottom: -4rem;
}

.b_n5 {
  bottom: -32px;
  bottom: -2rem;
}

.b_n4 {
  bottom: -16px;
  bottom: -1rem;
}

.b_n3 {
  bottom: -8px;
  bottom: -0.5rem;
}

.b_n2 {
  bottom: -4px;
  bottom: -0.25rem;
}

.b_n1 {
  bottom: -1px;
}

.b_1 {
  bottom: 1px;
}

.b_2 {
  bottom: 4px;
  bottom: 0.25rem;
}

.b_3 {
  bottom: 8px;
  bottom: 0.5rem;
}

.b_4 {
  bottom: 16px;
  bottom: 1rem;
}

.b_5,.b_6 {
  bottom: 32px;
  bottom: 2rem;
}

.l_100 {
  left: 100%;
}

.l_auto {
  left: auto;
}

.l_unset {
  left: unset;
}

.l_0 {
  left: 0;
}

.l_n6 {
  left: -64px;
  left: -4rem;
}

.l_n5 {
  left: -32px;
  left: -2rem;
}

.l_n4 {
  left: -16px;
  left: -1rem;
}

.l_n3 {
  left: -8px;
  left: -0.5rem;
}

.l_n2 {
  left: -4px;
  left: -0.25rem;
}

.l_n1 {
  left: -1px;
}

.l_1 {
  left: 1px;
}

.l_2 {
  left: 4px;
  left: 0.25rem;
}

.l_3 {
  left: 8px;
  left: 0.5rem;
}

.l_4 {
  left: 16px;
  left: 1rem;
}

.l_5,.l_6 {
  left: 32px;
  left: 2rem;
}

.r_100 {
  right: 100%;
}

.r_auto {
  right: auto;
}

.r_unset {
  right: unset;
}

.r_0 {
  right: 0;
}

.r_n6 {
  right: -64px;
  right: -4rem;
}

.r_n5 {
  right: -32px;
  right: -2rem;
}

.r_n4 {
  right: -16px;
  right: -1rem;
}

.r_n3 {
  right: -8px;
  right: -0.5rem;
}

.r_n2 {
  right: -4px;
  right: -0.25rem;
}

.r_n1 {
  right: -1px;
}

.r_1 {
  right: 1px;
}

.r_2 {
  right: 4px;
  right: 0.25rem;
}

.r_3 {
  right: 8px;
  right: 0.5rem;
}

.r_4 {
  right: 16px;
  right: 1rem;
}

.r_5,.r_6 {
  right: 32px;
  right: 2rem;
}

@media only screen and (width > 768px) {
  .inset_100\:md {
    inset: 100%;
  }
  .inset_auto\:md {
    inset: auto;
  }
  .inset_unset\:md {
    inset: unset;
  }
  .inset_0\:md {
    inset: 0;
  }
  .inset_n6\:md {
    inset: -4rem;
  }
  .inset_n5\:md {
    inset: -2rem;
  }
  .inset_n4\:md {
    inset: -1rem;
  }
  .inset_n3\:md {
    inset: -0.5rem;
  }
  .inset_n2\:md {
    inset: -0.25rem;
  }
  .inset_n1\:md {
    inset: -1px;
  }
  .inset_1\:md {
    inset: 1px;
  }
  .inset_2\:md {
    inset: 0.25rem;
  }
  .inset_3\:md {
    inset: 0.5rem;
  }
  .inset_4\:md {
    inset: 1rem;
  }
  .inset_5\:md,.inset_6\:md {
    inset: 2rem;
  }
  .t_100\:md {
    top: 100%;
  }
  .t_auto\:md {
    top: auto;
  }
  .t_unset\:md {
    top: unset;
  }
  .t_0\:md {
    top: 0;
  }
  .t_n6\:md {
    top: -4rem;
  }
  .t_n5\:md {
    top: -2rem;
  }
  .t_n4\:md {
    top: -1rem;
  }
  .t_n3\:md {
    top: -0.5rem;
  }
  .t_n2\:md {
    top: -0.25rem;
  }
  .t_n1\:md {
    top: -1px;
  }
  .t_1\:md {
    top: 1px;
  }
  .t_2\:md {
    top: 0.25rem;
  }
  .t_3\:md {
    top: 0.5rem;
  }
  .t_4\:md {
    top: 1rem;
  }
  .t_5\:md,.t_6\:md {
    top: 2rem;
  }
  .b_100\:md {
    bottom: 100%;
  }
  .b_auto\:md {
    bottom: auto;
  }
  .b_unset\:md {
    bottom: unset;
  }
  .b_0\:md {
    bottom: 0;
  }
  .b_n6\:md {
    bottom: -4rem;
  }
  .b_n5\:md {
    bottom: -2rem;
  }
  .b_n4\:md {
    bottom: -1rem;
  }
  .b_n3\:md {
    bottom: -0.5rem;
  }
  .b_n2\:md {
    bottom: -0.25rem;
  }
  .b_n1\:md {
    bottom: -1px;
  }
  .b_1\:md {
    bottom: 1px;
  }
  .b_2\:md {
    bottom: 0.25rem;
  }
  .b_3\:md {
    bottom: 0.5rem;
  }
  .b_4\:md {
    bottom: 1rem;
  }
  .b_5\:md,.b_6\:md {
    bottom: 2rem;
  }
  .l_100\:md {
    left: 100%;
  }
  .l_auto\:md {
    left: auto;
  }
  .l_unset\:md {
    left: unset;
  }
  .l_0\:md {
    left: 0;
  }
  .l_n6\:md {
    left: -4rem;
  }
  .l_n5\:md {
    left: -2rem;
  }
  .l_n4\:md {
    left: -1rem;
  }
  .l_n3\:md {
    left: -0.5rem;
  }
  .l_n2\:md {
    left: -0.25rem;
  }
  .l_n1\:md {
    left: -1px;
  }
  .l_1\:md {
    left: 1px;
  }
  .l_2\:md {
    left: 0.25rem;
  }
  .l_3\:md {
    left: 0.5rem;
  }
  .l_4\:md {
    left: 1rem;
  }
  .l_5\:md,.l_6\:md {
    left: 2rem;
  }
  .r_100\:md {
    right: 100%;
  }
  .r_auto\:md {
    right: auto;
  }
  .r_unset\:md {
    right: unset;
  }
  .r_0\:md {
    right: 0;
  }
  .r_n6\:md {
    right: -4rem;
  }
  .r_n5\:md {
    right: -2rem;
  }
  .r_n4\:md {
    right: -1rem;
  }
  .r_n3\:md {
    right: -0.5rem;
  }
  .r_n2\:md {
    right: -0.25rem;
  }
  .r_n1\:md {
    right: -1px;
  }
  .r_1\:md {
    right: 1px;
  }
  .r_2\:md {
    right: 0.25rem;
  }
  .r_3\:md {
    right: 0.5rem;
  }
  .r_4\:md {
    right: 1rem;
  }
  .r_5\:md,.r_6\:md {
    right: 2rem;
  }
}
@media only screen and (width > 1024px) {
  .inset_100\:lg {
    inset: 100%;
  }
  .inset_auto\:lg {
    inset: auto;
  }
  .inset_unset\:lg {
    inset: unset;
  }
  .inset_0\:lg {
    inset: 0;
  }
  .inset_n6\:lg {
    inset: -4rem;
  }
  .inset_n5\:lg {
    inset: -2rem;
  }
  .inset_n4\:lg {
    inset: -1rem;
  }
  .inset_n3\:lg {
    inset: -0.5rem;
  }
  .inset_n2\:lg {
    inset: -0.25rem;
  }
  .inset_n1\:lg {
    inset: -1px;
  }
  .inset_1\:lg {
    inset: 1px;
  }
  .inset_2\:lg {
    inset: 0.25rem;
  }
  .inset_3\:lg {
    inset: 0.5rem;
  }
  .inset_4\:lg {
    inset: 1rem;
  }
  .inset_5\:lg,.inset_6\:lg {
    inset: 2rem;
  }
  .t_100\:lg {
    top: 100%;
  }
  .t_auto\:lg {
    top: auto;
  }
  .t_unset\:lg {
    top: unset;
  }
  .t_0\:lg {
    top: 0;
  }
  .t_n6\:lg {
    top: -4rem;
  }
  .t_n5\:lg {
    top: -2rem;
  }
  .t_n4\:lg {
    top: -1rem;
  }
  .t_n3\:lg {
    top: -0.5rem;
  }
  .t_n2\:lg {
    top: -0.25rem;
  }
  .t_n1\:lg {
    top: -1px;
  }
  .t_1\:lg {
    top: 1px;
  }
  .t_2\:lg {
    top: 0.25rem;
  }
  .t_3\:lg {
    top: 0.5rem;
  }
  .t_4\:lg {
    top: 1rem;
  }
  .t_5\:lg,.t_6\:lg {
    top: 2rem;
  }
  .b_100\:lg {
    bottom: 100%;
  }
  .b_auto\:lg {
    bottom: auto;
  }
  .b_unset\:lg {
    bottom: unset;
  }
  .b_0\:lg {
    bottom: 0;
  }
  .b_n6\:lg {
    bottom: -4rem;
  }
  .b_n5\:lg {
    bottom: -2rem;
  }
  .b_n4\:lg {
    bottom: -1rem;
  }
  .b_n3\:lg {
    bottom: -0.5rem;
  }
  .b_n2\:lg {
    bottom: -0.25rem;
  }
  .b_n1\:lg {
    bottom: -1px;
  }
  .b_1\:lg {
    bottom: 1px;
  }
  .b_2\:lg {
    bottom: 0.25rem;
  }
  .b_3\:lg {
    bottom: 0.5rem;
  }
  .b_4\:lg {
    bottom: 1rem;
  }
  .b_5\:lg,.b_6\:lg {
    bottom: 2rem;
  }
  .l_100\:lg {
    left: 100%;
  }
  .l_auto\:lg {
    left: auto;
  }
  .l_unset\:lg {
    left: unset;
  }
  .l_0\:lg {
    left: 0;
  }
  .l_n6\:lg {
    left: -4rem;
  }
  .l_n5\:lg {
    left: -2rem;
  }
  .l_n4\:lg {
    left: -1rem;
  }
  .l_n3\:lg {
    left: -0.5rem;
  }
  .l_n2\:lg {
    left: -0.25rem;
  }
  .l_n1\:lg {
    left: -1px;
  }
  .l_1\:lg {
    left: 1px;
  }
  .l_2\:lg {
    left: 0.25rem;
  }
  .l_3\:lg {
    left: 0.5rem;
  }
  .l_4\:lg {
    left: 1rem;
  }
  .l_5\:lg,.l_6\:lg {
    left: 2rem;
  }
  .r_100\:lg {
    right: 100%;
  }
  .r_auto\:lg {
    right: auto;
  }
  .r_unset\:lg {
    right: unset;
  }
  .r_0\:lg {
    right: 0;
  }
  .r_n6\:lg {
    right: -4rem;
  }
  .r_n5\:lg {
    right: -2rem;
  }
  .r_n4\:lg {
    right: -1rem;
  }
  .r_n3\:lg {
    right: -0.5rem;
  }
  .r_n2\:lg {
    right: -0.25rem;
  }
  .r_n1\:lg {
    right: -1px;
  }
  .r_1\:lg {
    right: 1px;
  }
  .r_2\:lg {
    right: 0.25rem;
  }
  .r_3\:lg {
    right: 0.5rem;
  }
  .r_4\:lg {
    right: 1rem;
  }
  .r_5\:lg,.r_6\:lg {
    right: 2rem;
  }
}
/*
Float

<div class="p-b_3"><span class="bg_accent br_radius c_white inline-block font_n1 p-7_3 p-x_5 sg">Is Responsive: breakpoint modifiers</span></div> Easily Add Float to an object

.float_unset     -  float: unset 
.float_none    -  float: none
.float_left    -  float: left
.float_right   -  float: right


Markup:
<div class=" br_solid br_transparent bg_accent-3 relative p_5" style="height:200px;">
	<div class="bg_primary-5 text_center {{modifier_class}}">Position Absolute {{modifier_class}}</div>
</div>

Styleguide Layouts.Float

 */
/*
Clear

<div class="p-b_3"><span class="bg_accent br_radius c_white inline-block font_n1 p-7_3 p-x_5 sg">Is Responsive: breakpoint modifiers</span></div>Quickly alter the position type and location of an object with 'absolute' and 'top'

clear_fix  			- unset positioned block 
clear_left  		- inital positioned block 
clear_right  		- inherit positioned block 
clear_both  		- relative positioned block 


Styleguide Layouts.Clear

 */
.clear_fix:after {
  display: table;
  clear: both;
  content: "";
}

.clear_both {
  clear: both;
}

.clear_left {
  clear: left;
}

.clear_right {
  clear: right;
}

.float_unset {
  float: unset;
}

.float_none {
  float: none;
}

.float_left {
  float: left;
}

.float_right {
  float: right;
}

@media only screen and (width > 768px) {
  .float_unset\:md {
    float: unset;
  }
  .float_none\:md {
    float: none;
  }
  .float_left\:md {
    float: left;
  }
  .float_right\:md {
    float: right;
  }
  .clear_both\:md {
    clear: both;
  }
  .clear_left\:md {
    clear: left;
  }
  .clear_right\:md {
    clear: right;
  }
}
@media only screen and (width > 1024px) {
  .float_unset\:lg {
    float: unset;
  }
  .float_none\:lg {
    float: none;
  }
  .float_left\:lg {
    float: left;
  }
  .float_right\:lg {
    float: right;
  }
  .clear_both\:lg {
    clear: both;
  }
  .clear_left\:lg {
    clear: left;
  }
  .clear_right\:lg {
    clear: right;
  }
}
/*
Layout 

Padding, Margins, and Positions are the most common usage for Utility Classes.  Layout UC's are responsive and can be postfixed with `:md` and with `:lg` to have finer control on the spacing of objects.

Weight: 120

Styleguide Layouts
*/
/*
	Display

	<div class="p-b_3"><span class="bg_accent br_radius c_white inline-block font_n1 p-7_3 p-x_5 sg">Is Responsive: breakpoint modifiers</span></div> Alter the display of an object to create more complicated UI and Layouts. <table class='clear_both'><thead class='font_bold uppercase'><th>class</th><th>responsive modifiers</th><th class='text_right'>css property</th><th>value</th></thead><tbody><tr><td class='c_primary-n2'> .block</td><td class=''>.block:md, .block:lg</td><td class='text_right'> display :</td><td> block </td></tr> <tr><td class='c_primary-n2'> .inline</td><td class=''>.inline:md, .inline:lg</td><td class='text_right'> display :</td><td> inline </td></tr> <tr><td class='c_primary-n2'> .inline-block</td><td class=''>.inline-block:md, .inline-block:lg</td><td class='text_right'> display :</td><td> inline-block </td></tr> <tr><td class='c_primary-n2'> .table-cell</td><td class=''>.table-cell:md, .table-cell:lg</td><td class='text_right'> display :</td><td> table-cell </td></tr> <tr><td class='c_primary-n2'> .table</td><td class=''>.table:md, .table:lg</td><td class='text_right'> display :</td><td> table </td></tr> <tr><td class='c_primary-n2'> .table-row</td><td class=''>.table-row:md, .table-row:lg</td><td class='text_right'> display :</td><td> table-row </td></tr> <tr><td class='c_primary-n2'> .table-row-group</td><td class=''>.table-row-group:md, .table-row-group:lg</td><td class='text_right'> display :</td><td> table-row-group </td></tr> <tr><td class='c_primary-n2'> .flex</td><td class=''>.flex:md, .flex:lg</td><td class='text_right'> display :</td><td> flex </td></tr> <tr><td class='c_primary-n2'> .inline-flex</td><td class=''>.inline-flex:md, .inline-flex:lg</td><td class='text_right'> display :</td><td> inline-flex </td></tr> <tr><td class='c_primary-n2'> .grid</td><td class=''>.grid:md, .grid:lg</td><td class='text_right'> display :</td><td> grid </td></tr> <tr><td class='c_primary-n2'> .display_contents</td><td class=''>.display_contents:md, .display_contents:lg</td><td class='text_right'> display :</td><td> contents </td></tr> <tr><td class='c_primary-n2'> .display_none</td><td class=''>.display_none:md, .display_none:lg</td><td class='text_right'> display :</td><td> none </td></tr> </tbody></table>  

	Styleguide Layouts.Display

 */
/*
	Display Nothing on Empty

	This utility class is used to hide an element when it contains no content. This is super useful for creating a space that needs to be decorated but also doesn't need to be shown when empty. 

	Markup:
	<h2> <strong class="font_bold c_primary-n2 uppercase">Does Not Have</strong> class display_none:empty and has <strong class="font_bold c_primary-n2 uppercase">No Content</strong></h2>
	<div class="p-b_3 br_solid br_primary br_1"></div>
	<h2> <strong class="font_bold c_primary-n2 uppercase">Has</strong> class display_none:empty and has <strong class="font_bold c_primary-n2 uppercase">No Content</strong></h2>
	<div class="p-b_3 br_solid br_primary br_1 display_none:empty"></div>
	<h2> <strong class="font_bold c_primary-n2 uppercase">Has</strong> class display_none:empty has <strong class="font_bold c_primary-n2 uppercase">Content</strong></h2>
	<div class="p-b_3 br_solid br_primary br_1 display_none:empty">any content including space will show the element</div>

	MarkupWrapperClasses: w_100

	NOTE: !! Whitespace counts as not empty !!

	Weight:10

	Styleguide Layouts.Display.Empty

 */
/*

Display For Touch Devices

Display has extra breakpoints `:touch` that can be used to create layouts that are more friendly for touch screen inputs. Touch devices are often smaller than desktop devices and input method is a finger that can't hover.  This utility class  can be used to create a layout that is more friendly for touch devices. Touch layouts are often needed to uncover UI that only appears on Hover.

Markup:
<div class="p_3 font_bold">This element shows for both <strong class="font_bold c_primary-n2 uppercase"><i class="fas fa-desktop"></i> desktop</strong> and <strong class="font_bold c_primary-n2 uppercase"><i class="fas fa-hand-pointer"></i>Touch </strong> devices</div>
<div class="p_3 font_bold display_none:touch">This element shows only for <strong class="font_bold c_primary-n2 uppercase"><i class="fas fa-desktop"></i> desktop</strong> devices</div>
<div class="p_3 font_bold block:touch display_none">This element shows only for <strong class="font_bold c_primary-n2 uppercase"><i class="fas fa-hand-pointer"></i>Touch </strong> devices</div> 

MarkupWrapperClasses: w_100

Weight:0

Styleguide Layouts.Display.ExtraBreakpoints

*/
.block {
  display: block;
}

.inline {
  display: inline;
}

.inline-block, .btn_acc-primary {
  display: inline-block;
}

.table-cell {
  display: table-cell;
}

.table {
  display: table;
}

.table-row {
  display: table-row;
}

.table-row-group {
  display: table-row-group;
}

.flex {
  display: flex;
}

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

.grid {
  display: grid;
}

.display_contents {
  display: contents;
}

.display_none {
  display: none;
}

@media only screen and (width > 768px) {
  .block\:md {
    display: block;
  }
  .inline\:md {
    display: inline;
  }
  .inline-block\:md {
    display: inline-block;
  }
  .table-cell\:md {
    display: table-cell;
  }
  .table\:md {
    display: table;
  }
  .table-row\:md {
    display: table-row;
  }
  .table-row-group\:md {
    display: table-row-group;
  }
  .flex\:md {
    display: flex;
  }
  .inline-flex\:md {
    display: inline-flex;
  }
  .grid\:md {
    display: grid;
  }
  .display_contents\:md {
    display: contents;
  }
  .display_none\:md {
    display: none;
  }
}
@media only screen and (width > 1024px) {
  .block\:lg {
    display: block;
  }
  .inline\:lg {
    display: inline;
  }
  .inline-block\:lg {
    display: inline-block;
  }
  .table-cell\:lg {
    display: table-cell;
  }
  .table\:lg {
    display: table;
  }
  .table-row\:lg {
    display: table-row;
  }
  .table-row-group\:lg {
    display: table-row-group;
  }
  .flex\:lg {
    display: flex;
  }
  .inline-flex\:lg {
    display: inline-flex;
  }
  .grid\:lg {
    display: grid;
  }
  .display_contents\:lg {
    display: contents;
  }
  .display_none\:lg {
    display: none;
  }
  .block\:lg {
    display: block;
  }
  .inline\:lg {
    display: inline;
  }
  .inline-block\:lg {
    display: inline-block;
  }
  .table-cell\:lg {
    display: table-cell;
  }
  .table\:lg {
    display: table;
  }
  .table-row\:lg {
    display: table-row;
  }
  .table-row-group\:lg {
    display: table-row-group;
  }
  .flex\:lg {
    display: flex;
  }
  .inline-flex\:lg {
    display: inline-flex;
  }
  .grid\:lg {
    display: grid;
  }
  .display_contents\:lg {
    display: contents;
  }
  .display_none\:lg {
    display: none;
  }
}
@media only screen and (width > 1024px) {
}
@media (hover: none) and (pointer: coarse) {
  .block\:touch {
    display: block;
  }
  .inline\:touch {
    display: inline;
  }
  .inline-block\:touch {
    display: inline-block;
  }
  .table-cell\:touch {
    display: table-cell;
  }
  .table\:touch {
    display: table;
  }
  .table-row\:touch {
    display: table-row;
  }
  .table-row-group\:touch {
    display: table-row-group;
  }
  .flex\:touch {
    display: flex;
  }
  .inline-flex\:touch {
    display: inline-flex;
  }
  .grid\:touch {
    display: grid;
  }
  .display_contents\:touch {
    display: contents;
  }
  .display_none\:touch {
    display: none;
  }
}
.display_none\:empty:empty {
  display: none;
}

/*
Z Index

Alter the Z Index of objects to help deal with objects that are out of normal z-index flow.  <table class='clear_both'><thead class='font_bold uppercase'><th>class</th><th class='text_right'>css property</th><th>value</th></thead><tbody><tr><td class='c_primary-n2'> .z_0</td><td class='text_right'> z-index :</td><td> -1 </td></tr> <tr><td class='c_primary-n2'> .z_1</td><td class='text_right'> z-index :</td><td> 1 </td></tr> <tr><td class='c_primary-n2'> .z_2</td><td class='text_right'> z-index :</td><td> 100 </td></tr> <tr><td class='c_primary-n2'> .z_3</td><td class='text_right'> z-index :</td><td> 1000 </td></tr> <tr><td class='c_primary-n2'> .z_4</td><td class='text_right'> z-index :</td><td> 5000 </td></tr> <tr><td class='c_primary-n2'> .z_5</td><td class='text_right'> z-index :</td><td> 9999 </td></tr> </tbody></table>  

.z_0   -  z-index: -1
.z_1   -  z-index: 1
.z_3   -  z-index: 1000
.z_5   -  z-index: 9999

Markup:
<div class="bg_alert-3 block br_solid br_transparent relative text_center" style=" height: 15rem; width: 100%;">
	<div class="absolute bg_black-5 c_white inline-block l_0 m_4 t_1 text_center w_70 z_3" style=" height: 13rem;">z-index of 1000</div>
	<div class="absolute bg_primary c_white inline-block m_5 r_0 t_1 text_center w_70 {{modifier_class}}" style=" height: 11rem;">{{modifier_class}}</div>
</div>

Styleguide Layouts.z-index

*/
.z_0 {
  z-index: -1;
}

.z_1 {
  z-index: 1;
}

.z_2 {
  z-index: 100;
}

.z_3 {
  z-index: 1000;
}

.z_4 {
  z-index: 5000;
}

.z_5 {
  z-index: 9999;
}

.vertical-align_top {
  vertical-align: top;
}

.vertical-align_middle {
  vertical-align: middle;
}

.vertical-align_bottom {
  vertical-align: bottom;
}

.vertical-align_baseline {
  vertical-align: baseline;
}

/*
Isolation

Altering the isolation of an object to create more complicated UI and Layouts when dealing with z-index.  <table class='clear_both'><thead class='font_bold uppercase'><th>class</th><th class='text_right'>css property</th><th>value</th></thead><tbody><tr><td class='c_primary-n2'> .isolation_isolate</td><td class='text_right'> isolation :</td><td> isolate </td></tr> <tr><td class='c_primary-n2'> .isolation_auto</td><td class='text_right'> isolation :</td><td> auto </td></tr> <tr><td class='c_primary-n2'> .isolation_inherit</td><td class='text_right'> isolation :</td><td> inherit </td></tr> <tr><td class='c_primary-n2'> .isolation_revert</td><td class='text_right'> isolation :</td><td> revert </td></tr> <tr><td class='c_primary-n2'> .isolation_unset</td><td class='text_right'> isolation :</td><td> unset </td></tr> </tbody></table> 


Markup:
<div></div>

Styleguide Layouts.Isolation

*/
.isolation_isolate {
  isolation: isolate;
}

.isolation_auto {
  isolation: auto;
}

.isolation_inherit {
  isolation: inherit;
}

.isolation_revert {
  isolation: revert;
}

.isolation_unset {
  isolation: unset;
}

/*
	Vertical Align

	Quickly alter the vertical alignment of the child. caution the vertical only works on valid combinations. 

	.vertical-align_top              		- the child is aligned to the Top
	.vertical-align_middle              	- the child is aligned to the Middle
	.vertical-align_bottom            		- the child is aligned to the Bottom
	.vertical-align_baseline          		- the child is aligned to the Baseline

	Styleguide Layouts.Display.VerticalAlignment

 */
/*
	Flex

	Structure Objects quickly and change the order of the  

	.flex_row              		- flex_row
	.flex_column              		- flex_column
	.flex_row-reverse              		- flex_column-reverse
	.flex_column-reverse              		- flex_row-reverse

	Markup:
	<div class="flex {{modifier_class}} br_solid br_transparent bg_alert-3  text_center  p_3 bg_warning-3"> 
		<div class="bg_primary-5 text_center flex_auto p_3 br_solid br_1 m_2 br_black">Auto 1</div>
		<div class="bg_primary-5 text_center flex_shrink p_3 br_solid br_1 m_2 br_black">Shrink 2</div>
		<div class="bg_primary-5 text_center flex_auto p_3 br_solid br_1 m_2 br_black">Auto 3</div>
	</div>

	Styleguide Layouts.Display.flex

 */
/* 1. Fix for Chrome 44 bug.
* https://code.google.com/p/chromium/issues/detail?id=506893 */
.flex_auto, .flex_grow, .flex_shrink {
  min-width: 0; /* 1 */
  min-height: 0; /* 1 */
}

.flex > * {
  box-sizing: border-box;
}

.flex_none {
  flex: none;
}

.flex_grow {
  flex: 1 0 auto;
}

.flex_shrink {
  flex: 0 1 auto;
}

.flex_auto {
  flex: 1 1 auto;
}

.flex_row {
  flex-direction: row;
}

.flex_column {
  flex-direction: column;
}

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

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

.flex_wrap-reverse {
  flex-wrap: wrap-reverse;
}

.flex_wrap {
  flex-wrap: wrap;
}

.flex_nowrap {
  flex-wrap: nowrap;
}

.flex_auto {
  flex-basis: auto;
}

.flex_0 {
  flex-basis: 0%;
}

.flex_5 {
  flex-basis: 5%;
}

.flex_10 {
  flex-basis: 10%;
}

.flex_15 {
  flex-basis: 15%;
}

.flex_20 {
  flex-basis: 20%;
}

.flex_25 {
  flex-basis: 25%;
}

.flex_30 {
  flex-basis: 30%;
}

.flex_35 {
  flex-basis: 35%;
}

.flex_40 {
  flex-basis: 40%;
}

.flex_45 {
  flex-basis: 45%;
}

.flex_50 {
  flex-basis: 50%;
}

.flex_55 {
  flex-basis: 55%;
}

.flex_60 {
  flex-basis: 60%;
}

.flex_65 {
  flex-basis: 65%;
}

.flex_70 {
  flex-basis: 70%;
}

.flex_75 {
  flex-basis: 75%;
}

.flex_80 {
  flex-basis: 80%;
}

.flex_85 {
  flex-basis: 85%;
}

.flex_90 {
  flex-basis: 90%;
}

.flex_95 {
  flex-basis: 95%;
}

.flex_100 {
  flex-basis: 100%;
}

.flex_third-1 {
  flex-basis: 33%;
}

.flex_third-2 {
  flex-basis: 66%;
}

.justify_start {
  justify-content: start;
}

.justify_end {
  justify-content: end;
}

.justify_center {
  justify-content: center;
}

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

.justify_around {
  justify-content: space-around;
}

.justify_evenly {
  justify-content: space-evenly;
}

.justify_stretch {
  justify-content: stretch;
}

.justify_baseline {
  justify-content: baseline;
}

.justify-items_start {
  justify-items: start;
}

.justify-items_end {
  justify-items: end;
}

.justify-items_center {
  justify-items: center;
}

.justify-items_between {
  justify-items: space-between;
}

.justify-items_around {
  justify-items: space-around;
}

.justify-items_stretch {
  justify-items: stretch;
}

.justify-items_baseline {
  justify-items: baseline;
}

.self-justify_start {
  justify-self: start;
}

.self-justify_end {
  justify-self: end;
}

.self-justify_center {
  justify-self: center;
}

.self-justify_between {
  justify-self: space-between;
}

.self-justify_around {
  justify-self: space-around;
}

.self-justify_stretch {
  justify-self: stretch;
}

.self-justify_baseline {
  justify-self: baseline;
}

.content_start {
  align-content: start;
}

.content_end {
  align-content: end;
}

.content_center {
  align-content: center;
}

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

.content_around {
  align-content: space-around;
}

.content_evenly {
  align-content: space-evenly;
}

.content_stretch {
  align-content: stretch;
}

.content_baseline {
  align-content: baseline;
}

.items_start {
  align-items: start;
}

.items_end {
  align-items: end;
}

.items_center {
  align-items: center;
}

.items_between {
  align-items: space-between;
}

.items_around {
  align-items: space-around;
}

.items_stretch {
  align-items: stretch;
}

.items_baseline {
  align-items: baseline;
}

.self_start {
  align-self: start;
}

.self_end {
  align-self: end;
}

.self_center {
  align-self: center;
}

.self_between {
  align-self: space-between;
}

.self_around {
  align-self: space-around;
}

.self_stretch {
  align-self: stretch;
}

.self_baseline {
  align-self: baseline;
}

.order_start {
  order: -999;
}

.order_1 {
  order: 1;
}

.order_2 {
  order: 2;
}

.order_3 {
  order: 3;
}

.order_4 {
  order: 4;
}

.order_5 {
  order: 5;
}

.order_6 {
  order: 6;
}

.order_7 {
  order: 7;
}

.order_n1 {
  order: -1;
}

.order_n2 {
  order: -2;
}

.order_n3 {
  order: -3;
}

.order_n4 {
  order: -4;
}

.order_n5 {
  order: -5;
}

.order_n6 {
  order: -6;
}

.order_n7 {
  order: -7;
}

.order_end {
  order: 999;
}

@media only screen and (width > 768px) {
  .flex_none\:md {
    flex: none;
  }
  .flex_grow\:md {
    flex: 1 0 auto;
  }
  .flex_shrink\:md {
    flex: 0 1 auto;
  }
  .flex_auto\:md {
    flex: 1 1 auto;
  }
  .flex_row\:md {
    flex-direction: row;
  }
  .flex_column\:md {
    flex-direction: column;
  }
  .flex_row-reverse\:md {
    flex-direction: row-reverse;
  }
  .flex_column-reverse\:md {
    flex-direction: column-reverse;
  }
  .flex_wrap-reverse\:md {
    flex-wrap: wrap-reverse;
  }
  .flex_wrap\:md {
    flex-wrap: wrap;
  }
  .flex_nowrap\:md {
    flex-wrap: nowrap;
  }
  .flex_auto\:md {
    flex-basis: auto;
  }
  .flex_0\:md {
    flex-basis: 0%;
  }
  .flex_5\:md {
    flex-basis: 5%;
  }
  .flex_10\:md {
    flex-basis: 10%;
  }
  .flex_15\:md {
    flex-basis: 15%;
  }
  .flex_20\:md {
    flex-basis: 20%;
  }
  .flex_25\:md {
    flex-basis: 25%;
  }
  .flex_30\:md {
    flex-basis: 30%;
  }
  .flex_35\:md {
    flex-basis: 35%;
  }
  .flex_40\:md {
    flex-basis: 40%;
  }
  .flex_45\:md {
    flex-basis: 45%;
  }
  .flex_50\:md {
    flex-basis: 50%;
  }
  .flex_55\:md {
    flex-basis: 55%;
  }
  .flex_60\:md {
    flex-basis: 60%;
  }
  .flex_65\:md {
    flex-basis: 65%;
  }
  .flex_70\:md {
    flex-basis: 70%;
  }
  .flex_75\:md {
    flex-basis: 75%;
  }
  .flex_80\:md {
    flex-basis: 80%;
  }
  .flex_85\:md {
    flex-basis: 85%;
  }
  .flex_90\:md {
    flex-basis: 90%;
  }
  .flex_95\:md {
    flex-basis: 95%;
  }
  .flex_100\:md {
    flex-basis: 100%;
  }
  .flex_third-1\:md {
    flex-basis: 33%;
  }
  .flex_third-2\:md {
    flex-basis: 66%;
  }
  .justify_start\:md {
    justify-content: start;
  }
  .justify_end\:md {
    justify-content: end;
  }
  .justify_center\:md {
    justify-content: center;
  }
  .justify_between\:md {
    justify-content: space-between;
  }
  .justify_around\:md {
    justify-content: space-around;
  }
  .justify_evenly\:md {
    justify-content: space-evenly;
  }
  .justify_stretch\:md {
    justify-content: stretch;
  }
  .justify_baseline\:md {
    justify-content: baseline;
  }
  .justify-items_start\:md {
    justify-items: start;
  }
  .justify-items_end\:md {
    justify-items: end;
  }
  .justify-items_center\:md {
    justify-items: center;
  }
  .justify-items_between\:md {
    justify-items: space-between;
  }
  .justify-items_around\:md {
    justify-items: space-around;
  }
  .justify-items_stretch\:md {
    justify-items: stretch;
  }
  .justify-items_baseline\:md {
    justify-items: baseline;
  }
  .self-justify_start\:md {
    justify-self: start;
  }
  .self-justify_end\:md {
    justify-self: end;
  }
  .self-justify_center\:md {
    justify-self: center;
  }
  .self-justify_between\:md {
    justify-self: space-between;
  }
  .self-justify_around\:md {
    justify-self: space-around;
  }
  .self-justify_stretch\:md {
    justify-self: stretch;
  }
  .self-justify_baseline\:md {
    justify-self: baseline;
  }
  .content_start\:md {
    align-content: start;
  }
  .content_end\:md {
    align-content: end;
  }
  .content_center\:md {
    align-content: center;
  }
  .content_between\:md {
    align-content: space-between;
  }
  .content_around\:md {
    align-content: space-around;
  }
  .content_evenly\:md {
    align-content: space-evenly;
  }
  .content_stretch\:md {
    align-content: stretch;
  }
  .content_baseline\:md {
    align-content: baseline;
  }
  .items_start\:md {
    align-items: start;
  }
  .items_end\:md {
    align-items: end;
  }
  .items_center\:md {
    align-items: center;
  }
  .items_between\:md {
    align-items: space-between;
  }
  .items_around\:md {
    align-items: space-around;
  }
  .items_stretch\:md {
    align-items: stretch;
  }
  .items_baseline\:md {
    align-items: baseline;
  }
  .self_start\:md {
    align-self: start;
  }
  .self_end\:md {
    align-self: end;
  }
  .self_center\:md {
    align-self: center;
  }
  .self_between\:md {
    align-self: space-between;
  }
  .self_around\:md {
    align-self: space-around;
  }
  .self_stretch\:md {
    align-self: stretch;
  }
  .self_baseline\:md {
    align-self: baseline;
  }
  .order_start\:lg {
    order: -999;
  }
  .order_1\:lg {
    order: 1;
  }
  .order_2\:lg {
    order: 2;
  }
  .order_3\:lg {
    order: 3;
  }
  .order_4\:lg {
    order: 4;
  }
  .order_5\:lg {
    order: 5;
  }
  .order_6\:lg {
    order: 6;
  }
  .order_7\:lg {
    order: 7;
  }
  .order_n1\:lg {
    order: -1;
  }
  .order_n2\:lg {
    order: -2;
  }
  .order_n3\:lg {
    order: -3;
  }
  .order_n4\:lg {
    order: -4;
  }
  .order_n5\:lg {
    order: -5;
  }
  .order_n6\:lg {
    order: -6;
  }
  .order_n7\:lg {
    order: -7;
  }
  .order_end\:lg {
    order: 999;
  }
}
@media only screen and (width > 1024px) {
  .flex_none\:lg {
    flex: none;
  }
  .flex_grow\:lg {
    flex: 1 0 auto;
  }
  .flex_shrink\:lg {
    flex: 0 1 auto;
  }
  .flex_auto\:lg {
    flex: 1 1 auto;
  }
  .flex_row\:lg {
    flex-direction: row;
  }
  .flex_column\:lg {
    flex-direction: column;
  }
  .flex_row-reverse\:lg {
    flex-direction: row-reverse;
  }
  .flex_column-reverse\:lg {
    flex-direction: column-reverse;
  }
  .flex_wrap-reverse\:lg {
    flex-wrap: wrap-reverse;
  }
  .flex_wrap\:lg {
    flex-wrap: wrap;
  }
  .flex_nowrap\:lg {
    flex-wrap: nowrap;
  }
  .flex_auto\:lg {
    flex-basis: auto;
  }
  .flex_0\:lg {
    flex-basis: 0%;
  }
  .flex_5\:lg {
    flex-basis: 5%;
  }
  .flex_10\:lg {
    flex-basis: 10%;
  }
  .flex_15\:lg {
    flex-basis: 15%;
  }
  .flex_20\:lg {
    flex-basis: 20%;
  }
  .flex_25\:lg {
    flex-basis: 25%;
  }
  .flex_30\:lg {
    flex-basis: 30%;
  }
  .flex_35\:lg {
    flex-basis: 35%;
  }
  .flex_40\:lg {
    flex-basis: 40%;
  }
  .flex_45\:lg {
    flex-basis: 45%;
  }
  .flex_50\:lg {
    flex-basis: 50%;
  }
  .flex_55\:lg {
    flex-basis: 55%;
  }
  .flex_60\:lg {
    flex-basis: 60%;
  }
  .flex_65\:lg {
    flex-basis: 65%;
  }
  .flex_70\:lg {
    flex-basis: 70%;
  }
  .flex_75\:lg {
    flex-basis: 75%;
  }
  .flex_80\:lg {
    flex-basis: 80%;
  }
  .flex_85\:lg {
    flex-basis: 85%;
  }
  .flex_90\:lg {
    flex-basis: 90%;
  }
  .flex_95\:lg {
    flex-basis: 95%;
  }
  .flex_100\:lg {
    flex-basis: 100%;
  }
  .flex_third-1\:lg {
    flex-basis: 33%;
  }
  .flex_third-2\:lg {
    flex-basis: 66%;
  }
  .justify_start\:lg {
    justify-content: start;
  }
  .justify_end\:lg {
    justify-content: end;
  }
  .justify_center\:lg {
    justify-content: center;
  }
  .justify_between\:lg {
    justify-content: space-between;
  }
  .justify_around\:lg {
    justify-content: space-around;
  }
  .justify_evenly\:lg {
    justify-content: space-evenly;
  }
  .justify_stretch\:lg {
    justify-content: stretch;
  }
  .justify_baseline\:lg {
    justify-content: baseline;
  }
  .justify-items_start\:lg {
    justify-items: start;
  }
  .justify-items_end\:lg {
    justify-items: end;
  }
  .justify-items_center\:lg {
    justify-items: center;
  }
  .justify-items_between\:lg {
    justify-items: space-between;
  }
  .justify-items_around\:lg {
    justify-items: space-around;
  }
  .justify-items_stretch\:lg {
    justify-items: stretch;
  }
  .justify-items_baseline\:lg {
    justify-items: baseline;
  }
  .self-justify_start\:lg {
    justify-self: start;
  }
  .self-justify_end\:lg {
    justify-self: end;
  }
  .self-justify_center\:lg {
    justify-self: center;
  }
  .self-justify_between\:lg {
    justify-self: space-between;
  }
  .self-justify_around\:lg {
    justify-self: space-around;
  }
  .self-justify_stretch\:lg {
    justify-self: stretch;
  }
  .self-justify_baseline\:lg {
    justify-self: baseline;
  }
  .content_start\:lg {
    align-content: start;
  }
  .content_end\:lg {
    align-content: end;
  }
  .content_center\:lg {
    align-content: center;
  }
  .content_between\:lg {
    align-content: space-between;
  }
  .content_around\:lg {
    align-content: space-around;
  }
  .content_evenly\:lg {
    align-content: space-evenly;
  }
  .content_stretch\:lg {
    align-content: stretch;
  }
  .content_baseline\:lg {
    align-content: baseline;
  }
  .items_start\:lg {
    align-items: start;
  }
  .items_end\:lg {
    align-items: end;
  }
  .items_center\:lg {
    align-items: center;
  }
  .items_between\:lg {
    align-items: space-between;
  }
  .items_around\:lg {
    align-items: space-around;
  }
  .items_stretch\:lg {
    align-items: stretch;
  }
  .items_baseline\:lg {
    align-items: baseline;
  }
  .self_start\:lg {
    align-self: start;
  }
  .self_end\:lg {
    align-self: end;
  }
  .self_center\:lg {
    align-self: center;
  }
  .self_between\:lg {
    align-self: space-between;
  }
  .self_around\:lg {
    align-self: space-around;
  }
  .self_stretch\:lg {
    align-self: stretch;
  }
  .self_baseline\:lg {
    align-self: baseline;
  }
  .order_start\:lg {
    order: -999;
  }
  .order_1\:lg {
    order: 1;
  }
  .order_2\:lg {
    order: 2;
  }
  .order_3\:lg {
    order: 3;
  }
  .order_4\:lg {
    order: 4;
  }
  .order_5\:lg {
    order: 5;
  }
  .order_6\:lg {
    order: 6;
  }
  .order_7\:lg {
    order: 7;
  }
  .order_n1\:lg {
    order: -1;
  }
  .order_n2\:lg {
    order: -2;
  }
  .order_n3\:lg {
    order: -3;
  }
  .order_n4\:lg {
    order: -4;
  }
  .order_n5\:lg {
    order: -5;
  }
  .order_n6\:lg {
    order: -6;
  }
  .order_n7\:lg {
    order: -7;
  }
  .order_end\:lg {
    order: 999;
  }
}
/*
Grid

A great way to manipulating a repeating grid is to use the new CSS 3 grid layouts. 


Styleguide  Layouts.Grid
*/
/*
Grid Gap

Description: Grid Gap  <table class='clear_both'><thead class='font_bold uppercase'><th>class</th><th class='text_right'>css property</th><th>value</th></thead><tbody><tr><td class='c_primary-n2'> .gap-x_0</td><td class='text_right'> grid-column-gap :</td><td> 0 </td></tr> <tr><td class='c_primary-n2'> .gap-x_1</td><td class='text_right'> grid-column-gap :</td><td> 1px </td></tr> <tr><td class='c_primary-n2'> .gap-x_2</td><td class='text_right'> grid-column-gap :</td><td> 0.25rem </td></tr> <tr><td class='c_primary-n2'> .gap-x_3</td><td class='text_right'> grid-column-gap :</td><td> 0.5rem </td></tr> <tr><td class='c_primary-n2'> .gap-x_4</td><td class='text_right'> grid-column-gap :</td><td> 1rem </td></tr> <tr><td class='c_primary-n2'> .gap-x_5</td><td class='text_right'> grid-column-gap :</td><td> 2rem </td></tr> <tr><td class='c_primary-n2'> .gap-x_6</td><td class='text_right'> grid-column-gap :</td><td> 4rem </td></tr> </tbody></table>  <table class='clear_both'><thead class='font_bold uppercase'><th>class</th><th class='text_right'>css property</th><th>value</th></thead><tbody><tr><td class='c_primary-n2'> .gap-y_0</td><td class='text_right'> grid-row-gap :</td><td> 0 </td></tr> <tr><td class='c_primary-n2'> .gap-y_1</td><td class='text_right'> grid-row-gap :</td><td> 1px </td></tr> <tr><td class='c_primary-n2'> .gap-y_2</td><td class='text_right'> grid-row-gap :</td><td> 0.25rem </td></tr> <tr><td class='c_primary-n2'> .gap-y_3</td><td class='text_right'> grid-row-gap :</td><td> 0.5rem </td></tr> <tr><td class='c_primary-n2'> .gap-y_4</td><td class='text_right'> grid-row-gap :</td><td> 1rem </td></tr> <tr><td class='c_primary-n2'> .gap-y_5</td><td class='text_right'> grid-row-gap :</td><td> 2rem </td></tr> <tr><td class='c_primary-n2'> .gap-y_6</td><td class='text_right'> grid-row-gap :</td><td> 4rem </td></tr> </tbody></table>  

1			-			gap space modifier 
2			-			gap space modifier
3			-			gap space modifier
4			-			gap space modifier
5			-			gap space modifier
6			-			gap space modifier


Markup:
<div class="grid columns-max_15 gap_3"><div class="flex flex_column justify_start"><h2 class="flex_shrink">gap_{{modifier_class}}</h2><div class="gap_{{modifier_class}} grid columns_3 rows_3 flex_auto"><div class="bg_acc c_white font_4 font_bold grid items_center justify_around p_3 br_solid br_black-3 br_1">1 </div><div class="bg_acc c_white font_4 font_bold grid items_center justify_around p_3 br_solid br_black-3 br_1">2 </div><div class="bg_acc c_white font_4 font_bold grid items_center justify_around p_3 br_solid br_black-3 br_1">3 </div><div class="bg_acc c_white font_4 font_bold grid items_center justify_around p_3 br_solid br_black-3 br_1">4 </div><div class="bg_acc c_white font_4 font_bold grid items_center justify_around p_3 br_solid br_black-3 br_1">5 </div><div class="bg_acc c_white font_4 font_bold grid items_center justify_around p_3 br_solid br_black-3 br_1">6 </div><div class="bg_acc c_white font_4 font_bold grid items_center justify_around p_3 br_solid br_black-3 br_1">7 </div><div class="bg_acc c_white font_4 font_bold grid items_center justify_around p_3 br_solid br_black-3 br_1">8 </div><div class="bg_acc c_white font_4 font_bold grid items_center justify_around p_3 br_solid br_black-3 br_1">9 </div></div></div><div class="flex flex_column justify_start"><h2 class="flex_shrink">gap-y_{{modifier_class}}</h2><div class="gap-y_{{modifier_class}} grid columns_3 rows_3 flex_auto"><div class="bg_acc c_white font_4 font_bold grid items_center justify_around p_3 br_solid br_black-3 br_1">1 </div><div class="bg_acc c_white font_4 font_bold grid items_center justify_around p_3 br_solid br_black-3 br_1">2 </div><div class="bg_acc c_white font_4 font_bold grid items_center justify_around p_3 br_solid br_black-3 br_1">3 </div><div class="bg_acc c_white font_4 font_bold grid items_center justify_around p_3 br_solid br_black-3 br_1">4 </div><div class="bg_acc c_white font_4 font_bold grid items_center justify_around p_3 br_solid br_black-3 br_1">5 </div><div class="bg_acc c_white font_4 font_bold grid items_center justify_around p_3 br_solid br_black-3 br_1">6 </div><div class="bg_acc c_white font_4 font_bold grid items_center justify_around p_3 br_solid br_black-3 br_1">7 </div><div class="bg_acc c_white font_4 font_bold grid items_center justify_around p_3 br_solid br_black-3 br_1">8 </div><div class="bg_acc c_white font_4 font_bold grid items_center justify_around p_3 br_solid br_black-3 br_1">9 </div></div></div><div class="flex flex_column justify_start"><h2 class="flex_shrink">gap-x_{{modifier_class}}</h2><div class="gap-x_{{modifier_class}} grid columns_3 rows_3 flex_auto"><div class="bg_acc c_white font_4 font_bold grid items_center justify_around p_3 br_solid br_black-3 br_1">1 </div><div class="bg_acc c_white font_4 font_bold grid items_center justify_around p_3 br_solid br_black-3 br_1">2 </div><div class="bg_acc c_white font_4 font_bold grid items_center justify_around p_3 br_solid br_black-3 br_1">3 </div><div class="bg_acc c_white font_4 font_bold grid items_center justify_around p_3 br_solid br_black-3 br_1">4 </div><div class="bg_acc c_white font_4 font_bold grid items_center justify_around p_3 br_solid br_black-3 br_1">5 </div><div class="bg_acc c_white font_4 font_bold grid items_center justify_around p_3 br_solid br_black-3 br_1">6 </div><div class="bg_acc c_white font_4 font_bold grid items_center justify_around p_3 br_solid br_black-3 br_1">7 </div><div class="bg_acc c_white font_4 font_bold grid items_center justify_around p_3 br_solid br_black-3 br_1">8 </div><div class="bg_acc c_white font_4 font_bold grid items_center justify_around p_3 br_solid br_black-3 br_1">9 </div></div></div></div>


Weight: -1000

Styleguide  Layouts.Grid.Gap
*/
/*
Equal-width Columns

Description: This group of utility classes sets the grid-template-columns property to create a responsive grid layout with equal-width columns.

.columns_1			-			Creates a grid layout with a single column that takes up the entire available space.
.columns_2			-			Creates a grid layout with two equal-width columns.
.columns_3			-			Creates a grid layout with three equal-width columns.
.columns_4			-			Creates a grid layout with four equal-width columns.
.columns_5			-			Creates a grid layout with five equal-width columns.
.columns_6			-			Creates a grid layout with six equal-width columns.


Markup:
<div class="{{modifier_class}} gap_3 grid">
	<div class="bg_acc c_white font_2 font_bold grid items_center justify_around p_2 br_solid br_black-3 br_1">1</div>
	<div class="bg_acc c_white font_2 font_bold grid items_center justify_around p_2 br_solid br_black-3 br_1">2</div>
	<div class="bg_acc c_white font_2 font_bold grid items_center justify_around p_2 br_solid br_black-3 br_1">3</div>
	<div class="bg_acc c_white font_2 font_bold grid items_center justify_around p_2 br_solid br_black-3 br_1">4</div>
	<div class="bg_acc c_white font_2 font_bold grid items_center justify_around p_2 br_solid br_black-3 br_1">5</div>
	<div class="bg_acc c_white font_2 font_bold grid items_center justify_around p_2 br_solid br_black-3 br_1">6</div>
</div>

Weight: 0

NOTE: These utility classes are a basic method for creating grid layouts with equal-width columns. However, for more advanced column manipulation techniques, please refer to the documentation below.


Styleguide: Layouts.Grid.Columns.EqualWidth
*/
/*
Advanced Columns 

Description: This group of utility classes sets the grid-template-columns property to create a responsive grid layout with custom-width columns using CSS variables. In the below example the `--col-2` variable is set to `3rem` rather thenthe default `fr.` <table class='clear_both'><thead class='font_bold uppercase'><th>class</th><th class='text_right'>css property</th><th>value</th></thead><tbody><tr><td class='c_primary-n2'> .columns_1</td><td class='text_right'> grid-template-columns :</td><td> [start] var(--col-1, 1fr) [end] </td></tr> <tr><td class='c_primary-n2'> .columns_2</td><td class='text_right'> grid-template-columns :</td><td> [start] var(--col-1, 1fr) var(--col-2, 1fr) [end] </td></tr> <tr><td class='c_primary-n2'> .columns_3</td><td class='text_right'> grid-template-columns :</td><td> [start] var(--col-1, 1fr) var(--col-2, 1fr) var(--col-3, 1fr) [end] </td></tr> <tr><td class='c_primary-n2'> .columns_4</td><td class='text_right'> grid-template-columns :</td><td> [start] var(--col-1, 1fr) var(--col-2, 1fr) var(--col-3, 1fr) var(--col-4, 1fr) [end] </td></tr> <tr><td class='c_primary-n2'> .columns_5</td><td class='text_right'> grid-template-columns :</td><td> [start] var(--col-1, 1fr) var(--col-2, 1fr) var(--col-3, 1fr) var(--col-4, 1fr) var(--col-5, 1fr) [end] </td></tr> <tr><td class='c_primary-n2'> .columns_6</td><td class='text_right'> grid-template-columns :</td><td> [start] var(--col-1, 1fr) var(--col-2, 1fr) var(--col-3, 1fr) var(--col-4, 1fr) var(--col-5, 1fr) var(--col-6, 1fr) [end] </td></tr> </tbody></table>

.columns_1			-			repeat on 1 the `--col-2` is never used
.columns_2			-			repeat on 2 and the second column is stet to be 3rem when smaller then 768 then the column will be 30rem wide
.columns_3			-			repeat on 3 and the second column is stet to be 3rem when smaller then 768 then the column will be 30rem wide
.columns_4			-			repeat on 4 and the second column is stet to be 3rem when smaller then 768 then the column will be 30rem wide
.columns_5			-			repeat on 5 and the second column is stet to be 3rem when smaller then 768 then the column will be 30rem wide
.columns_6			-			repeat on 6 and the second column is stet to be 3rem when smaller then 768 then the column will be 30rem wide


Markup:
<div id="ColumnSample" class="{{modifier_class}} gap_3 grid" style="">
	<div class="bg_acc c_white font_2 font_bold grid items_center justify_around p_2 br_solid br_black-3 br_1">1</div>
	<div class="bg_acc c_white font_2 font_bold grid items_center justify_around p_2 br_solid br_black-3 br_1">2</div>
	<div class="bg_acc c_white font_2 font_bold grid items_center justify_around p_2 br_solid br_black-3 br_1">3</div>
	<div class="bg_acc c_white font_2 font_bold grid items_center justify_around p_2 br_solid br_black-3 br_1">4</div>
	<div class="bg_acc c_white font_2 font_bold grid items_center justify_around p_2 br_solid br_black-3 br_1">5</div>
	<div class="bg_acc c_white font_2 font_bold grid items_center justify_around p_2 br_solid br_black-3 br_1">6</div>
</div>
<style>
#ColumnSample{ --col-2: 3rem; }
@media only screen and (min-width : 768px) { #ColumnSample{ --col-2: 30rem; }}
</style>

Weight: 10

NOTE: These utility classes allow you to easily create grid layouts with columns of customized widths. Simply define the desired width for each row using CSS variables (--col-1, --col-2, etc.). By default, the width is set to 1fr for equal-width columns. However, you can override these values as needed by including inline styles, as shown in this example, or by using in-page style tags. To make responsive adjustments to the CSS variables, you can use in-page style tags to define responsive media queries that modify the values of the CSS variables. For a reference, you can look at the Advanced Rows Advanced example, which uses a style tag to achieve this.


Styleguide: Layouts.Grid.Columns.EqualWidth.Advanced
*/
/*
Equal-Height Rows

Description: This group of utility classes sets the grid-template-rows property to create a responsive grid layout with equal-height rows. Most of the time the rows should be handled automatically unless you are going to use the advanced features referenced  in `Advanced Rows `  <table class='clear_both'><thead class='font_bold uppercase'><th>class</th><th class='text_right'>css property</th><th>value</th></thead><tbody><tr><td class='c_primary-n2'> .rows_1</td><td class='text_right'> grid-template-rows :</td><td> [start] var(--row-1, 1fr) [end] </td></tr> <tr><td class='c_primary-n2'> .rows_2</td><td class='text_right'> grid-template-rows :</td><td> [start] var(--row-1, 1fr) var(--row-2, 1fr) [end] </td></tr> <tr><td class='c_primary-n2'> .rows_3</td><td class='text_right'> grid-template-rows :</td><td> [start] var(--row-1, 1fr) var(--row-2, 1fr) var(--row-3, 1fr) [end] </td></tr> <tr><td class='c_primary-n2'> .rows_4</td><td class='text_right'> grid-template-rows :</td><td> [start] var(--row-1, 1fr) var(--row-2, 1fr) var(--row-3, 1fr) var(--row-4, 1fr) [end] </td></tr> <tr><td class='c_primary-n2'> .rows_5</td><td class='text_right'> grid-template-rows :</td><td> [start] var(--row-1, 1fr) var(--row-2, 1fr) var(--row-3, 1fr) var(--row-4, 1fr) var(--row-5, 1fr) [end] </td></tr> <tr><td class='c_primary-n2'> .rows_6</td><td class='text_right'> grid-template-rows :</td><td> [start] var(--row-1, 1fr) var(--row-2, 1fr) var(--row-3, 1fr) var(--row-4, 1fr) var(--row-5, 1fr) var(--row-6, 1fr) [end] </td></tr> </tbody></table>

Weight: 0

NOTE: These utility classes are a basic method for creating grid layouts with equal-height rows. However, for more advanced column manipulation techniques, please refer to the documentation below.


Styleguide: Layouts.Grid.Rows.EqualHeight
*/
/*
Advanced Rows 

Description: This group of utility classes sets the grid-template-Rows property to create a responsive grid layout with custom-height Rows using CSS variables. In the below example the `--row-2` variable is set to `10rem` rather thenthe default `fr.`

.rows_1			-			repeat on 1 the `--row-2` is never used because it is looping just over the first row.
.rows_2			-			repeat on 2 and the second row is stet to be 10rem
.rows_3			-			repeat on 3 and the second row is stet to be 10rem
.rows_4			-			repeat on 4 and the second row is stet to be 10rem
.rows_5			-			repeat on 5 and the second row is stet to be 10rem
.rows_6			-			repeat on 6 and the second row is stet to be 10rem


Markup:
<div class="{{modifier_class}} gap_3 grid" style="--row-2: 10rem">
	<div class="bg_acc c_white font_2 font_bold grid items_center justify_around p_2 br_solid br_black-3 br_1">1</div>
	<div class="bg_acc c_white font_2 font_bold grid items_center justify_around p_2 br_solid br_black-3 br_1">2</div>
	<div class="bg_acc c_white font_2 font_bold grid items_center justify_around p_2 br_solid br_black-3 br_1">3</div>
	<div class="bg_acc c_white font_2 font_bold grid items_center justify_around p_2 br_solid br_black-3 br_1">4</div>
	<div class="bg_acc c_white font_2 font_bold grid items_center justify_around p_2 br_solid br_black-3 br_1">5</div>
	<div class="bg_acc c_white font_2 font_bold grid items_center justify_around p_2 br_solid br_black-3 br_1">6</div>
</div>

Weight: 10

NOTE:  These utility classes allow you to easily create grid layouts with rows of customized heights. Simply define the desired height for each column using CSS variables (--row-1, --row-2, etc.). By default, the height is set to 1fr for equal-height rows. However, you can override these values as needed by including inline styles, as shown in this example, or by using in-page style tags. To make responsive adjustments to the CSS variables, you can use in-page style tags to define responsive media queries that modify the values of the CSS variables. For a reference, you can look at the `Advanced Columns Advanced` example, which uses a style tag to achieve this.

Styleguide:  Layouts.Grid.Rows.EqualHeight.Advanced
*/
/*
Grid: Column and Row Start/End

This group of utility classes allows you to control the starting and ending positions of grid columns and rows.  <table class='clear_both'><thead class='font_bold uppercase'><th>class</th><th class='text_right'>css property</th><th>value</th></thead><tbody><tr><td class='c_primary-n2'> .col-start_start</td><td class='text_right'> grid-column-start :</td><td> start </td></tr> <tr><td class='c_primary-n2'> .col-start_1</td><td class='text_right'> grid-column-start :</td><td> 1 </td></tr> <tr><td class='c_primary-n2'> .col-start_2</td><td class='text_right'> grid-column-start :</td><td> 2 </td></tr> <tr><td class='c_primary-n2'> .col-start_3</td><td class='text_right'> grid-column-start :</td><td> 3 </td></tr> <tr><td class='c_primary-n2'> .col-start_4</td><td class='text_right'> grid-column-start :</td><td> 4 </td></tr> <tr><td class='c_primary-n2'> .col-start_5</td><td class='text_right'> grid-column-start :</td><td> 5 </td></tr> <tr><td class='c_primary-n2'> .col-start_6</td><td class='text_right'> grid-column-start :</td><td> 6 </td></tr> <tr><td class='c_primary-n2'> .col-start_7</td><td class='text_right'> grid-column-start :</td><td> 7 </td></tr> <tr><td class='c_primary-n2'> .col-start_n1</td><td class='text_right'> grid-column-start :</td><td> -1 </td></tr> <tr><td class='c_primary-n2'> .col-start_n2</td><td class='text_right'> grid-column-start :</td><td> -2 </td></tr> <tr><td class='c_primary-n2'> .col-start_n3</td><td class='text_right'> grid-column-start :</td><td> -3 </td></tr> <tr><td class='c_primary-n2'> .col-start_n4</td><td class='text_right'> grid-column-start :</td><td> -4 </td></tr> <tr><td class='c_primary-n2'> .col-start_n5</td><td class='text_right'> grid-column-start :</td><td> -5 </td></tr> <tr><td class='c_primary-n2'> .col-start_n6</td><td class='text_right'> grid-column-start :</td><td> -6 </td></tr> <tr><td class='c_primary-n2'> .col-start_n7</td><td class='text_right'> grid-column-start :</td><td> -7 </td></tr> <tr><td class='c_primary-n2'> .col-start_end</td><td class='text_right'> grid-column-start :</td><td> end </td></tr> </tbody></table>  <table class='clear_both'><thead class='font_bold uppercase'><th>class</th><th class='text_right'>css property</th><th>value</th></thead><tbody><tr><td class='c_primary-n2'> .col-end_start</td><td class='text_right'> grid-column-end :</td><td> start </td></tr> <tr><td class='c_primary-n2'> .col-end_1</td><td class='text_right'> grid-column-end :</td><td> 1 </td></tr> <tr><td class='c_primary-n2'> .col-end_2</td><td class='text_right'> grid-column-end :</td><td> 2 </td></tr> <tr><td class='c_primary-n2'> .col-end_3</td><td class='text_right'> grid-column-end :</td><td> 3 </td></tr> <tr><td class='c_primary-n2'> .col-end_4</td><td class='text_right'> grid-column-end :</td><td> 4 </td></tr> <tr><td class='c_primary-n2'> .col-end_5</td><td class='text_right'> grid-column-end :</td><td> 5 </td></tr> <tr><td class='c_primary-n2'> .col-end_6</td><td class='text_right'> grid-column-end :</td><td> 6 </td></tr> <tr><td class='c_primary-n2'> .col-end_7</td><td class='text_right'> grid-column-end :</td><td> 7 </td></tr> <tr><td class='c_primary-n2'> .col-end_n1</td><td class='text_right'> grid-column-end :</td><td> -1 </td></tr> <tr><td class='c_primary-n2'> .col-end_n2</td><td class='text_right'> grid-column-end :</td><td> -2 </td></tr> <tr><td class='c_primary-n2'> .col-end_n3</td><td class='text_right'> grid-column-end :</td><td> -3 </td></tr> <tr><td class='c_primary-n2'> .col-end_n4</td><td class='text_right'> grid-column-end :</td><td> -4 </td></tr> <tr><td class='c_primary-n2'> .col-end_n5</td><td class='text_right'> grid-column-end :</td><td> -5 </td></tr> <tr><td class='c_primary-n2'> .col-end_n6</td><td class='text_right'> grid-column-end :</td><td> -6 </td></tr> <tr><td class='c_primary-n2'> .col-end_n7</td><td class='text_right'> grid-column-end :</td><td> -7 </td></tr> <tr><td class='c_primary-n2'> .col-end_end</td><td class='text_right'> grid-column-end :</td><td> end </td></tr> </tbody></table> <table class='clear_both'><thead class='font_bold uppercase'><th>class</th><th class='text_right'>css property</th><th>value</th></thead><tbody><tr><td class='c_primary-n2'> .row-start_start</td><td class='text_right'> grid-row-start :</td><td> start </td></tr> <tr><td class='c_primary-n2'> .row-start_1</td><td class='text_right'> grid-row-start :</td><td> 1 </td></tr> <tr><td class='c_primary-n2'> .row-start_2</td><td class='text_right'> grid-row-start :</td><td> 2 </td></tr> <tr><td class='c_primary-n2'> .row-start_3</td><td class='text_right'> grid-row-start :</td><td> 3 </td></tr> <tr><td class='c_primary-n2'> .row-start_4</td><td class='text_right'> grid-row-start :</td><td> 4 </td></tr> <tr><td class='c_primary-n2'> .row-start_5</td><td class='text_right'> grid-row-start :</td><td> 5 </td></tr> <tr><td class='c_primary-n2'> .row-start_6</td><td class='text_right'> grid-row-start :</td><td> 6 </td></tr> <tr><td class='c_primary-n2'> .row-start_7</td><td class='text_right'> grid-row-start :</td><td> 7 </td></tr> <tr><td class='c_primary-n2'> .row-start_n1</td><td class='text_right'> grid-row-start :</td><td> -1 </td></tr> <tr><td class='c_primary-n2'> .row-start_n2</td><td class='text_right'> grid-row-start :</td><td> -2 </td></tr> <tr><td class='c_primary-n2'> .row-start_n3</td><td class='text_right'> grid-row-start :</td><td> -3 </td></tr> <tr><td class='c_primary-n2'> .row-start_n4</td><td class='text_right'> grid-row-start :</td><td> -4 </td></tr> <tr><td class='c_primary-n2'> .row-start_n5</td><td class='text_right'> grid-row-start :</td><td> -5 </td></tr> <tr><td class='c_primary-n2'> .row-start_n6</td><td class='text_right'> grid-row-start :</td><td> -6 </td></tr> <tr><td class='c_primary-n2'> .row-start_n7</td><td class='text_right'> grid-row-start :</td><td> -7 </td></tr> <tr><td class='c_primary-n2'> .row-start_end</td><td class='text_right'> grid-row-start :</td><td> end </td></tr> </tbody></table>  <table class='clear_both'><thead class='font_bold uppercase'><th>class</th><th class='text_right'>css property</th><th>value</th></thead><tbody><tr><td class='c_primary-n2'> .row-end_start</td><td class='text_right'> grid-row-end :</td><td> start </td></tr> <tr><td class='c_primary-n2'> .row-end_1</td><td class='text_right'> grid-row-end :</td><td> 1 </td></tr> <tr><td class='c_primary-n2'> .row-end_2</td><td class='text_right'> grid-row-end :</td><td> 2 </td></tr> <tr><td class='c_primary-n2'> .row-end_3</td><td class='text_right'> grid-row-end :</td><td> 3 </td></tr> <tr><td class='c_primary-n2'> .row-end_4</td><td class='text_right'> grid-row-end :</td><td> 4 </td></tr> <tr><td class='c_primary-n2'> .row-end_5</td><td class='text_right'> grid-row-end :</td><td> 5 </td></tr> <tr><td class='c_primary-n2'> .row-end_6</td><td class='text_right'> grid-row-end :</td><td> 6 </td></tr> <tr><td class='c_primary-n2'> .row-end_7</td><td class='text_right'> grid-row-end :</td><td> 7 </td></tr> <tr><td class='c_primary-n2'> .row-end_n1</td><td class='text_right'> grid-row-end :</td><td> -1 </td></tr> <tr><td class='c_primary-n2'> .row-end_n2</td><td class='text_right'> grid-row-end :</td><td> -2 </td></tr> <tr><td class='c_primary-n2'> .row-end_n3</td><td class='text_right'> grid-row-end :</td><td> -3 </td></tr> <tr><td class='c_primary-n2'> .row-end_n4</td><td class='text_right'> grid-row-end :</td><td> -4 </td></tr> <tr><td class='c_primary-n2'> .row-end_n5</td><td class='text_right'> grid-row-end :</td><td> -5 </td></tr> <tr><td class='c_primary-n2'> .row-end_n6</td><td class='text_right'> grid-row-end :</td><td> -6 </td></tr> <tr><td class='c_primary-n2'> .row-end_n7</td><td class='text_right'> grid-row-end :</td><td> -7 </td></tr> <tr><td class='c_primary-n2'> .row-end_end</td><td class='text_right'> grid-row-end :</td><td> end </td></tr> </tbody></table>

Modifiers:


Markup Examples:


MarkupWrapperClasses: 
N/A

Weight: 0

NOTE: These utility classes allow you to specify the starting and ending positions of grid columns and rows. Use the corresponding modifier class (e.g., col-start_1, col-end_2, row-start_3, row-end_4) to apply the desired positioning to grid elements.



Styleguide:  Layouts.Grid.Cell.StartAndEnd
*/
.grid {
  grid-auto-flow: row;
}

.columns-max_15 {
  grid-template-columns: repeat(2, 1fr);
}

.columns-max_20,
.columns-max_25,
.columns-max_30,
.columns-max_35 {
  grid-template-columns: repeat(1, 1fr);
}

.row_all {
  grid-row-start: start;
  grid-row-end: end;
}

.col_all {
  grid-column-start: start;
  grid-column-end: end;
}

.columns_1 {
  grid-template-columns: [start] var(--col-1, 1fr) [end];
}

.columns_2 {
  grid-template-columns: [start] var(--col-1, 1fr) var(--col-2, 1fr) [end];
}

.columns_3 {
  grid-template-columns: [start] var(--col-1, 1fr) var(--col-2, 1fr) var(--col-3, 1fr) [end];
}

.columns_4 {
  grid-template-columns: [start] var(--col-1, 1fr) var(--col-2, 1fr) var(--col-3, 1fr) var(--col-4, 1fr) [end];
}

.columns_5 {
  grid-template-columns: [start] var(--col-1, 1fr) var(--col-2, 1fr) var(--col-3, 1fr) var(--col-4, 1fr) var(--col-5, 1fr) [end];
}

.columns_6 {
  grid-template-columns: [start] var(--col-1, 1fr) var(--col-2, 1fr) var(--col-3, 1fr) var(--col-4, 1fr) var(--col-5, 1fr) var(--col-6, 1fr) [end];
}

.rows_1 {
  grid-template-rows: [start] var(--row-1, 1fr) [end];
}

.rows_2 {
  grid-template-rows: [start] var(--row-1, 1fr) var(--row-2, 1fr) [end];
}

.rows_3 {
  grid-template-rows: [start] var(--row-1, 1fr) var(--row-2, 1fr) var(--row-3, 1fr) [end];
}

.rows_4 {
  grid-template-rows: [start] var(--row-1, 1fr) var(--row-2, 1fr) var(--row-3, 1fr) var(--row-4, 1fr) [end];
}

.rows_5 {
  grid-template-rows: [start] var(--row-1, 1fr) var(--row-2, 1fr) var(--row-3, 1fr) var(--row-4, 1fr) var(--row-5, 1fr) [end];
}

.rows_6 {
  grid-template-rows: [start] var(--row-1, 1fr) var(--row-2, 1fr) var(--row-3, 1fr) var(--row-4, 1fr) var(--row-5, 1fr) var(--row-6, 1fr) [end];
}

.gap_0 {
  grid-gap: 0;
}

.gap_1 {
  grid-gap: 1px;
}

.gap_2 {
  grid-gap: 0.25rem;
}

.gap_3 {
  grid-gap: 0.5rem;
}

.gap_4 {
  grid-gap: 1rem;
}

.gap_5 {
  grid-gap: 2rem;
}

.gap_6 {
  grid-gap: 4rem;
}

.gap-x_0 {
  grid-column-gap: 0;
}

.gap-x_1 {
  grid-column-gap: 1px;
}

.gap-x_2 {
  grid-column-gap: 0.25rem;
}

.gap-x_3 {
  grid-column-gap: 0.5rem;
}

.gap-x_4 {
  grid-column-gap: 1rem;
}

.gap-x_5 {
  grid-column-gap: 2rem;
}

.gap-x_6 {
  grid-column-gap: 4rem;
}

.gap-y_0 {
  grid-row-gap: 0;
}

.gap-y_1 {
  grid-row-gap: 1px;
}

.gap-y_2 {
  grid-row-gap: 0.25rem;
}

.gap-y_3 {
  grid-row-gap: 0.5rem;
}

.gap-y_4 {
  grid-row-gap: 1rem;
}

.gap-y_5 {
  grid-row-gap: 2rem;
}

.gap-y_6 {
  grid-row-gap: 4rem;
}

.col-start_start {
  grid-column-start: start;
}

.col-start_1 {
  grid-column-start: 1;
}

.col-start_2 {
  grid-column-start: 2;
}

.col-start_3 {
  grid-column-start: 3;
}

.col-start_4 {
  grid-column-start: 4;
}

.col-start_5 {
  grid-column-start: 5;
}

.col-start_6 {
  grid-column-start: 6;
}

.col-start_7 {
  grid-column-start: 7;
}

.col-start_n1 {
  grid-column-start: -1;
}

.col-start_n2 {
  grid-column-start: -2;
}

.col-start_n3 {
  grid-column-start: -3;
}

.col-start_n4 {
  grid-column-start: -4;
}

.col-start_n5 {
  grid-column-start: -5;
}

.col-start_n6 {
  grid-column-start: -6;
}

.col-start_n7 {
  grid-column-start: -7;
}

.col-start_end {
  grid-column-start: end;
}

.col-end_start {
  grid-column-end: start;
}

.col-end_1 {
  grid-column-end: 1;
}

.col-end_2 {
  grid-column-end: 2;
}

.col-end_3 {
  grid-column-end: 3;
}

.col-end_4 {
  grid-column-end: 4;
}

.col-end_5 {
  grid-column-end: 5;
}

.col-end_6 {
  grid-column-end: 6;
}

.col-end_7 {
  grid-column-end: 7;
}

.col-end_n1 {
  grid-column-end: -1;
}

.col-end_n2 {
  grid-column-end: -2;
}

.col-end_n3 {
  grid-column-end: -3;
}

.col-end_n4 {
  grid-column-end: -4;
}

.col-end_n5 {
  grid-column-end: -5;
}

.col-end_n6 {
  grid-column-end: -6;
}

.col-end_n7 {
  grid-column-end: -7;
}

.col-end_end {
  grid-column-end: end;
}

.row-start_start {
  grid-row-start: start;
}

.row-start_1 {
  grid-row-start: 1;
}

.row-start_2 {
  grid-row-start: 2;
}

.row-start_3 {
  grid-row-start: 3;
}

.row-start_4 {
  grid-row-start: 4;
}

.row-start_5 {
  grid-row-start: 5;
}

.row-start_6 {
  grid-row-start: 6;
}

.row-start_7 {
  grid-row-start: 7;
}

.row-start_n1 {
  grid-row-start: -1;
}

.row-start_n2 {
  grid-row-start: -2;
}

.row-start_n3 {
  grid-row-start: -3;
}

.row-start_n4 {
  grid-row-start: -4;
}

.row-start_n5 {
  grid-row-start: -5;
}

.row-start_n6 {
  grid-row-start: -6;
}

.row-start_n7 {
  grid-row-start: -7;
}

.row-start_end {
  grid-row-start: end;
}

.row-end_start {
  grid-row-end: start;
}

.row-end_1 {
  grid-row-end: 1;
}

.row-end_2 {
  grid-row-end: 2;
}

.row-end_3 {
  grid-row-end: 3;
}

.row-end_4 {
  grid-row-end: 4;
}

.row-end_5 {
  grid-row-end: 5;
}

.row-end_6 {
  grid-row-end: 6;
}

.row-end_7 {
  grid-row-end: 7;
}

.row-end_n1 {
  grid-row-end: -1;
}

.row-end_n2 {
  grid-row-end: -2;
}

.row-end_n3 {
  grid-row-end: -3;
}

.row-end_n4 {
  grid-row-end: -4;
}

.row-end_n5 {
  grid-row-end: -5;
}

.row-end_n6 {
  grid-row-end: -6;
}

.row-end_n7 {
  grid-row-end: -7;
}

.row-end_end {
  grid-row-end: end;
}

@media only screen and (width > 768px) {
  .row_all\:md {
    grid-row-start: start;
    grid-row-end: end;
  }
  .col_all\:md {
    grid-column-start: start;
    grid-column-end: end;
  }
  .columns-max_15 {
    grid-template-columns: repeat(auto-fit, minmax(10rem, 15rem));
  }
  .columns-max_20 {
    grid-template-columns: repeat(auto-fit, minmax(15rem, 20rem));
  }
  .columns-max_25 {
    grid-template-columns: repeat(auto-fit, minmax(20rem, 25rem));
  }
  .columns-max_30 {
    grid-template-columns: repeat(auto-fit, minmax(25rem, 30rem));
  }
  .columns-max_35 {
    grid-template-columns: repeat(auto-fit, minmax(30rem, 35rem));
  }
  .columns_1\:md {
    grid-template-columns: [start] var(--col-1, 1fr) [end];
  }
  .columns_2\:md {
    grid-template-columns: [start] var(--col-1, 1fr) var(--col-2, 1fr) [end];
  }
  .columns_3\:md {
    grid-template-columns: [start] var(--col-1, 1fr) var(--col-2, 1fr) var(--col-3, 1fr) [end];
  }
  .columns_4\:md {
    grid-template-columns: [start] var(--col-1, 1fr) var(--col-2, 1fr) var(--col-3, 1fr) var(--col-4, 1fr) [end];
  }
  .columns_5\:md {
    grid-template-columns: [start] var(--col-1, 1fr) var(--col-2, 1fr) var(--col-3, 1fr) var(--col-4, 1fr) var(--col-5, 1fr) [end];
  }
  .columns_6\:md {
    grid-template-columns: [start] var(--col-1, 1fr) var(--col-2, 1fr) var(--col-3, 1fr) var(--col-4, 1fr) var(--col-5, 1fr) var(--col-6, 1fr) [end];
  }
  .rows_1\:md {
    grid-template-rows: [start] var(--row-1, 1fr) [end];
  }
  .rows_2\:md {
    grid-template-rows: [start] var(--row-1, 1fr) var(--row-2, 1fr) [end];
  }
  .rows_3\:md {
    grid-template-rows: [start] var(--row-1, 1fr) var(--row-2, 1fr) var(--row-3, 1fr) [end];
  }
  .rows_4\:md {
    grid-template-rows: [start] var(--row-1, 1fr) var(--row-2, 1fr) var(--row-3, 1fr) var(--row-4, 1fr) [end];
  }
  .rows_5\:md {
    grid-template-rows: [start] var(--row-1, 1fr) var(--row-2, 1fr) var(--row-3, 1fr) var(--row-4, 1fr) var(--row-5, 1fr) [end];
  }
  .rows_6\:md {
    grid-template-rows: [start] var(--row-1, 1fr) var(--row-2, 1fr) var(--row-3, 1fr) var(--row-4, 1fr) var(--row-5, 1fr) var(--row-6, 1fr) [end];
  }
  .gap_0\:md {
    grid-gap: 0;
  }
  .gap_1\:md {
    grid-gap: 1px;
  }
  .gap_2\:md {
    grid-gap: 0.25rem;
  }
  .gap_3\:md {
    grid-gap: 0.5rem;
  }
  .gap_4\:md {
    grid-gap: 1rem;
  }
  .gap_5\:md {
    grid-gap: 2rem;
  }
  .gap_6\:md {
    grid-gap: 4rem;
  }
  .gap-y_0\:md {
    grid-row-gap: 0;
  }
  .gap-y_1\:md {
    grid-row-gap: 1px;
  }
  .gap-y_2\:md {
    grid-row-gap: 0.25rem;
  }
  .gap-y_3\:md {
    grid-row-gap: 0.5rem;
  }
  .gap-y_4\:md {
    grid-row-gap: 1rem;
  }
  .gap-y_5\:md {
    grid-row-gap: 2rem;
  }
  .gap-y_6\:md {
    grid-row-gap: 4rem;
  }
  .gap-x_0\:md {
    grid-column-gap: 0;
  }
  .gap-x_1\:md {
    grid-column-gap: 1px;
  }
  .gap-x_2\:md {
    grid-column-gap: 0.25rem;
  }
  .gap-x_3\:md {
    grid-column-gap: 0.5rem;
  }
  .gap-x_4\:md {
    grid-column-gap: 1rem;
  }
  .gap-x_5\:md {
    grid-column-gap: 2rem;
  }
  .gap-x_6\:md {
    grid-column-gap: 4rem;
  }
  .col-start_start\:md {
    grid-column-start: start;
  }
  .col-start_1\:md {
    grid-column-start: 1;
  }
  .col-start_2\:md {
    grid-column-start: 2;
  }
  .col-start_3\:md {
    grid-column-start: 3;
  }
  .col-start_4\:md {
    grid-column-start: 4;
  }
  .col-start_5\:md {
    grid-column-start: 5;
  }
  .col-start_6\:md {
    grid-column-start: 6;
  }
  .col-start_7\:md {
    grid-column-start: 7;
  }
  .col-start_n1\:md {
    grid-column-start: -1;
  }
  .col-start_n2\:md {
    grid-column-start: -2;
  }
  .col-start_n3\:md {
    grid-column-start: -3;
  }
  .col-start_n4\:md {
    grid-column-start: -4;
  }
  .col-start_n5\:md {
    grid-column-start: -5;
  }
  .col-start_n6\:md {
    grid-column-start: -6;
  }
  .col-start_n7\:md {
    grid-column-start: -7;
  }
  .col-start_end\:md {
    grid-column-start: end;
  }
  .col-end_start\:md {
    grid-column-end: start;
  }
  .col-end_1\:md {
    grid-column-end: 1;
  }
  .col-end_2\:md {
    grid-column-end: 2;
  }
  .col-end_3\:md {
    grid-column-end: 3;
  }
  .col-end_4\:md {
    grid-column-end: 4;
  }
  .col-end_5\:md {
    grid-column-end: 5;
  }
  .col-end_6\:md {
    grid-column-end: 6;
  }
  .col-end_7\:md {
    grid-column-end: 7;
  }
  .col-end_n1\:md {
    grid-column-end: -1;
  }
  .col-end_n2\:md {
    grid-column-end: -2;
  }
  .col-end_n3\:md {
    grid-column-end: -3;
  }
  .col-end_n4\:md {
    grid-column-end: -4;
  }
  .col-end_n5\:md {
    grid-column-end: -5;
  }
  .col-end_n6\:md {
    grid-column-end: -6;
  }
  .col-end_n7\:md {
    grid-column-end: -7;
  }
  .col-end_end\:md {
    grid-column-end: end;
  }
  .row-start_start\:md {
    grid-row-start: start;
  }
  .row-start_1\:md {
    grid-row-start: 1;
  }
  .row-start_2\:md {
    grid-row-start: 2;
  }
  .row-start_3\:md {
    grid-row-start: 3;
  }
  .row-start_4\:md {
    grid-row-start: 4;
  }
  .row-start_5\:md {
    grid-row-start: 5;
  }
  .row-start_6\:md {
    grid-row-start: 6;
  }
  .row-start_7\:md {
    grid-row-start: 7;
  }
  .row-start_n1\:md {
    grid-row-start: -1;
  }
  .row-start_n2\:md {
    grid-row-start: -2;
  }
  .row-start_n3\:md {
    grid-row-start: -3;
  }
  .row-start_n4\:md {
    grid-row-start: -4;
  }
  .row-start_n5\:md {
    grid-row-start: -5;
  }
  .row-start_n6\:md {
    grid-row-start: -6;
  }
  .row-start_n7\:md {
    grid-row-start: -7;
  }
  .row-start_end\:md {
    grid-row-start: end;
  }
  .row-end_start\:md {
    grid-row-end: start;
  }
  .row-end_1\:md {
    grid-row-end: 1;
  }
  .row-end_2\:md {
    grid-row-end: 2;
  }
  .row-end_3\:md {
    grid-row-end: 3;
  }
  .row-end_4\:md {
    grid-row-end: 4;
  }
  .row-end_5\:md {
    grid-row-end: 5;
  }
  .row-end_6\:md {
    grid-row-end: 6;
  }
  .row-end_7\:md {
    grid-row-end: 7;
  }
  .row-end_n1\:md {
    grid-row-end: -1;
  }
  .row-end_n2\:md {
    grid-row-end: -2;
  }
  .row-end_n3\:md {
    grid-row-end: -3;
  }
  .row-end_n4\:md {
    grid-row-end: -4;
  }
  .row-end_n5\:md {
    grid-row-end: -5;
  }
  .row-end_n6\:md {
    grid-row-end: -6;
  }
  .row-end_n7\:md {
    grid-row-end: -7;
  }
  .row-end_end\:md {
    grid-row-end: end;
  }
}
@media only screen and (width > 1024px) {
  .row_all\:lg {
    grid-row-start: start;
    grid-row-end: end;
  }
  .col_all\:lg {
    grid-column-start: start;
    grid-column-end: end;
  }
  .columns_1\:lg {
    grid-template-columns: [start] var(--col-1, 1fr) [end];
  }
  .columns_2\:lg {
    grid-template-columns: [start] var(--col-1, 1fr) var(--col-2, 1fr) [end];
  }
  .columns_3\:lg {
    grid-template-columns: [start] var(--col-1, 1fr) var(--col-2, 1fr) var(--col-3, 1fr) [end];
  }
  .columns_4\:lg {
    grid-template-columns: [start] var(--col-1, 1fr) var(--col-2, 1fr) var(--col-3, 1fr) var(--col-4, 1fr) [end];
  }
  .columns_5\:lg {
    grid-template-columns: [start] var(--col-1, 1fr) var(--col-2, 1fr) var(--col-3, 1fr) var(--col-4, 1fr) var(--col-5, 1fr) [end];
  }
  .columns_6\:lg {
    grid-template-columns: [start] var(--col-1, 1fr) var(--col-2, 1fr) var(--col-3, 1fr) var(--col-4, 1fr) var(--col-5, 1fr) var(--col-6, 1fr) [end];
  }
  .rows_1\:lg {
    grid-template-rows: [start] var(--row-1, 1fr) [end];
  }
  .rows_2\:lg {
    grid-template-rows: [start] var(--row-1, 1fr) var(--row-2, 1fr) [end];
  }
  .rows_3\:lg {
    grid-template-rows: [start] var(--row-1, 1fr) var(--row-2, 1fr) var(--row-3, 1fr) [end];
  }
  .rows_4\:lg {
    grid-template-rows: [start] var(--row-1, 1fr) var(--row-2, 1fr) var(--row-3, 1fr) var(--row-4, 1fr) [end];
  }
  .rows_5\:lg {
    grid-template-rows: [start] var(--row-1, 1fr) var(--row-2, 1fr) var(--row-3, 1fr) var(--row-4, 1fr) var(--row-5, 1fr) [end];
  }
  .rows_6\:lg {
    grid-template-rows: [start] var(--row-1, 1fr) var(--row-2, 1fr) var(--row-3, 1fr) var(--row-4, 1fr) var(--row-5, 1fr) var(--row-6, 1fr) [end];
  }
  .gap_0\:lg {
    grid-gap: 0;
  }
  .gap_1\:lg {
    grid-gap: 1px;
  }
  .gap_2\:lg {
    grid-gap: 0.25rem;
  }
  .gap_3\:lg {
    grid-gap: 0.5rem;
  }
  .gap_4\:lg {
    grid-gap: 1rem;
  }
  .gap_5\:lg {
    grid-gap: 2rem;
  }
  .gap_6\:lg {
    grid-gap: 4rem;
  }
  .gap-y_0\:lg {
    grid-row-gap: 0;
  }
  .gap-y_1\:lg {
    grid-row-gap: 1px;
  }
  .gap-y_2\:lg {
    grid-row-gap: 0.25rem;
  }
  .gap-y_3\:lg {
    grid-row-gap: 0.5rem;
  }
  .gap-y_4\:lg {
    grid-row-gap: 1rem;
  }
  .gap-y_5\:lg {
    grid-row-gap: 2rem;
  }
  .gap-y_6\:lg {
    grid-row-gap: 4rem;
  }
  .gap-x_0\:lg {
    grid-column-gap: 0;
  }
  .gap-x_1\:lg {
    grid-column-gap: 1px;
  }
  .gap-x_2\:lg {
    grid-column-gap: 0.25rem;
  }
  .gap-x_3\:lg {
    grid-column-gap: 0.5rem;
  }
  .gap-x_4\:lg {
    grid-column-gap: 1rem;
  }
  .gap-x_5\:lg {
    grid-column-gap: 2rem;
  }
  .gap-x_6\:lg {
    grid-column-gap: 4rem;
  }
  .col-start_start\:lg {
    grid-column-start: start;
  }
  .col-start_1\:lg {
    grid-column-start: 1;
  }
  .col-start_2\:lg {
    grid-column-start: 2;
  }
  .col-start_3\:lg {
    grid-column-start: 3;
  }
  .col-start_4\:lg {
    grid-column-start: 4;
  }
  .col-start_5\:lg {
    grid-column-start: 5;
  }
  .col-start_6\:lg {
    grid-column-start: 6;
  }
  .col-start_7\:lg {
    grid-column-start: 7;
  }
  .col-start_n1\:lg {
    grid-column-start: -1;
  }
  .col-start_n2\:lg {
    grid-column-start: -2;
  }
  .col-start_n3\:lg {
    grid-column-start: -3;
  }
  .col-start_n4\:lg {
    grid-column-start: -4;
  }
  .col-start_n5\:lg {
    grid-column-start: -5;
  }
  .col-start_n6\:lg {
    grid-column-start: -6;
  }
  .col-start_n7\:lg {
    grid-column-start: -7;
  }
  .col-start_end\:lg {
    grid-column-start: end;
  }
  .col-end_start\:lg {
    grid-column-end: start;
  }
  .col-end_1\:lg {
    grid-column-end: 1;
  }
  .col-end_2\:lg {
    grid-column-end: 2;
  }
  .col-end_3\:lg {
    grid-column-end: 3;
  }
  .col-end_4\:lg {
    grid-column-end: 4;
  }
  .col-end_5\:lg {
    grid-column-end: 5;
  }
  .col-end_6\:lg {
    grid-column-end: 6;
  }
  .col-end_7\:lg {
    grid-column-end: 7;
  }
  .col-end_n1\:lg {
    grid-column-end: -1;
  }
  .col-end_n2\:lg {
    grid-column-end: -2;
  }
  .col-end_n3\:lg {
    grid-column-end: -3;
  }
  .col-end_n4\:lg {
    grid-column-end: -4;
  }
  .col-end_n5\:lg {
    grid-column-end: -5;
  }
  .col-end_n6\:lg {
    grid-column-end: -6;
  }
  .col-end_n7\:lg {
    grid-column-end: -7;
  }
  .col-end_end\:lg {
    grid-column-end: end;
  }
  .row-start_start\:lg {
    grid-row-start: start;
  }
  .row-start_1\:lg {
    grid-row-start: 1;
  }
  .row-start_2\:lg {
    grid-row-start: 2;
  }
  .row-start_3\:lg {
    grid-row-start: 3;
  }
  .row-start_4\:lg {
    grid-row-start: 4;
  }
  .row-start_5\:lg {
    grid-row-start: 5;
  }
  .row-start_6\:lg {
    grid-row-start: 6;
  }
  .row-start_7\:lg {
    grid-row-start: 7;
  }
  .row-start_n1\:lg {
    grid-row-start: -1;
  }
  .row-start_n2\:lg {
    grid-row-start: -2;
  }
  .row-start_n3\:lg {
    grid-row-start: -3;
  }
  .row-start_n4\:lg {
    grid-row-start: -4;
  }
  .row-start_n5\:lg {
    grid-row-start: -5;
  }
  .row-start_n6\:lg {
    grid-row-start: -6;
  }
  .row-start_n7\:lg {
    grid-row-start: -7;
  }
  .row-start_end\:lg {
    grid-row-start: end;
  }
  .row-end_start\:lg {
    grid-row-end: start;
  }
  .row-end_1\:lg {
    grid-row-end: 1;
  }
  .row-end_2\:lg {
    grid-row-end: 2;
  }
  .row-end_3\:lg {
    grid-row-end: 3;
  }
  .row-end_4\:lg {
    grid-row-end: 4;
  }
  .row-end_5\:lg {
    grid-row-end: 5;
  }
  .row-end_6\:lg {
    grid-row-end: 6;
  }
  .row-end_7\:lg {
    grid-row-end: 7;
  }
  .row-end_n1\:lg {
    grid-row-end: -1;
  }
  .row-end_n2\:lg {
    grid-row-end: -2;
  }
  .row-end_n3\:lg {
    grid-row-end: -3;
  }
  .row-end_n4\:lg {
    grid-row-end: -4;
  }
  .row-end_n5\:lg {
    grid-row-end: -5;
  }
  .row-end_n6\:lg {
    grid-row-end: -6;
  }
  .row-end_n7\:lg {
    grid-row-end: -7;
  }
  .row-end_end\:lg {
    grid-row-end: end;
  }
}
/*
Static-Width Columns

This utility class sets the grid-template-columns property to create a responsive grid layout. It uses the repeat function with the auto-fill keyword and a static max width based in multiples of 16px. `15` stands for 15 rem units wich calculates to 15 x 16px or 240

.columns-max_15		-		Sets the columns to have a maximum static-width of 15rem (240px) ~ 50% on mobile.
.columns-max_20		-		Sets the columns to have a maximum static-width of 20rem (320px).
.columns-max_25		-		Sets the columns to have a maximum static-width of 25rem (400px).
.columns-max_30		-		Sets the columns to have a maximum static-width of 30rem (480px).
.columns-max_35		-		Sets the columns to have a maximum static-width of 35rem (560px).


Markup:
<div class="{{modifier_class}} gap_3 grid">
	<div class="bg_acc c_white font_2 font_bold grid items_center justify_around p_2 br_solid br_black-3 br_1">1</div>
	<div class="bg_acc c_white font_2 font_bold grid items_center justify_around p_2 br_solid br_black-3 br_1">2</div>
	<div class="bg_acc c_white font_2 font_bold grid items_center justify_around p_2 br_solid br_black-3 br_1">3</div>
	<div class="bg_acc c_white font_2 font_bold grid items_center justify_around p_2 br_solid br_black-3 br_1">4</div>
	<div class="bg_acc c_white font_2 font_bold grid items_center justify_around p_2 br_solid br_black-3 br_1">5</div>
	<div class="bg_acc c_white font_2 font_bold grid items_center justify_around p_2 br_solid br_black-3 br_1">6</div>
	<div class="bg_acc c_white font_2 font_bold grid items_center justify_around p_2 br_solid br_black-3 br_1">7</div>
	<div class="bg_acc c_white font_2 font_bold grid items_center justify_around p_2 br_solid br_black-3 br_1">8</div>    
</div>

NOTE: the class `.justify_around` is a great addition to this pattern because it allows the gap bettween grids to flex allowing for the space to be filled.

Weight: 1000

Styleguide  Layouts.Grid.Columns.StaticWidth
*/
/*
Overflow

Control some basics of how content overflows.   

.overflow_hidden   - hidden
.overflow_auto    - auto
.overflow_visible    - visible
.overflow_scroll    - scroll
.overflow_clip    - clip
.overflow_ellipsis    - ellipsis
.overflow_unset   - unset

	Markup:
	<div class="br_solid br_transparent bg_hightlight-3 max-w_40 {{modifier_class}}">
		<p class="nowrap">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore quisquam vero, accusamus repellendus rerum sed dolorem quidem harum, neque odit dolor minima, quia et recusandae voluptatibus similique! Earum, unde laborum.</p>
	</div>

	MarkupWrapperClasses:
	grid template-x_30 texture_light overflow_hidden


Weight: 100

Styleguide Layouts.Display.overflow

*/
.overflow_hidden, .overflow_ellipsis, .overflow_clip {
  overflow: hidden;
}

.overflow_visible {
  overflow: visible;
}

.overflow_auto {
  overflow: auto;
}

.overflow_scroll {
  overflow-x: scroll;
  overflow-y: scroll;
}

.overflow_scroll-x {
  overflow-x: scroll;
  overflow-y: hidden;
}

.overflow_scroll-y {
  overflow-x: hidden;
  overflow-y: scroll;
}

.overflow_clip {
  text-overflow: clip;
}

.overflow_ellipsis {
  text-overflow: ellipsis;
}

.overflow_unset {
  overflow: unset;
}

/*
Overflow Wrap

Overflow-wrap for handling really long words.   

.overflow-wrap_normal   - normal
.overflow-wrap_break   - break-word
.overflow-wrap_anywhere   - anywhere

	Markup:
	<div class="br_solid br_transparent bg_hightlight-3 max-w_20 {{modifier_class}}">
		<p>Author Relationships With Industry and Other Entities (Relevant)—2018 AHA/ACC/AACVPR/AAPA/ABC/ACPM/ADA/AGS/APhA/ASPC/NLA/PCNA Guideline on the Management of Blood Cholesterol (August 2018) e344</p>
	</div>

Weight: 110

Styleguide Layouts.Display.overflow-wrap

*/
.overflow-wrap_normal {
  overflow-wrap: normal;
}

.overflow-wrap_break {
  overflow-wrap: break-word;
}

.overflow-wrap_anywhere {
  overflow-wrap: anywhere;
}

/*
Box Decoration Break

Define how styling should span across visual fragments of one content element.   

.box-decoration_slice   - slice
.box-decoration_clone   - clone

	Markup:
	<div class="max-w_30">
		<p class="br_solid br_primary bg_hightlight-3 inline {{modifier_class}}">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore quisquam vero, accusamus repellendus rerum sed dolorem quidem harum, neque odit dolor minima, quia et recusandae voluptatibus similique! Earum, unde laborum.</p>
	</div>

	MarkupWrapperClasses:
	grid template-x_30 texture_light overflow_hidden

Weight: 120

Styleguide Layouts.Display.BoxDecorationBreak

*/
.box-decoration_slice {
  -webkit-box-decoration-break: slice;
          box-decoration-break: slice;
}

.box-decoration_clone {
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
}

.scroll-snap_y {
  scroll-snap-type: y mandatory;
}

.scroll-snap_x {
  scroll-snap-type: x mandatory;
}

.scroll-snap_y, .scroll-snap_x {
  scroll-padding: 1rem;
}
.scroll-snap_y > *, .scroll-snap_x > * {
  scroll-snap-align: start;
}

/*
Aspect Ratio

Aspect Ratio lets you define the ratio of width to height of the container.  This is a great utility for images, videos, icons and layouts that need to conform to a ratio shape as it responds. It will set the object to 100% width of the container.  <table class='clear_both'><thead class='font_bold uppercase'><th>class</th><th class='text_right'>css property</th><th>value</th></thead><tbody><tr><td class='c_primary-n2'> .aspect_8x10</td><td class='text_right'> aspect-ratio :</td><td> 8 / 10 </td></tr> <tr><td class='c_primary-n2'> .aspect_1x1</td><td class='text_right'> aspect-ratio :</td><td> 1 / 1 </td></tr> <tr><td class='c_primary-n2'> .aspect_4x3</td><td class='text_right'> aspect-ratio :</td><td> 4 / 3 </td></tr> <tr><td class='c_primary-n2'> .aspect_3x4</td><td class='text_right'> aspect-ratio :</td><td> 3 / 4 </td></tr> <tr><td class='c_primary-n2'> .aspect_3x2</td><td class='text_right'> aspect-ratio :</td><td> 3 / 2 </td></tr> <tr><td class='c_primary-n2'> .aspect_2x3</td><td class='text_right'> aspect-ratio :</td><td> 2 / 3 </td></tr> <tr><td class='c_primary-n2'> .aspect_16x9</td><td class='text_right'> aspect-ratio :</td><td> 16 / 9 </td></tr> <tr><td class='c_primary-n2'> .aspect_21x9</td><td class='text_right'> aspect-ratio :</td><td> 21 / 9 </td></tr> <tr><td class='c_primary-n2'> .aspect_2x1</td><td class='text_right'> aspect-ratio :</td><td> 2 / 1 </td></tr> <tr><td class='c_primary-n2'> .aspect_3x1</td><td class='text_right'> aspect-ratio :</td><td> 3 / 1 </td></tr> <tr><td class='c_primary-n2'> .aspect_4x1</td><td class='text_right'> aspect-ratio :</td><td> 4 / 1 </td></tr> <tr><td class='c_primary-n2'> .aspect_5x1</td><td class='text_right'> aspect-ratio :</td><td> 5 / 1 </td></tr> <tr><td class='c_primary-n2'> .aspect_leaderboard</td><td class='text_right'> aspect-ratio :</td><td> 728 / 90 </td></tr> <tr><td class='c_primary-n2'> .aspect_skyscraper</td><td class='text_right'> aspect-ratio :</td><td> 160 / 600 </td></tr> <tr><td class='c_primary-n2'> .aspect_bigbox</td><td class='text_right'> aspect-ratio :</td><td> 300 / 250 </td></tr> <tr><td class='c_primary-n2'> .aspect_billboard</td><td class='text_right'> aspect-ratio :</td><td> 970 / 250 </td></tr> </tbody></table> 



Styleguide Layouts.AspectRatio

*/
[class*=aspect_] {
  width: 100%;
  overflow: hidden;
}

.aspect_leaderboard {
  max-width: 728px;
}

.aspect_billboard {
  max-width: 970px;
}

.aspect_bigbox {
  max-width: 300px;
}

.aspect_skyscraper {
  max-width: 160px;
}

.aspect_8x10 {
  aspect-ratio: 8 / 10;
}

.aspect_1x1 {
  aspect-ratio: 1 / 1;
}

.aspect_4x3 {
  aspect-ratio: 4 / 3;
}

.aspect_3x4 {
  aspect-ratio: 3 / 4;
}

.aspect_3x2 {
  aspect-ratio: 3 / 2;
}

.aspect_2x3 {
  aspect-ratio: 2 / 3;
}

.aspect_16x9 {
  aspect-ratio: 16 / 9;
}

.aspect_21x9 {
  aspect-ratio: 21 / 9;
}

.aspect_2x1 {
  aspect-ratio: 2 / 1;
}

.aspect_3x1 {
  aspect-ratio: 3 / 1;
}

.aspect_4x1 {
  aspect-ratio: 4 / 1;
}

.aspect_5x1 {
  aspect-ratio: 5 / 1;
}

.aspect_leaderboard {
  aspect-ratio: 728 / 90;
}

.aspect_skyscraper {
  aspect-ratio: 160 / 600;
}

.aspect_bigbox {
  aspect-ratio: 300 / 250;
}

.aspect_billboard {
  aspect-ratio: 970 / 250;
}

@media only screen and (width > 768px) {
  .aspect_leaderboard\:md {
    max-width: 728px;
  }
  .aspect_billboard\:md {
    max-width: 970px;
  }
  .aspect_bigbox\:md {
    max-width: 300px;
  }
  .aspect_skyscraper\:md {
    max-width: 160px;
  }
  .aspect_8x10\:md {
    aspect-ratio: 8 / 10;
  }
  .aspect_1x1\:md {
    aspect-ratio: 1 / 1;
  }
  .aspect_4x3\:md {
    aspect-ratio: 4 / 3;
  }
  .aspect_3x4\:md {
    aspect-ratio: 3 / 4;
  }
  .aspect_3x2\:md {
    aspect-ratio: 3 / 2;
  }
  .aspect_2x3\:md {
    aspect-ratio: 2 / 3;
  }
  .aspect_16x9\:md {
    aspect-ratio: 16 / 9;
  }
  .aspect_21x9\:md {
    aspect-ratio: 21 / 9;
  }
  .aspect_2x1\:md {
    aspect-ratio: 2 / 1;
  }
  .aspect_3x1\:md {
    aspect-ratio: 3 / 1;
  }
  .aspect_4x1\:md {
    aspect-ratio: 4 / 1;
  }
  .aspect_5x1\:md {
    aspect-ratio: 5 / 1;
  }
  .aspect_leaderboard\:md {
    aspect-ratio: 728 / 90;
  }
  .aspect_skyscraper\:md {
    aspect-ratio: 160 / 600;
  }
  .aspect_bigbox\:md {
    aspect-ratio: 300 / 250;
  }
  .aspect_billboard\:md {
    aspect-ratio: 970 / 250;
  }
}
@media only screen and (width > 1024px) {
  .aspect_leaderboard\:lg {
    max-width: 728px;
  }
  .aspect_billboard\:lg {
    max-width: 970px;
  }
  .aspect_bigbox\:lg {
    max-width: 300px;
  }
  .aspect_skyscraper\:lg {
    max-width: 160px;
  }
  .aspect_8x10\:lg {
    aspect-ratio: 8 / 10;
  }
  .aspect_1x1\:lg {
    aspect-ratio: 1 / 1;
  }
  .aspect_4x3\:lg {
    aspect-ratio: 4 / 3;
  }
  .aspect_3x4\:lg {
    aspect-ratio: 3 / 4;
  }
  .aspect_3x2\:lg {
    aspect-ratio: 3 / 2;
  }
  .aspect_2x3\:lg {
    aspect-ratio: 2 / 3;
  }
  .aspect_16x9\:lg {
    aspect-ratio: 16 / 9;
  }
  .aspect_21x9\:lg {
    aspect-ratio: 21 / 9;
  }
  .aspect_2x1\:lg {
    aspect-ratio: 2 / 1;
  }
  .aspect_3x1\:lg {
    aspect-ratio: 3 / 1;
  }
  .aspect_4x1\:lg {
    aspect-ratio: 4 / 1;
  }
  .aspect_5x1\:lg {
    aspect-ratio: 5 / 1;
  }
  .aspect_leaderboard\:lg {
    aspect-ratio: 728 / 90;
  }
  .aspect_skyscraper\:lg {
    aspect-ratio: 160 / 600;
  }
  .aspect_bigbox\:lg {
    aspect-ratio: 300 / 250;
  }
  .aspect_billboard\:lg {
    aspect-ratio: 970 / 250;
  }
}
/*
Width 

Control some basics of the design with max-width and width.   

Control the width percents.  
<div class=" br_solid br_black-1 br_1 bg_highlight-5 p-y_3"> [modifier class] <div class="bg_primary p-y_2 text-left [modifier class] m-t_3"> &nbsp; </div>
</div>
<div class=" br_solid br_black-1 br_1 bg_highlight-5 p-y_3"> w_auto <div class="bg_primary p-y_2 text-left w_auto m-t_3"> &nbsp; </div>
</div>
<div class=" br_solid br_black-1 br_1 bg_highlight-5 p-y_3"> w_0 <div class="bg_primary p-y_2 text-left w_0 m-t_3">&nbsp;</div>
</div>
<div class=" br_solid br_black-1 br_1 bg_highlight-5 p-y_3"> w_5 <div class="bg_primary p-y_2 text-left w_5 m-t_3">&nbsp;</div>
</div>
<div class=" br_solid br_black-1 br_1 bg_highlight-5 p-y_3"> w_10 <div class="bg_primary p-y_2 text-left w_10 m-t_3">&nbsp;</div>
</div>
<div class=" br_solid br_black-1 br_1 bg_highlight-5 p-y_3"> w_15 <div class="bg_primary p-y_2 text-left w_15 m-t_3">&nbsp;</div>
</div>
<div class=" br_solid br_black-1 br_1 bg_highlight-5 p-y_3"> w_20 <div class="bg_primary p-y_2 text-left w_20 m-t_3">&nbsp;</div>
</div>
<div class=" br_solid br_black-1 br_1 bg_highlight-5 p-y_3"> w_25 <div class="bg_primary p-y_2 text-left w_25 m-t_3">&nbsp;</div>
</div>
<div class=" br_solid br_black-1 br_1 bg_highlight-5 p-y_3"> w_30 <div class="bg_primary p-y_2 text-left w_30 m-t_3">&nbsp;</div>
</div>
<div class=" br_solid br_black-1 br_1 bg_highlight-5 p-y_3"> w_35 <div class="bg_primary p-y_2 text-left w_35 m-t_3">&nbsp;</div>
</div>
<div class=" br_solid br_black-1 br_1 bg_highlight-5 p-y_3"> w_40 <div class="bg_primary p-y_2 text-left w_40 m-t_3">&nbsp;</div>
</div>
<div class=" br_solid br_black-1 br_1 bg_highlight-5 p-y_3"> w_45 <div class="bg_primary p-y_2 text-left w_45 m-t_3">&nbsp;</div>
</div>
<div class=" br_solid br_black-1 br_1 bg_highlight-5 p-y_3"> w_50 <div class="bg_primary p-y_2 text-left w_50 m-t_3">&nbsp;</div>
</div>
<div class=" br_solid br_black-1 br_1 bg_highlight-5 p-y_3"> w_55 <div class="bg_primary p-y_2 text-left w_55 m-t_3">&nbsp;</div>
</div>
<div class=" br_solid br_black-1 br_1 bg_highlight-5 p-y_3"> w_60 <div class="bg_primary p-y_2 text-left w_60 m-t_3">&nbsp;</div>
</div>
<div class=" br_solid br_black-1 br_1 bg_highlight-5 p-y_3"> w_65 <div class="bg_primary p-y_2 text-left w_65 m-t_3">&nbsp;</div>
</div>
<div class=" br_solid br_black-1 br_1 bg_highlight-5 p-y_3"> w_70 <div class="bg_primary p-y_2 text-left w_70 m-t_3">&nbsp;</div>
</div>
<div class=" br_solid br_black-1 br_1 bg_highlight-5 p-y_3"> w_75 <div class="bg_primary p-y_2 text-left w_75 m-t_3">&nbsp;</div>
</div>
<div class=" br_solid br_black-1 br_1 bg_highlight-5 p-y_3"> w_80 <div class="bg_primary p-y_2 text-left w_80 m-t_3">&nbsp;</div>
</div>
<div class=" br_solid br_black-1 br_1 bg_highlight-5 p-y_3"> w_85 <div class="bg_primary p-y_2 text-left w_85 m-t_3">&nbsp;</div>
</div>
<div class=" br_solid br_black-1 br_1 bg_highlight-5 p-y_3"> w_90 <div class="bg_primary p-y_2 text-left w_90 m-t_3">&nbsp;</div>
</div>
<div class=" br_solid br_black-1 br_1 bg_highlight-5 p-y_3"> w_95 <div class="bg_primary p-y_2 text-left w_95 m-t_3">&nbsp;</div>
</div>
<div class=" br_solid br_black-1 br_1 bg_highlight-5 p-y_3"> w_100 <div class="bg_primary p-y_2 text-left w_100 m-t_3">&nbsp;</div>
</div>
<div class=" br_solid br_black-1 br_1 bg_highlight-5 p-y_3"> w_1-third <div class="bg_primary p-y_2 text-left w_1-third m-t_3"> &nbsp; </div>
</div>
<div class=" br_solid br_black-1 br_1 bg_highlight-5 p-y_3"> w_2-thirds <div class="bg_primary p-y_2 text-left w_2-thirds m-t_3"> &nbsp; </div>
</div>

Weight: 111

Styleguide Layouts.Width

 */
.w_auto, .btn_acc-primary {
  width: auto !important;
}

.w_0 {
  width: 0% !important;
}

.w_5 {
  width: 5% !important;
}

.w_10 {
  width: 10% !important;
}

.w_15 {
  width: 15% !important;
}

.w_20 {
  width: 20% !important;
}

.w_25 {
  width: 25% !important;
}

.w_30 {
  width: 30% !important;
}

.w_35 {
  width: 35% !important;
}

.w_40 {
  width: 40% !important;
}

.w_45 {
  width: 45% !important;
}

.w_50 {
  width: 50% !important;
}

.w_55 {
  width: 55% !important;
}

.w_60 {
  width: 60% !important;
}

.w_65 {
  width: 65% !important;
}

.w_70 {
  width: 70% !important;
}

.w_75 {
  width: 75% !important;
}

.w_80 {
  width: 80% !important;
}

.w_85 {
  width: 85% !important;
}

.w_90 {
  width: 90% !important;
}

.w_95 {
  width: 95% !important;
}

.w_100 {
  width: 100% !important;
}

.w_third-1 {
  width: 33% !important;
}

.w_third-2 {
  width: 66% !important;
}

.max-w_0 {
  max-width: 0 !important;
}

.max-w_5 {
  max-width: 80px !important;
  max-width: 5rem !important;
}

.max-w_10 {
  max-width: 160px !important;
  max-width: 10rem !important;
}

.max-w_15 {
  max-width: 240px !important;
  max-width: 15rem !important;
}

.max-w_20 {
  max-width: 320px !important;
  max-width: 20rem !important;
}

.max-w_25 {
  max-width: 400px !important;
  max-width: 25rem !important;
}

.max-w_30 {
  max-width: 480px !important;
  max-width: 30rem !important;
}

.max-w_35 {
  max-width: 560px !important;
  max-width: 35rem !important;
}

.max-w_40 {
  max-width: 640px !important;
  max-width: 40rem !important;
}

.max-w_45 {
  max-width: 720px !important;
  max-width: 45rem !important;
}

.max-w_50 {
  max-width: 800px !important;
  max-width: 50rem !important;
}

.max-w_55 {
  max-width: 880px !important;
  max-width: 55rem !important;
}

.max-w_60 {
  max-width: 960px !important;
  max-width: 60rem !important;
}

.max-w_65 {
  max-width: 1040px !important;
  max-width: 65rem !important;
}

.max-w_70 {
  max-width: 1120px !important;
  max-width: 70rem !important;
}

.max-w_75 {
  max-width: 1200px !important;
  max-width: 75rem !important;
}

.max-w_80 {
  max-width: 1280px !important;
  max-width: 80rem !important;
}

.max-w_85 {
  max-width: 1360px !important;
  max-width: 85rem !important;
}

.max-w_90 {
  max-width: 1440px !important;
  max-width: 90rem !important;
}

.max-w_95 {
  max-width: 1520px !important;
  max-width: 95rem !important;
}

.max-w_unset {
  max-width: unset !important;
}

@media only screen and (width > 768px) {
  .w_auto\:md {
    width: auto !important;
  }
  .w_0\:md {
    width: 0% !important;
  }
  .w_5\:md {
    width: 5% !important;
  }
  .w_10\:md {
    width: 10% !important;
  }
  .w_15\:md {
    width: 15% !important;
  }
  .w_20\:md {
    width: 20% !important;
  }
  .w_25\:md {
    width: 25% !important;
  }
  .w_30\:md {
    width: 30% !important;
  }
  .w_35\:md {
    width: 35% !important;
  }
  .w_40\:md {
    width: 40% !important;
  }
  .w_45\:md {
    width: 45% !important;
  }
  .w_50\:md {
    width: 50% !important;
  }
  .w_55\:md {
    width: 55% !important;
  }
  .w_60\:md {
    width: 60% !important;
  }
  .w_65\:md {
    width: 65% !important;
  }
  .w_70\:md {
    width: 70% !important;
  }
  .w_75\:md {
    width: 75% !important;
  }
  .w_80\:md {
    width: 80% !important;
  }
  .w_85\:md {
    width: 85% !important;
  }
  .w_90\:md {
    width: 90% !important;
  }
  .w_95\:md {
    width: 95% !important;
  }
  .w_100\:md {
    width: 100% !important;
  }
  .w_third-1\:md {
    width: 33% !important;
  }
  .w_third-2\:md {
    width: 66% !important;
  }
  .max-w_0\:md {
    max-width: 0 !important;
  }
  .max-w_5\:md {
    max-width: 5rem !important;
  }
  .max-w_10\:md {
    max-width: 10rem !important;
  }
  .max-w_15\:md {
    max-width: 15rem !important;
  }
  .max-w_20\:md {
    max-width: 20rem !important;
  }
  .max-w_25\:md {
    max-width: 25rem !important;
  }
  .max-w_30\:md {
    max-width: 30rem !important;
  }
  .max-w_35\:md {
    max-width: 35rem !important;
  }
  .max-w_40\:md {
    max-width: 40rem !important;
  }
  .max-w_45\:md {
    max-width: 45rem !important;
  }
  .max-w_50\:md {
    max-width: 50rem !important;
  }
  .max-w_55\:md {
    max-width: 55rem !important;
  }
  .max-w_60\:md {
    max-width: 60rem !important;
  }
  .max-w_65\:md {
    max-width: 65rem !important;
  }
  .max-w_70\:md {
    max-width: 70rem !important;
  }
  .max-w_75\:md {
    max-width: 75rem !important;
  }
  .max-w_80\:md {
    max-width: 80rem !important;
  }
  .max-w_85\:md {
    max-width: 85rem !important;
  }
  .max-w_90\:md {
    max-width: 90rem !important;
  }
  .max-w_95\:md {
    max-width: 95rem !important;
  }
  .max-w_unset\:md {
    max-width: unset !important;
  }
}
@media only screen and (width > 1024px) {
  .w_auto\:lg {
    width: auto !important;
  }
  .w_0\:lg {
    width: 0% !important;
  }
  .w_5\:lg {
    width: 5% !important;
  }
  .w_10\:lg {
    width: 10% !important;
  }
  .w_15\:lg {
    width: 15% !important;
  }
  .w_20\:lg {
    width: 20% !important;
  }
  .w_25\:lg {
    width: 25% !important;
  }
  .w_30\:lg {
    width: 30% !important;
  }
  .w_35\:lg {
    width: 35% !important;
  }
  .w_40\:lg {
    width: 40% !important;
  }
  .w_45\:lg {
    width: 45% !important;
  }
  .w_50\:lg {
    width: 50% !important;
  }
  .w_55\:lg {
    width: 55% !important;
  }
  .w_60\:lg {
    width: 60% !important;
  }
  .w_65\:lg {
    width: 65% !important;
  }
  .w_70\:lg {
    width: 70% !important;
  }
  .w_75\:lg {
    width: 75% !important;
  }
  .w_80\:lg {
    width: 80% !important;
  }
  .w_85\:lg {
    width: 85% !important;
  }
  .w_90\:lg {
    width: 90% !important;
  }
  .w_95\:lg {
    width: 95% !important;
  }
  .w_100\:lg {
    width: 100% !important;
  }
  .w_third-1\:lg {
    width: 33% !important;
  }
  .w_third-2\:lg {
    width: 66% !important;
  }
  .max-w_0\:lg {
    max-width: 0 !important;
  }
  .max-w_5\:lg {
    max-width: 5rem !important;
  }
  .max-w_10\:lg {
    max-width: 10rem !important;
  }
  .max-w_15\:lg {
    max-width: 15rem !important;
  }
  .max-w_20\:lg {
    max-width: 20rem !important;
  }
  .max-w_25\:lg {
    max-width: 25rem !important;
  }
  .max-w_30\:lg {
    max-width: 30rem !important;
  }
  .max-w_35\:lg {
    max-width: 35rem !important;
  }
  .max-w_40\:lg {
    max-width: 40rem !important;
  }
  .max-w_45\:lg {
    max-width: 45rem !important;
  }
  .max-w_50\:lg {
    max-width: 50rem !important;
  }
  .max-w_55\:lg {
    max-width: 55rem !important;
  }
  .max-w_60\:lg {
    max-width: 60rem !important;
  }
  .max-w_65\:lg {
    max-width: 65rem !important;
  }
  .max-w_70\:lg {
    max-width: 70rem !important;
  }
  .max-w_75\:lg {
    max-width: 75rem !important;
  }
  .max-w_80\:lg {
    max-width: 80rem !important;
  }
  .max-w_85\:lg {
    max-width: 85rem !important;
  }
  .max-w_90\:lg {
    max-width: 90rem !important;
  }
  .max-w_95\:lg {
    max-width: 95rem !important;
  }
  .max-w_unset\:lg {
    max-width: unset !important;
  }
}
/*
Max Width

Control the max width by 10% increments or by readable which is 65em

.max-w_10.lh_4 - width size for a column that would match up to the smallest breakpoint.
.max-w_20.font_n1.lh_4 - comfortable reading range for font_n1 text.
.max-w_50.font_0.lh_3 - comfortable reading range for font_0 text
.max-w_60.font_1.lh_2 - comfortable reading range for font_1 text
.max-w_80.lh_4 - large screen format of 1280px #198dae


Markup:
<div class=" br_solid br_transparent bg_alert-3 p_5">
	<div class="bg_white text-left {{ modifier_class }}">
		<strong>{{ modifier_class }}</strong> Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
		inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus
		ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat
		imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. Sed
		lectus. Integer euismod lacus luctus magna. Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem,
		at interdum magna augue eget diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere
		cubilia Curae; Morbi lacinia molestie dui. Praesent blandit dolor. Sed non quam. In vel mi sit amet augue congue
		elementum. Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus nunc, viverra nec.
	</div>
</div>

Styleguide Layouts.MaxWidth

 */
/*
Custom Max Width

Add "max-w_custom" class to the component that you want to set a custom width for. Then the custom width value can be passed to that component from either the parent component or itself using `style="--max-w_custom:rem value"`
<div class=" br_solid br_black-1 br_1 bg_highlight-5 p-y_3" style="--max-w_custom:12rem"> Width value passed from parent component <div class="bg_primary p-y_2 text-left c_white m-t_3 max-w_custom"> 12rem </div>
</div>
<div class=" br_solid br_black-1 br_1 bg_highlight-5 p-y_3"> Width value set inline <div class="bg_primary p-y_2 text-left c_white m-t_3 max-w_custom" style="--max-w_custom:24rem"> 24rem </div>
</div>

Styleguide Layouts.Width.CustomMaxWidth

 */
.max-w_custom {
  max-width: var(--max-w_custom, 100%);
}

.h_unset {
  height: unset;
}

.h_auto {
  height: auto;
}

.h_0 {
  height: 0vh;
}

.h_10 {
  height: 10vh;
}

.h_20 {
  height: 20vh;
}

.h_30 {
  height: 30vh;
}

.h_40 {
  height: 40vh;
}

.h_50 {
  height: 50vh;
}

.h_60 {
  height: 60vh;
}

.h_70 {
  height: 70vh;
}

.h_80 {
  height: 80vh;
}

.h_90 {
  height: 90vh;
}

.h_100 {
  height: 100vh;
}

.h_100p {
  height: 100%;
}

.h_unset {
  height: unset;
}

.h_0lh {
  height: 1em;
}

.h_1lh {
  height: 1.25em;
}

.h_2lh {
  height: 1.45em;
}

.h_3lh {
  height: 1.65em;
}

.h_4lh {
  height: 1.75em;
}

.h_5lh {
  height: 2.5em;
}

.h_1xlh {
  height: 24px;
  height: 1.5rem;
}

.h_2xlh {
  height: 48px;
  height: 3rem;
}

.h_3xlh {
  height: 72px;
  height: 4.5rem;
}

.h_4xlh {
  height: 96px;
  height: 6rem;
}

.h_5xlh {
  height: 120px;
  height: 7.5rem;
}

.min-h_auto {
  min-height: auto;
}

.min-h_0 {
  min-height: 0vh;
}

.min-h_10 {
  min-height: 10vh;
}

.min-h_20 {
  min-height: 20vh;
}

.min-h_30 {
  min-height: 30vh;
}

.min-h_40 {
  min-height: 40vh;
}

.min-h_50 {
  min-height: 50vh;
}

.min-h_60 {
  min-height: 60vh;
}

.min-h_70 {
  min-height: 70vh;
}

.min-h_80 {
  min-height: 80vh;
}

.min-h_90 {
  min-height: 90vh;
}

.min-h_100 {
  min-height: 100vh;
}

.min-h_100p {
  min-height: 100%;
}

.min-h_unset {
  min-height: unset;
}

.min-h_0lh {
  min-height: 1em;
}

.min-h_1lh {
  min-height: 1.25em;
}

.min-h_2lh {
  min-height: 1.45em;
}

.min-h_3lh {
  min-height: 1.65em;
}

.min-h_4lh {
  min-height: 1.75em;
}

.min-h_5lh {
  min-height: 2.5em;
}

.min-h_1xlh {
  min-height: 24px;
  min-height: 1.5rem;
}

.min-h_2xlh {
  min-height: 48px;
  min-height: 3rem;
}

.min-h_3xlh {
  min-height: 72px;
  min-height: 4.5rem;
}

.min-h_4xlh {
  min-height: 96px;
  min-height: 6rem;
}

.min-h_5xlh {
  min-height: 120px;
  min-height: 7.5rem;
}

@media only screen and (width > 768px) {
  .h_auto\:md {
    height: auto;
  }
  .h_0\:md {
    height: 0vh;
  }
  .h_10\:md {
    height: 10vh;
  }
  .h_20\:md {
    height: 20vh;
  }
  .h_30\:md {
    height: 30vh;
  }
  .h_40\:md {
    height: 40vh;
  }
  .h_50\:md {
    height: 50vh;
  }
  .h_60\:md {
    height: 60vh;
  }
  .h_70\:md {
    height: 70vh;
  }
  .h_80\:md {
    height: 80vh;
  }
  .h_90\:md {
    height: 90vh;
  }
  .h_100\:md {
    height: 100vh;
  }
  .h_100p\:md {
    height: 100%;
  }
  .h_unset\:md {
    height: unset;
  }
  .h_0lh\:md {
    height: 1em;
  }
  .h_1lh\:md {
    height: 1.25em;
  }
  .h_2lh\:md {
    height: 1.45em;
  }
  .h_3lh\:md {
    height: 1.65em;
  }
  .h_4lh\:md {
    height: 1.75em;
  }
  .h_5lh\:md {
    height: 2.5em;
  }
  .h_1xlh\:md {
    height: 1.5rem;
  }
  .h_2xlh\:md {
    height: 3rem;
  }
  .h_3xlh\:md {
    height: 4.5rem;
  }
  .h_4xlh\:md {
    height: 6rem;
  }
  .h_5xlh\:md {
    height: 7.5rem;
  }
  .min-h_auto\:md {
    min-height: auto;
  }
  .min-h_0\:md {
    min-height: 0vh;
  }
  .min-h_10\:md {
    min-height: 10vh;
  }
  .min-h_20\:md {
    min-height: 20vh;
  }
  .min-h_30\:md {
    min-height: 30vh;
  }
  .min-h_40\:md {
    min-height: 40vh;
  }
  .min-h_50\:md {
    min-height: 50vh;
  }
  .min-h_60\:md {
    min-height: 60vh;
  }
  .min-h_70\:md {
    min-height: 70vh;
  }
  .min-h_80\:md {
    min-height: 80vh;
  }
  .min-h_90\:md {
    min-height: 90vh;
  }
  .min-h_100\:md {
    min-height: 100vh;
  }
  .min-h_100p\:md {
    min-height: 100%;
  }
  .min-h_unset\:md {
    min-height: unset;
  }
  .min-h_0lh\:md {
    min-height: 1em;
  }
  .min-h_1lh\:md {
    min-height: 1.25em;
  }
  .min-h_2lh\:md {
    min-height: 1.45em;
  }
  .min-h_3lh\:md {
    min-height: 1.65em;
  }
  .min-h_4lh\:md {
    min-height: 1.75em;
  }
  .min-h_5lh\:md {
    min-height: 2.5em;
  }
  .min-h_1xlh\:md {
    min-height: 1.5rem;
  }
  .min-h_2xlh\:md {
    min-height: 3rem;
  }
  .min-h_3xlh\:md {
    min-height: 4.5rem;
  }
  .min-h_4xlh\:md {
    min-height: 6rem;
  }
  .min-h_5xlh\:md {
    min-height: 7.5rem;
  }
}
@media only screen and (width > 1024px) {
  .h_auto\:lg {
    height: auto;
  }
  .h_0\:lg {
    height: 0vh;
  }
  .h_10\:lg {
    height: 10vh;
  }
  .h_20\:lg {
    height: 20vh;
  }
  .h_30\:lg {
    height: 30vh;
  }
  .h_40\:lg {
    height: 40vh;
  }
  .h_50\:lg {
    height: 50vh;
  }
  .h_60\:lg {
    height: 60vh;
  }
  .h_70\:lg {
    height: 70vh;
  }
  .h_80\:lg {
    height: 80vh;
  }
  .h_90\:lg {
    height: 90vh;
  }
  .h_100\:lg {
    height: 100vh;
  }
  .h_100p\:lg {
    height: 100%;
  }
  .h_unset\:lg {
    height: unset;
  }
  .h_0lh\:lg {
    height: 1em;
  }
  .h_1lh\:lg {
    height: 1.25em;
  }
  .h_2lh\:lg {
    height: 1.45em;
  }
  .h_3lh\:lg {
    height: 1.65em;
  }
  .h_4lh\:lg {
    height: 1.75em;
  }
  .h_5lh\:lg {
    height: 2.5em;
  }
  .h_1xlh\:lg {
    height: 1.5rem;
  }
  .h_2xlh\:lg {
    height: 3rem;
  }
  .h_3xlh\:lg {
    height: 4.5rem;
  }
  .h_4xlh\:lg {
    height: 6rem;
  }
  .h_5xlh\:lg {
    height: 7.5rem;
  }
  .min-h_auto\:lg {
    min-height: auto;
  }
  .min-h_0\:lg {
    min-height: 0vh;
  }
  .min-h_10\:lg {
    min-height: 10vh;
  }
  .min-h_20\:lg {
    min-height: 20vh;
  }
  .min-h_30\:lg {
    min-height: 30vh;
  }
  .min-h_40\:lg {
    min-height: 40vh;
  }
  .min-h_50\:lg {
    min-height: 50vh;
  }
  .min-h_60\:lg {
    min-height: 60vh;
  }
  .min-h_70\:lg {
    min-height: 70vh;
  }
  .min-h_80\:lg {
    min-height: 80vh;
  }
  .min-h_90\:lg {
    min-height: 90vh;
  }
  .min-h_100\:lg {
    min-height: 100vh;
  }
  .min-h_100p\:lg {
    min-height: 100%;
  }
  .min-h_unset\:lg {
    min-height: unset;
  }
  .min-h_0lh\:lg {
    min-height: 1em;
  }
  .min-h_1lh\:lg {
    min-height: 1.25em;
  }
  .min-h_2lh\:lg {
    min-height: 1.45em;
  }
  .min-h_3lh\:lg {
    min-height: 1.65em;
  }
  .min-h_4lh\:lg {
    min-height: 1.75em;
  }
  .min-h_5lh\:lg {
    min-height: 2.5em;
  }
  .min-h_1xlh\:lg {
    min-height: 1.5rem;
  }
  .min-h_2xlh\:lg {
    min-height: 3rem;
  }
  .min-h_3xlh\:lg {
    min-height: 4.5rem;
  }
  .min-h_4xlh\:lg {
    min-height: 6rem;
  }
  .min-h_5xlh\:lg {
    min-height: 7.5rem;
  }
}
/*
Height

<div class="p-b_3"><span class="bg_accent br_radius c_white inline-block font_n1 p-7_3 p-x_5 sg">Is Responsive: breakpoint modifiers</span></div>
It is rare to use height but at times it is useful to set a matching set of cards or setting up a dashboard.<br><table><thead><tr><th>Classes</th><th>Effect</th></tr></thead><tbody><tr><td>.h_auto</td><td>height: auto</td></tr><tr><td>.h_0</td><td>height: 0vh</td></tr><tr><td>.h_10</td><td>height: 10vh</td></tr><tr><td>.h_20</td><td>height: 20vh</td></tr><tr><td>.h_30</td><td>height: 30vh</td></tr><tr><td>.h_40</td><td>height: 40vh</td></tr><tr><td>.h_50</td><td>height: 50vh</td></tr><tr><td>.h_60</td><td>height: 60vh</td></tr><tr><td>.h_70</td><td>height: 70vh</td></tr><tr><td>.h_80</td><td>height: 80vh</td></tr><tr><td>.h_90</td><td>height: 90vh</td></tr><tr><td>.h_100</td><td>height: 100vh</td></tr><tr><td>.h_unset</td><td>height: unset</td></tr></tbody></table>

Markup:
<div class="flex p_4 bg_primary-4">
<div class="flex_auto br_solid br_white-8 br_1 bg_primary h_auto">.h_auto</div> 
<div class="flex_auto br_solid br_white-8 br_1 bg_primary h_0">.h_0</div>    
<div class="flex_auto br_solid br_white-8 br_1 bg_primary h_10">.h_10</div>   
<div class="flex_auto br_solid br_white-8 br_1 bg_primary h_20">.h_20</div>   
<div class="flex_auto br_solid br_white-8 br_1 bg_primary h_30">.h_30</div>   
<div class="flex_auto br_solid br_white-8 br_1 bg_primary h_40">.h_40</div>   
<div class="flex_auto br_solid br_white-8 br_1 bg_primary h_50">.h_50</div>   
<div class="flex_auto br_solid br_white-8 br_1 bg_primary h_60">.h_60</div>   
<div class="flex_auto br_solid br_white-8 br_1 bg_primary h_70">.h_70</div>   
<div class="flex_auto br_solid br_white-8 br_1 bg_primary h_80">.h_80</div>   
<div class="flex_auto br_solid br_white-8 br_1 bg_primary h_90">.h_90</div>   
<div class="flex_auto br_solid br_white-8 br_1 bg_primary h_100">.h_100 </div>  
<div class="flex_auto br_solid br_white-8 br_1 bg_primary h_100p">.h_100p (percent) </div>  
<div class="flex_auto br_solid br_white-8 br_1 bg_primary h_60 h_unset:lg">.h_60.h_unset:lg</div>
</div>

  Weight: 107

  Styleguide Layouts.Height

 */
/*
UC: Height LH

<table>
	<thead>
		<tr>
			<th>Classes</th>
			<th>Effect</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>.h_0lh</td>
			<td>height: 1em</td>
		</tr>
		<tr>
			<td>.h_1lh</td>
			<td>height: 1.25em</td>
		</tr>
		<tr>
			<td>.h_2lh</td>
			<td>height: 1.45em</td>
		</tr>
		<tr>
			<td>.h_3lh</td>
			<td>height: 1.65em</td>
		</tr>
        <tr>
            <td>.h_4lh</td>
            <td>height: 1.75em</td>
        </tr>
                <tr>
                    <td>.h_5lh</td>
                    <td>height: 2em</td>
                </tr>
	</tbody>
</table>

Markup:
<div class="flex flex_column font_1">
	<div class="flex_auto br_solid br_white-8 br_1 bg_primary-4 p-x_3 h_0lh lh_0">font_1 text with h_0lh <span class="font-size_down vertical-alighn-middle">smaller text</span></div> 
	<div class="flex_auto br_solid br_white-8 br_1 bg_primary-4 p-x_3 h_1lh lh_1">font_1 text with h_1lh <span class="font-size_down vertical-alighn-middle">smaller text</span></div> 
	<div class="flex_auto br_solid br_white-8 br_1 bg_primary-4 p-x_3 h_2lh lh_2">font_1 text with h_2lh <span class="font-size_down vertical-alighn-middle">smaller text</span></div> 
	<div class="flex_auto br_solid br_white-8 br_1 bg_primary-4 p-x_3 h_3lh lh_3">font_1 text with h_3lh <span class="font-size_down vertical-alighn-middle">smaller text</span></div> 
	<div class="flex_auto br_solid br_white-8 br_1 bg_primary-4 p-x_3 h_4lh lh_4">font_1 text with h_4lh <span class="font-size_down vertical-alighn-middle">smaller text</span></div> 
	<div class="flex_auto br_solid br_white-8 br_1 bg_primary-4 p-x_3 h_5lh lh_5">font_1 text with h_5lh <span class="font-size_down vertical-alighn-middle">smaller text</span></div> 
</div>
<div class="flex flex_column font_2">
	<div class="flex_auto br_solid br_white-8 br_1 bg_primary-4 p-x_3 h_0lh lh_0">font_2 text with h_0lh <span class="font-size_down vertical-alighn-middle">smaller text</span></div> 
	<div class="flex_auto br_solid br_white-8 br_1 bg_primary-4 p-x_3 h_1lh lh_1">font_2 text with h_1lh <span class="font-size_down vertical-alighn-middle">smaller text</span></div> 
	<div class="flex_auto br_solid br_white-8 br_1 bg_primary-4 p-x_3 h_2lh lh_2">font_2 text with h_2lh <span class="font-size_down vertical-alighn-middle">smaller text</span></div> 
	<div class="flex_auto br_solid br_white-8 br_1 bg_primary-4 p-x_3 h_3lh lh_3">font_2 text with h_3lh <span class="font-size_down vertical-alighn-middle">smaller text</span></div> 
	<div class="flex_auto br_solid br_white-8 br_1 bg_primary-4 p-x_3 h_4lh lh_4">font_2 text with h_4lh <span class="font-size_down vertical-alighn-middle">smaller text</span></div> 
	<div class="flex_auto br_solid br_white-8 br_1 bg_primary-4 p-x_3 h_5lh lh_5">font_2 text with h_5lh <span class="font-size_down vertical-alighn-middle">smaller text</span></div> 
</div>
<div class="flex flex_column font_3">
	<div class="flex_auto br_solid br_white-8 br_1 bg_primary-4 p-x_3 h_0lh lh_0">font_3 text with h_0lh <span class="font-size_down vertical-alighn-middle">smaller text</span></div> 
	<div class="flex_auto br_solid br_white-8 br_1 bg_primary-4 p-x_3 h_1lh lh_1">font_3 text with h_1lh <span class="font-size_down vertical-alighn-middle">smaller text</span></div> 
	<div class="flex_auto br_solid br_white-8 br_1 bg_primary-4 p-x_3 h_2lh lh_2">font_3 text with h_2lh <span class="font-size_down vertical-alighn-middle">smaller text</span></div> 
	<div class="flex_auto br_solid br_white-8 br_1 bg_primary-4 p-x_3 h_3lh lh_3">font_3 text with h_3lh <span class="font-size_down vertical-alighn-middle">smaller text</span></div> 
	<div class="flex_auto br_solid br_white-8 br_1 bg_primary-4 p-x_3 h_4lh lh_4">font_3 text with h_4lh <span class="font-size_down vertical-alighn-middle">smaller text</span></div> 
	<div class="flex_auto br_solid br_white-8 br_1 bg_primary-4 p-x_3 h_5lh lh_5">font_3 text with h_5lh <span class="font-size_down vertical-alighn-middle">smaller text</span></div> 
</div>

Weight: 107

Styleguide Layouts.Height.lh

 */
/*
Min Height

<div class="p-b_3"><span class="bg_accent br_radius c_white inline-block font_n1 p-7_3 p-x_5 sg">Is Responsive: breakpoint modifiers</span></div>
Min heights can be very useful in interactions and keeping a consistent dimension feel without conflicts of overflow.<br><table><thead><tr><th>Classes</th><th>Effect</th></tr></thead><tbody><tr><td>.min-h_auto</td><td>min-height: auto</td></tr><tr><td>.min-h_0</td><td>min-height: 0vh</td></tr><tr><td>.min-h_10</td><td>min-height: 10vh</td></tr><tr><td>.min-h_20</td><td>min-height: 20vh</td></tr><tr><td>.min-h_30</td><td>min-height: 30vh</td></tr><tr><td>.min-h_40</td><td>min-height: 40vh</td></tr><tr><td>.min-h_50</td><td>min-height: 50vh</td></tr><tr><td>.min-h_60</td><td>min-height: 60vh</td></tr><tr><td>.min-h_70</td><td>min-height: 70vh</td></tr><tr><td>.min-h_80</td><td>min-height: 80vh</td></tr><tr><td>.min-h_90</td><td>min-height: 90vh</td></tr><tr><td>.min-h_100</td><td>min-height: 100vh</td></tr><tr><td>.min-h_unset</td><td>min-height: unset</td></tr></tbody></table>


Markup:
<div class="flex p_4 bg_primary-4 items_start">
<div class="flex_auto br_solid br_white-8 br_1 bg_primary min-h_auto">.min-h_auto</div> 
<div class="flex_auto br_solid br_white-8 br_1 bg_primary min-h_0">.min-h_0</div>    
<div class="flex_auto br_solid br_white-8 br_1 bg_primary min-h_10">.min-h_10</div>   
<div class="flex_auto br_solid br_white-8 br_1 bg_primary min-h_20">.min-h_20</div>   
<div class="flex_auto br_solid br_white-8 br_1 bg_primary min-h_30">.min-h_30</div>   
<div class="flex_auto br_solid br_white-8 br_1 bg_primary min-h_40">.min-h_40</div>   
<div class="flex_auto br_solid br_white-8 br_1 bg_primary min-h_50">.min-h_50</div>   
<div class="flex_auto br_solid br_white-8 br_1 bg_primary min-h_60">.min-h_60</div>   
<div class="flex_auto br_solid br_white-8 br_1 bg_primary min-h_70">.min-h_70</div>   
<div class="flex_auto br_solid br_white-8 br_1 bg_primary min-h_80">.min-h_80</div>   
<div class="flex_auto br_solid br_white-8 br_1 bg_primary min-h_90">.min-h_90</div>   
<div class="flex_auto br_solid br_white-8 br_1 bg_primary min-h_100">.min-h_100</div>  
<div class="flex_auto br_solid br_white-8 br_1 bg_primary min-h_60 min-h_unset:lg">.min-h_60.min-h_unset:lg</div>
</div>

  Weight: 107

  Styleguide Layouts.Height.min

 */
/*
Decorator 

Colors, textures, logos and other design flourishes.

Weight: 125

Styleguide Decorator
*/
/*
Box Decoration Break

<p>Utility class that applies <code>box-decoration-break: clone;</code> to ensure that box decorations such as borders, padding, and background are duplicated for each fragment when inline elements wrap across lines. This is useful when styling multi-line inline elements like tags or badges where consistent decoration is needed across line breaks.</p>

.box-break_clone  - items repeat the box decorators at the begining of each break of a wrapped inline block item
.box-break_slice   - items only have the box decorators at the start and end of the inline block and are not between at the wrap breaks.


Markup: 



MarkupWrapperClasses: p_4

Weight: 120


Styleguide: Decorator.BoxDecorationBreak
*/
.box-break_slice {
  -webkit-box-decoration-break: slice;
          box-decoration-break: slice;
}

.box-break_clone {
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
}

/*
Shadows

Shadows can be easily added to container .shadow_{{modifier_class}}.   You can add simple or rich shadows depending on the level of depth and details of the shadow needed for the UI.   

.shadow_n5			- inset shadow
.shadow_n4			- inset shadow
.shadow_n3			- inset shadow
.shadow_n2			- inset shadow
.shadow_n1			- inset shadow
.shadow_0		- no shadow
.shadow_1		- box shadow
.shadow_2		- box shadow
.shadow_3		- box shadow
.shadow_4		- box shadow
.shadow_5		- box shadow
.shadow_bevel-light				- Rich Shadow bevel-light
.shadow_bevel-bold				- Rich Shadow bevel-bold
.shadow_overlap-light			- Rich Shadow overlap-light
.shadow_overlap-bold				- Rich Shadow overlap-bold
.shadow_emboss-light				- Rich Shadow emboss-light
.shadow_emboss-bold				- Rich Shadow emboss-bold

Markup:
<div class="{{modifier_class}} bg-blend_overlay bg_primary-5 br_round lh_1 m_0 m_5:md p_4 p_5 text_center texture_light flex flex_column"><span class="flex_auto self_center">{{modifier_class}}</span></div>


MarkupWrapperClasses:
	font_2 font_medium grid p-x_4 p-y_5 template-x_30 texture_light

Weight: 151

Styleguide Decorator.Background.Shadow

 */
.shadow_0 {
  box-shadow: 1.5px 1.5px 6px 0.75px rgba(0, 0, 0, 0.4);
}

.shadow_1 {
  box-shadow: 0.5px 0.5px 2px 0.25px rgba(0, 0, 0, 0.1);
}

.shadow_2 {
  box-shadow: 1px 1px 4px 0.5px rgba(0, 0, 0, 0.2);
}

.shadow_3 {
  box-shadow: 1.5px 1.5px 6px 0.75px rgba(0, 0, 0, 0.3);
}

.shadow_4 {
  box-shadow: 1.75px 1.75px 7px 0.875px rgba(0, 0, 0, 0.5);
}

.shadow_5 {
  box-shadow: 2px 2px 8px 1px rgba(0, 0, 0, 0.65);
}

.shadow_n1 {
  box-shadow: inset 0.5px 0.5px 2px 0.25px rgba(0, 0, 0, 0.1);
}

.shadow_n2 {
  box-shadow: inset 1px 1px 4px 0.5px rgba(0, 0, 0, 0.2);
}

.shadow_n3 {
  box-shadow: inset 1.5px 1.5px 6px 0.75px rgba(0, 0, 0, 0.3);
}

.shadow_n4 {
  box-shadow: inset 1.75px 1.75px 7px 0.875px rgba(0, 0, 0, 0.5);
}

.shadow_n5 {
  box-shadow: inset 2px 2px 8px 1px rgba(0, 0, 0, 0.65);
}

.shadow_emboss-light {
  box-shadow: inset 1px 1px 2px 0px rgba(0 0 0 / 6%),inset 2px 2px 3px 0px rgba(18 56 136/4.5%),inset -2px -2px 3px 0px rgba(145 112 19/ 4.5%);
}

.shadow_emboss-bold {
  box-shadow: inset 0 0 4px 0 rgba(0 0 0/17%), inset 0 0 6px 0 rgba(0 0 0/17%), inset 2px 5px 4px 2px rgba(0 0 0/5%), inset 3px 2px 5px 4px rgb(0 0 0/4%);
}

.shadow_bevel-light {
  box-shadow: -2px -2px 3px 0px rgba(255 255 255/ 7% ), -1px -1px 2px 0px rgba(240 194 67/ 5% ), 2px 3px 5px 0px rgba(0 0 0 / 7%), 0 6px 9px 0px rgba(18 56 136 / 5%), 0 8px 9px 0px rgba(0 0 0 / 2%)  ;
}

.shadow_bevel-bold {
  box-shadow: 1px 2.5px 4.5px rgba(0 0 0 /17%), -2px -2px 3px 0px rgba(255 255 255/ 14% ), -1px -1px 2px 0px rgba(240 194 67/ 5% ), 2px 3px 5px 0px rgba(0 0 0 / 12%), 0 6px 9px 0px rgba(18 56 136 / 9%), 0 16px 9px 0px rgba(0 0 0 / 6%);
}

.shadow_overlap-light {
  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%);
}

.shadow_overlap-bold {
  box-shadow: -1px -2px 4px rgba(0 0 0 / 11% ), 0 4px 10px rgba(0 0 0 / 10%), 2px 2px 4px rgba(0 0 0 /24%), 2px 5px 10px rgba(18 56 136 / 10%);
}

/*
Background 

Background of containers can be easily maniputlated with textures, colors, and shadows.  

Weight: 120

Styleguide Decorator.Background
*/
/* No styleguide reference. */
/*
  Background Colors

  Background colors can be easily change with bg_`color-name`  

  bg_primary              - background using primary color
  bg_secondary            - background using secondary color
  bg_shade                - background using shade color
  bg_alert                - background using alert color
  bg_warning              - background using warning color
  bg_success              - background using success color
  bg_info                 - background using info color
  bg_highlight            - background using highlight color  

  Weight: -100

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

  MarkupWrapperClasses:
  grid template-x_30

  Styleguide Decorator.Background.Color

 */
/*
  Background Color Tint

  <div>Background colors can be shifted by appending a modifier of n5 through 5.  The negative(n) numbers mix the color with black and the positive numbers mix the color with white.<table><thead><tr><th>Classes</th><th>Effect</th></tr></thead><tbody><tr><td>.bg_(color)-0, .bg_(color)</td><td>pure color</td></tr><tr><td>.bg_(color)-1</td><td>color with 15% white mixed in</td></tr><tr><td>.bg_(color)-2</td><td>color with 37% white mixed in</td></tr><tr><td>.bg_(color)-3</td><td>color with 60% white mixed in</td></tr><tr><td>.bg_(color)-4</td><td>color with 78% white mixed in</td></tr><tr><td>.bg_(color)-5</td><td>color with 90% white mixed in</td></tr><tr><td>.bg_(color)-n1</td><td>color with 10% black mixed in</td></tr><tr><td>.bg_(color)-n2</td><td>color with 25% black mixed in</td></tr><tr><td>.bg_(color)-n3</td><td>color with 45% black mixed in</td></tr><tr><td>.bg_(color)-n4</td><td>color with 58% black mixed in</td></tr><tr><td>.bg_(color)-n5</td><td>color with 75% black mixed in</td></tr></tbody></table></div>  

  bg_primary              - background using primary color
  bg_secondary            - background using secondary color
  bg_shade                - background using shade color
  bg_alert                - background using alert color
  bg_warning              - background using warning color
  bg_success              - background using success color
  bg_info                 - background using info color
  bg_highlight            - background using highlight color  

    Weight: -50

  Markup:
  <div class="bg_white flex_auto text_center p_2 p-y_5 ">white</div>
  <div class="{{modifier_class}}-5 flex_auto text_center  p_2 p-y_5">5</div>
  <div class="{{modifier_class}}-4 flex_auto text_center  p_2 p-y_5">4</div>
  <div class="{{modifier_class}}-3 flex_auto text_center  p_2 p-y_5">3</div>
  <div class="{{modifier_class}}-2 flex_auto text_center  p_2 p-y_5">2</div>
  <div class="{{modifier_class}}-1 flex_auto text_center  c_white p_2 p-y_5">1</div>
  <div class="{{modifier_class}}-0 flex_auto text_center  c_white p_2 p-y_5">0</div>
  <div class="{{modifier_class}}-n1 flex_auto text_center  c_white p_2 p-y_5">n1</div>
  <div class="{{modifier_class}}-n2 flex_auto text_center  c_white p_2 p-y_5">n2</div>
  <div class="{{modifier_class}}-n3 flex_auto text_center  c_white p_2 p-y_5">n3</div>
  <div class="{{modifier_class}}-n4 flex_auto text_center  c_white p_2 p-y_5">n4</div>
  <div class="{{modifier_class}}-n5 flex_auto text_center  c_white p_2 p-y_5">n5</div>
  <div class="bg_black flex_auto text_center  c_white p_2 p-y_5">black</div>


  MarkupWrapperClasses:
  flex flex_row bg_shade-5 p_2 texture_light

  Styleguide Decorator.Background.Color.Shades

 */
.bg_transparent {
  background-color: transparent !important;
}

@media only screen and (width > 768px) {
  .bg_transparent {
    background-color: transparent !important;
  }
}
@media only screen and (width > 1024px) {
  .bg_transparent {
    background-color: transparent !important;
  }
}

.bg_primary, .btn_acc-primary,.bg_primary-0 {
  background-color: var(--primary) !important;
}

.bg_primary-1 {
  background-color: hsla(var(--primary-h), calc(var(--primary-s) - var(--primary-s) * 0.05), calc(var(--primary-l) + (100% - var(--primary-l)) * 0.1), 1) !important;
}

.bg_primary-2 {
  background-color: hsla(var(--primary-h), calc(var(--primary-s) - var(--primary-s) * 0.125), calc(var(--primary-l) + (100% - var(--primary-l)) * 0.25), 1) !important;
}

.bg_primary-3 {
  background-color: hsla(var(--primary-h), calc(var(--primary-s) - var(--primary-s) * 0.25), calc(var(--primary-l) + (100% - var(--primary-l)) * 0.5), 1) !important;
}

.bg_primary-4 {
  background-color: hsla(var(--primary-h), calc(var(--primary-s) - var(--primary-s) * 0.375), calc(var(--primary-l) + (100% - var(--primary-l)) * 0.75), 1) !important;
}

.bg_primary-5 {
  background-color: hsla(var(--primary-h), calc(var(--primary-s) - var(--primary-s) * 0.45), calc(var(--primary-l) + (100% - var(--primary-l)) * 0.9), 1) !important;
}

.bg_primary-n1 {
  background-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) !important;
}

.bg_primary-n2 {
  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) !important;
}

.bg_primary-n3 {
  background-color: hsla(var(--primary-h), calc(var(--primary-s) + (100% - var(--primary-s)) * 0.05), calc(var(--primary-l) - var(--primary-l) * 0.5), 1) !important;
}

.bg_primary-n4 {
  background-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) !important;
}

.bg_primary-n5 {
  background-color: hsla(var(--primary-h), calc(var(--primary-s) + (100% - var(--primary-s)) * 0.085), calc(var(--primary-l) - var(--primary-l) * 0.85), 1) !important;
}

.bg_secondary,.bg_secondary-0 {
  background-color: var(--secondary) !important;
}

.bg_secondary-1 {
  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) !important;
}

.bg_secondary-2 {
  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) !important;
}

.bg_secondary-3 {
  background-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) !important;
}

.bg_secondary-4 {
  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) !important;
}

.bg_secondary-5 {
  background-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) !important;
}

.bg_secondary-n1 {
  background-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) !important;
}

.bg_secondary-n2 {
  background-color: hsla(var(--secondary-h), calc(var(--secondary-s) + (100% - var(--secondary-s)) * 0.03), calc(var(--secondary-l) - var(--secondary-l) * 0.3), 1) !important;
}

.bg_secondary-n3 {
  background-color: hsla(var(--secondary-h), calc(var(--secondary-s) + (100% - var(--secondary-s)) * 0.05), calc(var(--secondary-l) - var(--secondary-l) * 0.5), 1) !important;
}

.bg_secondary-n4 {
  background-color: hsla(var(--secondary-h), calc(var(--secondary-s) + (100% - var(--secondary-s)) * 0.07), calc(var(--secondary-l) - var(--secondary-l) * 0.7), 1) !important;
}

.bg_secondary-n5 {
  background-color: hsla(var(--secondary-h), calc(var(--secondary-s) + (100% - var(--secondary-s)) * 0.085), calc(var(--secondary-l) - var(--secondary-l) * 0.85), 1) !important;
}

.bg_success,.bg_success-0 {
  background-color: var(--success) !important;
}

.bg_success-1 {
  background-color: hsla(var(--success-h), calc(var(--success-s) - var(--success-s) * 0.05), calc(var(--success-l) + (100% - var(--success-l)) * 0.1), 1) !important;
}

.bg_success-2 {
  background-color: hsla(var(--success-h), calc(var(--success-s) - var(--success-s) * 0.125), calc(var(--success-l) + (100% - var(--success-l)) * 0.25), 1) !important;
}

.bg_success-3 {
  background-color: hsla(var(--success-h), calc(var(--success-s) - var(--success-s) * 0.25), calc(var(--success-l) + (100% - var(--success-l)) * 0.5), 1) !important;
}

.bg_success-4 {
  background-color: hsla(var(--success-h), calc(var(--success-s) - var(--success-s) * 0.375), calc(var(--success-l) + (100% - var(--success-l)) * 0.75), 1) !important;
}

.bg_success-5 {
  background-color: hsla(var(--success-h), calc(var(--success-s) - var(--success-s) * 0.45), calc(var(--success-l) + (100% - var(--success-l)) * 0.9), 1) !important;
}

.bg_success-n1 {
  background-color: hsla(var(--success-h), calc(var(--success-s) + (100% - var(--success-s)) * 0.015), calc(var(--success-l) - var(--success-l) * 0.15), 1) !important;
}

.bg_success-n2 {
  background-color: hsla(var(--success-h), calc(var(--success-s) + (100% - var(--success-s)) * 0.03), calc(var(--success-l) - var(--success-l) * 0.3), 1) !important;
}

.bg_success-n3 {
  background-color: hsla(var(--success-h), calc(var(--success-s) + (100% - var(--success-s)) * 0.05), calc(var(--success-l) - var(--success-l) * 0.5), 1) !important;
}

.bg_success-n4 {
  background-color: hsla(var(--success-h), calc(var(--success-s) + (100% - var(--success-s)) * 0.07), calc(var(--success-l) - var(--success-l) * 0.7), 1) !important;
}

.bg_success-n5 {
  background-color: hsla(var(--success-h), calc(var(--success-s) + (100% - var(--success-s)) * 0.085), calc(var(--success-l) - var(--success-l) * 0.85), 1) !important;
}

.bg_shade,.bg_shade-0 {
  background-color: var(--shade) !important;
}

.bg_shade-1 {
  background-color: hsla(var(--shade-h), calc(var(--shade-s) - var(--shade-s) * 0.05), calc(var(--shade-l) + (100% - var(--shade-l)) * 0.1), 1) !important;
}

.bg_shade-2 {
  background-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) !important;
}

.bg_shade-3 {
  background-color: hsla(var(--shade-h), calc(var(--shade-s) - var(--shade-s) * 0.25), calc(var(--shade-l) + (100% - var(--shade-l)) * 0.5), 1) !important;
}

.bg_shade-4 {
  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) !important;
}

.bg_shade-5 {
  background-color: hsla(var(--shade-h), calc(var(--shade-s) - var(--shade-s) * 0.45), calc(var(--shade-l) + (100% - var(--shade-l)) * 0.9), 1) !important;
}

.bg_shade-n1 {
  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) !important;
}

.bg_shade-n2 {
  background-color: hsla(var(--shade-h), calc(var(--shade-s) + (100% - var(--shade-s)) * 0.03), calc(var(--shade-l) - var(--shade-l) * 0.3), 1) !important;
}

.bg_shade-n3 {
  background-color: hsla(var(--shade-h), calc(var(--shade-s) + (100% - var(--shade-s)) * 0.05), calc(var(--shade-l) - var(--shade-l) * 0.5), 1) !important;
}

.bg_shade-n4 {
  background-color: hsla(var(--shade-h), calc(var(--shade-s) + (100% - var(--shade-s)) * 0.07), calc(var(--shade-l) - var(--shade-l) * 0.7), 1) !important;
}

.bg_shade-n5 {
  background-color: hsla(var(--shade-h), calc(var(--shade-s) + (100% - var(--shade-s)) * 0.085), calc(var(--shade-l) - var(--shade-l) * 0.85), 1) !important;
}

.bg_warning,.bg_warning-0 {
  background-color: var(--warning) !important;
}

.bg_warning-1 {
  background-color: hsla(var(--warning-h), calc(var(--warning-s) - var(--warning-s) * 0.05), calc(var(--warning-l) + (100% - var(--warning-l)) * 0.1), 1) !important;
}

.bg_warning-2 {
  background-color: hsla(var(--warning-h), calc(var(--warning-s) - var(--warning-s) * 0.125), calc(var(--warning-l) + (100% - var(--warning-l)) * 0.25), 1) !important;
}

.bg_warning-3 {
  background-color: hsla(var(--warning-h), calc(var(--warning-s) - var(--warning-s) * 0.25), calc(var(--warning-l) + (100% - var(--warning-l)) * 0.5), 1) !important;
}

.bg_warning-4 {
  background-color: hsla(var(--warning-h), calc(var(--warning-s) - var(--warning-s) * 0.375), calc(var(--warning-l) + (100% - var(--warning-l)) * 0.75), 1) !important;
}

.bg_warning-5 {
  background-color: hsla(var(--warning-h), calc(var(--warning-s) - var(--warning-s) * 0.45), calc(var(--warning-l) + (100% - var(--warning-l)) * 0.9), 1) !important;
}

.bg_warning-n1 {
  background-color: hsla(var(--warning-h), calc(var(--warning-s) + (100% - var(--warning-s)) * 0.015), calc(var(--warning-l) - var(--warning-l) * 0.15), 1) !important;
}

.bg_warning-n2 {
  background-color: hsla(var(--warning-h), calc(var(--warning-s) + (100% - var(--warning-s)) * 0.03), calc(var(--warning-l) - var(--warning-l) * 0.3), 1) !important;
}

.bg_warning-n3 {
  background-color: hsla(var(--warning-h), calc(var(--warning-s) + (100% - var(--warning-s)) * 0.05), calc(var(--warning-l) - var(--warning-l) * 0.5), 1) !important;
}

.bg_warning-n4 {
  background-color: hsla(var(--warning-h), calc(var(--warning-s) + (100% - var(--warning-s)) * 0.07), calc(var(--warning-l) - var(--warning-l) * 0.7), 1) !important;
}

.bg_warning-n5 {
  background-color: hsla(var(--warning-h), calc(var(--warning-s) + (100% - var(--warning-s)) * 0.085), calc(var(--warning-l) - var(--warning-l) * 0.85), 1) !important;
}

.bg_alert,.bg_alert-0 {
  background-color: var(--alert) !important;
}

.bg_alert-1 {
  background-color: hsla(var(--alert-h), calc(var(--alert-s) - var(--alert-s) * 0.05), calc(var(--alert-l) + (100% - var(--alert-l)) * 0.1), 1) !important;
}

.bg_alert-2 {
  background-color: hsla(var(--alert-h), calc(var(--alert-s) - var(--alert-s) * 0.125), calc(var(--alert-l) + (100% - var(--alert-l)) * 0.25), 1) !important;
}

.bg_alert-3 {
  background-color: hsla(var(--alert-h), calc(var(--alert-s) - var(--alert-s) * 0.25), calc(var(--alert-l) + (100% - var(--alert-l)) * 0.5), 1) !important;
}

.bg_alert-4 {
  background-color: hsla(var(--alert-h), calc(var(--alert-s) - var(--alert-s) * 0.375), calc(var(--alert-l) + (100% - var(--alert-l)) * 0.75), 1) !important;
}

.bg_alert-5 {
  background-color: hsla(var(--alert-h), calc(var(--alert-s) - var(--alert-s) * 0.45), calc(var(--alert-l) + (100% - var(--alert-l)) * 0.9), 1) !important;
}

.bg_alert-n1 {
  background-color: hsla(var(--alert-h), calc(var(--alert-s) + (100% - var(--alert-s)) * 0.015), calc(var(--alert-l) - var(--alert-l) * 0.15), 1) !important;
}

.bg_alert-n2 {
  background-color: hsla(var(--alert-h), calc(var(--alert-s) + (100% - var(--alert-s)) * 0.03), calc(var(--alert-l) - var(--alert-l) * 0.3), 1) !important;
}

.bg_alert-n3 {
  background-color: hsla(var(--alert-h), calc(var(--alert-s) + (100% - var(--alert-s)) * 0.05), calc(var(--alert-l) - var(--alert-l) * 0.5), 1) !important;
}

.bg_alert-n4 {
  background-color: hsla(var(--alert-h), calc(var(--alert-s) + (100% - var(--alert-s)) * 0.07), calc(var(--alert-l) - var(--alert-l) * 0.7), 1) !important;
}

.bg_alert-n5 {
  background-color: hsla(var(--alert-h), calc(var(--alert-s) + (100% - var(--alert-s)) * 0.085), calc(var(--alert-l) - var(--alert-l) * 0.85), 1) !important;
}

.bg_navigation,.bg_navigation-0 {
  background-color: var(--navigation) !important;
}

.bg_navigation-1 {
  background-color: hsla(var(--navigation-h), calc(var(--navigation-s) - var(--navigation-s) * 0.05), calc(var(--navigation-l) + (100% - var(--navigation-l)) * 0.1), 1) !important;
}

.bg_navigation-2 {
  background-color: hsla(var(--navigation-h), calc(var(--navigation-s) - var(--navigation-s) * 0.125), calc(var(--navigation-l) + (100% - var(--navigation-l)) * 0.25), 1) !important;
}

.bg_navigation-3 {
  background-color: hsla(var(--navigation-h), calc(var(--navigation-s) - var(--navigation-s) * 0.25), calc(var(--navigation-l) + (100% - var(--navigation-l)) * 0.5), 1) !important;
}

.bg_navigation-4 {
  background-color: hsla(var(--navigation-h), calc(var(--navigation-s) - var(--navigation-s) * 0.375), calc(var(--navigation-l) + (100% - var(--navigation-l)) * 0.75), 1) !important;
}

.bg_navigation-5 {
  background-color: hsla(var(--navigation-h), calc(var(--navigation-s) - var(--navigation-s) * 0.45), calc(var(--navigation-l) + (100% - var(--navigation-l)) * 0.9), 1) !important;
}

.bg_navigation-n1 {
  background-color: hsla(var(--navigation-h), calc(var(--navigation-s) + (100% - var(--navigation-s)) * 0.015), calc(var(--navigation-l) - var(--navigation-l) * 0.15), 1) !important;
}

.bg_navigation-n2 {
  background-color: hsla(var(--navigation-h), calc(var(--navigation-s) + (100% - var(--navigation-s)) * 0.03), calc(var(--navigation-l) - var(--navigation-l) * 0.3), 1) !important;
}

.bg_navigation-n3 {
  background-color: hsla(var(--navigation-h), calc(var(--navigation-s) + (100% - var(--navigation-s)) * 0.05), calc(var(--navigation-l) - var(--navigation-l) * 0.5), 1) !important;
}

.bg_navigation-n4 {
  background-color: hsla(var(--navigation-h), calc(var(--navigation-s) + (100% - var(--navigation-s)) * 0.07), calc(var(--navigation-l) - var(--navigation-l) * 0.7), 1) !important;
}

.bg_navigation-n5 {
  background-color: hsla(var(--navigation-h), calc(var(--navigation-s) + (100% - var(--navigation-s)) * 0.085), calc(var(--navigation-l) - var(--navigation-l) * 0.85), 1) !important;
}

.bg_accent,.bg_accent-0 {
  background-color: var(--accent) !important;
}

.bg_accent-1 {
  background-color: hsla(var(--accent-h), calc(var(--accent-s) - var(--accent-s) * 0.05), calc(var(--accent-l) + (100% - var(--accent-l)) * 0.1), 1) !important;
}

.bg_accent-2 {
  background-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) !important;
}

.bg_accent-3 {
  background-color: hsla(var(--accent-h), calc(var(--accent-s) - var(--accent-s) * 0.25), calc(var(--accent-l) + (100% - var(--accent-l)) * 0.5), 1) !important;
}

.bg_accent-4 {
  background-color: hsla(var(--accent-h), calc(var(--accent-s) - var(--accent-s) * 0.375), calc(var(--accent-l) + (100% - var(--accent-l)) * 0.75), 1) !important;
}

.bg_accent-5 {
  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) !important;
}

.bg_accent-n1 {
  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) !important;
}

.bg_accent-n2 {
  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) !important;
}

.bg_accent-n3 {
  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) !important;
}

.bg_accent-n4 {
  background-color: hsla(var(--accent-h), calc(var(--accent-s) + (100% - var(--accent-s)) * 0.07), calc(var(--accent-l) - var(--accent-l) * 0.7), 1) !important;
}

.bg_accent-n5 {
  background-color: hsla(var(--accent-h), calc(var(--accent-s) + (100% - var(--accent-s)) * 0.085), calc(var(--accent-l) - var(--accent-l) * 0.85), 1) !important;
}

.bg_info,.bg_info-0 {
  background-color: var(--info) !important;
}

.bg_info-1 {
  background-color: hsla(var(--info-h), calc(var(--info-s) - var(--info-s) * 0.05), calc(var(--info-l) + (100% - var(--info-l)) * 0.1), 1) !important;
}

.bg_info-2 {
  background-color: hsla(var(--info-h), calc(var(--info-s) - var(--info-s) * 0.125), calc(var(--info-l) + (100% - var(--info-l)) * 0.25), 1) !important;
}

.bg_info-3 {
  background-color: hsla(var(--info-h), calc(var(--info-s) - var(--info-s) * 0.25), calc(var(--info-l) + (100% - var(--info-l)) * 0.5), 1) !important;
}

.bg_info-4 {
  background-color: hsla(var(--info-h), calc(var(--info-s) - var(--info-s) * 0.375), calc(var(--info-l) + (100% - var(--info-l)) * 0.75), 1) !important;
}

.bg_info-5 {
  background-color: hsla(var(--info-h), calc(var(--info-s) - var(--info-s) * 0.45), calc(var(--info-l) + (100% - var(--info-l)) * 0.9), 1) !important;
}

.bg_info-n1 {
  background-color: hsla(var(--info-h), calc(var(--info-s) + (100% - var(--info-s)) * 0.015), calc(var(--info-l) - var(--info-l) * 0.15), 1) !important;
}

.bg_info-n2 {
  background-color: hsla(var(--info-h), calc(var(--info-s) + (100% - var(--info-s)) * 0.03), calc(var(--info-l) - var(--info-l) * 0.3), 1) !important;
}

.bg_info-n3 {
  background-color: hsla(var(--info-h), calc(var(--info-s) + (100% - var(--info-s)) * 0.05), calc(var(--info-l) - var(--info-l) * 0.5), 1) !important;
}

.bg_info-n4 {
  background-color: hsla(var(--info-h), calc(var(--info-s) + (100% - var(--info-s)) * 0.07), calc(var(--info-l) - var(--info-l) * 0.7), 1) !important;
}

.bg_info-n5 {
  background-color: hsla(var(--info-h), calc(var(--info-s) + (100% - var(--info-s)) * 0.085), calc(var(--info-l) - var(--info-l) * 0.85), 1) !important;
}

.bg_highlight,.bg_highlight-0 {
  background-color: var(--highlight) !important;
}

.bg_highlight-1 {
  background-color: hsla(var(--highlight-h), calc(var(--highlight-s) - var(--highlight-s) * 0.05), calc(var(--highlight-l) + (100% - var(--highlight-l)) * 0.1), 1) !important;
}

.bg_highlight-2 {
  background-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) !important;
}

.bg_highlight-3 {
  background-color: hsla(var(--highlight-h), calc(var(--highlight-s) - var(--highlight-s) * 0.25), calc(var(--highlight-l) + (100% - var(--highlight-l)) * 0.5), 1) !important;
}

.bg_highlight-4 {
  background-color: hsla(var(--highlight-h), calc(var(--highlight-s) - var(--highlight-s) * 0.375), calc(var(--highlight-l) + (100% - var(--highlight-l)) * 0.75), 1) !important;
}

.bg_highlight-5 {
  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) !important;
}

.bg_highlight-n1 {
  background-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) !important;
}

.bg_highlight-n2 {
  background-color: hsla(var(--highlight-h), calc(var(--highlight-s) + (100% - var(--highlight-s)) * 0.03), calc(var(--highlight-l) - var(--highlight-l) * 0.3), 1) !important;
}

.bg_highlight-n3 {
  background-color: hsla(var(--highlight-h), calc(var(--highlight-s) + (100% - var(--highlight-s)) * 0.05), calc(var(--highlight-l) - var(--highlight-l) * 0.5), 1) !important;
}

.bg_highlight-n4 {
  background-color: hsla(var(--highlight-h), calc(var(--highlight-s) + (100% - var(--highlight-s)) * 0.07), calc(var(--highlight-l) - var(--highlight-l) * 0.7), 1) !important;
}

.bg_highlight-n5 {
  background-color: hsla(var(--highlight-h), calc(var(--highlight-s) + (100% - var(--highlight-s)) * 0.085), calc(var(--highlight-l) - var(--highlight-l) * 0.85), 1) !important;
}

.bg_acc,.bg_acc-0 {
  background-color: var(--acc) !important;
}

.bg_acc-1 {
  background-color: hsla(var(--acc-h), calc(var(--acc-s) - var(--acc-s) * 0.05), calc(var(--acc-l) + (100% - var(--acc-l)) * 0.1), 1) !important;
}

.bg_acc-2 {
  background-color: hsla(var(--acc-h), calc(var(--acc-s) - var(--acc-s) * 0.125), calc(var(--acc-l) + (100% - var(--acc-l)) * 0.25), 1) !important;
}

.bg_acc-3 {
  background-color: hsla(var(--acc-h), calc(var(--acc-s) - var(--acc-s) * 0.25), calc(var(--acc-l) + (100% - var(--acc-l)) * 0.5), 1) !important;
}

.bg_acc-4 {
  background-color: hsla(var(--acc-h), calc(var(--acc-s) - var(--acc-s) * 0.375), calc(var(--acc-l) + (100% - var(--acc-l)) * 0.75), 1) !important;
}

.bg_acc-5 {
  background-color: hsla(var(--acc-h), calc(var(--acc-s) - var(--acc-s) * 0.45), calc(var(--acc-l) + (100% - var(--acc-l)) * 0.9), 1) !important;
}

.bg_acc-n1 {
  background-color: hsla(var(--acc-h), calc(var(--acc-s) + (100% - var(--acc-s)) * 0.015), calc(var(--acc-l) - var(--acc-l) * 0.15), 1) !important;
}

.bg_acc-n2 {
  background-color: hsla(var(--acc-h), calc(var(--acc-s) + (100% - var(--acc-s)) * 0.03), calc(var(--acc-l) - var(--acc-l) * 0.3), 1) !important;
}

.bg_acc-n3 {
  background-color: hsla(var(--acc-h), calc(var(--acc-s) + (100% - var(--acc-s)) * 0.05), calc(var(--acc-l) - var(--acc-l) * 0.5), 1) !important;
}

.bg_acc-n4 {
  background-color: hsla(var(--acc-h), calc(var(--acc-s) + (100% - var(--acc-s)) * 0.07), calc(var(--acc-l) - var(--acc-l) * 0.7), 1) !important;
}

.bg_acc-n5 {
  background-color: hsla(var(--acc-h), calc(var(--acc-s) + (100% - var(--acc-s)) * 0.085), calc(var(--acc-l) - var(--acc-l) * 0.85), 1) !important;
}

.bg_white {
  background-color: rgb(255, 255, 255);
}

.bg_black {
  background-color: rgb(19, 18, 18);
}

.bg_black-0 {
  background-color: rgba(19, 18, 18, 0) !important;
}

.bg_black-_01 {
  background-color: rgba(19, 18, 18, 0.005) !important;
}

.bg_black-_05 {
  background-color: rgba(19, 18, 18, 0.0075) !important;
}

.bg_black-1 {
  background-color: rgba(19, 18, 18, 0.025) !important;
}

.bg_black-2 {
  background-color: rgba(19, 18, 18, 0.1) !important;
}

.bg_black-3, .btn.disabled, button.btn.disabled, input[type=button].btn.disabled, input[type=reset].btn.disabled, input[type=submit].btn.disabled, .btn_acc-primary.disabled {
  background-color: rgba(19, 18, 18, 0.25) !important;
}

.bg_black-4 {
  background-color: rgba(19, 18, 18, 0.38) !important;
}

.bg_black-5 {
  background-color: rgba(19, 18, 18, 0.5) !important;
}

.bg_black-6 {
  background-color: rgba(19, 18, 18, 0.62) !important;
}

.bg_black-7 {
  background-color: rgba(19, 18, 18, 0.75) !important;
}

.bg_black-8 {
  background-color: rgba(19, 18, 18, 0.9) !important;
}

.bg_black-9 {
  background-color: rgba(19, 18, 18, 0.975) !important;
}

.bg_black-none {
  background-color: #131212 !important;
}

.bg_white-0 {
  background-color: rgba(255, 255, 255, 0) !important;
}

.bg_white-_01 {
  background-color: rgba(255, 255, 255, 0.005) !important;
}

.bg_white-_05 {
  background-color: rgba(255, 255, 255, 0.0075) !important;
}

.bg_white-1 {
  background-color: rgba(255, 255, 255, 0.025) !important;
}

.bg_white-2 {
  background-color: rgba(255, 255, 255, 0.1) !important;
}

.bg_white-3 {
  background-color: rgba(255, 255, 255, 0.25) !important;
}

.bg_white-4 {
  background-color: rgba(255, 255, 255, 0.38) !important;
}

.bg_white-5 {
  background-color: rgba(255, 255, 255, 0.5) !important;
}

.bg_white-6 {
  background-color: rgba(255, 255, 255, 0.62) !important;
}

.bg_white-7 {
  background-color: rgba(255, 255, 255, 0.75) !important;
}

.bg_white-8 {
  background-color: rgba(255, 255, 255, 0.9) !important;
}

.bg_white-9 {
  background-color: rgba(255, 255, 255, 0.975) !important;
}

.bg_white-none {
  background-color: white !important;
}

/*
  Background Colors Alpha

  Background colors of white and black can be shifted by appending a modifier bg_{{color-name}}-{{0 to 9}} to shift its transparency

  black              - background color of black modified with alphas
  white              - background color of white modified with alphas

  Markup:
  <div class="bg_{{modifier_class}}-0 flex_auto text_center c_white  p_2 p-y_5">{{modifier_class}}-0</div>
  <div class="bg_{{modifier_class}}-1 flex_auto text_center c_white  p_2 p-y_5">{{modifier_class}}-1</div>
  <div class="bg_{{modifier_class}}-2 flex_auto text_center c_white  p_2 p-y_5">{{modifier_class}}-2</div>
  <div class="bg_{{modifier_class}}-3 flex_auto text_center c_white  p_2 p-y_5">{{modifier_class}}-3</div>
  <div class="bg_{{modifier_class}}-4 flex_auto text_center c_white p_2 p-y_5">{{modifier_class}}-4</div>
  <div class="bg_{{modifier_class}}-5 flex_auto text_center c_white p_2 p-y_5">{{modifier_class}}-5</div>
  <div class="bg_{{modifier_class}}-6 flex_auto text_center c_white p_2 p-y_5">{{modifier_class}}-6</div>
  <div class="bg_{{modifier_class}}-7 flex_auto text_center c_white p_2 p-y_5">{{modifier_class}}-7</div>
  <div class="bg_{{modifier_class}}-8 flex_auto text_center c_white p_2 p-y_5">{{modifier_class}}-8</div>
  <div class="bg_{{modifier_class}}-9 flex_auto text_center c_white p_2 p-y_5">{{modifier_class}}-9</div>
  <div class="bg_{{modifier_class}} flex_auto text_center c_white p_2 p-y_5">{{modifier_class}}</div>


  MarkupWrapperClasses:
  flex p_4 bg_primary

  Styleguide Decorator.Background.Color.With Alphas

 */
/*
Background Position

For many images you will need top place background images in to a cardnial location.

.bg_left	            - cardnial left
.bg_top	            - cardnial top
.bg_right	          - cardnial right
.bg_bottom           - cardnial bottom
.bg_center           - cardnial center center

Markup:
<div class="{{modifier_class}} seal_tiny" style="height:200px;max-width: unset;background-size: 100px;"><span class="alt">{{modifier_class}}</span></div>

MarkupWrapperClasses:
bg_shade-2 max-w_40 br_solid br_primary br_1

Styleguide Decorator.Background.Image Positon

*/
.bg_left {
  background-position: left center !important;
}

.bg_right {
  background-position: right center !important;
}

.bg_top {
  background-position: center top !important;
}

.bg_bottom {
  background-position: center bottom !important;
}

.bg_center {
  background-position: center center !important;
}

/*
Background Size

For many images you will need top place background images in to a cardnial location.

.bg_unset	            - removes any css background size 
.bg_auto           - auto
.bg_cover	            - cover
.bg_contain	          - contain


Markup:
<div class="{{modifier_class}} seal_tiny" style="height:200px;max-width: unset;"><span class="alt">{{modifier_class}}</span></div>

MarkupWrapperClasses:
bg_shade-2 max-w_40 br_solid br_primary br_1

Styleguide Decorator.Background.Size

*/
.bg_unset {
  -o-object-fit: unset;
     object-fit: unset;
  background-size: unset;
}

.bg_auto {
  -o-object-fit: none;
     object-fit: none;
  background-size: auto;
}

.bg_cover {
  -o-object-fit: cover;
     object-fit: cover;
  background-size: cover;
}

.bg_contain {
  -o-object-fit: contain;
     object-fit: contain;
  background-size: contain;
}

/*
Background Repeat

repeating a background image is easy.

.bg_norepeat	            - norepeat 
.bg_repeat                - repeat
.bg_repeat-x              - repoeat-x
.bg_repeat-y              - repeat-y
.bg_repeat-space          - repeat-space

Markup:
<div class="{{modifier_class}} seal_tiny bg_auto" style="height:200px;max-width: unset;background-size: 100px;"><span class="alt">{{modifier_class}}</span></div>

MarkupWrapperClasses:
bg_shade-2 max-w_40 br_solid br_primary br_1



Styleguide Decorator.Background.Image Repeat

*/
.bg_no-repeat {
  background-repeat: no-repeat;
}

.bg_repeat {
  background-repeat: repeat;
}

.bg_repeat-x {
  background-repeat: repeat-x;
}

.bg_repeat-y {
  background-repeat: repeat-y;
}

.bg_repeat-space {
  background-repeat: space;
}

/*
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.  It is easy to apply textures using the texture utlities. 

.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 br_black-8 br_1 br_solid text_center">{{modifier_class}}</div>

Weight: 125

Styleguide Decorator.Background.Textures

 */
.texture_light {
  background-image: url("../img/whisper.png");
}

.texture_medium {
  background-image: url("../img/billie-holiday-speck.png");
}

.texture_dark {
  background-image: url("../img/cross_stripes.png");
}

.texture_dust {
  background-image: url("../img/dust.png");
}

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

.texture_cross {
  background-image: url("../img/cross_color.png");
}

.texture_dynamic {
  background-image: url("../img/connectwork.png");
}

/*
	Textures Plus Background Colors

	All textures are slightly transparent.  You can acheive different effects with using the combo of textures and background colors.  

	.texture_light.bg_primary              	- textures are slightly transparent so they can be colored with background-color classess
	.texture_dust.bg_primary              	- textures are slightly transparent so they can be colored with background-color classess
	.texture_medium.bg_primary              	- textures are slightly transparent so they can be colored with background-color classess
	.texture_dark.bg_primary              	- textures are slightly transparent so they can be colored with background-color classess
	.texture_light.bg_alert              		- textures are slightly transparent so they can be colored with background-color classess
	.texture_medium.bg_alert             		- textures are slightly transparent so they can be colored with background-color classess
	.texture_dust.bg_alert             		- textures are slightly transparent so they can be colored with background-color classess
	.texture_dark.bg_alert             		- textures are slightly transparent so they can be colored with background-color classess
	.texture_cross.bg_alert             		- textures are slightly transparent so they can be colored with background-color classess
	.texture_disabled.bg_alert             	- textures are slightly transparent so they can be colored with background-color classess

	Markup:
	<div class="{{modifier_class}} p_5 br_black-8 br_1 br_solid text_center">{{modifier_class}}</div>

	Styleguide Decorator.Background.Textures.BackgroundColor

 */
/*
	Textures Plus Background Shades

	All textures are slightly transparent.  You can further shade the background colors to achieve even more flexablity.  

	.texture_light.bg_primary              	- textures are slightly transparent so they can be colored with background-color classess
	.texture_dust.bg_primary              	- textures are slightly transparent so they can be colored with background-color classess
	.texture_medium.bg_primary              	- textures are slightly transparent so they can be colored with background-color classess
	.texture_dark.bg_primary              	- textures are slightly transparent so they can be colored with background-color classess
	.texture_light.bg_warning              		- textures are slightly transparent so they can be colored with background-color classess
	.texture_medium.bg_warning             		- textures are slightly transparent so they can be colored with background-color classess
	.texture_dust.bg_warning             		- textures are slightly transparent so they can be colored with background-color classess
	.texture_dark.bg_warning             		- textures are slightly transparent so they can be colored with background-color classess
	.texture_cross.bg_warning             		- textures are slightly transparent so they can be colored with background-color classess
	.texture_disabled.bg_warning             	- textures are slightly transparent so they can be colored with background-color classess

	Markup:
	<div class="flex">
		<div class="{{modifier_class}}-n3 p_3 flex_auto text_center c_white">n3</div>
		<div class="{{modifier_class}}-n1 p_3 flex_auto text_center c_white">n1</div>
		<div class="{{modifier_class}}-1 p_3 flex_auto text_center c_white">1</div>
		<div class="{{modifier_class}}-3 p_3 flex_auto text_center c_white">3</div>
	</div>

	Styleguide Decorator.Background.Textures.Shaded

 */
/*
Gradient

Simple Gradients that are either linear or radial. These gradients can be modified by passing in the css properties to change the start and end color and the direction the gradient is rendered. `style="--start-color:hexcolor;--end-color:hexcolor;--origin:top right"`<table><thead><tr><th>css property</th><th>definition</th><th>acceptable options</th></tr></thead><tbody><tr><td>--start-color</td><td>the starting color of the gradient or center color for radial</td><td>proper formatted color: hex, hsl, hsla, rgb, rgba</td></tr><tr><td>--end-color</td><td>the ending color or the outside color when radial</td><td>proper formatted color: hex, hsl, hsla, rgb, rgba</td></tr><tr><td>--origin</td><td>point in the container where the gradients starts</td><td>these words depend on the type of gradient</td></tr></tbody></table> 

Weight: 121

Styleguide Decorator.Background.Gradient
*/
:root {
  --start-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);
  --end-color: hsla(var(--acc-h), calc(var(--acc-s) + (100% - var(--acc-s)) * 0.015), calc(var(--acc-l) - var(--acc-l) * 0.15), 1);
  --origin:at top left;
}

.radial-gradient_custom {
  --origin:at top left;
  background-image: radial-gradient(var(--origin), var(--start-color), var(--end-color));
  background-color: var(--start-color);
}

.linear-gradient_custom {
  --origin:to top left;
  background-image: linear-gradient(var(--origin), var(--start-color), var(--end-color));
  background-color: var(--start-color);
}

/*
Linear Gradient

The default gradient is the ACC Blue to the Primary Color of the Brand. Pass in css properties to manipulate the colors you want to use. <a class="link" href="https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient" target="_blank">linear gradient css documentation</a>


<div class="linear-gradient_custom w_100 aspect_21x9 max-w_40 m_4 c_white grid items_center justify_center">Default Coloring</div>
<div class="linear-gradient_custom w_100 aspect_21x9 max-w_40 m_4 c_white grid items_center justify_center" style="--start-color:#b3318e;--end-color:#450c5a;--origin:to top right">Modified Coloring</div>

MarkupWrapperClasses:
flex flex_row bg_shade-5 p_2 texture_light

Weight: 1

Styleguide Decorator.Background.Gradient.linear
*/
/*
Radial Gradient

The default gradient is the ACC Blue to the Primary Color of the Brand. Pass in css properties to manipulate the colors you want to use.  <a class="link" href="https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/radial-gradient" target="_blank">radial gradient css documentation</a>


<div class="radial-gradient_custom w_100 aspect_21x9 max-w_40 m_4 c_white grid items_center justify_center">Default Coloring</div>
<div class="radial-gradient_custom w_100 aspect_21x9 max-w_40 m_4 c_white grid items_center justify_center" style="--start-color:#b3318e;--end-color:#450c5a;--origin:at top">Modified Coloring</div>

MarkupWrapperClasses:
flex flex_row bg_shade-5 p_2 texture_light

Weight: 2

Styleguide Decorator.Background.Gradient.Radial
*/
/*
Logos

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

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

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

MarkupWrapperClasses:
    bg_shade-2 max-w_40

Styleguide DesignBase.Logos

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

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

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

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

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

/*
Seals

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

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


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

MarkupWrapperClasses:
	bg_shade-2 max-w_40

Styleguide DesignBase.Seals

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

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

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

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

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

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

/*
Borders

Borders a complex utility that demands a combo UCs to acheive their effect. The three UCs that must be used in combo are `style`, `color`, and `width`.  To make an object with single black pixel border that is solid you would have to add '.br_solid.br_1.br_black' 

Weight: 125

Styleguide Decorator.Border

*/
/* No styleguide reference. */
/*
Style

Depends on base border module in _borders.css

.br_none           - makes a border none
.br_dotted         - makes a border dotted
.br_dashed         - makes a border dashed
.br_solid          - makes a border solid

Markup:
<div class="{{modifier_class}} br_black bw_1 p_3">{{modifier_class}} border</div>

Styleguide Decorator.Border.Style

*/
.br_inherit {
  border-color: inherit;
}

.br_none, .btn_acc-primary {
  border-style: none;
}

.br_solid {
  border-style: solid;
}

.br_dashed {
  border-style: dashed;
}

.br_dotted {
  border-style: dotted;
}

@media only screen and (width > 768px) {
  .br_none\:md {
    border-style: none;
  }
  .br_solid\:md {
    border-style: solid;
  }
  .br_dashed\:md {
    border-style: dashed;
  }
  .br_dotted\:md {
    border-style: dotted;
  }
}
@media only screen and (width > 1024px) {
  .br_none\:lg {
    border-style: none;
  }
  .br_solid\:lg {
    border-style: solid;
  }
  .br_dashed\:lg {
    border-style: dashed;
  }
  .br_dotted\:lg {
    border-style: dotted;
  }
}
/*
Color

Alter the border color of and object by adding the border color utitlity class.

br_primary              - border color
br_shade                - border color
br_alert                - border color
br_warning              - border color
br_info                 - border color
br_highlight            - border color


Markup:
<div class="{{modifier_class}} p_3 br_solid bw_3">{{modifier_class}} border</div>

Styleguide Decorator.Border.Colors

*/
/*
Color:Black with Alphas

Border black has attached alpha modifiers to allow for greater flexibility 

br_black             - border black with alpha of 100%
br_black-0             - border black with alpha of 2%
br_black-1             - border black with alpha of 10%
br_black-2             - border black with alpha of 20%
br_black-3             - border black with alpha of 30%
br_black-4             - border black with alpha of 40%
br_black-5             - border black with alpha of 50%
br_black-6             - border black with alpha of 60%
br_black-7             - border black with alpha of 70%
br_black-8             - border black with alpha of 80%
br_black-9             - border black with alpha of 90%

Markup:
<div class="{{modifier_class}} p_3 br_solid br_5 bg_primary-1 white">{{modifier_class}} border</div>

Styleguide Decorator.Border.Colors.Black

*/
/*
  Color: White with Alphas

  Border white has attached alpha modifiers to allow for greater flexablity 

  br_white             - border white with alpha of 100%
  br_white-0             - border white with alpha of 2%
  br_white-1             - border white with alpha of 90%
  br_white-2             - border white with alpha of 80%
  br_white-3             - border white with alpha of 70%
  br_white-4             - border white with alpha of 60%
  br_white-5             - border white with alpha of 50%
  br_white-6             - border white with alpha of 40%
  br_white-7             - border white with alpha of 30%
  br_white-8             - border white with alpha of 20%
  br_white-9             - border white with alpha of 10%

  Markup:
  <div class="{{modifier_class}} p_3 br_solid br_5 bg_primary-1 c_white">{{modifier_class}} border</div>

  Styleguide Decorator.Border.Colors.White

  */
.br_black-0 {
  border-color: rgba(19, 18, 18, 0) !important;
}

.br_black-_01 {
  border-color: rgba(19, 18, 18, 0.005) !important;
}

.br_black-_05 {
  border-color: rgba(19, 18, 18, 0.0075) !important;
}

.br_black-1 {
  border-color: rgba(19, 18, 18, 0.025) !important;
}

.br_black-2, .btn.disabled, button.btn.disabled, input[type=button].btn.disabled, input[type=reset].btn.disabled, input[type=submit].btn.disabled, .btn_acc-primary.disabled {
  border-color: rgba(19, 18, 18, 0.1) !important;
}

.br_black-3 {
  border-color: rgba(19, 18, 18, 0.25) !important;
}

.br_black-4 {
  border-color: rgba(19, 18, 18, 0.38) !important;
}

.br_black-5 {
  border-color: rgba(19, 18, 18, 0.5) !important;
}

.br_black-6 {
  border-color: rgba(19, 18, 18, 0.62) !important;
}

.br_black-7 {
  border-color: rgba(19, 18, 18, 0.75) !important;
}

.br_black-8 {
  border-color: rgba(19, 18, 18, 0.9) !important;
}

.br_black-9 {
  border-color: rgba(19, 18, 18, 0.975) !important;
}

.br_black-none {
  border-color: #131212 !important;
}

.br_white-0 {
  border-color: rgba(255, 255, 255, 0) !important;
}

.br_white-_01 {
  border-color: rgba(255, 255, 255, 0.005) !important;
}

.br_white-_05 {
  border-color: rgba(255, 255, 255, 0.0075) !important;
}

.br_white-1 {
  border-color: rgba(255, 255, 255, 0.025) !important;
}

.br_white-2 {
  border-color: rgba(255, 255, 255, 0.1) !important;
}

.br_white-3 {
  border-color: rgba(255, 255, 255, 0.25) !important;
}

.br_white-4 {
  border-color: rgba(255, 255, 255, 0.38) !important;
}

.br_white-5 {
  border-color: rgba(255, 255, 255, 0.5) !important;
}

.br_white-6 {
  border-color: rgba(255, 255, 255, 0.62) !important;
}

.br_white-7 {
  border-color: rgba(255, 255, 255, 0.75) !important;
}

.br_white-8 {
  border-color: rgba(255, 255, 255, 0.9) !important;
}

.br_white-9 {
  border-color: rgba(255, 255, 255, 0.975) !important;
}

.br_white-none {
  border-color: white !important;
}

.border_transparent {
  border-color: transparent;
}

/*
	Radius

	Apply border radius to objects by adding full or partial classes for border-radius

	br_square           - All square
	br_radius        - All with $global-radus
	br_round         - All corners with 99(px)
	br_circle          - All corders at 100%
	br-tl_square           - top left square
	br-tl_radius        - top left with $global-radus
	br-tl_round         - top left corners with 99(px)
	br-tl_circle          - top left corders at 100%
	br-bl_square           - bottom left square
	br-bl_radius        - bottom left with $global-radus
	br-bl_round         - bottom left corners with 99(px)
	br-bl_circle          - bottom left corders at 100%


	Markup:
	<div class="{{modifier_class}} p_3 br_black br_solid br_2">{{modifier_class}} border</div>

	Styleguide Decorator.Border.Radius

  */
.br_square {
  border-radius: 0px;
}

.br_radius, .btn_acc-primary {
  border-radius: 6px;
}

.br_round {
  border-radius: 25px;
}

.br_rounder {
  border-radius: 1.5rem;
}

.br_circle {
  border-radius: 100%;
}

.br-tr_square {
  border-top-right-radius: 0px;
}

.br-tr_radius {
  border-top-right-radius: 6px;
}

.br-tr_round {
  border-top-right-radius: 25px;
}

.br-tr_rounder {
  border-top-right-radius: 24px;
  border-top-right-radius: 1.5rem;
}

.br-tr_circle {
  border-top-right-radius: 100%;
}

.br-tl_square {
  border-top-left-radius: 0px;
}

.br-tl_radius {
  border-top-left-radius: 6px;
}

.br-tl_round {
  border-top-left-radius: 25px;
}

.br-tl_rounder {
  border-top-left-radius: 24px;
  border-top-left-radius: 1.5rem;
}

.br-tl_circle {
  border-top-left-radius: 100%;
}

.br-br_square {
  border-bottom-right-radius: 0px;
}

.br-br_radius {
  border-bottom-right-radius: 6px;
}

.br-br_round {
  border-bottom-right-radius: 25px;
}

.br-br_rounder {
  border-bottom-right-radius: 24px;
  border-bottom-right-radius: 1.5rem;
}

.br-br_circle {
  border-bottom-right-radius: 100%;
}

.br-bl_square {
  border-bottom-left-radius: 0px;
}

.br-bl_radius {
  border-bottom-left-radius: 6px;
}

.br-bl_round {
  border-bottom-left-radius: 25px;
}

.br-bl_rounder {
  border-bottom-left-radius: 24px;
  border-bottom-left-radius: 1.5rem;
}

.br-bl_circle {
  border-bottom-left-radius: 100%;
}

@media only screen and (width > 768px) {
  .br_square\:md {
    border-radius: 0px;
  }
  .br_radius\:md {
    border-radius: 6px;
  }
  .br_round\:md {
    border-radius: 25px;
  }
  .br_rounder\:md {
    border-radius: 1.5rem;
  }
  .br_circle\:md {
    border-radius: 100%;
  }
  .br-tr_square\:md {
    border-top-right-radius: 0px;
  }
  .br-tr_radius\:md {
    border-top-right-radius: 6px;
  }
  .br-tr_round\:md {
    border-top-right-radius: 25px;
  }
  .br-tr_rounder\:md {
    border-top-right-radius: 1.5rem;
  }
  .br-tr_circle\:md {
    border-top-right-radius: 100%;
  }
  .br-tl_square\:md {
    border-top-left-radius: 0px;
  }
  .br-tl_radius\:md {
    border-top-left-radius: 6px;
  }
  .br-tl_round\:md {
    border-top-left-radius: 25px;
  }
  .br-tl_rounder\:md {
    border-top-left-radius: 1.5rem;
  }
  .br-tl_circle\:md {
    border-top-left-radius: 100%;
  }
  .br-br_square\:md {
    border-bottom-right-radius: 0px;
  }
  .br-br_radius\:md {
    border-bottom-right-radius: 6px;
  }
  .br-br_round\:md {
    border-bottom-right-radius: 25px;
  }
  .br-br_rounder\:md {
    border-bottom-right-radius: 1.5rem;
  }
  .br-br_circle\:md {
    border-bottom-right-radius: 100%;
  }
  .br-bl_square\:md {
    border-bottom-left-radius: 0px;
  }
  .br-bl_radius\:md {
    border-bottom-left-radius: 6px;
  }
  .br-bl_round\:md {
    border-bottom-left-radius: 25px;
  }
  .br-bl_rounder\:md {
    border-bottom-left-radius: 1.5rem;
  }
  .br-bl_circle\:md {
    border-bottom-left-radius: 100%;
  }
}
@media only screen and (width > 1024px) {
  .br_square\:lg {
    border-radius: 0px;
  }
  .br_radius\:lg {
    border-radius: 6px;
  }
  .br_round\:lg {
    border-radius: 25px;
  }
  .br_rounder\:lg {
    border-radius: 1.5rem;
  }
  .br_circle\:lg {
    border-radius: 100%;
  }
  .br-tr_square\:lg {
    border-top-right-radius: 0px;
  }
  .br-tr_radius\:lg {
    border-top-right-radius: 6px;
  }
  .br-tr_round\:lg {
    border-top-right-radius: 25px;
  }
  .br-tr_rounder\:lg {
    border-top-right-radius: 1.5rem;
  }
  .br-tr_circle\:lg {
    border-top-right-radius: 100%;
  }
  .br-tl_square\:lg {
    border-top-left-radius: 0px;
  }
  .br-tl_radius\:lg {
    border-top-left-radius: 6px;
  }
  .br-tl_round\:lg {
    border-top-left-radius: 25px;
  }
  .br-tl_rounder\:lg {
    border-top-left-radius: 1.5rem;
  }
  .br-tl_circle\:lg {
    border-top-left-radius: 100%;
  }
  .br-br_square\:lg {
    border-bottom-right-radius: 0px;
  }
  .br-br_radius\:lg {
    border-bottom-right-radius: 6px;
  }
  .br-br_round\:lg {
    border-bottom-right-radius: 25px;
  }
  .br-br_rounder\:lg {
    border-bottom-right-radius: 1.5rem;
  }
  .br-br_circle\:lg {
    border-bottom-right-radius: 100%;
  }
  .br-bl_square\:lg {
    border-bottom-left-radius: 0px;
  }
  .br-bl_radius\:lg {
    border-bottom-left-radius: 6px;
  }
  .br-bl_round\:lg {
    border-bottom-left-radius: 25px;
  }
  .br-bl_rounder\:lg {
    border-bottom-left-radius: 1.5rem;
  }
  .br-bl_circle\:lg {
    border-bottom-left-radius: 100%;
  }
}
.square,
.square .switch-paddle,
.square .switch-paddle::after {
  border-radius: 0px;
}

.radius,
.radius .switch-paddle,
.radius .switch-paddle::after {
  border-radius: 6px;
}

.round,
.round .switch-paddle,
.round .switch-paddle::after {
  border-radius: 25px;
}

.rounder,
.rounder .switch-paddle,
.rounder .switch-paddle::after {
  border-radius: 1.5rem;
}

.circle,
.circle .switch-paddle,
.circle .switch-paddle::after {
  border-radius: 100%;
}

/*
  Colors

  Border colors can also have the colors modified by shifting to white or black   

  br_primary            	  - border color primary
  br_primary-1              - border color mixed with white
  br_primary-2              - border color mixed with white
  br_primary-3              - border color mixed with white
  br_primary-4              - border color mixed with white
  br_primary-5              - border color mixed with white
  br_primary-n1             - border color mixed with black
  br_primary-n2             - border color mixed with black
  br_primary-n3             - border color mixed with black
  br_primary-n4             - border color mixed with black
  br_primary-n5             - border color mixed with black 

  Markup:
  <div class="{{modifier_class}} p_3 br_solid br_5 bg_shade c_white">{{modifier_class}} border</div>

  Styleguide Decorator.Border.Colors.Modifiers

  */

.br_primary,.br_primary-0 {
  border-color: var(--primary) !important;
}

.br_primary-1 {
  border-color: hsla(var(--primary-h), calc(var(--primary-s) - var(--primary-s) * 0.05), calc(var(--primary-l) + (100% - var(--primary-l)) * 0.1), 1) !important;
}

.br_primary-2 {
  border-color: hsla(var(--primary-h), calc(var(--primary-s) - var(--primary-s) * 0.125), calc(var(--primary-l) + (100% - var(--primary-l)) * 0.25), 1) !important;
}

.br_primary-3 {
  border-color: hsla(var(--primary-h), calc(var(--primary-s) - var(--primary-s) * 0.25), calc(var(--primary-l) + (100% - var(--primary-l)) * 0.5), 1) !important;
}

.br_primary-4 {
  border-color: hsla(var(--primary-h), calc(var(--primary-s) - var(--primary-s) * 0.375), calc(var(--primary-l) + (100% - var(--primary-l)) * 0.75), 1) !important;
}

.br_primary-5 {
  border-color: hsla(var(--primary-h), calc(var(--primary-s) - var(--primary-s) * 0.45), calc(var(--primary-l) + (100% - var(--primary-l)) * 0.9), 1) !important;
}

.br_primary-n1 {
  border-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) !important;
}

.br_primary-n2 {
  border-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) !important;
}

.br_primary-n3, .btn_acc-primary {
  border-color: hsla(var(--primary-h), calc(var(--primary-s) + (100% - var(--primary-s)) * 0.05), calc(var(--primary-l) - var(--primary-l) * 0.5), 1) !important;
}

.br_primary-n4 {
  border-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) !important;
}

.br_primary-n5 {
  border-color: hsla(var(--primary-h), calc(var(--primary-s) + (100% - var(--primary-s)) * 0.085), calc(var(--primary-l) - var(--primary-l) * 0.85), 1) !important;
}

.br_secondary,.br_secondary-0 {
  border-color: var(--secondary) !important;
}

.br_secondary-1 {
  border-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) !important;
}

.br_secondary-2 {
  border-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) !important;
}

.br_secondary-3 {
  border-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) !important;
}

.br_secondary-4 {
  border-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) !important;
}

.br_secondary-5 {
  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) !important;
}

.br_secondary-n1 {
  border-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) !important;
}

.br_secondary-n2 {
  border-color: hsla(var(--secondary-h), calc(var(--secondary-s) + (100% - var(--secondary-s)) * 0.03), calc(var(--secondary-l) - var(--secondary-l) * 0.3), 1) !important;
}

.br_secondary-n3 {
  border-color: hsla(var(--secondary-h), calc(var(--secondary-s) + (100% - var(--secondary-s)) * 0.05), calc(var(--secondary-l) - var(--secondary-l) * 0.5), 1) !important;
}

.br_secondary-n4 {
  border-color: hsla(var(--secondary-h), calc(var(--secondary-s) + (100% - var(--secondary-s)) * 0.07), calc(var(--secondary-l) - var(--secondary-l) * 0.7), 1) !important;
}

.br_secondary-n5 {
  border-color: hsla(var(--secondary-h), calc(var(--secondary-s) + (100% - var(--secondary-s)) * 0.085), calc(var(--secondary-l) - var(--secondary-l) * 0.85), 1) !important;
}

.br_success,.br_success-0 {
  border-color: var(--success) !important;
}

.br_success-1 {
  border-color: hsla(var(--success-h), calc(var(--success-s) - var(--success-s) * 0.05), calc(var(--success-l) + (100% - var(--success-l)) * 0.1), 1) !important;
}

.br_success-2 {
  border-color: hsla(var(--success-h), calc(var(--success-s) - var(--success-s) * 0.125), calc(var(--success-l) + (100% - var(--success-l)) * 0.25), 1) !important;
}

.br_success-3 {
  border-color: hsla(var(--success-h), calc(var(--success-s) - var(--success-s) * 0.25), calc(var(--success-l) + (100% - var(--success-l)) * 0.5), 1) !important;
}

.br_success-4 {
  border-color: hsla(var(--success-h), calc(var(--success-s) - var(--success-s) * 0.375), calc(var(--success-l) + (100% - var(--success-l)) * 0.75), 1) !important;
}

.br_success-5 {
  border-color: hsla(var(--success-h), calc(var(--success-s) - var(--success-s) * 0.45), calc(var(--success-l) + (100% - var(--success-l)) * 0.9), 1) !important;
}

.br_success-n1 {
  border-color: hsla(var(--success-h), calc(var(--success-s) + (100% - var(--success-s)) * 0.015), calc(var(--success-l) - var(--success-l) * 0.15), 1) !important;
}

.br_success-n2 {
  border-color: hsla(var(--success-h), calc(var(--success-s) + (100% - var(--success-s)) * 0.03), calc(var(--success-l) - var(--success-l) * 0.3), 1) !important;
}

.br_success-n3 {
  border-color: hsla(var(--success-h), calc(var(--success-s) + (100% - var(--success-s)) * 0.05), calc(var(--success-l) - var(--success-l) * 0.5), 1) !important;
}

.br_success-n4 {
  border-color: hsla(var(--success-h), calc(var(--success-s) + (100% - var(--success-s)) * 0.07), calc(var(--success-l) - var(--success-l) * 0.7), 1) !important;
}

.br_success-n5 {
  border-color: hsla(var(--success-h), calc(var(--success-s) + (100% - var(--success-s)) * 0.085), calc(var(--success-l) - var(--success-l) * 0.85), 1) !important;
}

.br_shade,.br_shade-0 {
  border-color: var(--shade) !important;
}

.br_shade-1 {
  border-color: hsla(var(--shade-h), calc(var(--shade-s) - var(--shade-s) * 0.05), calc(var(--shade-l) + (100% - var(--shade-l)) * 0.1), 1) !important;
}

.br_shade-2 {
  border-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) !important;
}

.br_shade-3 {
  border-color: hsla(var(--shade-h), calc(var(--shade-s) - var(--shade-s) * 0.25), calc(var(--shade-l) + (100% - var(--shade-l)) * 0.5), 1) !important;
}

.br_shade-4 {
  border-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) !important;
}

.br_shade-5 {
  border-color: hsla(var(--shade-h), calc(var(--shade-s) - var(--shade-s) * 0.45), calc(var(--shade-l) + (100% - var(--shade-l)) * 0.9), 1) !important;
}

.br_shade-n1 {
  border-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) !important;
}

.br_shade-n2 {
  border-color: hsla(var(--shade-h), calc(var(--shade-s) + (100% - var(--shade-s)) * 0.03), calc(var(--shade-l) - var(--shade-l) * 0.3), 1) !important;
}

.br_shade-n3 {
  border-color: hsla(var(--shade-h), calc(var(--shade-s) + (100% - var(--shade-s)) * 0.05), calc(var(--shade-l) - var(--shade-l) * 0.5), 1) !important;
}

.br_shade-n4 {
  border-color: hsla(var(--shade-h), calc(var(--shade-s) + (100% - var(--shade-s)) * 0.07), calc(var(--shade-l) - var(--shade-l) * 0.7), 1) !important;
}

.br_shade-n5 {
  border-color: hsla(var(--shade-h), calc(var(--shade-s) + (100% - var(--shade-s)) * 0.085), calc(var(--shade-l) - var(--shade-l) * 0.85), 1) !important;
}

.br_warning,.br_warning-0 {
  border-color: var(--warning) !important;
}

.br_warning-1 {
  border-color: hsla(var(--warning-h), calc(var(--warning-s) - var(--warning-s) * 0.05), calc(var(--warning-l) + (100% - var(--warning-l)) * 0.1), 1) !important;
}

.br_warning-2 {
  border-color: hsla(var(--warning-h), calc(var(--warning-s) - var(--warning-s) * 0.125), calc(var(--warning-l) + (100% - var(--warning-l)) * 0.25), 1) !important;
}

.br_warning-3 {
  border-color: hsla(var(--warning-h), calc(var(--warning-s) - var(--warning-s) * 0.25), calc(var(--warning-l) + (100% - var(--warning-l)) * 0.5), 1) !important;
}

.br_warning-4 {
  border-color: hsla(var(--warning-h), calc(var(--warning-s) - var(--warning-s) * 0.375), calc(var(--warning-l) + (100% - var(--warning-l)) * 0.75), 1) !important;
}

.br_warning-5 {
  border-color: hsla(var(--warning-h), calc(var(--warning-s) - var(--warning-s) * 0.45), calc(var(--warning-l) + (100% - var(--warning-l)) * 0.9), 1) !important;
}

.br_warning-n1 {
  border-color: hsla(var(--warning-h), calc(var(--warning-s) + (100% - var(--warning-s)) * 0.015), calc(var(--warning-l) - var(--warning-l) * 0.15), 1) !important;
}

.br_warning-n2 {
  border-color: hsla(var(--warning-h), calc(var(--warning-s) + (100% - var(--warning-s)) * 0.03), calc(var(--warning-l) - var(--warning-l) * 0.3), 1) !important;
}

.br_warning-n3 {
  border-color: hsla(var(--warning-h), calc(var(--warning-s) + (100% - var(--warning-s)) * 0.05), calc(var(--warning-l) - var(--warning-l) * 0.5), 1) !important;
}

.br_warning-n4 {
  border-color: hsla(var(--warning-h), calc(var(--warning-s) + (100% - var(--warning-s)) * 0.07), calc(var(--warning-l) - var(--warning-l) * 0.7), 1) !important;
}

.br_warning-n5 {
  border-color: hsla(var(--warning-h), calc(var(--warning-s) + (100% - var(--warning-s)) * 0.085), calc(var(--warning-l) - var(--warning-l) * 0.85), 1) !important;
}

.br_alert,.br_alert-0 {
  border-color: var(--alert) !important;
}

.br_alert-1 {
  border-color: hsla(var(--alert-h), calc(var(--alert-s) - var(--alert-s) * 0.05), calc(var(--alert-l) + (100% - var(--alert-l)) * 0.1), 1) !important;
}

.br_alert-2 {
  border-color: hsla(var(--alert-h), calc(var(--alert-s) - var(--alert-s) * 0.125), calc(var(--alert-l) + (100% - var(--alert-l)) * 0.25), 1) !important;
}

.br_alert-3 {
  border-color: hsla(var(--alert-h), calc(var(--alert-s) - var(--alert-s) * 0.25), calc(var(--alert-l) + (100% - var(--alert-l)) * 0.5), 1) !important;
}

.br_alert-4 {
  border-color: hsla(var(--alert-h), calc(var(--alert-s) - var(--alert-s) * 0.375), calc(var(--alert-l) + (100% - var(--alert-l)) * 0.75), 1) !important;
}

.br_alert-5 {
  border-color: hsla(var(--alert-h), calc(var(--alert-s) - var(--alert-s) * 0.45), calc(var(--alert-l) + (100% - var(--alert-l)) * 0.9), 1) !important;
}

.br_alert-n1 {
  border-color: hsla(var(--alert-h), calc(var(--alert-s) + (100% - var(--alert-s)) * 0.015), calc(var(--alert-l) - var(--alert-l) * 0.15), 1) !important;
}

.br_alert-n2 {
  border-color: hsla(var(--alert-h), calc(var(--alert-s) + (100% - var(--alert-s)) * 0.03), calc(var(--alert-l) - var(--alert-l) * 0.3), 1) !important;
}

.br_alert-n3 {
  border-color: hsla(var(--alert-h), calc(var(--alert-s) + (100% - var(--alert-s)) * 0.05), calc(var(--alert-l) - var(--alert-l) * 0.5), 1) !important;
}

.br_alert-n4 {
  border-color: hsla(var(--alert-h), calc(var(--alert-s) + (100% - var(--alert-s)) * 0.07), calc(var(--alert-l) - var(--alert-l) * 0.7), 1) !important;
}

.br_alert-n5 {
  border-color: hsla(var(--alert-h), calc(var(--alert-s) + (100% - var(--alert-s)) * 0.085), calc(var(--alert-l) - var(--alert-l) * 0.85), 1) !important;
}

.br_navigation,.br_navigation-0 {
  border-color: var(--navigation) !important;
}

.br_navigation-1 {
  border-color: hsla(var(--navigation-h), calc(var(--navigation-s) - var(--navigation-s) * 0.05), calc(var(--navigation-l) + (100% - var(--navigation-l)) * 0.1), 1) !important;
}

.br_navigation-2 {
  border-color: hsla(var(--navigation-h), calc(var(--navigation-s) - var(--navigation-s) * 0.125), calc(var(--navigation-l) + (100% - var(--navigation-l)) * 0.25), 1) !important;
}

.br_navigation-3 {
  border-color: hsla(var(--navigation-h), calc(var(--navigation-s) - var(--navigation-s) * 0.25), calc(var(--navigation-l) + (100% - var(--navigation-l)) * 0.5), 1) !important;
}

.br_navigation-4 {
  border-color: hsla(var(--navigation-h), calc(var(--navigation-s) - var(--navigation-s) * 0.375), calc(var(--navigation-l) + (100% - var(--navigation-l)) * 0.75), 1) !important;
}

.br_navigation-5 {
  border-color: hsla(var(--navigation-h), calc(var(--navigation-s) - var(--navigation-s) * 0.45), calc(var(--navigation-l) + (100% - var(--navigation-l)) * 0.9), 1) !important;
}

.br_navigation-n1 {
  border-color: hsla(var(--navigation-h), calc(var(--navigation-s) + (100% - var(--navigation-s)) * 0.015), calc(var(--navigation-l) - var(--navigation-l) * 0.15), 1) !important;
}

.br_navigation-n2 {
  border-color: hsla(var(--navigation-h), calc(var(--navigation-s) + (100% - var(--navigation-s)) * 0.03), calc(var(--navigation-l) - var(--navigation-l) * 0.3), 1) !important;
}

.br_navigation-n3 {
  border-color: hsla(var(--navigation-h), calc(var(--navigation-s) + (100% - var(--navigation-s)) * 0.05), calc(var(--navigation-l) - var(--navigation-l) * 0.5), 1) !important;
}

.br_navigation-n4 {
  border-color: hsla(var(--navigation-h), calc(var(--navigation-s) + (100% - var(--navigation-s)) * 0.07), calc(var(--navigation-l) - var(--navigation-l) * 0.7), 1) !important;
}

.br_navigation-n5 {
  border-color: hsla(var(--navigation-h), calc(var(--navigation-s) + (100% - var(--navigation-s)) * 0.085), calc(var(--navigation-l) - var(--navigation-l) * 0.85), 1) !important;
}

.br_accent,.br_accent-0 {
  border-color: var(--accent) !important;
}

.br_accent-1 {
  border-color: hsla(var(--accent-h), calc(var(--accent-s) - var(--accent-s) * 0.05), calc(var(--accent-l) + (100% - var(--accent-l)) * 0.1), 1) !important;
}

.br_accent-2 {
  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) !important;
}

.br_accent-3 {
  border-color: hsla(var(--accent-h), calc(var(--accent-s) - var(--accent-s) * 0.25), calc(var(--accent-l) + (100% - var(--accent-l)) * 0.5), 1) !important;
}

.br_accent-4 {
  border-color: hsla(var(--accent-h), calc(var(--accent-s) - var(--accent-s) * 0.375), calc(var(--accent-l) + (100% - var(--accent-l)) * 0.75), 1) !important;
}

.br_accent-5 {
  border-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) !important;
}

.br_accent-n1 {
  border-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) !important;
}

.br_accent-n2 {
  border-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) !important;
}

.br_accent-n3 {
  border-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) !important;
}

.br_accent-n4 {
  border-color: hsla(var(--accent-h), calc(var(--accent-s) + (100% - var(--accent-s)) * 0.07), calc(var(--accent-l) - var(--accent-l) * 0.7), 1) !important;
}

.br_accent-n5 {
  border-color: hsla(var(--accent-h), calc(var(--accent-s) + (100% - var(--accent-s)) * 0.085), calc(var(--accent-l) - var(--accent-l) * 0.85), 1) !important;
}

.br_info,.br_info-0 {
  border-color: var(--info) !important;
}

.br_info-1 {
  border-color: hsla(var(--info-h), calc(var(--info-s) - var(--info-s) * 0.05), calc(var(--info-l) + (100% - var(--info-l)) * 0.1), 1) !important;
}

.br_info-2 {
  border-color: hsla(var(--info-h), calc(var(--info-s) - var(--info-s) * 0.125), calc(var(--info-l) + (100% - var(--info-l)) * 0.25), 1) !important;
}

.br_info-3 {
  border-color: hsla(var(--info-h), calc(var(--info-s) - var(--info-s) * 0.25), calc(var(--info-l) + (100% - var(--info-l)) * 0.5), 1) !important;
}

.br_info-4 {
  border-color: hsla(var(--info-h), calc(var(--info-s) - var(--info-s) * 0.375), calc(var(--info-l) + (100% - var(--info-l)) * 0.75), 1) !important;
}

.br_info-5 {
  border-color: hsla(var(--info-h), calc(var(--info-s) - var(--info-s) * 0.45), calc(var(--info-l) + (100% - var(--info-l)) * 0.9), 1) !important;
}

.br_info-n1 {
  border-color: hsla(var(--info-h), calc(var(--info-s) + (100% - var(--info-s)) * 0.015), calc(var(--info-l) - var(--info-l) * 0.15), 1) !important;
}

.br_info-n2 {
  border-color: hsla(var(--info-h), calc(var(--info-s) + (100% - var(--info-s)) * 0.03), calc(var(--info-l) - var(--info-l) * 0.3), 1) !important;
}

.br_info-n3 {
  border-color: hsla(var(--info-h), calc(var(--info-s) + (100% - var(--info-s)) * 0.05), calc(var(--info-l) - var(--info-l) * 0.5), 1) !important;
}

.br_info-n4 {
  border-color: hsla(var(--info-h), calc(var(--info-s) + (100% - var(--info-s)) * 0.07), calc(var(--info-l) - var(--info-l) * 0.7), 1) !important;
}

.br_info-n5 {
  border-color: hsla(var(--info-h), calc(var(--info-s) + (100% - var(--info-s)) * 0.085), calc(var(--info-l) - var(--info-l) * 0.85), 1) !important;
}

.br_highlight,.br_highlight-0 {
  border-color: var(--highlight) !important;
}

.br_highlight-1 {
  border-color: hsla(var(--highlight-h), calc(var(--highlight-s) - var(--highlight-s) * 0.05), calc(var(--highlight-l) + (100% - var(--highlight-l)) * 0.1), 1) !important;
}

.br_highlight-2 {
  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) !important;
}

.br_highlight-3 {
  border-color: hsla(var(--highlight-h), calc(var(--highlight-s) - var(--highlight-s) * 0.25), calc(var(--highlight-l) + (100% - var(--highlight-l)) * 0.5), 1) !important;
}

.br_highlight-4 {
  border-color: hsla(var(--highlight-h), calc(var(--highlight-s) - var(--highlight-s) * 0.375), calc(var(--highlight-l) + (100% - var(--highlight-l)) * 0.75), 1) !important;
}

.br_highlight-5 {
  border-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) !important;
}

.br_highlight-n1 {
  border-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) !important;
}

.br_highlight-n2 {
  border-color: hsla(var(--highlight-h), calc(var(--highlight-s) + (100% - var(--highlight-s)) * 0.03), calc(var(--highlight-l) - var(--highlight-l) * 0.3), 1) !important;
}

.br_highlight-n3 {
  border-color: hsla(var(--highlight-h), calc(var(--highlight-s) + (100% - var(--highlight-s)) * 0.05), calc(var(--highlight-l) - var(--highlight-l) * 0.5), 1) !important;
}

.br_highlight-n4 {
  border-color: hsla(var(--highlight-h), calc(var(--highlight-s) + (100% - var(--highlight-s)) * 0.07), calc(var(--highlight-l) - var(--highlight-l) * 0.7), 1) !important;
}

.br_highlight-n5 {
  border-color: hsla(var(--highlight-h), calc(var(--highlight-s) + (100% - var(--highlight-s)) * 0.085), calc(var(--highlight-l) - var(--highlight-l) * 0.85), 1) !important;
}

.br_acc,.br_acc-0 {
  border-color: var(--acc) !important;
}

.br_acc-1 {
  border-color: hsla(var(--acc-h), calc(var(--acc-s) - var(--acc-s) * 0.05), calc(var(--acc-l) + (100% - var(--acc-l)) * 0.1), 1) !important;
}

.br_acc-2 {
  border-color: hsla(var(--acc-h), calc(var(--acc-s) - var(--acc-s) * 0.125), calc(var(--acc-l) + (100% - var(--acc-l)) * 0.25), 1) !important;
}

.br_acc-3 {
  border-color: hsla(var(--acc-h), calc(var(--acc-s) - var(--acc-s) * 0.25), calc(var(--acc-l) + (100% - var(--acc-l)) * 0.5), 1) !important;
}

.br_acc-4 {
  border-color: hsla(var(--acc-h), calc(var(--acc-s) - var(--acc-s) * 0.375), calc(var(--acc-l) + (100% - var(--acc-l)) * 0.75), 1) !important;
}

.br_acc-5 {
  border-color: hsla(var(--acc-h), calc(var(--acc-s) - var(--acc-s) * 0.45), calc(var(--acc-l) + (100% - var(--acc-l)) * 0.9), 1) !important;
}

.br_acc-n1 {
  border-color: hsla(var(--acc-h), calc(var(--acc-s) + (100% - var(--acc-s)) * 0.015), calc(var(--acc-l) - var(--acc-l) * 0.15), 1) !important;
}

.br_acc-n2 {
  border-color: hsla(var(--acc-h), calc(var(--acc-s) + (100% - var(--acc-s)) * 0.03), calc(var(--acc-l) - var(--acc-l) * 0.3), 1) !important;
}

.br_acc-n3 {
  border-color: hsla(var(--acc-h), calc(var(--acc-s) + (100% - var(--acc-s)) * 0.05), calc(var(--acc-l) - var(--acc-l) * 0.5), 1) !important;
}

.br_acc-n4 {
  border-color: hsla(var(--acc-h), calc(var(--acc-s) + (100% - var(--acc-s)) * 0.07), calc(var(--acc-l) - var(--acc-l) * 0.7), 1) !important;
}

.br_acc-n5 {
  border-color: hsla(var(--acc-h), calc(var(--acc-s) + (100% - var(--acc-s)) * 0.085), calc(var(--acc-l) - var(--acc-l) * 0.85), 1) !important;
}

/*
    Width

    Manipulation of borders with these classes either all border or with single borders   

    br_0            	- all border with no border
    br_1            	- all borders with 1px
    br_2            	- all borders with .125rem
    br_3            	- all borders with .25rem
    br_4            	- all borders with .5rem
    br_5            	- all borders with rem
    br-l_0.br_1            	- left border with no border
    br-l_1.br_1            	- left borders with 1px
    br-l_2.br_1            	- left borders with .125rem
    br-l_3.br_1            	- left borders with .25rem
    br-l_4.br_1            	- left borders with .5rem
    br-l_5.br_1            	- left borders with rem


    Markup:
    <div class="{{modifier_class}} p_3 br_solid br_black c_black">{{modifier_class}} border</div>

    Styleguide Decorator.Border.Width

   */
.br-t_0,
.br-t_1,
.br-t_2,
.br-t_3,
.br-t_4,
.br-t_5,
.br-r_0,
.br-r_1,
.br-r_2,
.br-r_3,
.br-r_4,
.br-r_5,
.br-l_0,
.br-l_1,
.br-l_2,
.br-l_3,
.br-l_4,
.br-l_5,
.br-b_0,
.br-b_1,
.br-b_2,
.br-b_3,
.br-b_4,
.br-b_5 {
  border-width: 0;
}

.br_0 {
  border-width: 0px;
}

.br_1 {
  border-width: 1px;
}

.br_2 {
  border-width: 3px;
}

.br_3 {
  border-width: 4px;
  border-width: 0.25rem;
}

.br_4 {
  border-width: 8px;
  border-width: 0.5rem;
}

.br_5 {
  border-width: 16px;
  border-width: 1rem;
}

.br-t_0 {
  border-top-width: 0px;
}

.br-t_1 {
  border-top-width: 1px;
}

.br-t_2 {
  border-top-width: 3px;
}

.br-t_3 {
  border-top-width: 4px;
  border-top-width: 0.25rem;
}

.br-t_4 {
  border-top-width: 8px;
  border-top-width: 0.5rem;
}

.br-t_5 {
  border-top-width: 16px;
  border-top-width: 1rem;
}

.br-r_0 {
  border-right-width: 0px;
}

.br-r_1 {
  border-right-width: 1px;
}

.br-r_2 {
  border-right-width: 3px;
}

.br-r_3 {
  border-right-width: 4px;
  border-right-width: 0.25rem;
}

.br-r_4 {
  border-right-width: 8px;
  border-right-width: 0.5rem;
}

.br-r_5 {
  border-right-width: 16px;
  border-right-width: 1rem;
}

.br-l_0 {
  border-left-width: 0px;
}

.br-l_1 {
  border-left-width: 1px;
}

.br-l_2 {
  border-left-width: 3px;
}

.br-l_3 {
  border-left-width: 4px;
  border-left-width: 0.25rem;
}

.br-l_4 {
  border-left-width: 8px;
  border-left-width: 0.5rem;
}

.br-l_5 {
  border-left-width: 16px;
  border-left-width: 1rem;
}

.br-b_0 {
  border-bottom-width: 0px;
}

.br-b_1 {
  border-bottom-width: 1px;
}

.br-b_2 {
  border-bottom-width: 3px;
}

.br-b_3 {
  border-bottom-width: 4px;
  border-bottom-width: 0.25rem;
}

.br-b_4 {
  border-bottom-width: 8px;
  border-bottom-width: 0.5rem;
}

.br-b_5 {
  border-bottom-width: 16px;
  border-bottom-width: 1rem;
}

/*
Opacity

A subtle set of  UCs that control opacity can alter the objects level of focus.

Weight: 128

Styleguide Decorator.Opacity

*/
/* No styleguide reference. */
/*
	Opacity Levels

	Set the Opacity of an object.  <table class='clear_both'><thead class='font_bold uppercase'><th>class</th><th class='text_right'>css property</th><th>value</th></thead><tbody><tr><td class='c_primary-n2'> .opacity_0</td><td class='text_right'> opacity :</td><td> 0 </td></tr> <tr><td class='c_primary-n2'> .opacity__01</td><td class='text_right'> opacity :</td><td> 0.005 </td></tr> <tr><td class='c_primary-n2'> .opacity__05</td><td class='text_right'> opacity :</td><td> 0.0075 </td></tr> <tr><td class='c_primary-n2'> .opacity_1</td><td class='text_right'> opacity :</td><td> 0.025 </td></tr> <tr><td class='c_primary-n2'> .opacity_2</td><td class='text_right'> opacity :</td><td> 0.1 </td></tr> <tr><td class='c_primary-n2'> .opacity_3</td><td class='text_right'> opacity :</td><td> 0.25 </td></tr> <tr><td class='c_primary-n2'> .opacity_4</td><td class='text_right'> opacity :</td><td> 0.38 </td></tr> <tr><td class='c_primary-n2'> .opacity_5</td><td class='text_right'> opacity :</td><td> 0.5 </td></tr> <tr><td class='c_primary-n2'> .opacity_6</td><td class='text_right'> opacity :</td><td> 0.62 </td></tr> <tr><td class='c_primary-n2'> .opacity_7</td><td class='text_right'> opacity :</td><td> 0.75 </td></tr> <tr><td class='c_primary-n2'> .opacity_8</td><td class='text_right'> opacity :</td><td> 0.9 </td></tr> <tr><td class='c_primary-n2'> .opacity_9</td><td class='text_right'> opacity :</td><td> 0.975 </td></tr> <tr><td class='c_primary-n2'> .opacity_none</td><td class='text_right'> opacity :</td><td> 1 </td></tr> </tbody></table>  

	.opacity_2     - set opacity: 0.1
	.opacity_6     - set opacity: 0.62
	.opacity_8     - set opacity: 0.9
	.opacity_none  - set opacity: 1

	Markup:
	<div class="{{modifier_class}} br_1 br_solid br_white p_2 bg_warning c_white">{{modifier_class}}</div>

	MarkupWrapperClasses:
	p_4 bg_primary

	Styleguide Decorator.Opacity.basic

 */
.opacity_0 {
  opacity: 0;
}

.opacity__01 {
  opacity: 0.005;
}

.opacity__05 {
  opacity: 0.0075;
}

.opacity_1 {
  opacity: 0.025;
}

.opacity_2 {
  opacity: 0.1;
}

.opacity_3 {
  opacity: 0.25;
}

.opacity_4 {
  opacity: 0.38;
}

.opacity_5 {
  opacity: 0.5;
}

.opacity_6 {
  opacity: 0.62;
}

.opacity_7 {
  opacity: 0.75;
}

.opacity_8 {
  opacity: 0.9;
}

.opacity_9 {
  opacity: 0.975;
}

.opacity_none {
  opacity: 1;
}

/*
active

A common class name given to the parent container can effect the color, background and opacity of the children.  The active class is different depending if you are using Bootstrap or Foundation. <h1>This Variation of Arches uses <strong>"active"</strong></h1>  

Weight: 135

Styleguide Interaction.States.Active

*/
/*
active Full Opacity

<div class="p-b_3"><span class="bg_highlight br_radius c_white inline-block font_n1 p-7_3 p-x_5 sg">Click the areas below to toggle the `active` state.</span></div><strong>`.active .a:opacity`</strong> Set the Opacity of an objects children to 100% when it has the class is-active. 

Markup:
<div class="flex p_4 bg_primary is-active_toggle-function ">
  <div class="flex_auto opacity_0 a:opacity br_1 br_solid br_white p_2 bg_warning c_white"> 0 </div>
  <div class="flex_auto opacity_1 a:opacity br_1 br_solid br_white p_2 bg_warning c_white"> 1 </div>
  <div class="flex_auto opacity_2 a:opacity br_1 br_solid br_white p_2 bg_warning c_white"> 2 </div>
  <div class="flex_auto opacity_3 a:opacity br_1 br_solid br_white p_2 bg_warning c_white"> 3 </div>
  <div class="flex_auto opacity_4 a:opacity br_1 br_solid br_white p_2 bg_warning c_white"> 4 </div>
  <div class="flex_auto opacity_5 a:opacity br_1 br_solid br_white p_2 bg_warning c_white"> 5 </div>
  <div class="flex_auto opacity_6 a:opacity br_1 br_solid br_white p_2 bg_warning c_white"> 6 </div>
  <div class="flex_auto opacity_7 a:opacity br_1 br_solid br_white p_2 bg_warning c_white"> 7 </div>
  <div class="flex_auto opacity_8 a:opacity br_1 br_solid br_white p_2 bg_warning c_white"> 8 </div>
  <div class="flex_auto opacity_9 a:opacity br_1 br_solid br_white p_2 bg_warning c_white"> 9 </div>
</div>

Weight: 60

Styleguide Interaction.States.Active.opacity

*/
/*
active Black n White 

<div class="p-b_3"><span class="bg_highlight br_radius c_white inline-block font_n1 p-7_3 p-x_5 sg">Click the areas below to toggle the "active" state.</span></div>Set the background to full white or black when the parent has a class of "active". 

bg_white              - text color modified light to dark
bg_black              - text color modified light to dark

Markup:
<div class="flex p_5 bg_primary m_5 is-active_toggle-function">
  <div class="flex_auto a:{{modifier_class}} bg_{{modifier_class}}-0 p-y_3 p-x_4 font_bold font_2 font_accent: c_shade text_center br_1 br_solid br_shade-4">0</div>
  <div class="flex_auto a:{{modifier_class}} bg_{{modifier_class}}-1 p-y_3 p-x_4 font_bold font_2 font_accent: c_shade text_center br_1 br_solid br_shade-4">1</div>
  <div class="flex_auto a:{{modifier_class}} bg_{{modifier_class}}-2 p-y_3 p-x_4 font_bold font_2 font_accent: c_shade text_center br_1 br_solid br_shade-4">2</div>
  <div class="flex_auto a:{{modifier_class}} bg_{{modifier_class}}-3 p-y_3 p-x_4 font_bold font_2 font_accent: c_shade text_center br_1 br_solid br_shade-4">3</div>
  <div class="flex_auto a:{{modifier_class}} bg_{{modifier_class}}-4 p-y_3 p-x_4 font_bold font_2 font_accent: c_shade text_center br_1 br_solid br_shade-4">4</div>
  <div class="flex_auto a:{{modifier_class}} bg_{{modifier_class}}-5 p-y_3 p-x_4 font_bold font_2 font_accent: c_shade text_center br_1 br_solid br_shade-4">5</div>
  <div class="flex_auto a:{{modifier_class}} bg_{{modifier_class}}-6 p-y_3 p-x_4 font_bold font_2 font_accent: c_shade text_center br_1 br_solid br_shade-4 ">6</div>
  <div class="flex_auto a:{{modifier_class}} bg_{{modifier_class}}-7 p-y_3 p-x_4 font_bold font_2 font_accent: c_shade text_center br_1 br_solid br_shade-4 ">7</div>
  <div class="flex_auto a:{{modifier_class}} bg_{{modifier_class}}-8 p-y_3 p-x_4 font_bold font_2 font_accent: c_shade text_center br_1 br_solid br_shade-4 ">8</div>
  <div class="flex_auto a:{{modifier_class}} bg_{{modifier_class}}-9 p-y_3 p-x_4 font_bold font_2 font_accent: c_shade text_center br_1 br_solid br_shade-4 ">9</div>
  <div class="flex_auto  a:{{modifier_class}} bg_{{modifier_class}}-0 p-y_3 p-x_4 font_bold font_2 font_accent: c_shade text_center br_1 br_solid br_shade-4 ">default</div>
</div>

Weight: 50

Styleguide Interaction.States.Active.black and white

 */
/*
  active font color

  <div class="p-b_3"><span class="bg_highlight br_radius c_white inline-block font_n1 p-7_3 p-x_5 sg">Click the areas below to toggle the "active" state.</span></div> Set the font color of the child by setting the parent to .active. `a:c_primary`

  c_primary              - text color modified light to dark
  c_shade              - text color modified light to dark
  c_info              - text color modified light to dark
  c_highlight              - text color success color
  c_success              - text color modified light to dark
  c_warning              - text color modified light to dark
  c_alert              - text color modified light to dark

  Markup:
  <div class="flex p_5 is-active_toggle-function c_white">
    <div class="flex_auto a:{{modifier_class}}-5 font_bold bg_shade-n3 font_5 font_accent: text_center br_1 br_solid br_shade-4 p_1">5</div>
    <div class="flex_auto a:{{modifier_class}}-4 font_bold bg_shade-n3 font_5 font_accent: text_center br_1 br_solid br_shade-4 p_1">4</div>
    <div class="flex_auto a:{{modifier_class}}-3 font_bold bg_shade-n3 font_5 font_accent: text_center br_1 br_solid br_shade-4 p_1">3</div>
    <div class="flex_auto a:{{modifier_class}}-2 font_bold bg_shade-n3 font_5 font_accent: text_center br_1 br_solid br_shade-4 p_1">2</div>
    <div class="flex_auto a:{{modifier_class}}-1 font_bold bg_shade-n3 font_5 font_accent: text_center br_1 br_solid br_shade-4 p_1">1</div>
    <div class="flex_auto a:{{modifier_class}}-0 font_bold bg_shade-n3 font_5 font_accent: text_center br_1 br_solid br_shade-4 p_1">0</div>
    <div class="flex_auto a:{{modifier_class}}-n1 font_bold bg_shade-n3 font_5 font_accent: text_center br_1 br_solid br_shade-4 p_1">n1</div>
    <div class="flex_auto a:{{modifier_class}}-n2 font_bold bg_shade-n3 font_5 font_accent: text_center br_1 br_solid br_shade-4 p_1">n2</div>
    <div class="flex_auto a:{{modifier_class}}-n3 font_bold bg_shade-n3 font_5 font_accent: text_center br_1 br_solid br_shade-4 p_1">n3</div>
    <div class="flex_auto a:{{modifier_class}}-n4 font_bold bg_shade-n3 font_5 font_accent: text_center br_1 br_solid br_shade-4 p_1">n4</div>
    <div class="flex_auto a:{{modifier_class}}-n5 font_bold bg_shade-n3 font_5 font_accent: text_center br_1 br_solid br_shade-4 p_1">n5</div>
  </div>

  Weight: 10

  Styleguide Interaction.States.Active.text

 */
/*
  active Background Color

  <div class="p-b_3"><span class="bg_highlight br_radius c_white inline-block font_n1 p-7_3 p-x_5 sg">Click the areas below to toggle the "active" state.</span></div> Set the font color of the child by setting the parent to .active. `a:c_primary`

  bg_primary              - text color modified light to dark
  bg_shade              - text color modified light to dark
  bg_info              - text color modified light to dark
  bg_highlight              - text color success color
  bg_success              - text color modified light to dark
  bg_warning              - text color modified light to dark
  bg_alert              - text color modified light to dark

  Markup:
  <div class="flex p_5 is-active_toggle-function">
    <div class="flex_auto a:{{modifier_class}}-5 bg_shade-2 font_3  text_center br_1 br_solid br_shade-4 p_1">5</div>
    <div class="flex_auto a:{{modifier_class}}-4 bg_shade-2 font_3  text_center br_1 br_solid br_shade-4 p_1">4</div>
    <div class="flex_auto a:{{modifier_class}}-3 bg_shade-2 font_3  text_center br_1 br_solid br_shade-4 p_1">3</div>
    <div class="flex_auto a:{{modifier_class}}-2 bg_shade-2 font_3  text_center br_1 br_solid br_shade-4 p_1">2</div>
    <div class="flex_auto a:{{modifier_class}}-1 bg_shade-2 font_3  text_center br_1 br_solid br_shade-4 p_1">1</div>
    <div class="flex_auto a:{{modifier_class}}-0 bg_shade-2 font_3  text_center br_1 br_solid br_shade-4 p_1">0</div>
    <div class="flex_auto a:{{modifier_class}}-n1 bg_shade-2  font_3  text_center br_1 br_solid br_shade-4 p_1">n1</div>
    <div class="flex_auto a:{{modifier_class}}-n2 bg_shade-2  font_3  text_center br_1 br_solid br_shade-4 p_1">n2</div>
    <div class="flex_auto a:{{modifier_class}}-n3 bg_shade-2  font_3  text_center br_1 br_solid br_shade-4 p_1">n3</div>
    <div class="flex_auto a:{{modifier_class}}-n4 bg_shade-2  font_3  text_center br_1 br_solid br_shade-4 p_1">n4</div>
    <div class="flex_auto a:{{modifier_class}}-n5 bg_shade-2  font_3  text_center br_1 br_solid br_shade-4 p_1">n5</div>
  </div>

  Weight: 10

  Styleguide Interaction.States.Active.background color

 */
/*
  active Icons

  <div class="p-b_3"><span class="bg_highlight br_radius c_white inline-block font_n1 p-7_3 p-x_5 sg">Click the areas below to toggle the "active" state.</span></div> Toggle the display and hide of a an icon with applying `is-active_icon-show` or `is-active_icon-hide`  

  fa-award            - toggle the award icon
  fa-bell             - toggle the bell icon
  fa-bell-slash       - toggle the bell slash icon
  fa-bug              - toggle the bug icon


  Markup:
  <div class="flex is-active_toggle-function">
    <div class="flex_auto a:bg_accent bg_shade-2 font_3 text_center br_1 br_solid br_shade-4 p_3"><i class="fas font_4 {{modifier_class}} a:icon-show"></i> Show When Active</div>
    <div class="flex_auto a:bg_accent bg_shade-2 font_3 text_center br_1 br_solid br_shade-4 p_3"><i class="fas font_4 {{modifier_class}} a:icon-hide"></i> Hide when Active</div>
  </div>

  Weight: 10

  Styleguide Interaction.States.Active.icon

 */
.active.a\:bg_white-0,
.active > .a\:bg_white-0 {
  background-color: rgba(255, 255, 255, 0) !important;
}

.active.a\:bg_white-_01,
.active > .a\:bg_white-_01 {
  background-color: rgba(255, 255, 255, 0.005) !important;
}

.active.a\:bg_white-_05,
.active > .a\:bg_white-_05 {
  background-color: rgba(255, 255, 255, 0.0075) !important;
}

.active.a\:bg_white-1,
.active > .a\:bg_white-1 {
  background-color: rgba(255, 255, 255, 0.025) !important;
}

.active.a\:bg_white-2,
.active > .a\:bg_white-2 {
  background-color: rgba(255, 255, 255, 0.1) !important;
}

.active.a\:bg_white-3,
.active > .a\:bg_white-3 {
  background-color: rgba(255, 255, 255, 0.25) !important;
}

.active.a\:bg_white-4,
.active > .a\:bg_white-4 {
  background-color: rgba(255, 255, 255, 0.38) !important;
}

.active.a\:bg_white-5,
.active > .a\:bg_white-5 {
  background-color: rgba(255, 255, 255, 0.5) !important;
}

.active.a\:bg_white-6,
.active > .a\:bg_white-6 {
  background-color: rgba(255, 255, 255, 0.62) !important;
}

.active.a\:bg_white-7,
.active > .a\:bg_white-7 {
  background-color: rgba(255, 255, 255, 0.75) !important;
}

.active.a\:bg_white-8,
.active > .a\:bg_white-8 {
  background-color: rgba(255, 255, 255, 0.9) !important;
}

.active.a\:bg_white-9,
.active > .a\:bg_white-9 {
  background-color: rgba(255, 255, 255, 0.975) !important;
}

.active.a\:bg_white-none,
.active > .a\:bg_white-none {
  background-color: white !important;
}

.active.a\:c_white-0,
.active > .a\:c_white-0 {
  color: rgba(255, 255, 255, 0) !important;
}

.active.a\:c_white-_01,
.active > .a\:c_white-_01 {
  color: rgba(255, 255, 255, 0.005) !important;
}

.active.a\:c_white-_05,
.active > .a\:c_white-_05 {
  color: rgba(255, 255, 255, 0.0075) !important;
}

.active.a\:c_white-1,
.active > .a\:c_white-1 {
  color: rgba(255, 255, 255, 0.025) !important;
}

.active.a\:c_white-2,
.active > .a\:c_white-2 {
  color: rgba(255, 255, 255, 0.1) !important;
}

.active.a\:c_white-3,
.active > .a\:c_white-3 {
  color: rgba(255, 255, 255, 0.25) !important;
}

.active.a\:c_white-4,
.active > .a\:c_white-4 {
  color: rgba(255, 255, 255, 0.38) !important;
}

.active.a\:c_white-5,
.active > .a\:c_white-5 {
  color: rgba(255, 255, 255, 0.5) !important;
}

.active.a\:c_white-6,
.active > .a\:c_white-6 {
  color: rgba(255, 255, 255, 0.62) !important;
}

.active.a\:c_white-7,
.active > .a\:c_white-7 {
  color: rgba(255, 255, 255, 0.75) !important;
}

.active.a\:c_white-8,
.active > .a\:c_white-8 {
  color: rgba(255, 255, 255, 0.9) !important;
}

.active.a\:c_white-9,
.active > .a\:c_white-9 {
  color: rgba(255, 255, 255, 0.975) !important;
}

.active.a\:c_white-none,
.active > .a\:c_white-none {
  color: white !important;
}

.active.a\:bg_black-0,
.active > .a\:bg_black-0 {
  background-color: rgba(19, 18, 18, 0) !important;
}

.active.a\:bg_black-_01,
.active > .a\:bg_black-_01 {
  background-color: rgba(19, 18, 18, 0.005) !important;
}

.active.a\:bg_black-_05,
.active > .a\:bg_black-_05 {
  background-color: rgba(19, 18, 18, 0.0075) !important;
}

.active.a\:bg_black-1,
.active > .a\:bg_black-1 {
  background-color: rgba(19, 18, 18, 0.025) !important;
}

.active.a\:bg_black-2,
.active > .a\:bg_black-2 {
  background-color: rgba(19, 18, 18, 0.1) !important;
}

.active.a\:bg_black-3,
.active > .a\:bg_black-3 {
  background-color: rgba(19, 18, 18, 0.25) !important;
}

.active.a\:bg_black-4,
.active > .a\:bg_black-4 {
  background-color: rgba(19, 18, 18, 0.38) !important;
}

.active.a\:bg_black-5,
.active > .a\:bg_black-5 {
  background-color: rgba(19, 18, 18, 0.5) !important;
}

.active.a\:bg_black-6,
.active > .a\:bg_black-6 {
  background-color: rgba(19, 18, 18, 0.62) !important;
}

.active.a\:bg_black-7,
.active > .a\:bg_black-7 {
  background-color: rgba(19, 18, 18, 0.75) !important;
}

.active.a\:bg_black-8,
.active > .a\:bg_black-8 {
  background-color: rgba(19, 18, 18, 0.9) !important;
}

.active.a\:bg_black-9,
.active > .a\:bg_black-9 {
  background-color: rgba(19, 18, 18, 0.975) !important;
}

.active.a\:bg_black-none,
.active > .a\:bg_black-none {
  background-color: #131212 !important;
}

.active.a\:c_black-0,
.active > .a\:c_black-0 {
  color: rgba(19, 18, 18, 0) !important;
}

.active.a\:c_black-_01,
.active > .a\:c_black-_01 {
  color: rgba(19, 18, 18, 0.005) !important;
}

.active.a\:c_black-_05,
.active > .a\:c_black-_05 {
  color: rgba(19, 18, 18, 0.0075) !important;
}

.active.a\:c_black-1,
.active > .a\:c_black-1 {
  color: rgba(19, 18, 18, 0.025) !important;
}

.active.a\:c_black-2,
.active > .a\:c_black-2 {
  color: rgba(19, 18, 18, 0.1) !important;
}

.active.a\:c_black-3,
.active > .a\:c_black-3 {
  color: rgba(19, 18, 18, 0.25) !important;
}

.active.a\:c_black-4,
.active > .a\:c_black-4 {
  color: rgba(19, 18, 18, 0.38) !important;
}

.active.a\:c_black-5,
.active > .a\:c_black-5 {
  color: rgba(19, 18, 18, 0.5) !important;
}

.active.a\:c_black-6,
.active > .a\:c_black-6 {
  color: rgba(19, 18, 18, 0.62) !important;
}

.active.a\:c_black-7,
.active > .a\:c_black-7 {
  color: rgba(19, 18, 18, 0.75) !important;
}

.active.a\:c_black-8,
.active > .a\:c_black-8 {
  color: rgba(19, 18, 18, 0.9) !important;
}

.active.a\:c_black-9,
.active > .a\:c_black-9 {
  color: rgba(19, 18, 18, 0.975) !important;
}

.active.a\:c_black-none,
.active > .a\:c_black-none {
  color: #131212 !important;
}

.active.a\:bg_primary, .active > .a\:bg_primary,.active.a\:bg_primary-0, .active > .a\:bg_primary-0 {
  background-color: var(--primary) !important;
}

.active.a\:bg_primary-1, .active > .a\:bg_primary-1 {
  background-color: hsla(var(--primary-h), calc(var(--primary-s) - var(--primary-s) * 0.05), calc(var(--primary-l) + (100% - var(--primary-l)) * 0.1), 1) !important;
}

.active.a\:bg_primary-2, .active > .a\:bg_primary-2 {
  background-color: hsla(var(--primary-h), calc(var(--primary-s) - var(--primary-s) * 0.125), calc(var(--primary-l) + (100% - var(--primary-l)) * 0.25), 1) !important;
}

.active.a\:bg_primary-3, .active > .a\:bg_primary-3 {
  background-color: hsla(var(--primary-h), calc(var(--primary-s) - var(--primary-s) * 0.25), calc(var(--primary-l) + (100% - var(--primary-l)) * 0.5), 1) !important;
}

.active.a\:bg_primary-4, .active > .a\:bg_primary-4 {
  background-color: hsla(var(--primary-h), calc(var(--primary-s) - var(--primary-s) * 0.375), calc(var(--primary-l) + (100% - var(--primary-l)) * 0.75), 1) !important;
}

.active.a\:bg_primary-5, .active > .a\:bg_primary-5 {
  background-color: hsla(var(--primary-h), calc(var(--primary-s) - var(--primary-s) * 0.45), calc(var(--primary-l) + (100% - var(--primary-l)) * 0.9), 1) !important;
}

.active.a\:bg_primary-n1, .active > .a\:bg_primary-n1 {
  background-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) !important;
}

.active.a\:bg_primary-n2, .active > .a\:bg_primary-n2 {
  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) !important;
}

.active.a\:bg_primary-n3, .active > .a\:bg_primary-n3 {
  background-color: hsla(var(--primary-h), calc(var(--primary-s) + (100% - var(--primary-s)) * 0.05), calc(var(--primary-l) - var(--primary-l) * 0.5), 1) !important;
}

.active.a\:bg_primary-n4, .active > .a\:bg_primary-n4 {
  background-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) !important;
}

.active.a\:bg_primary-n5, .active > .a\:bg_primary-n5 {
  background-color: hsla(var(--primary-h), calc(var(--primary-s) + (100% - var(--primary-s)) * 0.085), calc(var(--primary-l) - var(--primary-l) * 0.85), 1) !important;
}

.active.a\:c_primary, .active > .a\:c_primary,.active.a\:c_primary-0, .active > .a\:c_primary-0 {
  color: var(--primary) !important;
}

.active.a\:c_primary-1, .active > .a\:c_primary-1 {
  color: hsla(var(--primary-h), calc(var(--primary-s) - var(--primary-s) * 0.05), calc(var(--primary-l) + (100% - var(--primary-l)) * 0.1), 1) !important;
}

.active.a\:c_primary-2, .active > .a\:c_primary-2 {
  color: hsla(var(--primary-h), calc(var(--primary-s) - var(--primary-s) * 0.125), calc(var(--primary-l) + (100% - var(--primary-l)) * 0.25), 1) !important;
}

.active.a\:c_primary-3, .active > .a\:c_primary-3 {
  color: hsla(var(--primary-h), calc(var(--primary-s) - var(--primary-s) * 0.25), calc(var(--primary-l) + (100% - var(--primary-l)) * 0.5), 1) !important;
}

.active.a\:c_primary-4, .active > .a\:c_primary-4 {
  color: hsla(var(--primary-h), calc(var(--primary-s) - var(--primary-s) * 0.375), calc(var(--primary-l) + (100% - var(--primary-l)) * 0.75), 1) !important;
}

.active.a\:c_primary-5, .active > .a\:c_primary-5 {
  color: hsla(var(--primary-h), calc(var(--primary-s) - var(--primary-s) * 0.45), calc(var(--primary-l) + (100% - var(--primary-l)) * 0.9), 1) !important;
}

.active.a\:c_primary-n1, .active > .a\:c_primary-n1 {
  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) !important;
}

.active.a\:c_primary-n2, .active > .a\:c_primary-n2 {
  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) !important;
}

.active.a\:c_primary-n3, .active > .a\:c_primary-n3 {
  color: hsla(var(--primary-h), calc(var(--primary-s) + (100% - var(--primary-s)) * 0.05), calc(var(--primary-l) - var(--primary-l) * 0.5), 1) !important;
}

.active.a\:c_primary-n4, .active > .a\:c_primary-n4 {
  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) !important;
}

.active.a\:c_primary-n5, .active > .a\:c_primary-n5 {
  color: hsla(var(--primary-h), calc(var(--primary-s) + (100% - var(--primary-s)) * 0.085), calc(var(--primary-l) - var(--primary-l) * 0.85), 1) !important;
}

.active.a\:bg_secondary, .active > .a\:bg_secondary,.active.a\:bg_secondary-0, .active > .a\:bg_secondary-0 {
  background-color: var(--secondary) !important;
}

.active.a\:bg_secondary-1, .active > .a\:bg_secondary-1 {
  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) !important;
}

.active.a\:bg_secondary-2, .active > .a\:bg_secondary-2 {
  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) !important;
}

.active.a\:bg_secondary-3, .active > .a\:bg_secondary-3 {
  background-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) !important;
}

.active.a\:bg_secondary-4, .active > .a\:bg_secondary-4 {
  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) !important;
}

.active.a\:bg_secondary-5, .active > .a\:bg_secondary-5 {
  background-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) !important;
}

.active.a\:bg_secondary-n1, .active > .a\:bg_secondary-n1 {
  background-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) !important;
}

.active.a\:bg_secondary-n2, .active > .a\:bg_secondary-n2 {
  background-color: hsla(var(--secondary-h), calc(var(--secondary-s) + (100% - var(--secondary-s)) * 0.03), calc(var(--secondary-l) - var(--secondary-l) * 0.3), 1) !important;
}

.active.a\:bg_secondary-n3, .active > .a\:bg_secondary-n3 {
  background-color: hsla(var(--secondary-h), calc(var(--secondary-s) + (100% - var(--secondary-s)) * 0.05), calc(var(--secondary-l) - var(--secondary-l) * 0.5), 1) !important;
}

.active.a\:bg_secondary-n4, .active > .a\:bg_secondary-n4 {
  background-color: hsla(var(--secondary-h), calc(var(--secondary-s) + (100% - var(--secondary-s)) * 0.07), calc(var(--secondary-l) - var(--secondary-l) * 0.7), 1) !important;
}

.active.a\:bg_secondary-n5, .active > .a\:bg_secondary-n5 {
  background-color: hsla(var(--secondary-h), calc(var(--secondary-s) + (100% - var(--secondary-s)) * 0.085), calc(var(--secondary-l) - var(--secondary-l) * 0.85), 1) !important;
}

.active.a\:c_secondary, .active > .a\:c_secondary,.active.a\:c_secondary-0, .active > .a\:c_secondary-0 {
  color: var(--secondary) !important;
}

.active.a\:c_secondary-1, .active > .a\:c_secondary-1 {
  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) !important;
}

.active.a\:c_secondary-2, .active > .a\:c_secondary-2 {
  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) !important;
}

.active.a\:c_secondary-3, .active > .a\:c_secondary-3 {
  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) !important;
}

.active.a\:c_secondary-4, .active > .a\:c_secondary-4 {
  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) !important;
}

.active.a\:c_secondary-5, .active > .a\:c_secondary-5 {
  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) !important;
}

.active.a\:c_secondary-n1, .active > .a\:c_secondary-n1 {
  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) !important;
}

.active.a\:c_secondary-n2, .active > .a\:c_secondary-n2 {
  color: hsla(var(--secondary-h), calc(var(--secondary-s) + (100% - var(--secondary-s)) * 0.03), calc(var(--secondary-l) - var(--secondary-l) * 0.3), 1) !important;
}

.active.a\:c_secondary-n3, .active > .a\:c_secondary-n3 {
  color: hsla(var(--secondary-h), calc(var(--secondary-s) + (100% - var(--secondary-s)) * 0.05), calc(var(--secondary-l) - var(--secondary-l) * 0.5), 1) !important;
}

.active.a\:c_secondary-n4, .active > .a\:c_secondary-n4 {
  color: hsla(var(--secondary-h), calc(var(--secondary-s) + (100% - var(--secondary-s)) * 0.07), calc(var(--secondary-l) - var(--secondary-l) * 0.7), 1) !important;
}

.active.a\:c_secondary-n5, .active > .a\:c_secondary-n5 {
  color: hsla(var(--secondary-h), calc(var(--secondary-s) + (100% - var(--secondary-s)) * 0.085), calc(var(--secondary-l) - var(--secondary-l) * 0.85), 1) !important;
}

.active.a\:bg_success, .active > .a\:bg_success,.active.a\:bg_success-0, .active > .a\:bg_success-0 {
  background-color: var(--success) !important;
}

.active.a\:bg_success-1, .active > .a\:bg_success-1 {
  background-color: hsla(var(--success-h), calc(var(--success-s) - var(--success-s) * 0.05), calc(var(--success-l) + (100% - var(--success-l)) * 0.1), 1) !important;
}

.active.a\:bg_success-2, .active > .a\:bg_success-2 {
  background-color: hsla(var(--success-h), calc(var(--success-s) - var(--success-s) * 0.125), calc(var(--success-l) + (100% - var(--success-l)) * 0.25), 1) !important;
}

.active.a\:bg_success-3, .active > .a\:bg_success-3 {
  background-color: hsla(var(--success-h), calc(var(--success-s) - var(--success-s) * 0.25), calc(var(--success-l) + (100% - var(--success-l)) * 0.5), 1) !important;
}

.active.a\:bg_success-4, .active > .a\:bg_success-4 {
  background-color: hsla(var(--success-h), calc(var(--success-s) - var(--success-s) * 0.375), calc(var(--success-l) + (100% - var(--success-l)) * 0.75), 1) !important;
}

.active.a\:bg_success-5, .active > .a\:bg_success-5 {
  background-color: hsla(var(--success-h), calc(var(--success-s) - var(--success-s) * 0.45), calc(var(--success-l) + (100% - var(--success-l)) * 0.9), 1) !important;
}

.active.a\:bg_success-n1, .active > .a\:bg_success-n1 {
  background-color: hsla(var(--success-h), calc(var(--success-s) + (100% - var(--success-s)) * 0.015), calc(var(--success-l) - var(--success-l) * 0.15), 1) !important;
}

.active.a\:bg_success-n2, .active > .a\:bg_success-n2 {
  background-color: hsla(var(--success-h), calc(var(--success-s) + (100% - var(--success-s)) * 0.03), calc(var(--success-l) - var(--success-l) * 0.3), 1) !important;
}

.active.a\:bg_success-n3, .active > .a\:bg_success-n3 {
  background-color: hsla(var(--success-h), calc(var(--success-s) + (100% - var(--success-s)) * 0.05), calc(var(--success-l) - var(--success-l) * 0.5), 1) !important;
}

.active.a\:bg_success-n4, .active > .a\:bg_success-n4 {
  background-color: hsla(var(--success-h), calc(var(--success-s) + (100% - var(--success-s)) * 0.07), calc(var(--success-l) - var(--success-l) * 0.7), 1) !important;
}

.active.a\:bg_success-n5, .active > .a\:bg_success-n5 {
  background-color: hsla(var(--success-h), calc(var(--success-s) + (100% - var(--success-s)) * 0.085), calc(var(--success-l) - var(--success-l) * 0.85), 1) !important;
}

.active.a\:c_success, .active > .a\:c_success,.active.a\:c_success-0, .active > .a\:c_success-0 {
  color: var(--success) !important;
}

.active.a\:c_success-1, .active > .a\:c_success-1 {
  color: hsla(var(--success-h), calc(var(--success-s) - var(--success-s) * 0.05), calc(var(--success-l) + (100% - var(--success-l)) * 0.1), 1) !important;
}

.active.a\:c_success-2, .active > .a\:c_success-2 {
  color: hsla(var(--success-h), calc(var(--success-s) - var(--success-s) * 0.125), calc(var(--success-l) + (100% - var(--success-l)) * 0.25), 1) !important;
}

.active.a\:c_success-3, .active > .a\:c_success-3 {
  color: hsla(var(--success-h), calc(var(--success-s) - var(--success-s) * 0.25), calc(var(--success-l) + (100% - var(--success-l)) * 0.5), 1) !important;
}

.active.a\:c_success-4, .active > .a\:c_success-4 {
  color: hsla(var(--success-h), calc(var(--success-s) - var(--success-s) * 0.375), calc(var(--success-l) + (100% - var(--success-l)) * 0.75), 1) !important;
}

.active.a\:c_success-5, .active > .a\:c_success-5 {
  color: hsla(var(--success-h), calc(var(--success-s) - var(--success-s) * 0.45), calc(var(--success-l) + (100% - var(--success-l)) * 0.9), 1) !important;
}

.active.a\:c_success-n1, .active > .a\:c_success-n1 {
  color: hsla(var(--success-h), calc(var(--success-s) + (100% - var(--success-s)) * 0.015), calc(var(--success-l) - var(--success-l) * 0.15), 1) !important;
}

.active.a\:c_success-n2, .active > .a\:c_success-n2 {
  color: hsla(var(--success-h), calc(var(--success-s) + (100% - var(--success-s)) * 0.03), calc(var(--success-l) - var(--success-l) * 0.3), 1) !important;
}

.active.a\:c_success-n3, .active > .a\:c_success-n3 {
  color: hsla(var(--success-h), calc(var(--success-s) + (100% - var(--success-s)) * 0.05), calc(var(--success-l) - var(--success-l) * 0.5), 1) !important;
}

.active.a\:c_success-n4, .active > .a\:c_success-n4 {
  color: hsla(var(--success-h), calc(var(--success-s) + (100% - var(--success-s)) * 0.07), calc(var(--success-l) - var(--success-l) * 0.7), 1) !important;
}

.active.a\:c_success-n5, .active > .a\:c_success-n5 {
  color: hsla(var(--success-h), calc(var(--success-s) + (100% - var(--success-s)) * 0.085), calc(var(--success-l) - var(--success-l) * 0.85), 1) !important;
}

.active.a\:bg_shade, .active > .a\:bg_shade,.active.a\:bg_shade-0, .active > .a\:bg_shade-0 {
  background-color: var(--shade) !important;
}

.active.a\:bg_shade-1, .active > .a\:bg_shade-1 {
  background-color: hsla(var(--shade-h), calc(var(--shade-s) - var(--shade-s) * 0.05), calc(var(--shade-l) + (100% - var(--shade-l)) * 0.1), 1) !important;
}

.active.a\:bg_shade-2, .active > .a\:bg_shade-2 {
  background-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) !important;
}

.active.a\:bg_shade-3, .active > .a\:bg_shade-3 {
  background-color: hsla(var(--shade-h), calc(var(--shade-s) - var(--shade-s) * 0.25), calc(var(--shade-l) + (100% - var(--shade-l)) * 0.5), 1) !important;
}

.active.a\:bg_shade-4, .active > .a\:bg_shade-4 {
  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) !important;
}

.active.a\:bg_shade-5, .active > .a\:bg_shade-5 {
  background-color: hsla(var(--shade-h), calc(var(--shade-s) - var(--shade-s) * 0.45), calc(var(--shade-l) + (100% - var(--shade-l)) * 0.9), 1) !important;
}

.active.a\:bg_shade-n1, .active > .a\:bg_shade-n1 {
  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) !important;
}

.active.a\:bg_shade-n2, .active > .a\:bg_shade-n2 {
  background-color: hsla(var(--shade-h), calc(var(--shade-s) + (100% - var(--shade-s)) * 0.03), calc(var(--shade-l) - var(--shade-l) * 0.3), 1) !important;
}

.active.a\:bg_shade-n3, .active > .a\:bg_shade-n3 {
  background-color: hsla(var(--shade-h), calc(var(--shade-s) + (100% - var(--shade-s)) * 0.05), calc(var(--shade-l) - var(--shade-l) * 0.5), 1) !important;
}

.active.a\:bg_shade-n4, .active > .a\:bg_shade-n4 {
  background-color: hsla(var(--shade-h), calc(var(--shade-s) + (100% - var(--shade-s)) * 0.07), calc(var(--shade-l) - var(--shade-l) * 0.7), 1) !important;
}

.active.a\:bg_shade-n5, .active > .a\:bg_shade-n5 {
  background-color: hsla(var(--shade-h), calc(var(--shade-s) + (100% - var(--shade-s)) * 0.085), calc(var(--shade-l) - var(--shade-l) * 0.85), 1) !important;
}

.active.a\:c_shade, .active > .a\:c_shade,.active.a\:c_shade-0, .active > .a\:c_shade-0 {
  color: var(--shade) !important;
}

.active.a\:c_shade-1, .active > .a\:c_shade-1 {
  color: hsla(var(--shade-h), calc(var(--shade-s) - var(--shade-s) * 0.05), calc(var(--shade-l) + (100% - var(--shade-l)) * 0.1), 1) !important;
}

.active.a\:c_shade-2, .active > .a\:c_shade-2 {
  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) !important;
}

.active.a\:c_shade-3, .active > .a\:c_shade-3 {
  color: hsla(var(--shade-h), calc(var(--shade-s) - var(--shade-s) * 0.25), calc(var(--shade-l) + (100% - var(--shade-l)) * 0.5), 1) !important;
}

.active.a\:c_shade-4, .active > .a\:c_shade-4 {
  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) !important;
}

.active.a\:c_shade-5, .active > .a\:c_shade-5 {
  color: hsla(var(--shade-h), calc(var(--shade-s) - var(--shade-s) * 0.45), calc(var(--shade-l) + (100% - var(--shade-l)) * 0.9), 1) !important;
}

.active.a\:c_shade-n1, .active > .a\:c_shade-n1 {
  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) !important;
}

.active.a\:c_shade-n2, .active > .a\:c_shade-n2 {
  color: hsla(var(--shade-h), calc(var(--shade-s) + (100% - var(--shade-s)) * 0.03), calc(var(--shade-l) - var(--shade-l) * 0.3), 1) !important;
}

.active.a\:c_shade-n3, .active > .a\:c_shade-n3 {
  color: hsla(var(--shade-h), calc(var(--shade-s) + (100% - var(--shade-s)) * 0.05), calc(var(--shade-l) - var(--shade-l) * 0.5), 1) !important;
}

.active.a\:c_shade-n4, .active > .a\:c_shade-n4 {
  color: hsla(var(--shade-h), calc(var(--shade-s) + (100% - var(--shade-s)) * 0.07), calc(var(--shade-l) - var(--shade-l) * 0.7), 1) !important;
}

.active.a\:c_shade-n5, .active > .a\:c_shade-n5 {
  color: hsla(var(--shade-h), calc(var(--shade-s) + (100% - var(--shade-s)) * 0.085), calc(var(--shade-l) - var(--shade-l) * 0.85), 1) !important;
}

.active.a\:bg_warning, .active > .a\:bg_warning,.active.a\:bg_warning-0, .active > .a\:bg_warning-0 {
  background-color: var(--warning) !important;
}

.active.a\:bg_warning-1, .active > .a\:bg_warning-1 {
  background-color: hsla(var(--warning-h), calc(var(--warning-s) - var(--warning-s) * 0.05), calc(var(--warning-l) + (100% - var(--warning-l)) * 0.1), 1) !important;
}

.active.a\:bg_warning-2, .active > .a\:bg_warning-2 {
  background-color: hsla(var(--warning-h), calc(var(--warning-s) - var(--warning-s) * 0.125), calc(var(--warning-l) + (100% - var(--warning-l)) * 0.25), 1) !important;
}

.active.a\:bg_warning-3, .active > .a\:bg_warning-3 {
  background-color: hsla(var(--warning-h), calc(var(--warning-s) - var(--warning-s) * 0.25), calc(var(--warning-l) + (100% - var(--warning-l)) * 0.5), 1) !important;
}

.active.a\:bg_warning-4, .active > .a\:bg_warning-4 {
  background-color: hsla(var(--warning-h), calc(var(--warning-s) - var(--warning-s) * 0.375), calc(var(--warning-l) + (100% - var(--warning-l)) * 0.75), 1) !important;
}

.active.a\:bg_warning-5, .active > .a\:bg_warning-5 {
  background-color: hsla(var(--warning-h), calc(var(--warning-s) - var(--warning-s) * 0.45), calc(var(--warning-l) + (100% - var(--warning-l)) * 0.9), 1) !important;
}

.active.a\:bg_warning-n1, .active > .a\:bg_warning-n1 {
  background-color: hsla(var(--warning-h), calc(var(--warning-s) + (100% - var(--warning-s)) * 0.015), calc(var(--warning-l) - var(--warning-l) * 0.15), 1) !important;
}

.active.a\:bg_warning-n2, .active > .a\:bg_warning-n2 {
  background-color: hsla(var(--warning-h), calc(var(--warning-s) + (100% - var(--warning-s)) * 0.03), calc(var(--warning-l) - var(--warning-l) * 0.3), 1) !important;
}

.active.a\:bg_warning-n3, .active > .a\:bg_warning-n3 {
  background-color: hsla(var(--warning-h), calc(var(--warning-s) + (100% - var(--warning-s)) * 0.05), calc(var(--warning-l) - var(--warning-l) * 0.5), 1) !important;
}

.active.a\:bg_warning-n4, .active > .a\:bg_warning-n4 {
  background-color: hsla(var(--warning-h), calc(var(--warning-s) + (100% - var(--warning-s)) * 0.07), calc(var(--warning-l) - var(--warning-l) * 0.7), 1) !important;
}

.active.a\:bg_warning-n5, .active > .a\:bg_warning-n5 {
  background-color: hsla(var(--warning-h), calc(var(--warning-s) + (100% - var(--warning-s)) * 0.085), calc(var(--warning-l) - var(--warning-l) * 0.85), 1) !important;
}

.active.a\:c_warning, .active > .a\:c_warning,.active.a\:c_warning-0, .active > .a\:c_warning-0 {
  color: var(--warning) !important;
}

.active.a\:c_warning-1, .active > .a\:c_warning-1 {
  color: hsla(var(--warning-h), calc(var(--warning-s) - var(--warning-s) * 0.05), calc(var(--warning-l) + (100% - var(--warning-l)) * 0.1), 1) !important;
}

.active.a\:c_warning-2, .active > .a\:c_warning-2 {
  color: hsla(var(--warning-h), calc(var(--warning-s) - var(--warning-s) * 0.125), calc(var(--warning-l) + (100% - var(--warning-l)) * 0.25), 1) !important;
}

.active.a\:c_warning-3, .active > .a\:c_warning-3 {
  color: hsla(var(--warning-h), calc(var(--warning-s) - var(--warning-s) * 0.25), calc(var(--warning-l) + (100% - var(--warning-l)) * 0.5), 1) !important;
}

.active.a\:c_warning-4, .active > .a\:c_warning-4 {
  color: hsla(var(--warning-h), calc(var(--warning-s) - var(--warning-s) * 0.375), calc(var(--warning-l) + (100% - var(--warning-l)) * 0.75), 1) !important;
}

.active.a\:c_warning-5, .active > .a\:c_warning-5 {
  color: hsla(var(--warning-h), calc(var(--warning-s) - var(--warning-s) * 0.45), calc(var(--warning-l) + (100% - var(--warning-l)) * 0.9), 1) !important;
}

.active.a\:c_warning-n1, .active > .a\:c_warning-n1 {
  color: hsla(var(--warning-h), calc(var(--warning-s) + (100% - var(--warning-s)) * 0.015), calc(var(--warning-l) - var(--warning-l) * 0.15), 1) !important;
}

.active.a\:c_warning-n2, .active > .a\:c_warning-n2 {
  color: hsla(var(--warning-h), calc(var(--warning-s) + (100% - var(--warning-s)) * 0.03), calc(var(--warning-l) - var(--warning-l) * 0.3), 1) !important;
}

.active.a\:c_warning-n3, .active > .a\:c_warning-n3 {
  color: hsla(var(--warning-h), calc(var(--warning-s) + (100% - var(--warning-s)) * 0.05), calc(var(--warning-l) - var(--warning-l) * 0.5), 1) !important;
}

.active.a\:c_warning-n4, .active > .a\:c_warning-n4 {
  color: hsla(var(--warning-h), calc(var(--warning-s) + (100% - var(--warning-s)) * 0.07), calc(var(--warning-l) - var(--warning-l) * 0.7), 1) !important;
}

.active.a\:c_warning-n5, .active > .a\:c_warning-n5 {
  color: hsla(var(--warning-h), calc(var(--warning-s) + (100% - var(--warning-s)) * 0.085), calc(var(--warning-l) - var(--warning-l) * 0.85), 1) !important;
}

.active.a\:bg_alert, .active > .a\:bg_alert,.active.a\:bg_alert-0, .active > .a\:bg_alert-0 {
  background-color: var(--alert) !important;
}

.active.a\:bg_alert-1, .active > .a\:bg_alert-1 {
  background-color: hsla(var(--alert-h), calc(var(--alert-s) - var(--alert-s) * 0.05), calc(var(--alert-l) + (100% - var(--alert-l)) * 0.1), 1) !important;
}

.active.a\:bg_alert-2, .active > .a\:bg_alert-2 {
  background-color: hsla(var(--alert-h), calc(var(--alert-s) - var(--alert-s) * 0.125), calc(var(--alert-l) + (100% - var(--alert-l)) * 0.25), 1) !important;
}

.active.a\:bg_alert-3, .active > .a\:bg_alert-3 {
  background-color: hsla(var(--alert-h), calc(var(--alert-s) - var(--alert-s) * 0.25), calc(var(--alert-l) + (100% - var(--alert-l)) * 0.5), 1) !important;
}

.active.a\:bg_alert-4, .active > .a\:bg_alert-4 {
  background-color: hsla(var(--alert-h), calc(var(--alert-s) - var(--alert-s) * 0.375), calc(var(--alert-l) + (100% - var(--alert-l)) * 0.75), 1) !important;
}

.active.a\:bg_alert-5, .active > .a\:bg_alert-5 {
  background-color: hsla(var(--alert-h), calc(var(--alert-s) - var(--alert-s) * 0.45), calc(var(--alert-l) + (100% - var(--alert-l)) * 0.9), 1) !important;
}

.active.a\:bg_alert-n1, .active > .a\:bg_alert-n1 {
  background-color: hsla(var(--alert-h), calc(var(--alert-s) + (100% - var(--alert-s)) * 0.015), calc(var(--alert-l) - var(--alert-l) * 0.15), 1) !important;
}

.active.a\:bg_alert-n2, .active > .a\:bg_alert-n2 {
  background-color: hsla(var(--alert-h), calc(var(--alert-s) + (100% - var(--alert-s)) * 0.03), calc(var(--alert-l) - var(--alert-l) * 0.3), 1) !important;
}

.active.a\:bg_alert-n3, .active > .a\:bg_alert-n3 {
  background-color: hsla(var(--alert-h), calc(var(--alert-s) + (100% - var(--alert-s)) * 0.05), calc(var(--alert-l) - var(--alert-l) * 0.5), 1) !important;
}

.active.a\:bg_alert-n4, .active > .a\:bg_alert-n4 {
  background-color: hsla(var(--alert-h), calc(var(--alert-s) + (100% - var(--alert-s)) * 0.07), calc(var(--alert-l) - var(--alert-l) * 0.7), 1) !important;
}

.active.a\:bg_alert-n5, .active > .a\:bg_alert-n5 {
  background-color: hsla(var(--alert-h), calc(var(--alert-s) + (100% - var(--alert-s)) * 0.085), calc(var(--alert-l) - var(--alert-l) * 0.85), 1) !important;
}

.active.a\:c_alert, .active > .a\:c_alert,.active.a\:c_alert-0, .active > .a\:c_alert-0 {
  color: var(--alert) !important;
}

.active.a\:c_alert-1, .active > .a\:c_alert-1 {
  color: hsla(var(--alert-h), calc(var(--alert-s) - var(--alert-s) * 0.05), calc(var(--alert-l) + (100% - var(--alert-l)) * 0.1), 1) !important;
}

.active.a\:c_alert-2, .active > .a\:c_alert-2 {
  color: hsla(var(--alert-h), calc(var(--alert-s) - var(--alert-s) * 0.125), calc(var(--alert-l) + (100% - var(--alert-l)) * 0.25), 1) !important;
}

.active.a\:c_alert-3, .active > .a\:c_alert-3 {
  color: hsla(var(--alert-h), calc(var(--alert-s) - var(--alert-s) * 0.25), calc(var(--alert-l) + (100% - var(--alert-l)) * 0.5), 1) !important;
}

.active.a\:c_alert-4, .active > .a\:c_alert-4 {
  color: hsla(var(--alert-h), calc(var(--alert-s) - var(--alert-s) * 0.375), calc(var(--alert-l) + (100% - var(--alert-l)) * 0.75), 1) !important;
}

.active.a\:c_alert-5, .active > .a\:c_alert-5 {
  color: hsla(var(--alert-h), calc(var(--alert-s) - var(--alert-s) * 0.45), calc(var(--alert-l) + (100% - var(--alert-l)) * 0.9), 1) !important;
}

.active.a\:c_alert-n1, .active > .a\:c_alert-n1 {
  color: hsla(var(--alert-h), calc(var(--alert-s) + (100% - var(--alert-s)) * 0.015), calc(var(--alert-l) - var(--alert-l) * 0.15), 1) !important;
}

.active.a\:c_alert-n2, .active > .a\:c_alert-n2 {
  color: hsla(var(--alert-h), calc(var(--alert-s) + (100% - var(--alert-s)) * 0.03), calc(var(--alert-l) - var(--alert-l) * 0.3), 1) !important;
}

.active.a\:c_alert-n3, .active > .a\:c_alert-n3 {
  color: hsla(var(--alert-h), calc(var(--alert-s) + (100% - var(--alert-s)) * 0.05), calc(var(--alert-l) - var(--alert-l) * 0.5), 1) !important;
}

.active.a\:c_alert-n4, .active > .a\:c_alert-n4 {
  color: hsla(var(--alert-h), calc(var(--alert-s) + (100% - var(--alert-s)) * 0.07), calc(var(--alert-l) - var(--alert-l) * 0.7), 1) !important;
}

.active.a\:c_alert-n5, .active > .a\:c_alert-n5 {
  color: hsla(var(--alert-h), calc(var(--alert-s) + (100% - var(--alert-s)) * 0.085), calc(var(--alert-l) - var(--alert-l) * 0.85), 1) !important;
}

.active.a\:bg_navigation, .active > .a\:bg_navigation,.active.a\:bg_navigation-0, .active > .a\:bg_navigation-0 {
  background-color: var(--navigation) !important;
}

.active.a\:bg_navigation-1, .active > .a\:bg_navigation-1 {
  background-color: hsla(var(--navigation-h), calc(var(--navigation-s) - var(--navigation-s) * 0.05), calc(var(--navigation-l) + (100% - var(--navigation-l)) * 0.1), 1) !important;
}

.active.a\:bg_navigation-2, .active > .a\:bg_navigation-2 {
  background-color: hsla(var(--navigation-h), calc(var(--navigation-s) - var(--navigation-s) * 0.125), calc(var(--navigation-l) + (100% - var(--navigation-l)) * 0.25), 1) !important;
}

.active.a\:bg_navigation-3, .active > .a\:bg_navigation-3 {
  background-color: hsla(var(--navigation-h), calc(var(--navigation-s) - var(--navigation-s) * 0.25), calc(var(--navigation-l) + (100% - var(--navigation-l)) * 0.5), 1) !important;
}

.active.a\:bg_navigation-4, .active > .a\:bg_navigation-4 {
  background-color: hsla(var(--navigation-h), calc(var(--navigation-s) - var(--navigation-s) * 0.375), calc(var(--navigation-l) + (100% - var(--navigation-l)) * 0.75), 1) !important;
}

.active.a\:bg_navigation-5, .active > .a\:bg_navigation-5 {
  background-color: hsla(var(--navigation-h), calc(var(--navigation-s) - var(--navigation-s) * 0.45), calc(var(--navigation-l) + (100% - var(--navigation-l)) * 0.9), 1) !important;
}

.active.a\:bg_navigation-n1, .active > .a\:bg_navigation-n1 {
  background-color: hsla(var(--navigation-h), calc(var(--navigation-s) + (100% - var(--navigation-s)) * 0.015), calc(var(--navigation-l) - var(--navigation-l) * 0.15), 1) !important;
}

.active.a\:bg_navigation-n2, .active > .a\:bg_navigation-n2 {
  background-color: hsla(var(--navigation-h), calc(var(--navigation-s) + (100% - var(--navigation-s)) * 0.03), calc(var(--navigation-l) - var(--navigation-l) * 0.3), 1) !important;
}

.active.a\:bg_navigation-n3, .active > .a\:bg_navigation-n3 {
  background-color: hsla(var(--navigation-h), calc(var(--navigation-s) + (100% - var(--navigation-s)) * 0.05), calc(var(--navigation-l) - var(--navigation-l) * 0.5), 1) !important;
}

.active.a\:bg_navigation-n4, .active > .a\:bg_navigation-n4 {
  background-color: hsla(var(--navigation-h), calc(var(--navigation-s) + (100% - var(--navigation-s)) * 0.07), calc(var(--navigation-l) - var(--navigation-l) * 0.7), 1) !important;
}

.active.a\:bg_navigation-n5, .active > .a\:bg_navigation-n5 {
  background-color: hsla(var(--navigation-h), calc(var(--navigation-s) + (100% - var(--navigation-s)) * 0.085), calc(var(--navigation-l) - var(--navigation-l) * 0.85), 1) !important;
}

.active.a\:c_navigation, .active > .a\:c_navigation,.active.a\:c_navigation-0, .active > .a\:c_navigation-0 {
  color: var(--navigation) !important;
}

.active.a\:c_navigation-1, .active > .a\:c_navigation-1 {
  color: hsla(var(--navigation-h), calc(var(--navigation-s) - var(--navigation-s) * 0.05), calc(var(--navigation-l) + (100% - var(--navigation-l)) * 0.1), 1) !important;
}

.active.a\:c_navigation-2, .active > .a\:c_navigation-2 {
  color: hsla(var(--navigation-h), calc(var(--navigation-s) - var(--navigation-s) * 0.125), calc(var(--navigation-l) + (100% - var(--navigation-l)) * 0.25), 1) !important;
}

.active.a\:c_navigation-3, .active > .a\:c_navigation-3 {
  color: hsla(var(--navigation-h), calc(var(--navigation-s) - var(--navigation-s) * 0.25), calc(var(--navigation-l) + (100% - var(--navigation-l)) * 0.5), 1) !important;
}

.active.a\:c_navigation-4, .active > .a\:c_navigation-4 {
  color: hsla(var(--navigation-h), calc(var(--navigation-s) - var(--navigation-s) * 0.375), calc(var(--navigation-l) + (100% - var(--navigation-l)) * 0.75), 1) !important;
}

.active.a\:c_navigation-5, .active > .a\:c_navigation-5 {
  color: hsla(var(--navigation-h), calc(var(--navigation-s) - var(--navigation-s) * 0.45), calc(var(--navigation-l) + (100% - var(--navigation-l)) * 0.9), 1) !important;
}

.active.a\:c_navigation-n1, .active > .a\:c_navigation-n1 {
  color: hsla(var(--navigation-h), calc(var(--navigation-s) + (100% - var(--navigation-s)) * 0.015), calc(var(--navigation-l) - var(--navigation-l) * 0.15), 1) !important;
}

.active.a\:c_navigation-n2, .active > .a\:c_navigation-n2 {
  color: hsla(var(--navigation-h), calc(var(--navigation-s) + (100% - var(--navigation-s)) * 0.03), calc(var(--navigation-l) - var(--navigation-l) * 0.3), 1) !important;
}

.active.a\:c_navigation-n3, .active > .a\:c_navigation-n3 {
  color: hsla(var(--navigation-h), calc(var(--navigation-s) + (100% - var(--navigation-s)) * 0.05), calc(var(--navigation-l) - var(--navigation-l) * 0.5), 1) !important;
}

.active.a\:c_navigation-n4, .active > .a\:c_navigation-n4 {
  color: hsla(var(--navigation-h), calc(var(--navigation-s) + (100% - var(--navigation-s)) * 0.07), calc(var(--navigation-l) - var(--navigation-l) * 0.7), 1) !important;
}

.active.a\:c_navigation-n5, .active > .a\:c_navigation-n5 {
  color: hsla(var(--navigation-h), calc(var(--navigation-s) + (100% - var(--navigation-s)) * 0.085), calc(var(--navigation-l) - var(--navigation-l) * 0.85), 1) !important;
}

.active.a\:bg_accent, .active > .a\:bg_accent,.active.a\:bg_accent-0, .active > .a\:bg_accent-0 {
  background-color: var(--accent) !important;
}

.active.a\:bg_accent-1, .active > .a\:bg_accent-1 {
  background-color: hsla(var(--accent-h), calc(var(--accent-s) - var(--accent-s) * 0.05), calc(var(--accent-l) + (100% - var(--accent-l)) * 0.1), 1) !important;
}

.active.a\:bg_accent-2, .active > .a\:bg_accent-2 {
  background-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) !important;
}

.active.a\:bg_accent-3, .active > .a\:bg_accent-3 {
  background-color: hsla(var(--accent-h), calc(var(--accent-s) - var(--accent-s) * 0.25), calc(var(--accent-l) + (100% - var(--accent-l)) * 0.5), 1) !important;
}

.active.a\:bg_accent-4, .active > .a\:bg_accent-4 {
  background-color: hsla(var(--accent-h), calc(var(--accent-s) - var(--accent-s) * 0.375), calc(var(--accent-l) + (100% - var(--accent-l)) * 0.75), 1) !important;
}

.active.a\:bg_accent-5, .active > .a\:bg_accent-5 {
  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) !important;
}

.active.a\:bg_accent-n1, .active > .a\:bg_accent-n1 {
  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) !important;
}

.active.a\:bg_accent-n2, .active > .a\:bg_accent-n2 {
  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) !important;
}

.active.a\:bg_accent-n3, .active > .a\:bg_accent-n3 {
  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) !important;
}

.active.a\:bg_accent-n4, .active > .a\:bg_accent-n4 {
  background-color: hsla(var(--accent-h), calc(var(--accent-s) + (100% - var(--accent-s)) * 0.07), calc(var(--accent-l) - var(--accent-l) * 0.7), 1) !important;
}

.active.a\:bg_accent-n5, .active > .a\:bg_accent-n5 {
  background-color: hsla(var(--accent-h), calc(var(--accent-s) + (100% - var(--accent-s)) * 0.085), calc(var(--accent-l) - var(--accent-l) * 0.85), 1) !important;
}

.active.a\:c_accent, .active > .a\:c_accent,.active.a\:c_accent-0, .active > .a\:c_accent-0 {
  color: var(--accent) !important;
}

.active.a\:c_accent-1, .active > .a\:c_accent-1 {
  color: hsla(var(--accent-h), calc(var(--accent-s) - var(--accent-s) * 0.05), calc(var(--accent-l) + (100% - var(--accent-l)) * 0.1), 1) !important;
}

.active.a\:c_accent-2, .active > .a\:c_accent-2 {
  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) !important;
}

.active.a\:c_accent-3, .active > .a\:c_accent-3 {
  color: hsla(var(--accent-h), calc(var(--accent-s) - var(--accent-s) * 0.25), calc(var(--accent-l) + (100% - var(--accent-l)) * 0.5), 1) !important;
}

.active.a\:c_accent-4, .active > .a\:c_accent-4 {
  color: hsla(var(--accent-h), calc(var(--accent-s) - var(--accent-s) * 0.375), calc(var(--accent-l) + (100% - var(--accent-l)) * 0.75), 1) !important;
}

.active.a\:c_accent-5, .active > .a\:c_accent-5 {
  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) !important;
}

.active.a\:c_accent-n1, .active > .a\:c_accent-n1 {
  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) !important;
}

.active.a\:c_accent-n2, .active > .a\:c_accent-n2 {
  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) !important;
}

.active.a\:c_accent-n3, .active > .a\:c_accent-n3 {
  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) !important;
}

.active.a\:c_accent-n4, .active > .a\:c_accent-n4 {
  color: hsla(var(--accent-h), calc(var(--accent-s) + (100% - var(--accent-s)) * 0.07), calc(var(--accent-l) - var(--accent-l) * 0.7), 1) !important;
}

.active.a\:c_accent-n5, .active > .a\:c_accent-n5 {
  color: hsla(var(--accent-h), calc(var(--accent-s) + (100% - var(--accent-s)) * 0.085), calc(var(--accent-l) - var(--accent-l) * 0.85), 1) !important;
}

.active.a\:bg_info, .active > .a\:bg_info,.active.a\:bg_info-0, .active > .a\:bg_info-0 {
  background-color: var(--info) !important;
}

.active.a\:bg_info-1, .active > .a\:bg_info-1 {
  background-color: hsla(var(--info-h), calc(var(--info-s) - var(--info-s) * 0.05), calc(var(--info-l) + (100% - var(--info-l)) * 0.1), 1) !important;
}

.active.a\:bg_info-2, .active > .a\:bg_info-2 {
  background-color: hsla(var(--info-h), calc(var(--info-s) - var(--info-s) * 0.125), calc(var(--info-l) + (100% - var(--info-l)) * 0.25), 1) !important;
}

.active.a\:bg_info-3, .active > .a\:bg_info-3 {
  background-color: hsla(var(--info-h), calc(var(--info-s) - var(--info-s) * 0.25), calc(var(--info-l) + (100% - var(--info-l)) * 0.5), 1) !important;
}

.active.a\:bg_info-4, .active > .a\:bg_info-4 {
  background-color: hsla(var(--info-h), calc(var(--info-s) - var(--info-s) * 0.375), calc(var(--info-l) + (100% - var(--info-l)) * 0.75), 1) !important;
}

.active.a\:bg_info-5, .active > .a\:bg_info-5 {
  background-color: hsla(var(--info-h), calc(var(--info-s) - var(--info-s) * 0.45), calc(var(--info-l) + (100% - var(--info-l)) * 0.9), 1) !important;
}

.active.a\:bg_info-n1, .active > .a\:bg_info-n1 {
  background-color: hsla(var(--info-h), calc(var(--info-s) + (100% - var(--info-s)) * 0.015), calc(var(--info-l) - var(--info-l) * 0.15), 1) !important;
}

.active.a\:bg_info-n2, .active > .a\:bg_info-n2 {
  background-color: hsla(var(--info-h), calc(var(--info-s) + (100% - var(--info-s)) * 0.03), calc(var(--info-l) - var(--info-l) * 0.3), 1) !important;
}

.active.a\:bg_info-n3, .active > .a\:bg_info-n3 {
  background-color: hsla(var(--info-h), calc(var(--info-s) + (100% - var(--info-s)) * 0.05), calc(var(--info-l) - var(--info-l) * 0.5), 1) !important;
}

.active.a\:bg_info-n4, .active > .a\:bg_info-n4 {
  background-color: hsla(var(--info-h), calc(var(--info-s) + (100% - var(--info-s)) * 0.07), calc(var(--info-l) - var(--info-l) * 0.7), 1) !important;
}

.active.a\:bg_info-n5, .active > .a\:bg_info-n5 {
  background-color: hsla(var(--info-h), calc(var(--info-s) + (100% - var(--info-s)) * 0.085), calc(var(--info-l) - var(--info-l) * 0.85), 1) !important;
}

.active.a\:c_info, .active > .a\:c_info,.active.a\:c_info-0, .active > .a\:c_info-0 {
  color: var(--info) !important;
}

.active.a\:c_info-1, .active > .a\:c_info-1 {
  color: hsla(var(--info-h), calc(var(--info-s) - var(--info-s) * 0.05), calc(var(--info-l) + (100% - var(--info-l)) * 0.1), 1) !important;
}

.active.a\:c_info-2, .active > .a\:c_info-2 {
  color: hsla(var(--info-h), calc(var(--info-s) - var(--info-s) * 0.125), calc(var(--info-l) + (100% - var(--info-l)) * 0.25), 1) !important;
}

.active.a\:c_info-3, .active > .a\:c_info-3 {
  color: hsla(var(--info-h), calc(var(--info-s) - var(--info-s) * 0.25), calc(var(--info-l) + (100% - var(--info-l)) * 0.5), 1) !important;
}

.active.a\:c_info-4, .active > .a\:c_info-4 {
  color: hsla(var(--info-h), calc(var(--info-s) - var(--info-s) * 0.375), calc(var(--info-l) + (100% - var(--info-l)) * 0.75), 1) !important;
}

.active.a\:c_info-5, .active > .a\:c_info-5 {
  color: hsla(var(--info-h), calc(var(--info-s) - var(--info-s) * 0.45), calc(var(--info-l) + (100% - var(--info-l)) * 0.9), 1) !important;
}

.active.a\:c_info-n1, .active > .a\:c_info-n1 {
  color: hsla(var(--info-h), calc(var(--info-s) + (100% - var(--info-s)) * 0.015), calc(var(--info-l) - var(--info-l) * 0.15), 1) !important;
}

.active.a\:c_info-n2, .active > .a\:c_info-n2 {
  color: hsla(var(--info-h), calc(var(--info-s) + (100% - var(--info-s)) * 0.03), calc(var(--info-l) - var(--info-l) * 0.3), 1) !important;
}

.active.a\:c_info-n3, .active > .a\:c_info-n3 {
  color: hsla(var(--info-h), calc(var(--info-s) + (100% - var(--info-s)) * 0.05), calc(var(--info-l) - var(--info-l) * 0.5), 1) !important;
}

.active.a\:c_info-n4, .active > .a\:c_info-n4 {
  color: hsla(var(--info-h), calc(var(--info-s) + (100% - var(--info-s)) * 0.07), calc(var(--info-l) - var(--info-l) * 0.7), 1) !important;
}

.active.a\:c_info-n5, .active > .a\:c_info-n5 {
  color: hsla(var(--info-h), calc(var(--info-s) + (100% - var(--info-s)) * 0.085), calc(var(--info-l) - var(--info-l) * 0.85), 1) !important;
}

.active.a\:bg_highlight, .active > .a\:bg_highlight,.active.a\:bg_highlight-0, .active > .a\:bg_highlight-0 {
  background-color: var(--highlight) !important;
}

.active.a\:bg_highlight-1, .active > .a\:bg_highlight-1 {
  background-color: hsla(var(--highlight-h), calc(var(--highlight-s) - var(--highlight-s) * 0.05), calc(var(--highlight-l) + (100% - var(--highlight-l)) * 0.1), 1) !important;
}

.active.a\:bg_highlight-2, .active > .a\:bg_highlight-2 {
  background-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) !important;
}

.active.a\:bg_highlight-3, .active > .a\:bg_highlight-3 {
  background-color: hsla(var(--highlight-h), calc(var(--highlight-s) - var(--highlight-s) * 0.25), calc(var(--highlight-l) + (100% - var(--highlight-l)) * 0.5), 1) !important;
}

.active.a\:bg_highlight-4, .active > .a\:bg_highlight-4 {
  background-color: hsla(var(--highlight-h), calc(var(--highlight-s) - var(--highlight-s) * 0.375), calc(var(--highlight-l) + (100% - var(--highlight-l)) * 0.75), 1) !important;
}

.active.a\:bg_highlight-5, .active > .a\:bg_highlight-5 {
  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) !important;
}

.active.a\:bg_highlight-n1, .active > .a\:bg_highlight-n1 {
  background-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) !important;
}

.active.a\:bg_highlight-n2, .active > .a\:bg_highlight-n2 {
  background-color: hsla(var(--highlight-h), calc(var(--highlight-s) + (100% - var(--highlight-s)) * 0.03), calc(var(--highlight-l) - var(--highlight-l) * 0.3), 1) !important;
}

.active.a\:bg_highlight-n3, .active > .a\:bg_highlight-n3 {
  background-color: hsla(var(--highlight-h), calc(var(--highlight-s) + (100% - var(--highlight-s)) * 0.05), calc(var(--highlight-l) - var(--highlight-l) * 0.5), 1) !important;
}

.active.a\:bg_highlight-n4, .active > .a\:bg_highlight-n4 {
  background-color: hsla(var(--highlight-h), calc(var(--highlight-s) + (100% - var(--highlight-s)) * 0.07), calc(var(--highlight-l) - var(--highlight-l) * 0.7), 1) !important;
}

.active.a\:bg_highlight-n5, .active > .a\:bg_highlight-n5 {
  background-color: hsla(var(--highlight-h), calc(var(--highlight-s) + (100% - var(--highlight-s)) * 0.085), calc(var(--highlight-l) - var(--highlight-l) * 0.85), 1) !important;
}

.active.a\:c_highlight, .active > .a\:c_highlight,.active.a\:c_highlight-0, .active > .a\:c_highlight-0 {
  color: var(--highlight) !important;
}

.active.a\:c_highlight-1, .active > .a\:c_highlight-1 {
  color: hsla(var(--highlight-h), calc(var(--highlight-s) - var(--highlight-s) * 0.05), calc(var(--highlight-l) + (100% - var(--highlight-l)) * 0.1), 1) !important;
}

.active.a\:c_highlight-2, .active > .a\:c_highlight-2 {
  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) !important;
}

.active.a\:c_highlight-3, .active > .a\:c_highlight-3 {
  color: hsla(var(--highlight-h), calc(var(--highlight-s) - var(--highlight-s) * 0.25), calc(var(--highlight-l) + (100% - var(--highlight-l)) * 0.5), 1) !important;
}

.active.a\:c_highlight-4, .active > .a\:c_highlight-4 {
  color: hsla(var(--highlight-h), calc(var(--highlight-s) - var(--highlight-s) * 0.375), calc(var(--highlight-l) + (100% - var(--highlight-l)) * 0.75), 1) !important;
}

.active.a\:c_highlight-5, .active > .a\:c_highlight-5 {
  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) !important;
}

.active.a\:c_highlight-n1, .active > .a\:c_highlight-n1 {
  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) !important;
}

.active.a\:c_highlight-n2, .active > .a\:c_highlight-n2 {
  color: hsla(var(--highlight-h), calc(var(--highlight-s) + (100% - var(--highlight-s)) * 0.03), calc(var(--highlight-l) - var(--highlight-l) * 0.3), 1) !important;
}

.active.a\:c_highlight-n3, .active > .a\:c_highlight-n3 {
  color: hsla(var(--highlight-h), calc(var(--highlight-s) + (100% - var(--highlight-s)) * 0.05), calc(var(--highlight-l) - var(--highlight-l) * 0.5), 1) !important;
}

.active.a\:c_highlight-n4, .active > .a\:c_highlight-n4 {
  color: hsla(var(--highlight-h), calc(var(--highlight-s) + (100% - var(--highlight-s)) * 0.07), calc(var(--highlight-l) - var(--highlight-l) * 0.7), 1) !important;
}

.active.a\:c_highlight-n5, .active > .a\:c_highlight-n5 {
  color: hsla(var(--highlight-h), calc(var(--highlight-s) + (100% - var(--highlight-s)) * 0.085), calc(var(--highlight-l) - var(--highlight-l) * 0.85), 1) !important;
}

.active.a\:bg_acc, .active > .a\:bg_acc,.active.a\:bg_acc-0, .active > .a\:bg_acc-0 {
  background-color: var(--acc) !important;
}

.active.a\:bg_acc-1, .active > .a\:bg_acc-1 {
  background-color: hsla(var(--acc-h), calc(var(--acc-s) - var(--acc-s) * 0.05), calc(var(--acc-l) + (100% - var(--acc-l)) * 0.1), 1) !important;
}

.active.a\:bg_acc-2, .active > .a\:bg_acc-2 {
  background-color: hsla(var(--acc-h), calc(var(--acc-s) - var(--acc-s) * 0.125), calc(var(--acc-l) + (100% - var(--acc-l)) * 0.25), 1) !important;
}

.active.a\:bg_acc-3, .active > .a\:bg_acc-3 {
  background-color: hsla(var(--acc-h), calc(var(--acc-s) - var(--acc-s) * 0.25), calc(var(--acc-l) + (100% - var(--acc-l)) * 0.5), 1) !important;
}

.active.a\:bg_acc-4, .active > .a\:bg_acc-4 {
  background-color: hsla(var(--acc-h), calc(var(--acc-s) - var(--acc-s) * 0.375), calc(var(--acc-l) + (100% - var(--acc-l)) * 0.75), 1) !important;
}

.active.a\:bg_acc-5, .active > .a\:bg_acc-5 {
  background-color: hsla(var(--acc-h), calc(var(--acc-s) - var(--acc-s) * 0.45), calc(var(--acc-l) + (100% - var(--acc-l)) * 0.9), 1) !important;
}

.active.a\:bg_acc-n1, .active > .a\:bg_acc-n1 {
  background-color: hsla(var(--acc-h), calc(var(--acc-s) + (100% - var(--acc-s)) * 0.015), calc(var(--acc-l) - var(--acc-l) * 0.15), 1) !important;
}

.active.a\:bg_acc-n2, .active > .a\:bg_acc-n2 {
  background-color: hsla(var(--acc-h), calc(var(--acc-s) + (100% - var(--acc-s)) * 0.03), calc(var(--acc-l) - var(--acc-l) * 0.3), 1) !important;
}

.active.a\:bg_acc-n3, .active > .a\:bg_acc-n3 {
  background-color: hsla(var(--acc-h), calc(var(--acc-s) + (100% - var(--acc-s)) * 0.05), calc(var(--acc-l) - var(--acc-l) * 0.5), 1) !important;
}

.active.a\:bg_acc-n4, .active > .a\:bg_acc-n4 {
  background-color: hsla(var(--acc-h), calc(var(--acc-s) + (100% - var(--acc-s)) * 0.07), calc(var(--acc-l) - var(--acc-l) * 0.7), 1) !important;
}

.active.a\:bg_acc-n5, .active > .a\:bg_acc-n5 {
  background-color: hsla(var(--acc-h), calc(var(--acc-s) + (100% - var(--acc-s)) * 0.085), calc(var(--acc-l) - var(--acc-l) * 0.85), 1) !important;
}

.active.a\:c_acc, .active > .a\:c_acc,.active.a\:c_acc-0, .active > .a\:c_acc-0 {
  color: var(--acc) !important;
}

.active.a\:c_acc-1, .active > .a\:c_acc-1 {
  color: hsla(var(--acc-h), calc(var(--acc-s) - var(--acc-s) * 0.05), calc(var(--acc-l) + (100% - var(--acc-l)) * 0.1), 1) !important;
}

.active.a\:c_acc-2, .active > .a\:c_acc-2 {
  color: hsla(var(--acc-h), calc(var(--acc-s) - var(--acc-s) * 0.125), calc(var(--acc-l) + (100% - var(--acc-l)) * 0.25), 1) !important;
}

.active.a\:c_acc-3, .active > .a\:c_acc-3 {
  color: hsla(var(--acc-h), calc(var(--acc-s) - var(--acc-s) * 0.25), calc(var(--acc-l) + (100% - var(--acc-l)) * 0.5), 1) !important;
}

.active.a\:c_acc-4, .active > .a\:c_acc-4 {
  color: hsla(var(--acc-h), calc(var(--acc-s) - var(--acc-s) * 0.375), calc(var(--acc-l) + (100% - var(--acc-l)) * 0.75), 1) !important;
}

.active.a\:c_acc-5, .active > .a\:c_acc-5 {
  color: hsla(var(--acc-h), calc(var(--acc-s) - var(--acc-s) * 0.45), calc(var(--acc-l) + (100% - var(--acc-l)) * 0.9), 1) !important;
}

.active.a\:c_acc-n1, .active > .a\:c_acc-n1 {
  color: hsla(var(--acc-h), calc(var(--acc-s) + (100% - var(--acc-s)) * 0.015), calc(var(--acc-l) - var(--acc-l) * 0.15), 1) !important;
}

.active.a\:c_acc-n2, .active > .a\:c_acc-n2 {
  color: hsla(var(--acc-h), calc(var(--acc-s) + (100% - var(--acc-s)) * 0.03), calc(var(--acc-l) - var(--acc-l) * 0.3), 1) !important;
}

.active.a\:c_acc-n3, .active > .a\:c_acc-n3 {
  color: hsla(var(--acc-h), calc(var(--acc-s) + (100% - var(--acc-s)) * 0.05), calc(var(--acc-l) - var(--acc-l) * 0.5), 1) !important;
}

.active.a\:c_acc-n4, .active > .a\:c_acc-n4 {
  color: hsla(var(--acc-h), calc(var(--acc-s) + (100% - var(--acc-s)) * 0.07), calc(var(--acc-l) - var(--acc-l) * 0.7), 1) !important;
}

.active.a\:c_acc-n5, .active > .a\:c_acc-n5 {
  color: hsla(var(--acc-h), calc(var(--acc-s) + (100% - var(--acc-s)) * 0.085), calc(var(--acc-l) - var(--acc-l) * 0.85), 1) !important;
}

.a\:icon-show,
.active.a\:icon-hide,
.active > .a\:icon-hide {
  display: none !important;
}

.active > .a\:icon-show,
.active.a\:icon-show {
  display: inline-block !important;
}

.a\:visible,
.active > .a\:_none,
.active.a\:_none {
  display: none !important;
}

.active > .a\:_inline,
.active.a\:_inline {
  display: inline !important;
}

.active > .a\:_inline-block,
.active.a\:_inline-block {
  display: inline-block !important;
}

.active > .a\:_block,
.active.a\:_inline-block {
  display: block !important;
}

/*
active Display

<div class="p-b_3"><span class="bg_highlight br_radius c_white inline-block font_n1 p-7_3 p-x_5 sg"> Click the areas below to toggle the "active" state.</span></div>Toggle the display type of an object when it's parent 'active'

none            -  make the display none when parent is-active
inline          -  make the display inline when parent is-active
inline-block    -  make the display inline-block when parent is-active
block           -  make the display block when parent is-active


Markup:
<div class="p_5 is-active_toggle-function">
  <span class="a:bg_accent bg_shade-2 font_4 text_center br_1 br_solid br_shade-4 p_4">Click to Toggle parent is-active</span>
  <span class="a:{{modifier_class}} a:bg_accent bg_shade-2 font_4 text_center br_1 br_solid br_shade-4 p_4">Span with display:{{modifier_class}} when parent is active</span>
</div>

Weight: 10

Styleguide Interaction.States.Active.display

*/
/*
Hover

Decorate containers and text to show user interaction with simple hover, and focus effects. 


Weight: 130

Styleguide Interaction.States.Hover
*/
/* No styleguide reference. */
/*
  Hover: Background Color

  hovers can easily be added to objects by adding `h:` in front of the background color utility like `h:bg_primary`

  bg_alert              - background color modified light to dark
  bg_primary              - background color modified light to dark
  bg_shade              - background color modified light to dark
  bg_info              - background color modified light to dark
  bg_highlight              - background color success color
  bg_success              - background color modified light to dark
  bg_warning              - background color modified light to dark

  Markup:
  <div class="flex m_5">
    <div class="h:{{modifier_class}}-5 flex_auto text_center br_1 br_solid br_shade-4 p_2">5</div>
    <div class="h:{{modifier_class}}-4 flex_auto text_center br_1 br_solid br_shade-4 p_2">4</div>
    <div class="h:{{modifier_class}}-3 flex_auto text_center br_1 br_solid br_shade-4 p_2">3</div>
    <div class="h:{{modifier_class}}-2 flex_auto text_center br_1 br_solid br_shade-4 p_2">2</div>
    <div class="h:{{modifier_class}}-1 flex_auto text_center br_1 br_solid br_shade-4 p_2">1</div>
    <div class="h:{{modifier_class}}-0 flex_auto text_center br_1 br_solid br_shade-4 p_2">0</div>
    <div class="h:{{modifier_class}}-n1 flex_auto text_center br_1 br_solid br_shade-4 p_2 h:c_white">n1</div>
    <div class="h:{{modifier_class}}-n2 flex_auto text_center br_1 br_solid br_shade-4 p_2 h:c_white">n2</div>
    <div class="h:{{modifier_class}}-n3 flex_auto text_center br_1 br_solid br_shade-4 p_2 h:c_white">n3</div>
    <div class="h:{{modifier_class}}-n4 flex_auto text_center br_1 br_solid br_shade-4 p_2 h:c_white">n4</div>
    <div class="h:{{modifier_class}}-n5 flex_auto text_center br_1 br_solid br_shade-4 p_2 h:c_white">n5</div>
  </div>

  Weight: 30

  Styleguide Interaction.States.Hover.background

 */
a:focus-visible {
  color: unset;
}

*[class*="hover:"],
*[class*="h:"] {
  cursor: pointer;
  transition: all ease-out 0.2s;
}
*[class*="hover:"]:focus-visible,
*[class*="h:"]:focus-visible {
  border-color: inherit;
  background-color: inherit;
  color: inherit;
}

*[class*="hover:c"],
*[class*="h:c"] {
  transition: all ease-in 0.2s;
}

.h\:bg_primary:hover,.h\:bg_primary-0:hover {
  background-color: var(--primary) !important;
}

.h\:bg_primary-1:hover {
  background-color: hsla(var(--primary-h), calc(var(--primary-s) - var(--primary-s) * 0.05), calc(var(--primary-l) + (100% - var(--primary-l)) * 0.1), 1) !important;
}

.h\:bg_primary-2:hover {
  background-color: hsla(var(--primary-h), calc(var(--primary-s) - var(--primary-s) * 0.125), calc(var(--primary-l) + (100% - var(--primary-l)) * 0.25), 1) !important;
}

.h\:bg_primary-3:hover {
  background-color: hsla(var(--primary-h), calc(var(--primary-s) - var(--primary-s) * 0.25), calc(var(--primary-l) + (100% - var(--primary-l)) * 0.5), 1) !important;
}

.h\:bg_primary-4:hover {
  background-color: hsla(var(--primary-h), calc(var(--primary-s) - var(--primary-s) * 0.375), calc(var(--primary-l) + (100% - var(--primary-l)) * 0.75), 1) !important;
}

.h\:bg_primary-5:hover {
  background-color: hsla(var(--primary-h), calc(var(--primary-s) - var(--primary-s) * 0.45), calc(var(--primary-l) + (100% - var(--primary-l)) * 0.9), 1) !important;
}

.h\:bg_primary-n1:hover {
  background-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) !important;
}

.h\:bg_primary-n2:hover, .btn_acc-primary:hover {
  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) !important;
}

.h\:bg_primary-n3:hover {
  background-color: hsla(var(--primary-h), calc(var(--primary-s) + (100% - var(--primary-s)) * 0.05), calc(var(--primary-l) - var(--primary-l) * 0.5), 1) !important;
}

.h\:bg_primary-n4:hover {
  background-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) !important;
}

.h\:bg_primary-n5:hover {
  background-color: hsla(var(--primary-h), calc(var(--primary-s) + (100% - var(--primary-s)) * 0.085), calc(var(--primary-l) - var(--primary-l) * 0.85), 1) !important;
}

.h\:c_primary:hover,.h\:c_primary-0:hover {
  color: var(--primary) !important;
}

.h\:c_primary-1:hover {
  color: hsla(var(--primary-h), calc(var(--primary-s) - var(--primary-s) * 0.05), calc(var(--primary-l) + (100% - var(--primary-l)) * 0.1), 1) !important;
}

.h\:c_primary-2:hover {
  color: hsla(var(--primary-h), calc(var(--primary-s) - var(--primary-s) * 0.125), calc(var(--primary-l) + (100% - var(--primary-l)) * 0.25), 1) !important;
}

.h\:c_primary-3:hover {
  color: hsla(var(--primary-h), calc(var(--primary-s) - var(--primary-s) * 0.25), calc(var(--primary-l) + (100% - var(--primary-l)) * 0.5), 1) !important;
}

.h\:c_primary-4:hover {
  color: hsla(var(--primary-h), calc(var(--primary-s) - var(--primary-s) * 0.375), calc(var(--primary-l) + (100% - var(--primary-l)) * 0.75), 1) !important;
}

.h\:c_primary-5:hover {
  color: hsla(var(--primary-h), calc(var(--primary-s) - var(--primary-s) * 0.45), calc(var(--primary-l) + (100% - var(--primary-l)) * 0.9), 1) !important;
}

.h\:c_primary-n1:hover {
  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) !important;
}

.h\:c_primary-n2:hover {
  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) !important;
}

.h\:c_primary-n3:hover {
  color: hsla(var(--primary-h), calc(var(--primary-s) + (100% - var(--primary-s)) * 0.05), calc(var(--primary-l) - var(--primary-l) * 0.5), 1) !important;
}

.h\:c_primary-n4:hover {
  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) !important;
}

.h\:c_primary-n5:hover {
  color: hsla(var(--primary-h), calc(var(--primary-s) + (100% - var(--primary-s)) * 0.085), calc(var(--primary-l) - var(--primary-l) * 0.85), 1) !important;
}

.h\:br_primary:hover,.h\:br_primary-0:hover {
  border-color: var(--primary) !important;
}

.h\:br_primary-1:hover {
  border-color: hsla(var(--primary-h), calc(var(--primary-s) - var(--primary-s) * 0.05), calc(var(--primary-l) + (100% - var(--primary-l)) * 0.1), 1) !important;
}

.h\:br_primary-2:hover {
  border-color: hsla(var(--primary-h), calc(var(--primary-s) - var(--primary-s) * 0.125), calc(var(--primary-l) + (100% - var(--primary-l)) * 0.25), 1) !important;
}

.h\:br_primary-3:hover {
  border-color: hsla(var(--primary-h), calc(var(--primary-s) - var(--primary-s) * 0.25), calc(var(--primary-l) + (100% - var(--primary-l)) * 0.5), 1) !important;
}

.h\:br_primary-4:hover {
  border-color: hsla(var(--primary-h), calc(var(--primary-s) - var(--primary-s) * 0.375), calc(var(--primary-l) + (100% - var(--primary-l)) * 0.75), 1) !important;
}

.h\:br_primary-5:hover {
  border-color: hsla(var(--primary-h), calc(var(--primary-s) - var(--primary-s) * 0.45), calc(var(--primary-l) + (100% - var(--primary-l)) * 0.9), 1) !important;
}

.h\:br_primary-n1:hover {
  border-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) !important;
}

.h\:br_primary-n2:hover {
  border-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) !important;
}

.h\:br_primary-n3:hover {
  border-color: hsla(var(--primary-h), calc(var(--primary-s) + (100% - var(--primary-s)) * 0.05), calc(var(--primary-l) - var(--primary-l) * 0.5), 1) !important;
}

.h\:br_primary-n4:hover {
  border-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) !important;
}

.h\:br_primary-n5:hover {
  border-color: hsla(var(--primary-h), calc(var(--primary-s) + (100% - var(--primary-s)) * 0.085), calc(var(--primary-l) - var(--primary-l) * 0.85), 1) !important;
}

.h\:bg_secondary:hover,.h\:bg_secondary-0:hover {
  background-color: var(--secondary) !important;
}

.h\:bg_secondary-1:hover {
  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) !important;
}

.h\:bg_secondary-2:hover {
  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) !important;
}

.h\:bg_secondary-3:hover {
  background-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) !important;
}

.h\:bg_secondary-4:hover {
  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) !important;
}

.h\:bg_secondary-5:hover {
  background-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) !important;
}

.h\:bg_secondary-n1:hover {
  background-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) !important;
}

.h\:bg_secondary-n2:hover {
  background-color: hsla(var(--secondary-h), calc(var(--secondary-s) + (100% - var(--secondary-s)) * 0.03), calc(var(--secondary-l) - var(--secondary-l) * 0.3), 1) !important;
}

.h\:bg_secondary-n3:hover {
  background-color: hsla(var(--secondary-h), calc(var(--secondary-s) + (100% - var(--secondary-s)) * 0.05), calc(var(--secondary-l) - var(--secondary-l) * 0.5), 1) !important;
}

.h\:bg_secondary-n4:hover {
  background-color: hsla(var(--secondary-h), calc(var(--secondary-s) + (100% - var(--secondary-s)) * 0.07), calc(var(--secondary-l) - var(--secondary-l) * 0.7), 1) !important;
}

.h\:bg_secondary-n5:hover {
  background-color: hsla(var(--secondary-h), calc(var(--secondary-s) + (100% - var(--secondary-s)) * 0.085), calc(var(--secondary-l) - var(--secondary-l) * 0.85), 1) !important;
}

.h\:c_secondary:hover,.h\:c_secondary-0:hover {
  color: var(--secondary) !important;
}

.h\:c_secondary-1:hover {
  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) !important;
}

.h\:c_secondary-2:hover {
  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) !important;
}

.h\:c_secondary-3:hover {
  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) !important;
}

.h\:c_secondary-4:hover {
  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) !important;
}

.h\:c_secondary-5:hover {
  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) !important;
}

.h\:c_secondary-n1:hover {
  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) !important;
}

.h\:c_secondary-n2:hover {
  color: hsla(var(--secondary-h), calc(var(--secondary-s) + (100% - var(--secondary-s)) * 0.03), calc(var(--secondary-l) - var(--secondary-l) * 0.3), 1) !important;
}

.h\:c_secondary-n3:hover {
  color: hsla(var(--secondary-h), calc(var(--secondary-s) + (100% - var(--secondary-s)) * 0.05), calc(var(--secondary-l) - var(--secondary-l) * 0.5), 1) !important;
}

.h\:c_secondary-n4:hover {
  color: hsla(var(--secondary-h), calc(var(--secondary-s) + (100% - var(--secondary-s)) * 0.07), calc(var(--secondary-l) - var(--secondary-l) * 0.7), 1) !important;
}

.h\:c_secondary-n5:hover {
  color: hsla(var(--secondary-h), calc(var(--secondary-s) + (100% - var(--secondary-s)) * 0.085), calc(var(--secondary-l) - var(--secondary-l) * 0.85), 1) !important;
}

.h\:br_secondary:hover,.h\:br_secondary-0:hover {
  border-color: var(--secondary) !important;
}

.h\:br_secondary-1:hover {
  border-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) !important;
}

.h\:br_secondary-2:hover {
  border-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) !important;
}

.h\:br_secondary-3:hover {
  border-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) !important;
}

.h\:br_secondary-4:hover {
  border-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) !important;
}

.h\:br_secondary-5:hover {
  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) !important;
}

.h\:br_secondary-n1:hover {
  border-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) !important;
}

.h\:br_secondary-n2:hover {
  border-color: hsla(var(--secondary-h), calc(var(--secondary-s) + (100% - var(--secondary-s)) * 0.03), calc(var(--secondary-l) - var(--secondary-l) * 0.3), 1) !important;
}

.h\:br_secondary-n3:hover {
  border-color: hsla(var(--secondary-h), calc(var(--secondary-s) + (100% - var(--secondary-s)) * 0.05), calc(var(--secondary-l) - var(--secondary-l) * 0.5), 1) !important;
}

.h\:br_secondary-n4:hover {
  border-color: hsla(var(--secondary-h), calc(var(--secondary-s) + (100% - var(--secondary-s)) * 0.07), calc(var(--secondary-l) - var(--secondary-l) * 0.7), 1) !important;
}

.h\:br_secondary-n5:hover {
  border-color: hsla(var(--secondary-h), calc(var(--secondary-s) + (100% - var(--secondary-s)) * 0.085), calc(var(--secondary-l) - var(--secondary-l) * 0.85), 1) !important;
}

.h\:bg_success:hover,.h\:bg_success-0:hover {
  background-color: var(--success) !important;
}

.h\:bg_success-1:hover {
  background-color: hsla(var(--success-h), calc(var(--success-s) - var(--success-s) * 0.05), calc(var(--success-l) + (100% - var(--success-l)) * 0.1), 1) !important;
}

.h\:bg_success-2:hover {
  background-color: hsla(var(--success-h), calc(var(--success-s) - var(--success-s) * 0.125), calc(var(--success-l) + (100% - var(--success-l)) * 0.25), 1) !important;
}

.h\:bg_success-3:hover {
  background-color: hsla(var(--success-h), calc(var(--success-s) - var(--success-s) * 0.25), calc(var(--success-l) + (100% - var(--success-l)) * 0.5), 1) !important;
}

.h\:bg_success-4:hover {
  background-color: hsla(var(--success-h), calc(var(--success-s) - var(--success-s) * 0.375), calc(var(--success-l) + (100% - var(--success-l)) * 0.75), 1) !important;
}

.h\:bg_success-5:hover {
  background-color: hsla(var(--success-h), calc(var(--success-s) - var(--success-s) * 0.45), calc(var(--success-l) + (100% - var(--success-l)) * 0.9), 1) !important;
}

.h\:bg_success-n1:hover {
  background-color: hsla(var(--success-h), calc(var(--success-s) + (100% - var(--success-s)) * 0.015), calc(var(--success-l) - var(--success-l) * 0.15), 1) !important;
}

.h\:bg_success-n2:hover {
  background-color: hsla(var(--success-h), calc(var(--success-s) + (100% - var(--success-s)) * 0.03), calc(var(--success-l) - var(--success-l) * 0.3), 1) !important;
}

.h\:bg_success-n3:hover {
  background-color: hsla(var(--success-h), calc(var(--success-s) + (100% - var(--success-s)) * 0.05), calc(var(--success-l) - var(--success-l) * 0.5), 1) !important;
}

.h\:bg_success-n4:hover {
  background-color: hsla(var(--success-h), calc(var(--success-s) + (100% - var(--success-s)) * 0.07), calc(var(--success-l) - var(--success-l) * 0.7), 1) !important;
}

.h\:bg_success-n5:hover {
  background-color: hsla(var(--success-h), calc(var(--success-s) + (100% - var(--success-s)) * 0.085), calc(var(--success-l) - var(--success-l) * 0.85), 1) !important;
}

.h\:c_success:hover,.h\:c_success-0:hover {
  color: var(--success) !important;
}

.h\:c_success-1:hover {
  color: hsla(var(--success-h), calc(var(--success-s) - var(--success-s) * 0.05), calc(var(--success-l) + (100% - var(--success-l)) * 0.1), 1) !important;
}

.h\:c_success-2:hover {
  color: hsla(var(--success-h), calc(var(--success-s) - var(--success-s) * 0.125), calc(var(--success-l) + (100% - var(--success-l)) * 0.25), 1) !important;
}

.h\:c_success-3:hover {
  color: hsla(var(--success-h), calc(var(--success-s) - var(--success-s) * 0.25), calc(var(--success-l) + (100% - var(--success-l)) * 0.5), 1) !important;
}

.h\:c_success-4:hover {
  color: hsla(var(--success-h), calc(var(--success-s) - var(--success-s) * 0.375), calc(var(--success-l) + (100% - var(--success-l)) * 0.75), 1) !important;
}

.h\:c_success-5:hover {
  color: hsla(var(--success-h), calc(var(--success-s) - var(--success-s) * 0.45), calc(var(--success-l) + (100% - var(--success-l)) * 0.9), 1) !important;
}

.h\:c_success-n1:hover {
  color: hsla(var(--success-h), calc(var(--success-s) + (100% - var(--success-s)) * 0.015), calc(var(--success-l) - var(--success-l) * 0.15), 1) !important;
}

.h\:c_success-n2:hover {
  color: hsla(var(--success-h), calc(var(--success-s) + (100% - var(--success-s)) * 0.03), calc(var(--success-l) - var(--success-l) * 0.3), 1) !important;
}

.h\:c_success-n3:hover {
  color: hsla(var(--success-h), calc(var(--success-s) + (100% - var(--success-s)) * 0.05), calc(var(--success-l) - var(--success-l) * 0.5), 1) !important;
}

.h\:c_success-n4:hover {
  color: hsla(var(--success-h), calc(var(--success-s) + (100% - var(--success-s)) * 0.07), calc(var(--success-l) - var(--success-l) * 0.7), 1) !important;
}

.h\:c_success-n5:hover {
  color: hsla(var(--success-h), calc(var(--success-s) + (100% - var(--success-s)) * 0.085), calc(var(--success-l) - var(--success-l) * 0.85), 1) !important;
}

.h\:br_success:hover,.h\:br_success-0:hover {
  border-color: var(--success) !important;
}

.h\:br_success-1:hover {
  border-color: hsla(var(--success-h), calc(var(--success-s) - var(--success-s) * 0.05), calc(var(--success-l) + (100% - var(--success-l)) * 0.1), 1) !important;
}

.h\:br_success-2:hover {
  border-color: hsla(var(--success-h), calc(var(--success-s) - var(--success-s) * 0.125), calc(var(--success-l) + (100% - var(--success-l)) * 0.25), 1) !important;
}

.h\:br_success-3:hover {
  border-color: hsla(var(--success-h), calc(var(--success-s) - var(--success-s) * 0.25), calc(var(--success-l) + (100% - var(--success-l)) * 0.5), 1) !important;
}

.h\:br_success-4:hover {
  border-color: hsla(var(--success-h), calc(var(--success-s) - var(--success-s) * 0.375), calc(var(--success-l) + (100% - var(--success-l)) * 0.75), 1) !important;
}

.h\:br_success-5:hover {
  border-color: hsla(var(--success-h), calc(var(--success-s) - var(--success-s) * 0.45), calc(var(--success-l) + (100% - var(--success-l)) * 0.9), 1) !important;
}

.h\:br_success-n1:hover {
  border-color: hsla(var(--success-h), calc(var(--success-s) + (100% - var(--success-s)) * 0.015), calc(var(--success-l) - var(--success-l) * 0.15), 1) !important;
}

.h\:br_success-n2:hover {
  border-color: hsla(var(--success-h), calc(var(--success-s) + (100% - var(--success-s)) * 0.03), calc(var(--success-l) - var(--success-l) * 0.3), 1) !important;
}

.h\:br_success-n3:hover {
  border-color: hsla(var(--success-h), calc(var(--success-s) + (100% - var(--success-s)) * 0.05), calc(var(--success-l) - var(--success-l) * 0.5), 1) !important;
}

.h\:br_success-n4:hover {
  border-color: hsla(var(--success-h), calc(var(--success-s) + (100% - var(--success-s)) * 0.07), calc(var(--success-l) - var(--success-l) * 0.7), 1) !important;
}

.h\:br_success-n5:hover {
  border-color: hsla(var(--success-h), calc(var(--success-s) + (100% - var(--success-s)) * 0.085), calc(var(--success-l) - var(--success-l) * 0.85), 1) !important;
}

.h\:bg_shade:hover,.h\:bg_shade-0:hover {
  background-color: var(--shade) !important;
}

.h\:bg_shade-1:hover {
  background-color: hsla(var(--shade-h), calc(var(--shade-s) - var(--shade-s) * 0.05), calc(var(--shade-l) + (100% - var(--shade-l)) * 0.1), 1) !important;
}

.h\:bg_shade-2:hover {
  background-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) !important;
}

.h\:bg_shade-3:hover {
  background-color: hsla(var(--shade-h), calc(var(--shade-s) - var(--shade-s) * 0.25), calc(var(--shade-l) + (100% - var(--shade-l)) * 0.5), 1) !important;
}

.h\:bg_shade-4:hover {
  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) !important;
}

.h\:bg_shade-5:hover {
  background-color: hsla(var(--shade-h), calc(var(--shade-s) - var(--shade-s) * 0.45), calc(var(--shade-l) + (100% - var(--shade-l)) * 0.9), 1) !important;
}

.h\:bg_shade-n1:hover {
  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) !important;
}

.h\:bg_shade-n2:hover {
  background-color: hsla(var(--shade-h), calc(var(--shade-s) + (100% - var(--shade-s)) * 0.03), calc(var(--shade-l) - var(--shade-l) * 0.3), 1) !important;
}

.h\:bg_shade-n3:hover {
  background-color: hsla(var(--shade-h), calc(var(--shade-s) + (100% - var(--shade-s)) * 0.05), calc(var(--shade-l) - var(--shade-l) * 0.5), 1) !important;
}

.h\:bg_shade-n4:hover {
  background-color: hsla(var(--shade-h), calc(var(--shade-s) + (100% - var(--shade-s)) * 0.07), calc(var(--shade-l) - var(--shade-l) * 0.7), 1) !important;
}

.h\:bg_shade-n5:hover {
  background-color: hsla(var(--shade-h), calc(var(--shade-s) + (100% - var(--shade-s)) * 0.085), calc(var(--shade-l) - var(--shade-l) * 0.85), 1) !important;
}

.h\:c_shade:hover,.h\:c_shade-0:hover {
  color: var(--shade) !important;
}

.h\:c_shade-1:hover {
  color: hsla(var(--shade-h), calc(var(--shade-s) - var(--shade-s) * 0.05), calc(var(--shade-l) + (100% - var(--shade-l)) * 0.1), 1) !important;
}

.h\:c_shade-2:hover {
  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) !important;
}

.h\:c_shade-3:hover {
  color: hsla(var(--shade-h), calc(var(--shade-s) - var(--shade-s) * 0.25), calc(var(--shade-l) + (100% - var(--shade-l)) * 0.5), 1) !important;
}

.h\:c_shade-4:hover {
  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) !important;
}

.h\:c_shade-5:hover {
  color: hsla(var(--shade-h), calc(var(--shade-s) - var(--shade-s) * 0.45), calc(var(--shade-l) + (100% - var(--shade-l)) * 0.9), 1) !important;
}

.h\:c_shade-n1:hover {
  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) !important;
}

.h\:c_shade-n2:hover {
  color: hsla(var(--shade-h), calc(var(--shade-s) + (100% - var(--shade-s)) * 0.03), calc(var(--shade-l) - var(--shade-l) * 0.3), 1) !important;
}

.h\:c_shade-n3:hover {
  color: hsla(var(--shade-h), calc(var(--shade-s) + (100% - var(--shade-s)) * 0.05), calc(var(--shade-l) - var(--shade-l) * 0.5), 1) !important;
}

.h\:c_shade-n4:hover {
  color: hsla(var(--shade-h), calc(var(--shade-s) + (100% - var(--shade-s)) * 0.07), calc(var(--shade-l) - var(--shade-l) * 0.7), 1) !important;
}

.h\:c_shade-n5:hover {
  color: hsla(var(--shade-h), calc(var(--shade-s) + (100% - var(--shade-s)) * 0.085), calc(var(--shade-l) - var(--shade-l) * 0.85), 1) !important;
}

.h\:br_shade:hover,.h\:br_shade-0:hover {
  border-color: var(--shade) !important;
}

.h\:br_shade-1:hover {
  border-color: hsla(var(--shade-h), calc(var(--shade-s) - var(--shade-s) * 0.05), calc(var(--shade-l) + (100% - var(--shade-l)) * 0.1), 1) !important;
}

.h\:br_shade-2:hover {
  border-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) !important;
}

.h\:br_shade-3:hover {
  border-color: hsla(var(--shade-h), calc(var(--shade-s) - var(--shade-s) * 0.25), calc(var(--shade-l) + (100% - var(--shade-l)) * 0.5), 1) !important;
}

.h\:br_shade-4:hover {
  border-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) !important;
}

.h\:br_shade-5:hover {
  border-color: hsla(var(--shade-h), calc(var(--shade-s) - var(--shade-s) * 0.45), calc(var(--shade-l) + (100% - var(--shade-l)) * 0.9), 1) !important;
}

.h\:br_shade-n1:hover {
  border-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) !important;
}

.h\:br_shade-n2:hover {
  border-color: hsla(var(--shade-h), calc(var(--shade-s) + (100% - var(--shade-s)) * 0.03), calc(var(--shade-l) - var(--shade-l) * 0.3), 1) !important;
}

.h\:br_shade-n3:hover {
  border-color: hsla(var(--shade-h), calc(var(--shade-s) + (100% - var(--shade-s)) * 0.05), calc(var(--shade-l) - var(--shade-l) * 0.5), 1) !important;
}

.h\:br_shade-n4:hover {
  border-color: hsla(var(--shade-h), calc(var(--shade-s) + (100% - var(--shade-s)) * 0.07), calc(var(--shade-l) - var(--shade-l) * 0.7), 1) !important;
}

.h\:br_shade-n5:hover {
  border-color: hsla(var(--shade-h), calc(var(--shade-s) + (100% - var(--shade-s)) * 0.085), calc(var(--shade-l) - var(--shade-l) * 0.85), 1) !important;
}

.h\:bg_warning:hover,.h\:bg_warning-0:hover {
  background-color: var(--warning) !important;
}

.h\:bg_warning-1:hover {
  background-color: hsla(var(--warning-h), calc(var(--warning-s) - var(--warning-s) * 0.05), calc(var(--warning-l) + (100% - var(--warning-l)) * 0.1), 1) !important;
}

.h\:bg_warning-2:hover {
  background-color: hsla(var(--warning-h), calc(var(--warning-s) - var(--warning-s) * 0.125), calc(var(--warning-l) + (100% - var(--warning-l)) * 0.25), 1) !important;
}

.h\:bg_warning-3:hover {
  background-color: hsla(var(--warning-h), calc(var(--warning-s) - var(--warning-s) * 0.25), calc(var(--warning-l) + (100% - var(--warning-l)) * 0.5), 1) !important;
}

.h\:bg_warning-4:hover {
  background-color: hsla(var(--warning-h), calc(var(--warning-s) - var(--warning-s) * 0.375), calc(var(--warning-l) + (100% - var(--warning-l)) * 0.75), 1) !important;
}

.h\:bg_warning-5:hover {
  background-color: hsla(var(--warning-h), calc(var(--warning-s) - var(--warning-s) * 0.45), calc(var(--warning-l) + (100% - var(--warning-l)) * 0.9), 1) !important;
}

.h\:bg_warning-n1:hover {
  background-color: hsla(var(--warning-h), calc(var(--warning-s) + (100% - var(--warning-s)) * 0.015), calc(var(--warning-l) - var(--warning-l) * 0.15), 1) !important;
}

.h\:bg_warning-n2:hover {
  background-color: hsla(var(--warning-h), calc(var(--warning-s) + (100% - var(--warning-s)) * 0.03), calc(var(--warning-l) - var(--warning-l) * 0.3), 1) !important;
}

.h\:bg_warning-n3:hover {
  background-color: hsla(var(--warning-h), calc(var(--warning-s) + (100% - var(--warning-s)) * 0.05), calc(var(--warning-l) - var(--warning-l) * 0.5), 1) !important;
}

.h\:bg_warning-n4:hover {
  background-color: hsla(var(--warning-h), calc(var(--warning-s) + (100% - var(--warning-s)) * 0.07), calc(var(--warning-l) - var(--warning-l) * 0.7), 1) !important;
}

.h\:bg_warning-n5:hover {
  background-color: hsla(var(--warning-h), calc(var(--warning-s) + (100% - var(--warning-s)) * 0.085), calc(var(--warning-l) - var(--warning-l) * 0.85), 1) !important;
}

.h\:c_warning:hover,.h\:c_warning-0:hover {
  color: var(--warning) !important;
}

.h\:c_warning-1:hover {
  color: hsla(var(--warning-h), calc(var(--warning-s) - var(--warning-s) * 0.05), calc(var(--warning-l) + (100% - var(--warning-l)) * 0.1), 1) !important;
}

.h\:c_warning-2:hover {
  color: hsla(var(--warning-h), calc(var(--warning-s) - var(--warning-s) * 0.125), calc(var(--warning-l) + (100% - var(--warning-l)) * 0.25), 1) !important;
}

.h\:c_warning-3:hover {
  color: hsla(var(--warning-h), calc(var(--warning-s) - var(--warning-s) * 0.25), calc(var(--warning-l) + (100% - var(--warning-l)) * 0.5), 1) !important;
}

.h\:c_warning-4:hover {
  color: hsla(var(--warning-h), calc(var(--warning-s) - var(--warning-s) * 0.375), calc(var(--warning-l) + (100% - var(--warning-l)) * 0.75), 1) !important;
}

.h\:c_warning-5:hover {
  color: hsla(var(--warning-h), calc(var(--warning-s) - var(--warning-s) * 0.45), calc(var(--warning-l) + (100% - var(--warning-l)) * 0.9), 1) !important;
}

.h\:c_warning-n1:hover {
  color: hsla(var(--warning-h), calc(var(--warning-s) + (100% - var(--warning-s)) * 0.015), calc(var(--warning-l) - var(--warning-l) * 0.15), 1) !important;
}

.h\:c_warning-n2:hover {
  color: hsla(var(--warning-h), calc(var(--warning-s) + (100% - var(--warning-s)) * 0.03), calc(var(--warning-l) - var(--warning-l) * 0.3), 1) !important;
}

.h\:c_warning-n3:hover {
  color: hsla(var(--warning-h), calc(var(--warning-s) + (100% - var(--warning-s)) * 0.05), calc(var(--warning-l) - var(--warning-l) * 0.5), 1) !important;
}

.h\:c_warning-n4:hover {
  color: hsla(var(--warning-h), calc(var(--warning-s) + (100% - var(--warning-s)) * 0.07), calc(var(--warning-l) - var(--warning-l) * 0.7), 1) !important;
}

.h\:c_warning-n5:hover {
  color: hsla(var(--warning-h), calc(var(--warning-s) + (100% - var(--warning-s)) * 0.085), calc(var(--warning-l) - var(--warning-l) * 0.85), 1) !important;
}

.h\:br_warning:hover,.h\:br_warning-0:hover {
  border-color: var(--warning) !important;
}

.h\:br_warning-1:hover {
  border-color: hsla(var(--warning-h), calc(var(--warning-s) - var(--warning-s) * 0.05), calc(var(--warning-l) + (100% - var(--warning-l)) * 0.1), 1) !important;
}

.h\:br_warning-2:hover {
  border-color: hsla(var(--warning-h), calc(var(--warning-s) - var(--warning-s) * 0.125), calc(var(--warning-l) + (100% - var(--warning-l)) * 0.25), 1) !important;
}

.h\:br_warning-3:hover {
  border-color: hsla(var(--warning-h), calc(var(--warning-s) - var(--warning-s) * 0.25), calc(var(--warning-l) + (100% - var(--warning-l)) * 0.5), 1) !important;
}

.h\:br_warning-4:hover {
  border-color: hsla(var(--warning-h), calc(var(--warning-s) - var(--warning-s) * 0.375), calc(var(--warning-l) + (100% - var(--warning-l)) * 0.75), 1) !important;
}

.h\:br_warning-5:hover {
  border-color: hsla(var(--warning-h), calc(var(--warning-s) - var(--warning-s) * 0.45), calc(var(--warning-l) + (100% - var(--warning-l)) * 0.9), 1) !important;
}

.h\:br_warning-n1:hover {
  border-color: hsla(var(--warning-h), calc(var(--warning-s) + (100% - var(--warning-s)) * 0.015), calc(var(--warning-l) - var(--warning-l) * 0.15), 1) !important;
}

.h\:br_warning-n2:hover {
  border-color: hsla(var(--warning-h), calc(var(--warning-s) + (100% - var(--warning-s)) * 0.03), calc(var(--warning-l) - var(--warning-l) * 0.3), 1) !important;
}

.h\:br_warning-n3:hover {
  border-color: hsla(var(--warning-h), calc(var(--warning-s) + (100% - var(--warning-s)) * 0.05), calc(var(--warning-l) - var(--warning-l) * 0.5), 1) !important;
}

.h\:br_warning-n4:hover {
  border-color: hsla(var(--warning-h), calc(var(--warning-s) + (100% - var(--warning-s)) * 0.07), calc(var(--warning-l) - var(--warning-l) * 0.7), 1) !important;
}

.h\:br_warning-n5:hover {
  border-color: hsla(var(--warning-h), calc(var(--warning-s) + (100% - var(--warning-s)) * 0.085), calc(var(--warning-l) - var(--warning-l) * 0.85), 1) !important;
}

.h\:bg_alert:hover,.h\:bg_alert-0:hover {
  background-color: var(--alert) !important;
}

.h\:bg_alert-1:hover {
  background-color: hsla(var(--alert-h), calc(var(--alert-s) - var(--alert-s) * 0.05), calc(var(--alert-l) + (100% - var(--alert-l)) * 0.1), 1) !important;
}

.h\:bg_alert-2:hover {
  background-color: hsla(var(--alert-h), calc(var(--alert-s) - var(--alert-s) * 0.125), calc(var(--alert-l) + (100% - var(--alert-l)) * 0.25), 1) !important;
}

.h\:bg_alert-3:hover {
  background-color: hsla(var(--alert-h), calc(var(--alert-s) - var(--alert-s) * 0.25), calc(var(--alert-l) + (100% - var(--alert-l)) * 0.5), 1) !important;
}

.h\:bg_alert-4:hover {
  background-color: hsla(var(--alert-h), calc(var(--alert-s) - var(--alert-s) * 0.375), calc(var(--alert-l) + (100% - var(--alert-l)) * 0.75), 1) !important;
}

.h\:bg_alert-5:hover {
  background-color: hsla(var(--alert-h), calc(var(--alert-s) - var(--alert-s) * 0.45), calc(var(--alert-l) + (100% - var(--alert-l)) * 0.9), 1) !important;
}

.h\:bg_alert-n1:hover {
  background-color: hsla(var(--alert-h), calc(var(--alert-s) + (100% - var(--alert-s)) * 0.015), calc(var(--alert-l) - var(--alert-l) * 0.15), 1) !important;
}

.h\:bg_alert-n2:hover {
  background-color: hsla(var(--alert-h), calc(var(--alert-s) + (100% - var(--alert-s)) * 0.03), calc(var(--alert-l) - var(--alert-l) * 0.3), 1) !important;
}

.h\:bg_alert-n3:hover {
  background-color: hsla(var(--alert-h), calc(var(--alert-s) + (100% - var(--alert-s)) * 0.05), calc(var(--alert-l) - var(--alert-l) * 0.5), 1) !important;
}

.h\:bg_alert-n4:hover {
  background-color: hsla(var(--alert-h), calc(var(--alert-s) + (100% - var(--alert-s)) * 0.07), calc(var(--alert-l) - var(--alert-l) * 0.7), 1) !important;
}

.h\:bg_alert-n5:hover {
  background-color: hsla(var(--alert-h), calc(var(--alert-s) + (100% - var(--alert-s)) * 0.085), calc(var(--alert-l) - var(--alert-l) * 0.85), 1) !important;
}

.h\:c_alert:hover,.h\:c_alert-0:hover {
  color: var(--alert) !important;
}

.h\:c_alert-1:hover {
  color: hsla(var(--alert-h), calc(var(--alert-s) - var(--alert-s) * 0.05), calc(var(--alert-l) + (100% - var(--alert-l)) * 0.1), 1) !important;
}

.h\:c_alert-2:hover {
  color: hsla(var(--alert-h), calc(var(--alert-s) - var(--alert-s) * 0.125), calc(var(--alert-l) + (100% - var(--alert-l)) * 0.25), 1) !important;
}

.h\:c_alert-3:hover {
  color: hsla(var(--alert-h), calc(var(--alert-s) - var(--alert-s) * 0.25), calc(var(--alert-l) + (100% - var(--alert-l)) * 0.5), 1) !important;
}

.h\:c_alert-4:hover {
  color: hsla(var(--alert-h), calc(var(--alert-s) - var(--alert-s) * 0.375), calc(var(--alert-l) + (100% - var(--alert-l)) * 0.75), 1) !important;
}

.h\:c_alert-5:hover {
  color: hsla(var(--alert-h), calc(var(--alert-s) - var(--alert-s) * 0.45), calc(var(--alert-l) + (100% - var(--alert-l)) * 0.9), 1) !important;
}

.h\:c_alert-n1:hover {
  color: hsla(var(--alert-h), calc(var(--alert-s) + (100% - var(--alert-s)) * 0.015), calc(var(--alert-l) - var(--alert-l) * 0.15), 1) !important;
}

.h\:c_alert-n2:hover {
  color: hsla(var(--alert-h), calc(var(--alert-s) + (100% - var(--alert-s)) * 0.03), calc(var(--alert-l) - var(--alert-l) * 0.3), 1) !important;
}

.h\:c_alert-n3:hover {
  color: hsla(var(--alert-h), calc(var(--alert-s) + (100% - var(--alert-s)) * 0.05), calc(var(--alert-l) - var(--alert-l) * 0.5), 1) !important;
}

.h\:c_alert-n4:hover {
  color: hsla(var(--alert-h), calc(var(--alert-s) + (100% - var(--alert-s)) * 0.07), calc(var(--alert-l) - var(--alert-l) * 0.7), 1) !important;
}

.h\:c_alert-n5:hover {
  color: hsla(var(--alert-h), calc(var(--alert-s) + (100% - var(--alert-s)) * 0.085), calc(var(--alert-l) - var(--alert-l) * 0.85), 1) !important;
}

.h\:br_alert:hover,.h\:br_alert-0:hover {
  border-color: var(--alert) !important;
}

.h\:br_alert-1:hover {
  border-color: hsla(var(--alert-h), calc(var(--alert-s) - var(--alert-s) * 0.05), calc(var(--alert-l) + (100% - var(--alert-l)) * 0.1), 1) !important;
}

.h\:br_alert-2:hover {
  border-color: hsla(var(--alert-h), calc(var(--alert-s) - var(--alert-s) * 0.125), calc(var(--alert-l) + (100% - var(--alert-l)) * 0.25), 1) !important;
}

.h\:br_alert-3:hover {
  border-color: hsla(var(--alert-h), calc(var(--alert-s) - var(--alert-s) * 0.25), calc(var(--alert-l) + (100% - var(--alert-l)) * 0.5), 1) !important;
}

.h\:br_alert-4:hover {
  border-color: hsla(var(--alert-h), calc(var(--alert-s) - var(--alert-s) * 0.375), calc(var(--alert-l) + (100% - var(--alert-l)) * 0.75), 1) !important;
}

.h\:br_alert-5:hover {
  border-color: hsla(var(--alert-h), calc(var(--alert-s) - var(--alert-s) * 0.45), calc(var(--alert-l) + (100% - var(--alert-l)) * 0.9), 1) !important;
}

.h\:br_alert-n1:hover {
  border-color: hsla(var(--alert-h), calc(var(--alert-s) + (100% - var(--alert-s)) * 0.015), calc(var(--alert-l) - var(--alert-l) * 0.15), 1) !important;
}

.h\:br_alert-n2:hover {
  border-color: hsla(var(--alert-h), calc(var(--alert-s) + (100% - var(--alert-s)) * 0.03), calc(var(--alert-l) - var(--alert-l) * 0.3), 1) !important;
}

.h\:br_alert-n3:hover {
  border-color: hsla(var(--alert-h), calc(var(--alert-s) + (100% - var(--alert-s)) * 0.05), calc(var(--alert-l) - var(--alert-l) * 0.5), 1) !important;
}

.h\:br_alert-n4:hover {
  border-color: hsla(var(--alert-h), calc(var(--alert-s) + (100% - var(--alert-s)) * 0.07), calc(var(--alert-l) - var(--alert-l) * 0.7), 1) !important;
}

.h\:br_alert-n5:hover {
  border-color: hsla(var(--alert-h), calc(var(--alert-s) + (100% - var(--alert-s)) * 0.085), calc(var(--alert-l) - var(--alert-l) * 0.85), 1) !important;
}

.h\:bg_navigation:hover,.h\:bg_navigation-0:hover {
  background-color: var(--navigation) !important;
}

.h\:bg_navigation-1:hover {
  background-color: hsla(var(--navigation-h), calc(var(--navigation-s) - var(--navigation-s) * 0.05), calc(var(--navigation-l) + (100% - var(--navigation-l)) * 0.1), 1) !important;
}

.h\:bg_navigation-2:hover {
  background-color: hsla(var(--navigation-h), calc(var(--navigation-s) - var(--navigation-s) * 0.125), calc(var(--navigation-l) + (100% - var(--navigation-l)) * 0.25), 1) !important;
}

.h\:bg_navigation-3:hover {
  background-color: hsla(var(--navigation-h), calc(var(--navigation-s) - var(--navigation-s) * 0.25), calc(var(--navigation-l) + (100% - var(--navigation-l)) * 0.5), 1) !important;
}

.h\:bg_navigation-4:hover {
  background-color: hsla(var(--navigation-h), calc(var(--navigation-s) - var(--navigation-s) * 0.375), calc(var(--navigation-l) + (100% - var(--navigation-l)) * 0.75), 1) !important;
}

.h\:bg_navigation-5:hover {
  background-color: hsla(var(--navigation-h), calc(var(--navigation-s) - var(--navigation-s) * 0.45), calc(var(--navigation-l) + (100% - var(--navigation-l)) * 0.9), 1) !important;
}

.h\:bg_navigation-n1:hover {
  background-color: hsla(var(--navigation-h), calc(var(--navigation-s) + (100% - var(--navigation-s)) * 0.015), calc(var(--navigation-l) - var(--navigation-l) * 0.15), 1) !important;
}

.h\:bg_navigation-n2:hover {
  background-color: hsla(var(--navigation-h), calc(var(--navigation-s) + (100% - var(--navigation-s)) * 0.03), calc(var(--navigation-l) - var(--navigation-l) * 0.3), 1) !important;
}

.h\:bg_navigation-n3:hover {
  background-color: hsla(var(--navigation-h), calc(var(--navigation-s) + (100% - var(--navigation-s)) * 0.05), calc(var(--navigation-l) - var(--navigation-l) * 0.5), 1) !important;
}

.h\:bg_navigation-n4:hover {
  background-color: hsla(var(--navigation-h), calc(var(--navigation-s) + (100% - var(--navigation-s)) * 0.07), calc(var(--navigation-l) - var(--navigation-l) * 0.7), 1) !important;
}

.h\:bg_navigation-n5:hover {
  background-color: hsla(var(--navigation-h), calc(var(--navigation-s) + (100% - var(--navigation-s)) * 0.085), calc(var(--navigation-l) - var(--navigation-l) * 0.85), 1) !important;
}

.h\:c_navigation:hover,.h\:c_navigation-0:hover {
  color: var(--navigation) !important;
}

.h\:c_navigation-1:hover {
  color: hsla(var(--navigation-h), calc(var(--navigation-s) - var(--navigation-s) * 0.05), calc(var(--navigation-l) + (100% - var(--navigation-l)) * 0.1), 1) !important;
}

.h\:c_navigation-2:hover {
  color: hsla(var(--navigation-h), calc(var(--navigation-s) - var(--navigation-s) * 0.125), calc(var(--navigation-l) + (100% - var(--navigation-l)) * 0.25), 1) !important;
}

.h\:c_navigation-3:hover {
  color: hsla(var(--navigation-h), calc(var(--navigation-s) - var(--navigation-s) * 0.25), calc(var(--navigation-l) + (100% - var(--navigation-l)) * 0.5), 1) !important;
}

.h\:c_navigation-4:hover {
  color: hsla(var(--navigation-h), calc(var(--navigation-s) - var(--navigation-s) * 0.375), calc(var(--navigation-l) + (100% - var(--navigation-l)) * 0.75), 1) !important;
}

.h\:c_navigation-5:hover {
  color: hsla(var(--navigation-h), calc(var(--navigation-s) - var(--navigation-s) * 0.45), calc(var(--navigation-l) + (100% - var(--navigation-l)) * 0.9), 1) !important;
}

.h\:c_navigation-n1:hover {
  color: hsla(var(--navigation-h), calc(var(--navigation-s) + (100% - var(--navigation-s)) * 0.015), calc(var(--navigation-l) - var(--navigation-l) * 0.15), 1) !important;
}

.h\:c_navigation-n2:hover {
  color: hsla(var(--navigation-h), calc(var(--navigation-s) + (100% - var(--navigation-s)) * 0.03), calc(var(--navigation-l) - var(--navigation-l) * 0.3), 1) !important;
}

.h\:c_navigation-n3:hover {
  color: hsla(var(--navigation-h), calc(var(--navigation-s) + (100% - var(--navigation-s)) * 0.05), calc(var(--navigation-l) - var(--navigation-l) * 0.5), 1) !important;
}

.h\:c_navigation-n4:hover {
  color: hsla(var(--navigation-h), calc(var(--navigation-s) + (100% - var(--navigation-s)) * 0.07), calc(var(--navigation-l) - var(--navigation-l) * 0.7), 1) !important;
}

.h\:c_navigation-n5:hover {
  color: hsla(var(--navigation-h), calc(var(--navigation-s) + (100% - var(--navigation-s)) * 0.085), calc(var(--navigation-l) - var(--navigation-l) * 0.85), 1) !important;
}

.h\:br_navigation:hover,.h\:br_navigation-0:hover {
  border-color: var(--navigation) !important;
}

.h\:br_navigation-1:hover {
  border-color: hsla(var(--navigation-h), calc(var(--navigation-s) - var(--navigation-s) * 0.05), calc(var(--navigation-l) + (100% - var(--navigation-l)) * 0.1), 1) !important;
}

.h\:br_navigation-2:hover {
  border-color: hsla(var(--navigation-h), calc(var(--navigation-s) - var(--navigation-s) * 0.125), calc(var(--navigation-l) + (100% - var(--navigation-l)) * 0.25), 1) !important;
}

.h\:br_navigation-3:hover {
  border-color: hsla(var(--navigation-h), calc(var(--navigation-s) - var(--navigation-s) * 0.25), calc(var(--navigation-l) + (100% - var(--navigation-l)) * 0.5), 1) !important;
}

.h\:br_navigation-4:hover {
  border-color: hsla(var(--navigation-h), calc(var(--navigation-s) - var(--navigation-s) * 0.375), calc(var(--navigation-l) + (100% - var(--navigation-l)) * 0.75), 1) !important;
}

.h\:br_navigation-5:hover {
  border-color: hsla(var(--navigation-h), calc(var(--navigation-s) - var(--navigation-s) * 0.45), calc(var(--navigation-l) + (100% - var(--navigation-l)) * 0.9), 1) !important;
}

.h\:br_navigation-n1:hover {
  border-color: hsla(var(--navigation-h), calc(var(--navigation-s) + (100% - var(--navigation-s)) * 0.015), calc(var(--navigation-l) - var(--navigation-l) * 0.15), 1) !important;
}

.h\:br_navigation-n2:hover {
  border-color: hsla(var(--navigation-h), calc(var(--navigation-s) + (100% - var(--navigation-s)) * 0.03), calc(var(--navigation-l) - var(--navigation-l) * 0.3), 1) !important;
}

.h\:br_navigation-n3:hover {
  border-color: hsla(var(--navigation-h), calc(var(--navigation-s) + (100% - var(--navigation-s)) * 0.05), calc(var(--navigation-l) - var(--navigation-l) * 0.5), 1) !important;
}

.h\:br_navigation-n4:hover {
  border-color: hsla(var(--navigation-h), calc(var(--navigation-s) + (100% - var(--navigation-s)) * 0.07), calc(var(--navigation-l) - var(--navigation-l) * 0.7), 1) !important;
}

.h\:br_navigation-n5:hover {
  border-color: hsla(var(--navigation-h), calc(var(--navigation-s) + (100% - var(--navigation-s)) * 0.085), calc(var(--navigation-l) - var(--navigation-l) * 0.85), 1) !important;
}

.h\:bg_accent:hover,.h\:bg_accent-0:hover {
  background-color: var(--accent) !important;
}

.h\:bg_accent-1:hover {
  background-color: hsla(var(--accent-h), calc(var(--accent-s) - var(--accent-s) * 0.05), calc(var(--accent-l) + (100% - var(--accent-l)) * 0.1), 1) !important;
}

.h\:bg_accent-2:hover {
  background-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) !important;
}

.h\:bg_accent-3:hover {
  background-color: hsla(var(--accent-h), calc(var(--accent-s) - var(--accent-s) * 0.25), calc(var(--accent-l) + (100% - var(--accent-l)) * 0.5), 1) !important;
}

.h\:bg_accent-4:hover {
  background-color: hsla(var(--accent-h), calc(var(--accent-s) - var(--accent-s) * 0.375), calc(var(--accent-l) + (100% - var(--accent-l)) * 0.75), 1) !important;
}

.h\:bg_accent-5:hover {
  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) !important;
}

.h\:bg_accent-n1:hover {
  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) !important;
}

.h\:bg_accent-n2:hover {
  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) !important;
}

.h\:bg_accent-n3: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) !important;
}

.h\:bg_accent-n4:hover {
  background-color: hsla(var(--accent-h), calc(var(--accent-s) + (100% - var(--accent-s)) * 0.07), calc(var(--accent-l) - var(--accent-l) * 0.7), 1) !important;
}

.h\:bg_accent-n5:hover {
  background-color: hsla(var(--accent-h), calc(var(--accent-s) + (100% - var(--accent-s)) * 0.085), calc(var(--accent-l) - var(--accent-l) * 0.85), 1) !important;
}

.h\:c_accent:hover,.h\:c_accent-0:hover {
  color: var(--accent) !important;
}

.h\:c_accent-1:hover {
  color: hsla(var(--accent-h), calc(var(--accent-s) - var(--accent-s) * 0.05), calc(var(--accent-l) + (100% - var(--accent-l)) * 0.1), 1) !important;
}

.h\:c_accent-2:hover {
  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) !important;
}

.h\:c_accent-3:hover {
  color: hsla(var(--accent-h), calc(var(--accent-s) - var(--accent-s) * 0.25), calc(var(--accent-l) + (100% - var(--accent-l)) * 0.5), 1) !important;
}

.h\:c_accent-4:hover {
  color: hsla(var(--accent-h), calc(var(--accent-s) - var(--accent-s) * 0.375), calc(var(--accent-l) + (100% - var(--accent-l)) * 0.75), 1) !important;
}

.h\:c_accent-5:hover {
  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) !important;
}

.h\:c_accent-n1:hover {
  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) !important;
}

.h\:c_accent-n2:hover {
  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) !important;
}

.h\:c_accent-n3:hover {
  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) !important;
}

.h\:c_accent-n4:hover {
  color: hsla(var(--accent-h), calc(var(--accent-s) + (100% - var(--accent-s)) * 0.07), calc(var(--accent-l) - var(--accent-l) * 0.7), 1) !important;
}

.h\:c_accent-n5:hover {
  color: hsla(var(--accent-h), calc(var(--accent-s) + (100% - var(--accent-s)) * 0.085), calc(var(--accent-l) - var(--accent-l) * 0.85), 1) !important;
}

.h\:br_accent:hover,.h\:br_accent-0:hover {
  border-color: var(--accent) !important;
}

.h\:br_accent-1:hover {
  border-color: hsla(var(--accent-h), calc(var(--accent-s) - var(--accent-s) * 0.05), calc(var(--accent-l) + (100% - var(--accent-l)) * 0.1), 1) !important;
}

.h\:br_accent-2:hover {
  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) !important;
}

.h\:br_accent-3:hover {
  border-color: hsla(var(--accent-h), calc(var(--accent-s) - var(--accent-s) * 0.25), calc(var(--accent-l) + (100% - var(--accent-l)) * 0.5), 1) !important;
}

.h\:br_accent-4:hover {
  border-color: hsla(var(--accent-h), calc(var(--accent-s) - var(--accent-s) * 0.375), calc(var(--accent-l) + (100% - var(--accent-l)) * 0.75), 1) !important;
}

.h\:br_accent-5:hover {
  border-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) !important;
}

.h\:br_accent-n1:hover {
  border-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) !important;
}

.h\:br_accent-n2:hover {
  border-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) !important;
}

.h\:br_accent-n3:hover {
  border-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) !important;
}

.h\:br_accent-n4:hover {
  border-color: hsla(var(--accent-h), calc(var(--accent-s) + (100% - var(--accent-s)) * 0.07), calc(var(--accent-l) - var(--accent-l) * 0.7), 1) !important;
}

.h\:br_accent-n5:hover {
  border-color: hsla(var(--accent-h), calc(var(--accent-s) + (100% - var(--accent-s)) * 0.085), calc(var(--accent-l) - var(--accent-l) * 0.85), 1) !important;
}

.h\:bg_info:hover,.h\:bg_info-0:hover {
  background-color: var(--info) !important;
}

.h\:bg_info-1:hover {
  background-color: hsla(var(--info-h), calc(var(--info-s) - var(--info-s) * 0.05), calc(var(--info-l) + (100% - var(--info-l)) * 0.1), 1) !important;
}

.h\:bg_info-2:hover {
  background-color: hsla(var(--info-h), calc(var(--info-s) - var(--info-s) * 0.125), calc(var(--info-l) + (100% - var(--info-l)) * 0.25), 1) !important;
}

.h\:bg_info-3:hover {
  background-color: hsla(var(--info-h), calc(var(--info-s) - var(--info-s) * 0.25), calc(var(--info-l) + (100% - var(--info-l)) * 0.5), 1) !important;
}

.h\:bg_info-4:hover {
  background-color: hsla(var(--info-h), calc(var(--info-s) - var(--info-s) * 0.375), calc(var(--info-l) + (100% - var(--info-l)) * 0.75), 1) !important;
}

.h\:bg_info-5:hover {
  background-color: hsla(var(--info-h), calc(var(--info-s) - var(--info-s) * 0.45), calc(var(--info-l) + (100% - var(--info-l)) * 0.9), 1) !important;
}

.h\:bg_info-n1:hover {
  background-color: hsla(var(--info-h), calc(var(--info-s) + (100% - var(--info-s)) * 0.015), calc(var(--info-l) - var(--info-l) * 0.15), 1) !important;
}

.h\:bg_info-n2:hover {
  background-color: hsla(var(--info-h), calc(var(--info-s) + (100% - var(--info-s)) * 0.03), calc(var(--info-l) - var(--info-l) * 0.3), 1) !important;
}

.h\:bg_info-n3:hover {
  background-color: hsla(var(--info-h), calc(var(--info-s) + (100% - var(--info-s)) * 0.05), calc(var(--info-l) - var(--info-l) * 0.5), 1) !important;
}

.h\:bg_info-n4:hover {
  background-color: hsla(var(--info-h), calc(var(--info-s) + (100% - var(--info-s)) * 0.07), calc(var(--info-l) - var(--info-l) * 0.7), 1) !important;
}

.h\:bg_info-n5:hover {
  background-color: hsla(var(--info-h), calc(var(--info-s) + (100% - var(--info-s)) * 0.085), calc(var(--info-l) - var(--info-l) * 0.85), 1) !important;
}

.h\:c_info:hover,.h\:c_info-0:hover {
  color: var(--info) !important;
}

.h\:c_info-1:hover {
  color: hsla(var(--info-h), calc(var(--info-s) - var(--info-s) * 0.05), calc(var(--info-l) + (100% - var(--info-l)) * 0.1), 1) !important;
}

.h\:c_info-2:hover {
  color: hsla(var(--info-h), calc(var(--info-s) - var(--info-s) * 0.125), calc(var(--info-l) + (100% - var(--info-l)) * 0.25), 1) !important;
}

.h\:c_info-3:hover {
  color: hsla(var(--info-h), calc(var(--info-s) - var(--info-s) * 0.25), calc(var(--info-l) + (100% - var(--info-l)) * 0.5), 1) !important;
}

.h\:c_info-4:hover {
  color: hsla(var(--info-h), calc(var(--info-s) - var(--info-s) * 0.375), calc(var(--info-l) + (100% - var(--info-l)) * 0.75), 1) !important;
}

.h\:c_info-5:hover {
  color: hsla(var(--info-h), calc(var(--info-s) - var(--info-s) * 0.45), calc(var(--info-l) + (100% - var(--info-l)) * 0.9), 1) !important;
}

.h\:c_info-n1:hover {
  color: hsla(var(--info-h), calc(var(--info-s) + (100% - var(--info-s)) * 0.015), calc(var(--info-l) - var(--info-l) * 0.15), 1) !important;
}

.h\:c_info-n2:hover {
  color: hsla(var(--info-h), calc(var(--info-s) + (100% - var(--info-s)) * 0.03), calc(var(--info-l) - var(--info-l) * 0.3), 1) !important;
}

.h\:c_info-n3:hover {
  color: hsla(var(--info-h), calc(var(--info-s) + (100% - var(--info-s)) * 0.05), calc(var(--info-l) - var(--info-l) * 0.5), 1) !important;
}

.h\:c_info-n4:hover {
  color: hsla(var(--info-h), calc(var(--info-s) + (100% - var(--info-s)) * 0.07), calc(var(--info-l) - var(--info-l) * 0.7), 1) !important;
}

.h\:c_info-n5:hover {
  color: hsla(var(--info-h), calc(var(--info-s) + (100% - var(--info-s)) * 0.085), calc(var(--info-l) - var(--info-l) * 0.85), 1) !important;
}

.h\:br_info:hover,.h\:br_info-0:hover {
  border-color: var(--info) !important;
}

.h\:br_info-1:hover {
  border-color: hsla(var(--info-h), calc(var(--info-s) - var(--info-s) * 0.05), calc(var(--info-l) + (100% - var(--info-l)) * 0.1), 1) !important;
}

.h\:br_info-2:hover {
  border-color: hsla(var(--info-h), calc(var(--info-s) - var(--info-s) * 0.125), calc(var(--info-l) + (100% - var(--info-l)) * 0.25), 1) !important;
}

.h\:br_info-3:hover {
  border-color: hsla(var(--info-h), calc(var(--info-s) - var(--info-s) * 0.25), calc(var(--info-l) + (100% - var(--info-l)) * 0.5), 1) !important;
}

.h\:br_info-4:hover {
  border-color: hsla(var(--info-h), calc(var(--info-s) - var(--info-s) * 0.375), calc(var(--info-l) + (100% - var(--info-l)) * 0.75), 1) !important;
}

.h\:br_info-5:hover {
  border-color: hsla(var(--info-h), calc(var(--info-s) - var(--info-s) * 0.45), calc(var(--info-l) + (100% - var(--info-l)) * 0.9), 1) !important;
}

.h\:br_info-n1:hover {
  border-color: hsla(var(--info-h), calc(var(--info-s) + (100% - var(--info-s)) * 0.015), calc(var(--info-l) - var(--info-l) * 0.15), 1) !important;
}

.h\:br_info-n2:hover {
  border-color: hsla(var(--info-h), calc(var(--info-s) + (100% - var(--info-s)) * 0.03), calc(var(--info-l) - var(--info-l) * 0.3), 1) !important;
}

.h\:br_info-n3:hover {
  border-color: hsla(var(--info-h), calc(var(--info-s) + (100% - var(--info-s)) * 0.05), calc(var(--info-l) - var(--info-l) * 0.5), 1) !important;
}

.h\:br_info-n4:hover {
  border-color: hsla(var(--info-h), calc(var(--info-s) + (100% - var(--info-s)) * 0.07), calc(var(--info-l) - var(--info-l) * 0.7), 1) !important;
}

.h\:br_info-n5:hover {
  border-color: hsla(var(--info-h), calc(var(--info-s) + (100% - var(--info-s)) * 0.085), calc(var(--info-l) - var(--info-l) * 0.85), 1) !important;
}

.h\:bg_highlight:hover,.h\:bg_highlight-0:hover {
  background-color: var(--highlight) !important;
}

.h\:bg_highlight-1:hover {
  background-color: hsla(var(--highlight-h), calc(var(--highlight-s) - var(--highlight-s) * 0.05), calc(var(--highlight-l) + (100% - var(--highlight-l)) * 0.1), 1) !important;
}

.h\:bg_highlight-2:hover {
  background-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) !important;
}

.h\:bg_highlight-3:hover {
  background-color: hsla(var(--highlight-h), calc(var(--highlight-s) - var(--highlight-s) * 0.25), calc(var(--highlight-l) + (100% - var(--highlight-l)) * 0.5), 1) !important;
}

.h\:bg_highlight-4:hover {
  background-color: hsla(var(--highlight-h), calc(var(--highlight-s) - var(--highlight-s) * 0.375), calc(var(--highlight-l) + (100% - var(--highlight-l)) * 0.75), 1) !important;
}

.h\:bg_highlight-5:hover {
  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) !important;
}

.h\:bg_highlight-n1:hover {
  background-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) !important;
}

.h\:bg_highlight-n2:hover {
  background-color: hsla(var(--highlight-h), calc(var(--highlight-s) + (100% - var(--highlight-s)) * 0.03), calc(var(--highlight-l) - var(--highlight-l) * 0.3), 1) !important;
}

.h\:bg_highlight-n3:hover {
  background-color: hsla(var(--highlight-h), calc(var(--highlight-s) + (100% - var(--highlight-s)) * 0.05), calc(var(--highlight-l) - var(--highlight-l) * 0.5), 1) !important;
}

.h\:bg_highlight-n4:hover {
  background-color: hsla(var(--highlight-h), calc(var(--highlight-s) + (100% - var(--highlight-s)) * 0.07), calc(var(--highlight-l) - var(--highlight-l) * 0.7), 1) !important;
}

.h\:bg_highlight-n5:hover {
  background-color: hsla(var(--highlight-h), calc(var(--highlight-s) + (100% - var(--highlight-s)) * 0.085), calc(var(--highlight-l) - var(--highlight-l) * 0.85), 1) !important;
}

.h\:c_highlight:hover,.h\:c_highlight-0:hover {
  color: var(--highlight) !important;
}

.h\:c_highlight-1:hover {
  color: hsla(var(--highlight-h), calc(var(--highlight-s) - var(--highlight-s) * 0.05), calc(var(--highlight-l) + (100% - var(--highlight-l)) * 0.1), 1) !important;
}

.h\:c_highlight-2:hover {
  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) !important;
}

.h\:c_highlight-3:hover {
  color: hsla(var(--highlight-h), calc(var(--highlight-s) - var(--highlight-s) * 0.25), calc(var(--highlight-l) + (100% - var(--highlight-l)) * 0.5), 1) !important;
}

.h\:c_highlight-4:hover {
  color: hsla(var(--highlight-h), calc(var(--highlight-s) - var(--highlight-s) * 0.375), calc(var(--highlight-l) + (100% - var(--highlight-l)) * 0.75), 1) !important;
}

.h\:c_highlight-5:hover {
  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) !important;
}

.h\:c_highlight-n1:hover {
  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) !important;
}

.h\:c_highlight-n2:hover {
  color: hsla(var(--highlight-h), calc(var(--highlight-s) + (100% - var(--highlight-s)) * 0.03), calc(var(--highlight-l) - var(--highlight-l) * 0.3), 1) !important;
}

.h\:c_highlight-n3:hover {
  color: hsla(var(--highlight-h), calc(var(--highlight-s) + (100% - var(--highlight-s)) * 0.05), calc(var(--highlight-l) - var(--highlight-l) * 0.5), 1) !important;
}

.h\:c_highlight-n4:hover {
  color: hsla(var(--highlight-h), calc(var(--highlight-s) + (100% - var(--highlight-s)) * 0.07), calc(var(--highlight-l) - var(--highlight-l) * 0.7), 1) !important;
}

.h\:c_highlight-n5:hover {
  color: hsla(var(--highlight-h), calc(var(--highlight-s) + (100% - var(--highlight-s)) * 0.085), calc(var(--highlight-l) - var(--highlight-l) * 0.85), 1) !important;
}

.h\:br_highlight:hover,.h\:br_highlight-0:hover {
  border-color: var(--highlight) !important;
}

.h\:br_highlight-1:hover {
  border-color: hsla(var(--highlight-h), calc(var(--highlight-s) - var(--highlight-s) * 0.05), calc(var(--highlight-l) + (100% - var(--highlight-l)) * 0.1), 1) !important;
}

.h\:br_highlight-2:hover {
  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) !important;
}

.h\:br_highlight-3:hover {
  border-color: hsla(var(--highlight-h), calc(var(--highlight-s) - var(--highlight-s) * 0.25), calc(var(--highlight-l) + (100% - var(--highlight-l)) * 0.5), 1) !important;
}

.h\:br_highlight-4:hover {
  border-color: hsla(var(--highlight-h), calc(var(--highlight-s) - var(--highlight-s) * 0.375), calc(var(--highlight-l) + (100% - var(--highlight-l)) * 0.75), 1) !important;
}

.h\:br_highlight-5:hover {
  border-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) !important;
}

.h\:br_highlight-n1:hover {
  border-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) !important;
}

.h\:br_highlight-n2:hover {
  border-color: hsla(var(--highlight-h), calc(var(--highlight-s) + (100% - var(--highlight-s)) * 0.03), calc(var(--highlight-l) - var(--highlight-l) * 0.3), 1) !important;
}

.h\:br_highlight-n3:hover {
  border-color: hsla(var(--highlight-h), calc(var(--highlight-s) + (100% - var(--highlight-s)) * 0.05), calc(var(--highlight-l) - var(--highlight-l) * 0.5), 1) !important;
}

.h\:br_highlight-n4:hover {
  border-color: hsla(var(--highlight-h), calc(var(--highlight-s) + (100% - var(--highlight-s)) * 0.07), calc(var(--highlight-l) - var(--highlight-l) * 0.7), 1) !important;
}

.h\:br_highlight-n5:hover {
  border-color: hsla(var(--highlight-h), calc(var(--highlight-s) + (100% - var(--highlight-s)) * 0.085), calc(var(--highlight-l) - var(--highlight-l) * 0.85), 1) !important;
}

.h\:bg_acc:hover,.h\:bg_acc-0:hover {
  background-color: var(--acc) !important;
}

.h\:bg_acc-1:hover {
  background-color: hsla(var(--acc-h), calc(var(--acc-s) - var(--acc-s) * 0.05), calc(var(--acc-l) + (100% - var(--acc-l)) * 0.1), 1) !important;
}

.h\:bg_acc-2:hover {
  background-color: hsla(var(--acc-h), calc(var(--acc-s) - var(--acc-s) * 0.125), calc(var(--acc-l) + (100% - var(--acc-l)) * 0.25), 1) !important;
}

.h\:bg_acc-3:hover {
  background-color: hsla(var(--acc-h), calc(var(--acc-s) - var(--acc-s) * 0.25), calc(var(--acc-l) + (100% - var(--acc-l)) * 0.5), 1) !important;
}

.h\:bg_acc-4:hover {
  background-color: hsla(var(--acc-h), calc(var(--acc-s) - var(--acc-s) * 0.375), calc(var(--acc-l) + (100% - var(--acc-l)) * 0.75), 1) !important;
}

.h\:bg_acc-5:hover {
  background-color: hsla(var(--acc-h), calc(var(--acc-s) - var(--acc-s) * 0.45), calc(var(--acc-l) + (100% - var(--acc-l)) * 0.9), 1) !important;
}

.h\:bg_acc-n1:hover {
  background-color: hsla(var(--acc-h), calc(var(--acc-s) + (100% - var(--acc-s)) * 0.015), calc(var(--acc-l) - var(--acc-l) * 0.15), 1) !important;
}

.h\:bg_acc-n2:hover {
  background-color: hsla(var(--acc-h), calc(var(--acc-s) + (100% - var(--acc-s)) * 0.03), calc(var(--acc-l) - var(--acc-l) * 0.3), 1) !important;
}

.h\:bg_acc-n3:hover {
  background-color: hsla(var(--acc-h), calc(var(--acc-s) + (100% - var(--acc-s)) * 0.05), calc(var(--acc-l) - var(--acc-l) * 0.5), 1) !important;
}

.h\:bg_acc-n4:hover {
  background-color: hsla(var(--acc-h), calc(var(--acc-s) + (100% - var(--acc-s)) * 0.07), calc(var(--acc-l) - var(--acc-l) * 0.7), 1) !important;
}

.h\:bg_acc-n5:hover {
  background-color: hsla(var(--acc-h), calc(var(--acc-s) + (100% - var(--acc-s)) * 0.085), calc(var(--acc-l) - var(--acc-l) * 0.85), 1) !important;
}

.h\:c_acc:hover,.h\:c_acc-0:hover {
  color: var(--acc) !important;
}

.h\:c_acc-1:hover {
  color: hsla(var(--acc-h), calc(var(--acc-s) - var(--acc-s) * 0.05), calc(var(--acc-l) + (100% - var(--acc-l)) * 0.1), 1) !important;
}

.h\:c_acc-2:hover {
  color: hsla(var(--acc-h), calc(var(--acc-s) - var(--acc-s) * 0.125), calc(var(--acc-l) + (100% - var(--acc-l)) * 0.25), 1) !important;
}

.h\:c_acc-3:hover {
  color: hsla(var(--acc-h), calc(var(--acc-s) - var(--acc-s) * 0.25), calc(var(--acc-l) + (100% - var(--acc-l)) * 0.5), 1) !important;
}

.h\:c_acc-4:hover {
  color: hsla(var(--acc-h), calc(var(--acc-s) - var(--acc-s) * 0.375), calc(var(--acc-l) + (100% - var(--acc-l)) * 0.75), 1) !important;
}

.h\:c_acc-5:hover {
  color: hsla(var(--acc-h), calc(var(--acc-s) - var(--acc-s) * 0.45), calc(var(--acc-l) + (100% - var(--acc-l)) * 0.9), 1) !important;
}

.h\:c_acc-n1:hover {
  color: hsla(var(--acc-h), calc(var(--acc-s) + (100% - var(--acc-s)) * 0.015), calc(var(--acc-l) - var(--acc-l) * 0.15), 1) !important;
}

.h\:c_acc-n2:hover {
  color: hsla(var(--acc-h), calc(var(--acc-s) + (100% - var(--acc-s)) * 0.03), calc(var(--acc-l) - var(--acc-l) * 0.3), 1) !important;
}

.h\:c_acc-n3:hover {
  color: hsla(var(--acc-h), calc(var(--acc-s) + (100% - var(--acc-s)) * 0.05), calc(var(--acc-l) - var(--acc-l) * 0.5), 1) !important;
}

.h\:c_acc-n4:hover {
  color: hsla(var(--acc-h), calc(var(--acc-s) + (100% - var(--acc-s)) * 0.07), calc(var(--acc-l) - var(--acc-l) * 0.7), 1) !important;
}

.h\:c_acc-n5:hover {
  color: hsla(var(--acc-h), calc(var(--acc-s) + (100% - var(--acc-s)) * 0.085), calc(var(--acc-l) - var(--acc-l) * 0.85), 1) !important;
}

.h\:br_acc:hover,.h\:br_acc-0:hover {
  border-color: var(--acc) !important;
}

.h\:br_acc-1:hover {
  border-color: hsla(var(--acc-h), calc(var(--acc-s) - var(--acc-s) * 0.05), calc(var(--acc-l) + (100% - var(--acc-l)) * 0.1), 1) !important;
}

.h\:br_acc-2:hover {
  border-color: hsla(var(--acc-h), calc(var(--acc-s) - var(--acc-s) * 0.125), calc(var(--acc-l) + (100% - var(--acc-l)) * 0.25), 1) !important;
}

.h\:br_acc-3:hover {
  border-color: hsla(var(--acc-h), calc(var(--acc-s) - var(--acc-s) * 0.25), calc(var(--acc-l) + (100% - var(--acc-l)) * 0.5), 1) !important;
}

.h\:br_acc-4:hover {
  border-color: hsla(var(--acc-h), calc(var(--acc-s) - var(--acc-s) * 0.375), calc(var(--acc-l) + (100% - var(--acc-l)) * 0.75), 1) !important;
}

.h\:br_acc-5:hover {
  border-color: hsla(var(--acc-h), calc(var(--acc-s) - var(--acc-s) * 0.45), calc(var(--acc-l) + (100% - var(--acc-l)) * 0.9), 1) !important;
}

.h\:br_acc-n1:hover {
  border-color: hsla(var(--acc-h), calc(var(--acc-s) + (100% - var(--acc-s)) * 0.015), calc(var(--acc-l) - var(--acc-l) * 0.15), 1) !important;
}

.h\:br_acc-n2:hover {
  border-color: hsla(var(--acc-h), calc(var(--acc-s) + (100% - var(--acc-s)) * 0.03), calc(var(--acc-l) - var(--acc-l) * 0.3), 1) !important;
}

.h\:br_acc-n3:hover {
  border-color: hsla(var(--acc-h), calc(var(--acc-s) + (100% - var(--acc-s)) * 0.05), calc(var(--acc-l) - var(--acc-l) * 0.5), 1) !important;
}

.h\:br_acc-n4:hover {
  border-color: hsla(var(--acc-h), calc(var(--acc-s) + (100% - var(--acc-s)) * 0.07), calc(var(--acc-l) - var(--acc-l) * 0.7), 1) !important;
}

.h\:br_acc-n5:hover {
  border-color: hsla(var(--acc-h), calc(var(--acc-s) + (100% - var(--acc-s)) * 0.085), calc(var(--acc-l) - var(--acc-l) * 0.85), 1) !important;
}

.h\:c_inherit {
  color: inherit;
}

/*
  Hover: Text Color

  Hovers can easily be added to change the text color by adding `h:` in front of the text color utility like `h:primary`

  c_primary              - text color modified light to dark
  c_shade              - text color modified light to dark
  c_info              - text color modified light to dark
  c_highlight              - text color success color
  c_success              - text color modified light to dark
  c_warning              - text color modified light to dark
  c_alert              - text color modified light to dark

  Markup:
  <div class="flex m_5">
    <div class="h:{{modifier_class}}-5 flex_auto font_bold bg_shade-3 font_4 font_accent: text_center br_1 br_solid br_shade-4 p_1">5</div>
    <div class="h:{{modifier_class}}-4 flex_auto font_bold bg_shade-3 font_4 font_accent: text_center br_1 br_solid br_shade-4 p_1">4</div>
    <div class="h:{{modifier_class}}-3 flex_auto font_bold bg_shade-3 font_4 font_accent: text_center br_1 br_solid br_shade-4 p_1">3</div>
    <div class="h:{{modifier_class}}-2 flex_auto font_bold bg_shade-3 font_4 font_accent: text_center br_1 br_solid br_shade-4 p_1">2</div>
    <div class="h:{{modifier_class}}-1 flex_auto font_bold bg_shade-3 font_4 font_accent: text_center br_1 br_solid br_shade-4 p_1">1</div>
    <div class="h:{{modifier_class}}-0 flex_auto font_bold bg_shade-3 font_4 font_accent: text_center br_1 br_solid br_shade-4 p_1">0</div>
    <div class="h:{{modifier_class}}-n1 flex_auto font_bold bg_shade-3 font_4 font_accent: text_center br_1 br_solid br_shade-4 p_1 ">n1</div>
    <div class="h:{{modifier_class}}-n2 flex_auto font_bold bg_shade-3 font_4 font_accent: text_center br_1 br_solid br_shade-4 p_1 ">n2</div>
    <div class="h:{{modifier_class}}-n3 flex_auto font_bold bg_shade-3 font_4 font_accent: text_center br_1 br_solid br_shade-4 p_1 ">n3</div>
    <div class="h:{{modifier_class}}-n4 flex_auto font_bold bg_shade-3 font_4 font_accent: text_center br_1 br_solid br_shade-4 p_1 ">n4</div>
    <div class="h:{{modifier_class}}-n5 flex_auto font_bold bg_shade-3 font_4 font_accent: text_center br_1 br_solid br_shade-4 p_1 ">n5</div>
  </div>

  Weight: 10

  Styleguide Interaction.States.Hover.text

 */
.h\:c_white:hover, .btn_acc-primary:hover,
.active > .a\:c_white,
.active.a\:c_white {
  color: rgb(255, 255, 255) !important;
}

.h\:c_black:hover,
.active > .a\:c_black,
.active.a\:c_black {
  color: rgb(19, 18, 18) !important;
}

.h\:underline:hover, .h\:underline:focus {
  text-decoration: underline;
}

.h\:underline-none:hover, .h\:underline-none:focus,
.h\:undecorated:hover,
.h\:undecorated:focus {
  text-decoration: none !important;
}

.h\:dashed:hover, .h\:dashed:focus {
  text-decoration: underline;
  -webkit-text-decoration-style: dashed;
          text-decoration-style: dashed;
}

.h\:double:hover, .h\:double:focus {
  text-decoration: underline;
  -webkit-text-decoration-style: double;
          text-decoration-style: double;
}

.h\:dotted:hover, .h\:dotted:focus {
  text-decoration: underline;
  -webkit-text-decoration-style: dotted;
          text-decoration-style: dotted;
}

/*
  Hover:  Underline 

  Sometimes is is needed to add an underline on a piece of text when it hovers adding `h:` in front of the type of underline you would like gives that type of underline to the text when hovered.

  underline.c_primary - classic anchor text
  dotted.c_warning - great for popups or hint text
  double.c_highlight - extra loud underlines for the really important links or modals
  dashed.c_accent - extra loud dots for info and hint texts reveals.

  Markup:
  <p class="font_1">
    Lorem ipsum dolor sit amet, 
    <span class="h:{{modifier_class}} h:c_primary-n3">consectetur</span>
    adipisicing elit. 
    <span class="h:{{modifier_class}} h:c_primary-n3">Tenetur, similique</span>. 
    Sapiente facilis ipsam unde, dolorem illo ullam, tempore quos maiores quaerat quibusdam voluptatibus laboriosam. Nisi 
    <span class="h:{{modifier_class}} h:c_primary-n3">harum magni</span>
        adipisicing elit aut nulla et.
  </p>

  Weight: 20

  Styleguide Interaction.States.Hover.underlines

  */
/* Transparent Loop */
.h\:bg_white:hover,
.active > .a\:bg_white,
.active.a\:bg_white {
  background-color: rgb(255, 255, 255);
}

.h\:bg_white-0:hover {
  background-color: rgba(255, 255, 255, 0) !important;
}

.h\:bg_white-_01:hover {
  background-color: rgba(255, 255, 255, 0.005) !important;
}

.h\:bg_white-_05:hover {
  background-color: rgba(255, 255, 255, 0.0075) !important;
}

.h\:bg_white-1:hover {
  background-color: rgba(255, 255, 255, 0.025) !important;
}

.h\:bg_white-2:hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
}

.h\:bg_white-3:hover {
  background-color: rgba(255, 255, 255, 0.25) !important;
}

.h\:bg_white-4:hover {
  background-color: rgba(255, 255, 255, 0.38) !important;
}

.h\:bg_white-5:hover {
  background-color: rgba(255, 255, 255, 0.5) !important;
}

.h\:bg_white-6:hover {
  background-color: rgba(255, 255, 255, 0.62) !important;
}

.h\:bg_white-7:hover {
  background-color: rgba(255, 255, 255, 0.75) !important;
}

.h\:bg_white-8:hover {
  background-color: rgba(255, 255, 255, 0.9) !important;
}

.h\:bg_white-9:hover {
  background-color: rgba(255, 255, 255, 0.975) !important;
}

.h\:bg_white-none:hover {
  background-color: white !important;
}

.h\:bg_black:hover,
.active > .a\:bg_black,
.active.a\:bg_black {
  background-color: rgb(19, 18, 18);
}

.h\:bg_black-0:hover {
  background-color: rgba(19, 18, 18, 0) !important;
}

.h\:bg_black-_01:hover {
  background-color: rgba(19, 18, 18, 0.005) !important;
}

.h\:bg_black-_05:hover {
  background-color: rgba(19, 18, 18, 0.0075) !important;
}

.h\:bg_black-1:hover {
  background-color: rgba(19, 18, 18, 0.025) !important;
}

.h\:bg_black-2:hover {
  background-color: rgba(19, 18, 18, 0.1) !important;
}

.h\:bg_black-3:hover {
  background-color: rgba(19, 18, 18, 0.25) !important;
}

.h\:bg_black-4:hover {
  background-color: rgba(19, 18, 18, 0.38) !important;
}

.h\:bg_black-5:hover {
  background-color: rgba(19, 18, 18, 0.5) !important;
}

.h\:bg_black-6:hover {
  background-color: rgba(19, 18, 18, 0.62) !important;
}

.h\:bg_black-7:hover {
  background-color: rgba(19, 18, 18, 0.75) !important;
}

.h\:bg_black-8:hover {
  background-color: rgba(19, 18, 18, 0.9) !important;
}

.h\:bg_black-9:hover {
  background-color: rgba(19, 18, 18, 0.975) !important;
}

.h\:bg_black-none:hover {
  background-color: #131212 !important;
}

/*
Hover:  Background Black and White Opacity 

black and white overlays can be added to hovers easily by adding `h:` in front of black or white  with the level of opacity needed.

bg_white              - text color modified light to dark
bg_black              - text color modified light to dark

Markup:
<div class="flex m_5 bg_primary m_5">
  <div class="h:{{modifier_class}}-0  p-y_3 p-x_4 flex_auto font_bold font_2 font_accent: text_center br_1 br_solid br_shade-4">0</div>
  <div class="h:{{modifier_class}}-1  p-y_3 p-x_4 flex_auto font_bold font_2 font_accent: text_center br_1 br_solid br_shade-4">1</div>
  <div class="h:{{modifier_class}}-2  p-y_3 p-x_4 flex_auto font_bold font_2 font_accent: text_center br_1 br_solid br_shade-4">2</div>
  <div class="h:{{modifier_class}}-3  p-y_3 p-x_4 flex_auto font_bold font_2 font_accent: text_center br_1 br_solid br_shade-4">3</div>
  <div class="h:{{modifier_class}}-4  p-y_3 p-x_4 flex_auto font_bold font_2 font_accent: text_center br_1 br_solid br_shade-4">4</div>
  <div class="h:{{modifier_class}}-5  p-y_3 p-x_4 flex_auto font_bold font_2 font_accent: text_center br_1 br_solid br_shade-4">5</div>
  <div class="h:{{modifier_class}}-6  p-y_3 p-x_4 flex_auto font_bold font_2 font_accent: text_center br_1 br_solid br_shade-4 ">6</div>
  <div class="h:{{modifier_class}}-7  p-y_3 p-x_4 flex_auto font_bold font_2 font_accent: text_center br_1 br_solid br_shade-4 ">7</div>
  <div class="h:{{modifier_class}}-8  p-y_3 p-x_4 flex_auto font_bold font_2 font_accent: text_center br_1 br_solid br_shade-4 ">8</div>
  <div class="h:{{modifier_class}}-9  p-y_3 p-x_4 flex_auto font_bold font_2 font_accent: text_center br_1 br_solid br_shade-4 ">9</div>
  <div class="h:{{modifier_class}}  p-y_3 p-x_4 flex_auto font_bold font_2 font_accent: text_center br_1 br_solid br_shade-4 ">default</div>
</div>

Weight: 50

Styleguide Interaction.States.Hover.opacity.whiteblack

 */
/*
Hover: Full Opacity

Set the Opacity of an object to 100% while hovered.


Markup:
<div class="flex m_5 bg_primary m_5">
  <div class="h:opacity opacity-0  p-y_3 p-x_4 flex_auto font_bold font_2 font_accent: text_center br_1 br_solid br_shade-4">0</div>
  <div class="h:opacity opacity-1  p-y_3 p-x_4 flex_auto font_bold font_2 font_accent: text_center br_1 br_solid br_shade-4">1</div>
  <div class="h:opacity opacity-2  p-y_3 p-x_4 flex_auto font_bold font_2 font_accent: text_center br_1 br_solid br_shade-4">2</div>
  <div class="h:opacity opacity-3  p-y_3 p-x_4 flex_auto font_bold font_2 font_accent: text_center br_1 br_solid br_shade-4">3</div>
  <div class="h:opacity opacity-4  p-y_3 p-x_4 flex_auto font_bold font_2 font_accent: text_center br_1 br_solid br_shade-4">4</div>
  <div class="h:opacity opacity-5  p-y_3 p-x_4 flex_auto font_bold font_2 font_accent: text_center br_1 br_solid br_shade-4">5</div>
  <div class="h:opacity opacity-6  p-y_3 p-x_4 flex_auto font_bold font_2 font_accent: text_center br_1 br_solid br_shade-4 ">6</div>
  <div class="h:opacity opacity-7  p-y_3 p-x_4 flex_auto font_bold font_2 font_accent: text_center br_1 br_solid br_shade-4 ">7</div>
  <div class="h:opacity opacity-8  p-y_3 p-x_4 flex_auto font_bold font_2 font_accent: text_center br_1 br_solid br_shade-4 ">8</div>
  <div class="h:opacity opacity-9  p-y_3 p-x_4 flex_auto font_bold font_2 font_accent: text_center br_1 br_solid br_shade-4 ">9</div>
</div>

Weight: 60

Styleguide Interaction.States.Hover.opacity

*/
.h\:opacity:hover,
.active > .a\:opacity,
.active.a\:opacity {
  opacity: 1;
}

/*
  Hover:  Border Color

  hovers can easily effect the border style to toggle between styles.  Very useful fo toggling from a border type to none or vice versa. 
| Class          | Effect                                                                                      |
| -------------- | ------------------------------------------------------------------------------------------- |
| br_none        | Border is None on Hover                                                                     |
| br_dotted      | Border is Dotted on Hover                                                                   |
| br_dashed      | Border is Dashed on Hover                                                                   |
| br_solid       | Border is Solid on Hover                                                                    |
| br_transparent | Sometimes shifting to transparent is better so as to not cause the UI to flicker and resize |

Markup:
<div class="">
  <div class="h:br_none br_3 br_solid br_primary-2 p_2 m_2 bg_shade-5">None</div>
  <div class="h:br_transparent br_3 br_solid br_primary-2 p_2 m_2 bg_shade-5">Transparent</div>
  <div class="h:br_solid br_3 br_dotted br_primary-2 p_2 m_2 bg_shade-5">Solid</div>
  <div class="h:br_dashed br_3 br_solid br_primary-2 p_2 m_2 bg_shade-5">Dashed</div>
  <div class="h:br_dotted br_3 br_solid br_primary-2 p_2 m_2 bg_shade-5">Dotted</div>
</div>

Weight: 40

Styleguide Interaction.States.Hover.borders

*/
.h\:br_dotted:hover {
  border-style: dotted !important;
}

.h\:br_dashed:hover {
  border-style: dashed !important;
}

.h\:br_solid:hover {
  border-style: solid !important;
}

.h\:br_none:hover {
  border-style: none !important;
}

.h\:br_transparent:hover {
  border-color: transparent !important;
}

/*
Disabled

Description: The antithesis of active or hover is disabled.  combined with the standard for background and color UI elements styled with `disable` look very inactive and untouchable

Markup:


Weight:0

Styleguide Recipes.
*/
.disabled {
  background-image: url("../img/cross_disabled.png");
}

.disabled, .disabled > * {
  cursor: not-allowed;
}
.disabled.c_disabled, .disabled.c_disabled:hover, .disabled > *.c_disabled, .disabled > *.c_disabled:hover {
  color: rgba(19, 18, 18, 0.5) !important;
}
.disabled.bg_disabled, .disabled.bg_disabled:hover, .disabled > *.bg_disabled, .disabled > *.bg_disabled:hover {
  background-color: rgba(19, 18, 18, 0.1) !important;
}
.disabled.c_disabled-inverted, .disabled.c_disabled-inverted:hover, .disabled > *.c_disabled-inverted, .disabled > *.c_disabled-inverted:hover {
  color: rgba(255, 255, 255, 0.5) !important;
}
.disabled.bg_disabled-inverted, .disabled.bg_disabled-inverted:hover, .disabled > *.bg_disabled-inverted, .disabled > *.bg_disabled-inverted:hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
}
.disabled.opacity_disabled, .disabled.opacity_disabled:hover, .disabled > *.opacity_disabled, .disabled > *.opacity_disabled:hover {
  opacity: 0.5 !important;
}
.disabled:hover, .disabled *:hover, .disabled > *:hover, .disabled > * *:hover {
  text-decoration: none;
}

/*
Animation

Transitions Eases and Transforms.Create simple toggleable animations with a combination of classes. 

Weight: 140

Styleguide Interaction.Animation


*/
/*
Transition 

Soften the harshness of the switch of the style by adding transitions to the change the speed of transition from decorators.

0              - 0 second transition
1              - .1 second transition
2              - .25 second transition
3              - .3 second transition
4              - .5 second transition
5              - 1 second transition

Markup:
<div class="flex m_5 bg_primary m_5">
  <div class="transition_{{modifier_class}} h:bg_black-0  p-y_3 p-x_4 flex_auto font_bold font_2 font_accent: text_center br_1 br_solid br_shade-4">0</div>
  <div class="transition_{{modifier_class}} h:bg_black-1  p-y_3 p-x_4 flex_auto font_bold font_2 font_accent: text_center br_1 br_solid br_shade-4">1</div>
  <div class="transition_{{modifier_class}} h:bg_black-2  p-y_3 p-x_4 flex_auto font_bold font_2 font_accent: text_center br_1 br_solid br_shade-4">2</div>
  <div class="transition_{{modifier_class}} h:bg_black-3  p-y_3 p-x_4 flex_auto font_bold font_2 font_accent: text_center br_1 br_solid br_shade-4">3</div>
  <div class="transition_{{modifier_class}} h:bg_black-4  p-y_3 p-x_4 flex_auto font_bold font_2 font_accent: text_center br_1 br_solid br_shade-4">4</div>
  <div class="transition_{{modifier_class}} h:bg_black-5  p-y_3 p-x_4 flex_auto font_bold font_2 font_accent: text_center br_1 br_solid br_shade-4">5</div>
  <div class="transition_{{modifier_class}} h:bg_black-6  p-y_3 p-x_4 flex_auto font_bold font_2 font_accent: text_center br_1 br_solid br_shade-4 ">6</div>
  <div class="transition_{{modifier_class}} h:bg_black-7  p-y_3 p-x_4 flex_auto font_bold font_2 font_accent: text_center br_1 br_solid br_shade-4 ">7</div>
  <div class="transition_{{modifier_class}} h:bg_black-8  p-y_3 p-x_4 flex_auto font_bold font_2 font_accent: text_center br_1 br_solid br_shade-4 ">8</div>
  <div class="transition_{{modifier_class}} h:bg_black-9  p-y_3 p-x_4 flex_auto font_bold font_2 font_accent: text_center br_1 br_solid br_shade-4 ">9</div>
  <div class="transition_{{modifier_class}} h:bg_black  p-y_3 p-x_4 flex_auto font_bold font_2 font_accent: text_center br_1 br_solid br_shade-4 ">default</div>
</div>


Styleguide Interaction.Animation.transition

 */
*[class*=transition] {
  transition-property: all;
  transition-timing-function: ease;
}

.transition_0 {
  transition: all 0s;
}

.transition_1, .btn_acc-primary {
  transition: all 0.1s;
}

.transition_2 {
  transition: all 0.2s;
}

.transition_3 {
  transition: all 0.35s;
}

.transition_4, *[data-bs-toggle=collapse] .a\:rotation {
  transition: all 0.5s;
}

.transition_5 {
  transition: all 1s;
}

/*
Easing the on Hover 

Dynamic adjustment of transition with easing.

out-in              - ease timing
out              - ease-out timing
in              - ease-in timing
in-out              - ease-in-out timing
linear              - linear timing


Markup:
<div class="flex m_5 bg_primary m_5">
  <div class="transition_3 ease_{{modifier_class}} h:bg_black-0  p-y_3 p-x_4 flex_auto font_bold font_2 font_accent: text_center br_1 br_solid br_shade-4">0</div>
  <div class="transition_3 ease_{{modifier_class}} h:bg_black-1  p-y_3 p-x_4 flex_auto font_bold font_2 font_accent: text_center br_1 br_solid br_shade-4">1</div>
  <div class="transition_3 ease_{{modifier_class}} h:bg_black-2  p-y_3 p-x_4 flex_auto font_bold font_2 font_accent: text_center br_1 br_solid br_shade-4">2</div>
  <div class="transition_3 ease_{{modifier_class}} h:bg_black-3  p-y_3 p-x_4 flex_auto font_bold font_2 font_accent: text_center br_1 br_solid br_shade-4">3</div>
  <div class="transition_3 ease_{{modifier_class}} h:bg_black-4  p-y_3 p-x_4 flex_auto font_bold font_2 font_accent: text_center br_1 br_solid br_shade-4">4</div>
  <div class="transition_3 ease_{{modifier_class}} h:bg_black-5  p-y_3 p-x_4 flex_auto font_bold font_2 font_accent: text_center br_1 br_solid br_shade-4">5</div>
  <div class="transition_3 ease_{{modifier_class}} h:bg_black-6  p-y_3 p-x_4 flex_auto font_bold font_2 font_accent: text_center br_1 br_solid br_shade-4 ">6</div>
  <div class="transition_3 ease_{{modifier_class}} h:bg_black-7  p-y_3 p-x_4 flex_auto font_bold font_2 font_accent: text_center br_1 br_solid br_shade-4 ">7</div>
  <div class="transition_3 ease_{{modifier_class}} h:bg_black-8  p-y_3 p-x_4 flex_auto font_bold font_2 font_accent: text_center br_1 br_solid br_shade-4 ">8</div>
  <div class="transition_3 ease_{{modifier_class}} h:bg_black-9  p-y_3 p-x_4 flex_auto font_bold font_2 font_accent: text_center br_1 br_solid br_shade-4 ">9</div>
  <div class="transition_3 ease_{{modifier_class}} h:bg_black  p-y_3 p-x_4 flex_auto font_bold font_2 font_accent: text_center br_1 br_solid br_shade-4 ">default</div>
</div>


Styleguide Interaction.Animation.ease

 */
.ease_linear {
  transition-timing-function: linear;
}

.ease_out-in {
  transition-timing-function: ease;
}

.ease_in {
  transition-timing-function: ease-in;
}

.ease_out, .btn_acc-primary {
  transition-timing-function: ease-out;
}

.ease_in-out {
  transition-timing-function: ease-in-out;
}

/*
Transform Scale 

Dynamic adjustment of objects scale for toggling between

0              - Scale to 0%
100            - Scale to 100%
X-0            - Scale the X to 0%
X-100            - Scale the X to 100%
Y-0            - Scale the X to 0%
Y-100            - Scale the X to 100%

Markup:
<div class="flex m_5 bg_primary m_5">
  <div class="scale_{{modifier_class}} w-10 p-y_3 p-x_4 font_bold font_2 font_accent: text_center br_1 br_solid br_shade-4">This is content that will be scaled.</div>
</div>

Styleguide Interaction.Animation.scale

 */
.scale_X-0 {
  transform: scaleX(0);
}

.scale_X-100 {
  transform: scaleX(1);
}

.scale_Y-0 {
  transform: scaleY(0);
}

.scale_Y-100 {
  transform: scaleY(1);
}

.scale_0 {
  transform: scale(0, 0);
}

.scale_100 {
  transform: scale(1, 1);
}

.origin_tl {
  transform-origin: left top;
}

.origin_rt {
  transform-origin: right top;
}

.origin_c {
  transform-origin: center center;
}

.origin_lb {
  transform-origin: left bottom;
}

.origin_rb {
  transform-origin: right bottom;
}

.origin_t {
  transform-origin: center top;
}

.origin_b {
  transform-origin: center bottom;
}

.origin_r {
  transform-origin: right center;
}

.origin_l {
  transform-origin: left center;
}

.rotate_45 {
  transform: rotate(45deg);
}

.rotate_90 {
  transform: rotate(90deg);
}

.rotate_135 {
  transform: rotate(135deg);
}

.rotate_180 {
  transform: rotate(180deg);
}

.rotate_225 {
  transform: rotate(225deg);
}

.rotate_270 {
  transform: rotate(270deg);
}

.rotate_315 {
  transform: rotate(315deg);
}

.active.a\:rotate_45,
.active > .a\:rotate_45 {
  transform: rotate(45deg);
}
.active.a\:rotate_90,
.active > .a\:rotate_90 {
  transform: rotate(90deg);
}
.active.a\:rotate_135,
.active > .a\:rotate_135 {
  transform: rotate(135deg);
}
.active.a\:rotate_180,
.active > .a\:rotate_180 {
  transform: rotate(180deg);
}
.active.a\:rotate_225,
.active > .a\:rotate_225 {
  transform: rotate(225deg);
}
.active.a\:rotate_270,
.active > .a\:rotate_270 {
  transform: rotate(270deg);
}
.active.a\:rotate_315,
.active > .a\:rotate_315 {
  transform: rotate(315deg);
}

/*

Rotation

Rotation through transform. Transform doesn't modify the displacement of the flow.  This also have an active class modifier

rotate_45               - Rotate by 45 degrees
rotate_90               - Rotate by 90 degrees
rotate_135              - Rotate by 135 degrees
rotate_180              - Rotate by 180 degrees
rotate_225              - Rotate by 225 degrees
rotate_270              - Rotate by 270 degrees
rotate_315              - Rotate by 315 degrees


Markup:
<i class="font_10 fas fa fa-user {{modifier_class}}"></i>


Weight: 100

Styleguide Interaction.Animation.Rotation
*/
/*

Rotation on Active

 Add in the `a:` in front of these classes gives you the rotation only when the item is active.<div class="p-b_3"><span class="bg_highlight br_radius c_white inline-block font_n1 p-y_3 p-x_5 ">These classes are effected by the parent having `active` state.</span></div>

rotate_45               - Rotate by 45 degrees
rotate_90               - Rotate by 90 degrees
rotate_135              - Rotate by 135 degrees
rotate_180              - Rotate by 180 degrees
rotate_225              - Rotate by 225 degrees
rotate_270              - Rotate by 270 degrees
rotate_315              - Rotate by 315 degrees


Markup:
<span><i class="font_10 fas fa fa-user a:{{modifier_class}}"></i> Not Active </span>
<span><i class="active font_10 fas fa fa-user a:{{modifier_class}}"></i> Active </span>

Weight: 100

Styleguide Interaction.Animation.RotationActive
*/
*[data-bs-toggle=collapse] .a\:rotation.fa-times, *[data-bs-toggle=collapse] .a\:rotation.fa-chevron-up, *[data-bs-toggle=collapse] .a\:rotation.fa-minus.rotate_90 {
  transform: rotate(0deg);
}
*[data-bs-toggle=collapse].collapsed .a\:rotation.fa-times, *[data-bs-toggle=collapse].show .a\:rotation.fa-times {
  transform: rotate(135deg);
}
*[data-bs-toggle=collapse].collapsed .a\:rotation.fa-chevron-up, *[data-bs-toggle=collapse].show .a\:rotation.fa-chevron-up {
  transform: rotate(180deg);
}
*[data-bs-toggle=collapse].collapsed .a\:rotation.fa-minus.rotate_90, *[data-bs-toggle=collapse].show .a\:rotation.fa-minus.rotate_90 {
  transform: rotate(90deg);
}

.bg-blend_normal {
  background-blend-mode: normal;
  mix-blend-mode: normal;
}

.bg-blend_multiply {
  background-blend-mode: multiply;
  mix-blend-mode: multiply;
}

.bg-blend_screen {
  background-blend-mode: screen;
  mix-blend-mode: screen;
}

.bg-blend_overlay {
  background-blend-mode: overlay;
  mix-blend-mode: overlay;
}

.bg-blend_darken {
  background-blend-mode: darken;
  mix-blend-mode: darken;
}

.bg-blend_lighten {
  background-blend-mode: lighten;
  mix-blend-mode: lighten;
}

.bg-blend_color-dodge {
  background-blend-mode: color-dodge;
  mix-blend-mode: color-dodge;
}

.bg-blend_color-burn {
  background-blend-mode: color-burn;
  mix-blend-mode: color-burn;
}

.bg-blend_hard-light {
  background-blend-mode: hard-light;
  mix-blend-mode: hard-light;
}

.bg-blend_soft-light {
  background-blend-mode: soft-light;
  mix-blend-mode: soft-light;
}

.bg-blend_difference {
  background-blend-mode: difference;
  mix-blend-mode: difference;
}

.bg-blend_exclusion {
  background-blend-mode: exclusion;
  mix-blend-mode: exclusion;
}

.bg-blend_hue {
  background-blend-mode: hue;
  mix-blend-mode: hue;
}

.bg-blend_saturation {
  background-blend-mode: saturation;
  mix-blend-mode: saturation;
}

.bg-blend_color {
  background-blend-mode: color;
  mix-blend-mode: color;
}

.bg-blend_luminosity {
  background-blend-mode: luminosity;
  mix-blend-mode: luminosity;
}

.bg-blend_initial {
  background-blend-mode: initial;
  mix-blend-mode: initial;
}

.bg-blend_inherit {
  background-blend-mode: inherit;
  mix-blend-mode: inherit;
}

.bg-blend_unset {
  background-blend-mode: unset;
  mix-blend-mode: unset;
}

.font-blend_normal {
  mix-blend-mode: normal;
}

.font-blend_multiply {
  mix-blend-mode: multiply;
}

.font-blend_screen {
  mix-blend-mode: screen;
}

.font-blend_overlay {
  mix-blend-mode: overlay;
}

.font-blend_darken {
  mix-blend-mode: darken;
}

.font-blend_lighten {
  mix-blend-mode: lighten;
}

.font-blend_color-dodge {
  mix-blend-mode: color-dodge;
}

.font-blend_color-burn {
  mix-blend-mode: color-burn;
}

.font-blend_hard-light {
  mix-blend-mode: hard-light;
}

.font-blend_soft-light {
  mix-blend-mode: soft-light;
}

.font-blend_difference {
  mix-blend-mode: difference;
}

.font-blend_exclusion {
  mix-blend-mode: exclusion;
}

.font-blend_hue {
  mix-blend-mode: hue;
}

.font-blend_saturation {
  mix-blend-mode: saturation;
}

.font-blend_color {
  mix-blend-mode: color;
}

.font-blend_luminosity {
  mix-blend-mode: luminosity;
}

.font-blend_initial {
  mix-blend-mode: initial;
}

.font-blend_inherit {
  mix-blend-mode: inherit;
}

.font-blend_unset {
  mix-blend-mode: unset;
}

/*
Text Blend 

Color blending modes for text on backgrounds. 


.font-blend_normal                  - blend text with a normal
.font-blend_multiply                    - blend text with a multiply
.font-blend_screen                  - blend text with a screen
.font-blend_overlay                 - blend text with a overlay
.font-blend_darken                  - blend text with a darken
.font-blend_lighten                 - blend text with a lighten
.font-blend_color                   - blend text with a color
.font-blend_color                   - blend text with a color
.font-blend_hard                    - blend text with a hard
.font-blend_soft                    - blend text with a soft
.font-blend_difference                  - blend text with a difference
.font-blend_exclusion                   - blend text with a exclusion
.font-blend_hue                 - blend text with a hue
.font-blend_saturation                  - blend text with a saturation
.font-blend_color                   - blend text with a color
.font-blend_luminosity                  - blend text with a luminosity
.font-blend_initial                 - blend text with a initial
.font-blend_inherit                 - blend text with a inherit
.font-blend_unset                   - blend text with a unset


Weight: 150

Styleguide Decorator.Background.Blend


*/
/*
Mixed Blend Mode 

Background Image blending modes on top of other layers like other images, text, and svg. 

Weight: 150

Styleguide Decorator.Background.MixedBlendMode

*/
/*
Interaction

Modify how the user gets feed back of changes from hover effects to active states and how things animate or select.

Weight: 1000

Styleguide Interaction.States
*/
/*

Expanded Click Area

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

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

Styleguide Interaction.Expanded Click Area
*/

.expanded-click-area::after,.expanded-click-area-beforeAlt::before {
  z-index: 1;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: transparent;
  content: "";
  pointer-events: auto;
}

.sfPageEditor .expanded-click-area::after {
  background-color: rgba(154, 205, 50, 0.1803921569);
}

[href*=".pdf"].link::before, [href*=".pdf"].link_icons::before, [href*=".pdf"].link-light::before, .links_light.reading-typography a[href*=".pdf"]:not(.btn, .not-link)::before, [href*=".pdf"].link::before, :where(.reading-typography) a[href*=".pdf"]:not(.btn, .not-link)::before, :where(.reading-typography) details > summary[href*=".pdf"]::before, .links_dark.reading-typography a[href*=".pdf"]:not(.btn, .not-link)::before, [href*=".doc"].link::before, [href*=".doc"].link_icons::before, [href*=".doc"].link-light::before, .links_light.reading-typography a[href*=".doc"]:not(.btn, .not-link)::before, [href*=".doc"].link::before, :where(.reading-typography) a[href*=".doc"]:not(.btn, .not-link)::before, :where(.reading-typography) details > summary[href*=".doc"]::before, .links_dark.reading-typography a[href*=".doc"]:not(.btn, .not-link)::before, [href*=".docx"].link::before, [href*=".docx"].link_icons::before, [href*=".docx"].link-light::before, .links_light.reading-typography a[href*=".docx"]:not(.btn, .not-link)::before, [href*=".docx"].link::before, :where(.reading-typography) a[href*=".docx"]:not(.btn, .not-link)::before, :where(.reading-typography) details > summary[href*=".docx"]::before, .links_dark.reading-typography a[href*=".docx"]:not(.btn, .not-link)::before, [href*=".txt"].link::before, [href*=".txt"].link_icons::before, [href*=".txt"].link-light::before, .links_light.reading-typography a[href*=".txt"]:not(.btn, .not-link)::before, [href*=".txt"].link::before, :where(.reading-typography) a[href*=".txt"]:not(.btn, .not-link)::before, :where(.reading-typography) details > summary[href*=".txt"]::before, .links_dark.reading-typography a[href*=".txt"]:not(.btn, .not-link)::before, [href*=".zip"].link::before, [href*=".zip"].link_icons::before, [href*=".zip"].link-light::before, .links_light.reading-typography a[href*=".zip"]:not(.btn, .not-link)::before, [href*=".zip"].link::before, :where(.reading-typography) a[href*=".zip"]:not(.btn, .not-link)::before, :where(.reading-typography) details > summary[href*=".zip"]::before, .links_dark.reading-typography a[href*=".zip"]:not(.btn, .not-link)::before, [href*=".ppt"].link::before, [href*=".ppt"].link_icons::before, [href*=".ppt"].link-light::before, .links_light.reading-typography a[href*=".ppt"]:not(.btn, .not-link)::before, [href*=".ppt"].link::before, :where(.reading-typography) a[href*=".ppt"]:not(.btn, .not-link)::before, :where(.reading-typography) details > summary[href*=".ppt"]::before, .links_dark.reading-typography a[href*=".ppt"]:not(.btn, .not-link)::before, [href*=".pptx"].link::before, [href*=".pptx"].link_icons::before, [href*=".pptx"].link-light::before, .links_light.reading-typography a[href*=".pptx"]:not(.btn, .not-link)::before, [href*=".pptx"].link::before, :where(.reading-typography) a[href*=".pptx"]:not(.btn, .not-link)::before, :where(.reading-typography) details > summary[href*=".pptx"]::before, .links_dark.reading-typography a[href*=".pptx"]:not(.btn, .not-link)::before, [href*=".csv"].link::before, [href*=".csv"].link_icons::before, [href*=".csv"].link-light::before, .links_light.reading-typography a[href*=".csv"]:not(.btn, .not-link)::before, [href*=".csv"].link::before, :where(.reading-typography) a[href*=".csv"]:not(.btn, .not-link)::before, :where(.reading-typography) details > summary[href*=".csv"]::before, .links_dark.reading-typography a[href*=".csv"]:not(.btn, .not-link)::before, [href*=".xls"].link::before, [href*=".xls"].link_icons::before, [href*=".xls"].link-light::before, .links_light.reading-typography a[href*=".xls"]:not(.btn, .not-link)::before, [href*=".xls"].link::before, :where(.reading-typography) a[href*=".xls"]:not(.btn, .not-link)::before, :where(.reading-typography) details > summary[href*=".xls"]::before, .links_dark.reading-typography a[href*=".xls"]:not(.btn, .not-link)::before, [href*=".xlsx"].link::before, [href*=".xlsx"].link_icons::before, [href*=".xlsx"].link-light::before, .links_light.reading-typography a[href*=".xlsx"]:not(.btn, .not-link)::before, [href*=".xlsx"].link::before, :where(.reading-typography) a[href*=".xlsx"]:not(.btn, .not-link)::before, :where(.reading-typography) details > summary[href*=".xlsx"]::before, .links_dark.reading-typography a[href*=".xlsx"]:not(.btn, .not-link)::before, [href*=".mp4"].link::before, [href*=".mp4"].link_icons::before, [href*=".mp4"].link-light::before, .links_light.reading-typography a[href*=".mp4"]:not(.btn, .not-link)::before, [href*=".mp4"].link::before, :where(.reading-typography) a[href*=".mp4"]:not(.btn, .not-link)::before, :where(.reading-typography) details > summary[href*=".mp4"]::before, .links_dark.reading-typography a[href*=".mp4"]:not(.btn, .not-link)::before, [href*=".mov"].link::before, [href*=".mov"].link_icons::before, [href*=".mov"].link-light::before, .links_light.reading-typography a[href*=".mov"]:not(.btn, .not-link)::before, [href*=".mov"].link::before, :where(.reading-typography) a[href*=".mov"]:not(.btn, .not-link)::before, :where(.reading-typography) details > summary[href*=".mov"]::before, .links_dark.reading-typography a[href*=".mov"]:not(.btn, .not-link)::before, .pdf.link::before, .pdf.link_icons::before, .pdf.link-light::before, .links_light.reading-typography a.pdf:not(.btn, .not-link)::before, .pdf.link::before, :where(.reading-typography) a.pdf:not(.btn, .not-link)::before, :where(.reading-typography) details > summary.pdf::before, .links_dark.reading-typography a.pdf:not(.btn, .not-link)::before, .zip.link::before, .zip.link_icons::before, .zip.link-light::before, .links_light.reading-typography a.zip:not(.btn, .not-link)::before, .zip.link::before, :where(.reading-typography) a.zip:not(.btn, .not-link)::before, :where(.reading-typography) details > summary.zip::before, .links_dark.reading-typography a.zip:not(.btn, .not-link)::before, .file.link::before, .file.link_icons::before, .file.link-light::before, .links_light.reading-typography a.file:not(.btn, .not-link)::before, .file.link::before, :where(.reading-typography) a.file:not(.btn, .not-link)::before, :where(.reading-typography) details > summary.file::before, .links_dark.reading-typography a.file:not(.btn, .not-link)::before, .sheet.link::before, .sheet.link_icons::before, .sheet.link-light::before, .links_light.reading-typography a.sheet:not(.btn, .not-link)::before, .sheet.link::before, :where(.reading-typography) a.sheet:not(.btn, .not-link)::before, :where(.reading-typography) details > summary.sheet::before, .links_dark.reading-typography a.sheet:not(.btn, .not-link)::before, .powerpoint.link::before, .powerpoint.link_icons::before, .powerpoint.link-light::before, .links_light.reading-typography a.powerpoint:not(.btn, .not-link)::before, .powerpoint.link::before, :where(.reading-typography) a.powerpoint:not(.btn, .not-link)::before, :where(.reading-typography) details > summary.powerpoint::before, .links_dark.reading-typography a.powerpoint:not(.btn, .not-link)::before, .video.link::before, .video.link_icons::before, .video.link-light::before, .links_light.reading-typography a.video:not(.btn, .not-link)::before, .video.link::before, :where(.reading-typography) a.video:not(.btn, .not-link)::before, :where(.reading-typography) details > summary.video::before, .links_dark.reading-typography a.video:not(.btn, .not-link)::before {
  width: 1.28571429em;
  margin-right: 4px;
  margin-right: 0.25rem;
  text-align: center;
  text-indent: 0;
}

[target=_blank].link::after, [target=_blank].link_icons::after, [target=_blank].link-light::after, .links_light.reading-typography a[target=_blank]:not(.btn, .not-link)::after, :where(.reading-typography) a[target=_blank]:not(.btn, .not-link)::after, :where(.reading-typography) details > summary[target=_blank]::after, .links_dark.reading-typography a[target=_blank]:not(.btn, .not-link)::after, [href^=http][target=_blank].link::after, [href^=http][target=_blank].link_icons::after, [href^=http][target=_blank].link-light::after, :where(.reading-typography) a[href^=http][target=_blank]:not(.btn, .not-link)::after, :where(.reading-typography) details > summary[href^=http][target=_blank]::after, [href^=https][target=_blank].link::after, [href^=https][target=_blank].link_icons::after, [href^=https][target=_blank].link-light::after, :where(.reading-typography) a[href^=https][target=_blank]:not(.btn, .not-link)::after, :where(.reading-typography) details > summary[href^=https][target=_blank]::after, [href^="mailto:"].link::after, [href^="mailto:"].link_icons::after, [href^="mailto:"].link-light::after, .links_light.reading-typography a[href^="mailto:"]:not(.btn, .not-link)::after, :where(.reading-typography) a[href^="mailto:"]:not(.btn, .not-link)::after, :where(.reading-typography) details > summary[href^="mailto:"]::after, .links_dark.reading-typography a[href^="mailto:"]:not(.btn, .not-link)::after, [href^="tel:"].link::after, [href^="tel:"].link_icons::after, [href^="tel:"].link-light::after, .links_light.reading-typography a[href^="tel:"]:not(.btn, .not-link)::after, :where(.reading-typography) a[href^="tel:"]:not(.btn, .not-link)::after, :where(.reading-typography) details > summary[href^="tel:"]::after, .links_dark.reading-typography a[href^="tel:"]:not(.btn, .not-link)::after, [href^="fax:"].link::after, [href^="fax:"].link_icons::after, [href^="fax:"].link-light::after, .links_light.reading-typography a[href^="fax:"]:not(.btn, .not-link)::after, :where(.reading-typography) a[href^="fax:"]:not(.btn, .not-link)::after, :where(.reading-typography) details > summary[href^="fax:"]::after, .links_dark.reading-typography a[href^="fax:"]:not(.btn, .not-link)::after {
  width: 1.28571429em;
  margin-left: 4px;
  margin-left: 0.25rem;
  text-align: center;
  text-indent: 0;
}

[href*=".pdf"].link::before, [href*=".pdf"].link_icons::before, [href*=".pdf"].link-light::before, .links_light.reading-typography a[href*=".pdf"]:not(.btn, .not-link)::before, :where(.reading-typography) a[href*=".pdf"]:not(.btn, .not-link)::before, :where(.reading-typography) details > summary[href*=".pdf"]::before, .links_dark.reading-typography a[href*=".pdf"]:not(.btn, .not-link)::before, .pdf.link::before, .pdf.link_icons::before, .pdf.link-light::before, .links_light.reading-typography a.pdf:not(.btn, .not-link)::before, :where(.reading-typography) a.pdf:not(.btn, .not-link)::before, :where(.reading-typography) details > summary.pdf::before, .links_dark.reading-typography a.pdf:not(.btn, .not-link)::before {
  content: "\f1c1";
}
[href*=".doc"].link::before, [href*=".doc"].link_icons::before, [href*=".doc"].link-light::before, .links_light.reading-typography a[href*=".doc"]:not(.btn, .not-link)::before, :where(.reading-typography) a[href*=".doc"]:not(.btn, .not-link)::before, :where(.reading-typography) details > summary[href*=".doc"]::before, .links_dark.reading-typography a[href*=".doc"]:not(.btn, .not-link)::before, [href*=".docx"].link::before, [href*=".docx"].link_icons::before, [href*=".docx"].link-light::before, .links_light.reading-typography a[href*=".docx"]:not(.btn, .not-link)::before, :where(.reading-typography) a[href*=".docx"]:not(.btn, .not-link)::before, :where(.reading-typography) details > summary[href*=".docx"]::before, .links_dark.reading-typography a[href*=".docx"]:not(.btn, .not-link)::before, [href*=".txt"].link::before, [href*=".txt"].link_icons::before, [href*=".txt"].link-light::before, .links_light.reading-typography a[href*=".txt"]:not(.btn, .not-link)::before, :where(.reading-typography) a[href*=".txt"]:not(.btn, .not-link)::before, :where(.reading-typography) details > summary[href*=".txt"]::before, .links_dark.reading-typography a[href*=".txt"]:not(.btn, .not-link)::before, .file.link::before, .file.link_icons::before, .file.link-light::before, .links_light.reading-typography a.file:not(.btn, .not-link)::before, :where(.reading-typography) a.file:not(.btn, .not-link)::before, :where(.reading-typography) details > summary.file::before, .links_dark.reading-typography a.file:not(.btn, .not-link)::before {
  content: "\f1c2";
}
[href*=".zip"].link::before, [href*=".zip"].link_icons::before, [href*=".zip"].link-light::before, .links_light.reading-typography a[href*=".zip"]:not(.btn, .not-link)::before, :where(.reading-typography) a[href*=".zip"]:not(.btn, .not-link)::before, :where(.reading-typography) details > summary[href*=".zip"]::before, .links_dark.reading-typography a[href*=".zip"]:not(.btn, .not-link)::before, .zip.link::before, .zip.link_icons::before, .zip.link-light::before, .links_light.reading-typography a.zip:not(.btn, .not-link)::before, :where(.reading-typography) a.zip:not(.btn, .not-link)::before, :where(.reading-typography) details > summary.zip::before, .links_dark.reading-typography a.zip:not(.btn, .not-link)::before {
  content: "\f1c6";
}
[href*=".ppt"].link::before, [href*=".ppt"].link_icons::before, [href*=".ppt"].link-light::before, .links_light.reading-typography a[href*=".ppt"]:not(.btn, .not-link)::before, :where(.reading-typography) a[href*=".ppt"]:not(.btn, .not-link)::before, :where(.reading-typography) details > summary[href*=".ppt"]::before, .links_dark.reading-typography a[href*=".ppt"]:not(.btn, .not-link)::before, [href*=".pptx"].link::before, [href*=".pptx"].link_icons::before, [href*=".pptx"].link-light::before, .links_light.reading-typography a[href*=".pptx"]:not(.btn, .not-link)::before, :where(.reading-typography) a[href*=".pptx"]:not(.btn, .not-link)::before, :where(.reading-typography) details > summary[href*=".pptx"]::before, .links_dark.reading-typography a[href*=".pptx"]:not(.btn, .not-link)::before, .powerpoint.link::before, .powerpoint.link_icons::before, .powerpoint.link-light::before, .links_light.reading-typography a.powerpoint:not(.btn, .not-link)::before, :where(.reading-typography) a.powerpoint:not(.btn, .not-link)::before, :where(.reading-typography) details > summary.powerpoint::before, .links_dark.reading-typography a.powerpoint:not(.btn, .not-link)::before {
  content: "\f685";
}
[href*=".csv"].link::before, [href*=".csv"].link_icons::before, [href*=".csv"].link-light::before, .links_light.reading-typography a[href*=".csv"]:not(.btn, .not-link)::before, :where(.reading-typography) a[href*=".csv"]:not(.btn, .not-link)::before, :where(.reading-typography) details > summary[href*=".csv"]::before, .links_dark.reading-typography a[href*=".csv"]:not(.btn, .not-link)::before, [href*=".xls"].link::before, [href*=".xls"].link_icons::before, [href*=".xls"].link-light::before, .links_light.reading-typography a[href*=".xls"]:not(.btn, .not-link)::before, :where(.reading-typography) a[href*=".xls"]:not(.btn, .not-link)::before, :where(.reading-typography) details > summary[href*=".xls"]::before, .links_dark.reading-typography a[href*=".xls"]:not(.btn, .not-link)::before, [href*=".xlsx"].link::before, [href*=".xlsx"].link_icons::before, [href*=".xlsx"].link-light::before, .links_light.reading-typography a[href*=".xlsx"]:not(.btn, .not-link)::before, :where(.reading-typography) a[href*=".xlsx"]:not(.btn, .not-link)::before, :where(.reading-typography) details > summary[href*=".xlsx"]::before, .links_dark.reading-typography a[href*=".xlsx"]:not(.btn, .not-link)::before, .sheet.link::before, .sheet.link_icons::before, .sheet.link-light::before, .links_light.reading-typography a.sheet:not(.btn, .not-link)::before, :where(.reading-typography) a.sheet:not(.btn, .not-link)::before, :where(.reading-typography) details > summary.sheet::before, .links_dark.reading-typography a.sheet:not(.btn, .not-link)::before {
  content: "\f0ce";
}
[href*=".mp4"].link::before, [href*=".mp4"].link_icons::before, [href*=".mp4"].link-light::before, .links_light.reading-typography a[href*=".mp4"]:not(.btn, .not-link)::before, :where(.reading-typography) a[href*=".mp4"]:not(.btn, .not-link)::before, :where(.reading-typography) details > summary[href*=".mp4"]::before, .links_dark.reading-typography a[href*=".mp4"]:not(.btn, .not-link)::before, [href*=".mov"].link::before, [href*=".mov"].link_icons::before, [href*=".mov"].link-light::before, .links_light.reading-typography a[href*=".mov"]:not(.btn, .not-link)::before, :where(.reading-typography) a[href*=".mov"]:not(.btn, .not-link)::before, :where(.reading-typography) details > summary[href*=".mov"]::before, .links_dark.reading-typography a[href*=".mov"]:not(.btn, .not-link)::before, .video.link::before, .video.link_icons::before, .video.link-light::before, .links_light.reading-typography a.video:not(.btn, .not-link)::before, :where(.reading-typography) a.video:not(.btn, .not-link)::before, :where(.reading-typography) details > summary.video::before, .links_dark.reading-typography a.video:not(.btn, .not-link)::before {
  content: "\f03d";
}
[target=_blank].link::after, [target=_blank].link_icons::after, [target=_blank].link-light::after, .links_light.reading-typography a[target=_blank]:not(.btn, .not-link)::after, :where(.reading-typography) a[target=_blank]:not(.btn, .not-link)::after, :where(.reading-typography) details > summary[target=_blank]::after, .links_dark.reading-typography a[target=_blank]:not(.btn, .not-link)::after {
  content: "\f14c";
}
[href^="mailto:"].link::after, [href^="mailto:"].link_icons::after, [href^="mailto:"].link-light::after, .links_light.reading-typography a[href^="mailto:"]:not(.btn, .not-link)::after, :where(.reading-typography) a[href^="mailto:"]:not(.btn, .not-link)::after, :where(.reading-typography) details > summary[href^="mailto:"]::after, .links_dark.reading-typography a[href^="mailto:"]:not(.btn, .not-link)::after {
  content: "\f0e0";
}
[href^="tel:"].link::after, [href^="tel:"].link_icons::after, [href^="tel:"].link-light::after, .links_light.reading-typography a[href^="tel:"]:not(.btn, .not-link)::after, :where(.reading-typography) a[href^="tel:"]:not(.btn, .not-link)::after, :where(.reading-typography) details > summary[href^="tel:"]::after, .links_dark.reading-typography a[href^="tel:"]:not(.btn, .not-link)::after {
  content: "\f095";
}
[href^="fax:"].link::after, [href^="fax:"].link_icons::after, [href^="fax:"].link-light::after, .links_light.reading-typography a[href^="fax:"]:not(.btn, .not-link)::after, :where(.reading-typography) a[href^="fax:"]:not(.btn, .not-link)::after, :where(.reading-typography) details > summary[href^="fax:"]::after, .links_dark.reading-typography a[href^="fax:"]:not(.btn, .not-link)::after {
  content: "\f1ac";
}
.no-external-icon.link::after, .no-external-icon.link_icons::after, .no-external-icon.link-light::after, .links_light.reading-typography a.no-external-icon:not(.btn, .not-link)::after, :where(.reading-typography) a.no-external-icon:not(.btn, .not-link)::after, :where(.reading-typography) details > summary.no-external-icon::after, .links_dark.reading-typography a.no-external-icon:not(.btn, .not-link)::after {
  content: "";
}
.expanded-click-area.link::after, .expanded-click-area.link_icons::after, .expanded-click-area.link-light::after, .links_light.reading-typography a.expanded-click-area:not(.btn, .not-link)::after, :where(.reading-typography) a.expanded-click-area:not(.btn, .not-link)::after, :where(.reading-typography) details > summary.expanded-click-area::after, .links_dark.reading-typography a.expanded-click-area:not(.btn, .not-link)::after {
  display: none;
  content: "";
}

.color_inherit:is(.reading-typography) a:not(.btn, .not-link), .color_inherit:is(.reading-typography) details summary, .links_inherit.reading-typography a:not(.btn, .not-link) {
  color: inherit;
  -webkit-text-decoration-color: currentColor;
          text-decoration-color: currentColor;
}
.color_inherit:is(.reading-typography) a:visited:not(.btn, .not-link), .color_inherit:is(.reading-typography) details summary:visited, .links_inherit.reading-typography a:visited:not(.btn, .not-link), .color_inherit:is(.reading-typography) a:hover:not(.btn, .not-link), .color_inherit:is(.reading-typography) details summary:hover, .links_inherit.reading-typography a:hover:not(.btn, .not-link), .color_inherit:is(.reading-typography) a:focus-visible:not(.btn, .not-link), .color_inherit:is(.reading-typography) details summary:focus-visible, .links_inherit.reading-typography a:focus-visible:not(.btn, .not-link) {
  color: inherit;
  -webkit-text-decoration-color: currentColor;
          text-decoration-color: currentColor;
}

.link, :where(.reading-typography) a:not(.btn, .not-link), :where(.reading-typography) details > summary, .links_dark.reading-typography a:not(.btn, .not-link) {
  color: var(--link-color-dark);
  text-decoration: underline;
  -webkit-text-decoration-color: hsla(var(--link-color-dark-h), var(--link-color-dark-s), var(--link-color-dark-l), 0.25);
          text-decoration-color: hsla(var(--link-color-dark-h), var(--link-color-dark-s), var(--link-color-dark-l), 0.25);
  text-decoration-thickness: 1px;
}
.link:visited, :where(.reading-typography) a:visited:not(.btn, .not-link), :where(.reading-typography) details > summary:visited, .links_dark.reading-typography a:visited:not(.btn, .not-link) {
  color: var(--link-color-dark--visted);
  text-decoration: underline;
  -webkit-text-decoration-style: dashed;
          text-decoration-style: dashed;
  -webkit-text-decoration-color: inherit;
          text-decoration-color: inherit;
  text-decoration-thickness: 2px;
}
.link:hover, :where(.reading-typography) a:hover:not(.btn, .not-link), :where(.reading-typography) details > summary:hover, .links_dark.reading-typography a:hover:not(.btn, .not-link), .link:focus-visible, :where(.reading-typography) a:focus-visible:not(.btn, .not-link), :where(.reading-typography) details > summary:focus-visible, .links_dark.reading-typography a:focus-visible:not(.btn, .not-link) {
  color: var(--link-color-dark--hover);
  text-decoration: underline;
  -webkit-text-decoration-style: solid;
          text-decoration-style: solid;
  -webkit-text-decoration-color: inherit;
          text-decoration-color: inherit;
  text-decoration-thickness: 2px;
}

.link-light, .links_light.reading-typography a:not(.btn, .not-link) {
  color: var(--link-color-light);
  text-decoration: underline;
  -webkit-text-decoration-color: hsla(var(--link-color-light-h), var(--link-color-light-s), var(--link-color-light-l), 0.25);
          text-decoration-color: hsla(var(--link-color-light-h), var(--link-color-light-s), var(--link-color-light-l), 0.25);
}
.link-light:visited, .links_light.reading-typography a:visited:not(.btn, .not-link) {
  color: var(--link-color-light--visited);
  text-decoration: underline;
  -webkit-text-decoration-style: dashed;
          text-decoration-style: dashed;
  -webkit-text-decoration-color: inherit;
          text-decoration-color: inherit;
  text-decoration-thickness: 2px;
}
.link-light:hover, .links_light.reading-typography a:hover:not(.btn, .not-link), .link-light:focus-visible, .links_light.reading-typography a:focus-visible:not(.btn, .not-link) {
  color: var(--link-color-light--hover);
  text-decoration: underline;
  -webkit-text-decoration-style: solid;
          text-decoration-style: solid;
  -webkit-text-decoration-color: inherit;
          text-decoration-color: inherit;
  text-decoration-thickness: 2px;
  text-decoration-thickness: 2px;
}

[target=_blank]:has(img)::after,
[href^=http][target=_blank]:has(img)::after,
[href^=https][target=_blank]:has(img)::after {
  content: none !important;
}

/*
Link Decorator

Links with the `.link` will auto decorate with an icon of the corresponding file type. In each brand there the the variable `$usingFontAwesome` to control if the classes should even render for the brand. $usingFontAwesome's defualt is true.| File            | Effect                                         |
| --------------- | ---------------------------------------------- |
| .pdf            | Portable Document Format                       |
| .doc            | Word Document                                  |
| .txt            | Text Document                                  |
| .ppt            | Power Point                                    |
| mailto:         | Email                                          |
| tel:            | Telephone                                      |
| fax:            | Fax                                            |
| target=`_blank` | External Link icons will appear after any link |



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

Styleguide Interaction.Links
 */
/*
Interactive Extras

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

Styleguide InteractiveExtras
*/
/*

Scrollbar Mini

Give a mini scroll bar to a content area. 

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

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

/* Track */
.scrollbar-mini::-webkit-scrollbar-track {
  background-color: hsla(var(--shade-h), calc(var(--shade-s) + (100% - var(--shade-s)) * 0.05), calc(var(--shade-l) - var(--shade-l) * 0.5), 0.1);
  box-shadow: inset 1px 1px 4px 0.5px rgba(0, 0, 0, 0.2);
}

/* Handle */
.scrollbar-mini::-webkit-scrollbar-thumb {
  border-radius: 25px;
  background: hsla(var(--accent-h), calc(var(--accent-s) + (100% - var(--accent-s)) * 0.015), calc(var(--accent-l) - var(--accent-l) * 0.15), 1);
  box-shadow: inset 1px 1px 4px 0.5px rgba(0, 0, 0, 0.2);
}

.scrollbar-mini::-webkit-scrollbar-thumb:window-inactive {
  background: hsla(var(--accent-h), calc(var(--accent-s) + (100% - var(--accent-s)) * 0.015), calc(var(--accent-l) - var(--accent-l) * 0.15), 0.1);
}

.scrollbar-mini::-webkit-scrollbar-track:window-inactive {
  background: hsla(var(--shade-h), calc(var(--shade-s) + (100% - var(--shade-s)) * 0.05), calc(var(--shade-l) - var(--shade-l) * 0.5), 0.1);
}

/*
Stars

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

.rating-5       - 5 stars
.rating-4       - 4 stars
.rating-3       - 3 stars
.rating-2       - 2 stars
.rating-1       - 1 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 Interaction.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);
}

/*

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 Interaction.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%;
  }
}
[class*=icon-toggle] {
  --fa: var(--fa);
  display: grid;
  justify-content: center;
  justify-items: center;
  aspect-ratio: 1;
}

/*
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 fa-solid 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 fa-regular  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 fa-light 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 Interaction.ToggleIcons
*/
[class*=icon-toggle]::before {
  --fa:var(--_fa);
}
.show > [class*=icon-toggle]::before, .collapsed > [class*=icon-toggle]::before, details[open] [class*=icon-toggle]::before, .active > [class*=icon-toggle]::before {
  --fa:var(--_fa-b);
}

.icon-toggle_bars-times {
  --_fa: "";
  --_fa-b: "";
}

.icon-toggle_plus-minus:before {
  --_fa: "";
  --_fa-b: "";
}

.icon-toggle_chevron-up-down:before {
  --_fa: "";
  --_fa-b: "";
}

.icon-toggle_chevron-double-up-down:before {
  --_fa: "";
  --_fa-b: "";
}

.icon-toggle_chevron-double-left-right:before {
  --_fa: "";
  --_fa-b: "";
}

.icon-toggle_arrow-circle:before {
  --_fa: "";
  --_fa-b: "";
}

.icon-toggle_check-sqaure:before {
  --_fa: "";
  --_fa-b: "";
}

.icon-toggle_check-circle:before {
  --_fa: "";
  --_fa-b: "";
}

.icon-toggle_check:before {
  --_fa: "";
  --_fa-b: "";
}

/*
States

Prefixed before class rules the h: for hover or a: for active class allows for some dynamics with very little efforts. 


Weight: -100

Styleguide Interaction.States
*/
.display_none\:screen {
  display: none !important;
}

@media only print {
  .display_none\:print {
    display: none !important;
  }
  .block\:print {
    display: block !important;
  }
  .inline\:print {
    display: inline !important;
  }
  .inline-block\:print {
    display: inline-block !important;
  }
  .table\:print {
    display: table !important;
  }
  .flex\:print {
    display: flex !important;
  }
}
/*
User Select

User interaction classes that define how the user can interact with the text of the element. 

.user-select_all - User on click will select All
.user-select_none - User on click will select Nothing
.user-select_auto - User on click will select Browser Default
.user-select_text - User on click will select Only the text


Weight:0

Styleguide Interaction.User.UserSelect
*/
.user-select_all {
  -webkit-user-select: all;
     -moz-user-select: all;
          user-select: all;
}

.user-select_none {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.user-select_auto {
  -webkit-user-select: auto;
     -moz-user-select: auto;
          user-select: auto;
}

.user-select_text {
  -webkit-user-select: text;
     -moz-user-select: text;
          user-select: text;
}

/*
  Hover:Border Color

  hovers can easily effect the border style to toggle between styles.  Very useful fo toggling from a border type to none or vice versa. 
| Class          | Effect                                                                                      |
| -------------- | ------------------------------------------------------------------------------------------- |
| cursor_pointer        | pointer                                                                     |
| cursor_not-allowed      | no touch                                                                   |
| cursor_grab      | open hand                                                                   |
| cursor_grabbing      | closed hand                                                                   |
| cursor_wait | spinning ball |


Weight: 100

Styleguide Interaction.States.Hover.cursor

*/
.cursor_pointer {
  cursor: pointer;
}

.cursor_not-allowed {
  cursor: not-allowed;
}

.cursor_grab {
  cursor: grab;
}

.cursor_grabbing {
  cursor: grabbing;
}

.cursor_wait {
  cursor: wait;
}

/*
@Contianer Query

Description: A mass improvement on how to design components with alteration based on the container dimensions rather than the page width. In attempts to reduce the increase in size of the style sheet container queries are only reserved to responsive class properties.

Markup:
<div class="warpper-container">
</div>



Weight:123

Styleguide Layouts.ContianerQuery

*/
/*
@Contianer Query Reactive Styles

Description: <table>
<thead>
<tr>
<th>Style</th>
<th>Short Name</th>
<th>CSS Property</th>
</tr>
</thead>
<tbody>
<tr>
<td>display</td>
<td>'block,flex...'</td>
<td>'display'</td>
</tr>
<tr>
<td>position</td>
<td>'absolute,relative...'</td>
<td>'position'</td>
</tr>
<tr>
<td>grid</td>
<td>'.columns','.rows'</td>
<td>'grid-column-template' ,'grid-row-template'</td>
</tr>
<tr>
<td>flex-size</td>
<td>'.flex'</td>
<td>'flex'</td>
</tr>
<tr>
<td>flex-direction</td>
<td>'.flex'</td>
<td>'flex-direction'</td>
</tr>
<tr>
<td>gap</td>
<td>'.gap'</td>
<td>'gap'</td>
</tr>
<tr>
<td>justify</td>
<td>'.justify'</td>
<td>'justify-content' ,'justify-items','justify-self'</td>
</tr>
<tr>
<td>align</td>
<td>'.content','.items','.self'</td>
<td>'align-content' ,'align-items','align-self'</td>
</tr>
<tr>
<td>margin</td>
<td>'.m'</td>
<td>'margin'</td>
</tr>
<tr>
<td>padding</td>
<td>'.p'</td>
<td>'padding'</td>
</tr>
<tr>
<td>font-size</td>
<td>'.font'</td>
<td>'font-size'</td>
</tr>
<tr>
<td>border-style</td>
<td>'.br'</td>
<td>'border-style'</td>
</tr>
</tbody>
</table>


Weight:123

Styleguide Layouts.ContianerQuery.Classes

*/
.wrapper-container {
  container-type: inline-size;
  container-name: querywrapper;
}

@container (width > 0px) {
  .row_all\\:base {
    grid-row-start: start;
    grid-row-end: end;
  }
  .col_all\\:base {
    grid-column-start: start;
    grid-column-end: end;
  }
  .aspect_8x10 {
    aspect-ratio: 8 / 10;
  }
  .aspect_1x1 {
    aspect-ratio: 1 / 1;
  }
  .aspect_4x3 {
    aspect-ratio: 4 / 3;
  }
  .aspect_3x4 {
    aspect-ratio: 3 / 4;
  }
  .aspect_3x2 {
    aspect-ratio: 3 / 2;
  }
  .aspect_2x3 {
    aspect-ratio: 2 / 3;
  }
  .aspect_16x9 {
    aspect-ratio: 16 / 9;
  }
  .aspect_21x9 {
    aspect-ratio: 21 / 9;
  }
  .aspect_2x1 {
    aspect-ratio: 2 / 1;
  }
  .aspect_3x1 {
    aspect-ratio: 3 / 1;
  }
  .aspect_4x1 {
    aspect-ratio: 4 / 1;
  }
  .aspect_5x1 {
    aspect-ratio: 5 / 1;
  }
  .aspect_leaderboard {
    aspect-ratio: 728 / 90;
  }
  .aspect_skyscraper {
    aspect-ratio: 160 / 600;
  }
  .aspect_bigbox {
    aspect-ratio: 300 / 250;
  }
  .aspect_billboard {
    aspect-ratio: 970 / 250;
  }
  .block {
    display: block;
  }
  .inline {
    display: inline;
  }
  .inline-block, .btn_acc-primary {
    display: inline-block;
  }
  .table-cell {
    display: table-cell;
  }
  .table {
    display: table;
  }
  .table-row {
    display: table-row;
  }
  .table-row-group {
    display: table-row-group;
  }
  .flex {
    display: flex;
  }
  .inline-flex {
    display: inline-flex;
  }
  .grid {
    display: grid;
  }
  .display_contents {
    display: contents;
  }
  .display_none {
    display: none;
  }
  .initial {
    position: initial;
  }
  .inherit {
    position: inherit;
  }
  .relative {
    position: relative;
  }
  .absolute {
    position: absolute;
  }
  .fixed {
    position: fixed;
  }
  .sticky {
    position: sticky;
  }
  .unset {
    position: unset;
  }
  .br_none, .btn_acc-primary {
    border-style: none;
  }
  .br_solid {
    border-style: solid;
  }
  .br_dashed {
    border-style: dashed;
  }
  .br_dotted {
    border-style: dotted;
  }
  .flex_none {
    flex: none;
  }
  .flex_grow {
    flex: 1 0 auto;
  }
  .flex_shrink {
    flex: 0 1 auto;
  }
  .flex_auto {
    flex: 1 1 auto;
  }
  .flex_row {
    flex-direction: row;
  }
  .flex_column {
    flex-direction: column;
  }
  .flex_row-reverse {
    flex-direction: row-reverse;
  }
  .flex_column-reverse {
    flex-direction: column-reverse;
  }
  .flex_wrap-reverse {
    flex-wrap: wrap-reverse;
  }
  .flex_wrap {
    flex-wrap: wrap;
  }
  .flex_nowrap {
    flex-wrap: nowrap;
  }
  .flex_auto {
    flex-basis: auto;
  }
  .flex_0 {
    flex-basis: 0%;
  }
  .flex_5 {
    flex-basis: 5%;
  }
  .flex_10 {
    flex-basis: 10%;
  }
  .flex_15 {
    flex-basis: 15%;
  }
  .flex_20 {
    flex-basis: 20%;
  }
  .flex_25 {
    flex-basis: 25%;
  }
  .flex_30 {
    flex-basis: 30%;
  }
  .flex_35 {
    flex-basis: 35%;
  }
  .flex_40 {
    flex-basis: 40%;
  }
  .flex_45 {
    flex-basis: 45%;
  }
  .flex_50 {
    flex-basis: 50%;
  }
  .flex_55 {
    flex-basis: 55%;
  }
  .flex_60 {
    flex-basis: 60%;
  }
  .flex_65 {
    flex-basis: 65%;
  }
  .flex_70 {
    flex-basis: 70%;
  }
  .flex_75 {
    flex-basis: 75%;
  }
  .flex_80 {
    flex-basis: 80%;
  }
  .flex_85 {
    flex-basis: 85%;
  }
  .flex_90 {
    flex-basis: 90%;
  }
  .flex_95 {
    flex-basis: 95%;
  }
  .flex_100 {
    flex-basis: 100%;
  }
  .flex_third-1 {
    flex-basis: 33%;
  }
  .flex_third-2 {
    flex-basis: 66%;
  }
  .justify_start {
    justify-content: start;
  }
  .justify_end {
    justify-content: end;
  }
  .justify_center {
    justify-content: center;
  }
  .justify_between {
    justify-content: space-between;
  }
  .justify_around {
    justify-content: space-around;
  }
  .justify_evenly {
    justify-content: space-evenly;
  }
  .justify_stretch {
    justify-content: stretch;
  }
  .justify_baseline {
    justify-content: baseline;
  }
  .justify-items_start {
    justify-items: start;
  }
  .justify-items_end {
    justify-items: end;
  }
  .justify-items_center {
    justify-items: center;
  }
  .justify-items_between {
    justify-items: space-between;
  }
  .justify-items_around {
    justify-items: space-around;
  }
  .justify-items_stretch {
    justify-items: stretch;
  }
  .justify-items_baseline {
    justify-items: baseline;
  }
  .self-justify_start {
    justify-self: start;
  }
  .self-justify_end {
    justify-self: end;
  }
  .self-justify_center {
    justify-self: center;
  }
  .self-justify_between {
    justify-self: space-between;
  }
  .self-justify_around {
    justify-self: space-around;
  }
  .self-justify_stretch {
    justify-self: stretch;
  }
  .self-justify_baseline {
    justify-self: baseline;
  }
  .content_start {
    align-content: start;
  }
  .content_end {
    align-content: end;
  }
  .content_center {
    align-content: center;
  }
  .content_between {
    align-content: space-between;
  }
  .content_around {
    align-content: space-around;
  }
  .content_evenly {
    align-content: space-evenly;
  }
  .content_stretch {
    align-content: stretch;
  }
  .content_baseline {
    align-content: baseline;
  }
  .items_start {
    align-items: start;
  }
  .items_end {
    align-items: end;
  }
  .items_center {
    align-items: center;
  }
  .items_between {
    align-items: space-between;
  }
  .items_around {
    align-items: space-around;
  }
  .items_stretch {
    align-items: stretch;
  }
  .items_baseline {
    align-items: baseline;
  }
  .self_start {
    align-self: start;
  }
  .self_end {
    align-self: end;
  }
  .self_center {
    align-self: center;
  }
  .self_between {
    align-self: space-between;
  }
  .self_around {
    align-self: space-around;
  }
  .self_stretch {
    align-self: stretch;
  }
  .self_baseline {
    align-self: baseline;
  }
  .gap_0 {
    grid-gap: 0;
  }
  .gap_1 {
    grid-gap: 1px;
  }
  .gap_2 {
    grid-gap: 0.25rem;
  }
  .gap_3 {
    grid-gap: 0.5rem;
  }
  .gap_4 {
    grid-gap: 1rem;
  }
  .gap_5 {
    grid-gap: 2rem;
  }
  .gap_6 {
    grid-gap: 4rem;
  }
  .gap-x_0 {
    grid-column-gap: 0;
  }
  .gap-x_1 {
    grid-column-gap: 1px;
  }
  .gap-x_2 {
    grid-column-gap: 0.25rem;
  }
  .gap-x_3 {
    grid-column-gap: 0.5rem;
  }
  .gap-x_4 {
    grid-column-gap: 1rem;
  }
  .gap-x_5 {
    grid-column-gap: 2rem;
  }
  .gap-x_6 {
    grid-column-gap: 4rem;
  }
  .gap-y_0 {
    grid-row-gap: 0;
  }
  .gap-y_1 {
    grid-row-gap: 1px;
  }
  .gap-y_2 {
    grid-row-gap: 0.25rem;
  }
  .gap-y_3 {
    grid-row-gap: 0.5rem;
  }
  .gap-y_4 {
    grid-row-gap: 1rem;
  }
  .gap-y_5 {
    grid-row-gap: 2rem;
  }
  .gap-y_6 {
    grid-row-gap: 4rem;
  }
  .col-start_start {
    grid-column-start: start;
  }
  .col-start_1 {
    grid-column-start: 1;
  }
  .col-start_2 {
    grid-column-start: 2;
  }
  .col-start_3 {
    grid-column-start: 3;
  }
  .col-start_4 {
    grid-column-start: 4;
  }
  .col-start_5 {
    grid-column-start: 5;
  }
  .col-start_6 {
    grid-column-start: 6;
  }
  .col-start_7 {
    grid-column-start: 7;
  }
  .col-start_n1 {
    grid-column-start: -1;
  }
  .col-start_n2 {
    grid-column-start: -2;
  }
  .col-start_n3 {
    grid-column-start: -3;
  }
  .col-start_n4 {
    grid-column-start: -4;
  }
  .col-start_n5 {
    grid-column-start: -5;
  }
  .col-start_n6 {
    grid-column-start: -6;
  }
  .col-start_n7 {
    grid-column-start: -7;
  }
  .col-start_end {
    grid-column-start: end;
  }
  .col-end_start {
    grid-column-end: start;
  }
  .col-end_1 {
    grid-column-end: 1;
  }
  .col-end_2 {
    grid-column-end: 2;
  }
  .col-end_3 {
    grid-column-end: 3;
  }
  .col-end_4 {
    grid-column-end: 4;
  }
  .col-end_5 {
    grid-column-end: 5;
  }
  .col-end_6 {
    grid-column-end: 6;
  }
  .col-end_7 {
    grid-column-end: 7;
  }
  .col-end_n1 {
    grid-column-end: -1;
  }
  .col-end_n2 {
    grid-column-end: -2;
  }
  .col-end_n3 {
    grid-column-end: -3;
  }
  .col-end_n4 {
    grid-column-end: -4;
  }
  .col-end_n5 {
    grid-column-end: -5;
  }
  .col-end_n6 {
    grid-column-end: -6;
  }
  .col-end_n7 {
    grid-column-end: -7;
  }
  .col-end_end {
    grid-column-end: end;
  }
  .row-start_start {
    grid-row-start: start;
  }
  .row-start_1 {
    grid-row-start: 1;
  }
  .row-start_2 {
    grid-row-start: 2;
  }
  .row-start_3 {
    grid-row-start: 3;
  }
  .row-start_4 {
    grid-row-start: 4;
  }
  .row-start_5 {
    grid-row-start: 5;
  }
  .row-start_6 {
    grid-row-start: 6;
  }
  .row-start_7 {
    grid-row-start: 7;
  }
  .row-start_n1 {
    grid-row-start: -1;
  }
  .row-start_n2 {
    grid-row-start: -2;
  }
  .row-start_n3 {
    grid-row-start: -3;
  }
  .row-start_n4 {
    grid-row-start: -4;
  }
  .row-start_n5 {
    grid-row-start: -5;
  }
  .row-start_n6 {
    grid-row-start: -6;
  }
  .row-start_n7 {
    grid-row-start: -7;
  }
  .row-start_end {
    grid-row-start: end;
  }
  .row-end_start {
    grid-row-end: start;
  }
  .row-end_1 {
    grid-row-end: 1;
  }
  .row-end_2 {
    grid-row-end: 2;
  }
  .row-end_3 {
    grid-row-end: 3;
  }
  .row-end_4 {
    grid-row-end: 4;
  }
  .row-end_5 {
    grid-row-end: 5;
  }
  .row-end_6 {
    grid-row-end: 6;
  }
  .row-end_7 {
    grid-row-end: 7;
  }
  .row-end_n1 {
    grid-row-end: -1;
  }
  .row-end_n2 {
    grid-row-end: -2;
  }
  .row-end_n3 {
    grid-row-end: -3;
  }
  .row-end_n4 {
    grid-row-end: -4;
  }
  .row-end_n5 {
    grid-row-end: -5;
  }
  .row-end_n6 {
    grid-row-end: -6;
  }
  .row-end_n7 {
    grid-row-end: -7;
  }
  .row-end_end {
    grid-row-end: end;
  }
  .font_0 {
    font-size: 1rem  !important;
  }
  .font_1, .btn_acc-primary {
    font-size: 1.125rem  !important;
  }
  .font_2 {
    font-size: 1.265625rem  !important;
  }
  .font_3 {
    font-size: 1.423828125rem  !important;
  }
  .font_4 {
    font-size: 1.6018066406rem  !important;
  }
  .font_5 {
    font-size: 1.8020324707rem  !important;
  }
  .font_6 {
    font-size: 2.0272865295rem  !important;
  }
  .font_7 {
    font-size: 2.2806973457rem  !important;
  }
  .font_8 {
    font-size: 2.565784514rem  !important;
  }
  .font_9 {
    font-size: 2.8865075782rem  !important;
  }
  .font_10 {
    font-size: 3.2473210255rem  !important;
  }
  .font_n1 {
    font-size: 0.8888888889rem  !important;
  }
  .font_n2 {
    font-size: 0.7901234568rem  !important;
  }
  .font_n3 {
    font-size: 0.7023319616rem  !important;
  }
  .font_n4 {
    font-size: 0.624295077rem  !important;
  }
  .font_n5 {
    font-size: 0.5549289573rem  !important;
  }
  .text_unset {
    text-align: unset  !important;
  }
  .text_center, .btn_acc-primary {
    text-align: center  !important;
  }
  .text_left {
    text-align: left  !important;
  }
  .text_right {
    text-align: right  !important;
  }
  .text_start {
    text-align: start  !important;
  }
  .text_end {
    text-align: end  !important;
  }
  .m_0 {
    margin: 0  !important;
  }
  .m_n6 {
    margin: -4rem  !important;
  }
  .m_n5 {
    margin: -2rem  !important;
  }
  .m_n4 {
    margin: -1rem  !important;
  }
  .m_n3 {
    margin: -0.5rem  !important;
  }
  .m_n2 {
    margin: -0.25rem  !important;
  }
  .m_n1 {
    margin: -1px  !important;
  }
  .m_1 {
    margin: 1px  !important;
  }
  .m_2 {
    margin: 0.25rem  !important;
  }
  .m_3 {
    margin: 0.5rem  !important;
  }
  .m_4 {
    margin: 1rem  !important;
  }
  .m_5 {
    margin: 2rem  !important;
  }
  .m_6 {
    margin: 4rem  !important;
  }
  .m_auto {
    margin: auto  !important;
  }
  .m_unset {
    margin: unset  !important;
  }
  .m-y_0 {
    margin-top: 0  !important;
    margin-bottom: 0  !important;
  }
  .m-y_n6 {
    margin-top: -4rem  !important;
    margin-bottom: -4rem  !important;
  }
  .m-y_n5 {
    margin-top: -2rem  !important;
    margin-bottom: -2rem  !important;
  }
  .m-y_n4 {
    margin-top: -1rem  !important;
    margin-bottom: -1rem  !important;
  }
  .m-y_n3 {
    margin-top: -0.5rem  !important;
    margin-bottom: -0.5rem  !important;
  }
  .m-y_n2 {
    margin-top: -0.25rem  !important;
    margin-bottom: -0.25rem  !important;
  }
  .m-y_n1 {
    margin-top: -1px  !important;
    margin-bottom: -1px  !important;
  }
  .m-y_1 {
    margin-top: 1px  !important;
    margin-bottom: 1px  !important;
  }
  .m-y_2 {
    margin-top: 0.25rem  !important;
    margin-bottom: 0.25rem  !important;
  }
  .m-y_3 {
    margin-top: 0.5rem  !important;
    margin-bottom: 0.5rem  !important;
  }
  .m-y_4 {
    margin-top: 1rem  !important;
    margin-bottom: 1rem  !important;
  }
  .m-y_5 {
    margin-top: 2rem  !important;
    margin-bottom: 2rem  !important;
  }
  .m-y_6 {
    margin-top: 4rem  !important;
    margin-bottom: 4rem  !important;
  }
  .m-y_auto {
    margin-top: auto  !important;
    margin-bottom: auto  !important;
  }
  .m-y_unset {
    margin-top: unset  !important;
    margin-bottom: unset  !important;
  }
  .m-x_0 {
    margin-right: 0  !important;
    margin-left: 0  !important;
  }
  .m-x_n6 {
    margin-right: -4rem  !important;
    margin-left: -4rem  !important;
  }
  .m-x_n5 {
    margin-right: -2rem  !important;
    margin-left: -2rem  !important;
  }
  .m-x_n4 {
    margin-right: -1rem  !important;
    margin-left: -1rem  !important;
  }
  .m-x_n3 {
    margin-right: -0.5rem  !important;
    margin-left: -0.5rem  !important;
  }
  .m-x_n2 {
    margin-right: -0.25rem  !important;
    margin-left: -0.25rem  !important;
  }
  .m-x_n1 {
    margin-right: -1px  !important;
    margin-left: -1px  !important;
  }
  .m-x_1 {
    margin-right: 1px  !important;
    margin-left: 1px  !important;
  }
  .m-x_2 {
    margin-right: 0.25rem  !important;
    margin-left: 0.25rem  !important;
  }
  .m-x_3 {
    margin-right: 0.5rem  !important;
    margin-left: 0.5rem  !important;
  }
  .m-x_4 {
    margin-right: 1rem  !important;
    margin-left: 1rem  !important;
  }
  .m-x_5 {
    margin-right: 2rem  !important;
    margin-left: 2rem  !important;
  }
  .m-x_6 {
    margin-right: 4rem  !important;
    margin-left: 4rem  !important;
  }
  .m-x_auto {
    margin-right: auto  !important;
    margin-left: auto  !important;
  }
  .m-x_unset {
    margin-right: unset  !important;
    margin-left: unset  !important;
  }
  .m-t_0 {
    margin-top: 0  !important;
  }
  .m-t_n6 {
    margin-top: -4rem  !important;
  }
  .m-t_n5 {
    margin-top: -2rem  !important;
  }
  .m-t_n4 {
    margin-top: -1rem  !important;
  }
  .m-t_n3 {
    margin-top: -0.5rem  !important;
  }
  .m-t_n2 {
    margin-top: -0.25rem  !important;
  }
  .m-t_n1 {
    margin-top: -1px  !important;
  }
  .m-t_1 {
    margin-top: 1px  !important;
  }
  .m-t_2 {
    margin-top: 0.25rem  !important;
  }
  .m-t_3 {
    margin-top: 0.5rem  !important;
  }
  .m-t_4 {
    margin-top: 1rem  !important;
  }
  .m-t_5 {
    margin-top: 2rem  !important;
  }
  .m-t_6 {
    margin-top: 4rem  !important;
  }
  .m-t_auto {
    margin-top: auto  !important;
  }
  .m-t_unset {
    margin-top: unset  !important;
  }
  .m-b_0 {
    margin-bottom: 0  !important;
  }
  .m-b_n6 {
    margin-bottom: -4rem  !important;
  }
  .m-b_n5 {
    margin-bottom: -2rem  !important;
  }
  .m-b_n4 {
    margin-bottom: -1rem  !important;
  }
  .m-b_n3 {
    margin-bottom: -0.5rem  !important;
  }
  .m-b_n2 {
    margin-bottom: -0.25rem  !important;
  }
  .m-b_n1 {
    margin-bottom: -1px  !important;
  }
  .m-b_1 {
    margin-bottom: 1px  !important;
  }
  .m-b_2 {
    margin-bottom: 0.25rem  !important;
  }
  .m-b_3 {
    margin-bottom: 0.5rem  !important;
  }
  .m-b_4 {
    margin-bottom: 1rem  !important;
  }
  .m-b_5 {
    margin-bottom: 2rem  !important;
  }
  .m-b_6 {
    margin-bottom: 4rem  !important;
  }
  .m-b_auto {
    margin-bottom: auto  !important;
  }
  .m-b_unset {
    margin-bottom: unset  !important;
  }
  .m-l_0 {
    margin-left: 0  !important;
  }
  .m-l_n6 {
    margin-left: -4rem  !important;
  }
  .m-l_n5 {
    margin-left: -2rem  !important;
  }
  .m-l_n4 {
    margin-left: -1rem  !important;
  }
  .m-l_n3 {
    margin-left: -0.5rem  !important;
  }
  .m-l_n2 {
    margin-left: -0.25rem  !important;
  }
  .m-l_n1 {
    margin-left: -1px  !important;
  }
  .m-l_1 {
    margin-left: 1px  !important;
  }
  .m-l_2 {
    margin-left: 0.25rem  !important;
  }
  .m-l_3 {
    margin-left: 0.5rem  !important;
  }
  .m-l_4 {
    margin-left: 1rem  !important;
  }
  .m-l_5 {
    margin-left: 2rem  !important;
  }
  .m-l_6 {
    margin-left: 4rem  !important;
  }
  .m-l_auto {
    margin-left: auto  !important;
  }
  .m-l_unset {
    margin-left: unset  !important;
  }
  .m-r_0 {
    margin-right: 0  !important;
  }
  .m-r_n6 {
    margin-right: -4rem  !important;
  }
  .m-r_n5 {
    margin-right: -2rem  !important;
  }
  .m-r_n4 {
    margin-right: -1rem  !important;
  }
  .m-r_n3 {
    margin-right: -0.5rem  !important;
  }
  .m-r_n2 {
    margin-right: -0.25rem  !important;
  }
  .m-r_n1 {
    margin-right: -1px  !important;
  }
  .m-r_1 {
    margin-right: 1px  !important;
  }
  .m-r_2 {
    margin-right: 0.25rem  !important;
  }
  .m-r_3 {
    margin-right: 0.5rem  !important;
  }
  .m-r_4 {
    margin-right: 1rem  !important;
  }
  .m-r_5 {
    margin-right: 2rem  !important;
  }
  .m-r_6 {
    margin-right: 4rem  !important;
  }
  .m-r_auto {
    margin-right: auto  !important;
  }
  .m-r_unset {
    margin-right: unset  !important;
  }
  .p_0 {
    padding: 0  !important;
  }
  .p_1 {
    padding: 1px  !important;
  }
  .p_2 {
    padding: 0.25rem  !important;
  }
  .p_3 {
    padding: 0.5rem  !important;
  }
  .p_4 {
    padding: 1rem  !important;
  }
  .p_5 {
    padding: 2rem  !important;
  }
  .p_6 {
    padding: 4rem  !important;
  }
  .p-y_0 {
    padding-top: 0  !important;
    padding-bottom: 0  !important;
  }
  .p-y_1 {
    padding-top: 1px  !important;
    padding-bottom: 1px  !important;
  }
  .p-y_2 {
    padding-top: 0.25rem  !important;
    padding-bottom: 0.25rem  !important;
  }
  .p-y_3, .btn_acc-primary {
    padding-top: 0.5rem  !important;
    padding-bottom: 0.5rem  !important;
  }
  .p-y_4 {
    padding-top: 1rem  !important;
    padding-bottom: 1rem  !important;
  }
  .p-y_5 {
    padding-top: 2rem  !important;
    padding-bottom: 2rem  !important;
  }
  .p-y_6 {
    padding-top: 4rem  !important;
    padding-bottom: 4rem  !important;
  }
  .p-x_0 {
    padding-right: 0  !important;
    padding-left: 0  !important;
  }
  .p-x_1 {
    padding-right: 1px  !important;
    padding-left: 1px  !important;
  }
  .p-x_2 {
    padding-right: 0.25rem  !important;
    padding-left: 0.25rem  !important;
  }
  .p-x_3 {
    padding-right: 0.5rem  !important;
    padding-left: 0.5rem  !important;
  }
  .p-x_4, .btn_acc-primary {
    padding-right: 1rem  !important;
    padding-left: 1rem  !important;
  }
  .p-x_5 {
    padding-right: 2rem  !important;
    padding-left: 2rem  !important;
  }
  .p-x_6 {
    padding-right: 4rem  !important;
    padding-left: 4rem  !important;
  }
  .p-t_0 {
    padding-top: 0  !important;
  }
  .p-t_1 {
    padding-top: 1px  !important;
  }
  .p-t_2 {
    padding-top: 0.25rem  !important;
  }
  .p-t_3 {
    padding-top: 0.5rem  !important;
  }
  .p-t_4 {
    padding-top: 1rem  !important;
  }
  .p-t_5 {
    padding-top: 2rem  !important;
  }
  .p-t_6 {
    padding-top: 4rem  !important;
  }
  .p-b_0 {
    padding-bottom: 0  !important;
  }
  .p-b_1 {
    padding-bottom: 1px  !important;
  }
  .p-b_2 {
    padding-bottom: 0.25rem  !important;
  }
  .p-b_3 {
    padding-bottom: 0.5rem  !important;
  }
  .p-b_4 {
    padding-bottom: 1rem  !important;
  }
  .p-b_5 {
    padding-bottom: 2rem  !important;
  }
  .p-b_6 {
    padding-bottom: 4rem  !important;
  }
  .p-l_0 {
    padding-left: 0  !important;
  }
  .p-l_1 {
    padding-left: 1px  !important;
  }
  .p-l_2 {
    padding-left: 0.25rem  !important;
  }
  .p-l_3 {
    padding-left: 0.5rem  !important;
  }
  .p-l_4 {
    padding-left: 1rem  !important;
  }
  .p-l_5 {
    padding-left: 2rem  !important;
  }
  .p-l_6 {
    padding-left: 4rem  !important;
  }
  .p-r_0 {
    padding-right: 0  !important;
  }
  .p-r_1 {
    padding-right: 1px  !important;
  }
  .p-r_2 {
    padding-right: 0.25rem  !important;
  }
  .p-r_3 {
    padding-right: 0.5rem  !important;
  }
  .p-r_4 {
    padding-right: 1rem  !important;
  }
  .p-r_5 {
    padding-right: 2rem  !important;
  }
  .p-r_6 {
    padding-right: 4rem  !important;
  }
  .columns_1 {
    grid-template-columns: [start] var(--col-1, 1fr) [end]  !important;
  }
  .columns_2 {
    grid-template-columns: [start] var(--col-1, 1fr) var(--col-2, 1fr) [end]  !important;
  }
  .columns_3 {
    grid-template-columns: [start] var(--col-1, 1fr) var(--col-2, 1fr) var(--col-3, 1fr) [end]  !important;
  }
  .columns_4 {
    grid-template-columns: [start] var(--col-1, 1fr) var(--col-2, 1fr) var(--col-3, 1fr) var(--col-4, 1fr) [end]  !important;
  }
  .columns_5 {
    grid-template-columns: [start] var(--col-1, 1fr) var(--col-2, 1fr) var(--col-3, 1fr) var(--col-4, 1fr) var(--col-5, 1fr) [end]  !important;
  }
  .columns_6 {
    grid-template-columns: [start] var(--col-1, 1fr) var(--col-2, 1fr) var(--col-3, 1fr) var(--col-4, 1fr) var(--col-5, 1fr) var(--col-6, 1fr) [end]  !important;
  }
  .rows_1 {
    grid-template-rows: [start] var(--row-1, 1fr) [end]  !important;
  }
  .rows_2 {
    grid-template-rows: [start] var(--row-1, 1fr) var(--row-2, 1fr) [end]  !important;
  }
  .rows_3 {
    grid-template-rows: [start] var(--row-1, 1fr) var(--row-2, 1fr) var(--row-3, 1fr) [end]  !important;
  }
  .rows_4 {
    grid-template-rows: [start] var(--row-1, 1fr) var(--row-2, 1fr) var(--row-3, 1fr) var(--row-4, 1fr) [end]  !important;
  }
  .rows_5 {
    grid-template-rows: [start] var(--row-1, 1fr) var(--row-2, 1fr) var(--row-3, 1fr) var(--row-4, 1fr) var(--row-5, 1fr) [end]  !important;
  }
  .rows_6 {
    grid-template-rows: [start] var(--row-1, 1fr) var(--row-2, 1fr) var(--row-3, 1fr) var(--row-4, 1fr) var(--row-5, 1fr) var(--row-6, 1fr) [end]  !important;
  }
  .max-w_0 {
    max-width: 0  !important;
  }
  .max-w_5 {
    max-width: 5rem  !important;
  }
  .max-w_10 {
    max-width: 10rem  !important;
  }
  .max-w_15 {
    max-width: 15rem  !important;
  }
  .max-w_20 {
    max-width: 20rem  !important;
  }
  .max-w_25 {
    max-width: 25rem  !important;
  }
  .max-w_30 {
    max-width: 30rem  !important;
  }
  .max-w_35 {
    max-width: 35rem  !important;
  }
  .max-w_40 {
    max-width: 40rem  !important;
  }
  .max-w_45 {
    max-width: 45rem  !important;
  }
  .max-w_50 {
    max-width: 50rem  !important;
  }
  .max-w_55 {
    max-width: 55rem  !important;
  }
  .max-w_60 {
    max-width: 60rem  !important;
  }
  .max-w_65 {
    max-width: 65rem  !important;
  }
  .max-w_70 {
    max-width: 70rem  !important;
  }
  .max-w_75 {
    max-width: 75rem  !important;
  }
  .max-w_80 {
    max-width: 80rem  !important;
  }
  .max-w_85 {
    max-width: 85rem  !important;
  }
  .max-w_90 {
    max-width: 90rem  !important;
  }
  .max-w_95 {
    max-width: 95rem  !important;
  }
  .max-w_unset {
    max-width: unset  !important;
  }
  .inset_100 {
    inset: 100%;
  }
  .inset_auto {
    inset: auto;
  }
  .inset_unset {
    inset: unset;
  }
  .inset_0 {
    inset: 0;
  }
  .inset_n6 {
    inset: -4rem;
  }
  .inset_n5 {
    inset: -2rem;
  }
  .inset_n4 {
    inset: -1rem;
  }
  .inset_n3 {
    inset: -0.5rem;
  }
  .inset_n2 {
    inset: -0.25rem;
  }
  .inset_n1 {
    inset: -1px;
  }
  .inset_1 {
    inset: 1px;
  }
  .inset_2 {
    inset: 0.25rem;
  }
  .inset_3 {
    inset: 0.5rem;
  }
  .inset_4 {
    inset: 1rem;
  }
  .inset_5,.inset_6 {
    inset: 2rem;
  }
  .t_100 {
    top: 100%;
  }
  .t_auto {
    top: auto;
  }
  .t_unset {
    top: unset;
  }
  .t_0 {
    top: 0;
  }
  .t_n6 {
    top: -4rem;
  }
  .t_n5 {
    top: -2rem;
  }
  .t_n4 {
    top: -1rem;
  }
  .t_n3 {
    top: -0.5rem;
  }
  .t_n2 {
    top: -0.25rem;
  }
  .t_n1 {
    top: -1px;
  }
  .t_1 {
    top: 1px;
  }
  .t_2 {
    top: 0.25rem;
  }
  .t_3 {
    top: 0.5rem;
  }
  .t_4 {
    top: 1rem;
  }
  .t_5,.t_6 {
    top: 2rem;
  }
  .b_100 {
    bottom: 100%;
  }
  .b_auto {
    bottom: auto;
  }
  .b_unset {
    bottom: unset;
  }
  .b_0 {
    bottom: 0;
  }
  .b_n6 {
    bottom: -4rem;
  }
  .b_n5 {
    bottom: -2rem;
  }
  .b_n4 {
    bottom: -1rem;
  }
  .b_n3 {
    bottom: -0.5rem;
  }
  .b_n2 {
    bottom: -0.25rem;
  }
  .b_n1 {
    bottom: -1px;
  }
  .b_1 {
    bottom: 1px;
  }
  .b_2 {
    bottom: 0.25rem;
  }
  .b_3 {
    bottom: 0.5rem;
  }
  .b_4 {
    bottom: 1rem;
  }
  .b_5,.b_6 {
    bottom: 2rem;
  }
  .l_100 {
    left: 100%;
  }
  .l_auto {
    left: auto;
  }
  .l_unset {
    left: unset;
  }
  .l_0 {
    left: 0;
  }
  .l_n6 {
    left: -4rem;
  }
  .l_n5 {
    left: -2rem;
  }
  .l_n4 {
    left: -1rem;
  }
  .l_n3 {
    left: -0.5rem;
  }
  .l_n2 {
    left: -0.25rem;
  }
  .l_n1 {
    left: -1px;
  }
  .l_1 {
    left: 1px;
  }
  .l_2 {
    left: 0.25rem;
  }
  .l_3 {
    left: 0.5rem;
  }
  .l_4 {
    left: 1rem;
  }
  .l_5,.l_6 {
    left: 2rem;
  }
  .r_100 {
    right: 100%;
  }
  .r_auto {
    right: auto;
  }
  .r_unset {
    right: unset;
  }
  .r_0 {
    right: 0;
  }
  .r_n6 {
    right: -4rem;
  }
  .r_n5 {
    right: -2rem;
  }
  .r_n4 {
    right: -1rem;
  }
  .r_n3 {
    right: -0.5rem;
  }
  .r_n2 {
    right: -0.25rem;
  }
  .r_n1 {
    right: -1px;
  }
  .r_1 {
    right: 1px;
  }
  .r_2 {
    right: 0.25rem;
  }
  .r_3 {
    right: 0.5rem;
  }
  .r_4 {
    right: 1rem;
  }
  .r_5,.r_6 {
    right: 2rem;
  }
}
@container (width > 320px) {
  .row_all\\:sm {
    grid-row-start: start;
    grid-row-end: end;
  }
  .col_all\\:sm {
    grid-column-start: start;
    grid-column-end: end;
  }
  .aspect_8x10\:sm {
    aspect-ratio: 8 / 10;
  }
  .aspect_1x1\:sm {
    aspect-ratio: 1 / 1;
  }
  .aspect_4x3\:sm {
    aspect-ratio: 4 / 3;
  }
  .aspect_3x4\:sm {
    aspect-ratio: 3 / 4;
  }
  .aspect_3x2\:sm {
    aspect-ratio: 3 / 2;
  }
  .aspect_2x3\:sm {
    aspect-ratio: 2 / 3;
  }
  .aspect_16x9\:sm {
    aspect-ratio: 16 / 9;
  }
  .aspect_21x9\:sm {
    aspect-ratio: 21 / 9;
  }
  .aspect_2x1\:sm {
    aspect-ratio: 2 / 1;
  }
  .aspect_3x1\:sm {
    aspect-ratio: 3 / 1;
  }
  .aspect_4x1\:sm {
    aspect-ratio: 4 / 1;
  }
  .aspect_5x1\:sm {
    aspect-ratio: 5 / 1;
  }
  .aspect_leaderboard\:sm {
    aspect-ratio: 728 / 90;
  }
  .aspect_skyscraper\:sm {
    aspect-ratio: 160 / 600;
  }
  .aspect_bigbox\:sm {
    aspect-ratio: 300 / 250;
  }
  .aspect_billboard\:sm {
    aspect-ratio: 970 / 250;
  }
  .block\:sm {
    display: block;
  }
  .inline\:sm {
    display: inline;
  }
  .inline-block\:sm {
    display: inline-block;
  }
  .table-cell\:sm {
    display: table-cell;
  }
  .table\:sm {
    display: table;
  }
  .table-row\:sm {
    display: table-row;
  }
  .table-row-group\:sm {
    display: table-row-group;
  }
  .flex\:sm {
    display: flex;
  }
  .inline-flex\:sm {
    display: inline-flex;
  }
  .grid\:sm {
    display: grid;
  }
  .display_contents\:sm {
    display: contents;
  }
  .display_none\:sm {
    display: none;
  }
  .initial\:sm {
    position: initial;
  }
  .inherit\:sm {
    position: inherit;
  }
  .relative\:sm {
    position: relative;
  }
  .absolute\:sm {
    position: absolute;
  }
  .fixed\:sm {
    position: fixed;
  }
  .sticky\:sm {
    position: sticky;
  }
  .unset\:sm {
    position: unset;
  }
  .br_none\:sm {
    border-style: none;
  }
  .br_solid\:sm {
    border-style: solid;
  }
  .br_dashed\:sm {
    border-style: dashed;
  }
  .br_dotted\:sm {
    border-style: dotted;
  }
  .flex_none\:sm {
    flex: none;
  }
  .flex_grow\:sm {
    flex: 1 0 auto;
  }
  .flex_shrink\:sm {
    flex: 0 1 auto;
  }
  .flex_auto\:sm {
    flex: 1 1 auto;
  }
  .flex_row\:sm {
    flex-direction: row;
  }
  .flex_column\:sm {
    flex-direction: column;
  }
  .flex_row-reverse\:sm {
    flex-direction: row-reverse;
  }
  .flex_column-reverse\:sm {
    flex-direction: column-reverse;
  }
  .flex_wrap-reverse\:sm {
    flex-wrap: wrap-reverse;
  }
  .flex_wrap\:sm {
    flex-wrap: wrap;
  }
  .flex_nowrap\:sm {
    flex-wrap: nowrap;
  }
  .flex_auto\:sm {
    flex-basis: auto;
  }
  .flex_0\:sm {
    flex-basis: 0%;
  }
  .flex_5\:sm {
    flex-basis: 5%;
  }
  .flex_10\:sm {
    flex-basis: 10%;
  }
  .flex_15\:sm {
    flex-basis: 15%;
  }
  .flex_20\:sm {
    flex-basis: 20%;
  }
  .flex_25\:sm {
    flex-basis: 25%;
  }
  .flex_30\:sm {
    flex-basis: 30%;
  }
  .flex_35\:sm {
    flex-basis: 35%;
  }
  .flex_40\:sm {
    flex-basis: 40%;
  }
  .flex_45\:sm {
    flex-basis: 45%;
  }
  .flex_50\:sm {
    flex-basis: 50%;
  }
  .flex_55\:sm {
    flex-basis: 55%;
  }
  .flex_60\:sm {
    flex-basis: 60%;
  }
  .flex_65\:sm {
    flex-basis: 65%;
  }
  .flex_70\:sm {
    flex-basis: 70%;
  }
  .flex_75\:sm {
    flex-basis: 75%;
  }
  .flex_80\:sm {
    flex-basis: 80%;
  }
  .flex_85\:sm {
    flex-basis: 85%;
  }
  .flex_90\:sm {
    flex-basis: 90%;
  }
  .flex_95\:sm {
    flex-basis: 95%;
  }
  .flex_100\:sm {
    flex-basis: 100%;
  }
  .flex_third-1\:sm {
    flex-basis: 33%;
  }
  .flex_third-2\:sm {
    flex-basis: 66%;
  }
  .justify_start\:sm {
    justify-content: start;
  }
  .justify_end\:sm {
    justify-content: end;
  }
  .justify_center\:sm {
    justify-content: center;
  }
  .justify_between\:sm {
    justify-content: space-between;
  }
  .justify_around\:sm {
    justify-content: space-around;
  }
  .justify_evenly\:sm {
    justify-content: space-evenly;
  }
  .justify_stretch\:sm {
    justify-content: stretch;
  }
  .justify_baseline\:sm {
    justify-content: baseline;
  }
  .justify-items_start\:sm {
    justify-items: start;
  }
  .justify-items_end\:sm {
    justify-items: end;
  }
  .justify-items_center\:sm {
    justify-items: center;
  }
  .justify-items_between\:sm {
    justify-items: space-between;
  }
  .justify-items_around\:sm {
    justify-items: space-around;
  }
  .justify-items_stretch\:sm {
    justify-items: stretch;
  }
  .justify-items_baseline\:sm {
    justify-items: baseline;
  }
  .self-justify_start\:sm {
    justify-self: start;
  }
  .self-justify_end\:sm {
    justify-self: end;
  }
  .self-justify_center\:sm {
    justify-self: center;
  }
  .self-justify_between\:sm {
    justify-self: space-between;
  }
  .self-justify_around\:sm {
    justify-self: space-around;
  }
  .self-justify_stretch\:sm {
    justify-self: stretch;
  }
  .self-justify_baseline\:sm {
    justify-self: baseline;
  }
  .content_start\:sm {
    align-content: start;
  }
  .content_end\:sm {
    align-content: end;
  }
  .content_center\:sm {
    align-content: center;
  }
  .content_between\:sm {
    align-content: space-between;
  }
  .content_around\:sm {
    align-content: space-around;
  }
  .content_evenly\:sm {
    align-content: space-evenly;
  }
  .content_stretch\:sm {
    align-content: stretch;
  }
  .content_baseline\:sm {
    align-content: baseline;
  }
  .items_start\:sm {
    align-items: start;
  }
  .items_end\:sm {
    align-items: end;
  }
  .items_center\:sm {
    align-items: center;
  }
  .items_between\:sm {
    align-items: space-between;
  }
  .items_around\:sm {
    align-items: space-around;
  }
  .items_stretch\:sm {
    align-items: stretch;
  }
  .items_baseline\:sm {
    align-items: baseline;
  }
  .self_start\:sm {
    align-self: start;
  }
  .self_end\:sm {
    align-self: end;
  }
  .self_center\:sm {
    align-self: center;
  }
  .self_between\:sm {
    align-self: space-between;
  }
  .self_around\:sm {
    align-self: space-around;
  }
  .self_stretch\:sm {
    align-self: stretch;
  }
  .self_baseline\:sm {
    align-self: baseline;
  }
  .gap_0\:sm {
    grid-gap: 0;
  }
  .gap_1\:sm {
    grid-gap: 1px;
  }
  .gap_2\:sm {
    grid-gap: 0.25rem;
  }
  .gap_3\:sm {
    grid-gap: 0.5rem;
  }
  .gap_4\:sm {
    grid-gap: 1rem;
  }
  .gap_5\:sm {
    grid-gap: 2rem;
  }
  .gap_6\:sm {
    grid-gap: 4rem;
  }
  .gap-x_0\:sm {
    grid-column-gap: 0;
  }
  .gap-x_1\:sm {
    grid-column-gap: 1px;
  }
  .gap-x_2\:sm {
    grid-column-gap: 0.25rem;
  }
  .gap-x_3\:sm {
    grid-column-gap: 0.5rem;
  }
  .gap-x_4\:sm {
    grid-column-gap: 1rem;
  }
  .gap-x_5\:sm {
    grid-column-gap: 2rem;
  }
  .gap-x_6\:sm {
    grid-column-gap: 4rem;
  }
  .gap-y_0\:sm {
    grid-row-gap: 0;
  }
  .gap-y_1\:sm {
    grid-row-gap: 1px;
  }
  .gap-y_2\:sm {
    grid-row-gap: 0.25rem;
  }
  .gap-y_3\:sm {
    grid-row-gap: 0.5rem;
  }
  .gap-y_4\:sm {
    grid-row-gap: 1rem;
  }
  .gap-y_5\:sm {
    grid-row-gap: 2rem;
  }
  .gap-y_6\:sm {
    grid-row-gap: 4rem;
  }
  .col-start_start\:sm {
    grid-column-start: start;
  }
  .col-start_1\:sm {
    grid-column-start: 1;
  }
  .col-start_2\:sm {
    grid-column-start: 2;
  }
  .col-start_3\:sm {
    grid-column-start: 3;
  }
  .col-start_4\:sm {
    grid-column-start: 4;
  }
  .col-start_5\:sm {
    grid-column-start: 5;
  }
  .col-start_6\:sm {
    grid-column-start: 6;
  }
  .col-start_7\:sm {
    grid-column-start: 7;
  }
  .col-start_n1\:sm {
    grid-column-start: -1;
  }
  .col-start_n2\:sm {
    grid-column-start: -2;
  }
  .col-start_n3\:sm {
    grid-column-start: -3;
  }
  .col-start_n4\:sm {
    grid-column-start: -4;
  }
  .col-start_n5\:sm {
    grid-column-start: -5;
  }
  .col-start_n6\:sm {
    grid-column-start: -6;
  }
  .col-start_n7\:sm {
    grid-column-start: -7;
  }
  .col-start_end\:sm {
    grid-column-start: end;
  }
  .col-end_start\:sm {
    grid-column-end: start;
  }
  .col-end_1\:sm {
    grid-column-end: 1;
  }
  .col-end_2\:sm {
    grid-column-end: 2;
  }
  .col-end_3\:sm {
    grid-column-end: 3;
  }
  .col-end_4\:sm {
    grid-column-end: 4;
  }
  .col-end_5\:sm {
    grid-column-end: 5;
  }
  .col-end_6\:sm {
    grid-column-end: 6;
  }
  .col-end_7\:sm {
    grid-column-end: 7;
  }
  .col-end_n1\:sm {
    grid-column-end: -1;
  }
  .col-end_n2\:sm {
    grid-column-end: -2;
  }
  .col-end_n3\:sm {
    grid-column-end: -3;
  }
  .col-end_n4\:sm {
    grid-column-end: -4;
  }
  .col-end_n5\:sm {
    grid-column-end: -5;
  }
  .col-end_n6\:sm {
    grid-column-end: -6;
  }
  .col-end_n7\:sm {
    grid-column-end: -7;
  }
  .col-end_end\:sm {
    grid-column-end: end;
  }
  .row-start_start\:sm {
    grid-row-start: start;
  }
  .row-start_1\:sm {
    grid-row-start: 1;
  }
  .row-start_2\:sm {
    grid-row-start: 2;
  }
  .row-start_3\:sm {
    grid-row-start: 3;
  }
  .row-start_4\:sm {
    grid-row-start: 4;
  }
  .row-start_5\:sm {
    grid-row-start: 5;
  }
  .row-start_6\:sm {
    grid-row-start: 6;
  }
  .row-start_7\:sm {
    grid-row-start: 7;
  }
  .row-start_n1\:sm {
    grid-row-start: -1;
  }
  .row-start_n2\:sm {
    grid-row-start: -2;
  }
  .row-start_n3\:sm {
    grid-row-start: -3;
  }
  .row-start_n4\:sm {
    grid-row-start: -4;
  }
  .row-start_n5\:sm {
    grid-row-start: -5;
  }
  .row-start_n6\:sm {
    grid-row-start: -6;
  }
  .row-start_n7\:sm {
    grid-row-start: -7;
  }
  .row-start_end\:sm {
    grid-row-start: end;
  }
  .row-end_start\:sm {
    grid-row-end: start;
  }
  .row-end_1\:sm {
    grid-row-end: 1;
  }
  .row-end_2\:sm {
    grid-row-end: 2;
  }
  .row-end_3\:sm {
    grid-row-end: 3;
  }
  .row-end_4\:sm {
    grid-row-end: 4;
  }
  .row-end_5\:sm {
    grid-row-end: 5;
  }
  .row-end_6\:sm {
    grid-row-end: 6;
  }
  .row-end_7\:sm {
    grid-row-end: 7;
  }
  .row-end_n1\:sm {
    grid-row-end: -1;
  }
  .row-end_n2\:sm {
    grid-row-end: -2;
  }
  .row-end_n3\:sm {
    grid-row-end: -3;
  }
  .row-end_n4\:sm {
    grid-row-end: -4;
  }
  .row-end_n5\:sm {
    grid-row-end: -5;
  }
  .row-end_n6\:sm {
    grid-row-end: -6;
  }
  .row-end_n7\:sm {
    grid-row-end: -7;
  }
  .row-end_end\:sm {
    grid-row-end: end;
  }
  .font_0\:sm {
    font-size: 1rem  !important;
  }
  .font_1\:sm {
    font-size: 1.125rem  !important;
  }
  .font_2\:sm {
    font-size: 1.265625rem  !important;
  }
  .font_3\:sm {
    font-size: 1.423828125rem  !important;
  }
  .font_4\:sm {
    font-size: 1.6018066406rem  !important;
  }
  .font_5\:sm {
    font-size: 1.8020324707rem  !important;
  }
  .font_6\:sm {
    font-size: 2.0272865295rem  !important;
  }
  .font_7\:sm {
    font-size: 2.2806973457rem  !important;
  }
  .font_8\:sm {
    font-size: 2.565784514rem  !important;
  }
  .font_9\:sm {
    font-size: 2.8865075782rem  !important;
  }
  .font_10\:sm {
    font-size: 3.2473210255rem  !important;
  }
  .font_n1\:sm {
    font-size: 0.8888888889rem  !important;
  }
  .font_n2\:sm {
    font-size: 0.7901234568rem  !important;
  }
  .font_n3\:sm {
    font-size: 0.7023319616rem  !important;
  }
  .font_n4\:sm {
    font-size: 0.624295077rem  !important;
  }
  .font_n5\:sm {
    font-size: 0.5549289573rem  !important;
  }
  .text_unset\:sm {
    text-align: unset  !important;
  }
  .text_center\:sm {
    text-align: center  !important;
  }
  .text_left\:sm {
    text-align: left  !important;
  }
  .text_right\:sm {
    text-align: right  !important;
  }
  .text_start\:sm {
    text-align: start  !important;
  }
  .text_end\:sm {
    text-align: end  !important;
  }
  .m_0\:sm {
    margin: 0  !important;
  }
  .m_n6\:sm {
    margin: -4rem  !important;
  }
  .m_n5\:sm {
    margin: -2rem  !important;
  }
  .m_n4\:sm {
    margin: -1rem  !important;
  }
  .m_n3\:sm {
    margin: -0.5rem  !important;
  }
  .m_n2\:sm {
    margin: -0.25rem  !important;
  }
  .m_n1\:sm {
    margin: -1px  !important;
  }
  .m_1\:sm {
    margin: 1px  !important;
  }
  .m_2\:sm {
    margin: 0.25rem  !important;
  }
  .m_3\:sm {
    margin: 0.5rem  !important;
  }
  .m_4\:sm {
    margin: 1rem  !important;
  }
  .m_5\:sm {
    margin: 2rem  !important;
  }
  .m_6\:sm {
    margin: 4rem  !important;
  }
  .m_auto\:sm {
    margin: auto  !important;
  }
  .m_unset\:sm {
    margin: unset  !important;
  }
  .m-y_0\:sm {
    margin-top: 0  !important;
    margin-bottom: 0  !important;
  }
  .m-y_n6\:sm {
    margin-top: -4rem  !important;
    margin-bottom: -4rem  !important;
  }
  .m-y_n5\:sm {
    margin-top: -2rem  !important;
    margin-bottom: -2rem  !important;
  }
  .m-y_n4\:sm {
    margin-top: -1rem  !important;
    margin-bottom: -1rem  !important;
  }
  .m-y_n3\:sm {
    margin-top: -0.5rem  !important;
    margin-bottom: -0.5rem  !important;
  }
  .m-y_n2\:sm {
    margin-top: -0.25rem  !important;
    margin-bottom: -0.25rem  !important;
  }
  .m-y_n1\:sm {
    margin-top: -1px  !important;
    margin-bottom: -1px  !important;
  }
  .m-y_1\:sm {
    margin-top: 1px  !important;
    margin-bottom: 1px  !important;
  }
  .m-y_2\:sm {
    margin-top: 0.25rem  !important;
    margin-bottom: 0.25rem  !important;
  }
  .m-y_3\:sm {
    margin-top: 0.5rem  !important;
    margin-bottom: 0.5rem  !important;
  }
  .m-y_4\:sm {
    margin-top: 1rem  !important;
    margin-bottom: 1rem  !important;
  }
  .m-y_5\:sm {
    margin-top: 2rem  !important;
    margin-bottom: 2rem  !important;
  }
  .m-y_6\:sm {
    margin-top: 4rem  !important;
    margin-bottom: 4rem  !important;
  }
  .m-y_auto\:sm {
    margin-top: auto  !important;
    margin-bottom: auto  !important;
  }
  .m-y_unset\:sm {
    margin-top: unset  !important;
    margin-bottom: unset  !important;
  }
  .m-x_0\:sm {
    margin-right: 0  !important;
    margin-left: 0  !important;
  }
  .m-x_n6\:sm {
    margin-right: -4rem  !important;
    margin-left: -4rem  !important;
  }
  .m-x_n5\:sm {
    margin-right: -2rem  !important;
    margin-left: -2rem  !important;
  }
  .m-x_n4\:sm {
    margin-right: -1rem  !important;
    margin-left: -1rem  !important;
  }
  .m-x_n3\:sm {
    margin-right: -0.5rem  !important;
    margin-left: -0.5rem  !important;
  }
  .m-x_n2\:sm {
    margin-right: -0.25rem  !important;
    margin-left: -0.25rem  !important;
  }
  .m-x_n1\:sm {
    margin-right: -1px  !important;
    margin-left: -1px  !important;
  }
  .m-x_1\:sm {
    margin-right: 1px  !important;
    margin-left: 1px  !important;
  }
  .m-x_2\:sm {
    margin-right: 0.25rem  !important;
    margin-left: 0.25rem  !important;
  }
  .m-x_3\:sm {
    margin-right: 0.5rem  !important;
    margin-left: 0.5rem  !important;
  }
  .m-x_4\:sm {
    margin-right: 1rem  !important;
    margin-left: 1rem  !important;
  }
  .m-x_5\:sm {
    margin-right: 2rem  !important;
    margin-left: 2rem  !important;
  }
  .m-x_6\:sm {
    margin-right: 4rem  !important;
    margin-left: 4rem  !important;
  }
  .m-x_auto\:sm {
    margin-right: auto  !important;
    margin-left: auto  !important;
  }
  .m-x_unset\:sm {
    margin-right: unset  !important;
    margin-left: unset  !important;
  }
  .m-t_0\:sm {
    margin-top: 0  !important;
  }
  .m-t_n6\:sm {
    margin-top: -4rem  !important;
  }
  .m-t_n5\:sm {
    margin-top: -2rem  !important;
  }
  .m-t_n4\:sm {
    margin-top: -1rem  !important;
  }
  .m-t_n3\:sm {
    margin-top: -0.5rem  !important;
  }
  .m-t_n2\:sm {
    margin-top: -0.25rem  !important;
  }
  .m-t_n1\:sm {
    margin-top: -1px  !important;
  }
  .m-t_1\:sm {
    margin-top: 1px  !important;
  }
  .m-t_2\:sm {
    margin-top: 0.25rem  !important;
  }
  .m-t_3\:sm {
    margin-top: 0.5rem  !important;
  }
  .m-t_4\:sm {
    margin-top: 1rem  !important;
  }
  .m-t_5\:sm {
    margin-top: 2rem  !important;
  }
  .m-t_6\:sm {
    margin-top: 4rem  !important;
  }
  .m-t_auto\:sm {
    margin-top: auto  !important;
  }
  .m-t_unset\:sm {
    margin-top: unset  !important;
  }
  .m-b_0\:sm {
    margin-bottom: 0  !important;
  }
  .m-b_n6\:sm {
    margin-bottom: -4rem  !important;
  }
  .m-b_n5\:sm {
    margin-bottom: -2rem  !important;
  }
  .m-b_n4\:sm {
    margin-bottom: -1rem  !important;
  }
  .m-b_n3\:sm {
    margin-bottom: -0.5rem  !important;
  }
  .m-b_n2\:sm {
    margin-bottom: -0.25rem  !important;
  }
  .m-b_n1\:sm {
    margin-bottom: -1px  !important;
  }
  .m-b_1\:sm {
    margin-bottom: 1px  !important;
  }
  .m-b_2\:sm {
    margin-bottom: 0.25rem  !important;
  }
  .m-b_3\:sm {
    margin-bottom: 0.5rem  !important;
  }
  .m-b_4\:sm {
    margin-bottom: 1rem  !important;
  }
  .m-b_5\:sm {
    margin-bottom: 2rem  !important;
  }
  .m-b_6\:sm {
    margin-bottom: 4rem  !important;
  }
  .m-b_auto\:sm {
    margin-bottom: auto  !important;
  }
  .m-b_unset\:sm {
    margin-bottom: unset  !important;
  }
  .m-l_0\:sm {
    margin-left: 0  !important;
  }
  .m-l_n6\:sm {
    margin-left: -4rem  !important;
  }
  .m-l_n5\:sm {
    margin-left: -2rem  !important;
  }
  .m-l_n4\:sm {
    margin-left: -1rem  !important;
  }
  .m-l_n3\:sm {
    margin-left: -0.5rem  !important;
  }
  .m-l_n2\:sm {
    margin-left: -0.25rem  !important;
  }
  .m-l_n1\:sm {
    margin-left: -1px  !important;
  }
  .m-l_1\:sm {
    margin-left: 1px  !important;
  }
  .m-l_2\:sm {
    margin-left: 0.25rem  !important;
  }
  .m-l_3\:sm {
    margin-left: 0.5rem  !important;
  }
  .m-l_4\:sm {
    margin-left: 1rem  !important;
  }
  .m-l_5\:sm {
    margin-left: 2rem  !important;
  }
  .m-l_6\:sm {
    margin-left: 4rem  !important;
  }
  .m-l_auto\:sm {
    margin-left: auto  !important;
  }
  .m-l_unset\:sm {
    margin-left: unset  !important;
  }
  .m-r_0\:sm {
    margin-right: 0  !important;
  }
  .m-r_n6\:sm {
    margin-right: -4rem  !important;
  }
  .m-r_n5\:sm {
    margin-right: -2rem  !important;
  }
  .m-r_n4\:sm {
    margin-right: -1rem  !important;
  }
  .m-r_n3\:sm {
    margin-right: -0.5rem  !important;
  }
  .m-r_n2\:sm {
    margin-right: -0.25rem  !important;
  }
  .m-r_n1\:sm {
    margin-right: -1px  !important;
  }
  .m-r_1\:sm {
    margin-right: 1px  !important;
  }
  .m-r_2\:sm {
    margin-right: 0.25rem  !important;
  }
  .m-r_3\:sm {
    margin-right: 0.5rem  !important;
  }
  .m-r_4\:sm {
    margin-right: 1rem  !important;
  }
  .m-r_5\:sm {
    margin-right: 2rem  !important;
  }
  .m-r_6\:sm {
    margin-right: 4rem  !important;
  }
  .m-r_auto\:sm {
    margin-right: auto  !important;
  }
  .m-r_unset\:sm {
    margin-right: unset  !important;
  }
  .p_0\:sm {
    padding: 0  !important;
  }
  .p_1\:sm {
    padding: 1px  !important;
  }
  .p_2\:sm {
    padding: 0.25rem  !important;
  }
  .p_3\:sm {
    padding: 0.5rem  !important;
  }
  .p_4\:sm {
    padding: 1rem  !important;
  }
  .p_5\:sm {
    padding: 2rem  !important;
  }
  .p_6\:sm {
    padding: 4rem  !important;
  }
  .p-y_0\:sm {
    padding-top: 0  !important;
    padding-bottom: 0  !important;
  }
  .p-y_1\:sm {
    padding-top: 1px  !important;
    padding-bottom: 1px  !important;
  }
  .p-y_2\:sm {
    padding-top: 0.25rem  !important;
    padding-bottom: 0.25rem  !important;
  }
  .p-y_3\:sm {
    padding-top: 0.5rem  !important;
    padding-bottom: 0.5rem  !important;
  }
  .p-y_4\:sm {
    padding-top: 1rem  !important;
    padding-bottom: 1rem  !important;
  }
  .p-y_5\:sm {
    padding-top: 2rem  !important;
    padding-bottom: 2rem  !important;
  }
  .p-y_6\:sm {
    padding-top: 4rem  !important;
    padding-bottom: 4rem  !important;
  }
  .p-x_0\:sm {
    padding-right: 0  !important;
    padding-left: 0  !important;
  }
  .p-x_1\:sm {
    padding-right: 1px  !important;
    padding-left: 1px  !important;
  }
  .p-x_2\:sm {
    padding-right: 0.25rem  !important;
    padding-left: 0.25rem  !important;
  }
  .p-x_3\:sm {
    padding-right: 0.5rem  !important;
    padding-left: 0.5rem  !important;
  }
  .p-x_4\:sm {
    padding-right: 1rem  !important;
    padding-left: 1rem  !important;
  }
  .p-x_5\:sm {
    padding-right: 2rem  !important;
    padding-left: 2rem  !important;
  }
  .p-x_6\:sm {
    padding-right: 4rem  !important;
    padding-left: 4rem  !important;
  }
  .p-t_0\:sm {
    padding-top: 0  !important;
  }
  .p-t_1\:sm {
    padding-top: 1px  !important;
  }
  .p-t_2\:sm {
    padding-top: 0.25rem  !important;
  }
  .p-t_3\:sm {
    padding-top: 0.5rem  !important;
  }
  .p-t_4\:sm {
    padding-top: 1rem  !important;
  }
  .p-t_5\:sm {
    padding-top: 2rem  !important;
  }
  .p-t_6\:sm {
    padding-top: 4rem  !important;
  }
  .p-b_0\:sm {
    padding-bottom: 0  !important;
  }
  .p-b_1\:sm {
    padding-bottom: 1px  !important;
  }
  .p-b_2\:sm {
    padding-bottom: 0.25rem  !important;
  }
  .p-b_3\:sm {
    padding-bottom: 0.5rem  !important;
  }
  .p-b_4\:sm {
    padding-bottom: 1rem  !important;
  }
  .p-b_5\:sm {
    padding-bottom: 2rem  !important;
  }
  .p-b_6\:sm {
    padding-bottom: 4rem  !important;
  }
  .p-l_0\:sm {
    padding-left: 0  !important;
  }
  .p-l_1\:sm {
    padding-left: 1px  !important;
  }
  .p-l_2\:sm {
    padding-left: 0.25rem  !important;
  }
  .p-l_3\:sm {
    padding-left: 0.5rem  !important;
  }
  .p-l_4\:sm {
    padding-left: 1rem  !important;
  }
  .p-l_5\:sm {
    padding-left: 2rem  !important;
  }
  .p-l_6\:sm {
    padding-left: 4rem  !important;
  }
  .p-r_0\:sm {
    padding-right: 0  !important;
  }
  .p-r_1\:sm {
    padding-right: 1px  !important;
  }
  .p-r_2\:sm {
    padding-right: 0.25rem  !important;
  }
  .p-r_3\:sm {
    padding-right: 0.5rem  !important;
  }
  .p-r_4\:sm {
    padding-right: 1rem  !important;
  }
  .p-r_5\:sm {
    padding-right: 2rem  !important;
  }
  .p-r_6\:sm {
    padding-right: 4rem  !important;
  }
  .columns_1\:sm {
    grid-template-columns: [start] var(--col-1, 1fr) [end]  !important;
  }
  .columns_2\:sm {
    grid-template-columns: [start] var(--col-1, 1fr) var(--col-2, 1fr) [end]  !important;
  }
  .columns_3\:sm {
    grid-template-columns: [start] var(--col-1, 1fr) var(--col-2, 1fr) var(--col-3, 1fr) [end]  !important;
  }
  .columns_4\:sm {
    grid-template-columns: [start] var(--col-1, 1fr) var(--col-2, 1fr) var(--col-3, 1fr) var(--col-4, 1fr) [end]  !important;
  }
  .columns_5\:sm {
    grid-template-columns: [start] var(--col-1, 1fr) var(--col-2, 1fr) var(--col-3, 1fr) var(--col-4, 1fr) var(--col-5, 1fr) [end]  !important;
  }
  .columns_6\:sm {
    grid-template-columns: [start] var(--col-1, 1fr) var(--col-2, 1fr) var(--col-3, 1fr) var(--col-4, 1fr) var(--col-5, 1fr) var(--col-6, 1fr) [end]  !important;
  }
  .rows_1\:sm {
    grid-template-rows: [start] var(--row-1, 1fr) [end]  !important;
  }
  .rows_2\:sm {
    grid-template-rows: [start] var(--row-1, 1fr) var(--row-2, 1fr) [end]  !important;
  }
  .rows_3\:sm {
    grid-template-rows: [start] var(--row-1, 1fr) var(--row-2, 1fr) var(--row-3, 1fr) [end]  !important;
  }
  .rows_4\:sm {
    grid-template-rows: [start] var(--row-1, 1fr) var(--row-2, 1fr) var(--row-3, 1fr) var(--row-4, 1fr) [end]  !important;
  }
  .rows_5\:sm {
    grid-template-rows: [start] var(--row-1, 1fr) var(--row-2, 1fr) var(--row-3, 1fr) var(--row-4, 1fr) var(--row-5, 1fr) [end]  !important;
  }
  .rows_6\:sm {
    grid-template-rows: [start] var(--row-1, 1fr) var(--row-2, 1fr) var(--row-3, 1fr) var(--row-4, 1fr) var(--row-5, 1fr) var(--row-6, 1fr) [end]  !important;
  }
  .max-w_0\:sm {
    max-width: 0  !important;
  }
  .max-w_5\:sm {
    max-width: 5rem  !important;
  }
  .max-w_10\:sm {
    max-width: 10rem  !important;
  }
  .max-w_15\:sm {
    max-width: 15rem  !important;
  }
  .max-w_20\:sm {
    max-width: 20rem  !important;
  }
  .max-w_25\:sm {
    max-width: 25rem  !important;
  }
  .max-w_30\:sm {
    max-width: 30rem  !important;
  }
  .max-w_35\:sm {
    max-width: 35rem  !important;
  }
  .max-w_40\:sm {
    max-width: 40rem  !important;
  }
  .max-w_45\:sm {
    max-width: 45rem  !important;
  }
  .max-w_50\:sm {
    max-width: 50rem  !important;
  }
  .max-w_55\:sm {
    max-width: 55rem  !important;
  }
  .max-w_60\:sm {
    max-width: 60rem  !important;
  }
  .max-w_65\:sm {
    max-width: 65rem  !important;
  }
  .max-w_70\:sm {
    max-width: 70rem  !important;
  }
  .max-w_75\:sm {
    max-width: 75rem  !important;
  }
  .max-w_80\:sm {
    max-width: 80rem  !important;
  }
  .max-w_85\:sm {
    max-width: 85rem  !important;
  }
  .max-w_90\:sm {
    max-width: 90rem  !important;
  }
  .max-w_95\:sm {
    max-width: 95rem  !important;
  }
  .max-w_unset\:sm {
    max-width: unset  !important;
  }
  .inset_100\:sm {
    inset: 100%;
  }
  .inset_auto\:sm {
    inset: auto;
  }
  .inset_unset\:sm {
    inset: unset;
  }
  .inset_0\:sm {
    inset: 0;
  }
  .inset_n6\:sm {
    inset: -4rem;
  }
  .inset_n5\:sm {
    inset: -2rem;
  }
  .inset_n4\:sm {
    inset: -1rem;
  }
  .inset_n3\:sm {
    inset: -0.5rem;
  }
  .inset_n2\:sm {
    inset: -0.25rem;
  }
  .inset_n1\:sm {
    inset: -1px;
  }
  .inset_1\:sm {
    inset: 1px;
  }
  .inset_2\:sm {
    inset: 0.25rem;
  }
  .inset_3\:sm {
    inset: 0.5rem;
  }
  .inset_4\:sm {
    inset: 1rem;
  }
  .inset_5\:sm,.inset_6\:sm {
    inset: 2rem;
  }
  .t_100\:sm {
    top: 100%;
  }
  .t_auto\:sm {
    top: auto;
  }
  .t_unset\:sm {
    top: unset;
  }
  .t_0\:sm {
    top: 0;
  }
  .t_n6\:sm {
    top: -4rem;
  }
  .t_n5\:sm {
    top: -2rem;
  }
  .t_n4\:sm {
    top: -1rem;
  }
  .t_n3\:sm {
    top: -0.5rem;
  }
  .t_n2\:sm {
    top: -0.25rem;
  }
  .t_n1\:sm {
    top: -1px;
  }
  .t_1\:sm {
    top: 1px;
  }
  .t_2\:sm {
    top: 0.25rem;
  }
  .t_3\:sm {
    top: 0.5rem;
  }
  .t_4\:sm {
    top: 1rem;
  }
  .t_5\:sm,.t_6\:sm {
    top: 2rem;
  }
  .b_100\:sm {
    bottom: 100%;
  }
  .b_auto\:sm {
    bottom: auto;
  }
  .b_unset\:sm {
    bottom: unset;
  }
  .b_0\:sm {
    bottom: 0;
  }
  .b_n6\:sm {
    bottom: -4rem;
  }
  .b_n5\:sm {
    bottom: -2rem;
  }
  .b_n4\:sm {
    bottom: -1rem;
  }
  .b_n3\:sm {
    bottom: -0.5rem;
  }
  .b_n2\:sm {
    bottom: -0.25rem;
  }
  .b_n1\:sm {
    bottom: -1px;
  }
  .b_1\:sm {
    bottom: 1px;
  }
  .b_2\:sm {
    bottom: 0.25rem;
  }
  .b_3\:sm {
    bottom: 0.5rem;
  }
  .b_4\:sm {
    bottom: 1rem;
  }
  .b_5\:sm,.b_6\:sm {
    bottom: 2rem;
  }
  .l_100\:sm {
    left: 100%;
  }
  .l_auto\:sm {
    left: auto;
  }
  .l_unset\:sm {
    left: unset;
  }
  .l_0\:sm {
    left: 0;
  }
  .l_n6\:sm {
    left: -4rem;
  }
  .l_n5\:sm {
    left: -2rem;
  }
  .l_n4\:sm {
    left: -1rem;
  }
  .l_n3\:sm {
    left: -0.5rem;
  }
  .l_n2\:sm {
    left: -0.25rem;
  }
  .l_n1\:sm {
    left: -1px;
  }
  .l_1\:sm {
    left: 1px;
  }
  .l_2\:sm {
    left: 0.25rem;
  }
  .l_3\:sm {
    left: 0.5rem;
  }
  .l_4\:sm {
    left: 1rem;
  }
  .l_5\:sm,.l_6\:sm {
    left: 2rem;
  }
  .r_100\:sm {
    right: 100%;
  }
  .r_auto\:sm {
    right: auto;
  }
  .r_unset\:sm {
    right: unset;
  }
  .r_0\:sm {
    right: 0;
  }
  .r_n6\:sm {
    right: -4rem;
  }
  .r_n5\:sm {
    right: -2rem;
  }
  .r_n4\:sm {
    right: -1rem;
  }
  .r_n3\:sm {
    right: -0.5rem;
  }
  .r_n2\:sm {
    right: -0.25rem;
  }
  .r_n1\:sm {
    right: -1px;
  }
  .r_1\:sm {
    right: 1px;
  }
  .r_2\:sm {
    right: 0.25rem;
  }
  .r_3\:sm {
    right: 0.5rem;
  }
  .r_4\:sm {
    right: 1rem;
  }
  .r_5\:sm,.r_6\:sm {
    right: 2rem;
  }
}
@container (width > 540px) {
  .row_all\\:md {
    grid-row-start: start;
    grid-row-end: end;
  }
  .col_all\\:md {
    grid-column-start: start;
    grid-column-end: end;
  }
  .aspect_8x10\:md {
    aspect-ratio: 8 / 10;
  }
  .aspect_1x1\:md {
    aspect-ratio: 1 / 1;
  }
  .aspect_4x3\:md {
    aspect-ratio: 4 / 3;
  }
  .aspect_3x4\:md {
    aspect-ratio: 3 / 4;
  }
  .aspect_3x2\:md {
    aspect-ratio: 3 / 2;
  }
  .aspect_2x3\:md {
    aspect-ratio: 2 / 3;
  }
  .aspect_16x9\:md {
    aspect-ratio: 16 / 9;
  }
  .aspect_21x9\:md {
    aspect-ratio: 21 / 9;
  }
  .aspect_2x1\:md {
    aspect-ratio: 2 / 1;
  }
  .aspect_3x1\:md {
    aspect-ratio: 3 / 1;
  }
  .aspect_4x1\:md {
    aspect-ratio: 4 / 1;
  }
  .aspect_5x1\:md {
    aspect-ratio: 5 / 1;
  }
  .aspect_leaderboard\:md {
    aspect-ratio: 728 / 90;
  }
  .aspect_skyscraper\:md {
    aspect-ratio: 160 / 600;
  }
  .aspect_bigbox\:md {
    aspect-ratio: 300 / 250;
  }
  .aspect_billboard\:md {
    aspect-ratio: 970 / 250;
  }
  .block\:md {
    display: block;
  }
  .inline\:md {
    display: inline;
  }
  .inline-block\:md {
    display: inline-block;
  }
  .table-cell\:md {
    display: table-cell;
  }
  .table\:md {
    display: table;
  }
  .table-row\:md {
    display: table-row;
  }
  .table-row-group\:md {
    display: table-row-group;
  }
  .flex\:md {
    display: flex;
  }
  .inline-flex\:md {
    display: inline-flex;
  }
  .grid\:md {
    display: grid;
  }
  .display_contents\:md {
    display: contents;
  }
  .display_none\:md {
    display: none;
  }
  .initial\:md {
    position: initial;
  }
  .inherit\:md {
    position: inherit;
  }
  .relative\:md {
    position: relative;
  }
  .absolute\:md {
    position: absolute;
  }
  .fixed\:md {
    position: fixed;
  }
  .sticky\:md {
    position: sticky;
  }
  .unset\:md {
    position: unset;
  }
  .br_none\:md {
    border-style: none;
  }
  .br_solid\:md {
    border-style: solid;
  }
  .br_dashed\:md {
    border-style: dashed;
  }
  .br_dotted\:md {
    border-style: dotted;
  }
  .flex_none\:md {
    flex: none;
  }
  .flex_grow\:md {
    flex: 1 0 auto;
  }
  .flex_shrink\:md {
    flex: 0 1 auto;
  }
  .flex_auto\:md {
    flex: 1 1 auto;
  }
  .flex_row\:md {
    flex-direction: row;
  }
  .flex_column\:md {
    flex-direction: column;
  }
  .flex_row-reverse\:md {
    flex-direction: row-reverse;
  }
  .flex_column-reverse\:md {
    flex-direction: column-reverse;
  }
  .flex_wrap-reverse\:md {
    flex-wrap: wrap-reverse;
  }
  .flex_wrap\:md {
    flex-wrap: wrap;
  }
  .flex_nowrap\:md {
    flex-wrap: nowrap;
  }
  .flex_auto\:md {
    flex-basis: auto;
  }
  .flex_0\:md {
    flex-basis: 0%;
  }
  .flex_5\:md {
    flex-basis: 5%;
  }
  .flex_10\:md {
    flex-basis: 10%;
  }
  .flex_15\:md {
    flex-basis: 15%;
  }
  .flex_20\:md {
    flex-basis: 20%;
  }
  .flex_25\:md {
    flex-basis: 25%;
  }
  .flex_30\:md {
    flex-basis: 30%;
  }
  .flex_35\:md {
    flex-basis: 35%;
  }
  .flex_40\:md {
    flex-basis: 40%;
  }
  .flex_45\:md {
    flex-basis: 45%;
  }
  .flex_50\:md {
    flex-basis: 50%;
  }
  .flex_55\:md {
    flex-basis: 55%;
  }
  .flex_60\:md {
    flex-basis: 60%;
  }
  .flex_65\:md {
    flex-basis: 65%;
  }
  .flex_70\:md {
    flex-basis: 70%;
  }
  .flex_75\:md {
    flex-basis: 75%;
  }
  .flex_80\:md {
    flex-basis: 80%;
  }
  .flex_85\:md {
    flex-basis: 85%;
  }
  .flex_90\:md {
    flex-basis: 90%;
  }
  .flex_95\:md {
    flex-basis: 95%;
  }
  .flex_100\:md {
    flex-basis: 100%;
  }
  .flex_third-1\:md {
    flex-basis: 33%;
  }
  .flex_third-2\:md {
    flex-basis: 66%;
  }
  .justify_start\:md {
    justify-content: start;
  }
  .justify_end\:md {
    justify-content: end;
  }
  .justify_center\:md {
    justify-content: center;
  }
  .justify_between\:md {
    justify-content: space-between;
  }
  .justify_around\:md {
    justify-content: space-around;
  }
  .justify_evenly\:md {
    justify-content: space-evenly;
  }
  .justify_stretch\:md {
    justify-content: stretch;
  }
  .justify_baseline\:md {
    justify-content: baseline;
  }
  .justify-items_start\:md {
    justify-items: start;
  }
  .justify-items_end\:md {
    justify-items: end;
  }
  .justify-items_center\:md {
    justify-items: center;
  }
  .justify-items_between\:md {
    justify-items: space-between;
  }
  .justify-items_around\:md {
    justify-items: space-around;
  }
  .justify-items_stretch\:md {
    justify-items: stretch;
  }
  .justify-items_baseline\:md {
    justify-items: baseline;
  }
  .self-justify_start\:md {
    justify-self: start;
  }
  .self-justify_end\:md {
    justify-self: end;
  }
  .self-justify_center\:md {
    justify-self: center;
  }
  .self-justify_between\:md {
    justify-self: space-between;
  }
  .self-justify_around\:md {
    justify-self: space-around;
  }
  .self-justify_stretch\:md {
    justify-self: stretch;
  }
  .self-justify_baseline\:md {
    justify-self: baseline;
  }
  .content_start\:md {
    align-content: start;
  }
  .content_end\:md {
    align-content: end;
  }
  .content_center\:md {
    align-content: center;
  }
  .content_between\:md {
    align-content: space-between;
  }
  .content_around\:md {
    align-content: space-around;
  }
  .content_evenly\:md {
    align-content: space-evenly;
  }
  .content_stretch\:md {
    align-content: stretch;
  }
  .content_baseline\:md {
    align-content: baseline;
  }
  .items_start\:md {
    align-items: start;
  }
  .items_end\:md {
    align-items: end;
  }
  .items_center\:md {
    align-items: center;
  }
  .items_between\:md {
    align-items: space-between;
  }
  .items_around\:md {
    align-items: space-around;
  }
  .items_stretch\:md {
    align-items: stretch;
  }
  .items_baseline\:md {
    align-items: baseline;
  }
  .self_start\:md {
    align-self: start;
  }
  .self_end\:md {
    align-self: end;
  }
  .self_center\:md {
    align-self: center;
  }
  .self_between\:md {
    align-self: space-between;
  }
  .self_around\:md {
    align-self: space-around;
  }
  .self_stretch\:md {
    align-self: stretch;
  }
  .self_baseline\:md {
    align-self: baseline;
  }
  .gap_0\:md {
    grid-gap: 0;
  }
  .gap_1\:md {
    grid-gap: 1px;
  }
  .gap_2\:md {
    grid-gap: 0.25rem;
  }
  .gap_3\:md {
    grid-gap: 0.5rem;
  }
  .gap_4\:md {
    grid-gap: 1rem;
  }
  .gap_5\:md {
    grid-gap: 2rem;
  }
  .gap_6\:md {
    grid-gap: 4rem;
  }
  .gap-x_0\:md {
    grid-column-gap: 0;
  }
  .gap-x_1\:md {
    grid-column-gap: 1px;
  }
  .gap-x_2\:md {
    grid-column-gap: 0.25rem;
  }
  .gap-x_3\:md {
    grid-column-gap: 0.5rem;
  }
  .gap-x_4\:md {
    grid-column-gap: 1rem;
  }
  .gap-x_5\:md {
    grid-column-gap: 2rem;
  }
  .gap-x_6\:md {
    grid-column-gap: 4rem;
  }
  .gap-y_0\:md {
    grid-row-gap: 0;
  }
  .gap-y_1\:md {
    grid-row-gap: 1px;
  }
  .gap-y_2\:md {
    grid-row-gap: 0.25rem;
  }
  .gap-y_3\:md {
    grid-row-gap: 0.5rem;
  }
  .gap-y_4\:md {
    grid-row-gap: 1rem;
  }
  .gap-y_5\:md {
    grid-row-gap: 2rem;
  }
  .gap-y_6\:md {
    grid-row-gap: 4rem;
  }
  .col-start_start\:md {
    grid-column-start: start;
  }
  .col-start_1\:md {
    grid-column-start: 1;
  }
  .col-start_2\:md {
    grid-column-start: 2;
  }
  .col-start_3\:md {
    grid-column-start: 3;
  }
  .col-start_4\:md {
    grid-column-start: 4;
  }
  .col-start_5\:md {
    grid-column-start: 5;
  }
  .col-start_6\:md {
    grid-column-start: 6;
  }
  .col-start_7\:md {
    grid-column-start: 7;
  }
  .col-start_n1\:md {
    grid-column-start: -1;
  }
  .col-start_n2\:md {
    grid-column-start: -2;
  }
  .col-start_n3\:md {
    grid-column-start: -3;
  }
  .col-start_n4\:md {
    grid-column-start: -4;
  }
  .col-start_n5\:md {
    grid-column-start: -5;
  }
  .col-start_n6\:md {
    grid-column-start: -6;
  }
  .col-start_n7\:md {
    grid-column-start: -7;
  }
  .col-start_end\:md {
    grid-column-start: end;
  }
  .col-end_start\:md {
    grid-column-end: start;
  }
  .col-end_1\:md {
    grid-column-end: 1;
  }
  .col-end_2\:md {
    grid-column-end: 2;
  }
  .col-end_3\:md {
    grid-column-end: 3;
  }
  .col-end_4\:md {
    grid-column-end: 4;
  }
  .col-end_5\:md {
    grid-column-end: 5;
  }
  .col-end_6\:md {
    grid-column-end: 6;
  }
  .col-end_7\:md {
    grid-column-end: 7;
  }
  .col-end_n1\:md {
    grid-column-end: -1;
  }
  .col-end_n2\:md {
    grid-column-end: -2;
  }
  .col-end_n3\:md {
    grid-column-end: -3;
  }
  .col-end_n4\:md {
    grid-column-end: -4;
  }
  .col-end_n5\:md {
    grid-column-end: -5;
  }
  .col-end_n6\:md {
    grid-column-end: -6;
  }
  .col-end_n7\:md {
    grid-column-end: -7;
  }
  .col-end_end\:md {
    grid-column-end: end;
  }
  .row-start_start\:md {
    grid-row-start: start;
  }
  .row-start_1\:md {
    grid-row-start: 1;
  }
  .row-start_2\:md {
    grid-row-start: 2;
  }
  .row-start_3\:md {
    grid-row-start: 3;
  }
  .row-start_4\:md {
    grid-row-start: 4;
  }
  .row-start_5\:md {
    grid-row-start: 5;
  }
  .row-start_6\:md {
    grid-row-start: 6;
  }
  .row-start_7\:md {
    grid-row-start: 7;
  }
  .row-start_n1\:md {
    grid-row-start: -1;
  }
  .row-start_n2\:md {
    grid-row-start: -2;
  }
  .row-start_n3\:md {
    grid-row-start: -3;
  }
  .row-start_n4\:md {
    grid-row-start: -4;
  }
  .row-start_n5\:md {
    grid-row-start: -5;
  }
  .row-start_n6\:md {
    grid-row-start: -6;
  }
  .row-start_n7\:md {
    grid-row-start: -7;
  }
  .row-start_end\:md {
    grid-row-start: end;
  }
  .row-end_start\:md {
    grid-row-end: start;
  }
  .row-end_1\:md {
    grid-row-end: 1;
  }
  .row-end_2\:md {
    grid-row-end: 2;
  }
  .row-end_3\:md {
    grid-row-end: 3;
  }
  .row-end_4\:md {
    grid-row-end: 4;
  }
  .row-end_5\:md {
    grid-row-end: 5;
  }
  .row-end_6\:md {
    grid-row-end: 6;
  }
  .row-end_7\:md {
    grid-row-end: 7;
  }
  .row-end_n1\:md {
    grid-row-end: -1;
  }
  .row-end_n2\:md {
    grid-row-end: -2;
  }
  .row-end_n3\:md {
    grid-row-end: -3;
  }
  .row-end_n4\:md {
    grid-row-end: -4;
  }
  .row-end_n5\:md {
    grid-row-end: -5;
  }
  .row-end_n6\:md {
    grid-row-end: -6;
  }
  .row-end_n7\:md {
    grid-row-end: -7;
  }
  .row-end_end\:md {
    grid-row-end: end;
  }
  .font_0\:md {
    font-size: 1rem  !important;
  }
  .font_1\:md {
    font-size: 1.125rem  !important;
  }
  .font_2\:md, .btn_acc-primary {
    font-size: 1.265625rem  !important;
  }
  .font_3\:md {
    font-size: 1.423828125rem  !important;
  }
  .font_4\:md {
    font-size: 1.6018066406rem  !important;
  }
  .font_5\:md {
    font-size: 1.8020324707rem  !important;
  }
  .font_6\:md {
    font-size: 2.0272865295rem  !important;
  }
  .font_7\:md {
    font-size: 2.2806973457rem  !important;
  }
  .font_8\:md {
    font-size: 2.565784514rem  !important;
  }
  .font_9\:md {
    font-size: 2.8865075782rem  !important;
  }
  .font_10\:md {
    font-size: 3.2473210255rem  !important;
  }
  .font_n1\:md {
    font-size: 0.8888888889rem  !important;
  }
  .font_n2\:md {
    font-size: 0.7901234568rem  !important;
  }
  .font_n3\:md {
    font-size: 0.7023319616rem  !important;
  }
  .font_n4\:md {
    font-size: 0.624295077rem  !important;
  }
  .font_n5\:md {
    font-size: 0.5549289573rem  !important;
  }
  .text_unset\:md {
    text-align: unset  !important;
  }
  .text_center\:md {
    text-align: center  !important;
  }
  .text_left\:md {
    text-align: left  !important;
  }
  .text_right\:md {
    text-align: right  !important;
  }
  .text_start\:md {
    text-align: start  !important;
  }
  .text_end\:md {
    text-align: end  !important;
  }
  .m_0\:md {
    margin: 0  !important;
  }
  .m_n6\:md {
    margin: -4rem  !important;
  }
  .m_n5\:md {
    margin: -2rem  !important;
  }
  .m_n4\:md {
    margin: -1rem  !important;
  }
  .m_n3\:md {
    margin: -0.5rem  !important;
  }
  .m_n2\:md {
    margin: -0.25rem  !important;
  }
  .m_n1\:md {
    margin: -1px  !important;
  }
  .m_1\:md {
    margin: 1px  !important;
  }
  .m_2\:md {
    margin: 0.25rem  !important;
  }
  .m_3\:md {
    margin: 0.5rem  !important;
  }
  .m_4\:md {
    margin: 1rem  !important;
  }
  .m_5\:md {
    margin: 2rem  !important;
  }
  .m_6\:md {
    margin: 4rem  !important;
  }
  .m_auto\:md {
    margin: auto  !important;
  }
  .m_unset\:md {
    margin: unset  !important;
  }
  .m-y_0\:md {
    margin-top: 0  !important;
    margin-bottom: 0  !important;
  }
  .m-y_n6\:md {
    margin-top: -4rem  !important;
    margin-bottom: -4rem  !important;
  }
  .m-y_n5\:md {
    margin-top: -2rem  !important;
    margin-bottom: -2rem  !important;
  }
  .m-y_n4\:md {
    margin-top: -1rem  !important;
    margin-bottom: -1rem  !important;
  }
  .m-y_n3\:md {
    margin-top: -0.5rem  !important;
    margin-bottom: -0.5rem  !important;
  }
  .m-y_n2\:md {
    margin-top: -0.25rem  !important;
    margin-bottom: -0.25rem  !important;
  }
  .m-y_n1\:md {
    margin-top: -1px  !important;
    margin-bottom: -1px  !important;
  }
  .m-y_1\:md {
    margin-top: 1px  !important;
    margin-bottom: 1px  !important;
  }
  .m-y_2\:md {
    margin-top: 0.25rem  !important;
    margin-bottom: 0.25rem  !important;
  }
  .m-y_3\:md {
    margin-top: 0.5rem  !important;
    margin-bottom: 0.5rem  !important;
  }
  .m-y_4\:md {
    margin-top: 1rem  !important;
    margin-bottom: 1rem  !important;
  }
  .m-y_5\:md {
    margin-top: 2rem  !important;
    margin-bottom: 2rem  !important;
  }
  .m-y_6\:md {
    margin-top: 4rem  !important;
    margin-bottom: 4rem  !important;
  }
  .m-y_auto\:md {
    margin-top: auto  !important;
    margin-bottom: auto  !important;
  }
  .m-y_unset\:md {
    margin-top: unset  !important;
    margin-bottom: unset  !important;
  }
  .m-x_0\:md {
    margin-right: 0  !important;
    margin-left: 0  !important;
  }
  .m-x_n6\:md {
    margin-right: -4rem  !important;
    margin-left: -4rem  !important;
  }
  .m-x_n5\:md {
    margin-right: -2rem  !important;
    margin-left: -2rem  !important;
  }
  .m-x_n4\:md {
    margin-right: -1rem  !important;
    margin-left: -1rem  !important;
  }
  .m-x_n3\:md {
    margin-right: -0.5rem  !important;
    margin-left: -0.5rem  !important;
  }
  .m-x_n2\:md {
    margin-right: -0.25rem  !important;
    margin-left: -0.25rem  !important;
  }
  .m-x_n1\:md {
    margin-right: -1px  !important;
    margin-left: -1px  !important;
  }
  .m-x_1\:md {
    margin-right: 1px  !important;
    margin-left: 1px  !important;
  }
  .m-x_2\:md {
    margin-right: 0.25rem  !important;
    margin-left: 0.25rem  !important;
  }
  .m-x_3\:md {
    margin-right: 0.5rem  !important;
    margin-left: 0.5rem  !important;
  }
  .m-x_4\:md {
    margin-right: 1rem  !important;
    margin-left: 1rem  !important;
  }
  .m-x_5\:md {
    margin-right: 2rem  !important;
    margin-left: 2rem  !important;
  }
  .m-x_6\:md {
    margin-right: 4rem  !important;
    margin-left: 4rem  !important;
  }
  .m-x_auto\:md {
    margin-right: auto  !important;
    margin-left: auto  !important;
  }
  .m-x_unset\:md {
    margin-right: unset  !important;
    margin-left: unset  !important;
  }
  .m-t_0\:md {
    margin-top: 0  !important;
  }
  .m-t_n6\:md {
    margin-top: -4rem  !important;
  }
  .m-t_n5\:md {
    margin-top: -2rem  !important;
  }
  .m-t_n4\:md {
    margin-top: -1rem  !important;
  }
  .m-t_n3\:md {
    margin-top: -0.5rem  !important;
  }
  .m-t_n2\:md {
    margin-top: -0.25rem  !important;
  }
  .m-t_n1\:md {
    margin-top: -1px  !important;
  }
  .m-t_1\:md {
    margin-top: 1px  !important;
  }
  .m-t_2\:md {
    margin-top: 0.25rem  !important;
  }
  .m-t_3\:md {
    margin-top: 0.5rem  !important;
  }
  .m-t_4\:md {
    margin-top: 1rem  !important;
  }
  .m-t_5\:md {
    margin-top: 2rem  !important;
  }
  .m-t_6\:md {
    margin-top: 4rem  !important;
  }
  .m-t_auto\:md {
    margin-top: auto  !important;
  }
  .m-t_unset\:md {
    margin-top: unset  !important;
  }
  .m-b_0\:md {
    margin-bottom: 0  !important;
  }
  .m-b_n6\:md {
    margin-bottom: -4rem  !important;
  }
  .m-b_n5\:md {
    margin-bottom: -2rem  !important;
  }
  .m-b_n4\:md {
    margin-bottom: -1rem  !important;
  }
  .m-b_n3\:md {
    margin-bottom: -0.5rem  !important;
  }
  .m-b_n2\:md {
    margin-bottom: -0.25rem  !important;
  }
  .m-b_n1\:md {
    margin-bottom: -1px  !important;
  }
  .m-b_1\:md {
    margin-bottom: 1px  !important;
  }
  .m-b_2\:md {
    margin-bottom: 0.25rem  !important;
  }
  .m-b_3\:md {
    margin-bottom: 0.5rem  !important;
  }
  .m-b_4\:md {
    margin-bottom: 1rem  !important;
  }
  .m-b_5\:md {
    margin-bottom: 2rem  !important;
  }
  .m-b_6\:md {
    margin-bottom: 4rem  !important;
  }
  .m-b_auto\:md {
    margin-bottom: auto  !important;
  }
  .m-b_unset\:md {
    margin-bottom: unset  !important;
  }
  .m-l_0\:md {
    margin-left: 0  !important;
  }
  .m-l_n6\:md {
    margin-left: -4rem  !important;
  }
  .m-l_n5\:md {
    margin-left: -2rem  !important;
  }
  .m-l_n4\:md {
    margin-left: -1rem  !important;
  }
  .m-l_n3\:md {
    margin-left: -0.5rem  !important;
  }
  .m-l_n2\:md {
    margin-left: -0.25rem  !important;
  }
  .m-l_n1\:md {
    margin-left: -1px  !important;
  }
  .m-l_1\:md {
    margin-left: 1px  !important;
  }
  .m-l_2\:md {
    margin-left: 0.25rem  !important;
  }
  .m-l_3\:md {
    margin-left: 0.5rem  !important;
  }
  .m-l_4\:md {
    margin-left: 1rem  !important;
  }
  .m-l_5\:md {
    margin-left: 2rem  !important;
  }
  .m-l_6\:md {
    margin-left: 4rem  !important;
  }
  .m-l_auto\:md {
    margin-left: auto  !important;
  }
  .m-l_unset\:md {
    margin-left: unset  !important;
  }
  .m-r_0\:md {
    margin-right: 0  !important;
  }
  .m-r_n6\:md {
    margin-right: -4rem  !important;
  }
  .m-r_n5\:md {
    margin-right: -2rem  !important;
  }
  .m-r_n4\:md {
    margin-right: -1rem  !important;
  }
  .m-r_n3\:md {
    margin-right: -0.5rem  !important;
  }
  .m-r_n2\:md {
    margin-right: -0.25rem  !important;
  }
  .m-r_n1\:md {
    margin-right: -1px  !important;
  }
  .m-r_1\:md {
    margin-right: 1px  !important;
  }
  .m-r_2\:md {
    margin-right: 0.25rem  !important;
  }
  .m-r_3\:md {
    margin-right: 0.5rem  !important;
  }
  .m-r_4\:md {
    margin-right: 1rem  !important;
  }
  .m-r_5\:md {
    margin-right: 2rem  !important;
  }
  .m-r_6\:md {
    margin-right: 4rem  !important;
  }
  .m-r_auto\:md {
    margin-right: auto  !important;
  }
  .m-r_unset\:md {
    margin-right: unset  !important;
  }
  .p_0\:md {
    padding: 0  !important;
  }
  .p_1\:md {
    padding: 1px  !important;
  }
  .p_2\:md {
    padding: 0.25rem  !important;
  }
  .p_3\:md {
    padding: 0.5rem  !important;
  }
  .p_4\:md {
    padding: 1rem  !important;
  }
  .p_5\:md {
    padding: 2rem  !important;
  }
  .p_6\:md {
    padding: 4rem  !important;
  }
  .p-y_0\:md {
    padding-top: 0  !important;
    padding-bottom: 0  !important;
  }
  .p-y_1\:md {
    padding-top: 1px  !important;
    padding-bottom: 1px  !important;
  }
  .p-y_2\:md {
    padding-top: 0.25rem  !important;
    padding-bottom: 0.25rem  !important;
  }
  .p-y_3\:md {
    padding-top: 0.5rem  !important;
    padding-bottom: 0.5rem  !important;
  }
  .p-y_4\:md {
    padding-top: 1rem  !important;
    padding-bottom: 1rem  !important;
  }
  .p-y_5\:md {
    padding-top: 2rem  !important;
    padding-bottom: 2rem  !important;
  }
  .p-y_6\:md {
    padding-top: 4rem  !important;
    padding-bottom: 4rem  !important;
  }
  .p-x_0\:md {
    padding-right: 0  !important;
    padding-left: 0  !important;
  }
  .p-x_1\:md {
    padding-right: 1px  !important;
    padding-left: 1px  !important;
  }
  .p-x_2\:md {
    padding-right: 0.25rem  !important;
    padding-left: 0.25rem  !important;
  }
  .p-x_3\:md {
    padding-right: 0.5rem  !important;
    padding-left: 0.5rem  !important;
  }
  .p-x_4\:md {
    padding-right: 1rem  !important;
    padding-left: 1rem  !important;
  }
  .p-x_5\:md {
    padding-right: 2rem  !important;
    padding-left: 2rem  !important;
  }
  .p-x_6\:md {
    padding-right: 4rem  !important;
    padding-left: 4rem  !important;
  }
  .p-t_0\:md {
    padding-top: 0  !important;
  }
  .p-t_1\:md {
    padding-top: 1px  !important;
  }
  .p-t_2\:md {
    padding-top: 0.25rem  !important;
  }
  .p-t_3\:md {
    padding-top: 0.5rem  !important;
  }
  .p-t_4\:md {
    padding-top: 1rem  !important;
  }
  .p-t_5\:md {
    padding-top: 2rem  !important;
  }
  .p-t_6\:md {
    padding-top: 4rem  !important;
  }
  .p-b_0\:md {
    padding-bottom: 0  !important;
  }
  .p-b_1\:md {
    padding-bottom: 1px  !important;
  }
  .p-b_2\:md {
    padding-bottom: 0.25rem  !important;
  }
  .p-b_3\:md {
    padding-bottom: 0.5rem  !important;
  }
  .p-b_4\:md {
    padding-bottom: 1rem  !important;
  }
  .p-b_5\:md {
    padding-bottom: 2rem  !important;
  }
  .p-b_6\:md {
    padding-bottom: 4rem  !important;
  }
  .p-l_0\:md {
    padding-left: 0  !important;
  }
  .p-l_1\:md {
    padding-left: 1px  !important;
  }
  .p-l_2\:md {
    padding-left: 0.25rem  !important;
  }
  .p-l_3\:md {
    padding-left: 0.5rem  !important;
  }
  .p-l_4\:md {
    padding-left: 1rem  !important;
  }
  .p-l_5\:md {
    padding-left: 2rem  !important;
  }
  .p-l_6\:md {
    padding-left: 4rem  !important;
  }
  .p-r_0\:md {
    padding-right: 0  !important;
  }
  .p-r_1\:md {
    padding-right: 1px  !important;
  }
  .p-r_2\:md {
    padding-right: 0.25rem  !important;
  }
  .p-r_3\:md {
    padding-right: 0.5rem  !important;
  }
  .p-r_4\:md {
    padding-right: 1rem  !important;
  }
  .p-r_5\:md {
    padding-right: 2rem  !important;
  }
  .p-r_6\:md {
    padding-right: 4rem  !important;
  }
  .columns_1\:md {
    grid-template-columns: [start] var(--col-1, 1fr) [end]  !important;
  }
  .columns_2\:md {
    grid-template-columns: [start] var(--col-1, 1fr) var(--col-2, 1fr) [end]  !important;
  }
  .columns_3\:md {
    grid-template-columns: [start] var(--col-1, 1fr) var(--col-2, 1fr) var(--col-3, 1fr) [end]  !important;
  }
  .columns_4\:md {
    grid-template-columns: [start] var(--col-1, 1fr) var(--col-2, 1fr) var(--col-3, 1fr) var(--col-4, 1fr) [end]  !important;
  }
  .columns_5\:md {
    grid-template-columns: [start] var(--col-1, 1fr) var(--col-2, 1fr) var(--col-3, 1fr) var(--col-4, 1fr) var(--col-5, 1fr) [end]  !important;
  }
  .columns_6\:md {
    grid-template-columns: [start] var(--col-1, 1fr) var(--col-2, 1fr) var(--col-3, 1fr) var(--col-4, 1fr) var(--col-5, 1fr) var(--col-6, 1fr) [end]  !important;
  }
  .rows_1\:md {
    grid-template-rows: [start] var(--row-1, 1fr) [end]  !important;
  }
  .rows_2\:md {
    grid-template-rows: [start] var(--row-1, 1fr) var(--row-2, 1fr) [end]  !important;
  }
  .rows_3\:md {
    grid-template-rows: [start] var(--row-1, 1fr) var(--row-2, 1fr) var(--row-3, 1fr) [end]  !important;
  }
  .rows_4\:md {
    grid-template-rows: [start] var(--row-1, 1fr) var(--row-2, 1fr) var(--row-3, 1fr) var(--row-4, 1fr) [end]  !important;
  }
  .rows_5\:md {
    grid-template-rows: [start] var(--row-1, 1fr) var(--row-2, 1fr) var(--row-3, 1fr) var(--row-4, 1fr) var(--row-5, 1fr) [end]  !important;
  }
  .rows_6\:md {
    grid-template-rows: [start] var(--row-1, 1fr) var(--row-2, 1fr) var(--row-3, 1fr) var(--row-4, 1fr) var(--row-5, 1fr) var(--row-6, 1fr) [end]  !important;
  }
  .max-w_0\:md {
    max-width: 0  !important;
  }
  .max-w_5\:md {
    max-width: 5rem  !important;
  }
  .max-w_10\:md {
    max-width: 10rem  !important;
  }
  .max-w_15\:md {
    max-width: 15rem  !important;
  }
  .max-w_20\:md {
    max-width: 20rem  !important;
  }
  .max-w_25\:md {
    max-width: 25rem  !important;
  }
  .max-w_30\:md {
    max-width: 30rem  !important;
  }
  .max-w_35\:md {
    max-width: 35rem  !important;
  }
  .max-w_40\:md {
    max-width: 40rem  !important;
  }
  .max-w_45\:md {
    max-width: 45rem  !important;
  }
  .max-w_50\:md {
    max-width: 50rem  !important;
  }
  .max-w_55\:md {
    max-width: 55rem  !important;
  }
  .max-w_60\:md {
    max-width: 60rem  !important;
  }
  .max-w_65\:md {
    max-width: 65rem  !important;
  }
  .max-w_70\:md {
    max-width: 70rem  !important;
  }
  .max-w_75\:md {
    max-width: 75rem  !important;
  }
  .max-w_80\:md {
    max-width: 80rem  !important;
  }
  .max-w_85\:md {
    max-width: 85rem  !important;
  }
  .max-w_90\:md {
    max-width: 90rem  !important;
  }
  .max-w_95\:md {
    max-width: 95rem  !important;
  }
  .max-w_unset\:md {
    max-width: unset  !important;
  }
  .inset_100\:md {
    inset: 100%;
  }
  .inset_auto\:md {
    inset: auto;
  }
  .inset_unset\:md {
    inset: unset;
  }
  .inset_0\:md {
    inset: 0;
  }
  .inset_n6\:md {
    inset: -4rem;
  }
  .inset_n5\:md {
    inset: -2rem;
  }
  .inset_n4\:md {
    inset: -1rem;
  }
  .inset_n3\:md {
    inset: -0.5rem;
  }
  .inset_n2\:md {
    inset: -0.25rem;
  }
  .inset_n1\:md {
    inset: -1px;
  }
  .inset_1\:md {
    inset: 1px;
  }
  .inset_2\:md {
    inset: 0.25rem;
  }
  .inset_3\:md {
    inset: 0.5rem;
  }
  .inset_4\:md {
    inset: 1rem;
  }
  .inset_5\:md,.inset_6\:md {
    inset: 2rem;
  }
  .t_100\:md {
    top: 100%;
  }
  .t_auto\:md {
    top: auto;
  }
  .t_unset\:md {
    top: unset;
  }
  .t_0\:md {
    top: 0;
  }
  .t_n6\:md {
    top: -4rem;
  }
  .t_n5\:md {
    top: -2rem;
  }
  .t_n4\:md {
    top: -1rem;
  }
  .t_n3\:md {
    top: -0.5rem;
  }
  .t_n2\:md {
    top: -0.25rem;
  }
  .t_n1\:md {
    top: -1px;
  }
  .t_1\:md {
    top: 1px;
  }
  .t_2\:md {
    top: 0.25rem;
  }
  .t_3\:md {
    top: 0.5rem;
  }
  .t_4\:md {
    top: 1rem;
  }
  .t_5\:md,.t_6\:md {
    top: 2rem;
  }
  .b_100\:md {
    bottom: 100%;
  }
  .b_auto\:md {
    bottom: auto;
  }
  .b_unset\:md {
    bottom: unset;
  }
  .b_0\:md {
    bottom: 0;
  }
  .b_n6\:md {
    bottom: -4rem;
  }
  .b_n5\:md {
    bottom: -2rem;
  }
  .b_n4\:md {
    bottom: -1rem;
  }
  .b_n3\:md {
    bottom: -0.5rem;
  }
  .b_n2\:md {
    bottom: -0.25rem;
  }
  .b_n1\:md {
    bottom: -1px;
  }
  .b_1\:md {
    bottom: 1px;
  }
  .b_2\:md {
    bottom: 0.25rem;
  }
  .b_3\:md {
    bottom: 0.5rem;
  }
  .b_4\:md {
    bottom: 1rem;
  }
  .b_5\:md,.b_6\:md {
    bottom: 2rem;
  }
  .l_100\:md {
    left: 100%;
  }
  .l_auto\:md {
    left: auto;
  }
  .l_unset\:md {
    left: unset;
  }
  .l_0\:md {
    left: 0;
  }
  .l_n6\:md {
    left: -4rem;
  }
  .l_n5\:md {
    left: -2rem;
  }
  .l_n4\:md {
    left: -1rem;
  }
  .l_n3\:md {
    left: -0.5rem;
  }
  .l_n2\:md {
    left: -0.25rem;
  }
  .l_n1\:md {
    left: -1px;
  }
  .l_1\:md {
    left: 1px;
  }
  .l_2\:md {
    left: 0.25rem;
  }
  .l_3\:md {
    left: 0.5rem;
  }
  .l_4\:md {
    left: 1rem;
  }
  .l_5\:md,.l_6\:md {
    left: 2rem;
  }
  .r_100\:md {
    right: 100%;
  }
  .r_auto\:md {
    right: auto;
  }
  .r_unset\:md {
    right: unset;
  }
  .r_0\:md {
    right: 0;
  }
  .r_n6\:md {
    right: -4rem;
  }
  .r_n5\:md {
    right: -2rem;
  }
  .r_n4\:md {
    right: -1rem;
  }
  .r_n3\:md {
    right: -0.5rem;
  }
  .r_n2\:md {
    right: -0.25rem;
  }
  .r_n1\:md {
    right: -1px;
  }
  .r_1\:md {
    right: 1px;
  }
  .r_2\:md {
    right: 0.25rem;
  }
  .r_3\:md {
    right: 0.5rem;
  }
  .r_4\:md {
    right: 1rem;
  }
  .r_5\:md,.r_6\:md {
    right: 2rem;
  }
}
@container (width > 760px) {
  .row_all\\:lg {
    grid-row-start: start;
    grid-row-end: end;
  }
  .col_all\\:lg {
    grid-column-start: start;
    grid-column-end: end;
  }
  .aspect_8x10\:lg {
    aspect-ratio: 8 / 10;
  }
  .aspect_1x1\:lg {
    aspect-ratio: 1 / 1;
  }
  .aspect_4x3\:lg {
    aspect-ratio: 4 / 3;
  }
  .aspect_3x4\:lg {
    aspect-ratio: 3 / 4;
  }
  .aspect_3x2\:lg {
    aspect-ratio: 3 / 2;
  }
  .aspect_2x3\:lg {
    aspect-ratio: 2 / 3;
  }
  .aspect_16x9\:lg {
    aspect-ratio: 16 / 9;
  }
  .aspect_21x9\:lg {
    aspect-ratio: 21 / 9;
  }
  .aspect_2x1\:lg {
    aspect-ratio: 2 / 1;
  }
  .aspect_3x1\:lg {
    aspect-ratio: 3 / 1;
  }
  .aspect_4x1\:lg {
    aspect-ratio: 4 / 1;
  }
  .aspect_5x1\:lg {
    aspect-ratio: 5 / 1;
  }
  .aspect_leaderboard\:lg {
    aspect-ratio: 728 / 90;
  }
  .aspect_skyscraper\:lg {
    aspect-ratio: 160 / 600;
  }
  .aspect_bigbox\:lg {
    aspect-ratio: 300 / 250;
  }
  .aspect_billboard\:lg {
    aspect-ratio: 970 / 250;
  }
  .block\:lg {
    display: block;
  }
  .inline\:lg {
    display: inline;
  }
  .inline-block\:lg {
    display: inline-block;
  }
  .table-cell\:lg {
    display: table-cell;
  }
  .table\:lg {
    display: table;
  }
  .table-row\:lg {
    display: table-row;
  }
  .table-row-group\:lg {
    display: table-row-group;
  }
  .flex\:lg {
    display: flex;
  }
  .inline-flex\:lg {
    display: inline-flex;
  }
  .grid\:lg {
    display: grid;
  }
  .display_contents\:lg {
    display: contents;
  }
  .display_none\:lg {
    display: none;
  }
  .initial\:lg {
    position: initial;
  }
  .inherit\:lg {
    position: inherit;
  }
  .relative\:lg {
    position: relative;
  }
  .absolute\:lg {
    position: absolute;
  }
  .fixed\:lg {
    position: fixed;
  }
  .sticky\:lg {
    position: sticky;
  }
  .unset\:lg {
    position: unset;
  }
  .br_none\:lg {
    border-style: none;
  }
  .br_solid\:lg {
    border-style: solid;
  }
  .br_dashed\:lg {
    border-style: dashed;
  }
  .br_dotted\:lg {
    border-style: dotted;
  }
  .flex_none\:lg {
    flex: none;
  }
  .flex_grow\:lg {
    flex: 1 0 auto;
  }
  .flex_shrink\:lg {
    flex: 0 1 auto;
  }
  .flex_auto\:lg {
    flex: 1 1 auto;
  }
  .flex_row\:lg {
    flex-direction: row;
  }
  .flex_column\:lg {
    flex-direction: column;
  }
  .flex_row-reverse\:lg {
    flex-direction: row-reverse;
  }
  .flex_column-reverse\:lg {
    flex-direction: column-reverse;
  }
  .flex_wrap-reverse\:lg {
    flex-wrap: wrap-reverse;
  }
  .flex_wrap\:lg {
    flex-wrap: wrap;
  }
  .flex_nowrap\:lg {
    flex-wrap: nowrap;
  }
  .flex_auto\:lg {
    flex-basis: auto;
  }
  .flex_0\:lg {
    flex-basis: 0%;
  }
  .flex_5\:lg {
    flex-basis: 5%;
  }
  .flex_10\:lg {
    flex-basis: 10%;
  }
  .flex_15\:lg {
    flex-basis: 15%;
  }
  .flex_20\:lg {
    flex-basis: 20%;
  }
  .flex_25\:lg {
    flex-basis: 25%;
  }
  .flex_30\:lg {
    flex-basis: 30%;
  }
  .flex_35\:lg {
    flex-basis: 35%;
  }
  .flex_40\:lg {
    flex-basis: 40%;
  }
  .flex_45\:lg {
    flex-basis: 45%;
  }
  .flex_50\:lg {
    flex-basis: 50%;
  }
  .flex_55\:lg {
    flex-basis: 55%;
  }
  .flex_60\:lg {
    flex-basis: 60%;
  }
  .flex_65\:lg {
    flex-basis: 65%;
  }
  .flex_70\:lg {
    flex-basis: 70%;
  }
  .flex_75\:lg {
    flex-basis: 75%;
  }
  .flex_80\:lg {
    flex-basis: 80%;
  }
  .flex_85\:lg {
    flex-basis: 85%;
  }
  .flex_90\:lg {
    flex-basis: 90%;
  }
  .flex_95\:lg {
    flex-basis: 95%;
  }
  .flex_100\:lg {
    flex-basis: 100%;
  }
  .flex_third-1\:lg {
    flex-basis: 33%;
  }
  .flex_third-2\:lg {
    flex-basis: 66%;
  }
  .justify_start\:lg {
    justify-content: start;
  }
  .justify_end\:lg {
    justify-content: end;
  }
  .justify_center\:lg {
    justify-content: center;
  }
  .justify_between\:lg {
    justify-content: space-between;
  }
  .justify_around\:lg {
    justify-content: space-around;
  }
  .justify_evenly\:lg {
    justify-content: space-evenly;
  }
  .justify_stretch\:lg {
    justify-content: stretch;
  }
  .justify_baseline\:lg {
    justify-content: baseline;
  }
  .justify-items_start\:lg {
    justify-items: start;
  }
  .justify-items_end\:lg {
    justify-items: end;
  }
  .justify-items_center\:lg {
    justify-items: center;
  }
  .justify-items_between\:lg {
    justify-items: space-between;
  }
  .justify-items_around\:lg {
    justify-items: space-around;
  }
  .justify-items_stretch\:lg {
    justify-items: stretch;
  }
  .justify-items_baseline\:lg {
    justify-items: baseline;
  }
  .self-justify_start\:lg {
    justify-self: start;
  }
  .self-justify_end\:lg {
    justify-self: end;
  }
  .self-justify_center\:lg {
    justify-self: center;
  }
  .self-justify_between\:lg {
    justify-self: space-between;
  }
  .self-justify_around\:lg {
    justify-self: space-around;
  }
  .self-justify_stretch\:lg {
    justify-self: stretch;
  }
  .self-justify_baseline\:lg {
    justify-self: baseline;
  }
  .content_start\:lg {
    align-content: start;
  }
  .content_end\:lg {
    align-content: end;
  }
  .content_center\:lg {
    align-content: center;
  }
  .content_between\:lg {
    align-content: space-between;
  }
  .content_around\:lg {
    align-content: space-around;
  }
  .content_evenly\:lg {
    align-content: space-evenly;
  }
  .content_stretch\:lg {
    align-content: stretch;
  }
  .content_baseline\:lg {
    align-content: baseline;
  }
  .items_start\:lg {
    align-items: start;
  }
  .items_end\:lg {
    align-items: end;
  }
  .items_center\:lg {
    align-items: center;
  }
  .items_between\:lg {
    align-items: space-between;
  }
  .items_around\:lg {
    align-items: space-around;
  }
  .items_stretch\:lg {
    align-items: stretch;
  }
  .items_baseline\:lg {
    align-items: baseline;
  }
  .self_start\:lg {
    align-self: start;
  }
  .self_end\:lg {
    align-self: end;
  }
  .self_center\:lg {
    align-self: center;
  }
  .self_between\:lg {
    align-self: space-between;
  }
  .self_around\:lg {
    align-self: space-around;
  }
  .self_stretch\:lg {
    align-self: stretch;
  }
  .self_baseline\:lg {
    align-self: baseline;
  }
  .gap_0\:lg {
    grid-gap: 0;
  }
  .gap_1\:lg {
    grid-gap: 1px;
  }
  .gap_2\:lg {
    grid-gap: 0.25rem;
  }
  .gap_3\:lg {
    grid-gap: 0.5rem;
  }
  .gap_4\:lg {
    grid-gap: 1rem;
  }
  .gap_5\:lg {
    grid-gap: 2rem;
  }
  .gap_6\:lg {
    grid-gap: 4rem;
  }
  .gap-x_0\:lg {
    grid-column-gap: 0;
  }
  .gap-x_1\:lg {
    grid-column-gap: 1px;
  }
  .gap-x_2\:lg {
    grid-column-gap: 0.25rem;
  }
  .gap-x_3\:lg {
    grid-column-gap: 0.5rem;
  }
  .gap-x_4\:lg {
    grid-column-gap: 1rem;
  }
  .gap-x_5\:lg {
    grid-column-gap: 2rem;
  }
  .gap-x_6\:lg {
    grid-column-gap: 4rem;
  }
  .gap-y_0\:lg {
    grid-row-gap: 0;
  }
  .gap-y_1\:lg {
    grid-row-gap: 1px;
  }
  .gap-y_2\:lg {
    grid-row-gap: 0.25rem;
  }
  .gap-y_3\:lg {
    grid-row-gap: 0.5rem;
  }
  .gap-y_4\:lg {
    grid-row-gap: 1rem;
  }
  .gap-y_5\:lg {
    grid-row-gap: 2rem;
  }
  .gap-y_6\:lg {
    grid-row-gap: 4rem;
  }
  .col-start_start\:lg {
    grid-column-start: start;
  }
  .col-start_1\:lg {
    grid-column-start: 1;
  }
  .col-start_2\:lg {
    grid-column-start: 2;
  }
  .col-start_3\:lg {
    grid-column-start: 3;
  }
  .col-start_4\:lg {
    grid-column-start: 4;
  }
  .col-start_5\:lg {
    grid-column-start: 5;
  }
  .col-start_6\:lg {
    grid-column-start: 6;
  }
  .col-start_7\:lg {
    grid-column-start: 7;
  }
  .col-start_n1\:lg {
    grid-column-start: -1;
  }
  .col-start_n2\:lg {
    grid-column-start: -2;
  }
  .col-start_n3\:lg {
    grid-column-start: -3;
  }
  .col-start_n4\:lg {
    grid-column-start: -4;
  }
  .col-start_n5\:lg {
    grid-column-start: -5;
  }
  .col-start_n6\:lg {
    grid-column-start: -6;
  }
  .col-start_n7\:lg {
    grid-column-start: -7;
  }
  .col-start_end\:lg {
    grid-column-start: end;
  }
  .col-end_start\:lg {
    grid-column-end: start;
  }
  .col-end_1\:lg {
    grid-column-end: 1;
  }
  .col-end_2\:lg {
    grid-column-end: 2;
  }
  .col-end_3\:lg {
    grid-column-end: 3;
  }
  .col-end_4\:lg {
    grid-column-end: 4;
  }
  .col-end_5\:lg {
    grid-column-end: 5;
  }
  .col-end_6\:lg {
    grid-column-end: 6;
  }
  .col-end_7\:lg {
    grid-column-end: 7;
  }
  .col-end_n1\:lg {
    grid-column-end: -1;
  }
  .col-end_n2\:lg {
    grid-column-end: -2;
  }
  .col-end_n3\:lg {
    grid-column-end: -3;
  }
  .col-end_n4\:lg {
    grid-column-end: -4;
  }
  .col-end_n5\:lg {
    grid-column-end: -5;
  }
  .col-end_n6\:lg {
    grid-column-end: -6;
  }
  .col-end_n7\:lg {
    grid-column-end: -7;
  }
  .col-end_end\:lg {
    grid-column-end: end;
  }
  .row-start_start\:lg {
    grid-row-start: start;
  }
  .row-start_1\:lg {
    grid-row-start: 1;
  }
  .row-start_2\:lg {
    grid-row-start: 2;
  }
  .row-start_3\:lg {
    grid-row-start: 3;
  }
  .row-start_4\:lg {
    grid-row-start: 4;
  }
  .row-start_5\:lg {
    grid-row-start: 5;
  }
  .row-start_6\:lg {
    grid-row-start: 6;
  }
  .row-start_7\:lg {
    grid-row-start: 7;
  }
  .row-start_n1\:lg {
    grid-row-start: -1;
  }
  .row-start_n2\:lg {
    grid-row-start: -2;
  }
  .row-start_n3\:lg {
    grid-row-start: -3;
  }
  .row-start_n4\:lg {
    grid-row-start: -4;
  }
  .row-start_n5\:lg {
    grid-row-start: -5;
  }
  .row-start_n6\:lg {
    grid-row-start: -6;
  }
  .row-start_n7\:lg {
    grid-row-start: -7;
  }
  .row-start_end\:lg {
    grid-row-start: end;
  }
  .row-end_start\:lg {
    grid-row-end: start;
  }
  .row-end_1\:lg {
    grid-row-end: 1;
  }
  .row-end_2\:lg {
    grid-row-end: 2;
  }
  .row-end_3\:lg {
    grid-row-end: 3;
  }
  .row-end_4\:lg {
    grid-row-end: 4;
  }
  .row-end_5\:lg {
    grid-row-end: 5;
  }
  .row-end_6\:lg {
    grid-row-end: 6;
  }
  .row-end_7\:lg {
    grid-row-end: 7;
  }
  .row-end_n1\:lg {
    grid-row-end: -1;
  }
  .row-end_n2\:lg {
    grid-row-end: -2;
  }
  .row-end_n3\:lg {
    grid-row-end: -3;
  }
  .row-end_n4\:lg {
    grid-row-end: -4;
  }
  .row-end_n5\:lg {
    grid-row-end: -5;
  }
  .row-end_n6\:lg {
    grid-row-end: -6;
  }
  .row-end_n7\:lg {
    grid-row-end: -7;
  }
  .row-end_end\:lg {
    grid-row-end: end;
  }
  .font_0\:lg {
    font-size: 1rem  !important;
  }
  .font_1\:lg {
    font-size: 1.125rem  !important;
  }
  .font_2\:lg {
    font-size: 1.265625rem  !important;
  }
  .font_3\:lg {
    font-size: 1.423828125rem  !important;
  }
  .font_4\:lg {
    font-size: 1.6018066406rem  !important;
  }
  .font_5\:lg {
    font-size: 1.8020324707rem  !important;
  }
  .font_6\:lg {
    font-size: 2.0272865295rem  !important;
  }
  .font_7\:lg {
    font-size: 2.2806973457rem  !important;
  }
  .font_8\:lg {
    font-size: 2.565784514rem  !important;
  }
  .font_9\:lg {
    font-size: 2.8865075782rem  !important;
  }
  .font_10\:lg {
    font-size: 3.2473210255rem  !important;
  }
  .font_n1\:lg {
    font-size: 0.8888888889rem  !important;
  }
  .font_n2\:lg {
    font-size: 0.7901234568rem  !important;
  }
  .font_n3\:lg {
    font-size: 0.7023319616rem  !important;
  }
  .font_n4\:lg {
    font-size: 0.624295077rem  !important;
  }
  .font_n5\:lg {
    font-size: 0.5549289573rem  !important;
  }
  .text_unset\:lg {
    text-align: unset  !important;
  }
  .text_center\:lg {
    text-align: center  !important;
  }
  .text_left\:lg {
    text-align: left  !important;
  }
  .text_right\:lg {
    text-align: right  !important;
  }
  .text_start\:lg {
    text-align: start  !important;
  }
  .text_end\:lg {
    text-align: end  !important;
  }
  .m_0\:lg {
    margin: 0  !important;
  }
  .m_n6\:lg {
    margin: -4rem  !important;
  }
  .m_n5\:lg {
    margin: -2rem  !important;
  }
  .m_n4\:lg {
    margin: -1rem  !important;
  }
  .m_n3\:lg {
    margin: -0.5rem  !important;
  }
  .m_n2\:lg {
    margin: -0.25rem  !important;
  }
  .m_n1\:lg {
    margin: -1px  !important;
  }
  .m_1\:lg {
    margin: 1px  !important;
  }
  .m_2\:lg {
    margin: 0.25rem  !important;
  }
  .m_3\:lg {
    margin: 0.5rem  !important;
  }
  .m_4\:lg {
    margin: 1rem  !important;
  }
  .m_5\:lg {
    margin: 2rem  !important;
  }
  .m_6\:lg {
    margin: 4rem  !important;
  }
  .m_auto\:lg {
    margin: auto  !important;
  }
  .m_unset\:lg {
    margin: unset  !important;
  }
  .m-y_0\:lg {
    margin-top: 0  !important;
    margin-bottom: 0  !important;
  }
  .m-y_n6\:lg {
    margin-top: -4rem  !important;
    margin-bottom: -4rem  !important;
  }
  .m-y_n5\:lg {
    margin-top: -2rem  !important;
    margin-bottom: -2rem  !important;
  }
  .m-y_n4\:lg {
    margin-top: -1rem  !important;
    margin-bottom: -1rem  !important;
  }
  .m-y_n3\:lg {
    margin-top: -0.5rem  !important;
    margin-bottom: -0.5rem  !important;
  }
  .m-y_n2\:lg {
    margin-top: -0.25rem  !important;
    margin-bottom: -0.25rem  !important;
  }
  .m-y_n1\:lg {
    margin-top: -1px  !important;
    margin-bottom: -1px  !important;
  }
  .m-y_1\:lg {
    margin-top: 1px  !important;
    margin-bottom: 1px  !important;
  }
  .m-y_2\:lg {
    margin-top: 0.25rem  !important;
    margin-bottom: 0.25rem  !important;
  }
  .m-y_3\:lg {
    margin-top: 0.5rem  !important;
    margin-bottom: 0.5rem  !important;
  }
  .m-y_4\:lg {
    margin-top: 1rem  !important;
    margin-bottom: 1rem  !important;
  }
  .m-y_5\:lg {
    margin-top: 2rem  !important;
    margin-bottom: 2rem  !important;
  }
  .m-y_6\:lg {
    margin-top: 4rem  !important;
    margin-bottom: 4rem  !important;
  }
  .m-y_auto\:lg {
    margin-top: auto  !important;
    margin-bottom: auto  !important;
  }
  .m-y_unset\:lg {
    margin-top: unset  !important;
    margin-bottom: unset  !important;
  }
  .m-x_0\:lg {
    margin-right: 0  !important;
    margin-left: 0  !important;
  }
  .m-x_n6\:lg {
    margin-right: -4rem  !important;
    margin-left: -4rem  !important;
  }
  .m-x_n5\:lg {
    margin-right: -2rem  !important;
    margin-left: -2rem  !important;
  }
  .m-x_n4\:lg {
    margin-right: -1rem  !important;
    margin-left: -1rem  !important;
  }
  .m-x_n3\:lg {
    margin-right: -0.5rem  !important;
    margin-left: -0.5rem  !important;
  }
  .m-x_n2\:lg {
    margin-right: -0.25rem  !important;
    margin-left: -0.25rem  !important;
  }
  .m-x_n1\:lg {
    margin-right: -1px  !important;
    margin-left: -1px  !important;
  }
  .m-x_1\:lg {
    margin-right: 1px  !important;
    margin-left: 1px  !important;
  }
  .m-x_2\:lg {
    margin-right: 0.25rem  !important;
    margin-left: 0.25rem  !important;
  }
  .m-x_3\:lg {
    margin-right: 0.5rem  !important;
    margin-left: 0.5rem  !important;
  }
  .m-x_4\:lg {
    margin-right: 1rem  !important;
    margin-left: 1rem  !important;
  }
  .m-x_5\:lg {
    margin-right: 2rem  !important;
    margin-left: 2rem  !important;
  }
  .m-x_6\:lg {
    margin-right: 4rem  !important;
    margin-left: 4rem  !important;
  }
  .m-x_auto\:lg {
    margin-right: auto  !important;
    margin-left: auto  !important;
  }
  .m-x_unset\:lg {
    margin-right: unset  !important;
    margin-left: unset  !important;
  }
  .m-t_0\:lg {
    margin-top: 0  !important;
  }
  .m-t_n6\:lg {
    margin-top: -4rem  !important;
  }
  .m-t_n5\:lg {
    margin-top: -2rem  !important;
  }
  .m-t_n4\:lg {
    margin-top: -1rem  !important;
  }
  .m-t_n3\:lg {
    margin-top: -0.5rem  !important;
  }
  .m-t_n2\:lg {
    margin-top: -0.25rem  !important;
  }
  .m-t_n1\:lg {
    margin-top: -1px  !important;
  }
  .m-t_1\:lg {
    margin-top: 1px  !important;
  }
  .m-t_2\:lg {
    margin-top: 0.25rem  !important;
  }
  .m-t_3\:lg {
    margin-top: 0.5rem  !important;
  }
  .m-t_4\:lg {
    margin-top: 1rem  !important;
  }
  .m-t_5\:lg {
    margin-top: 2rem  !important;
  }
  .m-t_6\:lg {
    margin-top: 4rem  !important;
  }
  .m-t_auto\:lg {
    margin-top: auto  !important;
  }
  .m-t_unset\:lg {
    margin-top: unset  !important;
  }
  .m-b_0\:lg {
    margin-bottom: 0  !important;
  }
  .m-b_n6\:lg {
    margin-bottom: -4rem  !important;
  }
  .m-b_n5\:lg {
    margin-bottom: -2rem  !important;
  }
  .m-b_n4\:lg {
    margin-bottom: -1rem  !important;
  }
  .m-b_n3\:lg {
    margin-bottom: -0.5rem  !important;
  }
  .m-b_n2\:lg {
    margin-bottom: -0.25rem  !important;
  }
  .m-b_n1\:lg {
    margin-bottom: -1px  !important;
  }
  .m-b_1\:lg {
    margin-bottom: 1px  !important;
  }
  .m-b_2\:lg {
    margin-bottom: 0.25rem  !important;
  }
  .m-b_3\:lg {
    margin-bottom: 0.5rem  !important;
  }
  .m-b_4\:lg {
    margin-bottom: 1rem  !important;
  }
  .m-b_5\:lg {
    margin-bottom: 2rem  !important;
  }
  .m-b_6\:lg {
    margin-bottom: 4rem  !important;
  }
  .m-b_auto\:lg {
    margin-bottom: auto  !important;
  }
  .m-b_unset\:lg {
    margin-bottom: unset  !important;
  }
  .m-l_0\:lg {
    margin-left: 0  !important;
  }
  .m-l_n6\:lg {
    margin-left: -4rem  !important;
  }
  .m-l_n5\:lg {
    margin-left: -2rem  !important;
  }
  .m-l_n4\:lg {
    margin-left: -1rem  !important;
  }
  .m-l_n3\:lg {
    margin-left: -0.5rem  !important;
  }
  .m-l_n2\:lg {
    margin-left: -0.25rem  !important;
  }
  .m-l_n1\:lg {
    margin-left: -1px  !important;
  }
  .m-l_1\:lg {
    margin-left: 1px  !important;
  }
  .m-l_2\:lg {
    margin-left: 0.25rem  !important;
  }
  .m-l_3\:lg {
    margin-left: 0.5rem  !important;
  }
  .m-l_4\:lg {
    margin-left: 1rem  !important;
  }
  .m-l_5\:lg {
    margin-left: 2rem  !important;
  }
  .m-l_6\:lg {
    margin-left: 4rem  !important;
  }
  .m-l_auto\:lg {
    margin-left: auto  !important;
  }
  .m-l_unset\:lg {
    margin-left: unset  !important;
  }
  .m-r_0\:lg {
    margin-right: 0  !important;
  }
  .m-r_n6\:lg {
    margin-right: -4rem  !important;
  }
  .m-r_n5\:lg {
    margin-right: -2rem  !important;
  }
  .m-r_n4\:lg {
    margin-right: -1rem  !important;
  }
  .m-r_n3\:lg {
    margin-right: -0.5rem  !important;
  }
  .m-r_n2\:lg {
    margin-right: -0.25rem  !important;
  }
  .m-r_n1\:lg {
    margin-right: -1px  !important;
  }
  .m-r_1\:lg {
    margin-right: 1px  !important;
  }
  .m-r_2\:lg {
    margin-right: 0.25rem  !important;
  }
  .m-r_3\:lg {
    margin-right: 0.5rem  !important;
  }
  .m-r_4\:lg {
    margin-right: 1rem  !important;
  }
  .m-r_5\:lg {
    margin-right: 2rem  !important;
  }
  .m-r_6\:lg {
    margin-right: 4rem  !important;
  }
  .m-r_auto\:lg {
    margin-right: auto  !important;
  }
  .m-r_unset\:lg {
    margin-right: unset  !important;
  }
  .p_0\:lg {
    padding: 0  !important;
  }
  .p_1\:lg {
    padding: 1px  !important;
  }
  .p_2\:lg {
    padding: 0.25rem  !important;
  }
  .p_3\:lg {
    padding: 0.5rem  !important;
  }
  .p_4\:lg {
    padding: 1rem  !important;
  }
  .p_5\:lg {
    padding: 2rem  !important;
  }
  .p_6\:lg {
    padding: 4rem  !important;
  }
  .p-y_0\:lg {
    padding-top: 0  !important;
    padding-bottom: 0  !important;
  }
  .p-y_1\:lg {
    padding-top: 1px  !important;
    padding-bottom: 1px  !important;
  }
  .p-y_2\:lg {
    padding-top: 0.25rem  !important;
    padding-bottom: 0.25rem  !important;
  }
  .p-y_3\:lg {
    padding-top: 0.5rem  !important;
    padding-bottom: 0.5rem  !important;
  }
  .p-y_4\:lg {
    padding-top: 1rem  !important;
    padding-bottom: 1rem  !important;
  }
  .p-y_5\:lg {
    padding-top: 2rem  !important;
    padding-bottom: 2rem  !important;
  }
  .p-y_6\:lg {
    padding-top: 4rem  !important;
    padding-bottom: 4rem  !important;
  }
  .p-x_0\:lg {
    padding-right: 0  !important;
    padding-left: 0  !important;
  }
  .p-x_1\:lg {
    padding-right: 1px  !important;
    padding-left: 1px  !important;
  }
  .p-x_2\:lg {
    padding-right: 0.25rem  !important;
    padding-left: 0.25rem  !important;
  }
  .p-x_3\:lg {
    padding-right: 0.5rem  !important;
    padding-left: 0.5rem  !important;
  }
  .p-x_4\:lg {
    padding-right: 1rem  !important;
    padding-left: 1rem  !important;
  }
  .p-x_5\:lg {
    padding-right: 2rem  !important;
    padding-left: 2rem  !important;
  }
  .p-x_6\:lg {
    padding-right: 4rem  !important;
    padding-left: 4rem  !important;
  }
  .p-t_0\:lg {
    padding-top: 0  !important;
  }
  .p-t_1\:lg {
    padding-top: 1px  !important;
  }
  .p-t_2\:lg {
    padding-top: 0.25rem  !important;
  }
  .p-t_3\:lg {
    padding-top: 0.5rem  !important;
  }
  .p-t_4\:lg {
    padding-top: 1rem  !important;
  }
  .p-t_5\:lg {
    padding-top: 2rem  !important;
  }
  .p-t_6\:lg {
    padding-top: 4rem  !important;
  }
  .p-b_0\:lg {
    padding-bottom: 0  !important;
  }
  .p-b_1\:lg {
    padding-bottom: 1px  !important;
  }
  .p-b_2\:lg {
    padding-bottom: 0.25rem  !important;
  }
  .p-b_3\:lg {
    padding-bottom: 0.5rem  !important;
  }
  .p-b_4\:lg {
    padding-bottom: 1rem  !important;
  }
  .p-b_5\:lg {
    padding-bottom: 2rem  !important;
  }
  .p-b_6\:lg {
    padding-bottom: 4rem  !important;
  }
  .p-l_0\:lg {
    padding-left: 0  !important;
  }
  .p-l_1\:lg {
    padding-left: 1px  !important;
  }
  .p-l_2\:lg {
    padding-left: 0.25rem  !important;
  }
  .p-l_3\:lg {
    padding-left: 0.5rem  !important;
  }
  .p-l_4\:lg {
    padding-left: 1rem  !important;
  }
  .p-l_5\:lg {
    padding-left: 2rem  !important;
  }
  .p-l_6\:lg {
    padding-left: 4rem  !important;
  }
  .p-r_0\:lg {
    padding-right: 0  !important;
  }
  .p-r_1\:lg {
    padding-right: 1px  !important;
  }
  .p-r_2\:lg {
    padding-right: 0.25rem  !important;
  }
  .p-r_3\:lg {
    padding-right: 0.5rem  !important;
  }
  .p-r_4\:lg {
    padding-right: 1rem  !important;
  }
  .p-r_5\:lg {
    padding-right: 2rem  !important;
  }
  .p-r_6\:lg {
    padding-right: 4rem  !important;
  }
  .columns_1\:lg {
    grid-template-columns: [start] var(--col-1, 1fr) [end]  !important;
  }
  .columns_2\:lg {
    grid-template-columns: [start] var(--col-1, 1fr) var(--col-2, 1fr) [end]  !important;
  }
  .columns_3\:lg {
    grid-template-columns: [start] var(--col-1, 1fr) var(--col-2, 1fr) var(--col-3, 1fr) [end]  !important;
  }
  .columns_4\:lg {
    grid-template-columns: [start] var(--col-1, 1fr) var(--col-2, 1fr) var(--col-3, 1fr) var(--col-4, 1fr) [end]  !important;
  }
  .columns_5\:lg {
    grid-template-columns: [start] var(--col-1, 1fr) var(--col-2, 1fr) var(--col-3, 1fr) var(--col-4, 1fr) var(--col-5, 1fr) [end]  !important;
  }
  .columns_6\:lg {
    grid-template-columns: [start] var(--col-1, 1fr) var(--col-2, 1fr) var(--col-3, 1fr) var(--col-4, 1fr) var(--col-5, 1fr) var(--col-6, 1fr) [end]  !important;
  }
  .rows_1\:lg {
    grid-template-rows: [start] var(--row-1, 1fr) [end]  !important;
  }
  .rows_2\:lg {
    grid-template-rows: [start] var(--row-1, 1fr) var(--row-2, 1fr) [end]  !important;
  }
  .rows_3\:lg {
    grid-template-rows: [start] var(--row-1, 1fr) var(--row-2, 1fr) var(--row-3, 1fr) [end]  !important;
  }
  .rows_4\:lg {
    grid-template-rows: [start] var(--row-1, 1fr) var(--row-2, 1fr) var(--row-3, 1fr) var(--row-4, 1fr) [end]  !important;
  }
  .rows_5\:lg {
    grid-template-rows: [start] var(--row-1, 1fr) var(--row-2, 1fr) var(--row-3, 1fr) var(--row-4, 1fr) var(--row-5, 1fr) [end]  !important;
  }
  .rows_6\:lg {
    grid-template-rows: [start] var(--row-1, 1fr) var(--row-2, 1fr) var(--row-3, 1fr) var(--row-4, 1fr) var(--row-5, 1fr) var(--row-6, 1fr) [end]  !important;
  }
  .max-w_0\:lg {
    max-width: 0  !important;
  }
  .max-w_5\:lg {
    max-width: 5rem  !important;
  }
  .max-w_10\:lg {
    max-width: 10rem  !important;
  }
  .max-w_15\:lg {
    max-width: 15rem  !important;
  }
  .max-w_20\:lg {
    max-width: 20rem  !important;
  }
  .max-w_25\:lg {
    max-width: 25rem  !important;
  }
  .max-w_30\:lg {
    max-width: 30rem  !important;
  }
  .max-w_35\:lg {
    max-width: 35rem  !important;
  }
  .max-w_40\:lg {
    max-width: 40rem  !important;
  }
  .max-w_45\:lg {
    max-width: 45rem  !important;
  }
  .max-w_50\:lg {
    max-width: 50rem  !important;
  }
  .max-w_55\:lg {
    max-width: 55rem  !important;
  }
  .max-w_60\:lg {
    max-width: 60rem  !important;
  }
  .max-w_65\:lg {
    max-width: 65rem  !important;
  }
  .max-w_70\:lg {
    max-width: 70rem  !important;
  }
  .max-w_75\:lg {
    max-width: 75rem  !important;
  }
  .max-w_80\:lg {
    max-width: 80rem  !important;
  }
  .max-w_85\:lg {
    max-width: 85rem  !important;
  }
  .max-w_90\:lg {
    max-width: 90rem  !important;
  }
  .max-w_95\:lg {
    max-width: 95rem  !important;
  }
  .max-w_unset\:lg {
    max-width: unset  !important;
  }
  .inset_100\:lg {
    inset: 100%;
  }
  .inset_auto\:lg {
    inset: auto;
  }
  .inset_unset\:lg {
    inset: unset;
  }
  .inset_0\:lg {
    inset: 0;
  }
  .inset_n6\:lg {
    inset: -4rem;
  }
  .inset_n5\:lg {
    inset: -2rem;
  }
  .inset_n4\:lg {
    inset: -1rem;
  }
  .inset_n3\:lg {
    inset: -0.5rem;
  }
  .inset_n2\:lg {
    inset: -0.25rem;
  }
  .inset_n1\:lg {
    inset: -1px;
  }
  .inset_1\:lg {
    inset: 1px;
  }
  .inset_2\:lg {
    inset: 0.25rem;
  }
  .inset_3\:lg {
    inset: 0.5rem;
  }
  .inset_4\:lg {
    inset: 1rem;
  }
  .inset_5\:lg,.inset_6\:lg {
    inset: 2rem;
  }
  .t_100\:lg {
    top: 100%;
  }
  .t_auto\:lg {
    top: auto;
  }
  .t_unset\:lg {
    top: unset;
  }
  .t_0\:lg {
    top: 0;
  }
  .t_n6\:lg {
    top: -4rem;
  }
  .t_n5\:lg {
    top: -2rem;
  }
  .t_n4\:lg {
    top: -1rem;
  }
  .t_n3\:lg {
    top: -0.5rem;
  }
  .t_n2\:lg {
    top: -0.25rem;
  }
  .t_n1\:lg {
    top: -1px;
  }
  .t_1\:lg {
    top: 1px;
  }
  .t_2\:lg {
    top: 0.25rem;
  }
  .t_3\:lg {
    top: 0.5rem;
  }
  .t_4\:lg {
    top: 1rem;
  }
  .t_5\:lg,.t_6\:lg {
    top: 2rem;
  }
  .b_100\:lg {
    bottom: 100%;
  }
  .b_auto\:lg {
    bottom: auto;
  }
  .b_unset\:lg {
    bottom: unset;
  }
  .b_0\:lg {
    bottom: 0;
  }
  .b_n6\:lg {
    bottom: -4rem;
  }
  .b_n5\:lg {
    bottom: -2rem;
  }
  .b_n4\:lg {
    bottom: -1rem;
  }
  .b_n3\:lg {
    bottom: -0.5rem;
  }
  .b_n2\:lg {
    bottom: -0.25rem;
  }
  .b_n1\:lg {
    bottom: -1px;
  }
  .b_1\:lg {
    bottom: 1px;
  }
  .b_2\:lg {
    bottom: 0.25rem;
  }
  .b_3\:lg {
    bottom: 0.5rem;
  }
  .b_4\:lg {
    bottom: 1rem;
  }
  .b_5\:lg,.b_6\:lg {
    bottom: 2rem;
  }
  .l_100\:lg {
    left: 100%;
  }
  .l_auto\:lg {
    left: auto;
  }
  .l_unset\:lg {
    left: unset;
  }
  .l_0\:lg {
    left: 0;
  }
  .l_n6\:lg {
    left: -4rem;
  }
  .l_n5\:lg {
    left: -2rem;
  }
  .l_n4\:lg {
    left: -1rem;
  }
  .l_n3\:lg {
    left: -0.5rem;
  }
  .l_n2\:lg {
    left: -0.25rem;
  }
  .l_n1\:lg {
    left: -1px;
  }
  .l_1\:lg {
    left: 1px;
  }
  .l_2\:lg {
    left: 0.25rem;
  }
  .l_3\:lg {
    left: 0.5rem;
  }
  .l_4\:lg {
    left: 1rem;
  }
  .l_5\:lg,.l_6\:lg {
    left: 2rem;
  }
  .r_100\:lg {
    right: 100%;
  }
  .r_auto\:lg {
    right: auto;
  }
  .r_unset\:lg {
    right: unset;
  }
  .r_0\:lg {
    right: 0;
  }
  .r_n6\:lg {
    right: -4rem;
  }
  .r_n5\:lg {
    right: -2rem;
  }
  .r_n4\:lg {
    right: -1rem;
  }
  .r_n3\:lg {
    right: -0.5rem;
  }
  .r_n2\:lg {
    right: -0.25rem;
  }
  .r_n1\:lg {
    right: -1px;
  }
  .r_1\:lg {
    right: 1px;
  }
  .r_2\:lg {
    right: 0.25rem;
  }
  .r_3\:lg {
    right: 0.5rem;
  }
  .r_4\:lg {
    right: 1rem;
  }
  .r_5\:lg,.r_6\:lg {
    right: 2rem;
  }
}
@container (width > 980px) {
  .row_all\\:xl {
    grid-row-start: start;
    grid-row-end: end;
  }
  .col_all\\:xl {
    grid-column-start: start;
    grid-column-end: end;
  }
  .aspect_8x10\:xl {
    aspect-ratio: 8 / 10;
  }
  .aspect_1x1\:xl {
    aspect-ratio: 1 / 1;
  }
  .aspect_4x3\:xl {
    aspect-ratio: 4 / 3;
  }
  .aspect_3x4\:xl {
    aspect-ratio: 3 / 4;
  }
  .aspect_3x2\:xl {
    aspect-ratio: 3 / 2;
  }
  .aspect_2x3\:xl {
    aspect-ratio: 2 / 3;
  }
  .aspect_16x9\:xl {
    aspect-ratio: 16 / 9;
  }
  .aspect_21x9\:xl {
    aspect-ratio: 21 / 9;
  }
  .aspect_2x1\:xl {
    aspect-ratio: 2 / 1;
  }
  .aspect_3x1\:xl {
    aspect-ratio: 3 / 1;
  }
  .aspect_4x1\:xl {
    aspect-ratio: 4 / 1;
  }
  .aspect_5x1\:xl {
    aspect-ratio: 5 / 1;
  }
  .aspect_leaderboard\:xl {
    aspect-ratio: 728 / 90;
  }
  .aspect_skyscraper\:xl {
    aspect-ratio: 160 / 600;
  }
  .aspect_bigbox\:xl {
    aspect-ratio: 300 / 250;
  }
  .aspect_billboard\:xl {
    aspect-ratio: 970 / 250;
  }
  .block\:xl {
    display: block;
  }
  .inline\:xl {
    display: inline;
  }
  .inline-block\:xl {
    display: inline-block;
  }
  .table-cell\:xl {
    display: table-cell;
  }
  .table\:xl {
    display: table;
  }
  .table-row\:xl {
    display: table-row;
  }
  .table-row-group\:xl {
    display: table-row-group;
  }
  .flex\:xl {
    display: flex;
  }
  .inline-flex\:xl {
    display: inline-flex;
  }
  .grid\:xl {
    display: grid;
  }
  .display_contents\:xl {
    display: contents;
  }
  .display_none\:xl {
    display: none;
  }
  .initial\:xl {
    position: initial;
  }
  .inherit\:xl {
    position: inherit;
  }
  .relative\:xl {
    position: relative;
  }
  .absolute\:xl {
    position: absolute;
  }
  .fixed\:xl {
    position: fixed;
  }
  .sticky\:xl {
    position: sticky;
  }
  .unset\:xl {
    position: unset;
  }
  .br_none\:xl {
    border-style: none;
  }
  .br_solid\:xl {
    border-style: solid;
  }
  .br_dashed\:xl {
    border-style: dashed;
  }
  .br_dotted\:xl {
    border-style: dotted;
  }
  .flex_none\:xl {
    flex: none;
  }
  .flex_grow\:xl {
    flex: 1 0 auto;
  }
  .flex_shrink\:xl {
    flex: 0 1 auto;
  }
  .flex_auto\:xl {
    flex: 1 1 auto;
  }
  .flex_row\:xl {
    flex-direction: row;
  }
  .flex_column\:xl {
    flex-direction: column;
  }
  .flex_row-reverse\:xl {
    flex-direction: row-reverse;
  }
  .flex_column-reverse\:xl {
    flex-direction: column-reverse;
  }
  .flex_wrap-reverse\:xl {
    flex-wrap: wrap-reverse;
  }
  .flex_wrap\:xl {
    flex-wrap: wrap;
  }
  .flex_nowrap\:xl {
    flex-wrap: nowrap;
  }
  .flex_auto\:xl {
    flex-basis: auto;
  }
  .flex_0\:xl {
    flex-basis: 0%;
  }
  .flex_5\:xl {
    flex-basis: 5%;
  }
  .flex_10\:xl {
    flex-basis: 10%;
  }
  .flex_15\:xl {
    flex-basis: 15%;
  }
  .flex_20\:xl {
    flex-basis: 20%;
  }
  .flex_25\:xl {
    flex-basis: 25%;
  }
  .flex_30\:xl {
    flex-basis: 30%;
  }
  .flex_35\:xl {
    flex-basis: 35%;
  }
  .flex_40\:xl {
    flex-basis: 40%;
  }
  .flex_45\:xl {
    flex-basis: 45%;
  }
  .flex_50\:xl {
    flex-basis: 50%;
  }
  .flex_55\:xl {
    flex-basis: 55%;
  }
  .flex_60\:xl {
    flex-basis: 60%;
  }
  .flex_65\:xl {
    flex-basis: 65%;
  }
  .flex_70\:xl {
    flex-basis: 70%;
  }
  .flex_75\:xl {
    flex-basis: 75%;
  }
  .flex_80\:xl {
    flex-basis: 80%;
  }
  .flex_85\:xl {
    flex-basis: 85%;
  }
  .flex_90\:xl {
    flex-basis: 90%;
  }
  .flex_95\:xl {
    flex-basis: 95%;
  }
  .flex_100\:xl {
    flex-basis: 100%;
  }
  .flex_third-1\:xl {
    flex-basis: 33%;
  }
  .flex_third-2\:xl {
    flex-basis: 66%;
  }
  .justify_start\:xl {
    justify-content: start;
  }
  .justify_end\:xl {
    justify-content: end;
  }
  .justify_center\:xl {
    justify-content: center;
  }
  .justify_between\:xl {
    justify-content: space-between;
  }
  .justify_around\:xl {
    justify-content: space-around;
  }
  .justify_evenly\:xl {
    justify-content: space-evenly;
  }
  .justify_stretch\:xl {
    justify-content: stretch;
  }
  .justify_baseline\:xl {
    justify-content: baseline;
  }
  .justify-items_start\:xl {
    justify-items: start;
  }
  .justify-items_end\:xl {
    justify-items: end;
  }
  .justify-items_center\:xl {
    justify-items: center;
  }
  .justify-items_between\:xl {
    justify-items: space-between;
  }
  .justify-items_around\:xl {
    justify-items: space-around;
  }
  .justify-items_stretch\:xl {
    justify-items: stretch;
  }
  .justify-items_baseline\:xl {
    justify-items: baseline;
  }
  .self-justify_start\:xl {
    justify-self: start;
  }
  .self-justify_end\:xl {
    justify-self: end;
  }
  .self-justify_center\:xl {
    justify-self: center;
  }
  .self-justify_between\:xl {
    justify-self: space-between;
  }
  .self-justify_around\:xl {
    justify-self: space-around;
  }
  .self-justify_stretch\:xl {
    justify-self: stretch;
  }
  .self-justify_baseline\:xl {
    justify-self: baseline;
  }
  .content_start\:xl {
    align-content: start;
  }
  .content_end\:xl {
    align-content: end;
  }
  .content_center\:xl {
    align-content: center;
  }
  .content_between\:xl {
    align-content: space-between;
  }
  .content_around\:xl {
    align-content: space-around;
  }
  .content_evenly\:xl {
    align-content: space-evenly;
  }
  .content_stretch\:xl {
    align-content: stretch;
  }
  .content_baseline\:xl {
    align-content: baseline;
  }
  .items_start\:xl {
    align-items: start;
  }
  .items_end\:xl {
    align-items: end;
  }
  .items_center\:xl {
    align-items: center;
  }
  .items_between\:xl {
    align-items: space-between;
  }
  .items_around\:xl {
    align-items: space-around;
  }
  .items_stretch\:xl {
    align-items: stretch;
  }
  .items_baseline\:xl {
    align-items: baseline;
  }
  .self_start\:xl {
    align-self: start;
  }
  .self_end\:xl {
    align-self: end;
  }
  .self_center\:xl {
    align-self: center;
  }
  .self_between\:xl {
    align-self: space-between;
  }
  .self_around\:xl {
    align-self: space-around;
  }
  .self_stretch\:xl {
    align-self: stretch;
  }
  .self_baseline\:xl {
    align-self: baseline;
  }
  .gap_0\:xl {
    grid-gap: 0;
  }
  .gap_1\:xl {
    grid-gap: 1px;
  }
  .gap_2\:xl {
    grid-gap: 0.25rem;
  }
  .gap_3\:xl {
    grid-gap: 0.5rem;
  }
  .gap_4\:xl {
    grid-gap: 1rem;
  }
  .gap_5\:xl {
    grid-gap: 2rem;
  }
  .gap_6\:xl {
    grid-gap: 4rem;
  }
  .gap-x_0\:xl {
    grid-column-gap: 0;
  }
  .gap-x_1\:xl {
    grid-column-gap: 1px;
  }
  .gap-x_2\:xl {
    grid-column-gap: 0.25rem;
  }
  .gap-x_3\:xl {
    grid-column-gap: 0.5rem;
  }
  .gap-x_4\:xl {
    grid-column-gap: 1rem;
  }
  .gap-x_5\:xl {
    grid-column-gap: 2rem;
  }
  .gap-x_6\:xl {
    grid-column-gap: 4rem;
  }
  .gap-y_0\:xl {
    grid-row-gap: 0;
  }
  .gap-y_1\:xl {
    grid-row-gap: 1px;
  }
  .gap-y_2\:xl {
    grid-row-gap: 0.25rem;
  }
  .gap-y_3\:xl {
    grid-row-gap: 0.5rem;
  }
  .gap-y_4\:xl {
    grid-row-gap: 1rem;
  }
  .gap-y_5\:xl {
    grid-row-gap: 2rem;
  }
  .gap-y_6\:xl {
    grid-row-gap: 4rem;
  }
  .col-start_start\:xl {
    grid-column-start: start;
  }
  .col-start_1\:xl {
    grid-column-start: 1;
  }
  .col-start_2\:xl {
    grid-column-start: 2;
  }
  .col-start_3\:xl {
    grid-column-start: 3;
  }
  .col-start_4\:xl {
    grid-column-start: 4;
  }
  .col-start_5\:xl {
    grid-column-start: 5;
  }
  .col-start_6\:xl {
    grid-column-start: 6;
  }
  .col-start_7\:xl {
    grid-column-start: 7;
  }
  .col-start_n1\:xl {
    grid-column-start: -1;
  }
  .col-start_n2\:xl {
    grid-column-start: -2;
  }
  .col-start_n3\:xl {
    grid-column-start: -3;
  }
  .col-start_n4\:xl {
    grid-column-start: -4;
  }
  .col-start_n5\:xl {
    grid-column-start: -5;
  }
  .col-start_n6\:xl {
    grid-column-start: -6;
  }
  .col-start_n7\:xl {
    grid-column-start: -7;
  }
  .col-start_end\:xl {
    grid-column-start: end;
  }
  .col-end_start\:xl {
    grid-column-end: start;
  }
  .col-end_1\:xl {
    grid-column-end: 1;
  }
  .col-end_2\:xl {
    grid-column-end: 2;
  }
  .col-end_3\:xl {
    grid-column-end: 3;
  }
  .col-end_4\:xl {
    grid-column-end: 4;
  }
  .col-end_5\:xl {
    grid-column-end: 5;
  }
  .col-end_6\:xl {
    grid-column-end: 6;
  }
  .col-end_7\:xl {
    grid-column-end: 7;
  }
  .col-end_n1\:xl {
    grid-column-end: -1;
  }
  .col-end_n2\:xl {
    grid-column-end: -2;
  }
  .col-end_n3\:xl {
    grid-column-end: -3;
  }
  .col-end_n4\:xl {
    grid-column-end: -4;
  }
  .col-end_n5\:xl {
    grid-column-end: -5;
  }
  .col-end_n6\:xl {
    grid-column-end: -6;
  }
  .col-end_n7\:xl {
    grid-column-end: -7;
  }
  .col-end_end\:xl {
    grid-column-end: end;
  }
  .row-start_start\:xl {
    grid-row-start: start;
  }
  .row-start_1\:xl {
    grid-row-start: 1;
  }
  .row-start_2\:xl {
    grid-row-start: 2;
  }
  .row-start_3\:xl {
    grid-row-start: 3;
  }
  .row-start_4\:xl {
    grid-row-start: 4;
  }
  .row-start_5\:xl {
    grid-row-start: 5;
  }
  .row-start_6\:xl {
    grid-row-start: 6;
  }
  .row-start_7\:xl {
    grid-row-start: 7;
  }
  .row-start_n1\:xl {
    grid-row-start: -1;
  }
  .row-start_n2\:xl {
    grid-row-start: -2;
  }
  .row-start_n3\:xl {
    grid-row-start: -3;
  }
  .row-start_n4\:xl {
    grid-row-start: -4;
  }
  .row-start_n5\:xl {
    grid-row-start: -5;
  }
  .row-start_n6\:xl {
    grid-row-start: -6;
  }
  .row-start_n7\:xl {
    grid-row-start: -7;
  }
  .row-start_end\:xl {
    grid-row-start: end;
  }
  .row-end_start\:xl {
    grid-row-end: start;
  }
  .row-end_1\:xl {
    grid-row-end: 1;
  }
  .row-end_2\:xl {
    grid-row-end: 2;
  }
  .row-end_3\:xl {
    grid-row-end: 3;
  }
  .row-end_4\:xl {
    grid-row-end: 4;
  }
  .row-end_5\:xl {
    grid-row-end: 5;
  }
  .row-end_6\:xl {
    grid-row-end: 6;
  }
  .row-end_7\:xl {
    grid-row-end: 7;
  }
  .row-end_n1\:xl {
    grid-row-end: -1;
  }
  .row-end_n2\:xl {
    grid-row-end: -2;
  }
  .row-end_n3\:xl {
    grid-row-end: -3;
  }
  .row-end_n4\:xl {
    grid-row-end: -4;
  }
  .row-end_n5\:xl {
    grid-row-end: -5;
  }
  .row-end_n6\:xl {
    grid-row-end: -6;
  }
  .row-end_n7\:xl {
    grid-row-end: -7;
  }
  .row-end_end\:xl {
    grid-row-end: end;
  }
  .font_0\:xl {
    font-size: 1rem  !important;
  }
  .font_1\:xl {
    font-size: 1.125rem  !important;
  }
  .font_2\:xl {
    font-size: 1.265625rem  !important;
  }
  .font_3\:xl {
    font-size: 1.423828125rem  !important;
  }
  .font_4\:xl {
    font-size: 1.6018066406rem  !important;
  }
  .font_5\:xl {
    font-size: 1.8020324707rem  !important;
  }
  .font_6\:xl {
    font-size: 2.0272865295rem  !important;
  }
  .font_7\:xl {
    font-size: 2.2806973457rem  !important;
  }
  .font_8\:xl {
    font-size: 2.565784514rem  !important;
  }
  .font_9\:xl {
    font-size: 2.8865075782rem  !important;
  }
  .font_10\:xl {
    font-size: 3.2473210255rem  !important;
  }
  .font_n1\:xl {
    font-size: 0.8888888889rem  !important;
  }
  .font_n2\:xl {
    font-size: 0.7901234568rem  !important;
  }
  .font_n3\:xl {
    font-size: 0.7023319616rem  !important;
  }
  .font_n4\:xl {
    font-size: 0.624295077rem  !important;
  }
  .font_n5\:xl {
    font-size: 0.5549289573rem  !important;
  }
  .text_unset\:xl {
    text-align: unset  !important;
  }
  .text_center\:xl {
    text-align: center  !important;
  }
  .text_left\:xl {
    text-align: left  !important;
  }
  .text_right\:xl {
    text-align: right  !important;
  }
  .text_start\:xl {
    text-align: start  !important;
  }
  .text_end\:xl {
    text-align: end  !important;
  }
  .m_0\:xl {
    margin: 0  !important;
  }
  .m_n6\:xl {
    margin: -4rem  !important;
  }
  .m_n5\:xl {
    margin: -2rem  !important;
  }
  .m_n4\:xl {
    margin: -1rem  !important;
  }
  .m_n3\:xl {
    margin: -0.5rem  !important;
  }
  .m_n2\:xl {
    margin: -0.25rem  !important;
  }
  .m_n1\:xl {
    margin: -1px  !important;
  }
  .m_1\:xl {
    margin: 1px  !important;
  }
  .m_2\:xl {
    margin: 0.25rem  !important;
  }
  .m_3\:xl {
    margin: 0.5rem  !important;
  }
  .m_4\:xl {
    margin: 1rem  !important;
  }
  .m_5\:xl {
    margin: 2rem  !important;
  }
  .m_6\:xl {
    margin: 4rem  !important;
  }
  .m_auto\:xl {
    margin: auto  !important;
  }
  .m_unset\:xl {
    margin: unset  !important;
  }
  .m-y_0\:xl {
    margin-top: 0  !important;
    margin-bottom: 0  !important;
  }
  .m-y_n6\:xl {
    margin-top: -4rem  !important;
    margin-bottom: -4rem  !important;
  }
  .m-y_n5\:xl {
    margin-top: -2rem  !important;
    margin-bottom: -2rem  !important;
  }
  .m-y_n4\:xl {
    margin-top: -1rem  !important;
    margin-bottom: -1rem  !important;
  }
  .m-y_n3\:xl {
    margin-top: -0.5rem  !important;
    margin-bottom: -0.5rem  !important;
  }
  .m-y_n2\:xl {
    margin-top: -0.25rem  !important;
    margin-bottom: -0.25rem  !important;
  }
  .m-y_n1\:xl {
    margin-top: -1px  !important;
    margin-bottom: -1px  !important;
  }
  .m-y_1\:xl {
    margin-top: 1px  !important;
    margin-bottom: 1px  !important;
  }
  .m-y_2\:xl {
    margin-top: 0.25rem  !important;
    margin-bottom: 0.25rem  !important;
  }
  .m-y_3\:xl {
    margin-top: 0.5rem  !important;
    margin-bottom: 0.5rem  !important;
  }
  .m-y_4\:xl {
    margin-top: 1rem  !important;
    margin-bottom: 1rem  !important;
  }
  .m-y_5\:xl {
    margin-top: 2rem  !important;
    margin-bottom: 2rem  !important;
  }
  .m-y_6\:xl {
    margin-top: 4rem  !important;
    margin-bottom: 4rem  !important;
  }
  .m-y_auto\:xl {
    margin-top: auto  !important;
    margin-bottom: auto  !important;
  }
  .m-y_unset\:xl {
    margin-top: unset  !important;
    margin-bottom: unset  !important;
  }
  .m-x_0\:xl {
    margin-right: 0  !important;
    margin-left: 0  !important;
  }
  .m-x_n6\:xl {
    margin-right: -4rem  !important;
    margin-left: -4rem  !important;
  }
  .m-x_n5\:xl {
    margin-right: -2rem  !important;
    margin-left: -2rem  !important;
  }
  .m-x_n4\:xl {
    margin-right: -1rem  !important;
    margin-left: -1rem  !important;
  }
  .m-x_n3\:xl {
    margin-right: -0.5rem  !important;
    margin-left: -0.5rem  !important;
  }
  .m-x_n2\:xl {
    margin-right: -0.25rem  !important;
    margin-left: -0.25rem  !important;
  }
  .m-x_n1\:xl {
    margin-right: -1px  !important;
    margin-left: -1px  !important;
  }
  .m-x_1\:xl {
    margin-right: 1px  !important;
    margin-left: 1px  !important;
  }
  .m-x_2\:xl {
    margin-right: 0.25rem  !important;
    margin-left: 0.25rem  !important;
  }
  .m-x_3\:xl {
    margin-right: 0.5rem  !important;
    margin-left: 0.5rem  !important;
  }
  .m-x_4\:xl {
    margin-right: 1rem  !important;
    margin-left: 1rem  !important;
  }
  .m-x_5\:xl {
    margin-right: 2rem  !important;
    margin-left: 2rem  !important;
  }
  .m-x_6\:xl {
    margin-right: 4rem  !important;
    margin-left: 4rem  !important;
  }
  .m-x_auto\:xl {
    margin-right: auto  !important;
    margin-left: auto  !important;
  }
  .m-x_unset\:xl {
    margin-right: unset  !important;
    margin-left: unset  !important;
  }
  .m-t_0\:xl {
    margin-top: 0  !important;
  }
  .m-t_n6\:xl {
    margin-top: -4rem  !important;
  }
  .m-t_n5\:xl {
    margin-top: -2rem  !important;
  }
  .m-t_n4\:xl {
    margin-top: -1rem  !important;
  }
  .m-t_n3\:xl {
    margin-top: -0.5rem  !important;
  }
  .m-t_n2\:xl {
    margin-top: -0.25rem  !important;
  }
  .m-t_n1\:xl {
    margin-top: -1px  !important;
  }
  .m-t_1\:xl {
    margin-top: 1px  !important;
  }
  .m-t_2\:xl {
    margin-top: 0.25rem  !important;
  }
  .m-t_3\:xl {
    margin-top: 0.5rem  !important;
  }
  .m-t_4\:xl {
    margin-top: 1rem  !important;
  }
  .m-t_5\:xl {
    margin-top: 2rem  !important;
  }
  .m-t_6\:xl {
    margin-top: 4rem  !important;
  }
  .m-t_auto\:xl {
    margin-top: auto  !important;
  }
  .m-t_unset\:xl {
    margin-top: unset  !important;
  }
  .m-b_0\:xl {
    margin-bottom: 0  !important;
  }
  .m-b_n6\:xl {
    margin-bottom: -4rem  !important;
  }
  .m-b_n5\:xl {
    margin-bottom: -2rem  !important;
  }
  .m-b_n4\:xl {
    margin-bottom: -1rem  !important;
  }
  .m-b_n3\:xl {
    margin-bottom: -0.5rem  !important;
  }
  .m-b_n2\:xl {
    margin-bottom: -0.25rem  !important;
  }
  .m-b_n1\:xl {
    margin-bottom: -1px  !important;
  }
  .m-b_1\:xl {
    margin-bottom: 1px  !important;
  }
  .m-b_2\:xl {
    margin-bottom: 0.25rem  !important;
  }
  .m-b_3\:xl {
    margin-bottom: 0.5rem  !important;
  }
  .m-b_4\:xl {
    margin-bottom: 1rem  !important;
  }
  .m-b_5\:xl {
    margin-bottom: 2rem  !important;
  }
  .m-b_6\:xl {
    margin-bottom: 4rem  !important;
  }
  .m-b_auto\:xl {
    margin-bottom: auto  !important;
  }
  .m-b_unset\:xl {
    margin-bottom: unset  !important;
  }
  .m-l_0\:xl {
    margin-left: 0  !important;
  }
  .m-l_n6\:xl {
    margin-left: -4rem  !important;
  }
  .m-l_n5\:xl {
    margin-left: -2rem  !important;
  }
  .m-l_n4\:xl {
    margin-left: -1rem  !important;
  }
  .m-l_n3\:xl {
    margin-left: -0.5rem  !important;
  }
  .m-l_n2\:xl {
    margin-left: -0.25rem  !important;
  }
  .m-l_n1\:xl {
    margin-left: -1px  !important;
  }
  .m-l_1\:xl {
    margin-left: 1px  !important;
  }
  .m-l_2\:xl {
    margin-left: 0.25rem  !important;
  }
  .m-l_3\:xl {
    margin-left: 0.5rem  !important;
  }
  .m-l_4\:xl {
    margin-left: 1rem  !important;
  }
  .m-l_5\:xl {
    margin-left: 2rem  !important;
  }
  .m-l_6\:xl {
    margin-left: 4rem  !important;
  }
  .m-l_auto\:xl {
    margin-left: auto  !important;
  }
  .m-l_unset\:xl {
    margin-left: unset  !important;
  }
  .m-r_0\:xl {
    margin-right: 0  !important;
  }
  .m-r_n6\:xl {
    margin-right: -4rem  !important;
  }
  .m-r_n5\:xl {
    margin-right: -2rem  !important;
  }
  .m-r_n4\:xl {
    margin-right: -1rem  !important;
  }
  .m-r_n3\:xl {
    margin-right: -0.5rem  !important;
  }
  .m-r_n2\:xl {
    margin-right: -0.25rem  !important;
  }
  .m-r_n1\:xl {
    margin-right: -1px  !important;
  }
  .m-r_1\:xl {
    margin-right: 1px  !important;
  }
  .m-r_2\:xl {
    margin-right: 0.25rem  !important;
  }
  .m-r_3\:xl {
    margin-right: 0.5rem  !important;
  }
  .m-r_4\:xl {
    margin-right: 1rem  !important;
  }
  .m-r_5\:xl {
    margin-right: 2rem  !important;
  }
  .m-r_6\:xl {
    margin-right: 4rem  !important;
  }
  .m-r_auto\:xl {
    margin-right: auto  !important;
  }
  .m-r_unset\:xl {
    margin-right: unset  !important;
  }
  .p_0\:xl {
    padding: 0  !important;
  }
  .p_1\:xl {
    padding: 1px  !important;
  }
  .p_2\:xl {
    padding: 0.25rem  !important;
  }
  .p_3\:xl {
    padding: 0.5rem  !important;
  }
  .p_4\:xl {
    padding: 1rem  !important;
  }
  .p_5\:xl {
    padding: 2rem  !important;
  }
  .p_6\:xl {
    padding: 4rem  !important;
  }
  .p-y_0\:xl {
    padding-top: 0  !important;
    padding-bottom: 0  !important;
  }
  .p-y_1\:xl {
    padding-top: 1px  !important;
    padding-bottom: 1px  !important;
  }
  .p-y_2\:xl {
    padding-top: 0.25rem  !important;
    padding-bottom: 0.25rem  !important;
  }
  .p-y_3\:xl {
    padding-top: 0.5rem  !important;
    padding-bottom: 0.5rem  !important;
  }
  .p-y_4\:xl {
    padding-top: 1rem  !important;
    padding-bottom: 1rem  !important;
  }
  .p-y_5\:xl {
    padding-top: 2rem  !important;
    padding-bottom: 2rem  !important;
  }
  .p-y_6\:xl {
    padding-top: 4rem  !important;
    padding-bottom: 4rem  !important;
  }
  .p-x_0\:xl {
    padding-right: 0  !important;
    padding-left: 0  !important;
  }
  .p-x_1\:xl {
    padding-right: 1px  !important;
    padding-left: 1px  !important;
  }
  .p-x_2\:xl {
    padding-right: 0.25rem  !important;
    padding-left: 0.25rem  !important;
  }
  .p-x_3\:xl {
    padding-right: 0.5rem  !important;
    padding-left: 0.5rem  !important;
  }
  .p-x_4\:xl {
    padding-right: 1rem  !important;
    padding-left: 1rem  !important;
  }
  .p-x_5\:xl {
    padding-right: 2rem  !important;
    padding-left: 2rem  !important;
  }
  .p-x_6\:xl {
    padding-right: 4rem  !important;
    padding-left: 4rem  !important;
  }
  .p-t_0\:xl {
    padding-top: 0  !important;
  }
  .p-t_1\:xl {
    padding-top: 1px  !important;
  }
  .p-t_2\:xl {
    padding-top: 0.25rem  !important;
  }
  .p-t_3\:xl {
    padding-top: 0.5rem  !important;
  }
  .p-t_4\:xl {
    padding-top: 1rem  !important;
  }
  .p-t_5\:xl {
    padding-top: 2rem  !important;
  }
  .p-t_6\:xl {
    padding-top: 4rem  !important;
  }
  .p-b_0\:xl {
    padding-bottom: 0  !important;
  }
  .p-b_1\:xl {
    padding-bottom: 1px  !important;
  }
  .p-b_2\:xl {
    padding-bottom: 0.25rem  !important;
  }
  .p-b_3\:xl {
    padding-bottom: 0.5rem  !important;
  }
  .p-b_4\:xl {
    padding-bottom: 1rem  !important;
  }
  .p-b_5\:xl {
    padding-bottom: 2rem  !important;
  }
  .p-b_6\:xl {
    padding-bottom: 4rem  !important;
  }
  .p-l_0\:xl {
    padding-left: 0  !important;
  }
  .p-l_1\:xl {
    padding-left: 1px  !important;
  }
  .p-l_2\:xl {
    padding-left: 0.25rem  !important;
  }
  .p-l_3\:xl {
    padding-left: 0.5rem  !important;
  }
  .p-l_4\:xl {
    padding-left: 1rem  !important;
  }
  .p-l_5\:xl {
    padding-left: 2rem  !important;
  }
  .p-l_6\:xl {
    padding-left: 4rem  !important;
  }
  .p-r_0\:xl {
    padding-right: 0  !important;
  }
  .p-r_1\:xl {
    padding-right: 1px  !important;
  }
  .p-r_2\:xl {
    padding-right: 0.25rem  !important;
  }
  .p-r_3\:xl {
    padding-right: 0.5rem  !important;
  }
  .p-r_4\:xl {
    padding-right: 1rem  !important;
  }
  .p-r_5\:xl {
    padding-right: 2rem  !important;
  }
  .p-r_6\:xl {
    padding-right: 4rem  !important;
  }
  .columns_1\:xl {
    grid-template-columns: [start] var(--col-1, 1fr) [end]  !important;
  }
  .columns_2\:xl {
    grid-template-columns: [start] var(--col-1, 1fr) var(--col-2, 1fr) [end]  !important;
  }
  .columns_3\:xl {
    grid-template-columns: [start] var(--col-1, 1fr) var(--col-2, 1fr) var(--col-3, 1fr) [end]  !important;
  }
  .columns_4\:xl {
    grid-template-columns: [start] var(--col-1, 1fr) var(--col-2, 1fr) var(--col-3, 1fr) var(--col-4, 1fr) [end]  !important;
  }
  .columns_5\:xl {
    grid-template-columns: [start] var(--col-1, 1fr) var(--col-2, 1fr) var(--col-3, 1fr) var(--col-4, 1fr) var(--col-5, 1fr) [end]  !important;
  }
  .columns_6\:xl {
    grid-template-columns: [start] var(--col-1, 1fr) var(--col-2, 1fr) var(--col-3, 1fr) var(--col-4, 1fr) var(--col-5, 1fr) var(--col-6, 1fr) [end]  !important;
  }
  .rows_1\:xl {
    grid-template-rows: [start] var(--row-1, 1fr) [end]  !important;
  }
  .rows_2\:xl {
    grid-template-rows: [start] var(--row-1, 1fr) var(--row-2, 1fr) [end]  !important;
  }
  .rows_3\:xl {
    grid-template-rows: [start] var(--row-1, 1fr) var(--row-2, 1fr) var(--row-3, 1fr) [end]  !important;
  }
  .rows_4\:xl {
    grid-template-rows: [start] var(--row-1, 1fr) var(--row-2, 1fr) var(--row-3, 1fr) var(--row-4, 1fr) [end]  !important;
  }
  .rows_5\:xl {
    grid-template-rows: [start] var(--row-1, 1fr) var(--row-2, 1fr) var(--row-3, 1fr) var(--row-4, 1fr) var(--row-5, 1fr) [end]  !important;
  }
  .rows_6\:xl {
    grid-template-rows: [start] var(--row-1, 1fr) var(--row-2, 1fr) var(--row-3, 1fr) var(--row-4, 1fr) var(--row-5, 1fr) var(--row-6, 1fr) [end]  !important;
  }
  .max-w_0\:xl {
    max-width: 0  !important;
  }
  .max-w_5\:xl {
    max-width: 5rem  !important;
  }
  .max-w_10\:xl {
    max-width: 10rem  !important;
  }
  .max-w_15\:xl {
    max-width: 15rem  !important;
  }
  .max-w_20\:xl {
    max-width: 20rem  !important;
  }
  .max-w_25\:xl {
    max-width: 25rem  !important;
  }
  .max-w_30\:xl {
    max-width: 30rem  !important;
  }
  .max-w_35\:xl {
    max-width: 35rem  !important;
  }
  .max-w_40\:xl {
    max-width: 40rem  !important;
  }
  .max-w_45\:xl {
    max-width: 45rem  !important;
  }
  .max-w_50\:xl {
    max-width: 50rem  !important;
  }
  .max-w_55\:xl {
    max-width: 55rem  !important;
  }
  .max-w_60\:xl {
    max-width: 60rem  !important;
  }
  .max-w_65\:xl {
    max-width: 65rem  !important;
  }
  .max-w_70\:xl {
    max-width: 70rem  !important;
  }
  .max-w_75\:xl {
    max-width: 75rem  !important;
  }
  .max-w_80\:xl {
    max-width: 80rem  !important;
  }
  .max-w_85\:xl {
    max-width: 85rem  !important;
  }
  .max-w_90\:xl {
    max-width: 90rem  !important;
  }
  .max-w_95\:xl {
    max-width: 95rem  !important;
  }
  .max-w_unset\:xl {
    max-width: unset  !important;
  }
  .inset_100\:xl {
    inset: 100%;
  }
  .inset_auto\:xl {
    inset: auto;
  }
  .inset_unset\:xl {
    inset: unset;
  }
  .inset_0\:xl {
    inset: 0;
  }
  .inset_n6\:xl {
    inset: -4rem;
  }
  .inset_n5\:xl {
    inset: -2rem;
  }
  .inset_n4\:xl {
    inset: -1rem;
  }
  .inset_n3\:xl {
    inset: -0.5rem;
  }
  .inset_n2\:xl {
    inset: -0.25rem;
  }
  .inset_n1\:xl {
    inset: -1px;
  }
  .inset_1\:xl {
    inset: 1px;
  }
  .inset_2\:xl {
    inset: 0.25rem;
  }
  .inset_3\:xl {
    inset: 0.5rem;
  }
  .inset_4\:xl {
    inset: 1rem;
  }
  .inset_5\:xl,.inset_6\:xl {
    inset: 2rem;
  }
  .t_100\:xl {
    top: 100%;
  }
  .t_auto\:xl {
    top: auto;
  }
  .t_unset\:xl {
    top: unset;
  }
  .t_0\:xl {
    top: 0;
  }
  .t_n6\:xl {
    top: -4rem;
  }
  .t_n5\:xl {
    top: -2rem;
  }
  .t_n4\:xl {
    top: -1rem;
  }
  .t_n3\:xl {
    top: -0.5rem;
  }
  .t_n2\:xl {
    top: -0.25rem;
  }
  .t_n1\:xl {
    top: -1px;
  }
  .t_1\:xl {
    top: 1px;
  }
  .t_2\:xl {
    top: 0.25rem;
  }
  .t_3\:xl {
    top: 0.5rem;
  }
  .t_4\:xl {
    top: 1rem;
  }
  .t_5\:xl,.t_6\:xl {
    top: 2rem;
  }
  .b_100\:xl {
    bottom: 100%;
  }
  .b_auto\:xl {
    bottom: auto;
  }
  .b_unset\:xl {
    bottom: unset;
  }
  .b_0\:xl {
    bottom: 0;
  }
  .b_n6\:xl {
    bottom: -4rem;
  }
  .b_n5\:xl {
    bottom: -2rem;
  }
  .b_n4\:xl {
    bottom: -1rem;
  }
  .b_n3\:xl {
    bottom: -0.5rem;
  }
  .b_n2\:xl {
    bottom: -0.25rem;
  }
  .b_n1\:xl {
    bottom: -1px;
  }
  .b_1\:xl {
    bottom: 1px;
  }
  .b_2\:xl {
    bottom: 0.25rem;
  }
  .b_3\:xl {
    bottom: 0.5rem;
  }
  .b_4\:xl {
    bottom: 1rem;
  }
  .b_5\:xl,.b_6\:xl {
    bottom: 2rem;
  }
  .l_100\:xl {
    left: 100%;
  }
  .l_auto\:xl {
    left: auto;
  }
  .l_unset\:xl {
    left: unset;
  }
  .l_0\:xl {
    left: 0;
  }
  .l_n6\:xl {
    left: -4rem;
  }
  .l_n5\:xl {
    left: -2rem;
  }
  .l_n4\:xl {
    left: -1rem;
  }
  .l_n3\:xl {
    left: -0.5rem;
  }
  .l_n2\:xl {
    left: -0.25rem;
  }
  .l_n1\:xl {
    left: -1px;
  }
  .l_1\:xl {
    left: 1px;
  }
  .l_2\:xl {
    left: 0.25rem;
  }
  .l_3\:xl {
    left: 0.5rem;
  }
  .l_4\:xl {
    left: 1rem;
  }
  .l_5\:xl,.l_6\:xl {
    left: 2rem;
  }
  .r_100\:xl {
    right: 100%;
  }
  .r_auto\:xl {
    right: auto;
  }
  .r_unset\:xl {
    right: unset;
  }
  .r_0\:xl {
    right: 0;
  }
  .r_n6\:xl {
    right: -4rem;
  }
  .r_n5\:xl {
    right: -2rem;
  }
  .r_n4\:xl {
    right: -1rem;
  }
  .r_n3\:xl {
    right: -0.5rem;
  }
  .r_n2\:xl {
    right: -0.25rem;
  }
  .r_n1\:xl {
    right: -1px;
  }
  .r_1\:xl {
    right: 1px;
  }
  .r_2\:xl {
    right: 0.25rem;
  }
  .r_3\:xl {
    right: 0.5rem;
  }
  .r_4\:xl {
    right: 1rem;
  }
  .r_5\:xl,.r_6\:xl {
    right: 2rem;
  }
}
/*
Extras

Extras include user modification and other classes that modify the user interactions and experiences 

Weight: 1000

Styleguide Interaction.User
*/
.btn.disabled, button.btn.disabled, input[type=button].btn.disabled, input[type=reset].btn.disabled, input[type=submit].btn.disabled, .btn_acc-primary.disabled {
  box-shadow: none !important;
  cursor: not-allowed !important;
}

/** SCSS DOC: __globalshame_uc.scss **/
/*# sourceMappingURL=maps/library_uc.css.map */