@charset "UTF-8";
/*------------------------------------*\
   #UBER.BASE (SOON TO BE SUPERBASE)
\*------------------------------------*/
/*doc
# Base CSS

Our base CSS includes normalization, helper classes, and abstractions that should
form the underlying structure of all web projects. It's been built with [OOCSS](http://oocss.org/)
principles in mind and uses the [BEM](http://bem.info/method/) naming convention.
Some work is pulled directly form [Inuit.css]( https://github.com/csswizardry/inuit.css)
or has been highly influenced by it and similar frameworks, like [Suit](http://suitcss.github.io/).
The following outlines all of the pieces included as part of this base.
*/
/**
 * Base
 */
/**
 * Helpers
 */
/*------------------------------------*\
    $DEFAULTS
\*------------------------------------*/
/**
 * inuit.css’ default variables. Redefine these in your `_vars.scss` file (found
 * in the inuit.css-web-template) to override them.
 */
/*------------------------------------*\
    $DEBUG
\*------------------------------------*/
/**
 * Debug mode will visually highlight any potential markup/accessibility quirks
 * in the browser. Set to `true` or `false`.
 */
/*------------------------------------*\
    $BORDER-BOX
\*------------------------------------*/
/**
 * Do you want all elements to adopt `box-sizing:border-box;` as per
 * paulirish.com/2012/box-sizing-border-box-ftw ?
 */
/*------------------------------------*\
    $BASE
\*------------------------------------*/
/**
 * Base stuff
 */
/**
 * Base font-family.
 */
/**
 * Default colour for objects’ borders etc.
 */
/*------------------------------------*\
    $RESPONSIVE
\*------------------------------------*/
/**
 * Responsiveness?
 */
/**
 * Responsiveness for widescreen/high resolution desktop monitors and beyond?
 * Note: `$responsive` variable above must be set to true before enabling this.
 */
/**
 * Responsive push and pull produce a LOT of code, only turn them on if you
 * definitely need them.
 */
/**
 * Note: `$push` variable above must be set to true before enabling these.
 */
/**
 * Note: `$pull` variable above must be set to true before enabling these.
 */
/**
 * Tell inuit.css when breakpoints start.
 */
/*------------------------------------*\
    $FONT-SIZES
\*------------------------------------*/
/**
 * Font-sizes (in pixels). Refer to relevant sections for their implementations.
 */
/*------------------------------------*\
    $QUOTES
\*------------------------------------*/
/**
 * English quote marks?
 */
/**
 * If you want English quotes then please do not edit these; they’re only here
 * because Sass needs them.
 */
/**
 * If you need non-English quotes, please alter the following values accordingly:
 */
/*------------------------------------*\
    $BRAND
\*------------------------------------*/
/**
 * Brand stuff
 */
/**
 * How big would you like round corners to be by default?
 */
/*------------------------------------*\
    $OBJECTS AND ABSTRACTIONS
\*------------------------------------*/
/**
 * Which objects and abstractions would you like to use?
 */
/*------------------------------------*\
    $FRAMEWORK
\*------------------------------------*/
/**
 * inuit.css will work these next ones out for use within the framework.
 *
 * Assign our `$base-line-height` to a new spacing var for more transparency.
 */
/*!
 * inuitcss, by @csswizardry
 *
 * github.com/inuitcss | inuitcss.com
 */
/*doc
## SASS Mixins and Functions
----------------------------

Defined below are a set of mixins and functions that you can use within your
SASS code to ease development:
*/
/*------------------------------------*\
    $ARROWS
\*------------------------------------*/
/**
 * It is a common design treatment to give an element a triangular points-out
 * arrow, we typically build these with CSS. These following classes allow us to
 * generate these arbitrarily with a mixin, `@arrow()`.
 */
/**
 * Forms the basis for any/all CSS arrows.
 */
.tooltip--bottom, .tooltip--bottom-left, .tooltip--bottom-right, .tooltip--left, .tooltip--right, .tooltip--top, .tooltip--top-left, .tooltip--top-right {
  position: relative; }
  .tooltip--bottom:before, .tooltip--bottom-left:before, .tooltip--bottom-right:before, .tooltip--left:before, .tooltip--right:before, .tooltip--top:before, .tooltip--top-left:before, .tooltip--top-right:before, .tooltip--bottom:after, .tooltip--bottom-left:after, .tooltip--bottom-right:after, .tooltip--left:after, .tooltip--right:after, .tooltip--top:after, .tooltip--top-left:after, .tooltip--top-right:after {
    content: "";
    position: absolute;
    border-collapse: separate; }
  .tooltip--bottom:before, .tooltip--bottom-left:before, .tooltip--bottom-right:before, .tooltip--left:before, .tooltip--right:before, .tooltip--top:before, .tooltip--top-left:before, .tooltip--top-right:before {
    border: 12px solid transparent; }
  .tooltip--bottom:after, .tooltip--bottom-left:after, .tooltip--bottom-right:after, .tooltip--left:after, .tooltip--right:after, .tooltip--top:after, .tooltip--top-left:after, .tooltip--top-right:after {
    border: 11px solid transparent; }

/**
 * Define individual edges so we can combine what we need, when we need.
 */
.tooltip--bottom:before, .tooltip--bottom-left:before, .tooltip--bottom-right:before, .tooltip--bottom:after, .tooltip--bottom-left:after, .tooltip--bottom-right:after {
  bottom: 100%; }

.tooltip--left:before, .tooltip--right:before, .tooltip--left:after, .tooltip--right:after {
  top: 50%;
  margin-top: -12px; }
.tooltip--left:after, .tooltip--right:after {
  margin-top: -11px; }

.tooltip--top:before, .tooltip--top-left:before, .tooltip--top-right:before, .tooltip--top:after, .tooltip--top-left:after, .tooltip--top-right:after {
  top: 100%; }

.tooltip--right:before, .tooltip--right:after {
  right: 100%; }

.tooltip--top-left:before, .tooltip--bottom-left:before {
  left: 11px; }
.tooltip--top-left:after, .tooltip--bottom-left:after {
  left: 12px; }

.tooltip--top:before, .tooltip--bottom:before, .tooltip--top:after, .tooltip--bottom:after {
  left: 50%;
  margin-left: -12px; }
.tooltip--top:after, .tooltip--bottom:after {
  margin-left: -11px; }

.tooltip--top-right:before, .tooltip--bottom-right:before {
  right: 11px; }
.tooltip--top-right:after, .tooltip--bottom-right:after {
  right: 12px; }

.tooltip--left:before, .tooltip--left:after {
  left: 100%; }

/*------------------------------------*\
    $MIXINS
\*------------------------------------*/
/**
 * Create a fully formed type style (sizing and vertical rhythm) by passing in a
 * single value, e.g.:
 *
   `@include font-size(10px);`
 *
 * Thanks to @redclov3r for the `line-height` Sass:
 * twitter.com/redclov3r/status/250301539321798657
 */
/**
 * Style any number of headings in one fell swoop, e.g.:
 *
   .foo{
       @include headings(1, 3){
           color:#BADA55;
       }
    }
 *
 * With thanks to @lar_zzz, @paranoida, @rowanmanning and ultimately
 * @thierrylemoulec for refining and improving my initial mixin.
 */
/**
 * Create vendor-prefixed CSS in one go, e.g.
 *
   `@include vendor(border-radius, 4px);`
 *
 */
/**
 * Create CSS keyframe animations for all vendors in one go, e.g.:
 *
   .foo{
       @include vendor(animation, shrink 3s);
   }

   @include keyframe(shrink){
       from{
           font-size:5em;
       }
   }
 *
 * Courtesy of @integralist: twitter.com/integralist/status/260484115315437569
 */
/**
 * Force overly long spans of text to truncate, e.g.:
 *
   `@include truncate(100%);`
 *
 * Where `$truncation-boundary` is a united measurement.
 */
/**
 * CSS arrows!!! But... before you read on, you might want to grab a coffee...
 *
 * This mixin creates a CSS arrow on a given element. We can have the arrow
 * appear in one of 12 locations, thus:
 *
 *       01    02    03
 *    +------------------+
 * 12 |                  | 04
 *    |                  |
 * 11 |                  | 05
 *    |                  |
 * 10 |                  | 06
 *    +------------------+
 *       09    08    07
 *
 * You pass this position in along with a desired arrow color and optional
 * border color, for example:
 *
 * `@include arrow(top, left, red)`
 *
 * for just a single, red arrow, or:
 *
 * `@include arrow(bottom, center, red, black)`
 *
 * which will create a red triangle with a black border which sits at the bottom
 * center of the element. Call the mixin thus:
 *
   .foo{
       background-color:#BADA55;
       border:1px solid #ACE;
       @include arrow(top, left, #BADA55, #ACE);
   }
 *
 */
/**
 * Media query mixin.
 *
 * It’s not great practice to define solid breakpoints up-front, preferring to
 * modify your design when it needs it, rather than assuming you’ll want a
 * change at ‘mobile’. However, as inuit.css is required to take a hands off
 * approach to design decisions, this is the closest we can get to baked-in
 * responsiveness. It’s flexible enough to allow you to set your own breakpoints
 * but solid enough to be frameworkified.
 *
 * We define some broad breakpoints in our vars file that are picked up here
 * for use in a simple media query mixin. Our options are:
 *
 * palm
 * lap
 * lap-and-up
 * portable
 * desk
 * desk-wide
 *
 * Not using a media query will, naturally, serve styles to all devices.
 *
 * `@include media-query(palm){ [styles here] }`
 *
 * We work out your end points for you:
 */
/*doc
#### `@include font-size($font-size, $line-height: true)`

Creates a fully formed type style (sizing and vertical rhythm). `$font-size` is
the size of the font you'd like to set. When `$line-height` is `true`, a line
height will be set based on the `$font-size` and the `$base-line-height` of
the project. When `$line-height` is set to a value, like `24px`, a unitless
line height will be created. When set to `false`, no line height is included.
*/
/*doc
#### `@include vendor($property, $value)`

A mixin to create vendor-prefixed CSS. [More information](https://github.com/csswizardry/inuit.css/blob/v5.0.1/generic/_mixins.scss#L49-L61)

#### `@include keyframe($animation-name)`

Create CSS keyframe animations for all vendors by passing the animation content
to this mixin with the specified animation name. [More information](https://github.com/csswizardry/inuit.css/blob/v5.0.1/generic/_mixins.scss#L64-L99)

#### `@include arrow($edge, $location, $color, $border-color: $color)`

Create a CSS arrow on a given element. [More information](https://github.com/csswizardry/inuit.css/blob/v5.0.1/generic/_mixins.scss#L117-L258)

```scss
@include arrow(top, left, #000);
```

#### `@include quarter($number)`

Quarters the `$number` and rounds to the nearest integer.

#### `@include halve($number)`

Halves the `$number` and rounds to the nearest integer.

#### `@include double($number)`

Doubles the `$number` and rounds to the nearest integer.

#### `@include quadruple($number)`

Quadruple's the `$number` and rounds to the nearest integer.
*/
/*doc
#### `@include media-query($type)`

A helper to only show the passed-in content for the specified media query type
(specified by the [`$media-breakpoints`](#media-breakpoints) variable mapping).

```scss
h1 {
  @include font-size(30px);

  @include media-query(palm) {
    @include font-size(20px);
  }
}
```
*/
/*doc
#### `negative(10px 5px);`

A helper to convert positive integer values into negative ones.

```scss
.list__link {
  margin: negative(10px 5px);
  // will output: margin: -10px -5px;
}
```
*/
/*doc
## Generic Styles
-----------------

We use Nicolas Gallagher's [Normalize.css](https://github.com/necolas/normalize.css/)
in addition to Inuit.css' [generic reset](https://github.com/inuitcss/generic.reset)
to form the base of our styling.

We set `box-sizing: border-box` for all elements on the page in order to [reduce
confusion](http://www.paulirish.com/2012/box-sizing-border-box-ftw/) when dealing
with element width and padding.

We achieve a consistent [vertical rhythm](http://csswizardry.com/2012/06/single-direction-margin-declarations)
and generic element styling using Inuit.css' [shared module](https://github.com/inuitcss/generic.shared).
*/
/* ==========================================================================
   Normalize.scss settings
   ========================================================================== */
/**
 * Includes legacy browser support IE6/7
 *
 * Set to false if you want to drop support for IE6 and IE7
 */
/* Base
   ========================================================================== */
/**
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS text size adjust after orientation change, without disabling
 *  user zoom.
 * 3. Corrects text resizing oddly in IE 6/7 when body `font-size` is set using
 *  `em` units.
 */
html {
  font-family: sans-serif;
  /* 1 */
  -ms-text-size-adjust: 100%;
  /* 2 */
  -webkit-text-size-adjust: 100%;
  /* 2 */ }

/**
 * Remove default margin.
 */
body {
  margin: 0; }

/* HTML5 display definitions
   ========================================================================== */
/**
 * Correct `block` display not defined for any HTML5 element in IE 8/9.
 * Correct `block` display not defined for `details` or `summary` in IE 10/11 and Firefox.
 * Correct `block` display not defined for `main` in IE 11.
 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
  display: block; }

/**
 * 1. Correct `inline-block` display not defined in IE 6/7/8/9 and Firefox 3.
 * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
 */
audio,
canvas,
progress,
video {
  display: inline-block;
  /* 1 */
  vertical-align: baseline;
  /* 2 */ }

/**
 * Prevents modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */
audio:not([controls]) {
  display: none;
  height: 0; }

/**
 * Address `[hidden]` styling not present in IE 8/9/10.
 * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
 */
[hidden],
template {
  display: none; }

/* Links
   ========================================================================== */
/**
 * Remove the gray background color from active links in IE 10.
 */
a {
  background: transparent; }

/**
 * Improve readability when focused and also mouse hovered in all browsers.
 */
a:active, a:hover {
  outline: 0; }

/* Text-level semantics
   ========================================================================== */
/**
 * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
 */
abbr[title] {
  border-bottom: 1px dotted; }

/**
 * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
 */
b,
strong {
  font-weight: bold; }

/**
 * Address styling not present in Safari and Chrome.
 */
dfn {
  font-style: italic; }

/**
 * Address variable `h1` font-size and margin within `section` and `article`
 * contexts in Firefox 4+, Safari, and Chrome.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0; }

/**
 * Addresses styling not present in IE 8/9.
 */
mark {
  background: #ff0;
  color: #000; }

/**
 * Address inconsistent and variable font size in all browsers.
 */
small {
  font-size: 80%; }

/**
 * Prevent `sub` and `sup` affecting `line-height` in all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline; }

sup {
  top: -0.5em; }

sub {
  bottom: -0.25em; }

/* Embedded content
   ========================================================================== */
/**
 * 1. Remove border when inside `a` element in IE 8/9/10.
 * 2. Improves image quality when scaled in IE 7.
 */
img {
  border: 0; }

/**
 * Correct overflow not hidden in IE 9/10/11.
 */
svg:not(:root) {
  overflow: hidden; }

/* Grouping content
   ========================================================================== */
/**
 * Address margin not present in IE 8/9 and Safari.
 */
figure {
  margin: 1em 40px; }

/**
 * Address differences between Firefox and other browsers.
 */
hr {
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  height: 0; }

/**
 * Contain overflow in all browsers.
 */
pre {
  overflow: auto; }

/**
 * Address odd `em`-unit font size rendering in all browsers.
 * Correct font family set oddly in IE 6, Safari 4/5, and Chrome.
 */
code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em; }

/* Forms
   ========================================================================== */
/**
 * Known limitation: by default, Chrome and Safari on OS X allow very limited
 * styling of `select`, unless a `border` property is set.
 */
/**
 * 1. Correct color not being inherited.
 *  Known issue: affects color of disabled elements.
 * 2. Correct font properties not being inherited.
 * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
 * 4. Improves appearance and consistency in all browsers.
 */
button,
input,
optgroup,
select,
textarea {
  color: inherit;
  /* 1 */
  font: inherit;
  /* 2 */
  margin: 0;
  /* 3 */ }

/**
 * Address `overflow` set to `hidden` in IE 8/9/10/11.
 */
button {
  overflow: visible; }

/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
 * Correct `select` style inheritance in Firefox.
 */
button,
select {
  text-transform: none; }

/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *  and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *  `input` and others.
 * 4. Removes inner spacing in IE 7 without affecting normal text inputs.
 *  Known issue: inner spacing remains in IE 6.
 */
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
  /* 2 */
  cursor: pointer;
  /* 3 */ }

/**
 * Re-set default cursor for disabled elements.
 */
button[disabled],
html input[disabled] {
  cursor: default; }

/**
 * Remove inner padding and border in Firefox 4+.
 */
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0; }

/**
 * Address Firefox 4+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */
input {
  line-height: normal; }

/**
 * 1. Address box sizing set to `content-box` in IE 8/9/10.
 * 2. Remove excess padding in IE 8/9/10.
 *  Known issue: excess padding remains in IE 6.
 */
input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */ }

/**
 * Fix the cursor style for Chrome's increment/decrement buttons. For certain
 * `font-size` values of the `input`, it causes the cursor style of the
 * decrement button to change from `default` to `text`.
 */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  height: auto; }

/**
 * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
 * 2. Address `box-sizing` set to `border-box` in Safari and Chrome
 *  (include `-moz` to future-proof).
 */
input[type="search"] {
  -webkit-appearance: textfield;
  /* 1 */
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  /* 2 */
  box-sizing: content-box; }

/**
 * Remove inner padding and search cancel button in Safari and Chrome on OS X.
 * Safari (but not Chrome) clips the cancel button when the search input has
 * padding (and `textfield` appearance).
 */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none; }

/**
 * Define consistent border, margin, and padding.
 */
fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em; }

/**
 * 1. Correct `color` not being inherited in IE 8/9/10/11.
 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 * 3. Corrects text not wrapping in Firefox 3.
 * 4. Corrects alignment displayed oddly in IE 6/7.
 */
legend {
  border: 0;
  /* 1 */
  padding: 0;
  /* 2 */ }

/**
 * Remove default vertical scrollbar in IE 8/9/10/11.
 */
textarea {
  overflow: auto; }

/**
 * Don't inherit the `font-weight` (applied by a rule above).
 * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
 */
optgroup {
  font-weight: bold; }

/* Tables
   ========================================================================== */
/**
 * Remove most spacing between table cells.
 */
table {
  border-collapse: collapse;
  border-spacing: 0; }

td,
th {
  padding: 0; }

/*------------------------------------*\
    #RESET
\*------------------------------------*/
/**
 * As well as using normalize.css, it is often advantageous to remove all
 * margins from certain elements.
 */
body,
h1, h2, h3, h4, h5, h6, .label, label,
p, blockquote, pre,
dl, dd, ol, ul,
form, fieldset, legend,
table, th, td, caption,
hr {
  margin: 0;
  padding: 0; }

/**
 * Give a help cursor to elements that give extra info on `:hover`.
 */
abbr[title],
dfn[title] {
  cursor: help; }

/**
 * Remove underlines from potentially troublesome elements.
 */
u,
ins {
  text-decoration: none; }

/**
 * Apply faux underlines to inserted text via `border-bottom`.
 */
ins {
  border-bottom: 1px solid; }

/*------------------------------------*\
    #BOX-SIZING
\*------------------------------------*/
/**
 * Set the global `box-sizing` state to `border-box`.
 */
*, *:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

/*doc
### Page

The default font size and line height are set using the `$base-font-size`
and `$base-line-height` variables, respectively.

The background color and font color are similarly specified with the
`$base-background-color` and `$base-text-color` variables.
*/
/*------------------------------------*\
    #PAGE
\*------------------------------------*/
/**
 * High-, page-level styling.
 *
 * 1. Set the default `font-size` and `line-height` for the entire project,
 *    sourced from our default variables. The `font-size` is calculated to exist
 *    in ems, the `line-height` is calculated to exist unitlessly.
 * 2. Force scrollbars to always be visible to prevent awkward ‘jumps’ when
 *    navigating between pages that do/do not have enough content to produce
 *    scrollbars naturally.
 * 3. Ensure the page always fills at least the entire height of the viewport.
 */
html {
  font-size: 0.875em;
  /* [1] */
  line-height: 1.71429;
  /* [1] */
  background-color: #fff;
  color: #3A3A48;
  overflow-y: scroll;
  /* [2] */
  min-height: 100%;
  /* [3] */ }

html {
  height: 100%;
  overflow-y: visible; }

/*------------------------------------*\
    #SHARED
\*------------------------------------*/
/**
 * Where `margin-bottom` is concerned,this value will be the same as the
 * base line-height. This allows us to keep a consistent vertical rhythm.
 * As per: csswizardry.com/2012/06/single-direction-margin-declarations
 */
h1, h2, h3, h4, h5, h6, .label, label, hgroup,
ul, ol, dl,
blockquote, p, address,
table,
fieldset, figure,
pre {
  margin-bottom: 24px;
  margin-bottom: 1.71429rem; }

/**
 * Where `margin-left` is concerned we want to try and indent certain elements
 * by a consistent amount. Define that amount once,here.
 */
ul, ol, dd {
  margin-left: 48px;
  margin-left: 3.42857rem; }

/*doc
### Headings and smallprint

Headings 1-6, specified by the variables `$h1-font-size` to `$h6-font-size`,
are set up along with corresponding abstract Greek-alphabet classes for use
throughout the page: `.alpha`, `.beta`, `.gamma`, `.delta`, `.epsilon`, `.zeta`.
In addition, a series of classes for small and massive type are included --
`.giga`, `.mega` and `.kilo` for large text and `.milli` and `.micro` for small text.

```html
<p class="giga">.giga</p>
<p class="mega">.mega</p>
<p class="kilo">.kilo</p>
<p class="alpha">.alpha</p>
<p class="beta">.beta</p>
<p class="gamma">.gamma</p>
<p class="delta">.delta</p>
<p class="epsilon">.epsilon</p>
<p class="zeta">.zeta</p>
<p class="milli">.milli</p>
<p class="micro">.micro</p>
```
*/
.giga {
  font-size: 96px;
  font-size: 6.85714rem;
  line-height: 1; }

.mega {
  font-size: 72px;
  font-size: 5.14286rem;
  line-height: 1; }

.kilo {
  font-size: 48px;
  font-size: 3.42857rem;
  line-height: 1; }

h1, .alpha {
  font-size: 50px;
  font-size: 3.57143rem;
  line-height: 1.14; }

h2, .beta {
  font-size: 28px;
  font-size: 2rem;
  line-height: 1.25; }

h3, .gamma {
  font-size: 20px;
  font-size: 1.42857rem;
  line-height: 1.5; }

h4, .delta {
  font-size: 16px;
  font-size: 1.14286rem;
  line-height: 1.5; }

h5, .epsilon {
  font-size: 14px;
  font-size: 1rem;
  line-height: 1.71429; }

h6, .label, label, .zeta {
  font-size: 11px;
  font-size: 0.78571rem;
  line-height: 1.27273; }

small, .milli {
  font-size: 12px;
  font-size: 0.85714rem;
  line-height: 2; }

.micro {
  font-size: 10px;
  font-size: 0.71429rem;
  line-height: 2.4; }

/*------------------------------------*\
    #LISTS
\*------------------------------------*/
/**
 * Remove extra vertical spacing when nesting lists.
 */
li > ul,
li > ol {
  margin-bottom: 0; }

/*doc
### Images

By default, images have a fluid width (`max-width: 100%`) unless a `width` or `height`
is explicitly defined as an attribute on the tag.
*/
/*------------------------------------*\
    #IMAGES
\*------------------------------------*/
/**
 * 1. Fluid images for responsive purposes.
 * 2. Offset `alt` text from surrounding copy.
 */
img {
  max-width: 100%;
  /* [1] */
  font-style: italic;
  /* [2] */ }

/**
 * If a `width` and/or `height` attribute have been explicitly defined, let’s
 * not make the image fluid.
 */
img[width],
img[height] {
  max-width: none; }

/*doc
### Media Breakpoints

The following breakpoints are specified by default. They are set with the
`$media-breakpoints` variable.

Media Type    | Minimum Width | Maximum Width
------------- | ------------- | -------------
`palm`        |               | 575px
`lap`         | 576px         | 768px
`portable`    |               | 768px
`desk`        | 769px         | 1280px
`desk-and-up` | 769px         |
`desk-wide`   | 1281px        |
*/
/*doc
## Helper Classes
-----------------
*/
/*doc
### Widths

A series of width helper classes that you can use to size things like the layout
system. Each width can be specific to a media query breakpoint by prefixing
the width class with the media type. For example, a `.one-half` class specified
for a `palm` device type would be `.palm-one-half`.

```html
<div class="one-twelfth push-tiny--bottom doc-box">.one-twelfth</div>
<div class="one-sixth push-tiny--bottom doc-box">.one-sixth</div>
<div class="one-quarter push-tiny--bottom doc-box">.one-quarter</div>
<div class="one-third push-tiny--bottom doc-box">.one-third</div>
<div class="five-twelfths push-tiny--bottom doc-box">.five-twelfths</div>
<div class="one-half push-tiny--bottom doc-box">.one-half</div>
<div class="seven-twelfths push-tiny--bottom doc-box">.seven-twelfths</div>
<div class="two-thirds push-tiny--bottom doc-box">.two-thirds</div>
<div class="three-quarters push-tiny--bottom doc-box">.three-quarters</div>
<div class="five-sixths push-tiny--bottom doc-box">.five-sixths</div>
<div class="eleven-twelfths push-tiny--bottom doc-box">.eleven-twelfths</div>
<div class="one-whole push-tiny--bottom doc-box">.one-whole</div>
```
*/
/**
* Whole
*/
.one-whole {
  width: 100% !important; }

/**
* Halves
*/
.one-half, .two-quarters, .three-sixths, .four-eighths, .five-tenths, .six-twelfths {
  width: 50% !important; }

/**
* Thirds
*/
.one-third, .two-sixths, .four-twelfths {
  width: 33.333% !important; }

.two-thirds, .four-sixths, .eight-twelfths {
  width: 66.666% !important; }

/**
* Quarters
*/
.one-quarter, .two-eighths, .three-twelfths {
  width: 25% !important; }

.three-quarters, .six-eighths, .nine-twelfths {
  width: 75% !important; }

/**
* Fifths
*/
.one-fifth, .two-tenths {
  width: 20% !important; }

.two-fifths, .four-tenths {
  width: 40% !important; }

.three-fifths, .six-tenths {
  width: 60% !important; }

.four-fifths, .eight-tenths {
  width: 80% !important; }

/**
* Sixths
*/
.one-sixth, .two-twelfths {
  width: 16.666% !important; }

.five-sixths, .ten-twelfths {
  width: 83.333% !important; }

/**
* Eighths
*/
.one-eighth {
  width: 12.5% !important; }

.three-eighths {
  width: 37.5% !important; }

.five-eighths {
  width: 62.5% !important; }

.seven-eighths {
  width: 87.5% !important; }

/**
* Tenths
*/
.one-tenth {
  width: 10% !important; }

.three-tenths {
  width: 30% !important; }

.seven-tenths {
  width: 70% !important; }

.nine-tenths {
  width: 90% !important; }

/**
* Twelfths
*/
.one-twelfth {
  width: 8.333% !important; }

.five-twelfths {
  width: 41.666% !important; }

.seven-twelfths {
  width: 58.333% !important; }

.eleven-twelfths {
  width: 91.666% !important; }

@media only screen and (max-width: 575px) {
  /**
  * Whole
  */
  .palm-one-whole {
    width: 100% !important; }

  /**
  * Halves
  */
  .palm-one-half, .palm-two-quarters, .palm-three-sixths, .palm-four-eighths, .palm-five-tenths, .palm-six-twelfths {
    width: 50% !important; }

  /**
  * Thirds
  */
  .palm-one-third, .palm-two-sixths, .palm-four-twelfths {
    width: 33.333% !important; }

  .palm-two-thirds, .palm-four-sixths, .palm-eight-twelfths {
    width: 66.666% !important; }

  /**
  * Quarters
  */
  .palm-one-quarter, .palm-two-eighths, .palm-three-twelfths {
    width: 25% !important; }

  .palm-three-quarters, .palm-six-eighths, .palm-nine-twelfths {
    width: 75% !important; }

  /**
  * Fifths
  */
  .palm-one-fifth, .palm-two-tenths {
    width: 20% !important; }

  .palm-two-fifths, .palm-four-tenths {
    width: 40% !important; }

  .palm-three-fifths, .palm-six-tenths {
    width: 60% !important; }

  .palm-four-fifths, .palm-eight-tenths {
    width: 80% !important; }

  /**
  * Sixths
  */
  .palm-one-sixth, .palm-two-twelfths {
    width: 16.666% !important; }

  .palm-five-sixths, .palm-ten-twelfths {
    width: 83.333% !important; }

  /**
  * Eighths
  */
  .palm-one-eighth {
    width: 12.5% !important; }

  .palm-three-eighths {
    width: 37.5% !important; }

  .palm-five-eighths {
    width: 62.5% !important; }

  .palm-seven-eighths {
    width: 87.5% !important; }

  /**
  * Tenths
  */
  .palm-one-tenth {
    width: 10% !important; }

  .palm-three-tenths {
    width: 30% !important; }

  .palm-seven-tenths {
    width: 70% !important; }

  .palm-nine-tenths {
    width: 90% !important; }

  /**
  * Twelfths
  */
  .palm-one-twelfth {
    width: 8.333% !important; }

  .palm-five-twelfths {
    width: 41.666% !important; }

  .palm-seven-twelfths {
    width: 58.333% !important; }

  .palm-eleven-twelfths {
    width: 91.666% !important; } }
@media only screen and (min-width: 576px) and (max-width: 768px) {
  /**
  * Whole
  */
  .lap-one-whole {
    width: 100% !important; }

  /**
  * Halves
  */
  .lap-one-half, .lap-two-quarters, .lap-three-sixths, .lap-four-eighths, .lap-five-tenths, .lap-six-twelfths {
    width: 50% !important; }

  /**
  * Thirds
  */
  .lap-one-third, .lap-two-sixths, .lap-four-twelfths {
    width: 33.333% !important; }

  .lap-two-thirds, .lap-four-sixths, .lap-eight-twelfths {
    width: 66.666% !important; }

  /**
  * Quarters
  */
  .lap-one-quarter, .lap-two-eighths, .lap-three-twelfths {
    width: 25% !important; }

  .lap-three-quarters, .lap-six-eighths, .lap-nine-twelfths {
    width: 75% !important; }

  /**
  * Fifths
  */
  .lap-one-fifth, .lap-two-tenths {
    width: 20% !important; }

  .lap-two-fifths, .lap-four-tenths {
    width: 40% !important; }

  .lap-three-fifths, .lap-six-tenths {
    width: 60% !important; }

  .lap-four-fifths, .lap-eight-tenths {
    width: 80% !important; }

  /**
  * Sixths
  */
  .lap-one-sixth, .lap-two-twelfths {
    width: 16.666% !important; }

  .lap-five-sixths, .lap-ten-twelfths {
    width: 83.333% !important; }

  /**
  * Eighths
  */
  .lap-one-eighth {
    width: 12.5% !important; }

  .lap-three-eighths {
    width: 37.5% !important; }

  .lap-five-eighths {
    width: 62.5% !important; }

  .lap-seven-eighths {
    width: 87.5% !important; }

  /**
  * Tenths
  */
  .lap-one-tenth {
    width: 10% !important; }

  .lap-three-tenths {
    width: 30% !important; }

  .lap-seven-tenths {
    width: 70% !important; }

  .lap-nine-tenths {
    width: 90% !important; }

  /**
  * Twelfths
  */
  .lap-one-twelfth {
    width: 8.333% !important; }

  .lap-five-twelfths {
    width: 41.666% !important; }

  .lap-seven-twelfths {
    width: 58.333% !important; }

  .lap-eleven-twelfths {
    width: 91.666% !important; } }
@media only screen and (max-width: 768px) {
  /**
  * Whole
  */
  .portable-one-whole {
    width: 100% !important; }

  /**
  * Halves
  */
  .portable-one-half, .portable-two-quarters, .portable-three-sixths, .portable-four-eighths, .portable-five-tenths, .portable-six-twelfths {
    width: 50% !important; }

  /**
  * Thirds
  */
  .portable-one-third, .portable-two-sixths, .portable-four-twelfths {
    width: 33.333% !important; }

  .portable-two-thirds, .portable-four-sixths, .portable-eight-twelfths {
    width: 66.666% !important; }

  /**
  * Quarters
  */
  .portable-one-quarter, .portable-two-eighths, .portable-three-twelfths {
    width: 25% !important; }

  .portable-three-quarters, .portable-six-eighths, .portable-nine-twelfths {
    width: 75% !important; }

  /**
  * Fifths
  */
  .portable-one-fifth, .portable-two-tenths {
    width: 20% !important; }

  .portable-two-fifths, .portable-four-tenths {
    width: 40% !important; }

  .portable-three-fifths, .portable-six-tenths {
    width: 60% !important; }

  .portable-four-fifths, .portable-eight-tenths {
    width: 80% !important; }

  /**
  * Sixths
  */
  .portable-one-sixth, .portable-two-twelfths {
    width: 16.666% !important; }

  .portable-five-sixths, .portable-ten-twelfths {
    width: 83.333% !important; }

  /**
  * Eighths
  */
  .portable-one-eighth {
    width: 12.5% !important; }

  .portable-three-eighths {
    width: 37.5% !important; }

  .portable-five-eighths {
    width: 62.5% !important; }

  .portable-seven-eighths {
    width: 87.5% !important; }

  /**
  * Tenths
  */
  .portable-one-tenth {
    width: 10% !important; }

  .portable-three-tenths {
    width: 30% !important; }

  .portable-seven-tenths {
    width: 70% !important; }

  .portable-nine-tenths {
    width: 90% !important; }

  /**
  * Twelfths
  */
  .portable-one-twelfth {
    width: 8.333% !important; }

  .portable-five-twelfths {
    width: 41.666% !important; }

  .portable-seven-twelfths {
    width: 58.333% !important; }

  .portable-eleven-twelfths {
    width: 91.666% !important; } }
@media only screen and (min-width: 769px) and (max-width: 1280px) {
  /**
  * Whole
  */
  .desk-one-whole {
    width: 100% !important; }

  /**
  * Halves
  */
  .desk-one-half, .desk-two-quarters, .desk-three-sixths, .desk-four-eighths, .desk-five-tenths, .desk-six-twelfths {
    width: 50% !important; }

  /**
  * Thirds
  */
  .desk-one-third, .desk-two-sixths, .desk-four-twelfths {
    width: 33.333% !important; }

  .desk-two-thirds, .desk-four-sixths, .desk-eight-twelfths {
    width: 66.666% !important; }

  /**
  * Quarters
  */
  .desk-one-quarter, .desk-two-eighths, .desk-three-twelfths {
    width: 25% !important; }

  .desk-three-quarters, .desk-six-eighths, .desk-nine-twelfths {
    width: 75% !important; }

  /**
  * Fifths
  */
  .desk-one-fifth, .desk-two-tenths {
    width: 20% !important; }

  .desk-two-fifths, .desk-four-tenths {
    width: 40% !important; }

  .desk-three-fifths, .desk-six-tenths {
    width: 60% !important; }

  .desk-four-fifths, .desk-eight-tenths {
    width: 80% !important; }

  /**
  * Sixths
  */
  .desk-one-sixth, .desk-two-twelfths {
    width: 16.666% !important; }

  .desk-five-sixths, .desk-ten-twelfths {
    width: 83.333% !important; }

  /**
  * Eighths
  */
  .desk-one-eighth {
    width: 12.5% !important; }

  .desk-three-eighths {
    width: 37.5% !important; }

  .desk-five-eighths {
    width: 62.5% !important; }

  .desk-seven-eighths {
    width: 87.5% !important; }

  /**
  * Tenths
  */
  .desk-one-tenth {
    width: 10% !important; }

  .desk-three-tenths {
    width: 30% !important; }

  .desk-seven-tenths {
    width: 70% !important; }

  .desk-nine-tenths {
    width: 90% !important; }

  /**
  * Twelfths
  */
  .desk-one-twelfth {
    width: 8.333% !important; }

  .desk-five-twelfths {
    width: 41.666% !important; }

  .desk-seven-twelfths {
    width: 58.333% !important; }

  .desk-eleven-twelfths {
    width: 91.666% !important; } }
@media only screen and (min-width: 769px) {
  /**
  * Whole
  */
  .desk-and-up-one-whole {
    width: 100% !important; }

  /**
  * Halves
  */
  .desk-and-up-one-half, .desk-and-up-two-quarters, .desk-and-up-three-sixths, .desk-and-up-four-eighths, .desk-and-up-five-tenths, .desk-and-up-six-twelfths {
    width: 50% !important; }

  /**
  * Thirds
  */
  .desk-and-up-one-third, .desk-and-up-two-sixths, .desk-and-up-four-twelfths {
    width: 33.333% !important; }

  .desk-and-up-two-thirds, .desk-and-up-four-sixths, .desk-and-up-eight-twelfths {
    width: 66.666% !important; }

  /**
  * Quarters
  */
  .desk-and-up-one-quarter, .desk-and-up-two-eighths, .desk-and-up-three-twelfths {
    width: 25% !important; }

  .desk-and-up-three-quarters, .desk-and-up-six-eighths, .desk-and-up-nine-twelfths {
    width: 75% !important; }

  /**
  * Fifths
  */
  .desk-and-up-one-fifth, .desk-and-up-two-tenths {
    width: 20% !important; }

  .desk-and-up-two-fifths, .desk-and-up-four-tenths {
    width: 40% !important; }

  .desk-and-up-three-fifths, .desk-and-up-six-tenths {
    width: 60% !important; }

  .desk-and-up-four-fifths, .desk-and-up-eight-tenths {
    width: 80% !important; }

  /**
  * Sixths
  */
  .desk-and-up-one-sixth, .desk-and-up-two-twelfths {
    width: 16.666% !important; }

  .desk-and-up-five-sixths, .desk-and-up-ten-twelfths {
    width: 83.333% !important; }

  /**
  * Eighths
  */
  .desk-and-up-one-eighth {
    width: 12.5% !important; }

  .desk-and-up-three-eighths {
    width: 37.5% !important; }

  .desk-and-up-five-eighths {
    width: 62.5% !important; }

  .desk-and-up-seven-eighths {
    width: 87.5% !important; }

  /**
  * Tenths
  */
  .desk-and-up-one-tenth {
    width: 10% !important; }

  .desk-and-up-three-tenths {
    width: 30% !important; }

  .desk-and-up-seven-tenths {
    width: 70% !important; }

  .desk-and-up-nine-tenths {
    width: 90% !important; }

  /**
  * Twelfths
  */
  .desk-and-up-one-twelfth {
    width: 8.333% !important; }

  .desk-and-up-five-twelfths {
    width: 41.666% !important; }

  .desk-and-up-seven-twelfths {
    width: 58.333% !important; }

  .desk-and-up-eleven-twelfths {
    width: 91.666% !important; } }
@media only screen and (min-width: 1281px) {
  /**
  * Whole
  */
  .desk-wide-one-whole {
    width: 100% !important; }

  /**
  * Halves
  */
  .desk-wide-one-half, .desk-wide-two-quarters, .desk-wide-three-sixths, .desk-wide-four-eighths, .desk-wide-five-tenths, .desk-wide-six-twelfths {
    width: 50% !important; }

  /**
  * Thirds
  */
  .desk-wide-one-third, .desk-wide-two-sixths, .desk-wide-four-twelfths {
    width: 33.333% !important; }

  .desk-wide-two-thirds, .desk-wide-four-sixths, .desk-wide-eight-twelfths {
    width: 66.666% !important; }

  /**
  * Quarters
  */
  .desk-wide-one-quarter, .desk-wide-two-eighths, .desk-wide-three-twelfths {
    width: 25% !important; }

  .desk-wide-three-quarters, .desk-wide-six-eighths, .desk-wide-nine-twelfths {
    width: 75% !important; }

  /**
  * Fifths
  */
  .desk-wide-one-fifth, .desk-wide-two-tenths {
    width: 20% !important; }

  .desk-wide-two-fifths, .desk-wide-four-tenths {
    width: 40% !important; }

  .desk-wide-three-fifths, .desk-wide-six-tenths {
    width: 60% !important; }

  .desk-wide-four-fifths, .desk-wide-eight-tenths {
    width: 80% !important; }

  /**
  * Sixths
  */
  .desk-wide-one-sixth, .desk-wide-two-twelfths {
    width: 16.666% !important; }

  .desk-wide-five-sixths, .desk-wide-ten-twelfths {
    width: 83.333% !important; }

  /**
  * Eighths
  */
  .desk-wide-one-eighth {
    width: 12.5% !important; }

  .desk-wide-three-eighths {
    width: 37.5% !important; }

  .desk-wide-five-eighths {
    width: 62.5% !important; }

  .desk-wide-seven-eighths {
    width: 87.5% !important; }

  /**
  * Tenths
  */
  .desk-wide-one-tenth {
    width: 10% !important; }

  .desk-wide-three-tenths {
    width: 30% !important; }

  .desk-wide-seven-tenths {
    width: 70% !important; }

  .desk-wide-nine-tenths {
    width: 90% !important; }

  /**
  * Twelfths
  */
  .desk-wide-one-twelfth {
    width: 8.333% !important; }

  .desk-wide-five-twelfths {
    width: 41.666% !important; }

  .desk-wide-seven-twelfths {
    width: 58.333% !important; }

  .desk-wide-eleven-twelfths {
    width: 91.666% !important; } }
/*doc
### Element Layout
*/
/*doc
#### `.clearfix`

Makes an element contain floated children.

```html
<div class="clearfix doc-box">
  <div class="float--left doc-box doc-box--highlight">Floated Left</div>
  <div class="float--right doc-box doc-box--highlight">Floated Right</div>
</div>
```
*/
/*------------------------------------*\
    #CLEARFIX
\*------------------------------------*/
/**
 * Micro clearfix, as per: css-101.org/articles/clearfix/latest-new-clearfix-so-far.php
 * Extend the clearfix class with Sass to avoid the `.clearfix` class appearing
 * over and over in your markup.
 */
.clearfix:after, .cf:after, .nav:after, .list--horizontal:after, .top-bar:after, .secondary-nav:after, .breadcrumb:after, .tabs:after, .tabs--dark:after {
  content: "";
  display: table;
  clear: both; }

/*doc
#### `.float--left` and `.float--right`

Pulls elements left or right within a container.

```html
<div class="doc-box">
  <div class="float--left doc-box doc-box--highlight">Floated Left</div>
  <div class="float--right doc-box doc-box--highlight">Floated Right</div>
  <p>Some text outside the floats that will wrap under them.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ut tincidunt nulla. Suspendisse semper, nisl vitae ultricies vulputate, metus tortor tincidunt neque, sed feugiat lacus ipsum eu neque.</p>
</div>
```
*/
.float--left {
  float: left !important; }

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

@media only screen and (max-width: 575px) {
  .palm-float--left {
    float: left !important; }

  .palm-float--right {
    float: right !important; } }
@media only screen and (max-width: 768px) {
  .portable-float--left {
    float: left !important; }

  .portable-float--right {
    float: right !important; } }
/*doc
#### `.block-context`

Creates a [new block formatting context](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context).
It will contain floated children and it will not wrap under floats. If you don't
want to hide overflow, use `.block-context-overflow`.

```html
<div class="doc-box">
  <div class="float--left doc-box doc-box--highlight">Floated Left</div>
  <div class="block-context">
    <p>This text will not wrap under the float.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ut tincidunt nulla. Suspendisse semper, nisl vitae ultricies vulputate, metus tortor tincidunt neque, sed feugiat lacus ipsum eu neque.</p>
  </div>
</div>
```
*/
/**
 * Pulled from SUIT
 * https://github.com/suitcss/utils-layout/blob/0.3.0/layout.css#L25-L37
 */
.block-context {
  overflow: hidden !important; }

/*doc
#### `.block-context-overflow`

Similar to `.block-context` but allows for overflow content.

*This breaks down in some browsers when elements within this element exceed its width.*

```html
<div class="doc-box">
  <div class="float--left doc-box doc-box--highlight">Floated Left</div>
  <div class="block-context-overflow">
    <p>This text will not wrap under the float.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ut tincidunt nulla. Suspendisse semper, nisl vitae ultricies vulputate, metus tortor tincidunt neque, sed feugiat lacus ipsum eu neque.</p>
  </div>
</div>
```
*/
/**
 * Pulled from SUIT
 * https://github.com/suitcss/utils-layout/blob/0.3.0/layout.css#L39-L54
 */
.block-context-overflow {
  display: table-cell !important;
  width: 10000px !important; }

/*doc
#### `.center-block`

Position a block-level element in the center of its parent. This should be used
sparingly. You'll likely want to use the [layout system](#layout-system-a-k-a-grids-)
instead.

```html
<div class="doc-box">
  <div class="center-block one-half doc-box doc-box--highlight"></div>
</div>
```
*/
.center-block {
  display: block;
  margin: 0 auto; }

/*doc
### Display

- `.display--block`
- `.display--inline`
- `.display--inline-block`
- `.display--table`
- `.display--table-row`
- `.display--table-cell`

```html
<div class="display--block doc-box doc-box--highlight">Block display</div>
<div class="doc-box"><div class="display--inline doc-box doc-box--highlight">Inline display</div></div>
<div class="doc-box"><div class="display--inline-block doc-box doc-box--highlight">Inline-Block display</div></div>
<div class="doc-box">
  <div class="display--table">
    <div class="display--table-row">
      <div class="display--table-cell doc-box doc-box--highlight">Table cell</div>
      <div class="display--table-cell doc-box doc-box--highlight">Table cell</div>
    </div>
  </div>
</div>
```
*/
.display--block {
  display: block !important; }

.display--inline {
  display: inline !important; }

.display--inline-block {
  display: inline-block !important; }

.display--table {
  display: table !important; }

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

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

@media only screen and (max-width: 575px) {
  .palm-display--block {
    display: block !important; }

  .palm-display--block {
    display: block !important; } }
@media only screen and (max-width: 768px) {
  .portable-display--block {
    display: block !important; }

  .portable-display--block {
    display: block !important; } }
/*doc
#### Visibility

Show/hide elements on the page either globally or by a specific media query breakpoint.

- `.visible`
- `.hidden`
- `.visible--{media-query}`
- `.hidden--{media-query}`

```html
<div class="doc-box visible--palm">This will only be visible on palm devices</div>
<div class="doc-box hidden--palm">This will not be visible on palm devices</div>
```
*/
.visible {
  display: block !important; }

.hidden {
  display: none !important; }

.visible--palm {
  display: none !important; }

@media only screen and (max-width: 575px) {
  .hidden--palm {
    display: none !important; }

  .visible--palm {
    display: block !important; } }
.visible--lap {
  display: none !important; }

@media only screen and (min-width: 576px) and (max-width: 768px) {
  .hidden--lap {
    display: none !important; }

  .visible--lap {
    display: block !important; } }
.visible--portable {
  display: none !important; }

@media only screen and (max-width: 768px) {
  .hidden--portable {
    display: none !important; }

  .visible--portable {
    display: block !important; } }
.visible--desk {
  display: none !important; }

@media only screen and (min-width: 769px) and (max-width: 1280px) {
  .hidden--desk {
    display: none !important; }

  .visible--desk {
    display: block !important; } }
.visible--desk-and-up {
  display: none !important; }

@media only screen and (min-width: 769px) {
  .hidden--desk-and-up {
    display: none !important; }

  .visible--desk-and-up {
    display: block !important; } }
.visible--desk-wide {
  display: none !important; }

@media only screen and (min-width: 1281px) {
  .hidden--desk-wide {
    display: none !important; }

  .visible--desk-wide {
    display: block !important; } }
/*doc
### Positioning and Stack Order

- `.position--fixed`
- `.position--relative`
- `.position--absolute`
- `.position--static`
- `.z-10`
- `.z-20`
- `.z-30`
- `.z-40`
- `.z-50`
- `.z-60`
- `.z-70`
- `.z-80`

Helper classes to apply position properties or manipulate the stack order on an element. Elements need to be positioned for z-index to work.

*/
.position--fixed {
  position: fixed !important; }

.position--relative {
  position: relative !important; }

.position--absolute {
  position: absolute !important; }

.position--static {
  position: static !important; }

.z-10 {
  z-index: 10; }

.z-20 {
  z-index: 20; }

.z-30 {
  z-index: 30; }

.z-40 {
  z-index: 40; }

.z-50 {
  z-index: 50; }

.z-60 {
  z-index: 60; }

.z-70 {
  z-index: 70; }

.z-80 {
  z-index: 80; }

/*doc
### Spacing

A set of spacing helper classes used to add/remove both margin and padding.

Margin is added with `.push` and padding is added with `.soft`. Variants of these
also exist and can be specified with a prefix of one of the following: `-tiny`,
`-small`, `-large`, and `-huge` (e.g. `.push-small` or `.soft-huge`).

Margin and padding can be removed using the classes `.flush` and `.hard`, respectively.

All of these classes can target a specific side (or sides) of the element using
the following modifiers: `--top`, `--right`, `--bottom`, `--left`, `--ends`, and
`--sides`. For example: `.push--top` or `.soft-huge--ends`.

You can also prepend `.palm-`, `.portable-`, or `.desk-wide-` for optimized spacing helpers on smaller or wide devices. For example, 
`.push-small.palm-push-small` will put small margins on palm and up devices, but even smaller margins on palm-sized devices.


```html
<div class="doc-box">
  <div class="soft push--bottom doc-box doc-box--highlight">`.soft` with `.push--bottom`</div>
  <div class="soft--top soft-small--sides doc-box doc-box--highlight">`.soft--top` with `.soft-small--sides`</div>
</div>
```
*/
/**
 * Margin
 */
.push-tiny {
  margin: 6px !important; }

.push-tiny--top, .push-tiny--ends {
  margin-top: 6px !important; }

.push-tiny--right, .push-tiny--sides {
  margin-right: 6px !important; }

.push-tiny--bottom, .push-tiny--ends {
  margin-bottom: 6px !important; }

.push-tiny--left, .push-tiny--sides {
  margin-left: 6px !important; }

.push-small {
  margin: 12px !important; }

.push-small--top, .push-small--ends {
  margin-top: 12px !important; }

.push-small--right, .push-small--sides {
  margin-right: 12px !important; }

.push-small--bottom, .push-small--ends {
  margin-bottom: 12px !important; }

.push-small--left, .push-small--sides {
  margin-left: 12px !important; }

.push {
  margin: 24px !important; }

.push--top, .push--ends {
  margin-top: 24px !important; }

.push--right, .push--sides {
  margin-right: 24px !important; }

.push--bottom, .push--ends {
  margin-bottom: 24px !important; }

.push--left, .push--sides {
  margin-left: 24px !important; }

.push-large {
  margin: 36px !important; }

.push-large--top, .push-large--ends {
  margin-top: 36px !important; }

.push-large--right, .push-large--sides {
  margin-right: 36px !important; }

.push-large--bottom, .push-large--ends {
  margin-bottom: 36px !important; }

.push-large--left, .push-large--sides {
  margin-left: 36px !important; }

.push-huge {
  margin: 48px !important; }

.push-huge--top, .push-huge--ends {
  margin-top: 48px !important; }

.push-huge--right, .push-huge--sides {
  margin-right: 48px !important; }

.push-huge--bottom, .push-huge--ends {
  margin-bottom: 48px !important; }

.push-huge--left, .push-huge--sides {
  margin-left: 48px !important; }

.flush {
  margin: 0 !important; }

.flush--top, .flush--ends {
  margin-top: 0 !important; }

.flush--right, .flush--sides {
  margin-right: 0 !important; }

.flush--bottom, .flush--ends {
  margin-bottom: 0 !important; }

.flush--left, .flush--sides {
  margin-left: 0 !important; }

@media only screen and (max-width: 575px) {
  .palm-push-tiny {
    margin: 2px !important; }

  .palm-push-tiny--top, .palm-push-tiny--ends {
    margin-top: 2px !important; }

  .palm-push-tiny--right, .palm-push-tiny--sides {
    margin-right: 2px !important; }

  .palm-push-tiny--bottom, .palm-push-tiny--ends {
    margin-bottom: 2px !important; }

  .palm-push-tiny--left, .palm-push-tiny--sides {
    margin-left: 2px !important; }

  .palm-push-small {
    margin: 4px !important; }

  .palm-push-small--top, .palm-push-small--ends {
    margin-top: 4px !important; }

  .palm-push-small--right, .palm-push-small--sides {
    margin-right: 4px !important; }

  .palm-push-small--bottom, .palm-push-small--ends {
    margin-bottom: 4px !important; }

  .palm-push-small--left, .palm-push-small--sides {
    margin-left: 4px !important; }

  .palm-push {
    margin: 8px !important; }

  .palm-push--top, .palm-push--ends {
    margin-top: 8px !important; }

  .palm-push--right, .palm-push--sides {
    margin-right: 8px !important; }

  .palm-push--bottom, .palm-push--ends {
    margin-bottom: 8px !important; }

  .palm-push--left, .palm-push--sides {
    margin-left: 8px !important; }

  .palm-push-large {
    margin: 12px !important; }

  .palm-push-large--top, .palm-push-large--ends {
    margin-top: 12px !important; }

  .palm-push-large--right, .palm-push-large--sides {
    margin-right: 12px !important; }

  .palm-push-large--bottom, .palm-push-large--ends {
    margin-bottom: 12px !important; }

  .palm-push-large--left, .palm-push-large--sides {
    margin-left: 12px !important; }

  .palm-push-huge {
    margin: 16px !important; }

  .palm-push-huge--top, .palm-push-huge--ends {
    margin-top: 16px !important; }

  .palm-push-huge--right, .palm-push-huge--sides {
    margin-right: 16px !important; }

  .palm-push-huge--bottom, .palm-push-huge--ends {
    margin-bottom: 16px !important; }

  .palm-push-huge--left, .palm-push-huge--sides {
    margin-left: 16px !important; }

  .palm-flush {
    margin: 0 !important; }

  .palm-flush--top, .palm-flush--ends {
    margin-top: 0 !important; }

  .palm-flush--right, .palm-flush--sides {
    margin-right: 0 !important; }

  .palm-flush--bottom, .palm-flush--ends {
    margin-bottom: 0 !important; }

  .palm-flush--left, .palm-flush--sides {
    margin-left: 0 !important; } }
@media only screen and (max-width: 768px) {
  .portable-push-tiny {
    margin: 3px !important; }

  .portable-push-tiny--top, .portable-push-tiny--ends {
    margin-top: 3px !important; }

  .portable-push-tiny--right, .portable-push-tiny--sides {
    margin-right: 3px !important; }

  .portable-push-tiny--bottom, .portable-push-tiny--ends {
    margin-bottom: 3px !important; }

  .portable-push-tiny--left, .portable-push-tiny--sides {
    margin-left: 3px !important; }

  .portable-push-small {
    margin: 6px !important; }

  .portable-push-small--top, .portable-push-small--ends {
    margin-top: 6px !important; }

  .portable-push-small--right, .portable-push-small--sides {
    margin-right: 6px !important; }

  .portable-push-small--bottom, .portable-push-small--ends {
    margin-bottom: 6px !important; }

  .portable-push-small--left, .portable-push-small--sides {
    margin-left: 6px !important; }

  .portable-push {
    margin: 12px !important; }

  .portable-push--top, .portable-push--ends {
    margin-top: 12px !important; }

  .portable-push--right, .portable-push--sides {
    margin-right: 12px !important; }

  .portable-push--bottom, .portable-push--ends {
    margin-bottom: 12px !important; }

  .portable-push--left, .portable-push--sides {
    margin-left: 12px !important; }

  .portable-push-large {
    margin: 18px !important; }

  .portable-push-large--top, .portable-push-large--ends {
    margin-top: 18px !important; }

  .portable-push-large--right, .portable-push-large--sides {
    margin-right: 18px !important; }

  .portable-push-large--bottom, .portable-push-large--ends {
    margin-bottom: 18px !important; }

  .portable-push-large--left, .portable-push-large--sides {
    margin-left: 18px !important; }

  .portable-push-huge {
    margin: 24px !important; }

  .portable-push-huge--top, .portable-push-huge--ends {
    margin-top: 24px !important; }

  .portable-push-huge--right, .portable-push-huge--sides {
    margin-right: 24px !important; }

  .portable-push-huge--bottom, .portable-push-huge--ends {
    margin-bottom: 24px !important; }

  .portable-push-huge--left, .portable-push-huge--sides {
    margin-left: 24px !important; }

  .portable-flush {
    margin: 0 !important; }

  .portable-flush--top, .portable-flush--ends {
    margin-top: 0 !important; }

  .portable-flush--right, .portable-flush--sides {
    margin-right: 0 !important; }

  .portable-flush--bottom, .portable-flush--ends {
    margin-bottom: 0 !important; }

  .portable-flush--left, .portable-flush--sides {
    margin-left: 0 !important; } }
@media only screen and (min-width: 1281px) {
  .desk-wide-push-tiny {
    margin: 12px !important; }

  .desk-wide-push-tiny--top, .desk-wide-push-tiny--ends {
    margin-top: 12px !important; }

  .desk-wide-push-tiny--right, .desk-wide-push-tiny--sides {
    margin-right: 12px !important; }

  .desk-wide-push-tiny--bottom, .desk-wide-push-tiny--ends {
    margin-bottom: 12px !important; }

  .desk-wide-push-tiny--left, .desk-wide-push-tiny--sides {
    margin-left: 12px !important; }

  .desk-wide-push-small {
    margin: 24px !important; }

  .desk-wide-push-small--top, .desk-wide-push-small--ends {
    margin-top: 24px !important; }

  .desk-wide-push-small--right, .desk-wide-push-small--sides {
    margin-right: 24px !important; }

  .desk-wide-push-small--bottom, .desk-wide-push-small--ends {
    margin-bottom: 24px !important; }

  .desk-wide-push-small--left, .desk-wide-push-small--sides {
    margin-left: 24px !important; }

  .desk-wide-push {
    margin: 48px !important; }

  .desk-wide-push--top, .desk-wide-push--ends {
    margin-top: 48px !important; }

  .desk-wide-push--right, .desk-wide-push--sides {
    margin-right: 48px !important; }

  .desk-wide-push--bottom, .desk-wide-push--ends {
    margin-bottom: 48px !important; }

  .desk-wide-push--left, .desk-wide-push--sides {
    margin-left: 48px !important; }

  .desk-wide-push-large {
    margin: 72px !important; }

  .desk-wide-push-large--top, .desk-wide-push-large--ends {
    margin-top: 72px !important; }

  .desk-wide-push-large--right, .desk-wide-push-large--sides {
    margin-right: 72px !important; }

  .desk-wide-push-large--bottom, .desk-wide-push-large--ends {
    margin-bottom: 72px !important; }

  .desk-wide-push-large--left, .desk-wide-push-large--sides {
    margin-left: 72px !important; }

  .desk-wide-push-huge {
    margin: 96px !important; }

  .desk-wide-push-huge--top, .desk-wide-push-huge--ends {
    margin-top: 96px !important; }

  .desk-wide-push-huge--right, .desk-wide-push-huge--sides {
    margin-right: 96px !important; }

  .desk-wide-push-huge--bottom, .desk-wide-push-huge--ends {
    margin-bottom: 96px !important; }

  .desk-wide-push-huge--left, .desk-wide-push-huge--sides {
    margin-left: 96px !important; }

  .desk-wide-flush {
    margin: 0 !important; }

  .desk-wide-flush--top, .desk-wide-flush--ends {
    margin-top: 0 !important; }

  .desk-wide-flush--right, .desk-wide-flush--sides {
    margin-right: 0 !important; }

  .desk-wide-flush--bottom, .desk-wide-flush--ends {
    margin-bottom: 0 !important; }

  .desk-wide-flush--left, .desk-wide-flush--sides {
    margin-left: 0 !important; } }
/**
 * Padding
 */
.soft-tiny {
  padding: 6px !important; }

.soft-tiny--top, .soft-tiny--ends {
  padding-top: 6px !important; }

.soft-tiny--right, .soft-tiny--sides {
  padding-right: 6px !important; }

.soft-tiny--bottom, .soft-tiny--ends {
  padding-bottom: 6px !important; }

.soft-tiny--left, .soft-tiny--sides {
  padding-left: 6px !important; }

.soft-small {
  padding: 12px !important; }

.soft-small--top, .soft-small--ends {
  padding-top: 12px !important; }

.soft-small--right, .soft-small--sides {
  padding-right: 12px !important; }

.soft-small--bottom, .soft-small--ends {
  padding-bottom: 12px !important; }

.soft-small--left, .soft-small--sides {
  padding-left: 12px !important; }

.soft {
  padding: 24px !important; }

.soft--top, .soft--ends {
  padding-top: 24px !important; }

.soft--right, .soft--sides {
  padding-right: 24px !important; }

.soft--bottom, .soft--ends {
  padding-bottom: 24px !important; }

.soft--left, .soft--sides {
  padding-left: 24px !important; }

.soft-large {
  padding: 36px !important; }

.soft-large--top, .soft-large--ends {
  padding-top: 36px !important; }

.soft-large--right, .soft-large--sides {
  padding-right: 36px !important; }

.soft-large--bottom, .soft-large--ends {
  padding-bottom: 36px !important; }

.soft-large--left, .soft-large--sides {
  padding-left: 36px !important; }

.soft-huge {
  padding: 48px !important; }

.soft-huge--top, .soft-huge--ends {
  padding-top: 48px !important; }

.soft-huge--right, .soft-huge--sides {
  padding-right: 48px !important; }

.soft-huge--bottom, .soft-huge--ends {
  padding-bottom: 48px !important; }

.soft-huge--left, .soft-huge--sides {
  padding-left: 48px !important; }

.hard {
  padding: 0 !important; }

.hard--top, .hard--ends {
  padding-top: 0 !important; }

.hard--right, .hard--sides {
  padding-right: 0 !important; }

.hard--bottom, .hard--ends {
  padding-bottom: 0 !important; }

.hard--left, .hard--sides {
  padding-left: 0 !important; }

@media only screen and (max-width: 575px) {
  .palm-soft-tiny {
    padding: 2px !important; }

  .palm-soft-tiny--top, .palm-soft-tiny--ends {
    padding-top: 2px !important; }

  .palm-soft-tiny--right, .palm-soft-tiny--sides {
    padding-right: 2px !important; }

  .palm-soft-tiny--bottom, .palm-soft-tiny--ends {
    padding-bottom: 2px !important; }

  .palm-soft-tiny--left, .palm-soft-tiny--sides {
    padding-left: 2px !important; }

  .palm-soft-small {
    padding: 4px !important; }

  .palm-soft-small--top, .palm-soft-small--ends {
    padding-top: 4px !important; }

  .palm-soft-small--right, .palm-soft-small--sides {
    padding-right: 4px !important; }

  .palm-soft-small--bottom, .palm-soft-small--ends {
    padding-bottom: 4px !important; }

  .palm-soft-small--left, .palm-soft-small--sides {
    padding-left: 4px !important; }

  .palm-soft {
    padding: 8px !important; }

  .palm-soft--top, .palm-soft--ends {
    padding-top: 8px !important; }

  .palm-soft--right, .palm-soft--sides {
    padding-right: 8px !important; }

  .palm-soft--bottom, .palm-soft--ends {
    padding-bottom: 8px !important; }

  .palm-soft--left, .palm-soft--sides {
    padding-left: 8px !important; }

  .palm-soft-large {
    padding: 12px !important; }

  .palm-soft-large--top, .palm-soft-large--ends {
    padding-top: 12px !important; }

  .palm-soft-large--right, .palm-soft-large--sides {
    padding-right: 12px !important; }

  .palm-soft-large--bottom, .palm-soft-large--ends {
    padding-bottom: 12px !important; }

  .palm-soft-large--left, .palm-soft-large--sides {
    padding-left: 12px !important; }

  .palm-soft-huge {
    padding: 16px !important; }

  .palm-soft-huge--top, .palm-soft-huge--ends {
    padding-top: 16px !important; }

  .palm-soft-huge--right, .palm-soft-huge--sides {
    padding-right: 16px !important; }

  .palm-soft-huge--bottom, .palm-soft-huge--ends {
    padding-bottom: 16px !important; }

  .palm-soft-huge--left, .palm-soft-huge--sides {
    padding-left: 16px !important; }

  .palm-hard {
    padding: 0 !important; }

  .palm-hard--top, .palm-hard--ends {
    padding-top: 0 !important; }

  .palm-hard--right, .palm-hard--sides {
    padding-right: 0 !important; }

  .palm-hard--bottom, .palm-hard--ends {
    padding-bottom: 0 !important; }

  .palm-hard--left, .palm-hard--sides {
    padding-left: 0 !important; } }
@media only screen and (max-width: 768px) {
  .portable-soft-tiny {
    padding: 3px !important; }

  .portable-soft-tiny--top, .portable-soft-tiny--ends {
    padding-top: 3px !important; }

  .portable-soft-tiny--right, .portable-soft-tiny--sides {
    padding-right: 3px !important; }

  .portable-soft-tiny--bottom, .portable-soft-tiny--ends {
    padding-bottom: 3px !important; }

  .portable-soft-tiny--left, .portable-soft-tiny--sides {
    padding-left: 3px !important; }

  .portable-soft-small {
    padding: 6px !important; }

  .portable-soft-small--top, .portable-soft-small--ends {
    padding-top: 6px !important; }

  .portable-soft-small--right, .portable-soft-small--sides {
    padding-right: 6px !important; }

  .portable-soft-small--bottom, .portable-soft-small--ends {
    padding-bottom: 6px !important; }

  .portable-soft-small--left, .portable-soft-small--sides {
    padding-left: 6px !important; }

  .portable-soft {
    padding: 12px !important; }

  .portable-soft--top, .portable-soft--ends {
    padding-top: 12px !important; }

  .portable-soft--right, .portable-soft--sides {
    padding-right: 12px !important; }

  .portable-soft--bottom, .portable-soft--ends {
    padding-bottom: 12px !important; }

  .portable-soft--left, .portable-soft--sides {
    padding-left: 12px !important; }

  .portable-soft-large {
    padding: 18px !important; }

  .portable-soft-large--top, .portable-soft-large--ends {
    padding-top: 18px !important; }

  .portable-soft-large--right, .portable-soft-large--sides {
    padding-right: 18px !important; }

  .portable-soft-large--bottom, .portable-soft-large--ends {
    padding-bottom: 18px !important; }

  .portable-soft-large--left, .portable-soft-large--sides {
    padding-left: 18px !important; }

  .portable-soft-huge {
    padding: 24px !important; }

  .portable-soft-huge--top, .portable-soft-huge--ends {
    padding-top: 24px !important; }

  .portable-soft-huge--right, .portable-soft-huge--sides {
    padding-right: 24px !important; }

  .portable-soft-huge--bottom, .portable-soft-huge--ends {
    padding-bottom: 24px !important; }

  .portable-soft-huge--left, .portable-soft-huge--sides {
    padding-left: 24px !important; }

  .portable-hard {
    padding: 0 !important; }

  .portable-hard--top, .portable-hard--ends {
    padding-top: 0 !important; }

  .portable-hard--right, .portable-hard--sides {
    padding-right: 0 !important; }

  .portable-hard--bottom, .portable-hard--ends {
    padding-bottom: 0 !important; }

  .portable-hard--left, .portable-hard--sides {
    padding-left: 0 !important; } }
@media only screen and (min-width: 1281px) {
  .desk-wide-soft-tiny {
    padding: 12px !important; }

  .desk-wide-soft-tiny--top, .desk-wide-soft-tiny--ends {
    padding-top: 12px !important; }

  .desk-wide-soft-tiny--right, .desk-wide-soft-tiny--sides {
    padding-right: 12px !important; }

  .desk-wide-soft-tiny--bottom, .desk-wide-soft-tiny--ends {
    padding-bottom: 12px !important; }

  .desk-wide-soft-tiny--left, .desk-wide-soft-tiny--sides {
    padding-left: 12px !important; }

  .desk-wide-soft-small {
    padding: 24px !important; }

  .desk-wide-soft-small--top, .desk-wide-soft-small--ends {
    padding-top: 24px !important; }

  .desk-wide-soft-small--right, .desk-wide-soft-small--sides {
    padding-right: 24px !important; }

  .desk-wide-soft-small--bottom, .desk-wide-soft-small--ends {
    padding-bottom: 24px !important; }

  .desk-wide-soft-small--left, .desk-wide-soft-small--sides {
    padding-left: 24px !important; }

  .desk-wide-soft {
    padding: 48px !important; }

  .desk-wide-soft--top, .desk-wide-soft--ends {
    padding-top: 48px !important; }

  .desk-wide-soft--right, .desk-wide-soft--sides {
    padding-right: 48px !important; }

  .desk-wide-soft--bottom, .desk-wide-soft--ends {
    padding-bottom: 48px !important; }

  .desk-wide-soft--left, .desk-wide-soft--sides {
    padding-left: 48px !important; }

  .desk-wide-soft-large {
    padding: 72px !important; }

  .desk-wide-soft-large--top, .desk-wide-soft-large--ends {
    padding-top: 72px !important; }

  .desk-wide-soft-large--right, .desk-wide-soft-large--sides {
    padding-right: 72px !important; }

  .desk-wide-soft-large--bottom, .desk-wide-soft-large--ends {
    padding-bottom: 72px !important; }

  .desk-wide-soft-large--left, .desk-wide-soft-large--sides {
    padding-left: 72px !important; }

  .desk-wide-soft-huge {
    padding: 96px !important; }

  .desk-wide-soft-huge--top, .desk-wide-soft-huge--ends {
    padding-top: 96px !important; }

  .desk-wide-soft-huge--right, .desk-wide-soft-huge--sides {
    padding-right: 96px !important; }

  .desk-wide-soft-huge--bottom, .desk-wide-soft-huge--ends {
    padding-bottom: 96px !important; }

  .desk-wide-soft-huge--left, .desk-wide-soft-huge--sides {
    padding-left: 96px !important; }

  .desk-wide-hard {
    padding: 0 !important; }

  .desk-wide-hard--top, .desk-wide-hard--ends {
    padding-top: 0 !important; }

  .desk-wide-hard--right, .desk-wide-hard--sides {
    padding-right: 0 !important; }

  .desk-wide-hard--bottom, .desk-wide-hard--ends {
    padding-bottom: 0 !important; }

  .desk-wide-hard--left, .desk-wide-hard--sides {
    padding-left: 0 !important; } }
/*doc
### Gutter

The gutter helpers are very similar to the [spacing classes](#spacing) - with modifiers
like `.soft-gutter--top` and `.push-gutter--sides` - except that the spacing automatically
changes based on the current browser size. The spacing sizes are exactly the same
as those used for gutters in the [layout system](#layout-system-a-k-a-grids-).

```html
<div class="doc-box">
  <div class="soft-gutter push-gutter--bottom doc-box doc-box--highlight">`.soft-gutter` with `.push-gutter--bottom`</div>
  <div class="soft-gutter--top soft-gutter--sides doc-box doc-box--highlight">`.soft-gutter--top` with `.soft-gutter--sides`</div>
</div>
```
*/
.soft-gutter {
  padding: 24px !important; }

.soft-gutter--top {
  padding-top: 24px !important; }

.soft-gutter--right {
  padding-right: 24px !important; }

.soft-gutter--bottom {
  padding-bottom: 24px !important; }

.soft-gutter--left {
  padding-left: 24px !important; }

.soft-gutter--ends {
  padding-top: 24px !important;
  padding-bottom: 24px !important; }

.soft-gutter--sides {
  padding-right: 24px !important;
  padding-left: 24px !important; }

.push-gutter {
  margin: 24px !important; }

.push-gutter--top {
  margin-top: 24px !important; }

.push-gutter--right {
  margin-right: 24px !important; }

.push-gutter--bottom {
  margin-bottom: 24px !important; }

.push-gutter--left {
  margin-left: 24px !important; }

.push-gutter--ends {
  margin-top: 24px !important;
  margin-bottom: 24px !important; }

.push-gutter--sides {
  margin-right: 24px !important;
  margin-left: 24px !important; }

@media only screen and (max-width: 575px) {
  .soft-gutter {
    padding: 18px !important; }

  .soft-gutter--top {
    padding-top: 18px !important; }

  .soft-gutter--right {
    padding-right: 18px !important; }

  .soft-gutter--bottom {
    padding-bottom: 18px !important; }

  .soft-gutter--left {
    padding-left: 18px !important; }

  .soft-gutter--ends {
    padding-top: 18px !important;
    padding-bottom: 18px !important; }

  .soft-gutter--sides {
    padding-right: 18px !important;
    padding-left: 18px !important; }

  .push-gutter {
    margin: 18px !important; }

  .push-gutter--top {
    margin-top: 18px !important; }

  .push-gutter--right {
    margin-right: 18px !important; }

  .push-gutter--bottom {
    margin-bottom: 18px !important; }

  .push-gutter--left {
    margin-left: 18px !important; }

  .push-gutter--ends {
    margin-top: 18px !important;
    margin-bottom: 18px !important; }

  .push-gutter--sides {
    margin-right: 18px !important;
    margin-left: 18px !important; } }
@media only screen and (min-width: 576px) and (max-width: 768px) {
  .soft-gutter {
    padding: 24px !important; }

  .soft-gutter--top {
    padding-top: 24px !important; }

  .soft-gutter--right {
    padding-right: 24px !important; }

  .soft-gutter--bottom {
    padding-bottom: 24px !important; }

  .soft-gutter--left {
    padding-left: 24px !important; }

  .soft-gutter--ends {
    padding-top: 24px !important;
    padding-bottom: 24px !important; }

  .soft-gutter--sides {
    padding-right: 24px !important;
    padding-left: 24px !important; }

  .push-gutter {
    margin: 24px !important; }

  .push-gutter--top {
    margin-top: 24px !important; }

  .push-gutter--right {
    margin-right: 24px !important; }

  .push-gutter--bottom {
    margin-bottom: 24px !important; }

  .push-gutter--left {
    margin-left: 24px !important; }

  .push-gutter--ends {
    margin-top: 24px !important;
    margin-bottom: 24px !important; }

  .push-gutter--sides {
    margin-right: 24px !important;
    margin-left: 24px !important; } }
@media only screen and (min-width: 769px) and (max-width: 1280px) {
  .soft-gutter {
    padding: 24px !important; }

  .soft-gutter--top {
    padding-top: 24px !important; }

  .soft-gutter--right {
    padding-right: 24px !important; }

  .soft-gutter--bottom {
    padding-bottom: 24px !important; }

  .soft-gutter--left {
    padding-left: 24px !important; }

  .soft-gutter--ends {
    padding-top: 24px !important;
    padding-bottom: 24px !important; }

  .soft-gutter--sides {
    padding-right: 24px !important;
    padding-left: 24px !important; }

  .push-gutter {
    margin: 24px !important; }

  .push-gutter--top {
    margin-top: 24px !important; }

  .push-gutter--right {
    margin-right: 24px !important; }

  .push-gutter--bottom {
    margin-bottom: 24px !important; }

  .push-gutter--left {
    margin-left: 24px !important; }

  .push-gutter--ends {
    margin-top: 24px !important;
    margin-bottom: 24px !important; }

  .push-gutter--sides {
    margin-right: 24px !important;
    margin-left: 24px !important; } }
@media only screen and (min-width: 1281px) {
  .soft-gutter {
    padding: 36px !important; }

  .soft-gutter--top {
    padding-top: 36px !important; }

  .soft-gutter--right {
    padding-right: 36px !important; }

  .soft-gutter--bottom {
    padding-bottom: 36px !important; }

  .soft-gutter--left {
    padding-left: 36px !important; }

  .soft-gutter--ends {
    padding-top: 36px !important;
    padding-bottom: 36px !important; }

  .soft-gutter--sides {
    padding-right: 36px !important;
    padding-left: 36px !important; }

  .push-gutter {
    margin: 36px !important; }

  .push-gutter--top {
    margin-top: 36px !important; }

  .push-gutter--right {
    margin-right: 36px !important; }

  .push-gutter--bottom {
    margin-bottom: 36px !important; }

  .push-gutter--left {
    margin-left: 36px !important; }

  .push-gutter--ends {
    margin-top: 36px !important;
    margin-bottom: 36px !important; }

  .push-gutter--sides {
    margin-right: 36px !important;
    margin-left: 36px !important; } }
/*doc
### Text

- `.text--center`
- `.text--left`
- `.text--right`

```html
<div class="text--left doc-box push-tiny--bottom">Some left-aligned text</div>
<div class="text--center doc-box push-tiny--bottom">Some center-aligned text</div>
<div class="text--right doc-box push-tiny--bottom">Some right-aligned text</div>
```
*/
.text--left {
  text-align: left !important; }

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

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

@media only screen and (max-width: 575px) {
  .palm-text--center {
    text-align: center !important; }

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

  .palm-text--right {
    text-align: right !important; } }
@media only screen and (max-width: 768px) {
  .portable-text--center {
    text-align: center !important; }

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

  .portable-text--right {
    text-align: right !important; } }
/*doc
- `.text--uppercase`
- `.text--lowercase`
- `.text--capitalize`
- `.text--none`

```html
<div class="doc-box">
  <span class="text--uppercase">Uppercase Text</span>
  <span class="text--lowercase">Lowercase Text</span>
  <span class="text--capitalize">capitalize text</span>
</div>
```
*/
.text--uppercase, .breadcrumb {
  text-transform: uppercase !important; }

.text--lowercase {
  text-transform: lowercase !important; }

.text--capitalize {
  text-transform: capitalize !important; }

.text--none {
  text-transform: none !important; }

/*doc
- `.text--break`
- `.text--nowrap`
- `.text--truncate`

```html
<div class="layout">
   <div class="layout__item one-third">
     <div class="doc-box text--nowrap">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vitae placerat enim. Ut sed porttitor mi, a consectetur massa.</div>
   </div>
   <div class="layout__item one-third">
     <div class="doc-box text--break">Loremipsumdolorsitamet,consecteturadipiscingelit.Nuncvitaeplaceratenim.Utsedporttitormi,aconsecteturmassa.</div>
   </div>
   <div class="layout__item one-third">
     <div class="doc-box text--truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vitae placerat enim. Ut sed porttitor mi, a consectetur massa.</div>
   </div>
</div>
```
*/
.text--break {
  word-wrap: break-word !important; }

.text--nowrap {
  white-space: nowrap !important; }

.text--truncate {
  max-width: 100%;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  word-wrap: normal !important; }

/*doc
- `.text--unstyled`

```html
<div class="layout">
   <div class="layout__item one-whole">
     <a href="/" class="doc-box text--unstyled">This link has no underline.</a>
   </div>
</div>
```
*/
.text--unstyled {
  text-decoration: none !important; }

/*doc
- `.flush--line-height`

```html
<div class="layout">
   <div class="layout__item one-whole">
     <h2 class="flush--line-height">This heading has a line height of 1.</h2>
   </div>
</div>
```
*/
.flush--line-height {
  line-height: 1 !important; }

/*doc
### Vertical Alignment

- `.align--baseline`
- `.align--bottom`
- `.align--middle`
- `.align--top`

```html
<div class="doc-box gamma">Text <span class="milli align--baseline">aligned to baseline</span></div>
<div class="doc-box gamma">Text <span class="milli align--bottom">aligned to bottom</span></div>
<div class="doc-box gamma">Text <span class="milli align--middle">aligned to middle</span></div>
<div class="doc-box gamma">Text <span class="milli align--top">aligned to top</span></div>
```
*/
.align--baseline {
  vertical-align: baseline !important; }

.align--bottom {
  vertical-align: bottom !important; }

.align--middle {
  vertical-align: middle !important; }

.align--top {
  vertical-align: top !important; }

/*doc
### Transitions

Helper classes for providing transitions to your elements in a generic way.

#### `.transition`

Sets a CSS3 transition on **all** properties of the element with a duration set
with the `$transition-duration` variable and easing set by the `$transition-func`
variable.

#### `.transition--slow`

A slower version of the transition helper, set with `$transition-duration--slow`.

#### `.transition--fast`

A faster version of the transition helper, set with `$transition-duration--fast`.
*/
.transition, .btn, .input-group__addon-btn, .btn--gradient, .btn-group__item, .btn-group__button--primary, .handle, .handle:before, .text-input, .icon-input input, .select select, .checkbox:before, .radio:before, .checkbox:after, .radio:after, .top-bar__item a, .secondary-nav__item a, .header__item, .footer__item .footer__item__link, .side-nav__item, .side-nav__link, .accordion__item__link, .accordion__submenu__item__link, .breadcrumb__item a, .panel--hoverable, .preloader, .dashboard-nav__item, .dashboard-nav__link, .dashboard-nav__icon, .dashboard-nav__submenu__link, .dashboard-subnav__item, .dashboard-subnav__link, .tabs__link, .tabs__item a, .tabs li a, .tabs--dark li a, .modal, .modal.animate, .modal.animate .modal__content, .modal__content, .modal__close {
  -webkit-transition: all 400ms ease !important;
  -moz-transition: all 400ms ease !important;
  -ms-transition: all 400ms ease !important;
  -o-transition: all 400ms ease !important;
  transition: all 400ms ease !important; }

.transition--slow {
  -webkit-transition: all 600ms ease !important;
  -moz-transition: all 600ms ease !important;
  -ms-transition: all 600ms ease !important;
  -o-transition: all 600ms ease !important;
  transition: all 600ms ease !important; }

.transition--fast, .switch:before, .switch:after {
  -webkit-transition: all 150ms ease !important;
  -moz-transition: all 150ms ease !important;
  -ms-transition: all 150ms ease !important;
  -o-transition: all 150ms ease !important;
  transition: all 150ms ease !important; }

/*doc
### Border Radius

#### `.square`

A helper class to remove border-radius from an element. You can append directional modifiers (`--top`, `--left`, `--right`, `--bottom`, `--top-left`, `--top-right`, `--bottom-left`, `--bottom-right`) to only square off sides or corners as well.

#### `.borderless`

A helper class to remove borders from an element. Helpful when combined with the `.square` classes to create modular flush card layouts or elements such as button groups and form groups.

#### `.round`

A helper class to easily make circles. Don't abuse this! Be sure to declare a width and height if you're making a circle to ensure it's perfect.


*/
.square {
  border-radius: 0 !important; }

.square--left {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important; }

.square--right {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important; }

.square--top {
  border-top-right-radius: 0 !important;
  border-top-left-radius: 0 !important; }

.square--bottom {
  border-bottom-right-radius: 0 !important;
  border-bottom-left-radius: 0 !important; }

.square--top-right {
  border-top-right-radius: 0 !important; }

.square--top-left {
  border-top-left-radius: 0 !important; }

.square--bottom-right {
  border-bottom-right-radius: 0 !important; }

.square--bottom-left {
  border-bottom-left-radius: 0 !important; }

.round {
  border-radius: 50% !important; }

.borderless {
  border-color: transparent !important;
  border-width: 0px !important; }

.borderless--top {
  border-top-color: transparent !important;
  border-top-width: 0px !important; }

.borderless--bottom {
  border-bottom-color: transparent !important;
  border-bottom-width: 0px !important; }

.borderless--left {
  border-left-color: transparent !important;
  border-left-width: 0px !important; }

.borderless--right {
  border-right-color: transparent !important;
  border-right-width: 0px !important; }

.borderless--sides {
  border-right-color: transparent !important;
  border-right-width: 0px !important;
  border-left-color: transparent !important;
  border-left-width: 0px !important; }

.borderless--ends {
  border-top-color: transparent !important;
  border-top-width: 0px !important;
  border-bottom-color: transparent !important;
  border-bottom-width: 0px !important; }

/*doc
### Generic

- `.cursor--pointer`
- `.cursor--default`


*/
.cursor--pointer {
  cursor: pointer !important; }

.cursor--default {
  cursor: default !important; }

/*doc
## Base Objects
---------------
*/
/*doc
### Layout System (a.k.a. Grids)

Our layout system uses `box-sizing: border-box` and `display: inline-block` to
create an extremely powerful, flexible alternative to the traditional grid
system. Combine the layout items with the [width classes](#widths).

**Note: Because our layout system uses `inline-block`, any whitespace between
`.layout__item` elements will break the layout. The correct way to solve this
would be to use a build tool like [htmlmin](http://htmlmin.readthedocs.org/en/latest/)
or a templating engine like [Jade]() that strips whitespace automatically. If
you don't want to use these (not recommended), set `$enable-layout-hack: true;`
in your settings before importing uber.base.**

#### `.layout`

All layout systems should be wrapped in the `.layout` class and each child
wrapped in the `.layout__item` class. Below is a basic implementation:

```html
<div class="layout">
   <div class="layout__item one-half"><div class="doc-box"></div></div>
   <div class="layout__item one-half"><div class="doc-box"></div></div>
   <div class="layout__item one-third"><div class="doc-box"></div></div>
   <div class="layout__item one-third"><div class="doc-box doc-box--large"></div></div>
   <div class="layout__item one-third"><div class="doc-box"></div></div>
</div>
```

#### `.layout--flush`

A modifier to remove the layout gutters.

```html
<div class="layout layout--flush">
   <div class="layout__item one-third"><div class="doc-box"></div></div>
   <div class="layout__item one-third"><div class="doc-box doc-box--highlight"></div></div>
   <div class="layout__item one-third"><div class="doc-box"></div></div>
</div>
```

#### `.layout--middle`

A modifier to vertically align the layout items in the middle of the row.

```html
<div class="layout layout--middle">
   <div class="layout__item one-third"><div class="doc-box"></div></div>
   <div class="layout__item one-third"><div class="doc-box doc-box--large"></div></div>
   <div class="layout__item one-third"><div class="doc-box"></div></div>
</div>
```

#### `.layout--bottom`

A modifier to vertically align the layout items to the bottom of the row.

```html
<div class="layout layout--bottom">
   <div class="layout__item one-third"><div class="doc-box"></div></div>
   <div class="layout__item one-third"><div class="doc-box doc-box--large"></div></div>
   <div class="layout__item one-third"><div class="doc-box"></div></div>
</div>
```

#### `.layout--right`

A modifier to make the layout items fill up from the right side of the row.

```html
<div class="layout layout--right">
   <div class="layout__item one-quarter"><div class="doc-box"></div></div>
   <div class="layout__item one-quarter"><div class="doc-box"></div></div>
</div>
```

#### `.layout--center`

A modifier to make the layout items fill up from the center of the row.

```html
<div class="layout layout--center">
   <div class="layout__item one-quarter"><div class="doc-box"></div></div>
   <div class="layout__item one-quarter"><div class="doc-box"></div></div>
</div>
```

#### '.layout--rev'

A modifier to reverse the layout items. Usefull for rearanging the stacking
order of a responsive design.

<div class="layout layout--flush layout--rev">
  <div class="layout__item one-third"><div class="doc-box">First Item</div></div>
  <div class="layout__item one-third"><div class="doc-box doc-box--highlight">Second Item</div></div>
  <div class="layout__item one-third"><div class="doc-box">Third Item</div></div>
</div>

#### Responsive Layout Example

You can build a reponsive layout easily using the layout grid system with media queries.
Apply a size to an element on a specific media query by using the class `{media-query}-{size}`.
For example, `palm-one-whole` says that the element should have a width of one-whole on phone
screen sizes.

Combining this concept with layouts, we can easily construct a responsive grid.

```html
<div class="layout layout--flush">
  <div class="layout__item palm-one-whole lap-two-thirds desk-and-up-one-third"><div class="doc-box">First Item</div></div>
  <div class="layout__item palm-one-whole lap-one-third desk-and-up-one-third"><div class="doc-box doc-box--highlight">Second Item</div></div>
  <div class="layout__item portable-one-whole desk-and-up-one-third"><div class="doc-box">Third Item</div></div>
</div>
```

We can reverse how the items will stack by using the layout--rev class.

```html
<div class="layout layout--flush layout--rev">
  <div class="layout__item portable-one-whole desk-and-up-one-third"><div class="doc-box">Third Item</div></div>
  <div class="layout__item palm-one-whole lap-one-third desk-and-up-one-third"><div class="doc-box doc-box--highlight">Second Item</div></div>
  <div class="layout__item palm-one-whole lap-two-thirds desk-and-up-one-third"><div class="doc-box">First Item</div></div>
</div>
```

*/
/*------------------------------------*\
    #LAYOUT
\*------------------------------------*/
/**
 * The inuitcss layout system uses `box-sizing: border-box;` and
 * `display: inline-block;` to create an extremely powerful, flexible
 * alternative to the traditional grid system. Combine the layout items with
 * the widths found in `trumps.widths`.
 */
/**
 * Begin a layout group.
 */
.layout {
  list-style: none;
  margin: 0;
  padding: 0;
  margin-left: -24px; }

/**
 * 1. Cause columns to stack side-by-side.
 * 2. Space columns apart.
 * 3. Align columns to the tops of each other.
 * 4. Full-width unless told to behave otherwise.
 * 5. Required to combine fluid widths and fixed gutters.
 */
.layout__item {
  display: inline-block;
  /* [1] */
  padding-left: 24px;
  /* [2] */
  vertical-align: top;
  /* [3] */
  width: 100%;
  /* [4] */ }

@media only screen and (max-width: 575px) {
  .layout {
    margin-left: -18px; }
    .layout > .layout__item {
      padding-left: 18px; } }

@media only screen and (min-width: 576px) and (max-width: 768px) {
  .layout {
    margin-left: -24px; }
    .layout > .layout__item {
      padding-left: 24px; } }

@media only screen and (min-width: 769px) and (max-width: 1280px) {
  .layout {
    margin-left: -24px; }
    .layout > .layout__item {
      padding-left: 24px; } }

@media only screen and (min-width: 1281px) {
  .layout {
    margin-left: -36px; }
    .layout > .layout__item {
      padding-left: 36px; } }

/*------------------------------------*\
    #LAYOUT
\*------------------------------------*/
/**
 * The inuitcss layout system uses `box-sizing: border-box;` and
 * `display: inline-block;` to create an extremely powerful, flexible
 * alternative to the traditional grid system. Combine the layout items with
 * the widths found in `trumps.widths`.
 */
/**
 * Layouts with no gutters.
 */
.layout--flush {
  margin-left: 0; }
  .layout--flush > .layout__item {
    padding-left: 0; }

/**
 * Reversed rendered order of layout items, e.g. items 1, 2, 3, 4 in your
 * markup will display in order 4, 3, 2, 1 on your page.
 */
.layout--rev {
  direction: rtl;
  text-align: left; }
  .layout--rev > .layout__item {
    direction: ltr;
    text-align: left; }

/**
 * Align layout items to the vertical centers of each other.
 */
.layout--middle > .layout__item {
  vertical-align: middle; }

/**
 * Align layout items to the vertical bottoms of each other.
 */
.layout--bottom > .layout__item {
  vertical-align: bottom; }

/**
 * Make the layout items fill up from the right hand side.
 */
.layout--right {
  text-align: right; }
  .layout--right > .layout__item {
    text-align: left; }

/**
 * Make the layout items fill up from the center outward.
 */
.layout--center {
  text-align: center; }
  .layout--center > .layout__item {
    text-align: left; }

/*doc
### Flexbox

A way to lay out a row of cells in various ways. This mimicks (in a hacky way)
the native flexbox implementation but works cross-browser.

#### `.flexbox` and `.flexbox__item`

Flexboxes should be wrapped in the `.flexbox` class with each child wrapped in
the `.flexbox__item` class. Below is a basic implementation:

```html
<div class="flexbox">
  <div class="flexbox__item"><div class="doc-box">One cell</div></div>
  <div class="flexbox__item"><div class="doc-box doc-box--large">Two cell</div></div>
</div>
```

#### `.flexbox__item--collapse`

A modifier on a flexbox cell to make it collapse to fit its inner content instead
of expanded to fill the rest of the available space.

```html
<div class="flexbox">
  <div class="flexbox__item"><div class="doc-box">One cell</div></div>
  <div class="flexbox__item flexbox__item--collapse"><div class="doc-box doc-box--large">Two cell</div></div>
</div>
```

#### `.flexbox--vertical`

A modified flexbox that allows for vertical flexing.

```html
<div class="flexbox flexbox--vertical" style="height: 200px;">
  <div class="flexbox__item doc-box--highlight"><div class="doc-box">One cell</div></div>
  <div class="flexbox__item flexbox__item--collapse doc-box--highlight"><div class="doc-box">Two cell</div></div>
</div>
```
*/
/*------------------------------------*\
    $FLEXBOX
\*------------------------------------*/
/**
 * Until we can utilise flexbox natively we can kinda, sorta, attempt to emulate
 * it, in a way... e.g.:
 *
   <header class=flexbox>

       <div class=flexbox__item>
           <b>Welcome to</b>
       </div>

       <div class=flexbox__item>
           <img src="//csswizardry.com/inuitcss/img/logo.jpg" alt="inuit.css">
       </div>

   </header>
 *
 * We can also combine our grid system classes with `.flexbox__item` classes,
 * e.g.:
 *
   <div class=flexbox>
       <div class="flexbox__item  one-quarter">
       </div>
       <div class="flexbox__item  three-quarters">
       </div>
   </div>
 *
 * It’s pretty poorly named I’m afraid, but it works...
 *
 * Demo: jsfiddle.net/inuitcss/ufUh2
 *
 */
.flexbox {
  display: table;
  width: 100%; }

/**
 * Nasty hack to circumvent Modernizr conflicts.
 */
html.flexbox {
  display: block;
  width: auto; }

.flexbox__item {
  display: table-cell;
  vertical-align: middle; }

/**
 * Additions
 */
.flexbox__item--collapse {
  width: 1px; }

.flexbox--vertical {
  height: 100%; }
  .flexbox--vertical > .flexbox__item {
    display: table-row;
    vertical-align: top;
    height: 100%; }
  .flexbox--vertical > .flexbox__item--collapse {
    width: auto;
    height: 1px; }

/*doc
### Fixed Ratio

A way to create fixed aspect ratio elements. This is useful when you want
an element to have a responsive width and a set height but only know the
element's aspect ratio (e.g., responsive images and video).

#### `.fixed-ratio` and `.fixed-ratio__content`

The base wrapper class is `.fixed-ratio` which will set up a psuedo element that
provides the aspect ratio. Use the descendent class `.fixed-ratio__content` on
the content you'd like to fill the fixed ratio container.

#### `.fixed-ratio--{ratio}`

Modifier classes to change the aspect ratio. By default, we include `1-1`, `2-1`,
`4-3` and `16-9`. Alter this by changing the `$fixed-ratios` variable with a
mapping of label (`16-9`) to aspect ratio percentage (`56.25%`).

```html
<div class="fixed-ratio fixed-ratio--2-1 one-half">
  <div class="fixed-ratio__content doc-box"></div>
</div>
```
*/
.fixed-ratio, .avatar {
  display: block;
  position: relative; }
  .fixed-ratio:after, .avatar:after {
    display: block;
    width: 100%;
    padding-top: 100%;
    content: ""; }

.fixed-ratio__content, .avatar__image, .avatar > img {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0; }

.fixed-ratio--1-1:after {
  padding-top: 100%; }

.fixed-ratio--2-1:after {
  padding-top: 50%; }

.fixed-ratio--4-3:after {
  padding-top: 75%; }

.fixed-ratio--16-9:after {
  padding-top: 56.25%; }

/*------------------------------------*\
    #BUTTONS
\*------------------------------------*/
/**
 * A simple button object.
 */
/**
 * 1. Allow us to style box model properties.
 * 2. Line different sized buttons up a little nicer.
 * 3. Make buttons inherit font styles (often necessary when styling `input`s as
 *    buttons).
 * 4. Reset/normalize some styles.
 * 5. Force all button-styled elements to appear clickable.
 * 6. Fixes odd inner spacing in IE7.
 * 7. Subtract the border size from the padding value so that buttons do not
 *    grow larger as we add borders.
 */
.btn, .input-group__addon-btn {
  display: inline-block;
  /* [1] */
  vertical-align: middle;
  /* [2] */
  font: inherit;
  /* [3] */
  text-align: center;
  /* [4] */
  border: none;
  /* [4] */
  margin: 0;
  /* [4] */
  cursor: pointer;
  /* [5] */
  overflow: visible;
  /* [6] */
  padding: 11px 23px;
  /* [7] */
  background-color: #1FBAD6;
  border: 1px solid #1FBAD6; }
  .btn, .input-group__addon-btn, .btn:hover, .input-group__addon-btn:hover, .btn:active, .input-group__addon-btn:active, .btn:focus, .input-group__addon-btn:focus {
    text-decoration: none;
    /* [4] */
    color: #FFFFFF; }

/**
 * Fix a Firefox bug whereby `input type="submit"` gains 2px extra padding.
 */
.btn::-moz-focus-inner, .input-group__addon-btn::-moz-focus-inner {
  border: 0;
  padding: 0; }

/*------------------------------------*\
    #TABLES
\*------------------------------------*/
.table {
  width: 100%; }

/**
 * Include v5 Objects
 *
 * - Grids replaced with the v6's Layout object
 * - Flexbox included in the helpers by default
 * - Arrows are included by default as part of the inuit mixins
 * - Beatons replaced with v6's Buttons object
 */
/*------------------------------------*\
    $BLOCK-LIST
\*------------------------------------*/
/**
 * Create big blocky lists of content, e.g.:
 *
   <ul class=block-list>
      <li>Foo</li>
      <li>Bar</li>
      <li>Baz</li>
      <li><a href=# class=block-list__link>Foo Bar Baz</a></li>
   </ul>
 *
 * Extend this object in your theme stylesheet.
 *
 * Demo: jsfiddle.net/inuitcss/hR57q
 *
 */
.block-list,
.block-list > li {
  border: 0 solid #CDCDD3; }

.block-list {
  list-style: none;
  margin-left: 0;
  border-top-width: 1px; }
  .block-list > li {
    border-bottom-width: 1px;
    padding: 12px; }

.block-list__link {
  display: block;
  padding: 12px;
  margin: -12px; }

/*------------------------------------*\
   #UBER.BASE DEPENDENCIES
\*------------------------------------*/
/*
 * the assumes your retina image files are named with
 * @2x between the filename and the extension
 *
 * example: @include background-image-retina(logo, png, 200px, 100px);
 * where logo.png and logo@2x.png are the files you are targeting
 */
.clearfix:after, .cf:after, .nav:after, .list--horizontal:after, .top-bar:after, .secondary-nav:after, .breadcrumb:after, .tabs:after, .tabs--dark:after {
  content: "";
  display: table;
  clear: both; }

.fixed-ratio, .avatar {
  display: block;
  position: relative; }
  .fixed-ratio:after, .avatar:after {
    display: block;
    width: 100%;
    padding-top: 100%;
    content: ""; }

.fixed-ratio__content, .avatar__image, .avatar > img {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0; }

.fixed-ratio--1-1:after {
  padding-top: 100%; }

.fixed-ratio--2-1:after {
  padding-top: 50%; }

.fixed-ratio--4-3:after {
  padding-top: 75%; }

.fixed-ratio--16-9:after {
  padding-top: 56.25%; }

.layout {
  font-size: 0; }
  .layout > .layout__item {
    font-size: 14px; }

/*------------------------------------*\
    $NAV
\*------------------------------------*/
/**
 * Nav abstraction as per: csswizardry.com/2011/09/the-nav-abstraction
 * When used on an `ol` or `ul`, this class throws the list into horizontal mode
 * e.g.:
 *
   <ul class=nav>
     <li><a href=#>Home</a></li>
     <li><a href=#>About</a></li>
     <li><a href=#>Portfolio</a></li>
     <li><a href=#>Contact</a></li>
   </ul>
 *
 * Demo: jsfiddle.net/inuitcss/Vnph4
 *
 */
.nav, .list--horizontal, .top-bar, .secondary-nav, .breadcrumb, .tabs, .tabs--dark {
  list-style: none;
  margin-left: 0; }
  .nav > li, .list--horizontal > li, .top-bar > li, .secondary-nav > li, .breadcrumb > li, .tabs > li, .tabs--dark > li,
  .nav > li > a,
  .list--horizontal > li > a,
  .top-bar > li > a,
  .secondary-nav > li > a,
  .breadcrumb > li > a,
  .tabs > li > a,
  .tabs--dark > li > a {
    display: inline-block;
    *display: inline;
    zoom: 1; }

/**
 * `.nav--stacked` extends `.nav` and throws the list into vertical mode, e.g.:
 *
   <ul class="nav  nav--stacked">
     <li><a href=#>Home</a></li>
     <li><a href=#>About</a></li>
     <li><a href=#>Portfolio</a></li>
     <li><a href=#>Contact</a></li>
   </ul>
 *
 */
.nav--stacked > li, .side-nav > li {
  display: list-item; }
  .nav--stacked > li > a, .side-nav > li > a {
    display: block; }

/*doc
### Text

- `.text--center`
- `.text--left`
- `.text--right`

```html
<div class="text--left doc-box push-tiny--bottom">Some left-aligned text</div>
<div class="text--center doc-box push-tiny--bottom">Some center-aligned text</div>
<div class="text--right doc-box push-tiny--bottom">Some right-aligned text</div>
```
*/
.text--left {
  text-align: left !important; }

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

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

@media only screen and (max-width: 575px) {
  .palm-text--center {
    text-align: center !important; }

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

  .palm-text--right {
    text-align: right !important; } }
@media only screen and (max-width: 768px) {
  .portable-text--center {
    text-align: center !important; }

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

  .portable-text--right {
    text-align: right !important; } }
/*doc
- `.text--uppercase`
- `.text--lowercase`
- `.text--capitalize`
- `.text--none`

```html
<div class="doc-box">
  <span class="text--uppercase">Uppercase Text</span>
  <span class="text--lowercase">Lowercase Text</span>
  <span class="text--capitalize">capitalize text</span>
</div>
```
*/
.text--uppercase, .breadcrumb {
  text-transform: uppercase !important; }

.text--lowercase {
  text-transform: lowercase !important; }

.text--capitalize {
  text-transform: capitalize !important; }

.text--none {
  text-transform: none !important; }

/*doc
- `.text--break`
- `.text--nowrap`
- `.text--truncate`

```html
<div class="layout">
   <div class="layout__item one-third">
     <div class="doc-box text--nowrap">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vitae placerat enim. Ut sed porttitor mi, a consectetur massa.</div>
   </div>
   <div class="layout__item one-third">
     <div class="doc-box text--break">Loremipsumdolorsitamet,consecteturadipiscingelit.Nuncvitaeplaceratenim.Utsedporttitormi,aconsecteturmassa.</div>
   </div>
   <div class="layout__item one-third">
     <div class="doc-box text--truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vitae placerat enim. Ut sed porttitor mi, a consectetur massa.</div>
   </div>
</div>
```
*/
.text--break {
  word-wrap: break-word !important; }

.text--nowrap {
  white-space: nowrap !important; }

.text--truncate {
  max-width: 100%;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  word-wrap: normal !important; }

/*doc
- `.text--unstyled`

```html
<div class="layout">
   <div class="layout__item one-whole">
     <a href="/" class="doc-box text--unstyled">This link has no underline.</a>
   </div>
</div>
```
*/
.text--unstyled {
  text-decoration: none !important; }

/*doc
- `.flush--line-height`

```html
<div class="layout">
   <div class="layout__item one-whole">
     <h2 class="flush--line-height">This heading has a line height of 1.</h2>
   </div>
</div>
```
*/
.flush--line-height {
  line-height: 1 !important; }

.transition, .btn, .input-group__addon-btn, .btn--gradient, .btn-group__item, .btn-group__button--primary, .handle, .handle:before, .text-input, .icon-input input, .select select, .checkbox:before, .radio:before, .checkbox:after, .radio:after, .top-bar__item a, .secondary-nav__item a, .header__item, .footer__item .footer__item__link, .side-nav__item, .side-nav__link, .accordion__item__link, .accordion__submenu__item__link, .breadcrumb__item a, .panel--hoverable, .preloader, .dashboard-nav__item, .dashboard-nav__link, .dashboard-nav__icon, .dashboard-nav__submenu__link, .dashboard-subnav__item, .dashboard-subnav__link, .tabs__link, .tabs__item a, .tabs li a, .tabs--dark li a, .modal, .modal.animate, .modal.animate .modal__content, .modal__content, .modal__close {
  transition: all 400ms ease !important; }

.transition--slow {
  transition: all 600ms ease !important; }

.transition--fast, .switch:before, .switch:after {
  transition: all 150ms ease !important; }

/*------------------------------------*\
    #SUPERFINE UI TOOLKIT
\*------------------------------------*/
/*------------------------------------*\
    #ALERTS
\*------------------------------------*/
/**
 * This contains various styles for alerts
 */
/*doc
## Alerts
----------

### Global Alerts
Global alerts are used when an alert is not tied to a singular page or action. For example, if a user needs to be notified of an issue with their account upon log in. Global alerts are displayed below the page header. If your header is fixed, apply `.position--fixed` and make it full-width to fix it below your header.


```html
<div class="alert push--bottom">
  <a class="close"><span class="icon icon_delete"></span></a>
  <span class="alert-message"><strong>You're awesome.</strong> This is a default alert message. <a class="alert__link">Link</a></span>
</div>
<div class="alert alert--positive push--bottom">
  <a class="close"><span class="icon icon_delete"></span></a>
  <span class="alert-message"><strong>Heryay!</strong> This is a positive alert message. <a class="alert__link">Link</a></span>
</div>
<div class="alert alert--negative push--bottom">
  <a class="close"><span class="icon icon_delete"></span></a>
  <span class="alert-message"><strong>Derp!</strong> This is a negative alert message. <a class="alert__link">Link</a></span>
</div>
<div class="alert alert--warning push--bottom">
  <a class="close"><span class="icon icon_delete"></span></a>
  <span class="alert-message"><strong>Watch yo'self</strong> This is a warning alert message. <a class="alert__link">Link</a></span>
</div>
```
*/
.alert {
  background-color: #1FBAD6;
  color: #FFFFFF;
  font-size: 12px;
  padding: 10px 24px;
  position: relative; }
  .alert .icon {
    color: #FFFFFF; }
  .alert .alert__link {
    color: #FFFFFF;
    border-bottom: solid 1px #FFFFFF; }

.alert--positive {
  background-color: #27AA0B; }

.alert--negative {
  background-color: #F32F00; }

.alert--warning {
  background-color: #efb200; }

.close {
  float: right;
  position: absolute;
  top: 12px;
  right: 12px; }

/*doc
### Inline Alerts

Inline alerts are used as contextual alerts that only apply to the action taken on a singular page. For example, when a user submits an incomplete form, an alert is given to notify the user they must fill the missing fields.

```html
<div class="alert-inline push--bottom">
  <a class="close"><span class="icon icon_delete"></span></a>
  <span class="alert-message"><span class="strong">Success!</span> This is a default alert message.</span>
</div>
<div class="alert-inline alert-inline--positive push--bottom">
  <a class="close"><span class="icon icon_delete"></span></a>
  <span class="alert-message"><span class="strong">You did it!</span> This is a positive message.</span>
</div>
<div class="alert-inline alert-inline--negative push--bottom">
  <a class="close"><span class="icon icon_delete"></span></a>
  <span class="alert-message"><span class="strong">It's ok, we all make mistakes</span> This is a negative message.</span>
</div>
<div class="alert-inline alert-inline--warning push--bottom">
  <a class="close"><span class="icon icon_delete"></span></a>
  <span class="alert-message"><span class="strong">Check that again</span> This is a warning message.</span>
</div>
```
*/
.alert-inline, .toast {
  background-color: #e8f8fb;
  color: #6B6B76;
  font-size: 12px;
  padding: 10px 24px;
  border-radius: 3px;
  border: solid 1px #79D6E6;
  position: relative; }
  .alert-inline .strong, .toast .strong {
    color: #1FBAD6; }
  .alert-inline .icon, .toast .icon {
    color: #1FBAD6; }

.alert-inline--positive, .toast--positive {
  background-color: #E9F7E7;
  border: solid 1px rgba(39, 170, 11, 0.4); }
  .alert-inline--positive .strong, .toast--positive .strong {
    color: #27AA0B; }
  .alert-inline--positive .icon, .toast--positive .icon {
    color: #27AA0B; }

.alert-inline--negative, .toast--negative {
  background-color: #FEEAE6;
  border: solid 1px rgba(243, 47, 0, 0.4); }
  .alert-inline--negative .strong, .toast--negative .strong {
    color: #F32F00; }
  .alert-inline--negative .icon, .toast--negative .icon {
    color: #F32F00; }

.alert-inline--warning, .toast--warning {
  background-color: #FFF9E6;
  border: solid 1px rgba(239, 178, 0, 0.3); }
  .alert-inline--warning .strong, .toast--warning .strong {
    color: #6B6B76; }
  .alert-inline--warning .icon, .toast--warning .icon {
    color: #efb200; }

.strong {
  font-weight: 600; }

/*doc
### Toasts

Toasts are notifications that appear in a corner of the page to notify the user. You can have them timeout, or make the act of dismissing more explicit with a close icon. 

Toasts have all the same modifiers that alerts do: `--positive, --negative, --warning`, with additional ones you can use to position it in the corner you want them to appear: `--top-left, --top-right, --bottom-right, --bottom-left`.

These notifications have some docs-specific styling applied to them to show them inline. 

```html
<div class="toast toast--top-left doc-inline position--relative push--bottom push--right float--left">
  <a class="close"><span class="icon icon_delete"></span></a>
  Your email notification preferences have been updated.
</div>
<div class="toast toast--positive toast--top-right doc-inline position--relative push--bottom push--right float--left">
  <a class="close"><span class="icon icon_delete"></span></a>
  <span class="strong">Cha-ching!</span> Your monthly automatic payment was successful. <a href="#" class="text-link">Manage your automatic payments</a>
</div>
<div class="toast toast--negative toast--bottom-right doc-inline position--relative push--bottom push--right float--left">
  <a class="close"><span class="icon icon_delete"></span></a>
  <span class="strong">Crap.</span> Your monthly automatic payment failed. <a href="#" class="text-link">Update your payment information</a>
</div>
<div class="toast toast--warning toast--bottom-left doc-inline position--relative push--bottom push--right float--left">
  <a class="close"><span class="icon icon_delete"></span></a>
  Your email notification preferences have been updated.
</div>
```
*/
.doc-inline {
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important; }

.toast {
  padding: 18px 24px;
  position: fixed;
  width: 350px; }
  @media only screen and (max-width: 575px) {
    .toast {
      width: 100%; } }

.toast--top-left {
  top: 36px;
  left: 36px; }

.toast--top-right {
  top: 36px;
  right: 36px; }

.toast--bottom-right {
  bottom: 36px;
  right: 36px; }

.toast--bottom-left {
  bottom: 36px;
  left: 36px; }

/*------------------------------------*\
    #AVATARS
\*------------------------------------*/
/**
 * This contains various avatar types and sizes
 */
/*doc
## Avatars
----------

### Sizes

```html
<div class="layout">
  <div class="layout__item one-third">
    <p>Small (30px)</p>
    <div class="avatar avatar--small">
      <img src="http://d1a3f4spazzrp4.cloudfront.net/superfine/assets/dat-ass.jpg">
    </div>
  </div>
  <div class="layout__item one-third">
    <p>Medium (60px)</p>
    <div class="avatar avatar--medium">
      <img src="http://d1a3f4spazzrp4.cloudfront.net/superfine/assets/dat-ass.jpg">
    </div>
  </div>
  <div class="layout__item one-third">
    <p>Large (100px)</p>
    <div class="avatar avatar--large">
      <img src="http://d1a3f4spazzrp4.cloudfront.net/superfine/assets/dat-ass.jpg">
    </div>
  </div>
</div>
```

You can combine the `.avatar` class with any of the widths in [uber.base](https://web-platform.uberinternal.com/docs/base-css#helper-classes).

 ```html
<div class="avatar one-twelfth float--left push-huge--right">
  <img src="http://d1a3f4spazzrp4.cloudfront.net/superfine/assets/dat-ass.jpg">
</div>
<div class="avatar one-sixth float--left push-huge--right">
  <img src="http://d1a3f4spazzrp4.cloudfront.net/superfine/assets/dat-ass.jpg">
</div>
<div class="avatar one-quarter float--left">
  <img src="http://d1a3f4spazzrp4.cloudfront.net/superfine/assets/dat-ass.jpg">
</div>
```

### Blank Avatars

You can use `.avatar--blank` if you need a blank avatar. You must use this with the size modifiers (`.avatar--small`, `.avatar--medium`, `.avatar--large`) to achieve the centered positioning of the icons within the circle.

 ```html
<div class="layout">
  <div class="layout__item one-third">
    <p>Small (30px)</p>
    <div class="avatar avatar--small avatar--blank">
      <i class="icon icon_profile avatar__image text--center"></i>
    </div>
  </div>
  <div class="layout__item one-third">
    <p>Medium (60px)</p>
    <div class="avatar avatar--medium avatar--blank">
      <i class="icon icon_profile avatar__image text--center"></i>
    </div>
  </div>
  <div class="layout__item one-third">
    <p>Large (100px)</p>
    <div class="avatar avatar--large avatar--blank">
      <i class="icon icon_profile avatar__image text--center"></i>
    </div>
  </div>
</div>
```

### Tagged Avatars

Combine our tags with avatars to create...tagatars.

 ```html
<div class="layout">
  <div class="layout__item one-eighth palm-one-whole text--center">
    <div class="avatar push--top">
      <img src="https://lh3.googleusercontent.com/-QVc2i3CwY1k/VAhHIye_AYI/AAAAAAAAADY/nkh5OM4kULk/w620-h620/fan-art-zapp-brannigan-by-dover19-1-1.jpg">
    </div>
    <span class="tag tag--positive tag--profile position--relative text--center text--uppercase">Driver</span>
  </div>
  <div class="layout__item one-sixth palm-one-whole text--center">
    <div class="avatar push--top">
      <img src="http://vignette1.wikia.nocookie.net/en.futurama/images/c/c1/Were-Car.jpg/revision/latest?cb=20080112171431">
    </div>
    <span class="tag bg-uber-white-40 text-uber-black-80 tag--profile position--relative text--center text--uppercase">0110011</span>
  </div>
  <div class="layout__item one-quarter palm-one-whole text--center">
    <div class="avatar push--top">
      <img src="http://cdn.akamai.steamstatic.com/steamcommunity/public/images/avatars/34/3405175970f61e8e7620055b75187757d8bffd1b_full.jpg">
    </div>
    <span class="tag bg-uber-white-40 text-uber-black-80 tag--profile position--relative text--center text--uppercase"><i class="icon icon_star"></i> 4.9</span>
  </div>
</div>
```
*/
.avatar--small {
  width: 30px; }
  .avatar--small .icon_profile {
    font-size: 30px;
    margin-top: 4px; }

.avatar--medium {
  width: 60px; }
  .avatar--medium .icon_profile {
    font-size: 60px;
    margin-top: 8px; }

.avatar--large {
  width: 100px; }
  .avatar--large .icon_profile {
    font-size: 100px;
    margin-top: 13px; }

.avatar__image, .avatar > img {
  border-radius: 50%; }

.avatar--blank {
  background: #CDCDD3;
  border-radius: 50%;
  overflow: hidden; }
  .avatar--blank .icon_profile {
    color: #F2F2F4; }

/*------------------------------------*\
    #BUTTONS
\*------------------------------------*/
/**
 * This contains various button types and sizes
 */
/*doc
## Buttons
----------

### Button Types

```html
<button class="btn btn--primary push-small--right push-small--bottom float--left">primary</button>
<button class="btn btn--secondary push-small--right push-small--bottom float--left">secondary</button>
<button class="btn btn--tertiary push-small--right push-small--bottom float--left">tertiary</button>
<button class="btn btn--positive push-small--right push-small--bottom float--left">positive</button>
<button class="btn btn--negative push-small--right push-small--bottom float--left">negative</button>
<button class="btn btn--inactive push-small--right push-small--bottom float--left">inactive</button>
<button class="btn btn--outline push-small--right push-small--bottom float--left">outline button</button>
<button class="btn btn--outline push-small--right push-small--bottom float--left">
  <i class="icon btn__icon icon_plus push-small--right"></i>outline button with icon
</button>
<a class="btn btn--link push-small--right push-small--bottom" href="/">Link Button</a>
<div class="panel--dark soft-small display--block">
  <button class="btn btn--reverse-outline">reverse outline button</button>
</div>
```
*/
.btn, .input-group__addon-btn {
  font-family: ff-clan-web-pro-wide, "Helvetica Neue", Helvetica, sans-serif;
  font-weight: 500;
  font-size: 13px;
  padding: 0.75em 2em;
  border-radius: 3px;
  text-transform: uppercase;
  outline: none; }
  .btn:hover, .input-group__addon-btn:hover, .btn:focus, .input-group__addon-btn:focus, .btn:active, .input-group__addon-btn:active {
    background-color: #4CC8DE;
    border-color: #4CC8DE; }
  @media only screen and (max-width: 575px) {
    .btn, .input-group__addon-btn {
      width: 100%; } }

.btn__icon {
  margin-right: 12px;
  line-height: 0;
  margin-top: -1px; }

.btn--primary:hover, .btn--primary:focus, .btn--primary:active {
  background-color: #4CC8DE;
  border-color: #4CC8DE; }

.btn--secondary {
  background-color: #09091A;
  border-color: #09091A; }
  .btn--secondary:hover, .btn--secondary:focus, .btn--secondary:active {
    background-color: #3A3A48;
    border-color: #3A3A48; }

.btn--tertiary {
  background-color: #E6E6E9;
  border-color: #CDCDD3;
  color: #6B6B76; }
  .btn--tertiary:hover, .btn--tertiary:focus, .btn--tertiary:active {
    background-color: #F2F2F4;
    border-color: #D9D9DE;
    color: #6B6B76; }

.btn--outline {
  background-color: transparent;
  border-color: #1FBAD6;
  color: #1FBAD6; }
  .btn--outline:hover, .btn--outline:focus, .btn--outline:active {
    background-color: #1FBAD6;
    color: #FFFFFF;
    border-color: #1FBAD6; }

.btn--reverse-outline {
  background-color: transparent;
  border-color: #F9F9F9;
  color: #F9F9F9; }
  .btn--reverse-outline:hover, .btn--reverse-outline:focus, .btn--reverse-outline:active {
    background-color: #FFFFFF;
    color: #1FBAD6;
    border-color: #FFFFFF; }

.btn--positive {
  background-color: #27AA0B;
  border-color: #27AA0B; }
  .btn--positive:hover, .btn--positive:focus, .btn--positive:active {
    background-color: #29b40c;
    border-color: #29b40c; }

.btn--negative {
  background-color: #F32F00;
  border-color: #F32F00; }
  .btn--negative:hover, .btn--negative:focus, .btn--negative:active {
    background-color: #ff491d;
    border-color: #ff491d; }

.btn--inactive, .btn[disabled], [disabled].input-group__addon-btn {
  background-color: #F2F2F4;
  border-color: #F2F2F4;
  color: #9D9DA3;
  cursor: default; }
  .btn--inactive:hover, .btn--inactive:focus, .btn--inactive:active, .btn[disabled]:hover, [disabled].input-group__addon-btn:hover, .btn[disabled]:focus, [disabled].input-group__addon-btn:focus, .btn[disabled]:active, [disabled].input-group__addon-btn:active {
    background-color: #F2F2F4;
    border-color: #F2F2F4;
    color: #9D9DA3; }

.btn--link {
  background-color: transparent;
  font-family: ff-clan-web-pro, "Helvetica Neue", Helvetica, sans-serif;
  color: #1FBAD6;
  border: 0;
  text-transform: none;
  font-weight: normal; }
  .btn--link:hover, .btn--link:focus, .btn--link:active {
    background-color: transparent;
    text-decoration: underline;
    color: #1FBAD6; }
  .btn--link.btn--inactive, .btn--link.btn[disabled], .btn--link[disabled].input-group__addon-btn {
    color: #CDCDD3;
    background-color: transparent; }
    .btn--link.btn--inactive:hover, .btn--link.btn--inactive:focus, .btn--link.btn--inactive:active, .btn--link.btn[disabled]:hover, .btn--link[disabled].input-group__addon-btn:hover, .btn--link.btn[disabled]:focus, .btn--link[disabled].input-group__addon-btn:focus, .btn--link.btn[disabled]:active, .btn--link[disabled].input-group__addon-btn:active {
      color: #CDCDD3;
      text-decoration: none;
      background-color: transparent; }

/*doc
### Button Sizes

```html
<button class="btn btn--tiny push-small--right push-small--bottom float--left">tiny button</button>
<button class="btn btn--small push-small--right push-small--bottom float--left">small button</button>
<button class="btn push-small--right push-small--bottom float--left">default button</button>
<button class="btn btn--large push-small--right push-small--bottom float--left">large button</button>
<button class="btn btn--huge push-small--right push-small--bottom float--left">huge button</button>
```
*/
.btn--tiny {
  font-family: ff-clan-web-pro, "Helvetica Neue", Helvetica, sans-serif;
  padding: 0.5em 0.75em;
  font-size: 11px; }
  @media only screen and (max-width: 575px) {
    .btn--tiny {
      width: auto; } }

.btn--small {
  font-family: ff-clan-web-pro, "Helvetica Neue", Helvetica, sans-serif;
  padding: 0.5em 1.5em;
  font-size: 13px; }
  @media only screen and (max-width: 575px) {
    .btn--small {
      width: auto; } }

.btn--large {
  padding: 0.85em 2em;
  font-size: 16px; }

.btn--huge {
  padding: 1.25em 3em;
  font-size: 18px; }

/* doc
### Extensions
**Note:** Gradient buttons are used for driver experiences only.
```html
<button class="btn btn--full push-small--right push-small--bottom float--left">full button</button>
<button class="btn square push-small--right push-small--bottom float--left">square button</button>
<button class="btn btn--gradient push-small--right push-small--bottom float--left">gradient button</button>
```

*/
.btn--full {
  width: 100%; }

.btn--gradient {
  box-shadow: 0 2px 0 #D9D9DE;
  background: #1FBAD6;
  background: linear-gradient(to bottom, #4CC8DE 0%, #1EACC7 100%);
  background: -moz-linear-gradient(top, #4CC8DE 0%, #1EACC7 100%);
  background: -webkit-linear-gradient(top, #4CC8DE 0%, #1EACC7 100%);
  background: -o-linear-gradient(top, #4CC8DE 0%, #1EACC7 100%);
  background: -ms-linear-gradient(top, #4CC8DE 0%, #1EACC7 100%); }
  .btn--gradient:hover {
    background: linear-gradient(to bottom, #79D6E6 0%, #1FBAD6 100%);
    background: -moz-linear-gradient(top, #79D6E6 0%, #1FBAD6 100%);
    background: -webkit-linear-gradient(top, #79D6E6 0%, #1FBAD6 100%);
    background: -o-linear-gradient(top, #79D6E6 0%, #1FBAD6 100%);
    background: -ms-linear-gradient(top, #79D6E6 0%, #1FBAD6 100%); }

/* doc
### Social Buttons

```html
<div class="layout">
  <div class="layout__item one-half palm-one-whole push--bottom">
    <p class="label">Black</p>
    <span class="btn btn--secondary btn--social hard"><i class="icon delta icon_facebook"></i> </span>
    <span class="btn btn--secondary btn--social hard"><i class="icon delta icon_twitter"></i> </span>
    <span class="btn btn--secondary btn--social hard"><i class="icon delta icon_linkedin"></i> </span>
    <span class="btn btn--secondary btn--social hard"><i class="icon delta icon_instagram"></i> </span>
  </div>
  <div class="layout__item one-half palm-one-whole push--bottom">
    <p class="label">Blue</p>
    <a class="btn btn--social hard"><i class="icon delta icon_facebook"></i> </a>
    <a class="btn btn--social hard"><i class="icon delta icon_twitter"></i> </a>
    <a class="btn btn--social hard"><i class="icon delta icon_linkedin"></i> </a>
    <a class="btn btn--social hard"><i class="icon delta icon_instagram"></i> </a>
  </div>
  <div class="layout__item one-half palm-one-whole push--bottom">
    <p class="label">Outline</p>
    <button class="btn btn--outline btn--social hard"><i class="icon delta icon_facebook"></i> </button>
    <button class="btn btn--outline btn--social hard"><i class="icon delta icon_twitter"></i> </button>
    <button class="btn btn--outline btn--social hard"><i class="icon delta icon_linkedin"></i> </button>
    <button class="btn btn--outline btn--social hard"><i class="icon delta icon_instagram"></i> </button>
  </div>
  <div class="layout__item one-half palm-one-whole push--bottom">
    <p class="label">Reverse Outline</p>
    <div class="panel--dark soft-small">
      <button class="btn btn--reverse-outline btn--social hard"><i class="icon delta icon_facebook"></i> </button>
      <button class="btn btn--reverse-outline btn--social hard"><i class="icon delta icon_twitter"></i> </button>
      <button class="btn btn--reverse-outline btn--social hard"><i class="icon delta icon_linkedin"></i> </button>
      <button class="btn btn--reverse-outline btn--social hard"><i class="icon delta icon_instagram"></i> </button>
    </div>
  </div>
</div>
```

*/
.btn--social {
  border-radius: 36px;
  width: 36px;
  height: 36px; }
  .btn--social .icon {
    line-height: 2; }

.btn--reverse-outline:hover {
  color: #09091A; }

/*doc
### Button Groups

```html
  <div class="layout">
    <div class="layout__item one-whole">
      <ul class="btn-group">
        <li class="btn-group__item"><button class="btn-group__button">Add</button></li>
        <li class="btn-group__item"><button class="btn-group__button" href="#">Edit</button></li>
        <li class="btn-group__item"><button class="btn-group__button" href="#">Delete</button></li>
      </ul>
    </div>
    <div class="layout__item one-whole">
      <ul class="btn-group">
        <li class="btn-group__item"><button class="btn-group__button" href="#">Previous</button></li>
        <li class="btn-group__item"><button class="btn-group__button" href="#">Next</button></li>
      </ul>
    </div>
    <div class="layout__item one-whole">
      <ul class="btn-group">
        <li class="btn-group__item btn-group__item--disabled">Previous</li>
        <li class="btn-group__item active"><button class="btn btn-group__button" href="#">1</button></li>
        <li class="btn-group__item"><button class="btn-group__button" href="#">2</button></li>
        <li class="btn-group__item"><button class="btn-group__button" href="#">3</button></li>
        <li class="btn-group__item"><button class="btn-group__button" href="#">Next</button></li>
      </ul>
    </div>
    <div class="layout__item one-whole">
      <ul class="btn-group btn-group--primary">
        <li class="btn-group__item btn-group__item--primary"><button class="btn-group__button btn-group__button--primary">Add</button></li>
        <li class="btn-group__item btn-group__item--primary"><button class="btn-group__button btn-group__button--primary" href="#">Edit</button></li>
        <li class="btn-group__item btn-group__item--primary"><button class="btn-group__button btn-group__button--primary" href="#">Delete</button></li>
      </ul>
    </div>
  </div>
```
*/
/*
 * [1] remove space in inline-block elements
 * ref: http://www.css-tricks.com/fighting-the-space-between-inline-block-elements
 *
 * [2] we're keeping this the same height as the form elements
 * TODO: this could use some love; we should refactor the way the borders are coded to make changing colors easier
 */
.btn-group {
  clear: both;
  display: inline-block;
  border: 1px solid #CDCDD3;
  border-radius: 3px;
  font-size: 0;
  /* [1] */ }

.btn-group__item {
  border-right: 1px solid #CDCDD3;
  font-size: 13px;
  /* [1] */
  float: left;
  line-height: 1.45;
  font-weight: 500;
  margin-bottom: 0;
  padding: 8px 12px;
  /* [2] */ }
  .btn-group__item:hover {
    background-color: #F9F9F9; }
  .btn-group__item:focus, .btn-group__item:active, .btn-group__item.active, .btn-group__item.active:hover button {
    background-color: #F2F2F4; }
  .btn-group__item:last-child {
    border-right: 0; }
  .btn-group__item.active button:focus {
    background-color: transparent;
    border: 0;
    color: inherit; }

.btn-group__item--disabled {
  color: #B2B2BA;
  cursor: default; }
  .btn-group__item--disabled:hover, .btn-group__item--disabled:focus {
    background-color: #FFFFFF; }

.btn-group__button {
  color: #6B6B76;
  padding: 8px 12px;
  /* [2] */
  margin:  -9px -12px;
  appearance: none;
  background-color: transparent;
  border: 0;
  outline: none; }
  .btn-group__button:hover, .btn-group__button:active, .btn-group__button.active {
    color: #6B6B76;
    border: 0; }

.btn-group__button--disabled {
  color: #B2B2BA;
  cursor: default; }
  .btn-group__button--disabled:hover, .btn-group__button--disabled:active, .btn-group__button--disabled.active {
    color: #B2B2BA; }

.btn-group--primary {
  border-color: #1EACC7; }

.btn-group__button--primary {
  background: #1FBAD6;
  color: #FFFFFF; }

.btn-group__item--primary {
  border-color: #1EACC7; }
  .btn-group__item--primary:hover button:hover {
    color: #FFFFFF;
    background-color: #4CC8DE; }

/*doc
## Colors
---------
*/
/*doc
### Basic Colors

```html
<!-- no-show -->
<div class="layout">
  <ul class="list--unstyled layout__item one-third desk-one-whole lap-one-whole palm-one-whole flush--bottom">
    <li class="code doc-swatch doc-swatch--black">
      $black
      <span class="float--right">#000000</span>
    </li>
    <li class="code doc-swatch doc-swatch--white doc-swatch--dark-text">
      $white
      <span class="float--right">#FFFFFF</span>
    </li>
  </ul>
</div>
```

### Primary/Brand Colors

```html
<!--no-show-->
<div class="layout">
  <ul class="list--unstyled layout__item one-third desk-one-whole lap-one-whole palm-one-whole flush--bottom">
    <li class="code doc-swatch doc-swatch--uber-black">
      $uber-black
      <span class="float--right">#09091A</span>
    </li>
    <li class="code doc-swatch doc-swatch--uber-blue">
      $uber-blue
      <span class="float--right">#1FBAD6</span>
    </li>
    <li class="code doc-swatch doc-swatch--uber-white">
      $uber-white
      <span class="float--right">#C0C0C8</span>
    </li>
  </ul>
</div>
```

### Color Scales

```html
<!-- no-show -->
<div class="layout">
  <ul class="list--unstyled layout__item one-third desk-one-whole lap-one-whole palm-one-whole flush--bottom">
    <li class="code doc-swatch doc-swatch--uber-black">
      $uber-black
      <span class="float--right">#09091A</span>
    </li>
    <li class="code doc-swatch doc-swatch--uber-black-95">
      $uber-black-95
      <span class="float--right">#151525</span>
    </li>
    <li class="code doc-swatch doc-swatch--uber-black-90">
      $uber-black-90
      <span class="float--right">#222231</span>
    </li>
    <li class="code doc-swatch doc-swatch--uber-black-80">
      $uber-black-80
      <span class="float--right">#3A3A48</span>
    </li>
    <li class="code doc-swatch doc-swatch--uber-black-60">
      $uber-black-60
      <span class="float--right">#6B6B76</span>
    </li>
    <li class="code doc-swatch doc-swatch--uber-black-40">
      $uber-black-40
      <span class="float--right">#9D9DA3</span>
    </li>
  </ul>

  <ul class="list--unstyled layout__item one-third desk-one-whole lap-one-whole palm-one-whole flush--bottom">
    <li class="code doc-swatch doc-swatch--uber-white-120">
      $uber-white-120
      <span class="float--right">#B2B2BA</span>
    </li>
    <li class="code doc-swatch doc-swatch--uber-white">
      $uber-white
      <span class="float--right">#C0C0C8</span>
    </li>
    <li class="code doc-swatch doc-swatch--uber-white-80">
      $uber-white-80
      <span class="float--right">#CDCDD3</span>
    </li>
    <li class="code doc-swatch doc-swatch--uber-white-60 doc-swatch--dark-text">
      $uber-white-60
      <span class="float--right">#D9D9DE</span>
    </li>
    <li class="code doc-swatch doc-swatch--uber-white-40 doc-swatch--dark-text">
      $uber-white-40
      <span class="float--right">#E6E6E9</span>
    </li>
    <li class="code doc-swatch doc-swatch--uber-white-20 doc-swatch--dark-text">
      $uber-white-20
      <span class="float--right">#F2F2F4</span>
    </li>
    <li class="code doc-swatch doc-swatch--uber-white-10 doc-swatch--dark-text">
      $uber-white-10
      <span class="float--right">#F9F9F9</span>
    </li>
  </ul>

  <ul class="list--unstyled layout__item one-third desk-one-whole lap-one-whole palm-one-whole flush--bottom">
    <li class="code doc-swatch doc-swatch--uber-blue-120">
      $uber-blue-120
      <span class="float--right">#1EACC7</span>
    </li>
    <li class="code doc-swatch doc-swatch--uber-blue">
      $uber-blue
      <span class="float--right">#1FBAD6</span>
    </li>
    <li class="code doc-swatch doc-swatch--uber-blue-80">
      $uber-blue-80
      <span class="float--right">#4CC8DE</span>
    </li>
    <li class="code doc-swatch doc-swatch--uber-blue-60 doc-swatch--dark-text">
      $uber-blue-60
      <span class="float--right">#79D6E6</span>
    </li>
    <li class="code doc-swatch doc-swatch--uber-blue-40 doc-swatch--dark-text">
      $uber-blue-40
      <span class="float--right">#A5E3EF</span>
    </li>
    <li class="code doc-swatch doc-swatch--uber-blue-20 doc-swatch--dark-text">
      $uber-blue-20
      <span class="float--right">#D2F1F7</span>
    </li>
  </ul>
</div>
```

### Secondary/Status Colors

```html
<!-- no-show -->
<div class="layout">
  <ul class="list--unstyled layout__item one-third desk-one-whole lap-one-whole palm-one-whole flush--bottom">
    <li class="code doc-swatch doc-swatch--green">
      $green
      <span class="float--right">#27AA0B</span>
    </li>
    <li class="code doc-swatch doc-swatch--orange">
      $orange
      <span class="float--right">#F32F00</span>
    </li>
    <li class="code doc-swatch doc-swatch--yellow">
      $yellow
      <span class="float--right">#FFC000</span>
    </li>
    <li class="code doc-swatch bg-green-20">
      $green-20
      <span class="float--right">#E9F7E</span>
    </li>
    <li class="code doc-swatch bg-orange-20">
      $orange-20
      <span class="float--right">#FEEAE6</span>
    </li>
    <li class="code doc-swatch bg-yellow-20">
      $yellow-20
      <span class="float--right">#FFF9E6</span>
    </li>
  </ul>
</div>
```

### Background and Text Helpers
We have recommended text colors for you to use based on the color of your background, but the entire color palette is available as helper classes for you to easily color backgrounds or text - just prepend `.bg-` or `.text-` with the color value to use.

```html
<div class="layout">
  <h6 class="layout__item one-whole push--top">Background Helpers</h6>
  <div class="layout__item one-third desk-one-whole lap-one-whole palm-one-whole flush--bottom">
    <ul class="list--unstyled">
      <li class="soft-tiny code flush--bottom bg-black">.bg-uber-black</li>
      <li class="soft-tiny code flush--bottom bg-uber-black-95">.bg-uber-black-95</li>
      <li class="soft-tiny code flush--bottom bg-uber-black-90">.bg-uber-black-90</li>
      <li class="soft-tiny code flush--bottom bg-uber-black-80">.bg-uber-black-80</li>
      <li class="soft-tiny code flush--bottom bg-uber-black-60">.bg-uber-black-60</li>
      <li class="soft-tiny code flush--bottom bg-uber-black-40">.bg-uber-black-40</li>
      <li class="soft-tiny code flush--bottom bg-uber-white-120">.bg-uber-white-120</li>
      <li class="soft-tiny code flush--bottom bg-uber-white">.bg-uber-white</li>
      <li class="soft-tiny code flush--bottom bg-uber-white-80">.bg-uber-white-80</li>
      <li class="soft-tiny code flush--bottom bg-uber-white-60">.bg-uber-white-60</li>
      <li class="soft-tiny code flush--bottom bg-uber-white-40">.bg-uber-white-40</li>
      <li class="soft-tiny code flush--bottom bg-uber-white-20">.bg-uber-white-20</li>
      <li class="soft-tiny code flush--bottom bg-uber-white-10">.bg-uber-white-10</li>
      <li class="soft-tiny code flush--bottom bg-white">.bg-white</li>
    </ul>
  </div>
  <div class="layout__item one-third desk-one-whole lap-one-whole palm-one-whole flush--bottom">
    <ul class="list--unstyled">
      <li class="soft-tiny code flush--bottom bg-uber-blue-120">.bg-uber-blue-120</li>
      <li class="soft-tiny code flush--bottom bg-uber-blue">.bg-uber-blue</li>
      <li class="soft-tiny code flush--bottom bg-uber-blue-80">.bg-uber-blue-80</li>
      <li class="soft-tiny code flush--bottom bg-uber-blue-60">.bg-uber-blue-60</li>
      <li class="soft-tiny code flush--bottom bg-uber-blue-40">.bg-uber-blue-40</li>
      <li class="soft-tiny code flush--bottom bg-uber-blue-20">.bg-uber-blue-20</li>
    </ul>
  </div>
  <div class="layout__item one-third desk-one-whole lap-one-whole palm-one-whole flush--bottom">
    <ul class="list--unstyled">
      <li class="soft-tiny code flush--bottom bg-green">.bg-green</li>
      <li class="soft-tiny code flush--bottom bg-orange">.bg-orange</li>
      <li class="soft-tiny code flush--bottom bg-yellow">.bg-yellow</li>
      <li class="soft-tiny code flush--bottom bg-green-20">.bg-green-20</li>
      <li class="soft-tiny code flush--bottom bg-orange-20">.bg-orange-20</li>
      <li class="soft-tiny code flush--bottom bg-yellow-20">.bg-yellow-20</li>
    </ul>
  </div>
  <h6 class="layout__item one-whole push--top">Text Helpers</h6>
  <div class="layout__item one-third desk-one-whole lap-one-whole palm-one-whole flush--bottom">
    <ul class="list--unstyled">
      <li class="soft-tiny code flush--bottom text-black">.text-uber-black</li>
      <li class="soft-tiny code flush--bottom text-uber-black-95">.text-uber-black-95</li>
      <li class="soft-tiny code flush--bottom text-uber-black-90">.text-uber-black-90</li>
      <li class="soft-tiny code flush--bottom text-uber-black-80">.text-uber-black-80</li>
      <li class="soft-tiny code flush--bottom text-uber-black-60">.text-uber-black-60</li>
      <li class="soft-tiny code flush--bottom text-uber-black-40">.text-uber-black-40</li>
      <li class="soft-tiny code flush--bottom text-uber-white-120">.text-uber-white-120</li>
      <li class="soft-tiny code flush--bottom text-uber-white">.text-uber-white</li>
      <li class="soft-tiny code flush--bottom text-uber-white-80">.text-uber-white-80</li>
      <li class="soft-tiny code flush--bottom text-uber-white-60">.text-uber-white-60</li>
      <li class="soft-tiny code flush--bottom text-uber-white-40">.text-uber-white-40</li>
      <li class="soft-tiny code flush--bottom text-uber-white-20">.text-uber-white-20</li>
      <li class="soft-tiny code flush--bottom text-uber-white-10">.text-uber-white-10</li>
      <li class="soft-tiny code flush--bottom text-white">.text-white</li>
    </ul>
  </div>
  <div class="layout__item one-third desk-one-whole lap-one-whole palm-one-whole flush--bottom">
    <ul class="list--unstyled">
      <li class="soft-tiny code flush--bottom text-uber-blue-120">.text-uber-blue-120</li>
      <li class="soft-tiny code flush--bottom text-uber-blue">.text-uber-blue</li>
      <li class="soft-tiny code flush--bottom text-uber-blue-80">.text-uber-blue-80</li>
      <li class="soft-tiny code flush--bottom text-uber-blue-60">.text-uber-blue-60</li>
      <li class="soft-tiny code flush--bottom text-uber-blue-40">.text-uber-blue-40</li>
      <li class="soft-tiny code flush--bottom text-uber-blue-20">.text-uber-blue-20</li>
    </ul>
  </div>
  <div class="layout__item one-third desk-one-whole lap-one-whole palm-one-whole flush--bottom">
    <ul class="list--unstyled">
      <li class="soft-tiny code flush--bottom text-green">.text-green</li>
      <li class="soft-tiny code flush--bottom text-orange">.text-orange</li>
      <li class="soft-tiny code flush--bottom text-yellow">.text-yellow</li>
    </ul>
  </div>
  <div class="layout__item one-third palm-one-whole">
    <h6>Type on a light background</h6>
    <div class="bg-uber-white-10 soft push--bottom">
      <p class="text-uber-black-80">
        Primary 
        <code class="display--block">uber-black-80 (#3A3A48)</code>
      </p>
      <p class="text-uber-black-40">
        Secondary 
        <code class="display--block">uber-black-40 (#9D9DA3)</code>
      </p>
      <p class="text-uber-white flush">
        Tertiary 
        <code class="display--block">uber-white (#C0C0C8)</code>
      </p>
    </div>
  </div>
  <div class="layout__item one-third palm-one-whole">
    <h6>Type on a mid tone background</h6>
    <div class="bg-uber-white-80 soft push--bottom">
      <p class="text-uber-black-90">
        Primary 
        <code class="display--block">uber-black-90 (#222231)</code>
      </p>
      <p class="text-uber-black-60">
        Secondary 
        <code class="display--block">uber-black-60 (#6B6B76)</code>
      </p>
      <p class="text-uber-black-40 flush">
        Tertiary 
        <code class="display--block">uber-black-40 (#9D9DA3)</code>
      </p>
    </div>
  </div>
  <div class="layout__item one-third palm-one-whole">
    <h6>Type on a dark background</h6>
    <div class="bg-uber-black soft push--bottom">
      <p class="text-uber-white-20">
        Primary 
        <code class="display--block">uber-white-20 (#F2F2F4)</code>
      </p>
      <p class="text-uber-black-40">
        Secondary 
        <code class="display--block">uber-black-40 (#9D9DA3)</code>
      </p>
      <p class="text-uber-black-60 flush">
        Tertiary 
        <code class="display--block">uber-black-60 (#6B6B76)</code>
      </p>
    </div>
  </div>
</div>
```
*/
.bg-black {
  background-color: #000000 !important;
  color: #F2F2F4 !important; }

.bg-uber-black {
  background-color: #09091A !important;
  color: #F2F2F4 !important; }

.bg-uber-black-95 {
  background-color: #151525 !important;
  color: #F2F2F4 !important; }

.bg-uber-black-90 {
  background-color: #222231 !important;
  color: #F2F2F4 !important; }

.bg-uber-black-80 {
  background-color: #3A3A48 !important;
  color: #F2F2F4 !important; }

.bg-uber-black-60 {
  background-color: #6B6B76 !important;
  color: #F2F2F4 !important; }

.bg-uber-black-40 {
  background-color: #9D9DA3 !important;
  color: #F2F2F4 !important; }

.bg-uber-white-120 {
  background-color: #B2B2BA !important;
  color: #F2F2F4 !important; }

.bg-uber-white {
  background-color: #C0C0C8 !important; }

.bg-uber-white-80 {
  background-color: #CDCDD3 !important; }

.bg-uber-white-60 {
  background-color: #D9D9DE !important; }

.bg-uber-white-40 {
  background-color: #E6E6E9 !important; }

.bg-uber-white-20 {
  background-color: #F2F2F4 !important; }

.bg-uber-white-10 {
  background-color: #F9F9F9 !important; }

.bg-white {
  background-color: #FFFFFF !important; }

.bg-uber-blue-120 {
  background-color: #1EACC7 !important;
  color: #F2F2F4 !important; }

.bg-uber-blue {
  background-color: #1FBAD6 !important;
  color: #F2F2F4 !important; }

.bg-uber-blue-80 {
  background-color: #4CC8DE !important;
  color: #F2F2F4 !important; }

.bg-uber-blue-60 {
  background-color: #79D6E6 !important;
  color: #F2F2F4 !important; }

.bg-uber-blue-40 {
  background-color: #A5E3EF !important; }

.bg-uber-blue-20 {
  background-color: #D2F1F7 !important; }

.bg-green {
  background-color: #27AA0B !important;
  color: #F2F2F4 !important; }

.bg-orange {
  background-color: #F32F00 !important;
  color: #F2F2F4 !important; }

.bg-yellow {
  background-color: #efb200 !important;
  color: #F2F2F4 !important; }

.bg-green-20 {
  background-color: #E9F7E7 !important; }

.bg-orange-20 {
  background-color: #FEEAE6 !important; }

.bg-yellow-20 {
  background-color: #FFF9E6 !important; }

.bg-transparent {
  background-color: transparent !important; }

.text-uber-black {
  color: #09091A !important; }

.text-uber-black-95 {
  color: #151525 !important; }

.text-uber-black-90 {
  color: #222231 !important; }

.text-uber-black-80 {
  color: #3A3A48 !important; }

.text-uber-black-60 {
  color: #6B6B76 !important; }

.text-uber-black-40 {
  color: #9D9DA3 !important; }

.text-uber-white-120 {
  color: #B2B2BA !important; }

.text-uber-white {
  color: #C0C0C8 !important; }

.text-uber-white-80 {
  color: #CDCDD3 !important; }

.text-uber-white-60 {
  color: #D9D9DE !important; }

.text-uber-white-40 {
  color: #E6E6E9 !important; }

.text-uber-white-20 {
  color: #F2F2F4 !important; }

.text-uber-white-10 {
  color: #F9F9F9 !important; }

.text-white {
  color: #FFFFFF !important; }

.text-uber-blue-120 {
  color: #1EACC7 !important; }

.text-uber-blue {
  color: #1FBAD6 !important; }

.text-uber-blue-80 {
  color: #4CC8DE !important; }

.text-uber-blue-60 {
  color: #79D6E6 !important; }

.text-uber-blue-40 {
  color: #A5E3EF !important; }

.text-uber-blue-20 {
  color: #D2F1F7 !important; }

.text-green {
  color: #27AA0B !important; }

.text-orange {
  color: #F32F00 !important; }

.text-yellow {
  color: #efb200 !important; }

/*------------------------------------*\
    #DRAG HANDLES
\*------------------------------------*/
/**
 * This contains various styles for drag handles
 */
/*doc
## Drag Handle
----------
Use this element to indicate than an area of the UI can be dragged up, down, left, or right. 

```html
<div class="handle handle--horizontal position--relative bg-white"> </div>
<div class="handle handle--vertical position--relative bg-white"> </div>
```
*/
.handle {
  border: 1px solid #D9D9DE;
  border-radius: 20px;
  margin: 0 auto; }
  .handle:before {
    content: "...";
    font-size: 26px;
    text-align: center;
    position: absolute;
    color: #D9D9DE; }
  .handle:hover {
    border: 1px solid #B2B2BA; }
    .handle:hover:before {
      color: #B2B2BA; }
  .handle:active {
    border: 1px solid #9D9DA3; }
    .handle:active:before {
      color: #9D9DA3; }

.handle--horizontal {
  height: 9px;
  width: 70px;
  cursor: row-resize;
  top: -4px; }
  .handle--horizontal:before {
    top: -5px;
    width: 70px;
    line-height: 0px; }

.handle--vertical {
  height: 70px;
  width: 9px;
  cursor: col-resize;
  left: -4px; }
  .handle--vertical:before {
    left: -10px;
    height: 70px;
    transform: rotate(90deg); }

/*------------------------------------*\
    #FORMS
\*------------------------------------*/
/**
 * This contains individual form elements and commonly used form groupings.
 */
/* doc
## Form Elements
----------------
```html
<div class="layout">
  <div class="layout__item one-third palm-one-whole">
    <h3>Radio Buttons</h3>
    <ul class="list--unstyled flush--bottom">
      <li>
        <input type="radio" class="radio-input" id="radio-1"/>
        <label class="radio" for="radio-1">Radio is off</label>
      </li>
      <li>
        <input type="radio" class="radio-input" id="radio-2" checked="checked"/>
        <label class="radio" for="radio-2">Radio is on</label>
      </li>
      <li>
        <input type="radio" class="radio-input" id="radio-3" disabled/>
        <label class="radio" for="radio-3">Disabled radio is off</label>
      </li>
      <li>
        <input type="radio" class="radio-input" id="radio-4" checked="checked" disabled/>
        <label class="radio" for="radio-4">Disabled radio is on</label>
      </li>
    </ul>
  </div>
  <div class="layout__item one-third palm-one-whole">
    <h3>Checkboxes</h3>
    <ul class="list--unstyled flush--bottom">
      <li>
        <input type="checkbox" class="checkbox-input" id="checkbox-1" />
        <label class="checkbox" for="checkbox-1">Unchecked</label>
      </li>
      <li>
        <input type="checkbox" class="checkbox-input" id="checkbox-2" checked="checked"/>
        <label class="checkbox" for="checkbox-2">Checked</label>
      </li>
      <li>
        <input type="checkbox" class="checkbox-input" id="checkbox-3" checked="checked"/>
        <label class="checkbox half-checked" for="checkbox-3">Half-Checked</label>
      </li>
      <li>
        <input type="checkbox" class="checkbox-input" id="checkbox-4" disabled/>
        <label class="checkbox" for="checkbox-4">Disabled unchecked</label>
      </li>
      <li>
        <input type="checkbox" class="checkbox-input" id="checkbox-5" checked="checked" disabled/>
        <label class="checkbox" for="checkbox-5">Disabled checked</label>
      </li>
      <li>
        <input type="checkbox" class="checkbox-input" id="checkbox-6" checked="checked" disabled/>
        <label class="checkbox half-checked" for="checkbox-6">Disabled half-checked</label>
      </li>
    </ul>
    <p class="small">Note: A half-checked state does not exist on the native checkbox element, so you will need to manipulate its value with JavaScript</p>
  </div>
  <div class="layout__item one-third palm-one-whole">
    <h3>Switches</h3>
    <ul class="list--unstyled flush--bottom">
      <li>
        <input type="checkbox" class="checkbox-input" value="kitten" id="switch1">
        <label class="switch" for="switch1">OFF</label>
      </li>
      <li>
        <input type="checkbox" class="checkbox-input" value="kitten" id="switch2" checked="checked">
        <label class="switch" for="switch2">ON</label>
      </li>
      <li>
        <input type="checkbox" class="checkbox-input" value="kitten" id="switch3" disabled>
        <label class="switch" for="switch3">Disabled OFF</label>
      </li>
      <li>
        <input type="checkbox" class="checkbox-input" value="kitten" id="switch4" checked="checked" disabled>
        <label class="switch" for="switch4">Disabled ON</label>
      </li>
      <li>
        <input type="checkbox" class="checkbox-input" value="kitten" id="switch5">
        <label class="switch switch--small" for="switch5">Small</label>
      </li>
    </ul>
  </div>
</div>
```
### Input Fields

```html
<label class="label" for="input-1">Default</label>
<input type="text" class="text-input" placeholder="Jane Doe" id="input-1" />

<label class="label" for="input-2">Error</label>
<input type="text" class="text-input error" placeholder="I'm sorry Dave, I'm afraid I can't do that." id="input-2" />

<label class="label" for="input-3">Disabled</label>
<input type="text" class="text-input" value="Jane Doe" id="input-3" disabled/>
```

### Select Boxes (dropdowns)

``` html
<div class="layout">
  <div class="layout__item one-third palm-one-whole">
    <label class="label" for="select-1">Default</label>
    <div class="select">
      <select id="select-1">
        <option value="1">uberX</option>
        <option value="2">Uber Black</option>
        <option value="3">Uber SUV</option>
      </select>
    </div>
  </div>
  <div class="layout__item one-third palm-one-whole">
    <label class="label" for="select-2">Error</label>
    <div class="select error">
      <select id="select-2">
        <option value="1">Choose one</option>
        <option value="2">Uber Black</option>
        <option value="3">Uber SUV</option>
      </select>
    </div>
  </div>
  <div class="layout__item one-third palm-one-whole">
    <label class="label" for="select-3">Disabled</label>
    <div class="select disabled">
      <select id="select-3" disabled>
        <option value="1">uberX</option>
        <option value="2">Uber Black</option>
        <option value="3">Uber SUV</option>
      </select>
    </div>
  </div>
  <div class="layout__item one-third palm-one-whole">
    <label class="label" for="select-4">Primary</label>
    <div class="select select--primary">
      <select id="select-4">
        <option value="1">The Nina</option>
        <option value="2">The Pinta</option>
        <option value="3">The Santa Maria</option>
      </select>
    </div>
  </div>
  <div class="layout__item one-third palm-one-whole">
    <label class="label" for="select-5">Secondary</label>
    <div class="select select--secondary">
      <select id="select-5">
        <option value="1">Joey</option>
        <option value="2">Ross</option>
        <option value="3">Chandler</option>
      </select>
    </div>
  </div>
  <div class="layout__item one-third palm-one-whole">
    <label class="label" for="select-6">Tertiary</label>
    <div class="select select--tertiary">
      <select id="select-6">
        <option value="1">Lions</option>
        <option value="2">Tigers</option>
        <option value="3">Bears</option>
      </select>
    </div>
  </div>
  <div class="layout__item one-sixth palm-one-whole">
    <label class="label" for="select-7">Borderless</label>
    <div class="select select--borderless">
      <select id="select-7">
        <option value="1">Show 10</option>
        <option value="2">Show 50</option>
        <option value="3">Show 100</option>
      </select>
    </div>
  </div>
</div>
```

### Textarea

```html
<label class="label" for="textarea-1">Default</label>
<textarea rows="3" class="text-input text-input--textarea" id="textarea-1" placeholder="Your Styleguide is arriving now."></textarea>

<label class="label" for="textarea-2">Error</label>
<textarea rows="3" class="text-input text-input--textarea error" id="textarea-2" placeholder="Your Styleguide is arriving now."></textarea>

<label class="label" for="textarea-3">Disabled</label>
<textarea rows="3" class="text-input text-input--textarea" id="textarea-3" placeholder="Your Styleguide is arriving now." disabled></textarea>
```

### Input Groups - Icons

```html
<label class="label" for="search-1">Icon right</label>
<div class="input-group icon-input right">
  <input id="search-1" type="search" placeholder="Search">
  <span class="icon-input__icon icon icon_search"></span>
</div>

<label class="label" for="search-1">Icon left</label>
<div class="input-group icon-input left">
  <input id="search-1" type="search" placeholder="Search">
  <span class="icon-input__icon icon icon_search"></span>
</div>

<label class="label" for="search-1">Icon left</label>
<div class="input-group icon-input left">
  <input id="search-1" placeholder="Search" disabled>
  <span class="icon-input__icon icon icon_search"></span>
</div>

<label class="label" for="inline-1">Inline Editing</label>
<div class="input-group icon-input left">
  <input id="inline-1" class="text-input--inline square soft--left" placeholder="Untitled">
  <span class="icon-input__icon icon icon_edit flush--left"></span>
</div>

<label class="label" for="inline-2">Inline Editing</label>
<div class="input-group icon-input right">
  <input id="inline-2" class="text-input--inline square hard--left" placeholder="Untitled">
  <span class="icon-input__icon icon icon_edit flush--right"></span>
</div>

<label class="label" for="inline-1">Inline Editing Error</label>
<div class="input-group icon-input left">
  <input id="inline-3" class="text-input--inline square error soft--left" placeholder="Untitled">
  <span class="icon-input__icon icon icon_edit flush--left"></span>
</div>

<label class="label" for="inline-2">Inline Editing Error</label>
<div class="input-group icon-input right">
  <input id="inline-4" class="text-input--inline square error hard--left" placeholder="Untitled">
  <span class="icon-input__icon icon icon_edit flush--right"></span>
</div>

<label class="label" for="inline-1">Inline Editing Disabled</label>
<div class="input-group icon-input left">
  <input id="inline-5" class="text-input--inline square disabled soft--left" placeholder="Untitled" disabled>
  <span class="icon-input__icon icon icon_edit flush--left text-uber-white-60"></span>
</div>

<label class="label" for="inline-2">Inline Editing Disabled</label>
<div class="input-group icon-input right">
  <input id="inline-6" class="text-input--inline square disabled hard--left" placeholder="Untitled" disabled>
  <span class="icon-input__icon icon icon_edit flush--right text-uber-white-60"></span>
</div>

```

### Input Groups - Addons
Use a combination of these different types of addons to suit your needs.

```html
<div class="layout">
  <div class="layout__item one-third palm-one-whole">
    <label class="label" for="addon-1">Addon Left</label>
    <div class="input-group">
      <span class="input-group__addon left">+1</span>
      <input class="text-input" id="addon-1" placeholder="(777) 777-7777">
    </div>
  </div>
  <div class="layout__item one-third palm-one-whole">
    <label class="label" for="addon-2">Addon Right</label>
    <div class="input-group input-group-addon">
      <span class="input-group__addon right">.00</span>
      <input class="text-input" id="addon-2" placeholder="">
    </div>
  </div>
  <div class="layout__item one-third palm-one-whole">
    <label class="label" for="addon-3">Addon Left and Right</label>
    <div class="input-group input-group-addon">
      <span class="input-group__addon left">&#36;</span>
      <span class="input-group__addon right">.00</span>
      <input class="text-input" id="addon-3" placeholder="">
    </div>
  </div>
  <div class="layout__item one-third palm-one-whole">
    <label class="label" for="addon-4">Addon Button Right</label>
    <div class="input-group input-group-addon">
      <button class="input-group__addon-btn right">Sign Up</button>
      <input class="text-input" id="addon-4" placeholder="">
    </div>
  </div>
  <div class="layout__item one-third palm-one-whole">
    <label class="label" for="addon-5">Addon Select Left</label>
    <div class="input-group input-group-addon">
      <div class="select select--tertiary input-group__addon-select left">
        <select>
          <option value="1">Ms.</option>
          <option value="2">Mrs.</option>
          <option value="3">Mr.</option>
        </select>
      </div>
      <input class="text-input" id="addon-5" placeholder="">
    </div>
  </div>
  <div class="layout__item one-third palm-one-whole">
    <label class="label" for="addon-6">Addon Select Right</label>
    <div class="input-group input-group-addon">
      <div class="select select--primary input-group__addon-select right">
        <select>
          <option value="1">.com</option>
          <option value="2">.net</option>
          <option value="3">.pizza</option>
          <option value="4">.ninja</option>
          <option value="5">.cat</option>
        </select>
      </div>
      <input class="text-input" id="addon-5" placeholder="">
    </div>
  </div>
</div>
```

### Input Groups - Stacked

```html
<ul class="input-group input-group--stacked">
  <li class="input-group--stacked__item"><input class="text-input text-input--stacked text-input--small" placeholder="Email"></li>
  <li class="input-group--stacked__item"><input class="text-input text-input--stacked text-input--small" placeholder="Password"></li>
</ul>

<ul class="input-group input-group--stacked">
  <li class="input-group--stacked__item"><input class="text-input text-input--stacked" placeholder="Name"></li>
  <li class="input-group--stacked__item"><input class="text-input text-input--stacked" placeholder="Mobile Number"></li>
  <li class="input-group--stacked__item"><input class="text-input text-input--stacked" placeholder="Email"></li>
</ul>

<ul class="input-group input-group--stacked flush--bottom">
  <li class="input-group--stacked__item"><input class="text-input text-input--stacked text-input--large" placeholder="Email"></li>
  <li class="input-group--stacked__item"><input class="text-input text-input--stacked text-input--large" placeholder="Username"></li>
  <li class="input-group--stacked__item"><input class="text-input text-input--stacked text-input--large" placeholder="Password"></li>
</ul>
```

### Text Input sizes

```html
<div class="form-group">
  <label class="label">Small</label>
  <input type="email" class="text-input text-input--small" placeholder="Look at this little fella" />
</div>
<div class="form-group">
  <label class="label">Regular (Default)</label>
  <input type="email" class="text-input" placeholder="Default size" />
</div>
<div class="form-group">
  <label class="label">Large</label>
  <input type="email" class="text-input text-input--large" placeholder="Big ol' input" />
</div>
```
### Form Buttons

```html
<div class="layout">
  <div class="layout__item three-quarters palm-one-whole push-small--bottom">
    <input type="email" class="text-input text-input--small flush--bottom" placeholder="small form input" />
  </div>
  <div class="layout__item one-quarter palm-one-whole push-small--bottom">
    <button class="btn btn-form--small palm-one-whole">small btn</button>
  </div>
  <div class="layout__item three-quarters palm-one-whole push-small--bottom">
    <input type="email" class="text-input flush--bottom" placeholder="default form input" />
  </div>
  <div class="layout__item one-quarter palm-one-whole push-small--bottom">
    <button class="btn btn-form palm-one-whole">default btn</button>
  </div>
  <div class="layout__item three-quarters palm-one-whole push-small--bottom">
    <input type="email" class="text-input text-input--large flush--bottom" placeholder="large form input" />
  </div>
  <div class="layout__item one-quarter palm-one-whole push-small--bottom">
    <button class="btn btn-form--large btn--primary palm-one-whole">large btn</button>
  </div>
</div>
```

### Select Input sizes

```html
<div class="form-group">
  <label class="label">Small</label>
  <div class="select select--small">
    <select>
      <option value="1">United States</option>
      <option value="2">United Kingdom</option>
    </select>
  </div>
</div>
<div class="form-group">
  <label class="label">Regular (Default)</label>
  <div class="select">
    <select>
      <option value="1">United States</option>
      <option value="2">United Kingdom</option>
    </select>
  </div>
</div>
<div class="form-group">
  <label class="label">Large</label>
  <div class="select select--large">
    <select>
      <option value="1">United States</option>
      <option value="2">United Kingdom</option>
    </select>
  </div>
</div>
```

## Forms
--------

### Default
Here's an example of a form using all of our styled elements. If you need a different form input, [let us know](mailto:web-platform@uber.com).

```html
<form class="form">
  <div class="form-group">
    <label class="label" for="first-name">Name</label>
    <div class="layout">
      <div class="layout__item one-half palm-one-whole">
        <input type="text" class="text-input" placeholder="First" id="first-name" />
      </div>
      <div class="layout__item one-half palm-one-whole">
        <input type="text" class="text-input" placeholder="Last" id="last-name" />
      </div>
    </div>
  </div>
  <div class="form-group">
    <label class="label" for="email">Email</label>
    <input type="email" class="text-input" placeholder="name@example.com" />
    <div class="form-caption form-caption">This is a form caption.</div>
  </div>
  <div class="layout">
    <div class="layout__item one-half palm-one-whole">
      <div class="form-group">
        <label class="label" for="input-error">Error</label>
        <input type="email" class="text-input error" placeholder="name@example.com" id="input-error" />
        <div class="form-caption form-caption--error">This entry is invalid</div>
      </div>
    </div>
    <div class="layout__item one-half palm-one-whole">
      <div class="form-group">
        <label class="label" for="input-disabled">Disabled</label>
        <input type="email" class="text-input" value="name@example.com" id="input-disabled" disabled />
      </div>
    </div>
  </div>
  <div class="form-group push-large--bottom">
    <label class="label" for="country">Country</label>
    <div class="select">
      <select id="country">
        <option value="1">United States</option>
        <option value="2">United Kingdom</option>
      </select>
    </div>
  </div>
  <div class="layout">
    <div class="layout__item one-half palm-one-whole">
      <div class="form-group">
        <input type="checkbox" class="checkbox-input" id="checkbox-10" />
        <label class="checkbox" for="checkbox-10">Unchecked</label>
      </div>
      <div class="form-group">
        <input type="checkbox" class="checkbox-input" id="checkbox-20" checked />
        <label class="checkbox" for="checkbox-20">Checked</label>
      </div>
      <div class="form-group">
        <input type="checkbox" class="checkbox-input" id="checkbox-30" disabled />
        <label class="checkbox" for="checkbox-30">Disabled Unchecked</label>
      </div>
      <div class="form-group">
        <input type="checkbox" class="checkbox-input" id="checkbox-40" disabled checked />
        <label class="checkbox" for="checkbox-40">Disabled Checked</label>
      </div>
    </div>
    <div class="layout__item one-half palm-one-whole">
      <div class="form-group">
        <input type="radio" class="radio-input" id="radio-50" name="radio-group-2"/>
        <label class="radio" for="radio-50">Radio is off</label>
      </div>
      <div class="form-group">
        <input type="radio" class="radio-input" id="radio-60" name="radio-group-2" checked />
        <label class="radio" for="radio-60">Radio is on</label>
      </div>
      <div class="form-group">
        <input type="radio" class="radio-input" id="radio-70" disabled />
        <label class="radio" for="radio-70">Disabled radio is off</label>
      </div>
      <div class="form-group">
        <input type="radio" class="radio-input" id="radio-80" disabled checked />
        <label class="radio" for="radio-80">Disabled radio is on</label>
      </div>
    </div>
  </div>
  <button class="btn btn--full push-small--ends">Submit</button>
</form>
```

### Small
Have a need for denser, small forms? We've made flexible classes you can attach to achieve this. Here's an example.
<form class="form">
  <div class="form-group">
    <div class="layout">
      <div class="layout__item one-third palm-one-whole">
        <label class="label micro" for="first-name-2">First Name</label>
        <input type="text" class="text-input text-input--small" placeholder="First" id="first-name-2" />
      </div>
      <div class="layout__item one-third palm-one-whole">
        <label class="label micro" for="last-name-2">Last Name</label>
        <input type="text" class="text-input text-input--small" placeholder="Last" id="last-name-2" />
      </div>
      <div class="layout__item one-third palm-one-whole">
        <label class="label micro" for="email">Email</label>
        <input type="email" class="text-input text-input--small" placeholder="name@example.com" id="email-2"/>
      </div>
    </div>
  </div>
  <div class="layout">
    <div class="layout__item one-third palm-one-whole">
      <div class="form-group">
        <label class="label micro" for="input-error">Error</label>
        <input type="email" class="text-input text-input--small error" placeholder="name@example.com" id="input-error-2" />
        <div class="form-caption form-caption--error form-caption--small">This entry is invalid</div>
      </div>
    </div>
    <div class="layout__item one-third palm-one-whole">
      <div class="form-group">
        <label class="label micro" for="input-disabled">Disabled</label>
        <input type="email" class="text-input text-input--small" value="name@example.com" id="input-disabled-2" disabled />
      </div>
    </div>
    <div class="layout__item one-third palm-one-whole">
      <div class="form-group">
        <label class="label micro" for="dropdown">Dropdown</label>
        <div class="select select--small">
          <select id="dropdown">
            <option value="1">United States</option>
            <option value="2">United Kingdom</option>
          </select>
        </div>
      </div>
    </div>
  </div>
  <div class="layout">
    <div class="layout__item one-third palm-one-whole">
      <div class="form-group">
        <label class="label micro" for="input-group-small">Small Input Group</label>
        <div class="input-group">
          <span class="input-group__addon input-group--small left">+1</span>
          <input class="text-input text-input--small" id="addon-small" placeholder="(777) 777-7777">
        </div>
      </div>
    </div>
    <div class="layout__item one-third palm-one-whole">
      <div class="form-group">
        <label class="label micro" for="input-group-small">Small Input Group</label>
        <div class="input-group">
          <span class="input-group__addon input-group--small left">$</span>
          <span class="input-group__addon input-group--small right">.00</span>
          <input class="text-input text-input--small" id="addon-small">
        </div>
      </div>
    </div>
    <div class="layout__item one-third palm-one-whole">
      <div class="form-group">
        <label class="label micro" for="textarea-small">Textarea</label>
        <textarea rows="2" class="text-input text-input--textarea--small text-input--small"> </textarea>
      </div>
    </div>
  </div>
  <div class="layout">
    <div class="layout__item">
      <button class="btn btn--tiny float--right push-huge--bottom">Submit</button>
      <button class="btn btn--tiny btn--tertiary float--right push--right">Cancel</button>
    </div>
  </div>
</form>

*/
/**
 * Form wrapper
 */
.form {
  max-width: 100%; }

.form--full {
  max-width: none; }

/**
 * Grouping of form fields
 */
.form-group {
  margin-bottom: 6px; }

/**
 * Base form controls
 * (text inputs, textareas, selects)
 */
input[type=search] {
  -webkit-appearance: none;
  box-sizing: border-box; }

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0; }

input[type=number] {
  -moz-appearance: textfield; }

.text-input, .icon-input input, .select select {
  width: 100%;
  padding: 8px 12px;
  font-size: 14px;
  margin-bottom: 12px;
  background: #FFFFFF;
  border: 1px solid #CDCDD3;
  border-radius: 3px;
  outline: none;
  line-height: 1.25;
  color: #3A3A48; }
  .text-input:hover, .icon-input input:hover, .select select:hover {
    border-color: #B2B2BA; }
  .text-input:focus, .icon-input input:focus, .select select:focus, .focus.text-input, .icon-input input.focus, .select select.focus {
    box-shadow: 0 0 5px 0 #71d8ea;
    border-color: #1FBAD6; }
  .text-input:disabled, .icon-input input:disabled, .select select:disabled, .disabled.text-input, .icon-input input.disabled, .select select.disabled {
    background: #F2F2F4;
    color: #CDCDD3;
    cursor: default; }
    .text-input:disabled:hover, .icon-input input:disabled:hover, .select select:disabled:hover, .disabled.text-input:hover, .icon-input input.disabled:hover, .select select.disabled:hover {
      border-color: #CDCDD3; }

.error, .error select {
  border-color: #F32F00; }
  .error:focus, .error.focus, .error:hover, .error select:focus, .error select.focus, .error select:hover {
    box-shadow: none;
    border-color: #F32F00; }

/**
 * Text inputs
 */
.text-input, .icon-input input, .select select {
  height: 38px; }

.text-input--small, .select--small select {
  height: 30px;
  font-size: 12px;
  padding: 8px 10px;
  margin-bottom: 0; }

.text-input--large, .select--large select {
  height: 48px;
  font-size: 16px; }

/**
 * Modifier for Textarea element
 */
.text-input--textarea {
  height: auto;
  padding: 12px 14px;
  resize: none; }

.text-input--textarea--small {
  height: auto;
  padding: 8px 6px;
  resize: none; }

/**
 * Input Groups
 */
.input-group, .select {
  position: relative; }

.input-group__addon, .input-group__addon-btn {
  position: absolute;
  top: 0;
  font-size: 14px; }
  .left.input-group__addon, .left.input-group__addon-btn {
    left: 0;
    border-radius: 3px 0 0 3px; }
    .left.input-group__addon ~ input, .left.input-group__addon-btn ~ input {
      padding-left: 60px; }
  .right.input-group__addon, .right.input-group__addon-btn {
    right: 0;
    border-radius: 0 3px 3px 0; }
    .right.input-group__addon ~ input, .right.input-group__addon-btn ~ input {
      padding-right: 60px; }

.input-group__addon {
  background: #E6E6E9;
  color: #9D9DA3;
  padding: 6px;
  min-width: 48px;
  text-align: center;
  border: solid 1px #CDCDD3; }

.input-group__addon-btn {
  padding: 6px 20px;
  background: #1FBAD6;
  color: #FFFFFF;
  border-color: #1FBAD6; }
  @media only screen and (max-width: 575px) {
    .input-group__addon-btn {
      width: auto; } }

.input-group__addon-select {
  position: absolute;
  padding: 0; }
  .input-group__addon-select.right {
    right: 0; }
    .input-group__addon-select.right select {
      border-radius: 0 3px 3px 0; }
  .input-group__addon-select.left {
    left: 0; }
    .input-group__addon-select.left select {
      border-radius: 3px 0 0 3px; }

.input-group--small {
  height: 30px;
  font-size: 12px;
  line-height: 17px;
  min-width: 36px; }
  .input-group--small.left ~ input {
    padding-left: 42px; }
  .input-group--small.right ~ input {
    padding-left: 42px; }

/**
 * Stacked Input Groups
 */
.input-group--stacked {
  margin-left: 0;
  list-style: none; }

.input-group--stacked__item {
  margin-bottom: 0; }
  .input-group--stacked__item:first-child input {
    border-radius: 3px 3px 0 0; }
  .input-group--stacked__item:last-child input {
    border-radius: 0 0 3px 3px;
    border-bottom: 1px solid #CDCDD3; }

.text-input--stacked {
  margin-bottom: 0;
  border-bottom: 0;
  border-radius: 0; }

/**
 * Inputs with Icons
 */
.icon-input input.error {
  border-color: #F32F00; }
.icon-input input.text-input--inline {
  border: dashed 1px transparent; }
  .icon-input input.text-input--inline:hover {
    border-bottom: dashed 1px #C0C0C8; }
  .icon-input input.text-input--inline:focus, .icon-input input.text-input--inline.focus {
    box-shadow: 0 0 0 0;
    border-bottom: dashed 1px #6B6B76; }
  .icon-input input.text-input--inline.error {
    border-bottom: dashed 1px #F32F00; }
  .icon-input input.text-input--inline.disabled {
    cursor: default;
    opacity: 0.5;
    background: transparent;
    border: transparent; }
.icon-input .icon-input__icon {
  position: absolute;
  top: 0;
  color: #9D9DA3;
  margin: 12px; }
.icon-input.right input {
  padding-right: 12px; }
.icon-input.right .icon-input__icon {
  right: 0px; }
.icon-input.left input {
  padding-left: 32px; }
.icon-input.left .icon-input__icon {
  left: 0px; }

/**
 * Selects
 */
select {
  -webkit-appearance: none;
  -moz-appearance: none; }

.select select {
  appearance: none;
  padding: 4px 30px 4px 12px;
  text-indent: 0.01px;
  text-overflow: ''; }
  .select select:hover {
    cursor: pointer; }
  .select select:disabled {
    cursor: auto; }
.select:after {
  content: "▾";
  position: absolute;
  color: #9D9DA3;
  top: -1px;
  right: 10px;
  line-height: 38px;
  pointer-events: none; }

.select--small select {
  padding: 4px 10px; }
.select--small:after {
  line-height: 30px; }

.select--large:after {
  line-height: 48px; }

.select--primary select {
  background-color: #1FBAD6;
  color: #FFFFFF;
  border-color: #1FBAD6; }
  .select--primary select:hover, .select--primary select:focus, .select--primary select:active {
    background-color: #4CC8DE;
    border-color: #4CC8DE; }
.select--primary:after {
  color: #FFFFFF; }

.select--secondary select {
  background-color: #09091A;
  color: #FFFFFF;
  border-color: #09091A; }
  .select--secondary select:hover, .select--secondary select:focus, .select--secondary select:active {
    background-color: #3A3A48;
    border-color: #3A3A48; }
  .select--secondary select:focus, .select--secondary select.focus {
    box-shadow: 0 0 5px 0 #686880; }
.select--secondary:after {
  color: #FFFFFF; }

.select--tertiary select {
  background-color: #E6E6E9;
  color: #6B6B76;
  border-color: #CDCDD3; }
  .select--tertiary select:hover, .select--tertiary select:focus, .select--tertiary select:active {
    background-color: #F2F2F4;
    border-color: #D9D9DE;
    color: #6B6B76; }
  .select--tertiary select:focus, .select--tertiary select.focus {
    box-shadow: 0 0 5px 0 #d2d2d4; }
.select--tertiary:after {
  color: #6B6B76; }

.select--borderless select {
  border: 0;
  padding: 0; }
  .select--borderless select:focus, .select--borderless select.focus {
    box-shadow: none;
    border-color: transparent; }

/**
 * Checkboxes and radios
 *
 * [1]: Vertically align the checkbox and label text
 */
.checkbox-input, .radio-input {
  position: absolute;
  left: -500000px; }
  .checkbox-input:focus + label:before, .radio-input:focus + label:before {
    outline-color: #1FBAD6;
    outline-style: auto;
    outline-width: 5px; }

.label--inline, .checkbox, .radio {
  display: inline-block;
  position: relative;
  padding-left: 32px;
  margin-bottom: 12px;
  line-height: 20px;
  vertical-align: middle;
  cursor: pointer; }
  @media only screen and (max-width: 768px) {
    .label--inline, .checkbox, .radio {
      padding-left: 37px;
      line-height: 25px; } }

.checkbox:before, .radio:before {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  background: #FFFFFF;
  border: 1px solid #CDCDD3;
  content: ""; }
  @media only screen and (max-width: 768px) {
    .checkbox:before, .radio:before {
      width: 25px;
      height: 25px; } }
.checkbox:after, .radio:after {
  transform: rotate(-45deg);
  display: block;
  position: absolute;
  top: 5px;
  left: 5px;
  opacity: 0;
  content: ""; }

.checkbox:after {
  width: 11px;
  height: 7px;
  border-bottom: 3px solid #1FBAD6;
  border-left: 3px solid #1FBAD6; }
  @media only screen and (max-width: 768px) {
    .checkbox:after {
      top: 8px;
      left: 7px; } }

.radio:before {
  border-radius: 100%; }
.radio:after {
  width: 10px;
  height: 10px;
  background: #1FBAD6;
  border-radius: 100%; }
  @media only screen and (max-width: 768px) {
    .radio:after {
      width: 13px;
      height: 13px;
      top: 6px;
      left: 6px; } }

.checkbox:hover:before,
.radio:hover:before {
  border-color: #B2B2BA; }
.checkbox:hover:after,
.radio:hover:after {
  opacity: 0.3; }
  @media only screen and (max-width: 768px) {
    .checkbox:hover:after,
    .radio:hover:after {
      opacity: 0; } }

input[type="checkbox"]:checked + .checkbox:after,
input[type="radio"]:checked + .radio:after {
  opacity: 1; }

input[type="checkbox"]:checked + .half-checked:after, .half-checked:after {
  transform: rotate(0deg);
  width: 11px;
  height: 7px;
  border-left: 0px solid #1FBAD6;
  border-bottom: 3px solid #1FBAD6; }

input[type="checkbox"]:disabled + .checkbox,
input[type="radio"]:disabled + .radio {
  cursor: default; }
  input[type="checkbox"]:disabled + .checkbox:before, input[type="checkbox"]:disabled + .checkbox:hover:before,
  input[type="radio"]:disabled + .radio:before,
  input[type="radio"]:disabled + .radio:hover:before {
    background: #F2F2F4;
    border-color: #CDCDD3; }

input[type="checkbox"]:disabled + .checkbox:after {
  border-color: #CDCDD3; }

input[type="radio"]:disabled + .radio:after {
  background: #CDCDD3;
  border-color: #CDCDD3; }

input[type="checkbox"]:disabled:checked + .checkbox:hover:after,
input[type="radio"]:disabled:checked + .radio:hover:after {
  opacity: 1; }

/**
 * Switches
 */
.switch {
  display: inline-block;
  position: relative;
  padding: 0 0 0 50px;
  line-height: 20px;
  cursor: pointer;
  user-select: none; }
  .switch:before {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    width: 40px;
    height: 20px;
    background: #9D9DA3;
    border-radius: 10px; }
    @media only screen and (max-width: 768px) {
      .switch:before {
        width: 50px;
        height: 25px;
        border-radius: 20px; } }
  .switch:after {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    width: 18px;
    height: 18px;
    margin: 1px;
    background: #FFFFFF;
    border-radius: 10px; }
    @media only screen and (max-width: 768px) {
      .switch:after {
        width: 23px;
        height: 23px; } }
  @media only screen and (max-width: 768px) {
    .switch {
      padding: 0 0 0 60px;
      line-height: 25px; } }

input[type="checkbox"]:checked + .switch:before {
  background: #1FBAD6; }
input[type="checkbox"]:checked + .switch:after {
  left: 20px; }
  @media only screen and (max-width: 768px) {
    input[type="checkbox"]:checked + .switch:after {
      left: 25px; } }

input[type="checkbox"]:disabled + .switch:before {
  background: #CDCDD3; }

.switch--small:before {
  width: 30px;
  height: 15px;
  top: 2px; }
.switch--small:after {
  width: 13px;
  height: 13px;
  top: 2px; }

input[type="checkbox"]:checked + .switch--small:after {
  left: 15px; }

/**
 * Form Captions
 */
.form-caption {
  font-size: 12px;
  color: #C0C0C8;
  margin: -8px 0 12px 0; }

.form-caption--error {
  color: #F32F00; }

.form-caption--small {
  font-size: 10px;
  margin: 0px 0 6px 0; }

/* Form Buttons */
.btn-form {
  line-height: 16px;
  height: 38px; }

.btn-form--small {
  font-size: 12px;
  line-height: 12px;
  height: 30px; }

.btn-form--large {
  font-size: 16px;
  line-height: 20px;
  height: 48px; }

/*doc
## Icons
--------------

### Icon Font 3.4.2
--------------
<p class="doc-box doc-box--bright-highlight">If you are migrating from v1.0.0 to v3.4.2 please check [this page](/docs/old-icons) for information about breaking changes.</p>

<p><strong>Please Note</strong> that v2.0.0 has been deprecated completely due to its lack of parity with v1.0.0.</p>
<p><strong>Don't see an icon you need?</strong> Submit a [ticket](https://code.uberinternal.com/maniphest/task/create/) to the Superfine project.</p>
*/
/*doc
**Note:** You must include:
<pre class="language-markup doc-full-height"><code>&lt;link href="//d1a3f4spazzrp4.cloudfront.net/uber-icons/3.4.2/uber-icons.css" rel="stylesheet"&gt;</code></pre>
In your HTML template to render these icons.

```html
<!-- no-show -->
<div class="layout">
  <ul class="list--unstyled layout__item">
    <li class="float--left push-small--right" data-name="add-person"><i class="icon icon_add-person gamma push-small--right"></i> .icon_add-person</li>
    <li class="float--left push-small--right" data-name="add-person"><i class="icon icon_alert gamma push-small--right"></i> .icon_alert</li>
    <li class="float--left push-small--right" data-name="add-person"><i class="icon icon_android gamma push-small--right"></i> .icon_android</li>
    <li class="float--left push-small--right" data-name="add-person"><i class="icon icon_apple gamma push-small--right"></i> .icon_apple</li>
    <li class="float--left push-small--right" data-name="add-person"><i class="icon icon_attach gamma push-small--right"></i> .icon_attach</li>
    <li class="float--left push-small--right" data-name="add-person"><i class="icon icon_bookmark gamma push-small--right"></i> .icon_bookmark</li>
    <li class="float--left push-small--right" data-name="add-person"><i class="icon icon_briefcase gamma push-small--right"></i> .icon_briefcase</li>
    <li class="float--left push-small--right" data-name="add-person"><i class="icon icon_calendar gamma push-small--right"></i> .icon_calendar</li>
    <li class="float--left push-small--right" data-name="add-person"><i class="icon icon_camera gamma push-small--right"></i> .icon_camera</li>
    <li class="float--left push-small--right" data-name="add-person"><i class="icon icon_cancel gamma push-small--right"></i> .icon_cancel</li>
    <li class="float--left push-small--right" data-name="add-person"><i class="icon icon_car-black gamma push-small--right"></i> .icon_car-black</li>
    <li class="float--left push-small--right" data-name="add-person"><i class="icon icon_car-suv gamma push-small--right"></i> .icon_car-suv</li>
    <li class="float--left push-small--right" data-name="add-person"><i class="icon icon_car-taxi gamma push-small--right"></i> .icon_car-taxi</li>
    <li class="float--left push-small--right" data-name="add-person"><i class="icon icon_car-uberx gamma push-small--right"></i> .icon_car-uberx</li>
    <li class="float--left push-small--right" data-name="add-person"><i class="icon icon_car gamma push-small--right"></i> .icon_car</li>
    <li class="float--left push-small--right" data-name="add-person"><i class="icon icon_cart gamma push-small--right"></i> .icon_cart</li>
    <li class="float--left push-small--right" data-name="add-person"><i class="icon icon_certified gamma push-small--right"></i> .icon_certified</li>
    <li class="float--left push-small--right" data-name="add-person"><i class="icon icon_chart gamma push-small--right"></i> .icon_chart</li>
    <li class="float--left push-small--right" data-name="add-person"><i class="icon icon_check-alt gamma push-small--right"></i> .icon_check-alt</li>
    <li class="float--left push-small--right" data-name="add-person"><i class="icon icon_check gamma push-small--right"></i> .icon_check</li>
    <li class="float--left push-small--right" data-name="add-person"><i class="icon icon_cloud gamma push-small--right"></i> .icon_cloud</li>
    <li class="float--left push-small--right" data-name="add-person"><i class="icon icon_credit-card gamma push-small--right"></i> .icon_credit-card</li>
    <li class="float--left push-small--right" data-name="add-person"><i class="icon icon_crosshairs gamma push-small--right"></i> .icon_crosshairs</li>
    <li class="float--left push-small--right" data-name="add-person"><i class="icon icon_dashboard gamma push-small--right"></i> .icon_dashboard</li>
    <li class="float--left push-small--right" data-name="add-person"><i class="icon icon_delete-alt gamma push-small--right"></i> .icon_delete-alt</li>
    <li class="float--left push-small--right" data-name="add-person"><i class="icon icon_delete gamma push-small--right"></i> .icon_delete</li>
    <li class="float--left push-small--right" data-name="add-person"><i class="icon icon_details gamma push-small--right"></i> .icon_details</li>
    <li class="float--left push-small--right" data-name="add-person"><i class="icon icon_down-arrow gamma push-small--right"></i> .icon_down-arrow</li>
    <li class="float--left push-small--right" data-name="add-person"><i class="icon icon_download gamma push-small--right"></i> .icon_download</li>
    <li class="float--left push-small--right" data-name="add-person"><i class="icon icon_draw-shape gamma push-small--right"></i> .icon_draw-shape</li>
    <li class="float--left push-small--right" data-name="add-person"><i class="icon icon_duplicate gamma push-small--right"></i> .icon_duplicate</li>
    <li class="float--left push-small--right" data-name="add-person"><i class="icon icon_edit gamma push-small--right"></i> .icon_edit</li>
    <li class="float--left push-small--right" data-name="add-person"><i class="icon icon_employees gamma push-small--right"></i> .icon_employees</li>
    <li class="float--left push-small--right" data-name="add-person"><i class="icon icon_eta gamma push-small--right"></i> .icon_eta</li>
    <li class="float--left push-small--right" data-name="add-person"><i class="icon icon_eye-closed gamma push-small--right"></i> .icon_eye-closed</li>
    <li class="float--left push-small--right" data-name="add-person"><i class="icon icon_eye gamma push-small--right"></i> .icon_eye</li>
    <li class="float--left push-small--right" data-name="add-person"><i class="icon icon_facebook gamma push-small--right"></i> .icon_facebook</li>
    <li class="float--left push-small--right" data-name="add-person"><i class="icon icon_fare-split gamma push-small--right"></i> .icon_fare-split</li>
    <li class="float--left push-small--right" data-name="add-person"><i class="icon icon_file gamma push-small--right"></i> .icon_file</li>
    <li class="float--left push-small--right" data-name="add-person"><i class="icon icon_files gamma push-small--right"></i> .icon_files</li>
    <li class="float--left push-small--right" data-name="add-person"><i class="icon icon_free-rides gamma push-small--right"></i> .icon_free-rides</li>
    <li class="float--left push-small--right" data-name="add-person"><i class="icon icon_geofence gamma push-small--right"></i> .icon_geofence</li>
    <li class="float--left push-small--right" data-name="add-person"><i class="icon icon_google-plus gamma push-small--right"></i> .icon_google-plus</li>
    <li class="float--left push-small--right" data-name="add-person"><i class="icon icon_graph gamma push-small--right"></i> .icon_graph</li>
    <li class="float--left push-small--right" data-name="add-person"><i class="icon icon_heart-empty gamma push-small--right"></i> .icon_heart-empty</li>
    <li class="float--left push-small--right" data-name="add-person"><i class="icon icon_heart gamma push-small--right"></i> .icon_heart</li>
    <li class="float--left push-small--right" data-name="add-person"><i class="icon icon_help gamma push-small--right"></i> .icon_help</li>
    <li class="float--left push-small--right" data-name="add-person"><i class="icon icon_home gamma push-small--right"></i> .icon_home</li>
    <li class="float--left push-small--right" data-name="add-person"><i class="icon icon_id-card gamma push-small--right"></i> .icon_id-card</li>
    <li class="float--left push-small--right" data-name="add-person"><i class="icon icon_info gamma push-small--right"></i> .icon_info</li>
    <li class="float--left push-small--right" data-name="add-person"><i class="icon icon_instagram gamma push-small--right"></i> .icon_instagram</li>
    <li class="float--left push-small--right" data-name="add-person"><i class="icon icon_key gamma push-small--right"></i> .icon_key</li>
    <li class="float--left push-small--right" data-name="add-person"><i class="icon icon_layers gamma push-small--right"></i> .icon_layers</li>
    <li class="float--left push-small--right" data-name="add-person"><i class="icon icon_left-arrow gamma push-small--right"></i> .icon_left-arrow</li>
    <li class="float--left push-small--right" data-name="add-person"><i class="icon icon_linkedin gamma push-small--right"></i> .icon_linkedin</li>
    <li class="float--left push-small--right" data-name="add-person"><i class="icon icon_location gamma push-small--right"></i> .icon_location</li>
    <li class="float--left push-small--right" data-name="add-person"><i class="icon icon_lock gamma push-small--right"></i> .icon_lock</li>
    <li class="float--left push-small--right" data-name="add-person"><i class="icon icon_lost gamma push-small--right"></i> .icon_lost</li>
    <li class="float--left push-small--right" data-name="add-person"><i class="icon icon_mail-open gamma push-small--right"></i> .icon_mail-open</li>
    <li class="float--left push-small--right" data-name="add-person"><i class="icon icon_mail-sent gamma push-small--right"></i> .icon_mail-sent</li>
    <li class="float--left push-small--right" data-name="add-person"><i class="icon icon_mail gamma push-small--right"></i> .icon_mail</li>
    <li class="float--left push-small--right" data-name="add-person"><i class="icon icon_menu gamma push-small--right"></i> .icon_menu</li>
    <li class="float--left push-small--right" data-name="add-person"><i class="icon icon_message-phone gamma push-small--right"></i> .icon_message-phone</li>
    <li class="float--left push-small--right" data-name="add-person"><i class="icon icon_messages gamma push-small--right"></i> .icon_messages</li>
    <li class="float--left push-small--right" data-name="add-person"><i class="icon icon_minus-alt gamma push-small--right"></i> .icon_minus-alt</li>
    <li class="float--left push-small--right" data-name="add-person"><i class="icon icon_minus gamma push-small--right"></i> .icon_minus</li>
    <li class="float--left push-small--right" data-name="add-person"><i class="icon icon_notification-mute gamma push-small--right"></i> .icon_notification-mute</li>
    <li class="float--left push-small--right" data-name="add-person"><i class="icon icon_notification gamma push-small--right"></i> .icon_notification</li>
    <li class="float--left push-small--right" data-name="add-person"><i class="icon icon_phone gamma push-small--right"></i> .icon_phone</li>
    <li class="float--left push-small--right" data-name="add-person"><i class="icon icon_picture gamma push-small--right"></i> .icon_picture</li>
    <li class="float--left push-small--right" data-name="add-person"><i class="icon icon_pin gamma push-small--right"></i> .icon_pin</li>
    <li class="float--left push-small--right" data-name="add-person"><i class="icon icon_place gamma push-small--right"></i> .icon_place</li>
    <li class="float--left push-small--right" data-name="add-person"><i class="icon icon_plus-alt gamma push-small--right"></i> .icon_plus-alt</li>
    <li class="float--left push-small--right" data-name="add-person"><i class="icon icon_plus gamma push-small--right"></i> .icon_plus</li>
    <li class="float--left push-small--right" data-name="add-person"><i class="icon icon_power gamma push-small--right"></i> .icon_power</li>
    <li class="float--left push-small--right" data-name="add-person"><i class="icon icon_printer gamma push-small--right"></i> .icon_printer</li>
    <li class="float--left push-small--right" data-name="add-person"><i class="icon icon_profile gamma push-small--right"></i> .icon_profile</li>
    <li class="float--left push-small--right" data-name="add-person"><i class="icon icon_promo-alt gamma push-small--right"></i> .icon_promo-alt</li>
    <li class="float--left push-small--right" data-name="add-person"><i class="icon icon_promo gamma push-small--right"></i> .icon_promo</li>
    <li class="float--left push-small--right" data-name="add-person"><i class="icon icon_receipt gamma push-small--right"></i> .icon_receipt</li>
    <li class="float--left push-small--right" data-name="add-person"><i class="icon icon_reset gamma push-small--right"></i> .icon_reset</li>
    <li class="float--left push-small--right" data-name="add-person"><i class="icon icon_right-arrow gamma push-small--right"></i> .icon_right-arrow</li>
    <li class="float--left push-small--right" data-name="add-person"><i class="icon icon_route-dot gamma push-small--right"></i> .icon_route-dot</li>
    <li class="float--left push-small--right" data-name="add-person"><i class="icon icon_search gamma push-small--right"></i> .icon_search</li>
    <li class="float--left push-small--right" data-name="add-person"><i class="icon icon_settings gamma push-small--right"></i> .icon_settings</li>
    <li class="float--left push-small--right" data-name="add-person"><i class="icon icon_share-alt gamma push-small--right"></i> .icon_share-alt</li>
    <li class="float--left push-small--right" data-name="add-person"><i class="icon icon_share gamma push-small--right"></i> .icon_share</li>
    <li class="float--left push-small--right" data-name="add-person"><i class="icon icon_star gamma push-small--right"></i> .icon_star</li>
    <li class="float--left push-small--right" data-name="add-person"><i class="icon icon_steering-wheel gamma push-small--right"></i> .icon_steering-wheel</li>
    <li class="float--left push-small--right" data-name="add-person"><i class="icon icon_stopwatch gamma push-small--right"></i> .icon_stopwatch</li>
    <li class="float--left push-small--right" data-name="add-person"><i class="icon icon_support gamma push-small--right"></i> .icon_support</li>
    <li class="float--left push-small--right" data-name="add-person"><i class="icon icon_surge gamma push-small--right"></i> .icon_surge</li>
    <li class="float--left push-small--right" data-name="add-person"><i class="icon icon_thumbs-up gamma push-small--right"></i> .icon_thumbs-up</li>
    <li class="float--left push-small--right" data-name="add-person"><i class="icon icon_trash gamma push-small--right"></i> .icon_trash</li>
    <li class="float--left push-small--right" data-name="add-person"><i class="icon icon_trip-history gamma push-small--right"></i> .icon_trip-history</li>
    <li class="float--left push-small--right" data-name="add-person"><i class="icon icon_trips gamma push-small--right"></i> .icon_trips</li>
    <li class="float--left push-small--right" data-name="add-person"><i class="icon icon_trophy gamma push-small--right"></i> .icon_trophy</li>
    <li class="float--left push-small--right" data-name="add-person"><i class="icon icon_twitter gamma push-small--right"></i> .icon_twitter</li>
    <li class="float--left push-small--right" data-name="add-person"><i class="icon icon_uber-u gamma push-small--right"></i> .icon_uber-u</li>
    <li class="float--left push-small--right" data-name="add-person"><i class="icon icon_uber gamma push-small--right"></i> .icon_uber</li>
    <li class="float--left push-small--right" data-name="add-person"><i class="icon icon_unlock gamma push-small--right"></i> .icon_unlock</li>
    <li class="float--left push-small--right" data-name="add-person"><i class="icon icon_unstar gamma push-small--right"></i> .icon_unstar</li>
    <li class="float--left push-small--right" data-name="add-person"><i class="icon icon_up-arrow gamma push-small--right"></i> .icon_up-arrow</li>
    <li class="float--left push-small--right" data-name="add-person"><i class="icon icon_upload gamma push-small--right"></i> .icon_upload</li>
  </ul>
</div>
```
<p class="doc-code-header">CODE EXAMPLE</p><div class="language-markup">
  <pre class="language-markup"><code>&lt;i class="icon icon_car"&gt;&lt;/i&gt;</code></pre>
</div>

### Icon Font Sizes
--------------

You can utilize the [typography helper classes](/docs/base-css#headings-and-smallprint) in uber.base to create various icon sizes.

```html
<!-- no-show -->
<div class="layout text-align--middle">
  <div class="layout__item one-quarter">
    <p class="label">Small Icon</p>
    <div class="icons__item " data-name="cloud"><i class="icon milli icon_cloud"></i></div>
  </div>
  <div class="layout__item one-quarter">
    <p class="label">Medium Icon</p>
    <div class="icons__item " data-name="cloud"><i class="icon gamma push-small--right icon_cloud"></i></div>
  </div>
  <div class="layout__item one-quarter">
    <p class="label">Large Icon</p>
    <div class="icons__item " data-name="cloud"><i class="icon kilo icon_cloud"></i></div>
  </div>
  <div class="layout__item one-quarter">
    <p class="label">Extra Large Icon</p>
    <div class="icons__item " data-name="cloud"><i class="icon giga icon_cloud"></i></div>
  </div>
</div>
```
<p class="doc-code-header">CODE EXAMPLE</p><div class="language-markup">
  <pre class="language-markup"><code>&lt;i class="icon icon_car milli"&gt;&lt;/i&gt;
&lt;i class="icon icon_car "&gt;&lt;/i&gt;
&lt;i class="icon icon_car kilo"&gt;&lt;/i&gt;
&lt;i class="icon icon_car giga"&gt;&lt;/i&gt;</code></pre>
</div>

### Payment Icons
--------------
```html
<img src="//d1a3f4spazzrp4.cloudfront.net/superfine/assets/uber-payment-icons/cc-amex.svg" class="payment-icon">
<img src="//d1a3f4spazzrp4.cloudfront.net/superfine/assets/uber-payment-icons/cc-diners-club.svg" class="payment-icon">
<img src="//d1a3f4spazzrp4.cloudfront.net/superfine/assets/uber-payment-icons/cc-discover.svg" class="payment-icon">
<img src="//d1a3f4spazzrp4.cloudfront.net/superfine/assets/uber-payment-icons/cc-jcb.svg" class="payment-icon">
<img src="//d1a3f4spazzrp4.cloudfront.net/superfine/assets/uber-payment-icons/cc-mastercard.svg" class="payment-icon">
<img src="//d1a3f4spazzrp4.cloudfront.net/superfine/assets/uber-payment-icons/cc-uber.svg" class="payment-icon">
<img src="//d1a3f4spazzrp4.cloudfront.net/superfine/assets/uber-payment-icons/cc-visa.svg" class="payment-icon">
<img src="//d1a3f4spazzrp4.cloudfront.net/superfine/assets/uber-payment-icons/cc.svg" class="payment-icon">
<img src="//d1a3f4spazzrp4.cloudfront.net/superfine/assets/uber-payment-icons/payment-airtel.svg" class="payment-icon">
<img src="//d1a3f4spazzrp4.cloudfront.net/superfine/assets/uber-payment-icons/payment-alipay.svg" class="payment-icon">
<img src="//d1a3f4spazzrp4.cloudfront.net/superfine/assets/uber-payment-icons/payment-baidu.svg" class="payment-icon">
<img src="//d1a3f4spazzrp4.cloudfront.net/superfine/assets/uber-payment-icons/payment-google-wallet.svg" class="payment-icon">
<img src="//d1a3f4spazzrp4.cloudfront.net/superfine/assets/uber-payment-icons/payment-india-cash.svg" class="payment-icon">
<img src="//d1a3f4spazzrp4.cloudfront.net/superfine/assets/uber-payment-icons/payment-paypal.svg" class="payment-icon">
<img src="//d1a3f4spazzrp4.cloudfront.net/superfine/assets/uber-payment-icons/payment-paytm.svg" class="payment-icon">
<img src="//d1a3f4spazzrp4.cloudfront.net/superfine/assets/uber-payment-icons/payment-unionpay.svg" class="payment-icon">
```

*/
.payment-icon {
  height: 16px; }

/*------------------------------------*\
    #LISTS
\*------------------------------------*/
/* 
 * This contains the various list configurations
 */
/*doc
## Lists 
--------

### Basic Lists

```html
<div class="layout">
  <div class="layout__item one-quarter">
    <ul>
      <li>List Item</li>
      <li>List Item</li>
      <li>List Item</li>
    </ul>
  </div>
  <div class="layout__item one-quarter">
    <ul class="list--unstyled">
      <li>List Item</li>
      <li>List Item</li>
      <li>List Item</li>
    </ul>
  </div>
  <div class="layout__item one-quarter">
    <ol>
      <li>List Item</li>
      <li>List Item</li>
      <li>List Item</li>
    </ol>
  </div>
  <div class="layout__item one-quarter">
    <ol class="list--unstyled">
      <li>List Item</li>
      <li>List Item</li>
      <li>List Item</li>
    </ol>
  </div>
</div>
```

### Horizontal Lists

Note: Internet Explorer and Opera won’t display list item numbers or bullets when list items are floated, given an explicit width, or set to display inline.

```html
<ul class="list--horizontal">
  <li>List Item</li>
  <li>List Item</li>
  <li>List Item</li>
</ul>
```

### Block Lists

```html
<ul class="block-list">
  <li>List Item</li>
  <li>List Item</li>
  <li>List Item</li>
  <li><a href="#" class=block-list__link>List Item</a></li>
</ul>
```
*/
ul, ol {
  margin-bottom: 24px;
  margin-left: 36px; }

li {
  margin-bottom: 12px; }

.list--unstyled, .btn-group, .footer__list, .side-nav, .accordion, .accordion__submenu, .accordion__submenu__submenu, .dashboard-nav, .dashboard-nav__submenu__item, .dashboard-subnav, .tabs, .tabs--dark {
  margin-left: 0;
  list-style: none; }

.list--horizontal li, .top-bar li, .secondary-nav li, .breadcrumb li, .tabs li, .tabs--dark li {
  display: inline-block; }
  @media only screen and (max-width: 575px) {
    .list--horizontal li, .top-bar li, .secondary-nav li, .breadcrumb li, .tabs li, .tabs--dark li {
      display: block;
      margin: 0; } }

.block-list li {
  margin-bottom: 0; }

/*------------------------------------*\
    #NAVIGATION
\*------------------------------------*/
/*doc
## Navigation
-------------

### Top Bar Navigation
You can use this top bar navigation for your web projects. Add your own JS to trigger the mobile menu and switch out the hamburger icon. You can view a prototype demo of the desired behavior [here](https://people.uberinternal.com/~jackien/uber-web-styles/components/component-nav-tools.html).

```html
<h6>Top Bar - Left Aligned</h6>
<nav class="top-bar">
  <a class="top-bar__logo float--left">
    <i class="icon icon_delete visible--portable push-small--right"></i><i class="icon icon_uber-u push-small--right"></i>
    <span class="top-bar__title text--uppercase">Title</span>
    <span class="separator hidden--portable push--left">|</span>
  </a>
  <ul class="top-bar__nav top-bar__nav--left">
    <li class="top-bar__item active"><a href="#" class="text--uppercase">Item 1</a></li>
    <li class="top-bar__item"><a href="#" class="text--uppercase">Item 2</a></li>
    <li class="top-bar__item"><a href="#" class="text--uppercase">Item 3</a></li>
  </ul>
</nav>
<h6 class="push--top">Top Bar - Right Aligned</h6>
<nav class="top-bar">
  <a class="top-bar__logo float--left">
    <i class="icon icon_delete visible--portable push-small--right"></i><i class="icon icon_uber-u push-small--right"></i>
    <span class="top-bar__title">Title</span>
  </a>
  <ul class="top-bar__nav top-bar__nav--right">
    <li class="top-bar__item active"><a href="#" class="text--uppercase">Item</a></li>
    <li class="top-bar__item"><a href="#" class="text--uppercase">Item 1</a></li>
    <li class="top-bar__item"><a href="#" class="text--uppercase">Item 2</a></li>
    <li class="top-bar__item"><a href="#" class="text--uppercase">Item 3</a></li>
  </ul>
</nav>
<h6 class="push--top">Top Bar - Left and Right Aligned</h6>
<nav class="top-bar">
  <a class="top-bar__logo float--left">
    <i class="icon icon_delete visible--portable push-small--right"></i><i class="icon icon_uber-u push-small--right"></i>
    <span class="top-bar__title">Title</span>
    <span class="separator hidden--portable push--left">|</span>
  </a>
  <ul class="top-bar__nav top-bar__nav--left">
    <li class="top-bar__item active"><a href="#" class="text--uppercase">Item 1</a></li>
    <li class="top-bar__item"><a href="#" class="text--uppercase">Item 2</a></li>
    <li class="top-bar__item"><a href="#" class="text--uppercase">Item 3</a></li>
  </ul>
  <ul class="top-bar__nav top-bar__nav--right">
    <li class="top-bar__item"><a href="#" class="text--uppercase">Item 4</a></li>
    <li class="top-bar__item"><a href="#" class="text--uppercase">Item 5</a></li>
    <li class="top-bar__item"><a href="#"><i class="icon gamma icon_profile"></i></a></li>
    <li class="top-bar__item"><a href="#"><i class="icon gamma icon_search"></i></a></li>
  </ul>
</nav>

```
*/
.top-bar {
  background: #09091A;
  height: 68px;
  width: 100%;
  position: relative; }
  @media only screen and (max-width: 768px) {
    .top-bar {
      height: 60px; } }

.top-bar__logo {
  color: #E6E6E9;
  text-transform: uppercase;
  font-weight: 500;
  padding: 20px 24px; }
  .top-bar__logo .icon_uber-u {
    padding: 2px 2px;
    border: 1px solid #C0C0C8;
    border-radius: 3px;
    color: #D9D9DE;
    font-size: 22px;
    background: linear-gradient(-45deg, #09091A 0%, #3A3A48 100%); }
  .top-bar__logo .icon_menu, .top-bar__logo .icon_delete {
    float: left;
    margin-top: 5px;
    font-size: 16px; }
  @media only screen and (max-width: 768px) {
    .top-bar__logo {
      padding: 18px 24px 16px; } }

.top-bar__title {
  font-size: 14px;
  display: inline-block;
  position: relative;
  top: 1px;
  text-transform: uppercase; }

.top-bar__nav {
  display: inline-block;
  padding-top: 22px;
  margin-bottom: 0;
  margin-left: 0; }
  @media only screen and (max-width: 768px) {
    .top-bar__nav {
      width: 100%;
      padding: 0; } }

.top-bar__nav--left {
  float: left; }
  .top-bar__nav--left .top-bar__item {
    margin-right: 24px; }
    @media only screen and (max-width: 768px) {
      .top-bar__nav--left .top-bar__item {
        margin-right: 0; } }

.top-bar__nav--right {
  float: right; }
  .top-bar__nav--right .top-bar__item {
    margin-left: 24px; }
    @media only screen and (max-width: 768px) {
      .top-bar__nav--right .top-bar__item {
        margin-left: 0; } }
    .top-bar__nav--right .top-bar__item:last-child {
      margin-right: 24px; }
      @media only screen and (max-width: 768px) {
        .top-bar__nav--right .top-bar__item:last-child {
          margin-right: 0; } }

.separator {
  color: #3A3A48; }

.top-bar__item.active a {
  color: #1FBAD6; }
  .top-bar__item.active a:hover {
    color: #1EACC7; }
.top-bar__item a {
  color: #9D9DA3;
  text-transform: uppercase; }
  .top-bar__item a:hover {
    color: #F2F2F4; }
  @media only screen and (max-width: 768px) {
    .top-bar__item a {
      display: block;
      padding: 12px 24px;
      width: 100%; } }
@media only screen and (max-width: 768px) {
  .top-bar__item {
    display: block;
    background: #09091A;
    margin-right: 0;
    margin-bottom: 0;
    width: 100%; }
    .top-bar__item.active {
      background: #222231; } }

/*doc
### Secondary Navigation
Use this secondary navigation pattern in conjunction with the top bar, or on its own. Add your own JS to get your desired expand/collapse behavior on mobile. You can view an example prototype demo [here](https://people.uberinternal.com/~jackien/uber-web-styles/components/component-nav-tools.html).

```html
<h6 class="push-small--bottom">Default</h6>
<ul class="secondary-nav">
  <li class="secondary-nav__item active"><a href="#">Menu Item 1</a></li>
  <li class="secondary-nav__item"><a href="#">Menu Item 2</a></li>
  <li class="secondary-nav__item"><a href="#">Menu Item 3</a></li>
</ul>

<h6 class="push--top push-small--bottom">Dark Secondary Nav</h6>
<ul class="secondary-nav secondary-nav--dark">
  <li class="secondary-nav__item active"><a href="#">Menu Item 1</a></li>
  <li class="secondary-nav__item"><a href="#">Menu Item 2</a></li>
  <li class="secondary-nav__item"><a href="#">Menu Item 3</a></li>
</ul>

<h6 class="push--top push-small--bottom">With Top Bar</h6>
<nav class="top-bar">
  <a class="top-bar__logo float--left">
    <i class="icon icon_delete visible--portable push-small--right"></i><i class="icon icon_uber-u push-small--right"></i>
    <span class="top-bar__title">Title</span>
    <span class="separator hidden--portable push--left">|</span>
  </a>
  <ul class="top-bar__nav top-bar__nav--left">
    <li class="top-bar__item active"><a href="#" class="text--uppercase">Item 1</a></li>
    <li class="top-bar__item"><a href="#" class="text--uppercase">Item 2</a></li>
    <li class="top-bar__item"><a href="#" class="text--uppercase">Item 3</a></li>
  </ul>
</nav>
<ul class="secondary-nav">
  <li class="secondary-nav__item active"><a href="#">Menu Item 1</a></li>
  <li class="secondary-nav__item"><a href="#">Menu Item 2</a></li>
  <li class="secondary-nav__item"><a href="#">Menu Item 3</a></li>
</ul>

<nav class="top-bar">
  <a class="top-bar__logo float--left">
    <i class="icon icon_delete visible--portable push-small--right"></i><i class="icon icon_uber-u push-small--right"></i>
    <span class="top-bar__title">Title</span>
    <span class="separator hidden--portable push--left">|</span>
  </a>
  <ul class="top-bar__nav top-bar__nav--left">
    <li class="top-bar__item active"><a href="#" class="text--uppercase">Item 1</a></li>
    <li class="top-bar__item"><a href="#" class="text--uppercase">Item 2</a></li>
    <li class="top-bar__item"><a href="#" class="text--uppercase">Item 3</a></li>
  </ul>
</nav>
<ul class="secondary-nav secondary-nav--dark">
  <li class="secondary-nav__item active"><a href="#">Menu Item 1</a></li>
  <li class="secondary-nav__item"><a href="#">Menu Item 2</a></li>
  <li class="secondary-nav__item"><a href="#">Menu Item 3</a></li>
</ul>
```
*/
.secondary-nav {
  border-bottom: solid 1px #E6E6E9; }

.secondary-nav__item {
  float: left;
  margin-right: 24px;
  margin-bottom: 0;
  padding: 12px 0; }
  @media only screen and (max-width: 768px) {
    .secondary-nav__item {
      padding-left: 24px;
      width: 100%;
      border-top: solid 1px #E6E6E9; } }
  .secondary-nav__item a {
    color: #9D9DA3; }
    .secondary-nav__item a:hover {
      color: #3A3A48; }
  .secondary-nav__item.active {
    border-bottom: solid 2px #1FBAD6; }
    @media only screen and (max-width: 768px) {
      .secondary-nav__item.active {
        border-bottom: 0;
        border-left: solid 2px #1FBAD6; } }
    .secondary-nav__item.active a {
      color: #3A3A48; }
  .secondary-nav__item:first-child {
    margin-left: 24px; }
    @media only screen and (max-width: 768px) {
      .secondary-nav__item:first-child {
        margin-left: 0; } }

.secondary-nav--dark {
  background: #09091A;
  border-top: solid 1px #3A3A48; }
  .secondary-nav--dark .secondary-nav__item a:hover {
    color: #D9D9DE; }
  @media only screen and (max-width: 768px) {
    .secondary-nav--dark .secondary-nav__item {
      border-top: solid 1px #3A3A48; } }
  .secondary-nav--dark .active a {
    color: #F2F2F4; }

/*doc
### Marketing Header

```html
<div class="doc-bg-marketing">
  <div class="header soft-gutter--ends clearfix">
    <a class="header__item text--uppercase float--left"><i class="icon delta icon_menu push-tiny--right"></i> <span class="hidden--portable">Menu</span></a>
    <a class="header__item text--uppercase float--right"><i class="icon delta icon_profile"></i> <span class="hidden--portable">Phillip</span> <i class="icon icon_down-arrow"></i></a>
    <a class="header__item text--uppercase header__logo text--center"><span class="icon icon_uber"></span></a>
  </div>
</div>
```

### Marketing Footer

```html
<footer class="footer">
  <ul class="footer__list float--left">
    <li class="footer__item"><a href="#" class="footer__item__link text--uppercase">Uber.com</a></li>
    <li class="footer__item hidden--portable"><a href="#" class="footer__item__link text--uppercase">About Us</a></li>
    <li class="footer__item hidden--portable"><a href="#" class="footer__item__link text--uppercase">Cities</a></li>
    <li class="footer__item hidden--portable"><a href="#" class="footer__item__link text--uppercase">Drivers</a></li>
    <li class="footer__item hidden--portable"><a href="#" class="footer__item__link text--uppercase">Help Center</a></li>
    <li class="footer__item hidden--portable"><a href="#" class="footer__item__link text--uppercase">Careers</a></li>
  </ul>
  <ul class="footer__list footer__list--social float--right">
    <li class="footer__item"><button class="btn btn--reverse-outline btn--social hard"><i class="icon delta icon_facebook"></i> </button></li>
    <li class="footer__item"><button class="btn btn--reverse-outline btn--social hard"><i class="icon delta icon_twitter"></i> </button></li>
    <li class="footer__item"><button class="btn btn--reverse-outline btn--social hard"><i class="icon delta icon_linkedin"></i> </button></li>
    <li class="footer__item"><button class="btn btn--reverse-outline btn--social hard"><i class="icon delta icon_instagram"></i> </button></li>
  </ul>
</footer>
```
*/
.doc-bg-marketing {
  background: url("//d1a3f4spazzrp4.cloudfront.net/superfine/assets/fst-bg-img-07.jpg");
  background-size: cover;
  height: 150px; }

.header {
  padding-left: 36px;
  padding-right: 36px; }
  @media only screen and (max-width: 575px) {
    .header {
      background: #09091A;
      padding-left: 12px;
      padding-right: 12px;
      height: 60px; } }

.header__item {
  color: #E6E6E9; }
  .header__item:hover {
    color: #FFFFFF; }
  .header__item .icon {
    margin-bottom: 2px; }
  .header__item .icon_profile {
    margin-right: 6px; }
    @media only screen and (max-width: 575px) {
      .header__item .icon_profile {
        margin-right: 0; } }

.header__logo {
  display: block;
  width: 150px;
  margin: 0 auto; }
  .header__logo .icon_uber {
    font-size: 64px;
    margin-top: -22px; }
    @media only screen and (max-width: 575px) {
      .header__logo .icon_uber {
        font-size: 50px;
        margin-top: -14px; } }

.footer {
  background: #09091A;
  height: 68px;
  width: 100%;
  position: relative; }

.footer__list {
  margin-top: 22px;
  margin-bottom: 0; }
  .footer__list.float--left {
    margin-left: 24px; }
    .footer__list.float--left .footer__item {
      margin-right: 12px; }
  .footer__list.float--right {
    margin-right: 24px; }
    .footer__list.float--right .footer__item {
      margin-left: 12px; }
  .footer__list.footer__list--social .footer__item {
    margin-left: 6px; }

.footer__list--social {
  margin-top: 14px; }
  .footer__list--social .footer__item:before {
    content: "";
    margin-right: 0; }

.footer__item {
  float: left; }
  .footer__item .footer__item__link {
    color: #C0C0C8; }
    .footer__item .footer__item__link:hover {
      color: #FFFFFF; }
  .footer__item:first-child::before {
    content: "";
    margin-right: 0; }
  .footer__item:before {
    content: "\2022";
    margin-right: 12px;
    font-size: 10px;
    color: #6B6B76;
    position: relative;
    bottom: 2px; }
  @media only screen and (max-width: 768px) {
    .footer__item {
      display: inline; } }

/*doc
### Vertical

```html
<div class="layout">
  <div class="layout__item one-quarter palm-one-whole">
    <ul class="side-nav">
      <li class="side-nav__item active"><a class="side-nav__link" href="#">Item</a></li>
      <li class="side-nav__item"><a class="side-nav__link" href="#">Item</a></li>
      <li class="side-nav__item"><a class="side-nav__link" href="#">Item</a></li>
    </ul>
  </div>

  <div class="layout__item one-quarter palm-one-whole">
    <ul class="side-nav">
      <li class="push-small--left"><h6>List Header</h6></li>
      <li class="side-nav__item active"><a class="side-nav__link" href="#">Item</a></li>
      <li class="side-nav__item"><a class="side-nav__link" href="#">Item</a></li>
      <li class="side-nav__item"><a class="side-nav__link" href="#">Item</a></li>
      <li class="push-large--top push-small--left"><h6>List Header</h6></li>
      <li class="side-nav__item"><a class="side-nav__link" href="#">Item</a></li>
      <li class="side-nav__item"><a class="side-nav__link" href="#">Item</a></li>
    </ul> 
  </div>

  <div class="layout__item one-quarter palm-one-whole">
    <ul class="side-nav side-nav--progress">
      <li class="push-small--left"><h6>Basic Information</h6></li>
      <li class="side-nav__item side-nav__item--complete first"><a class="side-nav__link" href="#">Personal</a></li>
      <li class="side-nav__item side-nav__item--complete"><a class="side-nav__link" href="#">Background</a></li>
      <li class="side-nav__item side-nav__item--complete side-nav__item--active"><a class="side-nav__link" href="#">Company</a></li>
      <li class="side-nav__item side-nav__item--incomplete"><a class="side-nav__link" href="#">Contact</a></li>
      <li class="push-large--top push-small--left"><h6>Car Information</h6></li>
      <li class="side-nav__item side-nav__item--incomplete first"><a class="side-nav__link" href="#">Make/Model</a></li>
      <li class="side-nav__item side-nav__item--incomplete"><a class="side-nav__link" href="#">Driving History</a></li>
      <li class="side-nav__item side-nav__item--incomplete"><a class="side-nav__link" href="#">Upload Documents</a></li>
    </ul> 
  </div>
</div>
```
*/
.side-nav__item {
  border-left: 2px solid #FFFFFF;
  margin-bottom: 18px; }
  .side-nav__item.active {
    border-left: 2px solid #1FBAD6; }

.side-nav__link {
  text-decoration: none;
  color: #9D9DA3;
  margin: 6px;
  padding-left: 5px;
  line-height: 1.2;
  font-size: 13px; }
  .side-nav__link:hover, .active .side-nav__link {
    color: #09091A; }

.side-nav--progress .side-nav__item {
  position: relative; }

.side-nav__item--complete:before, .side-nav__item--incomplete:before {
  content: "\2022";
  position: absolute;
  top: -17px;
  left: -6px;
  font-size: 27px; }

.side-nav__item--complete:after, .side-nav__item--incomplete:after {
  content: "";
  width: 2px;
  height: 30px;
  position: absolute;
  top: -22px;
  left: -2px; }

.side-nav__item--complete:before {
  color: #1FBAD6; }
.side-nav__item--complete:after {
  background: #1FBAD6; }
.side-nav__item--complete.first:after {
  background: transparent; }

.side-nav__item--active .side-nav__link {
  color: #09091A; }

.side-nav__item--incomplete:before {
  color: #E6E6E9; }
.side-nav__item--incomplete:after {
  background: #E6E6E9; }
.side-nav__item--incomplete.first:after {
  background: transparent; }
.side-nav__item--incomplete .side-nav__link {
  color: #CDCDD3; }

/*doc
#### Accordion Menu

```html
<ul class="accordion">
  <li class="accordion__item active">
    <a href="#" class="accordion__item__link">Home</a>
    <i class="icon icon_up-arrow"></i>
    <ul class="accordion__submenu">
      <li class="accordion__submenu__item"><a href="#" class="accordion__submenu__item__link"> Sub Item 1</a></li>
      <li class="accordion__submenu__item active">
        <a href="#" class="accordion__submenu__item__link"> Sub Item 2</a>
        <i class="icon icon_up-arrow"></i>
        <ul class="accordion__submenu__submenu">
          <li class="accordion__submenu__item"><a href="#" class="accordion__submenu__item__link"> Sub Sub Item 1</a></li>
          <li class="accordion__submenu__item"><a href="#" class="accordion__submenu__item__link"> Sub Sub Item 2</a></li>
        </ul>
      </li>
      <li class="accordion__submenu__item"><a href="#" class="accordion__submenu__item__link"> Sub Item 3</a></li>
    </ul>
  </li>
  <li class="accordion__item">
    <a href="#" class="accordion__item__link">Secondary Page</a>
    <i class="icon icon_down-arrow"></i>
  </li>
  <li class="accordion__item">
    <a href="#" class="accordion__item__link">Tertiary Page</a>
    <i class="icon icon_down-arrow"></i>
  </li>
</ul>
```
*/
.accordion {
  border-bottom: solid 1px #E6E6E9; }

.accordion__item {
  cursor: pointer;
  color: #1FBAD6;
  margin-bottom: 0;
  border-top: solid 1px #E6E6E9;
  border-left: solid 1px #E6E6E9;
  border-right: solid 1px #E6E6E9;
  position: relative; }
  .accordion__item.active .accordion__item__link {
    border-left: solid 3px #1FBAD6;
    border-bottom: solid 1px #E6E6E9; }
  .accordion__item .icon {
    position: absolute;
    top: 18px;
    right: 20px; }

.accordion__item__link {
  cursor: pointer;
  color: #1FBAD6;
  padding: 12px 24px;
  width: 100%;
  display: block;
  position: relative; }
  .accordion__item__link:hover {
    background-color: #F9F9F9; }

.accordion__submenu, .accordion__submenu__submenu {
  cursor: pointer;
  margin-bottom: 0;
  position: relative;
  background: #F9F9F9; }

.accordion__submenu__submenu .accordion__submenu__item__link {
  padding: 12px 24px 12px 96px; }
.accordion__submenu__submenu .accordion__submenu__item:last-child > .accordion__submenu__item__link {
  border-bottom: solid 1px #E6E6E9; }

.accordion__submenu__item {
  cursor: pointer;
  color: #1FBAD6;
  margin-bottom: 0;
  position: relative; }
  .accordion__submenu__item:last-child > .accordion__submenu__item__link {
    border-bottom: none; }
  .accordion__submenu__item.active > .accordion__submenu__item__link {
    color: #3A3A48; }

.accordion__submenu__item__link {
  cursor: pointer;
  width: 100%;
  display: block;
  padding: 12px 24px 12px 48px;
  border-bottom: solid 1px #E6E6E9;
  color: #9D9DA3; }
  .accordion__submenu__item__link:hover {
    background-color: #F2F2F4;
    color: #3A3A48; }

/*doc
### Horizontal

```html
<p class="label push--bottom">Breadcrumb</p>
<ul class="breadcrumb">
  <li class="breadcrumb__item"><a href="#">Home</a></li>
  <li class="breadcrumb__item"><a href="#">Secondary Page</a></li>
  <li class="breadcrumb__item"><a href="#">Tertiary Page</a></li>
  <li class="breadcrumb__item">Current Page</li>
</ul>

<p class="label">Basic Progress Navigation</p>
<ul class="progress-nav">
  <li class="progress-nav__item progress-nav__item--complete"></li>
  <li class="progress-nav__item progress-nav__item--complete"></li>
  <li class="progress-nav__item progress-nav__item--complete progress-nav__item--active"></li>
  <li class="progress-nav__item"></li>
  <li class="progress-nav__item"></li>
</ul>
```
*/
.breadcrumb {
  font-size: 10px; }

.breadcrumb__item a:hover {
  color: #1EACC7; }
.breadcrumb__item:after {
  content: "/";
  color: #9D9DA3;
  margin: 0 6px; }
.breadcrumb__item:last-child {
  color: #9D9DA3; }
  .breadcrumb__item:last-child:after {
    content: ""; }

.progress-nav {
  font-size: 27px;
  margin-left: 25px; }

.progress-nav__item:after, .progress-nav__item--complete:after {
  content: "";
  width: 30px;
  height: 2px;
  position: absolute;
  top: 23px;
  left: -15px; }

.progress-nav__item {
  float: left;
  width: 36px;
  color: #E6E6E9;
  position: relative; }
  .progress-nav__item:after {
    background: #E6E6E9; }
  .progress-nav__item:last-child:after {
    background: transparent; }

.progress-nav__item--complete {
  color: #1FBAD6; }
  .progress-nav__item--complete:after {
    background: #1FBAD6; }

.progress-nav__item--active:after {
  background: #E6E6E9; }

hr, .rule {
  border: none;
  border-top: 1px solid #E6E6E9;
  margin-bottom: 24px; }

/*------------------------------------*\
    #PANELS
\*------------------------------------*/
/**
 * This contains various styles for panels
 */
/*doc
## Panels
----------

### Default Panels
Sometimes you need to put your content in a box. Our flexible styles of panels give you some options to do so easily.


```html
<div class="layout">
  <div class="layout__item one-half palm-one-whole push--bottom">
    <div class="panel">
      <div class="panel__content soft">
        This is a default panel.
      </div>
    </div>
  </div>
  <div class="layout__item one-half palm-one-whole push--bottom">
    <div class="panel square panel--secondary">
      <div class="panel__content soft">
        This is a <span class="code">--secondary</span> gray panel. It's also demonstrating the <span class="code">.square</span> option if rounded corners ain't your thing.
      </div>
    </div>
  </div>
</div>
```

### Panel Styles
```html
<div class="layout">
  <div class="layout__item one-third palm-one-whole push--bottom push--top">
    <div class="panel panel--shadow">
      <div class="panel__content soft">
        Add <span class="code">.panel--shadow</span> if you need some depth.
      </div>
    </div>
  </div>
  <div class="layout__item one-third palm-one-whole push--bottom push--top">
    <div class="panel panel--dark">
      <div class="panel__content soft">
        Add <span class="code">.panel--dark</span> for a dark panel.
      </div>
    </div>
  </div>
  <div class="layout__item one-third palm-one-whole push--bottom push--top">
    <div class="panel panel--hoverable">
      <div class="panel__content soft">
        Add <span class="code">.panel--hoverable</span> for a hand cursor and shadow on hover.
      </div>
    </div>
  </div>
</div>
```
*/
.panel {
  background-color: #FFFFFF;
  border: solid 1px #CDCDD3;
  border-radius: 3px; }

.panel__heading {
  background-color: #F2F2F4; }

.panel--secondary {
  background-color: #F9F9F9; }
  .panel--secondary .panel__heading {
    background-color: #E6E6E9; }

.panel--shadow {
  box-shadow: 0 2px 0 #E6E6E9; }

.panel--dark {
  background-color: #09091A;
  color: #F2F2F4;
  border: solid #09091A; }

.panel--hoverable {
  cursor: pointer;
  bottom: 0px; }
  .panel--hoverable:hover {
    box-shadow: 0 2px 0 #E6E6E9;
    bottom: 2px;
    position: relative; }

/*doc
### Panel Headings
If you need to put a heading in your panel, it's easy too. Here are some additional showcases of their variability.


```html
<div class="layout">
  <div class="layout__item one-half push--bottom palm-one-whole">
    <div class="panel">
      <div class="panel__heading soft--sides soft-small--ends">
        <h5 class="flush--bottom hard--top">Heading</h5>
      </div>
      <div class="panel__content soft">
        This panel is slightly less basic and has a heading on it. Feel free to use any heading types within <span class="code">.panel__heading</span>, although <span class="code">&lt;h1&gt;</span> might be a little screamy.
      </div>
    </div>
  </div>
  <div class="layout__item one-half palm-one-whole">
    <div class="panel panel--secondary">
      <div class="panel__heading soft--sides soft-small--ends">
        <h4 class="flush--bottom hard--top">Heading</h4>
      </div>
      <div class="panel__content soft--sides soft--top">
        <p class="small push--bottom">Sometimes you need a gray panel with a heading. Check me out getting crazy with the layout.</p>
        <p><button class="btn btn--tiny btn--tertiary push-tiny--right">Button</button> <button class="btn btn--tiny">Button</button></p>
      </div>
    </div>
  </div>
</div>
```
*/
@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(360deg); } }
@-ms-keyframes spin {
  0% {
    -ms-transform: rotate(0deg); }
  100% {
    -ms-transform: rotate(360deg); } }
@keyframes spin {
  0% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(360deg); } }
/*------------------------------------*\
    #PROGRESS INDICATORS
\*------------------------------------*/
/**
 * This contains various progress indicator types and sizes
 */
/*doc
## Progress Indicators
----------
Progress indicators are intended to provide visual indication that progress is being made when loading content.

### Preloader

Preloaders, or spinners, are used to show progress when the progress is indeterminate. The preloader can be placed inline on the background of the page or within a container depending on the page design.

#### Preloader Sizes

```html
<p class="label">Default</p>
<span class="preloader push-small--bottom"></span>

<p class="label">Large</p>
<span class="preloader preloader--large"></span>
```

#### Preloader Options

```html
<p class="label">Default</p>
<span class="preloader preloader--large push-small--bottom"></span>

<p class="label">Gray</p>
<span class="preloader preloader--large preloader--gray push-small--bottom"></span>

<p class="label">Negative</p>
<div style="background: #f2f2f4" class="soft-small">
  <span class="preloader preloader--large preloader--negative"></span>
</div>
```

### Usage Examples

#### Preloader in Buttons

```html
<div class="layout">
  <div class="layout__item one-half">
    <button class="btn btn--full">
      <span class="preloader preloader--negative preloader--large center-block"></span>
    </button>
  </div>
  <div class="layout__item one-half">
    <button class="btn btn--inactive btn--full">
      <span class="preloader preloader--gray preloader--large center-block"></span>
    </button>
  </div>
</div>
```

#### Contained Preloader

```html
<div class="layout">
  <div class="layout__item">
    <div class="preloader-container panel panel--shadow">
      <span class="preloader center-block"></span>
    </div>
  </div>
  <div class="layout__item">
    <div class="preloader-container panel panel--dark">
      <span class="preloader center-block"></span>
    </div>
  </div>
</div>
```
*/
.preloader {
  -webkit-animation-name: spin;
  animation-name: spin;
  -webkit-animation-duration: 0.5s;
  animation-duration: 0.5s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-delay: 0s;
  animation-animation-delay: 0s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-direction: normal;
  animation-direction: normal;
  -webkit-animation-fill-mode: none;
  animation-fill-mode: none;
  -webkit-animation-play-state: running;
  animation-play-state: running;
  border: 3px solid transparent;
  border-top: 3px solid #1FBAD6;
  border-left: 3px solid #1FBAD6;
  border-radius: 50px;
  opacity: 1;
  width: 24px;
  height: 24px;
  cursor: wait;
  display: block; }

.preloader--large {
  border-width: 4px;
  width: 40px;
  height: 40px; }

.preloader--gray {
  border-top-color: #CDCDD3;
  border-left-color: #CDCDD3; }

.preloader--negative {
  border-top-color: #FFFFFF;
  border-left-color: #FFFFFF; }

.preloader-container {
  padding: 24px;
  display: inline-block; }

/*doc
#### Support for IE8 and IE9

If you need support for IE8 and IE9 we can provide .gifs and/or .pngs of the spinners (retina enabled).

please +1 [this thread](https://code.uberinternal.com/T39478) with a comment if you need this feature for your project.


### Progress Bars

Progress bars are used when the progress of a task is determinate and it is useful for the user to know how much progress has been completed. Depending on the type of task and design, various colors and size options are available.

#### Colors
```html
<p class="label">Default</p>
<div class="progress-bar push-small--bottom">
  <span class="progress-bar__bar" style="width: 25%"></span>
</div>

<p class="label">Negative</p>
<div class="progress-bar progress-bar--negative push-small--bottom">
  <span class="progress-bar__bar" style="width: 50%"></span>
</div>

<p class="label">Positive</p>
<div class="progress-bar progress-bar--positive push-small--bottom">
  <span class="progress-bar__bar" style="width: 75%"></span>
</div>
```
*/
.progress-bar {
  position: relative;
  background: #E6E6E9;
  border-radius: 25px;
  overflow: hidden; }
  .progress-bar > .progress-bar__bar {
    background-color: #1FBAD6;
    border-radius: 25px;
    height: 12px;
    display: block; }

.progress-bar--negative > .progress-bar__bar {
  background-color: #F32F00; }

.progress-bar--positive > .progress-bar__bar {
  background-color: #27AA0B; }

/*doc

#### Sizes
```html
<p class="label">Small</p>
<div class="progress-bar progress-bar--small push-small--bottom">
  <span class="progress-bar__bar" style="width: 25%"></span>
</div>

<p class="label">Default</p>
<div class="progress-bar push-small--bottom">
  <span class="progress-bar__bar" style="width: 50%"></span>
</div>

<p class="label">Large</p>
<div class="progress-bar progress-bar--large push-small--bottom">
  <span class="progress-bar__bar" style="width: 75%"></span>
</div>
```
*/
.progress-bar--small > .progress-bar__bar {
  height: 6px; }

.progress-bar--large > .progress-bar__bar {
  height: 20px; }

/*doc

#### Full Width
Use a full width progress bar when you want the loading indicator to pertain to the whole page. This should be fixed underneath the header and run the full width of the page.
```html
<div class="progress-bar progress-bar--small square">
  <span class="progress-bar__bar square" style="width: 25%"></span>
</div>
```
*/
/*------------------------------------*\
    #RANGE SLIDER
\*------------------------------------*/
/**
 * This contains styles for range sliders
 */
.range-slider {
  background-color: #E6E6E9;
  height: 8px;
  border-radius: 4px; }

.range-slider__bar {
  background-color: #1FBAD6;
  border-radius: 4px;
  height: 8px; }

.range-slider__handle {
  border: 1px solid #B2B2BA;
  background-color: #FFFFFF;
  border-radius: 100%;
  width: 22px;
  height: 22px;
  top: -7px; }

.range-slider__handle--active {
  border: 1px solid #9D9DA3; }

.range-slider__handle__dot {
  width: 40%;
  height: 40%;
  background-color: #1FBAD6;
  left: 30%;
  top: 30%;
  border-radius: 100%; }

.range-slider__input:focus {
  box-shadow: 0 0 0; }

/*doc
## Tables 
---------
Below are various table options for your projects. If you don't want the default hover state on the rows, simply add `.table--no-hover` to the table. 

### Default Table (Horizontal Bordered)

```html
<table class="table--bordered table--bordered-horizontal">
  <tbody>
    <tr>
      <td>
        <a href="">Link Item</a>
      </td>
      <td>Item</td>
      <td>Item</td>
      <td>Item</td>
      <td class="numerical">0.00</td>
    </tr>
    <tr>
      <td>
        <a href="">Link Item</a>
      </td>
      <td>Item</td>
      <td>Item</td>
      <td>Item</td>
      <td class="numerical">0.15</td>
    </tr>
    <tr>
      <td>
        <a href="">Link Item</a>
      </td>
      <td>Item</td>
      <td>Item</td>
      <td>Item</td>
      <td class="numerical">0.33</td>
    </tr>
  </tbody>
</table>
```

### Data Table (Bordered)

```html
<table class="table--data table--bordered">
  <thead>
    <tr>
      <th>Item</th>
      <th>Item</th>
      <th>Item</th>
      <th class="numerical">&pound;0.00</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <a href="">Link Item</a>
      </td>
      <td>Item</td>
      <td>Item</td>
      <td class="numerical">&pound;0.12</td>
    </tr>
    <tr>
      <td>
        <a href="">Link Item</a>
      </td>
      <td>Item</td>
      <td>Item</td>
      <td class="numerical">&pound;0.89</td>
    </tr>
    <tr>
      <td>
        <a href="">Link Item</a>
      </td>
      <td>Item</td>
      <td>Item</td>
      <td class="numerical">&pound;0.40</td>
    </tr>
  </tbody>
</table>
```

### Data Table w/ Row Header (Striped + Bordered) 
<table class="table--bordered table--striped table--data">
  <thead>
    <tr>
      <th>Item</th>
      <th>Item</th>
      <th class="numerical">0.0000</th>
      <th>Item</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th rowspan="3">Item</th>
      <td>Item</td>
      <td class="numerical">0.0788</td>
      <td>Item</td>
    </tr>
    <tr>
      <td>Item</td>
      <td class="numerical">3.0210</td>
      <td>Item</td>
    </tr>
    <tr>
      <td>Item</td>
      <td class="numerical">4.0797</td>
      <td>Item</td>
    </tr>
    <tr>
      <th rowspan="2">Item</th>
      <td>Item</td>
      <td class="numerical">0.0640</td>
      <td>Item</td>
    </tr>
    <tr>
      <td>Item</td>
      <td class="numerical">1.0117</td>
      <td>Item</td>
    </tr>
  </tbody>
</table>

### Data Table w/ Checkboxes (Striped)

```html
<table class="table--striped table--data">
  <thead>
    <tr>
      <th width="20px"></th>
      <th>Item</th>
      <th>Item</th>
      <th>Item</th>
      <th class="numerical">$0.00</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <input type="checkbox" class="hidden" id="check6">
        <label class="checkbox" for="check6">&nbsp;</label>
      </td>
      <td><a href="">Item</a></td>
      <td>Item</td>
      <td>Item</td>
      <td class="numerical">$0.01</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" class="hidden" id="check7">
        <label class="checkbox" for="check7">&nbsp;</label>
      </td>
      <td><a href="">Item</a></td>
      <td>Item</td>
      <td>Item</td>
      <td class="numerical">$0.55</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" class="hidden" id="check8">
        <label class="checkbox" for="check8">&nbsp;</label>
      </td>
      <td><a href="">Item</a></td>
      <td>Item</td>
      <td>Item</td>
      <td class="numerical">$0.38</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" class="hidden" id="check9">
        <label class="checkbox" for="check9">&nbsp;</label>
      </td>
      <td><a href="">Item</a></td>
      <td>Item</td>
      <td>Item</td>
      <td class="numerical">$0.27</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" class="hidden" id="check10">
        <label class="checkbox" for="check10">&nbsp;</label>
      </td>
      <td><a href="">Item</a></td>
      <td>Item</td>
      <td>Item</td>
      <td class="numerical">$0.33</td>
    </tr>
  </tbody>
</table>
```

### Small Data Table (Striped + Bordered) 

```html
<table class="table--bordered table--striped table--data table--small">
  <thead>
    <tr>
      <th>Item</th>
      <th>Item</th>
      <th>Item</th>
      <th class="numerical">$0.00</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><a href="">Item</a></td>
      <td>Item</td>
      <td>Item</td>
      <td class="numerical">$0.50</td>
    </tr>
    <tr>
      <td><a href="">Item</a></td>
      <td>Item</td>
      <td>Item</td>
      <td class="numerical">$0.66</td>
    </tr>
    <tr>
      <td><a href="">Item</a></td>
      <td>Item</td>
      <td>Item</td>
      <td class="numerical">$0.80</td>
    </tr>
    <tr>
      <td><a href="">Item</a></td>
      <td>Item</td>
      <td>Item</td>
      <td class="numerical">$0.99</td>
    </tr>
    <tr>
      <td><a href="">Item</a></td>
      <td>Item</td>
      <td>Item</td>
      <td class="numerical">$0.10</td>
    </tr>
  </tbody>
</table>
```
*/
table, .table {
  width: 100%; }
  table th, table td, .table th, .table td {
    text-align: left;
    padding: 12px;
    border-color: #E6E6E9;
    color: #666; }
    table th ul, table td ul, .table th ul, .table td ul {
      margin-bottom: 0; }
    table th li:last-child, table td li:last-child, .table th li:last-child, .table td li:last-child {
      margin-bottom: 0; }
    table th a, table td a, .table th a, .table td a {
      text-decoration: none; }
  table thead th, .table thead th {
    color: #09091A; }
  table thead tr, .table thead tr {
    border-bottom: solid 2px #B2B2BA; }
  @media only screen and (max-width: 575px) {
    table thead, .table thead {
      display: none; } }
  table tbody tr:hover td, .table tbody tr:hover td {
    background-color: #efeff2; }
  @media only screen and (max-width: 575px) {
    table tbody tr, .table tbody tr {
      border-top: solid 1px #E6E6E9;
      border-bottom: solid 1px #E6E6E9; } }
  @media only screen and (max-width: 575px) {
    table tbody td, .table tbody td {
      display: block;
      padding-bottom: 6px;
      padding-top: 0; }
      table tbody td:first-of-type, .table tbody td:first-of-type {
        padding-top: 16px; }
      table tbody td:last-child, .table tbody td:last-child {
        padding-bottom: 16px; } }
  table .checkbox, .table .checkbox {
    margin-bottom: 0; }

.table--bordered tbody td, .table--bordered tbody th {
  border: 1px solid #E6E6E9; }
  @media only screen and (max-width: 575px) {
    .table--bordered tbody td, .table--bordered tbody th {
      border-top: 0;
      border-bottom: 0; } }

.table--bordered-horizontal tbody th, .table--bordered-horizontal tbody td, .table--bordered-horizontal thead th, .table--bordered-horizontal thead td {
  border-left: 0;
  border-right: 0; }

.table--striped tbody tr:nth-of-type(odd) {
  background-color: #fafafb; }

.table--data {
  font-size: 13px; }

.table--small th, .table--small td {
  padding: 6px 8px; }

.table--no-hover tr:hover td {
  background-color: transparent; }

.numerical {
  text-align: right; }

/*------------------------------------*\
    #TAGS
\*------------------------------------*/
/**
 * This contains various styles for badges/tags
 */
/*doc
## Tags
----------

### Options



```html
<span class="tag">Default</span>
<span class="tag tag--positive">Positive</span>
<span class="tag tag--negative">Negative</span>
<span class="tag tag--warning">Warning</span>

<span class="tag tag--outline">Default</span>
<span class="tag tag--positive-outline">Positive</span>
<span class="tag tag--negative-outline">Negative</span>
<span class="tag tag--warning-outline">Warning</span>
<span class="tag tag--inactive">Inactive</span>
```
*/
.tag {
  font-size: 12px;
  background-color: #1EACC7;
  border-radius: 2px;
  color: #FFFFFF;
  padding: 3px 4px; }

.tag--positive {
  background-color: #27AA0B; }

.tag--negative {
  background-color: #F32F00; }

.tag--warning {
  background-color: #efb200; }

.tag--outline {
  background-color: #e8f8fb;
  border: solid 1px #79D6E6;
  color: #1FBAD6; }

.tag--positive-outline {
  background-color: #E9F7E7;
  border: solid 1px rgba(39, 170, 11, 0.4);
  color: #27AA0B; }

.tag--negative-outline {
  background-color: #FEEAE6;
  border: solid 1px rgba(243, 47, 0, 0.4);
  color: #F32F00; }

.tag--warning-outline {
  background-color: #FFF9E6;
  border: solid 1px rgba(239, 178, 0, 0.3);
  color: #efb200; }

.tag--inactive {
  background-color: #F2F2F4;
  border: solid 1px #CDCDD3;
  color: #9D9DA3; }

.tag--profile {
  bottom: 14px; }

/*------------------------------------*\
    #TOOLTIPS
\*------------------------------------*/
/**
 * This contains styles for tooltips
 */
/*doc
## Tooltips
----------
Tooltips are intended to display non-essential or helper text when the user hovers over an element. Since this interaction only occurs on mouse hover, tooltips are not helpful at mobile breakpoints. It is important to limit the content within a tooltip to text only that does not require an interaction such as a button or link.

### Tooltip Positions
Add a class of `.tooltip-container` to elements where you want to display additional information on hover. Below are the various tooltip directions.

```html
<div class="layout layout--center soft-huge--ends">
  <div class="layout__item one-half">
    <a class="push-small--right tooltip-container hover text-link">Top<span class="tooltip tooltip--top">Top tooltip</span></a>
    <a class="push-small--right tooltip-container hover text-link">Bottom<span class="tooltip tooltip--bottom">Bottom tooltip</span></a>
    <a class="push-small--right tooltip-container hover text-link">Left<span class="tooltip tooltip--left">Left Tooltip</span></a>
    <a class="push-small--right tooltip-container hover text-link">Right<span class="tooltip tooltip--right">Right Tooltip</span></a>
    <span class="tag tooltip-container hover">Tag with a tooltip<span class="tooltip tooltip--right">Tooltip</span></span>
  </div>
</div>
```

### Tooltip Arrow Positions
We have a variety of arrow positions for use in your projects.

```html
<div class="layout layout--center soft-huge--ends">
  <div class="layout__item one-whole">
    <a class="push-small--right tooltip-container hover text-link">Top Tooltop Left Arrow<span class="tooltip tooltip--top-left">Top tooltip</span></a>
    <a class="push-small--right tooltip-container hover text-link">Bottom Tooltip Left Arrow<span class="tooltip tooltip--bottom-left">Bottom tooltip</span></a>
    <a class="push-small--right tooltip-container hover text-link">Top Tooltop Right Arrow<span class="tooltip tooltip--top-right">Top tooltip</span></a>
    <a class="push-small--right tooltip-container hover text-link">Bottom Tooltip Right Arrow<span class="tooltip tooltip--bottom-right">Bottom tooltip</span></a>
  </div>
</div>
```
*/
.tooltip-container {
  position: relative;
  display: inline;
  cursor: pointer; }
  .tooltip-container.hover:hover .tooltip, .tooltip-container.hovered .tooltip {
    display: block;
    opacity: 0.8;
    z-index: 999; }
    .tooltip-container.hover:hover .tooltip.tooltip--top, .tooltip-container.hovered .tooltip.tooltip--top {
      bottom: 30px;
      margin-left: -64px;
      left: 50%; }
    .tooltip-container.hover:hover .tooltip.tooltip--bottom, .tooltip-container.hovered .tooltip.tooltip--bottom {
      top: 30px;
      margin-left: -64px;
      left: 50%; }
    .tooltip-container.hover:hover .tooltip.tooltip--left, .tooltip-container.hovered .tooltip.tooltip--left {
      right: 100%;
      top: 50%;
      margin-top:  -15px;
      margin-right: 15px; }
    .tooltip-container.hover:hover .tooltip.tooltip--right, .tooltip-container.hovered .tooltip.tooltip--right {
      left: 100%;
      top: 50%;
      margin-top:  -15px;
      margin-left: 15px; }
    .tooltip-container.hover:hover .tooltip.tooltip--top-left, .tooltip-container.hovered .tooltip.tooltip--top-left {
      bottom: 30px;
      left: 0; }
    .tooltip-container.hover:hover .tooltip.tooltip--bottom-left, .tooltip-container.hovered .tooltip.tooltip--bottom-left {
      top: 30px;
      left: 0; }
    .tooltip-container.hover:hover .tooltip.tooltip--top-right, .tooltip-container.hovered .tooltip.tooltip--top-right {
      bottom: 30px;
      right: 0; }
    .tooltip-container.hover:hover .tooltip.tooltip--bottom-right, .tooltip-container.hovered .tooltip.tooltip--bottom-right {
      top: 30px;
      right: 0; }

.tooltip {
  position: absolute;
  width: 140px;
  color: #F2F2F4;
  background: #09091A;
  height: auto;
  line-height: 22px;
  font-size: 12px;
  text-align: center;
  display: none;
  border-radius: 3px;
  padding: 6px; }
  .tooltip:before, .tooltip:after {
    border: 6px solid transparent; }
  .tooltip.tooltip--left:before, .tooltip.tooltip--left:after, .tooltip.tooltip--right:before, .tooltip.tooltip--right:after {
    margin-top: -6px; }
  @media only screen and (max-width: 575px) {
    .tooltip {
      display: none; } }

.tooltip--top:before {
  border-top-color: #09091A !important; }
.tooltip--top:after {
  border-top-color: #09091A !important; }

.tooltip--bottom:before {
  border-bottom-color: #09091A !important; }
.tooltip--bottom:after {
  border-bottom-color: #09091A !important; }

.tooltip--left:before {
  border-left-color: #09091A !important; }
.tooltip--left:after {
  border-left-color: #09091A !important; }

.tooltip--right:before {
  border-right-color: #09091A !important; }
.tooltip--right:after {
  border-right-color: #09091A !important; }

.tooltip--top-left:before {
  border-top-color: #09091A !important; }
.tooltip--top-left:after {
  border-top-color: #09091A !important; }

.tooltip--bottom-left:before {
  border-bottom-color: #09091A !important; }
.tooltip--bottom-left:after {
  border-bottom-color: #09091A !important; }

.tooltip--top-right:before {
  border-top-color: #09091A !important; }
.tooltip--top-right:after {
  border-top-color: #09091A !important; }

.tooltip--bottom-right:before {
  border-bottom-color: #09091A !important; }
.tooltip--bottom-right:after {
  border-bottom-color: #09091A !important; }

/*------------------------------------*\
    #TYPOGRAPHY
\*------------------------------------*/
/**
 * This contains the various typography styles
 */
.primary-font, .text-input, .icon-input input, .select select, table thead th, .table thead th, h5, html, .dashboard-nav, .dashboard-subnav {
  font-family: ff-clan-web-pro, "Helvetica Neue", Helvetica, sans-serif;
  font-weight: 400; }

.primary-font--semibold, .text-input, .icon-input input, .select select, .form-caption, h5 {
  font-weight: 500; }

.primary-font--bold, table thead th, .table thead th {
  font-weight: 600; }

.secondary-font, .top-bar__logo, .breadcrumb, h1, h2, h3, h4, h6, .label, label, .tabs__link, .tabs__item a, .tabs li a, .tabs--dark li a {
  font-family: ff-clan-web-pro-wide, "Helvetica Neue", Helvetica, sans-serif;
  font-weight: 400; }

.secondary-font--semibold, .breadcrumb, h6, .label, label {
  font-weight: 500; }

.tertiary-font, .table--data {
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-weight: 300; }

.monospace-font, code, .code {
  font-family: "Menlo", "Consolas", Monaco, monospace, serif;
  font-weight: normal; }

/*doc

## Typefaces
------------

Why yes, "Wozniak & Jobs quibbled mightily over expensive coffee" is a [pangram](http://en.wikipedia.org/wiki/Pangram).

```html
<p class="label">PRIMARY FONT - CLAN WEB PRO</p>
<p class="primary-font gamma text--uppercase">Wozniak & Jobs quibbled mightily over expensive coffee.</p>
<p class="primary-font gamma">Wozniak & Jobs quibbled mightily over expensive coffee.</p>
<p class="label">PRIMARY FONT - CLAN WEB PRO SEMIBOLD</p>
<p class="primary-font primary-font--semibold text--uppercase gamma">Wozniak & Jobs quibbled mightily over expensive coffee.</p>
<p class="primary-font primary-font--semibold gamma">Wozniak & Jobs quibbled mightily over expensive coffee.</p>
<p class="label">SECONDARY FONT - CLAN WEB PRO WIDE</p>
<p class="secondary-font gamma text--uppercase">Wozniak & Jobs quibbled mightily over expensive coffee.</p>
<p class="secondary-font gamma">Wozniak & Jobs quibbled mightily over expensive coffee.</p>
<p class="label">SECONDARY FONT - CLAN WEB PRO WIDE SEMIBOLD</p>
<p class="secondary-font secondary-font--semibold gamma text--uppercase">Wozniak & Jobs quibbled mightily over expensive coffee.</p>
<p class="secondary-font secondary-font--semibold gamma">Wozniak & Jobs quibbled mightily over expensive coffee.</p>
<p class="label">SECONDARY NARROW FONT - CLAN WEB PRO NARROW NEWS</p>
<p class="secondary-font--narrow gamma text--uppercase">Wozniak & Jobs quibbled mightily over expensive coffee.</p>
<p class="secondary-font--narrow gamma flush--bottom">Wozniak & Jobs quibbled mightily over expensive coffee.</p>
```
*/
/*doc
## Typography
-------------

**Note**: To simulate both themes we used a special class to wrap the Marketing styles. This is for demonstration purposes only. To work with themes, check out [this article](https://web-platform.uberinternal.com/docs/superfine-development#themes).

### Headings

<ul class="tabs">
  <li>
    <a href="#tools-heading" class="hard--top" data-tab-link>Tools Theme (default)</a>
  </li>
  <li>
    <a href="#marketing-heading" class="hard--top" data-tab-link>Marketing Theme</a>
  </li>
</ul>

```html
<div id="tools-heading" class="tabs-panel soft-huge--ends">
  <h1>H1 Page Header</h1>
  <h2>H2 Content Header</h2>
  <h3>H3 Section Header</h3>
  <h4>H4 Pre Header</h4>
  <h5>H5 Sub Section Header</h5>
  <h6>H6 Content Label</h6>
</div>

<div id="marketing-heading" class="marketing-theme soft-huge--ends tabs-panel">
  <h1>H1 Page Header</h1>
  <h2>H2 Content Header</h2>
  <h3>H3 Section Header</h3>
  <h4>H4 Pre Header</h4>
  <h5>H5 Sub Section Header</h5>
  <h6>H6 Content Label</h6>
</div>
```

### Paragraph/Text

<ul class="tabs">
  <li>
    <a href="#tools-paragraph" class="hard--top" data-tab-link>Tools Theme (default)</a>
  </li>
  <li>
    <a href="#marketing-paragraph" class="hard--top" data-tab-link>Marketing Theme</a>
  </li>
</ul>

```html
<div id="tools-paragraph" class="soft-huge--ends tabs-panel">
  <p class="lead">Large/Lead Paragraph. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum magna erat.</p>
  <p>Default Paragraph. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip.</p>
  <p class="small">Small Paragraph. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip.</p>
  <p class="legal">Legal Paragraph. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica.</p>
  <p class="code flush--bottom">Code Text in Menlo.</p>
</div>

<div id="marketing-paragraph" class="marketing-theme soft-huge--ends tabs-panel">
  <p class="lead">Large/Lead Paragraph. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum magna erat.</p>
  <p>Default Paragraph. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip.</p>
  <p class="small">Small Paragraph. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip.</p>
  <p class="legal">Legal Paragraph. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica.</p>
  <p class="code flush--bottom">Code Text in Menlo.</p>
</div>
```

### Links

```html
<a class="display--block"href="#">This is a standard link!</a>
<a class="display--block text-link"href="#">This is a link with an underline.</a>
```
*/
.secondary-font--narrow {
  font-family: ff-clan-web-pro-narrow, "Helvetica Neue", Helvetica, sans-serif;
  font-weight: 500; }

html {
  color: #222231; }

::selection {
  background: #79D6E6;
  color: #FFFFFF; }

h1, h2, h3, h4, h5, h6, .label, label, p {
  text-align: none; }

h1 {
  margin-bottom: 48px;
  text-transform: uppercase; }

h2 {
  margin-bottom: 36px;
  text-transform: uppercase; }

h3 {
  margin-bottom: 24px; }

h4 {
  margin-bottom: 18px;
  text-transform: uppercase;
  color: #3A3A48; }

h5 {
  margin-bottom: 18px;
  padding-top: 18px; }

h6, .label, label {
  margin-bottom: 5px;
  text-transform: uppercase;
  color: #6B6B76; }

.lead {
  font-size: 18px;
  font-size: 1.28571rem;
  color: #3A3A48; }

.small {
  font-size: 12px;
  font-size: 0.85714rem;
  color: #3A3A48; }

.legal {
  font-size: 10px;
  font-size: 0.71429rem;
  color: #9D9DA3; }

.label, label {
  line-height: 24px; }

code, .code {
  font-size: 14px;
  font-size: 1rem; }

a, .link {
  color: #1FBAD6;
  text-decoration: none;
  cursor: pointer; }

.text-link:hover {
  text-decoration: underline; }

@media only screen and (max-width: 575px) {
  h1 {
    font-size: 30px;
    font-size: 2.14286rem; }

  h2 {
    font-size: 24px;
    font-size: 1.71429rem; }

  h3 {
    font-size: 18px;
    font-size: 1.28571rem; }

  p {
    font-size: 14px;
    font-size: 1rem; }

  .lead {
    font-size: 17px;
    font-size: 1.21429rem; } }
/* TOOLS SETTINGS */
.dashboard-drawer {
  position: absolute;
  z-index: 100;
  width: 300px;
  height: 100%;
  background-color: #151525; }
  @media only screen and (max-width: 768px) {
    .dashboard-drawer {
      width: 64px; } }

.dashboard-nav {
  background: #222231; }
  .dashboard-nav .icon_up-arrow, .dashboard-nav .icon_down-arrow {
    margin-top: 6px;
    float: right; }
    @media only screen and (max-width: 768px) {
      .dashboard-nav .icon_up-arrow, .dashboard-nav .icon_down-arrow {
        display: none; } }

.dashboard-nav__close {
  padding: 12px 15px 12px 24px; }
  .dashboard-nav__close .icon_delete {
    color: #9D9DA3; }
    .dashboard-nav__close .icon_delete:hover {
      color: #C0C0C8; }

.dashboard-nav__item {
  position: relative;
  font-size: 13px;
  margin-bottom: 0; }

.dashboard-nav__link {
  display: inline-block;
  text-transform: none;
  text-decoration: none;
  width: 100%;
  padding: 12px 15px 12px 24px;
  color: #C0C0C8; }
  .dashboard-nav__link:hover {
    color: #FFFFFF; }
  .dashboard-nav__link span {
    vertical-align: middle; }
  @media only screen and (max-width: 768px) {
    .dashboard-nav__link {
      text-align: center;
      padding: 12px 15px; } }

.dashboard-nav__item:hover, .dashboard-nav__item:hover .icon {
  color: #FFFFFF; }

.dashboard-nav__item.active > a {
  color: #1FBAD6; }
  @media only screen and (max-width: 768px) {
    .dashboard-nav__item.active > a {
      border-left: none; } }
.dashboard-nav__item.active .dashboard-nav__icon {
  color: #1FBAD6; }
  @media only screen and (max-width: 768px) {
    .dashboard-nav__item.active .dashboard-nav__icon {
      margin-left: 0; } }

@media only screen and (max-width: 768px) {
  .dashboard-nav__item.active:hover {
    border-left: none; } }

.dashboard-nav__icon {
  padding: 0 12px 0 0;
  font-size: 16px;
  color: #C0C0C8; }
  @media only screen and (max-width: 768px) {
    .dashboard-nav__icon {
      padding: 0; } }

.dashboard-nav__text {
  text-transform: uppercase; }
  @media only screen and (max-width: 768px) {
    .dashboard-nav__text {
      display: none; } }

.dashboard-nav__submenu {
  background: #151525; }

.dashboard-nav__submenu__item {
  color: #C0C0C8;
  border-bottom: solid 1px #222231;
  border-left: solid transparent 3px; }
  .dashboard-nav__submenu__item.active {
    background-color: #09091A;
    border-left: solid 3px #1FBAD6;
    border-top: none; }
    .dashboard-nav__submenu__item.active .dashboard-nav__submenu__link {
      color: #FFFFFF; }
    @media only screen and (max-width: 768px) {
      .dashboard-nav__submenu__item.active {
        border-left: none; } }
  .dashboard-nav__submenu__item:hover .dashboard-nav__submenu__link {
    color: #FFFFFF; }

.dashboard-nav__submenu__link {
  padding: 12px 15px 12px 24px;
  display: block;
  color: #C0C0C8; }
  @media only screen and (max-width: 768px) {
    .dashboard-nav__submenu__link {
      display: none; } }

.dashboard-subnav {
  background: #151525; }
  @media only screen and (max-width: 768px) {
    .dashboard-subnav {
      display: none; } }

.dashboard-subnav__item .dashboard-subnav__label {
  color: #3A3A48;
  font-size: 12px;
  padding: 0 24px; }

.dashboard-subnav__link {
  width: 100%;
  display: inline-block;
  color: #B2B2BA;
  padding: 0 24px;
  text-decoration: none;
  font-size: 13px; }
  .dashboard-subnav__link:hover {
    color: #F9F9F9; }

.dashboard-subnav__icon {
  font-size: 13px;
  float: right; }

.dashboard-drawer--collapsed {
  width: 64px; }
  .dashboard-drawer--collapsed .dashboard-nav__text,
  .dashboard-drawer--collapsed .dashboard-subnav {
    display: none; }

.example-dashboard-drawer {
  position: static;
  width: 100%; }
  @media only screen and (min-width: 576px) and (max-width: 768px) {
    .example-dashboard-drawer {
      width: 64px; } }

.tabs, .tabs--dark {
  border-bottom: solid 1px #D9D9DE; }
  @media only screen and (max-width: 575px) {
    .tabs, .tabs--dark {
      border-bottom: none; } }
  @media only screen and (max-width: 575px) {
    .tabs li, .tabs--dark li {
      width: 100%;
      border-bottom: solid 1px #D9D9DE; } }

.tabs__item, .tabs li, .tabs--dark li {
  margin: 0 24px 0 0; }

.tabs__link, .tabs__item a, .tabs li a, .tabs--dark li a {
  text-decoration: none;
  text-transform: uppercase;
  padding: 12px 0 10px 0;
  border-bottom: solid 3px transparent;
  color: #9D9DA3; }
  @media only screen and (max-width: 575px) {
    .tabs__link, .tabs__item a, .tabs li a, .tabs--dark li a {
      padding: 12px 0 10px 24px;
      border-bottom: none;
      border-left: solid 3px transparent; } }
  .tabs__link:hover, .tabs__item a:hover, .tabs li a:hover, .tabs--dark li a:hover {
    color: #09091A; }
  .tabs__link.active, .tabs__item a.active, .tabs li a.active, .tabs--dark li a.active {
    color: #09091A;
    border-bottom: solid 3px #1FBAD6; }
    @media only screen and (max-width: 575px) {
      .tabs__link.active, .tabs__item a.active, .tabs li a.active, .tabs--dark li a.active {
        border-bottom: none;
        border-left: solid 3px #1FBAD6; } }

.tabs--dark .tabs__link.active, .tabs--dark .tabs__item a.active, .tabs__item .tabs--dark a.active, .tabs--dark .tabs li a.active, .tabs li .tabs--dark a.active, .tabs--dark li a.active, .tabs--dark .tabs__item a.active, .tabs--dark .tabs li a.active, .tabs .tabs--dark li a.active, .tabs--dark li a.active {
  color: #F9F9F9; }
  .tabs--dark .tabs__link.active:hover, .tabs--dark .tabs__item a.active:hover, .tabs__item .tabs--dark a.active:hover, .tabs--dark .tabs li a.active:hover, .tabs li .tabs--dark a.active:hover, .tabs--dark li a.active:hover, .tabs--dark .tabs__item a.active:hover, .tabs--dark .tabs li a.active:hover, .tabs .tabs--dark li a.active:hover, .tabs--dark li a.active:hover {
    color: #F9F9F9; }
.tabs--dark .tabs__link:hover, .tabs--dark .tabs__item a:hover, .tabs__item .tabs--dark a:hover, .tabs--dark .tabs li a:hover, .tabs li .tabs--dark a:hover, .tabs--dark li a:hover, .tabs--dark .tabs__item a:hover, .tabs--dark .tabs li a:hover, .tabs .tabs--dark li a:hover, .tabs--dark li a:hover {
  color: #6B6B76; }

@media only screen and (max-width: 575px) {
  .tabs.text--center .tabs__link, .text--center.tabs--dark .tabs__link, .tabs.text--center .tabs__item a, .tabs__item .tabs.text--center a, .text--center.tabs--dark .tabs__item a, .tabs__item .text--center.tabs--dark a, .tabs.text--center li a, .tabs li .text--center.tabs--dark a, .tabs.text--center .tabs--dark li a, .tabs--dark li .tabs.text--center a, .text--center.tabs--dark li a {
    padding: 12px 0 10px 0; }
    .tabs.text--center .tabs__link.active, .text--center.tabs--dark .tabs__link.active, .tabs.text--center .tabs__item a.active, .tabs__item .tabs.text--center a.active, .text--center.tabs--dark .tabs__item a.active, .tabs__item .text--center.tabs--dark a.active, .tabs.text--center li a.active, .tabs li .text--center.tabs--dark a.active, .tabs.text--center .tabs--dark li a.active, .tabs--dark li .tabs.text--center a.active, .text--center.tabs--dark li a.active {
      border-left: none;
      border-bottom: solid 3px #1FBAD6; } }

.tabs-panel {
  display: none; }
  .tabs-panel.active {
    display: block; }

.modal-open {
  overflow: hidden;
  position: relative;
  height: 100%; }

.modal {
  overflow: auto;
  overflow-y: scroll;
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  z-index: 10000; }
  .modal.show {
    display: block; }
    .modal.show .modal__content {
      display: block; }
  .modal.animate {
    background: rgba(0, 0, 0, 0.5); }
    .modal.animate .modal__content {
      top: 48px; }
      @media only screen and (max-width: 768px) {
        .modal.animate .modal__content {
          top: 0; } }

.modal__content {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  background: #F2F2F4;
  border-radius: 3px;
  width: 600px;
  margin-left: -300px;
  padding: 36px; }

.modal__content--small {
  width: 400px;
  margin-left: -200px; }

.modal__content--large {
  width: 700px;
  margin-left: -350px; }

@media only screen and (max-width: 768px) {
  .modal__content, .modal__content--small, .modal__content--large {
    left: 0;
    margin: 0;
    width: 100%; } }

.modal__close {
  cursor: pointer;
  color: #C0C0C8;
  font-size: 16px;
  position: absolute;
  top: 24px;
  right: 24px; }
  .modal__close:hover {
    color: #1FBAD6; }

.fade-enter {
  opacity: 0.01;
  transition: opacity .3s ease-in; }

.fade-enter.fade-enter-active {
  opacity: 1; }

.fade-leave {
  opacity: 1;
  transition: opacity .3s ease-in; }

.fade-leave.fade-leave-active {
  opacity: 0.01; }

.r-popover {
  background-color: #FFFFFF;
  border: 1px solid #E6E6E9;
  box-shadow: 0 1px 3px rgba(34, 34, 49, 0.2);
  position: absolute;
  z-index: 100;
  border-radius: 3px;
  transition: all 0.15s ease; }
  .r-popover:before {
    background-color: #FFFFFF;
    border: 1px solid #E6E6E9;
    box-shadow: 0 1px 3px rgba(34, 34, 49, 0.2); }
  .r-popover > * {
    position: relative;
    z-index: 101; }

.r-popover__header {
  padding: 12px;
  background-color: #F2F2F4;
  margin-bottom: 0;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px; }

.r-popover__arrow-bottom:before,
.r-popover__arrow-top:before,
.r-popover__arrow-top-left:before,
.r-popover__arrow-top-right:before,
.r-popover__arrow-left:before,
.r-popover__arrow-right:before, .r-popover__arrow-bottom-left:before,
.r-popover__arrow-bottom-right:before, .r-popover__arrow-left-top:before,
.r-popover__arrow-left-bottom:before,
.r-popover__arrow-right-top:before,
.r-popover__arrow-right-bottom:before, .r-popover__arrow-bottom:after,
.r-popover__arrow-top:after,
.r-popover__arrow-top-left:after,
.r-popover__arrow-top-right:after,
.r-popover__arrow-left:after,
.r-popover__arrow-right:after, .r-popover__arrow-bottom-left:after,
.r-popover__arrow-bottom-right:after, .r-popover__arrow-left-top:after,
.r-popover__arrow-left-bottom:after,
.r-popover__arrow-right-top:after,
.r-popover__arrow-right-bottom:after {
  content: '';
  position: absolute;
  background-color: #FFFFFF; }
.r-popover__arrow-bottom:before,
.r-popover__arrow-top:before,
.r-popover__arrow-top-left:before,
.r-popover__arrow-top-right:before,
.r-popover__arrow-left:before,
.r-popover__arrow-right:before, .r-popover__arrow-bottom-left:before,
.r-popover__arrow-bottom-right:before, .r-popover__arrow-left-top:before,
.r-popover__arrow-left-bottom:before,
.r-popover__arrow-right-top:before,
.r-popover__arrow-right-bottom:before {
  bottom: -8px;
  left: 50%;
  margin-left: -8px;
  width: 16px;
  height: 16px;
  transform: rotate(45deg); }
.r-popover__arrow-bottom:after,
.r-popover__arrow-top:after,
.r-popover__arrow-top-left:after,
.r-popover__arrow-top-right:after,
.r-popover__arrow-left:after,
.r-popover__arrow-right:after, .r-popover__arrow-bottom-left:after,
.r-popover__arrow-bottom-right:after, .r-popover__arrow-left-top:after,
.r-popover__arrow-left-bottom:after,
.r-popover__arrow-right-top:after,
.r-popover__arrow-right-bottom:after {
  right: 0;
  bottom: 0;
  left: 0;
  height: 100%; }

.r-popover__arrow-top:before, .r-popover__arrow-top-left:before,
.r-popover__arrow-top-right:before {
  top: -8px;
  bottom: initial; }
.r-popover__arrow-top:after, .r-popover__arrow-top-left:after,
.r-popover__arrow-top-right:after {
  top: 0;
  bottom: initial; }

.r-popover__arrow-top-left:before,
.r-popover__arrow-bottom-left:before {
  left: 32px; }

.r-popover__arrow-top-right:before,
.r-popover__arrow-bottom-right:before {
  right: 32px;
  left: initial; }

.r-popover__arrow-left-top:before,
.r-popover__arrow-left-bottom:before,
.r-popover__arrow-right-top:before,
.r-popover__arrow-right-bottom:before {
  left: initial; }

.r-popover__arrow-left-top:before,
.r-popover__arrow-right-top:before {
  top: 16px; }

.r-popover__arrow-left-bottom:before,
.r-popover__arrow-right-bottom:before {
  bottom: 16px; }

.r-popover__arrow-right-top:before,
.r-popover__arrow-right-bottom:before {
  right: -8px; }

.r-popover--top-header:before {
  background-color: #F2F2F4; }

.r-popover-enter:before {
  background-color: #F2F2F4; }

.r-popover-enter {
  opacity: 0.01;
  transition: all 0.15s ease; }

.r-popover-enter.r-popover-enter-active {
  opacity: 1; }

.r-popover-leave {
  opacity: 1;
  transition: all 0.15s ease; }

.r-popover-leave.r-popover-leave-active {
  opacity: 0.01; }

.icon_uber {
  color: #FFFFFF;
  font-size: 55px;
  display: block; }

.icon-uber--small {
  font-size: 41px; }

a {
  text-decoration: none; }

strong, .white {
  color: #FFFFFF; }

.title {
  color: #FFFFFF;
  font-size: 1.35em;
  text-transform: uppercase; }

hr {
  border: 0;
  border-bottom: 1px solid #3A3A48; }

.text--capitalize {
  text-transform: capitalize; }

.label {
  color: #C0C0C8; }

.background-line {
  display: table;
  white-space: nowrap; }
  .background-line:before, .background-line:after {
    border-top: 1px solid #3A3A48;
    content: '';
    display: table-cell;
    position: relative;
    top: 0.8em;
    width: 50%; }
  .background-line > span {
    padding: 0 20px;
    font-family: ff-clan-web-pro-wide, "Helvetica Neue", Helvetica, sans-serif; }

.login-error-title, .login-error {
  text-transform: uppercase;
  font-family: ff-clan-web-pro-wide, "Helvetica Neue", Helvetica, sans-serif;
  color: #F32F00; }

.login-error-title {
  font-size: 20px; }

.login-error {
  font-size: 16px; }

.text-input, .icon-input input, .select select {
  height: 50px;
  color: #09091A; }

html, body {
  color: #C0C0C8;
  background-color: #09091A; }

.content {
  margin: 0 auto;
  padding: 0 20px;
  max-width: 440px; }

.btn--facebook {
  border: none;
  background-color: #3B5998;
  height: 57px;
  padding-top: 18px;
  font-size: 14px;
  background-size: 100% 100%;
  background-image: url(../images/facebook_line.91b54c2cea42aa75463a3953d277df58.png);
  background-position: 25px 0px;
  background-size: 38px 57px;
  background-repeat: no-repeat; }
  @media print, (-webkit-min-device-pixel-ratio: 1.25), (-o-min-device-pixel-ratio: 5 / 4), (min-resolution: 120dpi) {
    .btn--facebook {
      background-image: url(../images/facebook_line@2x.6514099f631a859775c85a7a903984ad.png); } }
  .btn--facebook:hover {
    border: none;
    background-color: #455E9C; }

label[for=checkbox-rememberme] {
  margin-bottom: 0;
  font-family: ff-clan-web-pro, "Helvetica Neue", Helvetica, sans-serif;
  font-weight: 400;
  color: inherit;
  text-transform: initial;
  font-size: 1em; }

.text-input, .icon-input input, .select select {
  margin-bottom: 0; }

.btn--no-padding {
  padding: 0; }

.square--top {
  border-top-right-radius: 0;
  border-top-left-radius: 0; }

.square--bottom {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0; }

.forgot-password {
  display: inline-block;
  vertical-align: middle; }

.rememberme-forgetpassword-separator {
  padding: 0 5px; }

#sign_up_link {
  padding-left: 5px; }

@media only screen and (max-width: 575px) {
  .btn--facebook {
    background-image: none; }

  .icon_uber {
    font-size: 41px;
    margin-top: 24px !important;
    /* same as push--top */
    margin-bottom: 12px !important;
    /* same as push-small--bottom */ }

  .checkbox:hover:after {
    opacity: 0; } }
/*
 * BASE SETTINGS
 *
 * These styles are shared between both themes
 */
/*------------------------------------*\
    #react-popover
\*------------------------------------*/
/*doc
## Title
---------------------

```html
```
*/
.r-popover {
  background-color: #FFFFFF;
  border: 1px solid #E6E6E9;
  box-shadow: 0 1px 3px rgba(34, 34, 49, 0.2);
  position: absolute;
  z-index: 100;
  border-radius: 3px;
  transition: all 0.15s ease; }
  .r-popover:before {
    background-color: #FFFFFF;
    border: 1px solid #E6E6E9;
    box-shadow: 0 1px 3px rgba(34, 34, 49, 0.2); }
  .r-popover > * {
    position: relative;
    z-index: 101; }

.r-popover__header {
  padding: 12px;
  background-color: #F2F2F4;
  margin-bottom: 0;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px; }

.r-popover__arrow-bottom:before,
.r-popover__arrow-top:before,
.r-popover__arrow-top-left:before,
.r-popover__arrow-top-right:before,
.r-popover__arrow-left:before,
.r-popover__arrow-right:before, .r-popover__arrow-bottom-left:before,
.r-popover__arrow-bottom-right:before, .r-popover__arrow-left-top:before,
.r-popover__arrow-left-bottom:before,
.r-popover__arrow-right-top:before,
.r-popover__arrow-right-bottom:before, .r-popover__arrow-bottom:after,
.r-popover__arrow-top:after,
.r-popover__arrow-top-left:after,
.r-popover__arrow-top-right:after,
.r-popover__arrow-left:after,
.r-popover__arrow-right:after, .r-popover__arrow-bottom-left:after,
.r-popover__arrow-bottom-right:after, .r-popover__arrow-left-top:after,
.r-popover__arrow-left-bottom:after,
.r-popover__arrow-right-top:after,
.r-popover__arrow-right-bottom:after {
  content: '';
  position: absolute;
  background-color: #FFFFFF; }
.r-popover__arrow-bottom:before,
.r-popover__arrow-top:before,
.r-popover__arrow-top-left:before,
.r-popover__arrow-top-right:before,
.r-popover__arrow-left:before,
.r-popover__arrow-right:before, .r-popover__arrow-bottom-left:before,
.r-popover__arrow-bottom-right:before, .r-popover__arrow-left-top:before,
.r-popover__arrow-left-bottom:before,
.r-popover__arrow-right-top:before,
.r-popover__arrow-right-bottom:before {
  bottom: -8px;
  left: 50%;
  margin-left: -8px;
  width: 16px;
  height: 16px;
  transform: rotate(45deg); }
.r-popover__arrow-bottom:after,
.r-popover__arrow-top:after,
.r-popover__arrow-top-left:after,
.r-popover__arrow-top-right:after,
.r-popover__arrow-left:after,
.r-popover__arrow-right:after, .r-popover__arrow-bottom-left:after,
.r-popover__arrow-bottom-right:after, .r-popover__arrow-left-top:after,
.r-popover__arrow-left-bottom:after,
.r-popover__arrow-right-top:after,
.r-popover__arrow-right-bottom:after {
  right: 0;
  bottom: 0;
  left: 0;
  height: 100%; }

.r-popover__arrow-top:before, .r-popover__arrow-top-left:before,
.r-popover__arrow-top-right:before {
  top: -8px;
  bottom: initial; }
.r-popover__arrow-top:after, .r-popover__arrow-top-left:after,
.r-popover__arrow-top-right:after {
  top: 0;
  bottom: initial; }

.r-popover__arrow-top-left:before,
.r-popover__arrow-bottom-left:before {
  left: 32px; }

.r-popover__arrow-top-right:before,
.r-popover__arrow-bottom-right:before {
  right: 32px;
  left: initial; }

.r-popover__arrow-left-top:before,
.r-popover__arrow-left-bottom:before,
.r-popover__arrow-right-top:before,
.r-popover__arrow-right-bottom:before {
  left: initial; }

.r-popover__arrow-left-top:before,
.r-popover__arrow-right-top:before {
  top: 16px; }

.r-popover__arrow-left-bottom:before,
.r-popover__arrow-right-bottom:before {
  bottom: 16px; }

.r-popover__arrow-right-top:before,
.r-popover__arrow-right-bottom:before {
  right: -8px; }

.r-popover--top-header:before {
  background-color: #F2F2F4; }

.r-popover-enter {
  opacity: 0.01;
  transition: all 0.15s ease; }

.r-popover-enter.r-popover-enter-active {
  opacity: 1; }

.r-popover-leave {
  opacity: 1;
  transition: all 0.15s ease; }

.r-popover-leave.r-popover-leave-active {
  opacity: 0.01; }

/*------------------------------------*\
    # React Typeahead

    [1] selected tags need to appear
    inline in the input, which isn't
    the default behavior in Superfine
\*------------------------------------*/
.typeahead {
  /* [1] */ }
  .typeahead input {
    height: 36px;
    background: none; }
    .typeahead input:focus {
      box-shadow: none; }

.typeahead__tag {
  color: #FFFFFF;
  background-color: #1FBAD6;
  margin: 3px 0px 3px 3px;
  border-radius: 3px; }
  .typeahead__tag .icon_delete {
    cursor: pointer; }

.typeahead__result {
  max-height: 400px;
  overflow-y: scroll; }

.typeahead__result__item {
  color: #6B6B76;
  padding: 12px; }
  .typeahead__result__item:hover {
    cursor: pointer; }

.typeahead__result__item--selected {
  background-color: #D2F1F7; }

.typeahead__result__item__match {
  font-weight: 500;
  color: #09091A; }

.telephone-input .typeahead__result {
  max-height: 240px; }

.telephone-input__input {
  padding-left: 108px !important; }

.telephone-input__locale-selector {
  user-select: none;
  cursor: pointer;
  width: 98px; }
  .telephone-input__locale-selector:hover {
    background-color: #F2F2F4; }
  .telephone-input__locale-selector:active {
    background-color: #E6E6E9; }
  .telephone-input__locale-selector:after {
    content: "▾";
    margin-left: 10px; }

.telephone-input__locale-selector__flag, .telephone-input__locale-typeahead__flag {
  width: 24px;
  height: 16px;
  background-size: 100%;
  background-repeat: no-repeat; }

.telephone-input__locale-typeahead__code {
  color: #C0C0C8; }

.flag-sprite {
  background-size: 100% 100%;
  background-image: url(../images/locale-flags.446d42a45ea1a97ffe6edded21a09dd2.png);
  background-size: 100%; }
  @media print, (-webkit-min-device-pixel-ratio: 1.25), (-o-min-device-pixel-ratio: 5 / 4), (min-resolution: 120dpi) {
    .flag-sprite {
      background-image: url(../images/locale-flags@2x.446d42a45ea1a97ffe6edded21a09dd2.png); } }

.telephone-input__locale-selector {
  height: 100%;
  padding: 0.8em; }

.hide-country-picker .telephone-input__locale-selector {
  display: none; }
.hide-country-picker .telephone-input__input {
  padding-left: .75em !important; }

.authorize-content {
  margin: 0 auto;
  max-width: 380px; }
  .authorize-content .btn--outline {
    border-color: #C0C0C8;
    color: #C0C0C8; }
    .authorize-content .btn--outline:hover {
      border-color: #1FBAD6;
      color: #FFFFFF; }
  .authorize-content .btn--primary {
    margin-left: -10px; }

.authorize-lead {
  font-size: 16px; }

#scrollable-viewport {
  overflow: scroll; }

#read-more {
  border-bottom: 1px solid #3A3A48;
  font-size: 12px;
  line-height: 1;
  margin: 0;
  padding: 47px 0 9px 0;
  z-index: 1; }
  #read-more .icon {
    color: #1FBAD6; }

.gradient {
  display: none;
  height: 70px;
  margin-top: -60px;
  position: relative;
  width: 100%;
  background-color: transparent;
  background-image: -ms-linear-gradient(top, transparent -20%, #09091a 60%);
  background-image: -moz-linear-gradient(top, transparent -20%, #09091a 60%);
  background-image: -o-linear-gradient(top, transparent -20%, #09091a 60%);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(-20, transparent), color-stop(60, #09091a));
  background-image: -webkit-linear-gradient(top, transparent -20%, #09091a 60%);
  background-image: linear-gradient(to bottom, transparent -20%, #09091a 60%); }

#edit-scopes-btn {
  font-size: 14px;
  line-height: 1; }

#edit-scopes-mode {
  display: none;
  font-size: 14px;
  line-height: 1;
  margin: 0;
  padding: 5px 0; }

.scope-separator {
  border-bottom: 1px solid #3A3A48;
  margin-left: 40px; }

.scope {
  background-repeat: no-repeat;
  font-size: 13px;
  line-height: 1.6em;
  padding-left: 40px; }
  .scope .checkbox {
    padding-left: 40px; }
  .scope .checkbox-label {
    display: inline-block;
    line-height: 1.6em;
    margin-bottom: 0;
    font-family: ff-clan-web-pro, "Helvetica Neue", Helvetica, sans-serif;
    font-weight: 400;
    color: inherit;
    text-transform: initial;
    font-size: 1em; }
  .scope .scope-content {
    font-size: 12px; }
  .scope .scope-title {
    color: #F2F2F4;
    font-size: 14px; }
  .scope.checkbox-display {
    background: none;
    padding-left: 0; }

.developer-scopes .developer-scope-label {
  border-bottom: 1px solid #3A3A48; }
.developer-scopes li:last-child .developer-scope-label {
  border-bottom: 0; }

.scope-profile, .scope-ifttt, .scope-vouchsafe_redeem {
  background-size: 100% 100%;
  background-image: url(../images/profile-icon.5401f491df4260738a936f1597b0daf8.png);
  background-size: 24px 24px; }
  @media print, (-webkit-min-device-pixel-ratio: 1.25), (-o-min-device-pixel-ratio: 5 / 4), (min-resolution: 120dpi) {
    .scope-profile, .scope-ifttt, .scope-vouchsafe_redeem {
      background-image: url(../images/profile-icon@2x.89332e12795a255328bd76db6720d332.png); } }

.scope-history, .scope-history_fare, .scope-history_lite {
  background-size: 100% 100%;
  background-image: url(../images/activity-icon.79c9cc2561b0b2fdfa84718e4185dd20.png);
  background-size: 26px 19px; }
  @media print, (-webkit-min-device-pixel-ratio: 1.25), (-o-min-device-pixel-ratio: 5 / 4), (min-resolution: 120dpi) {
    .scope-history, .scope-history_fare, .scope-history_lite {
      background-image: url(../images/activity-icon@2x.72277c2a8724d4452a5b10b02813b2a7.png); } }

.scope-places {
  background-size: 100% 100%;
  background-image: url(../images/places.2890b06df2c1df404b55efce817a80c9.png);
  background-size: 17px 24px; }
  @media print, (-webkit-min-device-pixel-ratio: 1.25), (-o-min-device-pixel-ratio: 5 / 4), (min-resolution: 120dpi) {
    .scope-places {
      background-image: url(../images/places@2x.6084ab2cb0baf15e0bc1f9434f360388.png); } }

.scope-all_trips {
  background-size: 100% 100%;
  background-image: url(../images/trips.7a90b94fa3b438a81657e1fdacadd6e6.png);
  background-size: 24px 17px; }
  @media print, (-webkit-min-device-pixel-ratio: 1.25), (-o-min-device-pixel-ratio: 5 / 4), (min-resolution: 120dpi) {
    .scope-all_trips {
      background-image: url(../images/trips@2x.ed1f7c1b75751491dd17772b17195e3d.png); } }

.scope-request {
  background-size: 100% 100%;
  background-image: url(../images/car-icon.576aeee66ef62e1be4830d7bb46c8d93.png);
  background-size: 29px 11px; }
  @media print, (-webkit-min-device-pixel-ratio: 1.25), (-o-min-device-pixel-ratio: 5 / 4), (min-resolution: 120dpi) {
    .scope-request {
      background-image: url(../images/car-icon@2x.fe442f8ab4fc5f34324620d1181e77cd.png); } }

.scope-payment_baidu_wallet {
  background-size: 100% 100%;
  background-image: url(../images/payment_baidu_wallet-icon.4849e9d335a091b4d3d0f3d5cb452e33.png);
  background-size: 26px 19px; }
  @media print, (-webkit-min-device-pixel-ratio: 1.25), (-o-min-device-pixel-ratio: 5 / 4), (min-resolution: 120dpi) {
    .scope-payment_baidu_wallet {
      background-image: url(../images/payment_baidu_wallet-icon@2x.7dc4464ca25021f2b4a5b73b10df07d9.png); } }

.scope-payment_methods_share {
  background-size: 100% 100%;
  background-image: url(../images/payment_methods-icon.4849e9d335a091b4d3d0f3d5cb452e33.png);
  background-size: 26px 19px; }
  @media print, (-webkit-min-device-pixel-ratio: 1.25), (-o-min-device-pixel-ratio: 5 / 4), (min-resolution: 120dpi) {
    .scope-payment_methods_share {
      background-image: url(../images/payment_methods-icon@2x.7dc4464ca25021f2b4a5b73b10df07d9.png); } }

.scope-payment_methods_readonly {
  background-size: 100% 100%;
  background-image: url(../images/payment_methods-icon.4849e9d335a091b4d3d0f3d5cb452e33.png);
  background-size: 26px 19px; }
  @media print, (-webkit-min-device-pixel-ratio: 1.25), (-o-min-device-pixel-ratio: 5 / 4), (min-resolution: 120dpi) {
    .scope-payment_methods_readonly {
      background-image: url(../images/payment_methods-icon@2x.7dc4464ca25021f2b4a5b73b10df07d9.png); } }

.scope-request_receipt {
  background-size: 100% 100%;
  background-image: url(../images/request_receipt-icon.ad0f122aa189d075e627095e1e035029.png);
  background-size: 19px 27px; }
  @media print, (-webkit-min-device-pixel-ratio: 1.25), (-o-min-device-pixel-ratio: 5 / 4), (min-resolution: 120dpi) {
    .scope-request_receipt {
      background-image: url(../images/request_receipt-icon@2x.026bb4b0f7f9c8ddb19e7fd7b557cf83.png); } }

.scope-surge_accept {
  background-size: 100% 100%;
  background-image: url(../images/surge_accept-icon.12841f6b6d88ef92456b4c99423a372d.png);
  background-size: 21px 26px; }
  @media print, (-webkit-min-device-pixel-ratio: 1.25), (-o-min-device-pixel-ratio: 5 / 4), (min-resolution: 120dpi) {
    .scope-surge_accept {
      background-image: url(../images/surge_accept-icon@2x.6d144710b2d299646dd8e93b8e7d52d8.png); } }

.scope-delivery {
  background-size: 100% 100%;
  background-image: url(../images/car-icon.576aeee66ef62e1be4830d7bb46c8d93.png);
  background-size: 29px 11px; }
  @media print, (-webkit-min-device-pixel-ratio: 1.25), (-o-min-device-pixel-ratio: 5 / 4), (min-resolution: 120dpi) {
    .scope-delivery {
      background-image: url(../images/car-icon@2x.fe442f8ab4fc5f34324620d1181e77cd.png); } }

.scope-delivery_sandbox {
  background-size: 100% 100%;
  background-image: url(../images/car-icon.576aeee66ef62e1be4830d7bb46c8d93.png);
  background-size: 29px 11px; }
  @media print, (-webkit-min-device-pixel-ratio: 1.25), (-o-min-device-pixel-ratio: 5 / 4), (min-resolution: 120dpi) {
    .scope-delivery_sandbox {
      background-image: url(../images/car-icon@2x.fe442f8ab4fc5f34324620d1181e77cd.png); } }

@media only screen and (max-width: 575px) {
  .checkbox:hover:after {
    opacity: 0; } }

/*# sourceMappingURL=style.css.map */