dropbox-scooter/css/scooter.css

An NPM friendly version of the SCSS framework & UI library for Dropbox Web. http://dropbox.github.io/scooter

/*!
 *
 * SCOOTER
 *
 *   ---
 *   /
 *  /______
 *  0     0
 *
 * scoot
 *   verb [no obj.]
 *   go or leave somewhere quickly: "I'd better scoot"
 *
 */
*, ::after, ::before {
  position: relative;
  margin: 0;
  padding: 0;
  box-sizing: inherit; }

input, button, textarea, select {
  font: inherit;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none; }

input[type=checkbox] {
  -webkit-appearance: checkbox;
  -moz-appearance: checkbox;
  appearance: checkbox; }

input[type=radio] {
  -webkit-appearance: radio;
  -moz-appearance: radio;
  appearance: radio; }

ul, ol {
  margin-left: 46px; }

p {
  margin-bottom: 23px; }

table {
  border-collapse: collapse; }

html, :root {
  box-sizing: border-box;
  font: 81.25%/1.75 "Open Sans", "Helvetica Neue", Arial, sans-serif;
  color: #47525d; }

h1,
.f-alpha {
  display: block;
  margin-bottom: 23px;
  font-size: 28px;
  font-weight: 200;
  line-height: 36px; }

h2,
.f-beta {
  display: block;
  margin-bottom: 23px;
  font-size: 20px;
  font-weight: 400;
  line-height: 28px; }

h3,
.f-gamma {
  display: block;
  margin-bottom: 23px;
  font-size: 16px;
  font-weight: 400;
  line-height: 28px; }

h4,
.f-delta {
  display: block;
  font-size: 13px;
  font-weight: 600;
  line-height: 23px; }

hr {
  margin-bottom: 23px;
  border: 0;
  border-top: 1px solid rgba(37, 40, 43, 0.1); }

a,
.f-a {
  text-decoration: none;
  color: #007ee5;
  cursor: pointer; }
  a:hover,
  .f-a:hover {
    text-decoration: underline; }

.o-wrap {
  display: block;
  max-width: 990px;
  margin: 0 auto; }

.o-grid {
  margin-left: -20px;
  list-style: none; }
  .o-grid > .o-grid__col--2-of-2, .o-grid > .o-grid__col--3-of-3, .o-grid > .o-grid__col--4-of-4, .o-grid > .o-grid__col--6-of-6, .o-grid > .o-grid__col--12-of-12 {
    width: 100%; }
  .o-grid > .o-grid__col--1-of-3, .o-grid > .o-grid__col--2-of-6, .o-grid > .o-grid__col--4-of-12 {
    width: 33.33333%; }
  .o-grid > .o-grid__col--2-of-3, .o-grid > .o-grid__col--4-of-6, .o-grid > .o-grid__col--8-of-12 {
    width: 66.66667%; }
  .o-grid > .o-grid__col--1-of-4, .o-grid > .o-grid__col--3-of-12 {
    width: 25%; }
  .o-grid > .o-grid__col--1-of-2, .o-grid > .o-grid__col--2-of-4, .o-grid > .o-grid__col--3-of-6, .o-grid > .o-grid__col--6-of-12 {
    width: 50%; }
  .o-grid > .o-grid__col--3-of-4, .o-grid > .o-grid__col--9-of-12 {
    width: 75%; }
  .o-grid > .o-grid__col--push-2-of-2, .o-grid > .o-grid__col--push-3-of-3, .o-grid > .o-grid__col--push-4-of-4, .o-grid > .o-grid__col--push-6-of-6, .o-grid > .o-grid__col--push-12-of-12 {
    margin-left: 100%; }
  .o-grid > .o-grid__col--push-1-of-2, .o-grid > .o-grid__col--push-2-of-4, .o-grid > .o-grid__col--push-3-of-6, .o-grid > .o-grid__col--push-6-of-12 {
    margin-left: 50%; }
  .o-grid > .o-grid__col--push-1-of-3, .o-grid > .o-grid__col--push-2-of-6, .o-grid > .o-grid__col--push-4-of-12 {
    margin-left: 33.33333%; }
  .o-grid > .o-grid__col--push-2-of-3, .o-grid > .o-grid__col--push-4-of-6, .o-grid > .o-grid__col--push-8-of-12 {
    margin-left: 66.66667%; }
  .o-grid > .o-grid__col--push-1-of-4, .o-grid > .o-grid__col--push-3-of-12 {
    margin-left: 25%; }
  .o-grid > .o-grid__col--push-3-of-4, .o-grid > .o-grid__col--push-9-of-12 {
    margin-left: 75%; }
  .o-grid > .o-grid__col--pull-2-of-2, .o-grid > .o-grid__col--pull-3-of-3, .o-grid > .o-grid__col--pull-4-of-4, .o-grid > .o-grid__col--pull-6-of-6, .o-grid > .o-grid__col--pull-12-of-12 {
    margin-left: -100%; }
  .o-grid > .o-grid__col--pull-1-of-2, .o-grid > .o-grid__col--pull-2-of-4, .o-grid > .o-grid__col--pull-3-of-6, .o-grid > .o-grid__col--pull-6-of-12 {
    margin-left: -50%; }
  .o-grid > .o-grid__col--pull-1-of-3, .o-grid > .o-grid__col--pull-2-of-6, .o-grid > .o-grid__col--pull-4-of-12 {
    margin-left: -33.33333%; }
  .o-grid > .o-grid__col--pull-2-of-3, .o-grid > .o-grid__col--pull-4-of-6, .o-grid > .o-grid__col--pull-8-of-12 {
    margin-left: -66.66667%; }
  .o-grid > .o-grid__col--pull-1-of-4, .o-grid > .o-grid__col--pull-3-of-12 {
    margin-left: -25%; }
  .o-grid > .o-grid__col--pull-3-of-4, .o-grid > .o-grid__col--pull-9-of-12 {
    margin-left: -75%; }
  .o-grid > .o-grid__col--1-of-6 {
    width: 16.66667%; }
  .o-grid > .o-grid__col--push-1-of-6 {
    margin-left: 16.66667%; }
  .o-grid > .o-grid__col--pull-1-of-6 {
    margin-left: -16.66667%; }
  .o-grid > .o-grid__col--5-of-6 {
    width: 83.33333%; }
  .o-grid > .o-grid__col--push-5-of-6 {
    margin-left: 83.33333%; }
  .o-grid > .o-grid__col--pull-5-of-6 {
    margin-left: -83.33333%; }
  .o-grid > .o-grid__col--1-of-12 {
    width: 8.33333%; }
  .o-grid > .o-grid__col--push-1-of-12 {
    margin-left: 8.33333%; }
  .o-grid > .o-grid__col--pull-1-of-12 {
    margin-left: -8.33333%; }
  .o-grid > .o-grid__col--2-of-12 {
    width: 16.66667%; }
  .o-grid > .o-grid__col--push-2-of-12 {
    margin-left: 16.66667%; }
  .o-grid > .o-grid__col--pull-2-of-12 {
    margin-left: -16.66667%; }
  .o-grid > .o-grid__col--5-of-12 {
    width: 41.66667%; }
  .o-grid > .o-grid__col--push-5-of-12 {
    margin-left: 41.66667%; }
  .o-grid > .o-grid__col--pull-5-of-12 {
    margin-left: -41.66667%; }
  .o-grid > .o-grid__col--7-of-12 {
    width: 58.33333%; }
  .o-grid > .o-grid__col--push-7-of-12 {
    margin-left: 58.33333%; }
  .o-grid > .o-grid__col--pull-7-of-12 {
    margin-left: -58.33333%; }
  .o-grid > .o-grid__col--10-of-12 {
    width: 83.33333%; }
  .o-grid > .o-grid__col--push-10-of-12 {
    margin-left: 83.33333%; }
  .o-grid > .o-grid__col--pull-10-of-12 {
    margin-left: -83.33333%; }
  .o-grid > .o-grid__col--11-of-12 {
    width: 91.66667%; }
  .o-grid > .o-grid__col--push-11-of-12 {
    margin-left: 91.66667%; }
  .o-grid > .o-grid__col--pull-11-of-12 {
    margin-left: -91.66667%; }
  .o-grid .o-grid__col {
    display: inline-block;
    vertical-align: top;
    min-height: 1px;
    margin-right: -0.24em;
    padding-left: 20px;
    box-sizing: border-box; }
    [data-reactid] .o-grid .o-grid__col {
      margin-right: 0; }
  .o-grid .o-grid__col--centered {
    display: block;
    margin-right: auto;
    margin-left: auto; }
  .o-grid .o-grid__col--d-first {
    float: left; }
  .o-grid .o-grid__col--d-last {
    float: right; }
  .o-grid.grid--no-gutter {
    width: 100%;
    margin-left: 0; }
    .o-grid.grid--no-gutter .o-grid__col {
      padding-left: 0; }
    .o-grid.grid--no-gutter .o-grid__col--span-all {
      width: 100%;
      margin-left: 0; }
  .o-grid .o-grid__col--ab {
    vertical-align: bottom; }
  .o-grid .o-grid__col--am {
    vertical-align: middle; }

.o-media {
  display: block; }

.o-media__img {
  margin-right: 12px;
  float: left; }
  .o-media__img > img {
    display: block; }

.o-media__body {
  display: block;
  overflow: hidden; }
  .o-media__body,
  .o-media__body > :last-child {
    margin-bottom: 0; }

.o-list-ui {
  margin: 0;
  padding: 0;
  list-style: none; }
  .o-list-ui--dividers li + li {
    border-top: 1px solid;
    border-color: rgba(37, 40, 43, 0.1); }

.o-flag {
  display: table;
  width: 100%; }
  .o-flag__fix, .o-flag__flex {
    display: table-cell;
    vertical-align: middle; }
    .o-flag--top .o-flag__fix, .o-flag--top .o-flag__flex {
      vertical-align: top; }
    .o-flag--bottom .o-flag__fix, .o-flag--bottom .o-flag__flex {
      vertical-align: bottom; }
  .o-flag__fix {
    padding-right: 10px; }
    .o-flag__fix > * {
      display: block;
      white-space: nowrap;
      max-width: none; }
    .o-flag--rev .o-flag__fix {
      padding-right: 0;
      padding-left: 10px; }
  .o-flag__flex {
    width: 100%; }

/**
 * Banner component. Used to display messages to the user, typically pinned to
 * the top of the page.
 */
.c-banner {
  color: #47525d;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-color: rgba(37, 40, 43, 0.1);
  background-color: #f7f9fa; }
  .c-banner.c-banner--success {
    color: #2c683f;
    background-color: #edfaf1; }
  .c-banner.c-banner--warning {
    color: #996e00;
    background-color: #fffdec; }
  .c-banner.c-banner--error {
    color: #921515;
    background-color: #ffe3e3; }
  .c-banner.c-banner--unpinned {
    border-width: 1px;
    border-style: solid;
    border-radius: 3px; }

/**
 * Button component
 */
.c-btn {
  display: inline-block;
  padding: 7px 12px;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  border: 1px solid currentColor;
  border-radius: 3px;
  cursor: pointer; }
  .c-btn:not(button, [type=submit]) {
    /*! You must ensure the element matches one of these selectors: button, [type=submit] */
    outline: 2px solid red !important; }
  .c-btn[disabled], .c-btn.c-btn--disabled {
    opacity: 0.5;
    cursor: default; }
  .c-btn:focus {
    box-shadow: 0 0 0 2px rgba(0, 126, 229, 0.3);
    outline: none; }
  .c-btn:hover {
    text-decoration: none; }
  .c-btn.c-btn--big {
    padding: 10px 26px; }
  .c-btn.c-btn--full {
    display: block; }
  .c-btn.c-btn--primary {
    color: white;
    border-color: #0071ce;
    background-color: #007ee5;
    background: -webkit-linear-gradient(#007ee5, #0071ce);
    background: linear-gradient(#007ee5, #0071ce); }
  .c-btn.c-btn--secondary {
    color: #47525d;
    border-color: #d0d4d9;
    background: white; }
  .c-btn.c-btn--tertiary {
    color: #007ee5;
    border-color: #007ee5;
    background-color: white;
    background: -webkit-linear-gradient(white, #f4faff);
    background: linear-gradient(white, #f4faff); }

/**
 * Card component with optional arrow/tail
 */
.c-card {
  display: inline-block;
  vertical-align: top;
  position: relative;
  padding: 12px;
  box-sizing: border-box;
  border: 1px solid rgba(37, 40, 43, 0.1);
  border-radius: 3px;
  box-shadow: 0 1px 2px rgba(37, 40, 43, 0.1);
  background-color: white;
  background-clip: padding-box;
  -webkit-transition: 0.1s;
          transition: 0.1s; }
  .c-card.c-card--arrow::before, .c-card.c-card--arrow::after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -8px;
    border: 8px solid transparent;
    border-bottom-color: white;
    -webkit-transition: 0.1s;
            transition: 0.1s; }
  .c-card.c-card--arrow::before {
    margin-left: -9px;
    border-width: 9px;
    border-bottom-color: rgba(37, 40, 43, 0.2); }
  .c-card.c-card--arrow-nw::after, .c-card.c-card--arrow-nw::before, .c-card.c-card--arrow-sw::after, .c-card.c-card--arrow-sw::before {
    left: 0;
    margin-left: 12px; }
  .c-card.c-card--arrow-nw::before, .c-card.c-card--arrow-sw::before {
    margin-left: 11px; }
  .c-card.c-card--arrow-ne::after, .c-card.c-card--arrow-ne::before, .c-card.c-card--arrow-se::after, .c-card.c-card--arrow-se::before {
    right: 0;
    left: auto;
    margin-right: 12px; }
  .c-card.c-card--arrow-ne::before, .c-card.c-card--arrow-se::before {
    margin-right: 11px; }
  .c-card.c-card--arrow-sw::after, .c-card.c-card--arrow-sw::before, .c-card.c-card--arrow-se::after, .c-card.c-card--arrow-se::before, .c-card.c-card--arrow-s::after, .c-card.c-card--arrow-s::before {
    top: 100%;
    bottom: auto;
    border-top-color: white;
    border-bottom-color: transparent; }
  .c-card.c-card--arrow-sw::before, .c-card.c-card--arrow-se::before, .c-card.c-card--arrow-s::before {
    border-top-color: rgba(37, 40, 43, 0.2);
    -webkit-filter: drop-shadow(0 1px 2px rgba(37, 40, 43, 0.2));
            filter: drop-shadow(0 1px 2px rgba(37, 40, 43, 0.2)); }

.c-card--floating:hover {
  border-color: rgba(37, 40, 43, 0.2);
  box-shadow: 0 1px 2px rgba(37, 40, 43, 0.2); }
.c-card--floating.c-card--arrow:hover::before {
  border-bottom-color: rgba(37, 40, 43, 0.3); }
.c-card--floating.c-card--arrow-se:hover::before, .c-card--floating.c-card--arrow-sw:hover::before, .c-card--floating.c-card--arrow-s:hover::before {
  border-top-color: rgba(37, 40, 43, 0.3);
  border-bottom-color: transparent;
  -webkit-filter: drop-shadow(0 1px 2px rgba(37, 40, 43, 0.3));
          filter: drop-shadow(0 1px 2px rgba(37, 40, 43, 0.3)); }
.c-card--floating.is-selected {
  border-color: #007ee5; }
.c-card--floating--arrow.is-selected::before, .c-card--floating--arrow.is-selected:hover::before {
  border-bottom-color: #007ee5; }
.c-card--floating--arrow-se.is-selected::before, .c-card--floating--arrow-se.is-selected:hover::before, .c-card--floating--arrow-sw.is-selected::before, .c-card--floating--arrow-sw.is-selected:hover::before, .c-card--floating--arrow-s.is-selected::before, .c-card--floating--arrow-s.is-selected:hover::before {
  border-top-color: #007ee5;
  border-bottom-color: transparent; }

/**
 * Input & label components
 */
.c-label {
  display: block;
  margin-bottom: 23px;
  font-size: 12px;
  color: #7b8994; }
  .c-label:not(label) {
    /*! You must ensure the element matches one of these selectors: label */
    outline: 2px solid red !important; }

.c-input {
  display: block;
  width: 100%;
  padding: 7px;
  font-size: 13px;
  color: #47525d;
  border: 1px solid rgba(37, 40, 43, 0.1);
  border-radius: 3px;
  background-color: white;
  background-clip: padding-box; }
  .c-input:not(input, select, textarea) {
    /*! You must ensure the element matches one of these selectors: input, select, textarea */
    outline: 2px solid red !important; }
  .c-input:focus {
    border-color: #72b6ec;
    outline: 0; }
  .c-input:disabled, .c-input.is-disabled {
    background-color: #f7f9fa; }
  .c-input.is-invalid, .c-form--validated .c-input:invalid {
    background-image: url("../images/icon-form-invalid.svg");
    background-size: 14px;
    background-position: right 10px center;
    background-repeat: no-repeat;
    padding-right: 34px;
    border-color: rgba(232, 33, 16, 0.5);
    box-shadow: none;
    outline: 0; }
  .c-input.is-valid, .c-form--validated .c-input:valid {
    background-image: url("../images/icon-form-valid.svg");
    background-size: 14px;
    background-position: right 10px center;
    background-repeat: no-repeat;
    padding-right: 34px; }

textarea.c-input {
  resize: vertical; }

select.c-input {
  background-image: url("../images/icon-form-dropdown.svg");
  background-size: 7px 14px;
  background-position: right 10px center;
  background-repeat: no-repeat;
  padding-right: 27px; }

/**
 * Avatar component. A wrapper element with an (optional) image or the user's
 * initials.
 */
.c-avatar {
  width: 32px;
  height: 32px;
  font-size: 14px;
  line-height: 28px;
  font-weight: 600;
  display: inline-block;
  vertical-align: middle;
  overflow: hidden;
  position: relative;
  box-sizing: border-box;
  text-align: center;
  color: #007ee5;
  border-radius: 100%; }
  .c-avatar__img,
  .c-avatar > img {
    display: block;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover; }
  .c-avatar:after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: 100%;
    box-shadow: inset 0 0 0 1px rgba(37, 40, 43, 0.1);
    pointer-events: none; }
  .c-avatar.c-avatar--no-img {
    border: 2px solid currentColor; }
    .c-avatar.c-avatar--no-img:after {
      content: attr(data-initials);
      box-shadow: none; }
    .c-avatar.c-avatar--no-img.c-avatar--xs:after {
      content: ""; }
  .c-avatar--xs {
    width: 16px;
    height: 16px;
    font-size: 7px;
    line-height: 12px;
    font-weight: 700; }
    .c-avatar--xs:after {
      content: ""; }
  .c-avatar--s {
    width: 24px;
    height: 24px;
    font-size: 11px;
    line-height: 20px;
    font-weight: 700; }
  .c-avatar--m {
    width: 32px;
    height: 32px;
    font-size: 14px;
    line-height: 28px;
    font-weight: 600; }
  .c-avatar--l {
    width: 48px;
    height: 48px;
    font-size: 22px;
    line-height: 44px;
    font-weight: 400; }
  .c-avatar--xl {
    width: 64px;
    height: 64px;
    font-size: 29px;
    line-height: 60px;
    font-weight: 400; }

/**
 * Modal component
 */
.c-modal-overlay {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  position: absolute;
  -webkit-align-content: center;
      -ms-flex-line-pack: center;
          align-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 32px;
  background-color: rgba(61, 70, 77, 0.6); }

.c-modal {
  overflow: scroll;
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 640px;
      -ms-flex: 1 1 640px;
          flex: 1 1 640px;
  max-width: 640px;
  border-radius: 3px;
  box-shadow: 0 1px 2px rgba(37, 40, 43, 0.1);
  background-color: white; }

.c-modal__title,
.c-modal__header {
  z-index: 3;
  padding: 16px 32px;
  box-shadow: 0 1px 1px rgba(37, 40, 43, 0.1);
  background-color: white; }
  .c-modal--unibody .c-modal__title, .c-modal--unibody
  .c-modal__header {
    padding-bottom: 0;
    box-shadow: none; }
  .c-modal__title h2,
  .c-modal__header h2 {
    margin-bottom: 0; }

.c-modal__content {
  z-index: 2;
  padding: 32px;
  background-color: #f7f9fa; }
  .c-modal--unibody .c-modal__content {
    background-color: white; }

.c-modal__banner {
  box-shadow: inset 0 1px 0 rgba(37, 40, 43, 0.1); }

.c-input--typeahead.is-active {
  border-bottom: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0; }

/*!
 * Typeahead component
 */
.c-typeahead {
  display: none;
  overflow: scroll;
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  max-height: 180px;
  margin-top: -1px;
  line-height: 1.5;
  border: 1px solid rgba(37, 40, 43, 0.1);
  border-radius: 0 0 4px 4px;
  box-shadow: 0 1px 2px rgba(37, 40, 43, 0.1);
  background-color: white;
  background-clip: padding-box; }
  .c-typeahead.is-open {
    display: block; }
  .c-typeahead__result {
    margin-top: -1px;
    cursor: pointer; }
    .c-typeahead__result.is-selected {
      z-index: 2;
      margin-bottom: -2px;
      color: #007ee5;
      border-bottom: 1px solid;
      border-color: rgba(37, 40, 43, 0.1);
      background-color: #f4faff; }
      .c-typeahead__result.is-selected .f-meta {
        color: inherit; }
    .c-typeahead__result.is-invalid {
      cursor: default; }
  .c-typeahead__media, .c-typeahead__content {
    display: inline-block;
    vertical-align: middle; }
  .c-typeahead__media {
    margin-right: 12px; }

/**
 * Title-bubble component
 */
.c-title-bubble {
  display: inline-block;
  position: relative; }
  .c-title-bubble:before, .c-title-bubble:after {
    z-index: 1000; }
  .c-title-bubble:after {
    content: attr(data-title);
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    white-space: nowrap;
    margin-top: 5px;
    padding: 7px 9px;
    font-size: 11px;
    font-weight: 500;
    color: white;
    border-radius: 3px;
    background-color: #3d464d;
    -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
            transform: translateX(-50%);
    -webkit-transform-origin: 50% 50%;
        -ms-transform-origin: 50% 50%;
            transform-origin: 50% 50%; }
  .c-title-bubble:before {
    content: "";
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    margin-top: -5px;
    margin-left: -5px;
    border: 5px solid transparent;
    border-bottom-color: #3d464d; }
  .c-title-bubble--n:after {
    top: auto;
    bottom: 100%;
    margin-bottom: 5px; }
  .c-title-bubble--n:before {
    top: auto;
    bottom: 100%;
    margin-bottom: -5px;
    border-top-color: #3d464d;
    border-bottom-color: transparent; }
  .c-title-bubble--e:after {
    top: 50%;
    left: 100%;
    margin-top: 0;
    margin-left: 5px;
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%); }
  .c-title-bubble--e:before {
    top: 50%;
    left: 100%;
    margin-top: -5px;
    border-right-color: #3d464d;
    border-bottom-color: transparent; }
  .c-title-bubble--w:after {
    top: 50%;
    right: 100%;
    left: auto;
    margin-top: 0;
    margin-right: 5px;
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%); }
  .c-title-bubble--w:before {
    top: 50%;
    right: 100%;
    left: auto;
    margin-top: -5px;
    margin-right: -5px;
    border-bottom-color: transparent;
    border-left-color: #3d464d; }
  .c-title-bubble:hover:before, .c-title-bubble:hover:after, .c-title-bubble:focus:before, .c-title-bubble:focus:after {
    display: block; }

/*!
 * Token components
 */
.c-token {
  display: inline-block;
  white-space: nowrap;
  padding: 4px;
  line-height: 1;
  color: #47525d;
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px rgba(37, 40, 43, 0.1);
  background-color: #f7f9fa;
  cursor: default; }
  .c-token:hover {
    box-shadow: inset 0 0 0 1px rgba(37, 40, 43, 0.3); }
  .c-token > * {
    vertical-align: middle;
    margin-left: 0.25em; }
    .c-token > *:first-child {
      margin-left: 0; }

.c-token--warning {
  color: #996e00;
  background-color: #fffdec; }

.c-token--invalid {
  color: #921515;
  background-color: #ffe3e3; }

.c-token--pending {
  opacity: 0.5; }

.c-token.is-selected, .c-token.is-selected:hover {
  color: white;
  background-color: #7b8994; }
  .c-token.is-selected.c-token--warning, .c-token.is-selected:hover.c-token--warning {
    background-color: #c99700; }
  .c-token.is-selected.c-token--invalid, .c-token.is-selected:hover.c-token--invalid {
    background-color: #c21c1c; }

.c-token__name {
  top: 1px;
  margin-left: 0.25em; }

.c-token__delete {
  margin-right: 0.15em;
  margin-left: 0.25em;
  font-size: 1.25em;
  color: currentColor;
  opacity: 0.7;
  cursor: pointer; }

/**
 * Loading indicator component
 */
.c-loader {
  display: inline-block;
  position: relative;
  width: 6px;
  height: 6px;
  margin: 12px 0;
  font-size: 0;
  color: transparent;
  border-radius: 100%;
  background-color: rgba(61, 70, 77, 0.3); }
  .c-loader, .c-loader:after, .c-loader:before {
    -webkit-animation: loaderFade 0.9s ease-in-out infinite;
            animation: loaderFade 0.9s ease-in-out infinite; }
  .c-loader:after, .c-loader:before {
    content: "";
    vertical-align: middle;
    position: absolute;
    left: 100%;
    width: 6px;
    height: 6px;
    margin-left: 4px;
    border-radius: 100%;
    background-color: rgba(61, 70, 77, 0.3);
    -webkit-animation-delay: 0.3s;
            animation-delay: 0.3s; }
  .c-loader:after {
    left: 200%;
    margin-left: 8px;
    -webkit-animation-delay: 0.6s;
            animation-delay: 0.6s; }

@-webkit-keyframes loaderFade {
  50% {
    background-color: #3d464d; }
  0%, 100% {
    background-color: rgba(61, 70, 77, 0.3); } }

@keyframes loaderFade {
  50% {
    background-color: #3d464d; }
  0%, 100% {
    background-color: rgba(61, 70, 77, 0.3); } }
.c-tab-nav {
  margin-left: 0;
  padding-left: 0;
  list-style: none;
  border-bottom: 1px solid rgba(61, 70, 77, 0.1); }

.c-tab-nav__tab {
  display: inline-block;
  margin-bottom: -1px;
  color: #7b8994;
  border-bottom: 1px solid transparent;
  -webkit-transition: 0.2s;
          transition: 0.2s; }
  .c-tab-nav__tab:hover {
    color: #3d464d;
    border-bottom-color: rgba(61, 70, 77, 0.3); }
  .c-tab-nav__tab + .c-tab-nav__tab {
    margin-left: 16px; }
  .c-tab-nav__tab a {
    display: inline-block;
    padding-bottom: 8px;
    color: inherit; }
    .c-tab-nav__tab a:hover {
      text-decoration: none; }
  .c-tab-nav__tab.c-tab-nav__tab--is-active {
    font-weight: 600;
    color: #3d464d;
    border-bottom-color: currentColor; }

.c-calendar {
  display: inline-block;
  border-radius: 5px;
  background-color: #f7f9fa; }
  .c-calendar__header {
    padding-bottom: 4px;
    font-size: 0.6em;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #7b8994; }
  .c-calendar__date {
    padding: 4px 8px;
    text-align: center;
    color: #007ee5;
    border: 1px solid #f7f9fa;
    background-color: white;
    cursor: pointer; }
    tr:first-child .c-calendar__date:first-child {
      border-top-left-radius: 4px; }
    tr:first-child .c-calendar__date:last-child {
      border-top-right-radius: 4px; }
    tr:last-child .c-calendar__date:first-child {
      border-bottom-left-radius: 4px; }
    tr:last-child .c-calendar__date:last-child {
      border-bottom-right-radius: 4px; }
    .c-calendar__date:hover {
      background-color: #f4faff; }
    .c-calendar__date--disabled, .c-calendar__date--disabled:hover {
      color: #d0d4d9;
      background-color: #f7f9fa;
      cursor: default; }
    .c-calendar__date.is-selected {
      color: white;
      background-color: #007ee5; }
    .c-calendar__date.is-in-range {
      color: white;
      background-color: #72b6ec; }

.c-arrow, .c-arrow--down {
  display: inline-block;
  width: 0;
  height: 0;
  border: 5px solid transparent;
  border-top-color: currentColor; }
.c-arrow--left {
  display: inline-block;
  width: 0;
  height: 0;
  border: 5px solid transparent;
  border-right-color: currentColor; }
.c-arrow--right {
  display: inline-block;
  width: 0;
  height: 0;
  border: 5px solid transparent;
  border-left-color: currentColor; }
.c-arrow--up {
  display: inline-block;
  width: 0;
  height: 0;
  border: 5px solid transparent;
  border-bottom-color: currentColor; }

.clearfix:after,
.o-media:after {
  content: "";
  display: table;
  clear: both; }

.u-l-island {
  padding: 23px; }
  .u-l-island--v {
    padding-top: 23px;
    padding-bottom: 23px; }

.u-l-isle,
.c-banner {
  padding: 12px; }
  .u-l-isle--v {
    padding-top: 12px;
    padding-bottom: 12px; }

.u-l-spit {
  padding: 6px; }
  .u-l-spit--v {
    padding-top: 6px;
    padding-bottom: 6px; }

.u-l-country {
  padding: 46px; }
  .u-l-country--v {
    padding-top: 46px;
    padding-bottom: 46px; }

.u-l-continent {
  padding: 92px; }
  .u-l-continent--v {
    padding-top: 92px;
    padding-bottom: 92px; }

.u-l-p {
  margin-bottom: 23px !important; }
  .u-l-p--dbl {
    margin-bottom: 46px !important; }
  .u-l-p--hlf {
    margin-bottom: 12px !important; }

.u-l-trim {
  margin: 0 !important; }

.u-l-fl {
  float: left !important; }

.u-l-fr {
  float: right !important; }

.u-l-b {
  display: block !important; }

.u-l-ib {
  display: inline-block !important; }
  .u-l-ib.u-l-ib {
    vertical-align: middle; }

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

.u-font-left {
  text-align: left !important; }

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

.u-font-small {
  font-size: 0.85em; }

.u-font-meta {
  color: #7b8994; }

.u-font-error {
  color: #e82110; }

.u-font-success {
  color: #48ac68; }

.u-thide {
  overflow: hidden;
  white-space: nowrap;
  text-indent: 100%; }

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