styles.css

/*! normalize.css v2.1.2 | MIT License | git.io/normalize */
/* ==========================================================================
   HTML5 display definitions
   ========================================================================== */
/**
 * Correct `block` display not defined in IE 8/9.
 */
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
  display: block; }

/**
 * Correct `inline-block` display not defined in IE 8/9.
 */
audio, canvas, video {
  display: inline-block; }

/**
 * Prevent 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.
 * Hide the `template` element in IE, Safari, and Firefox < 22.
 */
[hidden], template {
  display: none; }

/* ==========================================================================
   Base
   ========================================================================== */
/**
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS text size adjust after orientation change, without disabling
 *    user zoom.
 */
html {
  font-family: sans-serif;
  /* 1 */
  -ms-text-size-adjust: 100%;
  /* 2 */
  -webkit-text-size-adjust: 100%;
  /* 2 */ }

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

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

/**
 * Address `outline` inconsistency between Chrome and other browsers.
 */
a:focus {
  outline: thin dotted; }

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

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

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

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

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

/**
 * Address differences between Firefox and other browsers.
 */
hr {
  height: 0; }

/**
 * Address styling not present in IE 8/9.
 */
mark {
  background: yellow;
  color: black; }

/**
 * Correct font family set oddly in Safari 5 and Chrome.
 */
code, kbd, pre, samp {
  font-family: monospace, serif;
  font-size: 1em; }

/**
 * Improve readability of pre-formatted text in all browsers.
 */
pre {
  white-space: pre-wrap; }

/**
 * Set consistent quote types.
 */
q {
  quotes: "\201C" "\201D" "\2018" "\2019"; }

/**
 * 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
   ========================================================================== */
/**
 * Remove border when inside `a` element in IE 8/9.
 */
img {
  border: 0; }

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

/* ==========================================================================
   Figures
   ========================================================================== */
/**
 * Address margin not present in IE 8/9 and Safari 5.
 */
figure {
  margin: 0; }

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

/**
 * 1. Correct `color` not being inherited in IE 8/9.
 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 */
legend {
  border: 0;
  /* 1 */
  padding: 0;
  /* 2 */ }

/**
 * 1. Correct font family not being inherited in all browsers.
 * 2. Correct font size not being inherited in all browsers.
 * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome.
 */
button, input, select, textarea {
  font-family: inherit;
  /* 1 */
  font-size: 100%;
  /* 2 */
  margin: 0;
  /* 3 */ }

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

/**
 * 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 Chrome, Safari 5+, and IE 8+.
 * Correct `select` style inheritance in Firefox 4+ and Opera.
 */
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.
 */
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; }

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

/**
 * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
 */
input[type="search"] {
  -webkit-appearance: textfield;
  /* 1 */ }

/**
 * Remove inner padding and search cancel button in Safari 5 and Chrome
 * on OS X.
 */
input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none; }

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

/**
 * 1. Remove default vertical scrollbar in IE 8/9.
 * 2. Improve readability and alignment in all browsers.
 */
textarea {
  overflow: auto;
  /* 1 */
  vertical-align: top;
  /* 2 */ }

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

/* ==========================================================================
   Better Box Model
   ========================================================================== */
/**
 * Apply a natural box layout model to all elements 
 * 1. Support older android devices even though safari supports box-sizing
 * with no prefix.
 * */
*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

/* endif */
/* ==========================================================================
   QUERIES
   ========================================================================== */
/*
 * Mixing for mobile first queries.
 * Two breakpoints.
 * Use like @include break(medium) { ***Styles*** }
 * non-small is not a separate breakpoiont - but opens
 * up the scope for when the classes will respond.
 *
 */
/* ==========================================================================
   COLORS

   - Neutrals
   - Brand Colors
   - Standard Object Colors
   - 3rd Party
   - Standard Case Colors
   - Standard Custom Colors

   ========================================================================== */
/* Neutral Colors
   ========================================================================== */
/* Brand Colors
   ========================================================================== */
/* Brand Colors
   ========================================================================== */
/* Standard Object Colors
   ========================================================================== */
/* ======== Standard Misc Colors ======== */
/* 3rd Party Colors
   ========================================================================== */
/* Standard Case Colors
   ========================================================================== */
/* Standard Custom Colors
   ========================================================================== */
/* ==========================================================================
   SKINS
   ========================================================================== */
.sk-color-1 {
  background: shade(#2a94d6, 3%);
  color: white; }

.drk {
  color: #2a94d6; }

.wht {
  color: white; }

.bg-1 {
  background-color: white; }

.bg-2 {
  background-color: #f0f1f2; }

.bg-2-95p {
  background-color: rgba(240, 241, 242, 0.95); }

.bg-3 {
  background-color: #fafafa; }

.bg-4 {
  background-color: #344a5f; }

.bg-5 {
  background-color: #293f54; }

.bg-6 {
  background-color: #354452; }

.bg-6-80p {
  background-color: rgba(53, 68, 82, 0.8); }

.bg-7 {
  background-color: #e8eaeb; }

.bg-8 {
  background-color: #aad0e9; }

.bg-9 {
  background-color: #a5afb7; }

.bg-10 {
  background-color: #278ac7; }

.bg-11 {
  background-color: #15232f; }

.bg-12 {
  background-color: #e4e5e7; }

.bg-13 {
  background-color: #f6e4e4; }

.bg-14 {
  background-color: #2c3d4e; }

.bg-15 {
  background-color: #0b6196; }

.bg-black {
  background-color: black; }

.bg-error {
  background-color: #b15148; }

.bg-warning {
  background-color: #e6b739; }

.bg-customer {
  background-color: #ff9c00; }

/* Drop Shadows
   ========================================================================== */
.ds-1 {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); }

.ds-1b {
  box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.2); }

.ds-2 {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); }

.ds_3 {
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02); }

.ds_4 {
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05); }

.ds_5 {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06); }

/* Inner Shadows
   ========================================================================== */
.is_1 {
  box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.07); }

.is_2 {
  box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.14); }

.is_3 {
  box-shadow: inset 0 2px 2px rgba(0, 82, 134, 0.16); }

.is_4 {
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2); }

/* Inner Glow
   ========================================================================== */
.ig_1 {
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.5); }

.ig_2 {
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.21); }

/* Shadow + Glow
   ========================================================================== */
.dropglow-1 {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2), inset 0 1px rgba(255, 255, 255, 0.21); }

.dropglow-2 {
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05), inset 0 1px rgba(255, 255, 255, 0.21); }

.dropstroke-1 {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), inset 0 0 0 8px white; }

/* Inner Stroke
   ========================================================================== */
.inner_stroke {
  box-shadow: inset 0 0 0 8px white; }

/*  Background Gradients
 *  1: fallback/image non-cover color
    2: Safari 4+, Chrome 1-9
    3: Safari 5.1+, Mobile Safari, Chrome 10+
    4: Firefox 3.6+
    5: IE 10+
    6: Opera 11.10+


   ========================================================================== */
.bg-anchor {
  background-color: #33495f;
  /* {1} */
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#23394d), to(#33495f));
  /* {2} */
  background-image: -webkit-linear-gradient(top, #23394d, #33495f);
  /* {3} */
  background-image: -moz-linear-gradient(top, #23394d, #33495f);
  /* {4} */
  background-image: -ms-linear-gradient(top, #23394d, #33495f);
  /* {5} */
  background-image: -o-linear-gradient(top, #23394d, #33495f);
  /* {6} */ }

.bg-global-header {
  background-color: #107abb;
  /* {1} */
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#2a93d5), to(#107abb));
  /* {2} */
  background-image: -webkit-linear-gradient(top, #2a93d5, #107abb);
  /* {3} */
  background-image: -moz-linear-gradient(top, #2a93d5, #107abb);
  /* {4} */
  background-image: -ms-linear-gradient(top, #2a93d5, #107abb);
  /* {5} */
  background-image: -o-linear-gradient(top, #2a93d5, #107abb);
  /* {6} */ }

.bg-secondary-header {
  background-color: transparent;
  /* {1} */
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(71, 71, 71, 0.8)), to(rgba(45, 45, 45, 0.8)));
  /* {2} */
  background-image: -webkit-linear-gradient(top, rgba(71, 71, 71, 0.8), rgba(45, 45, 45, 0.8));
  /* {3} */
  background-image: -moz-linear-gradient(top, rgba(71, 71, 71, 0.8), rgba(45, 45, 45, 0.8));
  /* {4} */
  background-image: -ms-linear-gradient(top, rgba(71, 71, 71, 0.8), rgba(45, 45, 45, 0.8));
  /* {5} */
  background-image: -o-linear-gradient(top, rgba(71, 71, 71, 0.8), rgba(45, 45, 45, 0.8));
  /* {6} */ }

.bg-generic-1 {
  background-color: #efeff1;
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#efeff1), to(#e3e5e7));
  /* {2} */
  background-image: -webkit-linear-gradient(top, #efeff1, #e3e5e7);
  /* {3} */
  background-image: -moz-linear-gradient(top, #efeff1, #e3e5e7);
  /* {4} */
  background-image: -ms-linear-gradient(top, #efeff1, #e3e5e7);
  /* {5} */
  background-image: -o-linear-gradient(top, #efeff1, #e3e5e7);
  /* {6} */ }

.bg-generic-2 {
  background-color: rgba(255, 255, 255, 0);
  /* {1} */
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(255, 255, 255, 0)), to(rgba(255, 255, 255, 0.15)));
  /* {2} */
  background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.15));
  /* {3} */
  background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.15));
  /* {4} */
  background-image: -ms-linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.15));
  /* {5} */
  background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.15));
  /* {5} */ }

.bg-global-header-btn {
  background-color: #1482c7;
  /* {1} */
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#1482c7), to(#0565a0));
  /* {2} */
  background-image: -webkit-linear-gradient(top, #1482c7, #0565a0);
  /* {3} */
  background-image: -moz-linear-gradient(top, #1482c7, #0565a0);
  /* {4} */
  background-image: -ms-linear-gradient(top, #1482c7, #0565a0);
  /* {5} */
  background-image: -o-linear-gradient(top, #1482c7, #0565a0);
  /* {6} */ }

.bg-secondary-header-btn {
  background-color: #666666;
  /* {1} */
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#666666), to(#444444));
  /* {2} */
  background-image: -webkit-linear-gradient(top, #666666, #444444);
  /* {3} */
  background-image: -moz-linear-gradient(top, #666666, #444444);
  /* {4} */
  background-image: -ms-linear-gradient(top, #666666, #444444);
  /* {5} */
  background-image: -o-linear-gradient(top, #666666, #444444);
  /* {6} */ }

.bg-primary-btn {
  background-color: #3f9fd9;
  /* {1} */
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#3f9fd9), to(#2789c7));
  /* {2} */
  background-image: -webkit-linear-gradient(top, #3f9fd9, #2789c7);
  /* {3} */
  background-image: -moz-linear-gradient(top, #3f9fd9, #2789c7);
  /* {4} */
  background-image: -ms-linear-gradient(top, #3f9fd9, #2789c7);
  /* {5} */
  background-image: -o-linear-gradient(top, #3f9fd9, #2789c7);
  /* {6} */ }

.bg-secondary-btn {
  background-color: white;
  /* {1} */
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#f1f1f1));
  /* {2} */
  background-image: -webkit-linear-gradient(top, #ffffff, #f1f1f1);
  /* {3} */
  background-image: -moz-linear-gradient(top, #ffffff, #f1f1f1);
  /* {4} */
  background-image: -ms-linear-gradient(top, #ffffff, #f1f1f1);
  /* {5} */
  background-image: -o-linear-gradient(top, #ffffff, #f1f1f1);
  /* {6} */ }

/* ==========================================================================
   Horizontal Rules
   ========================================================================== */
.hr {
  border: 0;
  height: 1px; }

.hr--1 {
  background-color: #eceef0; }

.hr--2 {
  background-color: #cfd4d9; }

.hr--3 {
  background-color: #293f54; }

.hr--4 {
  background-color: #203345; }

/* ==========================================================================
   Border Radius
   ========================================================================== */
.brl {
  border-radius: 8px; }

.brm {
  border-radius: 5px; }

.brs {
  border-radius: 3px; }

.brc {
  border-radius: 100%; }

.brtop {
  border-radius: 8px 8px 0 0; }

.brtopm {
  border-radius: 5px 5px 0 0 !important; }

.brbotm {
  border-radius: 0 0 5px 5px; }

.brbotm-r {
  border-radius: 0 0 5px 0; }

.brbotm-l {
  border-radius: 0 0 0 5px; }

/* ==========================================================================
   Border Styles
   ========================================================================== */
.border {
  border-width: 1px;
  border-style: solid; }

.no-border {
  border: none !important; }

.border--1 {
  border-color: #1c78b1; }

.border--2 {
  border-color: #bbc0c4; }

.border--3 {
  border-color: #cfd4d9; }

.border--4 {
  border-color: #dfe0e1; }

.border--5 {
  border-color: #3c3d3e; }

.border--6 {
  border-color: #293f54; }

.border--7 {
  border-color: #203345; }

.border--8 {
  border-color: #eceef0; }

.border-top {
  border-top-width: 1px;
  border-top-style: solid; }

.border-bottom {
  border-bottom-width: 1px;
  border-bottom-style: solid; }

.border-sides {
  border-left-width: 1px;
  border-right-width: 1px;
  border-left-style: solid;
  border-right-style: solid; }

.border-left {
  border-left-width: 1px;
  border-left-style: solid; }

.border-right {
  border-right-width: 1px;
  border-right-style: solid; }

.border-top-none {
  border-top-width: 0; }

.border-left-none {
  border-left-width: 0; }

.border-top--4 {
  border-top-color: #203345; }

.border--input_default {
  border-color: #cfd0d2; }

.border--input_active {
  border-color: #bbc0c4; }

.border--header_button {
  border-color: #095c90; }

/* ==========================================================================
   Typography
   ========================================================================== */
.text-color-1 {
  color: #3c3d3e; }

.text-color-2 {
  color: #696e71; }

.text-color-3 {
  color: #afb5b9; }

.text-color-4 {
  color: #44596c; }

.text-color-5 {
  color: white; }

.text-color-6 {
  color: #969899; }

.text-color-7 {
  color: #aad0e9; }

.text-color-8 {
  color: #6e7e8a; }

.text-shadow {
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); }

.text-blue {
  color: #2a94d6; }

.text-error {
  color: #b15148; }

.text-warning {
  color: #e6b739; }

.text-customer {
  color: #ff9c00; }

.text-highlight {
  color: #ffec70; }

.text-success {
  color: #43b66a; }

.highlight {
  background-color: #ffec70; }

/* ==========================================================================
   Custom Objects
   ========================================================================== */
/* Standard Objects
   ========================================================================== */
.bg-brand-1 {
  background-color: #344a5f; }

.bg-brand-2 {
  background-color: #2a94d6; }

.bg-brand-3 {
  background-color: #f0f1f2; }

.bg-brand-4 {
  background-color: white; }

/* Standard Objects
   ========================================================================== */
.bg-account {
  background-color: #717ecd; }

.bg-campaign {
  background-color: #ee8f4d; }

.bg-case {
  background-color: #f0c45e; }

.bg-contact {
  background-color: #8b7fd5; }

.bg-contract {
  background-color: #66b966; }

.bg-dashboard {
  background-color: #c96358; }

.bg-document {
  background-color: #09a0a0; }

.bg-forecast {
  background-color: #7774d5; }

.bg-home {
  background-color: #44a12c; }

.bg-invoice {
  background-color: #17a380; }

.bg-lead {
  background-color: #ed7e58; }

.bg-opportunity {
  background-color: #f3ae4e; }

.bg-portal {
  background-color: #aec770; }

.bg-product {
  background-color: #aa7bc3; }

.bg-report {
  background-color: #ee6868; }

.bg-setup {
  background-color: #d75143; }

.bg-solution {
  background-color: #8ac26e; }

/* Standard Misc
   ========================================================================== */
.bg-approval {
  background-color: #41b568; }

.bg-apps {
  background-color: #5597bc; }

.bg-avatar {
  background-color: #55a2d2; }

.bg-email {
  background-color: #879eb3; }

.bg-event {
  background-color: #d96383; }

.bg-feed {
  background-color: #489dd0; }

.bg-file {
  background-color: #b19f7e; }

.bg-groups {
  background-color: #5e87de; }

.bg-link {
  background-color: #6078c2; }

.bg-note {
  background-color: #dcd861; }

.bg-people {
  background-color: #20aeb8; }

.bg-photo {
  background-color: #dedede; }

.bg-poll {
  background-color: #5181c4; }

.bg-post {
  background-color: #4eb1cb; }

.bg-record {
  background-color: #6cb76c; }

.bg-related-list {
  background-color: #4fac9c; }

.bg-social {
  background-color: #e0709c; }

.bg-task {
  background-color: #4ab471; }

.bg-thanks {
  background-color: #cf5c60; }

.bg-today {
  background-color: #dd6195; }

/* Standard 3rd party
   ========================================================================== */
.bg-files {
  background-color: #489dd0; }

.bg-concur {
  background-color: #48b4b8; }

.bg-dropbox {
  background-color: #67a9f0; }

.bg-evernote {
  background-color: #88b861; }

/* Standard Case
   ========================================================================== */
.bg-answer-best {
  background-color: #eac95a; }

.bg-answer-private {
  background-color: #eac95a; }

.bg-answer-public {
  background-color: #eac95a; }

.bg-article {
  background-color: #eac95a; }

.bg-case-change-status {
  background-color: #eac95a; }

.bg-case-comment {
  background-color: #eac95a; }

.bg-case-email {
  background-color: #eac95a; }

.bg-case-log-a-call {
  background-color: #eac95a; }

.bg-case-transcript {
  background-color: #eac95a; }

/* Standard Custom
   ========================================================================== */
.bg-custom-1 {
  background-color: #ff7b84; }

.bg-custom-2 {
  background-color: #cfd05c; }

.bg-custom-3 {
  background-color: #ecb46c; }

.bg-custom-4 {
  background-color: #e1d951; }

.bg-custom-5 {
  background-color: #9fdb66; }

.bg-custom-6 {
  background-color: #54c473; }

.bg-custom-7 {
  background-color: #6a89e5; }

.bg-custom-8 {
  background-color: #50ceb9; }

.bg-custom-9 {
  background-color: #6b9ee2; }

.bg-custom-10 {
  background-color: #6488e3; }

.bg-custom-11 {
  background-color: #8784ea; }

.bg-custom-12 {
  background-color: #dc71d1; }

.bg-custom-13 {
  background-color: #df6184; }

.bg-custom-14 {
  background-color: #3cc2b3; }

.bg-custom-15 {
  background-color: #f77e75; }

.bg-custom-16 {
  background-color: #e9af67; }

.bg-custom-17 {
  background-color: #acd360; }

.bg-custom-18 {
  background-color: #4dca76; }

.bg-custom-19 {
  background-color: #3abeb1; }

.bg-custom-20 {
  background-color: #48c7c8; }

.bg-custom-21 {
  background-color: #8a7aed; }

.bg-custom-22 {
  background-color: #8b85f9; }

.bg-custom-23 {
  background-color: #b070e6; }

.bg-custom-24 {
  background-color: #e56798; }

.bg-custom-25 {
  background-color: #e46fbe; }

.bg-custom-26 {
  background-color: #7698f0; }

.bg-custom-27 {
  background-color: #5ab0d2; }

.bg-custom-28 {
  background-color: #89c059; }

.bg-custom-29 {
  background-color: #bdd25f; }

.bg-custom-30 {
  background-color: #f59f71; }

.bg-custom-31 {
  background-color: #eb687f; }

.bg-custom-32 {
  background-color: #38c393; }

.bg-custom-33 {
  background-color: #97cf5d; }

.bg-custom-34 {
  background-color: #d58a6a; }

.bg-custom-35 {
  background-color: #e9637e; }

.bg-custom-36 {
  background-color: #d472d4; }

.bg-custom-37 {
  background-color: #8c89f2; }

.bg-custom-38 {
  background-color: #53b6d7; }

.bg-custom-39 {
  background-color: #4fbe75; }

.bg-custom-40 {
  background-color: #83c75e; }

.bg-custom-41 {
  background-color: #43b5b5; }

.bg-custom-42 {
  background-color: #cfd05b; }

.bg-custom-43 {
  background-color: #7f93f9; }

.bg-custom-44 {
  background-color: #c8ca58; }

.bg-custom-45 {
  background-color: #d95879; }

.bg-custom-46 {
  background-color: #67a5e7; }

.bg-custom-47 {
  background-color: #5fcc64; }

.bg-custom-48 {
  background-color: #ef697f; }

.bg-custom-49 {
  background-color: #e25c80; }

.bg-custom-50 {
  background-color: #49bcd3; }

.bg-custom-51 {
  background-color: #d8c760; }

.bg-custom-52 {
  background-color: #ee8e6f; }

.bg-custom-53 {
  background-color: #f36e83; }

.bg-custom-54 {
  background-color: #ea70b1; }

.bg-custom-55 {
  background-color: #d66ee0; }

.bg-custom-56 {
  background-color: #718deb; }

.bg-custom-57 {
  background-color: #5a9cdd; }

.bg-custom-58 {
  background-color: #34b59d; }

.bg-custom-59 {
  background-color: #e3d067; }

.bg-custom-60 {
  background-color: #bf5a88; }

.bg-custom-61 {
  background-color: #f57376; }

.bg-custom-62 {
  background-color: #6b92dc; }

.bg-custom-63 {
  background-color: #7ccf60; }

.bg-custom-64 {
  background-color: #618fd8; }

.bg-custom-65 {
  background-color: #f279ab; }

.bg-custom-66 {
  background-color: #d8be5f; }

.bg-custom-67 {
  background-color: #f87d76; }

.bg-custom-68 {
  background-color: #f26979; }

.bg-custom-69 {
  background-color: #ed6387; }

.bg-custom-70 {
  background-color: #e769b4; }

.bg-custom-71 {
  background-color: #e36ee3; }

.bg-custom-72 {
  background-color: #8d9bfb; }

.bg-custom-73 {
  background-color: #679ef0; }

.bg-custom-74 {
  background-color: #41c8a0; }

.bg-custom-75 {
  background-color: #cd9f65; }

.bg-custom-76 {
  background-color: #db6d7a; }

.bg-custom-77 {
  background-color: #b55d5b; }

.bg-custom-78 {
  background-color: #5a95dd; }

.bg-custom-79 {
  background-color: #8ed363; }

.bg-custom-80 {
  background-color: #659ad5; }

.bg-custom-81 {
  background-color: #da627f; }

.bg-custom-82 {
  background-color: #d15b97; }

.bg-custom-83 {
  background-color: #e7806f; }

.bg-custom-84 {
  background-color: #f6707b; }

.bg-custom-85 {
  background-color: #f26891; }

.bg-custom-86 {
  background-color: #e260ab; }

.bg-custom-87 {
  background-color: #d876e5; }

.bg-custom-88 {
  background-color: #996fe6; }

.bg-custom-89 {
  background-color: #3e99be; }

.bg-custom-90 {
  background-color: #22a48a; }

.bg-custom-91 {
  background-color: #bf7b66; }

.bg-custom-92 {
  background-color: #517e82; }

.bg-custom-93 {
  background-color: #904d4c; }

.bg-custom-94 {
  background-color: #439cba; }

.bg-custom-95 {
  background-color: #8bcf6a; }

.bg-custom-96 {
  background-color: #6d9de3; }

.bg-custom-97 {
  background-color: #dd6085; }

.bg-custom-98 {
  background-color: #e1be5c; }

.bg-custom-99 {
  background-color: #f0856e; }

.bg-custom-100 {
  background-color: #e15d76; }

/* ==========================================================================
   Text utilities
   ========================================================================== */
/**
 * Text truncation
 *
 * Prevent text from wrapping onto multiple lines, and truncate with an
 * ellipsis.
 *
 * 1. Ensure that the node has a maximum width after which truncation can
 *    occur.
 * 2. Fix for IE 8/9 if `word-wrap: break-word` is in effect on ancestor
 *    nodes.
 */
.text-truncate {
  max-width: 100%;
  /* 1 */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-wrap: normal;
  /* 2 */ }

/**
 * Word breaking
 *
 * Break strings when their length exceeds the width of their container.
 */
.text-break {
  word-break: break-all;
  word-break: break-word;
  word-wrap: break-word; }

/* -------------------------------------------------------------------------- */
/**
 * Horizontal text alignment
 */
.tc {
  text-align: center !important; }

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

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

@media only screen and (min-width: 40em) {
  .tc-ns {
    text-align: center !important; }
  .tl-ns {
    text-align: left !important; }
  .tr-ns {
    text-align: right !important; } }

@media only screen and (min-width: 40em) and (max-width: 64em) {
  .tc-m {
    text-align: center !important; }
  .tl-m {
    text-align: left !important; }
  .tr-m {
    text-align: right !important; } }

@media only screen and (min-width: 64em) {
  .tc-l {
    text-align: center !important; }
  .tl-l {
    text-align: left !important; }
  .tr-l {
    text-align: right !important; } }

.caps {
  text-transform: uppercase;
  letter-spacing: 0.05em; }

/**
 * Vertical text alignment
 *
 * To vertically center a single line of text within an element with a known height, set the line height of that text element to the height of the parent element.
 * */
.lh-14 {
  line-height: 11px !important; }

.lh-16 {
  line-height: 16px !important; }

.lh-30 {
  line-height: 28px !important; }

.lh-44 {
  line-height: 42px !important; }

.lh-20 {
  line-height: 20px !important; }

/**
 * Text: Hide Accessibly
 *
 * Hides text from being visible but allows screen readers access to the content
 * Ref: http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 *  */
.tha {
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px 1px 1px 1px);
  /* IE6, IE7 */
  clip: rect(1px, 1px, 1px, 1px); }

/* ==========================================================================
 
   FONTS
   - Proxima Nova Soft [Regular, Semibold, Medium, Bold]

   ========================================================================== */
@font-face {
  font-family: 'ProximaNova';
  src: url("fonts/proximanovasoft-regular-webfont.ttf") format('truetype');
  font-weight: 300;
  font-style: normal; }

@font-face {
  font-family: 'ProximaNova';
  src: url("fonts/proximanovasoft-medium-webfont.ttf") format('truetype');
  font-weight: 500;
  font-style: normal; }

@font-face {
  font-family: 'ProximaNova';
  src: url("fonts/proximanovasoft-semibold-webfont.ttf") format('truetype');
  font-weight: 700;
  font-style: normal; }

@font-face {
  font-family: 'ProximaNova';
  src: url("fonts/proximanovasoft-bold-webfont.ttf") format('truetype');
  font-weight: 900;
  font-style: normal; }

/* ==========================================================================

   TYPE

   - Type Scale
   - Dont Weight
   - Text Transforms

   ========================================================================== */
p {
  font-size: 0.875rem;
  color: #525354; }

/* Type Scale
   ========================================================================== */
h1, .h1, .f1 {
  font-size: 22px; }

h2, .h2, .f2 {
  font-size: 18px; }

h3, .h3, .f3 {
  font-size: 16px; }

h4, .h4, .f4 {
  font-size: 15px; }

h5, .h5, .f5 {
  font-size: 14px; }

h6, .h6, .f6 {
  font-size: 13px; }

@media only screen and (min-width: 40em) {
  .f1-ns {
    font-size: 22px; }
  .f2-ns {
    font-size: 18px; }
  .f3-ns {
    font-size: 16px; }
  .f4-ns {
    font-size: 15px; }
  .f5-ns {
    font-size: 14px; }
  .f6-ns {
    font-size: 13px; } }

@media only screen and (min-width: 40em) and (max-width: 64em) {
  .f1-m {
    font-size: 22px; }
  .f2-m {
    font-size: 18px; }
  .f3-m {
    font-size: 16px; }
  .f4-m {
    font-size: 15px; }
  .f5-m {
    font-size: 14px; }
  .f6-m {
    font-size: 13px; } }

@media only screen and (min-width: 64em) {
  .f1-l {
    font-size: 22px; }
  .f2-l {
    font-size: 18px; }
  .f3-l {
    font-size: 16px; }
  .f4-l {
    font-size: 15px; }
  .f5-l {
    font-size: 14px; }
  .f6-l {
    font-size: 13px; } }

.icon1 {
  font-size: 30px; }

/* Font weights
   ========================================================================== */
.thin {
  font-weight: 100; }

.fw-normal {
  font-weight: 300; }

.fw-medium {
  font-weight: 500; }

.fw-semibold {
  font-weight: 700; }

.fw-bold, .b {
  font-weight: 900; }

/* Text Transforms
   ========================================================================== */
.caps {
  text-transform: uppercase; }

.lower {
  text-transform: lowercase; }

.lh-copy {
  line-height: 1.6; }

.lh-title {
  line-height: 1.3; }

html {
  font-size: 100%; }

body {
  color: #7e7f80;
  background-color: #f0f1f2;
  font-family: ProximaNova, Arial, sans-serif;
  font-weight: 300;
  -webkit-font-smoothing: antialiased; }

a {
  text-decoration: none; }
  a:link {
    color: #006eb3; }
  a:visited {
    color: #006eb3; }
  a:hover {
    color: #005c94; }
  a:active {
    color: #006eb3; }

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

.group:after {
  clear: both; }

.opacity-0 {
  opacity: 0; }

/* Dim the opacity of active links */
.active-dim:active {
  opacity: 0.5; }

.active--list-1:active {
  background-color: #e8eaeb; }

.active--list-2:active {
  background-color: #293f54; }

.active--list-3:active {
  background-color: #fafafa; }

.active--icon-1:active {
  color: #105b89; }

.active--icon-2:active {
  color: #3c3d3e; }

/* Dividers  e.g. hr is used in cards. extended in card-divider */
hr, .divider {
  background: #f0f1f2;
  border: 0;
  height: 1px;
  margin-top: 0.875em;
  margin-bottom: 0.875em; }

/* ==========================================================================
   ICONS

   - Base Icon class
   - Icon Extensions
      - Standard Icons
      - Standard Misc
      - Standard 3rd Party
      - Standard Case
      - Standard Custom
   ========================================================================== */
/* Icons
   ========================================================================== */
.icon {
  display: inline-block;
  background-position: 50%;
  background-repeat: no-repeat;
  border-radius: 5px; }

/* Standard Icons
   ========================================================================== */
.icon--account {
  background-color: #717ecd;
  background-image: url("assets/icons/standard/account_120.png"); }

.icon--campaign {
  background-color: #ee8f4d;
  background-image: url("assets/icons/standard/campaign_120.png"); }

.icon--case {
  background-color: #f0c45e;
  background-image: url("assets/icons/standard/case_120.png"); }

.icon--contact {
  background-color: #8b7fd5;
  background-image: url("assets/icons/standard/contact_120.png"); }

.icon--contract {
  background-color: #66b966;
  background-image: url("assets/icons/standard/contract_120.png"); }

.icon--dashboard {
  background-color: #c96358;
  background-image: url("assets/icons/standard/dashboard_120.png"); }

.icon--document {
  background-color: #09a0a0; }

.icon--forecast {
  background-color: #7774d5; }

.icon--home {
  background-color: #44a12c; }

.icon--invoice {
  background-color: #17a380; }

.icon--lead {
  background-color: #ed7e58;
  background-image: url("assets/icons/standard/lead_120.png"); }

.icon--opportunity {
  background-color: #f3ae4e;
  background-image: url("assets/icons/standard/opportunity_120.png"); }

.icon--portal {
  background-color: #aec770;
  background-image: url("assets/icons/standard/portal_120.png"); }

.icon--product {
  background-color: #aa7bc3; }

.icon--report {
  background-color: #ee6868; }

.icon--setup {
  background-color: #d75143; }

.icon--solution {
  background-color: #8ac26e; }

/* Standard Misc
   ========================================================================== */
.icon--avatar {
  background-color: #55a2d2;
  background-image: url("assets/icons/standard/avatar_120.png"); }

.icon--approval {
  background-color: #41b568;
  background-image: url("assets/icons/standard/approval_120.png"); }

.icon--apps {
  background-color: #5597bc;
  background-image: url("assets/icons/standard/apps_120.png"); }

.icon--collaborationgroup {
  background-color: #5e87de;
  background-image: url("assets/icons/standard/groups_120.png"); }

.icon--email {
  background-color: #879eb3;
  background-image: url("assets/icons/standard/email_120.png"); }

.icon--event {
  background-color: #d96383;
  background-image: url("assets/icons/standard/event_120.png"); }

.icon--feed {
  background-color: #489dd0;
  background-image: url("assets/icons/standard/feed_120.png"); }

.icon--file {
  background-color: #b19f7e;
  background-image: url("assets/icons/standard/file_120.png"); }

.icon--groups {
  background-color: #5e87de;
  background-image: url("assets/icons/standard/groups_120.png"); }

.icon--link {
  background-color: #6078c2;
  background-image: url("assets/icons/standard/link_120.png"); }

.icon--note {
  background-color: #dcd861;
  background-image: url("assets/icons/standard/note_120.png"); }

.icon--people {
  background-color: #20aeb8;
  background-image: url("assets/icons/standard/people_120.png"); }

.icon--photo {
  background-color: #dedede;
  background-image: url("assets/icons/standard/photo_120.png"); }

.icon--poll {
  background-color: #5181c4;
  background-image: url("assets/icons/standard/poll_120.png"); }

.icon--post {
  background-color: #4eb1cb;
  background-image: url("assets/icons/standard/post_120.png"); }

.icon--record {
  background-color: #6cb76c;
  background-image: url("assets/icons/standard/record_120.png"); }

.icon--related-list {
  background-color: #4fac9c;
  background-image: url("assets/icons/standard/related_list_120.png"); }

.icon--social {
  background-color: #e0709c;
  background-image: url("assets/icons/standard/social_post_120.png"); }

.icon--task {
  background-color: #4ab471;
  background-image: url("assets/icons/standard/task_120.png"); }

.icon--thanks {
  background-color: #cf5c60;
  background-image: url("assets/icons/standard/thanks_120.png"); }

.icon--today {
  background-color: #dd6195;
  background-image: url("assets/icons/standard/today_120.png"); }

.icon--canvas {
  background-color: #849cb1;
  background-image: url("assets/icons/standard/canvas_120.png"); }

.icon--custom {
  background-color: #849cb1;
  background-image: url("assets/icons/standard/custom_120.png"); }

.icon--default {
  background-color: #849cb1;
  background-image: url("assets/icons/standard/default_120.png"); }

.icon--empty {
  background-color: #849cb1;
  background-image: url("assets/icons/standard/empty_120.png"); }

.icon--avatar-loading {
  background-color: #bac3cc;
  background-image: url("assets/icons/standard/avatar_loading_120.png"); }

.icon--blank-loading {
  background-color: #bac3cc;
  background-image: url("assets/icons/standard/blank_loading_120.png"); }

.icon--groups-loading {
  background-color: #bac3cc;
  background-image: url("assets/icons/standard/groups_loading_120.png"); }

.icon--thanks-loading {
  background-color: #bac3cc;
  background-image: url("assets/icons/standard/thanks_loading_120.png"); }

/* Standard 3rd Party
   ========================================================================== */
.icon--files {
  background-color: #489dd0;
  background-image: url("assets/icons/standard/chatterbox_120.png"); }

.icon--concur {
  background-color: #48b4b8;
  background-image: url("assets/icons/standard/concur_120.png"); }

.icon--dropbox {
  background-color: #67a9f0;
  background-image: url("assets/icons/standard/dropbox_120.png"); }

.icon--evernote {
  background-color: #88b861;
  background-image: url("assets/icons/standard/evernote_120.png"); }

/* Standard Case
   ========================================================================== */
.icon--answer-best {
  background-color: #eac95a;
  background-image: url("assets/icons/standard/answer_best_120.png"); }

.icon--answer-private {
  background-color: #eac95a;
  background-image: url("assets/icons/standard/answer_private_120.png"); }

.icon--answer-public {
  background-color: #eac95a;
  background-image: url("assets/icons/standard/answer_public_120.png"); }

.icon--article {
  background-color: #eac95a;
  background-image: url("assets/icons/standard/article_120.png"); }

.icon--case-change-status {
  background-color: #eac95a;
  background-image: url("assets/icons/standard/case_change_status_120.png"); }

.icon--case-comment {
  background-color: #eac95a;
  background-image: url("assets/icons/standard/case_comment_120.png"); }

.icon--case-email {
  background-color: #eac95a;
  background-image: url("assets/icons/standard/case_email_120.png"); }

.icon--case-log-a-call {
  background-color: #eac95a;
  background-image: url("assets/icons/standard/case_log_a_call_120.png"); }

.icon--case-transcript {
  background-color: #eac95a;
  background-image: url("assets/icons/standard/case_transcript_120.png"); }

/* Standard Custom Icons
   ========================================================================== */
.icon--custom-1 {
  background-color: #ff7b84;
  background-image: url("assets/icons/custom/custom1_120.png"); }

.icon--custom-2 {
  background-color: #cfd05c;
  background-image: url("assets/icons/custom/custom2_120.png"); }

.icon--custom-3 {
  background-color: #ecb46c;
  background-image: url("assets/icons/custom/custom3_120.png"); }

.icon--custom-4 {
  background-color: #e1d951;
  background-image: url("assets/icons/custom/custom4_120.png"); }

.icon--custom-5 {
  background-color: #9fdb66;
  background-image: url("assets/icons/custom/custom5_120.png"); }

.icon--custom-6 {
  background-color: #54c473;
  background-image: url("assets/icons/custom/custom6_120.png"); }

.icon--custom-7 {
  background-color: #6a89e5;
  background-image: url("assets/icons/custom/custom7_120.png"); }

.icon--custom-8 {
  background-color: #50ceb9;
  background-image: url("assets/icons/custom/custom8_120.png"); }

.icon--custom-9 {
  background-color: #6b9ee2;
  background-image: url("assets/icons/custom/custom9_120.png"); }

.icon--custom-10 {
  background-color: #6488e3;
  background-image: url("assets/icons/custom/custom10_120.png"); }

.icon--custom-11 {
  background-color: #8784ea;
  background-image: url("assets/icons/custom/custom11_120.png"); }

.icon--custom-12 {
  background-color: #dc71d1;
  background-image: url("assets/icons/custom/custom12_120.png"); }

.icon--custom-13 {
  background-color: #df6184;
  background-image: url("assets/icons/custom/custom13_120.png"); }

.icon--custom-14 {
  background-color: #3cc2b3;
  background-image: url("assets/icons/custom/custom14_120.png"); }

.icon--custom-15 {
  background-color: #f77e75;
  background-image: url("assets/icons/custom/custom15_120.png"); }

.icon--custom-16 {
  background-color: #e9af67;
  background-image: url("assets/icons/custom/custom16_120.png"); }

.icon--custom-17 {
  background-color: #acd360;
  background-image: url("assets/icons/custom/custom17_120.png"); }

.icon--custom-18 {
  background-color: #4dca76;
  background-image: url("assets/icons/custom/custom18_120.png"); }

.icon--custom-19 {
  background-color: #3abeb1;
  background-image: url("assets/icons/custom/custom19_120.png"); }

.icon--custom-20 {
  background-color: #48c7c8;
  background-image: url("assets/icons/custom/custom20_120.png"); }

.icon--custom-21 {
  background-color: #8a7aed;
  background-image: url("assets/icons/custom/custom21_120.png"); }

.icon--custom-22 {
  background-color: #8b85f9;
  background-image: url("assets/icons/custom/custom22_120.png"); }

.icon--custom-23 {
  background-color: #b070e6;
  background-image: url("assets/icons/custom/custom23_120.png"); }

.icon--custom-24 {
  background-color: #e56798;
  background-image: url("assets/icons/custom/custom24_120.png"); }

.icon--custom-25 {
  background-color: #e46fbe;
  background-image: url("assets/icons/custom/custom25_120.png"); }

.icon--custom-26 {
  background-color: #7698f0;
  background-image: url("assets/icons/custom/custom26_120.png"); }

.icon--custom-27 {
  background-color: #5ab0d2;
  background-image: url("assets/icons/custom/custom27_120.png"); }

.icon--custom-28 {
  background-color: #89c059;
  background-image: url("assets/icons/custom/custom28_120.png"); }

.icon--custom-29 {
  background-color: #bdd25f;
  background-image: url("assets/icons/custom/custom29_120.png"); }

.icon--custom-30 {
  background-color: #f59f71;
  background-image: url("assets/icons/custom/custom30_120.png"); }

.icon--custom-31 {
  background-color: #eb687f;
  background-image: url("assets/icons/custom/custom31_120.png"); }

.icon--custom-32 {
  background-color: #38c393;
  background-image: url("assets/icons/custom/custom32_120.png"); }

.icon--custom-33 {
  background-color: #97cf5d;
  background-image: url("assets/icons/custom/custom33_120.png"); }

.icon--custom-34 {
  background-color: #d58a6a;
  background-image: url("assets/icons/custom/custom34_120.png"); }

.icon--custom-35 {
  background-color: #e9637e;
  background-image: url("assets/icons/custom/custom35_120.png"); }

.icon--custom-36 {
  background-color: #d472d4;
  background-image: url("assets/icons/custom/custom36_120.png"); }

.icon--custom-37 {
  background-color: #8c89f2;
  background-image: url("assets/icons/custom/custom37_120.png"); }

.icon--custom-38 {
  background-color: #53b6d7;
  background-image: url("assets/icons/custom/custom38_120.png"); }

.icon--custom-39 {
  background-color: #4fbe75;
  background-image: url("assets/icons/custom/custom39_120.png"); }

.icon--custom-40 {
  background-color: #83c75e;
  background-image: url("assets/icons/custom/custom40_120.png"); }

.icon--custom-41 {
  background-color: #43b5b5;
  background-image: url("assets/icons/custom/custom41_120.png"); }

.icon--custom-42 {
  background-color: #cfd05b;
  background-image: url("assets/icons/custom/custom42_120.png"); }

.icon--custom-43 {
  background-color: #7f93f9;
  background-image: url("assets/icons/custom/custom43_120.png"); }

.icon--custom-44 {
  background-color: #c8ca58;
  background-image: url("assets/icons/custom/custom44_120.png"); }

.icon--custom-45 {
  background-color: #d95879;
  background-image: url("assets/icons/custom/custom45_120.png"); }

.icon--custom-46 {
  background-color: #67a5e7;
  background-image: url("assets/icons/custom/custom46_120.png"); }

.icon--custom-47 {
  background-color: #5fcc64;
  background-image: url("assets/icons/custom/custom47_120.png"); }

.icon--custom-48 {
  background-color: #ef697f;
  background-image: url("assets/icons/custom/custom48_120.png"); }

.icon--custom-49 {
  background-color: #e25c80;
  background-image: url("assets/icons/custom/custom49_120.png"); }

.icon--custom-50 {
  background-color: #49bcd3;
  background-image: url("assets/icons/custom/custom50_120.png"); }

.icon--custom-51 {
  background-color: #d8c760;
  background-image: url("assets/icons/custom/custom51_120.png"); }

.icon--custom-52 {
  background-color: #ee8e6f;
  background-image: url("assets/icons/custom/custom52_120.png"); }

.icon--custom-53 {
  background-color: #f36e83;
  background-image: url("assets/icons/custom/custom53_120.png"); }

.icon--custom-54 {
  background-color: #ea70b1;
  background-image: url("assets/icons/custom/custom54_120.png"); }

.icon--custom-55 {
  background-color: #d66ee0;
  background-image: url("assets/icons/custom/custom55_120.png"); }

.icon--custom-56 {
  background-color: #718deb;
  background-image: url("assets/icons/custom/custom56_120.png"); }

.icon--custom-57 {
  background-color: #5a9cdd;
  background-image: url("assets/icons/custom/custom57_120.png"); }

.icon--custom-58 {
  background-color: #34b59d;
  background-image: url("assets/icons/custom/custom58_120.png"); }

.icon--custom-59 {
  background-color: #e3d067;
  background-image: url("assets/icons/custom/custom59_120.png"); }

.icon--custom-60 {
  background-color: #bf5a88;
  background-image: url("assets/icons/custom/custom60_120.png"); }

.icon--custom-61 {
  background-color: #f57376;
  background-image: url("assets/icons/custom/custom61_120.png"); }

.icon--custom-62 {
  background-color: #6b92dc;
  background-image: url("assets/icons/custom/custom62_120.png"); }

.icon--custom-63 {
  background-color: #7ccf60;
  background-image: url("assets/icons/custom/custom63_120.png"); }

.icon--custom-64 {
  background-color: #618fd8;
  background-image: url("assets/icons/custom/custom64_120.png"); }

.icon--custom-65 {
  background-color: #f279ab;
  background-image: url("assets/icons/custom/custom65_120.png"); }

.icon--custom-66 {
  background-color: #d8be5f;
  background-image: url("assets/icons/custom/custom66_120.png"); }

.icon--custom-67 {
  background-color: #f87d76;
  background-image: url("assets/icons/custom/custom67_120.png"); }

.icon--custom-68 {
  background-color: #f26979;
  background-image: url("assets/icons/custom/custom68_120.png"); }

.icon--custom-69 {
  background-color: #ed6387;
  background-image: url("assets/icons/custom/custom69_120.png"); }

.icon--custom-70 {
  background-color: #e769b4;
  background-image: url("assets/icons/custom/custom70_120.png"); }

.icon--custom-71 {
  background-color: #e36ee3;
  background-image: url("assets/icons/custom/custom71_120.png"); }

.icon--custom-72 {
  background-color: #8d9bfb;
  background-image: url("assets/icons/custom/custom72_120.png"); }

.icon--custom-73 {
  background-color: #679ef0;
  background-image: url("assets/icons/custom/custom73_120.png"); }

.icon--custom-74 {
  background-color: #41c8a0;
  background-image: url("assets/icons/custom/custom74_120.png"); }

.icon--custom-75 {
  background-color: #cd9f65;
  background-image: url("assets/icons/custom/custom75_120.png"); }

.icon--custom-76 {
  background-color: #db6d7a;
  background-image: url("assets/icons/custom/custom76_120.png"); }

.icon--custom-77 {
  background-color: #b55d5b;
  background-image: url("assets/icons/custom/custom77_120.png"); }

.icon--custom-78 {
  background-color: #5a95dd;
  background-image: url("assets/icons/custom/custom78_120.png"); }

.icon--custom-79 {
  background-color: #8ed363;
  background-image: url("assets/icons/custom/custom79_120.png"); }

.icon--custom-80 {
  background-color: #659ad5;
  background-image: url("assets/icons/custom/custom80_120.png"); }

.icon--custom-81 {
  background-color: #da627f;
  background-image: url("assets/icons/custom/custom81_120.png"); }

.icon--custom-82 {
  background-color: #d15b97;
  background-image: url("assets/icons/custom/custom82_120.png"); }

.icon--custom-83 {
  background-color: #e7806f;
  background-image: url("assets/icons/custom/custom83_120.png"); }

.icon--custom-84 {
  background-color: #f6707b;
  background-image: url("assets/icons/custom/custom84_120.png"); }

.icon--custom-85 {
  background-color: #f26891;
  background-image: url("assets/icons/custom/custom85_120.png"); }

.icon--custom-86 {
  background-color: #e260ab;
  background-image: url("assets/icons/custom/custom86_120.png"); }

.icon--custom-87 {
  background-color: #d876e5;
  background-image: url("assets/icons/custom/custom87_120.png"); }

.icon--custom-88 {
  background-color: #996fe6;
  background-image: url("assets/icons/custom/custom88_120.png"); }

.icon--custom-89 {
  background-color: #3e99be;
  background-image: url("assets/icons/custom/custom89_120.png"); }

.icon--custom-90 {
  background-color: #22a48a;
  background-image: url("assets/icons/custom/custom90_120.png"); }

.icon--custom-91 {
  background-color: #bf7b66;
  background-image: url("assets/icons/custom/custom91_120.png"); }

.icon--custom-92 {
  background-color: #517e82;
  background-image: url("assets/icons/custom/custom92_120.png"); }

.icon--custom-93 {
  background-color: #904d4c;
  background-image: url("assets/icons/custom/custom93_120.png"); }

.icon--custom-94 {
  background-color: #439cba;
  background-image: url("assets/icons/custom/custom94_120.png"); }

.icon--custom-95 {
  background-color: #8bcf6a;
  background-image: url("assets/icons/custom/custom95_120.png"); }

.icon--custom-96 {
  background-color: #6d9de3;
  background-image: url("assets/icons/custom/custom96_120.png"); }

.icon--custom-97 {
  background-color: #dd6085;
  background-image: url("assets/icons/custom/custom97_120.png"); }

.icon--custom-98 {
  background-color: #e1be5c;
  background-image: url("assets/icons/custom/custom98_120.png"); }

.icon--custom-99 {
  background-color: #f0856e;
  background-image: url("assets/icons/custom/custom99_120.png"); }

.icon--custom-100 {
  background-color: #e15d76;
  background-image: url("assets/icons/custom/custom100_120.png"); }

/* Sizing
   ========================================================================== */
.icon--s {
  width: 56px;
  height: 56px;
  background-size: 100%; }

.icon--m {
  width: 60px;
  height: 60px;
  background-size: 100%; }

.icon--l {
  width: 120px;
  height: 120px;
  background-size: 100%;
  border-radius: 8px; }

.icon--d {
  width: 100px;
  height: 100px;
  background-size: 100%;
  border-radius: 8px; }

/* ==========================================================================
Layout utilities
========================================================================== */
/**
 * Contain floats
 *
 * Make an element expand to contain floated children.
 * Uses pseudo-elements (micro clearfix).
 *
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of the
 *    element.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */
/**
 * REF: http://nicolasgallagher.com/micro-clearfix-hack/
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    contenteditable attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that are clearfixed.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */
.clear:before, .clear:after {
  content: " ";
  /* 1 */
  display: table;
  /* 2 */ }

.clear:after {
  clear: both; }

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.clear {
  *zoom: 1; }

/**
 * New block formatting context
 *
 * This affords some useful properties to the element. It won't wrap under
 * floats. Will also contain any floated children.

 * N.B. This will clip overflow. Use the alternative method below if this is
 * problematic.
 */
.nbfc {
  overflow: hidden; }

/**
 * New block formatting context (alternative)
 *
 * Alternative method when overflow must not be clipped.
 *
 * 1. Create a new block formatting context (NBFC).
 * 2. Avoid shrink-wrap behaviour of table-cell.
 *
 * N.B. This breaks down in some browsers when elements within this element
 * exceed its width.
 */
.nbfc-alt {
  display: table-cell;
  /* 1 */
  width: 10000px;
  /* 2 */ }

/* -------------------------------------------------------------------------- */
/**
 * Floats
 */
.fl {
  float: left; }

.fr {
  float: right; }

.fn {
  float: none; }

@media only screen and (min-width: 40em) {
  .fl-ns {
    float: left; }
  .fr-ns {
    float: right; }
  .fn-ns {
    float: none; } }

@media only screen and (min-width: 40em) and (max-width: 64em) {
  .fl-m {
    float: left; }
  .fr-m {
    float: right; }
  .fn-m {
    float: none; } }

@media only screen and (min-width: 64em) {
  .fl-l {
    float: left; }
  .fr-l {
    float: right; }
  .fn-l {
    float: none; } }

.cl {
  clear: left; }

.cr {
  clear: right; }

.cb {
  clear: both; }

/* -------------------------------------------------------------------------- */
/**
 * Object position helpers.
 *
 * Float an object left or right, and include some space between the object and
 * proceeding objects.
 */
.obj-left {
  float: left;
  margin-right: 10px; }

.obj-right {
  float: right;
  margin-left: 10px; }

/**
 * 1. Remove excess space below images
 * 2. Guard against `img {max-width:100%}` hiding this utility's images in
 *    IE 8.
 */
.obj-left img, .obj-right img {
  display: block;
  /* 1 */
  max-width: none;
  /* 2 */ }

/* -------------------------------------------------------------------------- */
/**
 * Vertical alignment utilities
 * Depends on an appropriate `display` value.
 */
.a-top {
  vertical-align: top; }

.a-mid {
  vertical-align: middle; }

.a-base {
  vertical-align: baseline; }

.a-btm {
  vertical-align: bottom; }

/* -------------------------------------------------------------------------- */
/**
 * Positioning utilities
 * Set the position of an element to relative or absolute.
 * Also contains some utilities for absolute positioning in corners.
 */
.pos-rel {
  position: relative; }

.pos-abs {
  position: absolute; }

.pos-fix {
  position: fixed; }

.corner-tr {
  top: 0;
  right: 0; }

.corner-br {
  bottom: 0;
  right: 0; }

.corner-tl {
  top: 0;
  left: 0; }

.corner-bl {
  bottom: 0;
  left: 0; }

/* -------------------------------------------------------------------------- */
/**
 * Flag object
 * The flag object allows you to display an image or icon with some text
 * next to it, with their vertical middles aligned.
 */
.flag {
  display: table;
  width: 100%; }

.flag--image, .flag--body {
  display: table-cell;
  vertical-align: middle; }
  .flag--top .flag--image, .flag--top .flag--body {
    vertical-align: top; }
  .flag--bottom .flag--image, .flag--bottom .flag--body {
    vertical-align: bottom; }

.flag--image > img {
  display: block;
  max-width: none; }
.flag--image > span {
  display: block;
  max-width: none; }
.flag--image > time {
  display: block;
  max-width: none;
  white-space: nowrap; }
.flag--rev .flag--image {
  padding-right: 0;
  padding-left: 10px; }

.flag--body {
  width: 100%; }

/* Z-Index
 * Try not to use these.
 */
.z-below {
  z-index: -2;
  position: relative; }

.z-modal {
  z-index: 100; }

.z-overlay {
  z-index: 99; }

/* ==========================================================================
   Display utilities
   ========================================================================== */
/**
 * Display-type utilities
 */
.dn {
  display: none; }

.di {
  display: inline; }

.dib {
  display: inline-block; }

.db {
  display: block; }

.dt {
  display: table; }

.dtc {
  display: table-cell; }

@media only screen and (min-width: 40em) {
  .dn-ns {
    display: none; }
  .di-ns {
    display: inline; }
  .dib-ns {
    display: inline-block; }
  .db-ns {
    display: block; }
  .dt-ns {
    display: table; }
  .dtc-ns {
    display: table-cell; } }

@media only screen and (min-width: 40em) and (max-width: 64em) {
  .dn-m {
    display: none; }
  .di-m {
    display: inline; }
  .dib-m {
    display: inline-block; }
  .db-m {
    display: block; }
  .dt-m {
    display: table; }
  .dtc-m {
    display: table-cell; } }

@media only screen and (min-width: 64em) {
  .dn-l {
    display: none; }
  .di-l {
    display: inline; }
  .dib-l {
    display: inline-block; }
  .db-l {
    display: block; }
  .dt-l {
    display: table; }
  .dtc-l {
    display: table-cell; } }

/* ==========================================================================
   grid
   ========================================================================== */
/**
 * Core grid component
 * Make use of dimension utilities, or components that extend 'grid' in order
 * to apply particular widths to cells.
 *
 * Example uses:
 *
 * <div class="grid">
 *     <div class="grid-cell u-size1of2"></div>
 *     <div class="grid-cell u-size1of2"></div>
 *     <div class="grid-cell u-size1of3"></div>
 *     <div class="grid-cell u-size1of3"></div>
 * </div>
 *
 * <div class="grid grid--center">
 *     <div class="grid-cell u-size1of3"></div>
 *     <div class="grid-cell u-size1of3"></div>
 * </div>
 */
/* grid container
   ========================================================================== */
/**
 * Must only contain `grid` or `grid-cell` components as children.
 *
 * 1. Ensure consistent default alignment.
 * 2. Remove inter-unit whitespace that appears between `inline-block` child
 *    elements. Work for all non-monospace font-families.  If you're using a
 *    monospace base font, you will need to set the `grid` font-family to
 *   `sans-serif` and then redeclare the monospace font on the `grid-cell`
 *    objects.
 * 3. Protect against WebKit bug with optimizelegibility.
 */
.grid {
  display: block;
  padding: 0;
  margin: 0;
  text-align: left;
  /* 1 */
  letter-spacing: -0.31em;
  /* 2 */
  text-rendering: optimizespeed;
  /* 3 */ }

/* Opera hack */
.opera:-o-prefocus, .grid {
  word-spacing: -0.43em;
  /* 2 */ }

/**
 * Modifier: horizontally center all grid units
 * Allows for automatic unit centering irrespective of the number of
 * units in the grid.
 */
.grid--center {
  text-align: center; }

/* grid cell
   ========================================================================== */
/**
 * No explicit width by default. Rely on combining `grid-cell` with a dimension
 * utility or component that extends 'grid'.
 *
 * 1. Fundamentals of the non-float grid layout mechanism.
 * 2. Controls vertical positioning of units.
 * 3. Keeps content correctly aligned with the grid direction.
 * 4. Reset text defaults.
 */
.grid-cell {
  width: 100%;
  display: inline-block;
  /* 1 */
  margin: 0;
  padding: 0;
  vertical-align: top;
  /* 2 */
  text-align: left;
  /* 3 */
  letter-spacing: normal;
  /* 4 */
  word-spacing: normal;
  /* 4 */
  text-rendering: auto;
  /* 4 */ }

/**
 * Modifier: horizontally center one unit
 * Set a specific unit to be horizontally centered. Doesn't affect
 * any other units. Can still contain a child `grid` object.
 */
.grid-cell--center, .center {
  display: block;
  margin: 0 auto; }

/* ==========================================================================
   SUIT grid layouts
   ========================================================================== */
/**
 * Modifiers for the core 'suit-grid' component. These traits are pre-build
 * grids that provide different layouts at different breakpoints (supports 2
 * breakpoints).
 *
 * Example uses:
 *
 * <div class="grid v2-grid--2col v3-grid--4col">
 *     <div class="grid-cell grid-cell--1"></div>
 *     <div class="grid-cell grid-cell--2"></div>
 *     <div class="grid-cell grid-cell--3"></div>
 *     <div class="grid-cell grid-cell--4"></div>
 * </div>
 *
 * <div class="grid v2-grid--fitToFill">
 *     <div class="grid-cell grid-cell--1"></div>
 *     <div class="grid-cell grid-cell--2"></div>
 * </div>
 */
/* grid version 1 (default)
   ========================================================================== */
.v1-grid--2col > .grid-cell {
  width: 50%; }

.v1-grid--3col > .grid-cell {
  width: 33.333%; }

/* grid version 2 (at first breakpoint)
========================================================================== */
@media only screen and (min-width: 40em) and (max-width: 64em) {
  /**
   * Fit and Fill
   */
  /* Contain floats */
  .v2-grid--1col > .grid-cell, .v2-grid--3on1 > .grid-cell--4 {
    width: 100%; }
  .v2-grid--1to3 > .grid-cell--2, .v2-grid--3to1 > .grid-cell--1 {
    width: 75%; }
  .v2-grid--1to2 > .grid-cell--2, .v2-grid--2to1 > .grid-cell--1 {
    width: 66.666%; }
  .v2-grid--2col > .grid-cell {
    width: 50%; }
  .v2-grid--1to2 > .grid-cell--1, .v2-grid--2to1 > .grid-cell--2, .v2-grid--3col > .grid-cell, .v2-grid--3on1 > .grid-cell--1, .v2-grid--3on1 > .grid-cell--2, .v2-grid--3on1 > .grid-cell--3 {
    width: 33.333%; }
  .v2-grid--1to3 > .grid-cell--1, .v2-grid--3to1 > .grid-cell--2, .v2-grid--4col > .grid-cell {
    width: 25%; }
  .v2-grid--fitToFill > .grid-cell--1 {
    display: block;
    float: left;
    width: auto; }
  .v2-grid--fitToFill > .grid-cell--2 {
    display: block;
    overflow: hidden;
    width: auto; }
  .v2-grid--fitToFill:after {
    display: table;
    content: " ";
    clear: both; } }

/* grid version 3 (at second breakpoint)
========================================================================== */
@media only screen and (min-width: 64em) {
  .v3-grid--1col > .grid-cell {
    width: 100%; }
  .v3-grid--1to2 > .grid-cell--2, .v3-grid--2to1 > .grid-cell--1 {
    width: 66.666%; }
  .v3-grid--2to3 > .grid-cell--2, .v3-grid--3to2 > .grid-cell--1 {
    width: 60%; }
  .v3-grid--2col > .grid-cell {
    width: 50%; }
  .v3-grid--2to3 > .grid-cell--1, .v3-grid--3to2 > .grid-cell--2 {
    width: 40%; }
  .v3-grid--1to2 > .grid-cell--1, .v3-grid--2to1 > .grid-cell--2, .v3-grid--3col > .grid-cell {
    width: 33.333%; }
  .v3-grid--4col > .grid-cell {
    width: 25%; }
  .v3-grid--5col > .grid-cell {
    width: 20%; } }

/* ==========================================================================
   Dimension utilities
   ========================================================================== */
/* Intrinsic widths
   ========================================================================== */
/**
 * Make an element shrink wrap its content.
 */
.size-fit {
  display: block;
  float: left;
  width: auto !important; }

/**
 * Make an element fill the remaining space.
 * N.B. This will hide overflow.
 */
.size-fill {
  display: block;
  overflow: hidden;
  width: auto !important; }

/**
 * An alternative method to make an element fill the remaining space.
 * N.B. Do not use if child elements might be wider than the remaining space.
 * In Chrome, Safari, and Firefox it results in undesired layout.
 */
.size-fill-alt {
  display: table-cell;
  max-width: 100%;
  width: 10000px; }

/**
 * Make an element the width of its parent.
 */
.size-full {
  display: block;
  width: 100%; }

/* Proportional widths
   ========================================================================== */
/**
 * Specify the proportional width of an object.
 * Intentional redundancy build into each set of unit classes.
 * Supports: 2, 4, 5, 6, 8, 10, 12 part
 */
.size-1of12 {
  width: 8.333% !important; }

.size-1of10 {
  width: 10% !important; }

.size-1of8 {
  width: 12.5% !important; }

.size-1of6, .size-2of12 {
  width: 16.667% !important; }

.size-1of5, .size-2of10 {
  width: 20% !important; }

.size-1of4, .size-2of8, .size-3of12 {
  width: 25% !important; }

.size-3of10 {
  width: 30% !important; }

.size-1of3, .size-2of6, .size-3of9, .size-4of12 {
  width: 33.333% !important; }

.size-3of8 {
  width: 37.5% !important; }

.size-2of5, .size-4of10 {
  width: 40% !important; }

.size-5of12 {
  width: 41.667% !important; }

.size-1of2, .size-2of4, .size-3of6, .size-4of8, .size-5of10, .size-6of12 {
  width: 50% !important; }

.size-7of12 {
  width: 58.333% !important; }

.size-3of5, .size-6of10 {
  width: 60% !important; }

.size-5of8 {
  width: 62.5% !important; }

.size-2of3, .size-4of6, .size-8of12 {
  width: 66.667% !important; }

.size-7of10 {
  width: 70% !important; }

.size-3of4, .size-6of8, .size-9of12 {
  width: 75% !important; }

.size-4of5, .size-8of10 {
  width: 80% !important; }

.size-5of6, .size-10of12 {
  width: 83.333% !important; }

.size-7of8 {
  width: 87.5% !important; }

.size-9of10 {
  width: 90% !important; }

.size-11of12 {
  width: 91.667% !important; }

/*
   SQUARES
   ========================================================================== */
.sq-7 {
  height: 7px;
  width: 7px; }

.sq-14 {
  height: 14px;
  width: 14px; }

.sq-20 {
  height: 20px;
  width: 20px; }

.sq-22 {
  height: 22px;
  width: 22px; }

.sq-30 {
  height: 30px;
  width: 30px; }

.sq-32 {
  height: 32px;
  width: 32px; }

.sq-35 {
  height: 35px;
  width: 35px; }

.sq-44 {
  height: 44px;
  width: 44px; }

.sq-45 {
  height: 45px;
  width: 45px; }

.sq-60 {
  height: 60px;
  width: 60px; }

.sq-100 {
  height: 100px;
  width: 100px; }

/*
   WIDTHS (Should limit the use of these)
   ========================================================================== */
.wid-75 {
  width: 75px; }

.wid-90 {
  width: 90px; }

/* Percentage widths */
.wid-third {
  width: 33.33333%; }

.wid-half {
  width: 50%; }

.wid-twothird {
  width: 66.66667%; }

.maxwid-half {
  max-width: 50%; }

.mw-8 {
  max-width: 8rem; }

.mw-16 {
  max-width: 16rem; }

.mw-32 {
  max-width: 32rem; }

.mw-48 {
  max-width: 48rem; }

.mw-64 {
  max-width: 64rem; }

.mw-128 {
  max-width: 128rem; }

/* ==========================================================================
   HEIGHTS (Should limit the use of these)
   ========================================================================== */
.ht-7 {
  height: 7px; }

.ht-30 {
  height: 30px; }

.ht-44 {
  height: 44px; }

.ht-75 {
  height: 75px; }

.ht-450 {
  height: 450px; }

/* Percentage heights */
.ht-third {
  height: 33.33333%; }

.ht-full {
  height: 100%; }

/*
   BACKGROUND SIZES
   ========================================================================== */
.bgs-100 {
  background-size: 100%; }

/* ==========================================================================
FORMS
========================================================================== */
/* Removes large blue border in chrome on focus and active states */
input:focus, button:focus {
  outline: 0; }

.input, .textarea {
  border-radius: 5px;
  border-width: 1px;
  border-style: solid;
  font-size: 15px; }

.textarea {
  min-height: 120px; }

.input--default, .textarea--default {
  background-color: #e8eaeb;
  border-color: #cfd0d2;
  box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.07); }

.input--white {
  background-color: white;
  border-color: #bbc0c4; }

.input--error, .textarea--error {
  background-color: #f6e4e4;
  border-color: #b15148;
  box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.07); }

.input--stageleft {
  background-color: #2c3d4e;
  border-color: #203345;
  box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.14); }

.input--header-primary {
  background-color: #0b6196;
  border-color: #1c78b1;
  box-shadow: inset 0 2px 2px rgba(0, 82, 134, 0.16);
  color: #aad0e9; }

.input--picklist {
  border-color: #bbc0c4;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.5), 0 1px 0 rgba(0, 0, 0, 0.02); }

.input--picklist:active, .input--picklist-error:active {
  box-shadow: none;
  background: #e9e9e9 !important; }

.input--picklist-error {
  border-color: #b15148;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.5), 0 1px 0 rgba(0, 0, 0, 0.02); }

.checkbox, .radio {
  -webkit-appearance: none;
  -moz-appearance: none;
  border-style: solid;
  border-width: 1px; }
  .checkbox:disabled, .radio:disabled {
    opacity: 0.4; }

.checkbox--default, .radio--default {
  border-color: #bbc0c4;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02), inset 0 0 0 2px rgba(255, 255, 255, 0.5); }

.checkbox--states-1:focus, .checkbox--states-1:active, .radio--states-1:focus, .radio--states-1:active {
  background: #e8eaeb; }
.checkbox--states-1:checked, .radio--states-1:checked {
  border-color: #1c78b1;
  background: #2a94d6 !important;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02); }

.checkbox--states-1:checked::after {
  display: block;
  position: relative;
  content: '';
  left: 3px;
  top: 4px;
  height: 8px;
  width: 14px;
  border-bottom: 4px solid white;
  border-left: 4px solid white;
  -webkit-transform: rotate(-45deg); }

.radio--states-1:checked::after {
  display: block;
  position: relative;
  content: '';
  left: 5px;
  top: 5px;
  height: 10px;
  width: 10px;
  border-radius: 100%;
  background: white;
  /*#354452 -webkit-linear-gradient(bottom, rgba(255,255,255,0) 0, rgba(255,255,255,.3) 100%)*/ }

.label--search:before {
  position: absolute;
  top: 8px;
  left: 9px;
  font-size: 15px; }

.label--fixedtext:before {
  content: attr(data-fixedtext);
  position: absolute;
  top: 14px;
  right: 14px; }

.label--lookup:before {
  position: absolute;
  top: 14px;
  right: 14px;
  font-size: 15px; }

.label--icon-r:before {
  position: absolute;
  top: 16px;
  right: 14px;
  font-size: 15px; }

.label--icon-r-sm:before {
  position: absolute;
  top: 16px;
  right: 16px;
  font-size: 13px; }

.label--icon-r-out:before {
  position: absolute;
  top: 38px;
  right: 14px;
  font-size: 15px; }

.input--focus-1:focus, .textarea--focus-1:focus {
  background-color: white;
  border: 1px solid #bbc0c4;
  box-shadow: none;
  outline: none; }

.input--focus-2:focus {
  background-color: white;
  border: 1px solid #1c78b1;
  box-shadow: none;
  color: #3c3d3e !important;
  outline: none; }
  .input--focus-2:focus:-moz-placeholder {
    color: #969899; }
  .input--focus-2:focus::-moz-placeholder {
    color: #969899; }
  .input--focus-2:focus::-webkit-input-placeholder {
    color: #969899; }
  .input--focus-2:focus:-ms-input-placeholder {
    color: #969899; }

.input--disabled-1:disabled {
  background-color: #e4e5e7;
  border: none; }

.input--ph-1, .textarea--ph-1 {
  font-weight: 300; }
  .input--ph-1:-moz-placeholder, .textarea--ph-1:-moz-placeholder {
    color: #969899; }
  .input--ph-1::-moz-placeholder, .textarea--ph-1::-moz-placeholder {
    color: #969899; }
  .input--ph-1::-webkit-input-placeholder, .textarea--ph-1::-webkit-input-placeholder {
    color: #969899; }
  .input--ph-1:-ms-input-placeholder, .textarea--ph-1:-ms-input-placeholder {
    color: #969899; }
  .input--ph-1:focus:-moz-placeholder, .textarea--ph-1:focus:-moz-placeholder {
    color: #696e71; }
  .input--ph-1:focus::-moz-placeholder, .textarea--ph-1:focus::-moz-placeholder {
    color: #696e71; }
  .input--ph-1:focus::-webkit-input-placeholder, .textarea--ph-1:focus::-webkit-input-placeholder {
    color: #696e71; }
  .input--ph-1:focus:-ms-input-placeholder, .textarea--ph-1:focus:-ms-input-placeholder {
    color: #696e71; }

.input--ph-2 {
  font-weight: 300; }
  .input--ph-2:-moz-placeholder {
    color: #aad0e9; }
  .input--ph-2::-moz-placeholder {
    color: #aad0e9; }
  .input--ph-2::-webkit-input-placeholder {
    color: #aad0e9; }
  .input--ph-2:-ms-input-placeholder {
    color: #aad0e9; }
  .input--ph-2:focus:-moz-placeholder {
    color: #696e71; }
  .input--ph-2:focus::-moz-placeholder {
    color: #696e71; }
  .input--ph-2:focus::-webkit-input-placeholder {
    color: #696e71; }
  .input--ph-2:focus:-ms-input-placeholder {
    color: #696e71; }

.input--ph-3 {
  font-weight: 300; }
  .input--ph-3:-moz-placeholder {
    color: #afb5b9; }
  .input--ph-3::-moz-placeholder {
    color: #afb5b9; }
  .input--ph-3::-webkit-input-placeholder {
    color: #afb5b9; }
  .input--ph-3:-ms-input-placeholder {
    color: #afb5b9; }

/* Button Styles
 *
 * Any styles specific to buttons that can't be constructed using existing classes can live here. Examples would be active tap states for different types of buttons.
 *
 */
/* Disabled States */
.btn:disabled > span {
  opacity: 0.5; }

/* Header Buttons */
.btn--header-primary:active {
  background: #086ba9 !important; }

.btn--header-secondary:active {
  background: #555555 !important; }

/* Standard Buttons */
.btn--primary:active {
  background: #278ac7 !important;
  box-shadow: none !important; }

.btn--secondary:active {
  background: #e9e9e9 !important;
  box-shadow: none !important; }

/*

## Anchor (Dark)

<p class="component-description">The dark anchor is used only on the top of Record Home. It can have an icon or avatar, the name of the record, and up to three pieces of metadata. It might also contain a strip of icons that are representative of device actions, such as Call or E-mail.</p>
<hr class="man pan hr hr-1">

    <header class="bg-anchor tc ptm">
      <div class="icon icon--d icon--{{anchorDarkIcon}} sq-60"></div>
      <h1 class="f1 wht text-shadow man">
        {{anchorDarkTitle}}
      </h1>
      <h2 class="f3 text-color-3 text-shadow man pbm">
        {{anchorDarkDescription}}
      </h2>
      <ul class="list-horizontal grid bg-5 wht font-size-icon lh-44 border-top border-top--4 phm"
          role="menubar">
        <li class="size-1of3 grid-cell tc">
          <a href="javascript: void(0)" title="Email" role="menuitem">
            <span class="icon-utility-email wht active-dim"></span>
            <span class="tha">email</span>
          </a>
        </li>
        <li class="size-1of3 grid-cell tc">
          <a href="javascript: void(0)" title="Call" role="menuitem">
            <span class="icon-utility-call wht active-dim"></span>
            <span class="tha">call</span>
          </a>
        </li>
        <li class="size-1of3 grid-cell tc">
          <a href="javascript: void(0)" title="Map" role="menuitem">
            <span class="icon-utility-location wht active-dim"></span>
            <span class="tha">map</span>
          </a>
        </li>
      </ul>
    </header>

*/
/*

## Anchor (Light)

<p class="component-description">The light anchor is used on pages that need type-of-record context, but are not Record Home. An example of this would be a scoped search landing page. It can have an icon, the type of record, a short tagline or piece of data, and a button.</p>
<hr class="man pan hr hr-1">
<p><span class="component-subtype">Default</span></p>

    <header class="bg-1 border-bottom border--3">
      <div class="icon icon--{{anchorLightIcon}} bgs-100 a-mid mhm sq-30"></div>
      <h1 class="dib thin a-mid">
        <span class="db f6 lower">
          {{anchorLightLabel}}
        </span>
        <span class="db f3 text-color-1">
          {{anchorLightTitle}}
        </span>
      </h1>
      <button class="btn btn--secondary bg-secondary-btn brm pvs phm border border--2 fr mrm mvm text-color-4 f4 fw-semibold">
          {{anchorLightButtonLabel}}
      </button>
    </header>

*/
/*
<p><span class="component-subtype">Label on Bottom</span></p>

    <header class="bg-1 border-bottom border--3">
      <div class="icon icon--{{anchorLightBottomIcon}} bgs-100 a-mid mhm sq-30"></div>
      <h1 class="dib thin a-mid">
        <span class="db f3 text-color-1">
          {{anchorLightBottomTitle}}
        </span>
        <span class="db f6 lower">
          {{anchorLightBottomLabel}}
        </span>
      </h1>
      <button class="btn btn--secondary bg-secondary-btn brm pvs phm border border--2 fr mrm mvm text-color-4 f4 fw-semibold">
          {{anchorLightButtonBottomLabel}}
      </button>
    </header>

*/
/*
<p><span class="component-subtype">No Background</span></p>

    <header class="bg-2">
      <div class="icon icon--{{anchorLightNoBGIcon}} bgs-100 a-mid mhm sq-30"></div>
      <h1 class="dib thin a-mid">
        <span class="db f3 text-color-1">
          {{anchorLightNoBGTitle}}
        </span>
        <span class="db f6 lower">
          {{anchorLightNoBGLabel}}
        </span>
      </h1>
    </header>

*/
/*

## Avatar

<p class="component-description">Avatars come in several different sizes, and can include different treatments to indicate something special about the person. For example, a customer avatar should look different than an employee avatar.</p>
<hr class="man pan hr hr-1">
<p><span class="component-subtype">Default</span></p>

    <img src="{{avatarImage}}" width="45" height="45" alt="gt" class="brm">

*/
/*

<p><span class="component-subtype">Following</span></p>

    <div class="pos-rel sq-30">
      <img src="{{avatarFollowingImage}}" width="30" height="30" alt="gt" class="brm">
      <img src="assets/icons/feed/checkmark_badge.png" class="avatar-badge pos-abs" alt="following">
    </div>

*/
.avatar-badge {
  right: -5px;
  bottom: -5px;
  width: 13px; }

/*

## Button (Primary)

<p class="component-description">Primary buttons are only used when there is an exceedingly distinct and clear call-to-action. An example of this is the Vote button on a poll, or a Send button on the comment publisher.</p>
<hr class="man pan hr hr-1">
<p><span class="component-subtype">Default</span></p>

    <button class="btn bg-primary-btn btn--primary pvs size-full brm border border--1 wht f3 fw-semibold">
      {{buttonPrimaryLabel}}
    </button>

*/
/*

<p><span class="component-subtype">Disabled</span></p>

    <button disabled class="btn bg-primary-btn btn--primary pvs size-full brm border border--1">
      <span class="wht f3 fw-semibold">Primary Button</span>
    </button>

*/
/*

<hr class="man pan hr hr-1">
## Button (Secondary)

<p class="component-description">Secondary buttons are used in most cases when the interface calls for a button.</p>
<hr class="man pan hr hr-1">
<p><span class="component-subtype">Default</span></p>

    <button class="btn bg-secondary-btn btn--secondary pvs size-full brm border border--2 text-color-4 f3 fw-semibold">
      {{buttonSecondaryLabel}}
    </button>

*/
/*

<p><span class="component-subtype">Disabled</span></p>

    <button disabled class="btn bg-secondary-btn btn--secondary pvs size-full brm border border--2">
      <span class="text-color-4 f3 fw-semibold">Secondary Button</span>
    </button>

*/
/*

<hr class="man pan hr hr-1">
### Button Groups

<p class="component-description">Button groups occur when there are two buttons in a single line. Typically, one button is actionable and has text, and the other is an overflow menu.</p>
<hr class="man pan hr hr-1">

		<div class="phm">
			<button class="btn bg-secondary-btn btn--secondary pvs phx fr mlm brm border border--2">
				<span class="text-color-4 icon-utility-down f3 fw-semibold"></span>
			</button>
			<div class="size-fill">
				<button class="btn bg-secondary-btn btn--secondary pvs size-full brm border border--2 text-color-4 f3 fw-semibold">
				{{buttonGroupLabel}}
				</button>
			</div>
		</div>

*/
/*

<hr class="man pan hr hr-1">
### Button Tertiary

<p class="component-description">Tertiary buttons are buttons that do not have containers. They are used when a normal button would be too visually heavy, such as on a card, and can include an icon, text, or both.</p>
<hr class="man pan hr hr-1">

    <a href="javascript:void(0)" title="Like" name="like" class="f5 fl">
      <span class="dib mrs icon-utility-like f4"></span>
      Liked
    </a>

*/
/*

## Calendar

<p class="component-description">A calendar allows the user to choose a date.</p>
<hr class="man pan hr hr-1">

    <table class="fixed-table">
      <caption class="bg-2 phm ptm pbs tc">
        <a class="fl" title="Left">
          <span class="text-color-2 f4 lh-20 icon-utility-left"></span>
        </a>
        <a class="fr" title="Right" >
          <span class="text-color-2 f4 lh-20 icon-utility-right"></span>
        </a>
        <h1 class="text-color-1 dib man fw-bold f3">
          March 2013
        </h1>
      </caption>
      <thead class="border-bottom border--3 f6 text-color-2 caps bg-2">
        <tr>
          <th class="fw-normal pbs tc">Sun</th>
          <th class="fw-normal pbs tc">Mon</th>
          <th class="fw-normal pbs tc">Tue</th>
          <th class="fw-normal pbs tc">Wed</th>
          <th class="fw-normal pbs tc">Thu</th>
          <th class="fw-normal pbs tc">Fri</th>
          <th class="fw-normal pbs tc">Sat</th>
        </tr>
      </thead>
      <tbody class="bg-1 f2 border-bottom border--3 tc">
        <tr class="cal-row">
          <td class="cal-cell cal-cell--top pvm fw-normal text-color-2 bg-3">24</td>
          <td class="cal-cell cal-cell--top pvm fw-normal text-color-2 bg-3">25</td>
          <td class="cal-cell cal-cell--top pvm fw-normal text-color-2 bg-3">26</td>
          <td class="cal-cell cal-cell--top pvm fw-normal text-color-2 bg-3">27</td>
          <td class="cal-cell cal-cell--top pvm fw-normal text-color-2 bg-3">28</td>
          <td class="cal-cell cal-cell--top pvm text-color-1">1</td>
          <td class="cal-cell cal-cell--top pvm text-color-1">2</td>
        </tr>
        <tr class="cal-row">
          <td class="cal-cell pvm text-color-1">3</td>
          <td class="cal-cell pvm text-color-1">4</td>
          <td class="cal-cell pvm text-color-1">5</td>
          <td class="cal-cell pvm text-color-1">6</td>
          <td class="cal-cell pvm text-color-1">7</td>
          <td class="cal-cell pvm text-color-1">8</td>
          <td class="cal-cell pvm text-color-1">9</td>
        </tr>
        <tr class="cal-row">
          <td class="cal-cell pvm text-color-1">10</td>
          <td class="cal-cell pvm text-color-1">11</td>
          <td class="cal-cell pvm text-color-1">12</td>
          <td class="cal-cell pvm text-color-1">13</td>
          <td class="cal-cell pvm text-color-1">14</td>
          <td class="cal-cell pvm text-color-1">15</td>
          <td class="cal-cell pvm text-color-1">16</td>
        </tr>
        <tr class="cal-row">
          <td class="cal-cell pvm text-color-1">17</td>
          <td class="cal-cell pvm text-color-1">18</td>
          <td class="cal-cell pvm text-color-1">19</td>
          <td class="cal-cell pvm text-color-1">20</td>
          <td class="cal-cell pvm text-color-1">21</td>
          <td class="cal-cell pvm text-color-1">22</td>
          <td class="cal-cell pvm text-color-1">23</td>
        </tr>
        <tr class="cal-row">
          <td class="cal-cell pvm text-color-1">24</td>
          <td class="cal-cell pvm text-color-1">25</td>
          <td class="cal-cell cal-cell--selected pvm bg-primary-btn wht">26</td>
          <td class="cal-cell pvm text-color-1">27</td>
          <td class="cal-cell pvm text-color-1">28</td>
          <td class="cal-cell pvm text-color-1">29</td>
          <td class="cal-cell pvm text-color-1">30</td>
        </tr>
        <tr class="cal-row">
          <td class="cal-cell cal-cell--bot pvm text-color-1">31</td>
          <td class="cal-cell cal-cell--bot pvm fw-normal text-color-2 bg-3">1</td>
          <td class="cal-cell cal-cell--bot pvm fw-normal text-color-2 bg-3">2</td>
          <td class="cal-cell cal-cell--bot pvm fw-normal text-color-2 bg-3">3</td>
          <td class="cal-cell cal-cell--bot pvm fw-normal text-color-2 bg-3">4</td>
          <td class="cal-cell cal-cell--bot pvm fw-normal text-color-2 bg-3">5</td>
          <td class="cal-cell cal-cell--bot pvm fw-normal text-color-2 bg-3">6</td>
        </tr>
      </tbody>
    </table>

*/
.fixed-table {
  table-layout: fixed;
  display: table;
  width: 100%;
  border-collapse: collapse; }

.cal-cell {
  border: 1px solid #eceef0; }
  .cal-cell:hover {
    cursor: pointer; }
  .cal-cell:active {
    color: white;
    background-color: #3f9fd9;
    /* {1} */
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#3f9fd9), to(#2789c7));
    /* {2} */
    background-image: -webkit-linear-gradient(top, #3f9fd9, #2789c7);
    /* {3} */
    background-image: -moz-linear-gradient(top, #3f9fd9, #2789c7);
    /* {4} */
    background-image: -ms-linear-gradient(top, #3f9fd9, #2789c7);
    /* {5} */
    background-image: -o-linear-gradient(top, #3f9fd9, #2789c7);
    /* {6} */ }

.cal-row:last-child {
  border-right-width: 0; }

.cal-cell--top {
  border-top-color: #cfd4d9 !important; }

.cal-cell--bot {
  border-bottom-color: #cfd4d9; }

/*

## Card

<p class="component-description">The card component is a generic container for a piece of content that needs to be separated from other pieces of content on the same page. It may include a header with a title, and can contain a list.</p>
<hr class="man pan hr hr-1">

<p><span class="component-subtype">Related List</span></p>

    <article class="mam bg-1 border border--3 brm">
      <header class="clear pam border-bottom border--8">
        <h1 class="fl man fw-normal f5 text-color-1">Contacts</h1>
        <a href="javascript:void(0)" title="More" class="fr">
          <span class="fl f5">More</span>
          <span class="lh-16 fl mls f6 text-color-2 icon-utility-right"></span>
        </a>
      </header>
      <ul class="man pan list-plain">
        <li class="pam border-bottom border--8">
          <div class="mbs flag flag--rev">
            <div class="flag--body">
              <span class="f3 text-color-1 fw-semibold">Jonathan Perilla-Jones</span>
            </div>
            <div class="flag--image prm">
							<div class="icon icon--contact bgs-100 a-mid sq-30"></div>
            </div>
          </div>
          <ul class="list-plain man pan">
            <li class="f5 text-color-2">Director of Consumer Sales</li>
            <li class="f5 text-color-2">United Partners</li>
            <li class="f5 text-color-2">(415)432-5456</li>
          </ul>
        </li>
        <li class="pam border-bottom border--8">
          <div class="mbs flag flag--rev">
            <div class="flag--body">
              <span class="f3 text-color-1 fw-semibold">Jonathan Perilla-Jones</span>
            </div>
            <div class="flag--image prm">
							<div class="icon icon--contact bgs-100 a-mid sq-30"></div>
            </div>
          </div>
          <ul class="list-plain man pan">
            <li class="f5 text-color-2">Director of Consumer Sales</li>
            <li class="f5 text-color-2">United Partners</li>
            <li class="f5 text-color-2">(415)432-5456</li>
          </ul>
        </li>
        <li class="pam">
          <div class="mbs flag flag--rev">
            <div class="flag--body">
              <span class="f3 text-color-1 fw-semibold">Jonathan Perilla-Jones</span>
            </div>
            <div class="flag--image prm">
							<div class="icon icon--contact bgs-100 a-mid sq-30"></div>
            </div>
          </div>
          <ul class="list-plain man pan">
            <li class="f5 text-color-2">Director of Consumer Sales</li>
            <li class="f5 text-color-2">United Partners</li>
            <li class="f5 text-color-2">(415)432-5456</li>
          </ul>
        </li>
      </ul>
    </article>

*/
/*
<p><span class="component-subtype">Account</span></p>

    <article class="mam bg-1 border border--3 pam brm">
			<h1 class="man f3 text-color-1 fw-semibold">
				{{accountCardTitle}}
			</h1>
      <ul class="list-plain man pan">
        <li class="f5 text-color-2">{{accountCardDetail1}}</li>
        <li class="f5 text-color-2">{{accountCardDetail2}}</li>
      </ul>
    </article>

*/
/*
<p><span class="component-subtype">Case</span></p>

    <article class="mam bg-1 border border--3 pam brm">
			<h1 class="mtn mbs f3 text-color-1 fw-semibold">
				{{caseCardTitle}}
			</h1>
      <ul class="clear list-plain man pan">
        <li class="fl f5 text-color-2">{{caseCardDetail1}} &#8226; {{caseCardDetail2}}</li>
        <li class="fr f5 text-color-2">#{{caseCardDetail3}}</li>
      </ul>
    </article>

*/
/*
<p><span class="component-subtype">Chatter</span></p>

    <article class="mam bg-1 border border--3 pam brm">
      <div class="flag">
        <div class="flag--image prm">
					<div class="icon icon--{{chatterCardIcon}} bgs-100 a-mid sq-30"></div>
        </div>
        <div class="flag--body">
          <h1 class="man f3 text-color-1 fw-semibold">
            {{chatterCardTitle}}
          </h1>
					<p class="man f5 text-color-2">{{chatterCardDetail1}}</li>
        </div>
      </div>
    </article>

*/
/*
<p><span class="component-subtype">Contact</span></p>

    <article class="mam bg-1 border border--3 pam brm">
      <div class="mbs flag flag--rev">
        <div class="flag--body">
          <h1 class="man f3 text-color-1 fw-semibold">
            {{contactCardTitle}}
          </h1>
        </div>
        <div class="flag--image prm">
					<div class="icon icon--{{contactCardIcon}} bgs-100 a-mid sq-30"></div>
        </div>
      </div>
      <ul class="list-plain man pan">
        <li class="f5 text-color-2">{{contactCardDetail1}}</li>
        <li class="f5 text-color-2">{{contactCardDetail2}}</li>
        <li class="f5 text-color-2">{{contactCardDetail3}}</li>
      </ul>
    </article>

*/
/*
<p><span class="component-subtype">File</span></p>

    <article class="mam bg-1 border border--3 pam brm">
      <div class="flag flag--top">
        <div class="flag--image prm">
					<img class="ht-30" src="assets/icons/doctype/{{fileCardIcon}}_120.png">
        </div>
        <div class="flag--body">
          <h1 class="man f3 text-color-1 fw-semibold">
            {{fileCardTitle}}
          </h1>
					<ul class="list-plain man pan">
						<li class="f5 text-color-2">{{fileCardDetail1}}</li>
						<li class="dib f5 text-color-2">{{fileCardDetail2}} &#8226; </li>
						<li class="dib f5 text-color-2">{{fileCardDetail3}} &#8226; </li>
						<li class="dib f5 text-color-2">{{fileCardDetail4}}</li>
					</ul>
        </div>
      </div>
    </article>

*/
/*
<p><span class="component-subtype">Opportunity</span></p>

    <article class="mam bg-1 border border--3 pam brm">
			<h1 class="man f3 text-color-1 fw-semibold">
				{{opptyCardTitle}}
			</h1>
      <ul class="clear list-plain man pan">
        <li class="mbs f5 text-color-2">{{opptyCardDetail1}} &#8226; {{opptyCardDetail2}}</li>
        <li class="fl f3 text-color-1">${{opptyCardDetail3}}</li>
        <li class="fr f3 text-color-1">{{opptyCardDetail4}}</li>
      </ul>
    </article>

*/
/*
<p><span class="component-subtype">Custom Object</span></p>

    <article class="mam bg-1 border border--3 pam brm">
			<h1 class="mtn mbs f3 text-color-1 fw-semibold">
				{{customCardTitle}}
			</h1>
      <dl class="clear list-plain man pan">
				<dt class="fl wid-third text-truncate f5 text-color-2">{{customCardLabel1}}</dt>
        <dd class="man plm wid-twothird fl text-truncate f5 text-color-1">{{customCardDetail1}}</dd>
				<dt class="cl wid-third fl text-truncate f5 text-color-2">{{customCardLabel2}}</dt>
        <dd class="man plm wid-twothird fl text-truncate f5 text-color-1">{{customCardDetail2}}</dd>
				<dt class="cl wid-third fl text-truncate f5 text-color-2">{{customCardLabel3}}</dt>
        <dd class="man plm wid-twothird fl text-truncate f5 text-color-1">{{customCardDetail3}}</dd>
				<dt class="cl wid-third fl text-truncate f5 text-color-2">{{customCardLabel4}}</dt>
        <dd class="man plm wid-twothird fl text-truncate f5 text-color-1">{{customCardDetail4}}</dd>
      </dl>
    </article>

*/
/*
<p><span class="component-subtype">Task</span></p>

    <article class="mam bg-1 border border--3 pam brm">
			<div class="flag flag--top">
				<div class="prm flag--image">
					<input
						class="checkbox checkbox--default checkbox--states-1 brm bg-secondary-btn sq-22 a-mid dib"
						type="checkbox"
						id="filter-1">
				</div>
				<div class="flag--body">
					<label for="filter-1">
						<h1 class="dib man f3 text-color-1">
							{{taskCardTitle}}
						</h1>
						<ul class="clear list-plain man pan">
							<li class="f5 text-truncate text-color-2">{{taskCardDetail1}}</li>
							<li class="f5 text-truncate text-color-2">{{taskCardDetail2}}</li>
						</ul>
					</label>
				</div>
				<div class="prn plm flag--image">
					<time datetime="2009-02-21" class="f6 text-color-2">{{taskCardDetail3}}</time>
				</div>
			</div>
    </article>

*/
/*
<p><span class="component-subtype">Event</span></p>

    <article class="mam bg-1 border border--3 pam brm">
			<time datetime="10:00" class="f1 text-color-2 dib mrs">{{eventCardTime}}</time>
			<span class="f6 text-color-2 mbs dib">{{eventCardDuration}}</span>
			<h1 class="man f3 text-color-1 fw-semibold">
				<a href="javascript:void(0)">
					{{eventCardTitle}}
				</a>
			</h1>
			<p class="mtn mbm f4 text-color-2 text-truncate">
				{{eventCardDetail1}}
			</p>
			<hr class="hr hr--2">
      <ul class="list-plain man pan">
        <li class="text-truncate f5 text-color-2">{{eventCardDetail2}}</li>
        <li class="text-truncate f5 text-color-2">{{eventCardDetail3}}</li>
      </ul>
    </article>

*/
/*
<p><span class="component-subtype">List</span></p>

    <article class="mam bg-1 border border--3 brm">
      <header class="clear pam border-bottom border--8">
        <h1 class="fl man fw-normal f5 text-color-1">{{cardListLabel}}</h1>
        <a href="javascript:void(0)" title="More" class="fr">
          <span class="fl f5">More</span>
          <span class="lh-16 fl mls f6 text-color-2 icon-utility-right"></span>
        </a>
      </header>
      <ul class="man pan list-plain" ng-transclude></ul>
    </article>
*/
/*

## Checkbox

<p class="component-description">Checkboxes are visual representations of a boolean field, where the value is either true or false.</p>
<hr class="man pan hr hr-1">

    <div class="mbm db">
      <input
        class="checkbox checkbox--default checkbox--states-1 brm mrs bg-secondary-btn sq-22 a-mid dib"
        type="checkbox"
        id="filter-1">
      <label class="f4 text-color-1" for="filter-1">
        {{checkboxLabel}}
      </label>
    </div>

*/
/*

<p><span class="component-subtype">Disabled</span></p>

    <div class="mbm db">
      <input disabled
        class="checkbox checkbox--default checkbox--states-1 brm mrs bg-secondary-btn sq-22 a-mid clear dib"
        type="checkbox"
        id="filter-2">
      <label class="f4 text-color-1" for="filter-2">
        Filter 2 (Disabled)
      </label>
    </div>

*/
/*

## Comment Publisher

<p class="component-description">The comment publisher allows the user to comment on a feed post. It is persistently anchored to the bottom of the screen to allow for easy access even when scrolling. It contains an input field, an explicit @mention button, an icon for adding a file, and a Send button. The input field should expand to accommodate up to 5 lines of text. The container can also accommodate textual warnings.</p>
<hr class="man pan hr hr-1">

<p><span class="component-subtype">Default</span></p>

    <footer class="bg-generic-1 ht-44 ds-1b" role="group">
      <a href="javascript:void(0)" title="close" class="btn--secondary brm border bg-secondary-btn border--2 fl mts mls ht-30 phs">
        <span class="text-color-4 f4 icon-utility-adduser lh-30"></span>
      </a>
      <a href="javascript:void(0)" title="close" class="btn--primary brm border bg-primary-btn border--1 fr mts mrs ht-30 phs">
        <span class="wht fw-semibold f5 lh-30">Send</span>
      </a>
      <div class="pos-rel size-fill phs pvs">
        <label class="label--icon-r-sm icon-utility-attach f6">
          <span class="dn">URL</span>
        </label>
        <input
          type="text"
          name="default"
          placeholder="Write a comment..."
          class="size-full phs ht-30 input input--white input--ph-1 input--focus-1">
      </div>
    </footer>

*/
/*
<p><span class="component-subtype">With Warning</span></p>

    <p class="border-top border-bottom border--3 bg-7 pas man f6 text-color-1">
        This is an example of a warning message that appears inside the composer screen.
    </p>
    <footer class="ht-44 bg-generic-1" role="group">
      <a href="javascript:void(0)" title="close" class="btn--secondary brm border bg-secondary-btn border--2 fl mts mls ht-30 phs">
        <span class="text-color-4 f4 icon-utility-adduser lh-30"></span>
      </a>
      <a href="javascript:void(0)" title="close" class="btn--primary brm border bg-primary-btn border--1 fr mts mrs ht-30 phs">
        <span class="wht fw-semibold f5 lh-30">Send</span>
      </a>
      <div class="pos-rel size-fill phs pvs">
        <label class="label--icon-r-sm icon-utility-attach f6">
          <span class="dn">URL</span>
        </label>
        <input
          type="text"
          name="default"
          placeholder="Write a comment..."
          class="input input--white input--ph-1 input--focus-1 size-full phs ht-30">
      </div>
    </footer>

*/
/*

## Drop Down

<p class="component-description">Drop-downs can be used to help the user auto-complete their field, such as in a Combobox. They can also be used in lieu of a full Lookup when the user needs to be able to lookup and select more than one record.</p>
<hr class="man pan hr hr-1">

<p><span class="component-subtype">Default</span></p>

    <ul class="list-plain man pan brm bg-1 border border--3 ds-2">
      <li class="brtopm active--list-3 pam border-bottom border--8">
        <span class="f4 text-color-1">{{dropdownDefaultItem1}}</span>
      </li>
      <li class="active--list-3 pam border-bottom border--8">
        <span class="f4 text-color-1">{{dropdownDefaultItem2}}</span>
      </li>
      <li class="active--list-3 pam border-bottom border--8">
        <span class="f4 text-color-1">{{dropdownDefaultItem3}}</span>
      </li>
      <li class="active--list-3 pam border-bottom border--8">
        <span class="f4 text-color-1">{{dropdownDefaultItem4}}</span>
      </li>
      <li class="active--list-3 pam border-bottom border--8">
        <span class="f4 text-color-1">{{dropdownDefaultItem5}}</span>
      </li>
      <li class="brbotm active--list-3 pam">
        <span class="f4 text-color-1">{{dropdownDefaultItem6}}</span>
      </li>
    </ul>

*/
/*
<p><span class="component-subtype">With Photo</span></p>

    <ul class="man pan brm bg-1 border border--3 ds-2">
      <li class="brtopm db active--list-3 pam border-bottom border--8">
        <div class="flag">
          <div class="flag--image prm">
            <img src="{{dropdownWithPhotoImage1}}" class="brm" alt="kitten">
          </div>
          <div class="flag--body">
            <span class="f4 text-color-1">{{dropdownWithPhotoItem1}}</span>
          </div>
        </div>
      </li>
      <li class="db active--list-3 pam border-bottom border--8">
        <div class="flag">
          <div class="flag--image prm">
            <img src="{{dropdownWithPhotoImage2}}" class="brm" alt="kitten">
          </div>
          <div class="flag--body">
            <span class="f4 text-color-1">{{dropdownWithPhotoItem2}}</span>
          </div>
        </div>
      </li>
      <li class="db active--list-3 pam border-bottom border--8">
        <div class="flag">
          <div class="flag--image prm">
            <img src="{{dropdownWithPhotoImage3}}" class="brm" alt="kitten">
          </div>
          <div class="flag--body">
            <span class="f4 text-color-1">{{dropdownWithPhotoItem3}}</span>
          </div>
        </div>
      </li>
      <li class="db active--list-3 pam border-bottom border--8">
        <div class="flag">
          <div class="flag--image prm">
            <img src="{{dropdownWithPhotoImage4}}" class="brm" alt="kitten">
          </div>
          <div class="flag--body">
            <span class="f4 text-color-1">{{dropdownWithPhotoItem4}}</span>
          </div>
        </div>
      </li>
      <li class="db active--list-3 pam border-bottom border--8">
        <div class="flag">
          <div class="flag--image prm">
            <img src="{{dropdownWithPhotoImage5}}" class="brm" alt="kitten">
          </div>
          <div class="flag--body">
            <span class="f4 text-color-1">{{dropdownWithPhotoItem5}}</span>
          </div>
        </div>
      </li>
      <li class="brbotm db active--list-3 pam">
        <div class="flag">
          <div class="flag--image prm">
            <img src="{{dropdownWithPhotoImage6}}" class="brm" alt="kitten">
          </div>
          <div class="flag--body">
            <span class="f4 text-color-1">{{dropdownWithPhotoItem6}}</span>
          </div>
        </div>
      </li>
    </ul>

*/
/*

## Feed Comment

<p class="component-description">Feed comments occur when a user responds to a feed post.</p>
<hr class="man pan hr hr-1">

<p><span class="component-subtype">Default</span></p>

    <article class="pam">
      <div class="flag">
        <div class="flag--image prm">
          <img src="https://s3.amazonaws.com/uifaces/faces/twitter/gt/128.jpg" width="30" height="30" alt="gt" class="brm">
        </div>
        <div class="flag--body">
          <a href="javascript:void(0)" name="actor" title="Geoff Teehan" class="fw-semibold f3 db">Geoff Teehan</a>
          <time class="db f6 text-color-2" datetime="2013-11-13">29 minutes ago</time>
        </div>
      </div>
      <p class="mvm f4 text-color-1">
        Feedback from everyone else is welcome also!
        Please let me know what you think.
        I am desperate for your approval and appreciation.
        Shower me with love and affection. Fishing for compliments here.
      </p>
      <footer class="clear pbm border-bottom border--3">
        <a href="javascript:void(0)" name="Unlike" title="Unlike" class="f5 fl">Unlike</a>
        <span class="f5 fr">3 likes</span>
      </footer>
    </article>

*/
/*
<p><span class="component-subtype">With Payload</span></p>

    <article class="pam">
      <div class="flag">
        <div class="flag--image prm">
          <img src="https://s3.amazonaws.com/uifaces/faces/twitter/gt/128.jpg" width="30" height="30" alt="gt" class="brm">
        </div>
        <div class="flag--body">
          <a href="javascript:void(0)" name="actor" title="Geoff Teehan" class="fw-semibold f3 db">
            Geoff Teehan
          </a>
          <time class="db f6 text-color-2" datetime="2013-11-13">
            29 minutes ago
          </time>
        </div>
      </div>
      <p class="mvm f4 text-color-1">
        Feedback from everyone else is welcome also!
        Please let me know what you think.
        I am desperate for your approval and appreciation.
        Shower me with love and affection. Fishing for compliments here.
      </p>
      <article class="brm border border--4 bg-3 pam">
        <div class="flag">
          <div class="flag--image prm">
            <img src="assets/icons/doctype/excel_120.png" class="sq-30" alt="excel">
          </div>
          <div class="flag--body">
            <span class="f4 text-color-1 db">photo.pdf</span>
            <span class="db f5 text-color-2">1.2 MB</span>
          </div>
        </div>
      </article>
      <footer class="clear pvm border-bottom border--3">
        <a href="javascript:void(0)" name="like" title="Unlike" class="f5 fl">
          Unlike
        </a>
        <span class="f5 fr">3 likes</span>
      </footer>
    </article>

*/
/*
<p><span class="component-subtype">With Modifier</span></p>

    <article class="pam">
      <div class="flag">
        <div class="flag--image prm">
          <img src="https://s3.amazonaws.com/uifaces/faces/twitter/gt/128.jpg" width="30" height="30" alt="gt" class="brm">
        </div>
        <div class="flag--body">
          <a href="javascript:void(0)" name="actor" title="Geoff Teehan" class="fw-semibold f3 db">Geoff Teehan</a>
          <time class="db f6 text-color-2" datetime="2013-11-13">29 minutes ago</time>
        </div>
      </div>
			<div class="mbs mtm flag">
				<div class="flag--image">
					<span class="text-success icon-utility-success f4 mrs"></span>
				</div>
				<div class="flag--body">
					<span class="f6 text-color-2">Best answer chosen by author</span>
				</div>
			</div>
      <p class="mvm f4 text-color-1">
        Feedback from everyone else is welcome also!
        Please let me know what you think.
        I am desperate for your approval and appreciation.
        Shower me with love and affection. Fishing for compliments here.
      </p>
      <footer class="clear pbm border-bottom border--3">
        <a href="javascript:void(0)" name="Unlike" title="Unlike" class="f5 fl">Unlike</a>
        <span class="f5 fr">3 likes</span>
      </footer>
    </article>

*/
/*

## Feed Item

<p class="component-description">A feed item contains a feed post that a user has made, and involves many different components. It may have a flag object, a post body, a payload, and a footer.</p>
<hr class="man pan hr hr-1">

<p><span class="component-subtype">Default</span></p>

    <article class="mam bg-1 brm border border--3">
      <div class="flag pam">
        <div class="flag--image prm">
          <img src="{{feedItemActorImage}}" width="45" height="45" alt="gt" class="brm">
        </div>
        <div class="flag--body">
          <a href="javascript:void(0)" name="actor" title="{{feedItemActor}}" class="fw-semibold f3 db">
            {{feedItemActor}}
          </a>
          <time class="db f6 text-color-2" datetime="2013-11-13">
            {{feedItemTimestamp}}
          </time>
        </div>
      </div>
      <p class="phm mtn fw-normal f4 text-color-1">
        {{feedItemBody}}
      </p>
      <div ng-transclude></div>
      <footer class="clear phm ptm mbm border-top border--3">
        <a href="javascript:void(0)" name="like" title="Liked" class="f5 fl">
          <span class="dib mrs icon-utility-like f4"></span>
          Liked
        </a>
        <span class="f5 fr mlm">{{feedItemLikes}}</span>
        <span class="f5 fr">{{feedItemComments}}</span>
      </footer>
    </article>

*/
/*
<p><span class="component-subtype">With Payload</span></p>

    <article class="mam bg-1 brm border border--3">
      <div class="flag pam">
        <div class="flag--image prm">
          <img src="https://s3.amazonaws.com/uifaces/faces/twitter/gt/128.jpg" width="45" height="45" alt="gt" class="brm">
        </div>
        <div class="flag--body">
          <a href="javascript:void(0)" name="actor" title="Geoff Teehan" class="fw-semibold f3 db">
            Geoff Teehan
          </a>
          <time class="db f6 text-color-2" datetime="2013-11-13">29 minutes ago</time>
        </div>
      </div>
      <p class="phm mtn fw-normal f4 text-color-1">
        Feedback from everyone else is welcome also! Please let me know what you think. I am desperate for your approval and appreciation. Shower me with love and affection. Fishing for compliments here.
      </p>
      <article class="mhm brm mbm border border--4 bg-3 pam">
        <div class="flag">
          <div class="flag--image prm">
            <img src="assets/icons/doctype/excel_120.png" class="ht-30" alt="excel">
          </div>
          <div class="flag--body">
            <span class="f4 text-color-1 db">photo.pdf</span>
            <span class="db f5 text-color-2">1.2 MB</span>
          </div>
        </div>
      </article>
      <footer class="clear phm ptm mbm border-top border--3">
        <a href="javascript:void(0)" name="like" title="Like" class="f5 fl">
          <span class="text-color-2 dib mrs icon-utility-like f4"></span>
          <span class="text-color-2">Like</span>
        </a>
        <span class="f5 fr mlm">3 likes</span>
        <span class="f5 fr">5 comments</span>
      </footer>
    </article>

*/
/*
<p><span class="component-subtype">On Drill-In</span></p>

    <article class="bg-1 border-bottom border--3 pos-rel pam">
      <img src="assets/icons/feed/favoritepost.png" alt="favorite" class="sq-30 pos-abs corner-tr">
      <a href="javascript:void(0)" class="active-dim pos-abs pax f5 corner-tr">
        <span class="icon-utility-down text-color-1"></span>
      </a>
      <div class="flag">
        <div class="flag--image prm">
          <img src="https://s3.amazonaws.com/uifaces/faces/twitter/gt/128.jpg" width="45" height="45" alt="gt" class="brm">
        </div>
        <div class="flag--body">
          <a href="javascript:void(0)" name="actor" title="Geoff Teehan" class="fw-semibold f3 db">
            Geoff Teehan
          </a>
          <time class="db f6 text-color-2" datetime="2013-11-13">29 minutes ago</time>
        </div>
      </div>
      <p class="mvm fw-normal f4 text-color-1">
        Feedback from everyone else is welcome also! Please let me know what you think. I am desperate for your approval and appreciation. Shower me with love and affection. Fishing for compliments here.
      </p>
      <hr class="hr hr--2">
      <footer class="clear">
        <a href="javascript:void(0)" name="like" title="Like" class="f5 fl">
          <span class="text-color-2 dib mrs icon-utility-like f4"></span>
          <span class="text-color-2">Like</span>
        </a>
        <span class="f5 fr">3 people like this</span>
      </footer>
    </article>

*/
/*

## Feed Payload

<p class="component-description">Payloads appear in feed items underneath the post body. They represent something that is attached or related to the post, such as a record or a file. A primary payload will take you to the appropriate detail page or link outside of the feed.</p>
<hr class="man pan hr hr-1">
<p><span class="component-subtype">Primary</span></p>

    <article class="brm border border--4 bg-3 pam">
      <div class="flag">
        <div class="flag--image prm">
          <img src="assets/icons/doctype/excel_120.png" class="ht-30" alt="excel">
        </div>
        <div class="flag--body">
          <span class="f4 text-color-1 db">photo.pdf</span>
          <span class="db f5 text-color-2">1.2 MB</span>
        </div>
      </div>
    </article>

*/
/*
<hr class="man pan hr hr-1">

<p class="component-description">A secondary payload is used when linking the payload to a page outside of the feed doesnt make sense. Tapping on a secondary payload simply takes you to the feed post drill-in.</p>
<hr class="man pan hr hr-1">
<p><span class="component-subtype">Secondary</span></p>

    <article class="brm border border--4 bg-1 pam">
      <div class="flag">
        <div class="flag--image prm">
          <img src="assets/icons/standard_bg/thanks_120.png" class="sq-30" alt="thanks">
        </div>
        <div class="flag--body">
          <span class="f4 text-color-1 db">#thanks</span>
          <span class="db f5 text-color-2">Thanks for all you do to make us great!</span>
        </div>
      </div>
    </article>

*/
/*
<hr class="man pan hr hr-1">

<p class="component-description">A compound payload is a combination of a primary and secondary payload, in which the user may either want to go to the appropriate detail page or to the feed post drill-in.</p>
<hr class="man pan hr hr-1">
<p><span class="component-subtype">Compound</span></p>

    <article class="nbfc brm border border--4">
      <div class="flag pam bg-3 border-bottom border--8">
        <div class="flag--image prm">
          <img src="assets/icons/standard_bg/opportunity_120.png" class="sq-30" alt="thanks">
        </div>
        <div class="flag--body">
          <span class="f4 text-color-1 db">United Partners - 3k*</span>
        </div>
      </div>
      <div class="tc pam bg-1">
        <a href="javascript:void(0)" name="more" title="Show more details" class="dib f5">
          Show more details
        </a>
      </div>
    </article>

*/
/*

## File Preview

<p class="component-description">A file preview in the feed can either be a single image or multiple scrollable images.</p>
<hr class="man pan hr hr-1">

    <div class="file-preview dropstroke-1 brm">
      <img src="http://placekitten.com/350/232" width="350" height="220" alt="kitten" class="size-full z-below">
    </div>

*/
.file-preview {
  background-image: url('http://placekitten.com/350/232');
  background-size: 100%; }

/*

## Footer (Secondary)

<p class="component-description">The secondary footer only appears in conjunction with the secondary header, and contains various actionable icons.</p>
<hr class="man pan hr hr-1">

<p><span class="component-subtype">File Preview</span></p>

    <footer class="bg-secondary-header tc f2 lh-44 ht-44 ig_2" role="group">
      <a href="javascript:void(0)" title="share" class="fl mlx">
        <span class="a-mid icon-utility-socialshare active--icon-2 text-color-5 "></span>
      </a>
      <a href="javascript:void(0)" title="download" class="dib">
        <span class="a-mid icon-utility-download active--icon-2 text-color-5 "></span>
      </a>
      <a href="javascript:void(0)" title="info" class="fr mrx">
        <span class="a-mid icon-utility-down active--icon-2 text-color-5 "></span>
      </a>
    </footer>

*/
/*
<p><span class="component-subtype">Child Browser</span></p>

    <footer class="bg-secondary-header f2 lh-44 ht-44 ig_2" role="group">
      <a href="javascript:void(0)" title="left" class="fl mlx">
        <span class="a-mid icon-utility-left active--icon-2 text-color-5 "></span>
      </a>
      <a href="javascript:void(0)" title="right" class="fl mlx">
        <span class="a-mid icon-utility-right active--icon-2 text-color-5 "></span>
      </a>
      <a href="javascript:void(0)" title="refresh" class="fr mrx">
        <span class="a-mid icon-utility-refresh active--icon-2 text-color-5 "></span>
      </a>
      <a href="javascript:void(0)" title="share" class="fr mrx">
        <span class="a-mid icon-utility-share active--icon-2 text-color-5 "></span>
      </a>
    </footer>

*/
/*

## Header (Primary)
<p class="component-description">The primary header is the default component that appears at the top of almost every screen, and provides navigational or action-oriented options. This manifests as a combination of icons, text, input fields, and buttons.</p>
<hr class="man pan hr hr-1">
<p><span class="component-subtype">Default</span></p>

    <header class="bg-global-header brtop ht-44 dropglow-1" role="group">
      <ul class="fl man pan list-horizontal ht-44">
        <li class="pos-rel fl ht-44">
          <a href="javascript:void(0)" title="Navigation" class="phm ht-44 pam">
            <span class="icon-utility-{{headerPrimaryLeftIcon}} active--icon-1 text-color-5 "></span>
            <span class="tha">Navigation</span>
          </a>
        </li>
      </ul>
      <ul class="fr man pan list-horizontal ht-44">
        <li class="pos-rel fl ht-44">
          <a href="javascript:void(0)" title="Notifications" class="phm ht-44 pam">
            <span class="icon-utility-notification active--icon-1 text-color-5 notifications"
              data-notification-count="{{headerPrimaryNotifications}}">
            </span>
            <span class="tha"> Notifications</span>
          </a>
        </li>
      </ul>
    </header>

*/
/*

<p><span class="component-subtype">Search</span></p>

    <header class="bg-global-header brtop ht-44 dropglow-1" role="group">
      <a href="javascript:void(0)" title="Back" class="db mtm fl mlm">
        <span class="icon-utility-back active--icon-1 text-color-5"></span>
      </a>
      <div class="pos-rel size-fill prs plm pvs">
        <label>
          <span class="dn">Search</span>
        </label>
        <input type="text"
               name="default"
               placeholder="{{headerPrimarySearchPlaceholder}}"
               class="size-full phs ht-30 input input--header-primary input--ph-2 input--focus-2">
      </div>
    </header>

*/
/*

<p><span class="component-subtype">Modal</span></p>

    <header class="bg-global-header brtop ht-44 dropglow-1 tc" role="group">
      <a href="javascript:void(0)" title="{{Close}}"
         class="btn--header-primary brm border border--header_button bg-global-header-btn fl mts mls phm ht-30 is_1">
        <span class="text-color-5 lh-30 f6">{{headerPrimaryModalButtonLeft}}</span>
      </a>
      <a href="javascript:void(0)" title="Submit"
         class="btn--header-primary brm border bg-global-header-btn border--header_button is_1 ht-30 phm pos-rel fr mts mrs">
        <span class="text-color-5 lh-30 f6">{{headerPrimaryModalButtonRight}}</span>
      </a>
      <span class="text-color-5 dib lh-44 fw-semibold f3">{{headerPrimaryModalTitle}}</span>
    </header>

*/
.notifications[data-notification-count]:after {
  content: attr(data-notification-count);
  position: absolute;
  top: 4px;
  right: 22px;
  padding: 3px 5px;
  border-radius: 9999px;
  font-family: 'ProximaNova', sans-serif;
  font-size: 12px;
  background-color: #b15148;
  color: white !important; }

.notifications[data-notification-count=""]:after, .notifications[data-notification-count="0"]:after {
  display: none; }

/*

## Header (Secondary)

<p class="component-description">The secondary header occasionally replaces the primary header on screens that lend themselves to differentiation. These screens include the child browser and the file preview, which take the user outside of the primary app experience.</p>
<hr class="man pan hr hr-1">

<p><span class="component-subtype">File Preview</span></p>

    <header class="bg-secondary-header brtop ht-44 dropglow-1" role="group">
      <a href="javascript:void(0)" title="close"
         class="btn--header-secondary brm border bg-secondary-header-btn border--5 fl mts mls ht-30 phm is_1">
        <span class="text-color-5 f6 lh-30">Close</span>
      </a>
      <a href="javascript:void(0)" title="info" class="fr mtm mrm">
        <span class="icon-utility-info active--icon-2 text-color-5 "></span>
      </a>
    </header>

*/
/*
<p><span class="component-subtype">Child Browser</span></p>

    <header class="bg-secondary-header brtop ht-44 dropglow-1" role="group">
      <a href="javascript:void(0)"
         title="close"
         class="btn--header-secondary brm border bg-secondary-header-btn border--5 fr mts mrs ht-30 phm is_1">
        <span class="text-color-5 f6 lh-30">Close</span>
      </a>
      <div class="pos-rel size-fill phs pvs">
        <label>
          <span class="dn">URL</span>
        </label>
        <input type="text"
               name="default"
               value="http://www.salesforce.com"
               class="size-full phs ht-30 input input--white input--ph-1 input--focus-1">
      </div>
    </header>

*/
/*

## Indicator - Dots

<p class="component-description">Dot indicators appear to let the user know that he can swipe left and right to view a different section of the screen that is currently hidden from view. </p>
<hr class="man pan hr hr-1">

<p><span class="component-subtype">Light Background</span></p>

    <ul class="list-horizontal tc mln pln">
      <li class="sq-14 lh-14 a-mid">
        <a href="javascript:void(0)" class="sq-7 bg-10 brc ig_2" title="Page 1">
          <span class="tha">Page 1</span>
        </a>
      </li>
      <li class="sq-14 lh-14 a-mid">
        <a href="javascript:void(0)" class="sq-7 bg-9 brc is_4" title="Page 2">
          <span class="tha">Page 2</span>
        </a>
      </li>
      <li class="sq-14 lh-14 a-mid">
        <a href="javascript:void(0)" class="sq-7 bg-9 brc is_4" title="Page 3">
          <span class="tha">Page 3</span>
        </a>
      </li>
    </ul>

*/
/*
<p><span class="component-subtype">Dark Background</span></p>

    <ul class="list-horizontal tc bg-5 mln pln">
      <li class="sq-14 lh-14 a-mid">
        <a href="javascript:void(0)" class="sq-7 bg-10 brc dropglow-1" title="Page 1">
          <span class="tha">Page 1</span>
        </a>
      </li>
      <li class="sq-14 lh-14 a-mid">
        <a href="javascript:void(0)" class="sq-7 bg-11 brc is_4" title="Page 2">
          <span class="tha">Page 2</span>
        </a>
      </li>
      <li class="sq-14 lh-14 a-mid">
        <a href="javascript:void(0)" class="sq-7 bg-11 brc is_4" title="Page 3">
          <span class="tha">Page 3</span>
        </a>
      </li>
    </ul>

*/
/*

## List

<p class="component-description">There are several different types of lists that we can display to the user, depending on the context and use case.</p>
<hr class="man pan hr hr-1">

<p><span class="component-subtype">Single Line of Text</span></p>

    <ul class="list-plain fw-normal bg-2 man pan">
      <li class="active--list-1 pam text-color-1 f4 border-bottom border--3">List Item 1</li>
      <li class="active--list-1 pam text-color-1 f4 border-bottom border--3">List Item 2</li>
      <li class="active--list-1 pam text-color-1 f4 border-bottom border--3">List Item 3</li>
      <li class="active--list-1 pam text-color-1 f4">List Item 4</li>
    </ul>

*/
/*
<p><span class="component-subtype">With Labels</span></p>

    <ul class="list-plain fw-normal bg-2 man pan">
      <li class="active--list-1 pam border-bottom border--3">
        <span class="db text-color-1 f4">List Item 1</span>
        <span class="db text-color-2 f6">Label 1</span>
      </li>
      <li class="active--list-1 pam border-bottom border--3">
        <span class="db text-color-1 f4">List Item 2</span>
        <span class="db text-color-2 f6">Label 1</span>
      </li>
      <li class="active--list-1 pam border-bottom border--3">
        <span class="db text-color-1 f4">List Item 3</span>
        <span class="db text-color-2 f6">Label 1</span>
      </li>
      <li class="active--list-1 pam">
        <span class="db text-color-1 f4">List Item 4</span>
        <span class="db text-color-2 f6">Label 1</span>
      </li>
    </ul>

*/
/*
<p><span class="component-subtype">Flag Objects</span></p>

    <ul class="fw-normal bg-2 man pan">
      <li class="flag flag--top active--list-1 pam border-bottom border--3">
        <div class="flag--image prm">
          <img src="assets/icons/doctype/excel_120.png" class="ht-30" alt="excel">
        </div>
        <div class="flag--body">
          <span class="db text-color-1 f4">{{s1ListFlagObjectsFirstTitle}}</span>
          <span class="db text-color-2 f6">{{s1ListFlagObjectsFirstMetaOne}}</span>
          <span class="db text-color-2 f6">{{s1ListFlagObjectsFirstMetaTwo}}</span>
        </div>
      </li>
      <li class="flag flag--top active--list-1 pam border-bottom border--3">
        <div class="flag--image prm">
          <img src="assets/icons/doctype/html_120.png" class="ht-30" alt="html">
        </div>
        <div class="flag--body">
          <span class="db text-color-1 f4">{{s1ListFlagObjectsSecondTitle}}</span>
          <span class="db text-color-2 f6">{{s1ListFlagObjectsSecondMetaOne}}</span>
          <span class="db text-color-2 f6">{{s1ListFlagObjectsSecondMetaTwo}}</span>
        </div>
      </li>
      <li class="flag flag--top active--list-1 pam border-bottom border--3">
        <div class="flag--image prm">
          <img src="assets/icons/doctype/psd_120.png" class="ht-30" alt="psd">
        </div>
        <div class="flag--body">
          <span class="db text-color-1 f4">{{s1ListFlagObjectsThirdTitle}}</span>
          <span class="db text-color-2 f6">{{s1ListFlagObjectsThirdMetaOne}}</span>
          <span class="db text-color-2 f6">{{s1ListFlagObjectsThirdMetaTwo}}</span>
        </div>
      </li>
      <li class="flag flag--top active--list-1 pam">
        <div class="flag--image prm">
          <img src="assets/icons/doctype/ai_120.png" class="ht-30" alt="ai">
        </div>
        <div class="flag--body">
          <span class="db text-color-1 f4">{{s1ListFlagObjectsForthTitle}}</span>
          <span class="db text-color-2 f6">{{s1ListFlagObjectsForthMetaOne}}</span>
          <span class="db text-color-2 f6">{{s1ListFlagObjectsForthMetaTwo}}</span>
        </div>
      </li>
    </ul>

*/
/*

## List Item

<p class="component-description">There are several different types of lists that we can display to the user, depending on the context and use case. (Note: to use this component, please take however many list items you need and place them in the list container.)</p>
<hr class="man pan hr hr-1">

<p><span class="component-subtype">Default</span></p>

      <li class="list-plain active--list-1 pam text-color-1 f4 border-bottom border--3">{{listItemDefaultTitle}}</li>

*/
/*
<p><span class="component-subtype">With Icon</span></p>

		<li class="flag flag--top active--list-1 pam border-bottom border--3">
			<div class="flag--image prm">
				<span class="icon-utility-{{listItemIconIcon}} text-color-3"></span>
			</div>
			<div class="flag--body">
				<span class="db text-color-1 f4">{{listItemIconTitle}}</span>
			</div>
		</li>

*/
/*
<p><span class="component-subtype">With Label</span></p>

		<li class="list-plain active--list-1 pam border-bottom border--3">
			<span class="db text-color-1 f4">{{listItemLabelTitle}}</span>
			<span class="db text-color-2 f6">{{listItemLabelMeta}}</span>
		</li>

*/
/*
<p><span class="component-subtype">Flag Objects</span></p>

		<li class="flag flag--top active--list-1 pam border-bottom border--3">
			<div class="flag--image prm">
				<img src="{{listItemFlagImg}}" class="ht-30" alt="excel">
			</div>
			<div class="flag--body">
				<span class="db text-color-1 f4">{{listItemFlagTitle}}</span>
				<span class="db text-color-2 f6">{{listItemFlagMeta1}}</span>
				<span class="db text-color-2 f6">{{listItemFlagMeta2}}</span>
			</div>
		</li>

*/
/*
<p><span class="component-subtype">Container</span></p>

    <ul class="list-plain fw-normal bg-2 man pan" ng-transclude>
    </ul>

*/
/*
<p><span class="component-subtype">Task</span></p>

		<li class="flag flag--top pam">
			<div class="prm flag--image">
				<input
					class="checkbox checkbox--default checkbox--states-1 brm bg-secondary-btn sq-22 a-mid dib"
					type="checkbox"
					id="filter-1">
			</div>
			<div class="flag--body">
				<label for="filter-1">
					<h1 class="dib man f3 text-color-1">
						{{listItemTaskTitle}}
					</h1>
					<ul class="clear list-plain man pan">
						<li class="f5 text-truncate text-color-2">{{listItemTaskDetail1}}</li>
						<li class="f5 text-truncate text-color-2">{{listItemTaskDetail2}}</li>
					</ul>
				</label>
			</div>
			<div class="prn plm flag--image">
				<time datetime="2009-02-21" class="f6 text-color-2">{{listItemTaskDetail3}}</time>
			</div>
		</li>

*/
/*

<p><span class="component-subtype">Event</span></p>

		<li class="flag flag--top pam">
			<time datetime="10:00" class="f1 text-color-2 dib mrs">{{listItemEventTime}}</time>
			<span class="f6 text-color-2 mbs dib">{{listItemEventDuration}}</span>
			<h1 class="man f3 text-color-1 fw-semibold">
				<a href="javascript:void(0)">
					{{listItemEventTitle}}
				</a>
			</h1>
			<p class="mtn mbm f4 text-color-2 text-truncate">
				{{listItemEventDetail1}}
			</p>
			<hr class="hr hr--2">
      <ul class="list-plain man pan">
        <li class="text-truncate f5 text-color-2">{{listItemEventDetail2}}</li>
        <li class="text-truncate f5 text-color-2">{{listItemEventDetail3}}</li>
      </ul>
    </li>

*/
/*

## Lookup

<p class="component-description">Lookups allow the user to search for a Salesforce record to populate the field. They can either encompass only a single object type or can ask the user to pick an object type before allowing the user to search for a record.</p>
<hr class="man pan hr hr-1">

<p><span class="component-subtype">Default</span></p>

    <div class="mbm pos-rel">
      <label class="size-full icon-utility-search pos-abs label--lookup">
        <span class="dn">Lookup</span>
      </label>
      <input type="text" name="default" placeholder="Lookup" class="size-full plm prx pvm input input--default input--ph-1 input--focus-1">
    </div>

*/
/*
<p><span class="component-subtype">Error</span></p>

    <div class="mbm pos-rel">
      <label class="size-full icon-utility-search pos-abs label--lookup">
        <span class="dn">Lookup</span>
      </label>
      <input
        type="text"
        name="default"
        placeholder="Lookup"
        class="size-full plm prx pvm input input--error input--ph-1 input--focus-1">
    </div>
    <p class="text-color-2 f6">
      <span class="text-error fw-semibold f6">Error:</span>
      This field is required.
    </p>

*/
/*

<p><span class="component-subtype">With Label</span></p>

    <label class="mbm db pos-rel">
      <span class="db mbs f5 text-color-2">{{lookupWithLabelLabel}}</span>
      <span class="size-full icon-utility-search pos-abs label--lookup"></span>
      <input type="text" name="default" value="{{lookupWithLabelValue}}" placeholder="{{lookupWithLabelPlaceholder}}" class="size-full plm prx pvm input input--default input--ph-1 input--focus-1">
    </label>

*/
/*

## MDP Button

<p class="component-description">The MDP button appears by default on the bottom right of the screen. It allows the user to access the Multi-Dimensional Publisher.</p>
<hr class="man pan hr hr-1">

    <button class="bg-global-header sq-44 brm dropglow-1 no-border dib">
      <span class="lh-44 wht f2 icon-utility-add"></span>
    </button>

*/
/*

## MDP Launcher
<p class="component-description">The MDP launcher gives the user different options for publishing content.</p>
<hr class="man pan hr hr-1">

<p><span class="component-subtype">Default</span></p>

    <div>
      <div class="bg-4 brtopm mdp-launcher ht-450">
        <ul class="tc fixed-table man pan ht-third">
          <li class="active--list-2 a-mid dtc border-bottom border-right border--6">
            <img src="{{mdpLauncherIconTL}}" alt="post" class="sq-60 dib">
            <br>
            <span class="dib mtm f5 wht fw-normal">{{mdpLauncherLabelTL}}</span>
          </li>
          <li class="active--list-2 a-mid dtc border-bottom border--6">
            <img src="assets/icons/standard_bg/photo_120.png" alt="post" class="sq-60 dib">
            <br>
            <span class="dib mtm f5 wht fw-normal">Share Photo</span>
          </li>
        </ul>
        <ul class="tc fixed-table man pan ht-third">
          <li class="active--list-2 a-mid dtc border-bottom border-right border--6">
            <img src="assets/icons/standard_bg/file_120.png" alt="post" class="sq-60 dib">
            <br>
            <span class="dib mtm f5 wht fw-normal">Share File</span>
          </li>
          <li class="active--list-2 a-mid dtc border-bottom border--6">
            <img src="assets/icons/standard_bg/opportunity_120.png" alt="post" class="sq-60 dib">
            <br>
            <span class="dib mtm f5 wht fw-normal">New Opportunity</span>
          </li>
        </ul>
        <ul class="tc fixed-table man pan ht-third">
          <li class="active--list-2 a-mid dtc border-bottom border-right border--6">
            <img src="assets/icons/standard_bg/contact_120.png" alt="post" class="sq-60 dib">
            <br>
            <span class="dib mtm f5 wht fw-normal">New Contact</span>
          </li>
          <li class="active--list-2 a-mid dtc border-bottom border--6">
            <img src="assets/icons/standard_bg/lead_120.png" alt="post" class="sq-60 dib">
            <br>
            <span class="dib mtm f5 wht fw-normal">New Lead</span>
          </li>
        </ul>
      </div>
      <div class="carousel-dots fixed-table">
        <ul class="pos-rel dtc a-mid man pvn ht-75 list-horizontal tc bg-5 pln">
          <li class="sq-14 lh-14 ">
            <a href="javascript:void(0)" class="sq-7 bg-10 brc dropglow-1" title="Page 1">
              <span class="tha">Page 1</span>
            </a>
          </li>
          <li class="sq-14 lh-14 ">
            <a href="javascript:void(0)" class="sq-7 bg-11 brc is_4" title="Page 2">
              <span class="tha">Page 2</span>
            </a>
          </li>
          <li class="sq-14 lh-14 ">
            <a href="javascript:void(0)" class="sq-7 bg-11 brc is_4" title="Page 3">
              <span class="tha">Page 3</span>
            </a>
          </li>
          <span class="wht carousel-close icon-utility-close f1 pos-abs"></span>
        </ul>
      </div>
    </div>

*/
/*
<p><span class="component-subtype">Overflow</span></p>

    <div class="bg-4 brtopm ht-450">
      <ul class="list-plain pan man f5 wht">
        <li class="active--list-2 brtopm pam border-bottom border--6">Create a case on the opportunity on my feed</li>
        <li class="active--list-2 pam border-bottom border--6">New feed on the status change</li>
        <li class="active--list-2 pam border-bottom border--6">Create task on a thanks poll</li>
        <li class="active--list-2 pam border-bottom border--6">Post a file on the first feed of the year</li>
        <li class="active--list-2 pam border-bottom border--6">Dangle a unicorn above my head</li>
        <li class="active--list-2 pam border-bottom border--6">Do an action</li>
        <li class="active--list-2 pam border-bottom border--6">Make a gingerbread house for all my contacts</li>
        <li class="active--list-2 pam border-bottom border--6">Deliver pizza to my office</li>
        <li class="active--list-2 pam border-bottom border--6">Thank the pizza guy</li>
        <li class="active--list-2 pam border-bottom border--6">Apologize to my wife for being late</li>
      </ul>
    </div>
    <div class="carousel-dots fixed-table">
      <ul class="pos-rel dtc a-mid man pvn ht-75 list-horizontal tc bg-5 pln">
        <li class="sq-14 lh-14 ">
          <a href="javascript:void(0)" class="sq-7 bg-10 brc dropglow-1" title="Page 1">
            <span class="tha">Page 1</span>
          </a>
        </li>
        <li class="sq-14 lh-14 ">
          <a href="javascript:void(0)" class="sq-7 bg-11 brc is_4" title="Page 2">
            <span class="tha">Page 2</span>
          </a>
        </li>
        <li class="sq-14 lh-14 ">
          <a href="javascript:void(0)" class="sq-7 bg-11 brc is_4" title="Page 3">
            <span class="tha">Page 3</span>
          </a>
        </li>
        <span class="wht carousel-close icon-utility-close f1 pos-abs"></span>
      </ul>
    </div>
*/
.carousel-dots {
  margin-top: -3px; }

.carousel-close {
  right: 30px; }

/*

## Modal Dialog

<p class="component-description">Modal dialogs are used to notify the user of an important error that has occurred, or to ask the user to choose between several options. They can contain an icon, a title, body copy, up to three buttons, and a checkbox/toggle.</p>
<hr class="man pan hr hr-1">

<p><span class="component-subtype">Buttons Only</span></p>

    <a href="javascript:void(0)" name="close" title="close" class="db tr size-full pbm">
      <span class="db icon-utility-close f2 wht"></span>
    </a>
    <div class="bg-1 brm pam pos-rel tc">
      <button class="btn bg-secondary-btn btn--secondary pvs size-full brm border border--2 mbm">
        <span class="text-color-4 f3 fw-semibold">Secondary Button</span>
      </button>
      <button class="btn bg-secondary-btn btn--secondary pvs size-full brm border border--2 mbm">
        <span class="text-color-4 f3 fw-semibold">Secondary Button</span>
      </button>
      <button class="btn bg-secondary-btn btn--secondary pvs size-full brm border border--2">
        <span class="text-color-4 f3 fw-semibold">Secondary Button</span>
      </button>
    </div>

*/
/*
<p><span class="component-subtype">With text</span></p>

    <a href="javascript:void(0)" name="close" title="close" class="db tr size-full pbm">
      <span class="db icon-utility-close f2 wht"></span>
    </a>
    <div class="bg-1 brm pam pos-rel tc">
      <p class="mtn text-color-1 f4">
        <strong>Strong text!</strong>
        Detail text and lots of unicorns and rainbows.
      </p>
      <button class="btn bg-secondary-btn btn--secondary pvs size-full brm border border--2 mbm">
        <span class="text-color-4 f3 fw-semibold">Secondary Button</span>
      </button>
      <button class="btn bg-secondary-btn btn--secondary pvs size-full brm border border--2">
        <span class="text-color-4 f3 fw-semibold">Secondary Button</span>
      </button>
    </div>

*/
/*
<p><span class="component-subtype">With icon</span></p>

    <a href="javascript:void(0)" name="close" title="close" class="db tr size-full pbm">
      <span class="db icon-utility-close f2 wht"></span>
    </a>
    <div class="bg-1 brm pam pos-rel tc">
      <span class="icon-utility-warning text-warning icon1 dib mbm"></span>
      <p class="mtn text-color-1 f4">
        <strong>Strong text!</strong>
        Detail text and lots of unicorns and rainbows.
      </p>
      <button class="btn bg-secondary-btn btn--secondary pvs size-full brm border border--2 mbm">
        <span class="text-color-4 f3 fw-semibold">Secondary Button</span>
      </button>
      <button class="btn bg-secondary-btn btn--secondary pvs size-full brm border border--2">
        <span class="text-color-4 f3 fw-semibold">Secondary Button</span>
      </button>
    </div>

*/
/*
<p><span class="component-subtype">With checkbox</span></p>

    <a href="javascript:void(0)" name="close" title="close" class="db tr size-full pbm">
      <span class="db icon-utility-close f2 wht"></span>
    </a>
    <div class="bg-1 brm pam pos-rel tc clear">
      <span class="icon-utility-warning text-warning icon1 dib mbm"></span>
      <p class="mtn text-color-1 f4">
        <strong>Strong text!</strong>
        Detail text and lots of unicorns and rainbows.
      </p>
      <button class="btn bg-secondary-btn btn--secondary pvs size-full brm border border--2 mbm">
        <span class="text-color-4 f3 fw-semibold">Secondary Button</span>
      </button>
      <button class="btn bg-secondary-btn btn--secondary pvs size-full brm border border--2">
        <span class="text-color-4 f3 fw-semibold">Secondary Button</span>
      </button>
      <div class="mtm fl">
        <input type="checkbox" id="filter-1"
               class="checkbox checkbox--default checkbox--states-1 brm mrs bg-secondary-btn sq-22 a-mid dib" />
        <label class="f5 text-color-1" for="filter-1">
          Check this if you never want to see this modal again
        </label>
      </div>
    </div>

*/
.modal-dialog {
  padding: 1.75em;
  background: #344a5f; }

/*

## Modal Sort/Filter

<p class="component-description">Modals can also be used to sort or filter a list. The modal can contain a title, section headers, and list items. Tapping any option within any category should close the modal and move the checkmark accordingly.</p>
<hr class="man pan hr hr-1">

<p><span class="component-subtype">One section</span></p>

    <a href="javascript:void(0)" title="close" name="close" class="db tr size-full pbm">
      <span class="db icon-utility-close f2 wht"></span>
    </a>
    <div class="bg-1 brm pos-rel clear" role="group">
      <ul class="text-color-1 phm f4 man">
        <li class="db pvm border-bottom border--8">
          Value 1
          <span class="icon-utility-check fr text-blue"></span>
        </li>
        <li class="db pvm">
          Value 2
        </li>
      </ul>
    </div>

*/
/*
<p><span class="component-subtype">Multi-section</span></p>

    <a href="javascript:void(0)" title="close" name="close" class="db tr size-full pbm">
      <span class="db icon-utility-close f2 wht"></span>
    </a>
    <div class="bg-1 brm pos-rel clear" role="group">
      <h1 class="text-color-2 fw-semibold f4 dib mam">
        Filter and Sort
      </h1>
      <h2 class="text-color-2 f6 caps bg-2 dib size-full border-top border-bottom border--3 fw-normal phm pvs mvn">
        Label
      </h2>
      <ul class="text-color-1 phm f4 man">
        <li class="db pvm border-bottom border--8">
          Value 1
          <span class="icon-utility-check fr text-blue"></span>
        </li>
        <li class="db pvm">
          Value 2
        </li>
      </ul>
      <h2 class="text-color-2 f6 caps bg-2 dib size-full border-top border-bottom border--3 fw-normal phm pvs mvn">
        Label
      </h2>
      <ul class="text-color-1 phm f4 man">
        <li class="db pvm border-bottom border--8">
          Value 1
          <span class="icon-utility-check fr text-blue"></span>
        </li>
        <li class="db pvm">
          Value 2
        </li>
      </ul>
    </div>

*/
/*

## Page-Level Errors

<p class="component-description">Page-level errors appear at the top of a form to notify the user of an error that has prevented him from successfully submitting the form.</p>
<hr class="man pan hr hr-1">

    <section class="bg-7 border-bottom border--3">
      <div class="flag">
        <div class="flag--image phm">
          <span class="text-error icon-utility-error"></span>
        </div>
        <div class="flag--body">
          <h1 class="mvm fw-semibold text-color-1 f4">
            Looks like there's a problem
          </h1>
        </div>
      </div>
      <p class="mhm mtn f6 text-color-1">
        Review the errors below. If the problem can't be fixed, go to the full site.
      </p>
      <p class="mhm mtm f6 text-color-1">
        This is a page level error example.
      </p>
    </section>

*/
/*

## Percentage Indicator Bar

<p class="component-description">The percentage indicator bar appears to show the user a visualization of some percentage. This can mean several things, including progress or popularity.</p>
<hr class="man pan hr hr-1">

    <div class="size-full bg-1 paxs border border--4 brl">
      <div class="size-2of3 ht-7 bg-10 brm"></div>
    </div>

*/
/*

## Picklist

<p class="component-description">Picklists allow the user to select a value from a list of options. They can either restrict the user to one option or allow the user to pick multiple options. They can also allow users to pick from a grid of images.</p>
<hr class="man pan hr hr-1">

<p><span class="component-subtype">Default</span></p>

    <div class="mbm pos-rel">
      <span class="label--icon-r icon-utility-right size-full"></span>
      <a href="javascript:void(0)"
         name="picklist"
         title="Picklist Value"
         class="size-full plm prx pvm bg-secondary-btn input input--picklist">
        <label class="dib mrs f5 text-color-2">{{picklistDefaultLabel}}</label><span class="text-color-1 dib">{{picklistDefaultValue}}</span>
      </a>
    </div>

*/
/*
<p><span class="component-subtype">Error</span></p>

    <div class="pos-rel">
      <span class="label--icon-r icon-utility-right size-full"></span>
      <a
        href="javascript:void(0)"
        name="picklist"
        title="Picklist Value"
        class="size-full plm prx pvm bg-secondary-btn input input--picklist-error">
        <label class="dib mrs f5 text-color-2">{{picklistErrorLabel}}</label><span class="text-color-1 dib">{{picklistErrorValue}}</span>
      </a>
    </div>
    <p class="mbm text-color-2 f6"><span class="text-error fw-semibold f6">Error:</span> This field is required.</p>

*/
/*
<p><span class="component-subtype">Label Outside</span></p>

    <div class="mbm pos-rel">
      <label class="dib mbs f5 text-color-2 size-full">{{picklistOutsideLabelLabel}}</label>
      <span class="label--icon-r-out icon-utility-right size-full"></span>
      <a
        href="javascript:void(0)"
        name="picklist"
        title="Picklist Value"
        class="size-full plm prx pvm bg-secondary-btn input input--picklist">
        <span class="text-color-1 dib">{{picklistLabelOutsideValue}}</span>
      </a>
    </div>

*/
/*

## Progress Spinner

<p class="component-description">The progress spinner appears to let the user know that a background process is being executed. Some examples include: an edited record is in the process of saving, a search is being performed, or a page is loading.</p>
<hr class="man pan hr hr-1">

<p><span class="component-subtype">Default</span></p>

    <div class="tc">
      <img src="assets/loading-gray.gif" alt="loading" class="sq-20 dib">
    </div>

*/
/*

<p><span class="component-subtype">Modal</span></p>

    <div class="tc brm bg-6-80p text-color-5 sq-100">
      <img src="assets/loading-white.gif" alt="loading" class="sq-35 mtl mbs dib">
      <span class="db f4">Loading</span>
    </div>

*/
/*

## Radio Button

<p class="component-description">Radio inputs allow the user to choose between several options, and are used in place of picklists when seeing all of the options listed at the top level is extremely important, such as on a poll.</p>
<hr class="man pan hr hr-1">

    <form>
      <div class="mbm db">
        <input class="radio radio--default radio--states-1 brc mrs bg-secondary-btn sq-22 a-mid dib" type="radio" name="filter" value="filter-1" id="filter-1" />
        <label class="f4 text-color-1" for="filter-1">Filter 1</label>
      </div>

      <div class="mbm db">
        <input class="radio radio--default radio--states-1 brc mrs bg-secondary-btn sq-22 a-mid clear dib" type="radio" name="filter" value="filter-2" id="filter-2" />
        <label class="f4 text-color-1" for="filter-2">Filter 2</label>
      </div>

      <div class="mbm db">
        <input disabled class="radio radio--default radio--states-1 brc mrs bg-secondary-btn sq-22 a-mid clear dib" type="radio" name="filter" value="filter-3" id="filter-3" />
        <label class="f4 text-color-1" for="filter-3">Filter 3 (Disabled)</label>
      </div>
    </form>
*/
/*

## Search Widget

<p class="component-description">When on a searchable object, list, or feed, the user interacts with the search widget to perform searches within the object, list, or feed. It can include a sort/filter icon to allow the user to sort or filter the list or feed.</p>
<hr class="man pan hr hr-1">

<p><span class="component-subtype">Default</span></p>

    <header class="bg-generic-1 ht-44 ds-1 lh-44" role="group">
      <div class="pos-rel size-fill phs pvs">
        <label class="icon-utility-search pos-abs label--search">
          <span class="tha">URL</span>
        </label>
        <input type="text" name="default" placeholder="{{searchWidgetPlaceholder}}"
               class="size-full plx prs ht-30 input input--white input--ph-1 input--focus-1">
      </div>
    </header>

*/
/*
<p><span class="component-subtype">With sort/filter</span></p>

    <header class="bg-generic-1 ht-44 ds-1 lh-44" role="group">
      <a href="javascript:void(0)" title="info" class="fr mhm">
        <span class="active-dim icon-utility-filter f2 a-mid text-color-4"></span>
      </a>
      <div class="pos-rel size-fill pls pvs">
        <label class="icon-utility-search pos-abs label--search">
          <span class="tha">URL</span>
        </label>
        <input type="text" name="default" placeholder="{{searchWidgetSortFilterPlaceholder}}" class="size-full plx prs ht-30 input input--white input--ph-1 input--focus-1">
      </div>
    </header>

*/
/*

## Staged Navigation

<p class="component-description">Staged navigation is navigation that visually lives underneath the content layer. Revealing staged navigation is triggered by tapping an icon in the primary header. It can contain one or multiple sections of tappable list items.</p>
<hr class="man pan hr hr-1">

<p><span class="component-subtype">Stage Left</span></p>

    <nav role="navigation" class="bg-4">
      <section>
        <ul class="pan man f3 text-color-5">
          <li class="ds-1 pas">
            <label class="text-color-3 icon-utility-search pos-abs label--search">
              <span class="tha">Search</span>
            </label>
            <input type="text" name="search" placeholder="Search Salesforce"
            class="size-full plx prm pvs input input--stageleft input--ph-3 input--focus-1">
          </li>
          <li class="flag">
            <a href="javascript:void(0)" class="flag--image pam active--list-2" title="Feed">
              <img src="assets/icons/standard_bg/feed_120.png" class="sq-30 fl mrm" alt="">
              <span class="f3 text-color-5 db lh-30">Feed</span>
            </a>
          </li>
        </ul>
      </section>
      <section>
        <h1 class="man f6 text-color-3 caps pvs plm size-full bg-5">Recent</h1>
        <ul class="pan man f3 text-color-5">
          <li class="flag border-bottom border--6">
            <a href="javascript:void(0)" class="size-full pam active--list-2" title="Contacts">
              <img src="assets/icons/standard_bg/contact_120.png" class="sq-30 fl mrm" alt="">
              <span class="f3 text-color-5 db lh-30">Contacts</span>
            </a>
          </li>
          <li class="flag border-bottom border--6">
            <a href="javascript:void(0)" class="size-full pam active--list-2" title="Opportunities">
              <img src="assets/icons/standard_bg/opportunity_120.png" class="sq-30 fl mrm" alt="">
              <span class="f3 text-color-5 db lh-30">Opportunities</span>
            </a>
          </li>
          <li class="flag border-bottom border--6">
            <a href="javascript:void(0)" class="size-full pam active--list-2" title="Accounts">
              <img src="assets/icons/standard_bg/account_120.png" class="sq-30 fl mrm" alt="">
              <span class="f3 text-color-5 db lh-30">Accounts</span>
            </a>
          </li>
          <li class="flag border-bottom border--6">
            <a href="javascript:void(0)" class="size-full pam active--list-2" title="Contracts">
              <img src="assets/icons/standard_bg/contract_120.png" class="sq-30 fl mrm" alt="">
              <span class="f3 text-color-5 db lh-30">Contracts</span>
            </a>
          </li>
          <li class="flag border-bottom border--6">
            <a href="javascript:void(0)" class="size-full pam active--list-2" title="Cases">
              <img src="assets/icons/standard_bg/case_120.png" class="sq-30 fl mrm" alt="">
              <span class="f3 text-color-5 db lh-30">Cases</span>
            </a>
          </li>
          <li class="flag">
            <a href="javascript:void(0)" class="size-full pam active--list-2" title="Leads">
              <img src="assets/icons/standard_bg/lead_120.png" class="sq-30 fl mrm" alt="">
              <span class="f3 text-color-5 db lh-30">Leads</span>
            </a>
          </li>
        </ul>
      </section>
      <section>
        <h1 class="man f6 text-color-3 caps pvs plm size-full bg-5">Apps</h1>
        <ul class="pan man f3 text-color-5">
          <li class="flag border-bottom border--6">
            <a href="javascript:void(0)" class="size-full pam active--list-2" title="Today">
              <img src="assets/icons/standard_bg/today_120.png" class="sq-30 fl mrm" alt="">
              <span class="f3 text-color-5 db lh-30">Today</span>
            </a>
          </li>
          <li class="flag border-bottom border--6">
            <a href="javascript:void(0)" class="size-full pam active--list-2" title="Tasks">
              <img src="assets/icons/standard_bg/task_120.png" class="sq-30 fl mrm" alt="">
              <span class="f3 text-color-5 db lh-30">Tasks</span>
            </a>
          </li>
          <li class="flag">
            <a href="javascript:void(0)" class="size-full pam active--list-2" title="Notes">
              <img src="assets/icons/standard_bg/note_120.png" class="sq-30 fl mrm" alt="">
              <span class="f3 text-color-5 db lh-30">Notes</span>
            </a>
          </li>
        </ul>
      </section>
      <section>
        <hr class="man ht-30 size-full bg-5">
        <ul class="pan man f3 text-color-5">
          <li class="flag active--list-2 border-bottom border--6">
            <a href="javascript:void(0)" class="size-full pam" title="Logout">
							<div class="flag--image">
								<img src="assets/icons/standard_bg/avatar_120.png" class="sq-30 fl mrm" alt="">
							</div>
							<div class="flag--body">
								<span class="f3 text-color-5">rspohn@salesforce.com</span><br>
								<span class="f4 text-color-3">na1.salesforce.com</span>
							</div>
            </a>
          </li>
          <li class="flag active--list-2 border-bottom border--6">
            <a href="javascript:void(0)" class="size-full pam" title="Settings">
              <span class="a-mid sq-30 pls mrm f2 text-color-8 icon-utility-settings"></span>
              <span class="f3 text-color-5 lh-30">Settings</span>
            </a>
          </li>
          <li class="flag active--list-2 border-bottom border--6">
            <a href="javascript:void(0)" class="size-full pam" title="Help">
              <span class="a-mid sq-30 pls mrm f2 text-color-8 icon-utility-help"></span>
              <span class="f3 text-color-5 lh-30">Help</span>
            </a>
          </li>
          <li class="flag active--list-2">
            <a href="javascript:void(0)" class="size-full pam" title="Logout">
              <span class="a-mid sq-30 pls mrm f2 text-color-8 icon-utility-logout"></span>
              <span class="f3 text-color-5 lh-30">Logout</span>
            </a>
          </li>
        </ul>
      </section>
    </nav>

*/
/*
<p><span class="component-subtype">Notifications</span></p>

    <section class="bg-5">
      <header class="tc pvm border-bottom border--7">
        <h1 class="man fw-semibold f2 text-color-5">Notifications</h1>
      </header>
      <ul class="pan man bg-4">
        <li class="flag pam active--list-2 border-bottom border--6">
          <div class="flag--image prm">
            <img src="http://pixelholdr.com/portrait,business,man/44x44/dimensions:hide" class="brm" alt="feed">
          </div>
          <div class="flag--body">
            <p class="f4 text-color-5 man">
              Janice Walters commented on your post.
            </p>
            <p class="f6 text-color-3 man">
              15 minutes ago
            </p>
          </div>
        </li>
        <li class="flag pam active--list-2 border-bottom border--6">
          <div class="flag--image prm">
            <img src="http://pixelholdr.com/headshot,business,woman/44x44/dimensions:hide" class="brm" alt="feed">
          </div>
          <div class="flag--body">
            <p class="f4 text-color-5 man">
              Kirsten Smith commented on your post.
            </p>
            <p class="f6 text-color-3 man">
              29 minutes ago
            </p>
          </div>
        </li>
        <li class="flag pam active--list-2 border-bottom border--7">
          <div class="flag--image prm">
            <img src="http://pixelholdr.com/picture,man/44x44/dimensions:hide" class="brm" alt="feed">
          </div>
          <div class="flag--body">
            <p class="f4 text-color-5 man">
              James Potter commented on a post on your wall.
            </p>
            <p class="f6 text-color-3 man">
              54 minutes ago
            </p>
          </div>
        </li>
      </ul>
      <ul class="pan man">
        <li class="flag flag--top pam border-bottom border--7">
          <div class="flag--image prm">
            <img src="http://pixelholdr.com/headshot,man/44x44/dimensions:hide" class="brm" alt="feed">
          </div>
          <div class="flag--body">
            <p class="f4 text-color-5 man">
              "Hey Bill - wanted to ask you about EBR connections. Know anyone that
              can help me out for a couple days..."
            </p>
            <p class="f6 text-color-3 man">
              2 hours ago
            </p>
          </div>
        </li>
        <li class="flag pam active--list-2 border-bottom border--7">
          <div class="flag--image prm">
            <img src="http://pixelholdr.com/picture,woman/44x44/dimensions:hide" class="brm" alt="feed">
          </div>
          <div class="flag--body">
            <p class="f4 text-color-5 man">
              Patty Charles commented on your post.
            </p>
            <p class="f6 text-color-3 man">
              3 hours ago
            </p>
          </div>
        </li>
        <li class="flag pam active--list-2 border-bottom border--7">
          <div class="flag--image prm">
            <img src="http://pixelholdr.com/business,picture,woman/44x44/dimensions:hide" class="brm" alt="feed">
          </div>
          <div class="flag--body">
            <p class="f4 text-color-5 man">
              Lorelei Chan commented on your post.
            </p>
            <p class="f6 text-color-3 man">
              Yesterday
            </p>
          </div>
        </li>
      </ul>
    </section>

*/
/*

## Textarea

<p class="component-description">Text areas are large inputs where users can type and view larger blocks of text. They can also have buttons attached to the bottom.</p>
<hr class="man pan hr hr-1">

<p><span class="component-subtype">Default</span></p>

    <label>
      <span class="tha">Default</span>
      <textarea name="default" placeholder="{{textareaDefaultPlaceholder}}" class="size-full phm pvm textarea textarea--default textarea--ph-1 textarea--focus-1"></textarea>
    </label>

*/
/*
<p><span class="component-subtype">Error</span></p>

    <label>
      <span class="tha">Error</span>
      <textarea name="default" placeholder="{{textareaErrorPlaceholder}}" class="size-full phm pvm textarea textarea--error textarea--ph-1 textarea--focus-1"></textarea>
    </label>
    <p class="text-color-2 f6"><span class="text-error fw-semibold f6">Error:</span> This field is required.</p>

*/
/*
<p><span class="component-subtype">With Buttons</span></p>

    <article>
      <label>
        <span class="tha">Default</span>
        <textarea
          name="default"
          placeholder="Textarea with buttons"
          class="brtopm size-full phm pvm textarea textarea--default textarea--ph-1 textarea--focus-1">
        </textarea>
      </label>
      <button class="btn bg-secondary-btn btn--secondary pvm phn size-1of2 brbotm-l border-bottom border-sides border-top-none border--2 fl">
        <span class="icon-utility-adduser text-color-4 f1"></span>
      </button>
      <button class="btn bg-secondary-btn btn--secondary pvm phn size-1of2 brbotm-r border-bottom border-right border-top-none border-left-none border--2">
        <span class="text-color-4 f1 icon-utility-attach"></span>
      </button>
    </article>

*/
/*
<p><span class="component-subtype">With Buttons and Error</span></p>

    <article>
      <label>
        <span class="tha">Error</span>
        <textarea
          name="default"
          placeholder="Textarea with buttons"
          class="brtopm size-full phm pvm textarea textarea--error textarea--ph-1 textarea--focus-1">
        </textarea>
      </label>
      <button class="btn bg-secondary-btn btn--secondary pvm size-1of2 brbotm-l border-bottom border-sides border-top-none border--2 fl">
        <span class="icon-utility-adduser text-color-4 f1"></span>
      </button>
      <button class="btn bg-secondary-btn btn--secondary pvm size-1of2 brbotm-r border-bottom border-right border-top-none border-left-none border--2">
        <span class="text-color-4 f1 icon-utility-attach"></span>
      </button>
      <p class="text-color-2 f6 clear"><span class="text-error fw-semibold f6">Error:</span> This field is required.</p>
    </article>

*/
/*

## Text Input

<p class="component-description">Text inputs span a wide variety of types. They may contain persistent text elements (such as % or USD) where appropriate.</p>
<hr class="man pan hr hr-1">

<p><span class="component-subtype">Default</span></p>

    <label>
      <span class="dn">Default</span>
      <input type="text" name="default" value="{{textInputValue}}" placeholder="{{textInputPlaceholder}}" class="mbm size-full phm pvm input input--default input--ph-1 input--focus-1">
    </label>

*/
/*

<p><span class="component-subtype">Error</span></p>

    <label>
      <span class="dn">Default</span>
      <input type="text" name="default" placeholder="Error Input" class="size-full phm pvm input input--error input--ph-1 input--focus-1" value="Error Input">
    </label>
    <p class="mbm text-color-2 f6"><span class="text-error fw-semibold f6">Error:</span> This field is required.</p>

*/
/*

<p><span class="component-subtype">With Label</span></p>

    <label>
      <span class="db mbs f5 text-color-2">{{textInputWithLabelLabel}}</span>
      <input type="text" name="default" value="{{textInputWithLabelValue}}" placeholder="{{textInputWithLabelPlaceholder}}" class="mbm size-full phm pvm input input--default input--ph-1 input--focus-1">
    </label>

*/
/*

<p><span class="component-subtype">Search Input</span></p>

    <div class="mbm pos-rel">
      <label class="icon-utility-search pos-abs label--search">
        <span class="dn">Search</span>
      </label>
      <input type="text" name="default" placeholder="Search Salesforce" class="size-full plx prm pvs input input--default input--ph-1 input--focus-1">
    </div>

*/
/*

<p><span class="component-subtype">With Fixed Text</span></p>

    <div class="mbm pos-rel">
      <label class="pos-abs size-full label--fixedtext" data-fixedtext="%">
        <span class="dn">Percentage</span>
      </label>
      <input type="text" name="default" placeholder="Percentage" class="size-full prx plm pvm input input--default input--ph-1 input--focus-1">
    </div>

*/
/*

## Toast Notification

<p class="component-description">Toast notifications are used as a lightweight way to let the user know that a background process has finished when there is no other indication. They can have icons in addition to text.</p>
<hr class="man pan hr hr-1">

    <div class="flag pam ds-1 brbotm bg-2-95p">
      <div class="flag--image prm">
        <span class="f1 icon-utility-warning text-warning"></span>
      </div>
      <div class="flag--body">
        <p class="man f4 text-color-1">
          <strong>Oh noez!</strong>
          Something may or may not have gone wrong.
        </p>
      </div>
    </div>

*/
/*

## View Picker

<p class="component-description">The View Picker component allows the user to choose between different views of a list or a feed.</p>
<hr class="man pan hr hr-1">

		<section class="border-bottom border--3 clear">
			<a href="javascript:void(0)" title="More" class="db ht-44 mhm mts">
				<span class="dib lh-44 f2 text-color-1">
					<strong>My Files</strong>
				</span>
				<span class="dib lh-44 mls f6 text-color-1 icon-utility-down"></span>
			</a>
		</section>

*/
/* ==========================================================================
   LISTS

   - Horizontal List
   ========================================================================== */
/**
 * 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="list-horizontal">
       <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
 *
 */
.list-horizontal {
  margin: 0;
  padding: 0;
  list-style: none; }
  .list-horizontal > li, .list-horizontal > li > a {
    display: inline-block;
    *display: inline;
    zoom: 1; }

.list-plain {
  list-style: none; }

/* ==========================================================================
   Spacing-specific utilities

   Note: Not representative of values we want to be using yet.
   ========================================================================== */
/**
 * Used to adjust the default spacing between components
 * Use with great care!
 *
 * <type><direction><size>
 *
 * A = all
 * T = top
 * R = right
 * B = bottom
 * L = left
 * H = horizontal
 * V = vertical
 *
 * n = none
 * xs = extra small
 * s = small
 * m = medium
 * l = large
 * x = extra large
 * xx = extra extra large
 */
/* All */
.pan {
  padding: 0; }

.paxs {
  padding: 3px; }

.pas {
  padding: 7px; }

.pam {
  padding: 14px; }

.pal {
  padding: 18px; }

.pax {
  padding: 28px; }

.paxx {
  padding: 36px; }

.man {
  margin: 0; }

.masx {
  margin: 3px; }

.mas {
  margin: 7px; }

.mam {
  margin: 14px; }

.mal {
  margin: 18px; }

.max {
  margin: 28px; }

.maxx {
  margin: 36px; }

/* Vertical */
.pvn {
  padding-top: 0;
  padding-bottom: 0; }

.pvsx {
  padding-top: 3px;
  padding-bottom: 3px; }

.pvs {
  padding-top: 7px;
  padding-bottom: 7px; }

.pvm {
  padding-top: 14px;
  padding-bottom: 12px; }

.pvl {
  padding-top: 18px;
  padding-bottom: 18px; }

.pvx {
  padding-top: 28px;
  padding-bottom: 28px; }

.pvxx {
  padding-top: 36px;
  padding-bottom: 36px; }

.mvn {
  margin-top: 0;
  margin-bottom: 0; }

.mvsx {
  margin-top: 3px;
  margin-bottom: 3px; }

.mvs {
  margin-top: 7px;
  margin-bottom: 7px; }

.mvm {
  margin-top: 14px;
  margin-bottom: 12px; }

.mvl {
  margin-top: 18px;
  margin-bottom: 18px; }

.mvx {
  margin-top: 28px;
  margin-bottom: 28px; }

.mvxx {
  margin-top: 36px;
  margin-bottom: 36px; }

/* Horizontal */
.phn {
  padding-left: 0;
  padding-right: 0; }

.phsx {
  padding-left: 3px;
  padding-right: 3px; }

.phs {
  padding-left: 7px;
  padding-right: 7px; }

.phm {
  padding-left: 14px;
  padding-right: 14px; }

.phl {
  padding-left: 18px;
  padding-right: 18px; }

.phx {
  padding-left: 28px;
  padding-right: 28px; }

.phxx {
  padding-left: 36px;
  padding-right: 36px; }

.mhn {
  margin-left: 0;
  margin-right: 0; }

.mhsx {
  margin-left: 3px;
  margin-right: 3px; }

.mhs {
  margin-left: 7px;
  margin-right: 7px; }

.mhm {
  margin-left: 14px;
  margin-right: 14px; }

.mhl {
  margin-left: 18px;
  margin-right: 18px; }

.mhx {
  margin-left: 28px;
  margin-right: 28px; }

.mhxx {
  margin-left: 36px;
  margin-right: 36px; }

/* Top */
.ptn {
  padding-top: 0; }

.ptsx {
  padding-top: 3px; }

.pts {
  padding-top: 7px; }

.ptm {
  padding-top: 14px; }

.ptl {
  padding-top: 18px; }

.ptx {
  padding-top: 28px; }

.ptxx {
  padding-top: 36px; }

.mtn {
  margin-top: 0; }

.mtsx {
  margin-top: 3px; }

.mts {
  margin-top: 7px; }

.mtm {
  margin-top: 14px; }

.mtl {
  margin-top: 18px; }

.mtx {
  margin-top: 28px; }

.mtxx {
  margin-top: 36px; }

/* Bottom */
.pbn {
  padding-bottom: 0; }

.pbsx {
  padding-bottom: 3px; }

.pbs {
  padding-bottom: 7px; }

.pbm {
  padding-bottom: 14px; }

.pbl {
  padding-bottom: 18px; }

.pbx {
  padding-bottom: 28px; }

.pbxx {
  padding-bottom: 36px; }

.mbn {
  margin-bottom: 0; }

.mbsx {
  margin-bottom: 3px; }

.mbs {
  margin-bottom: 7px; }

.mbm {
  margin-bottom: 14px; }

.mbl {
  margin-bottom: 18px; }

.mbx {
  margin-bottom: 28px; }

.mbxx {
  margin-bottom: 36px; }

/* Left */
.pln {
  padding-left: 0; }

.plsx {
  padding-left: 3px; }

.pls {
  padding-left: 7px; }

.plm {
  padding-left: 14px; }

.pll {
  padding-left: 18px; }

.plx {
  padding-left: 28px; }

.plxx {
  padding-left: 36px; }

.mln {
  margin-left: 0; }

.mlsx {
  margin-left: 3px; }

.mls {
  margin-left: 7px; }

.mlm {
  margin-left: 14px; }

.mll {
  margin-left: 18px; }

.mlx {
  margin-left: 28px; }

.mlxx {
  margin-left: 36px; }

/* Right */
.prn {
  padding-right: 0; }

.prsx {
  padding-right: 3px; }

.prs {
  padding-right: 7px; }

.prm {
  padding-right: 14px; }

.prl {
  padding-right: 18px; }

.prx {
  padding-right: 28px; }

.prxx {
  padding-right: 36px; }

.mrn {
  margin-right: 0; }

.mrsx {
  margin-right: 3px; }

.mrs {
  margin-right: 7px; }

.mrm {
  margin-right: 14px; }

.mrl {
  margin-right: 18px; }

.mrx {
  margin-right: 28px; }

.mrxx {
  margin-right: 36px; }

/* ==========================================================================
Style Guide specific styles

Note: Refactor as much as possible to use core styles
========================================================================== */
/* Unique styles to be folded in or refactored
========================================================================== */
.masu {
  margin: 16px; }

.paxl {
  padding: 28px; }

.ptxl {
  padding-top: 28px; }

.prxl {
  padding-right: 28px; }

.pbxl {
  padding-bottom: 28px; }

.plxl {
  padding-left: 28px; }

.dark-0 {
  color: #2e4153; }

.f-30 {
  font-size: 30px; }

.f-40 {
  font-size: 40px; }

.bg-sct-light {
  background: white;
  transition: all 0.3s ease; }
  .bg-sct-light .sg-h1 {
    color: #293f54; }
  .bg-sct-light .sg-h2 {
    color: #778a9c; }

.bg-sct-med {
  color: #293f54;
  background: #ecf0f3;
  transition: all 0.3s ease; }
  .bg-sct-med .sg-h1 {
    color: #293f54; }
  .bg-sct-med .sg-h2 {
    color: #293f54; }
  .bg-sct-med .sg-options-link:hover {
    color: #647687; }
  .bg-sct-med .sg-icn--fnt, .bg-sct-med .sg-icn--doc {
    background-color: white; }

.bg-sct-med-drk {
  background: #dde3e8; }

.bg-sct-drk {
  background: #293f54;
  transition: all 0.3s ease; }
  .bg-sct-drk .sg-h1 {
    color: white; }
  .bg-sct-drk .sg-h2 {
    color: #a7b9c9; }
  .bg-sct-drk .sg-icn--fnt {
    color: #ecf0f3 !important; }
  .bg-sct-drk .sg-icn--fnt, .bg-sct-drk .sg-icn--doc {
    background-color: rgba(255, 255, 255, 0.1) !important; }

.sg-grid-med {
  width: 926px;
  margin: 0 auto; }

.sg-grid-max {
  width: 1040px;
  margin: 0 auto; }

.sg-text-meta {
  font-size: 11px;
  color: #647687; }

/* Style section links
========================================================================== */
.sg-options {
  right: 30px;
  top: 30px; }

.sg-options-link:link {
  color: #a7b9c9; }
.sg-options-link:hover {
  color: #ecf0f3; }

html {
  height: 100%;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }

body {
  overflow-x: hidden; }

.scrollable {
  overflow-x: hidden;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch; }

.mh-800 {
  min-height: 800px; }

#sg-main {
  background-color: #ecf0f3;
  position: absolute;
  width: 100%;
  min-height: 800px; }

.ht-100p {
  height: 100%; }

/* Main nav
========================================================================== */
.sg-nav-selected:link {
  background-color: #278ac7; }

.sg-nav-mobile {
  top: 56px; }

.sg-modal-mobile {
  width: 280px;
  left: 50%;
  margin-left: -140px;
  -webkit-transform: translate(0, 50px);
  transform: translate(0, 50px); }

/* Button styles
========================================================================== */
.sg-btn {
  display: inline-block;
  padding: 16px 20px;
  border: 1px solid #cdd8df;
  color: #ecf0f3;
  border-radius: 8px;
  font-size: 15px;
  font-weight: bold;
  text-transform: uppercase;
  opacity: 0.7;
  transition: opacity 0.1s ease-in-out; }
  .sg-btn:hover {
    opacity: 1;
    color: #ecf0f3;
    border-color: #ecf0f3;
    cursor: pointer; }

/* Page styles
========================================================================== */
.sg-section {
  margin: 0;
  clear: both; }

.sg-h1 {
  font-size: 30px;
  font-weight: normal;
  letter-spacing: 0;
  text-align: center; }

.sg-h2 {
  font-size: 16px;
  font-weight: normal; }

.sg-sct-action {
  margin: 0 auto 28px; }

/* Guidelines section
========================================================================== */
#sg-guidelines {
  padding-top: 0; }

.sg-arrow--fnt {
  font-size: 17px;
  font-weight: 100;
  color: white;
  padding: 13px;
  color: #8695a1; }

.sg-arrow {
  width: 44px;
  height: 44px;
  border-radius: 30px;
  opacity: 0.8;
  transition: opacity 0.15s ease-in-out; }
  .sg-arrow:hover {
    color: white;
    opacity: 1; }

.sg-v-side {
  width: 0; }

.sg-v-middle {
  width: 100%; }

.sg-v {
  padding: 0 55px; }

.sg-v-ttl {
  color: #2e4052;
  font-size: 15px;
  line-height: 32px;
  text-transform: uppercase;
  letter-spacing: 0.08em; }

.sg-v-dsc {
  color: #647687;
  font-size: 16px;
  line-height: 18px; }

.sg-v-lne {
  position: relative;
  z-index: 10;
  height: 86px;
  width: 153px;
  background: transparent url("assets/line.png"); }

.sg-v-lne--r {
  -webkit-transform: scaleX(-1);
  -moz-transform: scaleX(-1);
  -ms-transform: scaleX(-1);
  -o-transform: scaleX(-1);
  transform: scaleX(-1); }

.sg-v-carousel {
  max-width: 1024px; }

.sg-slide-hierarchy .sg-v-btn--1 {
  top: 20px;
  left: 10px; }
.sg-slide-hierarchy .sg-v-btn--2 {
  top: 115px;
  left: 125px; }
.sg-slide-hierarchy .sg-v-btn--3 {
  top: 222px;
  right: 142px; }

.sg-slide-alignment .sg-v-btn--1 {
  top: 115px;
  left: 35px; }
.sg-slide-alignment .sg-v-btn--2 {
  top: 255px;
  left: 115px; }
.sg-slide-alignment .sg-v-btn--3 {
  top: 255px;
  right: 140px; }

.sg-slide-simplicity .sg-v-btn--1 {
  top: 140px;
  left: -15px; }
.sg-slide-simplicity .sg-v-btn--2 {
  top: 135px;
  left: 165px; }
.sg-slide-simplicity .sg-v-btn--3 {
  top: 280px;
  right: 146px; }

.sg-v-frame {
  width: 280px;
  height: 487px;
  margin: 0 auto -53px;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px; }

.sg-v-frame-inner {
  position: absolute;
  top: 62px;
  width: 240px;
  height: 425px;
  margin: 0px 20px;
  background: #efefef;
  overflow: hidden; }
  .sg-v-frame-inner img {
    width: 100%; }

.sg-v-btn {
  border-radius: 100%;
  height: 62px;
  width: 62px;
  background: #b6c5d2;
  border: 6px solid white;
  z-index: 20; }

/* Color section
========================================================================== */
.sg-swatch--m, .sg-swatch--l {
  color: #293f54;
  width: 110px;
  height: 180px; }
  .sg-swatch--m .sg-swatch-bg, .sg-swatch--l .sg-swatch-bg {
    top: 117px; }

.sg-swatch-bg, .sg-weight-bg {
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 3px; }

/* Typography section
========================================================================== */
.sg-typo {
  width: 122px;
  height: 200px;
  border-radius: 3px;
  background: white; }

.sg-typo-fnt {
  font-size: 46px;
  color: #2e4052; }

.sg-typo-dsc {
  color: #647687; }

.sg-typo-bg {
  position: relative;
  top: 22px;
  background: #fcfcfd;
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 3px; }

/* Icon section background toggle
========================================================================== */
.sg-icons-dark {
  background-color: #2e4052; }

.sg-filter {
  margin: 0 0 1em; }

.sg-tagline {
  margin-left: 20px;
  font-size: 14px; }

/* Icons
========================================================================== */
.sg-icon {
  width: 65px; }
  .sg-icon .sg-icon-art {
    border-radius: 5px;
    width: 50px;
    height: 50px;
    background-size: 100%;
    background-repeat: no-repeat; }
  .sg-icon p {
    font-size: 8px;
    color: #778a9c; }

.sg-icn--fnt {
  font-size: 18px;
  line-height: 50px !important;
  color: #647687; }

.sg-icn--doc img {
  width: 30px;
  top: 8px; }

/* Download Guidelines
========================================================================== */
#sg-resources {
  border-top: 1px solid #d6dee4;
  padding: 50px; }

.sg-dwn {
  width: 194px;
  margin: 0 auto;
  background: white;
  padding: 20px; }
  .sg-dwn > img {
    margin: 0px auto 14px; }
  .sg-dwn > p {
    margin: 0;
    font-size: 11px;
    font-weight: bold;
    color: #778a9c; }

/* Examples
========================================================================== */
.exampleDetails, .exampleScreen {
  width: 100%; }

/* Components
========================================================================== */
.sg-page {
  position: relative;
  max-width: 1000px;
  margin: 0 auto; }

.sg-col-nav a:link, .sg-col-nav a:visited, .sg-col-nav a:active, .sg-left-nav a:link, .sg-left-nav a:visited, .sg-left-nav a:active, .sg-component-links a:link, .sg-component-links a:visited, .sg-component-links a:active {
  color: #44596c; }
.sg-col-nav a:hover, .sg-left-nav a:hover, .sg-component-links a:hover {
  color: #6e7e8a; }

.sg-col-nav {
  column-count: 2;
  -moz-column-count: 2;
  -webkit-column-count: 2; }

.sg-content-main .sg-panel h2 {
  font-size: 24px;
  color: #2e4153;
  padding: 0 14px 14px;
  margin: 0 -14px;
  border-bottom: #eceef0 1px solid; }
.sg-content-main .sg-panel h3 {
  color: #2e4153; }
.sg-content-main .component {
  overflow: hidden; }
  .sg-content-main .component > p {
    margin: 0; }
  .sg-content-main .component > h2 {
    font-size: 24px;
    color: #2e4153;
    padding: 14px 18px;
    background-color: white;
    display: inline-block;
    width: 100%;
    border-radius: 5px 5px 0 0;
    border-bottom: #eceef0 1px solid;
    margin: 1em 0 0 0; }
  .sg-content-main .component > h3 {
    font-size: 18px;
    color: #2e4153;
    padding: 14px 18px 0;
    margin: 0;
    background-color: white; }
  .sg-content-main .component pre {
    overflow: auto;
    margin-top: 0;
    margin-bottom: 0; }
    .sg-content-main .component pre::-webkit-scrollbar {
      width: 0; }
  .sg-content-main .component code {
    padding: 2em;
    background-color: white;
    width: 972px;
    font-size: 14px;
    font-family: 'Inconsolata', monospace;
    line-height: 18px; }

.sg-example-description, .component-description {
  font-weight: 300;
  font-size: 14px;
  line-height: 20px;
  color: #647687;
  padding: 14px 18px;
  margin: 0;
  background: white; }

.component-subtype {
  color: #6e7e8a;
  font-weight: 700;
  font-size: 13px;
  padding: 14px 18px 0;
  margin: 0;
  background-color: #f9fbfc;
  text-transform: uppercase;
  display: block; }

.bg-component {
  background-color: #f9fbfc; }

.border--component {
  border-color: #bdc6cf; }

.sg-phone-container {
  background: url("assets/phone.png");
  width: 414px;
  height: 834px;
  padding: 147px 45px 138px 47px;
  position: relative;
  margin-left: 250px; }

/* SG phones for examples
========================================================================== */
.sg-component-container {
  max-width: 320px; }

/* iphone */
.sg-iphone {
  position: relative;
  background-color: transparent;
  height: auto;
  width: auto;
  margin: 0 auto;
  border-radius: 0;
  border: none;
  z-index: 2; }
  .sg-iphone .sg-phone--container {
    position: relative;
    top: 0;
    width: 320px;
    height: 568px;
    left: 50%;
    margin-left: -160px;
    background-color: #f0f1f2;
    overflow: hidden;
    border-width: 0 1px 1px;
    border-color: #cfd4d9;
    border-style: solid;
    border-radius: 8px 8px 0 0;
    z-index: 3; }
    .sg-iphone .sg-phone--container .sg-phone--page {
      position: absolute;
      height: 0;
      width: 320px; }
    .sg-iphone .sg-phone--container .sg-phone--header {
      position: relative;
      background-color: #344a5f;
      z-index: 2; }
    .sg-iphone .sg-phone--container .sg-phone--overlay {
      background-color: rgba(0, 0, 0, 0.8);
      height: 568px;
      width: 320px;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 0; }
    .sg-iphone .sg-phone--container .sg-phone--mdp {
      position: absolute;
      top: 46px;
      left: 0;
      height: 526px;
      z-index: 1; }
    .sg-iphone .sg-phone--container .sg-phone--content {
      position: relative;
      background-color: #f0f1f2;
      z-index: 1; }
      .sg-iphone .sg-phone--container .sg-phone--content::-webkit-scrollbar {
        width: 0; }
      .sg-iphone .sg-phone--container .sg-phone--content .sg-carousel-page {
        position: relative;
        width: 320px; }
        .sg-iphone .sg-phone--container .sg-phone--content .sg-carousel-page.sg-page-1 {
          left: 0; }
        .sg-iphone .sg-phone--container .sg-phone--content .sg-carousel-page.sg-page-2 {
          left: 320px; }
        .sg-iphone .sg-phone--container .sg-phone--content .sg-carousel-page.sg-page-3 {
          left: 640px; }
      .sg-iphone .sg-phone--container .sg-phone--content .sg-carouselof2 {
        width: 640px; }
      .sg-iphone .sg-phone--container .sg-phone--content .sg-carouselof3 {
        width: 960px; }
      .sg-iphone .sg-phone--container .sg-phone--content .sg-carouselof2, .sg-iphone .sg-phone--container .sg-phone--content .sg-carouselof3 {
        position: relative;
        transition: all 0.3s ease; }
        .sg-iphone .sg-phone--container .sg-phone--content .sg-carouselof2.sg-show-page-1, .sg-iphone .sg-phone--container .sg-phone--content .sg-carouselof3.sg-show-page-1 {
          left: 0; }
        .sg-iphone .sg-phone--container .sg-phone--content .sg-carouselof2.sg-show-page-2, .sg-iphone .sg-phone--container .sg-phone--content .sg-carouselof3.sg-show-page-2 {
          left: -320px; }
        .sg-iphone .sg-phone--container .sg-phone--content .sg-carouselof2.sg-show-page-3, .sg-iphone .sg-phone--container .sg-phone--content .sg-carouselof3.sg-show-page-3 {
          left: -640px; }
    .sg-iphone .sg-phone--container .sg-phone--pushed-right, .sg-iphone .sg-phone--container .sg-phone--pushed-left {
      position: absolute;
      height: 574px;
      width: 320px;
      z-index: 2; }
      .sg-iphone .sg-phone--container .sg-phone--pushed-right .sg-phone--content, .sg-iphone .sg-phone--container .sg-phone--pushed-left .sg-phone--content {
        overflow: hidden; }
    .sg-iphone .sg-phone--container .sg-phone--pushed-right {
      left: 274px;
      box-shadow: -4px 0 3px rgba(0, 0, 0, 0.2);
      border-top-left-radius: 8px; }
    .sg-iphone .sg-phone--container .sg-phone--pushed-left {
      right: 274px;
      box-shadow: 4px 0 3px rgba(0, 0, 0, 0.2);
      border-top-right-radius: 8px; }
    .sg-iphone .sg-phone--container .sg-phone--stage-left, .sg-iphone .sg-phone--container .sg-phone--stage-right {
      position: relative;
      width: 274px; }
      .sg-iphone .sg-phone--container .sg-phone--stage-left .sg-phone--content, .sg-iphone .sg-phone--container .sg-phone--stage-right .sg-phone--content {
        height: 576px; }
    .sg-iphone .sg-phone--container .sg-phone--stage-right {
      left: 46px; }

.sg-iphone:after {
  content: '';
  text-align: center;
  display: none;
  position: absolute;
  bottom: 24px;
  margin: 0 0 0 156px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: white;
  box-shadow: #2c363f 0 -699px 0 -27px, #222222 0 -699px 0 -23px, black -50px -670px 0 -25px, #222222 -27px -670px 0 -26px, #222222 -24px -670px 0 -26px, #222222 -21px -670px 0 -26px, #222222 -18px -670px 0 -26px, #222222 -15px -670px 0 -26px, #222222 -12px -670px 0 -26px, #222222 -9px -670px 0 -26px, #222222 -6px -670px 0 -26px, #222222 -3px -670px 0 -26px, #222222 0 -670px 0 -26px, #222222 3px -670px 0 -26px, #222222 6px -670px 0 -26px, #222222 9px -670px 0 -26px, #222222 12px -670px 0 -26px, #222222 15px -670px 0 -26px, #222222 18px -670px 0 -26px, #222222 21px -670px 0 -26px, #222222 24px -670px 0 -26px, #222222 27px -670px 0 -26px, #beccd9 67px -739px 0 -26px, #beccd9 70px -739px 0 -26px, #beccd9 73px -739px 0 -26px, #beccd9 76px -739px 0 -26px, #beccd9 79px -739px 0 -26px, #beccd9 82px -739px 0 -26px, #beccd9 85px -739px 0 -26px, #beccd9 88px -739px 0 -26px, #beccd9 91px -739px 0 -26px, #beccd9 94px -739px 0 -26px, #beccd9 97px -739px 0 -26px, #beccd9 100px -739px 0 -26px, #beccd9 103px -739px 0 -26px, #beccd9 106px -739px 0 -26px, #beccd9 109px -739px 0 -26px, #beccd9 112px -739px 0 -26px, #beccd9 115px -739px 0 -26px, #beccd9 118px -739px 0 -26px, #beccd9 121px -739px 0 -26px, #beccd9 -191px -626px 0 -26px, #beccd9 -191px -623px 0 -26px, #beccd9 -191px -620px 0 -26px, #beccd9 -191px -617px 0 -26px, #beccd9 -191px -614px 0 -26px, #beccd9 -191px -611px 0 -26px, #beccd9 -191px -608px 0 -26px, #beccd9 -191px -605px 0 -26px, #beccd9 -191px -602px 0 -26px, #beccd9 -191px -599px 0 -26px, #beccd9 -191px -596px 0 -26px, #beccd9 -191px -550px 0 -26px, #beccd9 -191px -547px 0 -26px, #beccd9 -191px -544px 0 -26px, #beccd9 -191px -541px 0 -26px, #beccd9 -191px -538px 0 -26px, #beccd9 -191px -535px 0 -26px, #beccd9 -191px -532px 0 -26px, #beccd9 -191px -529px 0 -26px, #beccd9 -191px -483px 0 -26px, #beccd9 -191px -480px 0 -26px, #beccd9 -191px -477px 0 -26px, #beccd9 -191px -474px 0 -26px, #beccd9 -191px -471px 0 -26px, #beccd9 -191px -468px 0 -26px, #beccd9 -191px -465px 0 -26px, #beccd9 -191px -462px 0 -26px, #beccd9 0 0 0 4px; }

/* htc one */
.sg-htc {
  position: relative;
  background-color: white;
  height: 860px;
  width: 430px;
  margin: 1em auto 3em;
  border-radius: 50px;
  border: 4px solid #beccd9; }
  .sg-htc .sg-phone--container {
    position: absolute;
    top: 65px;
    left: 0;
    width: 422px;
    height: 722px;
    background-color: #beccd9;
    overflow: hidden;
    z-index: 3; }
    .sg-htc .sg-phone--container:after {
      content: '';
      text-align: center;
      display: block;
      position: absolute;
      bottom: 37px;
      margin: 0 0 0 187px;
      width: 3px;
      height: 3px;
      border-radius: 50%;
      background: white;
      box-shadow: white 0 3px 0, white 0 6px 0, white 0 9px 0, white 0 12px 0, white 0 15px 0, white 3px 6px 0, white 6px 6px 0, white 9px 6px 0, white 12px 6px 0, white 12px 9px 0, white 12px 12px 0, white 12px 15px 0, white 18px 6px 0, white 21px 6px 0, white 24px 6px 0, white 27px 6px 0, white 30px 6px 0, white 24px 9px 0, white 24px 12px 0, white 24px 15px 0, white 36px 6px 0, white 39px 6px 0, white 42px 6px 0, white 45px 6px 0, white 48px 6px 0, white 36px 9px 0, white 36px 12px 0, white 36px 15px 0, white 39px 15px 0, white 42px 15px 0, white 45px 15px 0, white 48px 15px 0, white -84px 4px 0 -1px, white -86px 6px 0 -1px, white -88px 8px 0 -1px, white -90px 10px 0 -1px, white -88px 12px 0 -1px, white -86px 14px 0 -1px, white -84px 16px 0 -1px, white 130px 4px 0 -1px, white 132px 6px 0 -1px, white 134px 8px 0 -1px, white 136px 10px 0 -1px, white 136px 12px 0 -1px, white 136px 14px 0 -1px, white 136px 16px 0 -1px, white 134px 16px 0 -1px, white 132px 16px 0 -1px, white 130px 16px 0 -1px, white 128px 16px 0 -1px, white 126px 16px 0 -1px, white 124px 16px 0 -1px, white 124px 14px 0 -1px, white 124px 12px 0 -1px, white 124px 10px 0 -1px, white 126px 8px 0 -1px, white 128px 6px 0 -1px; }
    .sg-htc .sg-phone--container .sg-phone--page {
      position: absolute;
      top: 20px;
      left: 26px;
      width: 370px;
      height: 652px;
      background: #344a5f;
      overflow: hidden; }
    .sg-htc .sg-phone--container .sg-phone--header {
      position: relative;
      z-index: 2; }
    .sg-htc .sg-phone--container .sg-phone--overlay {
      background-color: rgba(0, 0, 0, 0.8);
      height: 652px;
      width: 370px;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 0; }
    .sg-htc .sg-phone--container .sg-phone--mdp {
      position: absolute;
      bottom: 0;
      left: 0;
      height: 582px;
      z-index: 1; }
      .sg-htc .sg-phone--container .sg-phone--mdp .mdp-launcher {
        height: 510px; }
    .sg-htc .sg-phone--container .sg-phone--content {
      position: relative;
      height: 608px;
      overflow: hidden;
      overflow-y: auto;
      background-color: #f0f1f2;
      z-index: 1; }
      .sg-htc .sg-phone--container .sg-phone--content::-webkit-scrollbar {
        width: 0; }
      .sg-htc .sg-phone--container .sg-phone--content .sg-carousel-page {
        width: 370px; }
        .sg-htc .sg-phone--container .sg-phone--content .sg-carousel-page.sg-page-1 {
          left: 0; }
        .sg-htc .sg-phone--container .sg-phone--content .sg-carousel-page.sg-page-2 {
          left: 370px; }
        .sg-htc .sg-phone--container .sg-phone--content .sg-carousel-page.sg-page-3 {
          left: 740px; }
      .sg-htc .sg-phone--container .sg-phone--content .sg-carouselof2 {
        width: 740px; }
      .sg-htc .sg-phone--container .sg-phone--content .sg-carouselof3 {
        width: 1110px; }
      .sg-htc .sg-phone--container .sg-phone--content .sg-carouselof2, .sg-htc .sg-phone--container .sg-phone--content .sg-carouselof3 {
        position: relative;
        transition: all 0.3s ease; }
        .sg-htc .sg-phone--container .sg-phone--content .sg-carouselof2.sg-show-page-1, .sg-htc .sg-phone--container .sg-phone--content .sg-carouselof3.sg-show-page-1 {
          left: 0; }
        .sg-htc .sg-phone--container .sg-phone--content .sg-carouselof2.sg-show-page-2, .sg-htc .sg-phone--container .sg-phone--content .sg-carouselof3.sg-show-page-2 {
          left: -370px; }
        .sg-htc .sg-phone--container .sg-phone--content .sg-carouselof2.sg-show-page-3, .sg-htc .sg-phone--container .sg-phone--content .sg-carouselof3.sg-show-page-3 {
          left: -740px; }
    .sg-htc .sg-phone--container .sg-phone--pushed-right, .sg-htc .sg-phone--container .sg-phone--pushed-left {
      position: absolute;
      height: 652px;
      width: 422px;
      z-index: 2; }
      .sg-htc .sg-phone--container .sg-phone--pushed-right .sg-phone--content, .sg-htc .sg-phone--container .sg-phone--pushed-left .sg-phone--content {
        overflow: hidden; }
    .sg-htc .sg-phone--container .sg-phone--pushed-right {
      left: 326px;
      box-shadow: -4px 0 3px rgba(0, 0, 0, 0.2); }
    .sg-htc .sg-phone--container .sg-phone--pushed-left {
      right: 326px;
      box-shadow: 4px 0 3px rgba(0, 0, 0, 0.2); }
    .sg-htc .sg-phone--container .sg-phone--stage-left, .sg-htc .sg-phone--container .sg-phone--stage-right {
      position: relative;
      width: 326px; }
      .sg-htc .sg-phone--container .sg-phone--stage-left .sg-phone--content, .sg-htc .sg-phone--container .sg-phone--stage-right .sg-phone--content {
        height: 652px; }
    .sg-htc .sg-phone--container .sg-phone--stage-right {
      left: 44px; }

.sg-htc:after {
  content: '';
  text-align: center;
  display: block;
  position: absolute;
  top: 37px;
  margin: 0 0 0 360px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #2c363f;
  box-shadow: #222222 0 0 0 8px, #222222 -311px 4px 0 -1px, #222222 -294px 4px 0 -1px, #222222 -265px 9px 0 -6px, #222222 -265px 4px 0 -6px, #222222 -265px -1px 0 -6px, #222222 -265px -6px 0 -6px, #222222 -260px 9px 0 -6px, #222222 -260px 4px 0 -6px, #222222 -260px -1px 0 -6px, #222222 -260px -6px 0 -6px, #222222 -255px 9px 0 -6px, #222222 -255px 4px 0 -6px, #222222 -255px -1px 0 -6px, #222222 -255px -6px 0 -6px, #222222 -250px 9px 0 -6px, #222222 -250px 4px 0 -6px, #222222 -250px -1px 0 -6px, #222222 -250px -6px 0 -6px, #222222 -245px 9px 0 -6px, #222222 -245px 4px 0 -6px, #222222 -245px -1px 0 -6px, #222222 -245px -6px 0 -6px, #222222 -240px 9px 0 -6px, #222222 -240px 4px 0 -6px, #222222 -240px -1px 0 -6px, #222222 -240px -6px 0 -6px, #222222 -235px 9px 0 -6px, #222222 -235px 4px 0 -6px, #222222 -235px -1px 0 -6px, #222222 -235px -6px 0 -6px, #222222 -230px 9px 0 -6px, #222222 -230px 4px 0 -6px, #222222 -230px -1px 0 -6px, #222222 -230px -6px 0 -6px, #222222 -225px 9px 0 -6px, #222222 -225px 4px 0 -6px, #222222 -225px -1px 0 -6px, #222222 -225px -6px 0 -6px, #222222 -220px 9px 0 -6px, #222222 -220px 4px 0 -6px, #222222 -220px -1px 0 -6px, #222222 -220px -6px 0 -6px, #222222 -215px 9px 0 -6px, #222222 -215px 4px 0 -6px, #222222 -215px -1px 0 -6px, #222222 -215px -6px 0 -6px, #222222 -210px 9px 0 -6px, #222222 -210px 4px 0 -6px, #222222 -210px -1px 0 -6px, #222222 -210px -6px 0 -6px, #222222 -205px 9px 0 -6px, #222222 -205px 4px 0 -6px, #222222 -205px -1px 0 -6px, #222222 -205px -6px 0 -6px, #222222 -200px 9px 0 -6px, #222222 -200px 4px 0 -6px, #222222 -200px -1px 0 -6px, #222222 -200px -6px 0 -6px, #222222 -195px 9px 0 -6px, #222222 -195px 4px 0 -6px, #222222 -195px -1px 0 -6px, #222222 -195px -6px 0 -6px, #222222 -190px 9px 0 -6px, #222222 -190px 4px 0 -6px, #222222 -190px -1px 0 -6px, #222222 -190px -6px 0 -6px, #222222 -185px 9px 0 -6px, #222222 -185px 4px 0 -6px, #222222 -185px -1px 0 -6px, #222222 -185px -6px 0 -6px, #222222 -180px 9px 0 -6px, #222222 -180px 4px 0 -6px, #222222 -180px -1px 0 -6px, #222222 -180px -6px 0 -6px, #222222 -175px 9px 0 -6px, #222222 -175px 4px 0 -6px, #222222 -175px -1px 0 -6px, #222222 -175px -6px 0 -6px, #222222 -170px 9px 0 -6px, #222222 -170px 4px 0 -6px, #222222 -170px -1px 0 -6px, #222222 -170px -6px 0 -6px, #222222 -165px 9px 0 -6px, #222222 -165px 4px 0 -6px, #222222 -165px -1px 0 -6px, #222222 -165px -6px 0 -6px, #222222 -160px 9px 0 -6px, #222222 -160px 4px 0 -6px, #222222 -160px -1px 0 -6px, #222222 -160px -6px 0 -6px, #222222 -155px 9px 0 -6px, #222222 -155px 4px 0 -6px, #222222 -155px -1px 0 -6px, #222222 -155px -6px 0 -6px, #222222 -150px 9px 0 -6px, #222222 -150px 4px 0 -6px, #222222 -150px -1px 0 -6px, #222222 -150px -6px 0 -6px, #222222 -145px 9px 0 -6px, #222222 -145px 4px 0 -6px, #222222 -145px -1px 0 -6px, #222222 -145px -6px 0 -6px, #222222 -140px 9px 0 -6px, #222222 -140px 4px 0 -6px, #222222 -140px -1px 0 -6px, #222222 -140px -6px 0 -6px, #222222 -135px 9px 0 -6px, #222222 -135px 4px 0 -6px, #222222 -135px -1px 0 -6px, #222222 -135px -6px 0 -6px, #222222 -130px 9px 0 -6px, #222222 -130px 4px 0 -6px, #222222 -130px -1px 0 -6px, #222222 -130px -6px 0 -6px, #222222 -125px 9px 0 -6px, #222222 -125px 4px 0 -6px, #222222 -125px -1px 0 -6px, #222222 -125px -6px 0 -6px, #222222 -120px 9px 0 -6px, #222222 -120px 4px 0 -6px, #222222 -120px -1px 0 -6px, #222222 -120px -6px 0 -6px, #222222 -115px 9px 0 -6px, #222222 -115px 4px 0 -6px, #222222 -115px -1px 0 -6px, #222222 -115px -6px 0 -6px, #222222 -110px 9px 0 -6px, #222222 -110px 4px 0 -6px, #222222 -110px -1px 0 -6px, #222222 -110px -6px 0 -6px, #222222 -105px 9px 0 -6px, #222222 -105px 4px 0 -6px, #222222 -105px -1px 0 -6px, #222222 -105px -6px 0 -6px, #222222 -100px 9px 0 -6px, #222222 -100px 4px 0 -6px, #222222 -100px -1px 0 -6px, #222222 -100px -6px 0 -6px, #222222 -95px 9px 0 -6px, #222222 -95px 4px 0 -6px, #222222 -95px -1px 0 -6px, #222222 -95px -6px 0 -6px, #222222 -90px 9px 0 -6px, #222222 -90px 4px 0 -6px, #222222 -90px -1px 0 -6px, #222222 -90px -6px 0 -6px, #222222 -85px 9px 0 -6px, #222222 -85px 4px 0 -6px, #222222 -85px -1px 0 -6px, #222222 -85px -6px 0 -6px, #222222 -80px 9px 0 -6px, #222222 -80px 4px 0 -6px, #222222 -80px -1px 0 -6px, #222222 -80px -6px 0 -6px, #222222 -75px 9px 0 -6px, #222222 -75px 4px 0 -6px, #222222 -75px -1px 0 -6px, #222222 -75px -6px 0 -6px, #222222 -70px 9px 0 -6px, #222222 -70px 4px 0 -6px, #222222 -70px -1px 0 -6px, #222222 -70px -6px 0 -6px, #222222 -65px 9px 0 -6px, #222222 -65px 4px 0 -6px, #222222 -65px -1px 0 -6px, #222222 -65px -6px 0 -6px, #222222 -60px 9px 0 -6px, #222222 -60px 4px 0 -6px, #222222 -60px -1px 0 -6px, #222222 -60px -6px 0 -6px, #222222 -55px 9px 0 -6px, #222222 -55px 4px 0 -6px, #222222 -55px -1px 0 -6px, #222222 -55px -6px 0 -6px, #222222 -50px 9px 0 -6px, #222222 -50px 4px 0 -6px, #222222 -50px -1px 0 -6px, #222222 -50px -6px 0 -6px, #222222 -45px 9px 0 -6px, #222222 -45px 4px 0 -6px, #222222 -45px -1px 0 -6px, #222222 -45px -6px 0 -6px, #222222 -40px 9px 0 -6px, #222222 -40px 4px 0 -6px, #222222 -40px -1px 0 -6px, #222222 -40px -6px 0 -6px, #222222 -35px 9px 0 -6px, #222222 -35px 4px 0 -6px, #222222 -35px -1px 0 -6px, #222222 -35px -6px 0 -6px, #222222 -270px 775px 0 -6px, #222222 -270px 770px 0 -6px, #222222 -270px 765px 0 -6px, #222222 -270px 760px 0 -6px, #222222 -265px 775px 0 -6px, #222222 -265px 770px 0 -6px, #222222 -265px 765px 0 -6px, #222222 -265px 760px 0 -6px, #222222 -260px 775px 0 -6px, #222222 -260px 770px 0 -6px, #222222 -260px 765px 0 -6px, #222222 -260px 760px 0 -6px, #222222 -255px 775px 0 -6px, #222222 -255px 770px 0 -6px, #222222 -255px 765px 0 -6px, #222222 -255px 760px 0 -6px, #222222 -250px 775px 0 -6px, #222222 -250px 770px 0 -6px, #222222 -250px 765px 0 -6px, #222222 -250px 760px 0 -6px, #222222 -245px 775px 0 -6px, #222222 -245px 770px 0 -6px, #222222 -245px 765px 0 -6px, #222222 -245px 760px 0 -6px, #222222 -240px 775px 0 -6px, #222222 -240px 770px 0 -6px, #222222 -240px 765px 0 -6px, #222222 -240px 760px 0 -6px, #222222 -235px 775px 0 -6px, #222222 -235px 770px 0 -6px, #222222 -235px 765px 0 -6px, #222222 -235px 760px 0 -6px, #222222 -230px 775px 0 -6px, #222222 -230px 770px 0 -6px, #222222 -230px 765px 0 -6px, #222222 -230px 760px 0 -6px, #222222 -225px 775px 0 -6px, #222222 -225px 770px 0 -6px, #222222 -225px 765px 0 -6px, #222222 -225px 760px 0 -6px, #222222 -220px 775px 0 -6px, #222222 -220px 770px 0 -6px, #222222 -220px 765px 0 -6px, #222222 -220px 760px 0 -6px, #222222 -215px 775px 0 -6px, #222222 -215px 770px 0 -6px, #222222 -215px 765px 0 -6px, #222222 -215px 760px 0 -6px, #222222 -210px 775px 0 -6px, #222222 -210px 770px 0 -6px, #222222 -210px 765px 0 -6px, #222222 -210px 760px 0 -6px, #222222 -205px 775px 0 -6px, #222222 -205px 770px 0 -6px, #222222 -205px 765px 0 -6px, #222222 -205px 760px 0 -6px, #222222 -200px 775px 0 -6px, #222222 -200px 770px 0 -6px, #222222 -200px 765px 0 -6px, #222222 -200px 760px 0 -6px, #222222 -195px 775px 0 -6px, #222222 -195px 770px 0 -6px, #222222 -195px 765px 0 -6px, #222222 -195px 760px 0 -6px, #222222 -190px 775px 0 -6px, #222222 -190px 770px 0 -6px, #222222 -190px 765px 0 -6px, #222222 -190px 760px 0 -6px, #222222 -185px 775px 0 -6px, #222222 -185px 770px 0 -6px, #222222 -185px 765px 0 -6px, #222222 -185px 760px 0 -6px, #222222 -180px 775px 0 -6px, #222222 -180px 770px 0 -6px, #222222 -180px 765px 0 -6px, #222222 -180px 760px 0 -6px, #222222 -175px 775px 0 -6px, #222222 -175px 770px 0 -6px, #222222 -175px 765px 0 -6px, #222222 -175px 760px 0 -6px, #222222 -170px 775px 0 -6px, #222222 -170px 770px 0 -6px, #222222 -170px 765px 0 -6px, #222222 -170px 760px 0 -6px, #222222 -165px 775px 0 -6px, #222222 -165px 770px 0 -6px, #222222 -165px 765px 0 -6px, #222222 -165px 760px 0 -6px, #222222 -160px 775px 0 -6px, #222222 -160px 770px 0 -6px, #222222 -160px 765px 0 -6px, #222222 -160px 760px 0 -6px, #222222 -155px 775px 0 -6px, #222222 -155px 770px 0 -6px, #222222 -155px 765px 0 -6px, #222222 -155px 760px 0 -6px, #222222 -150px 775px 0 -6px, #222222 -150px 770px 0 -6px, #222222 -150px 765px 0 -6px, #222222 -150px 760px 0 -6px, #222222 -145px 775px 0 -6px, #222222 -145px 770px 0 -6px, #222222 -145px 765px 0 -6px, #222222 -145px 760px 0 -6px, #222222 -140px 775px 0 -6px, #222222 -140px 770px 0 -6px, #222222 -140px 765px 0 -6px, #222222 -140px 760px 0 -6px, #222222 -135px 775px 0 -6px, #222222 -135px 770px 0 -6px, #222222 -135px 765px 0 -6px, #222222 -135px 760px 0 -6px, #222222 -130px 775px 0 -6px, #222222 -130px 770px 0 -6px, #222222 -130px 765px 0 -6px, #222222 -130px 760px 0 -6px, #222222 -125px 775px 0 -6px, #222222 -125px 770px 0 -6px, #222222 -125px 765px 0 -6px, #222222 -125px 760px 0 -6px, #222222 -120px 775px 0 -6px, #222222 -120px 770px 0 -6px, #222222 -120px 765px 0 -6px, #222222 -120px 760px 0 -6px, #222222 -115px 775px 0 -6px, #222222 -115px 770px 0 -6px, #222222 -115px 765px 0 -6px, #222222 -115px 760px 0 -6px, #222222 -110px 775px 0 -6px, #222222 -110px 770px 0 -6px, #222222 -110px 765px 0 -6px, #222222 -110px 760px 0 -6px, #222222 -105px 775px 0 -6px, #222222 -105px 770px 0 -6px, #222222 -105px 765px 0 -6px, #222222 -105px 760px 0 -6px, #222222 -100px 775px 0 -6px, #222222 -100px 770px 0 -6px, #222222 -100px 765px 0 -6px, #222222 -100px 760px 0 -6px, #222222 -95px 775px 0 -6px, #222222 -95px 770px 0 -6px, #222222 -95px 765px 0 -6px, #222222 -95px 760px 0 -6px, #222222 -90px 775px 0 -6px, #222222 -90px 770px 0 -6px, #222222 -90px 765px 0 -6px, #222222 -90px 760px 0 -6px, #222222 -85px 775px 0 -6px, #222222 -85px 770px 0 -6px, #222222 -85px 765px 0 -6px, #222222 -85px 760px 0 -6px, #222222 -80px 775px 0 -6px, #222222 -80px 770px 0 -6px, #222222 -80px 765px 0 -6px, #222222 -80px 760px 0 -6px, #222222 -75px 775px 0 -6px, #222222 -75px 770px 0 -6px, #222222 -75px 765px 0 -6px, #222222 -75px 760px 0 -6px, #222222 -70px 775px 0 -6px, #222222 -70px 770px 0 -6px, #222222 -70px 765px 0 -6px, #222222 -70px 760px 0 -6px, #222222 -65px 775px 0 -6px, #222222 -65px 770px 0 -6px, #222222 -65px 765px 0 -6px, #222222 -65px 760px 0 -6px, #222222 -60px 775px 0 -6px, #222222 -60px 770px 0 -6px, #222222 -60px 765px 0 -6px, #222222 -60px 760px 0 -6px, #222222 -55px 775px 0 -6px, #222222 -55px 770px 0 -6px, #222222 -55px 765px 0 -6px, #222222 -55px 760px 0 -6px, #222222 -50px 775px 0 -6px, #222222 -50px 770px 0 -6px, #222222 -50px 765px 0 -6px, #222222 -50px 760px 0 -6px, #222222 -45px 775px 0 -6px, #222222 -45px 770px 0 -6px, #222222 -45px 765px 0 -6px, #222222 -45px 760px 0 -6px, #222222 -40px 775px 0 -6px, #222222 -40px 770px 0 -6px, #222222 -40px 765px 0 -6px, #222222 -40px 760px 0 -6px; }

.sg-phone--pushed-back {
  -webkit-transform: scale(0.9);
  margin: 0 auto;
  z-index: -1; }

/* Animations
========================================================================== */
.sg-fadeInAni {
  -webkit-animation: sg-fadeInAni 0.3s 0.15s 1 forwards;
  -moz-animation: sg-fadeInAni 0.3s 0.15s 1 forwards;
  animation: sg-fadeInAni 0.3s 0.15s 1 forwards; }

.sg-modalIntroAni {
  -webkit-animation: sg-modalIntroAni 0.3s 0.15s forwards;
  -moz-animation: sg-modalIntroAni 0.3s 0.15s forwards;
  animation: sg-modalIntroAni 0.3s 0.15s forwards; }

.sg-overlayIntroAni {
  -webkit-animation: sg-overlayIntroAni 0.15s forwards;
  -moz-animation: sg-overlayIntroAni 0.15s forwards;
  animation: sg-overlayIntroAni 0.15s forwards; }

/* Modal intro */
@keyframes sg-modalIntroAni {
  from {
    opacity: 0;
    -webkit-transform: translate(0, 50px);
    transform: translate(0, 50px); }

  to {
    opacity: 1;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0); } }

@-moz-keyframes sg-modalIntroAni {
  from {
    opacity: 0;
    -moz-transform: translate(0, 50px); }

  to {
    opacity: 1;
    -moz-transform: translate(0, 0); } }

@-webkit-keyframes sg-modalIntroAni {
  from {
    opacity: 0;
    -webkit-transform: translate(0, 50px); }

  to {
    opacity: 1;
    -webkit-transform: translate(0, 0); } }

/* Overlay, Intro */
@keyframes sg-overlayIntroAni {
  from {
    opacity: 0; }

  to {
    opacity: 0.8; } }

@-moz-keyframes sg-overlayIntroAni {
  from {
    opacity: 0; }

  to {
    opacity: 0.8; } }

@-webkit-keyframes sg-overlayIntroAni {
  from {
    opacity: 0; }

  to {
    opacity: 0.8; } }

/* FadeIn */
@keyframes sg-fadeInAni {
  from {
    opacity: 0; }

  to {
    opacity: 1; } }

@-moz-keyframes sg-fadeInAni {
  from {
    opacity: 0; }

  to {
    opacity: 1; } }

@-webkit-keyframes sg-fadeInAni {
  from {
    opacity: 0; }

  to {
    opacity: 1; } }

/* @media
========================================================================== */
@media only screen and (min-width: 40em) {
  /* Guidelines */
  /* Hierarchy */
  /* Alignment */
  /* Simplicity */
  /* Icons */
  /* Examples */
  /* Nav */
  .paxl {
    padding: 60px; }
  .ptxl {
    padding-top: 60px; }
  .prxl {
    padding-right: 60px; }
  .pbxl {
    padding-bottom: 60px; }
  .plxl {
    padding-left: 60px; }
  .sg-options {
    right: 60px;
    top: 60px; }
  #sg-guidelines {
    padding-top: 28px; }
  .sg-v-frame {
    width: 330px;
    height: 620px;
    margin: 0 auto -130px; }
  .sg-v-frame-inner {
    width: 290px;
    height: 513px; }
  .sg-slide-hierarchy .sg-v-btn--1 {
    top: 20px;
    left: 10px; }
  .sg-slide-hierarchy .sg-v-btn--2 {
    top: 130px;
    left: 160px; }
  .sg-slide-hierarchy .sg-v-btn--3 {
    top: 262px;
    right: 142px; }
  .sg-slide-alignment .sg-v-btn--1 {
    top: 135px;
    left: 45px; }
  .sg-slide-alignment .sg-v-btn--2 {
    top: 300px;
    left: 155px; }
  .sg-slide-alignment .sg-v-btn--3 {
    top: 300px;
    right: 157px; }
  .sg-slide-simplicity .sg-v-btn--1 {
    top: 158px;
    left: 25px; }
  .sg-slide-simplicity .sg-v-btn--2 {
    top: 160px;
    left: 232px; }
  .sg-slide-simplicity .sg-v-btn--3 {
    top: 285px;
    right: 150px; }
  .sg-icon {
    width: 95px; }
    .sg-icon .sg-icon-art {
      width: 75px;
      height: 75px; }
    .sg-icon p {
      font-size: 10px; }
  .sg-icn--fnt {
    font-size: 24px;
    line-height: 75px !important;
    color: #647687; }
  .sg-icn--doc img {
    width: 45px;
    top: 11px; }
  .sg-exampleDetails {
    width: 40%; }
  .sg-exampleScreen {
    width: 60%; }
  .sg-content-main .sg-panel {
    margin-top: 5em; }
  .sg-iphone {
    background-color: white;
    height: 796px;
    width: 378px;
    margin: 1em auto 3em;
    border-radius: 55px;
    border: 4px solid #beccd9; }
    .sg-iphone:after {
      display: block; }
    .sg-iphone .sg-phone--container {
      position: absolute;
      top: 106px;
      left: 21px;
      margin-left: 0;
      width: 328px;
      /* box-sizing +8 */
      height: 576px;
      /* box-sizing +8 */
      background-color: #344a5f;
      border-radius: 5px;
      border: 4px solid #222222; }
      .sg-iphone .sg-phone--container .sg-phone--header {
        background-color: none; }
    .sg-iphone .sg-phone--content {
      height: 524px;
      overflow: hidden;
      overflow-y: auto; }
      .sg-iphone .sg-phone--content .sg-carousel-page {
        position: absolute; }
  .sg-col-nav {
    column-count: 3;
    -moz-column-count: 3;
    -webkit-column-count: 3; } }

@media only screen and (min-width: 64em) {
  /* Guidelines */
  /* Hierarchy */
  /* Alignment */
  /* Simplicity */
  /* Colors */
  /* Icons */
  .paxl {
    padding: 120px; }
  .ptxl {
    padding-top: 120px; }
  .prxl {
    padding-right: 120px; }
  .pbxl {
    padding-bottom: 120px; }
  .plxl {
    padding-left: 120px; }
  .sg-options {
    right: 120px;
    top: 120px; }
  .sg-v-side, .sg-v-middle {
    width: 33.333%; }
  .sg-v-frame {
    margin: 20px auto -168px; }
  .sg-slide-hierarchy .sg-v--1 {
    top: 85px; }
    .sg-slide-hierarchy .sg-v--1 .sg-v-lne {
      margin: 0 0 -16px 200px;
      -webkit-transform: rotate(10deg); }
  .sg-slide-hierarchy .sg-v--2 {
    top: 225px; }
    .sg-slide-hierarchy .sg-v--2 .sg-v-lne {
      width: 130px;
      margin: -50px 0 0 -120px; }
  .sg-slide-hierarchy .sg-v--3 {
    top: 125px; }
    .sg-slide-hierarchy .sg-v--3 .sg-v-lne {
      width: 104px;
      margin: 0 0 0 223px; }
  .sg-slide-hierarchy .sg-v-btn--1 {
    top: 40px;
    left: 10px; }
  .sg-slide-hierarchy .sg-v-btn--2 {
    top: 130px;
    left: 160px; }
  .sg-slide-hierarchy .sg-v-btn--3 {
    top: 280px;
    right: 130px; }
  .sg-slide-alignment .sg-v--1 {
    top: 150px; }
    .sg-slide-alignment .sg-v--1 .sg-v-lne {
      width: 154px;
      margin: 0 0 0 220px;
      -webkit-transform: rotate(22deg); }
  .sg-slide-alignment .sg-v--2 {
    top: 310px; }
    .sg-slide-alignment .sg-v--2 .sg-v-lne {
      width: 58px;
      margin: 0 0 -12px -63px;
      -webkit-transform: rotate(60deg); }
  .sg-slide-alignment .sg-v--3 {
    top: 135px; }
    .sg-slide-alignment .sg-v--3 .sg-v-lne {
      margin: 0 0 0 230px;
      width: 104px;
      height: 70px; }
  .sg-slide-alignment .sg-v-btn--1 {
    top: 140px;
    left: 46px; }
  .sg-slide-alignment .sg-v-btn--2 {
    top: 320px;
    left: 160px; }
  .sg-slide-alignment .sg-v-btn--3 {
    top: 320px;
    right: 155px; }
  .sg-slide-simplicity .sg-v--1 {
    top: 180px; }
    .sg-slide-simplicity .sg-v--1 .sg-v-lne {
      margin: 0 0 -28px 200px;
      -webkit-transform: rotate(18deg); }
  .sg-slide-simplicity .sg-v--2 {
    top: 200px; }
    .sg-slide-simplicity .sg-v--2 .sg-v-lne {
      width: 112px;
      margin: 0 0 0 -100px; }
  .sg-slide-simplicity .sg-v--3 {
    top: 170px; }
    .sg-slide-simplicity .sg-v--3 .sg-v-lne {
      width: 114px;
      margin: 0 0 0 212px; }
  .sg-slide-simplicity .sg-v-btn--1 {
    top: 178px;
    left: 8px; }
  .sg-slide-simplicity .sg-v-btn--2 {
    top: 178px;
    left: 172px; }
  .sg-slide-simplicity .sg-v-btn--3 {
    top: 310px;
    right: 133px; }
  .sg-swatch--l {
    width: 178px;
    height: 252px; }
    .sg-swatch--l .sg-swatch-bg {
      top: 189px; }
  .sg-icon {
    width: 125px; }
    .sg-icon .sg-icon-art {
      border-radius: 8px;
      width: 100px;
      height: 100px; }
    .sg-icon p {
      font-size: 11px; }
  .sg-icn--fnt {
    font-size: 36px;
    line-height: 100px !important;
    color: #647687; }
  .sg-icn--doc img {
    width: 60px;
    top: 16px; } }

/* ==========================================================================
   CUSTOM STYLES
   ========================================================================== */
/*
 * Your CSS goes here. It is included at the bottom of
 * ./src/sass/salesforce1.scss
 *
*/