/* Utilities and variables */
/**
  * This is where we'll declare all of our colors and variables
  * I think it's a good idea if we don't just copy direct from Outro,
  * but rather we start clean with the freshest in mocks of new projects
  * so we don't end up with like 50 variations of each color when some
  * might only be used once.
*/
/*
 * Core Colors
 */
/*
 * Extended Colors
 */
/*
 * State Colors
 */
/*
 * Gradients Colors
 */
/*
 * Font weights
 */
/*
 * Font sizes
 */
/*
 * Border radii
 */
/**
 * Base spacing
 */
/**
  * This is where we'll declare any common styles such as spacing,
  * border-radius, font-size, font-boldness and stuff of that nature to be used
  * as classnames in a pinch.
  * Outro's is pretty good so I'll take it and refactor it a bit.
*/
/**
 * Add/remove floats
 */
@import url(../../node_modules/rc-slider/assets/index.css);
.\+float-right {
  float: right !important; }

.\+float-left {
  float: left !important; }

.\+float-none {
  float: none !important; }

.\+hundred-width {
  width: 100% !important; }

.\+hundred-height {
  height: 100% !important; }

/**
 * Text alignment and decoration
 */
.\+text-left {
  text-align: left  !important; }

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

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

.\+underline {
  text-decoration: underline !important; }

/**
 * Misc.
 */
.\+inline {
  display: inline-block !important; }

.\+whitespace-pre {
  white-space: pre; }

/**
 * Text colors
 */
.\+black-text {
  color: #14151A !important; }

.\+blue-text, .breadcrumbs .breadcrumb .label.is-active {
  color: #0076FF !important; }

.\+green-text {
  color: #50D0AC !important; }

.\+grey-text, .breadcrumbs .bullets, .breadcrumbs .breadcrumb .label:hover {
  color: #878992 !important; }

.\+red-text {
  color: #D91434 !important; }

.\+white-text {
  color: #FFFFFF !important; }

/**
 * Text sizes
 */
.\+text-smallest {
  font-size: 14px; }

.\+text-small {
  font-size: 16px; }

.\+text-medium {
  font-size: 20px; }

.\+text-large {
  font-size: 28px; }

.\+text-largest {
  font-size: 48px; }

/**
 * Container display
 */
.\+display-flex {
  display: flex; }

.\+flex-center-justify {
  display: flex;
  justify-content: center; }

.\+flex-center-center {
  display: flex;
  justify-content: center;
  align-items: center; }

.\+flex-row {
  display: flex;
  flex-direction: row; }

.\+flex-wrap {
  flex-wrap: wrap; }

.\+flex-spread {
  display: flex;
  justify-content: space-between; }

.\+flex-column {
  display: flex;
  flex-direction: column; }

.\+flex-center-column {
  display: flex;
  align-items: center;
  flex-direction: column; }

.\+flex-middle-column {
  display: flex;
  justify-content: center;
  flex-direction: column; }

.\+middle-align {
  align-items: center; }

/**
 * Padding
 */
.\+soft {
  padding: 8px !important; }

.\+soft-double {
  padding: 16px !important; }

.\+soft-top {
  padding-top: 8px !important; }

.\+soft-top-double {
  padding-top: 16px !important; }

.\+no-padding {
  padding: 0 !important; }

/**
 * Margins
 */
.\+push-top {
  margin-top: 16px !important; }

.\+push-double-top {
  margin-top: 32px !important; }

.\+push-half-top {
  margin-top: 8px !important; }

.\+push-quarter-top {
  margin-top: 4px !important; }

.\+push-bottom {
  margin-bottom: 16px !important; }

.\+push-double-bottom {
  margin-bottom: 32px !important; }

.\+push-half-bottom {
  margin-bottom: 8px !important; }

.\+push-quarter-bottom {
  margin-bottom: 4px !important; }

.\+push-left {
  margin-left: 16px !important; }

.\+push-double-left {
  margin-left: 32px !important; }

.\+push-half-left, .breadcrumbs .breadcrumb .separator {
  margin-left: 8px !important; }

.\+push-quarter-left {
  margin-left: 4px !important; }

.\+push-right, .breadcrumbs .bullets {
  margin-right: 16px !important; }

.\+push-double-right {
  margin-right: 32px !important; }

.\+push-half-right, .breadcrumbs .breadcrumb {
  margin-right: 8px !important; }

.\+push-quarter-right {
  margin-right: 4px !important; }

.\+push-self-right {
  margin-left: auto !important; }

.\+push-self-left {
  margin-right: auto !important; }

/*
 * Cursor styles
 */
.\+cursor-pointer {
  cursor: pointer; }

.\+cursor-default {
  cursor: default; }

/*
 * Font weight helpers
 */
.\+font-weight-semibold {
  font-weight: 600 !important; }

.\+font-weight-bold {
  font-weight: 700 !important; }

/*
 * Vendor prefixer mixin. Auto-prefixes the rule with the appropriate vendor
 * prefixes for major browsers.
 *
 * Usage:
 * @include vendor(user-select, none);
 */
.\+no-select {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none; }

/* General layout */
/* TODO: Add a reset.css module to normalize elements across browsers */
body, html {
  margin: 0;
  padding: 0;
  height: 100%;
  background-color: #FFFFFF; }

* {
  font-family: 'Source Sans Pro', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif; }

html {
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  color: #14151A; }

body {
  font-size: 14px;
  font-weight: 400; }
  body h1 {
    margin: 0;
    font-size: 48px;
    font-weight: 600; }
  body h2 {
    margin: 0;
    font-size: 28px;
    font-weight: 600; }
  body h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 600; }
  body h4 {
    margin: 0;
    font-size: 16px;
    font-weight: 600; }
  body h5 {
    margin: 0;
    font-size: 14px;
    font-weight: 600; }

@font-face {
  font-family: 'outro-icon-font';
  src: url("/fonts/outro-icon-font.eot?lwbf79");
  src: url("/fonts/outro-icon-font.eot?lwbf79#iefix") format("embedded-opentype"), url("/fonts/outro-icon-font.ttf?lwbf79") format("truetype"), url("/fonts/outro-icon-font.woff?lwbf79") format("woff"), url("/fonts/outro-icon-font.svg?lwbf79#outro-icon-font") format("svg");
  font-weight: normal;
  font-style: normal; }

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'outro-icon-font' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

.icon-activity:before {
  content: "\e911"; }

.icon-airplay:before {
  content: "\e912"; }

.icon-alert-circle:before {
  content: "\e913"; }

.icon-alert-octagon:before {
  content: "\e914"; }

.icon-alert-triangle:before {
  content: "\e915"; }

.icon-align-center:before {
  content: "\e916"; }

.icon-align-justify:before {
  content: "\e917"; }

.icon-align-left:before {
  content: "\e918"; }

.icon-align-right:before {
  content: "\e919"; }

.icon-anchor:before {
  content: "\e91a"; }

.icon-aperture:before {
  content: "\e91b"; }

.icon-archive:before {
  content: "\e91c"; }

.icon-arrow-down:before {
  content: "\e900"; }

.icon-arrow-down-circle:before {
  content: "\e91d"; }

.icon-arrow-down-left:before {
  content: "\e91e"; }

.icon-arrow-down-right:before {
  content: "\e91f"; }

.icon-arrow-left:before {
  content: "\e901"; }

.icon-arrow-left-circle:before {
  content: "\e920"; }

.icon-arrow-right:before {
  content: "\e902"; }

.icon-arrow-right-circle:before {
  content: "\e921"; }

.icon-arrow-up:before {
  content: "\e903"; }

.icon-arrow-up-circle:before {
  content: "\e922"; }

.icon-arrow-up-left:before {
  content: "\e923"; }

.icon-arrow-up-right:before {
  content: "\e924"; }

.icon-at-sign:before {
  content: "\e925"; }

.icon-award:before {
  content: "\e926"; }

.icon-bar-chart:before {
  content: "\e927"; }

.icon-bar-chart-2:before {
  content: "\e928"; }

.icon-battery:before {
  content: "\e929"; }

.icon-battery-charging:before {
  content: "\e92a"; }

.icon-bell:before {
  content: "\e92b"; }

.icon-bell-off:before {
  content: "\e92c"; }

.icon-bluetooth:before {
  content: "\e92d"; }

.icon-bold:before {
  content: "\e92e"; }

.icon-book:before {
  content: "\e92f"; }

.icon-book-open:before {
  content: "\e930"; }

.icon-bookmark:before {
  content: "\e931"; }

.icon-box:before {
  content: "\e932"; }

.icon-briefcase:before {
  content: "\e933"; }

.icon-calendar:before {
  content: "\e934"; }

.icon-camera:before {
  content: "\e935"; }

.icon-camera-off:before {
  content: "\e936"; }

.icon-cast:before {
  content: "\e937"; }

.icon-check:before {
  content: "\e938"; }

.icon-check-circle:before {
  content: "\e939"; }

.icon-check-square:before {
  content: "\e904"; }

.icon-chevron-down:before {
  content: "\e905"; }

.icon-chevron-left:before {
  content: "\e906"; }

.icon-chevron-right:before {
  content: "\e907"; }

.icon-chevron-up:before {
  content: "\e908"; }

.icon-chevrons-down:before {
  content: "\e93a"; }

.icon-chevrons-left:before {
  content: "\e93b"; }

.icon-chevrons-right:before {
  content: "\e93c"; }

.icon-chevrons-up:before {
  content: "\e93d"; }

.icon-chrome:before {
  content: "\e93e"; }

.icon-circle:before {
  content: "\e93f"; }

.icon-clipboard:before {
  content: "\e940"; }

.icon-clock:before {
  content: "\e941"; }

.icon-cloud:before {
  content: "\e942"; }

.icon-cloud-drizzle:before {
  content: "\e943"; }

.icon-cloud-lightning:before {
  content: "\e944"; }

.icon-cloud-off:before {
  content: "\e945"; }

.icon-cloud-rain:before {
  content: "\e946"; }

.icon-cloud-snow:before {
  content: "\e947"; }

.icon-code:before {
  content: "\e948"; }

.icon-codepen:before {
  content: "\e949"; }

.icon-command:before {
  content: "\e94a"; }

.icon-compass:before {
  content: "\e94b"; }

.icon-copy:before {
  content: "\e94c"; }

.icon-corner-down-left:before {
  content: "\e94d"; }

.icon-corner-down-right:before {
  content: "\e94e"; }

.icon-corner-left-down:before {
  content: "\e94f"; }

.icon-corner-left-up:before {
  content: "\e950"; }

.icon-corner-right-down:before {
  content: "\e951"; }

.icon-corner-right-up:before {
  content: "\e952"; }

.icon-corner-up-left:before {
  content: "\e953"; }

.icon-corner-up-right:before {
  content: "\e954"; }

.icon-cpu:before {
  content: "\e955"; }

.icon-credit-card:before {
  content: "\e956"; }

.icon-crop:before {
  content: "\e957"; }

.icon-crosshair:before {
  content: "\e958"; }

.icon-database:before {
  content: "\e959"; }

.icon-delete:before {
  content: "\e95a"; }

.icon-disc:before {
  content: "\e95b"; }

.icon-dollar-sign:before {
  content: "\e95c"; }

.icon-download:before {
  content: "\e95d"; }

.icon-download-cloud:before {
  content: "\e95e"; }

.icon-droplet:before {
  content: "\e95f"; }

.icon-edit:before {
  content: "\e960"; }

.icon-edit-2:before {
  content: "\e961"; }

.icon-edit-3:before {
  content: "\e962"; }

.icon-external-link:before {
  content: "\e963"; }

.icon-eye:before {
  content: "\e964"; }

.icon-eye-off:before {
  content: "\e965"; }

.icon-facebook:before {
  content: "\e966"; }

.icon-fast-forward:before {
  content: "\e967"; }

.icon-feather:before {
  content: "\e968"; }

.icon-file:before {
  content: "\e969"; }

.icon-file-minus:before {
  content: "\e96a"; }

.icon-file-plus:before {
  content: "\e96b"; }

.icon-file-text:before {
  content: "\e96c"; }

.icon-film:before {
  content: "\e96d"; }

.icon-filter:before {
  content: "\e96e"; }

.icon-flag:before {
  content: "\e96f"; }

.icon-folder:before {
  content: "\e970"; }

.icon-folder-minus:before {
  content: "\e971"; }

.icon-folder-plus:before {
  content: "\e972"; }

.icon-gift:before {
  content: "\e973"; }

.icon-git-branch:before {
  content: "\e974"; }

.icon-git-commit:before {
  content: "\e975"; }

.icon-git-merge:before {
  content: "\e976"; }

.icon-git-pull-request:before {
  content: "\e977"; }

.icon-github:before {
  content: "\e978"; }

.icon-gitlab:before {
  content: "\e979"; }

.icon-globe:before {
  content: "\e97a"; }

.icon-grid:before {
  content: "\e97b"; }

.icon-hard-drive:before {
  content: "\e97c"; }

.icon-hash:before {
  content: "\e97d"; }

.icon-headphones:before {
  content: "\e97e"; }

.icon-heart:before {
  content: "\e97f"; }

.icon-help-circle:before {
  content: "\e980"; }

.icon-home:before {
  content: "\e981"; }

.icon-image:before {
  content: "\e982"; }

.icon-inbox:before {
  content: "\e983"; }

.icon-info:before {
  content: "\e984"; }

.icon-instagram:before {
  content: "\e985"; }

.icon-italic:before {
  content: "\e986"; }

.icon-layers:before {
  content: "\e987"; }

.icon-layout:before {
  content: "\e988"; }

.icon-life-buoy:before {
  content: "\e989"; }

.icon-link:before {
  content: "\e98a"; }

.icon-link-2:before {
  content: "\e98b"; }

.icon-linkedin:before {
  content: "\e98c"; }

.icon-list:before {
  content: "\e98d"; }

.icon-loader:before {
  content: "\e98e"; }

.icon-lock:before {
  content: "\e909"; }

.icon-log-in:before {
  content: "\e98f"; }

.icon-log-out:before {
  content: "\e990"; }

.icon-mail:before {
  content: "\e991"; }

.icon-map:before {
  content: "\e992"; }

.icon-map-pin:before {
  content: "\e993"; }

.icon-maximize:before {
  content: "\e994"; }

.icon-maximize-2:before {
  content: "\e995"; }

.icon-menu:before {
  content: "\e996"; }

.icon-message-circle:before {
  content: "\e997"; }

.icon-message-square:before {
  content: "\e998"; }

.icon-mic:before {
  content: "\e999"; }

.icon-mic-off:before {
  content: "\e99a"; }

.icon-minimize:before {
  content: "\e99b"; }

.icon-minimize-2:before {
  content: "\e99c"; }

.icon-minus:before {
  content: "\e99d"; }

.icon-minus-circle:before {
  content: "\e99e"; }

.icon-minus-square:before {
  content: "\e90a"; }

.icon-monitor:before {
  content: "\e99f"; }

.icon-moon:before {
  content: "\e9a0"; }

.icon-more-horizontal:before {
  content: "\e9a1"; }

.icon-more-vertical:before {
  content: "\e9a2"; }

.icon-move:before {
  content: "\e9a3"; }

.icon-music:before {
  content: "\e9a4"; }

.icon-navigation:before {
  content: "\e9a5"; }

.icon-navigation-2:before {
  content: "\e9a6"; }

.icon-octagon:before {
  content: "\e9a7"; }

.icon-package:before {
  content: "\e9a8"; }

.icon-paperclip:before {
  content: "\e90b"; }

.icon-pause:before {
  content: "\e9a9"; }

.icon-pause-circle:before {
  content: "\e9aa"; }

.icon-percent:before {
  content: "\e9ab"; }

.icon-phone:before {
  content: "\e9ac"; }

.icon-phone-call:before {
  content: "\e9ad"; }

.icon-phone-forwarded:before {
  content: "\e9ae"; }

.icon-phone-incoming:before {
  content: "\e9af"; }

.icon-phone-missed:before {
  content: "\e9b0"; }

.icon-phone-off:before {
  content: "\e9b1"; }

.icon-phone-outgoing:before {
  content: "\e9b2"; }

.icon-pie-chart:before {
  content: "\e9b3"; }

.icon-play:before {
  content: "\e9b4"; }

.icon-play-circle:before {
  content: "\e9b5"; }

.icon-plus:before {
  content: "\e9b6"; }

.icon-plus-circle:before {
  content: "\e9b7"; }

.icon-plus-square:before {
  content: "\e9b8"; }

.icon-pocket:before {
  content: "\e9b9"; }

.icon-power:before {
  content: "\e9ba"; }

.icon-printer:before {
  content: "\e9bb"; }

.icon-radio:before {
  content: "\e9bc"; }

.icon-refresh-ccw:before {
  content: "\e9bd"; }

.icon-refresh-cw:before {
  content: "\e9be"; }

.icon-repeat:before {
  content: "\e9bf"; }

.icon-rewind:before {
  content: "\e9c0"; }

.icon-rotate-ccw:before {
  content: "\e9c1"; }

.icon-rotate-cw:before {
  content: "\e9c2"; }

.icon-rss:before {
  content: "\e9c3"; }

.icon-save:before {
  content: "\e9c4"; }

.icon-scissors:before {
  content: "\e9c5"; }

.icon-search:before {
  content: "\e9c6"; }

.icon-send:before {
  content: "\e90c"; }

.icon-server:before {
  content: "\e9c7"; }

.icon-settings:before {
  content: "\e9c8"; }

.icon-share:before {
  content: "\e9c9"; }

.icon-share-2:before {
  content: "\e90d"; }

.icon-shield:before {
  content: "\e9ca"; }

.icon-shield-off:before {
  content: "\e9cb"; }

.icon-shopping-bag:before {
  content: "\e9cc"; }

.icon-shopping-cart:before {
  content: "\e9cd"; }

.icon-shuffle:before {
  content: "\e9ce"; }

.icon-sidebar:before {
  content: "\e9cf"; }

.icon-skip-back:before {
  content: "\e9d0"; }

.icon-skip-forward:before {
  content: "\e9d1"; }

.icon-slack:before {
  content: "\e9d2"; }

.icon-slash:before {
  content: "\e9d3"; }

.icon-sliders:before {
  content: "\e9d4"; }

.icon-smartphone:before {
  content: "\e9d5"; }

.icon-speaker:before {
  content: "\e9d6"; }

.icon-square:before {
  content: "\e90e"; }

.icon-star:before {
  content: "\e9d7"; }

.icon-stop-circle:before {
  content: "\e9d8"; }

.icon-sun:before {
  content: "\e9d9"; }

.icon-sunrise:before {
  content: "\e9da"; }

.icon-sunset:before {
  content: "\e9db"; }

.icon-tablet:before {
  content: "\e9dc"; }

.icon-tag:before {
  content: "\e9dd"; }

.icon-target:before {
  content: "\e9de"; }

.icon-terminal:before {
  content: "\e9df"; }

.icon-thermometer:before {
  content: "\e9e0"; }

.icon-thumbs-down:before {
  content: "\e9e1"; }

.icon-thumbs-up:before {
  content: "\e9e2"; }

.icon-toggle-left:before {
  content: "\e9e3"; }

.icon-toggle-right:before {
  content: "\e9e4"; }

.icon-trash:before {
  content: "\e9e5"; }

.icon-trash-2:before {
  content: "\e9e6"; }

.icon-trending-down:before {
  content: "\e9e7"; }

.icon-trending-up:before {
  content: "\e9e8"; }

.icon-triangle:before {
  content: "\e9e9"; }

.icon-truck:before {
  content: "\e9ea"; }

.icon-tv:before {
  content: "\e9eb"; }

.icon-twitter:before {
  content: "\e9ec"; }

.icon-type:before {
  content: "\e9ed"; }

.icon-umbrella:before {
  content: "\e9ee"; }

.icon-underline:before {
  content: "\e9ef"; }

.icon-unlock:before {
  content: "\e90f"; }

.icon-upload:before {
  content: "\e9f0"; }

.icon-upload-cloud:before {
  content: "\e910"; }

.icon-user:before {
  content: "\e9f1"; }

.icon-user-check:before {
  content: "\e9f2"; }

.icon-user-minus:before {
  content: "\e9f3"; }

.icon-user-plus:before {
  content: "\e9f4"; }

.icon-user-x:before {
  content: "\e9f5"; }

.icon-users:before {
  content: "\e9f6"; }

.icon-video:before {
  content: "\e9f7"; }

.icon-video-off:before {
  content: "\e9f8"; }

.icon-voicemail:before {
  content: "\e9f9"; }

.icon-volume:before {
  content: "\e9fa"; }

.icon-volume-1:before {
  content: "\e9fb"; }

.icon-volume-2:before {
  content: "\e9fc"; }

.icon-volume-x:before {
  content: "\e9fd"; }

.icon-watch:before {
  content: "\e9fe"; }

.icon-wifi:before {
  content: "\e9ff"; }

.icon-wifi-off:before {
  content: "\ea00"; }

.icon-wind:before {
  content: "\ea01"; }

.icon-x:before {
  content: "\ea02"; }

.icon-x-circle:before {
  content: "\ea03"; }

.icon-x-square:before {
  content: "\ea04"; }

.icon-youtube:before {
  content: "\ea05"; }

.icon-zap:before {
  content: "\ea06"; }

.icon-zap-off:before {
  content: "\ea07"; }

.icon-zoom-in:before {
  content: "\ea08"; }

.icon-zoom-out:before {
  content: "\ea09"; }

/* Components */
.button-component {
  color: #FFFFFF;
  background-color: #0076FF;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  border: 1px solid #0076FF;
  font-size: 14px;
  height: 32px;
  padding-left: 16px;
  padding-right: 16px;
  border-radius: 2px; }
  .button-component.circle {
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    height: 32px;
    width: 32px; }
    .button-component.circle.small {
      height: 24px;
      width: 24px; }
    .button-component.circle.large {
      height: 50px;
      width: 50px; }
  .button-component.medium {
    height: 40px;
    font-size: 16px;
    padding-left: 24px;
    padding-right: 24px; }
  .button-component.red {
    background-color: #D91434;
    border: 1px solid #D91434; }
    .button-component.red.disabled {
      opacity: 0.5; }
      .button-component.red.disabled:hover {
        background-color: #D91434;
        cursor: not-allowed;
        border: 1px solid #D91434; }
    .button-component.red:hover {
      background-color: #C41230;
      border: 1px solid #C41230; }
    .button-component.red:focus {
      outline: none; }
    .button-component.red.active {
      outline: none;
      background-color: #AD102A;
      border: 1px solid #AD102A; }
  .button-component.white {
    color: #40454E;
    background-color: #FFFFFF;
    border: 1px solid #E5E5E5; }
    .button-component.white.disabled {
      opacity: 0.5; }
      .button-component.white.disabled:hover {
        background-color: #FFFFFF;
        cursor: not-allowed;
        border: 1px solid #E5E5E5; }
    .button-component.white:hover {
      background-color: #F5F6F7;
      border: 1px solid #E5E5E5; }
    .button-component.white:focus {
      outline: none; }
    .button-component.white.active {
      outline: none;
      background-color: #EDEEF0;
      border: 1px solid #E5E5E5; }
  .button-component.grey {
    color: #40454E;
    background-color: #F7F8FA;
    border: 1px solid #E5E5E5; }
    .button-component.grey.disabled {
      opacity: 0.5; }
      .button-component.grey.disabled:hover {
        background-color: #F7F8FA;
        cursor: not-allowed;
        border: 1px solid #E5E5E5; }
    .button-component.grey:hover {
      background-color: #F0F2F5;
      border: 1px solid #E5E5E5; }
    .button-component.grey.active {
      outline: none;
      background-color: #E3E5E8;
      border: 1px solid #E5E5E5; }
    .button-component.grey:focus {
      outline: none; }
  .button-component.dark-grey {
    color: #FFFFFF;
    opacity: 0.8;
    background-color: #1F2025;
    border: 1px solid #1F2025; }
    .button-component.dark-grey.disabled {
      opacity: 0.1; }
      .button-component.dark-grey.disabled:hover {
        cursor: not-allowed;
        background-color: #1F2025;
        border: 1px solid #1F2025;
        opacity: 0.1; }
    .button-component.dark-grey:hover {
      opacity: 1;
      background-color: #1F2025;
      border: 1px solid #1F2025; }
    .button-component.dark-grey:focus {
      outline: none; }
  .button-component.minimal {
    background-color: rgba(0, 118, 255, 0.01);
    border: 1px solid rgba(0, 118, 225, 0.01);
    color: #0076FF; }
    .button-component.minimal.disabled {
      opacity: 0.5; }
      .button-component.minimal.disabled:hover {
        cursor: not-allowed;
        background-color: rgba(0, 118, 255, 0.01);
        border: 1px solid rgba(0, 118, 225, 0.01); }
    .button-component.minimal:hover {
      background-color: rgba(12, 110, 224, 0.08);
      border: 1px solid rgba(12, 110, 224, 0.08); }
    .button-component.minimal:focus {
      outline: none; }
    .button-component.minimal.active {
      outline: none;
      background-color: rgba(17, 99, 194, 0.16);
      border: 1px solid rgba(17, 99, 194, 0.16); }
  .button-component:focus {
    outline: none; }
  .button-component.active {
    outline: none;
    background-color: #1163C2;
    border: 1px solid #1163C2; }
  .button-component:hover {
    border: 1px solid #0C6EE0;
    background-color: #0C6EE0;
    cursor: pointer; }
  .button-component.disabled {
    opacity: 0.5; }
    .button-component.disabled:hover {
      background-color: #0076FF;
      cursor: not-allowed;
      border: 1px solid #0076FF; }

.button-group {
  display: flex; }
  .button-group .button-component:first-of-type {
    border-radius: 2px 0 0 2px;
    border-width: 1px 1px 1px 1px; }
  .button-group .button-component:last-of-type {
    border-width: 1px 1px 1px 0px;
    border-radius: 0 2px 2px 0; }
  .button-group .button-component:not(:first-child):not(:last-child) {
    border-radius: 0;
    border-left: none; }

.file-button {
  color: #FFFFFF;
  background-color: #0076FF;
  position: relative;
  overflow: hidden;
  display: inline-block;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  border: 1px solid #0076FF;
  opacity: 0.9;
  font-size: 14px;
  padding: 8px 16px;
  z-index: 4;
  cursor: pointer; }
  .file-button:hover {
    opacity: 1;
    cursor: pointer; }
  .file-button input[type=file] {
    position: absolute;
    overflow: hidden;
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    z-index: 2; }
    .file-button input[type=file]:hover {
      cursor: pointer; }
  .file-button.disabled {
    opacity: 0.4; }
    .file-button.disabled:hover {
      cursor: not-allowed;
      border: 1px solid #0076FF; }

.input-container, .dropdown-wrapper {
  position: relative;
  display: inline-block;
  width: 265px;
  display: flex; }
  .input-container .input-icon, .dropdown-wrapper .input-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
    font-weight: 600;
    color: #878992; }
  .input-container .input-component:focus + .input-icon, .dropdown-wrapper .input-component:focus + .input-icon, .dropdown-wrapper .input-container .dropdown:focus + .input-icon, .dropdown-wrapper .dropdown:focus + .input-icon {
    color: #0076FF; }
  .input-container .input-component:focus + .number-input-button-wrapper > .number-input-button, .dropdown-wrapper .input-component:focus + .number-input-button-wrapper > .number-input-button, .dropdown-wrapper .input-container .dropdown:focus + .number-input-button-wrapper > .number-input-button, .dropdown-wrapper .dropdown:focus + .number-input-button-wrapper > .number-input-button {
    color: #0076FF; }
  .input-container .input-component, .dropdown-wrapper .input-component, .dropdown-wrapper .dropdown {
    font-size: 14px;
    padding-left: 16px;
    background-color: #FFFFFF;
    color: #14151A;
    border: 1px solid #E5E5E5;
    border-radius: 2px;
    margin: 1px; }
    .input-container .input-component.invalid, .dropdown-wrapper .input-component.invalid, .dropdown-wrapper .invalid.dropdown {
      border: 2px solid #D91434;
      margin: 0px; }
      .input-container .input-component.invalid :focus, .dropdown-wrapper .input-component.invalid :focus, .dropdown-wrapper .invalid.dropdown :focus {
        border: 2px solid #0076FF;
        outline: none;
        margin: 0px; }
    .input-container .input-component.valid, .dropdown-wrapper .input-component.valid, .dropdown-wrapper .valid.dropdown {
      border: 2px solid #50D0AC;
      margin: 0px; }
    .input-container .input-component.disabled, .dropdown-wrapper .input-component.disabled, .dropdown-wrapper .disabled.dropdown {
      opacity: 0.5; }
      .input-container .input-component.disabled::placeholder, .dropdown-wrapper .input-component.disabled::placeholder, .dropdown-wrapper .disabled.dropdown::placeholder {
        opacity: 0.3; }
      .input-container .input-component.disabled:hover::placeholder, .dropdown-wrapper .input-component.disabled:hover::placeholder, .dropdown-wrapper .disabled.dropdown:hover::placeholder {
        opacity: 0.3; }
    .input-container .input-component:focus, .dropdown-wrapper .input-component:focus, .dropdown-wrapper .dropdown:focus {
      border: 2px solid #0076FF;
      outline: none;
      margin: 0px; }
      .input-container .input-component:focus.valid, .dropdown-wrapper .input-component:focus.valid, .dropdown-wrapper .dropdown:focus.valid {
        border: 2px solid #50D0AC;
        margin: 0px; }
      .input-container .input-component:focus.number, .dropdown-wrapper .input-component:focus.number, .dropdown-wrapper .dropdown:focus.number {
        border-right: 2px solid #0076FF; }
    .input-container .input-component.round, .dropdown-wrapper .input-component.round, .dropdown-wrapper .round.dropdown {
      border-radius: 36px; }
    .input-container .input-component.number, .dropdown-wrapper .input-component.number, .dropdown-wrapper .number.dropdown {
      width: 230px;
      margin-right: 0px;
      border-right: none;
      border-radius: 2px 0px 0px 2px; }
  .input-container input, .dropdown-wrapper input {
    width: 245px;
    padding-top: 12px;
    padding-bottom: 12px;
    padding-left: 16px; }
    .input-container input::placeholder, .dropdown-wrapper input::placeholder {
      color: #878992;
      opacity: 0.6; }
    .input-container input:hover::placeholder, .dropdown-wrapper input:hover::placeholder {
      opacity: 0.8; }
  .input-container textarea, .dropdown-wrapper textarea {
    padding-top: 10px;
    height: 120px;
    width: 262px; }
    .input-container textarea::placeholder, .dropdown-wrapper textarea::placeholder {
      color: #878992;
      opacity: 0.6; }
    .input-container textarea:hover::placeholder, .dropdown-wrapper textarea:hover::placeholder {
      opacity: 0.8; }
    .input-container textarea.fixedSize, .dropdown-wrapper textarea.fixedSize {
      resize: none; }
  .input-container .number-input-button-wrapper, .dropdown-wrapper .number-input-button-wrapper {
    display: flex;
    flex-direction: column;
    border: 1px solid transparent;
    border-left: 0px; }
    .input-container .number-input-button-wrapper .number-input-button, .dropdown-wrapper .number-input-button-wrapper .number-input-button {
      cursor: pointer;
      width: 32px;
      height: 50%;
      padding: 0px;
      border: 1px solid #E5E5E5;
      background-color: #F7F8FA;
      color: #878992;
      display: flex;
      align-items: center;
      justify-content: center; }
      .input-container .number-input-button-wrapper .number-input-button:hover, .dropdown-wrapper .number-input-button-wrapper .number-input-button:hover {
        color: #a2a3aa; }
      .input-container .number-input-button-wrapper .number-input-button:active, .dropdown-wrapper .number-input-button-wrapper .number-input-button:active, .input-container .number-input-button-wrapper .number-input-button:hover, .dropdown-wrapper .number-input-button-wrapper .number-input-button:hover {
        color: #0076FF; }
      .input-container .number-input-button-wrapper .number-input-button.up, .dropdown-wrapper .number-input-button-wrapper .number-input-button.up {
        border-radius: 0 2px 0 0; }
      .input-container .number-input-button-wrapper .number-input-button.down, .dropdown-wrapper .number-input-button-wrapper .number-input-button.down {
        border-radius: 0 0 2px 0;
        border-top: none; }

.checkbox-component-wrapper {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: fit-content;
  margin-bottom: 4px; }
  .checkbox-component-wrapper .psuedo-box {
    border: 1px solid transparent; }
    .checkbox-component-wrapper .psuedo-box.checked {
      border-width: 0px; }
  .checkbox-component-wrapper.disabled .checkbox {
    cursor: default;
    opacity: 0.5; }
  .checkbox-component-wrapper.disabled .checkbox-label {
    opacity: 0.5; }
  .checkbox-component-wrapper .checkbox {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border: 1px solid #E5E5E5;
    border-radius: 2px;
    cursor: pointer; }
    .checkbox-component-wrapper .checkbox .checkbox-icon {
      font-weight: 700;
      color: #0076FF; }
    .checkbox-component-wrapper .checkbox.checked {
      border-color: #0076FF;
      border-width: 2px; }
  .checkbox-component-wrapper .checkbox-label {
    font-weight: 600;
    color: #1F2025;
    margin-left: 8px; }

.radio-button-wrapper {
  height: 20px;
  width: fit-content;
  align-items: center;
  display: flex; }
  .radio-button-wrapper .label {
    font-size: 14px;
    opacity: 0.7;
    color: #40454E; }
    .radio-button-wrapper .label.checked {
      opacity: 0.8; }
  .radio-button-wrapper .outer-circle {
    height: 16px;
    width: 16px;
    border-radius: 50%;
    border: 2px solid #E5E5E5;
    background-color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 16px; }
    .radio-button-wrapper .outer-circle.checked {
      border: 2px solid #0076FF; }
      .radio-button-wrapper .outer-circle.checked.disabled {
        border: 2px solid #E5E5E5;
        opacity: 0.7; }
    .radio-button-wrapper .outer-circle .inner-circle {
      height: 6px;
      width: 6px;
      border-radius: 50%;
      background-color: #0076FF;
      z-index: -1; }
      .radio-button-wrapper .outer-circle .inner-circle.checked {
        z-index: 2; }
        .radio-button-wrapper .outer-circle .inner-circle.checked.disabled {
          background-color: #E5E5E5;
          opacity: 0.5; }
  .radio-button-wrapper:hover {
    cursor: pointer; }
    .radio-button-wrapper:hover .label {
      opacity: 0.8; }
    .radio-button-wrapper:hover.disabled {
      cursor: default; }

.dropdown-wrapper {
  position: relative;
  box-sizing: border-box; }
  .dropdown-wrapper .dropdown {
    cursor: pointer; }
    .dropdown-wrapper .dropdown.is-collapsed {
      border-radius: 3px; }
  .dropdown-wrapper .dropdown-down-carat {
    position: absolute;
    top: 18px;
    right: 8px;
    cursor: pointer;
    pointer-events: none; }
  .dropdown-wrapper .dropdown-results-wrapper {
    box-sizing: border-box;
    background-color: #FFFFFF;
    position: absolute;
    display: flex;
    flex-direction: column;
    width: 100%;
    z-index: 99;
    max-height: 120px;
    overflow-y: scroll;
    border-radius: 0px 0px 3px 3px;
    border: 2px solid #40454E;
    border-top: 0px;
    top: 45px; }
    .dropdown-wrapper .dropdown-results-wrapper .dropdown-result-item {
      box-sizing: border-box;
      cursor: pointer;
      padding: 8px;
      display: flex;
      align-items: center; }
      .dropdown-wrapper .dropdown-results-wrapper .dropdown-result-item:hover {
        background-color: #F0F2F5;
        color: #14151A; }
      .dropdown-wrapper .dropdown-results-wrapper .dropdown-result-item.is-active {
        background-color: #40454E;
        color: #FFFFFF; }

.modal-wrapper {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.3); }
  .modal-wrapper.showing {
    display: block; }
  .modal-wrapper .modal {
    min-width: 456px;
    min-height: 360px;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    padding: 24px;
    background-color: #FFFFFF;
    border-radius: 2px; }
    .modal-wrapper .modal .close-button {
      cursor: pointer;
      float: right; }

.audio-player-wrapper {
  max-width: 600px;
  padding: 20px; }

.progress-dots-wrapper {
  display: flex; }
  .progress-dots-wrapper .dot {
    height: 8px;
    width: 8px;
    border-radius: 100%;
    margin-right: 24px;
    background-color: #40454E; }
    .progress-dots-wrapper .dot.active {
      opacity: 1;
      background-color: #0076FF; }
    .progress-dots-wrapper .dot.clickable {
      opacity: 0.15; }
      .progress-dots-wrapper .dot.clickable:hover {
        opacity: 0.4;
        cursor: pointer; }
    .progress-dots-wrapper .dot.final {
      margin-right: 0px; }

.progress-tabs-wrapper {
  display: flex; }
  .progress-tabs-wrapper .tab {
    padding: 12px 16px;
    border-bottom: 2px solid #E5E5E5;
    font-size: 16px;
    color: #40454E;
    opacity: 0.4;
    font-weight: 700;
    letter-spacing: 0.6px; }
    .progress-tabs-wrapper .tab:hover {
      opacity: 0.5;
      border-bottom: 2px solid #40454E; }
    .progress-tabs-wrapper .tab.clickable {
      cursor: pointer; }
    .progress-tabs-wrapper .tab.active {
      color: #0076FF;
      opacity: 1;
      border-bottom: 2px solid #0076FF; }

.pill {
  display: flex;
  align-items: center;
  width: fit-content;
  border-radius: 18px;
  font-size: 14px;
  cursor: default; }
  .pill .pill-title {
    color: #FFFFFF;
    margin: 0px 16px;
    padding: 8px 0px; }
  .pill.removeable {
    position: relative; }
    .pill.removeable .icon-section {
      display: none;
      color: #FFFFFF; }
    .pill.removeable:hover {
      cursor: pointer;
      color: #FFFFFF; }
      .pill.removeable:hover .icon-section {
        display: inline-block;
        margin-right: 10px; }
      .pill.removeable:hover .pill-title {
        margin-left: 8px;
        margin-right: 0px; }
  .pill.red {
    background-color: #D91434; }
    .pill.red:hover {
      background-color: #C41230; }
    .pill.red.active {
      background-color: #AD102A; }
  .pill.blue {
    background-color: #0076FF; }
    .pill.blue:hover {
      background-color: #0C6EE0; }
    .pill.blue.active {
      background-color: #1163C2; }
  .pill.black {
    background-color: #14151A;
    color: #FFFFFF; }
    .pill.black:hover {
      background-color: #1f2128; }
    .pill.black.active {
      background-color: #1f2128; }

.user-pill {
  position: relative; }
  .user-pill .pill-title {
    padding: 0px;
    margin-left: 10px; }
  .user-pill.removeable:hover .icon-section {
    display: inline-block;
    margin-right: 4px; }
  .user-pill.removeable:hover .pill-title {
    margin-left: 8px; }

/*
 * Here we import the base styles from rc-slider module, and we overwrite/extend
 * what we need to, to make it look and feel how we want.
 */
.rc-slider .rc-slider-track {
  background-color: #0076FF; }

.rc-slider .rc-slider-handle {
  background-color: #0076FF;
  border: 2px solid #0076FF;
  height: 16px;
  width: 16px;
  margin-top: -6px;
  margin-left: -8px; }
  .rc-slider .rc-slider-handle:hover, .rc-slider .rc-slider-handle:active, .rc-slider .rc-slider-handle:focus {
    border: 2px solid #0076FF;
    box-shadow: none;
    cursor: pointer;
    width: 20px;
    height: 20px;
    margin-top: -8px;
    margin-left: -10px; }

.rc-slider-disabled {
  background-color: transparent;
  opacity: 0.5; }
  .rc-slider-disabled .rc-slider-handle {
    display: none; }

.breadcrumbs {
  display: flex;
  align-items: center;
  color: #878992;
  font-weight: 600; }
  .breadcrumbs .bullets {
    font-size: 20px; }
  .breadcrumbs .breadcrumb .label {
    cursor: pointer; }
  .breadcrumbs .breadcrumb .separator {
    cursor: default; }

.image-wrapper {
  background-size: cover;
  background-position: 50% 50%;
  background-color: #E3E5E8; }

.pagination-container {
  display: flex;
  align-items: center;
  font-size: 16px; }
  .pagination-container .pagination-button {
    font-weight: 700;
    margin-right: 8px;
    color: #0076FF;
    cursor: pointer; }
  .pagination-container .pagination-element-wrapper {
    display: flex;
    align-items: center; }
    .pagination-container .pagination-element-wrapper .pagination-element.isActive {
      color: #0076FF;
      cursor: default; }
    .pagination-container .pagination-element-wrapper .page-button, .pagination-container .pagination-element-wrapper .pagination-break {
      font-weight: 700;
      cursor: pointer;
      color: #878992;
      margin-right: 12px; }

.avatar-wrapper {
  display: inline-block;
  border-radius: 2px; }
  .avatar-wrapper.circle {
    border-radius: 50%; }

.avatar {
  border-radius: 2px; }
  .avatar.circle {
    border-radius: 50%; }

.toast-wrapper {
  position: fixed;
  bottom: 0;
  right: 8px;
  z-index: 2; }

.toast {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 16px;
  background-color: #14151A;
  color: #FFFFFF;
  font-weight: 600;
  border-radius: 2px;
  max-height: 100%;
  transition: max-height 0.3s ease-out, opacity 0.3s ease-out;
  opacity: 1;
  margin-bottom: 8px; }
  .toast.isClosing {
    max-height: 0;
    opacity: 0; }
  .toast .toast-content {
    display: flex;
    align-items: center;
    justify-content: space-between; }
  .toast .toast-dismiss {
    width: 14px;
    cursor: pointer;
    color: #14151A;
    padding: 4px;
    margin-left: 16px;
    font-weight: 600; }
  .toast:hover .toast-dismiss {
    display: inline-block;
    background: #FFFFFF;
    color: #14151A;
    border-radius: 50%; }

.spinner {
  min-width: 50px;
  height: 20px;
  text-align: center;
  font-size: 10px; }
  .spinner > div {
    background-color: #FFFFFF;
    height: 100%;
    width: 3px;
    margin-right: 1px;
    display: inline-block;
    -webkit-sk-stretchdelay: 1.2s infinie ease-in-out;
    -moz-sk-stretchdelay: 1.2s infinie ease-in-out;
    -ms-sk-stretchdelay: 1.2s infinie ease-in-out;
    -o-sk-stretchdelay: 1.2s infinie ease-in-out;
    sk-stretchdelay: 1.2s infinie ease-in-out;
    animation: sk-stretchdelay 1.2s infinite ease-in-out; }
  .spinner.blue > div {
    background-color: #1163C2; }
  .spinner.black > div {
    background-color: #14151A; }
  .spinner.large {
    height: 100px;
    width: 250px; }
    .spinner.large > div {
      width: 10px; }
  .spinner.mobile-large {
    height: 16vh;
    width: 16vh; }
    .spinner.mobile-large > div {
      width: 2vh;
      margin-right: 0.5vh; }
  .spinner .rect2 {
    -webkit-animation-delay: -1.1s;
    -moz-animation-delay: -1.1s;
    -ms-animation-delay: -1.1s;
    -o-animation-delay: -1.1s;
    animation-delay: -1.1s;
    animation-delay: -1.1s; }
  .spinner .rect3 {
    -webkit-animation-delay: -1s;
    -moz-animation-delay: -1s;
    -ms-animation-delay: -1s;
    -o-animation-delay: -1s;
    animation-delay: -1s;
    animation-delay: -1.0s; }
  .spinner .rect4 {
    -webkit-animation-delay: -0.9s;
    -moz-animation-delay: -0.9s;
    -ms-animation-delay: -0.9s;
    -o-animation-delay: -0.9s;
    animation-delay: -0.9s;
    animation-delay: -0.9s; }
  .spinner .rect5 {
    -webkit-animation-delay: -0.8s;
    -moz-animation-delay: -0.8s;
    -ms-animation-delay: -0.8s;
    -o-animation-delay: -0.8s;
    animation-delay: -0.8s;
    animation-delay: -0.8s; }

@-webkit-keyframes sk-stretchdelay {
  0%, 40%, 100% {
    -webkit-transform: scaleY(0.4);
    -moz-transform: scaleY(0.4);
    -ms-transform: scaleY(0.4);
    -o-transform: scaleY(0.4);
    transform: scaleY(0.4); }
  20% {
    -webkit-transform: scaleY(1);
    -moz-transform: scaleY(1);
    -ms-transform: scaleY(1);
    -o-transform: scaleY(1);
    transform: scaleY(1); } }

@keyframes sk-stretchdelay {
  0%, 40%, 100% {
    transform: scaleY(0.4);
    -webkit-transform: scaleY(0.4);
    -moz-transform: scaleY(0.4);
    -ms-transform: scaleY(0.4);
    -o-transform: scaleY(0.4);
    transform: scaleY(0.4); }
  20% {
    transform: scaleY(1);
    -webkit-transform: scaleY(1);
    -moz-transform: scaleY(1);
    -ms-transform: scaleY(1);
    -o-transform: scaleY(1);
    transform: scaleY(1); } }