/* Sample */
.dropdown-menu {
  border: 1px solid #ddd;
  background-color: white;
}
.dropdown-menu li {
  padding: 2px 10px;
  cursor: pointer;
  white-space: nowrap;
}
.dropdown-menu .active {
  background-color: #428bca;
}
.dropdown-menu a {
  text-decoration: none;
  padding: 3px 20px;
}
.dropdown-menu .active a {
  color: #fff;
  text-decoration: none;
}
/* SHOULD not modify */
.dropdown-menu {
  list-style: none;
  padding: 5px 0;
  margin: 2px 0 0;
  border-radius: 4px;
}
.dropdown-menu a:hover {
  cursor: pointer;
}
/*! normalize.css v3.0.2 | MIT License | git.io/normalize */
/**
 * 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;
}
/* HTML5 display definitions
   ========================================================================== */
/**
 * Correct `block` display not defined for any HTML5 element in IE 8/9.
 * Correct `block` display not defined for `details` or `summary` in IE 10/11
 * and Firefox.
 * Correct `block` display not defined for `main` in IE 11.
 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
  display: block;
}
/**
 * 1. Correct `inline-block` display not defined in IE 8/9.
 * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
 */
audio,
canvas,
progress,
video {
  display: inline-block;
  /* 1 */
  vertical-align: baseline;
  /* 2 */
}
/**
 * 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/10.
 * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
 */
[hidden],
template {
  display: none;
}
/* Links
   ========================================================================== */
/**
 * Remove the gray background color from active links in IE 10.
 */
a {
  background-color: transparent;
}
/**
 * Improve readability when focused and also mouse hovered in all browsers.
 */
a:active,
a:hover {
  outline: 0;
}
/* Text-level semantics
   ========================================================================== */
/**
 * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
 */
abbr[title] {
  border-bottom: 1px dotted;
}
/**
 * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
 */
b,
strong {
  font-weight: bold;
}
/**
 * Address styling not present in Safari and Chrome.
 */
dfn {
  font-style: italic;
}
/**
 * Address variable `h1` font-size and margin within `section` and `article`
 * contexts in Firefox 4+, Safari, and Chrome.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}
/**
 * Address styling not present in IE 8/9.
 */
mark {
  background: #ff0;
  color: #000;
}
/**
 * Address inconsistent and variable font size in all browsers.
 */
small {
  font-size: 80%;
}
/**
 * Prevent `sub` and `sup` affecting `line-height` in all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sup {
  top: -0.5em;
}
sub {
  bottom: -0.25em;
}
/* Embedded content
   ========================================================================== */
/**
 * Remove border when inside `a` element in IE 8/9/10.
 */
img {
  border: 0;
}
/**
 * Correct overflow not hidden in IE 9/10/11.
 */
svg:not(:root) {
  overflow: hidden;
}
/* Grouping content
   ========================================================================== */
/**
 * Address margin not present in IE 8/9 and Safari.
 */
figure {
  margin: 1em 40px;
}
/**
 * Address differences between Firefox and other browsers.
 */
hr {
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
  height: 0;
}
/**
 * Contain overflow in all browsers.
 */
pre {
  overflow: auto;
}
/**
 * Address odd `em`-unit font size rendering in all browsers.
 */
code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}
/* Forms
   ========================================================================== */
/**
 * Known limitation: by default, Chrome and Safari on OS X allow very limited
 * styling of `select`, unless a `border` property is set.
 */
/**
 * 1. Correct color not being inherited.
 *    Known issue: affects color of disabled elements.
 * 2. Correct font properties not being inherited.
 * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
 */
button,
input,
optgroup,
select,
textarea {
  color: inherit;
  /* 1 */
  font: inherit;
  /* 2 */
  margin: 0;
  /* 3 */
}
/**
 * Address `overflow` set to `hidden` in IE 8/9/10/11.
 */
button {
  overflow: visible;
}
/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
 * Correct `select` style inheritance in Firefox.
 */
button,
select {
  text-transform: none;
}
/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 */
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
  /* 2 */
  cursor: pointer;
  /* 3 */
}
/**
 * Re-set default cursor for disabled elements.
 */
button[disabled],
html input[disabled] {
  cursor: default;
}
/**
 * Remove inner padding and border in Firefox 4+.
 */
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}
/**
 * Address Firefox 4+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */
input {
  line-height: normal;
}
/**
 * It's recommended that you don't attempt to style these elements.
 * Firefox's implementation doesn't respect box-sizing, padding, or width.
 *
 * 1. Address box sizing set to `content-box` in IE 8/9/10.
 * 2. Remove excess padding in IE 8/9/10.
 */
input[type="checkbox"],
input[type="radio"] {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */
}
/**
 * Fix the cursor style for Chrome's increment/decrement buttons. For certain
 * `font-size` values of the `input`, it causes the cursor style of the
 * decrement button to change from `default` to `text`.
 */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  height: auto;
}
/**
 * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
 * 2. Address `box-sizing` set to `border-box` in Safari and Chrome
 *    (include `-moz` to future-proof).
 */
input[type="search"] {
  -webkit-appearance: textfield;
  /* 1 */
  -webkit-box-sizing: content-box;
  /* 2 */
  box-sizing: content-box;
}
/**
 * Remove inner padding and search cancel button in Safari and Chrome on OS X.
 * Safari (but not Chrome) clips the cancel button when the search input has
 * padding (and `textfield` appearance).
 */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}
/**
 * Define consistent border, margin, and padding.
 */
fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}
/**
 * 1. Correct `color` not being inherited in IE 8/9/10/11.
 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 */
legend {
  border: 0;
  /* 1 */
  padding: 0;
  /* 2 */
}
/**
 * Remove default vertical scrollbar in IE 8/9/10/11.
 */
textarea {
  overflow: auto;
}
/**
 * Don't inherit the `font-weight` (applied by a rule above).
 * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
 */
optgroup {
  font-weight: bold;
}
/* Tables
   ========================================================================== */
/**
 * Remove most spacing between table cells.
 */
table {
  border-collapse: collapse;
  border-spacing: 0;
}
td,
th {
  padding: 0;
}
html {
  height: 100%;
  overflow-y: scroll;
}
body {
  height: 100%;
  width: 100%;
  min-height: 800px;
  margin: 0;
  padding: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
.column-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  -webkit-box-align: left;
      -ms-flex-align: left;
          align-items: left;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.sams-corner {
  max-height: 75%;
  margin-top: auto;
  margin-left: auto;
  margin-right: auto;
  max-width: 500px;
  width: 100%;
  height: 386px;
  background-image: url("/images/sam-stickies.svg"), url("/images/icons/card-tilted-blue.svg");
  background-repeat: no-repeat;
  background-position: bottom 0 right 20%;
  display: block;
  text-decoration: none;
  position: relative;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}
@media only screen and (min-width: 992px) {
  .sams-corner {
    margin-left: 2rem;
    margin-right: 1rem;
    width: auto;
  }
}
.sams-corner--green {
  background-image: url("/images/sam-stickies.svg"), url("/images/icons/card-tilted-green.svg");
}
.sams-corner--red {
  background-image: url("/images/sam-stickies.svg"), url("/images/icons/card-tilted-red.svg");
}
.nav-cell {
  font-family: futura-pt-bold, sans-serif;
  font-size: 16px;
  line-height: 20px;
  letter-spacing: 0.75px;
  text-transform: capitalize;
  color: #312650;
  text-decoration: none;
}
.nav-cell__link {
  color: #312650;
  text-decoration: none;
}
.nav-cell__link:hover {
  color: #7d7f80;
}
.nav-cell__link--accent {
  color: #ff825c;
}
.nav-cell--light .nav-cell__link {
  color: #ffffff;
}
.nav-cell--light .nav-cell__link:hover {
  color: #7d7f80;
}
.nav-cell--light .nav-cell__link--accent {
  color: #323333;
}
.clearfix {
  *zoom: 1;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
  line-height: 0;
}
.clearfix:after {
  clear: both;
}
.outlined-input:focus {
  border-width: 1px;
  border-radius: 2pt;
  border-color: #646566;
  -webkit-box-shadow: 0 0 6px #b1b2b2;
          box-shadow: 0 0 6px #b1b2b2;
  outline: 0;
}
.outlined-input:focus:required:invalid {
  color: #b94a48;
  border-color: #e9322d;
}
.outlined-input:focus:required:invalid:focus {
  border-color: #e9322d;
  -webkit-box-shadow: 0 0 6px #f8b9b7;
          box-shadow: 0 0 6px #f8b9b7;
}
/*
Behaviors & animations

Behavioral CSS properties.

Styleguide: Behaviors
*/
/*
Collapsing/expanding accordion

Tag items with `collapse`. Add `in` class to open, remove to close.

Markup:
<div class="collapse in">I am collapsing</div>
<script>
  setTimeout(function() {
    var els = document.getElementsByClassName("collapse");
    els[0].className = "collapse"
  }, 2000)
</script>

Styleguide: Behaviors.Accordion
*/
.collapse {
  position: relative;
  height: 0;
  overflow: hidden;
  -webkit-transition: height 0.35s ease;
  transition: height 0.35s ease;
}
.collapse.in {
  height: auto;
}
.immediate {
  -webkit-transition: none !important;
  transition: none !important;
}
.container,
.footer__container,
.legal-layout .legal-content {
  max-width: 76rem;
  margin: 0 auto;
  padding-right: 2rem;
  padding-left: 2rem;
}
.container--full {
  max-width: inherit;
  padding-right: 0;
  padding-left: 0;
}
html {
  font-family: "lexia", sans-serif;
  font-size: 16px;
  color: #4b4c4d;
  line-height: 1.4;
}
@media only screen and (min-width: 1600px) {
  html {
    font-size: 17.6px;
  }
}
a {
  color: #4b4c4d;
  text-decoration: underline;
}
a:hover {
  color: #7d7f80;
  text-decoration: none;
}
/*
Headers

Markup:
<h1>H1</h1>
<h2>H2</h2>
<h3>H3</h3>

Weight: 1

Style guide: Typography.Headers
*/
h1,
h2,
h3,
h4 {
  margin-bottom: 1rem;
  line-height: 1.4;
  font-family: "lexia", sans-serif;
  font-weight: bold;
  color: #4b4c4d;
  text-rendering: optimizelegibility;
}
h1 {
  font-size: 3rem;
}
h2 {
  font-size: 2rem;
}
h3 {
  font-size: 1.2rem;
}
h4 {
  font-size: 1rem;
}
/*
Content

Standard content formatting

Markup:
<p>This is what body text looks like. It's rather small and kind of weak
looking compared to all these giant headers</p>
<a href="#">This is what a link looks like.</a>

Styleguide: Typography.Content
*/
p {
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 1.25rem;
  margin-left: 0;
  font-size: 1rem;
  font-weight: 200;
}
p + h1,
p + h2,
p + h3,
p + h4 {
  margin-top: 2rem;
}
small {
  font-size: 16px;
}
strong {
  font-weight: bold;
}
em {
  font-style: italic;
}
cite {
  font-style: normal;
}
/*
Lists

Basic list styling.

Markup:
<div class="text-center">Centered text</div>
<ul>
  <li>Item One</li>
  <li>Item Two</li>
</ul>
<ol>
  <li>Item One</li>
  <li>Item Two</li>
</ol>

Style guide: Typography.Lists
*/
ul,
ol {
  padding: 0;
  margin: 0 0 0.7 1.4;
}
ul ul,
ul ol,
ol ol,
ol ul {
  margin-bottom: 0;
}
li {
  line-height: 1.4;
}
/*
Alignment

Markup:
<div class="text--center">Centered Text</div>

Styleguide: Typography.Alignment
*/
.text--center {
  text-align: center;
}
/*
Hard Rules

Markup:
<hr />

Styleguide: Typography.HardRule
*/
hr {
  margin: 1.4 0;
  border: 0;
  border-top: 1px solid #afb2b3;
  border-bottom: 1px solid #ffffff;
}
/*
Forms

Base form and control styling.

Markup:
<form class="form">
  <div class="form__group">
    <label class="form__label">Basic Input</label>
    <input class="form__control" placeholder="Placeholder" />
  </div>
  <div class="form__group form__group--half">
    <label class="form__label">First Half</label>
    <input class="form__control" placeholder="Placeholder" />
  </div>
  <div class="form__group form__group--half">
    <label class="form__label">Second Half</label>
    <input class="form__control" placeholder="Placeholder" />
  </div>
  <div class="form__group form__group--third">
    <label class="form__label">First Third</label>
    <input class="form__control" placeholder="Placeholder" />
  </div>
  <div class="form__group form__group--third">
    <label class="form__label">Second Third</label>
    <input class="form__control" placeholder="Placeholder" />
  </div>
  <div class="form__group form__group--third">
    <label class="form__label">Third Third</label>
    <input class="form__control" placeholder="Placeholder" />
  </div>
  <hr />
  <div class="form__group">
    <label class="form__label">Password</label>
    <input class="form__control" type="password" value="password" />
  </div>
  <div class="form__group">
    <label class="form__label">Email</label>
    <input class="form__control" type="email" placeholder="user@example.com" required />
  </div>
  <hr />
  <div class="form__group">
    <label class="form__label">Buttons</label>
    <input class="button button--primary form__button form__button--submit" type="submit" value="Submit" />
    <input class="button form__button form__button--cancel" type="submit" value="Cancel" />
    <input class="button form__button" disabled="disabled" type="submit" value="Disabled" />
  </div>
</form>

Styleguide forms
*/
.form--inline {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 100%;
          flex: 0 0 100%;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.form__group,
.form__label,
.form__control,
.form__button,
.menu__input {
  display: block;
  width: 100%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
.form__group {
  display: inline-block;
  width: 100%;
  padding-bottom: 1.1rem;
  padding-right: 1.1rem;
}
.form__group--half {
  width: 50%;
  margin-right: -5px;
}
.form__group--third {
  width: 33%;
  margin-right: -1px;
}
.form__group--flush {
  padding-right: 0;
}
.form__label {
  font-weight: bold;
  font-size: 0.875rem;
  padding-bottom: 0.1rem;
}
.form__label--medium {
  font-weight: 500;
}
.form__label--sub {
  font-weight: 500;
  opacity: 0.37;
}
.form__label--invalid {
  color: #f45f55;
}
.form__label--sub.form__label--invalid {
  opacity: 1;
}
.form__control,
.form__button,
.menu__input {
  font-size: 0.875rem;
  border-radius: 3pt;
  border: 1px solid #afb2b3;
  padding: 0.55rem;
}
.form__control--invalid {
  border-color: #f45f55;
}
.form__control--no-border {
  border: none;
}
.form__button {
  width: auto;
  min-width: 10em;
  text-align: center;
  margin-right: 0.7;
}
.form__button:disabled {
  background-color: #e1e5e6;
  color: #afb2b3;
  border-color: #afb2b3;
}
/*
Buttons

Markup:
<button class="button {{modifier_class}}">Basic Button</button>
<button class="button {{modifier_class}}" disabled="disabled">Disabled Button</button>
<button class="button button--mini {{modifier_class}}">Mini Button</button>

.button--primary  - Primary button
.button--subtle   - Subtle, no-bg button
.button--google   - Google colors
.button--twitter  - Twitter colors
.button--facebook - Facebook colors

Styleguide Buttons
*/
.button,
.form__button {
  background-color: #ffffff;
  border: 1pt solid #4b4c4d;
  color: #4b4c4d;
  text-decoration: none;
  display: inline-block;
  padding-top: 0.5rem;
  padding-right: 1rem;
  padding-bottom: 0.5rem;
  padding-left: 1rem;
  border-radius: 3pt;
  font-size: 1rem;
  cursor: pointer;
  -webkit-transition: border-color 0.1s, background-color 0.1s, color 0.1s;
  transition: border-color 0.1s, background-color 0.1s, color 0.1s;
}
.button:hover {
  background-color: #4b4c4d;
  color: #ffffff;
}
.button:hover[disabled] {
  background-color: #ffffff;
  color: #4b4c4d;
}
.button[disabled] {
  opacity: 0.75;
}
.button[disabled] {
  cursor: not-allowed;
}
.button--primary {
  background-color: #f75e50;
  border: 1pt solid #f75e50;
  color: #ffffff;
  text-decoration: none;
}
.button--primary:hover {
  background-color: #ffffff;
  color: #f75e50;
}
.button--primary:hover[disabled] {
  background-color: #f75e50;
  color: #ffffff;
}
.button--primary[disabled] {
  opacity: 0.75;
}
.button--secondary {
  background-color: #ffffff;
  border: 1pt solid #f75e50;
  color: #f75e50;
  text-decoration: none;
  font-size: 0.9rem;
}
.button--secondary:hover {
  background-color: #f75e50;
  color: #ffffff;
}
.button--secondary:hover[disabled] {
  background-color: #ffffff;
  color: #f75e50;
}
.button--secondary[disabled] {
  opacity: 0.75;
}
.button--full {
  width: 100%;
}
.button--half {
  width: 50%;
}
.button--half-spaced {
  width: 48%;
  margin: 0 1%;
}
.button--subtle {
  background-color: transparent;
  color: #7d7f80;
  border-color: #7d7f80;
}
.button--subtle:hover {
  background-color: #7d7f80;
  color: #ffffff;
}
.button--google {
  background-color: #dd4b39;
  border: 1pt solid #dd4b39;
  color: #ffffff;
  text-decoration: none;
}
.button--google:hover {
  background-color: #ffffff;
  color: #dd4b39;
}
.button--google:hover[disabled] {
  background-color: #dd4b39;
  color: #ffffff;
}
.button--google[disabled] {
  opacity: 0.75;
}
.button--twitter {
  background-color: #61aadb;
  border: 1pt solid #61aadb;
  color: #ffffff;
  text-decoration: none;
}
.button--twitter:hover {
  background-color: #ffffff;
  color: #61aadb;
}
.button--twitter:hover[disabled] {
  background-color: #61aadb;
  color: #ffffff;
}
.button--twitter[disabled] {
  opacity: 0.75;
}
.button--facebook {
  background-color: #3b5998;
  border: 1pt solid #3b5998;
  color: #ffffff;
  text-decoration: none;
}
.button--facebook:hover {
  background-color: #ffffff;
  color: #3b5998;
}
.button--facebook:hover[disabled] {
  background-color: #3b5998;
  color: #ffffff;
}
.button--facebook[disabled] {
  opacity: 0.75;
}
.button--features {
  background-color: #ffffff;
  border: 1pt solid #f45f55;
  color: #f45f55;
  text-decoration: none;
  font-family: futura-pt-bold, sans-serif;
  font-size: 1.5rem;
  border-radius: 1.25rem;
  border-width: 2px;
  letter-spacing: 1px;
  width: 16.19rem;
  text-align: center;
}
.button--features:hover {
  background-color: #f45f55;
  color: #ffffff;
}
.button--features:hover[disabled] {
  background-color: #ffffff;
  color: #f45f55;
}
.button--features[disabled] {
  opacity: 0.75;
}
.button--thin {
  position: relative;
  top: 3px;
  height: calc(100% - 6px);
  line-height: 100%;
  font-size: 1rem;
  padding: 0 16px;
}
.button--mini {
  padding: 0.2rem 0.4rem;
  font-size: 0.6rem;
}
.button--cta {
  background-color: #f45f55;
  color: #ffffff;
  font-family: futura-pt-bold, sans-serif;
  font-size: 1.4rem;
  border: 2px solid #f45f55;
  border-radius: 20px;
  letter-spacing: 1px;
  text-decoration: none;
  padding: 0.3rem 2.8rem;
  -webkit-filter: drop-shadow(0 0.25rem 0.25rem rgba(0, 0, 0, 0.25));
          filter: drop-shadow(0 0.25rem 0.25rem rgba(0, 0, 0, 0.25));
}
.button--cta:hover {
  background-color: #ffffff;
  color: #f45f55;
}
.button--line {
  background-color: transparent;
  color: #312650;
  font-family: futura-pt-bold, sans-serif;
  font-size: 1.4rem;
  border-width: 2px;
  border-radius: 20px;
  letter-spacing: 1px;
  text-decoration: none;
  padding: 0.3rem 2.8rem;
}
.button--line:hover {
  background-color: #312650;
  color: #ffffff;
}
/*
Icon Fonts

Fonts generated from our own custom icon font.

Markup:
<i class="icon-users"></i>
<i class="icon-stickies"></i>
<i class="icon-star"></i>
<i class="icon-link"></i>
<i class="icon-info"></i>
<i class="icon-draw"></i>
<i class="icon-draw-alt"></i>
<i class="icon-delete"></i>
<i class="icon-add"></i>
<i class="icon-edit"></i>
<i class="icon-download"></i>
<i class="icon-menu"></i>
<i class="icon-disguise"></i>
<i class="icon-bubble"></i>
<i class="icon-logout"></i>
<i class="icon-twitter"></i>
<i class="icon-bert"></i>
<i class="icon-ernie"></i>
<i class="icon-group"></i>
<i class="icon-stack"></i>
<i class="icon-trash"></i>
<i class="icon-folder"></i>
<i class="icon-restore"></i>
<i class="icon-crest"></i>
<i class="icon-facebook"></i>
<i class="icon-google"></i>
<i class="icon-help"></i>
<hr />
<i class="icon-users icon-size-big"></i>

Styleguide: Icons
*/
@font-face {
  font-family: "stickies";
  src: url("/fonts/stickies.eot");
  src: url("/fonts/stickies.eot?#iefix") format("embedded-opentype"), url("/fonts/stickies.ttf") format("truetype"), url("/fonts/stickies.woff") format("woff"), url("/fonts/stickies.svg#stickies") format("svg");
  font-weight: normal;
  font-style: normal;
}
/* Use the following CSS code if you want to use data attributes for inserting your icons */
[data-icon]:before {
  font-family: "stickies";
  content: attr(data-icon);
  speak: none;
  font-weight: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
}
/* Use the following CSS code if you want to have a class per icon */
[class*="icon-"] {
  vertical-align: middle;
  position: relative;
}
[class*="icon-"]:before,
[class*="icon-"]:after {
  font-family: "stickies";
  speak: none;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
}
.icon-size-big {
  font-size: 1rem;
}
.icon-users:before {
  content: "\e000";
}
.icon-stickies:before {
  content: "\e001";
}
.icon-star:before {
  content: "\e002";
}
.icon-link:before {
  content: "\e003";
}
.icon-info:before {
  content: "\e004";
}
.icon-draw:before {
  content: "\e005";
}
.icon-draw-alt:before {
  content: "\e006";
}
.icon-delete:before {
  content: "\e007";
}
.icon-x:before {
  content: "\e009";
}
.icon-add:before {
  content: "\e00a";
}
.icon-edit:before {
  content: "\e00b";
}
.icon-download:before {
  content: "\e601";
}
.icon-disguise:before {
  content: "\e600";
}
.icon-menu:before {
  content: "\e602";
}
.icon-bubble:before {
  content: "\e604";
}
.icon-logout:before {
  content: "\e605";
}
.icon-twitter:before {
  content: "\e606";
}
.icon-bert:before {
  content: "\e000";
}
.icon-ernie:before {
  content: "\e000";
}
.icon-group:before {
  content: "\e607";
}
.icon-stack:before {
  content: "\e608";
}
.icon-trash:before {
  content: "\e609";
}
.icon-folder:before {
  content: "\e60a";
}
.icon-crest:before {
  content: "\e60b";
}
.icon-cleanup:before {
  content: "\e001";
}
.icon-facebook:before {
  content: "\e60d";
}
.icon-google:before {
  content: "\ea88";
}
.icon-restore:before {
  content: "\e60f";
}
.icon-help:before {
  content: "\e900";
}
.icon-profile {
  background-image: url(/images/icons/profile-icon.svg);
  background-repeat: no-repeat;
  background-position: center center;
  padding: 0 9px;
  padding-top: 2px;
}
i[class*="png-icon-"] {
  display: inline-block;
  width: 1em;
  height: 1em;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
/*
Icon (PNGs)

PNG-style icons; can be turquoise, black, or white.

Markup:
<i class="png-icon-cupcake"></i>
<i class="png-icon-signout"></i>
<i class="png-icon-locked--black"></i>
<i class="png-icon-unlocked--black"></i>
<i class="png-icon-check--black"></i>
<div style="background-color:#000">
  <i class="png-icon-focus--white"></i>
  <i class="png-icon-incognito--white"></i>
  <i class="png-icon-moderator--white"></i>
  <i class="png-icon-check--white"></i>
</div>

Styleguide: Icons.IconPng
*/
.png-icon-locked,
.png-icon-locked--black {
  background-image: url("/images/icons/png/locked_black.png");
}
.png-icon-locked--white {
  background-image: url("/images/icons/png/locked_white.png");
}
.png-icon-locked--turquoise {
  background-image: url("/images/icons/png/locked_turquoise.png");
}
.png-icon-unlocked,
.png-icon-unlocked--black {
  background-image: url("/images/icons/png/unlocked_black.png");
}
.png-icon-unlocked--white {
  background-image: url("/images/icons/png/unlocked_white.png");
}
.png-icon-unlocked--turquoise {
  background-image: url("/images/icons/png/unlocked_turquoise.png");
}
.png-icon-signout,
.png-icon-signout--black {
  background-image: url("/images/icons/png/signout_black.png");
}
.png-icon-signout--white {
  background-image: url("/images/icons/png/signout_white.png");
}
.png-icon-signout--turquoise {
  background-image: url("/images/icons/png/signout_turquoise.png");
}
.png-icon-check,
.png-icon-check--black {
  background-image: url("/images/icons/png/check_black.png");
}
.png-icon-check--white {
  background-image: url("/images/icons/png/check_white.png");
}
.png-icon-check--turquoise {
  background-image: url("/images/icons/png/check_turquoise.png");
}
.png-icon-focus,
.png-icon-focus--black {
  background-image: url("/images/icons/png/focus_black.png");
}
.png-icon-focus--white {
  background-image: url("/images/icons/png/focus_white.png");
}
.png-icon-focus--turquoise {
  background-image: url("/images/icons/png/focus_turquoise.png");
}
.png-icon-incognito,
.png-icon-incognito--black {
  background-image: url("/images/icons/png/incognito_black.png");
}
.png-icon-incognito--white {
  background-image: url("/images/icons/png/incognito_white.png");
}
.png-icon-incognito--turquoise {
  background-image: url("/images/icons/png/incognito_turquoise.png");
}
.png-icon-moderator,
.png-icon-moderator--black {
  background-image: url("/images/icons/png/moderator_black.png");
}
.png-icon-moderator--white {
  background-image: url("/images/icons/png/moderator_white.png");
}
.png-icon-moderator--turquoise {
  background-image: url("/images/icons/png/moderator_turquoise.png");
}
.png-icon-cupcake,
.png-icon-cupcake--black {
  background-image: url("/images/icons/png/cupcake_black.png");
}
.png-icon-cupcake--white {
  background-image: url("/images/icons/png/cupcake_white.png");
}
.png-icon-cupcake--turquoise {
  background-image: url("/images/icons/png/cupcake_turquoise.png");
}
.png-icon-loading,
.png-icon-loading--black {
  background-image: url("/images/icons/png/loading_black.png");
}
.png-icon-loading--white {
  background-image: url("/images/icons/png/loading_white.png");
}
.png-icon-loading--turquoise {
  background-image: url("/images/icons/png/loading_turquoise.png");
}
.png-icon-business {
  background-image: url(/images/icons/png/business.png);
}
.png-icon-growth {
  background-image: url(/images/icons/png/growth.png);
}
.png-icon-startup {
  background-image: url(/images/icons/png/startup.png);
}
/*
Icons (SVGs)

SVG icons, built as masks.

Markup:
<div style="background-color:#000">
  <i class="svg-icon-incognito"></i>
  <i class="svg-icon-focus"></i>
  <i class="svg-icon-moderator"></i>
  <i class="svg-icon-sign-out"></i>
  <i class="svg-icon-check"></i>
  <i class="svg-icon-business"></i>
  <i class="svg-icon-growth"></i>
  <i class="svg-icon-startup"></i>
  <i class="svg-icon-locked"></i>
  <i class="svg-icon-unlocked"></i>
</div>

Styleguide: Icons.Svg
*/
i[class*="svg-icon-"] {
  display: inline-block;
  width: 1em;
  height: 1em;
  background-size: 100%;
  background-color: #ffffff;
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-transition: background-color 0.25s ease-in-out;
  transition: background-color 0.25s ease-in-out;
}
.svg-icon-incognito {
  -webkit-mask-image: url(/images/icons/incognito.svg);
          mask-image: url(/images/icons/incognito.svg);
}
.svg-icon-focus {
  -webkit-mask-image: url(/images/icons/focus.svg);
          mask-image: url(/images/icons/focus.svg);
}
.svg-icon-moderator {
  -webkit-mask-image: url(/images/icons/moderator.svg);
          mask-image: url(/images/icons/moderator.svg);
}
.svg-icon-sign-out {
  -webkit-mask-image: url(/images/icons/sign-out.svg);
          mask-image: url(/images/icons/sign-out.svg);
}
.svg-icon-check {
  -webkit-mask-image: url(/images/icons/check.svg);
          mask-image: url(/images/icons/check.svg);
}
.svg-icon-business {
  -webkit-mask-image: url(/images/icons/business.svg);
          mask-image: url(/images/icons/business.svg);
}
.svg-icon-growth {
  -webkit-mask-image: url(/images/icons/growth.svg);
          mask-image: url(/images/icons/growth.svg);
}
.svg-icon-startup {
  -webkit-mask-image: url(/images/icons/startup.svg);
          mask-image: url(/images/icons/startup.svg);
}
.svg-icon-locked {
  -webkit-mask-image: url(/images/icons/locked.svg);
          mask-image: url(/images/icons/locked.svg);
}
.svg-icon-unlocked {
  -webkit-mask-image: url(/images/icons/unlocked.svg);
          mask-image: url(/images/icons/unlocked.svg);
}
.svg-icon-check-circle {
  -webkit-mask-image: url(/images/icons/check-circle.svg);
          mask-image: url(/images/icons/check-circle.svg);
}
/*
Logo

The stickies logo!

Markup:
<div style="background-color: black">
  <div class="logo"></div>
</div>

Styleguide: Logo
*/
.logo {
  background-image: url("/images/icons/stickies-logo.svg");
  background-repeat: no-repeat;
  background-position: center left;
  background-size: 100%;
  display: block;
  text-decoration: none;
  width: 11rem;
  background-size: 65%;
  height: 5em;
}
.logo-mask {
  -webkit-mask: url("/images/icons/stickies-logo.svg") no-repeat center left;
          mask: url("/images/icons/stickies-logo.svg") no-repeat center left;
  -webkit-mask-size: 65%;
          mask-size: 65%;
  background-color: white;
  display: block;
  text-decoration: none;
  width: 11rem;
  height: 5em;
}
.logo-mask--larger {
  width: 20rem;
}
.logo-mask--accent {
  background-color: #f45f55;
}
/*
Card Group

A collection of stacked, grouped cards.

Markup:
<div class="group">
  <div class="background"></div>
  <div class="notice" style="display: none"></div>
  <input type="text" class="name" placeholder="Group Name" style="width: 140px;">
  <button class="add-card">+</button>
  <div id="564a30c9d99634000ac30e97" class="card color-2 draggable mine" creator="5644e29a695bbc758025d965" style="touch-action: pan-y; -webkit-user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); overflow: hidden;">
    <div class="header-bar">
      <span class="delete-btn">×</span>
      <span class="notice" style="display: none"></span>
    </div>
    <div class="content">
      <div class="viewable" style="height: auto; z-index: 31;">Card 1</div>
      <textarea class="editable" style="height: 16px; z-index: 29;"></textarea>
    </div>
    <div class="footer card__footer">
      <div class="card__authors"><img class="avatar" src="/images/avatar-ernie.jpg" title="Ernie Johnson"></div>
      <div class="card__colors">
        <span class="color card__color color-0"></span>
        <span class="color card__color color-1"></span>
        <span class="color card__color color-2"></span>
        <span class="color card__color color-3"></span>
        <span class="color card__color color-4"></span>
      </div>
      <div class="card__plus-one--button card__plus-one">
        <div class="card__plus-one-count">-1</div>
      </div>
      <div class="card__plus-one--static-text card__plus-one">
        <div class="card__plus-one-count">+1</div>
        <div class="tooltip-container flip">
          <div class="tooltip">
            <div class="tooltip__avatars"><img class="avatar" src="/images/avatar-ernie.jpg" title="Ernie Johnson"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div id="564a30c9d99634000ac30e97" class="card color-2 draggable mine" creator="5644e29a695bbc758025d965" style="touch-action: pan-y; -webkit-user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); overflow: hidden;">
    <div class="header-bar">
      <span class="delete-btn">×</span>
      <span class="notice" style="display: none"></span>
    </div>
    <div class="content">
      <div class="viewable" style="height: auto; z-index: 31;">Card 2</div>
      <textarea class="editable" style="height: 16px; z-index: 29;"></textarea>
    </div>
    <div class="footer card__footer">
      <div class="card__authors"><img class="avatar" src="/images/avatar-ernie.jpg" title="Ernie Johnson"></div>
      <div class="card__colors">
        <span class="color card__color color-0"></span>
        <span class="color card__color color-1"></span>
        <span class="color card__color color-2"></span>
        <span class="color card__color color-3"></span>
        <span class="color card__color color-4"></span>
      </div>
      <div class="card__plus-one--button card__plus-one">
        <div class="card__plus-one-count">-1</div>
      </div>
      <div class="card__plus-one--static-text card__plus-one">
        <div class="card__plus-one-count">+1</div>
        <div class="tooltip-container flip">
          <div class="tooltip">
            <div class="tooltip__avatars"><img class="avatar" src="/images/avatar-ernie.jpg" title="Ernie Johnson"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- Presentation sugar for the styleguide -->
<br /><br /><br /><br /><br /><br /><br /><br /><br />

Styleguide: CardGroup
*/
.group {
  background: rgba(242, 242, 242, 0.8);
  border: 2px solid transparent;
  -webkit-box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.1);
          box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.1);
  cursor: move;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  padding: 4px;
  position: absolute;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.group:hover {
  border-color: rgba(0, 0, 0, 0.25);
}
.group.draggable {
  -webkit-transition: top 0.5s, left 0.5s;
  transition: top 0.5s, left 0.5s;
}
.group.draggable.being-dragged {
  cursor: not-allowed;
}
.group.draggable.being-dragged .card {
  cursor: not-allowed;
}
.group.draggable.dragging {
  -webkit-transition: none;
  transition: none;
}
.group .name-container {
  margin-bottom: 4px;
}
.group .card {
  -webkit-box-shadow: none;
          box-shadow: none;
  margin-bottom: 6px;
}
.group .card:last-child {
  margin-bottom: 0;
}
.group .card:after {
  background: rgba(127, 127, 127, 0.8);
  content: " ";
  display: none;
  height: 6px;
  margin-left: -2px;
  position: absolute;
  width: calc(100% + 4px);
}
.group .card.hover-above:after {
  bottom: 100%;
  display: block;
  margin-bottom: 2px;
}
.group .card.hover-below:after {
  display: block;
  margin-top: 2px;
  top: 100%;
}
.group input {
  background-color: transparent;
  border: none;
  color: #7a7f80;
  font-size: 14px;
  font-weight: normal;
  line-height: unset;
  margin: 0;
  padding: 0;
  -webkit-user-select: text;
     -moz-user-select: text;
      -ms-user-select: text;
          user-select: text;
  width: 250px;
}
.group input:placeholder {
  color: #b3b3b3;
}
.group input:focus {
  -webkit-box-shadow: none;
          box-shadow: none;
}
.group .add-card {
  background: none;
  border: none;
  color: #7a7f80;
  cursor: pointer;
  font-size: 20px;
  position: absolute;
  right: 0;
  top: 0;
}
.group .add-card:hover {
  color: #a22;
}
.group:hover,
.group.dragging,
.group.stackable {
  background: rgba(242, 242, 242, 0.5);
  border-color: rgba(191, 191, 191, 0.5);
}
.group:hover input,
.group.dragging input,
.group.stackable input {
  color: #222;
}
.group:hover button.add-card,
.group.dragging button.add-card,
.group.stackable button.add-card {
  color: #222;
}
.group:hover button.add-card:hover,
.group.dragging button.add-card:hover,
.group.stackable button.add-card:hover {
  color: #2a2;
}
.group.single-card {
  background: none;
  border-color: transparent;
  -webkit-box-shadow: none;
          box-shadow: none;
}
.group.single-card.dragging .card {
  -webkit-box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.05);
          box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.05);
}
.group.single-card .card {
  -webkit-box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.1);
          box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.1);
}
.group.single-card .name-container {
  margin-bottom: 0;
}
/*
Card Group: Being dragged

Markup:
<br /><br />
<div class="group">
  <div class="background"></div>
  <div class="notice">
    <img class="avatar" src="/images/avatar-ernie.jpg" title="Ernie Johnson">
    <span>Ernie Johnson</span>
  </div>
  <input type="text" class="name" placeholder="Group Name" style="width: 140px;">
  <button class="add-card">+</button>
  <div id="564a30c9d99634000ac30e97" class="card color-2 draggable mine" creator="5644e29a695bbc758025d965" style="touch-action: pan-y; -webkit-user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); overflow: hidden;">
    <div class="header-bar">
      <span class="delete-btn">×</span>
    </div>
    <div class="content">
      <div class="viewable" style="height: auto; z-index: 31;">Card 1</div>
      <textarea class="editable" style="height: 16px; z-index: 29;"></textarea>
    </div>
    <div class="footer card__footer">
      <div class="card__authors"><img class="avatar" src="/images/avatar-ernie.jpg" title="Ernie Johnson"></div>
      <div class="card__colors">
        <span class="color card__color color-0"></span>
        <span class="color card__color color-1"></span>
        <span class="color card__color color-2"></span>
        <span class="color card__color color-3"></span>
        <span class="color card__color color-4"></span>
      </div>
      <div class="card__plus-one--button card__plus-one">
        <div class="card__plus-one-count">-1</div>
      </div>
      <div class="card__plus-one--static-text card__plus-one">
        <div class="card__plus-one-count">+1</div>
        <div class="tooltip-container flip">
          <div class="tooltip">
            <div class="tooltip__avatars"><img class="avatar" src="/images/avatar-ernie.jpg" title="Ernie Johnson"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- Presentation sugar for the styleguide -->
<br /><br /><br /><br /><br /><br /><br /><br /><br />

Styleguide: CardGroup.BeingDragged
*/
.group > .notice {
  position: absolute;
  top: -30px;
  left: 0;
}
.group > .notice .avatar {
  max-width: 22px;
  height: auto;
  margin-right: 0.125rem;
  display: inline-block;
  vertical-align: middle;
}
.group > .notice span {
  font-size: 0.7rem;
  display: inline-block;
  vertical-align: middle;
}
.group__selected--self,
.group__selected--self:hover,
.group__selected--self.dragging {
  border: 2px solid black;
}
.group__selected--self.single-card,
.group__selected--self.single-card:hover {
  border-color: transparent;
}
/*
Sheet

The backdrop where our adventure begins.

.background-grid       - A dot grid for stickies
.background-leancanvas - A backdrop for Lean Canvas activities
.background-target     - Target bullseye graphic
.background-box        - Box/grid backdrop

Markup:
<div class="clearfix" style="height: 400px; width: 100%;">
  <div class="sheet {{modifier_class}}"></div>
</div>

Styleguide: Sheet
*/
.sheet {
  position: relative;
  height: 100%;
  width: 100%;
  padding: 0;
}
.sheet.background-grid {
  background: transparent url("/images/grid.png") repeat 0 0;
  background-size: 10px 10px;
}
.sheet.background-box {
  background: transparent url("/images/box.png") repeat 5px 0;
  background-size: 300px 300px;
}
.sheet.background-target {
  background: transparent url("/images/target.jpg") no-repeat 75px 0;
}
.sheet.background-leancanvas {
  background: transparent url("/images/leancanvas.png") no-repeat 0 -2px;
}
.sheet.loading .group {
  visibility: hidden;
}
.sheet--has-state {
  margin-top: 60px;
}
/*
<div id="sheet-list" class=""><div class="sheet-toolbar">
  <div class="header-control">
    <input type="text" class="sheet-name editable" autocomplete="off">
    <div class="toggle-sheet-choices"></div>
  </div>
</div>
*/
#sheet-list .menu__items {
  max-height: calc(100vh - 80px);
  overflow-y: auto;
}
#sheet-list.sheet-list--role-moderator .menu__items {
  max-height: calc(100vh - 200px);
}
#sheet-list.sheet-list--role-editor .new-sheet {
  display: none;
}
.board {
  position: relative;
  height: 100%;
  width: 100%;
  padding: 0;
  padding-top: 44px;
  padding-left: 80px;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
}
/*
Dashboard Cell

Represents an individual board for display on a grid layout.

Markup:
<div class="board-cell">
  <div class="board-cell__thumbnail" style="background-image: url(/images/board-placeholder.png)"></div>
  <div class="board-cell__panel">
    <div class="board-cell__title">
      Guardant Health - Retro
    </div>
    <div class="board-cell__timestamps">
      <div class="board-cell__timestamp">updated: 01/27/15</div>
      <div class="board-cell__timestamp">created: 01/01/15</div>
    </div>
    <div class="board-cell__extended-attributes">
      <ul class="board-cell__avatar-list">
        <li class="board-cell__avatar"><i class="moderator"></i><img src="/images/avatar-bert.jpg" /></li>
        <li class="board-cell__avatar"><img src="/images/avatar-ernie.jpg" /></li>
        <li class="board-cell__avatar"><img src="/images/avatar-bert.jpg" /></li>
      </ul>
      <div class="board-cell__stat board-cell__member-count">
        <a href="#" title="Manage Collaborators" tabindex="-1">
          <i class="icon-group"></i> 4
        </a>
        <span>4</span>
      </div>
      <div class="board-cell__stat board-cell__sheet-count">
        <i class="icon-stack"></i> 4
      </div>
    </div>
  </div>
  <div class="board-cell__lightbox">
    <div class="board-cell__actions">
      <div class="board-cell__action board-cell__action--delete">
        <a href="#"><i class="icon-trash"></i></a>
      </div>
      <div class="board-cell__action board-cell__action--archive">
        <a href="#"><i class="icon-folder"></i></a>
      </div>
      <div class="board-cell__action board-cell__action--restore">
        <a href="#"><i class="icon-restore"></i></a>
      </div>
    </div>
    <button class="board-cell__view-button button">View Board</button>
  </div>
</div>

Styleguide: Dashboard.Cell
*/
.board-cell {
  background-color: #ffffff;
  border: 1px solid #afb2b3;
  height: 12rem;
  position: relative;
  overflow: hidden;
  -webkit-box-shadow: 2px 2px 2px #afb2b3;
          box-shadow: 2px 2px 2px #afb2b3;
  margin: 0.5rem;
  -webkit-box-flex: 0;
      -ms-flex-positive: 0;
          flex-grow: 0;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  -ms-flex-preferred-size: 17rem;
      flex-basis: 17rem;
  -ms-flex-item-align: end;
      align-self: flex-end;
}
.board-cell:hover .board-cell__extended-attributes,
.board-cell:focus .board-cell__extended-attributes,
.board-cell:active .board-cell__extended-attributes {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 100%;
          flex: 0 0 100%;
}
.board-cell:hover .board-cell__lightbox,
.board-cell:focus .board-cell__lightbox,
.board-cell:active .board-cell__lightbox {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.board-cell__thumbnail {
  top: 5%;
  left: 5%;
  position: absolute;
  width: 90%;
  background-size: contain;
  background-position: top left;
  background-repeat: no-repeat;
  background-color: #ffffff;
  min-height: 10rem;
}
.board-cell__panel {
  width: 100%;
  position: absolute;
  bottom: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding-bottom: 0.4rem;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: #ffffff;
  border-top: 1px solid #afb2b3;
  z-index: 2;
}
.board-cell__title {
  margin-top: 0.8rem;
  text-align: center;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 100%;
          flex: 0 0 100%;
}
.board-cell__timestamps {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 100%;
          flex: 0 0 100%;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.board-cell__timestamp {
  padding-top: 0.15rem;
  padding-bottom: 0.15rem;
  font-size: 0.7rem;
  font-style: italic;
  color: #afb2b3;
  text-align: center;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
.board-cell__timestamp:last-child {
  margin-left: 2px;
  border-left: 1px solid #afb2b3;
}
.board-cell__timestamp--unseen {
  color: #f45858;
}
.board-cell__title ~ * {
  margin-top: 0.25rem;
}
.board-cell__extended-attributes {
  display: none;
  *zoom: 1;
  padding-right: 0.5rem;
  padding-left: 1rem;
}
.board-cell__extended-attributes:before,
.board-cell__extended-attributes:after {
  display: table;
  content: "";
  line-height: 0;
}
.board-cell__extended-attributes:after {
  clear: both;
}
.board-cell__avatar-list {
  margin: 0;
  list-style: none;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
.board-cell__avatar {
  position: relative;
  margin-right: 3px;
  display: inline-block;
}
.board-cell__avatar img {
  margin-top: 0;
  height: 24px;
}
.board-cell__avatar i {
  color: #f45858;
  position: absolute;
  bottom: 3px;
  left: -3px;
  font-size: 14.4px;
}
.board-cell__avatar i.moderator {
  background-image: url(/images/icons/badges/moderator.svg);
  width: 0.5rem;
  height: 0.5rem;
  background-size: 100%;
}
.board-cell__stat {
  margin-top: 0;
  margin-right: 7px;
  margin-left: 5px;
  font-size: 0.9rem;
  color: #7d7f80;
  -ms-flex-item-align: end;
      align-self: flex-end;
}
.board-cell__stat span {
  font-size: 0.7rem;
  margin-left: 5px;
}
.board-cell__member-count a {
  text-decoration: none;
}
.board-cell__member-count .icon-group:hover {
  color: #038b9a;
}
.board-cell__lightbox {
  display: none;
  height: 100%;
  width: 100%;
  margin-top: 0;
  position: relative;
  z-index: 1;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 100%;
          flex: 0 0 100%;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  background-color: rgba(0, 0, 0, 0.5);
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.board-cell__actions {
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -ms-flex-item-align: end;
      align-self: flex-end;
}
.board-cell__action {
  float: right;
  font-size: 0.9rem;
  margin: 10px 10px 0 0;
  color: #afb2b3;
}
.board-cell__action a {
  color: #afb2b3;
  text-decoration: none;
}
.board-cell__action a:hover {
  color: #4b4c4d;
}
.board-cell__view-button {
  margin: 0 auto;
  padding-left: 2rem;
  padding-right: 2rem;
  color: #ffffff;
  background-color: rgba(175, 178, 179, 0.5);
  border: 1px solid #ffffff;
  text-align: center;
  text-decoration: none;
  font-size: 0.9rem;
  max-width: 55%;
  margin-top: -3%;
}
.board-cell__view-button:hover {
  color: #ffffff;
}
.board-cell__access-icon--public,
.board-cell__access-icon--private {
  display: inline-block;
  width: 1em;
  height: 1em;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  position: relative;
  top: -3px;
}
.board-cell__access-icon--public {
  background-image: url("/images/icons/unlocked_grey.svg");
}
.board-cell__access-icon--private {
  background-image: url("/images/icons/locked_grey.svg");
}
/*
Dashboard

Styles for dashboard views of boards and collections thereof.

Styleguide: Dashboard
*/
/*
Dashboard Grid

A containing grid for board cells. The layout responsively scales to the viewport width.

Markup:
<div class="board-grid">
  <div class="board-grid-header">
    <h4 class="board-grid-header__title">My boards
      <span class="board-grid-header__count">(4)</span>
      <span class="board-grid-header__expand"><button class="button button--mini button--subtle">SHOW</button></span>
    </h4>
  </div>
  <div class="board-cells">
    <div class="board-cell"></div>
    <div class="board-cell"></div>
    <div class="board-cell"></div>
    <div class="board-cell"></div>
    <div class="board-cell"></div>
    <div class="board-cell"></div>
    <div class="board-cell"></div>
    <div class="board-cell"></div>
  </div>
</div>

Styleguide: Dashboard.Grid
*/
.board-grid {
  margin-top: 1.1rem;
}
@media only screen and (min-width: 992px) {
  .board-grid {
    padding-left: 4rem;
  }
}
@media only screen and (min-width: 1200px) {
  .board-grid {
    padding-left: 0;
  }
}
.board-cells {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
  -ms-flex-pack: distribute;
      justify-content: space-around;
}
@media only screen and (min-width: 768px) {
  .board-cells {
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    padding-left: 4em;
  }
}
@media only screen and (min-width: 1200px) {
  .board-cells {
    padding-left: 0;
    padding-right: 0;
  }
}
.board-grid-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding-top: 0.3rem;
  padding-bottom: 0.3rem;
  margin-left: 0.5rem;
  margin-right: 0.5rem;
  margin-bottom: 1.1rem;
  border-bottom: 1px solid #afb2b3;
}
@media only screen and (min-width: 992px) {
  .board-grid-header {
    max-width: 61rem;
  }
}
@media only screen and (min-width: 1200px) {
  .board-grid-header {
    max-width: none;
  }
}
.board-grid-header__count {
  color: #7d7f80;
  font-weight: normal;
}
.board-grid-header__expand {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  -ms-flex-item-align: end;
      align-self: flex-end;
  text-align: right;
}
.board-grid-header__title {
  margin-bottom: 0;
  -webkit-box-flex: 3;
      -ms-flex: 3;
          flex: 3;
  -ms-flex-item-align: end;
      align-self: flex-end;
}
/*
Presence bar

Notification/action section of the screen.

Markup:
<div class="presence-bar">
  <div class="presence-bar__section current">
    <div class="online">
      <div class="presence-bar__collaborator current-collaborator">
        <div class="presence-bar__avatar">
          <img src="/images/avatar-ernie.jpg">
          <div class="presence-bar__badges">
            <div class="presence-bar__badge presence-bar__badge--moderator presence-bar__badge--active"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="collaborator-bar">
    <div class="wrapper">
      <div class="presence-bar__section moderators">
        <div class="online">
          <div class="presence-bar__collaborator other-collaborator">
            <div class="presence-bar__avatar">
              <img src="/images/avatar-bert.jpg">
              <div class="presence-bar__badges">
                <div class="presence-bar__badge presence-bar__badge--moderator"></div>
              </div>
            </div>
          </div>
        </div>
        <div class="offline"></div>
      </div>
      <div class="presence-bar__section collaborators">
        <div class="online"></div>
        <div class="offline">
          <div class="presence-bar__collaborator other-collaborator">
            <div class="presence-bar__avatar">
              <img src="/images/avatar-bert.jpg">
              <div class="presence-bar__badges">
                <div class="presence-bar__badge presence-bar__badge--moderator"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="presence-bar__counter">
    <div class="online">
      <div class="icon"></div>
      <div class="counter">2</div>
    </div>
    <div class="offline">
      <div class="icon"></div>
      <div class="counter">1</div>
    </div>
  </div>
  <div class="presence-bar__manage-collaborators" style="display: block;"></div>
</div>

Styleguide: PresenceBar
*/
#kssref-presencebar .kss-modifier__example,
#kssref-presencebar + section .kss-modifier__example,
#kssref-presencebar + section + section .kss-modifier__example,
#kssref-presencebar + section + section + section .kss-modifier__example {
  height: 400px;
  position: relative;
}
#kssref-presencebar .kss-modifier__example .presence-bar,
#kssref-presencebar + section .kss-modifier__example .presence-bar,
#kssref-presencebar + section + section .kss-modifier__example .presence-bar,
#kssref-presencebar + section + section + section .kss-modifier__example .presence-bar {
  top: 0;
  position: absolute;
}
.presence-bar {
  position: fixed;
  top: 44px;
  left: 0;
  bottom: 0;
  width: 80px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  background: #e1e5e6;
}
.presence-bar__section {
  border-bottom: 2px solid #ffffff;
}
.presence-bar__section .online .last-activity label {
  display: none;
}
.presence-bar__section.moderators {
  border-top: 2px solid #ffffff;
}
/**
 * The scrollable portion of the presence bar
 */
.collaborator-bar {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  position: relative;
  /* overflow: hidden; */
  /* Firefox broken without this, flyouts broken with this */
  height: 0px;
}
.collaborator-bar .wrapper {
  position: relative;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}
.collaborator-bar__shadow {
  content: "";
  width: 100%;
  height: 0px;
  position: absolute;
  left: 0px;
}
.collaborator-bar:before {
  content: "";
  width: 100%;
  height: 0px;
  position: absolute;
  left: 0px;
  -webkit-box-shadow: -2px 0px 8px 1px #7d7f80;
          box-shadow: -2px 0px 8px 1px #7d7f80;
  z-index: 1;
  top: 0px;
}
.collaborator-bar .wrapper:after {
  content: "";
  width: 100%;
  height: 0px;
  position: absolute;
  left: 0px;
  -webkit-box-shadow: -2px 0px 30px 3px rgba(125, 127, 128, 0.85);
          box-shadow: -2px 0px 30px 3px rgba(125, 127, 128, 0.85);
  z-index: 1;
  bottom: 0px;
}
/**
 * Collaborator fly-out menus
 */
.presence-bar__collaborator .menu {
  width: 40rem;
}
.presence-bar__collaborator .menu__content {
  width: 16rem;
  background: #ffffff;
  border: 1px solid #e1e5e6;
  border-left: none;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
.presence-bar__user-info {
  padding: 1.5em 0 0.5em 1.5em;
}
.presence-bar__user-info .display-name {
  font-weight: bold;
  color: #7d7f80;
}
.presence-bar__user-info .last-activity {
  font-style: italic;
  padding-top: 0.25em;
  color: #afb2b3;
}
.presence-bar__user-info .last-activity label {
  display: inline;
  font-size: inherit;
}
.actions .close-drawer--small {
  position: absolute;
  font-size: 2rem;
  top: 0.25em;
  right: 0.5em;
  color: #afb2b3;
  cursor: pointer;
}
.actions .current-actions li:hover .png-icon-check {
  background-image: url(/images/icons/png/check_white.png);
}
.actions .current-actions li:hover .png-icon-loading {
  background-image: url(/images/icons/png/loading_white.png);
}
.actions .current-actions li .png-icon-check,
.actions .current-actions li .png-icon-loading {
  position: absolute;
  top: 0;
  left: 1em;
  height: 100%;
  -webkit-transition: none;
  transition: none;
}
.actions .current-actions li .png-icon-loading {
  -webkit-animation: spin 3s linear infinite;
          animation: spin 3s linear infinite;
}
@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
.presence-bar__collaborator {
  position: relative;
  background: #e1e5e6;
}
.presence-bar__collaborator:hover {
  background: #d0d4d4;
}
.presence-bar__collaborator.focus .presence-bar__avatar {
  background: #f75e50;
}
.presence-bar__collaborator.menu--open {
  background: #7d7f80;
}
.current .presence-bar__collaborator .last-activity {
  display: none;
}
.presence-bar__avatar {
  position: relative;
  padding: 16px;
  cursor: pointer;
}
.presence-bar__avatar img {
  width: 48px;
  height: 48px;
  vertical-align: middle;
}
.offline .presence-bar__avatar {
  opacity: 0.3;
}
.presence-bar__badges {
  position: absolute;
  bottom: 0.4em;
  left: 0.4em;
  font-size: 1rem;
}
.presence-bar__badge {
  display: none;
  height: 1em;
  width: 1em;
  background-size: 100%;
  background-repeat: no-repeat;
}
.presence-bar__badge--active {
  display: inline-block;
}
.presence-bar__badge--moderator {
  background-image: url(/images/icons/badges/moderator.svg);
  color: #f75e50;
}
/*
Toggle Drawer

Markup:
<div style="position: relative; height: 100px; width: 80px; background-color: black">
  <div class="presence-bar__toggle-drawer">
    <span class="open-drawer">»</span>
    <span class="close-drawer">«</span>
  </div>
</div>

Styleguide: PresenceBar.ToggleDrawer
*/
.menu--open .presence-bar__toggle-drawer {
  -webkit-transform: none;
          transform: none;
}
.menu--open .presence-bar__toggle-drawer .open-drawer {
  display: none;
}
.menu--open .presence-bar__toggle-drawer .close-drawer {
  display: block;
}
.presence-bar__toggle-drawer {
  -webkit-transform: translateX(-1px);
          transform: translateX(-1px);
  position: absolute;
  top: -1px;
  left: 100%;
  width: 24px;
  height: 78px;
  line-height: 80px;
  background: #ffffff;
  border: 1px solid #e1e5e6;
  border-left: none;
  -webkit-box-shadow: 2px 0 0 rgba(50, 51, 51, 0.2);
          box-shadow: 2px 0 0 rgba(50, 51, 51, 0.2);
  text-align: center;
  font-size: 1.5rem;
  color: #afb2b3;
  cursor: pointer;
}
.presence-bar__toggle-drawer > span {
  width: 100%;
  height: 100%;
}
.presence-bar__toggle-drawer .open-drawer {
  display: block;
}
.presence-bar__toggle-drawer .close-drawer {
  display: none;
}
.presence-bar__manage-collaborators {
  height: 80px;
  min-height: 80px;
  border-top: 2px solid #ffffff;
  background-color: #f8f8f8;
  background-image: url("/images/icons/plus.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 35%;
  -webkit-transition: background-color 300ms linear;
  transition: background-color 300ms linear;
}
.presence-bar__manage-collaborators .png-icon-locked--black {
  display: none;
}
.presence-bar__manage-collaborators:hover:not(.presence-bar__manage-collaborators--disabled) {
  background-color: #afb2b3;
  cursor: pointer;
}
.presence-bar__manage-collaborators:hover:not(.presence-bar__manage-collaborators--disabled) .tooltip {
  display: none;
}
.presence-bar__manage-collaborators.presence-bar__manage-collaborators--disabled:after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-color: white;
  opacity: 0.5;
}
.presence-bar__manage-collaborators.presence-bar__manage-collaborators--disabled .tooltip {
  width: 135px;
}
.presence-bar__manage-collaborators.presence-bar__manage-collaborators--disabled .png-icon-locked--black {
  display: block;
  position: absolute;
  right: 5px;
  bottom: 5px;
}
/*
Presence Menu

Markup:
<div class="presence-bar">
  <div class="presence-bar__section current">
    <div class="online">
      <div class="presence-bar__collaborator current-collaborator">
        <div class="presence-bar__avatar">
          <img src="/images/avatar-ernie.jpg">
          <div class="presence-bar__badges">
            <div class="presence-bar__badge presence-bar__badge--moderator presence-bar__badge--active"></div>
          </div>
        </div>
        <div class="menu menu--minimalist menu--borderless menu--right menu--open menu--dropshadow">
          <div class="menu__content">
            <div class="presence-bar__user-info">
              <div class="display-name">Ernie Johnson</div>
              <div class="last-activity"><label>last activity: </label><span>online</span></div>
            </div>
            <div class="actions">
              <div class="presence-bar__toggle-drawer">
                <span class="open-drawer">»</span>
                <span class="close-drawer">«</span>
              </div>
              <ul class="menu__items current-actions">
                <li class="menu__item everyone-action download-csv" style="display: list-item;">Download Spreadsheet</li>
                <li class="menu__item incognito-mode toggle-on" style="display: list-item;">
                  Enable Incognito Mode
                </li>
                <li class="menu__item incognito-mode toggle-off" style="display: none;">
                  <i class="png-icon-check"></i>
                  Enable Incognito Mode
                </li>
                <li class="menu__item menu__item--border-top everyone-action logout" style="display: list-item;">Sign Out of Stickies</li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Styleguide: PresenceBar.Menu
*/
/*
Moderator Menu

Markup:
<div class="presence-bar">
   <div class="presence-bar__section current">
      <div class="online">
         <div class="presence-bar__collaborator current-collaborator">
            <div class="presence-bar__avatar">
               <img src="/images/avatar-ernie.jpg">
               <div class="presence-bar__badges">
                  <div class="presence-bar__badge presence-bar__badge--moderator presence-bar__badge--active"></div>
               </div>
            </div>
         </div>
      </div>
   </div>
   <div class="presence-bar__section moderators">
      <div class="online">
         <div class="presence-bar__collaborator other-collaborator">
            <div class="presence-bar__avatar">
               <img src="/images/avatar-bert.jpg">
               <div class="presence-bar__badges">
                  <div class="presence-bar__badge presence-bar__badge--moderator"></div>
               </div>
            </div>
            <div class="menu menu--right menu--minimalist menu--borderless menu--dropshadow menu--open">
              <div class="menu__content">
                <div class="presence-bar__user-info">
                  <div class="display-name">Bert Bacharach</div>
                  <div class="last-activity"><label>last activity: </label><span>10/2/2015</span></div>
                </div>
                <div class="actions">
                  <div class="close-drawer close-drawer--small">×</div>
                  <ul class="menu__items other-actions">
                    <li class="menu__item sticky-focus toggle-on" style="display: list-item;">
                      <i class="png-icon-focus png-icon-focus--white"></i>
                      Focus My Stickies
                    </li>
                    <li class="menu__item sticky-focus toggle-off" style="display: none;">
                      <i class="png-icon-focus png-icon-focus--white"></i>
                      Remove Focus
                    </li>
                    <li class="menu__item role set-moderator" style="display: list-item;">
                      <i class="png-icon-moderator png-icon-moderator--white"></i>
                      Make Moderator
                    </li>
                    <li class="menu__item role remove-moderator" style="display: none;">
                      <i class="png-icon-moderator png-icon-moderator--white"></i>
                      Remove Moderator
                    </li>
                  </ul>
                </div>
              </div>
            </div>
         </div>
      </div>
      <div class="offline"></div>
         </div>
      </div>
   </div>
</div>

Styleguide: PresenceBar.ModeratorMenu
*/
/*
Counter

Markup:
<div class="presence-bar__counter" style="position: relative">
  <div class="online">
    <div class="icon"></div>
    <div class="counter">93</div>
  </div>
  <div class="offline">
    <div class="icon"></div>
    <div class="counter">32</div>
  </div>
</div>

Styleguide: PresenceBar.Counter
*/
.presence-bar__counter {
  border-top: 2px solid #ffffff;
  width: 80px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  background-color: #e1e5e6;
  min-height: 25px;
}
.presence-bar__counter .online,
.presence-bar__counter .offline {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 50%;
}
.presence-bar__counter .online .icon,
.presence-bar__counter .offline .icon {
  border-radius: 50%;
  width: 12px;
  height: 12px;
  border: 1px solid #afb2b3;
}
.presence-bar__counter .online .counter,
.presence-bar__counter .offline .counter {
  padding-left: 2px;
}
.presence-bar__counter .online .icon {
  background-color: #85c5cb;
  border: 1px solid #038b9a;
}
/*
Header

Top black bar with navigational content.

Markup:
<div class="header"></div>
<hr />
<div style="background-image: url(/images/backgrounds/sign-up.jpg);">
  <div class="header header--clear"></div>
</div>

Styleguide Header
*/
.kss-modifier__example .header {
  position: static;
}
.header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  z-index: 9999;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  min-height: 44px;
  background-color: #323333;
}
.header--clear {
  background-color: transparent;
}
/*
Header logo

Markup:
<div class="header">
  <div class="logo header__logo"></div>
</div>
<hr />
<div class="header">
  <div class="logo header__logo header__logo--centered"></div>
</div>
<hr />
<div class="header">
  <div class="logo header__logo header__logo--large"></div>
</div>

Styleguide Header.Logo
*/
.header__logo {
  height: 44px;
  background-position: center;
}
.header__logo--centered {
  margin: 0 auto;
}
.header__logo--large {
  height: 88px;
  width: 13rem;
  background-size: 85%;
}
/*
Header controls

Markup:
<div class="header">
  <div class="header__control"></div>
</div>
<hr />
<div class="header">
  <div class="header__control"></div>
  <div class="header__control"></div>
</div>
<hr />
<div class="header">
  <div class="header__control"></div>
  <div class="header__control"></div>
  <div class="header__control"></div>
</div>
<hr />
<div class="header">
  <div class="header__control">
    Align me to the left
  </div>
  <div class="header__control header__control--right">
    Align me to the right
  </div>
</div>
<hr />
<div class="header">
  <div class="logo header__logo"></div>
  <div class="header__control"></div>
</div>
<hr />
<div class="header">
  <div class="logo header__logo header__logo--large"></div>
  <div class="header__control"></div>
</div>

Styleguide Header.Controls
*/
#kssref-header-controls .kss-modifier__example .header__control {
  background-color: #f45858;
}
.header__control {
  -webkit-box-flex: 1;
      -ms-flex: 1 0 0%;
          flex: 1 0 0%;
  position: relative;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 0 0.7em 0 0.5em;
  margin: 0.5em 0;
  border-right: 1px solid #7d7f80;
  max-width: 14rem;
}
.header__control:last-child {
  border-right: none;
}
.header__control--wide {
  -webkit-box-flex: 2;
      -ms-flex: 2 0 0%;
          flex: 2 0 0%;
  max-width: 25rem;
}
.header__control--right {
  -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
          order: 1;
  text-align: right;
  max-width: none;
}
/*
Header inputs

Markup:
<div class="header">
  <div class="header__control">
    <div class="header__input">Uneditable Input</div>
  </div>
</div>
<hr />
<div class="header">
  <div class="header__control">
    <input class="header__input header__input--editable" placeholder="Sample Text" />
  </div>
</div>
<hr />
<div class="header">
  <div class="header__control">
    <input class="header__input header__input--editable" placeholder="Left Input" />
  </div>
  <div class="header__control">
    <input class="header__input header__input--editable" placeholder="Right Input" />
  </div>
</div>
<hr />
<div class="header">
  <div class="header__control">
    <input
      class="header__input header__input--editable"
      value="This is a bunch of text that is going to push the input over the edge as far as content" />
  </div>
  <div class="header__control">
    <input class="header__input header__input--editable" placeholder="Second Input" />
  </div>
  <div class="header__control">
    <input class="header__input header__input--editable" placeholder="Third Input" />
  </div>
</div>
<hr />
<div class="header">
  <div class="header__control header__control--wide">
    <input class="header__input header__input--editable" placeholder="Sample Wide Text" />
  </div>
</div>

Styleguide Header.Inputs
*/
.header__input {
  color: #7d7f80;
  background-color: transparent;
  border: none;
  border-bottom: 1px solid #7d7f80;
  width: 100%;
  font-smoothing: antialiased;
  text-overflow: ellipsis;
  font-weight: 200;
}
.header__input:placeholder {
  color: #afb2b3;
}
.header__input i {
  vertical-align: baseline;
}
.header__input--editable {
  color: #ffffff;
}
.header__input--editable:focus,
.header__input--editable:hover {
  background-image: url("/images/icon-pencil.svg");
  background-position: right center;
  background-repeat: no-repeat;
  background-size: auto 50%;
}
/*
Header Clickable Menu

Control that when clicked will drop open a menu.

Markup:
<div class="header">
  <div id="sheet-list" class="header__control">
    <input type="text" class="sheet-name header__input header__input--clickable"
           autocomplete="off" placeholder="clickable menu">
    <div class="header__menu-toggle"></div>
  </div>
</div>

Styleguide: Header.ClickableMenu
*/
.header__input--clickable {
  color: #ffffff;
  cursor: pointer;
}
.header__input--fixed {
  width: 400px;
}
/*
Header action link

Markup:
<div class="header">
  <div class="header__control">
    <div class="header__action-link">
      <a href="#"><i class="icon-logout"></i>Sign Out</a>
    </div>
  </div>
</div>

Styleguide Header.ActionLink
*/
.header__action-link {
  font-weight: bold;
  display: inline-block;
}
.header__action-link i {
  margin: 0 0.5em 0.25em 0;
}
.header__action-link a {
  padding: 0.5em;
  padding-right: 1em;
  text-decoration: none;
  color: #ffffff;
  -webkit-font-smoothing: auto;
}
.header__action-link--right a {
  padding-right: 0;
}
.header__small-action {
  display: inline-block;
  cursor: pointer;
  width: 1em;
  height: 1em;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.header__small-action.header__small-action--disabled {
  cursor: auto;
}
.header__small-action.board-access--public {
  background-image: url("/images/icons/png/unlocked_white.png");
}
.header__small-action.board-access--private {
  background-image: url("/images/icons/png/locked_white.png");
}
.header__small-action.board-access--disabled {
  cursor: default;
}
/*
Header Editable Menu

Input field + toggle styles. To see flyout menu styles, see the [Menu](section-menu.html) module.

Markup:
<div class="header">
  <div id="sheet-list" class="header__control">
    <input type="text" class="sheet-name header__input header__input--editable header__editable-menu"
           autocomplete="off" placeholder="when menu closed">
    <div class="header__menu-toggle"></div>
  </div>
  <div id="sheet-list" class="header__control header__control--expanded">
    <input type="text" class="sheet-name header__input header__input--editable header__editable-menu"
           autocomplete="off" placeholder="when menu open">
    <div class="header__menu-toggle"></div>
  </div>
</div>

Styleguide: Header.MenuToggle
*/
.header__editable-menu {
  width: 100%;
}
.header__editable-menu:hover,
.header__editable-menu:focus {
  background-position: right 24px center;
}
.header__menu-toggle {
  background-image: url("/images/icons/arrow-down.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 50%;
  width: 24px;
  height: 24px;
  cursor: pointer;
  position: absolute;
  top: 0;
  right: 0.7em;
  width: 20px;
}
.header__menu-toggle--disabled {
  cursor: auto;
}
.header__control--expanded .header__menu-toggle {
  background-image: url("/images/icons/arrow-up.svg");
}
.header-logo__container {
  padding: 2rem 12%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  width: 100%;
}
.header-logo__nav-container {
  width: 25rem;
  display: none;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
@media only screen and (min-width: 768px) {
  .header-logo__nav-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
}
/*
Mega Text Field

A big form field with a large CTA button.

Markup:
<div class="mega-text">
  <input type="text" class="mega-text__input" placeholder="My new sticky board" />
  <button class="button button--primary mega-text__button">
    <i class="icon-add icon-size-big"></i> Add Board
  </button>
</div>

Styleguide: MegaText
*/
.mega-text {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding-top: 1.1rem;
  padding-bottom: 1.1rem;
  max-width: 60rem;
  padding-left: 2rem;
  padding-right: 2rem;
}
.mega-text form {
  margin: 0;
}
.mega-text__input-wrapper {
  position: relative;
  display: inline-block;
  -webkit-box-flex: 3;
      -ms-flex: 3 0 0px;
          flex: 3 0 0;
  margin-right: 0.5rem;
}
.mega-text__input-wrapper .mega-text__input {
  width: 100%;
  height: 100%;
}
.mega-text__input-wrapper .button--thin {
  position: absolute;
  right: 3px;
}
input.mega-text__input[type="text"] {
  -webkit-box-flex: 3;
      -ms-flex: 3 0 0px;
          flex: 3 0 0;
  font-size: 1rem;
  padding: 0.5rem 0.8rem;
  color: #4b4c4d;
  background-color: #ffffff;
  border-radius: 3pt;
  border: 1px solid #7d7f80;
  margin-right: 0.5rem;
}
input.mega-text__input[type="text"]:focus {
  border-width: 1px;
  border-radius: 2pt;
  border-color: #646566;
  -webkit-box-shadow: 0 0 6px #b1b2b2;
          box-shadow: 0 0 6px #b1b2b2;
  outline: 0;
}
input.mega-text__input[type="text"]:focus:required:invalid {
  color: #b94a48;
  border-color: #e9322d;
}
input.mega-text__input[type="text"]:focus:required:invalid:focus {
  border-color: #e9322d;
  -webkit-box-shadow: 0 0 6px #f8b9b7;
          box-shadow: 0 0 6px #f8b9b7;
}
input.mega-text__input[type="text"]:focus {
  color: #4b4c4d;
}
input.mega-text__input[type="text"]::-webkit-input-placeholder {
  font-style: italic;
  color: #4b4c4d;
}
input.mega-text__input[type="text"]::-moz-placeholder {
  font-style: italic;
  color: #4b4c4d;
}
input.mega-text__input[type="text"]:-ms-input-placeholder {
  font-style: italic;
  color: #4b4c4d;
}
input.mega-text__input[type="text"]::-ms-input-placeholder {
  font-style: italic;
  color: #4b4c4d;
}
input.mega-text__input[type="text"]::placeholder {
  font-style: italic;
  color: #4b4c4d;
}
.mega-text__button {
  -webkit-box-flex: 0;
      -ms-flex: 0 1 8rem;
          flex: 0 1 8rem;
  padding: 0.5rem;
  line-height: normal;
  font-size: 0.9rem;
}
@media only screen and (min-width: 768px) {
  .mega-text__button {
    padding-top: 0.7rem;
    padding-right: 0.8rem;
    padding-bottom: 0.5rem;
    padding-left: 0.8rem;
  }
}
/*
Menu

Contextual menus for various stickies action (see: presence bar, header).

`menu--borderless`: removes borders around the menu & within the menu.

`menu--fullsize`: Opens the menu to 100% of the container.

`menu__item--disabled`: disables cursor inputs, applies greyed-out styles.

`menu__item--active`: Highlights currently active / selected menu item.

`menu__item--control`: style the menu item to hold form controls.

`menu__item--indented`: add additional text indentation on the menu

`menu__item--button`: special button-style menu item that contains a `menu__button`

Markup:
<div class="menu">
  <div class="menu__content">
    <ul class="menu__items">
      <li class="menu__item">Menu Item 1</li>
      <li class="menu__item menu__item--active">Menu Item 2 (Active)</li>
      <li class="menu__item menu__item--indented">Menu Item 3 (Indented)</li>
      <li class="menu__item menu__item--disabled">Menu Item Disabled</li>
      <li class="menu__item">
        <div class="menu__header">Menu Item 4</div>
        <div class="menu__copy">With extra content in it to make for a rather large menu item.</div>
      </li>
      <li class="menu__item menu__item--button">
        <div class="button menu__button menu__button--primary">
          <i class="png-icon-moderator png-icon-moderator--white"></i>
          Make Moderator
        </div>
      </li>
      <li class="menu__item menu__item--button">
        <div class="button menu__button">Sign out of Stickies</div>
      </li>
    </ul>
    <div class="menu__item menu__item--control">
      <input class="menu__input" placeholder="Menu Input" />
      <button class="button menu__button menu__button--primary">Menu Button</button>
    </div>
  </div>
</div>
<hr />
<div class="menu menu--borderless">
  <div class="menu__content">
    <ul class="menu__items">
      <li class="menu__item">Menu Item 1</li>
      <li class="menu__item">Menu Item 2</li>
      <li class="menu__item">
        <div class="menu__header">Menu Item 3</div>
        With extra content in it to make for a rather large menu item.
      </li>
    </ul>
  </div>
</div>

Styleguide: Menu
*/
/*
Right Flyout Menu

Opens out from the right side. Must be contained in a relatively-positioned container.

Markup:
<div style="background:black; width: 300px; height: 300px; position: relative;">
<div class="menu menu--right menu--open">
  <div class="menu__content" style="width: 200px">
    <ul class="menu__items">
      <li class="menu__item">Right Menu Item 1</li>
      <li class="menu__item">Menu Item 2</li>
    </ul>
  </div>
</div>
</div>

Styleguide: Menu.Right
*/
#kssref-menu .menu {
  position: relative;
  max-width: 400px;
}
.menu {
  position: absolute;
  overflow: hidden;
  pointer-events: none;
  font-size: 0.9rem;
}
.menu--full-size {
  width: 100%;
}
.menu--borderless .menu__item {
  border-color: transparent;
}
.menu--borderless .menu__items {
  border-color: transparent;
}
.menu--down {
  top: 100%;
  left: 0;
}
.menu--down .menu__content {
  -webkit-transform: translateY(-100%);
          transform: translateY(-100%);
}
.menu--right {
  top: 0;
  left: 100%;
}
.menu--right .menu__content {
  -webkit-transform: translateX(-100%);
          transform: translateX(-100%);
}
.menu--open .menu__content {
  -webkit-transform: translateX(0%) translateY(0%);
          transform: translateX(0%) translateY(0%);
}
.menu__content {
  -webkit-transition: -webkit-transform 0.1s;
  transition: -webkit-transform 0.1s;
  transition: transform 0.1s;
  transition: transform 0.1s, -webkit-transform 0.1s;
  pointer-events: all;
}
.menu__items {
  list-style: none;
  border: 1px solid #e1e5e6;
  margin: 0;
  padding: 0;
}
.menu__item {
  padding: 0.9rem 0.5rem;
  background-color: #ffffff;
  border-bottom: 1px solid #e1e5e6;
  cursor: pointer;
  position: relative;
}
.menu__item:last-child {
  border-bottom: none;
}
.menu__item:hover {
  color: #323333;
  background-color: #e1e5e6;
}
.menu__item--disabled {
  color: #7d7f80;
  background-color: #e1e5e6;
  cursor: default;
  pointer-events: none;
}
.menu__item--disabled:hover {
  color: #7d7f80;
  background-color: #e1e5e6;
}
.menu__item--active {
  font-weight: bold;
  background-color: #ffffff;
  color: #323333;
}
.menu__item--control {
  cursor: default;
  background-color: #e1e5e6;
}
.menu__item--control:hover {
  color: inherit;
  background-color: #e1e5e6;
}
.menu .menu__item--border-top {
  border-top: 1px solid #e1e5e6;
}
/*
Menu - Fancy item

Markup:
<div class="menu">
  <div class="menu__content">
    <ul class="menu__items">
      <li class="menu__item menu__item--fancy">
        <div class="menu__header"><i class="png-icon-locked"></i> Menu Item 4</div>
        <div class="menu__copy">With extra content in it to make for a rather large menu item.</div>
      </li>
      <li class="menu__item menu__item--fancy">
        <div class="menu__header"><i class="png-icon-locked"></i> Menu Item 4</div>
        <div class="menu__copy">With extra content in it to make for a rather large menu item.</div>
      </li>
    </ul>
  </div>
</div>

Styleguide: Menu.FancyItem
*/
.menu__item--fancy {
  padding: 1rem;
}
.menu__item--fancy i {
  vertical-align: baseline;
}
.menu__copy {
  font-size: 0.7rem;
}
.menu__input {
  margin-bottom: 0.5em;
  padding: 0.5rem 0.5rem;
}
.menu__item--button:hover {
  background-color: #ffffff;
}
.menu__item--indented {
  text-indent: 2em;
}
/*
Menu Button

Markup:
<div class="button menu__button">Push me</div>
<div class="button menu__button menu__button--primary">Push me</div>

Styleguide: Menu.Button
*/
.menu__button {
  width: 100%;
  font-size: 0.9rem;
}
.menu__button--primary {
  background-color: #f75e50;
  border: 1pt solid #f75e50;
  color: #ffffff;
  text-decoration: none;
}
.menu__button--primary:hover {
  background-color: #ffffff;
  color: #f75e50;
}
.menu__button--primary:hover[disabled] {
  background-color: #f75e50;
  color: #ffffff;
}
.menu__button--primary[disabled] {
  opacity: 0.75;
}
/*
Header Control Menus

Menus that drop out of header controls

Markup:
<div class="header">
  <div class="header__control">
    <input type="text" class="sheet-name header__input header__input--editable header__editable-menu"
           autocomplete="off" placeholder="when menu open">
    <div class="menu menu--within-header-control menu--down menu--open">
      <div class="menu__content">
        <ul class="menu__items"><li data-id="564bbab8a3c818c1219d9a86" class="menu__item sheet-choice menu__item--active">My test sheet</li></ul>
        <div class="new-sheet menu__item menu__item--control">
          <input class="new-sheet-name menu__input" required="" type="text" placeholder="11/18/2015">
          <button class="button menu__button menu__button--primary">Add Sheet</button>
        </div>
      </div>
    </div>
  </div>
</div>

Styleguide: Menu.HeaderControl
*/
.menu--within-header-control {
  width: calc(100% - 0.5rem - 0.7rem);
  margin-left: 0.5rem;
  margin-top: 0.5rem;
}
/*
Lead copy

Markup:
<div class="lead">
  <div class="lead__header">Real-time sticky notes for teams</div>
  <div class="lead__text">
    Create, move, cluster and upvote stickies in real-time. Perfect for affinity maps, retrospectives and brainstorming sessions.
  </div>
</div>

Styleguide: Lead
*/
.lead {
  margin-top: 3rem;
  margin-bottom: 4rem;
}
.lead__header {
  color: #f75e50;
  font-size: 2rem;
  font-weight: bold;
}
.lead__text {
  font-size: 1.2rem;
  font-weight: 200;
}
/*
Hero

Markup:
<div class="hero" style="background-image: url(/images/backgrounds/sign-up.jpg);">
  <div class="container">
    <h3 class="hero__heading">
      Collaborate with
      <div class="logo stickies-logo"></div>
    </h3>
    <div class="hero__button-group">
      <button class="show-social-login button button--primary">Sign up free</button>
      <button class="show-social-login button">Log in</button>
    </div>
  </div>
  <div class="hero__subheading open">
    <div class="container">
      <h4 class="login__call-to-action">Sign in with</h4>
      <div class="hero__button-group">
        <button id="facebook" class="button button--facebook hero__button login__button"><i class="icon-facebook"></i><span>facebook</span></button>
        <button id="google"   class="button button--google hero__button login__button"><i class="icon-google"></i><span>google</span></button>
        <button id="twitter"  class="button button--twitter hero__button login__button"><i class="icon-twitter"></i><span>twitter</span></button>
      </div>
    </div>
  </div>
</div>

Styleguide: Hero
*/
.hero {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.hero__heading {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 100%;
          flex: 0 0 100%;
  color: #ffffff;
}
.hero__button-group {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 100%;
          flex: 0 0 100%;
}
.hero__button-group .button + .button {
  margin-left: 0.5rem;
}
.hero__subheading {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 100%;
          flex: 0 0 100%;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin-top: 3rem;
  max-height: 0px;
  -webkit-transition: max-height 0.4s;
  transition: max-height 0.4s;
  background: rgba(0, 0, 0, 0.3);
  overflow-y: hidden;
}
.hero__subheading.open {
  max-height: 200px;
}
.hero > .container,
.hero__subheading > .container {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 100%;
          flex: 0 0 100%;
}
.login__call-to-action {
  margin-top: 2rem;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 100%;
          flex: 0 0 100%;
  color: #fff;
}
.hero__button {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  font-size: 14px;
  text-transform: capitalize;
  margin-bottom: 1.1rem;
}
.hero__button:hover {
  background-color: white;
}
.hero__button i {
  font-size: 20px;
  padding-right: 6px;
  line-height: 22px;
}
.add-board {
  background-color: #e1e5e6;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.add-board i.icon-lock {
  display: inline-block;
  width: 0.9rem;
  height: 0.9rem;
  cursor: pointer;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  margin-right: 0.5rem;
}
.add-board #board-access-toggle {
  width: 154px;
  text-align: center;
  background-color: white;
  font-size: 0.85rem;
}
.add-board #board-access-toggle:hover {
  background-color: #afb2b3;
}
.add-board #board-access[value="public"] ~ .mega-text__input-wrapper #board-access-toggle i.icon-lock {
  background-image: url("/images/public--black.svg");
}
.add-board #board-access[value="public"] ~ .mega-text__input-wrapper #board-access-toggle .button-text:after {
  content: "Public Board";
}
.add-board #board-access[value="private"] ~ .mega-text__input-wrapper #board-access-toggle i.icon-lock {
  background-image: url("/images/private--black.svg");
}
.add-board #board-access[value="private"] ~ .mega-text__input-wrapper #board-access-toggle .button-text:after {
  content: "Private Board";
}
/*
Static Card

A card-like container to hold marketing copy + an icon + a CTA.

Markup:
<div class="static-card">
  <div class="static-card__icon">
    <i class="png-icon-cupcake"></i>
  </div>
  <div class="static-card__heading">
    Hang on.
  </div>
  <div class="static-card__copy">
    <p>We're evaluating interest in private boards and subscriptions. We're not quite ready to do either, but don't worry, we won't charge or save your card.</p>
    <p>For now, <strong>enjoy the free, full-featured version of Stickies.io. </strong>When we transition to subscriptions, we'll give you the first <strong>three months of your subscription free </strong>for being a champ.</p>
  </div>
  <div class="static-card__cta">
    <a href="/" class="button button--primary">Go to Stickies.io</a>
  </div>
</div>

Styleguide: StaticCard
*/
.static-card {
  margin-bottom: 1.1rem;
}
.static-card__icon {
  font-size: 2rem;
  margin-bottom: 2rem;
  text-align: center;
}
.static-card__heading {
  text-align: center;
  font-size: 1.2rem;
  font-weight: bold;
  margin-bottom: 1rem;
}
.static-card__copy {
  font-size: 1.2rem;
  margin-bottom: 2rem;
}
.static-card__copy p {
  line-height: 1.5em;
}
.static-card__cta {
  text-align: center;
}
/*
Text Hero

A subtle hero banner meant for simple text headings

Markup:
<div class="text-hero">
  <div class="text-hero__heading">Let's get started!</div>
</div>

Styleguide: TextHero
*/
.text-hero {
  font-size: 2rem;
  text-align: center;
  padding: 5rem;
  margin: 44px auto 1.1rem;
  background-color: #f8f8f8;
}
.text-hero__heading {
  font-weight: normal;
}
/*
Sheet State Action Bar

`sheet-state--state-blur`: Makes the action bar visible

`sheet-state--state-normal`: Hides the action bar

`sheet-state--role-moderator`: Green moderator color

`sheet-state--role-<other>`: Grey color

Markup:
<div class="sheet-state sheet-state--role-moderator sheet-state--state-blur">
  <div class="action exit-incognito">
    <i class="png-icon-incognito png-icon-incognito--white"></i>
    Exit Incognito Mode
  </div>
</div>
<hr />
<div class="sheet-state state-blur sheet-state--state-blur">
  <i class="png-icon-incognito png-icon-incognito--white"></i>
  This sheet is in Incognito Mode
</div>

Styleguide: SheetStateActionBar
*/
#kssref-sheetstateactionbar .sheet-state {
  position: static;
}
#clipboard-event-anchor {
  width: 0;
  height: 0;
  position: fixed;
  border: none;
}
.sheet-state {
  display: none;
  position: fixed;
  top: 44px;
  left: 24px;
  right: 0;
  height: 60px;
  line-height: 60px;
  text-align: center;
  color: #ffffff;
  font-size: 1.2rem;
  font-weight: bold;
}
.sheet-state div {
  display: inline;
  padding: 0.25em 1em;
}
.sheet-state div.action {
  cursor: pointer;
}
.sheet-state--state-blur {
  display: block;
  background: #afb2b3;
}
.sheet-state--state-reload,
.sheet-state--state-reload.sheet-state--role-moderator,
.sheet-state--state-stale,
.sheet-state--state-stale.sheet-state--role-moderator {
  display: block;
  background: #ff8080;
}
.sheet-state--state-reload a,
.sheet-state--state-reload.sheet-state--role-moderator a,
.sheet-state--state-stale a,
.sheet-state--state-stale.sheet-state--role-moderator a {
  color: #ffffff;
}
.sheet-state--role-moderator {
  background: #85c5cb;
}
/*
Avatar

An image representing a user's image avatar.

avatar--medium - Medium 36px
avatar--large  - Large 48px

Markup:
<img class="avatar {{modifier_class}}" src="/images/avatar-bert.jpg" title="Bert Bacharach">
<img class="avatar {{modifier_class}}" src="/images/avatar-ernie.jpg" title="Bert Bacharach">

Styleguide: Avatar
*/
.avatar {
  max-height: 22px;
  max-width: 22px;
  height: auto;
  margin-right: 0.25rem;
}
.avatar--medium {
  max-height: 36px;
  max-width: 36px;
}
.avatar--large {
  max-height: 48px;
  max-width: 48px;
}
/*
Modal (new)

Markup:
<div class="modal--updated">
  <div class="modal__overlay"></div>
  <div class="modal__container">
    <div class="modal__box">
      <div class="modal__header">Join for free.</div>
      <div class="modal__subheader">(No credit card required.)</div>
      <div class="modal__body">Better collaboration is two clicks away:</div>
      <div class="signup__providers"><a id="btn-google" href="oauth/google" class="btn btn-provider"><i class="icon-google"></i><span>Sign up with Google</span></a><a id="btn-twitter" href="oauth/twitter" class="btn btn-provider"><i class="icon-twitter"></i><span>Sign up with Twitter</span></a></div>
      <div class="signup__opt-out"><a href="sign-up/email" class="a_signup-email-preferred">Prefer to sign up with email</a></div>
    </div>
  </div>
</div>

Styleguide: Modal
*/
.modal__overlay,
.modal__container {
  position: fixed;
  width: 100vw;
  height: 100vh;
}
.modal__container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.modal__overlay {
  background: rgba(61, 31, 11, 0.7);
}
.modal__box {
  position: relative;
  border-radius: 0.15rem;
  background: #ffffff;
  padding: 4rem 5rem 3rem;
  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
          box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}
.modal__header-icon {
  font-size: 2rem;
  text-align: center;
  margin: -1rem 0 1rem;
}
.modal__header,
.modal__subheader {
  line-height: 1.4em;
  text-align: center;
}
.modal__header {
  font-size: 2rem;
  padding-bottom: 0.5rem;
}
.modal__subheader {
  font-size: 1rem;
}
.modal__body {
  padding-top: 3rem;
  padding-bottom: 1rem;
}
.modal__body--no-padding {
  padding-top: 1rem;
}
.modal__text--left {
  text-align: left;
}
.modal__buttons {
  padding-top: 1rem;
}
.modal__button,
input.modal__button {
  background-color: #ffffff;
  border: 1pt solid #4b4c4d;
  color: #4b4c4d;
  display: inline-block;
  padding-top: 0.5rem;
  padding-right: 1rem;
  padding-bottom: 0.5rem;
  padding-left: 1rem;
  border-radius: 3pt;
  font-size: 1rem;
  cursor: pointer;
  -webkit-transition: border-color 0.1s, background-color 0.1s, color 0.1s;
  transition: border-color 0.1s, background-color 0.1s, color 0.1s;
  background-color: #f75e50;
  border: 1pt solid #f75e50;
  color: #ffffff;
  display: block;
  margin: 1rem auto 0;
  width: 12rem;
  text-decoration: none;
}
.modal__button:hover,
input.modal__button:hover {
  background-color: #4b4c4d;
  color: #ffffff;
}
.modal__button:hover[disabled],
input.modal__button:hover[disabled] {
  background-color: #ffffff;
  color: #4b4c4d;
}
.modal__button[disabled],
input.modal__button[disabled] {
  opacity: 0.75;
}
.modal__button[disabled],
input.modal__button[disabled] {
  cursor: not-allowed;
}
.modal__button:hover,
input.modal__button:hover {
  background-color: #ffffff;
  color: #f75e50;
}
.modal__button:hover[disabled],
input.modal__button:hover[disabled] {
  background-color: #f75e50;
  color: #ffffff;
}
.modal__button[disabled],
input.modal__button[disabled] {
  opacity: 0.75;
}
input.modal__input {
  display: block;
  margin: 2rem 0 0;
  background: none;
  border: none;
  border-bottom: 0.15rem solid #7d7f80;
  border-radius: 0;
  padding: 0.5em;
  width: 18rem;
}
/*
Flash

Markup:
<div class="flash">Flash is transparent by default</div>
<div class="flash flash--error">This is an error message</div>
<div class="flash flash--success">This is a success message</div>

Styleguide: Flash
*/
@-webkit-keyframes flash {
  0% {
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes flash {
  0% {
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.flash {
  height: 1.5em;
  opacity: 0;
  -webkit-animation-duration: 4s;
          animation-duration: 4s;
  -webkit-animation-timing-function: ease;
          animation-timing-function: ease;
}
.flash--error {
  -webkit-animation-name: flash;
          animation-name: flash;
  color: #f75e50;
}
.flash--success {
  -webkit-animation-name: flash;
          animation-name: flash;
  color: #038b9a;
}
/*
Onboarding: Create Sticky

Onboarding users who have not created a sticky.

Markup:
<div id="onboarding">
  <div class="onboarding__create-sticky-flow">
    <div class='wrapper'>
      <div class='icon'></div>
      <div class='message'>
        <div>Double click anywhere on the board</div>
        <div>to create a new Sticky.</div>
      </div>
      <button class='dismiss button button--primary'>Ok, got it!</button>
    </div>
  </div>
</div>

Styleguide: Onboarding.CreateSticky
*/
.kss-section #onboarding {
  position: relative;
}
.kss-section #onboarding .onboarding__create-sticky-flow {
  position: inherit;
}
#onboarding {
  position: fixed;
  top: 0;
}
.onboarding__create-sticky-flow {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background-color: rgba(0, 0, 0, 0.75);
}
.onboarding__create-sticky-flow .wrapper {
  text-align: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  border: medium dashed #ffffff;
  border-radius: 5px;
  -webkit-box-shadow: 0px 3px 5px #323333;
          box-shadow: 0px 3px 5px #323333;
  padding: 88px 150px 88px 150px;
}
.onboarding__create-sticky-flow .wrapper .icon {
  background-image: url("/images/icon-cards.png");
  width: 116px;
  height: 80px;
  margin: auto;
  margin-bottom: 40px;
}
.onboarding__create-sticky-flow .wrapper .message {
  text-align: center;
  font-size: 36px;
  font-weight: lighter;
  color: #ffffff;
}
.onboarding__create-sticky-flow .wrapper .button--primary {
  margin-top: 40px;
  padding: 15px 35px 15px 35px;
  font-size: 20px;
  font-weight: lighter;
  -webkit-box-shadow: 0px 3px 5px #323333;
          box-shadow: 0px 3px 5px #323333;
}
/*
Onboarding: Create Sheet

Onboarding users who have not created a sticky.

Markup:
<div id="onboarding">
  <div class="onboarding__tooltip onboarding__create-sheet-flow">
    <div class="onboard-dot"></div>
    <div class="guide-tooltip">
      <div class="wrapper">
          <div class="message">Add a new sheet to your board here.</div>
          <button class="dismiss button button--primary">Ok, got it!</button>
      </div>
    </div>
  </div>
</div>
<br>
<br>
<br>
<br>
<br>
<br>

Styleguide: Onboarding.CreateSheet
*/
.onboarding__tooltip {
  position: absolute;
}
.onboarding__tooltip .dismiss {
  margin-top: 20px;
}
.onboard-dot {
  background-color: #f45858;
  border-radius: 100%;
  -webkit-box-shadow: inset 0px 0px 0px 1.5px #ffffff, 1px 1px rgba(0, 0, 0, 0.3);
          box-shadow: inset 0px 0px 0px 1.5px #ffffff, 1px 1px rgba(0, 0, 0, 0.3);
  width: 12px;
  height: 12px;
  position: absolute;
  -webkit-animation: pulse 1s infinite alternate ease-in;
          animation: pulse 1s infinite alternate ease-in;
  cursor: pointer;
}
.onboard-dot:hover {
  -webkit-animation: none;
          animation: none;
}
.onboard-dot--center {
  top: -30px;
  left: 194px;
}
.onboard-dot--low-left {
  top: auto;
  left: -30px;
  bottom: 29px;
}
.onboard-dot--upper-left {
  top: 28px;
  left: -30px;
}
@-webkit-keyframes pulse {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0.6;
  }
}
@keyframes pulse {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0.6;
  }
}
@-webkit-keyframes colorPulse {
  0% {
    background-color: #f45858;
  }
  100% {
    background-color: #dd4b39;
  }
}
@keyframes colorPulse {
  0% {
    background-color: #f45858;
  }
  100% {
    background-color: #dd4b39;
  }
}
/*
Onboarding: Add Collaborators

Onboarding users who have not added a collaborator

Markup:
<div id="onboarding">
  <div class="onboarding__tooltip">
    <div class="onboard-dot onboard-dot--low-left"></div>
    <div class="guide-tooltip guide-tooltip--low-left">
      <div class="wrapper">
          <div class="message">Add 'em</div>
          <button class="dismiss button button--primary">Ok, got it!</button>
      </div>
    </div>
  </div>
</div>
<br>
<br>
<br>
<br>
<br>
<br>

Styleguide: Onboarding.AddCollaborators
*/
/*
Onboarding: Drawer

Onboarding users who have not opened the drawer

Markup:
<div id="onboarding">
  <div class="onboarding__tooltip">
    <div class="onboard-dot onboard-dot--upper-left"></div>
    <div class="guide-tooltip guide-tooltip--upper-left">
      <div class="wrapper">
          <div class="message">Open it!</div>
          <button class="dismiss button button--primary">Sure will</button>
      </div>
    </div>
  </div>
</div>
<br>
<br>
<br>
<br>
<br>
<br>

Styleguide: Onboarding.Drawer
*/
/*
Collaborator List

Markup:
<div class="collaborator-list">
  <div class="collaborator-list__title">
    Collaborators (<span class="collaborator-list__count">4</span>)
  </div>
  <div class="collaborator-list__items">
    <div class="collaborator-list__item collaborator-list__item--collaborator">
      <img src="/images/avatar-ernie.jpg" class="collaborator-list__icon">
      <div class="collaborator-list__main">
        <span class="collaborator-list__name">Ernie</span>
        <span class="collaborator-list__additional-actions"></span>
      </div>
      <div class="collaborator-role-selector">
        <div class="collaborator-role-selector__current-role">
          <div class="collaborator-role-selector__current-role-name">moderator</div>
          <div class="collaborator-role-selector__menu-toggle"></div>
        </div>
        <div class="menu menu--within-manage-collaborators menu--down">
          <div class="menu__content">
            <ul class="menu__items"><li class="menu__item menu__item--active">moderator</li></ul>
          </div>
        </div>
      </div>
      <div class="collaborator-remove">
        <a class="collaborator-remove__link">×</a>
      </div>
    </div>
    <div class="collaborator-list__item collaborator-list__item--collaborator">
      <img src="/images/avatar-bert.jpg" class="collaborator-list__icon">
      <div class="collaborator-list__main">
        <span class="collaborator-list__name">Bert - selecting role</span>
        <span class="collaborator-list__additional-actions"></span>
      </div>
      <div class="collaborator-role-selector">
        <div class="collaborator-role-selector__current-role collaborator-role-selector__current-role--clicked">
          <div class="collaborator-role-selector__current-role-name">editor</div>
          <div class="collaborator-role-selector__menu-toggle"></div>
        </div>
        <div class="menu menu--within-manage-collaborators menu--down menu--open">
          <div class="menu__content">
            <ul class="menu__items"><li class="menu__item menu__item--active">moderator</li></ul>
          </div>
        </div>
      </div>
      <div class="collaborator-remove">
        <a class="collaborator-remove__link">×</a>
      </div>
    </div>
    <div class="collaborator-list__item collaborator-list__item--collaborator">
      <img src="/images/avatar-ernie.jpg" class="collaborator-list__icon">
      <div class="collaborator-list__main">
        <span class="collaborator-list__name">Ernie</span>
        <span class="collaborator-list__additional-actions"></span>
      </div>
      <div class="collaborator-role-selector">
        <div class="collaborator-role-selector__current-role">
          <div class="collaborator-role-selector__current-role-name">moderator</div>
          <div class="collaborator-role-selector__menu-toggle"></div>
        </div>
        <div class="menu menu--within-manage-collaborators menu--down">
          <div class="menu__content">
            <ul class="menu__items"><li class="menu__item menu__item--active">moderator</li></ul>
          </div>
        </div>
      </div>
      <div class="collaborator-remove">
        <a class="collaborator-remove__link">×</a>
      </div>
    </div>
    <div class="collaborator-list__item collaborator-list__item--invitee">
      <img src="/images/icons/png/envelope.png" class="collaborator-list__icon">
      <div class="collaborator-list__main">
        <span class="collaborator-list__name">ernie@sesamestreet.com</span>
        <span class="collaborator-list__additional-actions">Resend invite</span>
      </div>
      <div class="collaborator-role-selector">
        <div class="collaborator-role-selector__current-role">
          <div class="collaborator-role-selector__current-role-name">moderator</div>
          <div class="collaborator-role-selector__menu-toggle"></div>
        </div>
      </div>
      <div class="collaborator-remove">
        <a class="collaborator-remove__link">×</a>
      </div>
    </div>
    <div class="collaborator-list__item collaborator-list__item--invitee">
      <img src="/images/icons/png/envelope.png" class="collaborator-list__icon">
      <div class="collaborator-list__main">
        <span class="collaborator-list__name">ernie@sesamestreet.com - confirmation</span>
        <span class="collaborator-list__additional-actions collaborator-list__additional-actions--confirm">Sent!</span>
      </div>
      <div class="collaborator-role-selector">
        <div class="collaborator-role-selector__current-role">
          <div class="collaborator-role-selector__current-role-name">moderator</div>
          <div class="collaborator-role-selector__menu-toggle"></div>
        </div>
      </div>
      <div class="collaborator-remove">
        <a class="collaborator-remove__link">×</a>
      </div>
    </div>
  </div>
</div>

Styleguide: CollaboratorList
*/
.collaborator-list {
  display: block;
}
.collaborator-list__title {
  padding-left: 0.5rem;
  margin-bottom: 0.25rem;
}
.collaborator-list__items {
  border-top: 1px solid #e1e5e6;
  border-bottom: 1px solid #e1e5e6;
  overflow: auto;
  height: 200px;
}
.collaborator-list__item {
  border-bottom: 1px solid transparent;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  list-style: none;
  height: 40px;
}
.collaborator-list__item:hover {
  border-bottom: 1px solid #e1e5e6;
}
.collaborator-list__icon {
  width: 3rem;
  height: 2.5rem;
  padding: 0.25rem 0.5rem;
  display: inline-block;
}
.collaborator-list__main {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}
.collaborator-list__additional-actions {
  display: none;
  color: #f75e50;
  padding-left: 0.5em;
}
.collaborator-list__item--invitee .collaborator-list__icon {
  padding: 0.9rem 1rem;
}
.collaborator-list__item--invitee .collaborator-list__name {
  color: #afb2b3;
}
.collaborator-list__item--invitee .collaborator-list__additional-actions {
  display: inline-block;
  opacity: 0;
  -webkit-transition: opacity 300ms linear;
  transition: opacity 300ms linear;
  cursor: pointer;
}
.collaborator-list__item--invitee:hover .collaborator-list__additional-actions {
  opacity: 1;
}
.collaborator-list__item--invitee .collaborator-list__additional-actions--confirm {
  -webkit-animation-name: flash;
          animation-name: flash;
  -webkit-animation-duration: 4s;
          animation-duration: 4s;
  -webkit-animation-timing-function: ease;
          animation-timing-function: ease;
}
.collaborator-role-selector {
  text-align: center;
  position: relative;
}
.collaborator-role-selector__current-role {
  width: 100%;
  display: inline-block;
  height: 36px;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  border: 1px solid transparent;
  cursor: pointer;
}
.collaborator-role-selector__current-role:hover {
  border: 1px solid #e1e5e6;
}
.collaborator-role-selector__current-role--disabled {
  color: #afb2b3;
}
.collaborator-role-selector__current-role--disabled:hover {
  border: none;
  padding-right: 1px;
}
.collaborator-role-selector__current-role--disabled .collaborator-role-selector__menu-toggle {
  visibility: hidden;
}
.collaborator-role-selector__current-role-name {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}
.collaborator-role-selector__current-role-name:first-letter {
  text-transform: uppercase;
}
.collaborator-role-selector__current-role--clicked {
  border: 1px solid #e1e5e6;
  padding-right: 0px;
}
.collaborator-role-selector__current-role--clicked:hover {
  background-color: #e1e5e6;
}
.collaborator-role-selector__menu-toggle {
  background-image: url("/images/icons/arrow-down-black.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 50%;
  width: 24px;
  height: 2.5rem;
  width: 1.25rem;
  margin-right: 0.25rem;
}
.collaborator-remove {
  margin-right: 1rem;
  margin-left: 1rem;
}
.collaborator-remove--disabled {
  visibility: hidden;
}
.collaborator-remove__link {
  font-weight: bold;
  font-size: 1.5rem;
  text-decoration: none;
  cursor: pointer;
  line-height: 1.5rem;
  color: #afb2b3;
}
.collaborator-remove__link:hover {
  color: #4b4c4d;
}
/*
Collaborator List - Editor

Markup:
<div class="collaborator-list collaborator-list--editor">
  <div class="collaborator-list__title">
    Collaborators (<span class="collaborator-list__count">4</span>)
  </div>
  <div class="collaborator-list__items">
    <div class="collaborator-list__item collaborator-list__item--collaborator">
      <img src="/images/avatar-ernie.jpg" class="collaborator-list__icon">
      <div class="collaborator-list__main">
        <span class="collaborator-list__name">Ernie</span>
        <span class="collaborator-list__additional-actions"></span>
      </div>
      <div class="collaborator-role-selector">
        <div class="collaborator-role-selector__current-role">
          <div class="collaborator-role-selector__current-role-name">moderator</div>
          <div class="collaborator-role-selector__menu-toggle"></div>
        </div>
        <div class="menu menu--within-manage-collaborators menu--down">
          <div class="menu__content">
            <ul class="menu__items"><li class="menu__item menu__item--active">moderator</li></ul>
          </div>
        </div>
      </div>
      <div class="collaborator-remove">
        <a class="collaborator-remove__link">×</a>
      </div>
    </div>
    <div class="collaborator-list__item collaborator-list__item--collaborator">
      <img src="/images/avatar-bert.jpg" class="collaborator-list__icon">
      <div class="collaborator-list__main">
        <span class="collaborator-list__name">Bert - selecting role</span>
        <span class="collaborator-list__additional-actions"></span>
      </div>
      <div class="collaborator-role-selector">
        <div class="collaborator-role-selector__current-role">
          <div class="collaborator-role-selector__current-role-name">editor</div>
          <div class="collaborator-role-selector__menu-toggle"></div>
        </div>
        <div class="menu menu--within-manage-collaborators menu--down">
          <div class="menu__content">
            <ul class="menu__items"><li class="menu__item menu__item--active">moderator</li></ul>
          </div>
        </div>
      </div>
      <div class="collaborator-remove">
        <a class="collaborator-remove__link">×</a>
      </div>
    </div>
    <div class="collaborator-list__item collaborator-list__item--collaborator">
      <img src="/images/avatar-ernie.jpg" class="collaborator-list__icon">
      <div class="collaborator-list__main">
        <span class="collaborator-list__name">Ernie</span>
        <span class="collaborator-list__additional-actions"></span>
      </div>
      <div class="collaborator-role-selector">
        <div class="collaborator-role-selector__current-role">
          <div class="collaborator-role-selector__current-role-name">moderator</div>
          <div class="collaborator-role-selector__menu-toggle"></div>
        </div>
        <div class="menu menu--within-manage-collaborators menu--down">
          <div class="menu__content">
            <ul class="menu__items"><li class="menu__item menu__item--active">moderator</li></ul>
          </div>
        </div>
      </div>
      <div class="collaborator-remove">
        <a class="collaborator-remove__link">×</a>
      </div>
    </div>
    <div class="collaborator-list__item collaborator-list__item--invitee">
      <img src="/images/icons/png/envelope.png" class="collaborator-list__icon">
      <div class="collaborator-list__main">
        <span class="collaborator-list__name">ernie@sesamestreet.com</span>
        <span class="collaborator-list__additional-actions">Resend invite</span>
      </div>
      <div class="collaborator-role-selector">
        <div class="collaborator-role-selector__current-role">
          <div class="collaborator-role-selector__current-role-name">editor</div>
          <div class="collaborator-role-selector__menu-toggle"></div>
        </div>
      </div>
      <div class="collaborator-remove">
        <a class="collaborator-remove__link">×</a>
      </div>
    </div>
    <div class="collaborator-list__item collaborator-list__item--invitee">
      <img src="/images/icons/png/envelope.png" class="collaborator-list__icon">
      <div class="collaborator-list__main">
        <span class="collaborator-list__name">ernie@sesamestreet.com - confirmation</span>
        <span class="collaborator-list__additional-actions collaborator-list__additional-actions--confirm">Sent!</span>
      </div>
      <div class="collaborator-role-selector">
        <div class="collaborator-role-selector__current-role">
          <div class="collaborator-role-selector__current-role-name">editor</div>
          <div class="collaborator-role-selector__menu-toggle"></div>
        </div>
      </div>
      <div class="collaborator-remove">
        <a class="collaborator-remove__link">×</a>
      </div>
    </div>
  </div>
</div>

Styleguide: CollaboratorList.editor
*/
.collaborator-list--editor .collaborator-list__item:hover {
  border-bottom: 1px solid transparent;
}
.collaborator-list--editor .collaborator-role-selector__current-role {
  color: #afb2b3;
  cursor: default;
}
.collaborator-list--editor .collaborator-role-selector__current-role:hover {
  border: none;
}
.collaborator-list--editor .collaborator-role-selector__menu-toggle {
  visibility: hidden;
}
/*
Guide Tooltip

A bold tooltip meant for onboarding tours.

Markup:
<div class="guide-tooltip">
  <h3>Make a menu choice</h3>
  <p>Have you considered trying the steak?</p>
  <a href="#" class="button button--primary">Tasty!</a>
</div>
<br />
<br />
<div class="guide-tooltip guide-tooltip--left">
  <h3>Choose a theme!</h3>
  <a href="#" class="button button--primary">Got it!</a>
</div>
<br />
<br />
<div class="guide-tooltip guide-tooltip--low-left">
  <h3>Invite collaborators here</h3>
  <a href="#" class="button button--primary">High five!</a>
</div>
<br />
<div class="guide-tooltip guide-tooltip--upper-left">
  <h3>Invite collaborators here</h3>
  <a href="#" class="button button--primary">Sure, man!</a>
</div>

Styleguide: GuideTooltip
*/
.guide-tooltip {
  text-align: center;
  position: relative;
  background: #ffffff;
  border: 2px solid #f45858;
  border-radius: 5px;
  padding: 20px;
  width: 400px;
}
.guide-tooltip:after,
.guide-tooltip:before {
  bottom: 100%;
  left: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: rgba(255, 255, 255, 0);
}
.guide-tooltip:after {
  border-color: transparent transparent #ffffff transparent;
  border-width: 16px;
  margin: 0 0 0 -16px;
}
.guide-tooltip:before {
  border-color: transparent transparent #f45858 transparent;
  border-width: 19px;
  margin: 0 0 0 -19px;
}
.guide-tooltip--left:after,
.guide-tooltip--left:before {
  bottom: 50%;
  right: 100%;
  left: auto;
}
.guide-tooltip--left:after {
  border-color: transparent #ffffff transparent transparent;
  margin: 0 0 -13px 0;
}
.guide-tooltip--left:before {
  border-color: transparent #f45858 transparent transparent;
  margin: 0 0 -16px 0;
}
.guide-tooltip--low-left:after,
.guide-tooltip--low-left:before {
  bottom: 0%;
  right: 100%;
  left: auto;
}
.guide-tooltip--low-left:after {
  border-color: transparent #ffffff transparent transparent;
  margin: 0 0 17px 0;
}
.guide-tooltip--low-left:before {
  border-color: transparent #f45858 transparent transparent;
  margin: 0 0 14px 0;
}
.guide-tooltip--upper-left:after,
.guide-tooltip--upper-left:before {
  top: 0%;
  right: 100%;
  left: auto;
}
.guide-tooltip--upper-left:after {
  border-color: transparent #ffffff transparent transparent;
  margin: 17px 0 0 0;
}
.guide-tooltip--upper-left:before {
  border-color: transparent #f45858 transparent transparent;
  margin: 14px 0 0 0;
}
/*
Tooltips

Hover tooltips to explain important UI elements on the screen. The class names
refer to the placement of the tooltip in relation to the element its describing.
For example, `tooltip--above` should appear above the element.

Markup:
<span class="tooltip">
  Tooltip
</span>
<br>
<br>
<span class="tooltip tooltip--above">
  Above
</span>
<br>
<br>
<span class="tooltip tooltip--below">
  Below
</span>
<br>
<br>
<span class="tooltip tooltip--left">
  Left
</span>
<br>
<br>
<span class="tooltip tooltip--right">
  Right
</span>
<br>
<br>
<span class="tooltip tooltip--above-left">
  Above Left
</span>

Styleguide: Tooltips
*/
.tooltip {
  color: #ffffff;
  background-color: #4b4c4d;
  border-radius: 3pt;
  display: inline-block;
  font-family: "lexia", sans-serif;
  font-size: 0.8rem;
  padding: 10px;
}
.tooltip:after {
  border: 10px solid transparent;
  content: "";
  display: block;
  height: 0;
  position: absolute;
  width: 0;
}
.tooltip--above {
  left: 50%;
  bottom: 100%;
  margin-bottom: 15px;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
.tooltip--above:after {
  border-top-color: #4b4c4d;
  bottom: -20px;
  left: 50%;
  margin-left: -10px;
}
.tooltip--below {
  top: 100%;
  margin-top: 15px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
.tooltip--below:after {
  border-bottom-color: #4b4c4d;
  top: -20px;
  left: 50%;
  margin-left: -10px;
}
.tooltip--left {
  right: 100%;
  margin-right: 15px;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
.tooltip--left:after {
  border-left-color: #4b4c4d;
  right: -20px;
  margin-top: -10px;
  top: 50%;
}
.tooltip--right {
  left: 100%;
  margin-left: 15px;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
.tooltip--right:after {
  border-right-color: #4b4c4d;
  left: -20px;
  margin-top: -10px;
  top: 50%;
}
.tooltip--above-left {
  left: 5%;
  bottom: 100%;
  margin-bottom: 15px;
}
.tooltip--above-left:after {
  border-top-color: #4b4c4d;
  bottom: -20px;
  left: 13px;
  margin-left: -10px;
}
/*
Tooltips in context

To create the hover effect, include `span.tooltip` within a parent element
that has the class `.tooltip--parent`. The parent element must have a
`position` that is NOT `static`.

Markup:
<div class="tooltip-parent" style="background-color: red;">
  <span class="tooltip tooltip--above">
    Above
  </span>
</div>
<div class="tooltip-parent" style="background-color: red;">
  <span class="tooltip tooltip--below">
    Below
  </span>
</div>
<div class="tooltip-parent" style="background-color: red;">
  <span class="tooltip tooltip--left">
    Left
  </span>
</div>
<div class="tooltip-parent" style="background-color: red;">
  <span class="tooltip tooltip--right">
    Right
  </span>
</div>
<div class="tooltip-parent" style="background-color: red;">
  <span class="tooltip tooltip--above-left">
    Above Left
  </span>
</div>

Styleguide: Tooltips.InContext
*/
#kssref-tooltips-incontext .tooltip-parent {
  height: 30px;
  margin: 50px;
  width: 30px;
}
.tooltip-parent {
  position: relative;
}
.tooltip-parent .tooltip {
  display: none;
  position: absolute;
  z-index: 9999;
}
.tooltip-parent:hover .tooltip {
  display: inline-block;
  opacity: 1;
  -webkit-animation: tooltip-appear 0.5s linear 1;
          animation: tooltip-appear 0.5s linear 1;
}
@-webkit-keyframes tooltip-appear {
  0% {
    display: none;
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  75% {
    opacity: 1;
  }
  100% {
    display: inline-block;
  }
}
@keyframes tooltip-appear {
  0% {
    display: none;
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  75% {
    opacity: 1;
  }
  100% {
    display: inline-block;
  }
}
/**
Card Tooltip

Hover tooltip, showing card +1 avatars.

Markup:
<div class="footer card__footer">
  <div class="card__plus-one--button card__plus-one">
    <div class="card__plus-one-count">-1</div>
  </div>
  <div class="card__plus-one--static-text card__plus-one card__plus-one--hovered tooltip-parent">
    <div class="card__plus-one-count">+1</div>
    <span class="tooltip tooltip--right">
      <div class="tooltip__avatars {{modifier_class}}">
        <img class="avatar" src="/images/avatar-ernie.jpg" title="Ernie Johnson">
        <img class="avatar" src="/images/avatar-ernie.jpg" title="Ernie Johnson">
        <img class="avatar" src="/images/avatar-ernie.jpg" title="Ernie Johnson">
        <img class="avatar" src="/images/avatar-ernie.jpg" title="Ernie Johnson">
      </div>
    </span>
  </div>
</div>
<br>
<br>
<br>
<br>

.tooltip__avatars--1  - Single column
.tooltip__avatars--2  - Double column
.tooltip__avatars--3  - Triple column

Styleguide: Tooltips.CardTooltip
*/
.tooltip__avatars .avatar {
  border: 2px solid #e1e5e6;
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
  display: block;
  float: left;
  margin: 0 0.5em 0 0;
}
.tooltip__avatars--1 {
  width: 26px;
}
.tooltip__avatars--1 .avatar {
  margin-right: 0;
}
.tooltip__avatars--2 {
  width: calc(2 * 26px + 0.5em);
}
.tooltip__avatars--2 .avatar:nth-child(even) {
  margin-right: 0;
}
.tooltip__avatars--3 {
  width: calc(3 * 26px + + 2 * 0.5em);
}
.tooltip__avatars--3 .avatar {
  margin-top: 0.5em;
}
.tooltip__avatars--3 .avatar:nth-child(-n + 3) {
  margin-top: 0;
}
.tooltip__avatars--3 .avatar:nth-child(3n) {
  margin-right: 0;
}
#kssref-tooltips-cardtooltip .tooltip-parent .tooltip {
  display: inline-block;
  opacity: 1;
}
#kssref-tooltips-cardtooltip .tooltip-parent:hover .tooltip {
  -webkit-animation: none;
          animation: none;
}
.footer__padding {
  font-size: 0.8rem;
  padding-bottom: 5em;
}
.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1em 0;
  background: #f8f8f8;
  color: #7d7f80;
  font-size: 0.8rem;
  font-weight: 300;
  z-index: 2;
}
.footer__container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.footer a {
  text-decoration: none;
  color: #7d7f80;
}
.footer a:not(:first-child) {
  margin-left: 1em;
}
.contact-us__text {
  -webkit-box-flex: 2;
      -ms-flex: 2 1 auto;
          flex: 2 1 auto;
  font-family: futura-pt-bold, sans-serif;
  font-size: 32px;
  color: #312650;
  width: 10em;
  margin-bottom: auto;
  margin-top: auto;
}
@media only screen and (min-width: 992px) {
  .contact-us__text {
    margin-bottom: 0;
    margin-top: 0.2rem;
  }
}
.contact-us__button {
  margin-top: 1em;
  margin-left: 0;
  margin-bottom: auto;
  -ms-flex-item-align: start;
      align-self: flex-start;
}
@media only screen and (min-width: 992px) {
  .contact-us__button {
    margin-left: 4rem;
    margin-top: 0;
  }
}
.contact-us__banner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  padding: 3rem 12%;
  background-color: #fed147;
}
@media only screen and (min-width: 992px) {
  .contact-us__banner {
    padding: 6rem 12%;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
  }
}
.stickies-copyright__banner {
  padding: 3rem 12% 5rem 12%;
  background-color: #ff825c;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
@media only screen and (min-width: 768px) {
  .stickies-copyright__banner {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    padding: 6rem 12%;
  }
}
.stickies-copyright__logo-and-copyright {
  font-family: futura-pt, sans-serif;
  font-size: 12px;
  line-height: 15px;
  letter-spacing: 0.75px;
  text-transform: capitalize;
  -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
          order: 1;
  color: #ffffff;
}
@media only screen and (min-width: 768px) {
  .stickies-copyright__logo-and-copyright {
    -webkit-box-ordinal-group: 1;
        -ms-flex-order: 0;
            order: 0;
  }
}
.stickies-copyright__nav-container {
  margin-top: 0;
  margin-bottom: 1.5rem;
  width: 24rem;
  height: 150px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-ordinal-group: 1;
      -ms-flex-order: 0;
          order: 0;
}
@media only screen and (min-width: 768px) {
  .stickies-copyright__nav-container {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    margin-top: 2rem;
    margin-bottom: 0;
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
  }
}
@-webkit-keyframes sheet-flash {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes sheet-flash {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.sheet-flash {
  opacity: 0;
  z-index: 110000;
  position: fixed;
  left: 50vw;
  margin-top: 30px;
  -webkit-animation-timing-function: ease;
          animation-timing-function: ease;
  background: #ffffff;
  border: 1px solid #313333;
  border-radius: 3px;
  -webkit-box-shadow: 1px 1px 1px rgba(191, 191, 191, 0.8);
          box-shadow: 1px 1px 1px rgba(191, 191, 191, 0.8);
  color: #313333;
  grid-template-columns: -webkit-min-content auto;
  grid-template-columns: min-content auto;
  padding: 10px 14px 10px 10px;
  display: none;
}
.sheet-flash__icon {
  width: 21px;
  height: 21px;
  background: #313333;
}
.sheet-flash__message {
  margin-left: 5px;
  font-size: 1rem;
}
.flash--success {
  display: grid;
  -webkit-animation-name: sheet-flash;
          animation-name: sheet-flash;
}
.portal-login__or-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-top: 1rem;
  margin-bottom: 1rem;
}
.portal-login__or-line {
  width: 100%;
}
.portal-login__or-text {
  margin: 0 14px;
  margin-bottom: 6px;
}
.portal-register__or-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-top: 1rem;
  margin-bottom: 1rem;
}
.portal-register__or-line {
  width: 100%;
}
.portal-register__or-text {
  margin: 0 14px;
  margin-bottom: 6px;
}
.user-form__button-group {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.user-form__button-group-extra {
  display: none;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin-top: 1rem;
}
.user-form__extras-link {
  margin-top: 0.5rem;
  font-size: 16px;
}
.user-form__button {
  border-radius: 10px;
  font-family: futura-pt-bold, sans-serif;
  letter-spacing: 1px;
  font-size: 24px;
  margin-bottom: 1rem;
}
.user-form__button.button--secondary {
  font-size: 12px;
}
.user-form__button.button--primary#google {
  border: none;
  background: url("/images/social/sign-in-with-google.png") no-repeat center;
  width: 191px;
  height: 46px;
}
.user-form__button.button--primary#google:hover {
  background-image: url("/images/social/sign-in-with-google-hover.png");
}
.user-form__button.button--primary#google span {
  visibility: hidden;
}
.user-form__container {
  min-height: 40rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
      -ms-flex: 1 0 auto;
          flex: 1 0 auto;
  font-family: futura-pt, sans-serif;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  background-image: url(/images/backgrounds/form-rectangle.svg);
  background-repeat: no-repeat;
  background-position: bottom -93px right 0px;
  background-size: 1600px 250px;
  color: #312650;
}
@media only screen and (min-width: 992px) {
  .user-form__container {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
  }
}
@media only screen and (min-width: 1600px) {
  .user-form__container {
    background-position: bottom -210px right 0px;
    background-size: calc(2 * 1600px) calc(2 * 250px);
  }
}
.user-form__container--authenticated {
  background-image: none;
  margin-top: 154px;
}
.user-form__column {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  display: none;
}
@media only screen and (min-width: 768px) {
  .user-form__column {
    display: block;
  }
}
.user-form__main-column {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
  padding-right: 20px;
  padding-left: 20px;
}
@media only screen and (min-width: 460px) {
  .user-form__main-column {
    padding-right: 0;
    padding-left: 0;
  }
}
.user-form__headline {
  font-family: futura-pt-bold, sans-serif;
  margin-bottom: 3rem;
  margin-top: 0;
  line-height: 1em;
  font-size: 1.7rem;
  text-align: center;
  color: #312650;
}
.user-form__message {
  text-align: center;
  height: 2.5rem;
  display: none;
}
.user-form__message--error {
  color: #f45f55;
}
.user-form__message--confirmation {
  color: #3bc0dd;
}
.user-form__form {
  margin-bottom: 2rem;
}
.user-form__filler {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
.user-form__headline--accent {
  color: #3bc0dd;
}
.user-form__input-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.user-form__input-label {
  width: auto;
}
.user-form__input-sub-label {
  padding-left: 1em;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
.user-form__forgot-password {
  margin-top: 2em;
}
#index-page {
  margin-top: 44px;
}
/*
Payment layout (EXPERIMENTAL)

Styles used on experimental payment flows.
*/
.plans-footer {
  padding-top: 3rem;
  text-align: center;
}
.plans-footer a,
.plans-footer a:hover {
  text-decoration: underline;
}
.plans-footer a:hover {
  color: #e1e5e6;
}
.plans-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-flow: row nowrap;
          flex-flow: row nowrap;
  margin-top: 3rem;
}
.plan-info {
  -webkit-box-flex: 1;
      -ms-flex: 1 0;
          flex: 1 0;
  text-align: center;
  padding: 2rem 0;
}
.plan-info.popular {
  border: 2px solid #2abbe7;
  border-radius: 5px;
  -webkit-box-shadow: 0 2px 0 0 rgba(50, 51, 51, 0.2);
          box-shadow: 0 2px 0 0 rgba(50, 51, 51, 0.2);
}
.plan-info ul {
  margin: 0;
  list-style: none;
}
.plan-info li {
  padding: 0.75em;
}
.plan-info li.bold {
  font-weight: bold;
}
.plan-info i {
  height: 2rem;
  width: 2rem;
}
.plan-info .button {
  border: 2px solid white;
  color: white;
}
.plan-info .button:hover {
  border: 2px solid;
  -webkit-transition: none;
  transition: none;
}
.plan-info .amount {
  font-size: 2rem;
  display: inline;
}
.plan-info.plan-business .amount {
  color: #b8d231;
}
.plan-info.plan-business .button {
  background-color: #b8d231;
}
.plan-info.plan-business .button:hover {
  background: white;
  border-color: #b8d231;
  color: #b8d231;
}
.plan-info.plan-growth .amount {
  color: #e64845;
}
.plan-info.plan-growth .button {
  background-color: #e64845;
}
.plan-info.plan-growth .button:hover {
  background: white;
  border-color: #e64845;
  color: #e64845;
}
.plan-info.plan-startup .amount {
  color: #2abbe7;
}
.plan-info.plan-startup .button {
  background-color: #2abbe7;
}
.plan-info.plan-startup .button:hover {
  background: white;
  border-color: #2abbe7;
  color: #2abbe7;
}
.payment-layout .page-content {
  margin: 0 auto 2.5rem;
  max-width: 32rem;
}
.payment-layout .page-content--centered {
  text-align: center;
}
.payment__form {
  text-align: center;
  margin: 0 auto;
  padding-top: 1.5rem;
  border-top: 1px solid #e1e5e6;
}
.payment__form h3,
.payment__form h4 {
  font-weight: normal;
  line-height: 1.4em;
}
.payment__form form {
  text-align: left;
}
.payment__form form label {
  display: inline-block;
  text-align: left;
  font-weight: bold;
  padding-bottom: 1rem;
  width: 100%;
  padding: 1rem;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  text-indent: 0.5rem;
}
.payment__form form label.half-width {
  width: 50%;
}
.payment__form form label input {
  font-weight: normal;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 0.5rem;
  margin-top: 0.5rem;
  display: block;
  width: 100%;
  border: 1px solid #e1e5e6;
  border-radius: 3px;
  height: initial;
  background-color: white;
}
.payment__form form label input.invalid {
  border-color: #e64845;
}
.payment__form form .form-actions {
  padding: 0;
  margin: 1rem 0;
  background: none;
  border: none;
  text-align: center;
}
#modal #modal-box.payment-experiment {
  max-width: 33em;
}
.help-layout .text-hero {
  font-size: 1.2rem;
  padding-top: 3rem;
  padding-bottom: 3rem;
  margin-bottom: 0;
}
@media only screen and (min-width: 992px) {
  .help-layout .text-hero {
    font-size: 2rem;
  }
}
.help-layout__main {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.help-layout__main-content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-top: 1.1rem;
  max-width: 100rem;
}
.help-layout__main-content .page-content-help {
  -webkit-box-flex: 4;
      -ms-flex: 4 4 0%;
          flex: 4 4 0%;
  padding-left: 2rem;
  padding-right: 2rem;
  margin-bottom: 4rem;
}
@media only screen and (min-width: 992px) {
  .help-layout__main-content .page-content-help {
    font-size: 2rem;
    padding-left: 4rem;
    padding-right: 4rem;
  }
}
.help-layout__main-content .page-content-help div.section {
  font-family: "lexia", sans-serif;
  line-height: 2em;
  font-size: 1rem;
  font-weight: 200;
}
.help-layout__main-content .page-content-help div.section a.anchor {
  display: block;
  position: relative;
  top: -2.75rem;
  visibility: hidden;
}
.help-layout__main-content .page-content-help div.section h2 {
  border-bottom: 1px solid #b3b3b3;
}
.help-layout__main-content .page-content-help div.section h3 {
  margin-bottom: 0.3rem;
}
.help-layout__main-content .page-content-help div.section img {
  width: 100%;
  padding: 2rem 0;
}
.help-layout__main-content .page-content-help .green,
.help-layout__main-content .page-content-help .blue,
.help-layout__main-content .page-content-help .orange {
  font-weight: 500;
  padding: 0.3em;
}
.help-layout__main-content .page-content-help .green {
  background-color: #bed342;
}
.help-layout__main-content .page-content-help .blue {
  background-color: #3bc3e5;
}
.help-layout__main-content .page-content-help .orange {
  background-color: #f79600;
}
.help-layout__side-nav {
  display: none;
}
@media only screen and (min-width: 992px) {
  .help-layout__side-nav {
    -webkit-box-flex: 0;
        -ms-flex: 0 1 30rem;
            flex: 0 1 30rem;
    height: auto;
    -ms-flex-item-align: start;
        align-self: flex-start;
    display: block;
    position: sticky;
    top: 2.5rem;
    padding: 0 1rem;
    background-color: #f8f8f8;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 0.7rem;
  }
}
.help-layout__side-nav-links li {
  list-style: none;
  margin-top: 0.8rem;
}
.help-layout__side-nav-links li.subcategory {
  margin-left: 1rem;
  margin-top: 0.2rem;
}
.help-layout__side-nav-links li:last-of-type {
  margin-bottom: 0.8rem;
}
.help-layout__side-nav-links li a {
  font-weight: 500;
  color: #7d7f80;
  text-decoration: none;
}
.help-layout__side-nav-links li a.active {
  color: #323333;
  font-weight: 600;
}
.help-layout--redesign .text-hero {
  padding-right: 0;
  padding-left: 0;
  margin-top: 0;
  background-color: #ffffff;
}
.help-layout--redesign .text-hero__heading {
  font-family: futura-pt-bold, sans-serif;
  text-align: left;
  margin: 0 12%;
}
.help-layout--redesign .help-layout__main {
  margin: 0 12%;
}
.help-layout--redesign h2,
.help-layout--redesign h3,
.help-layout--redesign h4 {
  font-family: futura-pt-bold, sans-serif;
}
.help-layout--redesign .help-layout__main-content .page-content-help div.section {
  font-family: futura-pt, sans-serif;
}
.help-layout--redesign .help-layout__side-nav {
  font-family: futura-pt-bold, sans-serif;
  font-size: 1rem;
}
.help-layout--redesign .help-layout__side-nav .subcategory {
  font-family: futura-pt, sans-serif;
  margin-left: 1rem;
  margin-top: 0.2rem;
}
@media only screen and (min-width: 992px) {
  .help-layout--redesign .help-layout__side-nav {
    top: 0;
  }
}
.help-layout--redesign .page-content-help {
  padding-right: 0;
}
@media only screen and (min-width: 992px) {
  .help-layout--redesign .page-content-help {
    padding-right: 0;
  }
}
.legal-layout .legal-menu {
  border-bottom: 1px solid #e1e5e6;
  text-align: center;
}
.legal-layout .legal-menu__item {
  display: inline-block;
  text-decoration: none;
  margin-bottom: -1px;
  padding: 0 1em 1em;
  color: #7d7f80;
}
.legal-layout .legal-menu__item--active {
  border-bottom: 1px solid #323333;
  color: #323333;
}
.legal-layout ul {
  font-weight: 200;
  margin-left: 2em;
}
#signup-page {
  background-image: url(/images/backgrounds/sign-up.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  height: 100%;
  width: 100%;
}
#error-page {
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
#error-page .bg {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  width: 100%;
  background-image: url("/images/backgrounds/404-not-found.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top right;
}
#error-page .content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
@media only screen and (min-width: 768px) {
  #error-page .content {
    -webkit-box-shadow: 2px 2px 2px 0 rgba(50, 51, 51, 0.2);
            box-shadow: 2px 2px 2px 0 rgba(50, 51, 51, 0.2);
    padding: 0 10vw;
  }
}
#error-page .content .words {
  margin: 0 auto 20px;
  position: relative;
  padding: 0 2rem;
}
#error-page .content .words .explanation {
  color: #f75e50;
  font-size: 2rem;
  font-weight: bold;
  line-height: 1.4;
}
#error-page .content .words .recommendation {
  font-size: 1.2rem;
  font-weight: 200;
  line-height: 1.3;
}
#error-page .content .controls {
  width: 100%;
  margin: 1rem;
  padding: 0 2rem;
}
.registration__container {
  width: 100%;
}
.informational {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-bottom: 2rem;
}
.informational__icon {
  width: 51px;
  height: 51px;
  background-color: #fed147;
  background-image: url("/images/icons/light-bulb.svg");
  background-repeat: no-repeat;
  background-position: center;
}
.informational__message {
  font-size: 14px;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  margin-top: auto;
  margin-bottom: auto;
  margin-left: 1rem;
}
.form-avatar {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.form-avatar__image-container {
  margin-top: auto;
  margin-bottom: auto;
}
.form-avatar__image {
  width: 48px;
  height: 48px;
  display: block;
}
.form-avatar__message {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  margin-top: auto;
  margin-bottom: auto;
  margin-left: 1rem;
  font-size: 14px;
}
.profile-details-form {
  margin-bottom: 6rem;
}
.profile-password-form {
  margin-bottom: 20rem;
}
.home {
  position: relative;
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-flex: 1;
      -ms-flex: 1 0 auto;
          flex: 1 0 auto;
}
.home__heading {
  position: relative;
  -webkit-box-flex: 1;
      -ms-flex: 1 0 auto;
          flex: 1 0 auto;
  margin-bottom: 3rem;
}
@media only screen and (min-width: 375px) {
  .home__heading {
    margin-bottom: 8rem;
  }
}
@media only screen and (min-width: 768px) {
  .home__heading {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}
.home__heading-main {
  margin: auto;
  padding: 0 0 3rem 0;
  width: 20rem;
  font-family: futura-pt, sans-serif;
  font-size: 1.2rem;
  color: #312650;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  text-align: center;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
@media only screen and (min-width: 768px) {
  .home__heading-main {
    margin-left: 1rem;
    margin-right: 1rem;
    -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
            order: 2;
  }
}
.home__heading-character {
  height: 16rem;
  width: auto;
  position: absolute;
  top: 29rem;
}
.home__heading-character:first-of-type {
  left: -2%;
}
.home__heading-character:last-of-type {
  right: -8%;
}
@media only screen and (min-width: 460px) {
  .home__heading-character {
    height: 18rem;
  }
  .home__heading-character:last-of-type {
    right: -6%;
  }
}
@media only screen and (min-width: 768px) {
  .home__heading-character {
    height: 22.5rem;
    position: static;
    -ms-flex-item-align: end;
        align-self: flex-end;
  }
  .home__heading-character:first-of-type {
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
  }
  .home__heading-character:last-of-type {
    -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
            order: 2;
  }
}
@media only screen and (min-width: 992px) {
  .home__heading-character {
    height: 35rem;
  }
}
.home__header {
  margin-top: 0;
  font-family: futura-pt-bold, sans-serif;
  color: #312650;
}
.home__subheader {
  margin-left: 1.5rem;
  margin-right: 1.5rem;
  margin-bottom: 4rem;
  font-family: futura-pt, sans-serif;
  font-weight: normal;
  font-size: 1.2rem;
  color: #312650;
}
.home__cta {
  margin-bottom: 10rem;
}
@media only screen and (min-width: 375px) {
  .home__cta {
    margin-bottom: 7rem;
  }
}
@media only screen and (min-width: 768px) {
  .home__cta {
    margin-bottom: 4rem;
  }
}
.home__credit {
  font-size: 0.8rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 2.2rem;
  margin-bottom: 3rem;
}
.home__credit-line {
  max-width: 75%;
  margin: auto;
  margin-bottom: 0;
  -ms-flex-item-align: end;
      align-self: flex-end;
}
@media only screen and (min-width: 460px) {
  .home__credit-line {
    max-width: 100%;
  }
}
.home__heading-constellation {
  position: absolute;
  top: 0;
  background-image: url("/images/backgrounds/home-constellation-mobile-1.svg");
  background-repeat: no-repeat;
  background-size: 105% auto;
  width: 100%;
  height: 115%;
  content: " ";
  z-index: -1;
}
@media only screen and (min-width: 375px) {
  .home__heading-constellation {
    background-size: 100% auto;
  }
}
@media only screen and (min-width: 992px) {
  .home__heading-constellation {
    width: 100%;
    height: 100%;
    background-image: url("/images/backgrounds/home-constellation-desktop-1.svg");
  }
}
@media only screen and (min-width: 1200px) {
  .home__heading-constellation {
    background-size: 70rem auto;
    background-position: center;
  }
}
.home__features {
  position: relative;
  -ms-flex-item-align: stretch;
      align-self: stretch;
  -webkit-box-flex: 1;
      -ms-flex: 1 0 auto;
          flex: 1 0 auto;
  margin-bottom: 15rem;
}
@media only screen and (min-width: 375px) {
  .home__features {
    margin-bottom: 5rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}
@media only screen and (min-width: 768px) {
  .home__features {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}
.home__section-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  margin-left: 1.5rem;
  margin-right: 1.5rem;
}
@media only screen and (min-width: 768px) {
  .home__section-container {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    max-width: 50rem;
    margin: auto;
    margin-bottom: 0;
  }
}
@media only screen and (min-width: 992px) {
  .home__section-container {
    max-width: 60rem;
  }
}
@media only screen and (min-width: 768px) {
  .home__features-main {
    -webkit-box-flex: 0;
        -ms-flex: 0 1 23rem;
            flex: 0 1 23rem;
    margin-bottom: 6rem;
  }
}
.home__features-illustration {
  margin-right: 1rem;
}
@media only screen and (min-width: 375px) {
  .home__features-illustration {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -ms-flex-item-align: end;
        align-self: flex-end;
  }
}
@media only screen and (min-width: 768px) {
  .home__features-illustration {
    margin-right: 0;
    -webkit-box-flex: 0;
        -ms-flex: 0 1 23rem;
            flex: 0 1 23rem;
    -ms-flex-item-align: end;
        align-self: flex-end;
  }
}
.home__features-bulb {
  height: 7rem;
  width: auto;
  position: absolute;
  right: 4%;
  top: 27rem;
}
@media only screen and (min-width: 375px) {
  .home__features-bulb {
    position: static;
  }
}
@media only screen and (min-width: 460px) {
  .home__features-bulb {
    height: 9rem;
  }
}
@media only screen and (min-width: 768px) {
  .home__features-bulb {
    height: 13rem;
  }
}
@media only screen and (min-width: 1200px) {
  .home__features-bulb {
    height: 20rem;
  }
}
.home__features-character {
  height: 6rem;
  width: auto;
  position: absolute;
  top: 33rem;
  right: -2%;
}
@media only screen and (min-width: 375px) {
  .home__features-character {
    position: static;
  }
}
@media only screen and (min-width: 460px) {
  .home__features-character {
    height: 8rem;
  }
}
@media only screen and (min-width: 768px) {
  .home__features-character {
    height: 12rem;
  }
}
@media only screen and (min-width: 1200px) {
  .home__features-character {
    height: 18rem;
  }
}
.home__features-backing {
  position: absolute;
  width: 100%;
  height: 170%;
  top: -7rem;
  z-index: -1;
}
@media only screen and (min-width: 375px) {
  .home__features-backing {
    height: 135%;
    top: -10rem;
  }
}
@media only screen and (min-width: 768px) {
  .home__features-backing {
    height: 145%;
    top: -12rem;
  }
}
.home__feature-list {
  list-style-type: none;
}
.home__feature-list-item {
  font-family: futura-pt, sans-serif;
  color: #312650;
  list-style-type: none;
}
.home__feature-list-item-header {
  margin-bottom: 0;
  font-family: futura-pt-bold, sans-serif;
  color: #312650;
  list-style-type: none;
}
.home__retro {
  position: relative;
  -webkit-box-flex: 1;
      -ms-flex: 1 0 auto;
          flex: 1 0 auto;
  -ms-flex-item-align: stretch;
      align-self: stretch;
  margin-bottom: 8rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
@media only screen and (min-width: 768px) {
  .home__retro {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-bottom: 10rem;
  }
}
.home__retro-illustration {
  width: 100%;
  max-width: 19rem;
  -ms-flex-item-align: center;
      align-self: center;
}
@media only screen and (min-width: 768px) {
  .home__retro-illustration {
    max-width: none;
    width: auto;
    -ms-flex-item-align: start;
        align-self: flex-start;
    height: 45rem;
    -webkit-box-flex: 0;
        -ms-flex: 0 1 30rem;
            flex: 0 1 30rem;
    margin-right: 1.5rem;
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
  }
}
@media only screen and (min-width: 992px) {
  .home__retro-illustration {
    height: 50rem;
  }
}
@media only screen and (min-width: 1200px) {
  .home__retro-illustration {
    height: 60rem;
  }
}
@media only screen and (min-width: 768px) {
  .home__retro-main {
    -webkit-box-flex: 0;
        -ms-flex: 0 1 20rem;
            flex: 0 1 20rem;
    -ms-flex-item-align: end;
        align-self: flex-end;
    -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
            order: 2;
  }
}
.home__retro-constellation {
  position: absolute;
  top: 14rem;
  background-image: url("/images/backgrounds/home-constellation-mobile-2.svg");
  background-repeat: no-repeat;
  background-size: 100% 64%;
  width: 100%;
  height: 100vh;
  content: " ";
  z-index: -1;
}
@media only screen and (min-width: 768px) {
  .home__retro-constellation {
    top: -8rem;
    background-image: url("/images/backgrounds/home-constellation-desktop-2.svg");
  }
}
@media only screen and (min-width: 1200px) {
  .home__retro-constellation {
    top: -31rem;
    background-size: 70rem auto;
    background-position: center;
  }
}
.home__story {
  position: relative;
  -webkit-box-flex: 1;
      -ms-flex: 1 0 auto;
          flex: 1 0 auto;
  -ms-flex-item-align: stretch;
      align-self: stretch;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
@media only screen and (min-width: 768px) {
  .home__story {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}
@media only screen and (min-width: 768px) {
  .home__story-main {
    -webkit-box-flex: 0;
        -ms-flex: 0 1 23rem;
            flex: 0 1 23rem;
  }
}
.home__story-graph {
  font-family: futura-pt, sans-serif;
  color: #312650;
}
.home__story-illustration {
  margin-right: 1rem;
  height: 15rem;
  width: auto;
}
@media only screen and (min-width: 375px) {
  .home__story-illustration {
    -ms-flex-item-align: center;
        align-self: center;
  }
}
@media only screen and (min-width: 460px) {
  .home__story-illustration {
    height: 20rem;
  }
}
@media only screen and (min-width: 768px) {
  .home__story-illustration {
    margin-right: 0;
    -ms-flex-item-align: end;
        align-self: flex-end;
    height: 25rem;
    -webkit-box-flex: 0;
        -ms-flex: 0 1 23rem;
            flex: 0 1 23rem;
  }
}
@media only screen and (min-width: 1200px) {
  .home__story-illustration {
    height: 38rem;
  }
}
.home__story-backing {
  position: absolute;
  width: 100%;
  height: 120%;
  top: -5rem;
  z-index: -1;
}
.home__story-constellation {
  display: none;
}
@media only screen and (min-width: 768px) {
  .home__story-constellation {
    display: inline;
    position: absolute;
    top: -8rem;
    background-image: url("/images/backgrounds/home-constellation-mobile-2.svg");
    background-repeat: no-repeat;
    background-size: 100% auto;
    width: 100%;
    height: 150%;
    content: " ";
    z-index: -1;
    background-image: url("/images/backgrounds/home-constellation-desktop-3.svg");
  }
}
@media only screen and (min-width: 1200px) {
  .home__story-constellation {
    top: -19rem;
    background-size: 70rem auto;
    background-position: center;
  }
}
.features {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  padding: 0 10% 26% 12%;
  background-image: url("/images/sticky-column.svg");
  background-repeat: space no-repeat;
  background-position: bottom;
  background-size: 6.25%;
}
@media only screen and (min-width: 768px) {
  .features {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    background-size: auto;
    padding-bottom: 15rem;
  }
}
.features__section-main {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
@media only screen and (min-width: 768px) {
  .features__section-main {
    -webkit-box-flex: 0;
        -ms-flex: 0 1 45%;
            flex: 0 1 45%;
  }
}
.features__header {
  font-family: futura-pt-bold, sans-serif;
  margin-top: 0;
  font-size: 2rem;
  line-height: 1.2;
}
@media only screen and (min-width: 768px) {
  .features__header {
    font-size: 3.125rem;
  }
}
.features__subheader {
  font-family: futura-pt-bold, sans-serif;
  font-size: 1.375rem;
}
@media only screen and (min-width: 768px) {
  .features__subheader {
    font-size: 2rem;
  }
}
.features__body {
  font-family: futura-pt, sans-serif;
  font-size: 1.125rem;
  color: #312650;
}
@media only screen and (min-width: 768px) {
  .features__body {
    font-size: 1.5rem;
    margin: 0;
  }
}
.features__section-board {
  max-width: 35.5rem;
  margin-bottom: 3.375rem;
  position: relative;
}
@media only screen and (min-width: 768px) {
  .features__section-board {
    margin-bottom: 0;
    margin-left: auto;
    -webkit-box-flex: 0;
        -ms-flex: 0 1 45%;
            flex: 0 1 45%;
    -ms-flex-item-align: end;
        align-self: flex-end;
  }
}
.sticky-tip {
  position: absolute;
}
.sticky-tip .tip-dot {
  position: relative;
  width: 1.6rem;
  height: 1.6rem;
  line-height: 1.6rem;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  border-radius: 50%;
  background-color: #323333;
  font-size: 0.9rem;
  color: #ffffff;
  text-align: center;
  z-index: 1;
}
.sticky-tip .tip-dot:hover {
  width: 2rem;
  height: 2rem;
  line-height: 2rem;
  background-color: #f45858;
  cursor: default;
}
.sticky-tip .tip-note {
  position: relative;
  display: none;
  width: 10rem;
  height: 10rem;
  -webkit-transform: translate(-1.5rem, -1rem);
          transform: translate(-1.5rem, -1rem);
  margin-top: 0.5rem;
  padding: 0.3rem;
  color: #323333;
  font-size: 0.7rem;
  background-color: #ffd506;
  -webkit-box-shadow: 2px 2px 8px #7d7f80;
          box-shadow: 2px 2px 8px #7d7f80;
  z-index: 2;
}
.sticky-tip .tip-dot:hover + .tip-note {
  display: block;
}
.tip-1 {
  top: 4%;
  left: 43%;
}
.tip-2 {
  top: 11%;
  left: 3%;
}
.tip-3 {
  top: 18%;
  left: 80%;
}
.tip-4 {
  top: 39%;
  left: 15%;
}
.tip-5 {
  top: 69%;
  left: 50%;
}
.features__board {
  width: 100%;
  height: auto;
}
.features__section-button {
  margin-bottom: 1.25rem;
}
@media only screen and (min-width: 768px) {
  .features__section-button {
    width: 50%;
  }
}
.features__section-characters {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}
@media only screen and (min-width: 768px) {
  .features__section-characters {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 50%;
            flex: 0 0 50%;
    padding-top: 5.12rem;
  }
}
.features__character-larry {
  height: auto;
  -ms-flex-preferred-size: 25%;
      flex-basis: 25%;
}
@media only screen and (min-width: 768px) {
  .features__character-larry {
    -webkit-box-flex: 0;
        -ms-flex: 0 1 13.81rem;
            flex: 0 1 13.81rem;
  }
}
.character__larry {
  width: 100%;
  height: auto;
}
.features__character-megan {
  height: auto;
  margin-right: 3.75rem;
  -ms-flex-preferred-size: 21%;
      flex-basis: 21%;
}
@media only screen and (min-width: 768px) {
  .features__character-megan {
    -webkit-box-flex: 0;
        -ms-flex: 0 1 12.18rem;
            flex: 0 1 12.18rem;
  }
}
.character__megan {
  width: 100%;
  height: auto;
}
#feature-video {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 630px;
  margin: 50px 0;
}
/*
Modal Dialogs (Legacy)

Markup:
<div id="modal"><div id="modal-container">
  <div id="modal-backdrop">
  </div>
  <div id="modal-box">
    <a class="close-button visible">×</a>
    <div class="title">Cool you found something new!</div>
    <div class="message">Private boards are a paid feature. Want to upgrade?</div>
    <ul class="buttons"><li><button class="button action a_upgrade-plan" data-index="0">Upgrade</button></li></ul>
  </div>
</div></div>

Styleguide: LegacyModal
*/
#kssref-legacymodal {
  position: relative;
}
#kssref-legacymodal #modal #modal-container,
#kssref-legacymodal #modal #modal-backdrop {
  position: absolute;
}
#modal #modal-container,
#modal #modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999999;
}
#modal #modal-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  z-index: 400000;
}
#modal #modal-backdrop {
  background: rgba(0, 0, 0, 0.2);
  z-index: -1;
}
#modal #modal-box {
  position: relative;
  max-width: 30em;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.2);
  padding: 2rem;
  color: #4b4c4d;
  text-align: center;
  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
          box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}
#modal #modal-box .close-button {
  position: absolute;
  top: 0.5rem;
  right: 0.75rem;
  font-weight: bold;
  font-size: 1.5rem;
  text-decoration: none;
  cursor: pointer;
  display: none;
  line-height: 1.5rem;
  color: #afb2b3;
}
#modal #modal-box .close-button:hover {
  color: #4b4c4d;
}
#modal #modal-box .close-button.visible {
  display: block;
}
#modal #modal-box .title {
  font-size: 1.2rem;
  line-height: 1.2em;
  padding: 11px 19px;
}
#modal #modal-box .message {
  padding: 11px 19px;
  padding-top: 0;
}
#modal #modal-box .message:empty {
  display: none;
}
#modal #modal-box select {
  border: none;
  background-color: #ffffff;
  width: 100%;
  outline: none;
  padding: 2px;
  border-radius: 0;
}
#modal #modal-box select option {
  padding: 11px 19px;
  background-color: #ffffff;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
#modal #modal-box select option:first-child {
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}
#modal #modal-box select option:hover {
  outline: 2px solid #f75e50;
  border-color: transparent;
}
#modal #modal-box select option:checked {
  outline: none;
}
#modal #modal-box .buttons {
  padding: 11px 19px;
  padding-bottom: 0;
  margin: 0;
}
#modal #modal-box .buttons li {
  display: inline-block;
  padding: 0.25em 0;
}
#modal #modal-box .buttons li:nth-child(n + 2) {
  padding-left: 1em;
}
#modal #modal-box .buttons li:last-child button {
  margin-right: 0;
}
#modal #modal-box .buttons button.button {
  background-color: #ffffff;
  border: 1pt solid #4b4c4d;
  color: #4b4c4d;
  text-decoration: none;
  display: inline-block;
  padding-top: 0.5rem;
  padding-right: 1rem;
  padding-bottom: 0.5rem;
  padding-left: 1rem;
  border-radius: 3pt;
  font-size: 1rem;
  cursor: pointer;
  -webkit-transition: border-color 0.1s, background-color 0.1s, color 0.1s;
  transition: border-color 0.1s, background-color 0.1s, color 0.1s;
  padding: 0.75em 3em;
  margin-right: 1em;
}
#modal #modal-box .buttons button.button:hover {
  background-color: #4b4c4d;
  color: #ffffff;
}
#modal #modal-box .buttons button.button:hover[disabled] {
  background-color: #ffffff;
  color: #4b4c4d;
}
#modal #modal-box .buttons button.button[disabled] {
  opacity: 0.75;
}
#modal #modal-box .buttons button.button[disabled] {
  cursor: not-allowed;
}
#modal #modal-box .buttons button.normal {
  background-color: transparent;
  color: #7d7f80;
  border-color: #7d7f80;
}
#modal #modal-box .buttons button.normal:hover {
  background-color: #7d7f80;
  color: #ffffff;
}
#modal #modal-box .buttons button.action {
  background-color: #f75e50;
  border: 1pt solid #f75e50;
  color: #ffffff;
  text-decoration: none;
}
#modal #modal-box .buttons button.action:hover {
  background-color: #ffffff;
  color: #f75e50;
}
#modal #modal-box .buttons button.action:hover[disabled] {
  background-color: #f75e50;
  color: #ffffff;
}
#modal #modal-box .buttons button.action[disabled] {
  opacity: 0.75;
}
/*
Card

The illustrious card of Stickies fame.

color-0 - Red
color-1 - Orange
color-2 - Yellow
color-3 - Green
color-4 - Blue
color-5 - Pink
color-6 - Gray

Markup:
<div class="card {{modifier_class}} draggable mine" creator="5644e29a695bbc758025d965" style="touch-action: pan-y; -webkit-user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); z-index: auto;">
  <div class="header-bar">
    <span class="delete-btn">×</span>
    <span class="notice" style="display: none"></span>
  </div>
  <div class="content">
    <div class="viewable" style="height: auto; z-index: 31;">Welcome to your virtual whiteboard!<br>
      Drag notes onto one another to create a group.
    </div>
    <textarea class="editable" style="height: 50px; z-index: 29;"></textarea>
  </div>
  <div class="card__footer">
    <div class="card__authors">
      <img class="avatar" src="/images/avatar-ernie.jpg" title="Ernie Johnson">
      <img class="avatar" src="/images/avatar-bert.jpg" title="Bert Bacharach">
    </div>
    <div class="card__colors">
      <span class="color card__color color-0"></span>
      <span class="color card__color color-1"></span>
      <span class="color card__color color-2"></span>
      <span class="color card__color color-3"></span>
      <span class="color card__color color-4"></span>
    </div>
    <div class="card__plus-one--button card__plus-one">
      <div class="card__plus-one-count">+1</div>
    </div>
    <div class="card__plus-one--static-text card__plus-one tooltip-parent" style="display: none;">
      <div class="count"></div>
      <span class="tooltip tooltip--right">
        <div class="tooltip__avatars">
        </div>
      </span>
    </div>
  </div>
</div>

Styleguide: Card
*/
/**
Card with a +1

Markup:
<div id="564a30c9d99634000ac30e97" class="card color-2 draggable mine" creator="5644e29a695bbc758025d965" style="touch-action: pan-y; -webkit-user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); overflow: hidden;">
  <div class="header-bar">
    <span class="delete-btn">×</span>
    <span class="notice" style="display: none"></span>
  </div>
  <div class="content">
    <div class="viewable" style="height: auto; z-index: 31;">🔏 </div>
    <textarea class="editable" style="height: 16px; z-index: 29;"></textarea>
  </div>
  <div class="footer card__footer">
    <div class="card__authors"><img class="avatar" src="/images/avatar-ernie.jpg" title="Ernie Johnson"></div>
    <div class="card__colors">
      <span class="color card__color color-0"></span>
      <span class="color card__color color-1"></span>
      <span class="color card__color color-2"></span>
      <span class="color card__color color-3"></span>
      <span class="color card__color color-4"></span>
    </div>
    <div class="card__plus-one--button card__plus-one">
      <div class="card__plus-one-count">-1</div>
    </div>
    <div class="card__plus-one--static-text card__plus-one tooltip-parent">
      <div class="card__plus-one-count">+1</div>
      <span class="tooltip tooltip--right">
        <div class="tooltip__avatars">
          <img class="avatar" src="/images/avatar-ernie.jpg" title="Ernie Johnson">
        </div>
      </span>
    </div>
  </div>
</div>

Styleguide: Card.PlusOne
*/
.card {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  position: relative;
  cursor: move;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.card.draggable {
  top: 0;
  left: 0;
  -webkit-transition: top 0.5s, left 0.5s;
  transition: top 0.5s, left 0.5s;
}
.card.draggable.being-dragged {
  cursor: not-allowed;
}
.card.draggable.dragging,
.card.draggable.dropping {
  -webkit-transition: none;
  transition: none;
}
.card .header-bar {
  width: 100%;
  height: 20px;
  font-size: 14px;
  line-height: 22px;
}
.card .header-bar .notice {
  position: relative;
  top: 0;
  float: right;
  height: 14px;
  padding: 4px;
  text-align: left;
  width: 85%;
  text-align: center;
  margin: 0 auto;
}
.card .header-bar .notice .avatar {
  vertical-align: top;
  width: 14px;
  height: 14px;
}
.card .header-bar .notice span {
  margin-left: 5px;
  vertical-align: super;
  line-height: 14px;
  font-size: 12px;
}
.card .header-bar .title {
  float: left;
  padding: 4px;
  padding: 6px;
}
.card .header-bar .delete-btn {
  font-size: 1.1rem;
  float: right;
  padding-top: 0.15rem;
  padding-right: 0.4rem;
  line-height: 18px;
  cursor: pointer;
  color: rgba(0, 0, 0, 0.2);
  font-weight: 600;
}
.card .header-bar .delete-btn:hover {
  color: #d80e0e;
}
.card .content {
  position: relative;
  background-color: inherit;
}
.card .content:hover {
  background: rgba(255, 255, 255, 0.1);
}
.card .content .viewable,
.card .content .editable {
  overflow-y: visible;
  font-size: 14px;
  line-height: 16px;
  min-height: 24px;
  padding: 2px 4px 2px 4px;
  margin: 0px 4px;
  text-rendering: optimizeLegibility;
  border: none;
  background-color: inherit;
  outline: none;
  resize: none;
  width: 255px;
  color: #4b4c4d;
  -webkit-user-select: text;
     -moz-user-select: text;
      -ms-user-select: text;
          user-select: text;
}
.card .content .viewable {
  position: relative;
  overflow-wrap: break-word;
  word-wrap: break-word;
  pointer-events: none;
}
.card .content .viewable a {
  pointer-events: auto;
}
.card .content .viewable a:hover {
  color: inherit;
}
.card .content .viewable hr {
  margin: 10px 10px -10px 10px;
  border-top: 1px solid #4b4c4d;
  border-bottom: 0;
}
.card .content .editable {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  position: absolute;
  top: 0;
  left: 0;
}
.card.dragging {
  -webkit-box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.05);
          box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.05);
}
.card.lolite {
  opacity: 0.25;
}
.card.color-4 .editable::-moz-selection {
  background: khaki;
}
.card.color-4 .editable::selection {
  background: khaki;
}
.card.color-4 .editable::-moz-selection {
  background: khaki;
}
/**
Card state: editing

Markup:
<div class="card card--editing color-2" style="height: 100px">
  <div class="header-bar">
    <span class="delete-btn">×</span>
  </div>
  <div class="content">
    <div class="viewable" style="height: auto; z-index: 29;">
      Drag notes onto one another to create a group.
    </div>
    <textarea class="editable" style="height: 40px; z-index: 31;">
      Drag notes onto one another to create a group.
    </textarea>
  </div>
</div>

Styleguide: Card.StateEditing
*/
.content:hover .viewable {
  opacity: 1;
}
.content:hover .editable {
  opacity: 0;
}
.card--editing {
  -webkit-box-shadow: 0 0 2px 3px #61aadb;
          box-shadow: 0 0 2px 3px #61aadb;
}
.card--editing .content:hover .viewable {
  opacity: 0;
}
.card--editing .content:hover .editable {
  opacity: 1;
}
/*
Card state: Blurred

Markup:
<div class="sheet--state-blur">
<div class="card color-2 draggable" creator="5644e29a695bbc758025d965" style="touch-action: pan-y; -webkit-user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); z-index: auto;">
  <div class="header-bar">
    <span class="delete-btn">×</span>
    <span class="notice" style="display: none"></span>
  </div>
  <div class="content">
    <div class="viewable" style="height: auto; z-index: 31;">Welcome to your virtual whiteboard!<br>
      Drag notes onto one another to create a group.
    </div>
    <textarea class="editable" style="height: 50px; z-index: 29;"></textarea>
  </div>
  <div class="card__footer">
    <div class="card__authors">
      <img class="avatar" src="/images/avatar-ernie.jpg" title="Ernie Johnson">
      <img class="avatar" src="/images/avatar-bert.jpg" title="Bert Bacharach">
    </div>
    <div class="card__colors">
      <span class="color card__color color-0"></span>
      <span class="color card__color color-1"></span>
      <span class="color card__color color-2"></span>
      <span class="color card__color color-3"></span>
      <span class="color card__color color-4"></span>
    </div>
    <div class="card__plus-one--button card__plus-one">
      <div class="card__plus-one-count">+1</div>
    </div>
    <div class="card__plus-one--static-text card__plus-one tooltip-parent" style="display: none;">
      <div class="count"></div>
      <span class="tooltip tooltip--right">
        <div class="tooltip__avatars">
        </div>
      </span>
    </div>
  </div>
</div>
</div>

Styleguide: Card.Blurred
*/
/* Blurred cards */
.sheet--state-blur .card .content * {
  text-shadow: 0 0 8px #000;
  color: rgba(255, 255, 255, 0);
  filter: "DXImageTransform.Microsoft.Blur(pixelradius=2)";
  zoom: 1;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.sheet--state-blur .card:not(.mine) {
  opacity: 0.35;
  background-color: #afb2b3;
}
.sheet--state-blur .card.mine {
  opacity: 1;
}
.sheet--state-blur .card.mine .content * {
  text-shadow: none;
  color: #4b4c4d;
  -webkit-filter: none;
          filter: none;
  -webkit-user-select: text;
     -moz-user-select: text;
      -ms-user-select: text;
          user-select: text;
}
.card__footer {
  padding: 0.25rem 0.25rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.card__authors {
  -webkit-box-flex: 1.25;
      -ms-flex: 1.25;
          flex: 1.25;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
.card__colors {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
.card__plus-one {
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
.card__plus-one-count {
  font-family: Menlo, monospace;
  line-height: 1;
  padding-top: 0.3em;
  padding-right: 0.4em;
  padding-bottom: 0.2em;
  padding-left: 0.2rem;
  font-size: 0.7rem;
}
.card__color {
  -webkit-box-flex: 0;
      -ms-flex-positive: 0;
          flex-grow: 0;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  -ms-flex-preferred-size: 12px;
      flex-basis: 12px;
  margin-left: 0.15rem;
  height: 12px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  cursor: pointer;
}
.card__plus-one--button .card__plus-one-count {
  cursor: pointer;
  background: rgba(255, 255, 255, 0.5);
}
.card__plus-one--static-text:hover .card__plus-one-count,
.card__plus-one--static-text.card__plus-one--hovered .card__plus-one-count {
  background: rgba(125, 127, 128, 0.8);
  color: #ffffff;
}
/**
Card Behavior: Revealing Actions on Hover

On hover, the card should reveal the action controls.

Markup:
<div id="564a30c9d99634000ac30e97" class="card card--reveal-actions-on-hover color-2 draggable mine" creator="5644e29a695bbc758025d965" style="touch-action: pan-y; -webkit-user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); overflow: visible;">
  <div class="header-bar">
    <span class="delete-btn">×</span>
    <span class="notice" style="display: none"></span>
  </div>
  <div class="content">
    <div class="viewable" style="height: auto; z-index: 31;">🔏 </div>
    <textarea class="editable" style="height: 16px; z-index: 29;"></textarea>
  </div>
  <div class="footer card__footer">
    <div class="card__authors"><img class="avatar" src="/images/avatar-ernie.jpg" title="Ernie Johnson"></div>
    <div class="card__colors">
      <span class="color card__color color-0"></span>
      <span class="color card__color color-1"></span>
      <span class="color card__color color-2"></span>
      <span class="color card__color color-3"></span>
      <span class="color card__color color-4"></span>
    </div>
    <div class="card__plus-one--button card__plus-one">
      <div class="card__plus-one-count">-1</div>
    </div>
    <div class="card__plus-one--static-text card__plus-one tooltip-parent">
      <div class="card__plus-one-count">+1</div>
      <span class="tooltip tooltip--right">
        <div class="tooltip__avatars">
          <img class="avatar" src="/images/avatar-ernie.jpg" title="Ernie Johnson">
        </div>
      </span>
    </div>
  </div>
</div>

Styleguide: Card.RevealActionsOnHover
*/
.card--reveal-actions-on-hover {
  border: 2px solid transparent;
}
.card--reveal-actions-on-hover .card__action {
  opacity: 0;
  -webkit-transition: opacity 0.1s ease-in-out;
  transition: opacity 0.1s ease-in-out;
}
.card--reveal-actions-on-hover:hover {
  border: 2px solid rgba(0, 0, 0, 0.25);
}
.card--reveal-actions-on-hover:hover .card__action {
  opacity: 1;
}
.card__selected--self,
.card__selected--self:hover {
  border: 2px solid black;
}
/*
 * Card colors
 * - color-1
 * - color-2
 * - color-3
 * - color-4
 *
 * Markup:
 * <div class=""></div>
 *
 * Styleguide: Card.Colors
 */
.card__plus-one--button .btn {
  background-color: rgba(255, 255, 255, 0.4);
}
.card__plus-one--button .btn:hover {
  background-color: rgba(255, 255, 255, 0.6);
}
.card.color-0 .delete {
  color: #cf413e;
  background-color: #e64845;
}
.red,
.red .light {
  background-color: #e95b58;
}
.red .mid,
.color-0 {
  background-color: #e64845;
}
.red .dark {
  background-color: #cf413e;
}
.card.color-1 .delete {
  color: #e29000;
  background-color: #fca000;
}
.tan,
.tan .light {
  background-color: #fcaa1a;
}
.tan .mid,
.color-1 {
  background-color: #fca000;
}
.tan .dark {
  background-color: #e29000;
}
.card.color-2 .delete {
  color: #e1c300;
  background-color: #fad900;
}
.yellow,
.yellow .light {
  background-color: #fce44d;
}
.yellow .mid,
.color-2 {
  background-color: #fad900;
}
.yellow .dark {
  background-color: #e1c300;
}
.card.color-3 .delete {
  color: #a5bd2c;
  background-color: #b8d231;
}
.green,
.green .light {
  background-color: #cde06f;
}
.green .mid,
.color-3 {
  background-color: #b8d231;
}
.green .dark {
  background-color: #a5bd2c;
}
.card.color-4 .delete {
  color: #26a8cf;
  background-color: #2abbe7;
}
.blue,
.blue .light {
  background-color: #6ad0ee;
}
.blue .mid,
.color-4 {
  background-color: #2abbe7;
}
.blue .dark {
  background-color: #26a8cf;
}
.card.color-5 .delete {
  color: #dd5db5;
  background-color: #f668ca;
}
.pink,
.pink .light {
  background-color: #f996da;
}
.pink .mid,
.color-5 {
  background-color: #f668ca;
}
.pink .pink {
  background-color: #dd5db5;
  color: #f996da;
}
.card.color-6 .delete {
  color: #383a3d;
  background-color: #b3b3b3;
}
.gray,
.gray .light {
  background-color: #e6e6e6;
}
.gray .mid,
.color-6 {
  background-color: #b3b3b3;
}
.gray .dark {
  background-color: #383a3d;
  color: #e6e6e6;
}
.i-like {
  background-color: #b8d231;
}
.i-wish {
  background-color: #fca000;
}
.we-will {
  background-color: #2abbe7;
}
.card.i-wish:hover .card__colors,
.card.i-like:hover .card__colors,
.card.we-will:hover .card__colors {
  display: none;
}
/*
Modal Dialog For Manage Collaborators (Legacy)

Markup:
<div id="modal">
  <div id="modal-container">
    <div id="modal-backdrop">
    </div>
    <div id="modal-box" class="modal-box--manage-collaborators">
      <a class="close-button visible">×</a>
      <div class="title">Manage Collaborators</div>
      <div class="message">Set who can participate and lead meetings on this board.</div>
      <ul class="buttons"></ul>
      <div class='body'>
        <div class='send-invites'>
          <div class='form__group'>
            <input class='form__control invitation-email' placeholder='Add user...'>
            <div class="collaborator-role-selector collaborator-role-selector--manage">
              <div class="collaborator-role-selector__current-role collaborator-role-selector__current-role--manage">
                <div class="collaborator-role-selector__current-role-name collaborator-role-selector__current-role-name--manage">moderator</div>
                <div class="collaborator-role-selector__menu-toggle"></div>
              </div>
              <div class="menu menu--within-manage-collaborators menu--down menu--open">
                <div class="menu__content">
                  <ul class="menu__items"><li class="menu__item menu__item--active menu__item--manage">editor</li></ul>
                </div>
              </div>
            </div>
            <button class='form__button button--primary send-email'>Send</button>
            <div class='invitation-feedback'>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Styleguide: ManageCollaborators
*/
#kssref-managecollaborators .kss-modifier__example {
  height: 500px;
}
#kssref-managecollaborators .kss-modifier__example #modal {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}
#kssref-managecollaborators .kss-modifier__example #modal #modal-container,
#kssref-managecollaborators .kss-modifier__example #modal #modal-backdrop {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}
#modal #modal-box.modal-box--manage-collaborators {
  text-align: left;
  max-width: 60em;
  min-width: 40em;
}
#modal #modal-box.modal-box--manage-collaborators .title {
  font-size: 2rem;
  font-weight: bold;
}
#modal #modal-box.modal-box--manage-collaborators .message {
  margin-bottom: 1em;
}
#modal #modal-box.modal-box--manage-collaborators .body {
  padding: 11px 19px;
}
#modal #modal-box.modal-box--manage-collaborators .body .send-invites {
  width: 100%;
}
#modal #modal-box.modal-box--manage-collaborators .body .send-invites .collaborator-role-selector__current-role--manage {
  border: none;
  border-top-right-radius: 3pt;
}
#modal #modal-box.modal-box--manage-collaborators .body .send-invites .collaborator-role-selector__current-role--manage:hover {
  border: none;
}
#modal #modal-box.modal-box--manage-collaborators .body .send-invites .collaborator-role-selector__current-role--manage,
#modal #modal-box.modal-box--manage-collaborators .body .send-invites .menu__item--manage {
  height: 100%;
  padding: 0.38em;
}
#modal #modal-box.modal-box--manage-collaborators .body .send-invites button {
  height: 3.5em;
  padding: 1em 0.5em;
}
#modal #modal-box.modal-box--manage-collaborators .body .invitation-feedback {
  clear: left;
  margin-top: 0.5rem;
  margin-bottom: 0.5em;
}
.menu--within-manage-collaborators {
  z-index: 99999;
  width: 100%;
}
.menu--within-manage-collaborators .menu__item {
  width: 100%;
  text-align: center;
  padding-top: 0px;
  padding-bottom: 0px;
  line-height: 36px;
  height: 36px;
  vertical-align: middle;
  font-size: 1rem;
  font-weight: normal;
  padding-left: 0;
  padding-right: 1.5rem;
}
.form__group--flex {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.add-collaborator__container {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  border-radius: 3pt;
  border: 1px solid #afb2b3;
  display: grid;
  width: 100%;
  margin-right: 1em;
  grid-template-columns: auto 124px;
  min-height: 3.5em;
  padding: 1px;
}
.add-collaborator__container--focus {
  border: 2px solid #85c5cb;
  padding: 0;
}
.invitation-email__container {
  padding: 0.5em 0.5em 0.5em 0.5em;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}
.invitation-email__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.invitation-email__pill {
  border: 1px solid #afb2b3;
  border-radius: 3pt;
  display: grid;
  grid-template-columns: 20px auto;
  margin-bottom: 0.5em;
  margin-right: 0.5em;
}
.invitation-email__pill-remove {
  text-align: center;
  cursor: pointer;
  font-weight: bold;
  font-size: 1.5rem;
  line-height: 1.5rem;
}
.invitation-email__pill-remove:hover {
  background-color: #f75e50;
  color: white;
}
.invitation-email__pill-email {
  overflow: hidden;
  padding: 0 0.5em 0 0.25em;
  text-overflow: ellipsis;
}
.invitation-email__pill--invalid {
  color: #f75e50;
  border-color: #f75e50;
}
.invitation-email__input {
  font-size: 1rem;
  width: 100%;
}
.invitation-email__input:focus {
  outline: none;
}
.send-email:focus {
  outline: none;
}


/*# sourceMappingURL=stickies.css.map*/