/*
 * The root styling for a dialog page.
 */
/* GENERAL COLORS */
/* VISUAL REDESIGN COLORS TODO#VisualRedesign: put in separate file and import */
/*bgrays are now defined per theme but left in here for reference
$bgray1: #1A232E;
$bgray2: #212F40;
$bgray3: #434C56;
$bgray4: #596573;
$bgray5: #6E7E91;
$bgray6: #9CACBC;
$bgray7: #AFBCC8;
$bgray8: #C0CCD7;
$bgray9: #CED7E0;
$bgray10: #DDE4EA;
$bgray11: #ECF0F3;
$bgray12: #F5F9FC; */
/* SEMANTIC COLOR NAMES - these are repeats of the general colors to make it easier to write the css*/
/* FONT WEIGHTS */
/***
*  Animations
***/
@-webkit-keyframes fadeout {
  0% {
    opacity: 1; }
  100% {
    opacity: 0; } }
@-moz-keyframes fadeout {
  0% {
    opacity: 1; }
  100% {
    opacity: 0; } }
@keyframes fadeout {
  0% {
    opacity: 1; }
  100% {
    opacity: 0; } }
@-webkit-keyframes reset-opacity {
  0% {
    opacity: 0; }
  100% {
    opacity: 0; } }
@-moz-keyframes reset-opacity {
  0% {
    opacity: 0; }
  100% {
    opacity: 0; } }
@keyframes reset-opacity {
  0% {
    opacity: 0; }
  100% {
    opacity: 0; } }
@-webkit-keyframes fade-in {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
@-moz-keyframes fade-in {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
@keyframes fade-in {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
@-webkit-keyframes grow-1-to-3_5 {
  0% {
    max-height: 1em; }
  100% {
    max-height: 3.5em; } }
@-moz-keyframes grow-1-to-3_5 {
  0% {
    max-height: 1em; }
  100% {
    max-height: 3.5em; } }
@keyframes grow-1-to-3_5 {
  0% {
    max-height: 1em; }
  100% {
    max-height: 3.5em; } }
/**
 * Give the element a background image starting at ($x, $y) of the sprite image.
 * On hover, use the same background image, but move 100px to the right in the
 * sprite.
 *
 * (Note that the argument order is ($y, $x) to support of $x's default value.)
 */
/**
 * To create an icon, just include this mixin with its coordinates/dimensions in
 * the sprite.
 */
/**
 * Common icons
 */
/** notification box, to get someones attention in a dialog or pane **/
/**
* how we create a line that is centered behind the text title
**/
/** DEPRECATED x icons
 * Elements with this mixin should also contain an empty div with class
 * "delete".  When the (parent) element is hovered, the .delete element will
 * turn into an "x"; when the .delete element itself is hovered, that "x" will
 * darken. #TODO find where these are used, and clean up
 */
/**
mixins that are more like classes but this seems cleaner
**/
/* for padding on container around autogrow text areas, so they expand correctly*/
/**
buttons styles that are abstracted out
***/
/**
 * Make the cursor be a grabbing hand.
 */
/**
 * Defines a row that makes each item the height of the row. By default items
 * are not resized horizontally. Mark an item with flexbox-flexes to make it
 * grow or shrink if there is too much or too little horizontal space.
 */
.flexbox-row {
  display: box;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox; }

/**
 * Firefox only plays the flexbox game if every element in the parent element
 * is playing the game, but sometimes Chrome needs display to be Block for some
 * things to work (for example, ellipsis). So this is a way to get around it.
 */
/**
 * Same as flexbox-row, but vertical.
 */
.flexbox-column {
  display: box;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  box-orient: vertical;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  -ms-flex-direction: column; }

/**
 * Indicates that an element should adjust its size to according to whether the
 * parent has too much or too little space.
 *
 * @deprecated: use flexbox-flexes-in-column and flexbox-flexes-in-row instead.
 */
/**
 * "Private" mixin, useful for changing IE's weirdly inconsistent flexbox
 * behavior. Use one of the below rules.
 */
/**
 * #FlexboxColumns
 * When the container has its height explicitly defined, this rule will do.
 */
.flexbox-flexes-in-column {
  box-flex: 1;
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -ms-flex: 1;
  min-height: 1px; }

/**
 * #FlexboxColumns
 * Use one of the following two mixins when the container has a max-height,
 * but not an explicit height (e.g., a DialogView2).
 *  - no-shrink is for components that need to always occupy their full size -
 *    headers, footers, etc.
 *  - shrinking is for components that can let themselves overflow, scroll, etc.
 */
.flexbox-flexes-in-row {
  box-flex: 1;
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -ms-flex: 1;
  min-width: 1px; }

/**
 * Include in a flexbox to indicate the alignment of its children.
 * align: {start|end|center|baseline|stretch}
 */
/**
 * Adds vendor-specific prefixes for the align-self property.
 * align: {auto | flex-start | flex-end | center | baseline | stretch}
 */
/**
 * Include in a flexbox to indicate the packing of its children.
 * pack: {start|end|center|justify}
 */
/**
 * Add vertical scrolling and custom scrollbars (webkit only) to a block
 * element.
 */
/**
* tokens with an x
**/
.emoji {
  background-image: url('https://d3ki9tyy5l5ruj.cloudfront.net/obj/0f9618f0cbef2cb76615bbde2d8d70d43e944fc7/sheet_64.png');
  background-repeat: no-repeat;
  background-size: 3000%;
  display: inline-block;
  height: 16px;
  margin-bottom: -3px;
  width: 16px; }

/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video, input, textarea {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font-family: inherit;
  vertical-align: baseline; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block; }

body {
  line-height: 1; }

ol, ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

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

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

.clear {
  height: 0px;
  clear: both; }

.clearfix:after {
  content: "";
  display: table;
  clear: both; }

.autogrow-textarea {
  /* This must be positioned relative so that the absolutely positioned shadow
     div does not cause the body to expand. */
  position: relative; }
  .autogrow-textarea textarea, .autogrow-textarea div[contenteditable=true] {
    overflow: hidden;
    resize: none;
    display: block; }
  .autogrow-textarea textarea, .autogrow-textarea .shadow, .autogrow-textarea div[contenteditable=true] {
    padding-top: 3px;
    padding-left: 5px;
    line-height: 1.2;
    word-wrap: break-word; }
    .autogrow-textarea textarea.shadow, .autogrow-textarea .shadow.shadow, .autogrow-textarea div[contenteditable=true].shadow {
      padding-top: 7px; }
  .autogrow-textarea .shadow {
    position: absolute;
    visibility: hidden;
    white-space: pre-wrap;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box; }
  .autogrow-textarea div[contenteditable=true] {
    min-height: 2em;
    white-space: pre-wrap; }
  .autogrow-textarea .placeholder-text {
    margin: 0px;
    float: left;
    width: 0px;
    white-space: nowrap;
    display: inline-block; }
    .autogrow-textarea .placeholder-text .placeholder-content {
      padding: 5px; }
    .autogrow-textarea .placeholder-text.hidden {
      display: none; }

/* buttons */
.button, .asana-button, input[type="button"], input[type="submit"], button[type="submit"] {
  border-radius: 3px 3px 3px 3px;
  -webkit-border-radius: 3px 3px 3px 3px;
  box-shadow: inset 0px -1px rgba(0, 0, 0, 0.12);
  -moz-box-shadow: inset 0px -1px rgba(0, 0, 0, 0.12);
  -webkit-box-shadow: inset 0px -1px rgba(0, 0, 0, 0.12);
  display: inline-block;
  padding: 4px 10px 4px;
  font-size: 12px;
  font-weight: 600;
  line-height: 100%;
  white-space: nowrap;
  cursor: pointer;
  text-align: center; }

.button .button-text, .toolbar-button .button-text, .asana-button .button-text {
  display: inline-block;
  margin-top: 1px; }
.button .button-arrow, .toolbar-button .button-arrow, .asana-button .button-arrow {
  background-image: url('https://d3ki9tyy5l5ruj.cloudfront.net/obj/935fd1f4a082b7d2d6d984cae0d5e51c9733f5c6/sprite.png');
  background-position: 1px -46px;
  background-repeat: no-repeat;
  display: inline-block;
  width: 12px;
  height: 10px; }
.button .button-follow, .toolbar-button .button-follow, .asana-button .button-follow {
  background-image: url('https://d3ki9tyy5l5ruj.cloudfront.net/obj/935fd1f4a082b7d2d6d984cae0d5e51c9733f5c6/sprite.png');
  background-position: 0px -125px;
  background-repeat: no-repeat; }
.button .split-button-text, .toolbar-button .split-button-text, .asana-button .split-button-text {
  padding-right: 10px;
  border-right: 1px dotted #9CACBC;
  display: inline-block; }
  .button .split-button-text:hover, .toolbar-button .split-button-text:hover, .asana-button .split-button-text:hover {
    color: #114D97; }
.button .split-button-arrow, .toolbar-button .split-button-arrow, .asana-button .split-button-arrow {
  display: inline-block;
  background-image: url('https://d3ki9tyy5l5ruj.cloudfront.net/obj/935fd1f4a082b7d2d6d984cae0d5e51c9733f5c6/sprite.png');
  background-position: 10px -46px;
  background-repeat: no-repeat;
  width: 20px;
  height: 10px; }
  .button .split-button-arrow:hover, .toolbar-button .split-button-arrow:hover, .asana-button .split-button-arrow:hover {
    background-position: -90px -46px; }
.button .button-icon, .toolbar-button .button-icon, .asana-button .button-icon {
  display: inline-block;
  width: 12px;
  height: 13px;
  margin-bottom: -3px;
  margin-top: -1px; }
  .button .button-icon.gear, .toolbar-button .button-icon.gear, .asana-button .button-icon.gear {
    background-image: url('https://d3ki9tyy5l5ruj.cloudfront.net/obj/935fd1f4a082b7d2d6d984cae0d5e51c9733f5c6/sprite.png');
    background-position: 0px -100px;
    background-repeat: no-repeat; }
  .button .button-icon.favorite.off, .toolbar-button .button-icon.favorite.off, .asana-button .button-icon.favorite.off {
    background-image: url('https://d3ki9tyy5l5ruj.cloudfront.net/obj/935fd1f4a082b7d2d6d984cae0d5e51c9733f5c6/sprite.png');
    background-position: 0px -150px;
    background-repeat: no-repeat; }
  .button .button-icon.favorite.on, .toolbar-button .button-icon.favorite.on, .asana-button .button-icon.favorite.on {
    background-image: url('https://d3ki9tyy5l5ruj.cloudfront.net/obj/935fd1f4a082b7d2d6d984cae0d5e51c9733f5c6/sprite.png');
    background-position: -200px -150px;
    background-repeat: no-repeat; }
  .button .button-icon.add, .toolbar-button .button-icon.add, .asana-button .button-icon.add {
    background-image: url('https://d3ki9tyy5l5ruj.cloudfront.net/obj/935fd1f4a082b7d2d6d984cae0d5e51c9733f5c6/sprite.png');
    background-position: 0px -1500px;
    background-repeat: no-repeat; }
  .button .button-icon.edit, .toolbar-button .button-icon.edit, .asana-button .button-icon.edit {
    background-image: url('https://d3ki9tyy5l5ruj.cloudfront.net/obj/935fd1f4a082b7d2d6d984cae0d5e51c9733f5c6/sprite.png');
    background-position: 0px -1450px;
    background-repeat: no-repeat; }
  .button .button-icon.more-symbol, .toolbar-button .button-icon.more-symbol, .asana-button .button-icon.more-symbol {
    background-image: url('https://d3ki9tyy5l5ruj.cloudfront.net/obj/935fd1f4a082b7d2d6d984cae0d5e51c9733f5c6/sprite.png');
    background-position: 0px -200px;
    background-repeat: no-repeat;
    width: 10px; }
.button:hover .gear, .toolbar-button:hover .gear, .asana-button:hover .gear {
  background-image: url('https://d3ki9tyy5l5ruj.cloudfront.net/obj/935fd1f4a082b7d2d6d984cae0d5e51c9733f5c6/sprite.png');
  background-position: -100px -100px;
  background-repeat: no-repeat; }
.button:hover .button-arrow, .toolbar-button:hover .button-arrow, .asana-button:hover .button-arrow {
  background-image: url('https://d3ki9tyy5l5ruj.cloudfront.net/obj/935fd1f4a082b7d2d6d984cae0d5e51c9733f5c6/sprite.png');
  background-position: -99px -46px;
  background-repeat: no-repeat; }
.button:hover .button-follow, .toolbar-button:hover .button-follow, .asana-button:hover .button-follow {
  background-image: url('https://d3ki9tyy5l5ruj.cloudfront.net/obj/935fd1f4a082b7d2d6d984cae0d5e51c9733f5c6/sprite.png');
  background-position: -100px -125px;
  background-repeat: no-repeat; }
.button:hover .favorite.off, .toolbar-button:hover .favorite.off, .asana-button:hover .favorite.off {
  background-image: url('https://d3ki9tyy5l5ruj.cloudfront.net/obj/935fd1f4a082b7d2d6d984cae0d5e51c9733f5c6/sprite.png');
  background-position: -100px -150px;
  background-repeat: no-repeat; }
.button:hover .favorite.on, .toolbar-button:hover .favorite.on, .asana-button:hover .favorite.on {
  background-image: url('https://d3ki9tyy5l5ruj.cloudfront.net/obj/935fd1f4a082b7d2d6d984cae0d5e51c9733f5c6/sprite.png');
  background-position: -100px -150px;
  background-repeat: no-repeat; }
.button:hover .add, .toolbar-button:hover .add, .asana-button:hover .add {
  background-image: url('https://d3ki9tyy5l5ruj.cloudfront.net/obj/935fd1f4a082b7d2d6d984cae0d5e51c9733f5c6/sprite.png');
  background-position: -100px -1500px;
  background-repeat: no-repeat; }
.button:hover .edit, .toolbar-button:hover .edit, .asana-button:hover .edit {
  background-image: url('https://d3ki9tyy5l5ruj.cloudfront.net/obj/935fd1f4a082b7d2d6d984cae0d5e51c9733f5c6/sprite.png');
  background-position: -100px -1450px;
  background-repeat: no-repeat; }
.button:hover .more-symbol, .toolbar-button:hover .more-symbol, .asana-button:hover .more-symbol {
  background-image: url('https://d3ki9tyy5l5ruj.cloudfront.net/obj/935fd1f4a082b7d2d6d984cae0d5e51c9733f5c6/sprite.png');
  background-position: -100px -200px;
  background-repeat: no-repeat; }

#pot_groupby_menu .button-icon {
  margin-left: 5px;
  width: 14px; }

.toolbar-button {
  font-size: 12px;
  font-weight: 600;
  line-height: 100%;
  padding-top: 5px;
  padding-right: 10px;
  padding-bottom: 6px;
  padding-left: 10px;
  border-right: 1px solid transparent;
  border-left: 1px solid #E5E5E5;
  cursor: pointer;
  box-shadow: inset 1px 1px white;
  -moz-box-shadow: inset 1px 1px white;
  -webkit-box-shadow: inset 1px 1px white;
  display: inline-block; }
  .toolbar-button:last-of-type {
    border-right: 1px solid #E5E5E5; }
  .toolbar-button .button-arrow {
    margin-left: 5px; }

.default-button {
  border: 1px solid #C0CCD7;
  background-color: #F2F2F2;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#ffffff), color-stop(10%, #F2F2F2));
  background-image: -moz-linear-gradient(90deg, #F2F2F2 90%, #ffffff);
  background-image: -ms-linear-gradient(90deg, #F2F2F2 90%, #ffffff); }

.default-button, .toolbar-button, .light-button {
  color: #596573;
  text-shadow: 0px 1px #ffffff; }
  .default-button.hovered, .default-button:hover:not(:focus):not(.unhovered):not(.disabled):not(.primary):not(.primary-button), .toolbar-button.hovered, .toolbar-button:hover:not(:focus):not(.unhovered):not(.disabled):not(.primary):not(.primary-button), .light-button.hovered, .light-button:hover:not(:focus):not(.unhovered):not(.disabled):not(.primary):not(.primary-button) {
    border-color: #AFBCC8;
    background-color: #DDE4EA;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#ffffff), color-stop(100%, #DDE4EA));
    background-image: -moz-linear-gradient(90deg, #DDE4EA 0%, #ffffff);
    background-image: -ms-linear-gradient(90deg, #DDE4EA 0%, #ffffff);
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none; }
    .default-button.hovered .button-text, .default-button.hovered .new-button-text, .default-button.hovered .glyph, .default-button:hover:not(:focus):not(.unhovered):not(.disabled):not(.primary):not(.primary-button) .button-text, .default-button:hover:not(:focus):not(.unhovered):not(.disabled):not(.primary):not(.primary-button) .new-button-text, .default-button:hover:not(:focus):not(.unhovered):not(.disabled):not(.primary):not(.primary-button) .glyph, .toolbar-button.hovered .button-text, .toolbar-button.hovered .new-button-text, .toolbar-button.hovered .glyph, .toolbar-button:hover:not(:focus):not(.unhovered):not(.disabled):not(.primary):not(.primary-button) .button-text, .toolbar-button:hover:not(:focus):not(.unhovered):not(.disabled):not(.primary):not(.primary-button) .new-button-text, .toolbar-button:hover:not(:focus):not(.unhovered):not(.disabled):not(.primary):not(.primary-button) .glyph, .light-button.hovered .button-text, .light-button.hovered .new-button-text, .light-button.hovered .glyph, .light-button:hover:not(:focus):not(.unhovered):not(.disabled):not(.primary):not(.primary-button) .button-text, .light-button:hover:not(:focus):not(.unhovered):not(.disabled):not(.primary):not(.primary-button) .new-button-text, .light-button:hover:not(:focus):not(.unhovered):not(.disabled):not(.primary):not(.primary-button) .glyph {
      color: #114D97;
      text-shadow: 0px 1px #ffffff; }
  .default-button:focus, .default-button.pressed, .toolbar-button:focus, .toolbar-button.pressed, .light-button:focus, .light-button.pressed {
    box-shadow: inset 0px 1px rgba(0, 0, 0, 0.12);
    -moz-box-shadow: inset 0px 1px rgba(0, 0, 0, 0.12);
    -webkit-box-shadow: inset 0px 1px rgba(0, 0, 0, 0.12);
    background-color: #DDE4EA;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#DDE4EA), color-stop(10%, #DDE4EA));
    background-image: -moz-linear-gradient(90deg, #DDE4EA 90%, #DDE4EA);
    background-image: -ms-linear-gradient(90deg, #DDE4EA 90%, #DDE4EA);
    border-color: #AFBCC8;
    outline: none; }
    .default-button:focus .button-text, .default-button:focus .new-button-text, .default-button.pressed .button-text, .default-button.pressed .new-button-text, .toolbar-button:focus .button-text, .toolbar-button:focus .new-button-text, .toolbar-button.pressed .button-text, .toolbar-button.pressed .new-button-text, .light-button:focus .button-text, .light-button:focus .new-button-text, .light-button.pressed .button-text, .light-button.pressed .new-button-text {
      color: #596573;
      text-shadow: 0px 1px #ffffff; }
    .default-button:focus:hover:not(.unhovered), .default-button.pressed:hover:not(.unhovered), .toolbar-button:focus:hover:not(.unhovered), .toolbar-button.pressed:hover:not(.unhovered), .light-button:focus:hover:not(.unhovered), .light-button.pressed:hover:not(.unhovered) {
      box-shadow: inset 0px 1px rgba(0, 0, 0, 0.12);
      -moz-box-shadow: inset 0px 1px rgba(0, 0, 0, 0.12);
      -webkit-box-shadow: inset 0px 1px rgba(0, 0, 0, 0.12);
      background-color: #DDE4EA;
      background-image: -webkit-gradient(linear, left top, left bottom, from(#DDE4EA), color-stop(10%, #DDE4EA));
      background-image: -moz-linear-gradient(90deg, #DDE4EA 90%, #DDE4EA);
      background-image: -ms-linear-gradient(90deg, #DDE4EA 90%, #DDE4EA);
      border-color: #AFBCC8;
      outline: none; }
      .default-button:focus:hover:not(.unhovered) .button-text, .default-button:focus:hover:not(.unhovered) .new-button-text, .default-button.pressed:hover:not(.unhovered) .button-text, .default-button.pressed:hover:not(.unhovered) .new-button-text, .toolbar-button:focus:hover:not(.unhovered) .button-text, .toolbar-button:focus:hover:not(.unhovered) .new-button-text, .toolbar-button.pressed:hover:not(.unhovered) .button-text, .toolbar-button.pressed:hover:not(.unhovered) .new-button-text, .light-button:focus:hover:not(.unhovered) .button-text, .light-button:focus:hover:not(.unhovered) .new-button-text, .light-button.pressed:hover:not(.unhovered) .button-text, .light-button.pressed:hover:not(.unhovered) .new-button-text {
        color: #114D97;
        text-shadow: 0px 1px #ffffff; }
  .default-button.disabled, .toolbar-button.disabled, .light-button.disabled {
    background: #F2F2F2;
    border-color: #cccccc;
    outline: none;
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none; }
    .default-button.disabled .button-text, .default-button.disabled .new-button-text, .default-button.disabled .glyph, .toolbar-button.disabled .button-text, .toolbar-button.disabled .new-button-text, .toolbar-button.disabled .glyph, .light-button.disabled .button-text, .light-button.disabled .new-button-text, .light-button.disabled .glyph {
      color: #999999;
      text-shadow: none; }
    .default-button.disabled:hover, .toolbar-button.disabled:hover, .light-button.disabled:hover {
      background: #F2F2F2;
      border-color: #cccccc;
      outline: none;
      box-shadow: none;
      -moz-box-shadow: none;
      -webkit-box-shadow: none; }
      .default-button.disabled:hover .button-text, .default-button.disabled:hover .new-button-text, .default-button.disabled:hover .glyph, .toolbar-button.disabled:hover .button-text, .toolbar-button.disabled:hover .new-button-text, .toolbar-button.disabled:hover .glyph, .light-button.disabled:hover .button-text, .light-button.disabled:hover .new-button-text, .light-button.disabled:hover .glyph {
        color: #999999;
        text-shadow: none; }

.toolbar-button.disabled, .toolbar-button.disabled:hover {
  background: transparent;
  border-color: #E5E5E5; }

.toggle-button {
  color: #596573;
  text-shadow: 0px 1px #ffffff;
  background-color: #F2F2F2;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#ffffff), color-stop(10%, #F2F2F2));
  background-image: -moz-linear-gradient(90deg, #F2F2F2 90%, #ffffff);
  background-image: -ms-linear-gradient(90deg, #F2F2F2 90%, #ffffff);
  border: 1px solid #C0CCD7; }
  .toggle-button .count {
    font-weight: 400;
    font-size: 12px;
    color: #999999;
    padding-left: 5px;
    text-shadow: none; }
  .toggle-button.selected {
    box-shadow: inset 0px -1px 0px #9CACBC;
    -moz-box-shadow: inset 0px -1px 0px #9CACBC;
    -webkit-box-shadow: inset 0px -1px 0px #9CACBC;
    background-color: #596573;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#596573), color-stop(10%, #6E7E91));
    background-image: -moz-linear-gradient(90deg, #6E7E91 90%, #596573);
    background-image: -ms-linear-gradient(90deg, #6E7E91 90%, #596573);
    color: #ffffff;
    border-color: #596573; }
    .toggle-button.selected .button-text {
      text-shadow: 0px -1px #212F40; }
  .toggle-button:hover:not(.selected) {
    border-color: #AFBCC8;
    background-color: #DDE4EA;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#ffffff), color-stop(100%, #DDE4EA));
    background-image: -moz-linear-gradient(90deg, #DDE4EA 0%, #ffffff);
    background-image: -ms-linear-gradient(90deg, #DDE4EA 0%, #ffffff);
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none; }
    .toggle-button:hover:not(.selected) .button-text, .toggle-button:hover:not(.selected) .new-button-text, .toggle-button:hover:not(.selected) .glyph {
      color: #114D97;
      text-shadow: 0px 1px #ffffff; }
  .toggle-button.disabled, .toggle-button.disabled:hover {
    background: #F2F2F2;
    border-color: #cccccc;
    outline: none;
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none; }
    .toggle-button.disabled .button-text, .toggle-button.disabled .new-button-text, .toggle-button.disabled .glyph, .toggle-button.disabled:hover .button-text, .toggle-button.disabled:hover .new-button-text, .toggle-button.disabled:hover .glyph {
      color: #999999;
      text-shadow: none; }
    .toggle-button.disabled:hover, .toggle-button.disabled:hover:hover {
      background: #F2F2F2;
      border-color: #cccccc;
      outline: none;
      box-shadow: none;
      -moz-box-shadow: none;
      -webkit-box-shadow: none; }
      .toggle-button.disabled:hover .button-text, .toggle-button.disabled:hover .new-button-text, .toggle-button.disabled:hover .glyph, .toggle-button.disabled:hover:hover .button-text, .toggle-button.disabled:hover:hover .new-button-text, .toggle-button.disabled:hover:hover .glyph {
        color: #999999;
        text-shadow: none; }

.toggle-group .toggle-button:not(:last-of-type) {
  border-radius: 0px 0px 0px 0px;
  -webkit-border-radius: 0px 0px 0px 0px;
  border-left: 1px solid transparent; }
.toggle-group .toggle-button:first-of-type:not(:last-of-type) {
  border-radius: 3px 0px 0px 3px;
  -webkit-border-radius: 3px 0px 0px 3px;
  border-left: 1px solid #C0CCD7; }
  .toggle-group .toggle-button:first-of-type:not(:last-of-type).selected {
    border-left-color: #596573; }
.toggle-group .toggle-button:last-of-type:not(:first-of-type) {
  border-radius: 0px 3px 3px 0px;
  -webkit-border-radius: 0px 3px 3px 0px;
  border-left: 1px solid transparent; }

.primary-button, .primary, input[type="submit"], button[type="submit"], .default-button.primary {
  border: 1px solid #114D97;
  background-color: #1F8DD6;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#74C1ED), color-stop(10%, #1F8DD6));
  background-image: -moz-linear-gradient(90deg, #1F8DD6 90%, #74C1ED);
  background-image: -ms-linear-gradient(90deg, #1F8DD6 90%, #74C1ED); }
  .primary-button .button-text, .primary-button .new-button-text, .primary .button-text, .primary .new-button-text, input[type="submit"] .button-text, input[type="submit"] .new-button-text, button[type="submit"] .button-text, button[type="submit"] .new-button-text, .default-button.primary .button-text, .default-button.primary .new-button-text {
    color: white;
    text-shadow: 0px -1px #114D97; }
  .primary-button.hovered, .primary-button:hover:not(.mobile-button):not(.disabled), .primary.hovered, .primary:hover:not(.mobile-button):not(.disabled), input[type="submit"].hovered, input[type="submit"]:hover:not(.mobile-button):not(.disabled), button[type="submit"].hovered, button[type="submit"]:hover:not(.mobile-button):not(.disabled), .default-button.primary.hovered, .default-button.primary:hover:not(.mobile-button):not(.disabled) {
    background-color: #1F8DD6;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#74C1ED), color-stop(100%, #1F8DD6));
    background-image: -moz-linear-gradient(90deg, #1F8DD6 0%, #74C1ED);
    background-image: -ms-linear-gradient(90deg, #1F8DD6 0%, #74C1ED);
    border: 1px solid #114D97; }
    .primary-button.hovered .button-text, .primary-button:hover:not(.mobile-button):not(.disabled) .button-text, .primary.hovered .button-text, .primary:hover:not(.mobile-button):not(.disabled) .button-text, input[type="submit"].hovered .button-text, input[type="submit"]:hover:not(.mobile-button):not(.disabled) .button-text, button[type="submit"].hovered .button-text, button[type="submit"]:hover:not(.mobile-button):not(.disabled) .button-text, .default-button.primary.hovered .button-text, .default-button.primary:hover:not(.mobile-button):not(.disabled) .button-text {
      color: white;
      text-shadow: 0px -1px #114D97; }
  .primary-button:focus, .primary:focus, input[type="submit"]:focus, button[type="submit"]:focus, .default-button.primary:focus {
    border: 1px solid #114D97;
    background-color: #1F8DD6;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#74C1ED), color-stop(10%, #1F8DD6));
    background-image: -moz-linear-gradient(90deg, #1F8DD6 90%, #74C1ED);
    background-image: -ms-linear-gradient(90deg, #1F8DD6 90%, #74C1ED);
    box-shadow: 0px 0px 6px 3px rgba(31, 141, 214, 0.3);
    -moz-box-shadow: 0px 0px 6px 3px rgba(31, 141, 214, 0.3);
    -webkit-box-shadow: 0px 0px 6px 3px rgba(31, 141, 214, 0.3);
    outline: none; }
    .primary-button:focus .button-text, .primary-button:focus .new-button-text, .primary:focus .button-text, .primary:focus .new-button-text, input[type="submit"]:focus .button-text, input[type="submit"]:focus .new-button-text, button[type="submit"]:focus .button-text, button[type="submit"]:focus .new-button-text, .default-button.primary:focus .button-text, .default-button.primary:focus .new-button-text {
      color: white;
      text-shadow: 0px -1px #114D97; }
  .primary-button.disabled, .primary.disabled, input[type="submit"].disabled, button[type="submit"].disabled, .default-button.primary.disabled {
    background: #F2F2F2;
    border-color: #cccccc;
    outline: none;
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none; }
    .primary-button.disabled .button-text, .primary-button.disabled .new-button-text, .primary-button.disabled .glyph, .primary.disabled .button-text, .primary.disabled .new-button-text, .primary.disabled .glyph, input[type="submit"].disabled .button-text, input[type="submit"].disabled .new-button-text, input[type="submit"].disabled .glyph, button[type="submit"].disabled .button-text, button[type="submit"].disabled .new-button-text, button[type="submit"].disabled .glyph, .default-button.primary.disabled .button-text, .default-button.primary.disabled .new-button-text, .default-button.primary.disabled .glyph {
      color: #999999;
      text-shadow: none; }
    .primary-button.disabled:hover, .primary.disabled:hover, input[type="submit"].disabled:hover, button[type="submit"].disabled:hover, .default-button.primary.disabled:hover {
      background: #F2F2F2;
      border-color: #cccccc;
      outline: none;
      box-shadow: none;
      -moz-box-shadow: none;
      -webkit-box-shadow: none; }
      .primary-button.disabled:hover .button-text, .primary-button.disabled:hover .new-button-text, .primary-button.disabled:hover .glyph, .primary.disabled:hover .button-text, .primary.disabled:hover .new-button-text, .primary.disabled:hover .glyph, input[type="submit"].disabled:hover .button-text, input[type="submit"].disabled:hover .new-button-text, input[type="submit"].disabled:hover .glyph, button[type="submit"].disabled:hover .button-text, button[type="submit"].disabled:hover .new-button-text, button[type="submit"].disabled:hover .glyph, .default-button.primary.disabled:hover .button-text, .default-button.primary.disabled:hover .new-button-text, .default-button.primary.disabled:hover .glyph {
        color: #999999;
        text-shadow: none; }
  .primary-button.pink, .primary.pink, input[type="submit"].pink, button[type="submit"].pink, .default-button.primary.pink {
    text-shadow: 0px -1px #A71428;
    border: 1px solid #A71428;
    background-color: #F22659;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#F7A7BA), color-stop(10%, #F22659));
    background-image: -moz-linear-gradient(90deg, #F22659 90%, #F7A7BA);
    background-image: -ms-linear-gradient(90deg, #F22659 90%, #F7A7BA);
    box-shadow: inset 0px -1px rgba(0, 0, 0, 0.12);
    -moz-box-shadow: inset 0px -1px rgba(0, 0, 0, 0.12);
    -webkit-box-shadow: inset 0px -1px rgba(0, 0, 0, 0.12); }
    .primary-button.pink.hovered, .primary-button.pink:hover:not(.disabled), .primary.pink.hovered, .primary.pink:hover:not(.disabled), input[type="submit"].pink.hovered, input[type="submit"].pink:hover:not(.disabled), button[type="submit"].pink.hovered, button[type="submit"].pink:hover:not(.disabled), .default-button.primary.pink.hovered, .default-button.primary.pink:hover:not(.disabled) {
      background-color: #F22659;
      background-image: -webkit-gradient(linear, left top, left bottom, from(#F7A7BA), color-stop(100%, #F22659));
      background-image: -moz-linear-gradient(90deg, #F22659 0%, #F7A7BA);
      background-image: -ms-linear-gradient(90deg, #F22659 0%, #F7A7BA);
      border: 1px solid #A71428; }

input[type="submit"], button[type="submit"] {
  color: white;
  text-shadow: 0px -1px #114D97; }

.light-button {
  color: #596573;
  text-shadow: 0px 1px #ffffff;
  border: 1px solid #F2F2F2;
  background-color: #F2F2F2;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#ffffff), color-stop(10%, #F2F2F2));
  background-image: -moz-linear-gradient(90deg, #F2F2F2 90%, #ffffff);
  background-image: -ms-linear-gradient(90deg, #F2F2F2 90%, #ffffff); }
  .light-button .hovered, .light-button:hover:not(.pressed):not(.unhovered):not(.disabled) {
    border-color: #AFBCC8;
    background-color: #DDE4EA;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#ffffff), color-stop(100%, #DDE4EA));
    background-image: -moz-linear-gradient(90deg, #DDE4EA 0%, #ffffff);
    background-image: -ms-linear-gradient(90deg, #DDE4EA 0%, #ffffff);
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none; }
    .light-button .hovered .button-text, .light-button .hovered .new-button-text, .light-button .hovered .glyph, .light-button:hover:not(.pressed):not(.unhovered):not(.disabled) .button-text, .light-button:hover:not(.pressed):not(.unhovered):not(.disabled) .new-button-text, .light-button:hover:not(.pressed):not(.unhovered):not(.disabled) .glyph {
      color: #114D97;
      text-shadow: 0px 1px #ffffff; }
  .light-button.disabled, .light-button.disabled:hover {
    background: #F2F2F2;
    border-color: #cccccc;
    outline: none;
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none; }
    .light-button.disabled .button-text, .light-button.disabled .new-button-text, .light-button.disabled .glyph, .light-button.disabled:hover .button-text, .light-button.disabled:hover .new-button-text, .light-button.disabled:hover .glyph {
      color: #999999;
      text-shadow: none; }
    .light-button.disabled:hover, .light-button.disabled:hover:hover {
      background: #F2F2F2;
      border-color: #cccccc;
      outline: none;
      box-shadow: none;
      -moz-box-shadow: none;
      -webkit-box-shadow: none; }
      .light-button.disabled:hover .button-text, .light-button.disabled:hover .new-button-text, .light-button.disabled:hover .glyph, .light-button.disabled:hover:hover .button-text, .light-button.disabled:hover:hover .new-button-text, .light-button.disabled:hover:hover .glyph {
        color: #999999;
        text-shadow: none; }

.left-button {
  color: #596573;
  text-shadow: 0px 1px #ffffff;
  border: 1px solid #C0CCD7;
  margin-right: 5px;
  background-color: #DDE4EA;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#ECF0F3), color-stop(10%, #DDE4EA));
  background-image: -moz-linear-gradient(90deg, #DDE4EA 90%, #ECF0F3);
  background-image: -ms-linear-gradient(90deg, #DDE4EA 90%, #ECF0F3); }
  .left-button.hovered, .left-button:hover:not(.mobile-button) {
    border-color: #AFBCC8;
    background-color: #DDE4EA;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#ffffff), color-stop(100%, #DDE4EA));
    background-image: -moz-linear-gradient(90deg, #DDE4EA 0%, #ffffff);
    background-image: -ms-linear-gradient(90deg, #DDE4EA 0%, #ffffff);
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none; }
    .left-button.hovered .button-text, .left-button.hovered .new-button-text, .left-button.hovered .glyph, .left-button:hover:not(.mobile-button) .button-text, .left-button:hover:not(.mobile-button) .new-button-text, .left-button:hover:not(.mobile-button) .glyph {
      color: #114D97;
      text-shadow: 0px 1px #ffffff; }

.tooltip-button {
  color: #C0CCD7;
  text-shadow: 0px -1px #1A232E;
  border: 1px solid #1A232E;
  background-color: #434C56;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#6E7E91), color-stop(10%, #434C56));
  background-image: -moz-linear-gradient(90deg, #434C56 90%, #6E7E91);
  background-image: -ms-linear-gradient(90deg, #434C56 90%, #6E7E91); }
  .tooltip-button.hovered, .tooltip-button:hover {
    background-color: #212F40;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#6E7E91), color-stop(100%, #212F40));
    background-image: -moz-linear-gradient(90deg, #212F40 0%, #6E7E91);
    background-image: -ms-linear-gradient(90deg, #212F40 0%, #6E7E91); }

input[type="button"], input[type="reset"] {
  border: 1px solid #C0CCD7;
  background-color: #F2F2F2;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#ffffff), color-stop(10%, #F2F2F2));
  background-image: -moz-linear-gradient(90deg, #F2F2F2 90%, #ffffff);
  background-image: -ms-linear-gradient(90deg, #F2F2F2 90%, #ffffff);
  color: #596573;
  text-shadow: 0px 1px #ffffff; }
  input[type="button"]:hover, input[type="reset"]:hover {
    border-color: #AFBCC8;
    background-color: #DDE4EA;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#ffffff), color-stop(100%, #DDE4EA));
    background-image: -moz-linear-gradient(90deg, #DDE4EA 0%, #ffffff);
    background-image: -ms-linear-gradient(90deg, #DDE4EA 0%, #ffffff);
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none; }
    input[type="button"]:hover .button-text, input[type="button"]:hover .new-button-text, input[type="button"]:hover .glyph, input[type="reset"]:hover .button-text, input[type="reset"]:hover .new-button-text, input[type="reset"]:hover .glyph {
      color: #114D97;
      text-shadow: 0px 1px #ffffff; }

textarea.filter-input {
  overflow: hidden;
  resize: none;
  word-wrap: normal;
  white-space: nowrap; }

/*form inputs*/
.generic-input, textarea, .recurly input[type=text] {
  border-radius: 3px 3px 3px 3px;
  -webkit-border-radius: 3px 3px 3px 3px;
  line-height: 1.2;
  border: 1px solid transparent;
  color: #212F40; }
  .generic-input.invalid, textarea.invalid, .recurly input[type=text].invalid {
    outline: none;
    border-color: #F22659; }
  .generic-input.showing, textarea.showing, .recurly input[type=text].showing {
    border: 1px solid rgba(0, 0, 0, 0.12);
    box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.1); }
    .generic-input.showing.invalid, textarea.showing.invalid, .recurly input[type=text].showing.invalid {
      border-color: #F22659; }
  .generic-input[disabled=disabled], textarea[disabled=disabled], .recurly input[type=text][disabled=disabled] {
    background-color: rgba(0, 0, 0, 0.05);
    color: #999999; }
  .generic-input.focused:not(.override-focus-border), .generic-input:focus:not(.override-focus-border), textarea.focused:not(.override-focus-border), textarea:focus:not(.override-focus-border), .recurly input[type=text].focused:not(.override-focus-border), .recurly input[type=text]:focus:not(.override-focus-border) {
    box-shadow: 0px 0px 5px 1px rgba(31, 141, 214, 0.3);
    -moz-box-shadow: 0px 0px 5px 1px rgba(31, 141, 214, 0.3);
    -webkit-box-shadow: 0px 0px 5px 1px rgba(31, 141, 214, 0.3);
    outline: none;
    border-color: #74C1ED; }
  .generic-input:not(.override-hover-border).hovered, .generic-input:not(.override-hover-border):hover:not([disabled=disabled]):not(:focus):not(.focused), textarea:not(.override-hover-border).hovered, textarea:not(.override-hover-border):hover:not([disabled=disabled]):not(:focus):not(.focused), .recurly input[type=text]:not(.override-hover-border).hovered, .recurly input[type=text]:not(.override-hover-border):hover:not([disabled=disabled]):not(:focus):not(.focused) {
    border-color: rgba(0, 0, 0, 0.2);
    box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.1); }
    .generic-input:not(.override-hover-border).hovered.invalid, .generic-input:not(.override-hover-border):hover:not([disabled=disabled]):not(:focus):not(.focused).invalid, textarea:not(.override-hover-border).hovered.invalid, textarea:not(.override-hover-border):hover:not([disabled=disabled]):not(:focus):not(.focused).invalid, .recurly input[type=text]:not(.override-hover-border).hovered.invalid, .recurly input[type=text]:not(.override-hover-border):hover:not([disabled=disabled]):not(:focus):not(.focused).invalid {
      border-color: #F22659; }

.generic-input, .recurly input[type=text] {
  font-size: 14px;
  padding: 4px 5px 3px; }

input[type=text].generic-input.coupon-code {
  margin-right: 5px;
  width: 276px; }

.generic-input.fixed-textarea {
  resize: none; }

.fake-disabled-text-input.generic-input {
  border-radius: 3px 3px 3px 3px;
  -webkit-border-radius: 3px 3px 3px 3px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.1);
  background-color: rgba(0, 0, 0, 0.05);
  color: #999999; }
  .fake-disabled-text-input.generic-input.invalid {
    border-color: #F22659; }

.field-name, .invite-header {
  font-size: 12px;
  font-weight: 600;
  color: #999999;
  padding-right: 14px;
  padding-bottom: 5px;
  width: 100px; }

select {
  font-size: 12px;
  font-family: "proxima-nova", "Helvetica Neue", Arial, sans-serif; }

#nav_search_list_sections_view .item, #nav_search_list_sections_view .action {
  font-weight: 400;
  font-size: 14px;
  padding-top: 7px;
  padding-bottom: 7px; }
  #nav_search_list_sections_view .item strong, #nav_search_list_sections_view .action strong {
    font-weight: 700; }
  #nav_search_list_sections_view .item .action-link, #nav_search_list_sections_view .action .action-link {
    display: inline-block;
    position: relative;
    top: 2px; }
  #nav_search_list_sections_view .item .item-icon, #nav_search_list_sections_view .action .item-icon {
    margin-left: 0; }
  #nav_search_list_sections_view .item .typeahead-icon, #nav_search_list_sections_view .action .typeahead-icon {
    font-size: 22px;
    width: 1em; }

/* dnd */
.drag_active {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none; }

.drag_hand, .drag_hand a {
  /* When we use an image, there is an intermittent bug such that the cursor
     does not appear so we use move instead for now */
  /*  cursor: url('https://d3ki9tyy5l5ruj.cloudfront.net/obj/bb22807a7c23dae7d007673b407850438856bbfa/hand-open.cur'), -moz-grab;*/
  cursor: move;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none; }

.drag_target {
  cursor: default; }

.dragged_object {
  border: 1px solid #9CACBC;
  border-radius: 3px 3px 3px 3px;
  -webkit-border-radius: 3px 3px 3px 3px;
  color: #596573;
  padding: 5px;
  min-width: 250px;
  background: rgba(255, 255, 255, 0.8);
  font-size: 12px; }

.spinner {
  display: inline;
  margin: 0px 4px; }

.loading-indicator, .loading-indicator-blue, .inline-loading-indicator {
  text-align: center;
  padding-top: 20px;
  padding-bottom: 20px;
  padding-left: 0px;
  padding-right: 0px; }
  .loading-indicator .loader-text, .loading-indicator-blue .loader-text, .inline-loading-indicator .loader-text {
    margin-left: 12px;
    font-size: 12px;
    color: #999999;
    display: inline-block;
    vertical-align: middle;
    display: none; }

.inline-loading-indicator {
  text-align: left; }
  .inline-loading-indicator .loader-text {
    display: inline-block; }

div.loading-indicator-blue .loader-dot {
  background-color: #9CACBC;
  border-color: #6E7E91; }
div.loading-indicator-blue .loader-text {
  color: #596573; }

.loading-indicator .loader-dot, .loading-indicator-blue .loader-dot, .inline-loading-indicator .loader-dot,
.navigating-overlay-box .loader-dot {
  display: inline-block;
  vertical-align: middle;
  background-color: #cccccc;
  border: none;
  height: 9px;
  width: 9px;
  margin-right: 8px;
  opacity: .1;
  -webkit-animation: loader-dot ease 1.5s 0 infinite;
  -moz-animation: loader-dot ease 1.5s 0 infinite;
  animation: loader-dot ease 1.5s 0 infinite;
  -webkit-animation-direction: linear;
  -moz-animation-direction: linear;
  animation-direction: linear;
  border-radius: 9px 9px 9px 9px;
  -webkit-border-radius: 9px 9px 9px 9px;
  box-shadow: inset 0px 1px 1px 0px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: inset 0px 1px 1px 0px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: inset 0px 1px 1px 0px rgba(0, 0, 0, 0.2); }
.loading-indicator .loader-dot1, .loading-indicator-blue .loader-dot1, .inline-loading-indicator .loader-dot1,
.navigating-overlay-box .loader-dot1 {
  -webkit-animation-delay: 0s;
  -moz-animation-delay: 0s;
  animation-delay: 0s; }
.loading-indicator .loader-dot2, .loading-indicator-blue .loader-dot2, .inline-loading-indicator .loader-dot2,
.navigating-overlay-box .loader-dot2 {
  -webkit-animation-delay: 0.2s;
  -moz-animation-delay: 0.2s;
  animation-delay: 0.2s; }
.loading-indicator .loader-dot3, .loading-indicator-blue .loader-dot3, .inline-loading-indicator .loader-dot3,
.navigating-overlay-box .loader-dot3 {
  -webkit-animation-delay: 0.4s;
  -moz-animation-delay: 0.4s;
  animation-delay: 0.4s;
  margin-right: 0px; }

@-webkit-keyframes loader-dot {
  0% {
    opacity: .1; }
  40% {
    opacity: 1; }
  60% {
    opacity: 1; }
  100% {
    opacity: .1; } }
@-moz-keyframes loader-dot {
  0% {
    opacity: .1; }
  40% {
    opacity: 1; }
  60% {
    opacity: 1; }
  100% {
    opacity: .1; } }
@keyframes loader-dot {
  0% {
    opacity: .1; }
  40% {
    opacity: 1; }
  60% {
    opacity: 1; }
  100% {
    opacity: .1; } }
.lock-icon {
  height: 11px;
  width: 13px;
  display: inline-block;
  vertical-align: middle;
  margin-left: 5px;
  margin-top: -3px; }

.lock-icon {
  background-image: url('https://d3ki9tyy5l5ruj.cloudfront.net/obj/935fd1f4a082b7d2d6d984cae0d5e51c9733f5c6/sprite.png');
  background-position: 0px -1900px;
  background-repeat: no-repeat; }

.icon-client-app-default-small {
  height: 21px;
  width: 21px;
  background-image: url('https://d3ki9tyy5l5ruj.cloudfront.net/obj/935fd1f4a082b7d2d6d984cae0d5e51c9733f5c6/sprite.png');
  background-position: -400px -350px;
  background-repeat: no-repeat; }

/* Fragment/link navigation-related visuals */
.navigating-overlay, .navigating-overlay-mask {
  position: absolute;
  display: table-cell;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; }

.navigating-overlay {
  text-align: center;
  background: transparent; }
  .navigating-overlay.hidden {
    display: none; }
  .navigating-overlay.loading .navigating-overlay-box {
    background: transparent; }
  .navigating-overlay.loading .navigating-overlay-mask {
    background: #9CACBC; }

.navigating-overlay-mask {
  opacity: 0.3;
  background: #DDE4EA; }

.navigating-overlay-box {
  position: absolute;
  padding: 12px;
  top: 180px;
  margin-top: 0px;
  left: 50%;
  margin-left: -36px;
  display: inline-block;
  text-align: center;
  border-radius: 4px 4px 4px 4px;
  -webkit-border-radius: 4px 4px 4px 4px;
  background-color: #fff; }
  .navigating-overlay-box .navigating-overlay-text {
    display: inline-block;
    vertical-align: middle;
    margin-left: 4px;
    color: #999999;
    font-size: 14px;
    display: none; }

#invite_menu_dropdown_menu {
  min-width: 300px;
  max-width: 350px; }

.move-position-indicator {
  background-color: #000000;
  width: 1px;
  height: 1px; }

.design-sandbox-div {
  position: absolute;
  top: 0px;
  z-index: 500; }

#theme_scene {
  position: absolute;
  top: 0px;
  left: 0px;
  background: transparent; }

.new-button {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  line-height: 100%;
  white-space: nowrap;
  cursor: pointer;
  text-align: center;
  padding: 4px 10px;
  border-radius: 3px 3px 3px 3px;
  -webkit-border-radius: 3px 3px 3px 3px;
  box-shadow: inset 0px 1px rgba(255, 255, 255, 0.3), inset 0px -1px 1px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: inset 0px 1px rgba(255, 255, 255, 0.3), inset 0px -1px 1px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: inset 0px 1px rgba(255, 255, 255, 0.3), inset 0px -1px 1px rgba(0, 0, 0, 0.1); }
  .new-button .new-button-text:not(:empty) {
    display: inline-block;
    margin-top: 1px; }
  .new-button .glyph {
    margin-top: -1px; }
  .new-button .left-button-icon:not(:empty) {
    margin-right: 5px; }
  .new-button .right-button-icon:not(:empty) {
    margin-left: 5px; }
  .new-button.disabled {
    background: #F2F2F2;
    border-color: #cccccc;
    outline: none;
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    cursor: auto; }
    .new-button.disabled .button-text, .new-button.disabled .new-button-text, .new-button.disabled .glyph {
      color: #999999;
      text-shadow: none; }
    .new-button.disabled:hover {
      background: #F2F2F2;
      border-color: #cccccc;
      outline: none;
      box-shadow: none;
      -moz-box-shadow: none;
      -webkit-box-shadow: none; }
      .new-button.disabled:hover .button-text, .new-button.disabled:hover .new-button-text, .new-button.disabled:hover .glyph {
        color: #999999;
        text-shadow: none; }
  .new-button:focus {
    box-shadow: inset 0px 1px rgba(255, 255, 255, 0.3), inset 0px -1px 1px rgba(0, 0, 0, 0.1), 0px 0px 6px 3px rgba(31, 141, 214, 0.3);
    -moz-box-shadow: inset 0px 1px rgba(255, 255, 255, 0.3), inset 0px -1px 1px rgba(0, 0, 0, 0.1), 0px 0px 6px 3px rgba(31, 141, 214, 0.3);
    -webkit-box-shadow: inset 0px 1px rgba(255, 255, 255, 0.3), inset 0px -1px 1px rgba(0, 0, 0, 0.1), 0px 0px 6px 3px rgba(31, 141, 214, 0.3);
    outline: none; }

.new-default-button {
  border: 1px solid #C0CCD7;
  background-color: #F2F2F2; }
  .new-default-button .new-button-text, .new-default-button .glyph {
    color: #596573;
    text-shadow: 0px 1px #ffffff; }
  .new-default-button:hover:not(:focus):not(.unhovered):not(.disabled):not(.pressed) {
    border-color: #AFBCC8;
    background-color: #DDE4EA;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#ffffff), color-stop(100%, #DDE4EA));
    background-image: -moz-linear-gradient(90deg, #DDE4EA 0%, #ffffff);
    background-image: -ms-linear-gradient(90deg, #DDE4EA 0%, #ffffff);
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none; }
    .new-default-button:hover:not(:focus):not(.unhovered):not(.disabled):not(.pressed) .new-button-text, .new-default-button:hover:not(:focus):not(.unhovered):not(.disabled):not(.pressed) .right-button-icon {
      color: #114D97;
      text-shadow: 0px 1px #ffffff; }
  .new-default-button.pressed {
    box-shadow: inset 0px 1px rgba(0, 0, 0, 0.12);
    -moz-box-shadow: inset 0px 1px rgba(0, 0, 0, 0.12);
    -webkit-box-shadow: inset 0px 1px rgba(0, 0, 0, 0.12);
    background-color: #DDE4EA;
    border-color: #AFBCC8;
    outline: none; }
    .new-default-button.pressed .new-button-text {
      color: #596573;
      text-shadow: 0px 1px #ffffff; }
    .new-default-button.pressed:hover:not(.unhovered) .new-button-text {
      color: #114D97;
      text-shadow: 0px 1px #ffffff; }

.new-primary-button {
  border: 1px solid #114D97;
  background-color: #1F8DD6; }
  .new-primary-button.tall-button:not(.disabled) {
    background-color: #1F8DD6; }
    .new-primary-button.tall-button:not(.disabled):hover:not(:focus):not(.unhovered):not(.disabled):not(.pressed) {
      background-color: #1F8DD6;
      background-image: -webkit-gradient(linear, left top, left bottom, from(#74C1ED), color-stop(100%, #1F8DD6));
      background-image: -moz-linear-gradient(90deg, #1F8DD6 0%, #74C1ED);
      background-image: -ms-linear-gradient(90deg, #1F8DD6 0%, #74C1ED); }
  .new-primary-button .new-button-text, .new-primary-button .glyph {
    color: #ffffff;
    text-shadow: 0px -1px #114D97; }
  .new-primary-button:hover:not(:focus):not(.unhovered):not(.disabled):not(.pressed) {
    background-color: #1F8DD6;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#74C1ED), color-stop(100%, #1F8DD6));
    background-image: -moz-linear-gradient(90deg, #1F8DD6 0%, #74C1ED);
    background-image: -ms-linear-gradient(90deg, #1F8DD6 0%, #74C1ED); }
  .new-primary-button.pressed {
    box-shadow: inset 0px 1px rgba(0, 0, 0, 0.12);
    -moz-box-shadow: inset 0px 1px rgba(0, 0, 0, 0.12);
    -webkit-box-shadow: inset 0px 1px rgba(0, 0, 0, 0.12);
    background-color: #1F8DD6;
    border-color: #114D97;
    outline: none; }

.tall-button {
  height: 18px;
  padding-top: 10px;
  padding-bottom: 10px;
  border-radius: 6px 6px 6px 6px;
  -webkit-border-radius: 6px 6px 6px 6px;
  background-color: #F5F9FC;
  box-shadow: inset 0px 2px rgba(255, 255, 255, 0.3), inset 0px -2px 2px rgba(0, 0, 0, 0.08);
  -moz-box-shadow: inset 0px 2px rgba(255, 255, 255, 0.3), inset 0px -2px 2px rgba(0, 0, 0, 0.08);
  -webkit-box-shadow: inset 0px 2px rgba(255, 255, 255, 0.3), inset 0px -2px 2px rgba(0, 0, 0, 0.08);
  font-size: 18px; }
  .tall-button:hover:not(:focus):not(.unhovered):not(.disabled):not(.pressed) {
    background-color: #DDE4EA;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#ffffff), color-stop(100%, #DDE4EA));
    background-image: -moz-linear-gradient(90deg, #DDE4EA 0%, #ffffff);
    background-image: -ms-linear-gradient(90deg, #DDE4EA 0%, #ffffff); }

.new-button.fixed-width-button {
  padding-left: 10px;
  padding-right: 10px; }
  .new-button.fixed-width-button .left-button-icon {
    margin-left: 0px;
    margin-right: 0px; }
  .new-button.fixed-width-button .new-button-text {
    margin-left: 0px;
    margin-right: 0px;
    overflow: hidden; }
  .new-button.fixed-width-button .right-button-icon {
    margin-left: 0px;
    margin-right: 0px; }

.new-button.footer-button {
  font-size: 14px;
  padding-top: 6px;
  padding-bottom: 6px; }

.dropdown-menu-link.open .new-default-button, .dropdown-menu-link.open .new-primary-button {
  box-shadow: inset 0px 1px rgba(0, 0, 0, 0.12);
  -moz-box-shadow: inset 0px 1px rgba(0, 0, 0, 0.12);
  -webkit-box-shadow: inset 0px 1px rgba(0, 0, 0, 0.12);
  background-color: #DDE4EA;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#DDE4EA), color-stop(10%, #DDE4EA));
  background-image: -moz-linear-gradient(90deg, #DDE4EA 90%, #DDE4EA);
  background-image: -ms-linear-gradient(90deg, #DDE4EA 90%, #DDE4EA);
  border-color: #AFBCC8;
  outline: none; }
  .dropdown-menu-link.open .new-default-button .button-text, .dropdown-menu-link.open .new-default-button .new-button-text, .dropdown-menu-link.open .new-primary-button .button-text, .dropdown-menu-link.open .new-primary-button .new-button-text {
    color: #596573;
    text-shadow: 0px 1px #ffffff; }
  .dropdown-menu-link.open .new-default-button:hover:not(.unhovered), .dropdown-menu-link.open .new-primary-button:hover:not(.unhovered) {
    box-shadow: inset 0px 1px rgba(0, 0, 0, 0.12);
    -moz-box-shadow: inset 0px 1px rgba(0, 0, 0, 0.12);
    -webkit-box-shadow: inset 0px 1px rgba(0, 0, 0, 0.12);
    background-color: #DDE4EA;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#DDE4EA), color-stop(10%, #DDE4EA));
    background-image: -moz-linear-gradient(90deg, #DDE4EA 90%, #DDE4EA);
    background-image: -ms-linear-gradient(90deg, #DDE4EA 90%, #DDE4EA);
    border-color: #AFBCC8;
    outline: none; }
    .dropdown-menu-link.open .new-default-button:hover:not(.unhovered) .button-text, .dropdown-menu-link.open .new-default-button:hover:not(.unhovered) .new-button-text, .dropdown-menu-link.open .new-primary-button:hover:not(.unhovered) .button-text, .dropdown-menu-link.open .new-primary-button:hover:not(.unhovered) .new-button-text {
      color: #114D97;
      text-shadow: 0px 1px #ffffff; }
.dropdown-menu-link.open .new-primary-button .new-button-text {
  color: #596573;
  text-shadow: 0px 1px #ffffff; }
.dropdown-menu-link.open .new-default-button:hover:not(:focus):not(.unhovered) {
  box-shadow: inset 0px 1px rgba(0, 0, 0, 0.12);
  -moz-box-shadow: inset 0px 1px rgba(0, 0, 0, 0.12);
  -webkit-box-shadow: inset 0px 1px rgba(0, 0, 0, 0.12);
  background-color: #DDE4EA;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#DDE4EA), color-stop(10%, #DDE4EA));
  background-image: -moz-linear-gradient(90deg, #DDE4EA 90%, #DDE4EA);
  background-image: -ms-linear-gradient(90deg, #DDE4EA 90%, #DDE4EA);
  border-color: #AFBCC8;
  outline: none; }

.dropdown-menu-link.open .new-button {
  box-shadow: inset 0px 1px rgba(0, 0, 0, 0.12);
  -moz-box-shadow: inset 0px 1px rgba(0, 0, 0, 0.12);
  -webkit-box-shadow: inset 0px 1px rgba(0, 0, 0, 0.12);
  background-color: #DDE4EA;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#DDE4EA), color-stop(10%, #DDE4EA));
  background-image: -moz-linear-gradient(90deg, #DDE4EA 90%, #DDE4EA);
  background-image: -ms-linear-gradient(90deg, #DDE4EA 90%, #DDE4EA);
  border-color: #AFBCC8;
  outline: none; }
  .dropdown-menu-link.open .new-button .button-text, .dropdown-menu-link.open .new-button .new-button-text {
    color: #596573;
    text-shadow: 0px 1px #ffffff; }
  .dropdown-menu-link.open .new-button:hover:not(.unhovered) {
    box-shadow: inset 0px 1px rgba(0, 0, 0, 0.12);
    -moz-box-shadow: inset 0px 1px rgba(0, 0, 0, 0.12);
    -webkit-box-shadow: inset 0px 1px rgba(0, 0, 0, 0.12);
    background-color: #DDE4EA;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#DDE4EA), color-stop(10%, #DDE4EA));
    background-image: -moz-linear-gradient(90deg, #DDE4EA 90%, #DDE4EA);
    background-image: -ms-linear-gradient(90deg, #DDE4EA 90%, #DDE4EA);
    border-color: #AFBCC8;
    outline: none; }
    .dropdown-menu-link.open .new-button:hover:not(.unhovered) .button-text, .dropdown-menu-link.open .new-button:hover:not(.unhovered) .new-button-text {
      color: #114D97;
      text-shadow: 0px 1px #ffffff; }

.follow-button .glyph {
  margin-top: -2px;
  position: relative;
  top: 1px; }

.banner .new-default-button {
  background-color: #ECF0F3;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#ffffff), color-stop(10%, #ECF0F3));
  background-image: -moz-linear-gradient(90deg, #ECF0F3 90%, #ffffff);
  background-image: -ms-linear-gradient(90deg, #ECF0F3 90%, #ffffff); }

.new-button .new-button-text .loading-indicator {
  padding-top: 0px;
  padding-bottom: 0px; }

.example-button {
  margin-right: 8px; }

.primary-red-button {
  border: 1px solid #A71428;
  background-color: #F22659; }
  .primary-red-button.tall-button:not(.disabled) {
    background-color: #F22659; }
    .primary-red-button.tall-button:not(.disabled):hover:not(:focus):not(.unhovered):not(.disabled):not(.pressed) {
      background-color: #F22659;
      background-image: -webkit-gradient(linear, left top, left bottom, from(#F7A7BA), color-stop(100%, #F22659));
      background-image: -moz-linear-gradient(90deg, #F22659 0%, #F7A7BA);
      background-image: -ms-linear-gradient(90deg, #F22659 0%, #F7A7BA); }
  .primary-red-button .new-button-text, .primary-red-button .glyph {
    color: #ffffff;
    text-shadow: 0px -1px #A71428; }
  .primary-red-button:hover:not(:focus):not(.unhovered):not(.disabled):not(.pressed) {
    background-color: #F22659;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#F7A7BA), color-stop(100%, #F22659));
    background-image: -moz-linear-gradient(90deg, #F22659 0%, #F7A7BA);
    background-image: -ms-linear-gradient(90deg, #F22659 0%, #F7A7BA); }
  .primary-red-button.pressed {
    box-shadow: inset 0px 1px rgba(0, 0, 0, 0.12);
    -moz-box-shadow: inset 0px 1px rgba(0, 0, 0, 0.12);
    -webkit-box-shadow: inset 0px 1px rgba(0, 0, 0, 0.12);
    background-color: #F22659;
    border-color: #A71428;
    outline: none; }

.wide-button .new-button-text {
  width: 50px; }

html {
  height: 100%; }

body {
  font-family: "proxima-nova", "Helvetica Neue", Arial, sans-serif;
  background-color: #CED7E0;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#DDE4EA), color-stop(100%, #CED7E0));
  background-image: -moz-linear-gradient(90deg, #CED7E0 0%, #DDE4EA);
  background-image: -ms-linear-gradient(90deg, #CED7E0 0%, #DDE4EA);
  color: #212F40;
  overflow: hidden;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box; }

a {
  cursor: pointer;
  text-decoration: none;
  color: #1F8DD6; }
  a:hover {
    text-decoration: underline; }
  a:focus {
    outline: none; }

.tab-ring:focus {
  outline: none; }

label {
  cursor: pointer; }

input::-ms-clear {
  display: none; }

.webkit .bg-pattern {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -1;
  background: url('https://d3ki9tyy5l5ruj.cloudfront.net/obj/c3f032ddc8aa007e59a6f87b4d1afb42442d4cdf/blue-slant-pattern.png');
  -webkit-mask: -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.5, rgba(0, 0, 0, 0.9))); }

#whole_page_container {
  display: -webkit-box;
  display: -moz-box;
  display: box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  box-orient: vertical;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  flex-direction: column;
  -ms-flex-direction: column;
  bottom: 0;
  left: 0;
  overflow-x: auto;
  overflow-y: hidden;
  position: fixed;
  right: 0;
  top: 0; }

#asana_ui {
  display: -webkit-box;
  display: -moz-box;
  display: box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  box-flex: 1;
  -webkit-flex: 1;
  -moz-flex: 1;
  -ms-flex: 1;
  flex: 1;
  min-height: 0; }

#asana_main {
  display: -webkit-box;
  display: -moz-box;
  display: box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  box-flex: 1;
  -webkit-flex: 1;
  -moz-flex: 1;
  -ms-flex: 1;
  flex: 1;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  box-orient: vertical;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  flex-direction: column;
  -ms-flex-direction: column; }

.three-panes {
  -webkit-transition: min-width 0.25s ease-out;
  -moz-transition: min-width 0.25s ease-out;
  transition: min-width 0.25s ease-out;
  min-width: 1025px;
  display: -webkit-box;
  display: -moz-box;
  display: box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  box-flex: 1;
  -webkit-flex: 1;
  -moz-flex: 1;
  -ms-flex: 1;
  flex: 1;
  min-height: 0; }
  .left-pane-collapsed + #asana_main > .three-panes {
    min-width: 1130px; }
  #Flags.enable_remix_topbar .three-panes {
    -webkit-box-pack: center;
    -moz-box-pack: center;
    box-pack: center;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    -ms-justify-content: center;
    -o-justify-content: center;
    justify-content: center;
    -ms-flex-pack: center; }

#center_pane, #right_pane {
  display: -webkit-box;
  display: -moz-box;
  display: box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  box-orient: vertical;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  flex-direction: column;
  -ms-flex-direction: column;
  background-color: #ffffff;
  border: 1px solid #9CACBC;
  min-height: 0;
  border-radius: 6px 6px 0px 0px;
  -webkit-border-radius: 6px 6px 0px 0px; }
  #Flags:not(.enable_remix_topbar) #center_pane, #Flags:not(.enable_remix_topbar) #right_pane {
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3); }

#center_pane_container,
#right_pane_container {
  display: -webkit-box;
  display: -moz-box;
  display: box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  box-orient: vertical;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  flex-direction: column;
  -ms-flex-direction: column;
  min-width: 0;
  position: relative; }

#right_pane_container {
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  box-flex: 1;
  -webkit-flex: 1;
  -moz-flex: 1;
  -ms-flex: 1;
  flex: 1;
  -webkit-box-pack: start;
  -moz-box-pack: start;
  box-pack: start;
  -webkit-justify-content: flex-start;
  -moz-justify-content: flex-start;
  -ms-justify-content: flex-start;
  -o-justify-content: flex-start;
  justify-content: flex-start;
  -ms-flex-pack: start;
  -webkit-transition: margin-left 0.2s;
  -moz-transition: margin-left 0.2s;
  transition: margin-left 0.2s;
  margin-left: -1px;
  margin-right: 30px;
  max-width: 636px;
  padding: 6px 0;
  z-index: 0; }
  .details-invisible #right_pane_container {
    margin-left: -636px; }

#left_pane .list-item {
  -webkit-mask: none; }

#center_pane_container {
  -webkit-transition: margin-left 0.25s ease-out, width 0.25s ease-out;
  -moz-transition: margin-left 0.25s ease-out, width 0.25s ease-out;
  transition: margin-left 0.25s ease-out, width 0.25s ease-out;
  -webkit-box-flex: 1.13;
  -moz-box-flex: 1.13;
  box-flex: 1.13;
  -webkit-flex: 1.13 1 0%;
  -moz-flex: 1.13 1 0%;
  -ms-flex: 1.13 1 0%;
  flex: 1.13 1 0%;
  padding-top: 6px;
  z-index: 1; }
  .left-pane-collapsed + #center_pane_container {
    margin-left: -195px; }
  #Flags.enable_remix_topbar #center_pane_container {
    margin-left: 30px; }
  #Flags:not(.ie) #center_pane_container.notifications {
    max-width: 700px; }
  #Flags:not(.ie) #center_pane_container.team-page, #Flags:not(.ie) #center_pane_container.conversation-page {
    max-width: 630px; }
  #center_pane_container.dashboard, #center_pane_container.team-page, #center_pane_container.conversation-page, #center_pane_container.attachment-gallery-center-pane-container, #center_pane_container.calendar-center-pane-container {
    margin-right: 30px; }
    #center_pane_container.dashboard > #center_pane, #center_pane_container.team-page > #center_pane, #center_pane_container.conversation-page > #center_pane, #center_pane_container.attachment-gallery-center-pane-container > #center_pane, #center_pane_container.calendar-center-pane-container > #center_pane {
      border-radius: 6px 6px 0 0; }

#center_pane {
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  box-flex: 1;
  -webkit-flex: 1;
  -moz-flex: 1;
  -ms-flex: 1;
  flex: 1;
  border-bottom: none; }

#right_pane {
  border-radius: 0px 6px 0px 0px;
  -webkit-border-radius: 0px 6px 0px 0px;
  -webkit-transition: width 0.25s ease-out;
  -moz-transition: width 0.25s ease-out;
  transition: width 0.25s ease-out;
  position: relative; }

@media (max-width: 1134px) {
  .details-maximized .logo {
    display: none; } }
.details-maximized #right_pane_container {
  box-sizing: border-box;
  height: 100%;
  margin: 0 auto;
  max-width: 910px;
  min-width: 470px; }

.details-maximized #right_pane {
  position: relative;
  border-radius: 6px; }

.details-maximized .logo {
  position: absolute;
  left: 14px;
  top: 14px; }

#nav_search_input {
  border: 1px solid #AFBCC8;
  width: 173px;
  padding-left: 23px;
  padding-right: 27px;
  height: 17px; }
  #nav_search_input::-webkit-input-placeholder {
    color: #999999; }
  #nav_search_input:-moz-placeholder {
    color: #999999; }
  #nav_search_input:-ms-input-placeholder {
    color: #999999; }

textarea#nav_search_input {
  margin-bottom: -8px; }

.tags-dropdown-wrapper {
  background: white;
  border-left: 1px solid #E5E5E5;
  height: 23px;
  width: 24px;
  position: relative;
  left: 199px;
  top: -24px; }

#Flags.ie .tags-dropdown-wrapper {
  top: -19px; }

.tags-dropdown-icon {
  cursor: pointer;
  background-image: url('https://d3ki9tyy5l5ruj.cloudfront.net/obj/935fd1f4a082b7d2d6d984cae0d5e51c9733f5c6/sprite.png');
  background-position: 7px -40px;
  background-repeat: no-repeat;
  display: inline-block;
  width: 24px;
  height: 24px; }
  .tags-dropdown-icon:hover {
    background-image: url('https://d3ki9tyy5l5ruj.cloudfront.net/obj/935fd1f4a082b7d2d6d984cae0d5e51c9733f5c6/sprite.png');
    background-position: -93px -40px;
    background-repeat: no-repeat;
    display: inline-block;
    width: 24px;
    height: 24px; }

.details-visible #center_pane {
  border-radius: 6px 0px 0px 0px;
  -webkit-border-radius: 6px 0px 0px 0px; }

.token_name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; }

#right_pane__contents {
  -webkit-flex-shrink: 1;
  -moz-flex-shrink: 1;
  flex-shrink: 1;
  -ms-flex-negative: 1;
  overflow-y: auto;
  overflow-x: hidden; }
  #right_pane__contents::-webkit-scrollbar {
    width: 14px; }
  #right_pane__contents::-webkit-scrollbar-thumb {
    box-shadow: inset 0px -1px rgba(0, 0, 0, 0.12);
    -moz-box-shadow: inset 0px -1px rgba(0, 0, 0, 0.12);
    -webkit-box-shadow: inset 0px -1px rgba(0, 0, 0, 0.12);
    background: rgba(0, 0, 0, 0.05); }
    #right_pane__contents::-webkit-scrollbar-thumb:hover {
      background: rgba(0, 0, 0, 0.08); }
  #right_pane__contents::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05); }

/**
* Keeps an element out of view of the user, without display:none.
*/
.offscreen {
  position: fixed;
  top: -5000px;
  height: 10px; }

.printer-warning {
  display: none; }

@media print {
  div.printer-warning {
    display: block;
    padding: 15px;
    border: solid 2px black;
    margin-bottom: 10px;
    position: absolute;
    background: white; } }
#view_test_container {
  display: block;
  height: 100%; }

#debug_console_bar {
  position: fixed;
  top: 0px;
  opacity: 0;
  font-size: 12px; }
  #debug_console_bar:hover {
    opacity: 1; }
  #debug_console_bar a {
    color: #91CEFF; }
  #debug_console_bar #debug_console_flag_settings_tokenizer {
    width: 200px; }

/**
 * Visually replaces the element with "...", but if you copy-paste it, you'll
 * get the original content.
 */
.ellipsis {
  max-width: 1.4ex;
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  vertical-align: text-bottom;
  word-wrap: normal; }
  .ellipsis:before {
    content: '...'; }

/*
 * Hacks the Facebook Like button CSS to be able to render decently inside the
 * "Share Asana" dropdown, as the button doesn't work inside of an element that's
 * absolutely positioned.
 */
.fb-like {
  float: left; }

.fb-like.fb_iframe_widget.fb_edge_widget_with_comment span.fb_edge_comment_widget {
  position: static;
  overflow: hidden;
  display: block;
  height: 300px; }

.guest-icon {
  background-image: url('https://d3ki9tyy5l5ruj.cloudfront.net/obj/935fd1f4a082b7d2d6d984cae0d5e51c9733f5c6/sprite.png');
  background-position: 0px -1875px;
  background-repeat: no-repeat;
  display: inline-block;
  width: 13px;
  height: 13px;
  vertical-align: text-bottom;
  cursor: pointer; }
  .guest-icon:hover {
    background-image: url('https://d3ki9tyy5l5ruj.cloudfront.net/obj/935fd1f4a082b7d2d6d984cae0d5e51c9733f5c6/sprite.png');
    background-position: -200px -1875px;
    background-repeat: no-repeat; }

.non-guest-icon {
  display: inline-block;
  vertical-align: text-bottom;
  cursor: pointer;
  background-image: url('https://d3ki9tyy5l5ruj.cloudfront.net/obj/935fd1f4a082b7d2d6d984cae0d5e51c9733f5c6/sprite.png');
  background-position: -100px -1925px;
  background-repeat: no-repeat;
  display: inline-block;
  width: 13px;
  height: 13px; }
  .non-guest-icon:hover {
    background-image: url('https://d3ki9tyy5l5ruj.cloudfront.net/obj/935fd1f4a082b7d2d6d984cae0d5e51c9733f5c6/sprite.png');
    background-position: -200px -1925px;
    background-repeat: no-repeat; }

.checkbox:not(.glyph) {
  display: inline-block;
  height: 16px;
  width: 15px;
  background-image: url('https://d3ki9tyy5l5ruj.cloudfront.net/obj/935fd1f4a082b7d2d6d984cae0d5e51c9733f5c6/sprite.png');
  background-position: 0px -851px;
  background-repeat: no-repeat;
  cursor: pointer; }
  .checkbox:not(.glyph):hover {
    background-position: -100px -851px; }
  .checkbox:not(.glyph).checked {
    background-image: url('https://d3ki9tyy5l5ruj.cloudfront.net/obj/935fd1f4a082b7d2d6d984cae0d5e51c9733f5c6/sprite.png');
    background-position: -200px -851px;
    background-repeat: no-repeat; }
    .checkbox:not(.glyph).checked:hover {
      background-position: -300px -851px; }

.grid_due_date {
  display: inline-block; }
  .grid_due_date.overdue {
    color: #F22659; }
  .grid_due_date.due_soon {
    color: #34AD00; }

.click-target {
  cursor: pointer; }

.empty-relative-element {
  position: relative;
  width: 0;
  height: 0; }

/**
 * Dialogs that cover the entire screen. Note that these dialogs appear
 * on top of the dropdowns and other dialogs so you cannot use normal dialogs
 * or dropdowns within a fullscreen-dialog for now.
 */
.fullscreen-dialog {
  background-color: #CED7E0;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#DDE4EA), color-stop(100%, #CED7E0));
  background-image: -moz-linear-gradient(90deg, #CED7E0 0%, #DDE4EA);
  background-image: -ms-linear-gradient(90deg, #CED7E0 0%, #DDE4EA);
  overflow-y: auto;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%; }
  .fullscreen-dialog::-webkit-scrollbar {
    width: 14px; }
  .fullscreen-dialog::-webkit-scrollbar-thumb {
    box-shadow: inset 0px -1px rgba(0, 0, 0, 0.12);
    -moz-box-shadow: inset 0px -1px rgba(0, 0, 0, 0.12);
    -webkit-box-shadow: inset 0px -1px rgba(0, 0, 0, 0.12);
    background: rgba(0, 0, 0, 0.05); }
    .fullscreen-dialog::-webkit-scrollbar-thumb:hover {
      background: rgba(0, 0, 0, 0.08); }
  .fullscreen-dialog::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05); }
  .fullscreen-dialog.dialog-page .formpage-spacer {
    height: 70px; }

.vertical-middle-harness {
  display: table;
  width: 100%;
  height: 100%; }

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

.webkit .fullscreen-dialog .bg-pattern {
  min-height: 749px; }

/* The div that covers the rest of the window when a dialog is open. */
.dialog-background {
  opacity: 0.6;
  background-color: #596573;
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0; }

.dialog-box {
  border: 1px solid #9CACBC;
  background-color: white;
  border-radius: 6px 6px 6px 6px;
  -webkit-border-radius: 6px 6px 6px 6px;
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
  font-size: 14px; }
  .dialog-box .delete {
    cursor: pointer;
    visibility: visible;
    background-image: url('https://d3ki9tyy5l5ruj.cloudfront.net/obj/935fd1f4a082b7d2d6d984cae0d5e51c9733f5c6/sprite.png');
    background-position: 0px -1300px;
    background-repeat: no-repeat;
    width: 13px;
    height: 14px;
    float: right;
    margin-top: 10px;
    margin-right: 10px; }
    .dialog-box .delete:hover {
      background-position: -100px -1300px; }
    .dialog-box .delete:hover {
      visibility: visible; }
  .dialog-box .dialog-title {
    padding-top: 14px;
    padding-bottom: 10px;
    padding-left: 14px;
    font-size: 17px;
    font-weight: 700;
    background-color: #F2F2F2;
    color: #596573;
    text-shadow: 0px 1px #ffffff;
    border-bottom: 1px solid #E5E5E5;
    border-radius: 5px 5px 0px 0px;
    -webkit-border-radius: 5px 5px 0px 0px; }
  .dialog-box .content {
    width: 481px;
    overflow-y: visible; }
  .dialog-box .content.scrollable {
    overflow-y: auto;
    overflow-x: hidden; }
    .dialog-box .content.scrollable::-webkit-scrollbar {
      width: 14px; }
    .dialog-box .content.scrollable::-webkit-scrollbar-thumb {
      box-shadow: inset 0px -1px rgba(0, 0, 0, 0.12);
      -moz-box-shadow: inset 0px -1px rgba(0, 0, 0, 0.12);
      -webkit-box-shadow: inset 0px -1px rgba(0, 0, 0, 0.12);
      background: rgba(0, 0, 0, 0.05); }
      .dialog-box .content.scrollable::-webkit-scrollbar-thumb:hover {
        background: rgba(0, 0, 0, 0.08); }
    .dialog-box .content.scrollable::-webkit-scrollbar-track {
      background: rgba(0, 0, 0, 0.05); }
  .dialog-box .banner {
    max-width: 481px; }
  .dialog-box .buttons {
    margin-top: 14px;
    margin-bottom: 14px; }
    .dialog-box .buttons .button-spacer {
      display: inline-block;
      width: 126px; }
    .dialog-box .buttons .button {
      margin-left: 5px; }
  .dialog-box .checkbox.checked {
    background-image: url('https://d3ki9tyy5l5ruj.cloudfront.net/obj/935fd1f4a082b7d2d6d984cae0d5e51c9733f5c6/sprite.png');
    background-position: -500px -851px;
    background-repeat: no-repeat; }
    .dialog-box .checkbox.checked:hover {
      background-image: url('https://d3ki9tyy5l5ruj.cloudfront.net/obj/935fd1f4a082b7d2d6d984cae0d5e51c9733f5c6/sprite.png');
      background-position: -300px -851px;
      background-repeat: no-repeat; }
  .dialog-box .footer .new-button {
    font-size: 14px;
    padding-top: 6px;
    padding-bottom: 6px; }

#dropbox_upload_dialog_view.dialog2 {
  width: 660px; }

#dropbox_upload_dialog_view .content {
  padding: 0;
  width: 660px;
  height: 440px; }
#dropbox_upload_dialog_view iframe {
  border: 0;
  margin: 0;
  padding: 0;
  width: 660px;
  height: 440px;
  overflow-x: hidden;
  overflow-y: hidden; }

#duplicate_object_dialog .banner {
  font-size: 12px;
  color: #596573;
  padding-top: 10px;
  padding-right: 14px;
  padding-bottom: 10px;
  padding-left: 14px; }
#duplicate_object_dialog .field-name {
  width: 75px;
  padding-right: 5px;
  padding-bottom: 0px;
  text-align: left; }
#duplicate_object_dialog .name-row .field-value {
  padding-bottom: 10px; }
#duplicate_object_dialog .option-row .field-value {
  padding-top: 10px; }
  #duplicate_object_dialog .option-row .field-value span {
    font-size: 12px;
    font-weight: 600;
    margin-left: 5px; }
#duplicate_object_dialog .buttons .button-spacer {
  width: 88px; }

#welcome_premium_workspace_dialog_view .dialog-title {
  background: transparent;
  color: #114D97;
  border-bottom-color: transparent; }
#welcome_premium_workspace_dialog_view .banner {
  background: transparent;
  font-weight: 600;
  border-bottom-color: transparent;
  box-shadow: none;
  -moz-box-shadow: none;
  -webkit-box-shadow: none; }
#welcome_premium_workspace_dialog_view .content {
  padding: 0px; }

#premium_announcement_dialog.dialog-box .content {
  padding: 0px 0px 20px; }
#premium_announcement_dialog.dialog-box p {
  padding: 14px 14px 0px; }
#premium_announcement_dialog.dialog-box .hr {
  background: #E5E5E5;
  height: 1px;
  margin-top: 14px; }
#premium_announcement_dialog.dialog-box img {
  float: right;
  margin-left: 10px;
  margin-right: 14px; }
#premium_announcement_dialog.dialog-box strong {
  font-weight: 600; }

/* This view is a two-column table, field names on the left
   and values on the right. */
.form-view {
  /* Buttons in a field view are left-aligned with
     the field values. */ }
  .form-view table {
    width: 100%; }
  .form-view .field-name {
    font-size: 12px;
    font-weight: 600;
    color: #999999;
    padding-right: 14px;
    text-align: right;
    width: 100px; }
  .form-view .field-value {
    padding-top: 10px; }
    .form-view .field-value .generic-input {
      width: 336px; }
    .form-view .field-value .checkbox-opt-in {
      margin-bottom: -3px;
      margin-right: 5px; }
  .form-view .field-description {
    font-size: 12px;
    color: #999999;
    padding-top: 3px; }
  .form-view .field-description.alert {
    color: #F22659; }
  .form-view .field-description.valid {
    display: none; }
  .form-view .field-status {
    padding: 16px 0px 4px 4px; }
  .form-view .field-title {
    font-size: 17px;
    font-weight: 600;
    color: #114D97;
    padding-top: 4px; }
  .form-view .field-title-number {
    border: 5px solid #E5E5E5;
    border-radius: 4px 4px 4px 4px;
    -webkit-border-radius: 4px 4px 4px 4px;
    display: inline-block;
    color: #AFBCC8;
    float: left;
    font: 14px "proxima-nova", "Helvetica Neue", Arial, sans-serif;
    font-weight: 700;
    padding: 1px;
    text-align: center;
    width: 16px;
    margin-top: -6px;
    margin-right: 9px; }
  .form-view .spacer {
    padding: 2px 0px; }
  .form-view .separator {
    height: 0px;
    border-top: 1px solid #C0CCD7;
    border-bottom: 1px solid #ffffff;
    position: relative; }
  .form-view .buttons {
    padding-top: 10px;
    padding-bottom: 9px; }

.field-name {
  text-align: right; }

.field-value {
  padding-top: 10px; }
  .field-value .checkbox-opt-in {
    margin-bottom: -3px;
    margin-right: 5px; }

.dialog-box, .formpage-content, .invite-user-view, .dropdown {
  /* Icons used anywhere in the dialog */
  /* A confirmation message with a checkmark icon. */
  /* Note next to a button */
  /* Used if the form-view or property-sheet-view is not used.
  .dialog-padding {
    padding: 10px 14px;
    p {
      margin-bottom: 1.8ex; #TODO what is this???
    }
  }*/ }
  .dialog-box .banner, .formpage-content .banner, .invite-user-view .banner, .dropdown .banner {
    background-color: #ECF0F3;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#DDE4EA), color-stop(100%, #ECF0F3));
    background-image: -moz-linear-gradient(90deg, #ECF0F3 0%, #DDE4EA);
    background-image: -ms-linear-gradient(90deg, #ECF0F3 0%, #DDE4EA);
    box-shadow: inset 0px 1px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: inset 0px 1px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: inset 0px 1px rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid #CED7E0;
    color: #596573;
    color: #212F40;
    padding: 7px 10px 5px 14px; }
    .dialog-box .banner td, .formpage-content .banner td, .invite-user-view .banner td, .dropdown .banner td {
      font-size: 12px;
      padding-top: 2px; }
    .dialog-box .banner.error td, .formpage-content .banner.error td, .invite-user-view .banner.error td, .dropdown .banner.error td {
      color: #F22659; }
    .dialog-box .banner .icon-error, .formpage-content .banner .icon-error, .invite-user-view .banner .icon-error, .dropdown .banner .icon-error {
      background-image: url('https://d3ki9tyy5l5ruj.cloudfront.net/obj/935fd1f4a082b7d2d6d984cae0d5e51c9733f5c6/sprite.png');
      background-position: 0px -1600px;
      background-repeat: no-repeat;
      width: 19px;
      min-width: 19px;
      height: 16px;
      min-height: 16px;
      padding-left: 20px; }
    .dialog-box .banner td.icon, .formpage-content .banner td.icon, .invite-user-view .banner td.icon, .dropdown .banner td.icon {
      padding-right: 10px; }
  .dialog-box .divider, .formpage-content .divider, .invite-user-view .divider, .dropdown .divider {
    border-top: 1px solid #E5E5E5;
    margin-top: 10px; }
  .dialog-box td.icon, .formpage-content td.icon, .invite-user-view td.icon, .dropdown td.icon {
    padding: 0px; }
    .dialog-box td.icon.error, .formpage-content td.icon.error, .invite-user-view td.icon.error, .dropdown td.icon.error {
      background-image: url('https://d3ki9tyy5l5ruj.cloudfront.net/obj/935fd1f4a082b7d2d6d984cae0d5e51c9733f5c6/sprite.png');
      background-position: 0px -1600px;
      background-repeat: no-repeat;
      width: 19px;
      min-width: 19px;
      height: 16px;
      min-height: 16px; }
    .dialog-box td.icon.check, .formpage-content td.icon.check, .invite-user-view td.icon.check, .dropdown td.icon.check {
      background-image: url('https://d3ki9tyy5l5ruj.cloudfront.net/obj/935fd1f4a082b7d2d6d984cae0d5e51c9733f5c6/sprite.png');
      background-position: -100px -1600px;
      background-repeat: no-repeat;
      width: 19px;
      min-width: 19px;
      height: 16px;
      min-height: 16px; }
  .dialog-box .button, .formpage-content .button, .invite-user-view .button, .dropdown .button {
    font-size: 14px;
    padding: 6px 10px; }
  .dialog-box .content, .formpage-content .content, .invite-user-view .content, .dropdown .content {
    padding-top: 10px;
    padding-right: 14px;
    padding-bottom: 10px;
    padding-left: 14px; }
    .dialog-box .content ul, .formpage-content .content ul, .invite-user-view .content ul, .dropdown .content ul {
      list-style: outside;
      padding-left: 1.5em;
      line-height: 18px; }
  .dialog-box .new-workspace-dialog-message, .formpage-content .new-workspace-dialog-message, .invite-user-view .new-workspace-dialog-message, .dropdown .new-workspace-dialog-message {
    color: #212F40;
    padding: 8px 0px; }
    .dialog-box .new-workspace-dialog-message .new_workspace_dialog_image, .formpage-content .new-workspace-dialog-message .new_workspace_dialog_image, .invite-user-view .new-workspace-dialog-message .new_workspace_dialog_image, .dropdown .new-workspace-dialog-message .new_workspace_dialog_image {
      padding: 0px 20px 0px 0px; }
  .dialog-box .acknowledgment, .formpage-content .acknowledgment, .invite-user-view .acknowledgment, .dropdown .acknowledgment {
    padding: 4px 14px; }
    .dialog-box .acknowledgment td:nth-child(2), .formpage-content .acknowledgment td:nth-child(2), .invite-user-view .acknowledgment td:nth-child(2), .dropdown .acknowledgment td:nth-child(2) {
      padding: 0px 16px 4px 16px;
      font-size: 14px; }
    .dialog-box .acknowledgment td, .formpage-content .acknowledgment td, .invite-user-view .acknowledgment td, .dropdown .acknowledgment td {
      vertical-align: middle; }
  .dialog-box .header, .formpage-content .header, .invite-user-view .header, .dropdown .header {
    text-transform: uppercase;
    font-size: 11px;
    font-weight: 700;
    color: #596573;
    margin-bottom: 4px; }
  .dialog-box .field-description, .formpage-content .field-description, .invite-user-view .field-description, .dropdown .field-description {
    font-size: 12px;
    color: #999999;
    padding-top: 3px; }
  .dialog-box .field-description.alert, .formpage-content .field-description.alert, .invite-user-view .field-description.alert, .dropdown .field-description.alert {
    color: #F22659; }
  .dialog-box .field-description.valid, .formpage-content .field-description.valid, .invite-user-view .field-description.valid, .dropdown .field-description.valid {
    visibility: hidden; }
  .dialog-box .field-status, .formpage-content .field-status, .invite-user-view .field-status, .dropdown .field-status {
    padding: 16px 0px 4px 4px; }
  .dialog-box .note, .formpage-content .note, .invite-user-view .note, .dropdown .note {
    font-size: 11px;
    color: #999999;
    margin-top: 4px; }
  .dialog-box p:not(:first-of-type), .formpage-content p:not(:first-of-type), .invite-user-view p:not(:first-of-type), .dropdown p:not(:first-of-type) {
    padding-top: 11px; }
  .dialog-box .footer-top, .formpage-content .footer-top, .invite-user-view .footer-top, .dropdown .footer-top {
    margin-top: 2px; }
  .dialog-box .footer-buttons-left, .dialog-box .footer-buttons-right, .formpage-content .footer-buttons-left, .formpage-content .footer-buttons-right, .invite-user-view .footer-buttons-left, .invite-user-view .footer-buttons-right, .dropdown .footer-buttons-left, .dropdown .footer-buttons-right {
    padding: 10px 14px; }
    .dialog-box .footer-buttons-left .button:last-of-type, .dialog-box .footer-buttons-right .button:last-of-type, .formpage-content .footer-buttons-left .button:last-of-type, .formpage-content .footer-buttons-right .button:last-of-type, .invite-user-view .footer-buttons-left .button:last-of-type, .invite-user-view .footer-buttons-right .button:last-of-type, .dropdown .footer-buttons-left .button:last-of-type, .dropdown .footer-buttons-right .button:last-of-type {
      margin-left: 5px; }
  .dialog-box .footer-buttons-right, .formpage-content .footer-buttons-right, .invite-user-view .footer-buttons-right, .dropdown .footer-buttons-right {
    float: right; }
    .dialog-box .footer-buttons-right .asana-button, .formpage-content .footer-buttons-right .asana-button, .invite-user-view .footer-buttons-right .asana-button, .dropdown .footer-buttons-right .asana-button {
      margin: 4px 0px 4px 6px;
      /* invert margins to right-align */ }

#google_auth_row .buttons {
  padding-top: 0px; }

#google_auth_separator {
  margin-top: 9px;
  margin-bottom: 12px; }

.or_separator {
  position: absolute;
  padding: 0px 16px;
  color: #C0CCD7;
  background: #ECF0F3;
  font-size: 11px;
  text-shadow: 0px 1px 0px #ffffff;
  text-transform: uppercase;
  top: -7px;
  left: 30%; }

.login-page-separator .or_separator {
  left: 38%; }

.domain-link-page-separator .or_separator {
  left: 39%; }

.signup-page-separator .or_separator {
  left: 42%; }

/*
 * This css can be used to render a simple page with one big dialog box in the
 * center. Current examples: login.soy and forgot_password.soy
 */
.billing-dialog-page {
  background: none;
  background-color: #DCDFE0;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#ffffff), color-stop(100%, #DCDFE0));
  background-image: -moz-linear-gradient(90deg, #DCDFE0 0%, #ffffff);
  background-image: -ms-linear-gradient(90deg, #DCDFE0 0%, #ffffff);
  text-align: center;
  -webkit-mask: none; }
  .billing-dialog-page .visual-redesign-button {
    border: none;
    color: #ffffff;
    background-color: #69489C;
    box-shadow: none; }
    .billing-dialog-page .visual-redesign-button .new-button-text, .billing-dialog-page .visual-redesign-button .glyph {
      color: #ffffff;
      text-shadow: none;
      font-weight: 400; }
    .billing-dialog-page .visual-redesign-button:hover:not(:focus):not(.unhovered):not(.disabled):not(.pressed) {
      border: none;
      background-color: #9e84c6;
      background-color: #69489C;
      background-image: -webkit-gradient(linear, left top, left bottom, from(#69489C), color-stop(100%, #69489C));
      background-image: -moz-linear-gradient(90deg, #69489C 0%, #69489C);
      background-image: -ms-linear-gradient(90deg, #69489C 0%, #69489C); }
      .billing-dialog-page .visual-redesign-button:hover:not(:focus):not(.unhovered):not(.disabled):not(.pressed) .new-button-text, .billing-dialog-page .visual-redesign-button:hover:not(:focus):not(.unhovered):not(.disabled):not(.pressed) .right-button-icon {
        text-shadow: none;
        color: #ffffff; }
    .billing-dialog-page .visual-redesign-button.pressed {
      box-shadow: inset 0px 1px rgba(0, 0, 0, 0.12);
      -moz-box-shadow: inset 0px 1px rgba(0, 0, 0, 0.12);
      -webkit-box-shadow: inset 0px 1px rgba(0, 0, 0, 0.12);
      background-color: #DDE4EA;
      border-color: #AFBCC8;
      outline: none; }
      .billing-dialog-page .visual-redesign-button.pressed .new-button-text {
        color: #596573;
        text-shadow: 0px 1px #ffffff; }
      .billing-dialog-page .visual-redesign-button.pressed:hover:not(.unhovered) .new-button-text {
        color: #114D97;
        text-shadow: 0px 1px #ffffff; }
  .billing-dialog-page .main-headline {
    font-size: 62px;
    font-weight: 200;
    margin-top: 60px;
    margin-bottom: 20px;
    color: #1E8CD4; }
  .billing-dialog-page div.headline {
    clear: both;
    font-size: 32px;
    font-weight: 200;
    text-align: center;
    position: relative;
    color: #767D81;
    margin-bottom: 15px; }
    .billing-dialog-page div.headline .headline-text {
      display: inline-block; }
    .billing-dialog-page div.headline .headline-text:before,
    .billing-dialog-page div.headline .headline-text:after {
      border-top: 1px solid #C1C6C9;
      display: block;
      height: 1px;
      content: " ";
      width: 35%;
      position: absolute;
      left: 0;
      top: 0.5em; }
    .billing-dialog-page div.headline .headline-text:after {
      right: 0;
      left: auto; }
  .billing-dialog-page .sidebars {
    margin: 0px auto;
    width: 900px;
    margin-bottom: 20px; }
  .billing-dialog-page .helper-text {
    font-size: 12px;
    text-transform: uppercase;
    color: #2A3035; }
  .billing-dialog-page .billing-button {
    display: inline-block;
    padding: 10px;
    width: 200px;
    margin-top: 20px;
    text-transform: uppercase;
    font-size: 22px;
    border-radius: 3px;
    cursor: pointer; }
  .billing-dialog-page .contact-sales-button {
    background-color: #9FA6AB;
    color: #3B474D;
    margin-top: 10px; }
    .billing-dialog-page .contact-sales-button:hover {
      background-color: #767D81; }
  .billing-dialog-page ul.feature-list {
    margin-top: 10px;
    margin-bottom: 15px;
    cursor: pointer;
    overflow: hidden; }
    .billing-dialog-page ul.feature-list li.feature {
      display: inline-block;
      border-radius: 5px 5px 5px 5px;
      -webkit-border-radius: 5px 5px 5px 5px;
      width: 185px;
      height: 150px;
      padding: 20px;
      font-size: 20px;
      line-height: 26px;
      vertical-align: top; }
      .billing-dialog-page ul.feature-list li.feature .only-orgs {
        display: none; }
      .billing-dialog-page ul.feature-list li.feature .feature-icon {
        display: block;
        height: 50px;
        width: 50px;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 15px; }
        .billing-dialog-page ul.feature-list li.feature .feature-icon.pink, .billing-dialog-page ul.feature-list li.feature .feature-icon.orange, .billing-dialog-page ul.feature-list li.feature .feature-icon.green, .billing-dialog-page ul.feature-list li.feature .feature-icon.blue {
          background-image: url('https://d3ki9tyy5l5ruj.cloudfront.net/obj/2d82d0c4e41e170d270cfb78db0580c17834ed25/billing-icons.png');
          background-repeat: no-repeat; }
        .billing-dialog-page ul.feature-list li.feature .feature-icon.pink {
          background-position: 0 0; }
        .billing-dialog-page ul.feature-list li.feature .feature-icon.orange {
          background-position: 0 -50px; }
        .billing-dialog-page ul.feature-list li.feature .feature-icon.green {
          background-position: -100px 0; }
        .billing-dialog-page ul.feature-list li.feature .feature-icon.blue {
          background-position: 0 -100px; }
      .billing-dialog-page ul.feature-list li.feature .feature-desc {
        display: none;
        padding-top: 10px;
        font-size: 12px; }
      .billing-dialog-page ul.feature-list li.feature.blue {
        color: #1E8CD4; }
      .billing-dialog-page ul.feature-list li.feature.green {
        color: #6BC24B; }
      .billing-dialog-page ul.feature-list li.feature.orange {
        color: #FF9720; }
      .billing-dialog-page ul.feature-list li.feature.pink {
        color: #FF7163; }
      .billing-dialog-page ul.feature-list li.feature.grey {
        color: #767D81;
        border: none;
        font-size: 14px;
        line-height: 18px; }
        .billing-dialog-page ul.feature-list li.feature.grey .feature-title {
          display: none; }
        .billing-dialog-page ul.feature-list li.feature.grey .feature-desc {
          display: inline-block;
          padding-top: 10px;
          font-size: 12px; }
        .billing-dialog-page ul.feature-list li.feature.grey .feature-icon.pink {
          -webkit-filter: grayscale(100%);
          -moz-filter: grayscale(100%);
          filter: grayscale(100%); }
        .billing-dialog-page ul.feature-list li.feature.grey .only-orgs {
          display: block;
          font-weight: 700;
          padding-top: 5px;
          color: #915BC3; }
      .billing-dialog-page ul.feature-list li.feature:hover {
        font-size: 14px;
        line-height: 18px;
        color: #ffffff; }
        .billing-dialog-page ul.feature-list li.feature:hover.blue {
          background-color: #1E8CD4; }
        .billing-dialog-page ul.feature-list li.feature:hover.green {
          background-color: #6BC24B; }
        .billing-dialog-page ul.feature-list li.feature:hover.orange {
          background-color: #FF7223; }
        .billing-dialog-page ul.feature-list li.feature:hover.pink {
          background-color: #FF7163; }
        .billing-dialog-page ul.feature-list li.feature:hover.grey {
          color: #767D81; }
          .billing-dialog-page ul.feature-list li.feature:hover.grey .feature-icon.pink {
            -webkit-filter: grayscale(100%);
            -moz-filter: grayscale(100%);
            filter: grayscale(100%); }
          .billing-dialog-page ul.feature-list li.feature:hover.grey .feature-icon.pink {
            background-position: 0 0; }
        .billing-dialog-page ul.feature-list li.feature:hover .feature-icon.pink {
          background-position: -50px 0; }
        .billing-dialog-page ul.feature-list li.feature:hover .feature-icon.orange {
          background-position: -50px -50px; }
        .billing-dialog-page ul.feature-list li.feature:hover .feature-icon.green {
          background-position: -100px -50px; }
        .billing-dialog-page ul.feature-list li.feature:hover .feature-icon.blue {
          background-position: -50px -100px; }
        .billing-dialog-page ul.feature-list li.feature:hover .feature-title {
          display: none; }
        .billing-dialog-page ul.feature-list li.feature:hover .feature-desc {
          display: inline-block; }
  .billing-dialog-page div.org-team-toggle {
    margin: auto;
    position: relative;
    width: 100%;
    min-height: 70px;
    margin-bottom: 15px;
    margin-top: 10px;
    font-size: 18px;
    font-weight: 200;
    cursor: pointer;
    overflow: hidden;
    display: box;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    border-radius: 5px 5px 5px 5px;
    -webkit-border-radius: 5px 5px 5px 5px; }
    .billing-dialog-page div.org-team-toggle:hover .or {
      background-color: #F6F7F7; }
    .billing-dialog-page div.org-team-toggle .or {
      position: absolute;
      left: 50%;
      top: 50%;
      margin-left: -12px;
      margin-top: -12px;
      background-color: #ffffff;
      border-radius: 12px;
      color: #767D81;
      font-size: 12px;
      height: 16px;
      min-width: 16px;
      padding: 6px 4px 1px 4px;
      text-align: center; }
    .billing-dialog-page div.org-team-toggle div.toggle-org, .billing-dialog-page div.org-team-toggle div.toggle-team {
      display: -webkit-box;
      display: -moz-box;
      display: box;
      display: -webkit-flex;
      display: -moz-flex;
      display: -ms-flexbox;
      display: flex;
      box-flex: 1;
      -webkit-box-flex: 1;
      -moz-box-flex: 1;
      -ms-flex: 1;
      min-width: 1px;
      width: 390px;
      padding: 15px;
      color: #B4BABD;
      background-color: #ffffff;
      align-items: center; }
      .billing-dialog-page div.org-team-toggle div.toggle-org .text, .billing-dialog-page div.org-team-toggle div.toggle-team .text {
        box-flex: 1;
        -webkit-box-flex: 1;
        -moz-box-flex: 1;
        -ms-flex: 1;
        min-width: 1px;
        width: 100%;
        text-align: center; }
        .billing-dialog-page div.org-team-toggle div.toggle-org .text .upgrade-team, .billing-dialog-page div.org-team-toggle div.toggle-team .text .upgrade-team {
          margin-top: 10px; }
      .billing-dialog-page div.org-team-toggle div.toggle-org:hover, .billing-dialog-page div.org-team-toggle div.toggle-team:hover {
        background-color: #F6F7F7;
        color: #767D81; }
      .billing-dialog-page div.org-team-toggle div.toggle-org.active, .billing-dialog-page div.org-team-toggle div.toggle-org.active:hover, .billing-dialog-page div.org-team-toggle div.toggle-team.active, .billing-dialog-page div.org-team-toggle div.toggle-team.active:hover {
        color: #ffffff; }
        .billing-dialog-page div.org-team-toggle div.toggle-org.active.toggle-org, .billing-dialog-page div.org-team-toggle div.toggle-org.active:hover.toggle-org, .billing-dialog-page div.org-team-toggle div.toggle-team.active.toggle-org, .billing-dialog-page div.org-team-toggle div.toggle-team.active:hover.toggle-org {
          background-color: #1E8CD4; }
        .billing-dialog-page div.org-team-toggle div.toggle-org.active.toggle-team, .billing-dialog-page div.org-team-toggle div.toggle-org.active:hover.toggle-team, .billing-dialog-page div.org-team-toggle div.toggle-team.active.toggle-team, .billing-dialog-page div.org-team-toggle div.toggle-team.active:hover.toggle-team {
          background-color: #915BC3; }
      .billing-dialog-page div.org-team-toggle div.toggle-org .my-org, .billing-dialog-page div.org-team-toggle div.toggle-team .my-org {
        display: inline;
        text-transform: uppercase;
        font-weight: 400; }
  .billing-dialog-page .select-plan-row {
    color: #ffffff;
    border-radius: 5px 5px 5px 5px;
    -webkit-border-radius: 5px 5px 5px 5px;
    overflow: hidden;
    position: relative; }
    .billing-dialog-page .select-plan-row .big-numbers {
      font-size: 90px;
      margin-top: 20px;
      margin-bottom: 0px;
      font-weight: 300;
      position: relative; }
    .billing-dialog-page .select-plan-row .helper-text {
      color: #ffffff; }
    .billing-dialog-page .select-plan-row .arrow-right {
      z-index: 10;
      position: absolute;
      left: 495px;
      top: 0px;
      width: 0px;
      height: 0px;
      border-top: 120px solid transparent;
      border-bottom: 120px solid transparent;
      border-left: 50px solid #1E8CD4;
      background-color: #D2E8F6; }
      .billing-dialog-page .select-plan-row .arrow-right.white-on-blue {
        left: 225px;
        top: 0px;
        border-left: 50px solid #2375ab;
        background-color: #1E8CD4; }
    .billing-dialog-page .select-plan-row .current-plan, .billing-dialog-page .select-plan-row .counter, .billing-dialog-page .select-plan-row .choose-plan {
      display: inline-block;
      height: 210px;
      float: left;
      position: relative;
      padding-top: 15px;
      padding-bottom: 15px;
      padding-left: 15px;
      padding-right: 15px; }
      .billing-dialog-page .select-plan-row .current-plan .subhead, .billing-dialog-page .select-plan-row .counter .subhead, .billing-dialog-page .select-plan-row .choose-plan .subhead {
        font-weight: 200; }
    .billing-dialog-page .select-plan-row .current-plan, .billing-dialog-page .select-plan-row .counter {
      color: #ffffff; }
    .billing-dialog-page .select-plan-row .current-plan {
      width: 220px;
      background-color: #2375ab; }
      .billing-dialog-page .select-plan-row .current-plan .bottom {
        text-align: left;
        margin-top: 25px;
        margin-left: 25px;
        text-transform: none; }
        .billing-dialog-page .select-plan-row .current-plan .bottom .plan-on {
          margin-top: 5px;
          font-size: 14px;
          text-transform: none; }
    .billing-dialog-page .select-plan-row .counter {
      width: 250px;
      background-color: #1E8CD4; }
      .billing-dialog-page .select-plan-row .counter .slider {
        box-shadow: inset 0px 2px 2px 0px #1b7dbe;
        -moz-box-shadow: inset 0px 2px 2px 0px #1b7dbe;
        -webkit-box-shadow: inset 0px 2px 2px 0px #1b7dbe;
        border-radius: 5px 5px 5px 5px;
        -webkit-border-radius: 5px 5px 5px 5px;
        z-index: 20;
        position: relative;
        width: 200px;
        padding: 10px;
        margin: 10px;
        margin-top: 20px; }
    .billing-dialog-page .select-plan-row .choose-plan {
      width: 340px;
      color: #1E8CD4;
      background-color: #D2E8F6; }
      .billing-dialog-page .select-plan-row .choose-plan .special-case-headline {
        font-size: 42px;
        margin-top: 36px; }
      .billing-dialog-page .select-plan-row .choose-plan .special-case-subhead {
        font-size: 24px;
        margin-top: 15px; }
      .billing-dialog-page .select-plan-row .choose-plan .helper-text {
        color: #1E8CD4; }
      .billing-dialog-page .select-plan-row .choose-plan .yearly, .billing-dialog-page .select-plan-row .choose-plan .monthly {
        text-transform: uppercase;
        font-family: "proxima-nova", "Helvetica Neue", Arial, sans-serif;
        width: 145px;
        display: inline-block;
        margin-top: 25px;
        font-weight: light;
        text-align: left; }
        .billing-dialog-page .select-plan-row .choose-plan .yearly .radio-button, .billing-dialog-page .select-plan-row .choose-plan .monthly .radio-button {
          padding: 0px; }
        .billing-dialog-page .select-plan-row .choose-plan .yearly .radio-button .radio-button-text, .billing-dialog-page .select-plan-row .choose-plan .monthly .radio-button .radio-button-text {
          padding-left: 3px; }
        .billing-dialog-page .select-plan-row .choose-plan .yearly .helper-text, .billing-dialog-page .select-plan-row .choose-plan .monthly .helper-text {
          margin-left: 15px;
          margin-top: 3px;
          text-transform: none; }
      .billing-dialog-page .select-plan-row .choose-plan .yearly {
        float: left;
        margin-left: 40px; }
  .billing-dialog-page .purchase {
    clear: both;
    width: 100%;
    padding-bottom: 20px; }
    .billing-dialog-page .purchase .purchase-button {
      background-color: #6BC24B;
      color: white; }
      .billing-dialog-page .purchase .purchase-button:hover {
        background-color: #5A9F3E; }
      .billing-dialog-page .purchase .purchase-button.red {
        background-color: #FF7163; }
        .billing-dialog-page .purchase .purchase-button.red:hover {
          background-color: #ff4330; }
  .billing-dialog-page .team .select-plan-row .arrow-right {
    border-left: 50px solid #915BC3;
    background-color: #dccbec; }
    .billing-dialog-page .team .select-plan-row .arrow-right.white-on-blue {
      border-left: 50px solid #69489C;
      background-color: #915BC3; }
  .billing-dialog-page .team .select-plan-row .current-plan {
    background-color: #69489C; }
  .billing-dialog-page .team .select-plan-row .counter {
    background-color: #915BC3; }
    .billing-dialog-page .team .select-plan-row .counter .slider {
      box-shadow: inset 0px 2px 2px 0px #8448bc;
      -moz-box-shadow: inset 0px 2px 2px 0px #8448bc;
      -webkit-box-shadow: inset 0px 2px 2px 0px #8448bc; }
  .billing-dialog-page .team .select-plan-row .choose-plan {
    color: #69489C;
    background-color: #dccbec; }
    .billing-dialog-page .team .select-plan-row .choose-plan .helper-text {
      color: #69489C; }
  .billing-dialog-page .faq {
    margin-top: 70px;
    clear: both; }
  .billing-dialog-page div.faq-title {
    clear: both;
    font-size: 18px;
    text-align: center;
    position: relative;
    color: #666E73;
    text-transform: uppercase; }
    .billing-dialog-page div.faq-title .faq-title-text {
      display: inline-block; }
    .billing-dialog-page div.faq-title .faq-title-text:before,
    .billing-dialog-page div.faq-title .faq-title-text:after {
      border-top: 1px solid #C1C6C9;
      display: block;
      height: 1px;
      content: " ";
      width: 32%;
      position: absolute;
      left: 0;
      top: 0.5em; }
    .billing-dialog-page div.faq-title .faq-title-text:after {
      right: 0;
      left: auto; }
  .billing-dialog-page div.faq-container {
    display: block;
    margin-top: 10px;
    margin-bottom: 60px;
    font-size: 14px;
    line-height: 20px;
    text-align: left;
    color: #666E73; }
    .billing-dialog-page div.faq-container .header {
      font-weight: 600;
      padding-top: 15px;
      padding-bottom: 5px; }
    .billing-dialog-page div.faq-container .left, .billing-dialog-page div.faq-container .right {
      width: 430px;
      display: inline-block;
      padding: 10px; }
    .billing-dialog-page div.faq-container .left {
      float: left; }
  .billing-dialog-page .go-back {
    margin-top: 15px;
    margin-bottom: 40px;
    color: #20242C;
    font-size: 12px; }
    .billing-dialog-page .go-back:hover {
      text-decoration: underline; }

.dialog-page {
  font-size: 14px;
  overflow: auto;
  text-align: center; }
  .dialog-page .sidebars {
    margin: 0px auto;
    width: 509px;
    margin-bottom: 20px; }
  .dialog-page .beta_message, .dialog-page .ie-message, .dialog-page .text {
    padding-bottom: 14px;
    font-size: 12px;
    color: #596573; }
  .dialog-page .text {
    font-size: 14px; }
  .dialog-page .formpage-header {
    text-align: center; }
    .dialog-page .formpage-header a:focus {
      outline: none; }
  .dialog-page .formpage-spacer {
    height: 15%; }
  .dialog-page .formpage-content {
    text-align: left;
    background-color: #ECF0F3;
    border: 1px solid #9CACBC;
    border-radius: 6px 6px 6px 6px;
    -webkit-border-radius: 6px 6px 6px 6px;
    box-shadow: inset 0px -2px 2px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: inset 0px -2px 2px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: inset 0px -2px 2px rgba(0, 0, 0, 0.1); }
    .dialog-page .formpage-content .title {
      font-size: 23px;
      font-weight: 800;
      font-family: "proxima-nova-cond", "Helvetica Neue", Arial, sans-serif;
      padding-top: 14px;
      padding-left: 14px;
      color: #596573;
      text-transform: uppercase;
      text-shadow: 0px 1px #ffffff; }
    .dialog-page .formpage-content .banner {
      margin-top: 10px;
      margin-right: 14px;
      margin-left: 14px;
      border-radius: 3px 3px 3px 3px;
      -webkit-border-radius: 3px 3px 3px 3px;
      background: #6E7E91;
      border-color: #434C56; }
      .dialog-page .formpage-content .banner, .dialog-page .formpage-content .banner.error td {
        color: #ECF0F3;
        font-weight: 600; }
        .dialog-page .formpage-content .banner a, .dialog-page .formpage-content .banner.error td a {
          color: #91CEFF; }
  .dialog-page .dialog-container {
    margin-top: 14px;
    text-align: left;
    /* Dialogs can look silly on a page if they're too tiny. */ }
    .dialog-page .dialog-container .content {
      min-height: 100px; }
  .dialog-page .trailer {
    padding-top: 14px;
    padding-bottom: 14px;
    font-size: 12px;
    text-align: left; }
  .dialog-page .login-link {
    display: inline-block;
    background-color: #9CACBC;
    padding: 3px 10px;
    margin-top: -3px;
    border-radius: 3px 3px 3px 3px;
    -webkit-border-radius: 3px 3px 3px 3px; }
  .dialog-page .formpage-footer {
    color: #596573;
    float: right; }
  .dialog-page #billing_page .formpage-footer {
    float: left;
    background-color: #9CACBC;
    padding: 3px 10px;
    border-radius: 3px 3px 3px 3px;
    -webkit-border-radius: 3px 3px 3px 3px; }
  .dialog-page a.footer-link {
    color: #114D97;
    display: inline-block;
    padding: 0px 5px; }
    .dialog-page a.footer-link:first-of-type {
      padding-left: 0px; }
  .dialog-page .recommended_browsers td {
    text-align: center;
    vertical-align: bottom;
    padding: 4px 20px;
    height: 84px; }
    .dialog-page .recommended_browsers td img {
      display: block;
      margin-bottom: 1ex; }
  .dialog-page .content .form-view .field-name {
    font-size: 14px; }
  .dialog-page .content .form-view .field-value .generic-input {
    font-size: 17px; }
  .dialog-page .content .form-view .asana-button {
    margin: 4px 6px 4px 0px; }
  .dialog-page .checkbox.checked {
    background-image: url('https://d3ki9tyy5l5ruj.cloudfront.net/obj/935fd1f4a082b7d2d6d984cae0d5e51c9733f5c6/sprite.png');
    background-position: -500px -851px;
    background-repeat: no-repeat; }
    .dialog-page .checkbox.checked:hover {
      background-image: url('https://d3ki9tyy5l5ruj.cloudfront.net/obj/935fd1f4a082b7d2d6d984cae0d5e51c9733f5c6/sprite.png');
      background-position: -300px -851px;
      background-repeat: no-repeat; }

.tos-ribbon {
  position: relative;
  left: -23px;
  top: -10px;
  margin-bottom: 7px; }
  .tos-ribbon .ribbon-tab {
    position: relative;
    vertical-align: middle;
    height: 8px;
    width: 8px;
    background-image: url('https://d3ki9tyy5l5ruj.cloudfront.net/obj/935fd1f4a082b7d2d6d984cae0d5e51c9733f5c6/sprite.png');
    background-position: -400px -1600px;
    background-repeat: no-repeat; }
  .tos-ribbon .ribbon-text {
    display: inline-block;
    vertical-align: middle;
    font-size: 11px;
    color: #6E7E91;
    border: 1px solid #CED7E0;
    border-bottom: 1px solid #C0CCD7;
    border-left: 1px solid #AFBCC8;
    background-color: #F5F9FC; }
    .tos-ribbon .ribbon-text .ribbon-text-inner {
      padding: 4px;
      padding-left: 45px;
      padding-right: 30px;
      border-top: 1px solid white;
      border-left: 1px solid #CED7E0; }
    .tos-ribbon .ribbon-text a {
      font-weight: bold;
      color: #114D97; }
  .tos-ribbon .ribbon-triangle {
    position: relative;
    left: -13px;
    display: inline-block;
    vertical-align: middle;
    height: 24px;
    width: 24px;
    background-color: #ECF0F3;
    border-left: 1px solid #CED7E0;
    border-bottom: 1px solid #CED7E0;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg); }

/****
* styles for payment page
* should go in a new file later
****/
/* new signup credit card view - this overrides a lot of the below....
we will probably start over from scratch when we switch to stripe */
.billing-dialog-page #billing_page #billing_signup_page, .billing-dialog-page #billing_page #billing_change_plan_page, .billing-dialog-page #billing_page #billing_update_account_page {
  text-align: center; }
  .billing-dialog-page #billing_page #billing_signup_page .main-headline, .billing-dialog-page #billing_page #billing_signup_page .pre-title, .billing-dialog-page #billing_page #billing_change_plan_page .main-headline, .billing-dialog-page #billing_page #billing_change_plan_page .pre-title, .billing-dialog-page #billing_page #billing_update_account_page .main-headline, .billing-dialog-page #billing_page #billing_update_account_page .pre-title {
    text-align: center; }
  .billing-dialog-page #billing_page #billing_signup_page .pre-title, .billing-dialog-page #billing_page #billing_change_plan_page .pre-title, .billing-dialog-page #billing_page #billing_update_account_page .pre-title {
    margin-bottom: 15px; }
  .billing-dialog-page #billing_page #billing_signup_page .formpage-content, .billing-dialog-page #billing_page #billing_change_plan_page .formpage-content, .billing-dialog-page #billing_page #billing_update_account_page .formpage-content {
    background: none;
    border: none;
    display: inline-block;
    width: 100%; }
    .billing-dialog-page #billing_page #billing_signup_page .formpage-content .provisioning-message, .billing-dialog-page #billing_page #billing_change_plan_page .formpage-content .provisioning-message, .billing-dialog-page #billing_page #billing_update_account_page .formpage-content .provisioning-message {
      text-align: center;
      font-size: 36px;
      font-weight: 200;
      margin-top: 60px;
      margin-bottom: 20px;
      color: #1E8CD4; }
    .billing-dialog-page #billing_page #billing_signup_page .formpage-content .subscription, .billing-dialog-page #billing_page #billing_signup_page .formpage-content .recurly, .billing-dialog-page #billing_page #billing_change_plan_page .formpage-content .subscription, .billing-dialog-page #billing_page #billing_change_plan_page .formpage-content .recurly, .billing-dialog-page #billing_page #billing_update_account_page .formpage-content .subscription, .billing-dialog-page #billing_page #billing_update_account_page .formpage-content .recurly {
      position: relative;
      width: 390px;
      margin: auto; }
      .billing-dialog-page #billing_page #billing_signup_page .formpage-content .subscription .plan, .billing-dialog-page #billing_page #billing_signup_page .formpage-content .recurly .plan, .billing-dialog-page #billing_page #billing_change_plan_page .formpage-content .subscription .plan, .billing-dialog-page #billing_page #billing_change_plan_page .formpage-content .recurly .plan, .billing-dialog-page #billing_page #billing_update_account_page .formpage-content .subscription .plan, .billing-dialog-page #billing_page #billing_update_account_page .formpage-content .recurly .plan {
        text-align: center;
        display: block;
        background: none;
        border: none;
        box-shadow: none;
        padding: 0px;
        width: auto;
        height: auto; }
        .billing-dialog-page #billing_page #billing_signup_page .formpage-content .subscription .plan .name, .billing-dialog-page #billing_page #billing_signup_page .formpage-content .recurly .plan .name, .billing-dialog-page #billing_page #billing_change_plan_page .formpage-content .subscription .plan .name, .billing-dialog-page #billing_page #billing_change_plan_page .formpage-content .recurly .plan .name, .billing-dialog-page #billing_page #billing_update_account_page .formpage-content .subscription .plan .name, .billing-dialog-page #billing_page #billing_update_account_page .formpage-content .recurly .plan .name {
          text-shadow: none;
          float: none;
          color: #1E8CD4;
          font-size: 24px;
          margin-bottom: 5px; }
        .billing-dialog-page #billing_page #billing_signup_page .formpage-content .subscription .plan .recurring_cost, .billing-dialog-page #billing_page #billing_signup_page .formpage-content .recurly .plan .recurring_cost, .billing-dialog-page #billing_page #billing_change_plan_page .formpage-content .subscription .plan .recurring_cost, .billing-dialog-page #billing_page #billing_change_plan_page .formpage-content .recurly .plan .recurring_cost, .billing-dialog-page #billing_page #billing_update_account_page .formpage-content .subscription .plan .recurring_cost, .billing-dialog-page #billing_page #billing_update_account_page .formpage-content .recurly .plan .recurring_cost {
          float: none;
          text-align: center; }
          .billing-dialog-page #billing_page #billing_signup_page .formpage-content .subscription .plan .recurring_cost .cost, .billing-dialog-page #billing_page #billing_signup_page .formpage-content .recurly .plan .recurring_cost .cost, .billing-dialog-page #billing_page #billing_change_plan_page .formpage-content .subscription .plan .recurring_cost .cost, .billing-dialog-page #billing_page #billing_change_plan_page .formpage-content .recurly .plan .recurring_cost .cost, .billing-dialog-page #billing_page #billing_update_account_page .formpage-content .subscription .plan .recurring_cost .cost, .billing-dialog-page #billing_page #billing_update_account_page .formpage-content .recurly .plan .recurring_cost .cost {
            text-shadow: none;
            color: #1E8CD4;
            float: none;
            font-weight: normal;
            display: inline;
            font-size: 20px; }
          .billing-dialog-page #billing_page #billing_signup_page .formpage-content .subscription .plan .recurring_cost .interval, .billing-dialog-page #billing_page #billing_signup_page .formpage-content .recurly .plan .recurring_cost .interval, .billing-dialog-page #billing_page #billing_change_plan_page .formpage-content .subscription .plan .recurring_cost .interval, .billing-dialog-page #billing_page #billing_change_plan_page .formpage-content .recurly .plan .recurring_cost .interval, .billing-dialog-page #billing_page #billing_update_account_page .formpage-content .subscription .plan .recurring_cost .interval, .billing-dialog-page #billing_page #billing_update_account_page .formpage-content .recurly .plan .recurring_cost .interval {
            text-shadow: none;
            color: #1E8CD4;
            float: none;
            display: inline;
            font-size: 16px;
            padding-left: 5px; }
    .billing-dialog-page #billing_page #billing_signup_page .formpage-content .contact_info, .billing-dialog-page #billing_page #billing_signup_page .formpage-content .billing_info, .billing-dialog-page #billing_page #billing_signup_page .formpage-content .content, .billing-dialog-page #billing_page #billing_signup_page .formpage-content .accept_tos, .billing-dialog-page #billing_page #billing_change_plan_page .formpage-content .contact_info, .billing-dialog-page #billing_page #billing_change_plan_page .formpage-content .billing_info, .billing-dialog-page #billing_page #billing_change_plan_page .formpage-content .content, .billing-dialog-page #billing_page #billing_change_plan_page .formpage-content .accept_tos, .billing-dialog-page #billing_page #billing_update_account_page .formpage-content .contact_info, .billing-dialog-page #billing_page #billing_update_account_page .formpage-content .billing_info, .billing-dialog-page #billing_page #billing_update_account_page .formpage-content .content, .billing-dialog-page #billing_page #billing_update_account_page .formpage-content .accept_tos {
      width: 380px;
      margin: auto; }
      .billing-dialog-page #billing_page #billing_signup_page .formpage-content .contact_info .title, .billing-dialog-page #billing_page #billing_signup_page .formpage-content .contact_info .header, .billing-dialog-page #billing_page #billing_signup_page .formpage-content .billing_info .title, .billing-dialog-page #billing_page #billing_signup_page .formpage-content .billing_info .header, .billing-dialog-page #billing_page #billing_signup_page .formpage-content .content .title, .billing-dialog-page #billing_page #billing_signup_page .formpage-content .content .header, .billing-dialog-page #billing_page #billing_signup_page .formpage-content .accept_tos .title, .billing-dialog-page #billing_page #billing_signup_page .formpage-content .accept_tos .header, .billing-dialog-page #billing_page #billing_change_plan_page .formpage-content .contact_info .title, .billing-dialog-page #billing_page #billing_change_plan_page .formpage-content .contact_info .header, .billing-dialog-page #billing_page #billing_change_plan_page .formpage-content .billing_info .title, .billing-dialog-page #billing_page #billing_change_plan_page .formpage-content .billing_info .header, .billing-dialog-page #billing_page #billing_change_plan_page .formpage-content .content .title, .billing-dialog-page #billing_page #billing_change_plan_page .formpage-content .content .header, .billing-dialog-page #billing_page #billing_change_plan_page .formpage-content .accept_tos .title, .billing-dialog-page #billing_page #billing_change_plan_page .formpage-content .accept_tos .header, .billing-dialog-page #billing_page #billing_update_account_page .formpage-content .contact_info .title, .billing-dialog-page #billing_page #billing_update_account_page .formpage-content .contact_info .header, .billing-dialog-page #billing_page #billing_update_account_page .formpage-content .billing_info .title, .billing-dialog-page #billing_page #billing_update_account_page .formpage-content .billing_info .header, .billing-dialog-page #billing_page #billing_update_account_page .formpage-content .content .title, .billing-dialog-page #billing_page #billing_update_account_page .formpage-content .content .header, .billing-dialog-page #billing_page #billing_update_account_page .formpage-content .accept_tos .title, .billing-dialog-page #billing_page #billing_update_account_page .formpage-content .accept_tos .header {
        padding: 0px;
        margin: 5px;
        font-size: 16px;
        font-weight: 200;
        text-transform: none; }
      .billing-dialog-page #billing_page #billing_signup_page .formpage-content .contact_info table, .billing-dialog-page #billing_page #billing_signup_page .formpage-content .billing_info table, .billing-dialog-page #billing_page #billing_signup_page .formpage-content .content table, .billing-dialog-page #billing_page #billing_signup_page .formpage-content .accept_tos table, .billing-dialog-page #billing_page #billing_change_plan_page .formpage-content .contact_info table, .billing-dialog-page #billing_page #billing_change_plan_page .formpage-content .billing_info table, .billing-dialog-page #billing_page #billing_change_plan_page .formpage-content .content table, .billing-dialog-page #billing_page #billing_change_plan_page .formpage-content .accept_tos table, .billing-dialog-page #billing_page #billing_update_account_page .formpage-content .contact_info table, .billing-dialog-page #billing_page #billing_update_account_page .formpage-content .billing_info table, .billing-dialog-page #billing_page #billing_update_account_page .formpage-content .content table, .billing-dialog-page #billing_page #billing_update_account_page .formpage-content .accept_tos table {
        text-align: left; }
      .billing-dialog-page #billing_page #billing_signup_page .formpage-content .contact_info .error, .billing-dialog-page #billing_page #billing_signup_page .formpage-content .billing_info .error, .billing-dialog-page #billing_page #billing_signup_page .formpage-content .content .error, .billing-dialog-page #billing_page #billing_signup_page .formpage-content .accept_tos .error, .billing-dialog-page #billing_page #billing_change_plan_page .formpage-content .contact_info .error, .billing-dialog-page #billing_page #billing_change_plan_page .formpage-content .billing_info .error, .billing-dialog-page #billing_page #billing_change_plan_page .formpage-content .content .error, .billing-dialog-page #billing_page #billing_change_plan_page .formpage-content .accept_tos .error, .billing-dialog-page #billing_page #billing_update_account_page .formpage-content .contact_info .error, .billing-dialog-page #billing_page #billing_update_account_page .formpage-content .billing_info .error, .billing-dialog-page #billing_page #billing_update_account_page .formpage-content .content .error, .billing-dialog-page #billing_page #billing_update_account_page .formpage-content .accept_tos .error {
        position: relative;
        left: 0px;
        margin-left: 0px;
        margin-bottom: 10px; }
    .billing-dialog-page #billing_page #billing_signup_page .formpage-content .contact_info .phone, .billing-dialog-page #billing_page #billing_change_plan_page .formpage-content .contact_info .phone, .billing-dialog-page #billing_page #billing_update_account_page .formpage-content .contact_info .phone {
      display: none; }
    .billing-dialog-page #billing_page #billing_signup_page .formpage-content td .cost, .billing-dialog-page #billing_page #billing_change_plan_page .formpage-content td .cost, .billing-dialog-page #billing_page #billing_update_account_page .formpage-content td .cost {
      display: inline; }
    .billing-dialog-page #billing_page #billing_signup_page .formpage-content td .interval, .billing-dialog-page #billing_page #billing_change_plan_page .formpage-content td .interval, .billing-dialog-page #billing_page #billing_update_account_page .formpage-content td .interval {
      font-weight: normal;
      font-size: 14px;
      display: inline;
      padding-left: 5px; }
    .billing-dialog-page #billing_page #billing_signup_page .formpage-content .billing_info .accepted_cards, .billing-dialog-page #billing_page #billing_change_plan_page .formpage-content .billing_info .accepted_cards, .billing-dialog-page #billing_page #billing_update_account_page .formpage-content .billing_info .accepted_cards {
      display: none; }
    .billing-dialog-page #billing_page #billing_signup_page .formpage-content .billing_info .credit_card .expires, .billing-dialog-page #billing_page #billing_change_plan_page .formpage-content .billing_info .credit_card .expires, .billing-dialog-page #billing_page #billing_update_account_page .formpage-content .billing_info .credit_card .expires {
      width: 270px; }
      .billing-dialog-page #billing_page #billing_signup_page .formpage-content .billing_info .credit_card .expires .month, .billing-dialog-page #billing_page #billing_signup_page .formpage-content .billing_info .credit_card .expires .year, .billing-dialog-page #billing_page #billing_change_plan_page .formpage-content .billing_info .credit_card .expires .month, .billing-dialog-page #billing_page #billing_change_plan_page .formpage-content .billing_info .credit_card .expires .year, .billing-dialog-page #billing_page #billing_update_account_page .formpage-content .billing_info .credit_card .expires .month, .billing-dialog-page #billing_page #billing_update_account_page .formpage-content .billing_info .credit_card .expires .year {
        float: none;
        width: auto;
        display: inline; }
        .billing-dialog-page #billing_page #billing_signup_page .formpage-content .billing_info .credit_card .expires .month select, .billing-dialog-page #billing_page #billing_signup_page .formpage-content .billing_info .credit_card .expires .year select, .billing-dialog-page #billing_page #billing_change_plan_page .formpage-content .billing_info .credit_card .expires .month select, .billing-dialog-page #billing_page #billing_change_plan_page .formpage-content .billing_info .credit_card .expires .year select, .billing-dialog-page #billing_page #billing_update_account_page .formpage-content .billing_info .credit_card .expires .month select, .billing-dialog-page #billing_page #billing_update_account_page .formpage-content .billing_info .credit_card .expires .year select {
          margin-top: 6px; }
    .billing-dialog-page #billing_page #billing_signup_page .formpage-content .billing_info .only_zip .state_zip .zip, .billing-dialog-page #billing_page #billing_change_plan_page .formpage-content .billing_info .only_zip .state_zip .zip, .billing-dialog-page #billing_page #billing_update_account_page .formpage-content .billing_info .only_zip .state_zip .zip {
      margin-right: 0px;
      padding-right: 0px;
      text-align: left; }
      .billing-dialog-page #billing_page #billing_signup_page .formpage-content .billing_info .only_zip .state_zip .zip input, .billing-dialog-page #billing_page #billing_change_plan_page .formpage-content .billing_info .only_zip .state_zip .zip input, .billing-dialog-page #billing_page #billing_update_account_page .formpage-content .billing_info .only_zip .state_zip .zip input {
        width: 74px; }
    .billing-dialog-page #billing_page #billing_signup_page .formpage-content .accept_tos, .billing-dialog-page #billing_page #billing_change_plan_page .formpage-content .accept_tos, .billing-dialog-page #billing_page #billing_update_account_page .formpage-content .accept_tos {
      font-weight: bold; }
      .billing-dialog-page #billing_page #billing_signup_page .formpage-content .accept_tos a, .billing-dialog-page #billing_page #billing_change_plan_page .formpage-content .accept_tos a, .billing-dialog-page #billing_page #billing_update_account_page .formpage-content .accept_tos a {
        color: #1E8CD4; }
    .billing-dialog-page #billing_page #billing_signup_page .formpage-content .footer, .billing-dialog-page #billing_page #billing_change_plan_page .formpage-content .footer, .billing-dialog-page #billing_page #billing_update_account_page .formpage-content .footer {
      text-align: center;
      padding-top: 15px; }
      .billing-dialog-page #billing_page #billing_signup_page .formpage-content .footer .submit, .billing-dialog-page #billing_page #billing_change_plan_page .formpage-content .footer .submit, .billing-dialog-page #billing_page #billing_update_account_page .formpage-content .footer .submit {
        border: none;
        text-shadow: none;
        box-shadow: none;
        width: 200px;
        padding: 10px;
        background: #6BC24B;
        color: #ffffff;
        text-transform: uppercase;
        font-weight: normal;
        font-size: 22px;
        border-radius: 3px; }
        .billing-dialog-page #billing_page #billing_signup_page .formpage-content .footer .submit:hover, .billing-dialog-page #billing_page #billing_change_plan_page .formpage-content .footer .submit:hover, .billing-dialog-page #billing_page #billing_update_account_page .formpage-content .footer .submit:hover {
          background-color: #5A9F3E; }
    .billing-dialog-page #billing_page #billing_signup_page .formpage-content .footer-buttons-left, .billing-dialog-page #billing_page #billing_change_plan_page .formpage-content .footer-buttons-left, .billing-dialog-page #billing_page #billing_update_account_page .formpage-content .footer-buttons-left {
      width: 380px;
      margin: auto; }
      .billing-dialog-page #billing_page #billing_signup_page .formpage-content .footer-buttons-left .billing-confirm, .billing-dialog-page #billing_page #billing_signup_page .formpage-content .footer-buttons-left .billing-cancel, .billing-dialog-page #billing_page #billing_change_plan_page .formpage-content .footer-buttons-left .billing-confirm, .billing-dialog-page #billing_page #billing_change_plan_page .formpage-content .footer-buttons-left .billing-cancel, .billing-dialog-page #billing_page #billing_update_account_page .formpage-content .footer-buttons-left .billing-confirm, .billing-dialog-page #billing_page #billing_update_account_page .formpage-content .footer-buttons-left .billing-cancel {
        border: none;
        border-radius: 3px;
        box-shadow: none;
        width: 200px;
        padding: 10px;
        display: block;
        margin: auto;
        margin-top: 10px; }
        .billing-dialog-page #billing_page #billing_signup_page .formpage-content .footer-buttons-left .billing-confirm .button-text, .billing-dialog-page #billing_page #billing_signup_page .formpage-content .footer-buttons-left .billing-cancel .button-text, .billing-dialog-page #billing_page #billing_change_plan_page .formpage-content .footer-buttons-left .billing-confirm .button-text, .billing-dialog-page #billing_page #billing_change_plan_page .formpage-content .footer-buttons-left .billing-cancel .button-text, .billing-dialog-page #billing_page #billing_update_account_page .formpage-content .footer-buttons-left .billing-confirm .button-text, .billing-dialog-page #billing_page #billing_update_account_page .formpage-content .footer-buttons-left .billing-cancel .button-text {
          color: #ffffff;
          text-transform: uppercase;
          font-weight: normal;
          font-size: 22px;
          text-shadow: none; }
      .billing-dialog-page #billing_page #billing_signup_page .formpage-content .footer-buttons-left .billing-confirm, .billing-dialog-page #billing_page #billing_change_plan_page .formpage-content .footer-buttons-left .billing-confirm, .billing-dialog-page #billing_page #billing_update_account_page .formpage-content .footer-buttons-left .billing-confirm {
        background: #1E8CD4; }
        .billing-dialog-page #billing_page #billing_signup_page .formpage-content .footer-buttons-left .billing-confirm:hover, .billing-dialog-page #billing_page #billing_change_plan_page .formpage-content .footer-buttons-left .billing-confirm:hover, .billing-dialog-page #billing_page #billing_update_account_page .formpage-content .footer-buttons-left .billing-confirm:hover {
          background-color: #2375ab; }
      .billing-dialog-page #billing_page #billing_signup_page .formpage-content .footer-buttons-left .billing-cancel, .billing-dialog-page #billing_page #billing_change_plan_page .formpage-content .footer-buttons-left .billing-cancel, .billing-dialog-page #billing_page #billing_update_account_page .formpage-content .footer-buttons-left .billing-cancel {
        background: #DCDFE0;
        color: #3B474D; }
        .billing-dialog-page #billing_page #billing_signup_page .formpage-content .footer-buttons-left .billing-cancel:hover, .billing-dialog-page #billing_page #billing_change_plan_page .formpage-content .footer-buttons-left .billing-cancel:hover, .billing-dialog-page #billing_page #billing_update_account_page .formpage-content .footer-buttons-left .billing-cancel:hover {
          background-color: #C1C6C9; }

#billing_page div.loading-indicator .loader-dot {
  background-color: #9CACBC;
  border-color: #6E7E91; }
#billing_page div.loading-indicator .loader-text {
  color: #596573; }
#billing_page .formpage-content .pre-title {
  padding: 14px 14px 7px 14px;
  font-weight: 600; }
  #billing_page .formpage-content .pre-title .workspace-name {
    font-weight: 800; }
#billing_page .formpage-content .recurly .title {
  font-size: 11px;
  color: #6E7E91;
  font-weight: 700;
  font-family: "proxima-nova", "Helvetica Neue", Arial, sans-serif;
  padding: 0px 0px 5px 0px;
  clear: both; }
#billing_page .formpage-content .recurly .expires .title {
  float: left;
  font-size: 14px;
  line-height: 24px;
  vertical-align: middle;
  width: 50px;
  color: #999999;
  font-weight: 600;
  text-transform: none;
  padding-top: 0px; }
#billing_page .formpage-content .recurly .due_now, #billing_page .formpage-content .recurly .vat, #billing_page .formpage-content .recurly .vat_number {
  display: none; }
#billing_page .formpage-content .recurly button[type="submit"].submit {
  font-size: 17px;
  padding: 6px 10px;
  margin-top: 7px;
  margin-left: 14px;
  margin-bottom: 14px; }
#billing_page .formpage-content .recurly .coupon {
  height: 50px;
  padding-left: 10px; }
  #billing_page .formpage-content .recurly .coupon .discount {
    float: left; }
  #billing_page .formpage-content .recurly .coupon .description {
    float: left; }
#billing_page .formpage-content .recurly .field {
  float: left;
  position: relative;
  clear: left;
  width: 365px;
  margin-right: 10px;
  padding: 7px 0px; }
  #billing_page .formpage-content .recurly .field.first_name, #billing_page .formpage-content .recurly .field.last_name {
    width: 177px; }
    #billing_page .formpage-content .recurly .field.first_name input[type=text], #billing_page .formpage-content .recurly .field.last_name input[type=text] {
      width: 166px; }
  #billing_page .formpage-content .recurly .field.expires {
    width: 255px;
    margin-top: 4px;
    padding-bottom: 3px; }
  #billing_page .formpage-content .recurly .field .month {
    float: left;
    width: 120px;
    margin-left: 0; }
    #billing_page .formpage-content .recurly .field .month input[type=text] {
      width: 108px; }
  #billing_page .formpage-content .recurly .field .year {
    float: left;
    margin-left: 1px;
    width: 60px; }
    #billing_page .formpage-content .recurly .field .year input[type=text] {
      width: 48px; }
  #billing_page .formpage-content .recurly .field.card_number {
    width: 292px; }
    #billing_page .formpage-content .recurly .field.card_number input[type=text] {
      width: 282px; }
  #billing_page .formpage-content .recurly .field.cvv {
    width: 61px; }
    #billing_page .formpage-content .recurly .field.cvv input[type=text] {
      width: 51px; }
  #billing_page .formpage-content .recurly .field.zip {
    width: 100px; }
    #billing_page .formpage-content .recurly .field.zip input[type=text] {
      width: 88px; }
  #billing_page .formpage-content .recurly .field.credit_card {
    clear: both; }
  #billing_page .formpage-content .recurly .field.cvv, #billing_page .formpage-content .recurly .field.last_name, #billing_page .formpage-content .recurly .field.zip {
    clear: none; }
  #billing_page .formpage-content .recurly .field .placeholder {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding-left: 9px;
    font-size: 17px;
    font-weight: normal;
    line-height: 48px;
    vertical-align: middle;
    color: #999999;
    cursor: text;
    overflow: hidden;
    white-space: nowrap;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
    font-weight: 300; }
  #billing_page .formpage-content .recurly .field.focus .placeholder {
    color: #cccccc; }
  #billing_page .formpage-content .recurly .field.invalid .placeholder {
    color: #F22659; }
  #billing_page .formpage-content .recurly .field .error {
    min-width: 83px;
    white-space: nowrap;
    position: absolute;
    top: 9px;
    left: 100%;
    margin-left: 20px;
    z-index: 1337; }
#billing_page .formpage-content .recurly input[type=text] {
  border: 1px solid rgba(0, 0, 0, 0.12);
  box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.1);
  width: 353px;
  font-size: 17px;
  padding-top: 5px;
  padding-bottom: 5px; }
  #billing_page .formpage-content .recurly input[type=text].invalid {
    border-color: #F22659; }
  #billing_page .formpage-content .recurly input[type=text].invalid {
    border-color: #F22659;
    color: #F22659; }
  #billing_page .formpage-content .recurly input[type=text] [disabled] {
    background: #E5E5E5; }
#billing_page .formpage-content .recurly select {
  font-size: 14px; }
#billing_page .formpage-content .recurly .contact_info, #billing_page .formpage-content .recurly .billing_info, #billing_page .formpage-content .recurly .accept_tos {
  position: relative;
  padding: 10px 14px 0px;
  overflow: hidden;
  zoom: 1; }
#billing_page .formpage-content .recurly .billing_info {
  border-bottom: 1px solid #DDE4EA;
  padding-bottom: 10px;
  margin-top: 10px; }
#billing_page .formpage-content .recurly .accept_tos {
  overflow: visible;
  border-top: 1px solid #ffffff; }
  #billing_page .formpage-content .recurly .accept_tos input[type=checkbox] {
    display: inline;
    line-height: 27px;
    vertical-align: middle; }
  #billing_page .formpage-content .recurly .accept_tos label {
    margin: 0 0 0 5px;
    display: inline;
    line-height: 27px;
    vertical-align: middle; }
  #billing_page .formpage-content .recurly .accept_tos .field .error {
    display: block;
    position: static; }
#billing_page .formpage-content .recurly .plan {
  overflow: hidden;
  position: relative;
  height: 29px;
  padding: 10px 14px;
  margin: 10px 0px;
  width: 485px;
  right: 4px;
  background-color: #9CACBC;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#9CACBC), color-stop(60%, #6E7E91));
  background-image: -moz-linear-gradient(90deg, #6E7E91 40%, #9CACBC);
  background-image: -ms-linear-gradient(90deg, #6E7E91 40%, #9CACBC);
  border: 1px solid #6E7E91;
  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3), inset 0px -1px 1px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3), inset 0px -1px 1px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3), inset 0px -1px 1px rgba(0, 0, 0, 0.1); }
  #billing_page .formpage-content .recurly .plan .name {
    font-size: 23px;
    font-family: "proxima-nova-cond", "Helvetica Neue", Arial, sans-serif;
    text-transform: uppercase;
    color: #ECF0F3;
    text-shadow: 0px -1px #434C56;
    float: left;
    margin-top: 3px; }
#billing_page .formpage-content .recurly .recurring_cost {
  float: right;
  text-align: right; }
#billing_page .formpage-content .recurly .cost {
  font-size: 17px;
  font-weight: 700;
  color: #ffffff;
  text-shadow: 0px 1px #434C56; }
#billing_page .formpage-content .recurly .interval {
  font-size: 12px;
  color: #CED7E0; }
#billing_page .formpage-content .recurly .accepted_cards {
  position: absolute;
  top: -1px;
  right: 128px;
  width: 160px; }
#billing_page .formpage-content .recurly .card {
  background-position: right top;
  background-repeat: no-repeat;
  text-indent: -3000px;
  width: 40px;
  height: 30px;
  margin: 0;
  padding: 0;
  float: left; }
  #billing_page .formpage-content .recurly .card.mastercard {
    background-image: url('https://d3ki9tyy5l5ruj.cloudfront.net/obj/c63817358b6d875514cf10cc20cd34ee6cb39f28/mastercard.png'); }
  #billing_page .formpage-content .recurly .card.american_express {
    background-image: url('https://d3ki9tyy5l5ruj.cloudfront.net/obj/e68484807d52689b85d14ade147f6317da9cbfa5/amex.png'); }
  #billing_page .formpage-content .recurly .card.visa {
    background-image: url('https://d3ki9tyy5l5ruj.cloudfront.net/obj/e0ca335bd100e0f54be8d4600a476e3b686d6498/visa.png'); }
  #billing_page .formpage-content .recurly .card.discover {
    background-image: url('https://d3ki9tyy5l5ruj.cloudfront.net/obj/79183b8b5968d756f44bf0e2f8d28f0d65406ef7/discover.png'); }
  #billing_page .formpage-content .recurly .card.no_match {
    opacity: 0.5; }
#billing_page .formpage-content .recurly .error {
  padding: 5px;
  vertical-align: middle;
  color: #F22659;
  background-color: #F7E4E8;
  border: 1px solid #F22659;
  border-radius: 3px 3px 3px 3px;
  -webkit-border-radius: 3px 3px 3px 3px;
  font-size: 12px; }
#billing_page .formpage-content .recurly .first_name .error {
  left: 364px; }
#billing_page .formpage-content .recurly .card_number .error {
  left: 363px; }
#billing_page .formpage-content .recurly .server_errors {
  margin: 0px 14px 5px;
  opacity: 0; }
  #billing_page .formpage-content .recurly .server_errors .error {
    padding: 5px 10px; }
  #billing_page .formpage-content .recurly .server_errors.any {
    opacity: 1;
    -webkit-transition: opacity 0.5s linear;
    -moz-transition: opacity 0.5s linear;
    margin: 20px 20px;
    margin-bottom: 0; }
#billing_page .billing-action {
  display: block;
  padding-top: 3px;
  font-size: 12px; }
#billing_page .content {
  padding-top: 0px; }
#billing_page .form-view {
  padding-top: 20px; }
#billing_page .value {
  font-size: 17px;
  font-weight: 600; }
#billing_page .field-name {
  text-align: left; }
#billing_page .footer-buttons-left {
  margin-left: 114px; }

.provisioning-message {
  text-align: center;
  font-size: 17px;
  font-weight: 700;
  margin: 14px 14px 10px;
  color: #596573;
  text-shadow: 0px 1px #ffffff; }

/******
*
* Stuff for Plan Page
* should be in another file
*
******/
.dialog-box .content .feature-list, .dialog-page .feature-list {
  padding: 14px 14px 6px;
  margin: 0px;
  list-style: none; }
  .dialog-box .content .feature-list .feature, .dialog-page .feature-list .feature {
    margin-bottom: 14px;
    clear: both; }
  .dialog-box .content .feature-list .feature-title, .dialog-page .feature-list .feature-title {
    font-weight: 600;
    font-size: 14px;
    text-shadow: 0px 1px #ffffff;
    display: block; }
  .dialog-box .content .feature-list .feature-desc, .dialog-page .feature-list .feature-desc {
    color: #6E7E91;
    font-size: 12px;
    display: block;
    line-height: 18px;
    padding-left: 37px; }
  .dialog-box .content .feature-list .feature-icon, .dialog-page .feature-list .feature-icon {
    width: 27px;
    height: 28px;
    display: inline-block;
    margin-right: 10px;
    float: left; }
    .dialog-box .content .feature-list .feature-icon.permissions, .dialog-page .feature-list .feature-icon.permissions {
      background-image: url('https://d3ki9tyy5l5ruj.cloudfront.net/obj/935fd1f4a082b7d2d6d984cae0d5e51c9733f5c6/sprite.png');
      background-position: 0px -2900px;
      background-repeat: no-repeat; }
    .dialog-box .content .feature-list .feature-icon.support, .dialog-page .feature-list .feature-icon.support {
      background-image: url('https://d3ki9tyy5l5ruj.cloudfront.net/obj/935fd1f4a082b7d2d6d984cae0d5e51c9733f5c6/sprite.png');
      background-position: -100px -2900px;
      background-repeat: no-repeat; }
    .dialog-box .content .feature-list .feature-icon.upgrades, .dialog-page .feature-list .feature-icon.upgrades {
      background-image: url('https://d3ki9tyy5l5ruj.cloudfront.net/obj/935fd1f4a082b7d2d6d984cae0d5e51c9733f5c6/sprite.png');
      background-position: -200px -2900px;
      background-repeat: no-repeat; }
    .dialog-box .content .feature-list .feature-icon.more-members, .dialog-page .feature-list .feature-icon.more-members {
      background-image: url('https://d3ki9tyy5l5ruj.cloudfront.net/obj/935fd1f4a082b7d2d6d984cae0d5e51c9733f5c6/sprite.png');
      background-position: -300px -2900px;
      background-repeat: no-repeat; }
    .dialog-box .content .feature-list .feature-icon.privacy, .dialog-page .feature-list .feature-icon.privacy {
      background-image: url('https://d3ki9tyy5l5ruj.cloudfront.net/obj/935fd1f4a082b7d2d6d984cae0d5e51c9733f5c6/sprite.png');
      background-position: -497px -2900px;
      background-repeat: no-repeat; }
    .dialog-box .content .feature-list .feature-icon.administration, .dialog-page .feature-list .feature-icon.administration {
      background-image: url('https://d3ki9tyy5l5ruj.cloudfront.net/obj/935fd1f4a082b7d2d6d984cae0d5e51c9733f5c6/sprite.png');
      background-position: -601px -2900px;
      background-repeat: no-repeat; }

#plan_page .formpage-content {
  box-shadow: inset 0px -2px 2px rgba(0, 0, 0, 0.1), 0px 2px 2px rgba(0, 0, 0, 0.12);
  -moz-box-shadow: inset 0px -2px 2px rgba(0, 0, 0, 0.1), 0px 2px 2px rgba(0, 0, 0, 0.12);
  -webkit-box-shadow: inset 0px -2px 2px rgba(0, 0, 0, 0.1), 0px 2px 2px rgba(0, 0, 0, 0.12);
  /* This is relatively positioned to create a new stacking context so that
     it appears above the underneath section. */
  position: relative; }
#plan_page .underneath {
  border-radius: 0px 0px 6px 6px;
  -webkit-border-radius: 0px 0px 6px 6px;
  background-color: #6E7E91;
  box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.1), 0px 1px #ECF0F3;
  -moz-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.1), 0px 1px #ECF0F3;
  -webkit-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.1), 0px 1px #ECF0F3;
  border: 1px solid #596573;
  margin-top: -6px;
  padding: 12px 0px 14px; }
  #plan_page .underneath a.dark-link {
    color: #91CEFF;
    text-decoration: underline; }
    #plan_page .underneath a.dark-link:hover {
      text-decoration: underline; }
#plan_page .workspace-state {
  float: right;
  padding: 4px 10px;
  margin-right: 14px;
  background-color: #212F40;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#212F40), color-stop(100%, #434C56));
  background-image: -moz-linear-gradient(90deg, #434C56 0%, #212F40);
  background-image: -ms-linear-gradient(90deg, #434C56 0%, #212F40);
  border: 1px solid #1A232E;
  border-radius: 3px 3px 3px 3px;
  -webkit-border-radius: 3px 3px 3px 3px;
  color: #DDE4EA;
  font-size: 12px; }
#plan_page .plan-group {
  box-shadow: inset 0px -1px #596573, 0px 1px #8090a2;
  -moz-box-shadow: inset 0px -1px #596573, 0px 1px #8090a2;
  -webkit-box-shadow: inset 0px -1px #596573, 0px 1px #8090a2; }
#plan_page .plan-header {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: #434C56;
  text-shadow: 0px 1px #9CACBC;
  padding: 7px 14px 0px;
  margin-bottom: -3px;
  clear: both; }
#plan_page .plan {
  padding: 10px 14px 0px;
  color: #C0CCD7;
  font-size: 14px;
  font-weight: 600;
  text-shadow: 0px -1px #434C56; }
  #plan_page .plan:not(.large-plan) {
    padding-bottom: 10px; }
#plan_page .price, #plan_page .wksp-size {
  display: inline-block;
  width: 183px; }
#plan_page .action {
  display: inline-block;
  width: 105px;
  text-align: right; }
#plan_page .dollars, #plan_page .num {
  font-size: 17px;
  font-weight: 700;
  text-shadow: 0px 1px #212F40;
  margin: 0px 5px;
  color: #DDE4EA; }
#plan_page .button, #plan_page .sales-link {
  min-width: 87px;
  padding: 5px 12px;
  text-align: center; }
#plan_page .sales-link {
  display: inline-block; }
#plan_page .dark-button {
  background-color: #9CACBC;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#9CACBC), color-stop(10%, #6E7E91));
  background-image: -moz-linear-gradient(90deg, #6E7E91 90%, #9CACBC);
  background-image: -ms-linear-gradient(90deg, #6E7E91 90%, #9CACBC);
  border: 1px solid #212F40;
  font-size: 14px; }
  #plan_page .dark-button .button-text {
    text-shadow: 0px -1px #212F40;
    color: #ECF0F3; }
  #plan_page .dark-button:hover {
    background-color: #9CACBC;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#9CACBC), color-stop(100%, #6E7E91));
    background-image: -moz-linear-gradient(90deg, #6E7E91 0%, #9CACBC);
    background-image: -ms-linear-gradient(90deg, #6E7E91 0%, #9CACBC); }
    #plan_page .dark-button:hover .button-text {
      color: #ECF0F3; }
#plan_page .current {
  cursor: text !important;
  box-shadow: none;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  font-size: 14px; }
  #plan_page .current .button-text {
    color: #91CEFF;
    text-shadow: 0px -1px #212F40; }
#plan_page .disabled {
  box-shadow: none;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  border: 1px solid rgba(0, 0, 0, 0.12); }
  #plan_page .disabled .button-text {
    text-shadow: none; }
#plan_page .downgrade-msg {
  font-size: 12px;
  font-weight: 400;
  text-shadow: none;
  margin: 7px 0px;
  position: absolute;
  text-align: left;
  padding: 10px 14px;
  background: #434C56;
  right: 14px;
  z-index: 2;
  display: none; }
#plan_page .action:hover .downgrade-msg {
  display: block; }
#plan_page .suggested .dollars {
  font-size: 23px;
  color: #ffffff;
  font-weight: 800; }
#plan_page .suggested .num {
  font-size: 23px;
  color: #91CEFF;
  font-weight: 800; }
#plan_page .suggested.large-plan .num {
  font-size: 17px; }
#plan_page .suggested .primary {
  font-size: 17px; }
#plan_page .footer-text {
  padding-left: 14px;
  padding-top: 10px;
  padding-right: 14px;
  padding-bottom: 10px;
  color: #C0CCD7;
  font-size: 14px;
  font-weight: 600;
  text-shadow: 0px -1px #434C56;
  line-height: 17px; }

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