/*!
 * THIS FILE HAS BEEN GENERATED BY AN AUTOMATED TOOL.
 * DO NOT MODIFY DIRECTLY. INSTEAD, MODIFY THE APPROPRIATE SOURCE CODE.
 *
 * client-project v1.0.0 (dev)
 * Example project for Client.
 * Build Date: 2019-12-20
 */

@charset "UTF-8";
/* ---------------------------------------------------------------------
 Modern Styles
------------------------------------------------------------------------ */
/**
 * @license
 * MyFonts Webfont Build ID 2885386, 2014-09-17T17:49:12-0400
 *
 * The fonts listed in this notice are subject to the End User License
 * Agreement(s) entered into by the website owner. All other parties are
 * explicitly restricted from using the Licensed ../media/fonts/gibson/(s).
 *
 * You may obtain a valid license at the URLs below.
 *
 * Webfont: Gibson-LightIt by Canada Type
 * URL: http://www.myfonts.com/fonts/gibson/canadatype/gibson/light-italic/
 *
 * Webfont: Gibson-BoldItalic by Canada Type
 * URL: http://www.myfonts.com/fonts/gibson/canadatype/gibson/bold-italic/
 *
 * Webfont: Gibson-SemiboldIt by Canada Type
 * URL: http://www.myfonts.com/fonts/gibson/canadatype/gibson/semi-bold-italic/
 *
 * Webfont: Gibson-Bold by Canada Type
 * URL: http://www.myfonts.com/fonts/gibson/canadatype/gibson/bold/
 *
 * Webfont: Gibson-Regular by Canada Type
 * URL: http://www.myfonts.com/fonts/gibson/canadatype/gibson/regular/
 *
 * Webfont: Gibson-SemiBold by Canada Type
 * URL: http://www.myfonts.com/fonts/gibson/canadatype/gibson/semi-bold/
 *
 * Webfont: Gibson-Italic by Canada Type
 * URL: http://www.myfonts.com/fonts/gibson/canadatype/gibson/italic/
 *
 * Webfont: Gibson-Light by Canada Type
 * URL: http://www.myfonts.com/fonts/gibson/canadatype/gibson/light/
 *
 *
 * License: http://www.myfonts.com/viewlicense?type=web&buildid=2885386
 * Licensed pageviews: 10,000
 * ../media/fonts/gibson/ copyright: Copyright © 2011 Rod McDonald. Published by Canada Type. All rights reserved.
 *
 * © 2014 MyFonts Inc
*/
/* @import must be at top of file, otherwise CSS will not work */
@import url("//hello.myfonts.net/count/2c070a");
@font-face {
  font-family: 'Gibson-LightIt';
  src: url("../media/fonts/gibson//2C070A_0_0.eot");
  src: url("../media/fonts/gibson//2C070A_0_0.eot?#iefix") format("embedded-opentype"), url("../media/fonts/gibson//2C070A_0_0.woff") format("woff"), url("../media/fonts/gibson//2C070A_0_0.ttf") format("truetype"); }

@font-face {
  font-family: 'Gibson-BoldItalic';
  src: url("../media/fonts/gibson//2C070A_1_0.eot");
  src: url("../media/fonts/gibson//2C070A_1_0.eot?#iefix") format("embedded-opentype"), url("../media/fonts/gibson//2C070A_1_0.woff") format("woff"), url("../media/fonts/gibson//2C070A_1_0.ttf") format("truetype"); }

@font-face {
  font-family: 'Gibson-SemiboldIt';
  src: url("../media/fonts/gibson//2C070A_2_0.eot");
  src: url("../media/fonts/gibson//2C070A_2_0.eot?#iefix") format("embedded-opentype"), url("../media/fonts/gibson//2C070A_2_0.woff") format("woff"), url("../media/fonts/gibson//2C070A_2_0.ttf") format("truetype"); }

@font-face {
  font-family: 'Gibson-Bold';
  src: url("../media/fonts/gibson//2C070A_3_0.eot");
  src: url("../media/fonts/gibson//2C070A_3_0.eot?#iefix") format("embedded-opentype"), url("../media/fonts/gibson//2C070A_3_0.woff") format("woff"), url("../media/fonts/gibson//2C070A_3_0.ttf") format("truetype"); }

@font-face {
  font-family: 'Gibson-Light';
  src: url("../media/fonts/gibson//2C070A_4_0.eot");
  src: url("../media/fonts/gibson//2C070A_4_0.eot?#iefix") format("embedded-opentype"), url("../media/fonts/gibson//2C070A_4_0.woff") format("woff"), url("../media/fonts/gibson//2C070A_4_0.ttf") format("truetype");
  font-weight: 500;
  font-style: normal; }

@font-face {
  font-family: 'Gibson-SemiBold';
  src: url("../media/fonts/gibson//2C070A_5_0.eot");
  src: url("../media/fonts/gibson//2C070A_5_0.eot?#iefix") format("embedded-opentype"), url("../media/fonts/gibson//2C070A_5_0.woff") format("woff"), url("../media/fonts/gibson//2C070A_5_0.ttf") format("truetype"); }

@font-face {
  font-family: 'Gibson-Italic';
  src: url("../media/fonts/gibson//2C070A_6_0.eot");
  src: url("../media/fonts/gibson//2C070A_6_0.eot?#iefix") format("embedded-opentype"), url("../media/fonts/gibson//2C070A_6_0.woff") format("woff"), url("../media/fonts/gibson//2C070A_6_0.ttf") format("truetype"); }

@font-face {
  font-family: 'Gibson-Light';
  src: url("../media/fonts/gibson//2C070A_7_0.eot");
  src: url("../media/fonts/gibson//2C070A_7_0.eot?#iefix") format("embedded-opentype"), url("../media/fonts/gibson//2C070A_7_0.woff") format("woff"), url("../media/fonts/gibson//2C070A_7_0.ttf") format("truetype"); }

/* ---------------------------------------------------------------------
RESET CSS (thanks Eric Meyer)
------------------------------------------------------------------------ */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font-weight: inherit;
  font-style: inherit;
  font-family: inherit;
  vertical-align: baseline; }

body {
  line-height: 1; }

ol, ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

:focus {
  outline: 0; }

html {
  overflow-y: scroll;
  /* Always show a vertical scrollbar, even when there is no scrolling */ }

html {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%; }

/* ---------------------------------------------------------------------
 HTML5 Element Reset
------------------------------------------------------------------------ */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, main {
  display: block; }

audio, canvas, video, progress, picture {
  display: inline-block; }

template {
  display: none; }

/* ---------------------------------------------------------------------
 Form Reset Styles
------------------------------------------------------------------------ */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
  -webkit-appearance: none; }

input[type="search"] {
  -webkit-appearance: none;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box; }

textarea {
  overflow: auto;
  vertical-align: top;
  resize: vertical; }

input[type="checkbox"] {
  margin-top: 1px;
  vertical-align: top; }

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

html, body {
  height: 100%; }

body {
  color: #344452;
  font-size: 14px;
  font-family: "Gibson-Light", sans-serif;
  font-weight: 300; }

a {
  color: #56aec6;
  text-decoration: none; }

a:hover,
a:active {
  color: #3b95ae; }

.wrapper {
  margin: 0 auto;
  width: 1060px;
  padding-top: 6px;
  padding-left: 20px;
  padding-right: 20px; }

.wrapper_responsive {
  max-width: 1060px;
  width: 100%;
  box-sizing: border-box; }

.wrapper_centered {
  width: auto;
  text-align: center; }

.isVisuallyHidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px; }

.mainContent:after {
  content: "";
  display: block;
  height: 50px; }

.pageWrap {
  min-height: 100%;
  margin-bottom: -36px; }

.pageWrap:after {
  content: "";
  display: block;
  height: 36px; }

.pageWrap_none {
  padding-top: 150px; }

.pageWrap_some {
  padding-top: 180px; }

.pageWrap_many {
  padding-top: 220px; }

.drawer {
  width: 100%;
  position: fixed;
  bottom: 0; }

.drawer_isClosed {
  max-height: 90%; }

.drawer_isClosed .drawer-content {
  display: none; }

.drawer-pull {
  display: block;
  width: 100%;
  padding: 20px;
  text-align: center;
  background: #758490;
  position: relative;
  color: #ffffff;
  font-weight: bold;
  -webkit-transition: all 0.25s linear;
  -moz-transition: all 0.25s linear;
  -o-transition: all 0.25s linear;
  transition: all 0.25s linear;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

.drawer_isClosed .drawer-pull:hover {
  padding-bottom: 30px; }

.drawer-pull:hover {
  color: #ffffff; }

.drawer-pull:before {
  content: "";
  position: absolute;
  left: 50%;
  margin-left: -7px;
  top: -14px;
  border-left: 14px solid transparent;
  border-right: 14px solid transparent;
  border-bottom: 14px solid #758490;
  -webkit-transition: border-color 0.25s linear;
  -moz-transition: border-color 0.25s linear;
  -o-transition: border-color 0.25s linear;
  transition: border-color 0.25s linear; }

.drawer-content {
  background: #ffffff;
  padding: 10px;
  max-height: 80%;
  overflow-y: auto; }

.drawer img {
  display: block;
  max-width: 100%; }

.header {
  width: 1060px;
  margin: 0 auto;
  position: fixed;
  top: 0;
  left: 50%;
  margin-left: -550px;
  z-index: 200;
  background: #ffffff;
  padding-left: 20px;
  padding-right: 20px; }

.header-main {
  position: relative;
  border-bottom: 1px solid #ececec; }
  .header-main:before, .header-main:after {
    content: " ";
    display: table; }
  .header-main:after {
    clear: both; }

.logo {
  float: left; }

.header-mail-referral {
  width: 300px;
  position: absolute;
  top: 4px;
  right: 0; }

.header-date {
  position: absolute;
  top: 60px;
  right: 0;
  font-size: 10px; }

.footer {
  height: 36px;
  padding-bottom: 50px;
  margin-top: 50px; }

.footer_noDrawer {
  padding-bottom: 0; }

.footer_centered {
  text-align: center; }

.mainNav {
  float: left;
  margin-left: 20px; }

.mainNav > li {
  float: left; }

.mainNav a {
  padding: 20px 9px;
  font-size: 15px;
  color: #344452;
  display: block;
  margin-top: 17px; }

.mainNav-item_isActive a {
  font-weight: bold; }

.mainNav > :not(.mainNav-item_isActive) a:hover {
  color: #3b95ae; }

.poolNav {
  float: right;
  margin-top: 40px; }

.poolNav-icon {
  font-size: 26px;
  margin-top: 5px; }

/*doc
---
title: Secondary Nav
name: Secondary Nav
category: index
---

##Secondary Navigation in the header
This navigation changes in different sections of the site.

```html_example
    <ul class="secondaryNav">
        <li><a href="#">What if I make a big purchase?</a></li>
        <li class="secondaryNav-item_isActive"><a href="#">What if I pay off my debt?</a></li>
        <li><a href="#">What if I invest differently?</a></li>
        <li><a href="#">What if things don't go as planned?</a></li>
    </ul>

```
*/
.secondaryNav {
  border-bottom: 1px solid #ececec; }
  .secondaryNav:before, .secondaryNav:after {
    content: " ";
    display: table; }
  .secondaryNav:after {
    clear: both; }

.secondaryNav > li {
  text-align: center;
  float: left;
  font-size: 15px; }

.secondaryNav > li:not(:first-child) a:before {
  content: "";
  height: 24px;
  width: 1px;
  background: #ececec;
  top: 4px;
  position: absolute;
  left: 0; }

.secondaryNav > li > a {
  display: block;
  padding: 10px 10px;
  position: relative; }

.secondaryNav-item_isActive a {
  font-weight: bold;
  color: #344452; }

/*doc
---
title: Utility Nav
name: Utility Nav
category: index
---

##Utility Navigation in the header

```html_example
    <div class="utility">
        <ul class="utility-nav">
            <li class="utility-nav-upgrade">
                <a href="#">Upgrade</a>
            </li>
            <li>
                <a href="#">Invite Others</a>
            </li>
            <li>
                <a href="#">My Profile</a>
            </li>
            <li class="utility-nav-logout">
                <a href="#">Logout</a>
            </li>
        </ul> <!--end .utility-nav -->
    </div> <!--end .utility -->

```
*/
.utility {
  position: relative; }
  .utility:before, .utility:after {
    content: " ";
    display: table; }
  .utility:after {
    clear: both; }

.utility-nav {
  float: right; }

.utility-nav > li {
  float: left; }

.utility-nav > li > a {
  display: block;
  padding: 10px;
  color: #344452; }

.utility-nav > li > a:hover {
  text-decoration: underline; }

.utility-nav .utility-nav-upgrade > a {
  color: #56aec6; }

.utility-nav .utility-nav-logout > a {
  font-weight: bold;
  padding-right: 0; }

/*doc
---
title: Accordion
name: Accordion
category: index
---

## Accordion Open
```html_example
<div class="accordion js-accordion">
    <div class="accordion-hd js-accordion-hd">Accordion hd</div>
    <div class="accordion-bd">
        Accordion Body Open
    </div>
</div>
```

## Accordion Closed
```html_example
<div class="accordion accordion_isClosed js-accordion">
    <div class="accordion-hd js-accordion-hd">Accordion hd</div>
    <div class="accordion-bd">
        Accordion Body Open
    </div>
</div>
```

## Accordion Actual Use Case
```html_example
<div class="box box_enclosed">
    <div class="accordion js-accordion">
        <div class="vList vList_sm">
            <div class="accordion-hd js-accordion-hd">
                <div class="split">
                    <div class="split-left">
                        <h2 class="hdg mix-hdg_md mix-hdg_colored">CD</h2>
                    </div>
                    <div class="split-right">
                        <a class="accordion-hd-toggle" href="#">Collapse</a>
                    </div>
                </div>

                <ul class="hList hList_lg">
                    <li>
                        <label for="cd-name" class="isVisuallyHidden">Account Description</label>
                        <input id="cd-name" type="text" class="input input_text" placeholder="Description" />
                    </li>
                    <li class="form-section-amount">
                        <label for="cd-amount" class="isVisuallyHidden">Account Amount</label>
                        <input id="cd-amount" type="text" class="input input_text mix-input_sm mix-input_amount" placeholder="00.00"/>
                    </li>
                </ul>
            </div>
            <div class="accordion-bd js-accordion-bd">
                <div class="vList vList_md">
                    <ul class="hList hList_md">
                        <li>
                            <label for="cd-start-date" class="label label_sm">Start Date</label>
                            <input id="cd-start-date" type="date" class="input input_text" />
                        </li>
                        <li>
                            <label for="cd-end-date" class="label label_sm">End Date</label>
                            <input id="cd-end-date" type="date" class="input input_text" />
                        </li>
                    </ul>
                </div>
            </div> <!--end .accordion-bd -->
        </div>
    </div> <!--end .accordion -->
</div> <!-- end .box -->
```

*/
.accordion_isClosed .accordion-bd {
  display: none; }

.accordion-hd-title {
  font-weight: bold;
  margin-top: 15px;
  line-height: 1.2; }

/*doc
---
title: Account Table
name: Account Table
category: index
---

## Standard
```html_example

<table class="accountTable">
    <thead>
        <tr>
            <th>Table Head</th>
            <th>Table Head</th>
            <th>Table Head</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
        </tr>
        <tr>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
        </tr>
    </tbody>
</table>
```
*/
.accountTable {
  border: 1px solid #dddddd;
  border-top: 0;
  width: 100%; }

.accountTable thead tr {
  background-color: #3b95ae;
  color: #ffffff;
  font-weight: bold; }

.accountTable th {
  padding: 12px 8px; }

.accountTable-account_isActive {
  background-color: #efefef; }

.accountTable-category {
  background-color: #56aec6;
  color: #ffffff; }

.accountTable-icon {
  width: 10px;
  padding: 8px 0 8px 8px;
  border-top: 1px solid #dddddd; }

.accountTable-label {
  text-align: left;
  padding: 8px;
  font-weight: bold;
  border-top: 1px solid #dddddd; }

.accountTable-value {
  padding: 8px;
  text-align: right;
  border-top: 1px solid #dddddd; }

.accountTable-description {
  padding: 0 8px 8px; }

/*doc
---
title: Action
name: Action
category: index
---

## Small action link
```html_example
<a href="#" class="action"><i class="icon icon-times-circle"></i>Remove</a>
```

*/
.action {
  font-size: 12px; }

.action_remove {
  display: block;
  margin-top: 15px; }

.action_remove .icon-times-circle {
  vertical-align: middle;
  margin-right: 2px; }

/*doc
---
title: Actions
name: Actions
category: index
---

Actions are for actions at the bottom of a form. Adds a border above the button and floats it to the right.

```html_example
<div class="actions">
    <div class="actions-left">
        <a href="#">Link here</a>
    </div>
    <div class="actions-right">
        <button type="submit" class="btn">Save &amp; Continue</button>
    </div>
</div>
```

*/
.actions {
  border-top: 1px solid #ececec;
  padding: 20px 0 0 0; }
  .actions:before, .actions:after {
    content: " ";
    display: table; }
  .actions:after {
    clear: both; }

.actions-left {
  float: left; }

.actions-right {
  float: right; }

.actions-link {
  display: block;
  margin-top: 10px; }

/*doc
---
title: ActionLink
name: ActionLink
category: index
---

## Standard actionLink

```html_example
<a href="#" class="actionLink"><i class="icon icon-plus"></i>Add Something</a>
```

## actionLink with spacing on top
```html_example
<a href="#" class="actionLink mix-actionLink_spaced"><i class="icon icon-plus"></i>Add Something</a>
```

## actionLink with a lot of spacing on top
```html_example
<a href="#" class="actionLink mix-actionLink_spacedLg"><i class="icon icon-plus"></i>Add Something</a>
```
*/
.actionLink {
  font-weight: bold; }

button.actionLink {
  color: #56aec6;
  border: none;
  background-color: transparent;
  font-size: 14px;
  font-family: "Gibson-Light", sans-serif;
  padding: 0;
  line-height: 1;
  cursor: pointer; }

.mix-actionLink_spaced {
  display: block;
  margin-top: 10px; }

.mix-actionLink_spacedLg {
  margin-top: 40px;
  display: block; }

.adHdg {
  margin-bottom: 4px;
  text-transform: uppercase;
  text-align: center;
  font-size: 12px; }

.ad {
  border: 2px solid #344452;
  margin-bottom: 10px; }

.ad > a > img {
  display: block;
  max-width: 100%; }

/*doc
---
title: Blocks
name: blocks
category: index
---
A blocks pattern allows you to have repeating tiers of items that automatically wrap and space themselves after a set number of items. Use the base class with an extension that reflects the number of items per row.

## Two Items per Row

```html_example
<ul class="blocks blocks_2up">
    <li>
        <img src="http://placehold.it/200x100" />
    </li>
    <li>
        <img src="http://placehold.it/200x100" />
    </li>
    <li>
        <img src="http://placehold.it/200x100" />
    </li>
    <li>
        <img src="http://placehold.it/200x100" />
    </li>
</ul>
```

## Three Items per Row

```html_example
<ul class="blocks blocks_3up">
    <li>
        <img src="http://placehold.it/200x100" />
    </li>
    <li>
        <img src="http://placehold.it/200x100" />
    </li>
    <li>
        <img src="http://placehold.it/200x100" />
    </li>
    <li>
        <img src="http://placehold.it/200x100" />
    </li>
    <li>
        <img src="http://placehold.it/200x100" />
    </li>
    <li>
        <img src="http://placehold.it/200x100" />
    </li>
</ul>
```

## Four Items per Row

```html_example
<ul class="blocks blocks_4up">
    <li>
        <img src="http://placehold.it/200x100" />
    </li>
    <li>
        <img src="http://placehold.it/200x100" />
    </li>
    <li>
        <img src="http://placehold.it/200x100" />
    </li>
    <li>
        <img src="http://placehold.it/200x100" />
    </li>
    <li>
        <img src="http://placehold.it/200x100" />
    </li>
    <li>
        <img src="http://placehold.it/200x100" />
    </li>
</ul>
```

## Five Items per Row

```html_example
<ul class="blocks blocks_5up">
    <li>
        <img src="http://placehold.it/200x100" />
    </li>
    <li>
        <img src="http://placehold.it/200x100" />
    </li>
    <li>
        <img src="http://placehold.it/200x100" />
    </li>
    <li>
        <img src="http://placehold.it/200x100" />
    </li>
    <li>
        <img src="http://placehold.it/200x100" />
    </li>
    <li>
        <img src="http://placehold.it/200x100" />
    </li>
</ul>
```
*/
.blocks {
  margin: -2% 0 0 -2%;
  font-size: 0; }

.blocks > * {
  display: inline-block;
  vertical-align: top;
  margin: 2% 0 0 2%;
  font-size: 14px; }

.blocks_single,
.blocks_single > * {
  margin-top: 0; }

.blocks_amortize > *:nth-child(odd) {
  width: 57%;
  color: #666666;
  margin-bottom: 10px;
  font-weight: bold; }

.blocks_amortize > *:nth-child(even) {
  width: 39%;
  color: #000000;
  text-align: right;
  font-weight: normal; }

.blocks_1up > * {
  width: 98%; }

.blocks_2up > * {
  width: 48%; }

.blocks_3up > * {
  width: 31.3333333333%; }

.blocks_4up > * {
  width: 23%; }

.blocks_5up > * {
  width: 18%; }

/*doc
---
title: Box
name: Box
category: index
---

## Box with just padding
```html_example
<div class="box">
box
</div>
```

## Box Light (light colored background, border)
```html_example
<div class="box box_light">
box light
</div>
```

## Box Spaced
Margin on the bottom

```html_example
<div class="box box_light">
box with margin bottom
</div>
```

## Notification Box
Blue box used for notifications and other information

```html_example
<div class="box mix-box_notification">
box
</div>
```

## Enclosed box
box with a border

```html_example
<div class="box box_enclosed">
box
</div>
```
*/
a.box {
  display: block;
  color: inherit;
  -webkit-transition: background-color 0.25s linear;
  -moz-transition: background-color 0.25s linear;
  -o-transition: background-color 0.25s linear;
  transition: background-color 0.25s linear; }

a.box:hover {
  background: #f1f1f1; }

.box {
  padding: 16px 14px; }

.box_enclosed {
  border: 1px solid #ececec; }

.box_light {
  border: 1px solid #dfdfdf;
  background: #ececec; }

.mix-box_spaced {
  margin-bottom: 18px; }

.mix-box_notification {
  background: #dbeef3; }

.mix-box_warning {
  background: #fcf8e3; }

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

.mix-box_wide {
  padding-left: 0;
  padding-right: 0; }

/*doc
---
title: Button
name: Button
category: index
---

## Standard Button
```html_example
<a href="#" class="btn">Button</a>
```

## Full with Button
Button taking up full-width of container

```html_example
<a href="#" class="btn mix-btn_full">Button</a>
```

## Pushed Button
Button pushed down to align with surrounding content

```html_example
<a href="#" class="btn mix-btn_isPushed">Button</a>
```
*/
.btn {
  padding: 9px 20px;
  margin: 0;
  text-align: center;
  background: #56aec6;
  border: none;
  font-size: 14px;
  color: #ffffff;
  cursor: pointer;
  display: inline-block;
  text-align: center;
  -webkit-transition: background-color 0.25s linear;
  -moz-transition: background-color 0.25s linear;
  -o-transition: background-color 0.25s linear;
  transition: background-color 0.25s linear; }

.btn:hover,
.btn:active {
  color: #ffffff;
  background: #3b95ae; }

.btn.disabled,
.btn:disabled {
  color: #efefef;
  background-color: #dddddd;
  cursor: not-allowed; }

.mix-btn_full {
  width: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

.mix-btn_isPushed {
  margin-top: 27px; }

.mix-btn_isPushedNoLabel {
  margin-top: 2px; }

/*doc
---
title: Center Block
name: Center Block
category: index
---

Block used to center login content

```html_example
<div class="centerBlock">Centered and constricted width content</div>
```
*/
.centerBlock {
  width: 500px;
  margin: 0 auto; }

.centerBlock_login {
  width: 100%;
  max-width: 500px;
  padding-top: 7%; }

.centerBlock-logo {
  text-align: center;
  display: block;
  margin: 20px 0; }

/*doc
---
title: Constricted
name: Constricted
category: index
---

An area that is constrained in width, but not part of the grid or blocks because it isn't the primary layout or need to be floated.

```html_example

<div class="constricted">
     Constricted area of content
</div>
```
*/
.constricted {
  width: 55%; }

/*doc
---
title: Data
name: Data
category: index
---

Data block to group profile data, with label + text

```html_example
    <div class="data">
        <div class="data-label">Name</div>
        <div class="data-value">FirstName LastName</div>
        <div class="data-descriptor">Household Head</div>
    </div>
```

## Centered Data
```html_example
    <div class="data data_centered">
        <div class="data-label">Name</div>
        <div class="data-value">FirstName LastName</div>
    </div>
```
*/
.data {
  margin-bottom: 10px; }

.data_scenario {
  margin-left: 40px;
  margin-top: 40px; }

.data-label {
  color: #666666;
  font-weight: bold;
  margin-bottom: 6px;
  font-size: 16px; }

.data-descriptor {
  font-style: italic;
  font-weight: 300;
  font-size: 14px;
  margin-top: 10px; }

.data_centered {
  display: inline-block; }

.data_centered .data-value {
  text-align: center; }

.data-value + .data-value {
  margin-top: 5px; }

/*doc
---
title: DataTable
name: DataTable
category: index
---

## Standard Data Table
```html_example

<table class="dataTable">
    <thead>
        <tr>
            <th>Table Head</th>
            <th>Table Head</th>
            <th>Table Head</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
        </tr>
    </tbody>
</table>
```

## Standard, separated
```html_example

<table class="dataTable dataTable_separated">
    <thead>
        <tr>
            <th>Table Head</th>
            <th>Table Head</th>
            <th>Table Head</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
        </tr>
        <tr>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
        </tr>
    </tbody>
</table>
```

## Standard, separated and striped
```html_example

<table class="dataTable dataTable_separated mix-dataTable_striped">
    <thead>
        <tr>
            <th>Table Head</th>
            <th>Table Head</th>
            <th>Table Head</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <div class="dataTable-type">Data</div>
            </td>
            <td>Data</td>
            <td>Data</td>
        </tr>
        <tr>
            <td><div class="dataTable-type">Data</div></td>
            <td>Data</td>
            <td>Data</td>
        </tr>
    </tbody>
</table>
```

## Standard, separated and striped
```html_example

<table class="dataTable dataTable_separated mix-dataTable_striped">
    <thead>
        <tr>
            <th>Table Head</th>
            <th>Table Head</th>
            <th>Table Head</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <div class="dataTable-type">Data</div>
            </td>
            <td>Data</td>
            <td>Data</td>
        </tr>
        <tr>
            <td><div class="dataTable-type">Data</div></td>
            <td>Data</td>
            <td>Data</td>
        </tr>
    </tbody>
</table>
```

## Standard, separated and striped
```html_example

<table class="dataTable dataTable_separated mix-dataTable_striped">
    <thead>
        <tr>
            <th>Table Head</th>
            <th>Table Head</th>
            <th>Table Head</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <div class="dataTable-type">Data</div>
            </td>
            <td>Data</td>
            <td>Data</td>
        </tr>
        <tr class="dataTable-fillerRow">
            <td colspan="4">
                <div class="dataTable-note">
                   Filler Row
                </div>
            </td>
        </tr>
        <tr>
            <td><div class="dataTable-type">Data</div></td>
            <td>Data</td>
            <td>Data</td>
        </tr>
    </tbody>
</table>
```
*/
.dataTable {
  width: 100%; }

.dataTable th {
  font-weight: 600;
  text-align: left;
  padding: 10px;
  line-height: 16px; }

.dataTable th small {
  font-weight: normal; }

.dataTable td {
  padding: 10px; }

.dataTable th:first-child,
.dataTable td:first-child {
  padding-left: 0; }

.dataTable-type {
  color: #7fc280; }

.dataTable_condensed td {
  padding: 15px 10px; }

.dataTable_separated tr + tr td {
  border-top: 1px solid #ececec;
  padding-top: 10px; }

.dataTable_separated td {
  padding: 10px 10px; }

.dataTable_separated:not(.mix-dataTable_striped) tr:last-child td {
  /* why was this here? */
  /* padding-bottom: 0; */ }

.mix-dataTable_striped th {
  padding-bottom: 20px; }

.mix-dataTable_striped tr:nth-child(odd) td {
  background: #f9f9f9; }

.mix-dataTable_striped tr th:first-child,
.mix-dataTable_striped tr td:first-child {
  padding-left: 10px; }

.dataTable_paymentTiers td {
  padding: 0 0 10px 0; }

.dataTable_paymentTiers td:first-child {
  width: 50px; }

.dataTable-separated {
  padding-top: 10px; }

.dataTable-separated td {
  border-top: 1px solid #ececec;
  padding-top: 30px; }

.dataTable-fillerRow td {
  padding-top: 30px; }

.dataTable-note {
  font-style: italic; }

.dataTable-subcopy {
  font-style: italic;
  font-weight: normal;
  margin-top: 5px;
  font-size: 14px; }

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

.dataTable th.dataTable-cellNumeric,
.dataTable-cellNumeric {
  text-align: right; }

.dataTable-cellMuted {
  font-style: italic;
  color: #888888; }

.dataTable th:first-child.dataTable-cellDataModel_type,
.dataTable td:first-child.dataTable-cellDataModel_type,
.dataTable .dataTable-cellDataModel_type {
  padding-left: 0; }

.dataTable th:first-child.dataTable-cellDataModel_subType,
.dataTable td:first-child.dataTable-cellDataModel_subType,
.dataTable .dataTable-cellDataModel_subType {
  padding-left: 10px; }

.dataTable th:first-child.dataTable-cellDataModel_category,
.dataTable td:first-child.dataTable-cellDataModel_category,
.dataTable .dataTable-cellDataModel_category {
  padding-left: 20px; }

.dataTable th:first-child.dataTable-cellDataModel_subCategory,
.dataTable td:first-child.dataTable-cellDataModel_subCategory,
.dataTable .dataTable-cellDataModel_subCategory {
  padding-left: 35px; }

.dropdown-trigger {
  white-space: nowrap; }

.dropdown-menu {
  display: none;
  position: absolute;
  min-width: 125px;
  padding: 15px 15px 0 15px;
  background-color: white;
  z-index: 2;
  -webkit-box-shadow: 5px 5px 5px 0 #ececec;
  -moz-box-shadow: 5px 5px 5px 0 #ececec;
  box-shadow: 5px 5px 5px 0 #ececec; }
  .dropdown-menu a {
    display: block;
    margin-bottom: 15px; }
  .dropdown-menu.active {
    display: block; }

/*doc
---
title: Grid
name: grid
category: index
---

This is the major grid system used throughout the site. It's a 12 column grid with 30px gutters and 54px column widths. The grid is applied at a specific breakpoint when the screen width is deemed wide enough to support content in a multi column format.

Sizes can be applied via `grid-col` extensions using the `grid-col_size4of12` pattern. The sum of the column sizes for a single row should add up to 12.

```html_example
<div class="grid">
    <div class="grid-col grid-col_size8of12">
            Col 1
    </div>
    <div class="grid-col grid-col_size4of12">
            Col 2
    </div>
</div>
```

```html_example
<div class="grid">
    <div class="grid-col grid-col_size9of12">
        Col 1
    </div>
    <div class="grid-col grid-col_size3of12">
        Col 2
    </div>
</div> <!--end .grid -->
```
*/
.grid:before, .grid:after {
  content: " ";
  display: table; }

.grid:after {
  clear: both; }

.grid-col {
  position: relative;
  float: left;
  margin: 0 15px; }

.grid_no-gutter .grid-col {
  margin: 0; }

.grid-col:first-child {
  margin-left: 0; }

.grid-col:last-child {
  margin-right: 0;
  float: right; }

.grid-col_size1of12 {
  width: calc(8.3333333333% - 28px); }

.grid_no-gutter .grid-col_size1of12 {
  width: 8.3333333333%; }

.grid-col_size2of12 {
  width: calc(16.6666666667% - 25px); }

.grid_no-gutter .grid-col_size2of12 {
  width: 16.6666666667%; }

.grid-col_size3of12 {
  width: calc(25% - 23px); }

.grid_no-gutter .grid-col_size3of12 {
  width: 25%; }

.grid-col_size4of12 {
  width: calc(33.3333333333% - 20px); }

.grid_no-gutter .grid-col_size4of12 {
  width: 33.3333333333%; }

.grid-col_size5of12 {
  width: calc(41.6666666667% - 18px); }

.grid_no-gutter .grid-col_size5of12 {
  width: 41.6666666667%; }

.grid-col_size6of12 {
  width: calc(50% - 15px); }

.grid_no-gutter .grid-col_size6of12 {
  width: 50%; }

.grid-col_size7of12 {
  width: calc(58.3333333333% - 13px); }

.grid_no-gutter .grid-col_size7of12 {
  width: 58.3333333333%; }

.grid-col_size8of12 {
  width: calc(66.6666666667% - 10px); }

.grid_no-gutter .grid-col_size8of12 {
  width: 66.6666666667%; }

.grid-col_size9of12 {
  width: calc(75% - 8px); }

.grid_no-gutter .grid-col_size9of12 {
  width: 75%; }

.grid-col_size10of12 {
  width: calc(83.3333333333% - 5px); }

.grid_no-gutter .grid-col_size10of12 {
  width: 83.3333333333%; }

.grid-col_size11of12 {
  width: calc(91.6666666667% - 3px); }

.grid_no-gutter .grid-col_size11of12 {
  width: 91.6666666667%; }

.grid-col_size12of12 {
  width: calc(100% - 0px); }

.grid_no-gutter .grid-col_size12of12 {
  width: 100%; }

/*doc
---
title: Heading
name: Heading
category: index
---


```html_example
   <h1 class="hdg">Standard heading</h1>
```

## 32px
```html_example
   <h1 class="hdg hdg_1">Heading style 1</h1>
```

## 30px
```html_example
    <h1 class="hdg hdg_2">Heading style 2</h1>
```

## 28px
```html_example
    <h1 class="hdg hdg_3">Heading style 3</h1>
```

## 24px
```html_example
<h1 class="hdg hdg_4">Heading style 4</h1>
```

## 21px
```html_example
<h1 class="hdg hdg_5">Heading style 5</h1>
```

## 18px
```html_example
<h1 class="hdg hdg_6">Heading style 6</h1>
```
*/
.hdg {
  font-weight: 600; }

.hdg_1 {
  font-size: 32px;
  line-height: 1.4; }

.hdg_2 {
  font-size: 28px; }

.hdg_3 {
  font-size: 24px;
  line-height: 1.2; }

.hdg_4 {
  font-size: 20px;
  line-height: 1.4; }

.hdg_5 {
  font-size: 16px; }

.hdg_6 {
  font-size: 14px; }

.mix-hdg_sm {
  margin-bottom: 6px; }

.mix-hdg_md {
  margin-bottom: 10px; }

.mix-hdg_lg {
  margin-bottom: 18px; }

.mix-hdg_colored {
  color: #7fc280; }

/*doc
---
title: H List
name: H List
category: index
---

## Standard horizontal list, items floated
```html_example
   <ul class="hList">
     <li>Item 1</li>
     <li>Item 2</li>
     <li>Item 3</li>
   </ul>
```

## Small horizontal list
```html_example
   <ul class="hList hList_sm">
     <li>Item 1</li>
     <li>Item 2</li>
     <li>Item 3</li>
   </ul>
```

## Medium horizontal list
```html_example
   <ul class="hList hList_md">
     <li>Item 1</li>
     <li>Item 2</li>
     <li>Item 3</li>
   </ul>
```

## Large horizontal list
```html_example
   <ul class="hList hList_lg">
     <li>Item 1</li>
     <li>Item 2</li>
     <li>Item 3</li>
   </ul>
```

*/
.hList:before, .hList:after {
  content: " ";
  display: table; }

.hList:after {
  clear: both; }

.hList > * {
  float: left; }

.hList_sm > * + * {
  margin-left: 6px; }

.hList_md > * + * {
  margin-left: 10px; }

.hList_lg > * + * {
  margin-left: 18px; }

.hList_divided > * + * {
  padding-left: 6px;
  border-left: 1px solid #ececec; }

.hList_inline {
  display: inline-block; }

.hList_middle > * {
  float: none;
  display: inline-block;
  vertical-align: middle; }

/*doc
---
title: Icons
name: Icons
category: index
---


```html_example

<div class="icon-random"></div>
<div class="icon-arrows-h"></div>
<div class="icon-money"></div>
<div class="icon-exchange"></div>
<div class="icon-dollar"></div>
<div class="icon-usd"></div>
<div class="icon-calendar"></div>
<div class="icon-calculator"></div>
<div class="icon-times"></div>
<div class="icon-home"></div>
<div class="icon-book"></div>
<div class="icon-pencil"></div>
<div class="icon-plus-circle"></div>
<div class="icon-minus-circle"></div>
<div class="icon-times-circle"></div>
<div class="icon-question-circle"></div>
<div class="icon-info-circle"></div>
<div class="icon-plus"></div>
<div class="icon-minus"></div>
<div class="icon-exclamation-circle"></div>
<div class="icon-plane"></div>
<div class="icon-angle-left"></div>
<div class="icon-angle-right"></div>
<div class="icon-angle-up"></div>
<div class="icon-angle-down"></div>
<div class="icon-automobile"></div>
<div class="icon-cog"></div>
```
*/
@font-face {
  font-family: 'FontAwesome';
  src: url("../media/fonts/iconFont/FontAwesome.eot?5d54sw");
  src: url("../media/fonts/iconFont/FontAwesome.eot?5d54sw#iefix") format("embedded-opentype"), url("../media/fonts/iconFont/FontAwesome.woff?5d54sw") format("woff"), url("../media/fonts/iconFont/FontAwesome.ttf?5d54sw") format("truetype"), url("../media/fonts/iconFont/FontAwesome.svg?5d54sw#FontAwesome") format("svg");
  font-weight: normal;
  font-style: normal; }

[class^="icon-"], [class*=" icon-"] {
  font-family: 'FontAwesome';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

.icon {
  padding-right: 4px;
  font-size: 12px; }

.icon-random:before {
  content: "\f074"; }

.icon-arrows-h:before {
  content: "\f07e"; }

.icon-money:before {
  content: "\f0d6"; }

.icon-exchange:before {
  content: "\f0ec"; }

.icon-dollar:before {
  content: "\f155"; }

.icon-usd:before {
  content: "\f155"; }

.icon-calendar:before {
  content: "\f073"; }

.icon-calculator:before {
  content: "\f1ec"; }

.icon-times:before {
  content: "\f00d"; }

.icon-home:before {
  content: "\f015"; }

.icon-book:before {
  content: "\f02d"; }

.icon-pencil:before {
  content: "\f040"; }

.icon-plus-circle:before {
  content: "\f055"; }

.icon-minus-circle:before {
  content: "\f056"; }

.icon-times-circle:before {
  content: "\f057"; }

.icon-question-circle:before {
  content: "\f059"; }

.icon-info-circle:before {
  content: "\f05a"; }

.icon-plus:before {
  content: "\f067"; }

.icon-minus:before {
  content: "\f068"; }

.icon-exclamation-circle:before {
  content: "\f06a"; }

.icon-plane:before {
  content: "\f072"; }

.icon-angle-left:before {
  content: "\f104"; }

.icon-angle-right:before {
  content: "\f105"; }

.icon-angle-up:before {
  content: "\f106"; }

.icon-angle-down:before {
  content: "\f107"; }

.icon-automobile:before {
  content: "\f1b9"; }

.icon-cog:before {
  content: "\f013"; }

.mix-icon_lg {
  font-size: 24px; }

.mix-icon_sm {
  font-size: 10px; }

.mix-icon_optionGroup {
  font-size: 10px;
  margin-left: 5px;
  margin-right: 2px; }

.mix-icon_tree {
  font-size: 10px;
  margin-left: 5px;
  margin-right: 2px; }

/*doc
---
title: Info
name: Info
category: index
---

Used for blocks of information with a heading and subtext or heading, subtext, button or icon. See examples below.

```html_example

<div class="info">
    <div class="info-hd">
        <h2 class="hdg hdg_4">Test heading</h2>
    </div>
    <div class="info-bd">test in the body</div>
</div>

```

## Info Centered
```html_example

<div class="info info_centered">
    <div class="info-hd"><h2 class="hdg hdg_4">Test heading</h2></div>
    <div class="info-bd">test in the body</div>
</div>

```

## Info with Icon
```html_example

<div class="info info_centered">
    <div class="info-icon"><i class="icon-home"></i></div>
    <div class="info-hd"><h2 class="hdg hdg_4">Test heading</h2></div>
    <div class="info-bd">test in the body</div>
    <div class="info-ft">
        <a href="#" class="btn">Button</a>
    </div>
</div>

```
*/
.info_centered {
  text-align: center; }

.info-icon {
  text-align: center;
  margin-bottom: 10px; }

.info-icon > * {
  font-size: 40px;
  color: #56aec6; }

.info-hd {
  margin-bottom: 6px; }

.info-bd {
  line-height: 1.4; }

.info-ft {
  margin-top: 6px; }

.mix-info_lg > .info-hd {
  margin-bottom: 18px; }

.mix-info_lg > .info-ft {
  margin-top: 18px; }

/*doc
---
title: Intro
name: Intro
category: index
---

Page introductions

```html_example

<div class="intro">
    <div class="intro-hd">
        <h1 class="hdg hdg_2">Heading</h1>
    </div>
    <div class="introd-bd">body copy text</div>
</div>

```
*/
.intro {
  margin-bottom: 18px; }

.intro-hd {
  margin-bottom: 10px; }

.intro-bd {
  line-height: 1.4; }

/*doc
---
title: Media Object
name: media
category: index
---

The media object consists of two parts:

 - an optional `media-img` on the left that contains media such as images, videos, etc
 - a required `media-bd` on the right that contains descriptive content related to the media

The image is floated left and has a margin-right to keep copy from pressing up against it. The content triggers a new block formatting context to keep copy from wrapping around the image.

Note that neither the image nor the copy have a width set allowing for maximum reusability with any provided image size.

[Read more on Nicole Sullivan's blog](http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/)

```html_example
<div class="media">
    <div class="media-img">
        <img src="http://placehold.it/120x120" alt="" />
    </div>
    <div class="media-bd">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 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. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.</p>
    </div>
</div>
```
*/
.media:before, .media:after {
  content: " ";
  display: table; }

.media:after {
  clear: both; }

.media img {
  display: block; }

.media-img {
  float: left;
  margin-right: 20px; }

.media-img_isFlipped {
  float: right;
  margin: 0 0 0 20px; }

.media-bd {
  overflow: hidden; }

.modal {
  background: #ffffff;
  border: 1px solid #ececec;
  box-shadow: 0 0 10px #ececec;
  position: absolute;
  top: 100px;
  left: 50%;
  width: 600px;
  margin-left: -300px;
  display: none;
  z-index: 300; }

.modal_lg {
  width: 800px;
  margin-left: -400px; }

.modal-inner {
  padding: 30px 20px; }

.modal-close {
  position: absolute;
  top: 10px;
  right: 20px;
  font-size: 26px; }

.modal-overlay {
  z-index: 50;
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.7); }

/*doc
---
title: Notification
name: Notification
category: index
---

## Notification or alert styles
```html_example

<span class="notification">
    Notification Text
</span>

```
*/
.notification {
  padding-left: 30px;
  position: relative;
  vertical-align: middle; }

.notification:before {
  content: "\f06a";
  font-family: "FontAwesome";
  font-size: 24px;
  position: absolute;
  top: -5px;
  left: 0; }

/*doc
---
title: Option Group
name: Option Group
category: index
---

Group of options

```html_example
    <div class="optionGroup">
        <div class="optionGroup-label"></div>
        <div class="optionGroup-list"></div>
    </div>
```
*/
.optionGroup {
  margin-bottom: 20px; }

.optionGroup-label {
  color: #666666;
  display: block;
  margin-bottom: 10px;
  font-size: 16px;
  font-weight: bold; }

/*doc
---
title: Pagination
name: Pagination
category: index
---

## Standard
```html_example

<ul class="pagination">
    <li>1</li>
    <li>2</li>
</ul>
```
*/
.pagination {
  margin: 20px 0; }

.pagination > * {
  display: inline-block;
  padding: 4px; }

.pagination > .active a {
  font-weight: bold;
  color: #344452; }

/*doc
---
title: Percentile
name: Percentile
category: index
---

## Standard Percentile Coloring
```html_example

<div class="percentile percentile_assetHigh">

</div>
```
*/
.percentile {
  background-color: transparent;
  border-radius: 50%;
  width: 8px;
  height: 8px;
  display: inline-block;
  margin-bottom: 2px;
  margin-left: 4px; }

.percentile_assetZero,
.percentile_inflowZero,
.percentile_liabilityZero,
.percentile_outflowZero {
  background-color: #dddddd; }

.percentile_assetLow,
.percentile_inflowLow,
.percentile_liabilityHigh,
.percentile_outflowHigh {
  background-color: #ff8080; }

.percentile_assetMiddle,
.percentile_inflowMiddle,
.percentile_liabilityMiddle,
.percentile_outflowMiddle {
  background-color: #ffff80; }

.percentile_assetHigh,
.percentile_inflowHigh,
.percentile_liabilityLow,
.percentile_outflowLow {
  background-color: #80c080; }

/*doc
---
title: Progress
name: Progress
category: index
---

Used to show profile completion progress

```html_example

<div class="progress">
    <div class="progress-completed" style="width: 80%">
        <div class="isVisuallyHidden">Your profile is 80% complete</div>
    </div>
</div>

```
*/
.progress {
  background: #ffffff;
  height: 30px;
  max-width: 70%;
  margin: 0 auto;
  border-radius: 2px;
  border: 1px solid #e7e7e7; }

.progress-completed {
  border-radius: 2px 0 0 2px;
  height: 100%;
  background: #485e71; }

/*doc
---
title: Progress Indicator
name: Progress Indicator
category: index
---

Used to show profile completion progress. Default is three steps but extensions are available for four and five step options. Designed to fit in a grid column configuration of 9 columns, i.e. `grid-col_size9of12`.

```html_example

<ul class="progressIndicator">
    <li class="progressIndicator-item progressIndicator-item_isComplete">
        <span>My Information</span>
    </li>
    <li class="progressIndicator-item progressIndicator-item_isActiveStep">
        <span>My Household</span>
    </li>
    <li class="progressIndicator-item">
        <span>My Education</span>
    </li>
</ul>

```
*/
.progressIndicator {
  padding: 43px 0 0 0;
  margin: 0 0 18px 0;
  font-size: 0;
  white-space: nowrap; }
  .progressIndicator > * {
    display: inline-block;
    vertical-align: top; }
  .progressIndicator > * + * {
    margin: 0 0 0 281px; }

.progressIndicator-item {
  width: 75px;
  position: relative;
  color: #344452;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  font-size: 11px; }

.progressIndicator-item span {
  display: block;
  margin-top: 10px; }

.progressIndicator-item::before {
  display: block;
  content: '';
  width: 281px;
  height: 6px;
  position: absolute;
  top: -30px;
  right: -281px;
  margin-top: -1px;
  background-color: #ececec; }

.progressIndicator-item::after {
  display: block;
  content: '';
  width: 30px;
  height: 30px;
  position: absolute;
  border-radius: 50%;
  top: -43px;
  left: 22.5px;
  background-color: #ddd; }

.progressIndicator-item:last-child::before {
  content: none; }

.progressIndicator_4up > * + * {
  margin: 0 0 0 160px; }

.progressIndicator_4up .progressIndicator-item::before {
  width: 160px;
  right: -160px; }

.progressIndicator_5up > * + * {
  margin: 0 0 0 101px; }

.progressIndicator_5up .progressIndicator-item::before {
  width: 101px;
  right: -101px; }

.progressIndicator-item_isComplete::before,
.progressIndicator-item_isComplete::after {
  background-color: #7fc280; }

.progressIndicator-item_isActiveStep::after {
  background-color: #485e71; }

/*doc
---
title: Question
name: Question
category: index
---

Question text

```html_example

<div class="question">
    Text for a question
</div>

```
*/
.question {
  line-height: 1.2; }

/*doc
---
title: ScrollableTable
name: ScrollableTable
category: index
---

## Scrollable Table
```html_example
<table class="scrollableTable">
    <thead class="scrollableTable-parent">
        <tr class="scrollableTable-parent-row">
            <th class="isHead">&nbsp;</th>
            <th class="isName isShort" data-group="1">Repeating</th>
            <th data-group="1">Cellphone</th>
            <th data-group="1">Electricity</th>
            <th data-group="1">Home Owners Association</th>
            <th class="isName isShort" data-group="2">Non-Repeating</th>
            <th data-group="2">Gas</th>
            <th data-group="2">Groceries</th>
            <th data-group="2">Other/Uncategorized/miscellany</th>
            <th class="isSummation isHead">
                Month <br/>
                TOTALS
            </th>
        </tr>
    </thead>
    <tbody class="scrollableTable-parent">
        <tr class="scrollableTable-parent-row  isCurrentMonth">
            <td class="isHead">April <span class="isCurrentMonth-indicator"><br/>(current month)</span></td>
            <td class="isShort" data-group="1">&nbsp;</td>
            <td data-group="1" data-value="50.00">$50</td>
            <td data-group="1" data-value="50.00">$50</td>
            <td data-group="1" data-value="50.00">$50</td>
            <td class="isShort" data-group="2">&nbsp;</td>
            <td data-group="2" data-value="50.00">$50</td>
            <td data-group="2" data-value="50.00">$50</td>
            <td data-group="2" data-value="50.00">$50</td>
            <td class="js-summation isSummation"></td>
        </tr>&nbsp;<tr class="scrollableTable-parent-row"></tr>
    </tbody>
    <tfoot class="scrollableTable-parent">
        <tr class="scrollableTable-parent-row">
            <td class="isHead">
                Expense
                <br/>&nbsp;&nbsp;
                TOTALS
            </td>
            <td class="isShort" data-group="1" ></td>
            <td data-group="1" data-value="350.00">
                $350
                <br/>&nbsp;&nbsp;
                $50.00/avg. month
            </td>
            <td data-group="1" data-value="350.00">                
                $350
                <br/>&nbsp;&nbsp;
                $50.00/avg. month
            </td>
            <td data-group="1" data-value="350.00">                
                $350 <br/>&nbsp;&nbsp;
                $50.00/avg. month
            </td>
            <td class="isShort"data-group="2">&nbsp;</th>
            <td data-group="2" data-value="350.00">
                $350
                <br/>&nbsp;&nbsp;
                $50.00/avg. month
            </td>
            <td data-group="2" data-value="350.00">
                $350
                <br/>&nbsp;&nbsp;
                $50.00/avg. month
            </td>
            <td data-group="2" data-value="350.00">$350</td>
            <td class="js-summation isSummation">
                <span class="js-total"></span>
                <br/>&nbsp;&nbsp;
                <span class="js-average"></span>
            </td>
        </tr>
    </tfoot>
</table>
```
*/
.grid-col_size2of10 {
  width: 20%;
  margin: 0; }

.grid-col_size4of10 {
  width: 40%;
  margin: 0; }

.colorIndicator {
  width: 12px;
  height: 12px;
  border-radius: 12px;
  display: inline-block; }

.scrollableTable {
  border: 1px solid #ddd;
  max-width: 100%;
  width: 100%; }
  .scrollableTable:before, .scrollableTable:after {
    content: " ";
    display: table; }
  .scrollableTable:after {
    clear: both; }
  .scrollableTable .scrollableTable-parent {
    display: block;
    box-sizing: border-box;
    float: left;
    text-align: left; }
  .scrollableTable thead.scrollableTable-parent {
    width: 20%; }
  .scrollableTable tbody.scrollableTable-parent {
    width: 62%;
    border: 1px solid #ddd;
    border-top: 0;
    border-bottom: 0;
    position: relative;
    white-space: nowrap;
    overflow-x: auto;
    text-align: center; }
    .scrollableTable tbody.scrollableTable-parent tr {
      width: 25%;
      display: inline-block;
      vertical-align: top; }
  .scrollableTable tfoot.scrollableTable-parent {
    width: 18%; }
  .scrollableTable tr.scrollableTable-parent-row {
    display: block; }
  .scrollableTable th, .scrollableTable td {
    display: block;
    line-height: 20px;
    padding: 6px;
    vertical-align: top;
    height: 40px;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 12px; }
  .scrollableTable .isShort {
    height: 20px; }
  .scrollableTable .isHead {
    font-weight: bold; }
  .scrollableTable .isSummation {
    background-color: #eee; }
  .scrollableTable .isName {
    color: #ffffff;
    font-weight: bold; }
  .scrollableTable .isCurrentMonth::before {
    content: "";
    width: 25%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    background: lightskyblue;
    opacity: .2;
    pointer-events: none; }
  .scrollableTable .isCurrentMonth-indicator {
    display: none; }
  .scrollableTable .isCurrentMonth .isCurrentMonth-indicator {
    display: inline; }

/*doc
---
title: Section
name: Section
category: index
---

Sections are used to space content on the page. They can use a divider class to add border or include a section-hd to give space under heading content.



## Section
```html_example
<div class="section">
    Section Content
</div>
```

## Section Divided
```html_example
<div class="section mix-section_divided">
    Section Content
</div>
```

## Section (more spacing underneath)
```html_example
<div class="section section_lg">
    Section Content
</div>
```

## Section (more spacing underneath) + divided
```html_example
<div class="section section_lg mix-section_divided">
    Section Content
</div>
```

## Section with section hd
```html_example
<div class="section section_lg mix-section_divided">
    <div class="section-hd">
      Text
    </div>
</div>

```
*/
.section {
  margin-bottom: 18px; }

.section_lg {
  margin-bottom: 50px; }

.mix-section_divided {
  padding-bottom: 18px;
  border-bottom: 1px solid #ececec; }

.mix-section_divided.section_lg {
  padding-bottom: 50px; }

.section-hd {
  margin-bottom: 10px; }

.section-hd-titlePushed {
  margin-top: 5px; }

/*doc
---
title: Split
name: split
category: index
---

Split simply allows for two things on one line, one on the left, one on the right, independent of the grid.

```html_example
    <div class="split">
        <div class="split-left">
            I'm on the left
        </div>
        <div class="split-right">
            I'm on the right
        </div>
    </div>
```
*/
.split:before, .split:after {
  content: " ";
  display: table; }

.split:after {
  clear: both; }

.split_overflow {
  overflow: hidden; }

.split-left {
  float: left; }

.split-right {
  float: right; }

/*doc
---
title: Text
name: Text
category: index
---

## Normal text
Default text.

```html_example
<p class="txt">Lorem ipsum.</p>
```

## Text that breaks automatically
Text that is broken up and split across multiple lines.

```html_example
<p class="txt mix-txt_break">Lorem ipsum.</p>
```
*/
.txt_attribution {
  font-size: 11px; }

.mix-txt_break {
  word-wrap: break-word;
  word-break: break-all; }

.mix-txt_nowrap {
  white-space: nowrap; }

.mix-txt_bold {
  font-weight: bold; }

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

.mix-txt_md {
  font-size: 18px; }

/*doc
---
title: Tree
name: Tree
category: index
---
Vertical lists are used to space related items evenly, vertically down the page.

## Standard Tree
```html_example
<ul class="tree">
    <li>
        Item 1
        <ul>
            <li>Item 1.1</li>
            <li>Item 1.2</li>
        </ul>
    </li>
    <li>
        Item 2
        <ul>
            <li>Item 2.1</li>
            <li>Item 2.2</li>
        </ul>
     </li>
</ul>
```
*/
.tree ul {
  margin-left: 20px;
  padding-top: 6px; }

.tree li {
  padding: 6px 0; }

.tree li:last-child {
  padding-bottom: 0; }

/*doc
---
title: Tabs
name: Tabs
category: index
---

Tabs

```html_example
    <ul class="tabs">
        <li class="tabs-item tabs-item_isActive"></li>
        <li class="tabs-item"></li>
    </ul>
```
*/
.tabs {
  margin-bottom: 30px;
  border-bottom: 1px solid #dddddd;
  font-size: 0;
  /* fix for space between inline-block */ }

.tabs > * {
  border: 1px solid #dddddd;
  border-bottom: 0;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px; }

.tabs > * + * {
  border-left: 0; }

.tabs-item {
  display: inline-block;
  vertical-align: middle;
  font-size: 14px; }

.tabs-item_isActive {
  position: relative;
  top: 1px;
  font-weight: bold;
  border-bottom: 1px solid #fff; }

.tabs-item a {
  display: block;
  padding: 14px 24px; }

.tabs-item_isActive a {
  color: #344452; }

/*doc
---
title: Vertical List
name: Vertical List
category: index
---
Vertical lists are used to space related items evenly, vertically down the page.

## Standard Vertical List, 10px spacing
```html_example
<ul class="vList">
    <li>Item 1</li>
    <li>Item 2</li>
</ul>
```

## Small Vertical List, 20px spacing
```html_example
<ul class="vList vList_sm">
    <li>Item 1</li>
    <li>Item 2</li>
</ul>
```

## Medium Vertical List, 30px spacing
```html_example
<ul class="vList vList_sm">
    <li>Item 1</li>
    <li>Item 2</li>
</ul>
```

## Divided Vertical List, 30px spacing
```html_example
<ul class="vList vList_lg vList_divided">
    <li>Item 1</li>
    <li>Item 2</li>
</ul>
```
*/
.vList > * + * {
  margin-top: 10px; }

.vList_sm > * + * {
  margin-top: 10px; }

.vList_md > * + * {
  margin-top: 18px; }

.vList_divided > * + * {
  padding-top: 18px;
  border-top: 1px solid #ececec; }

.vList_striped > li:nth-child(odd) {
  background: #f9f9f9; }

.vList_separated > * {
  padding: 10px;
  border-top: 1px solid #ececec; }

.vList_separated > * + * {
  margin-top: 0; }

.vList_separated > *:last-child {
  border-bottom: 1px solid #ececec; }

/* quarantine.css | MIT License | github.com/apticknor/quarantine.css */
/*
 Clearfix

 * Always clear unknown content as it may contain a float
========================================================================== */
.wysiwyg:before,
.wysiwyg:after {
  content: " ";
  display: table; }

.wysiwyg:after {
  clear: both; }

/*
 Baseline

 1. Set the container to inherit basic styles from it's parent
 2. Make sure long words line break appropriately
 3. Remove excess margin from the first and last child and use !important to override inheritance from ancestors
========================================================================== */
.wysiwyg {
  color: inherit;
  /* 1 */
  font-family: inherit;
  /* 1 */
  font-weight: normal;
  font-size: 14px;
  line-height: 1.5;
  -ms-word-wrap: break-word;
  /* 2 */
  word-wrap: break-word;
  /* 2 */ }

.wysiwyg > *:first-child {
  margin-top: 0 !important;
  /* 3 */ }

.wysiwyg > *:last-child {
  margin-bottom: 0 !important;
  /* 3 */ }

/*
 Embedded Content & Media

 * All media set to max-width 100% to prevent it from overflowing the container
 1. !important to override inheritance from ancestors
 2. If a piece of media does not have a container, add margin below it to keep the flow intact
========================================================================== */
.wysiwyg img,
.wysiwyg iframe,
.wysiwyg embed,
.wysiwyg object,
.wysiwyg video,
.wysiwyg audio,
.wysiwyg canvas,
.wysiwyg picture {
  max-width: 100% !important;
  /* 1 */ }

/* 2 */
.wysiwyg > img,
.wysiwyg > iframe,
.wysiwyg > embed,
.wysiwyg > object,
.wysiwyg > video,
.wysiwyg > audio,
.wysiwyg > canvas,
.wysiwyg > picture {
  display: inline-block;
  margin-bottom: 1rem; }

/*
 Anchors
========================================================================== */
.wysiwyg a:link {
  color: #0000ff;
  text-decoration: underline; }

.wysiwyg a:focus,
.wysiwyg a:hover {
  color: #0000ff;
  text-decoration: underline; }

/*
 Paragraphs
========================================================================== */
.wysiwyg p {
  margin-bottom: 1rem; }

/*
 Headings

 1. Take advantage of margin collapsing to create greater space above a heading
 2. Reduce line-height as headings are much larger than body copy
 3. Headings should stay the same color as intended and not inherit link styles and use !important to override inheritance from ancestors
========================================================================== */
.wysiwyg h1,
.wysiwyg h2,
.wysiwyg h3,
.wysiwyg h4,
.wysiwyg h5,
.wysiwyg h6 {
  margin-top: 1.7rem;
  /* 1 */
  margin-bottom: 1rem;
  font-family: inherit;
  font-weight: bold;
  line-height: 1.2;
  /* 2 */ }

.wysiwyg h1 {
  font-size: 2.25rem; }

.wysiwyg h2 {
  font-size: 1.5rem; }

.wysiwyg h3 {
  font-size: 1.3125rem; }

.wysiwyg h4 {
  font-size: 1.125rem; }

.wysiwyg h5 {
  font-size: 1rem; }

.wysiwyg h1 a,
.wysiwyg h2 a,
.wysiwyg h3 a,
.wysiwyg h4 a,
.wysiwyg h5 a,
.wysiwyg h6 a {
  color: inherit !important;
  /* 3 */ }

/*
 Blockquote

 1. Push content away from the horizontal rule more than the normal spacing
 2. Border inherits color from text color
 3. Remove bottom margin from last item inside a blockquote
========================================================================== */
.wysiwyg blockquote {
  box-sizing: border-box;
  margin-top: 1.7rem;
  /* 1 */
  margin-bottom: 1.7rem;
  /* 1 */
  border-left: 5px solid;
  /* 2 */
  padding: 1rem 2rem;
  font-family: inherit;
  font-size: 1.3125rem;
  font-style: italic; }

.wysiwyg blockquote > *:last-child {
  margin-bottom: 0;
  /* 3 */ }

/*
 Address

 1. Mimic browser default text style - italics
========================================================================== */
.wysiwyg address {
  margin-bottom: 1rem;
  font-style: italic;
  /* 1 */ }

/*
 Horizontal Rule

 1. Push content away from the horizontal rule than the normal spacing
 2. Set an explicit 1px height for the horizontal rule
 3. Remove borders for maximum browser support
 4. Set the color of the horizontal rule as both color and background-color for maximum browser support
 5. Reduce font-size and line-height to keep height from exceeeding 1px
========================================================================== */
.wysiwyg hr {
  margin-top: 1.7rem;
  /* 1 */
  margin-bottom: 1.7rem;
  /* 1 */
  height: 1px;
  /* 2 */
  border: none;
  /* 3 */
  background: #aaaaaa;
  /* 4 */
  color: #aaaaaa;
  /* 4 */
  line-height: 1px;
  /* 5 */
  font-size: 1px;
  /* 5 */ }

/*
 Inline Text

 * Mimics browsers as close as possible while maintaining cross browser consistency
 * Includes some invalid legacy elements as they may be added by older WYSIWYG editors
========================================================================== */
.wysiwyg strong,
.wysiwyg b {
  font-weight: bold; }

.wysiwyg em,
.wysiwyg i {
  font-style: italic; }

.wysiwyg del,
.wysiwyg strike,
.wysiwyg s {
  text-decoration: line-through; }

.wysiwyg u,
.wysiwyg ins {
  text-decoration: underline; }

.wysiwyg sup {
  vertical-align: super;
  font-size: smaller; }

.wysiwyg sub {
  vertical-align: sub;
  font-size: smaller; }

.wysiwyg big {
  font-size: larger; }

.wysiwyg small {
  font-size: smaller; }

.wysiwyg abbr,
.wysiwyg acronym {
  border-bottom: 1px dotted; }

.wysiwyg cite,
.wysiwyg dfn {
  font-style: italic; }

.wysiwyg q {
  font-style: italic; }

.wysiwyg q::before {
  content: open-quote; }

.wysiwyg q::after {
  content: close-quote; }

.wysiwyg q:lang(en) {
  quotes: "\201C" "\201D" "\2018" "\2019"; }

.wysiwyg bdo,
.wysiwyg bdi {
  direction: rtl; }

.wysiwyg blink {
  text-decoration: blink; }

/*
 Lists
 1. Indent lists and leave room for the list item mark
 2. Nested lists have no bottom margin
 3. Second level nested lists
 4. Third level nested lists
========================================================================== */
.wysiwyg ul,
.wysiwyg ol,
.wysiwyg dl {
  margin-bottom: 1rem; }

.wysiwyg ul {
  list-style-type: disc; }

.wysiwyg ol {
  list-style-type: decimal; }

.wysiwyg dt {
  font-weight: bold; }

.wysiwyg li,
.wysiwyg dd {
  margin-left: 1.7rem;
  /* 1 */ }

/* 2 */
.wysiwyg ul ul,
.wysiwyg ul ol,
.wysiwyg ul dl,
.wysiwyg ol ul,
.wysiwyg ol ol,
.wysiwyg ol dl,
.wysiwyg dl ul,
.wysiwyg dl ol,
.wysiwyg dl dl {
  margin-bottom: 0; }

/* 3 */
.wysiwyg ol ul,
.wysiwyg ul ul {
  list-style-type: circle; }

/* 4 */
.wysiwyg ol ol ul,
.wysiwyg ol ul ul,
.wysiwyg ul ol ul,
.wysiwyg ul ul ul {
  list-style-type: square; }

/*
 Tables
 1. Table should never overflow their parent container and will always use 100% of the container and use !important to override inheritance from ancestors
 2. Push content away from the horizontal rule more than the normal spacing
========================================================================== */
.wysiwyg table {
  width: 100% !important;
  /* 1 */
  margin-bottom: 1.7rem;
  /* 2 */
  border-spacing: 0;
  border-collapse: collapse; }

.wysiwyg caption {
  font-size: smaller;
  padding: 10px 12px;
  text-align: center; }

.wysiwyg tr {
  vertical-align: middle; }

.wysiwyg tbody {
  vertical-align: middle; }

.wysiwyg thead {
  vertical-align: middle; }

.wysiwyg tfoot {
  vertical-align: middle; }

.wysiwyg td {
  vertical-align: inherit;
  text-align: left;
  padding: 4px 12px;
  border: 1px solid #ececec; }

.wysiwyg th {
  vertical-align: inherit;
  text-align: left;
  font-weight: bold;
  padding: 8px 12px;
  border: 1px solid #ececec;
  background-color: transparent; }

/*
 Computer Output

 1. Push content away from the horizontal rule more than the normal spacing
 2. `code` styles get reset when `code` is nested inside `pre`
========================================================================== */
.wysiwyg pre {
  margin-top: 1.7rem;
  /* 1 */
  margin-bottom: 1.7rem;
  /* 1 */
  padding: 2rem;
  border: 1px solid #aaaaaa;
  background-color: #f8f8f8;
  font-family: "Lucida Console", Monaco, monospace;
  font-size: 14px;
  border-radius: 2px;
  white-space: pre-wrap;
  word-break: break-all; }

.wysiwyg code {
  display: inline-block;
  padding: 2px 6px;
  border: 1px solid #aaaaaa;
  background-color: #f8f8f8;
  color: #dd1144;
  font-size: 14px;
  border-radius: 2px; }

.wysiwyg pre code {
  display: block;
  padding: 0;
  /* 2 */
  background-color: transparent;
  /* 2 */
  border: none;
  /* 2 */
  font-size: inherit;
  /* 2 */
  color: inherit;
  /* 2 */
  border-radius: 0;
  /* 2 */ }

.wysiwyg code,
.wysiwyg samp,
.wysiwyg tt,
.wysiwyg kbd,
.wysiwyg var {
  font-family: "Lucida Console", Monaco, monospace; }

.wysiwyg var {
  font-style: italic; }

/*doc
---
title: Year Selector
name: Year Selector
category: index
---

Year selector

```html_example
    <ul class="yearSelector">
        <li class="yearSelector-item yearSelector-item_isActive">
            <span class="yearSelector-year">2017</span>
            <span class="yearSelector-value">$500</span>
        </li>
        <li class="yearSelector-item">
            <span class="yearSelector-year">2016</span>
            <span class="yearSelector-value">$200</span>
        </li>
    </ul>
```
*/
.yearSelector * + * {
  margin-top: 2px; }

.yearSelector-item {
  border: 1px solid #dddddd;
  padding: 4px 12px;
  line-height: 20px;
  display: block;
  color: #344452; }

.yearSelector-item_isActive {
  background-color: #56aec6;
  color: #ffffff; }

.yearSelector-item_isActive:hover {
  background-color: #3b95ae;
  color: #ffffff; }

.yearSelector-year {
  font-weight: bold;
  display: block; }

.yearSelector-value {
  display: block; }

/*doc
---
title: Form Elements
name: Form Elements
category: index
---

## STANDARD Input
```html_example
<input class="input input_text" type="text"/>
```

## Standard Input, full width of container
```html_example
<input class="input input_text mix-input_full" type="text " />
```

## Chunky Input
```html_example
<input class="input input_text mix-input_chunky" type="text"/>
```

## Small Input
```html_example
    <input class="input input_text mix-input_sm" type="text"/>
```

## Medium Input
```html_example
<input class="input input_text mix-input_md" type="text"/>
```

## Double Digit Input
(for fields with only two numbers, such as birth month)

```html_example
<input type="text" class="input input_text mix-input_digits mix-input_digits_double" placeholder="MM" maxlength="2"/>
<input type="text" class="input input_text mix-input_digits mix-input_digits_double" placeholder="DD" maxlength="2"/>
```

## Four Digit Input
(for fields with only four numbers, such as birth year)

```html_example
<input type="text" class="input input_text mix-input_digits mix-input_digits_quad" placeholder="YYYY" maxlength="4"/>
```

## Labels
Adding this class gives it default space underneath and makes it a block level element

```html_example
<label class="label">Label</label>
```

## Smaller Text Labels
```html_example
<label class="label label_sm">Label</label>
```

## Bold Label
```html_example
<label class="label mix-label_strong">Label</label>
```

## Error
```html_example
<div class="error">This is error text</div>
```

## Error Notification
Lives at top of the form

```html_example
<div class="errorNotification">This is error text summary</div>
```

## Select Aligned
Select element that gets pushed down 10px to better align with surrounding content

```html_example
<select class="select select_aligned">
<option>Option 1</option>
</select>
```
*/
.input {
  border: 1px solid #ececec;
  padding: 8px;
  font-size: 14px;
  font-family: "Gibson-Light", sans-serif;
  margin: 0;
  -webkit-transition: border-color 0.25s linear;
  -moz-transition: border-color 0.25s linear;
  -o-transition: border-color 0.25s linear;
  transition: border-color 0.25s linear;
  -webkit-padding-start: 0 1px;
  box-shadow: none; }

[type="radio"].input {
  margin-right: 6px; }

.input:focus {
  border-color: #344452; }

.input_isDisabled {
  background-color: #fcfcfc; }

.inputCheckboxNested {
  margin-right: 10px; }

.mix-input_full {
  display: block;
  width: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

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

.mix-input_digits_double {
  width: 50px; }

.mix-input_digits_quad {
  width: 100px; }

.mix-input_chunky {
  padding: 15px; }

.mix-input_tiny {
  width: 60px; }

.mix-input_sm {
  width: 100px; }

.mix-input_smMd {
  width: 120px; }

.mix-input_md {
  width: 200px; }

.mix-input_lg {
  width: 300px; }

.mix-input_block {
  width: 100%; }

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

.mix-input_static {
  border: 0;
  padding: 13px 0; }

.label {
  color: #666666;
  display: block;
  font-size: 14px;
  margin-bottom: 8px;
  font-weight: bold; }

.error {
  padding-top: 5px;
  color: red; }

.error .help-block > * + * {
  margin-top: 6px; }

.errorNotification {
  padding: 20px 0;
  color: red; }

.select_aligned {
  margin-top: 10px; }

/*doc
---
title: Form
name: Form
category: index
---

## Form with sections
```html_example

<form class="form">
    <fieldset class="form-section">
        A section of a form that is spaced apart from other sections
    </fieldset>
    <fieldset class="form-section">
        A section of a form that is spaced apart from other sections
    </fieldset>
</form>
```

## Form with sections, divided and a form section heading
```html_example

<form class="form">
    <fieldset class="form-section form-section_divided">
        <div class="form-section-hd"><h2 class="hdg">Form Section Heading</h2></div>
        A section of a form that is spaced apart from other sections
    </fieldset>
    <fieldset class="form-section form-section_divided">
       <div class="form-section-hd"><h2 class="hdg">Form Section Heading</h2></div>
        A section of a form that is spaced apart from other sections
    </fieldset>
    <fieldset class="form-section form-section_divided">
        <div class="form-section-hd form-section-hd_divided"><h2 class="hdg">Form Section Heading</h2></div>
        <div class="form-note">Form Note text</div>
        A section of a form that is spaced apart from other sections
    </fieldset>
</form>

```
*/
.form-section {
  margin-bottom: 30px; }

.form-section_divided + .form-section_divided {
  border-top: 1px solid #ececec;
  padding-top: 18px; }

.form-section-hd {
  margin-bottom: 10px; }

.form-section-hd_divided {
  border-bottom: 1px solid #ececec;
  padding-bottom: 6px; }

.form-note {
  font-style: italic;
  font-weight: 300; }

.form-section-amount {
  position: relative;
  padding-left: 10px; }

.form-section-amount:before {
  content: "$";
  font-size: 22px;
  font-weight: 400;
  padding: 0 4px; }

.form-error .input_text {
  border-color: red; }

.form-error .select2-container .select2-choice {
  border-color: red; }

/*doc
---
title: Datepicker
name: Datepicker
category: index
---

Jquery UI plugin to add datepicker field and button. Must wrap input in a div with class of datepicker and input must have a class of input-datepicker.

```html_example

<div class="datepicker">
    <input id="cd-end-date" type="text" class="input input_text datepicker-input" />
</div>
```
*/
/*! jQuery UI - v1.11.1 - 2014-09-08
* http://jqueryui.com
* Includes: core.css, selectable.css, datepicker.css, theme.css
* Copyright 2014 jQuery Foundation and other contributors; Licensed MIT */
/* Layout helpers
----------------------------------*/
.ui-helper-hidden {
  display: none; }

.ui-helper-hidden-accessible {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px; }

.ui-helper-reset {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  line-height: 1.3;
  text-decoration: none;
  font-size: 100%;
  list-style: none; }

.ui-helper-clearfix:before,
.ui-helper-clearfix:after {
  content: "";
  display: table;
  border-collapse: collapse; }

.ui-helper-clearfix:after {
  clear: both; }

.ui-helper-clearfix {
  min-height: 0;
  /* support: IE7 */ }

.ui-helper-zfix {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: absolute;
  opacity: 0;
  filter: Alpha(Opacity=0);
  /* support: IE8 */ }

.ui-front {
  z-index: 100; }

/* Interaction Cues
----------------------------------*/
.ui-state-disabled {
  cursor: default !important; }

/* Icons
----------------------------------*/
/* states and images */
.ui-icon {
  display: block;
  text-indent: -99999px;
  overflow: hidden;
  background-repeat: no-repeat; }

/* Misc visuals
----------------------------------*/
/* Overlays */
.ui-widget-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; }

.ui-selectable {
  -ms-touch-action: none;
  touch-action: none; }

.ui-selectable-helper {
  position: absolute;
  z-index: 100;
  border: 1px dotted black; }

.ui-datepicker {
  width: 17em;
  padding: .2em .2em 0;
  display: none; }

.ui-datepicker .ui-datepicker-header {
  position: relative;
  padding: .2em 0; }

.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
  position: absolute;
  top: 2px;
  width: 1.8em;
  height: 1.8em; }

.ui-datepicker .ui-datepicker-prev {
  left: 2px; }

.ui-datepicker .ui-datepicker-next {
  right: 0; }

.ui-datepicker .ui-datepicker-prev span,
.ui-datepicker .ui-datepicker-next span {
  display: block;
  position: absolute;
  left: 50%;
  margin-left: -8px;
  top: 50%;
  margin-top: -8px; }

.ui-datepicker .ui-datepicker-title {
  margin: 0 2.3em;
  line-height: 1.8em;
  text-align: center;
  color: #ffffff; }

.ui-datepicker .ui-datepicker-title select {
  font-size: 1em;
  margin: 1px 0; }

.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year {
  width: 45%; }

.ui-datepicker table {
  width: 100%;
  font-size: .9em;
  border-collapse: collapse;
  margin: 0 0 .4em; }

.ui-datepicker th {
  padding: .7em .3em;
  text-align: center;
  font-weight: bold;
  border: 0; }

.ui-datepicker td {
  border: 0;
  padding: 1px; }

.ui-datepicker td span,
.ui-datepicker td a {
  display: block;
  padding: .2em;
  text-align: right;
  text-decoration: none; }

.ui-datepicker .ui-datepicker-buttonpane {
  background-image: none;
  margin: .7em 0 0 0;
  padding: 0 .2em;
  border-left: 0;
  border-right: 0;
  border-bottom: 0; }

.ui-datepicker .ui-datepicker-buttonpane button {
  float: right;
  margin: .5em .2em .4em;
  cursor: pointer;
  padding: .2em .6em .3em .6em;
  width: auto;
  overflow: visible; }

.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current {
  float: left; }

/* with multiple calendars */
.ui-datepicker.ui-datepicker-multi {
  width: auto; }

.ui-datepicker-multi .ui-datepicker-group {
  float: left; }

.ui-datepicker-multi .ui-datepicker-group table {
  width: 95%;
  margin: 0 auto .4em; }

.ui-datepicker-multi-2 .ui-datepicker-group {
  width: 50%; }

.ui-datepicker-multi-3 .ui-datepicker-group {
  width: 33.3%; }

.ui-datepicker-multi-4 .ui-datepicker-group {
  width: 25%; }

.ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header,
.ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header {
  border-left-width: 0; }

.ui-datepicker-multi .ui-datepicker-buttonpane {
  clear: left; }

.ui-datepicker-row-break {
  clear: both;
  width: 100%;
  font-size: 0; }

/* RTL support */
.ui-datepicker-rtl {
  direction: rtl; }

.ui-datepicker-rtl .ui-datepicker-prev {
  right: 2px;
  left: auto; }

.ui-datepicker-rtl .ui-datepicker-next {
  left: 2px;
  right: auto; }

.ui-datepicker-rtl .ui-datepicker-prev:hover {
  right: 1px;
  left: auto; }

.ui-datepicker-rtl .ui-datepicker-next:hover {
  left: 1px;
  right: auto; }

.ui-datepicker-rtl .ui-datepicker-buttonpane {
  clear: right; }

.ui-datepicker-rtl .ui-datepicker-buttonpane button {
  float: left; }

.ui-datepicker-rtl .ui-datepicker-buttonpane button.ui-datepicker-current,
.ui-datepicker-rtl .ui-datepicker-group {
  float: right; }

.ui-datepicker-rtl .ui-datepicker-group-last .ui-datepicker-header,
.ui-datepicker-rtl .ui-datepicker-group-middle .ui-datepicker-header {
  border-right-width: 0;
  border-left-width: 1px; }

/* Component containers
----------------------------------*/
.ui-widget {
  font-family: Verdana,Arial,sans-serif;
  font-size: 14px; }

.ui-widget .ui-widget {
  font-size: 1em; }

.ui-widget input,
.ui-widget select,
.ui-widget textarea,
.ui-widget button {
  font-family: Verdana,Arial,sans-serif;
  font-size: 1em; }

.ui-widget-content {
  border: 1px solid #ececec;
  background: #ffffff;
  color: #5e6a74; }

.ui-widget-content a {
  color: #5e6a74; }

.ui-widget-header {
  border: 1px solid #ececec;
  background: #758490;
  color: #5e6a74;
  font-weight: bold; }

.ui-widget-header a {
  color: #5e6a74; }

/* Interaction states
----------------------------------*/
.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
  border: 1px solid #ececec;
  font-weight: normal;
  color: #555555; }

.ui-state-default a,
.ui-state-default a:link,
.ui-state-default a:visited {
  color: #555555;
  text-decoration: none; }

.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus {
  border: 1px solid #ececec;
  background: #3b95ae;
  font-weight: normal;
  color: #ffffff; }

.ui-state-hover a,
.ui-state-hover a:hover,
.ui-state-hover a:link,
.ui-state-hover a:visited,
.ui-state-focus a,
.ui-state-focus a:hover,
.ui-state-focus a:link,
.ui-state-focus a:visited {
  color: #212121;
  text-decoration: none; }

.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active {
  border: 1px solid #aaaaaa;
  background: #ffffff;
  font-weight: normal;
  color: #212121; }

.ui-state-active a,
.ui-state-active a:link,
.ui-state-active a:visited {
  color: #212121;
  text-decoration: none; }

/* Interaction Cues
----------------------------------*/
.ui-state-highlight,
.ui-widget-content .ui-state-highlight,
.ui-widget-header .ui-state-highlight {
  border: 1px solid #fcefa1;
  background: #fbf9ee;
  color: #363636; }

.ui-state-highlight a,
.ui-widget-content .ui-state-highlight a,
.ui-widget-header .ui-state-highlight a {
  color: #363636; }

.ui-state-error,
.ui-widget-content .ui-state-error,
.ui-widget-header .ui-state-error {
  border: 1px solid #cd0a0a;
  background: #fef1ec url("images/ui-bg_glass_95_fef1ec_1x400.png") 50% 50% repeat-x;
  color: #cd0a0a; }

.ui-state-error a,
.ui-widget-content .ui-state-error a,
.ui-widget-header .ui-state-error a {
  color: #cd0a0a; }

.ui-state-error-text,
.ui-widget-content .ui-state-error-text,
.ui-widget-header .ui-state-error-text {
  color: #cd0a0a; }

.ui-priority-primary,
.ui-widget-content .ui-priority-primary,
.ui-widget-header .ui-priority-primary {
  font-weight: bold; }

.ui-priority-secondary,
.ui-widget-content .ui-priority-secondary,
.ui-widget-header .ui-priority-secondary {
  opacity: .7;
  filter: Alpha(Opacity=70);
  /* support: IE8 */
  font-weight: normal; }

.ui-state-disabled,
.ui-widget-content .ui-state-disabled,
.ui-widget-header .ui-state-disabled {
  opacity: .35;
  filter: Alpha(Opacity=35);
  /* support: IE8 */
  background-image: none; }

.ui-state-disabled .ui-icon {
  filter: Alpha(Opacity=35);
  /* support: IE8 - See #6059 */ }

/* Misc visuals
----------------------------------*/
/* Corner radius */
.ui-corner-all,
.ui-corner-top,
.ui-corner-left,
.ui-corner-tl {
  border-top-left-radius: 0; }

.ui-corner-all,
.ui-corner-top,
.ui-corner-right,
.ui-corner-tr {
  border-top-right-radius: 0; }

.ui-corner-all,
.ui-corner-bottom,
.ui-corner-left,
.ui-corner-bl {
  border-bottom-left-radius: 0; }

.ui-corner-all,
.ui-corner-bottom,
.ui-corner-right,
.ui-corner-br {
  border-bottom-right-radius: 0; }

/* Overlays */
.ui-widget-overlay {
  background: #aaaaaa url("images/ui-bg_flat_0_aaaaaa_40x100.png") 50% 50% repeat-x;
  opacity: .3;
  filter: Alpha(Opacity=30);
  /* support: IE8 */ }

.ui-widget-shadow {
  margin: -8px 0 0 -8px;
  padding: 8px;
  background: #aaaaaa url("images/ui-bg_flat_0_aaaaaa_40x100.png") 50% 50% repeat-x;
  opacity: .3;
  filter: Alpha(Opacity=30);
  /* support: IE8 */
  border-radius: 8px; }

/* Icons
----------------------------------*/
.datepicker {
  position: relative;
  display: inline-block; }

.ui-datepicker-trigger {
  background: none;
  border: none;
  position: absolute;
  right: 10px;
  top: 10px;
  cursor: pointer; }

.ui-datepicker-trigger:before {
  font-family: "FontAwesome";
  content: "\f073";
  font-size: 18px;
  color: #758490;
  position: absolute;
  left: 0;
  top: 0; }

.ui-datepicker-next:hover,
.ui-datepicker-prev:hover {
  background: none;
  border: none;
  cursor: pointer; }

.ui-datepicker-next:before,
.ui-datepicker-prev:before {
  content: "";
  font-family: "FontAwesome";
  color: #ffffff;
  font-size: 18px;
  display: block;
  position: absolute;
  left: 50%;
  margin-left: -8px;
  top: 50%;
  margin-top: -8px; }

.ui-datepicker-next:before {
  content: "\f105";
  margin-left: 0; }

.ui-datepicker-prev:hover
.ui-datepicker-next:hover {
  background: rgba(255, 255, 255, 0.1); }

.ui-datepicker-prev:before {
  content: "\f104"; }

/*doc
---
title: Select 2
name: Select 2
category: index
---

Plugin used to change browser default selects into custom selects. Widths are set with important in css to override js specified ones.

## Select without Searching
```html_example
<select class="select2NoSearch">
    <option value="">University of Minnesota - Duluth</option>
    <option value="">University of Minnesota - Duluth Longer Title</option>
    <option value="">Option 2</option>
</select>

```

## Select with Search
```html_example
<select class="select2">
    <option value="">University of Minnesota - Duluth</option>
    <option value="">University of Minnesota - Duluth Longer Title</option>
    <option value="">Option 2</option>
</select>

```

## Select small without search
```html_example
<select class="select2NoSearch select2NoSearch_sm">
    <option value="">Weekly</option>
    <option value="">Monthly</option>
    <option value="">Option 2</option>
</select>

## Medium select with search
```html_example
<select class="select2mix-select2_md">
    <option value="">Weekly</option>
    <option value="">Monthly</option>
    <option value="">Option 2</option>
</select>


```
*/
/*
Version: 3.5.1 Timestamp: Tue Jul 22 18:58:56 EDT 2014
*/
.select2,
.select2NoSearch {
  width: 210px !important;
  height: 35px;
  line-height: 35px;
  font-family: "Gibson-Light", sans-serif;
  font-size: 14px;
  background-color: #ffffff;
  color: #444;
  border: 1px solid #ececec; }

.select2.select2_initialized,
.select2NoSearch.select2_initialized {
  border: 0; }

.select2_full {
  width: 100% !important; }

.mix-select2_md {
  width: 150px !important; }

.select2NoSearch_sm {
  width: 150px !important; }

.select2NoSearch_lg {
  width: 385px !important; }

.select2NoSearch_full {
  width: 100% !important; }

.select2NoSearch_date {
  width: 100px !important;
  padding-right: 5px;
  display: inline-block; }

.select2NoSearch_inline {
  display: inline-table; }

.select2-container {
  margin: 0;
  position: relative; }

.select2-container,
.select2-drop,
.select2-search,
.select2-search input {
  /*
      Force border-box so that % widths fit the parent
      container without overlap because of margin/padding.
      More Info : http://www.quirksmode.org/css/box.html
    */
  -webkit-box-sizing: border-box;
  /* webkit */
  -moz-box-sizing: border-box;
  /* firefox */
  box-sizing: border-box;
  /* css3 */ }

.select2-container .select2-choice {
  display: block;
  height: 33px;
  padding: 0 0 0 8px;
  overflow: hidden;
  position: relative;
  font-size: 14px;
  border: 1px solid #ececec;
  white-space: nowrap;
  line-height: 33px;
  color: #444;
  text-decoration: none;
  background-clip: padding-box;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-color: #fff; }

html[dir="rtl"] .select2-container .select2-choice {
  padding: 0 8px 0 0; }

.select2-container.select2-drop-above .select2-choice {
  border-bottom-color: #ececec;
  border-radius: 0 0 4px 4px; }

.select2-container.select2-allowclear .select2-choice .select2-chosen {
  margin-right: 42px; }

.select2-container .select2-choice > .select2-chosen {
  margin-right: 26px;
  display: block;
  overflow: hidden;
  white-space: nowrap;
  font-size: 14px;
  text-overflow: ellipsis;
  float: none;
  width: auto; }

html[dir="rtl"] .select2-container .select2-choice > .select2-chosen {
  margin-left: 26px;
  margin-right: 0; }

.select2-container .select2-choice abbr {
  display: none;
  width: 12px;
  height: 12px;
  position: absolute;
  right: 24px;
  top: 8px;
  font-size: 1px;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  outline: 0; }

.select2-container.select2-allowclear .select2-choice abbr {
  display: inline-block; }

.select2-container .select2-choice abbr:hover {
  background-position: right -11px;
  cursor: pointer; }

.select2-drop-mask {
  border: 0;
  margin: 0;
  padding: 0;
  position: fixed;
  left: 0;
  top: 0;
  min-height: 100%;
  min-width: 100%;
  height: auto;
  width: auto;
  opacity: 0;
  z-index: 9998;
  /* styles required for IE to work */
  background-color: #fff;
  filter: alpha(opacity=0); }

.select2-drop {
  width: 100%;
  margin-top: -1px;
  position: absolute;
  z-index: 9999;
  top: 100%;
  background: #fff;
  color: #000;
  border: 1px solid #ececec;
  border-top: 0;
  -webkit-box-shadow: 0 4px 5px rgba(0, 0, 0, 0.15);
  box-shadow: 0 4px 5px rgba(0, 0, 0, 0.15); }

.select2-drop.select2-drop-above {
  margin-top: 1px;
  border-top: 1px solid #ececec;
  border-bottom: 0;
  -webkit-box-shadow: 0 -4px 5px rgba(0, 0, 0, 0.15);
  box-shadow: 0 -4px 5px rgba(0, 0, 0, 0.15); }

.select2-drop-active {
  border-top: none; }

.select2-drop-auto-width {
  border-top: 1px solid #ececec;
  width: auto; }

.select2-drop-auto-width .select2-search {
  padding-top: 4px; }

.select2-container .select2-choice .select2-arrow {
  display: inline-block;
  width: 28px;
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  border-left: 1px solid #ececec;
  background-clip: padding-box;
  background: #ececec; }

.select2-container .select2-choice .select2-arrow:after {
  font-family: "FontAwesome";
  content: "\f107";
  font-size: 18px;
  color: #344452;
  position: absolute;
  left: 9px;
  top: 0; }

html[dir="rtl"] .select2-container .select2-choice .select2-arrow {
  left: 0;
  right: auto;
  border-left: none;
  border-right: 1px solid #ececec;
  border-radius: 4px 0 0 4px; }

.select2-container .select2-choice .select2-arrow b {
  display: block;
  width: 100%;
  height: 100%; }

html[dir="rtl"] .select2-container .select2-choice .select2-arrow b {
  background-position: 2px 1px; }

.select2-search {
  display: inline-block;
  width: 100%;
  min-height: 26px;
  margin: 0;
  padding: 5px;
  position: relative;
  z-index: 10000;
  white-space: nowrap; }

.select2-search input {
  width: 100%;
  height: auto !important;
  min-height: 26px;
  padding: 4px 20px 4px 5px;
  margin: 0;
  outline: 0;
  font-family: "Gibson-Light", sans-serif;
  font-size: 1em;
  border: 1px solid #ececec;
  border-radius: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
  background: #fff; }

html[dir="rtl"] .select2-search input {
  padding: 4px 5px 4px 20px;
  background: #fff; }

.select2-drop.select2-drop-above .select2-search input {
  margin-top: 4px; }

.select2-search input.select2-active {
  background: #fff; }

.select2-container-active .select2-choice,
.select2-container-active .select2-choices {
  border: 1px solid #56aec6;
  outline: none; }

.select2-dropdown-open .select2-choice {
  border-bottom-color: transparent;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  background-color: #eee; }

.select2-dropdown-open.select2-drop-above .select2-choice,
.select2-dropdown-open.select2-drop-above .select2-choices {
  border: 1px solid #56aec6;
  border-top-color: transparent; }

.select2-dropdown-open .select2-choice .select2-arrow {
  background: transparent;
  border-left: none;
  filter: none; }

html[dir="rtl"] .select2-dropdown-open .select2-choice .select2-arrow {
  border-right: none; }

.select2-dropdown-open .select2-choice .select2-arrow b {
  background-position: -18px 1px; }

html[dir="rtl"] .select2-dropdown-open .select2-choice .select2-arrow b {
  background-position: -16px 1px; }

.select2-hidden-accessible {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px; }

/* results */
.select2-results {
  max-height: 200px;
  padding: 0 0 0 4px;
  margin: 4px 4px 4px 0;
  position: relative;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-tap-highlight-color: transparent; }

html[dir="rtl"] .select2-results {
  padding: 0 4px 0 0;
  margin: 4px 0 4px 4px; }

.select2-results ul.select2-result-sub {
  margin: 0;
  padding-left: 0; }

.select2-results li {
  list-style: none;
  display: list-item;
  background-image: none; }

.select2-results li.select2-result-with-children > .select2-result-label {
  font-weight: bold; }

.select2-results .select2-result-label {
  padding: 7px 7px 4px;
  margin: 0;
  cursor: pointer;
  line-height: 1.1;
  min-height: 1em;
  font-size: 14px;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; }

.select2-results-dept-1 .select2-result-label {
  padding-left: 20px; }

.select2-results-dept-2 .select2-result-label {
  padding-left: 40px; }

.select2-results-dept-3 .select2-result-label {
  padding-left: 60px; }

.select2-results-dept-4 .select2-result-label {
  padding-left: 80px; }

.select2-results-dept-5 .select2-result-label {
  padding-left: 100px; }

.select2-results-dept-6 .select2-result-label {
  padding-left: 110px; }

.select2-results-dept-7 .select2-result-label {
  padding-left: 120px; }

.select2-results .select2-highlighted {
  background: #56aec6;
  color: #fff; }

.select2-results li em {
  background: #feffde;
  font-style: normal; }

.select2-results .select2-highlighted em {
  background: transparent; }

.select2-results .select2-highlighted ul {
  background: #fff;
  color: #000; }

.select2-results .select2-no-results,
.select2-results .select2-searching,
.select2-results .select2-ajax-error,
.select2-results .select2-selection-limit {
  background: #f4f4f4;
  display: list-item;
  padding: 5px; }

/*
disabled look for disabled choices in the results dropdown
*/
.select2-results .select2-disabled.select2-highlighted {
  color: #666;
  background: #f4f4f4;
  display: list-item;
  cursor: default; }

.select2-results .select2-disabled {
  background: #f4f4f4;
  display: list-item;
  cursor: default; }

.select2-results .select2-selected {
  display: none; }

.select2-more-results.select2-active {
  background: #f4f4f4 url("select2-spinner.gif") no-repeat 100%; }

.select2-results .select2-ajax-error {
  background: rgba(255, 50, 50, 0.2); }

.select2-more-results {
  background: #f4f4f4;
  display: list-item; }

/* disabled styles */
.select2-container.select2-container-disabled .select2-choice {
  background-color: #f4f4f4;
  background-image: none;
  border: 1px solid #ddd;
  cursor: default; }

.select2-container.select2-container-disabled .select2-choice .select2-arrow {
  background-color: #f4f4f4;
  background-image: none;
  border-left: 0; }

.select2-container.select2-container-disabled .select2-choice abbr {
  display: none; }

/* multiselect */
.select2-container-multi .select2-choices {
  height: auto !important;
  height: 1%;
  margin: 0;
  padding: 0 5px 0 0;
  position: relative;
  border: 1px solid #ececec;
  cursor: text;
  overflow: hidden;
  background-color: #fff;
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(1%, #eee), color-stop(15%, #fff));
  background-image: -webkit-linear-gradient(top, #eee 1%, #fff 15%);
  background-image: -moz-linear-gradient(top, #eee 1%, #fff 15%);
  background-image: linear-gradient(to bottom, #eee 1%, #fff 15%); }

html[dir="rtl"] .select2-container-multi .select2-choices {
  padding: 0 0 0 5px; }

.select2-locked {
  padding: 3px 5px 3px 5px !important; }

.select2-container-multi .select2-choices {
  min-height: 26px; }

.select2-container-multi.select2-container-active .select2-choices {
  border: 1px solid #56aec6;
  outline: none;
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); }

.select2-container-multi .select2-choices li {
  float: left;
  list-style: none; }

html[dir="rtl"] .select2-container-multi .select2-choices li {
  float: right; }

.select2-container-multi .select2-choices .select2-search-field {
  margin: 0;
  padding: 0;
  white-space: nowrap; }

.select2-container-multi .select2-choices .select2-search-field input {
  padding: 5px;
  margin: 1px 0;
  font-family: "Gibson-Light", sans-serif;
  font-size: 100%;
  color: #666;
  outline: 0;
  border: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
  background: transparent !important; }

.select2-container-multi .select2-choices .select2-search-field input.select2-active {
  background: #fff url("select2-spinner.gif") no-repeat 100% !important; }

.select2-default {
  color: #999 !important; }

.select2-container-multi .select2-choices .select2-search-choice {
  padding: 3px 5px 3px 18px;
  margin: 3px 0 3px 5px;
  position: relative;
  line-height: 13px;
  color: #333;
  cursor: default;
  border: 1px solid #ececec;
  -webkit-box-shadow: 0 0 2px #fff inset, 0 1px 0 rgba(0, 0, 0, 0.05);
  box-shadow: 0 0 2px #fff inset, 0 1px 0 rgba(0, 0, 0, 0.05);
  background-clip: padding-box;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-color: #e4e4e4;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#f4f4f4', GradientType=0);
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(20%, #f4f4f4), color-stop(50%, #f0f0f0), color-stop(52%, #e8e8e8), color-stop(100%, #eee));
  background-image: -webkit-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eee 100%);
  background-image: -moz-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eee 100%);
  background-image: linear-gradient(to top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eee 100%); }

html[dir="rtl"] .select2-container-multi .select2-choices .select2-search-choice {
  margin: 3px 5px 3px 0;
  padding: 3px 18px 3px 5px; }

.select2-container-multi .select2-choices .select2-search-choice .select2-chosen {
  cursor: default; }

.select2-container-multi .select2-choices .select2-search-choice-focus {
  background: #d4d4d4; }

.select2-search-choice-close {
  display: block;
  width: 12px;
  height: 13px;
  position: absolute;
  right: 3px;
  top: 4px;
  font-size: 1px;
  outline: none; }

html[dir="rtl"] .select2-search-choice-close {
  right: auto;
  left: 3px; }

.select2-container-multi .select2-search-choice-close {
  left: 3px; }

html[dir="rtl"] .select2-container-multi .select2-search-choice-close {
  left: auto;
  right: 2px; }

.select2-container-multi .select2-choices .select2-search-choice .select2-search-choice-close:hover {
  background-position: right -11px; }

.select2-container-multi .select2-choices .select2-search-choice-focus .select2-search-choice-close {
  background-position: right -11px; }

/* disabled styles */
.select2-container-multi.select2-container-disabled .select2-choices {
  background-color: #f4f4f4;
  background-image: none;
  border: 1px solid #ddd;
  cursor: default; }

.select2-container-multi.select2-container-disabled .select2-choices .select2-search-choice {
  padding: 3px 5px 3px 5px;
  border: 1px solid #ddd;
  background-image: none;
  background-color: #f4f4f4; }

.select2-container-multi.select2-container-disabled .select2-choices .select2-search-choice .select2-search-choice-close {
  display: none;
  background: none; }

/* end multiselect */
.select2-result-selectable .select2-match,
.select2-result-unselectable .select2-match {
  text-decoration: underline; }

.select2-offscreen, .select2-offscreen:focus {
  clip: rect(0 0 0 0) !important;
  width: 1px !important;
  height: 1px !important;
  border: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  position: absolute !important;
  outline: 0 !important;
  left: 0px !important;
  top: 0px !important; }

.select2-display-none {
  display: none; }

.select2-measure-scrollbar {
  position: absolute;
  top: -10000px;
  left: -10000px;
  width: 100px;
  height: 100px;
  overflow: scroll; }

/*! jQuery UI - v1.11.4 - 2015-03-11
* http://jqueryui.com
* Includes: tooltip.css
* Copyright 2015 jQuery Foundation and other contributors; Licensed MIT */
/* ToolTip
----------------------------------*/
.ui-tooltip {
  padding: 8px;
  position: absolute;
  z-index: 9999;
  max-width: 300px;
  -webkit-box-shadow: 0 0 5px #aaa;
  box-shadow: 0 0 5px #aaa; }

body .ui-tooltip {
  border-width: 2px; }