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

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

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

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

Gets utilty style and prints it.

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

 Styleguide: mixins.utlity-style
*/
/**Set Active Class**/
/** No Framework **/
/** Built With Base Branding 1.2.0 **/
/**  ACC Brands    *********************************/
/** Built With acc Branding **/
/**  Default Brands    *********************************/
/**  Colors  **/
/**  Fonts  **/
/* Define the "system" font family */
@font-face {
  src: local(".SFNSText-Light"), local(".HelveticaNeueDeskInterface-Light"), local(".LucidaGrandeUI"), local("Ubuntu Light"), local("Segoe UI Light"), local("Roboto-Light"), local("DroidSans"), local("Tahoma");
  font-family: system;
  font-style: normal;
  font-weight: 300;
}
html {
  -webkit-font-smoothing: antialiased;
  -webkit-line-break: after-white-space;
  -webkit-locale: "en";
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  line-break: white-space;
}

/**  Textures  **/
.texture-dynamic, .texture_cross, .disabled,
.disabled:hover, .texture_disabled, .texture_dust, .texture_dark, .texture_medium, .texture_light {
  background-attachment: local;
  background-origin: border-box;
  background-position: top right;
  background-repeat: repeat;
}

/**  Logos  **/
/** Base UC File **/
/**  Utility Classes    *********************************/
/*
Utility Classes

Utility Classes (UCs) are classes that control single styles allowing for quick manipulations of the appearance of the DOM.  When combined with other UCs and toggled with javascripts you can create complex and new UI without the need of writing styles into the system. Examples of some UC built UIs can be found here as recipes. Learn more about UCs in the Introduction section

Weight: 100

Styleguide UC
*/
/* No styleguide reference. */
/*
Anatomy

<h2>Anatomy of a Utility Class Name</h2>
The breakdown of the names for UCs follow a structured patter for easy muscle memory learning. 

  Markup:
  <p class="font_2">All of the Class Names follow this ordered pattern of construction.</p>
  <ol class="font_1 font_bold m_4 br_solid br_1 br_shade-4 lh_4" style="list-style-position: inside;">
        <li class="p_2 bg_success-3">State - Hover <em>(Optional)</em></li>
        <li class="p_2 bg_primary-3">Class Name</li>
        <li class="p_2 bg_alert-3">Class Name Modifier <em>(Optional)</em></li>
        <li class="p_2 bg_highlight-3">Value</li>
        <li class="p_2 bg_alert-3">Value Modifier <em>(Optional)</em></li>
        <li class="p_2 bg_accent-3">Breakpoint <em>(Optional)</em></li>
        <li class="p_2 bg_warning-3">*Dividers can be : _ or - depending on usage</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_warning-3 p_3">:</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_warning-3 p_3">-</div>
            <div class="flex_auto bg_alert-3 p_3">n2</div>
      </div>
      <div class="font_bold font_1">Utiltiy Class</div>
      <div class="flex m-t_3">
        <div class="flex_auto bg_success-3 p_3">h</div>
        <div class="flex_auto bg_warning-3 p_3">:</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_warning-3 p_3">-</div>
        <div class="flex_auto bg_alert-3 p_3">n2</div>
      </div>
      <ol class="font_0 font_bold c_black m_4 br_solid br_1 br_shade-4 lh_4" style="list-style-position: inside;">
          <li class="bg_success-3 p_3">'h' => Interaction State </li>
          <li class="bg_warning-3 p_3">`:`=> Interaction State Divider when use state interaction</li>
          <li class="bg_primary-3 p_3">'bg' => Class Name</li>
          <li class="bg_warning-3 p_3">`_` => Value Divider think of this as an equal mark</li>
          <li class="bg_highlight-3 p_3">`primary` => Value</li>
          <li class="bg_warning-3 p_3">`-` => Modifier Divider think of this as shift from the value</li>
          <li class="bg_alert-3 p_3">`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_warning-3 p_3">`:`=> Breakpoint Divider when rule should apply</li>
          <li class="bg_accent-3 p_3">`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_warning-3 p_3">-</div>
        <div class="flex_auto bg_alert-3 p_3">top</div>
        <div class="flex_auto bg_warning-3 p_3">_</div>
        <div class="flex_auto bg_highlight-3 p_3">1 rem = value 4</div>
        <div class="flex_auto bg_warning-3 p_3">:</div>
        <div class="flex_auto bg_accent-3 p_3">medium breakpoint</div>
      </div>
       <div class="font_bold font_1">Utiltiy 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_warning-3 p_3">-</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_warning-3 p_3">:</div
            ><div class="flex_auto bg_accent-3 p_3">md</div>
        </div>
  </div>

 Styleguide UC.Anatomy
*/
/*
Short Hand 

## List of CSS Styles matched to the Utility Class Name

The breakdown of the names for UCs follow a structured patter for easy muscle memory learning. 
| Style                      | Short Name  | CSS                          |
| -------------------------- | ----------- | ---------------------------- |
| margin                     | '.m'        | 'margin'                     |
| margin-top                 | '.m-t'      | 'margin-top'                 |
| margin-bottom              | '.m-b'      | 'margin-bottom'              |
| margin-left                | '.m-l'      | 'margin-left'                |
| margin-right               | '.m-r'      | 'margin-right'               |
| overflow                   | '.overflow' | 'overflow'                   |
| padding                    | '.p'        | 'padding'                    |
| padding-top                | '.p-t'      | 'padding-top'                |
| padding-bottom             | '.p-b'      | 'padding-bottom'             |
| padding-left               | '.p-l'      | 'padding-left'               |
| padding-right              | '.p-r'      | 'padding-right'              |
| line-height                | '.lh'       | 'line-height'                |
| font-size                  | '.font'     | 'font-size'                  |
| font-family                | '.font'     | 'font-family'                |
| font-weight                | '.font'     | 'font-weight'                |
| font-style                 | '.font'     | 'font-style'                 |
| color                      | '.c'        | 'color'                      |
| background-color           | '.bg'       | 'background-color'           |
| border-color               | '.br'       | 'border-color'               |
| border-radius              | '.br'       | 'border-radius'              |
| border-top-right-radius    | '.br-tr'    | 'border-top-right-radius'    |
| border-top-left-radius     | '.br-tl'    | 'border-top-left-radius'     |
| border-bottom-right-radius | '.br-br'    | 'border-bottom-right-radius' |
| border-bottom-left-radius  | '.br-bl'    | 'border-bottom-left-radius'  |
| border-width               | '.br'       | 'border-width'               |
| border-top-width           | '.br-t'     | 'border-top-width'           |
| border-right-width         | '.br-r'     | 'border-right-width'         |
| border-left-width          | '.br-l'     | 'border-left-width'          |
| border-bottom-width        | '.br-b'     | 'border-bottom-width'        |
| width                      | '.w'        | 'width'                      |
| display                    | '.d'        | 'display'                    |
| max-width                  | '.max-w'    | 'max-width'                  |

 Styleguide UC.Shorthand
*/
.reading-typography h1,
.reading-typography h2,
.reading-typography h3,
.reading-typography h4,
.reading-typography h5,
.reading-typography h6 {
  color: #157894;
}
.reading-typography h1:not(:first-child),
.reading-typography h2:not(:first-child),
.reading-typography h3:not(:first-child),
.reading-typography h4:not(:first-child),
.reading-typography h5:not(:first-child),
.reading-typography h6:not(:first-child) {
  margin: 24px 0 12px;
  margin: 1.5rem 0 0.75rem;
}
.reading-typography h3, .reading-typography h2, .reading-typography h1 {
  line-height: 1.125;
}
.reading-typography li, .reading-typography h6, .reading-typography h5, .reading-typography h4 {
  line-height: 1.35;
}
.reading-typography p {
  line-height: 1.6;
}
.reading-typography h1 {
  font-size: 28.832px;
  font-size: 1.8020324707rem;
}
.reading-typography h2 {
  font-size: 25.628px;
  font-size: 1.6018066406rem;
}
.reading-typography h3 {
  font-size: 22.781px;
  font-size: 1.423828125rem;
}
.reading-typography h4 {
  font-size: 20.25px;
  font-size: 1.265625rem;
}
.reading-typography h5 {
  font-weight: 700;
}
.reading-typography h5,.reading-typography h6 {
  font-size: 18px;
  font-size: 1.125rem;
}
.reading-typography li {
  margin-top: 4px;
  margin-top: 0.25rem;
  margin-bottom: 8px;
  margin-bottom: 0.5rem;
  padding-left: 4px;
  padding-left: 0.25rem;
}
.reading-typography ul,
.reading-typography ol {
  padding-left: 32px;
  padding-left: 2rem;
  list-style-position: outside;
}
.reading-typography ul {
  list-style-type: disc;
}
.reading-typography ul ul {
  list-style-type: circle;
}
.reading-typography ol {
  list-style-type: decimal;
}
.reading-typography ol ol {
  list-style-type: lower-alpha;
}
.reading-typography li > ul,
.reading-typography li > ol {
  margin-left: 16px;
  margin-left: 1rem;
  padding-left: 16px;
  padding-left: 1rem;
}
.reading-typography li + li {
  margin-top: 8px;
  margin-top: 0.5rem;
}
.reading-typography li:last-child {
  margin-bottom: 8px;
  margin-bottom: 0.5rem;
}
.reading-typography p + p {
  margin-top: 8px;
  margin-top: 0.5rem;
}
.reading-typography accr {
  border-bottom: 1px dotted #16a385;
}
.reading-typography hr {
  margin: 16px 0;
  margin: 1rem 0;
}
.reading-typography img {
  width: 100%;
  margin: 0;
  border: 1px solid #198dae;
}
.reading-typography p,
.reading-typography ul,
.reading-typography ol,
.reading-typography dl,
.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);
}
.reading-typography table {
  width: 100%;
}
.reading-typography thead {
  border-bottom: 1px solid #157894;
}

/*
Typography

Control size, weight, decoration, white-space, and overflow with these utility classes 

Weight: 101

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

/*
  Font Family

  You can change the features of the text with some simple use classes.

  .font_accent            -  Font Accent  Used main Nav and Some headers
  .font_display         -  Font Display: Used in headlines, buttons,       
  .font_copy          -  Font Normal:  Used in content            
  .font_ui          -  Font Normal:  Used components like navs and dense ui elements            
  .font_mono         - Used is quotes or data or code       

  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 UC.Typography.FontFamily
 */
.font_accent {
  font-family: "Roboto Slab","Times New Roman","Lucida Bright",Georgia,serif, "slab";
}

.font_display {
  font-family: "Maven Pro","Muli","Open Sans","system",sans-serif;
}

.font_copy,.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;
}

/*
  Font Style

  You can change the features of the text with some simple use classes.

  .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 UC.Typography.Style
 */
.font_normal {
  font-style: normal !important;
}

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

/*
Font Color

You can change the color of the text with some simple use classes.

.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 UC.Typography.Color
 */

.c_primary,.c_primary-0 {
  color: #198dae !important;
}

.c_primary-1 {
  color: #3c9eba !important;
}

.c_primary-2 {
  color: #6eb7cc !important;
}

.c_primary-3 {
  color: #a3d1df !important;
}

.c_primary-4 {
  color: #cce6ed !important;
}

.c_primary-5 {
  color: #e8f4f7 !important;
}

.c_primary-n1 {
  color: #177f9d !important;
}

.c_primary-n2 {
  color: #136a83 !important;
}

.c_primary-n3 {
  color: #0e4e60 !important;
}

.c_primary-n4 {
  color: #0a3846 !important;
}

.c_primary-n5 {
  color: #06232c !important;
}

.c_secondary,.c_secondary-0 {
  color: #676a72 !important;
}

.c_secondary-1 {
  color: #7e8087 !important;
}

.c_secondary-2 {
  color: #9fa1a6 !important;
}

.c_secondary-3 {
  color: #c2c3c7 !important;
}

.c_secondary-4 {
  color: #dedee0 !important;
}

.c_secondary-5 {
  color: #f0f0f1 !important;
}

.c_secondary-n1 {
  color: #5d5f67 !important;
}

.c_secondary-n2 {
  color: #4d5056 !important;
}

.c_secondary-n3 {
  color: #393a3f !important;
}

.c_secondary-n4 {
  color: #292a2e !important;
}

.c_secondary-n5 {
  color: #1a1b1d !important;
}

.c_success,.c_success-0 {
  color: #078a2e !important;
}

.c_success-1 {
  color: #2c9c4d !important;
}

.c_success-2 {
  color: #63b57b !important;
}

.c_success-3 {
  color: #9cd0ab !important;
}

.c_success-4 {
  color: #c8e5d1 !important;
}

.c_success-5 {
  color: #e6f3ea !important;
}

.c_success-n1 {
  color: #067c29 !important;
}

.c_success-n2 {
  color: #056823 !important;
}

.c_success-n3 {
  color: #044c19 !important;
}

.c_success-n4 {
  color: #033712 !important;
}

.c_success-n5 {
  color: #02230c !important;
}

.c_shade,.c_shade-0 {
  color: #898989 !important;
}

.c_shade-1 {
  color: #9b9b9b !important;
}

.c_shade-2 {
  color: #b5b5b5 !important;
}

.c_shade-3 {
  color: #d0d0d0 !important;
}

.c_shade-4 {
  color: #e5e5e5 !important;
}

.c_shade-5 {
  color: #f3f3f3 !important;
}

.c_shade-n1 {
  color: #7b7b7b !important;
}

.c_shade-n2 {
  color: #676767 !important;
}

.c_shade-n3 {
  color: #4b4b4b !important;
}

.c_shade-n4 {
  color: #373737 !important;
}

.c_shade-n5 {
  color: #222222 !important;
}

.c_warning,.c_warning-0 {
  color: #da8210 !important;
}

.c_warning-1 {
  color: #e09534 !important;
}

.c_warning-2 {
  color: #e8b068 !important;
}

.c_warning-3 {
  color: #f0cd9f !important;
}

.c_warning-4 {
  color: #f7e4ca !important;
}

.c_warning-5 {
  color: #fbf3e7 !important;
}

.c_warning-n1 {
  color: #c4750e !important;
}

.c_warning-n2 {
  color: #a4620c !important;
}

.c_warning-n3 {
  color: #784809 !important;
}

.c_warning-n4 {
  color: #573406 !important;
}

.c_warning-n5 {
  color: #372104 !important;
}

.c_alert,.c_alert-0 {
  color: #dd1a1a !important;
}

.c_alert-1 {
  color: #e23c3c !important;
}

.c_alert-2 {
  color: #ea6f6f !important;
}

.c_alert-3 {
  color: #f1a3a3 !important;
}

.c_alert-4 {
  color: #f8cdcd !important;
}

.c_alert-5 {
  color: #fce8e8 !important;
}

.c_alert-n1 {
  color: #c71717 !important;
}

.c_alert-n2 {
  color: #a61414 !important;
}

.c_alert-n3 {
  color: #7a0e0e !important;
}

.c_alert-n4 {
  color: #580a0a !important;
}

.c_alert-n5 {
  color: #370707 !important;
}

.c_navigation,.c_navigation-0 {
  color: #2b58c0 !important;
}

.c_navigation-1 {
  color: #4b71c9 !important;
}

.c_navigation-2 {
  color: #7996d7 !important;
}

.c_navigation-3 {
  color: #aabce6 !important;
}

.c_navigation-4 {
  color: #d0daf1 !important;
}

.c_navigation-5 {
  color: #eaeef9 !important;
}

.c_navigation-n1 {
  color: #274fad !important;
}

.c_navigation-n2 {
  color: #204290 !important;
}

.c_navigation-n3 {
  color: #18306a !important;
}

.c_navigation-n4 {
  color: #11234d !important;
}

.c_navigation-n5 {
  color: #0b1630 !important;
}

.c_accent,.c_accent-0 {
  color: #16a385 !important;
}

.c_accent-1 {
  color: #39b197 !important;
}

.c_accent-2 {
  color: #6cc5b2 !important;
}

.c_accent-3 {
  color: #a2dace !important;
}

.c_accent-4 {
  color: #ccebe4 !important;
}

.c_accent-5 {
  color: #e8f6f3 !important;
}

.c_accent-n1 {
  color: #149378 !important;
}

.c_accent-n2 {
  color: #117a64 !important;
}

.c_accent-n3 {
  color: #0c5a49 !important;
}

.c_accent-n4 {
  color: #094135 !important;
}

.c_accent-n5 {
  color: #062921 !important;
}

.c_info,.c_info-0 {
  color: #a3988c !important;
}

.c_info-1 {
  color: #b1a79d !important;
}

.c_info-2 {
  color: #c5beb7 !important;
}

.c_info-3 {
  color: #dad6d1 !important;
}

.c_info-4 {
  color: #ebe8e6 !important;
}

.c_info-5 {
  color: #f6f5f4 !important;
}

.c_info-n1 {
  color: #93897e !important;
}

.c_info-n2 {
  color: #7a7269 !important;
}

.c_info-n3 {
  color: #5a544d !important;
}

.c_info-n4 {
  color: #413d38 !important;
}

.c_info-n5 {
  color: #292623 !important;
}

.c_highlight,.c_highlight-0 {
  color: #7742bd !important;
}

.c_highlight-1 {
  color: #8b5ec7 !important;
}

.c_highlight-2 {
  color: #a988d5 !important;
}

.c_highlight-3 {
  color: #c9b3e5 !important;
}

.c_highlight-4 {
  color: #e1d5f0 !important;
}

.c_highlight-5 {
  color: #f1ecf8 !important;
}

.c_highlight-n1 {
  color: #6b3baa !important;
}

.c_highlight-n2 {
  color: #59328e !important;
}

.c_highlight-n3 {
  color: #412468 !important;
}

.c_highlight-n4 {
  color: #301a4c !important;
}

.c_highlight-n5 {
  color: #1e112f !important;
}

.c_acc,.c_acc-0 {
  color: #004176 !important;
}

.c_acc-1 {
  color: #265e8b !important;
}

.c_acc-2 {
  color: #5e87a9 !important;
}

.c_acc-3 {
  color: #99b3c8 !important;
}

.c_acc-4 {
  color: #c7d5e1 !important;
}

.c_acc-5 {
  color: #e6ecf1 !important;
}

.c_acc-n1 {
  color: #003b6a !important;
}

.c_acc-n2 {
  color: #003159 !important;
}

.c_acc-n3 {
  color: #002441 !important;
}

.c_acc-n4 {
  color: #001a2f !important;
}

.c_acc-n5 {
  color: #00101e !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>

Weight: -91


Styleguide UC.Typography.Black White
 */
.c_white, .btn_acc-primary {
  color: white !important;
}

.c_black {
  color: #131212 !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 {
  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,.c_inherit-all:hover, .c_inherit-all:active, .c_inherit-all:visited, .c_inherit-all:focus, .c_inherit-all {
  color: inherit;
}

/*
  Font Weight

  You can change the features of the text with some simple use classes.

  .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 UC.Typography.Weight
 */
.font_light {
  font-weight: 100 !important;
}

.font_regular {
  font-weight: 400 !important;
}

.font_medium, .btn_acc-primary {
  font-weight: 500 !important;
}

.font_bold {
  font-weight: 700 !important;
}

.font_xbold {
  font-weight: 900 !important;
}

/*
  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>classs</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 UC.Typography.FontSize
 */
.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 (min-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 (min-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 (min-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);
}

/*
  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 canalter 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 UC.Typography.TextWrap
 */
.wrap {
  white-space: normal;
}

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

.nowrap {
  white-space: nowrap;
}

@media only screen and (min-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 (min-width : 1024px) {
  .wrap\:lg {
    white-space: normal;
  }

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

  .nowrap\:lg {
    white-space: nowrap;
  }
}
.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 (min-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;
  }
}
@media only screen and (min-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;
  }
}
/*
	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 peice of 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 UC.Typography.TextDecoration

 */
.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 UC.Typography.TextShadow

 */
.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 mondifier to like `text-indent_2

Markup:
<div class="font_normal font_1 m-x_5 br_solid br-l_1 br_black-4">
<p class="text-indent_n3">text that has an indent magnitude of n3 </p>
<p class="text-indent_n2">text that has an indent magnitude of n2 </p>
<p class="text-indent_n1">text that has an indent magnitude of n1 </p>
<p class="text-indent_0">text that has an indent magnitude of 0 </p>
<p class="text-indent_1">text that has an indent magnitude of 1 </p>
<p class="text-indent_2">text that has an indent magnitude of 2 </p>
<p class="text-indent_3">text that has an indent magnitude of 3 </p>
</div>

Styleguide UC.Typography.TextIndent

 */
.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 linehieght 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 UC.Typography.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 UC.Typography.TextAlignment
 */
.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 (min-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 (min-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 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>

  Styleguide UC.Typography.list
 */
.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;
}

/*
Spacing

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

Weight: 105

Styleguide UC.Spacing
*/
/* No styleguide reference. */
/*
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 overriden 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 UC.Spacing.Margin

 */
.m_0 {
  margin: 0  !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_auto {
  margin: auto  !important;
}

.m_unset {
  margin: unset  !important;
}

.m-y_0 {
  margin-top: 0  !important;
  margin-bottom: 0  !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_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_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_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_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_auto {
  margin-top: auto  !important;
}

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

.m-b_0 {
  margin-bottom: 0  !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_auto {
  margin-bottom: auto  !important;
}

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

.m-l_0 {
  margin-left: 0  !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_auto {
  margin-left: auto  !important;
}

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

.m-r_0 {
  margin-right: 0  !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_auto {
  margin-right: auto  !important;
}

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

@media only screen and (min-width : 768px) {
  .m_0\:md {
    margin: 0  !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_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_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_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_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_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_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_auto\:md {
    margin-top: auto  !important;
  }

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

  .m-b_0\:md {
    margin-bottom: 0  !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_auto\:md {
    margin-bottom: auto  !important;
  }

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

  .m-l_0\:md {
    margin-left: 0  !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_auto\:md {
    margin-left: auto  !important;
  }

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

  .m-r_0\:md {
    margin-right: 0  !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_auto\:md {
    margin-right: auto  !important;
  }

  .m-r_unset\:md {
    margin-right: unset  !important;
  }
}
@media only screen and (min-width : 1024px) {
  .m_0\:lg {
    margin: 0  !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_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_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_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_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_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_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_auto\:lg {
    margin-top: auto  !important;
  }

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

  .m-b_0\:lg {
    margin-bottom: 0  !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_auto\:lg {
    margin-bottom: auto  !important;
  }

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

  .m-l_0\:lg {
    margin-left: 0  !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_auto\:lg {
    margin-left: auto  !important;
  }

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

  .m-r_0\:lg {
    margin-right: 0  !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_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>classs</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> </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 UC.Spacing.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-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-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-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-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-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-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;
}

@media only screen and (min-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-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-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-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-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-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-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;
  }
}
@media only screen and (min-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-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-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-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-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-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-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;
  }
}
/*
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 UC.Spacing.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 (min-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 (min-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;
  }
}
/*
Position Location

<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 mondifiers. 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 UC.Spacing.Location

 */
.t_100 {
  top: 100%;
}

.t_auto {
  top: auto;
}

.t_unset {
  top: unset;
}

.t_0 {
  top: 0;
}

.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 {
  top: 32px;
  top: 2rem;
}

.b_100 {
  bottom: 100%;
}

.b_auto {
  bottom: auto;
}

.b_unset {
  bottom: unset;
}

.b_0 {
  bottom: 0;
}

.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 {
  bottom: 32px;
  bottom: 2rem;
}

.l_100 {
  left: 100%;
}

.l_auto {
  left: auto;
}

.l_unset {
  left: unset;
}

.l_0 {
  left: 0;
}

.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 {
  left: 32px;
  left: 2rem;
}

.r_100 {
  right: 100%;
}

.r_auto {
  right: auto;
}

.r_unset {
  right: unset;
}

.r_0 {
  right: 0;
}

.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 {
  right: 32px;
  right: 2rem;
}

@media only screen and (min-width : 768px) {
  .t_100\:md {
    top: 100%;
  }

  .t_auto\:md {
    top: auto;
  }

  .t_unset\:md {
    top: unset;
  }

  .t_0\:md {
    top: 0;
  }

  .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 {
    top: 2rem;
  }

  .b_100\:md {
    bottom: 100%;
  }

  .b_auto\:md {
    bottom: auto;
  }

  .b_unset\:md {
    bottom: unset;
  }

  .b_0\:md {
    bottom: 0;
  }

  .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 {
    bottom: 2rem;
  }

  .l_100\:md {
    left: 100%;
  }

  .l_auto\:md {
    left: auto;
  }

  .l_unset\:md {
    left: unset;
  }

  .l_0\:md {
    left: 0;
  }

  .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 {
    left: 2rem;
  }

  .r_100\:md {
    right: 100%;
  }

  .r_auto\:md {
    right: auto;
  }

  .r_unset\:md {
    right: unset;
  }

  .r_0\:md {
    right: 0;
  }

  .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 {
    right: 2rem;
  }
}
@media only screen and (min-width : 1024px) {
  .t_100\:lg {
    top: 100%;
  }

  .t_auto\:lg {
    top: auto;
  }

  .t_unset\:lg {
    top: unset;
  }

  .t_0\:lg {
    top: 0;
  }

  .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 {
    top: 2rem;
  }

  .b_100\:lg {
    bottom: 100%;
  }

  .b_auto\:lg {
    bottom: auto;
  }

  .b_unset\:lg {
    bottom: unset;
  }

  .b_0\:lg {
    bottom: 0;
  }

  .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 {
    bottom: 2rem;
  }

  .l_100\:lg {
    left: 100%;
  }

  .l_auto\:lg {
    left: auto;
  }

  .l_unset\:lg {
    left: unset;
  }

  .l_0\:lg {
    left: 0;
  }

  .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 {
    left: 2rem;
  }

  .r_100\:lg {
    right: 100%;
  }

  .r_auto\:lg {
    right: auto;
  }

  .r_unset\:lg {
    right: unset;
  }

  .r_0\:lg {
    right: 0;
  }

  .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 {
    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 UC.Spacing.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 UC.Spacing.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 (min-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 (min-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;
  }
}
/*
Display, Grid & Flex

Control the display of objects with control of break points, and the layout functions of flex easily by adding utlity classes. 

Weight: 106

Styleguide UC.display

*/
/* No styleguide reference. */
/*
	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>classs</th><th class='text_right'>css property</th><th>value</th></thead><tbody><tr><td class='c_primary-n2'> .block</td><td class='text_right'> display :</td><td> block </td></tr> <tr><td class='c_primary-n2'> .inline</td><td class='text_right'> display :</td><td> inline </td></tr> <tr><td class='c_primary-n2'> .inline-block</td><td class='text_right'> display :</td><td> inline-block </td></tr> <tr><td class='c_primary-n2'> .table-cell</td><td class='text_right'> display :</td><td> table-cell </td></tr> <tr><td class='c_primary-n2'> .table</td><td class='text_right'> display :</td><td> table </td></tr> <tr><td class='c_primary-n2'> .table-row</td><td class='text_right'> display :</td><td> table-row </td></tr> <tr><td class='c_primary-n2'> .flex</td><td class='text_right'> display :</td><td> flex </td></tr> <tr><td class='c_primary-n2'> .inline-flex</td><td class='text_right'> display :</td><td> inline-flex </td></tr> <tr><td class='c_primary-n2'> .grid</td><td class='text_right'> display :</td><td> grid </td></tr> <tr><td class='c_primary-n2'> .display_none</td><td class='text_right'> display :</td><td> none </td></tr> </tbody></table>  

	Styleguide UC.display.type

 */
.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;
}

.flex {
  display: flex;
}

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

.grid {
  display: -ms-grid;
  display: grid;
}

.display_none {
  display: none;
}

@media only screen and (min-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;
  }

  .flex\:md {
    display: flex;
  }

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

  .grid\:md {
    display: -ms-grid;
    display: grid;
  }

  .display_none\:md {
    display: none;
  }
}
@media only screen and (min-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;
  }

  .flex\:lg {
    display: flex;
  }

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

  .grid\:lg {
    display: -ms-grid;
    display: grid;
  }

  .display_none\:lg {
    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>classs</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 UC.display.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;
}

/*
	Vertical Align

	quickly alter the verticle alignment of the child. Cation 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 UC.display.vertical alignment

 */
/*
	Flex

	Structure Objects quickly and change the order of the  

	.flex_row              		- the element is the a block- 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 UC.display.flex

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

/* 1. Fix for Chrome 44 bug.
 * https://code.google.com/p/chromium/issues/detail?id=506893 */
.flex_auto {
  flex: 1 1 auto;
  /* 1 */
  /* 1 */
}

.flex_auto,.flex_shrink {
  min-width: 0;
  min-height: 0;
}

.flex_shrink {
  flex: 0 1 auto;
  /* 1 */
  /* 1 */
}

.flex_grow {
  flex: 1 0 auto;
  min-width: 0;
  /* 1 */
  min-height: 0;
  /* 1 */
}

.flex_none {
  flex: none;
}

.flex_column {
  flex-direction: column;
}

.flex_row {
  flex-direction: row;
}

.flex_wrap {
  flex-wrap: wrap;
}

.flex_nowrap {
  flex-wrap: nowrap;
}

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

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

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

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

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

.items_center {
  align-items: center;
}

.items_baseline {
  align-items: baseline;
}

.items_stretch {
  align-items: stretch;
}

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

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

.self_center {
  -ms-grid-row-align: center;
      align-self: center;
}

.self_baseline {
  align-self: baseline;
}

.self_stretch {
  -ms-grid-row-align: stretch;
      align-self: stretch;
}

.justify_start {
  justify-content: flex-start;
}

.justify_end {
  justify-content: flex-end;
}

.justify_center {
  justify-content: center;
}

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

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

.content_start {
  align-content: flex-start;
}

.content_end {
  align-content: flex-end;
}

.content_center {
  align-content: center;
}

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

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

.content_stretch {
  align-content: stretch;
}

.order_0 {
  order: 0;
}

.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_8 {
  order: 8;
}

.order_last {
  order: 99999;
}

.flex-grow_0 {
  flex-grow: 0;
}

.flex-grow_1 {
  flex-grow: 1;
}

.flex-shrink_0 {
  flex-shrink: 0;
}

.flex-shrink_1 {
  flex-shrink: 1;
}

@media only screen and (min-width : 768px) {
  .flex_auto\:md {
    flex: 1 1 auto;
    min-width: 0;
    /* 1 */
    min-height: 0;
    /* 1 */
  }

  .flex_none\:md {
    flex: none;
  }

  .flex_column\:md {
    flex-direction: column;
  }

  .flex_row\:md {
    flex-direction: row;
  }

  .flex_wrap\:md {
    flex-wrap: wrap;
  }

  .flex_nowrap\:md {
    flex-wrap: nowrap;
  }

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

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

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

  .items_start\:md {
    align-items: flex-start;
  }

  .items_end\:md {
    align-items: flex-end;
  }

  .items_center\:md {
    align-items: center;
  }

  .items_baseline\:md {
    align-items: baseline;
  }

  .items_stretch\:md {
    align-items: stretch;
  }

  .self_start\:md {
    align-self: flex-start;
  }

  .self_end\:md {
    align-self: flex-end;
  }

  .self_center\:md {
    -ms-grid-row-align: center;
        align-self: center;
  }

  .self_baseline\:md {
    align-self: baseline;
  }

  .self_stretch\:md {
    -ms-grid-row-align: stretch;
        align-self: stretch;
  }

  .justify_start\:md {
    justify-content: flex-start;
  }

  .justify_end\:md {
    justify-content: flex-end;
  }

  .justify_center\:md {
    justify-content: center;
  }

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

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

  .content_start\:md {
    align-content: flex-start;
  }

  .content_end\:md {
    align-content: flex-end;
  }

  .content_center\:md {
    align-content: center;
  }

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

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

  .content_stretch\:md {
    align-content: stretch;
  }

  .order_0\:md {
    order: 0;
  }

  .order_1\:md {
    order: 1;
  }

  .order_2\:md {
    order: 2;
  }

  .order_3\:md {
    order: 3;
  }

  .order_4\:md {
    order: 4;
  }

  .order_5\:md {
    order: 5;
  }

  .order_6\:md {
    order: 6;
  }

  .order_7\:md {
    order: 7;
  }

  .order_8\:md {
    order: 8;
  }

  .order_last\:md {
    order: 99999;
  }

  .flex-grow_0\:md {
    flex-grow: 0;
  }

  .flex-grow_1\:md {
    flex-grow: 1;
  }

  .flex_shrink-0\:md {
    flex-shrink: 0;
  }

  .flex_shrink-1\:md {
    flex-shrink: 1;
  }
}
@media only screen and (min-width : 1024px) {
  .flex_auto\:lg {
    flex: 1 1 auto;
    min-width: 0;
    /* 1 */
    min-height: 0;
    /* 1 */
  }

  .flex_none\:lg {
    flex: none;
  }

  .flex_column\:lg {
    flex-direction: column;
  }

  .flex_row\:lg {
    flex-direction: row;
  }

  .flex_wrap\:lg {
    flex-wrap: wrap;
  }

  .flex_nowrap\:lg {
    flex-wrap: nowrap;
  }

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

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

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

  .items_start\:lg {
    align-items: flex-start;
  }

  .items_end\:lg {
    align-items: flex-end;
  }

  .items_center\:lg {
    align-items: center;
  }

  .items_baseline\:lg {
    align-items: baseline;
  }

  .items_stretch\:lg {
    align-items: stretch;
  }

  .self_start\:lg {
    align-self: flex-start;
  }

  .self_end\:lg {
    align-self: flex-end;
  }

  .self_center\:lg {
    -ms-grid-row-align: center;
        align-self: center;
  }

  .self_baseline\:lg {
    align-self: baseline;
  }

  .self_stretch\:lg {
    -ms-grid-row-align: stretch;
        align-self: stretch;
  }

  .justify_start\:lg {
    justify-content: flex-start;
  }

  .justify_end\:lg {
    justify-content: flex-end;
  }

  .justify_center\:lg {
    justify-content: center;
  }

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

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

  .content_start\:lg {
    align-content: flex-start;
  }

  .content_end\:lg {
    align-content: flex-end;
  }

  .content_center\:lg {
    align-content: center;
  }

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

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

  .content_stretch\:lg {
    align-content: stretch;
  }

  .order_0\:lg {
    order: 0;
  }

  .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_8\:lg {
    order: 8;
  }

  .order_last\:lg {
    order: 99999;
  }

  .flex-grow_0\:lg {
    flex-grow: 0;
  }

  .flex-grow_1\:lg {
    flex-grow: 1;
  }

  .flex_shrink-0\:lg {
    flex-shrink: 0;
  }

  .flex_shrink-1\:lg {
    flex-shrink: 1;
  }
}
/*
Grid

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


Styleguide  UC.display.Grid
*/
/*
Grid Gap

Description: Grid Gap  <table class='clear_both'><thead class='font_bold uppercase'><th>classs</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> </tbody></table>  <table class='clear_both'><thead class='font_bold uppercase'><th>classs</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> </tbody></table>  

Weight: 0

Styleguide  UC.display.Grid.Gap
*/
.gap-x_0 {
  grid-column-gap: 0 !important;
}

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

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

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

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

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

@media only screen and (min-width : 768px) {
  .gap-x_0\:md {
    grid-column-gap: 0 !important;
  }

  .gap-x_1\:md {
    grid-column-gap: 1px !important;
  }

  .gap-x_2\:md {
    grid-column-gap: 0.25rem !important;
  }

  .gap-x_3\:md {
    grid-column-gap: 0.5rem !important;
  }

  .gap-x_4\:md {
    grid-column-gap: 1rem !important;
  }

  .gap-x_5\:md {
    grid-column-gap: 2rem !important;
  }
}
@media only screen and (min-width : 1024px) {
  .gap-x_0\:lg {
    grid-column-gap: 0 !important;
  }

  .gap-x_1\:lg {
    grid-column-gap: 1px !important;
  }

  .gap-x_2\:lg {
    grid-column-gap: 0.25rem !important;
  }

  .gap-x_3\:lg {
    grid-column-gap: 0.5rem !important;
  }

  .gap-x_4\:lg {
    grid-column-gap: 1rem !important;
  }

  .gap-x_5\:lg {
    grid-column-gap: 2rem !important;
  }
}
.gap-y_0 {
  grid-row-gap: 0 !important;
}

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

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

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

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

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

@media only screen and (min-width : 768px) {
  .gap-y_0\:md {
    grid-row-gap: 0 !important;
  }

  .gap-y_1\:md {
    grid-row-gap: 1px !important;
  }

  .gap-y_2\:md {
    grid-row-gap: 0.25rem !important;
  }

  .gap-y_3\:md {
    grid-row-gap: 0.5rem !important;
  }

  .gap-y_4\:md {
    grid-row-gap: 1rem !important;
  }

  .gap-y_5\:md {
    grid-row-gap: 2rem !important;
  }
}
@media only screen and (min-width : 1024px) {
  .gap-y_0\:lg {
    grid-row-gap: 0 !important;
  }

  .gap-y_1\:lg {
    grid-row-gap: 1px !important;
  }

  .gap-y_2\:lg {
    grid-row-gap: 0.25rem !important;
  }

  .gap-y_3\:lg {
    grid-row-gap: 0.5rem !important;
  }

  .gap-y_4\:lg {
    grid-row-gap: 1rem !important;
  }

  .gap-y_5\:lg {
    grid-row-gap: 2rem !important;
  }
}
/*
Grid Column Template

Description: Grid Template

.template-x_20		-  grid layouts that are responsive and hold a certian size when able.
.template-x_25		-  grid layouts that are responsive and hold a certian size when able.
.template-x_30		-  grid layouts that are responsive and hold a certian size when able.
.template-x_35		-  grid layouts that are responsive and hold a certian size when able.
.template-x_40		-  grid layouts that are responsive and hold a certian size when able.

Markup:
<div></div>


Weight: 0

Styleguide  UC.display.Grid.Template
*/
.template-x_15 {
  grid-template-columns: repeat(auto-fill, 50%);
}

.template-x_20,
.template-x_25,
.template-x_30,
.template-x_35,
.template-x_40 {
  grid-template-columns: repeat(auto-fill, 100%);
}

@media only screen and (min-width : 768px) {
  .template-x_15 {
    grid-template-columns: repeat(auto-fill, minmax(15rem, 0.5fr));
  }

  .template-x_20,.template-x_25 {
    grid-template-columns: repeat(auto-fill, minmax(20rem, 0.5fr));
  }

  .template-x_30 {
    grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
  }

  .template-x_35 {
    grid-template-columns: repeat(auto-fill, minmax(25rem, 1fr));
  }

  .template-x_40 {
    grid-template-columns: repeat(auto-fill, minmax(30rem, 1fr));
  }
}
@media only screen and (min-width : 1024px) {
  .template-x_25 {
    grid-template-columns: repeat(auto-fill, minmax(25rem, 0.333fr));
  }

  .template-x_30 {
    grid-template-columns: repeat(auto-fill, minmax(30rem, 0.5fr));
  }

  .template-x_35 {
    grid-template-columns: repeat(auto-fill, minmax(35rem, 1fr));
  }

  .template-x_40 {
    grid-template-columns: repeat(auto-fill, minmax(40rem, 1fr));
  }
}
.span-column_2\:lg {
  -ms-grid-column-span: 1;
  grid-column: span 1;
}

.span-row_2\:lg {
  -ms-grid-row-span: 1;
  grid-row: span 1;
}

.span-column_3\:lg {
  -ms-grid-column-span: 1;
  grid-column: span 1;
}

.span-row_3\:lg {
  -ms-grid-row-span: 1;
  grid-row: span 1;
}

.span-column_2\:md {
  -ms-grid-column-span: 1;
  grid-column: span 1;
}

.span-row_2\:md {
  -ms-grid-row-span: 1;
  grid-row: span 1;
}

.span-column_3\:md {
  -ms-grid-column-span: 1;
  grid-column: span 1;
}

.span-row_3\:md {
  -ms-grid-row-span: 1;
  grid-row: span 1;
}

.span-column_1 {
  -ms-grid-column-span: 1;
  grid-column: span 1;
}

.span-row_1 {
  -ms-grid-row-span: 1;
  grid-row: span 1;
}

.span-column_2 {
  -ms-grid-column-span: 2;
  grid-column: span 2;
}

.span-row_2 {
  -ms-grid-row-span: 2;
  grid-row: span 2;
}

.span-column_3 {
  -ms-grid-column-span: 3;
  grid-column: span 3;
}

.span-row_3 {
  -ms-grid-row-span: 3;
  grid-row: span 3;
}

@media only screen and (min-width : 768px) {
  .span-column_1\:md {
    -ms-grid-column-span: 1;
    grid-column: span 1;
  }

  .span-row_1\:md {
    -ms-grid-row-span: 1;
    grid-row: span 1;
  }

  .span-column_2\:md {
    -ms-grid-column-span: 2;
    grid-column: span 2;
  }

  .span-row_2\:md {
    -ms-grid-row-span: 2;
    grid-row: span 2;
  }

  .span-column_3\:md {
    -ms-grid-column-span: 3;
    grid-column: span 3;
  }

  .span-row_3\:md {
    -ms-grid-row-span: 3;
    grid-row: span 3;
  }
}
@media only screen and (min-width : 1024px) {
  .span-column_1\:lg {
    -ms-grid-column-span: 1;
    grid-column: span 1;
  }

  .span-row_1\:lg {
    -ms-grid-row-span: 1;
    grid-row: span 1;
  }

  .span-column_2\:lg {
    -ms-grid-column-span: 2;
    grid-column: span 2;
  }

  .span-row_2\:lg {
    -ms-grid-row-span: 2;
    grid-row: span 2;
  }

  .span-column_3\:lg {
    -ms-grid-column-span: 3;
    grid-column: span 3;
  }

  .span-row_3\:lg {
    -ms-grid-row-span: 3;
    grid-row: span 3;
  }
}
/*
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 UC.display.overflow

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

.overflow_visible {
  overflow: visible;
}

.overflow_auto {
  overflow: auto;
}

.overflow_scroll {
  overflow-x: scroll;
}

.overflow_clip {
  text-overflow: clip;
}

.overflow_ellipsis {
  text-overflow: ellipsis;
}

.overflow_unset {
  overflow: unset;
}

/*
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 UC.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_1-third {
  width: 33% !important;
}

.w_2-thirds {
  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;
}

@media only screen and (min-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_1-third\:md {
    width: 33% !important;
  }

  .w_2-thirds\: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;
  }
}
@media only screen and (min-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_1-third\:lg {
    width: 33% !important;
  }

  .w_2-thirds\: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 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 UC.Width.MaxWidth

 */
.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_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;
}

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

@media only screen and (min-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_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;
  }

  .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_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;
  }
}
@media only screen and (min-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_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;
  }

  .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_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;
  }
}
/*
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_60 h_unset:lg">.h_60.h_unset:lg</div>
</div>

  Weight: 107

  Styleguide UC.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 UC.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">
<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 UC.Height.min

 */
/*
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 UC.Shadows

 */
.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,0.12), inset 2px 2px 3px 0px rgba(18, 56, 136, 0.09), inset -2px -2px 3px 0px rgba(145,112,19,0.09);
}

.shadow_emboss-bold {
  box-shadow: inset 2px 3px 10px 0px rgba(0,0,0,0.26), inset 4px 4px 13px 0px rgba(11,20,28,0.13), inset -2px -2px 9px 0px rgba(145,112,19,0.09), inset 2px 1px 5px 4px rgba(0,0,0,0.18);
}

.shadow_bevel-light {
  box-shadow: -2px -2px 4px rgba(255, 255, 255, 0.05), -2px -2px 3px rgba(255,255,255, 0.25), 2px 3.5px 5.5px rgba(0, 0, 0, 0.132), 0 6.4px 13.1px rgba(0, 0, 0, 0.041), 0 16px 19px rgba(0, 0, 0, 0.07);
}

.shadow_bevel-bold {
  box-shadow: -2px -2px 4px hsla(0, 0%, 82.4%, 0.05), -2px -2px 3px hsla(0, 0%, 46.7%, 0.07), 1px 2.5px 4.5px rgba(0, 0, 0, 0.4), 0 6.4px 12.1px rgba(0, 0, 0, 0.14), 0 16px 19px rgba(0,0,0,.07);
}

.shadow_overlap-light {
  box-shadow: 0 1px 10px hsla(0, 0%, 0%, 0.05), 0 2px 4px rgba(0,0,0,.3), 1px 5px 5px rgba(0,0,0,.01);
}

.shadow_overlap-bold {
  box-shadow: -1px -2px 4px rgba(0,0,0,.08), 0 1px 10px hsla(0, 0%, 0%, 0.06), 0 3px 4px rgba(0,0,0,.5), 1px 5px 5px rgba(0,0,0,.03);
}

/*
Background 

Background of containers can be easily maniputlated with textures, colors, and shadows.  

Weight: 120

Styleguide UC.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 success color
  bg_highlight            - background using success color  

  Weight: -100

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

  MarkupWrapperClasses:
  grid template-x_30

  Styleguide UC.Background.Color

 */
/*
Background Color Shades

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>   

bg_primary                - background color modified light to dark
bg_secondary              - background color modified light to dark
bg_shade                  - background color modified light to dark
bg_accent                 - background color modified light to dark
bg_navigation             - background color modified light to dark
bg_info                   - background color modified light to dark
bg_highlight              - background color modified light to dark
bg_success                - background color modified light to dark
bg_warning                - background color modified light to dark
bg_alert                  - background color modified light to dark
bg_acc                    - background color modified light to dark


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>


MarkupWrapperClasss:
flex bg_shade-5 p_2 texture_light

Styleguide UC.Background.Color.Shades

 */
.bg_tansparent {
  background-color: transparent !important;
}

@media only screen and (min-width : 768px) {
  .bg_tansparent {
    background-color: transparent !important;
  }
}
@media only screen and (min-width : 1024px) {
  .bg_tansparent {
    background-color: transparent !important;
  }
}

.bg_primary, .btn_acc-primary,.bg_primary-0 {
  background-color: #198dae !important;
}

.bg_primary-1 {
  background-color: #3c9eba !important;
}

.bg_primary-2 {
  background-color: #6eb7cc !important;
}

.bg_primary-3 {
  background-color: #a3d1df !important;
}

.bg_primary-4 {
  background-color: #cce6ed !important;
}

.bg_primary-5 {
  background-color: #e8f4f7 !important;
}

.bg_primary-n1 {
  background-color: #177f9d !important;
}

.bg_primary-n2 {
  background-color: #136a83 !important;
}

.bg_primary-n3 {
  background-color: #0e4e60 !important;
}

.bg_primary-n4 {
  background-color: #0a3846 !important;
}

.bg_primary-n5 {
  background-color: #06232c !important;
}

.bg_secondary,.bg_secondary-0 {
  background-color: #676a72 !important;
}

.bg_secondary-1 {
  background-color: #7e8087 !important;
}

.bg_secondary-2 {
  background-color: #9fa1a6 !important;
}

.bg_secondary-3 {
  background-color: #c2c3c7 !important;
}

.bg_secondary-4 {
  background-color: #dedee0 !important;
}

.bg_secondary-5 {
  background-color: #f0f0f1 !important;
}

.bg_secondary-n1 {
  background-color: #5d5f67 !important;
}

.bg_secondary-n2 {
  background-color: #4d5056 !important;
}

.bg_secondary-n3 {
  background-color: #393a3f !important;
}

.bg_secondary-n4 {
  background-color: #292a2e !important;
}

.bg_secondary-n5 {
  background-color: #1a1b1d !important;
}

.bg_success,.bg_success-0 {
  background-color: #078a2e !important;
}

.bg_success-1 {
  background-color: #2c9c4d !important;
}

.bg_success-2 {
  background-color: #63b57b !important;
}

.bg_success-3 {
  background-color: #9cd0ab !important;
}

.bg_success-4 {
  background-color: #c8e5d1 !important;
}

.bg_success-5 {
  background-color: #e6f3ea !important;
}

.bg_success-n1 {
  background-color: #067c29 !important;
}

.bg_success-n2 {
  background-color: #056823 !important;
}

.bg_success-n3 {
  background-color: #044c19 !important;
}

.bg_success-n4 {
  background-color: #033712 !important;
}

.bg_success-n5 {
  background-color: #02230c !important;
}

.bg_shade,.bg_shade-0 {
  background-color: #898989 !important;
}

.bg_shade-1 {
  background-color: #9b9b9b !important;
}

.bg_shade-2 {
  background-color: #b5b5b5 !important;
}

.bg_shade-3 {
  background-color: #d0d0d0 !important;
}

.bg_shade-4 {
  background-color: #e5e5e5 !important;
}

.bg_shade-5 {
  background-color: #f3f3f3 !important;
}

.bg_shade-n1 {
  background-color: #7b7b7b !important;
}

.bg_shade-n2 {
  background-color: #676767 !important;
}

.bg_shade-n3 {
  background-color: #4b4b4b !important;
}

.bg_shade-n4 {
  background-color: #373737 !important;
}

.bg_shade-n5 {
  background-color: #222222 !important;
}

.bg_warning,.bg_warning-0 {
  background-color: #da8210 !important;
}

.bg_warning-1 {
  background-color: #e09534 !important;
}

.bg_warning-2 {
  background-color: #e8b068 !important;
}

.bg_warning-3 {
  background-color: #f0cd9f !important;
}

.bg_warning-4 {
  background-color: #f7e4ca !important;
}

.bg_warning-5 {
  background-color: #fbf3e7 !important;
}

.bg_warning-n1 {
  background-color: #c4750e !important;
}

.bg_warning-n2 {
  background-color: #a4620c !important;
}

.bg_warning-n3 {
  background-color: #784809 !important;
}

.bg_warning-n4 {
  background-color: #573406 !important;
}

.bg_warning-n5 {
  background-color: #372104 !important;
}

.bg_alert,.bg_alert-0 {
  background-color: #dd1a1a !important;
}

.bg_alert-1 {
  background-color: #e23c3c !important;
}

.bg_alert-2 {
  background-color: #ea6f6f !important;
}

.bg_alert-3 {
  background-color: #f1a3a3 !important;
}

.bg_alert-4 {
  background-color: #f8cdcd !important;
}

.bg_alert-5 {
  background-color: #fce8e8 !important;
}

.bg_alert-n1 {
  background-color: #c71717 !important;
}

.bg_alert-n2 {
  background-color: #a61414 !important;
}

.bg_alert-n3 {
  background-color: #7a0e0e !important;
}

.bg_alert-n4 {
  background-color: #580a0a !important;
}

.bg_alert-n5 {
  background-color: #370707 !important;
}

.bg_navigation,.bg_navigation-0 {
  background-color: #2b58c0 !important;
}

.bg_navigation-1 {
  background-color: #4b71c9 !important;
}

.bg_navigation-2 {
  background-color: #7996d7 !important;
}

.bg_navigation-3 {
  background-color: #aabce6 !important;
}

.bg_navigation-4 {
  background-color: #d0daf1 !important;
}

.bg_navigation-5 {
  background-color: #eaeef9 !important;
}

.bg_navigation-n1 {
  background-color: #274fad !important;
}

.bg_navigation-n2 {
  background-color: #204290 !important;
}

.bg_navigation-n3 {
  background-color: #18306a !important;
}

.bg_navigation-n4 {
  background-color: #11234d !important;
}

.bg_navigation-n5 {
  background-color: #0b1630 !important;
}

.bg_accent,.bg_accent-0 {
  background-color: #16a385 !important;
}

.bg_accent-1 {
  background-color: #39b197 !important;
}

.bg_accent-2 {
  background-color: #6cc5b2 !important;
}

.bg_accent-3 {
  background-color: #a2dace !important;
}

.bg_accent-4 {
  background-color: #ccebe4 !important;
}

.bg_accent-5 {
  background-color: #e8f6f3 !important;
}

.bg_accent-n1 {
  background-color: #149378 !important;
}

.bg_accent-n2 {
  background-color: #117a64 !important;
}

.bg_accent-n3 {
  background-color: #0c5a49 !important;
}

.bg_accent-n4 {
  background-color: #094135 !important;
}

.bg_accent-n5 {
  background-color: #062921 !important;
}

.bg_info,.bg_info-0 {
  background-color: #a3988c !important;
}

.bg_info-1 {
  background-color: #b1a79d !important;
}

.bg_info-2 {
  background-color: #c5beb7 !important;
}

.bg_info-3 {
  background-color: #dad6d1 !important;
}

.bg_info-4 {
  background-color: #ebe8e6 !important;
}

.bg_info-5 {
  background-color: #f6f5f4 !important;
}

.bg_info-n1 {
  background-color: #93897e !important;
}

.bg_info-n2 {
  background-color: #7a7269 !important;
}

.bg_info-n3 {
  background-color: #5a544d !important;
}

.bg_info-n4 {
  background-color: #413d38 !important;
}

.bg_info-n5 {
  background-color: #292623 !important;
}

.bg_highlight,.bg_highlight-0 {
  background-color: #7742bd !important;
}

.bg_highlight-1 {
  background-color: #8b5ec7 !important;
}

.bg_highlight-2 {
  background-color: #a988d5 !important;
}

.bg_highlight-3 {
  background-color: #c9b3e5 !important;
}

.bg_highlight-4 {
  background-color: #e1d5f0 !important;
}

.bg_highlight-5 {
  background-color: #f1ecf8 !important;
}

.bg_highlight-n1 {
  background-color: #6b3baa !important;
}

.bg_highlight-n2 {
  background-color: #59328e !important;
}

.bg_highlight-n3 {
  background-color: #412468 !important;
}

.bg_highlight-n4 {
  background-color: #301a4c !important;
}

.bg_highlight-n5 {
  background-color: #1e112f !important;
}

.bg_acc,.bg_acc-0 {
  background-color: #004176 !important;
}

.bg_acc-1 {
  background-color: #265e8b !important;
}

.bg_acc-2 {
  background-color: #5e87a9 !important;
}

.bg_acc-3 {
  background-color: #99b3c8 !important;
}

.bg_acc-4 {
  background-color: #c7d5e1 !important;
}

.bg_acc-5 {
  background-color: #e6ecf1 !important;
}

.bg_acc-n1 {
  background-color: #003b6a !important;
}

.bg_acc-n2 {
  background-color: #003159 !important;
}

.bg_acc-n3 {
  background-color: #002441 !important;
}

.bg_acc-n4 {
  background-color: #001a2f !important;
}

.bg_acc-n5 {
  background-color: #00101e !important;
}

.bg_white {
  background-color: white;
}

.bg_black {
  background-color: #131212;
}

.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 {
  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 UC.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 UC.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 UC.Background.Size

*/
.bg_unset {
  background-size: unset;
}

.bg_auto {
  background-size: auto;
}

.bg_cover {
  background-size: cover;
}

.bg_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 UC.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>

Styleguide UC.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,.disabled,
.disabled:hover {
  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 UC.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 UC.Background.Textures.Shaded

 */
/*
UC: 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 UC.Borders

*/
/* No styleguide reference. */
/*
Border 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 UC.Borders.Style

*/
.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 (min-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 (min-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;
  }
}
/*
Border 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 UC.Borders.Colors

*/
/*
Border Alpha Black

Border black has attached alpha modifiers to allow for greater flexablity 

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 UC.Borders.Colors.Black

*/
/*
  Border Alpha White

  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 UC.Borders.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 {
  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;
}

/*
	Border 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 UC.Borders.Radius

  */
.br_square {
  border-radius: 0px;
}

.br_radius, .btn_acc-primary {
  border-radius: 6px;
}

.br_round {
  border-radius: 25px;
}

.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_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_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_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_circle {
  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;
}

.circle,
.circle .switch-paddle,
.circle .switch-paddle::after {
  border-radius: 100%;
}

/*
  Border Colors

  Border black has attached alpha   

  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 UC.Borders.Colors.Modifiers

  */

.br_primary,.br_primary-0 {
  border-color: #198dae !important;
}

.br_primary-1 {
  border-color: #3c9eba !important;
}

.br_primary-2 {
  border-color: #6eb7cc !important;
}

.br_primary-3 {
  border-color: #a3d1df !important;
}

.br_primary-4 {
  border-color: #cce6ed !important;
}

.br_primary-5 {
  border-color: #e8f4f7 !important;
}

.br_primary-n1 {
  border-color: #177f9d !important;
}

.br_primary-n2 {
  border-color: #136a83 !important;
}

.br_primary-n3, .btn_acc-primary {
  border-color: #0e4e60 !important;
}

.br_primary-n4 {
  border-color: #0a3846 !important;
}

.br_primary-n5 {
  border-color: #06232c !important;
}

.br_secondary,.br_secondary-0 {
  border-color: #676a72 !important;
}

.br_secondary-1 {
  border-color: #7e8087 !important;
}

.br_secondary-2 {
  border-color: #9fa1a6 !important;
}

.br_secondary-3 {
  border-color: #c2c3c7 !important;
}

.br_secondary-4 {
  border-color: #dedee0 !important;
}

.br_secondary-5 {
  border-color: #f0f0f1 !important;
}

.br_secondary-n1 {
  border-color: #5d5f67 !important;
}

.br_secondary-n2 {
  border-color: #4d5056 !important;
}

.br_secondary-n3 {
  border-color: #393a3f !important;
}

.br_secondary-n4 {
  border-color: #292a2e !important;
}

.br_secondary-n5 {
  border-color: #1a1b1d !important;
}

.br_success,.br_success-0 {
  border-color: #078a2e !important;
}

.br_success-1 {
  border-color: #2c9c4d !important;
}

.br_success-2 {
  border-color: #63b57b !important;
}

.br_success-3 {
  border-color: #9cd0ab !important;
}

.br_success-4 {
  border-color: #c8e5d1 !important;
}

.br_success-5 {
  border-color: #e6f3ea !important;
}

.br_success-n1 {
  border-color: #067c29 !important;
}

.br_success-n2 {
  border-color: #056823 !important;
}

.br_success-n3 {
  border-color: #044c19 !important;
}

.br_success-n4 {
  border-color: #033712 !important;
}

.br_success-n5 {
  border-color: #02230c !important;
}

.br_shade,.br_shade-0 {
  border-color: #898989 !important;
}

.br_shade-1 {
  border-color: #9b9b9b !important;
}

.br_shade-2 {
  border-color: #b5b5b5 !important;
}

.br_shade-3 {
  border-color: #d0d0d0 !important;
}

.br_shade-4 {
  border-color: #e5e5e5 !important;
}

.br_shade-5 {
  border-color: #f3f3f3 !important;
}

.br_shade-n1 {
  border-color: #7b7b7b !important;
}

.br_shade-n2 {
  border-color: #676767 !important;
}

.br_shade-n3 {
  border-color: #4b4b4b !important;
}

.br_shade-n4 {
  border-color: #373737 !important;
}

.br_shade-n5 {
  border-color: #222222 !important;
}

.br_warning,.br_warning-0 {
  border-color: #da8210 !important;
}

.br_warning-1 {
  border-color: #e09534 !important;
}

.br_warning-2 {
  border-color: #e8b068 !important;
}

.br_warning-3 {
  border-color: #f0cd9f !important;
}

.br_warning-4 {
  border-color: #f7e4ca !important;
}

.br_warning-5 {
  border-color: #fbf3e7 !important;
}

.br_warning-n1 {
  border-color: #c4750e !important;
}

.br_warning-n2 {
  border-color: #a4620c !important;
}

.br_warning-n3 {
  border-color: #784809 !important;
}

.br_warning-n4 {
  border-color: #573406 !important;
}

.br_warning-n5 {
  border-color: #372104 !important;
}

.br_alert,.br_alert-0 {
  border-color: #dd1a1a !important;
}

.br_alert-1 {
  border-color: #e23c3c !important;
}

.br_alert-2 {
  border-color: #ea6f6f !important;
}

.br_alert-3 {
  border-color: #f1a3a3 !important;
}

.br_alert-4 {
  border-color: #f8cdcd !important;
}

.br_alert-5 {
  border-color: #fce8e8 !important;
}

.br_alert-n1 {
  border-color: #c71717 !important;
}

.br_alert-n2 {
  border-color: #a61414 !important;
}

.br_alert-n3 {
  border-color: #7a0e0e !important;
}

.br_alert-n4 {
  border-color: #580a0a !important;
}

.br_alert-n5 {
  border-color: #370707 !important;
}

.br_navigation,.br_navigation-0 {
  border-color: #2b58c0 !important;
}

.br_navigation-1 {
  border-color: #4b71c9 !important;
}

.br_navigation-2 {
  border-color: #7996d7 !important;
}

.br_navigation-3 {
  border-color: #aabce6 !important;
}

.br_navigation-4 {
  border-color: #d0daf1 !important;
}

.br_navigation-5 {
  border-color: #eaeef9 !important;
}

.br_navigation-n1 {
  border-color: #274fad !important;
}

.br_navigation-n2 {
  border-color: #204290 !important;
}

.br_navigation-n3 {
  border-color: #18306a !important;
}

.br_navigation-n4 {
  border-color: #11234d !important;
}

.br_navigation-n5 {
  border-color: #0b1630 !important;
}

.br_accent,.br_accent-0 {
  border-color: #16a385 !important;
}

.br_accent-1 {
  border-color: #39b197 !important;
}

.br_accent-2 {
  border-color: #6cc5b2 !important;
}

.br_accent-3 {
  border-color: #a2dace !important;
}

.br_accent-4 {
  border-color: #ccebe4 !important;
}

.br_accent-5 {
  border-color: #e8f6f3 !important;
}

.br_accent-n1 {
  border-color: #149378 !important;
}

.br_accent-n2 {
  border-color: #117a64 !important;
}

.br_accent-n3 {
  border-color: #0c5a49 !important;
}

.br_accent-n4 {
  border-color: #094135 !important;
}

.br_accent-n5 {
  border-color: #062921 !important;
}

.br_info,.br_info-0 {
  border-color: #a3988c !important;
}

.br_info-1 {
  border-color: #b1a79d !important;
}

.br_info-2 {
  border-color: #c5beb7 !important;
}

.br_info-3 {
  border-color: #dad6d1 !important;
}

.br_info-4 {
  border-color: #ebe8e6 !important;
}

.br_info-5 {
  border-color: #f6f5f4 !important;
}

.br_info-n1 {
  border-color: #93897e !important;
}

.br_info-n2 {
  border-color: #7a7269 !important;
}

.br_info-n3 {
  border-color: #5a544d !important;
}

.br_info-n4 {
  border-color: #413d38 !important;
}

.br_info-n5 {
  border-color: #292623 !important;
}

.br_highlight,.br_highlight-0 {
  border-color: #7742bd !important;
}

.br_highlight-1 {
  border-color: #8b5ec7 !important;
}

.br_highlight-2 {
  border-color: #a988d5 !important;
}

.br_highlight-3 {
  border-color: #c9b3e5 !important;
}

.br_highlight-4 {
  border-color: #e1d5f0 !important;
}

.br_highlight-5 {
  border-color: #f1ecf8 !important;
}

.br_highlight-n1 {
  border-color: #6b3baa !important;
}

.br_highlight-n2 {
  border-color: #59328e !important;
}

.br_highlight-n3 {
  border-color: #412468 !important;
}

.br_highlight-n4 {
  border-color: #301a4c !important;
}

.br_highlight-n5 {
  border-color: #1e112f !important;
}

.br_acc,.br_acc-0 {
  border-color: #004176 !important;
}

.br_acc-1 {
  border-color: #265e8b !important;
}

.br_acc-2 {
  border-color: #5e87a9 !important;
}

.br_acc-3 {
  border-color: #99b3c8 !important;
}

.br_acc-4 {
  border-color: #c7d5e1 !important;
}

.br_acc-5 {
  border-color: #e6ecf1 !important;
}

.br_acc-n1 {
  border-color: #003b6a !important;
}

.br_acc-n2 {
  border-color: #003159 !important;
}

.br_acc-n3 {
  border-color: #002441 !important;
}

.br_acc-n4 {
  border-color: #001a2f !important;
}

.br_acc-n5 {
  border-color: #00101e !important;
}

/*
    Border Width

    Manipulation of borders with thisese 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 UC.Borders.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 UC.opacity

*/
/* No styleguide reference. */
/*
	Opacity Levels

	Set the Opacity of an object.  <table class='clear_both'><thead class='font_bold uppercase'><th>classs</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 UC.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;
}

/*
UC: Is-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 UC.is-active

*/
/*
Is-active to 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 "is-active" state.</span></div><strong>`.is-acitve .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 UC.is-active.opacity

*/
/*
Is-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 "is-active" state.</span></div>Set the background to full white or black when the parent has a class of `is-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 UC.is-active.black and white

 */
/*
  Is 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 "is-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 UC.is-active.text

 */
/*
  Is 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 "is-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 UC.is-active.background color

 */
/*
  Is 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 "is-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 UC.is-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: #198dae !important;
}

.active.a\:bg_primary-1,
.active > .a\:bg_primary-1 {
  background-color: #3c9eba !important;
}

.active.a\:bg_primary-2,
.active > .a\:bg_primary-2 {
  background-color: #6eb7cc !important;
}

.active.a\:bg_primary-3,
.active > .a\:bg_primary-3 {
  background-color: #a3d1df !important;
}

.active.a\:bg_primary-4,
.active > .a\:bg_primary-4 {
  background-color: #cce6ed !important;
}

.active.a\:bg_primary-5,
.active > .a\:bg_primary-5 {
  background-color: #e8f4f7 !important;
}

.active.a\:bg_primary-n1,
.active > .a\:bg_primary-n1 {
  background-color: #177f9d !important;
}

.active.a\:bg_primary-n2,
.active > .a\:bg_primary-n2 {
  background-color: #136a83 !important;
}

.active.a\:bg_primary-n3,
.active > .a\:bg_primary-n3 {
  background-color: #0e4e60 !important;
}

.active.a\:bg_primary-n4,
.active > .a\:bg_primary-n4 {
  background-color: #0a3846 !important;
}

.active.a\:bg_primary-n5,
.active > .a\:bg_primary-n5 {
  background-color: #06232c !important;
}

.active.a\:c_primary,
.active > .a\:c_primary,.active.a\:c_primary-0,
.active > .a\:c_primary-0 {
  color: #198dae !important;
}

.active.a\:c_primary-1,
.active > .a\:c_primary-1 {
  color: #3c9eba !important;
}

.active.a\:c_primary-2,
.active > .a\:c_primary-2 {
  color: #6eb7cc !important;
}

.active.a\:c_primary-3,
.active > .a\:c_primary-3 {
  color: #a3d1df !important;
}

.active.a\:c_primary-4,
.active > .a\:c_primary-4 {
  color: #cce6ed !important;
}

.active.a\:c_primary-5,
.active > .a\:c_primary-5 {
  color: #e8f4f7 !important;
}

.active.a\:c_primary-n1,
.active > .a\:c_primary-n1 {
  color: #177f9d !important;
}

.active.a\:c_primary-n2,
.active > .a\:c_primary-n2 {
  color: #136a83 !important;
}

.active.a\:c_primary-n3,
.active > .a\:c_primary-n3 {
  color: #0e4e60 !important;
}

.active.a\:c_primary-n4,
.active > .a\:c_primary-n4 {
  color: #0a3846 !important;
}

.active.a\:c_primary-n5,
.active > .a\:c_primary-n5 {
  color: #06232c !important;
}

.active.a\:bg_secondary,
.active > .a\:bg_secondary,.active.a\:bg_secondary-0,
.active > .a\:bg_secondary-0 {
  background-color: #676a72 !important;
}

.active.a\:bg_secondary-1,
.active > .a\:bg_secondary-1 {
  background-color: #7e8087 !important;
}

.active.a\:bg_secondary-2,
.active > .a\:bg_secondary-2 {
  background-color: #9fa1a6 !important;
}

.active.a\:bg_secondary-3,
.active > .a\:bg_secondary-3 {
  background-color: #c2c3c7 !important;
}

.active.a\:bg_secondary-4,
.active > .a\:bg_secondary-4 {
  background-color: #dedee0 !important;
}

.active.a\:bg_secondary-5,
.active > .a\:bg_secondary-5 {
  background-color: #f0f0f1 !important;
}

.active.a\:bg_secondary-n1,
.active > .a\:bg_secondary-n1 {
  background-color: #5d5f67 !important;
}

.active.a\:bg_secondary-n2,
.active > .a\:bg_secondary-n2 {
  background-color: #4d5056 !important;
}

.active.a\:bg_secondary-n3,
.active > .a\:bg_secondary-n3 {
  background-color: #393a3f !important;
}

.active.a\:bg_secondary-n4,
.active > .a\:bg_secondary-n4 {
  background-color: #292a2e !important;
}

.active.a\:bg_secondary-n5,
.active > .a\:bg_secondary-n5 {
  background-color: #1a1b1d !important;
}

.active.a\:c_secondary,
.active > .a\:c_secondary,.active.a\:c_secondary-0,
.active > .a\:c_secondary-0 {
  color: #676a72 !important;
}

.active.a\:c_secondary-1,
.active > .a\:c_secondary-1 {
  color: #7e8087 !important;
}

.active.a\:c_secondary-2,
.active > .a\:c_secondary-2 {
  color: #9fa1a6 !important;
}

.active.a\:c_secondary-3,
.active > .a\:c_secondary-3 {
  color: #c2c3c7 !important;
}

.active.a\:c_secondary-4,
.active > .a\:c_secondary-4 {
  color: #dedee0 !important;
}

.active.a\:c_secondary-5,
.active > .a\:c_secondary-5 {
  color: #f0f0f1 !important;
}

.active.a\:c_secondary-n1,
.active > .a\:c_secondary-n1 {
  color: #5d5f67 !important;
}

.active.a\:c_secondary-n2,
.active > .a\:c_secondary-n2 {
  color: #4d5056 !important;
}

.active.a\:c_secondary-n3,
.active > .a\:c_secondary-n3 {
  color: #393a3f !important;
}

.active.a\:c_secondary-n4,
.active > .a\:c_secondary-n4 {
  color: #292a2e !important;
}

.active.a\:c_secondary-n5,
.active > .a\:c_secondary-n5 {
  color: #1a1b1d !important;
}

.active.a\:bg_success,
.active > .a\:bg_success,.active.a\:bg_success-0,
.active > .a\:bg_success-0 {
  background-color: #078a2e !important;
}

.active.a\:bg_success-1,
.active > .a\:bg_success-1 {
  background-color: #2c9c4d !important;
}

.active.a\:bg_success-2,
.active > .a\:bg_success-2 {
  background-color: #63b57b !important;
}

.active.a\:bg_success-3,
.active > .a\:bg_success-3 {
  background-color: #9cd0ab !important;
}

.active.a\:bg_success-4,
.active > .a\:bg_success-4 {
  background-color: #c8e5d1 !important;
}

.active.a\:bg_success-5,
.active > .a\:bg_success-5 {
  background-color: #e6f3ea !important;
}

.active.a\:bg_success-n1,
.active > .a\:bg_success-n1 {
  background-color: #067c29 !important;
}

.active.a\:bg_success-n2,
.active > .a\:bg_success-n2 {
  background-color: #056823 !important;
}

.active.a\:bg_success-n3,
.active > .a\:bg_success-n3 {
  background-color: #044c19 !important;
}

.active.a\:bg_success-n4,
.active > .a\:bg_success-n4 {
  background-color: #033712 !important;
}

.active.a\:bg_success-n5,
.active > .a\:bg_success-n5 {
  background-color: #02230c !important;
}

.active.a\:c_success,
.active > .a\:c_success,.active.a\:c_success-0,
.active > .a\:c_success-0 {
  color: #078a2e !important;
}

.active.a\:c_success-1,
.active > .a\:c_success-1 {
  color: #2c9c4d !important;
}

.active.a\:c_success-2,
.active > .a\:c_success-2 {
  color: #63b57b !important;
}

.active.a\:c_success-3,
.active > .a\:c_success-3 {
  color: #9cd0ab !important;
}

.active.a\:c_success-4,
.active > .a\:c_success-4 {
  color: #c8e5d1 !important;
}

.active.a\:c_success-5,
.active > .a\:c_success-5 {
  color: #e6f3ea !important;
}

.active.a\:c_success-n1,
.active > .a\:c_success-n1 {
  color: #067c29 !important;
}

.active.a\:c_success-n2,
.active > .a\:c_success-n2 {
  color: #056823 !important;
}

.active.a\:c_success-n3,
.active > .a\:c_success-n3 {
  color: #044c19 !important;
}

.active.a\:c_success-n4,
.active > .a\:c_success-n4 {
  color: #033712 !important;
}

.active.a\:c_success-n5,
.active > .a\:c_success-n5 {
  color: #02230c !important;
}

.active.a\:bg_shade,
.active > .a\:bg_shade,.active.a\:bg_shade-0,
.active > .a\:bg_shade-0 {
  background-color: #898989 !important;
}

.active.a\:bg_shade-1,
.active > .a\:bg_shade-1 {
  background-color: #9b9b9b !important;
}

.active.a\:bg_shade-2,
.active > .a\:bg_shade-2 {
  background-color: #b5b5b5 !important;
}

.active.a\:bg_shade-3,
.active > .a\:bg_shade-3 {
  background-color: #d0d0d0 !important;
}

.active.a\:bg_shade-4,
.active > .a\:bg_shade-4 {
  background-color: #e5e5e5 !important;
}

.active.a\:bg_shade-5,
.active > .a\:bg_shade-5 {
  background-color: #f3f3f3 !important;
}

.active.a\:bg_shade-n1,
.active > .a\:bg_shade-n1 {
  background-color: #7b7b7b !important;
}

.active.a\:bg_shade-n2,
.active > .a\:bg_shade-n2 {
  background-color: #676767 !important;
}

.active.a\:bg_shade-n3,
.active > .a\:bg_shade-n3 {
  background-color: #4b4b4b !important;
}

.active.a\:bg_shade-n4,
.active > .a\:bg_shade-n4 {
  background-color: #373737 !important;
}

.active.a\:bg_shade-n5,
.active > .a\:bg_shade-n5 {
  background-color: #222222 !important;
}

.active.a\:c_shade,
.active > .a\:c_shade,.active.a\:c_shade-0,
.active > .a\:c_shade-0 {
  color: #898989 !important;
}

.active.a\:c_shade-1,
.active > .a\:c_shade-1 {
  color: #9b9b9b !important;
}

.active.a\:c_shade-2,
.active > .a\:c_shade-2 {
  color: #b5b5b5 !important;
}

.active.a\:c_shade-3,
.active > .a\:c_shade-3 {
  color: #d0d0d0 !important;
}

.active.a\:c_shade-4,
.active > .a\:c_shade-4 {
  color: #e5e5e5 !important;
}

.active.a\:c_shade-5,
.active > .a\:c_shade-5 {
  color: #f3f3f3 !important;
}

.active.a\:c_shade-n1,
.active > .a\:c_shade-n1 {
  color: #7b7b7b !important;
}

.active.a\:c_shade-n2,
.active > .a\:c_shade-n2 {
  color: #676767 !important;
}

.active.a\:c_shade-n3,
.active > .a\:c_shade-n3 {
  color: #4b4b4b !important;
}

.active.a\:c_shade-n4,
.active > .a\:c_shade-n4 {
  color: #373737 !important;
}

.active.a\:c_shade-n5,
.active > .a\:c_shade-n5 {
  color: #222222 !important;
}

.active.a\:bg_warning,
.active > .a\:bg_warning,.active.a\:bg_warning-0,
.active > .a\:bg_warning-0 {
  background-color: #da8210 !important;
}

.active.a\:bg_warning-1,
.active > .a\:bg_warning-1 {
  background-color: #e09534 !important;
}

.active.a\:bg_warning-2,
.active > .a\:bg_warning-2 {
  background-color: #e8b068 !important;
}

.active.a\:bg_warning-3,
.active > .a\:bg_warning-3 {
  background-color: #f0cd9f !important;
}

.active.a\:bg_warning-4,
.active > .a\:bg_warning-4 {
  background-color: #f7e4ca !important;
}

.active.a\:bg_warning-5,
.active > .a\:bg_warning-5 {
  background-color: #fbf3e7 !important;
}

.active.a\:bg_warning-n1,
.active > .a\:bg_warning-n1 {
  background-color: #c4750e !important;
}

.active.a\:bg_warning-n2,
.active > .a\:bg_warning-n2 {
  background-color: #a4620c !important;
}

.active.a\:bg_warning-n3,
.active > .a\:bg_warning-n3 {
  background-color: #784809 !important;
}

.active.a\:bg_warning-n4,
.active > .a\:bg_warning-n4 {
  background-color: #573406 !important;
}

.active.a\:bg_warning-n5,
.active > .a\:bg_warning-n5 {
  background-color: #372104 !important;
}

.active.a\:c_warning,
.active > .a\:c_warning,.active.a\:c_warning-0,
.active > .a\:c_warning-0 {
  color: #da8210 !important;
}

.active.a\:c_warning-1,
.active > .a\:c_warning-1 {
  color: #e09534 !important;
}

.active.a\:c_warning-2,
.active > .a\:c_warning-2 {
  color: #e8b068 !important;
}

.active.a\:c_warning-3,
.active > .a\:c_warning-3 {
  color: #f0cd9f !important;
}

.active.a\:c_warning-4,
.active > .a\:c_warning-4 {
  color: #f7e4ca !important;
}

.active.a\:c_warning-5,
.active > .a\:c_warning-5 {
  color: #fbf3e7 !important;
}

.active.a\:c_warning-n1,
.active > .a\:c_warning-n1 {
  color: #c4750e !important;
}

.active.a\:c_warning-n2,
.active > .a\:c_warning-n2 {
  color: #a4620c !important;
}

.active.a\:c_warning-n3,
.active > .a\:c_warning-n3 {
  color: #784809 !important;
}

.active.a\:c_warning-n4,
.active > .a\:c_warning-n4 {
  color: #573406 !important;
}

.active.a\:c_warning-n5,
.active > .a\:c_warning-n5 {
  color: #372104 !important;
}

.active.a\:bg_alert,
.active > .a\:bg_alert,.active.a\:bg_alert-0,
.active > .a\:bg_alert-0 {
  background-color: #dd1a1a !important;
}

.active.a\:bg_alert-1,
.active > .a\:bg_alert-1 {
  background-color: #e23c3c !important;
}

.active.a\:bg_alert-2,
.active > .a\:bg_alert-2 {
  background-color: #ea6f6f !important;
}

.active.a\:bg_alert-3,
.active > .a\:bg_alert-3 {
  background-color: #f1a3a3 !important;
}

.active.a\:bg_alert-4,
.active > .a\:bg_alert-4 {
  background-color: #f8cdcd !important;
}

.active.a\:bg_alert-5,
.active > .a\:bg_alert-5 {
  background-color: #fce8e8 !important;
}

.active.a\:bg_alert-n1,
.active > .a\:bg_alert-n1 {
  background-color: #c71717 !important;
}

.active.a\:bg_alert-n2,
.active > .a\:bg_alert-n2 {
  background-color: #a61414 !important;
}

.active.a\:bg_alert-n3,
.active > .a\:bg_alert-n3 {
  background-color: #7a0e0e !important;
}

.active.a\:bg_alert-n4,
.active > .a\:bg_alert-n4 {
  background-color: #580a0a !important;
}

.active.a\:bg_alert-n5,
.active > .a\:bg_alert-n5 {
  background-color: #370707 !important;
}

.active.a\:c_alert,
.active > .a\:c_alert,.active.a\:c_alert-0,
.active > .a\:c_alert-0 {
  color: #dd1a1a !important;
}

.active.a\:c_alert-1,
.active > .a\:c_alert-1 {
  color: #e23c3c !important;
}

.active.a\:c_alert-2,
.active > .a\:c_alert-2 {
  color: #ea6f6f !important;
}

.active.a\:c_alert-3,
.active > .a\:c_alert-3 {
  color: #f1a3a3 !important;
}

.active.a\:c_alert-4,
.active > .a\:c_alert-4 {
  color: #f8cdcd !important;
}

.active.a\:c_alert-5,
.active > .a\:c_alert-5 {
  color: #fce8e8 !important;
}

.active.a\:c_alert-n1,
.active > .a\:c_alert-n1 {
  color: #c71717 !important;
}

.active.a\:c_alert-n2,
.active > .a\:c_alert-n2 {
  color: #a61414 !important;
}

.active.a\:c_alert-n3,
.active > .a\:c_alert-n3 {
  color: #7a0e0e !important;
}

.active.a\:c_alert-n4,
.active > .a\:c_alert-n4 {
  color: #580a0a !important;
}

.active.a\:c_alert-n5,
.active > .a\:c_alert-n5 {
  color: #370707 !important;
}

.active.a\:bg_navigation,
.active > .a\:bg_navigation,.active.a\:bg_navigation-0,
.active > .a\:bg_navigation-0 {
  background-color: #2b58c0 !important;
}

.active.a\:bg_navigation-1,
.active > .a\:bg_navigation-1 {
  background-color: #4b71c9 !important;
}

.active.a\:bg_navigation-2,
.active > .a\:bg_navigation-2 {
  background-color: #7996d7 !important;
}

.active.a\:bg_navigation-3,
.active > .a\:bg_navigation-3 {
  background-color: #aabce6 !important;
}

.active.a\:bg_navigation-4,
.active > .a\:bg_navigation-4 {
  background-color: #d0daf1 !important;
}

.active.a\:bg_navigation-5,
.active > .a\:bg_navigation-5 {
  background-color: #eaeef9 !important;
}

.active.a\:bg_navigation-n1,
.active > .a\:bg_navigation-n1 {
  background-color: #274fad !important;
}

.active.a\:bg_navigation-n2,
.active > .a\:bg_navigation-n2 {
  background-color: #204290 !important;
}

.active.a\:bg_navigation-n3,
.active > .a\:bg_navigation-n3 {
  background-color: #18306a !important;
}

.active.a\:bg_navigation-n4,
.active > .a\:bg_navigation-n4 {
  background-color: #11234d !important;
}

.active.a\:bg_navigation-n5,
.active > .a\:bg_navigation-n5 {
  background-color: #0b1630 !important;
}

.active.a\:c_navigation,
.active > .a\:c_navigation,.active.a\:c_navigation-0,
.active > .a\:c_navigation-0 {
  color: #2b58c0 !important;
}

.active.a\:c_navigation-1,
.active > .a\:c_navigation-1 {
  color: #4b71c9 !important;
}

.active.a\:c_navigation-2,
.active > .a\:c_navigation-2 {
  color: #7996d7 !important;
}

.active.a\:c_navigation-3,
.active > .a\:c_navigation-3 {
  color: #aabce6 !important;
}

.active.a\:c_navigation-4,
.active > .a\:c_navigation-4 {
  color: #d0daf1 !important;
}

.active.a\:c_navigation-5,
.active > .a\:c_navigation-5 {
  color: #eaeef9 !important;
}

.active.a\:c_navigation-n1,
.active > .a\:c_navigation-n1 {
  color: #274fad !important;
}

.active.a\:c_navigation-n2,
.active > .a\:c_navigation-n2 {
  color: #204290 !important;
}

.active.a\:c_navigation-n3,
.active > .a\:c_navigation-n3 {
  color: #18306a !important;
}

.active.a\:c_navigation-n4,
.active > .a\:c_navigation-n4 {
  color: #11234d !important;
}

.active.a\:c_navigation-n5,
.active > .a\:c_navigation-n5 {
  color: #0b1630 !important;
}

.active.a\:bg_accent,
.active > .a\:bg_accent,.active.a\:bg_accent-0,
.active > .a\:bg_accent-0 {
  background-color: #16a385 !important;
}

.active.a\:bg_accent-1,
.active > .a\:bg_accent-1 {
  background-color: #39b197 !important;
}

.active.a\:bg_accent-2,
.active > .a\:bg_accent-2 {
  background-color: #6cc5b2 !important;
}

.active.a\:bg_accent-3,
.active > .a\:bg_accent-3 {
  background-color: #a2dace !important;
}

.active.a\:bg_accent-4,
.active > .a\:bg_accent-4 {
  background-color: #ccebe4 !important;
}

.active.a\:bg_accent-5,
.active > .a\:bg_accent-5 {
  background-color: #e8f6f3 !important;
}

.active.a\:bg_accent-n1,
.active > .a\:bg_accent-n1 {
  background-color: #149378 !important;
}

.active.a\:bg_accent-n2,
.active > .a\:bg_accent-n2 {
  background-color: #117a64 !important;
}

.active.a\:bg_accent-n3,
.active > .a\:bg_accent-n3 {
  background-color: #0c5a49 !important;
}

.active.a\:bg_accent-n4,
.active > .a\:bg_accent-n4 {
  background-color: #094135 !important;
}

.active.a\:bg_accent-n5,
.active > .a\:bg_accent-n5 {
  background-color: #062921 !important;
}

.active.a\:c_accent,
.active > .a\:c_accent,.active.a\:c_accent-0,
.active > .a\:c_accent-0 {
  color: #16a385 !important;
}

.active.a\:c_accent-1,
.active > .a\:c_accent-1 {
  color: #39b197 !important;
}

.active.a\:c_accent-2,
.active > .a\:c_accent-2 {
  color: #6cc5b2 !important;
}

.active.a\:c_accent-3,
.active > .a\:c_accent-3 {
  color: #a2dace !important;
}

.active.a\:c_accent-4,
.active > .a\:c_accent-4 {
  color: #ccebe4 !important;
}

.active.a\:c_accent-5,
.active > .a\:c_accent-5 {
  color: #e8f6f3 !important;
}

.active.a\:c_accent-n1,
.active > .a\:c_accent-n1 {
  color: #149378 !important;
}

.active.a\:c_accent-n2,
.active > .a\:c_accent-n2 {
  color: #117a64 !important;
}

.active.a\:c_accent-n3,
.active > .a\:c_accent-n3 {
  color: #0c5a49 !important;
}

.active.a\:c_accent-n4,
.active > .a\:c_accent-n4 {
  color: #094135 !important;
}

.active.a\:c_accent-n5,
.active > .a\:c_accent-n5 {
  color: #062921 !important;
}

.active.a\:bg_info,
.active > .a\:bg_info,.active.a\:bg_info-0,
.active > .a\:bg_info-0 {
  background-color: #a3988c !important;
}

.active.a\:bg_info-1,
.active > .a\:bg_info-1 {
  background-color: #b1a79d !important;
}

.active.a\:bg_info-2,
.active > .a\:bg_info-2 {
  background-color: #c5beb7 !important;
}

.active.a\:bg_info-3,
.active > .a\:bg_info-3 {
  background-color: #dad6d1 !important;
}

.active.a\:bg_info-4,
.active > .a\:bg_info-4 {
  background-color: #ebe8e6 !important;
}

.active.a\:bg_info-5,
.active > .a\:bg_info-5 {
  background-color: #f6f5f4 !important;
}

.active.a\:bg_info-n1,
.active > .a\:bg_info-n1 {
  background-color: #93897e !important;
}

.active.a\:bg_info-n2,
.active > .a\:bg_info-n2 {
  background-color: #7a7269 !important;
}

.active.a\:bg_info-n3,
.active > .a\:bg_info-n3 {
  background-color: #5a544d !important;
}

.active.a\:bg_info-n4,
.active > .a\:bg_info-n4 {
  background-color: #413d38 !important;
}

.active.a\:bg_info-n5,
.active > .a\:bg_info-n5 {
  background-color: #292623 !important;
}

.active.a\:c_info,
.active > .a\:c_info,.active.a\:c_info-0,
.active > .a\:c_info-0 {
  color: #a3988c !important;
}

.active.a\:c_info-1,
.active > .a\:c_info-1 {
  color: #b1a79d !important;
}

.active.a\:c_info-2,
.active > .a\:c_info-2 {
  color: #c5beb7 !important;
}

.active.a\:c_info-3,
.active > .a\:c_info-3 {
  color: #dad6d1 !important;
}

.active.a\:c_info-4,
.active > .a\:c_info-4 {
  color: #ebe8e6 !important;
}

.active.a\:c_info-5,
.active > .a\:c_info-5 {
  color: #f6f5f4 !important;
}

.active.a\:c_info-n1,
.active > .a\:c_info-n1 {
  color: #93897e !important;
}

.active.a\:c_info-n2,
.active > .a\:c_info-n2 {
  color: #7a7269 !important;
}

.active.a\:c_info-n3,
.active > .a\:c_info-n3 {
  color: #5a544d !important;
}

.active.a\:c_info-n4,
.active > .a\:c_info-n4 {
  color: #413d38 !important;
}

.active.a\:c_info-n5,
.active > .a\:c_info-n5 {
  color: #292623 !important;
}

.active.a\:bg_highlight,
.active > .a\:bg_highlight,.active.a\:bg_highlight-0,
.active > .a\:bg_highlight-0 {
  background-color: #7742bd !important;
}

.active.a\:bg_highlight-1,
.active > .a\:bg_highlight-1 {
  background-color: #8b5ec7 !important;
}

.active.a\:bg_highlight-2,
.active > .a\:bg_highlight-2 {
  background-color: #a988d5 !important;
}

.active.a\:bg_highlight-3,
.active > .a\:bg_highlight-3 {
  background-color: #c9b3e5 !important;
}

.active.a\:bg_highlight-4,
.active > .a\:bg_highlight-4 {
  background-color: #e1d5f0 !important;
}

.active.a\:bg_highlight-5,
.active > .a\:bg_highlight-5 {
  background-color: #f1ecf8 !important;
}

.active.a\:bg_highlight-n1,
.active > .a\:bg_highlight-n1 {
  background-color: #6b3baa !important;
}

.active.a\:bg_highlight-n2,
.active > .a\:bg_highlight-n2 {
  background-color: #59328e !important;
}

.active.a\:bg_highlight-n3,
.active > .a\:bg_highlight-n3 {
  background-color: #412468 !important;
}

.active.a\:bg_highlight-n4,
.active > .a\:bg_highlight-n4 {
  background-color: #301a4c !important;
}

.active.a\:bg_highlight-n5,
.active > .a\:bg_highlight-n5 {
  background-color: #1e112f !important;
}

.active.a\:c_highlight,
.active > .a\:c_highlight,.active.a\:c_highlight-0,
.active > .a\:c_highlight-0 {
  color: #7742bd !important;
}

.active.a\:c_highlight-1,
.active > .a\:c_highlight-1 {
  color: #8b5ec7 !important;
}

.active.a\:c_highlight-2,
.active > .a\:c_highlight-2 {
  color: #a988d5 !important;
}

.active.a\:c_highlight-3,
.active > .a\:c_highlight-3 {
  color: #c9b3e5 !important;
}

.active.a\:c_highlight-4,
.active > .a\:c_highlight-4 {
  color: #e1d5f0 !important;
}

.active.a\:c_highlight-5,
.active > .a\:c_highlight-5 {
  color: #f1ecf8 !important;
}

.active.a\:c_highlight-n1,
.active > .a\:c_highlight-n1 {
  color: #6b3baa !important;
}

.active.a\:c_highlight-n2,
.active > .a\:c_highlight-n2 {
  color: #59328e !important;
}

.active.a\:c_highlight-n3,
.active > .a\:c_highlight-n3 {
  color: #412468 !important;
}

.active.a\:c_highlight-n4,
.active > .a\:c_highlight-n4 {
  color: #301a4c !important;
}

.active.a\:c_highlight-n5,
.active > .a\:c_highlight-n5 {
  color: #1e112f !important;
}

.active.a\:bg_acc,
.active > .a\:bg_acc,.active.a\:bg_acc-0,
.active > .a\:bg_acc-0 {
  background-color: #004176 !important;
}

.active.a\:bg_acc-1,
.active > .a\:bg_acc-1 {
  background-color: #265e8b !important;
}

.active.a\:bg_acc-2,
.active > .a\:bg_acc-2 {
  background-color: #5e87a9 !important;
}

.active.a\:bg_acc-3,
.active > .a\:bg_acc-3 {
  background-color: #99b3c8 !important;
}

.active.a\:bg_acc-4,
.active > .a\:bg_acc-4 {
  background-color: #c7d5e1 !important;
}

.active.a\:bg_acc-5,
.active > .a\:bg_acc-5 {
  background-color: #e6ecf1 !important;
}

.active.a\:bg_acc-n1,
.active > .a\:bg_acc-n1 {
  background-color: #003b6a !important;
}

.active.a\:bg_acc-n2,
.active > .a\:bg_acc-n2 {
  background-color: #003159 !important;
}

.active.a\:bg_acc-n3,
.active > .a\:bg_acc-n3 {
  background-color: #002441 !important;
}

.active.a\:bg_acc-n4,
.active > .a\:bg_acc-n4 {
  background-color: #001a2f !important;
}

.active.a\:bg_acc-n5,
.active > .a\:bg_acc-n5 {
  background-color: #00101e !important;
}

.active.a\:c_acc,
.active > .a\:c_acc,.active.a\:c_acc-0,
.active > .a\:c_acc-0 {
  color: #004176 !important;
}

.active.a\:c_acc-1,
.active > .a\:c_acc-1 {
  color: #265e8b !important;
}

.active.a\:c_acc-2,
.active > .a\:c_acc-2 {
  color: #5e87a9 !important;
}

.active.a\:c_acc-3,
.active > .a\:c_acc-3 {
  color: #99b3c8 !important;
}

.active.a\:c_acc-4,
.active > .a\:c_acc-4 {
  color: #c7d5e1 !important;
}

.active.a\:c_acc-5,
.active > .a\:c_acc-5 {
  color: #e6ecf1 !important;
}

.active.a\:c_acc-n1,
.active > .a\:c_acc-n1 {
  color: #003b6a !important;
}

.active.a\:c_acc-n2,
.active > .a\:c_acc-n2 {
  color: #003159 !important;
}

.active.a\:c_acc-n3,
.active > .a\:c_acc-n3 {
  color: #002441 !important;
}

.active.a\:c_acc-n4,
.active > .a\:c_acc-n4 {
  color: #001a2f !important;
}

.active.a\:c_acc-n5,
.active > .a\:c_acc-n5 {
  color: #00101e !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;
}

/*
Is 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 "is-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 UC.is-active.display

*/
/*
Hover

Decorate containers and text to show user intereaction with simple hover, and focus effects. 


Weight: 130

Styleguide UC.hover
*/
/* No styleguide reference. */
/*
  Hover:Background Color

  hovers can easily be added to objects by adding `hover:` or `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 UC.hover.background

 */
a:focus {
  color: unset;
}

*[class*="hover:"],
*[class*="h:"] {
  cursor: pointer;
  transition: all ease-out 0.2s;
}
*[class*="hover:"]:focus,
*[class*="h:"]:focus {
  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: #198dae !important;
}

.h\:bg_primary-1:hover {
  background-color: #3c9eba !important;
}

.h\:bg_primary-2:hover {
  background-color: #6eb7cc !important;
}

.h\:bg_primary-3:hover {
  background-color: #a3d1df !important;
}

.h\:bg_primary-4:hover {
  background-color: #cce6ed !important;
}

.h\:bg_primary-5:hover {
  background-color: #e8f4f7 !important;
}

.h\:bg_primary-n1:hover {
  background-color: #177f9d !important;
}

.h\:bg_primary-n2:hover, .btn_acc-primary:hover {
  background-color: #136a83 !important;
}

.h\:bg_primary-n3:hover {
  background-color: #0e4e60 !important;
}

.h\:bg_primary-n4:hover {
  background-color: #0a3846 !important;
}

.h\:bg_primary-n5:hover {
  background-color: #06232c !important;
}

.h\:c_primary:hover,.h\:c_primary-0:hover {
  color: #198dae !important;
}

.h\:c_primary-1:hover {
  color: #3c9eba !important;
}

.h\:c_primary-2:hover {
  color: #6eb7cc !important;
}

.h\:c_primary-3:hover {
  color: #a3d1df !important;
}

.h\:c_primary-4:hover {
  color: #cce6ed !important;
}

.h\:c_primary-5:hover {
  color: #e8f4f7 !important;
}

.h\:c_primary-n1:hover {
  color: #177f9d !important;
}

.h\:c_primary-n2:hover {
  color: #136a83 !important;
}

.h\:c_primary-n3:hover {
  color: #0e4e60 !important;
}

.h\:c_primary-n4:hover {
  color: #0a3846 !important;
}

.h\:c_primary-n5:hover {
  color: #06232c !important;
}

.h\:br_primary:hover,.h\:br_primary-0:hover {
  border-color: #198dae !important;
}

.h\:br_primary-1:hover {
  border-color: #3c9eba !important;
}

.h\:br_primary-2:hover {
  border-color: #6eb7cc !important;
}

.h\:br_primary-3:hover {
  border-color: #a3d1df !important;
}

.h\:br_primary-4:hover {
  border-color: #cce6ed !important;
}

.h\:br_primary-5:hover {
  border-color: #e8f4f7 !important;
}

.h\:br_primary-n1:hover {
  border-color: #177f9d !important;
}

.h\:br_primary-n2:hover {
  border-color: #136a83 !important;
}

.h\:br_primary-n3:hover {
  border-color: #0e4e60 !important;
}

.h\:br_primary-n4:hover {
  border-color: #0a3846 !important;
}

.h\:br_primary-n5:hover {
  border-color: #06232c !important;
}

.h\:bg_secondary:hover,.h\:bg_secondary-0:hover {
  background-color: #676a72 !important;
}

.h\:bg_secondary-1:hover {
  background-color: #7e8087 !important;
}

.h\:bg_secondary-2:hover {
  background-color: #9fa1a6 !important;
}

.h\:bg_secondary-3:hover {
  background-color: #c2c3c7 !important;
}

.h\:bg_secondary-4:hover {
  background-color: #dedee0 !important;
}

.h\:bg_secondary-5:hover {
  background-color: #f0f0f1 !important;
}

.h\:bg_secondary-n1:hover {
  background-color: #5d5f67 !important;
}

.h\:bg_secondary-n2:hover {
  background-color: #4d5056 !important;
}

.h\:bg_secondary-n3:hover {
  background-color: #393a3f !important;
}

.h\:bg_secondary-n4:hover {
  background-color: #292a2e !important;
}

.h\:bg_secondary-n5:hover {
  background-color: #1a1b1d !important;
}

.h\:c_secondary:hover,.h\:c_secondary-0:hover {
  color: #676a72 !important;
}

.h\:c_secondary-1:hover {
  color: #7e8087 !important;
}

.h\:c_secondary-2:hover {
  color: #9fa1a6 !important;
}

.h\:c_secondary-3:hover {
  color: #c2c3c7 !important;
}

.h\:c_secondary-4:hover {
  color: #dedee0 !important;
}

.h\:c_secondary-5:hover {
  color: #f0f0f1 !important;
}

.h\:c_secondary-n1:hover {
  color: #5d5f67 !important;
}

.h\:c_secondary-n2:hover {
  color: #4d5056 !important;
}

.h\:c_secondary-n3:hover {
  color: #393a3f !important;
}

.h\:c_secondary-n4:hover {
  color: #292a2e !important;
}

.h\:c_secondary-n5:hover {
  color: #1a1b1d !important;
}

.h\:br_secondary:hover,.h\:br_secondary-0:hover {
  border-color: #676a72 !important;
}

.h\:br_secondary-1:hover {
  border-color: #7e8087 !important;
}

.h\:br_secondary-2:hover {
  border-color: #9fa1a6 !important;
}

.h\:br_secondary-3:hover {
  border-color: #c2c3c7 !important;
}

.h\:br_secondary-4:hover {
  border-color: #dedee0 !important;
}

.h\:br_secondary-5:hover {
  border-color: #f0f0f1 !important;
}

.h\:br_secondary-n1:hover {
  border-color: #5d5f67 !important;
}

.h\:br_secondary-n2:hover {
  border-color: #4d5056 !important;
}

.h\:br_secondary-n3:hover {
  border-color: #393a3f !important;
}

.h\:br_secondary-n4:hover {
  border-color: #292a2e !important;
}

.h\:br_secondary-n5:hover {
  border-color: #1a1b1d !important;
}

.h\:bg_success:hover,.h\:bg_success-0:hover {
  background-color: #078a2e !important;
}

.h\:bg_success-1:hover {
  background-color: #2c9c4d !important;
}

.h\:bg_success-2:hover {
  background-color: #63b57b !important;
}

.h\:bg_success-3:hover {
  background-color: #9cd0ab !important;
}

.h\:bg_success-4:hover {
  background-color: #c8e5d1 !important;
}

.h\:bg_success-5:hover {
  background-color: #e6f3ea !important;
}

.h\:bg_success-n1:hover {
  background-color: #067c29 !important;
}

.h\:bg_success-n2:hover {
  background-color: #056823 !important;
}

.h\:bg_success-n3:hover {
  background-color: #044c19 !important;
}

.h\:bg_success-n4:hover {
  background-color: #033712 !important;
}

.h\:bg_success-n5:hover {
  background-color: #02230c !important;
}

.h\:c_success:hover,.h\:c_success-0:hover {
  color: #078a2e !important;
}

.h\:c_success-1:hover {
  color: #2c9c4d !important;
}

.h\:c_success-2:hover {
  color: #63b57b !important;
}

.h\:c_success-3:hover {
  color: #9cd0ab !important;
}

.h\:c_success-4:hover {
  color: #c8e5d1 !important;
}

.h\:c_success-5:hover {
  color: #e6f3ea !important;
}

.h\:c_success-n1:hover {
  color: #067c29 !important;
}

.h\:c_success-n2:hover {
  color: #056823 !important;
}

.h\:c_success-n3:hover {
  color: #044c19 !important;
}

.h\:c_success-n4:hover {
  color: #033712 !important;
}

.h\:c_success-n5:hover {
  color: #02230c !important;
}

.h\:br_success:hover,.h\:br_success-0:hover {
  border-color: #078a2e !important;
}

.h\:br_success-1:hover {
  border-color: #2c9c4d !important;
}

.h\:br_success-2:hover {
  border-color: #63b57b !important;
}

.h\:br_success-3:hover {
  border-color: #9cd0ab !important;
}

.h\:br_success-4:hover {
  border-color: #c8e5d1 !important;
}

.h\:br_success-5:hover {
  border-color: #e6f3ea !important;
}

.h\:br_success-n1:hover {
  border-color: #067c29 !important;
}

.h\:br_success-n2:hover {
  border-color: #056823 !important;
}

.h\:br_success-n3:hover {
  border-color: #044c19 !important;
}

.h\:br_success-n4:hover {
  border-color: #033712 !important;
}

.h\:br_success-n5:hover {
  border-color: #02230c !important;
}

.h\:bg_shade:hover,.h\:bg_shade-0:hover {
  background-color: #898989 !important;
}

.h\:bg_shade-1:hover {
  background-color: #9b9b9b !important;
}

.h\:bg_shade-2:hover {
  background-color: #b5b5b5 !important;
}

.h\:bg_shade-3:hover {
  background-color: #d0d0d0 !important;
}

.h\:bg_shade-4:hover {
  background-color: #e5e5e5 !important;
}

.h\:bg_shade-5:hover {
  background-color: #f3f3f3 !important;
}

.h\:bg_shade-n1:hover {
  background-color: #7b7b7b !important;
}

.h\:bg_shade-n2:hover {
  background-color: #676767 !important;
}

.h\:bg_shade-n3:hover {
  background-color: #4b4b4b !important;
}

.h\:bg_shade-n4:hover {
  background-color: #373737 !important;
}

.h\:bg_shade-n5:hover {
  background-color: #222222 !important;
}

.h\:c_shade:hover,.h\:c_shade-0:hover {
  color: #898989 !important;
}

.h\:c_shade-1:hover {
  color: #9b9b9b !important;
}

.h\:c_shade-2:hover {
  color: #b5b5b5 !important;
}

.h\:c_shade-3:hover {
  color: #d0d0d0 !important;
}

.h\:c_shade-4:hover {
  color: #e5e5e5 !important;
}

.h\:c_shade-5:hover {
  color: #f3f3f3 !important;
}

.h\:c_shade-n1:hover {
  color: #7b7b7b !important;
}

.h\:c_shade-n2:hover {
  color: #676767 !important;
}

.h\:c_shade-n3:hover {
  color: #4b4b4b !important;
}

.h\:c_shade-n4:hover {
  color: #373737 !important;
}

.h\:c_shade-n5:hover {
  color: #222222 !important;
}

.h\:br_shade:hover,.h\:br_shade-0:hover {
  border-color: #898989 !important;
}

.h\:br_shade-1:hover {
  border-color: #9b9b9b !important;
}

.h\:br_shade-2:hover {
  border-color: #b5b5b5 !important;
}

.h\:br_shade-3:hover {
  border-color: #d0d0d0 !important;
}

.h\:br_shade-4:hover {
  border-color: #e5e5e5 !important;
}

.h\:br_shade-5:hover {
  border-color: #f3f3f3 !important;
}

.h\:br_shade-n1:hover {
  border-color: #7b7b7b !important;
}

.h\:br_shade-n2:hover {
  border-color: #676767 !important;
}

.h\:br_shade-n3:hover {
  border-color: #4b4b4b !important;
}

.h\:br_shade-n4:hover {
  border-color: #373737 !important;
}

.h\:br_shade-n5:hover {
  border-color: #222222 !important;
}

.h\:bg_warning:hover,.h\:bg_warning-0:hover {
  background-color: #da8210 !important;
}

.h\:bg_warning-1:hover {
  background-color: #e09534 !important;
}

.h\:bg_warning-2:hover {
  background-color: #e8b068 !important;
}

.h\:bg_warning-3:hover {
  background-color: #f0cd9f !important;
}

.h\:bg_warning-4:hover {
  background-color: #f7e4ca !important;
}

.h\:bg_warning-5:hover {
  background-color: #fbf3e7 !important;
}

.h\:bg_warning-n1:hover {
  background-color: #c4750e !important;
}

.h\:bg_warning-n2:hover {
  background-color: #a4620c !important;
}

.h\:bg_warning-n3:hover {
  background-color: #784809 !important;
}

.h\:bg_warning-n4:hover {
  background-color: #573406 !important;
}

.h\:bg_warning-n5:hover {
  background-color: #372104 !important;
}

.h\:c_warning:hover,.h\:c_warning-0:hover {
  color: #da8210 !important;
}

.h\:c_warning-1:hover {
  color: #e09534 !important;
}

.h\:c_warning-2:hover {
  color: #e8b068 !important;
}

.h\:c_warning-3:hover {
  color: #f0cd9f !important;
}

.h\:c_warning-4:hover {
  color: #f7e4ca !important;
}

.h\:c_warning-5:hover {
  color: #fbf3e7 !important;
}

.h\:c_warning-n1:hover {
  color: #c4750e !important;
}

.h\:c_warning-n2:hover {
  color: #a4620c !important;
}

.h\:c_warning-n3:hover {
  color: #784809 !important;
}

.h\:c_warning-n4:hover {
  color: #573406 !important;
}

.h\:c_warning-n5:hover {
  color: #372104 !important;
}

.h\:br_warning:hover,.h\:br_warning-0:hover {
  border-color: #da8210 !important;
}

.h\:br_warning-1:hover {
  border-color: #e09534 !important;
}

.h\:br_warning-2:hover {
  border-color: #e8b068 !important;
}

.h\:br_warning-3:hover {
  border-color: #f0cd9f !important;
}

.h\:br_warning-4:hover {
  border-color: #f7e4ca !important;
}

.h\:br_warning-5:hover {
  border-color: #fbf3e7 !important;
}

.h\:br_warning-n1:hover {
  border-color: #c4750e !important;
}

.h\:br_warning-n2:hover {
  border-color: #a4620c !important;
}

.h\:br_warning-n3:hover {
  border-color: #784809 !important;
}

.h\:br_warning-n4:hover {
  border-color: #573406 !important;
}

.h\:br_warning-n5:hover {
  border-color: #372104 !important;
}

.h\:bg_alert:hover,.h\:bg_alert-0:hover {
  background-color: #dd1a1a !important;
}

.h\:bg_alert-1:hover {
  background-color: #e23c3c !important;
}

.h\:bg_alert-2:hover {
  background-color: #ea6f6f !important;
}

.h\:bg_alert-3:hover {
  background-color: #f1a3a3 !important;
}

.h\:bg_alert-4:hover {
  background-color: #f8cdcd !important;
}

.h\:bg_alert-5:hover {
  background-color: #fce8e8 !important;
}

.h\:bg_alert-n1:hover {
  background-color: #c71717 !important;
}

.h\:bg_alert-n2:hover {
  background-color: #a61414 !important;
}

.h\:bg_alert-n3:hover {
  background-color: #7a0e0e !important;
}

.h\:bg_alert-n4:hover {
  background-color: #580a0a !important;
}

.h\:bg_alert-n5:hover {
  background-color: #370707 !important;
}

.h\:c_alert:hover,.h\:c_alert-0:hover {
  color: #dd1a1a !important;
}

.h\:c_alert-1:hover {
  color: #e23c3c !important;
}

.h\:c_alert-2:hover {
  color: #ea6f6f !important;
}

.h\:c_alert-3:hover {
  color: #f1a3a3 !important;
}

.h\:c_alert-4:hover {
  color: #f8cdcd !important;
}

.h\:c_alert-5:hover {
  color: #fce8e8 !important;
}

.h\:c_alert-n1:hover {
  color: #c71717 !important;
}

.h\:c_alert-n2:hover {
  color: #a61414 !important;
}

.h\:c_alert-n3:hover {
  color: #7a0e0e !important;
}

.h\:c_alert-n4:hover {
  color: #580a0a !important;
}

.h\:c_alert-n5:hover {
  color: #370707 !important;
}

.h\:br_alert:hover,.h\:br_alert-0:hover {
  border-color: #dd1a1a !important;
}

.h\:br_alert-1:hover {
  border-color: #e23c3c !important;
}

.h\:br_alert-2:hover {
  border-color: #ea6f6f !important;
}

.h\:br_alert-3:hover {
  border-color: #f1a3a3 !important;
}

.h\:br_alert-4:hover {
  border-color: #f8cdcd !important;
}

.h\:br_alert-5:hover {
  border-color: #fce8e8 !important;
}

.h\:br_alert-n1:hover {
  border-color: #c71717 !important;
}

.h\:br_alert-n2:hover {
  border-color: #a61414 !important;
}

.h\:br_alert-n3:hover {
  border-color: #7a0e0e !important;
}

.h\:br_alert-n4:hover {
  border-color: #580a0a !important;
}

.h\:br_alert-n5:hover {
  border-color: #370707 !important;
}

.h\:bg_navigation:hover,.h\:bg_navigation-0:hover {
  background-color: #2b58c0 !important;
}

.h\:bg_navigation-1:hover {
  background-color: #4b71c9 !important;
}

.h\:bg_navigation-2:hover {
  background-color: #7996d7 !important;
}

.h\:bg_navigation-3:hover {
  background-color: #aabce6 !important;
}

.h\:bg_navigation-4:hover {
  background-color: #d0daf1 !important;
}

.h\:bg_navigation-5:hover {
  background-color: #eaeef9 !important;
}

.h\:bg_navigation-n1:hover {
  background-color: #274fad !important;
}

.h\:bg_navigation-n2:hover {
  background-color: #204290 !important;
}

.h\:bg_navigation-n3:hover {
  background-color: #18306a !important;
}

.h\:bg_navigation-n4:hover {
  background-color: #11234d !important;
}

.h\:bg_navigation-n5:hover {
  background-color: #0b1630 !important;
}

.h\:c_navigation:hover,.h\:c_navigation-0:hover {
  color: #2b58c0 !important;
}

.h\:c_navigation-1:hover {
  color: #4b71c9 !important;
}

.h\:c_navigation-2:hover {
  color: #7996d7 !important;
}

.h\:c_navigation-3:hover {
  color: #aabce6 !important;
}

.h\:c_navigation-4:hover {
  color: #d0daf1 !important;
}

.h\:c_navigation-5:hover {
  color: #eaeef9 !important;
}

.h\:c_navigation-n1:hover {
  color: #274fad !important;
}

.h\:c_navigation-n2:hover {
  color: #204290 !important;
}

.h\:c_navigation-n3:hover {
  color: #18306a !important;
}

.h\:c_navigation-n4:hover {
  color: #11234d !important;
}

.h\:c_navigation-n5:hover {
  color: #0b1630 !important;
}

.h\:br_navigation:hover,.h\:br_navigation-0:hover {
  border-color: #2b58c0 !important;
}

.h\:br_navigation-1:hover {
  border-color: #4b71c9 !important;
}

.h\:br_navigation-2:hover {
  border-color: #7996d7 !important;
}

.h\:br_navigation-3:hover {
  border-color: #aabce6 !important;
}

.h\:br_navigation-4:hover {
  border-color: #d0daf1 !important;
}

.h\:br_navigation-5:hover {
  border-color: #eaeef9 !important;
}

.h\:br_navigation-n1:hover {
  border-color: #274fad !important;
}

.h\:br_navigation-n2:hover {
  border-color: #204290 !important;
}

.h\:br_navigation-n3:hover {
  border-color: #18306a !important;
}

.h\:br_navigation-n4:hover {
  border-color: #11234d !important;
}

.h\:br_navigation-n5:hover {
  border-color: #0b1630 !important;
}

.h\:bg_accent:hover,.h\:bg_accent-0:hover {
  background-color: #16a385 !important;
}

.h\:bg_accent-1:hover {
  background-color: #39b197 !important;
}

.h\:bg_accent-2:hover {
  background-color: #6cc5b2 !important;
}

.h\:bg_accent-3:hover {
  background-color: #a2dace !important;
}

.h\:bg_accent-4:hover {
  background-color: #ccebe4 !important;
}

.h\:bg_accent-5:hover {
  background-color: #e8f6f3 !important;
}

.h\:bg_accent-n1:hover {
  background-color: #149378 !important;
}

.h\:bg_accent-n2:hover {
  background-color: #117a64 !important;
}

.h\:bg_accent-n3:hover {
  background-color: #0c5a49 !important;
}

.h\:bg_accent-n4:hover {
  background-color: #094135 !important;
}

.h\:bg_accent-n5:hover {
  background-color: #062921 !important;
}

.h\:c_accent:hover,.h\:c_accent-0:hover {
  color: #16a385 !important;
}

.h\:c_accent-1:hover {
  color: #39b197 !important;
}

.h\:c_accent-2:hover {
  color: #6cc5b2 !important;
}

.h\:c_accent-3:hover {
  color: #a2dace !important;
}

.h\:c_accent-4:hover {
  color: #ccebe4 !important;
}

.h\:c_accent-5:hover {
  color: #e8f6f3 !important;
}

.h\:c_accent-n1:hover {
  color: #149378 !important;
}

.h\:c_accent-n2:hover {
  color: #117a64 !important;
}

.h\:c_accent-n3:hover {
  color: #0c5a49 !important;
}

.h\:c_accent-n4:hover {
  color: #094135 !important;
}

.h\:c_accent-n5:hover {
  color: #062921 !important;
}

.h\:br_accent:hover,.h\:br_accent-0:hover {
  border-color: #16a385 !important;
}

.h\:br_accent-1:hover {
  border-color: #39b197 !important;
}

.h\:br_accent-2:hover {
  border-color: #6cc5b2 !important;
}

.h\:br_accent-3:hover {
  border-color: #a2dace !important;
}

.h\:br_accent-4:hover {
  border-color: #ccebe4 !important;
}

.h\:br_accent-5:hover {
  border-color: #e8f6f3 !important;
}

.h\:br_accent-n1:hover {
  border-color: #149378 !important;
}

.h\:br_accent-n2:hover {
  border-color: #117a64 !important;
}

.h\:br_accent-n3:hover {
  border-color: #0c5a49 !important;
}

.h\:br_accent-n4:hover {
  border-color: #094135 !important;
}

.h\:br_accent-n5:hover {
  border-color: #062921 !important;
}

.h\:bg_info:hover,.h\:bg_info-0:hover {
  background-color: #a3988c !important;
}

.h\:bg_info-1:hover {
  background-color: #b1a79d !important;
}

.h\:bg_info-2:hover {
  background-color: #c5beb7 !important;
}

.h\:bg_info-3:hover {
  background-color: #dad6d1 !important;
}

.h\:bg_info-4:hover {
  background-color: #ebe8e6 !important;
}

.h\:bg_info-5:hover {
  background-color: #f6f5f4 !important;
}

.h\:bg_info-n1:hover {
  background-color: #93897e !important;
}

.h\:bg_info-n2:hover {
  background-color: #7a7269 !important;
}

.h\:bg_info-n3:hover {
  background-color: #5a544d !important;
}

.h\:bg_info-n4:hover {
  background-color: #413d38 !important;
}

.h\:bg_info-n5:hover {
  background-color: #292623 !important;
}

.h\:c_info:hover,.h\:c_info-0:hover {
  color: #a3988c !important;
}

.h\:c_info-1:hover {
  color: #b1a79d !important;
}

.h\:c_info-2:hover {
  color: #c5beb7 !important;
}

.h\:c_info-3:hover {
  color: #dad6d1 !important;
}

.h\:c_info-4:hover {
  color: #ebe8e6 !important;
}

.h\:c_info-5:hover {
  color: #f6f5f4 !important;
}

.h\:c_info-n1:hover {
  color: #93897e !important;
}

.h\:c_info-n2:hover {
  color: #7a7269 !important;
}

.h\:c_info-n3:hover {
  color: #5a544d !important;
}

.h\:c_info-n4:hover {
  color: #413d38 !important;
}

.h\:c_info-n5:hover {
  color: #292623 !important;
}

.h\:br_info:hover,.h\:br_info-0:hover {
  border-color: #a3988c !important;
}

.h\:br_info-1:hover {
  border-color: #b1a79d !important;
}

.h\:br_info-2:hover {
  border-color: #c5beb7 !important;
}

.h\:br_info-3:hover {
  border-color: #dad6d1 !important;
}

.h\:br_info-4:hover {
  border-color: #ebe8e6 !important;
}

.h\:br_info-5:hover {
  border-color: #f6f5f4 !important;
}

.h\:br_info-n1:hover {
  border-color: #93897e !important;
}

.h\:br_info-n2:hover {
  border-color: #7a7269 !important;
}

.h\:br_info-n3:hover {
  border-color: #5a544d !important;
}

.h\:br_info-n4:hover {
  border-color: #413d38 !important;
}

.h\:br_info-n5:hover {
  border-color: #292623 !important;
}

.h\:bg_highlight:hover,.h\:bg_highlight-0:hover {
  background-color: #7742bd !important;
}

.h\:bg_highlight-1:hover {
  background-color: #8b5ec7 !important;
}

.h\:bg_highlight-2:hover {
  background-color: #a988d5 !important;
}

.h\:bg_highlight-3:hover {
  background-color: #c9b3e5 !important;
}

.h\:bg_highlight-4:hover {
  background-color: #e1d5f0 !important;
}

.h\:bg_highlight-5:hover {
  background-color: #f1ecf8 !important;
}

.h\:bg_highlight-n1:hover {
  background-color: #6b3baa !important;
}

.h\:bg_highlight-n2:hover {
  background-color: #59328e !important;
}

.h\:bg_highlight-n3:hover {
  background-color: #412468 !important;
}

.h\:bg_highlight-n4:hover {
  background-color: #301a4c !important;
}

.h\:bg_highlight-n5:hover {
  background-color: #1e112f !important;
}

.h\:c_highlight:hover,.h\:c_highlight-0:hover {
  color: #7742bd !important;
}

.h\:c_highlight-1:hover {
  color: #8b5ec7 !important;
}

.h\:c_highlight-2:hover {
  color: #a988d5 !important;
}

.h\:c_highlight-3:hover {
  color: #c9b3e5 !important;
}

.h\:c_highlight-4:hover {
  color: #e1d5f0 !important;
}

.h\:c_highlight-5:hover {
  color: #f1ecf8 !important;
}

.h\:c_highlight-n1:hover {
  color: #6b3baa !important;
}

.h\:c_highlight-n2:hover {
  color: #59328e !important;
}

.h\:c_highlight-n3:hover {
  color: #412468 !important;
}

.h\:c_highlight-n4:hover {
  color: #301a4c !important;
}

.h\:c_highlight-n5:hover {
  color: #1e112f !important;
}

.h\:br_highlight:hover,.h\:br_highlight-0:hover {
  border-color: #7742bd !important;
}

.h\:br_highlight-1:hover {
  border-color: #8b5ec7 !important;
}

.h\:br_highlight-2:hover {
  border-color: #a988d5 !important;
}

.h\:br_highlight-3:hover {
  border-color: #c9b3e5 !important;
}

.h\:br_highlight-4:hover {
  border-color: #e1d5f0 !important;
}

.h\:br_highlight-5:hover {
  border-color: #f1ecf8 !important;
}

.h\:br_highlight-n1:hover {
  border-color: #6b3baa !important;
}

.h\:br_highlight-n2:hover {
  border-color: #59328e !important;
}

.h\:br_highlight-n3:hover {
  border-color: #412468 !important;
}

.h\:br_highlight-n4:hover {
  border-color: #301a4c !important;
}

.h\:br_highlight-n5:hover {
  border-color: #1e112f !important;
}

.h\:bg_acc:hover,.h\:bg_acc-0:hover {
  background-color: #004176 !important;
}

.h\:bg_acc-1:hover {
  background-color: #265e8b !important;
}

.h\:bg_acc-2:hover {
  background-color: #5e87a9 !important;
}

.h\:bg_acc-3:hover {
  background-color: #99b3c8 !important;
}

.h\:bg_acc-4:hover {
  background-color: #c7d5e1 !important;
}

.h\:bg_acc-5:hover {
  background-color: #e6ecf1 !important;
}

.h\:bg_acc-n1:hover {
  background-color: #003b6a !important;
}

.h\:bg_acc-n2:hover {
  background-color: #003159 !important;
}

.h\:bg_acc-n3:hover {
  background-color: #002441 !important;
}

.h\:bg_acc-n4:hover {
  background-color: #001a2f !important;
}

.h\:bg_acc-n5:hover {
  background-color: #00101e !important;
}

.h\:c_acc:hover,.h\:c_acc-0:hover {
  color: #004176 !important;
}

.h\:c_acc-1:hover {
  color: #265e8b !important;
}

.h\:c_acc-2:hover {
  color: #5e87a9 !important;
}

.h\:c_acc-3:hover {
  color: #99b3c8 !important;
}

.h\:c_acc-4:hover {
  color: #c7d5e1 !important;
}

.h\:c_acc-5:hover {
  color: #e6ecf1 !important;
}

.h\:c_acc-n1:hover {
  color: #003b6a !important;
}

.h\:c_acc-n2:hover {
  color: #003159 !important;
}

.h\:c_acc-n3:hover {
  color: #002441 !important;
}

.h\:c_acc-n4:hover {
  color: #001a2f !important;
}

.h\:c_acc-n5:hover {
  color: #00101e !important;
}

.h\:br_acc:hover,.h\:br_acc-0:hover {
  border-color: #004176 !important;
}

.h\:br_acc-1:hover {
  border-color: #265e8b !important;
}

.h\:br_acc-2:hover {
  border-color: #5e87a9 !important;
}

.h\:br_acc-3:hover {
  border-color: #99b3c8 !important;
}

.h\:br_acc-4:hover {
  border-color: #c7d5e1 !important;
}

.h\:br_acc-5:hover {
  border-color: #e6ecf1 !important;
}

.h\:br_acc-n1:hover {
  border-color: #003b6a !important;
}

.h\:br_acc-n2:hover {
  border-color: #003159 !important;
}

.h\:br_acc-n3:hover {
  border-color: #002441 !important;
}

.h\:br_acc-n4:hover {
  border-color: #001a2f !important;
}

.h\:br_acc-n5:hover {
  border-color: #00101e !important;
}

.h\:c_inherit {
  color: inherit;
}

/*
  Hover: Text Color

  hovers can easily be added to change the text color by adding `hover:` or `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 UC.hover.text

 */
.h\:c_white:hover, .btn_acc-primary:hover,
.active > .a\:c_white,
.active.a\:c_white {
  color: white !important;
}

.h\:c_black:hover,
.active > .a\:c_black,
.active.a\:c_black {
  color: #131212 !important;
}

.hover\:underline:hover, .hover\:underline:focus,
.h\:underline:hover,
.h\:underline:focus {
  text-decoration: underline;
}

.hover\:underline-none:hover, .hover\:underline-none:focus,
.h\:underline-none:hover,
.h\:underline-none:focus,
.h\:undecorated:hover,
.h\:undecorated:focus {
  text-decoration: none !important;
}

.hover\:dashed:hover, .hover\:dashed:focus,
.h\:dashed:hover,
.h\:dashed:focus {
  text-decoration: underline;
  -webkit-text-decoration-style: dashed;
          text-decoration-style: dashed;
}

.hover\:double:hover, .hover\:double:focus,
.h\:double:hover,
.h\:double:focus {
  text-decoration: underline;
  -webkit-text-decoration-style: double;
          text-decoration-style: double;
}

.hover\:dotted:hover, .hover\:dotted:focus,
.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 peice of text when it hovers adding `hover:` or `h:` infront of the type of underline you would like gives that type of underline to the text when hoverd.

  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 UC.hover.underlines

  */
/* Transparent Loop */
.h\:bg_white:hover,
.active > .a\:bg_white,
.active.a\:bg_white {
  background-color: white;
}

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

.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 `hover:` 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 UC.hover.opacity.whiteblack

 */
/*
Opacity: Hover to 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 UC.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 UC.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;
}

/*
  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 UC.hover.cursor

*/
.cursor_pointer {
  cursor: pointer;
}

.cursor_not-allowed {
  cursor: not-allowed;
}

.cursor_grab {
  cursor: -webkit-grab;
  cursor: grab;
}

.cursor_grabbing {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}

.cursor_wait {
  cursor: wait;
}

/*
Animation

Transitions Eases and Transforms.Create simple toggleable animations with a combination of classes. 

Weight: 140

Styleguide UC.Animation


*/
/*
Transition on Hover 

soften the harshness of the switch of the style by adding transitions to the changed 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 UC.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 {
  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 UC.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 UC.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;
}

/*
Blend

Giving greater Manipulation of colors with the use of blending modes. 

Weight: 150

Styleguide UC.Blend


*/
.bg-blend_normal {
  background-blend-mode: normal;
}

.bg-blend_multiply {
  background-blend-mode: multiply;
}

.bg-blend_screen {
  background-blend-mode: screen;
}

.bg-blend_overlay {
  background-blend-mode: overlay;
}

.bg-blend_darken {
  background-blend-mode: darken;
}

.bg-blend_lighten {
  background-blend-mode: lighten;
}

.bg-blend_color-dodge {
  background-blend-mode: color-dodge;
}

.bg-blend_color-burn {
  background-blend-mode: color-burn;
}

.bg-blend_hard-light {
  background-blend-mode: hard-light;
}

.bg-blend_soft-light {
  background-blend-mode: soft-light;
}

.bg-blend_difference {
  background-blend-mode: difference;
}

.bg-blend_exclusion {
  background-blend-mode: exclusion;
}

.bg-blend_hue {
  background-blend-mode: hue;
}

.bg-blend_saturation {
  background-blend-mode: saturation;
}

.bg-blend_color {
  background-blend-mode: color;
}

.bg-blend_luminosity {
  background-blend-mode: luminosity;
}

.bg-blend_initial {
  background-blend-mode: initial;
}

.bg-blend_inherit {
  background-blend-mode: inherit;
}

.bg-blend_unset {
  background-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 UC.Blend.text


*/
/*
Backgroud Blend

Background Image blending modes on top of other layers. 

Weight: 150

Styleguide UC.Blend.background


*/
/*
UC: Counters

Add counters infront of collections without the need of an OL or UL. Counters cannot be nested!

Weight: 150

Styleguide UC.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 UC.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 UC.counters.sub counters

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

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

/*
	Counter Types

	Create different types of lists 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 UC.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 UC.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;
}

.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_all {
  -webkit-user-select: all;
     -moz-user-select: all;
      -ms-user-select: all;
          user-select: all;
}

.user-select_none {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.user-select_auto {
  -webkit-user-select: auto;
     -moz-user-select: auto;
      -ms-user-select: auto;
          user-select: auto;
}

.user-select_text {
  -webkit-user-select: text;
     -moz-user-select: text;
      -ms-user-select: text;
          user-select: text;
}
/*# sourceMappingURL=maps/acc_uc.css.map */