html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, 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, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  line-height: 1.25;
  font: inherit;
  vertical-align: baseline;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-size-adjust: 0.5;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Open Sans, Helvetica Neue, sans-serif;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-backface-visibility: hidden; }

html {
  -webkit-tap-highlight-color: transparent; }

::-webkit-scrollbar {
  width: 0px;
  /* remove scrollbar space */
  background: transparent;
  /* optional: just make scrollbar invisible */ }

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  overflow-y: scroll;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased; }

body {
  min-height: 100vh; }

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block; }

ol, ul {
  list-style: none !important; }

blockquote, q {
  quotes: none; }

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

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

img {
  border: 0;
  -ms-interpolation-mode: bicubic; }

sub, sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline; }

sup {
  top: -0.5em; }

sub {
  bottom: -0.25em; }

a, a:hover, a:focus, a:active {
  text-decoration: none; }

.cf {
  zoom: 1; }
  .cf:before, .cf:after {
    content: " ";
    display: block;
    height: 0;
    overflow: hidden; }
  .cf:after {
    clear: both; }

*, *:before, *:after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

button {
  -webkit-appearance: none;
  -moz-appearance: none;
  border: none; }

*:focus {
  outline: 0; }

::-moz-selection {
  background: #d8caf8;
  /* WebKit/Blink Browsers */ }

::selection {
  background: #d8caf8;
  /* WebKit/Blink Browsers */ }

::-moz-selection {
  background: #d8caf8;
  /* Gecko Browsers */ }

/* A better looking default horizontal rule */
hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0; }

/*
  * Remove the gap between audio, canvas, iframes,
  * images, videos and the bottom of their containers:
  * https://github.com/h5bp/html5-boilerplate/issues/440
  */
audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle; }

/* Remove default fieldset styles. */
fieldset {
  border: 0;
  margin: 0;
  padding: 0; }

/* Allow only vertical resizing of textareas. */
textarea {
  resize: vertical; }

button {
  background: 0;
  outline: 0; }

/*
  * Print styles
  * Inlined to avoid the additional HTTP request:
  * http://www.phpied.com/delay-loading-your-print-css/
  * ========================================================================== */
@media print {
  *,
  *::before,
  *::after {
    background: transparent !important;
    color: #000 !important;
    /* Black prints faster: http://www.sanbeiji.com/archives/953 */
    -webkit-box-shadow: none !important;
            box-shadow: none !important;
    text-shadow: none !important; }
  a,
  a:visited {
    text-decoration: underline; }
  a[href]::after {
    content: " (" attr(href) ")"; }
  abbr[title]::after {
    content: " (" attr(title) ")"; }
  /*
    * Don't show links that are fragment identifiers,
    * or use the `javascript:` pseudo protocol
    */
  a[href^='#']::after,
  a[href^='javascript:']::after {
    content: ''; }
  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid; }
  /*
    * Printing Tables:
    * http://css-discuss.incutio.com/wiki/Printing_Tables
    */
  thead {
    display: table-header-group; }
  tr,
  img {
    page-break-inside: avoid; }
  img {
    max-width: 100% !important; }
  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3; }
  h2,
  h3 {
    page-break-after: avoid; } }
#app {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Open Sans, Helvetica Neue, sans-serif; }

#intercom-container .intercom-app .intercom-borderless-frame {
  bottom: 70px !important; }

#intercom-container .intercom-app span .intercom-messenger-frame {
  bottom: 70px !important; }

a {
  -webkit-user-drag: none;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  -ms-user-select: none; }

img {
  -webkit-user-drag: none;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  -ms-user-select: none; }
/**
 * React Select
 * ============
 * Created by Jed Watson and Joss Mackison for KeystoneJS, http://www.keystonejs.com/
 * https://twitter.com/jedwatson https://twitter.com/jossmackison https://twitter.com/keystonejs
 * MIT License: https://github.com/JedWatson/react-select
*/
@keyframes Select-animation-spin {
  to {
    -webkit-transform: rotate(1turn);
            transform: rotate(1turn); } }

@-webkit-keyframes Select-animation-spin {
  to {
    -webkit-transform: rotate(1turn); } }

.Select {
  position: relative; }
  .Select,
  .Select div,
  .Select input,
  .Select span {
    -webkit-box-sizing: border-box;
    box-sizing: border-box; }
  .Select.is-disabled > .Select-control {
    background-color: #f9f9f9; }
    .Select.is-disabled > .Select-control:hover {
      -webkit-box-shadow: none;
              box-shadow: none; }
  .Select.is-disabled .Select-arrow-zone {
    cursor: default;
    pointer-events: none; }

.Select-control {
  background-color: #fff;
  border-color: #d9d9d9 #ccc #b3b3b3;
  border-radius: 4px;
  border: 1px solid #ccc;
  color: #333;
  cursor: default;
  display: table;
  border-spacing: 0;
  border-collapse: separate;
  height: 36px;
  outline: none;
  overflow: hidden;
  position: relative;
  width: 100%; }
  .Select-control:hover {
    -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
            box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06); }
  .Select-control .Select-input:focus {
    outline: none; }

.is-searchable.is-open > .Select-control {
  cursor: text; }

.is-open > .Select-control {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  background: #fff;
  border-color: #b3b3b3 #ccc #d9d9d9; }
  .is-open > .Select-control .Select-arrow {
    top: -2px;
    border-color: transparent transparent #999;
    border-width: 0 5px 5px; }

.is-searchable.is-focused:not(.is-open) > .Select-control {
  cursor: text; }

.is-focused:not(.is-open) > .Select-control {
  border-color: #08c #0099e6 #0099e6;
  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 0 5px -1px fade(#08c, 50%);
          box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 0 5px -1px fade(#08c, 50%); }

.Select-placeholder,
.Select--single > .Select-control .Select-value {
  bottom: 0;
  color: #aaa;
  left: 0;
  line-height: 34px;
  padding-left: 10px;
  padding-right: 10px;
  position: absolute;
  right: 0;
  top: 0;
  max-width: 100%;
  overflow: hidden;
  -o-text-overflow: ellipsis;
     text-overflow: ellipsis;
  white-space: nowrap; }

.has-value.is-clearable.Select--single > .Select-control .Select-value {
  padding-right: 42px; }

.has-value.Select--single > .Select-control .Select-value .Select-value-label,
.has-value.is-pseudo-focused.Select--single > .Select-control .Select-value .Select-value-label {
  color: #333; }

.has-value.Select--single > .Select-control .Select-value a.Select-value-label,
.has-value.is-pseudo-focused.Select--single > .Select-control .Select-value a.Select-value-label {
  cursor: pointer;
  text-decoration: none; }
  .has-value.Select--single > .Select-control .Select-value a.Select-value-label:hover, .has-value.Select--single > .Select-control .Select-value a.Select-value-label:focus,
  .has-value.is-pseudo-focused.Select--single > .Select-control .Select-value a.Select-value-label:hover,
  .has-value.is-pseudo-focused.Select--single > .Select-control .Select-value a.Select-value-label:focus {
    color: #08c;
    outline: none;
    text-decoration: underline; }

.Select-input {
  height: 34px;
  padding-left: 10px;
  padding-right: 10px;
  vertical-align: middle; }
  .Select-input > input {
    background: none transparent;
    border: 0 none;
    -webkit-box-shadow: none;
            box-shadow: none;
    cursor: default;
    display: inline-block;
    font-family: inherit;
    font-size: inherit;
    margin: 0;
    outline: none;
    line-height: 14px;
    /* For IE 8 compatibility */
    padding: 8px 0 12px;
    /* For IE 8 compatibility */
    -webkit-appearance: none; }
    .is-focused .Select-input > input {
      cursor: text; }

.has-value.is-pseudo-focused .Select-input {
  opacity: 0; }

.Select-control:not(.is-searchable) > .Select-input {
  outline: none; }

.Select-loading-zone {
  cursor: pointer;
  display: table-cell;
  position: relative;
  text-align: center;
  vertical-align: middle;
  width: 16px; }

.Select-loading {
  -webkit-animation: Select-animation-spin 400ms infinite linear;
  animation: Select-animation-spin 400ms infinite linear;
  width: 16px;
  height: 16px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border-radius: 50%;
  border: 2px solid #ccc;
  border-right-color: #333;
  display: inline-block;
  position: relative;
  vertical-align: middle; }

.Select-clear-zone {
  -webkit-animation: Select-animation-fadeIn 200ms;
  animation: Select-animation-fadeIn 200ms;
  color: #999;
  cursor: pointer;
  display: table-cell;
  position: relative;
  text-align: center;
  vertical-align: middle;
  width: 17px; }
  .Select-clear-zone:hover {
    color: #D0021B; }

.Select-clear {
  display: inline-block;
  font-size: 18px;
  line-height: 1; }

.Select--multi .Select-clear-zone {
  width: 17px; }

.Select--multi .Select-multi-value-wrapper {
  display: inline-block; }

.Select .Select-aria-only {
  display: inline-block;
  height: 1px;
  width: 1px;
  margin: -1px;
  clip: rect(0, 0, 0, 0);
  overflow: hidden;
  float: left; }

.Select-arrow-zone {
  cursor: pointer;
  display: table-cell;
  position: relative;
  text-align: center;
  vertical-align: middle;
  width: 25px;
  padding-right: 5px; }

.Select-arrow {
  border-color: #999 transparent transparent;
  border-style: solid;
  border-width: 5px 5px 2.5px;
  display: inline-block;
  height: 0;
  width: 0;
  position: relative; }

.is-open .Select-arrow,
.Select-arrow-zone:hover > .Select-arrow {
  border-top-color: #666; }

@-webkit-keyframes Select-animation-fadeIn {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }

@keyframes Select-animation-fadeIn {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }

.Select-menu-outer {
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
  background-color: #fff;
  border: 1px solid #ccc;
  border-top-color: #e6e6e6;
  -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
          box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  margin-top: -1px;
  max-height: 200px;
  position: absolute;
  top: 100%;
  width: 100%;
  z-index: 1000;
  -webkit-overflow-scrolling: touch; }

.Select-menu {
  max-height: 198px;
  overflow-y: auto; }

.Select-option {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  background-color: #fff;
  color: #666666;
  cursor: pointer;
  display: block;
  padding: 8px 10px; }
  .Select-option:last-child {
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px; }
  .Select-option.is-selected {
    background-color: #f5faff;
    color: #333; }
  .Select-option.is-focused {
    background-color: #f2f9fc;
    color: #333; }
  .Select-option.is-disabled {
    color: #cccccc;
    cursor: default; }

.Select-noresults {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  color: #999999;
  cursor: default;
  display: block;
  padding: 8px 10px; }

.Select--multi .Select-input {
  vertical-align: middle;
  margin-left: 10px;
  padding: 0; }

.Select--multi.has-value .Select-input {
  margin-left: 5px; }

.Select--multi .Select-value {
  background-color: #f2f9fc;
  border-radius: 2px;
  border: 1px solid #c9e6f2;
  color: #08c;
  display: inline-block;
  font-size: 0.9em;
  margin-left: 5px;
  margin-top: 5px;
  vertical-align: top; }

.Select--multi .Select-value-icon,
.Select--multi .Select-value-label {
  display: inline-block;
  vertical-align: middle; }

.Select--multi .Select-value-label {
  border-bottom-right-radius: 2px;
  border-top-right-radius: 2px;
  cursor: default;
  padding: 2px 5px; }

.Select--multi a.Select-value-label {
  color: #08c;
  cursor: pointer;
  text-decoration: none; }
  .Select--multi a.Select-value-label:hover {
    text-decoration: underline; }

.Select--multi .Select-value-icon {
  cursor: pointer;
  border-bottom-left-radius: 2px;
  border-top-left-radius: 2px;
  border-right: 1px solid #c9e6f2;
  padding: 1px 5px 3px; }
  .Select--multi .Select-value-icon:hover, .Select--multi .Select-value-icon:focus {
    background-color: #ddeff7;
    color: #0077b3; }
  .Select--multi .Select-value-icon:active {
    background-color: #c9e6f2; }

.Select--multi.is-disabled .Select-value {
  background-color: #fcfcfc;
  border: 1px solid #e3e3e3;
  color: #333; }

.Select--multi.is-disabled .Select-value-icon {
  cursor: not-allowed;
  border-right: 1px solid #e3e3e3; }
  .Select--multi.is-disabled .Select-value-icon:hover, .Select--multi.is-disabled .Select-value-icon:focus, .Select--multi.is-disabled .Select-value-icon:active {
    background-color: #fcfcfc; }

@keyframes Select-animation-spin {
  to {
    -webkit-transform: rotate(1turn);
            transform: rotate(1turn); } }

@-webkit-keyframes Select-animation-spin {
  to {
    -webkit-transform: rotate(1turn); } }
.wrapper {
  display: -moz-flex;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -webkit-box-lines: single;
  -moz-box-lines: single;
  box-lines: single;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-box-align: center;
  box-align: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -o-align-items: center;
  align-items: center;
  -ms-flex-align: center; }

.bebo-btn {
  display: -moz-flex;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
  box-pack: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  -o-justify-content: center;
  justify-content: center;
  -ms-flex-pack: center;
  -webkit-box-align: center;
  box-align: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -o-align-items: center;
  align-items: center;
  -ms-flex-align: center;
  align-content: center;
  -ms-flex-line-pack: center; }

/*
body, html {
  overflow:hidden;
  height:100%;
  min-height: inherit;
  position:fixed;
  width:100%;
  top:0;
  left:0;
}
*/
.wrapper {
  max-width: 80rem;
  margin: 0 auto;
  padding: 0 1.33333rem; }

.wrapper {
  display: -moz-flex;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -webkit-box-lines: single;
  -moz-box-lines: single;
  box-lines: single;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-box-align: center;
  box-align: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -o-align-items: center;
  align-items: center;
  -ms-flex-align: center; }

.bebo-btn {
  display: -moz-flex;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
  box-pack: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  -o-justify-content: center;
  justify-content: center;
  -ms-flex-pack: center;
  -webkit-box-align: center;
  box-align: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -o-align-items: center;
  align-items: center;
  -ms-flex-align: center;
  align-content: center;
  -ms-flex-line-pack: center; }

/*
body, html {
  overflow:hidden;
  height:100%;
  min-height: inherit;
  position:fixed;
  width:100%;
  top:0;
  left:0;
}
*/
.wrapper {
  max-width: 80rem;
  margin: 0 auto;
  padding: 0 1.33333rem; }

.bebo-btn, .bebo-btn.text-button {
  font-size: 0.93333rem;
  line-height: 1.26667rem; }

/*
html, body {
  font-size: $font-size;
  line-height: 1.25;
  font-family: $font-family-base;
  font-weight: 400;
  word-wrap: break-word;
  color: $color-black;
  hyphens: auto;
}

%hero {
  @extend %font-size-huge;
  font-weight: 500;
  color: $color-brand;
}
h1 {
  @extend %font-size-x-large;
  font-weight: 300;
}
h2 {
  @extend %font-size-large;
  font-weight: 300;
}
h3 {
  @extend %font-size-medium;
  font-weight: 600;
}
h4 {
  @extend %font-size-medium;
  font-weight: 400;
  color: $color-grey4;
}
h5 {
  @extend %font-size-small;
  font-weight: 900;
  letter-spacing: 0.5px;
  color: $color-grey5;
}
p {
  @extend %font-size-default;
  font-weight: 400;
}
small {
  @extend %font-size-small;
}
a {
  color: #a0a0a0;
  cursor: pointer;
  text-decoration: none;
  &:hover {
    color: #ffffff;
  }
  @include transition(all .2s);
}
em, .em {
  font-style: italic;
}
strong, .strong {
  font-weight: bold;
}
button{
  font-family: $font-family-base;
  cursor: pointer;
}
textarea, input, select{
  font-family: $font-family-base;
}
*/
::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  color: #888888; }

::-moz-placeholder {
  /* Firefox 19+ */
  color: #888888; }

:-ms-input-placeholder {
  /* IE 10+ */
  color: #888888; }

:-moz-placeholder {
  /* Firefox 18- */
  color: #888888; }

/*
button, input, textarea {
  transition: all 200ms ease;
}

input[type="text"] {
  outline: 0;
  border: 0;
}

input[type="text"], textarea {
  border-radius: 2px;
}
*/
.bebo-btn {
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 1px;
  display: inline-block;
  color: #ffffff;
  text-align: center;
  background-color: #2c3032;
  cursor: pointer;
  -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
          box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
  height: 2.66667rem;
  padding: 0.73333rem 1.6rem;
  -webkit-transition: all 200ms ease;
  -o-transition: all 200ms ease;
  transition: all 200ms ease;
  border-radius: 1.33333rem; }
  .bebo-btn:hover {
    color: #1d2123;
    background-color: #fdc20a;
    text-decoration: none; }
  .bebo-btn.loading {
    background-size: 1.06667rem;
    background-repeat: no-repeat;
    background-position: center;
    text-indent: -999999;
    overflow: hidden;
    color: transparent; }
    .bebo-btn.loading:hover {
      background-color: #ffffff;
      color: transparent;
      border: 1px solid #dddddd; }
  .bebo-btn.disabled {
    background: #eeeeee;
    color: #eeeeee;
    border: 1px solid #dddddd; }
    .bebo-btn.disabled:hover {
      background: #eeeeee;
      color: #eeeeee;
      border: 1px solid #dddddd; }
  .bebo-btn.text-button {
    text-transform: none;
    background: none;
    border: 0;
    color: #b1b1b1;
    font-weight: 400;
    height: auto;
    margin: 1.33333rem auto; }
    .bebo-btn.text-button:hover {
      background: none;
      color: #FDC823; }

.bebo-btn, .user-avatar, .community-avatar {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center; }

.user-avatar {
  background-size: cover;
  height: 1.6rem;
  width: 1.6rem;
  border-radius: 50%;
  background-color: #5d5e6b; }

.community-avatar {
  background-size: cover;
  height: 3.33333rem;
  width: 3.33333rem;
  background-color: #5d5e6b; }

/*body,
html {
  color: $color-white;
}*/
.toast-banner {
  position: absolute;
  z-index: 101;
  top: 0;
  left: 0;
  right: 0;
  background: red;
  text-align: center;
  line-height: 2.5;
  overflow: hidden;
  -webkit-box-shadow: 0 0 5px black;
  box-shadow: 0 0 5px black; }

@-webkit-keyframes slideDown {
  0%,
  100% {
    -webkit-transform: translateY(-50px); }
  10%,
  90% {
    -webkit-transform: translateY(0px); } }

.form-select {
  width: 100%;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; }

.form-select.inline-label {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between; }
  .form-select.inline-label .form-select__label {
    width: 90px; }

.form-select__label {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  text-align: left;
  color: #898989;
  font-size: 12px;
  display: block;
  margin-bottom: 0.66667rem; }

.form-select__input {
  width: 100%;
  background: #272727;
  border: 1px solid #151515;
  border-radius: 5px;
  display: block;
  font-size: 0.8rem; }

.form-select__input .Select-control {
  background: #272727;
  border: 1px solid #151515;
  border-radius: 5px; }

.form-select__input .Select-clear-zone {
  display: none; }

.form-select__input .Select-value .Select-value-label {
  color: #fff !important; }

.form-select .Select-option {
  background: #272727;
  line-height: 18px;
  color: rgba(255, 255, 255, 0.9); }

.form-select .Select-control {
  height: 18px; }

.form-select .Select-option:hover {
  background: #2c2c2c;
  color: #fff; }

.form-select .Select-option.is-selected {
  background: #343434;
  color: #fff; }
  .form-select .Select-option.is-selected:hover {
    background: #343434; }

.form-select .Select-menu-outer {
  background: #272727;
  border: 1px solid #1a1a1a;
  border-top-right-radius: 4px;
  border-top-left-radius: 4px;
  -webkit-box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.15);
          box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.15);
  overflow: hidden; }

.form-select .Select-menu {
  background: #272727; }

.form-select.textTemplate {
  border-radius: 0; }
  .form-select.textTemplate .form-select__input {
    border-radius: 0; }
  .form-select.textTemplate .Select-control {
    padding: 0 15px;
    border-radius: 0; }
  .form-select.textTemplate .Select-control {
    height: 50px; }
  .form-select.textTemplate .form-select__input--item {
    height: 50px;
    line-height: 50px;
    font-size: 20px; }
  .form-select.textTemplate .Select-option {
    padding-top: 0;
    padding-bottom: 0; }
  .form-select.textTemplate .Select-placeholder {
    line-height: 50px; }

.form-select__input--item {
  height: 50px; }
.wrapper {
  display: -moz-flex;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -webkit-box-lines: single;
  -moz-box-lines: single;
  box-lines: single;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-box-align: center;
  box-align: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -o-align-items: center;
  align-items: center;
  -ms-flex-align: center; }

.bebo-btn {
  display: -moz-flex;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
  box-pack: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  -o-justify-content: center;
  justify-content: center;
  -ms-flex-pack: center;
  -webkit-box-align: center;
  box-align: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -o-align-items: center;
  align-items: center;
  -ms-flex-align: center;
  align-content: center;
  -ms-flex-line-pack: center; }

/*
body, html {
  overflow:hidden;
  height:100%;
  min-height: inherit;
  position:fixed;
  width:100%;
  top:0;
  left:0;
}
*/
.wrapper {
  max-width: 80rem;
  margin: 0 auto;
  padding: 0 1.33333rem; }

.wrapper {
  display: -moz-flex;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -webkit-box-lines: single;
  -moz-box-lines: single;
  box-lines: single;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-box-align: center;
  box-align: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -o-align-items: center;
  align-items: center;
  -ms-flex-align: center; }

.bebo-btn {
  display: -moz-flex;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
  box-pack: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  -o-justify-content: center;
  justify-content: center;
  -ms-flex-pack: center;
  -webkit-box-align: center;
  box-align: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -o-align-items: center;
  align-items: center;
  -ms-flex-align: center;
  align-content: center;
  -ms-flex-line-pack: center; }

/*
body, html {
  overflow:hidden;
  height:100%;
  min-height: inherit;
  position:fixed;
  width:100%;
  top:0;
  left:0;
}
*/
.wrapper {
  max-width: 80rem;
  margin: 0 auto;
  padding: 0 1.33333rem; }

.bebo-btn, .bebo-btn.text-button {
  font-size: 0.93333rem;
  line-height: 1.26667rem; }

/*
html, body {
  font-size: $font-size;
  line-height: 1.25;
  font-family: $font-family-base;
  font-weight: 400;
  word-wrap: break-word;
  color: $color-black;
  hyphens: auto;
}

%hero {
  @extend %font-size-huge;
  font-weight: 500;
  color: $color-brand;
}
h1 {
  @extend %font-size-x-large;
  font-weight: 300;
}
h2 {
  @extend %font-size-large;
  font-weight: 300;
}
h3 {
  @extend %font-size-medium;
  font-weight: 600;
}
h4 {
  @extend %font-size-medium;
  font-weight: 400;
  color: $color-grey4;
}
h5 {
  @extend %font-size-small;
  font-weight: 900;
  letter-spacing: 0.5px;
  color: $color-grey5;
}
p {
  @extend %font-size-default;
  font-weight: 400;
}
small {
  @extend %font-size-small;
}
a {
  color: #a0a0a0;
  cursor: pointer;
  text-decoration: none;
  &:hover {
    color: #ffffff;
  }
  @include transition(all .2s);
}
em, .em {
  font-style: italic;
}
strong, .strong {
  font-weight: bold;
}
button{
  font-family: $font-family-base;
  cursor: pointer;
}
textarea, input, select{
  font-family: $font-family-base;
}
*/
::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  color: #888888; }

::-moz-placeholder {
  /* Firefox 19+ */
  color: #888888; }

:-ms-input-placeholder {
  /* IE 10+ */
  color: #888888; }

:-moz-placeholder {
  /* Firefox 18- */
  color: #888888; }

/*
button, input, textarea {
  transition: all 200ms ease;
}

input[type="text"] {
  outline: 0;
  border: 0;
}

input[type="text"], textarea {
  border-radius: 2px;
}
*/
.bebo-btn {
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 1px;
  display: inline-block;
  color: #ffffff;
  text-align: center;
  background-color: #2c3032;
  cursor: pointer;
  -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
          box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
  height: 2.66667rem;
  padding: 0.73333rem 1.6rem;
  -webkit-transition: all 200ms ease;
  -o-transition: all 200ms ease;
  transition: all 200ms ease;
  border-radius: 1.33333rem; }
  .bebo-btn:hover {
    color: #1d2123;
    background-color: #fdc20a;
    text-decoration: none; }
  .bebo-btn.loading {
    background-size: 1.06667rem;
    background-repeat: no-repeat;
    background-position: center;
    text-indent: -999999;
    overflow: hidden;
    color: transparent; }
    .bebo-btn.loading:hover {
      background-color: #ffffff;
      color: transparent;
      border: 1px solid #dddddd; }
  .bebo-btn.disabled {
    background: #eeeeee;
    color: #eeeeee;
    border: 1px solid #dddddd; }
    .bebo-btn.disabled:hover {
      background: #eeeeee;
      color: #eeeeee;
      border: 1px solid #dddddd; }
  .bebo-btn.text-button {
    text-transform: none;
    background: none;
    border: 0;
    color: #b1b1b1;
    font-weight: 400;
    height: auto;
    margin: 1.33333rem auto; }
    .bebo-btn.text-button:hover {
      background: none;
      color: #FDC823; }

.bebo-btn, .user-avatar, .community-avatar {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center; }

.user-avatar {
  background-size: cover;
  height: 1.6rem;
  width: 1.6rem;
  border-radius: 50%;
  background-color: #5d5e6b; }

.community-avatar {
  background-size: cover;
  height: 3.33333rem;
  width: 3.33333rem;
  background-color: #5d5e6b; }

/*body,
html {
  color: $color-white;
}*/
.toast-banner {
  position: absolute;
  z-index: 101;
  top: 0;
  left: 0;
  right: 0;
  background: red;
  text-align: center;
  line-height: 2.5;
  overflow: hidden;
  -webkit-box-shadow: 0 0 5px black;
  box-shadow: 0 0 5px black; }

@-webkit-keyframes slideDown {
  0%,
  100% {
    -webkit-transform: translateY(-50px); }
  10%,
  90% {
    -webkit-transform: translateY(0px); } }

.form-input {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column; }

.form-input.inline-label {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between; }

.form-input__label {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  text-align: left;
  color: #898989;
  margin-bottom: 10px;
  display: block; }

.form-input.inline-label .form-input__label {
  display: inline-block;
  margin-bottom: 0;
  width: auto; }

.form-input__wrapper {
  width: 100%;
  background: #272727;
  border: 1px solid #151515;
  border-radius: 5px;
  padding: 8px 10px;
  overflow: hidden;
  font-size: 15px; }

.form-input__input {
  width: 100%;
  border-bottom: 0px solid transparent !important;
  color: #fff !important;
  background: transparent !important;
  text-align: left !important;
  font-size: 0.8rem !important;
  padding: 0 !important;
  font-weight: 400;
  border: none;
  outline: none; }

.form-input__icon {
  margin-right: 0.66667rem;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto; }
  .form-input__icon * {
    fill: #a0a0a0; }

.form-input__wrapper.has-icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: row;
      -ms-flex-pack: row;
          justify-content: row;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center; }
  .form-input__wrapper.has-icon .form-input__input {
    background: red; }

.form-input__wrapper.is-focused {
  border: 1px solid rgba(253, 200, 35, 0.64); }

.form-input__wrapper.transparent {
  background: transparent;
  border: 1px solid transparent;
  -webkit-box-shadow: 0px 0px 2px 3px transparent;
          box-shadow: 0px 0px 2px 3px transparent; }
.rc-slider {
  position: relative;
  height: 14px;
  padding: 5px 0;
  width: 100%;
  border-radius: 6px;
  -ms-touch-action: none;
  touch-action: none;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-tap-highlight-color: transparent; }

.rc-slider * {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-tap-highlight-color: transparent; }

.rc-slider-rail {
  position: absolute;
  width: 100%;
  background-color: #e9e9e9;
  height: 4px;
  border-radius: 6px; }

.rc-slider-track {
  position: absolute;
  left: 0;
  height: 4px;
  border-radius: 6px;
  background-color: #abe2fb; }

.rc-slider-handle {
  position: absolute;
  margin-left: -7px;
  margin-top: -5px;
  width: 14px;
  height: 14px;
  cursor: pointer;
  cursor: -webkit-grab;
  cursor: grab;
  border-radius: 50%;
  border: solid 2px #96dbfa;
  background-color: #fff;
  -ms-touch-action: pan-x;
  touch-action: pan-x; }

.rc-slider-handle:hover {
  border-color: #57c5f7; }

.rc-slider-handle:active {
  border-color: #57c5f7;
  -webkit-box-shadow: 0 0 5px #57c5f7;
          box-shadow: 0 0 5px #57c5f7;
  cursor: -webkit-grabbing;
  cursor: grabbing; }

.rc-slider-handle:focus {
  border-color: #57c5f7;
  -webkit-box-shadow: 0 0 0 5px #96dbfa;
          box-shadow: 0 0 0 5px #96dbfa;
  outline: none; }

.rc-slider-mark {
  position: absolute;
  top: 18px;
  left: 0;
  width: 100%;
  font-size: 12px; }

.rc-slider-mark-text {
  position: absolute;
  display: inline-block;
  vertical-align: middle;
  text-align: center;
  cursor: pointer;
  color: #999; }

.rc-slider-mark-text-active {
  color: #666; }

.rc-slider-step {
  position: absolute;
  width: 100%;
  height: 4px;
  background: transparent; }

.rc-slider-dot {
  position: absolute;
  bottom: -2px;
  margin-left: -4px;
  width: 8px;
  height: 8px;
  border: 2px solid #e9e9e9;
  background-color: #fff;
  cursor: pointer;
  border-radius: 50%;
  vertical-align: middle; }

.rc-slider-dot:first-child {
  margin-left: -4px; }

.rc-slider-dot:last-child {
  margin-left: -4px; }

.rc-slider-dot-active {
  border-color: #96dbfa; }

.rc-slider-disabled {
  background-color: #e9e9e9; }

.rc-slider-disabled .rc-slider-track {
  background-color: #ccc; }

.rc-slider-disabled .rc-slider-handle,
.rc-slider-disabled .rc-slider-dot {
  border-color: #ccc;
  -webkit-box-shadow: none;
          box-shadow: none;
  background-color: #fff;
  cursor: not-allowed; }

.rc-slider-disabled .rc-slider-mark-text,
.rc-slider-disabled .rc-slider-dot {
  cursor: not-allowed !important; }

.rc-slider-vertical {
  width: 14px;
  height: 100%;
  padding: 0 5px; }

.rc-slider-vertical .rc-slider-rail {
  height: 100%;
  width: 4px; }

.rc-slider-vertical .rc-slider-track {
  left: 5px;
  bottom: 0;
  width: 4px; }

.rc-slider-vertical .rc-slider-handle {
  margin-left: -5px;
  margin-bottom: -7px;
  -ms-touch-action: pan-y;
  touch-action: pan-y; }

.rc-slider-vertical .rc-slider-mark {
  top: 0;
  left: 18px;
  height: 100%; }

.rc-slider-vertical .rc-slider-step {
  height: 100%;
  width: 4px; }

.rc-slider-vertical .rc-slider-dot {
  left: 2px;
  margin-bottom: -4px; }

.rc-slider-vertical .rc-slider-dot:first-child {
  margin-bottom: -4px; }

.rc-slider-vertical .rc-slider-dot:last-child {
  margin-bottom: -4px; }

.rc-slider-tooltip-zoom-down-enter,
.rc-slider-tooltip-zoom-down-appear {
  -webkit-animation-duration: .3s;
  animation-duration: .3s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  display: block !important;
  -webkit-animation-play-state: paused;
  animation-play-state: paused; }

.rc-slider-tooltip-zoom-down-leave {
  -webkit-animation-duration: .3s;
  animation-duration: .3s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  display: block !important;
  -webkit-animation-play-state: paused;
  animation-play-state: paused; }

.rc-slider-tooltip-zoom-down-enter.rc-slider-tooltip-zoom-down-enter-active,
.rc-slider-tooltip-zoom-down-appear.rc-slider-tooltip-zoom-down-appear-active {
  -webkit-animation-name: rcSliderTooltipZoomDownIn;
  animation-name: rcSliderTooltipZoomDownIn;
  -webkit-animation-play-state: running;
  animation-play-state: running; }

.rc-slider-tooltip-zoom-down-leave.rc-slider-tooltip-zoom-down-leave-active {
  -webkit-animation-name: rcSliderTooltipZoomDownOut;
  animation-name: rcSliderTooltipZoomDownOut;
  -webkit-animation-play-state: running;
  animation-play-state: running; }

.rc-slider-tooltip-zoom-down-enter,
.rc-slider-tooltip-zoom-down-appear {
  -webkit-transform: scale(0, 0);
  -ms-transform: scale(0, 0);
      transform: scale(0, 0);
  -webkit-animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
  animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); }

.rc-slider-tooltip-zoom-down-leave {
  -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
  animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); }

@-webkit-keyframes rcSliderTooltipZoomDownIn {
  0% {
    opacity: 0;
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    -webkit-transform: scale(0, 0);
    transform: scale(0, 0); }
  100% {
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1); } }

@keyframes rcSliderTooltipZoomDownIn {
  0% {
    opacity: 0;
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    -webkit-transform: scale(0, 0);
    transform: scale(0, 0); }
  100% {
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1); } }

@-webkit-keyframes rcSliderTooltipZoomDownOut {
  0% {
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1); }
  100% {
    opacity: 0;
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    -webkit-transform: scale(0, 0);
    transform: scale(0, 0); } }

@keyframes rcSliderTooltipZoomDownOut {
  0% {
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1); }
  100% {
    opacity: 0;
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    -webkit-transform: scale(0, 0);
    transform: scale(0, 0); } }

.rc-slider-tooltip {
  position: absolute;
  left: -9999px;
  top: -9999px;
  visibility: visible;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-tap-highlight-color: transparent; }

.rc-slider-tooltip * {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-tap-highlight-color: transparent; }

.rc-slider-tooltip-hidden {
  display: none; }

.rc-slider-tooltip-placement-top {
  padding: 4px 0 8px 0; }

.rc-slider-tooltip-inner {
  padding: 6px 2px;
  min-width: 24px;
  height: 24px;
  font-size: 12px;
  line-height: 1;
  color: #fff;
  text-align: center;
  text-decoration: none;
  background-color: #6c6c6c;
  border-radius: 6px;
  -webkit-box-shadow: 0 0 4px #d9d9d9;
          box-shadow: 0 0 4px #d9d9d9; }

.rc-slider-tooltip-arrow {
  position: absolute;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid; }

.rc-slider-tooltip-placement-top .rc-slider-tooltip-arrow {
  bottom: 4px;
  left: 50%;
  margin-left: -4px;
  border-width: 4px 4px 0;
  border-top-color: #6c6c6c; }
.form-slider {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  padding: 10px 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box; }

.form-slider.inline-label {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between; }
  .form-slider.inline-label .form-slider__label {
    margin-bottom: 0; }

.form-slider__label {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  text-align: left;
  color: #898989;
  width: 120px;
  margin-bottom: calc-em(15px);
  font-size: calc-em(12px); }

.form-slider__input {
  width: 70%;
  max-width: 300px;
  background: #272727;
  border: 1px solid #151515;
  border-radius: 5px; }

.form-slider__input .slider-control {
  background: #272727;
  border: 1px solid #151515;
  border-radius: 5px; }

.form-slider__input .slider-clear-zone {
  display: none; }

.form-slider__wrapper {
  padding-left: 25px;
  padding-right: 20px;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  background-color: #272727; }

.form-slider .rc-slider {
  width: 100%;
  height: 8px;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  padding: 0; }

.handle {
  -webkit-transform: translate3d(-50%, 0, 0);
          transform: translate3d(-50%, 0, 0);
  width: auto;
  background: red;
  border-radius: 2px;
  border: none;
  background: #686868;
  border: 0 solid rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 0 3px 1px 0 rgba(0, 0, 0, 0.05), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 3px 3px 0 rgba(0, 0, 0, 0.05);
          box-shadow: 0 3px 1px 0 rgba(0, 0, 0, 0.05), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 3px 3px 0 rgba(0, 0, 0, 0.05);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: calc-em(34px);
  top: calc-em(-5px);
  height: calc-em(20px);
  margin-left: 0px;
  margin-top: -2px;
  font-size: calc-em(12px);
  font-weight: 500; }

.handle__text {
  display: inline-block;
  text-align: center; }

.form-slider .rc-slider-rail {
  height: 8px;
  background-color: #272727; }

.form-slider .rc-slider-track {
  height: 8px;
  background-color: #272727; }
.form-slider {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  padding: 10px 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box; }

.form-slider.inline-label {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between; }
  .form-slider.inline-label .form-slider__label {
    margin-bottom: 0; }

.form-slider__label {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  text-align: left;
  color: #898989;
  width: 120px;
  margin-bottom: calc-em(15px);
  font-size: calc-em(12px); }

.volume-slider .form-slider__input {
  width: 100%;
  background: #272727;
  border: 1px solid #151515;
  border-radius: 5px; }

.form-slider__input .slider-clear-zone {
  display: none; }

.volume-slider .form-slider__wrapper {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  background-color: transparent;
  padding: 0;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column; }

.form-slider.volume-slider .rc-slider {
  width: 100%;
  height: 5px;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  padding: 0; }

.form-slider.volume-slider .rc-slider-rail {
  height: 5px !important;
  background-color: #272727; }

.form-slider.volume-slider .rc-slider-handle {
  background-color: #585858;
  border: none; }

.form-slider.volume-slider .rc-slider-track {
  height: 5px;
  background-color: #FDC823; }

.volume-slider.active .volume-slider__meta--wrapper {
  color: rgba(255, 255, 255, 0.6); }

.volume-slider__meta--wrapper {
  -webkit-transition: all 300ms ease;
  -o-transition: all 300ms ease;
  transition: all 300ms ease;
  width: 100%;
  display: block;
  font-size: 10px;
  padding-bottom: 2px;
  color: transparent;
  display: none; }

.volume-slider__meta--min {
  float: left;
  color: inherit; }

.volume-slider__meta--max {
  float: right;
  color: inherit; }
.wrapper {
  display: -moz-flex;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -webkit-box-lines: single;
  -moz-box-lines: single;
  box-lines: single;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-box-align: center;
  box-align: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -o-align-items: center;
  align-items: center;
  -ms-flex-align: center; }

.bebo-btn {
  display: -moz-flex;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
  box-pack: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  -o-justify-content: center;
  justify-content: center;
  -ms-flex-pack: center;
  -webkit-box-align: center;
  box-align: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -o-align-items: center;
  align-items: center;
  -ms-flex-align: center;
  align-content: center;
  -ms-flex-line-pack: center; }

/*
body, html {
  overflow:hidden;
  height:100%;
  min-height: inherit;
  position:fixed;
  width:100%;
  top:0;
  left:0;
}
*/
.wrapper {
  max-width: 80rem;
  margin: 0 auto;
  padding: 0 1.33333rem; }

.wrapper {
  display: -moz-flex;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -webkit-box-lines: single;
  -moz-box-lines: single;
  box-lines: single;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-box-align: center;
  box-align: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -o-align-items: center;
  align-items: center;
  -ms-flex-align: center; }

.bebo-btn {
  display: -moz-flex;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
  box-pack: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  -o-justify-content: center;
  justify-content: center;
  -ms-flex-pack: center;
  -webkit-box-align: center;
  box-align: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -o-align-items: center;
  align-items: center;
  -ms-flex-align: center;
  align-content: center;
  -ms-flex-line-pack: center; }

/*
body, html {
  overflow:hidden;
  height:100%;
  min-height: inherit;
  position:fixed;
  width:100%;
  top:0;
  left:0;
}
*/
.wrapper {
  max-width: 80rem;
  margin: 0 auto;
  padding: 0 1.33333rem; }

.bebo-btn, .bebo-btn.text-button {
  font-size: 0.93333rem;
  line-height: 1.26667rem; }

/*
html, body {
  font-size: $font-size;
  line-height: 1.25;
  font-family: $font-family-base;
  font-weight: 400;
  word-wrap: break-word;
  color: $color-black;
  hyphens: auto;
}

%hero {
  @extend %font-size-huge;
  font-weight: 500;
  color: $color-brand;
}
h1 {
  @extend %font-size-x-large;
  font-weight: 300;
}
h2 {
  @extend %font-size-large;
  font-weight: 300;
}
h3 {
  @extend %font-size-medium;
  font-weight: 600;
}
h4 {
  @extend %font-size-medium;
  font-weight: 400;
  color: $color-grey4;
}
h5 {
  @extend %font-size-small;
  font-weight: 900;
  letter-spacing: 0.5px;
  color: $color-grey5;
}
p {
  @extend %font-size-default;
  font-weight: 400;
}
small {
  @extend %font-size-small;
}
a {
  color: #a0a0a0;
  cursor: pointer;
  text-decoration: none;
  &:hover {
    color: #ffffff;
  }
  @include transition(all .2s);
}
em, .em {
  font-style: italic;
}
strong, .strong {
  font-weight: bold;
}
button{
  font-family: $font-family-base;
  cursor: pointer;
}
textarea, input, select{
  font-family: $font-family-base;
}
*/
::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  color: #888888; }

::-moz-placeholder {
  /* Firefox 19+ */
  color: #888888; }

:-ms-input-placeholder {
  /* IE 10+ */
  color: #888888; }

:-moz-placeholder {
  /* Firefox 18- */
  color: #888888; }

/*
button, input, textarea {
  transition: all 200ms ease;
}

input[type="text"] {
  outline: 0;
  border: 0;
}

input[type="text"], textarea {
  border-radius: 2px;
}
*/
.bebo-btn {
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 1px;
  display: inline-block;
  color: #ffffff;
  text-align: center;
  background-color: #2c3032;
  cursor: pointer;
  -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
          box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
  height: 2.66667rem;
  padding: 0.73333rem 1.6rem;
  -webkit-transition: all 200ms ease;
  -o-transition: all 200ms ease;
  transition: all 200ms ease;
  border-radius: 1.33333rem; }
  .bebo-btn:hover {
    color: #1d2123;
    background-color: #fdc20a;
    text-decoration: none; }
  .bebo-btn.loading {
    background-size: 1.06667rem;
    background-repeat: no-repeat;
    background-position: center;
    text-indent: -999999;
    overflow: hidden;
    color: transparent; }
    .bebo-btn.loading:hover {
      background-color: #ffffff;
      color: transparent;
      border: 1px solid #dddddd; }
  .bebo-btn.disabled {
    background: #eeeeee;
    color: #eeeeee;
    border: 1px solid #dddddd; }
    .bebo-btn.disabled:hover {
      background: #eeeeee;
      color: #eeeeee;
      border: 1px solid #dddddd; }
  .bebo-btn.text-button {
    text-transform: none;
    background: none;
    border: 0;
    color: #b1b1b1;
    font-weight: 400;
    height: auto;
    margin: 1.33333rem auto; }
    .bebo-btn.text-button:hover {
      background: none;
      color: #FDC823; }

.bebo-btn, .user-avatar, .community-avatar {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center; }

.user-avatar {
  background-size: cover;
  height: 1.6rem;
  width: 1.6rem;
  border-radius: 50%;
  background-color: #5d5e6b; }

.community-avatar {
  background-size: cover;
  height: 3.33333rem;
  width: 3.33333rem;
  background-color: #5d5e6b; }

/*body,
html {
  color: $color-white;
}*/
.toast-banner {
  position: absolute;
  z-index: 101;
  top: 0;
  left: 0;
  right: 0;
  background: red;
  text-align: center;
  line-height: 2.5;
  overflow: hidden;
  -webkit-box-shadow: 0 0 5px black;
  box-shadow: 0 0 5px black; }

@-webkit-keyframes slideDown {
  0%,
  100% {
    -webkit-transform: translateY(-50px); }
  10%,
  90% {
    -webkit-transform: translateY(0px); } }

.form-item {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column; }

.form-item.inline-label {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between; }

.form-item__wrapper {
  -webkit-box-flex: 0;
      -ms-flex: 0 1 auto;
          flex: 0 1 auto; }
  .form-item__wrapper .icon-button {
    padding: 0; }

.form-item__color {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 8px 10px 0.53333rem 0.86667rem;
  background: #272727;
  border: 1px solid #151515;
  border-radius: 5px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center; }

.form-item__label {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  text-align: left;
  color: #898989;
  display: inline-block;
  margin-bottom: 0;
  width: 100%; }

.input__color {
  width: 1.33333rem;
  height: 1.33333rem;
  position: relative;
  padding: 5px;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  border-radius: 2px; }

.input__color--inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 2px; }

.input__color--background {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 99999; }

.form-item__color--picker {
  width: 1.33333rem;
  height: 1.33333rem;
  position: relative;
  cursor: pointer;
  margin-right: 5px; }

.form-item__color .form-input__wrapper {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  padding: 0px; }

.form-item__color--input {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  font-size: 15px;
  font-weight: 700;
  min-width: 4rem; }
.form-hint {
  padding: 2px;
  margin-top: 10px; }

.form-hint__text {
  font-size: 11px;
  text-align: left;
  width: 100%;
  font-weight: inherit;
  display: block; }
.wrapper {
  display: -moz-flex;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -webkit-box-lines: single;
  -moz-box-lines: single;
  box-lines: single;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-box-align: center;
  box-align: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -o-align-items: center;
  align-items: center;
  -ms-flex-align: center; }

.bebo-btn {
  display: -moz-flex;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
  box-pack: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  -o-justify-content: center;
  justify-content: center;
  -ms-flex-pack: center;
  -webkit-box-align: center;
  box-align: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -o-align-items: center;
  align-items: center;
  -ms-flex-align: center;
  align-content: center;
  -ms-flex-line-pack: center; }

/*
body, html {
  overflow:hidden;
  height:100%;
  min-height: inherit;
  position:fixed;
  width:100%;
  top:0;
  left:0;
}
*/
.wrapper {
  max-width: 80rem;
  margin: 0 auto;
  padding: 0 1.33333rem; }

.wrapper {
  display: -moz-flex;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -webkit-box-lines: single;
  -moz-box-lines: single;
  box-lines: single;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-box-align: center;
  box-align: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -o-align-items: center;
  align-items: center;
  -ms-flex-align: center; }

.bebo-btn {
  display: -moz-flex;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
  box-pack: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  -o-justify-content: center;
  justify-content: center;
  -ms-flex-pack: center;
  -webkit-box-align: center;
  box-align: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -o-align-items: center;
  align-items: center;
  -ms-flex-align: center;
  align-content: center;
  -ms-flex-line-pack: center; }

/*
body, html {
  overflow:hidden;
  height:100%;
  min-height: inherit;
  position:fixed;
  width:100%;
  top:0;
  left:0;
}
*/
.wrapper {
  max-width: 80rem;
  margin: 0 auto;
  padding: 0 1.33333rem; }

.bebo-btn, .bebo-btn.text-button {
  font-size: 0.93333rem;
  line-height: 1.26667rem; }

/*
html, body {
  font-size: $font-size;
  line-height: 1.25;
  font-family: $font-family-base;
  font-weight: 400;
  word-wrap: break-word;
  color: $color-black;
  hyphens: auto;
}

%hero {
  @extend %font-size-huge;
  font-weight: 500;
  color: $color-brand;
}
h1 {
  @extend %font-size-x-large;
  font-weight: 300;
}
h2 {
  @extend %font-size-large;
  font-weight: 300;
}
h3 {
  @extend %font-size-medium;
  font-weight: 600;
}
h4 {
  @extend %font-size-medium;
  font-weight: 400;
  color: $color-grey4;
}
h5 {
  @extend %font-size-small;
  font-weight: 900;
  letter-spacing: 0.5px;
  color: $color-grey5;
}
p {
  @extend %font-size-default;
  font-weight: 400;
}
small {
  @extend %font-size-small;
}
a {
  color: #a0a0a0;
  cursor: pointer;
  text-decoration: none;
  &:hover {
    color: #ffffff;
  }
  @include transition(all .2s);
}
em, .em {
  font-style: italic;
}
strong, .strong {
  font-weight: bold;
}
button{
  font-family: $font-family-base;
  cursor: pointer;
}
textarea, input, select{
  font-family: $font-family-base;
}
*/
::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  color: #888888; }

::-moz-placeholder {
  /* Firefox 19+ */
  color: #888888; }

:-ms-input-placeholder {
  /* IE 10+ */
  color: #888888; }

:-moz-placeholder {
  /* Firefox 18- */
  color: #888888; }

/*
button, input, textarea {
  transition: all 200ms ease;
}

input[type="text"] {
  outline: 0;
  border: 0;
}

input[type="text"], textarea {
  border-radius: 2px;
}
*/
.bebo-btn {
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 1px;
  display: inline-block;
  color: #ffffff;
  text-align: center;
  background-color: #2c3032;
  cursor: pointer;
  -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
          box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
  height: 2.66667rem;
  padding: 0.73333rem 1.6rem;
  -webkit-transition: all 200ms ease;
  -o-transition: all 200ms ease;
  transition: all 200ms ease;
  border-radius: 1.33333rem; }
  .bebo-btn:hover {
    color: #1d2123;
    background-color: #fdc20a;
    text-decoration: none; }
  .bebo-btn.loading {
    background-size: 1.06667rem;
    background-repeat: no-repeat;
    background-position: center;
    text-indent: -999999;
    overflow: hidden;
    color: transparent; }
    .bebo-btn.loading:hover {
      background-color: #ffffff;
      color: transparent;
      border: 1px solid #dddddd; }
  .bebo-btn.disabled {
    background: #eeeeee;
    color: #eeeeee;
    border: 1px solid #dddddd; }
    .bebo-btn.disabled:hover {
      background: #eeeeee;
      color: #eeeeee;
      border: 1px solid #dddddd; }
  .bebo-btn.text-button {
    text-transform: none;
    background: none;
    border: 0;
    color: #b1b1b1;
    font-weight: 400;
    height: auto;
    margin: 1.33333rem auto; }
    .bebo-btn.text-button:hover {
      background: none;
      color: #FDC823; }

.bebo-btn, .user-avatar, .community-avatar {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center; }

.user-avatar {
  background-size: cover;
  height: 1.6rem;
  width: 1.6rem;
  border-radius: 50%;
  background-color: #5d5e6b; }

.community-avatar {
  background-size: cover;
  height: 3.33333rem;
  width: 3.33333rem;
  background-color: #5d5e6b; }

/*body,
html {
  color: $color-white;
}*/
.toast-banner {
  position: absolute;
  z-index: 101;
  top: 0;
  left: 0;
  right: 0;
  background: red;
  text-align: center;
  line-height: 2.5;
  overflow: hidden;
  -webkit-box-shadow: 0 0 5px black;
  box-shadow: 0 0 5px black; }

@-webkit-keyframes slideDown {
  0%,
  100% {
    -webkit-transform: translateY(-50px); }
  10%,
  90% {
    -webkit-transform: translateY(0px); } }

.button {
  padding: 10px 6px;
  font-weight: 600;
  border-radius: 3px;
  display: inline-block;
  cursor: pointer !important;
  text-align: center; }

.button.compact {
  padding: 6px 4px; }

.button.small {
  background: #272727;
  padding: 0.53333rem 0.53333rem 0.6rem;
  font-weight: 500;
  width: 100%;
  margin-top: 0.33333rem;
  -webkit-transition: all 200ms ease;
  -o-transition: all 200ms ease;
  transition: all 200ms ease; }
  .button.small:hover {
    background: #343434; }

.icon-button {
  opacity: 0.76; }

.icon-button:hover {
  opacity: 1 !important; }

.button.primary {
  background: #FDC823;
  color: #000;
  font-size: 0.8rem;
  font-weight: 600; }
  .button.primary:hover {
    background: #ebb202;
    -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.25);
            box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.25); }
  .button.primary:active {
    background: #fdce3c;
    -webkit-box-shadow: 0 0px 20px 2px rgba(134, 102, 1, 0.85);
            box-shadow: 0 0px 20px 2px rgba(134, 102, 1, 0.85); }

.button.transparent {
  color: #FFF;
  background: transparent; }
  .button.transparent:hover {
    background: rgba(255, 255, 255, 0.2); }

.button.discord {
  background: #7289DA;
  color: #FFF; }

.button.is-disabled {
  pointer-events: none;
  opacity: 0.3; }

.button.full-width {
  width: 100%;
  margin: 0 auto; }
.ui-dropdown {
  position: absolute;
  bottom: 0;
  -webkit-transform: translate3d(0, 100%, 0);
          transform: translate3d(0, 100%, 0);
  display: block;
  background-color: #1b1b1b;
  z-index: 100;
  border-radius: 3px;
  overflow: hidden;
  -webkit-box-shadow: 0 0 20px 1px rgba(0, 0, 0, 0.4);
          box-shadow: 0 0 20px 1px rgba(0, 0, 0, 0.4); }

.ui-dropdown__item {
  padding: 10px 10px;
  font-size: 12px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  cursor: pointer;
  border-bottom: 1px solid #0e0e0e; }
  .ui-dropdown__item:last-child {
    border-bottom: none; }
  .ui-dropdown__item:hover .ui-dropdown__item--name {
    color: #FFF; }

.ui-dropdown__item--icon {
  margin-right: 5px; }

.ui-dropdown__item--name {
  color: #9C9C9C; }
  .ui-dropdown__item--name:hover {
    color: #FFF; }
.ui-loader {
  border: 16px solid #f3f3f3;
  /* Light grey */
  border-top: 16px solid #3498db;
  /* Blue */
  border-radius: 50%;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite;
          animation: spin 2s linear infinite; }

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg); } }

@keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg); } }
.panel {
  background-color: #0C0C0C;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  position: relative;
  height: 100%; }

.panel.is-fixed {
  height: 100%;
  overflow: hidden;
  padding: 0; }

.panel-header__bar {
  width: 10px;
  display: block;
  height: 40px;
  background-color: red; }

.panel-sidebar {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  height: 100% !important; }
.wrapper {
  display: -moz-flex;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -webkit-box-lines: single;
  -moz-box-lines: single;
  box-lines: single;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-box-align: center;
  box-align: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -o-align-items: center;
  align-items: center;
  -ms-flex-align: center; }

.bebo-btn {
  display: -moz-flex;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
  box-pack: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  -o-justify-content: center;
  justify-content: center;
  -ms-flex-pack: center;
  -webkit-box-align: center;
  box-align: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -o-align-items: center;
  align-items: center;
  -ms-flex-align: center;
  align-content: center;
  -ms-flex-line-pack: center; }

/*
body, html {
  overflow:hidden;
  height:100%;
  min-height: inherit;
  position:fixed;
  width:100%;
  top:0;
  left:0;
}
*/
.wrapper {
  max-width: 80rem;
  margin: 0 auto;
  padding: 0 1.33333rem; }

.wrapper {
  display: -moz-flex;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -webkit-box-lines: single;
  -moz-box-lines: single;
  box-lines: single;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-box-align: center;
  box-align: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -o-align-items: center;
  align-items: center;
  -ms-flex-align: center; }

.bebo-btn {
  display: -moz-flex;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
  box-pack: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  -o-justify-content: center;
  justify-content: center;
  -ms-flex-pack: center;
  -webkit-box-align: center;
  box-align: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -o-align-items: center;
  align-items: center;
  -ms-flex-align: center;
  align-content: center;
  -ms-flex-line-pack: center; }

/*
body, html {
  overflow:hidden;
  height:100%;
  min-height: inherit;
  position:fixed;
  width:100%;
  top:0;
  left:0;
}
*/
.wrapper {
  max-width: 80rem;
  margin: 0 auto;
  padding: 0 1.33333rem; }

.bebo-btn, .bebo-btn.text-button {
  font-size: 0.93333rem;
  line-height: 1.26667rem; }

/*
html, body {
  font-size: $font-size;
  line-height: 1.25;
  font-family: $font-family-base;
  font-weight: 400;
  word-wrap: break-word;
  color: $color-black;
  hyphens: auto;
}

%hero {
  @extend %font-size-huge;
  font-weight: 500;
  color: $color-brand;
}
h1 {
  @extend %font-size-x-large;
  font-weight: 300;
}
h2 {
  @extend %font-size-large;
  font-weight: 300;
}
h3 {
  @extend %font-size-medium;
  font-weight: 600;
}
h4 {
  @extend %font-size-medium;
  font-weight: 400;
  color: $color-grey4;
}
h5 {
  @extend %font-size-small;
  font-weight: 900;
  letter-spacing: 0.5px;
  color: $color-grey5;
}
p {
  @extend %font-size-default;
  font-weight: 400;
}
small {
  @extend %font-size-small;
}
a {
  color: #a0a0a0;
  cursor: pointer;
  text-decoration: none;
  &:hover {
    color: #ffffff;
  }
  @include transition(all .2s);
}
em, .em {
  font-style: italic;
}
strong, .strong {
  font-weight: bold;
}
button{
  font-family: $font-family-base;
  cursor: pointer;
}
textarea, input, select{
  font-family: $font-family-base;
}
*/
::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  color: #888888; }

::-moz-placeholder {
  /* Firefox 19+ */
  color: #888888; }

:-ms-input-placeholder {
  /* IE 10+ */
  color: #888888; }

:-moz-placeholder {
  /* Firefox 18- */
  color: #888888; }

/*
button, input, textarea {
  transition: all 200ms ease;
}

input[type="text"] {
  outline: 0;
  border: 0;
}

input[type="text"], textarea {
  border-radius: 2px;
}
*/
.bebo-btn {
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 1px;
  display: inline-block;
  color: #ffffff;
  text-align: center;
  background-color: #2c3032;
  cursor: pointer;
  -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
          box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
  height: 2.66667rem;
  padding: 0.73333rem 1.6rem;
  -webkit-transition: all 200ms ease;
  -o-transition: all 200ms ease;
  transition: all 200ms ease;
  border-radius: 1.33333rem; }
  .bebo-btn:hover {
    color: #1d2123;
    background-color: #fdc20a;
    text-decoration: none; }
  .bebo-btn.loading {
    background-size: 1.06667rem;
    background-repeat: no-repeat;
    background-position: center;
    text-indent: -999999;
    overflow: hidden;
    color: transparent; }
    .bebo-btn.loading:hover {
      background-color: #ffffff;
      color: transparent;
      border: 1px solid #dddddd; }
  .bebo-btn.disabled {
    background: #eeeeee;
    color: #eeeeee;
    border: 1px solid #dddddd; }
    .bebo-btn.disabled:hover {
      background: #eeeeee;
      color: #eeeeee;
      border: 1px solid #dddddd; }
  .bebo-btn.text-button {
    text-transform: none;
    background: none;
    border: 0;
    color: #b1b1b1;
    font-weight: 400;
    height: auto;
    margin: 1.33333rem auto; }
    .bebo-btn.text-button:hover {
      background: none;
      color: #FDC823; }

.bebo-btn, .user-avatar, .community-avatar {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center; }

.user-avatar {
  background-size: cover;
  height: 1.6rem;
  width: 1.6rem;
  border-radius: 50%;
  background-color: #5d5e6b; }

.community-avatar {
  background-size: cover;
  height: 3.33333rem;
  width: 3.33333rem;
  background-color: #5d5e6b; }

/*body,
html {
  color: $color-white;
}*/
.toast-banner {
  position: absolute;
  z-index: 101;
  top: 0;
  left: 0;
  right: 0;
  background: red;
  text-align: center;
  line-height: 2.5;
  overflow: hidden;
  -webkit-box-shadow: 0 0 5px black;
  box-shadow: 0 0 5px black; }

@-webkit-keyframes slideDown {
  0%,
  100% {
    -webkit-transform: translateY(-50px); }
  10%,
  90% {
    -webkit-transform: translateY(0px); } }

.panel-search {
  width: 100%; }
.wrapper {
  display: -moz-flex;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -webkit-box-lines: single;
  -moz-box-lines: single;
  box-lines: single;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-box-align: center;
  box-align: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -o-align-items: center;
  align-items: center;
  -ms-flex-align: center; }

.bebo-btn {
  display: -moz-flex;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
  box-pack: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  -o-justify-content: center;
  justify-content: center;
  -ms-flex-pack: center;
  -webkit-box-align: center;
  box-align: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -o-align-items: center;
  align-items: center;
  -ms-flex-align: center;
  align-content: center;
  -ms-flex-line-pack: center; }

/*
body, html {
  overflow:hidden;
  height:100%;
  min-height: inherit;
  position:fixed;
  width:100%;
  top:0;
  left:0;
}
*/
.wrapper {
  max-width: 80rem;
  margin: 0 auto;
  padding: 0 1.33333rem; }

.wrapper {
  display: -moz-flex;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -webkit-box-lines: single;
  -moz-box-lines: single;
  box-lines: single;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-box-align: center;
  box-align: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -o-align-items: center;
  align-items: center;
  -ms-flex-align: center; }

.bebo-btn {
  display: -moz-flex;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
  box-pack: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  -o-justify-content: center;
  justify-content: center;
  -ms-flex-pack: center;
  -webkit-box-align: center;
  box-align: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -o-align-items: center;
  align-items: center;
  -ms-flex-align: center;
  align-content: center;
  -ms-flex-line-pack: center; }

/*
body, html {
  overflow:hidden;
  height:100%;
  min-height: inherit;
  position:fixed;
  width:100%;
  top:0;
  left:0;
}
*/
.wrapper {
  max-width: 80rem;
  margin: 0 auto;
  padding: 0 1.33333rem; }

.bebo-btn, .bebo-btn.text-button {
  font-size: 0.93333rem;
  line-height: 1.26667rem; }

/*
html, body {
  font-size: $font-size;
  line-height: 1.25;
  font-family: $font-family-base;
  font-weight: 400;
  word-wrap: break-word;
  color: $color-black;
  hyphens: auto;
}

%hero {
  @extend %font-size-huge;
  font-weight: 500;
  color: $color-brand;
}
h1 {
  @extend %font-size-x-large;
  font-weight: 300;
}
h2 {
  @extend %font-size-large;
  font-weight: 300;
}
h3 {
  @extend %font-size-medium;
  font-weight: 600;
}
h4 {
  @extend %font-size-medium;
  font-weight: 400;
  color: $color-grey4;
}
h5 {
  @extend %font-size-small;
  font-weight: 900;
  letter-spacing: 0.5px;
  color: $color-grey5;
}
p {
  @extend %font-size-default;
  font-weight: 400;
}
small {
  @extend %font-size-small;
}
a {
  color: #a0a0a0;
  cursor: pointer;
  text-decoration: none;
  &:hover {
    color: #ffffff;
  }
  @include transition(all .2s);
}
em, .em {
  font-style: italic;
}
strong, .strong {
  font-weight: bold;
}
button{
  font-family: $font-family-base;
  cursor: pointer;
}
textarea, input, select{
  font-family: $font-family-base;
}
*/
::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  color: #888888; }

::-moz-placeholder {
  /* Firefox 19+ */
  color: #888888; }

:-ms-input-placeholder {
  /* IE 10+ */
  color: #888888; }

:-moz-placeholder {
  /* Firefox 18- */
  color: #888888; }

/*
button, input, textarea {
  transition: all 200ms ease;
}

input[type="text"] {
  outline: 0;
  border: 0;
}

input[type="text"], textarea {
  border-radius: 2px;
}
*/
.bebo-btn {
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 1px;
  display: inline-block;
  color: #ffffff;
  text-align: center;
  background-color: #2c3032;
  cursor: pointer;
  -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
          box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
  height: 2.66667rem;
  padding: 0.73333rem 1.6rem;
  -webkit-transition: all 200ms ease;
  -o-transition: all 200ms ease;
  transition: all 200ms ease;
  border-radius: 1.33333rem; }
  .bebo-btn:hover {
    color: #1d2123;
    background-color: #fdc20a;
    text-decoration: none; }
  .bebo-btn.loading {
    background-size: 1.06667rem;
    background-repeat: no-repeat;
    background-position: center;
    text-indent: -999999;
    overflow: hidden;
    color: transparent; }
    .bebo-btn.loading:hover {
      background-color: #ffffff;
      color: transparent;
      border: 1px solid #dddddd; }
  .bebo-btn.disabled {
    background: #eeeeee;
    color: #eeeeee;
    border: 1px solid #dddddd; }
    .bebo-btn.disabled:hover {
      background: #eeeeee;
      color: #eeeeee;
      border: 1px solid #dddddd; }
  .bebo-btn.text-button {
    text-transform: none;
    background: none;
    border: 0;
    color: #b1b1b1;
    font-weight: 400;
    height: auto;
    margin: 1.33333rem auto; }
    .bebo-btn.text-button:hover {
      background: none;
      color: #FDC823; }

.bebo-btn, .user-avatar, .community-avatar {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center; }

.user-avatar {
  background-size: cover;
  height: 1.6rem;
  width: 1.6rem;
  border-radius: 50%;
  background-color: #5d5e6b; }

.community-avatar {
  background-size: cover;
  height: 3.33333rem;
  width: 3.33333rem;
  background-color: #5d5e6b; }

/*body,
html {
  color: $color-white;
}*/
.toast-banner {
  position: absolute;
  z-index: 101;
  top: 0;
  left: 0;
  right: 0;
  background: red;
  text-align: center;
  line-height: 2.5;
  overflow: hidden;
  -webkit-box-shadow: 0 0 5px black;
  box-shadow: 0 0 5px black; }

@-webkit-keyframes slideDown {
  0%,
  100% {
    -webkit-transform: translateY(-50px); }
  10%,
  90% {
    -webkit-transform: translateY(0px); } }

.panel-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  margin-top: 0.66667rem; }
  .panel-item:first-of-type {
    margin-top: 0; }

.panel-item__label {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  color: rgba(255, 255, 255, 0.75); }

.panel-item__container {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto; }

.oanel-item label {
  color: #959595; }

.panel-item.is-disabled {
  opacity: 0.4;
  pointer-events: none; }
.wrapper {
  display: -moz-flex;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -webkit-box-lines: single;
  -moz-box-lines: single;
  box-lines: single;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-box-align: center;
  box-align: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -o-align-items: center;
  align-items: center;
  -ms-flex-align: center; }

.bebo-btn {
  display: -moz-flex;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
  box-pack: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  -o-justify-content: center;
  justify-content: center;
  -ms-flex-pack: center;
  -webkit-box-align: center;
  box-align: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -o-align-items: center;
  align-items: center;
  -ms-flex-align: center;
  align-content: center;
  -ms-flex-line-pack: center; }

/*
body, html {
  overflow:hidden;
  height:100%;
  min-height: inherit;
  position:fixed;
  width:100%;
  top:0;
  left:0;
}
*/
.wrapper {
  max-width: 80rem;
  margin: 0 auto;
  padding: 0 1.33333rem; }

.wrapper {
  display: -moz-flex;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -webkit-box-lines: single;
  -moz-box-lines: single;
  box-lines: single;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-box-align: center;
  box-align: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -o-align-items: center;
  align-items: center;
  -ms-flex-align: center; }

.bebo-btn {
  display: -moz-flex;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
  box-pack: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  -o-justify-content: center;
  justify-content: center;
  -ms-flex-pack: center;
  -webkit-box-align: center;
  box-align: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -o-align-items: center;
  align-items: center;
  -ms-flex-align: center;
  align-content: center;
  -ms-flex-line-pack: center; }

/*
body, html {
  overflow:hidden;
  height:100%;
  min-height: inherit;
  position:fixed;
  width:100%;
  top:0;
  left:0;
}
*/
.wrapper {
  max-width: 80rem;
  margin: 0 auto;
  padding: 0 1.33333rem; }

.bebo-btn, .bebo-btn.text-button {
  font-size: 0.93333rem;
  line-height: 1.26667rem; }

/*
html, body {
  font-size: $font-size;
  line-height: 1.25;
  font-family: $font-family-base;
  font-weight: 400;
  word-wrap: break-word;
  color: $color-black;
  hyphens: auto;
}

%hero {
  @extend %font-size-huge;
  font-weight: 500;
  color: $color-brand;
}
h1 {
  @extend %font-size-x-large;
  font-weight: 300;
}
h2 {
  @extend %font-size-large;
  font-weight: 300;
}
h3 {
  @extend %font-size-medium;
  font-weight: 600;
}
h4 {
  @extend %font-size-medium;
  font-weight: 400;
  color: $color-grey4;
}
h5 {
  @extend %font-size-small;
  font-weight: 900;
  letter-spacing: 0.5px;
  color: $color-grey5;
}
p {
  @extend %font-size-default;
  font-weight: 400;
}
small {
  @extend %font-size-small;
}
a {
  color: #a0a0a0;
  cursor: pointer;
  text-decoration: none;
  &:hover {
    color: #ffffff;
  }
  @include transition(all .2s);
}
em, .em {
  font-style: italic;
}
strong, .strong {
  font-weight: bold;
}
button{
  font-family: $font-family-base;
  cursor: pointer;
}
textarea, input, select{
  font-family: $font-family-base;
}
*/
::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  color: #888888; }

::-moz-placeholder {
  /* Firefox 19+ */
  color: #888888; }

:-ms-input-placeholder {
  /* IE 10+ */
  color: #888888; }

:-moz-placeholder {
  /* Firefox 18- */
  color: #888888; }

/*
button, input, textarea {
  transition: all 200ms ease;
}

input[type="text"] {
  outline: 0;
  border: 0;
}

input[type="text"], textarea {
  border-radius: 2px;
}
*/
.bebo-btn {
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 1px;
  display: inline-block;
  color: #ffffff;
  text-align: center;
  background-color: #2c3032;
  cursor: pointer;
  -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
          box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
  height: 2.66667rem;
  padding: 0.73333rem 1.6rem;
  -webkit-transition: all 200ms ease;
  -o-transition: all 200ms ease;
  transition: all 200ms ease;
  border-radius: 1.33333rem; }
  .bebo-btn:hover {
    color: #1d2123;
    background-color: #fdc20a;
    text-decoration: none; }
  .bebo-btn.loading {
    background-size: 1.06667rem;
    background-repeat: no-repeat;
    background-position: center;
    text-indent: -999999;
    overflow: hidden;
    color: transparent; }
    .bebo-btn.loading:hover {
      background-color: #ffffff;
      color: transparent;
      border: 1px solid #dddddd; }
  .bebo-btn.disabled {
    background: #eeeeee;
    color: #eeeeee;
    border: 1px solid #dddddd; }
    .bebo-btn.disabled:hover {
      background: #eeeeee;
      color: #eeeeee;
      border: 1px solid #dddddd; }
  .bebo-btn.text-button {
    text-transform: none;
    background: none;
    border: 0;
    color: #b1b1b1;
    font-weight: 400;
    height: auto;
    margin: 1.33333rem auto; }
    .bebo-btn.text-button:hover {
      background: none;
      color: #FDC823; }

.bebo-btn, .user-avatar, .community-avatar {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center; }

.user-avatar {
  background-size: cover;
  height: 1.6rem;
  width: 1.6rem;
  border-radius: 50%;
  background-color: #5d5e6b; }

.community-avatar {
  background-size: cover;
  height: 3.33333rem;
  width: 3.33333rem;
  background-color: #5d5e6b; }

/*body,
html {
  color: $color-white;
}*/
.toast-banner {
  position: absolute;
  z-index: 101;
  top: 0;
  left: 0;
  right: 0;
  background: red;
  text-align: center;
  line-height: 2.5;
  overflow: hidden;
  -webkit-box-shadow: 0 0 5px black;
  box-shadow: 0 0 5px black; }

@-webkit-keyframes slideDown {
  0%,
  100% {
    -webkit-transform: translateY(-50px); }
  10%,
  90% {
    -webkit-transform: translateY(0px); } }

.panel-collection__header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  width: 100%;
  margin: 0 0 1rem 0; }

.panel-collection__header--title {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  font-size: 0.93333rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.86); }

.panel-collection__header--subtitle {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  font-size: 0.8rem;
  font-weight: 400;
  color: #686868;
  margin-top: 0.46667rem; }

.panel-collection__header--action {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto; }

.panel-collection__header {
  color: white;
  font-weight: 600; }
.wrapper {
  display: -moz-flex;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -webkit-box-lines: single;
  -moz-box-lines: single;
  box-lines: single;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-box-align: center;
  box-align: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -o-align-items: center;
  align-items: center;
  -ms-flex-align: center; }

.bebo-btn {
  display: -moz-flex;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
  box-pack: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  -o-justify-content: center;
  justify-content: center;
  -ms-flex-pack: center;
  -webkit-box-align: center;
  box-align: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -o-align-items: center;
  align-items: center;
  -ms-flex-align: center;
  align-content: center;
  -ms-flex-line-pack: center; }

/*
body, html {
  overflow:hidden;
  height:100%;
  min-height: inherit;
  position:fixed;
  width:100%;
  top:0;
  left:0;
}
*/
.wrapper {
  max-width: 80rem;
  margin: 0 auto;
  padding: 0 1.33333rem; }

.wrapper {
  display: -moz-flex;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -webkit-box-lines: single;
  -moz-box-lines: single;
  box-lines: single;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-box-align: center;
  box-align: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -o-align-items: center;
  align-items: center;
  -ms-flex-align: center; }

.bebo-btn {
  display: -moz-flex;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
  box-pack: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  -o-justify-content: center;
  justify-content: center;
  -ms-flex-pack: center;
  -webkit-box-align: center;
  box-align: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -o-align-items: center;
  align-items: center;
  -ms-flex-align: center;
  align-content: center;
  -ms-flex-line-pack: center; }

/*
body, html {
  overflow:hidden;
  height:100%;
  min-height: inherit;
  position:fixed;
  width:100%;
  top:0;
  left:0;
}
*/
.wrapper {
  max-width: 80rem;
  margin: 0 auto;
  padding: 0 1.33333rem; }

.bebo-btn, .bebo-btn.text-button {
  font-size: 0.93333rem;
  line-height: 1.26667rem; }

/*
html, body {
  font-size: $font-size;
  line-height: 1.25;
  font-family: $font-family-base;
  font-weight: 400;
  word-wrap: break-word;
  color: $color-black;
  hyphens: auto;
}

%hero {
  @extend %font-size-huge;
  font-weight: 500;
  color: $color-brand;
}
h1 {
  @extend %font-size-x-large;
  font-weight: 300;
}
h2 {
  @extend %font-size-large;
  font-weight: 300;
}
h3 {
  @extend %font-size-medium;
  font-weight: 600;
}
h4 {
  @extend %font-size-medium;
  font-weight: 400;
  color: $color-grey4;
}
h5 {
  @extend %font-size-small;
  font-weight: 900;
  letter-spacing: 0.5px;
  color: $color-grey5;
}
p {
  @extend %font-size-default;
  font-weight: 400;
}
small {
  @extend %font-size-small;
}
a {
  color: #a0a0a0;
  cursor: pointer;
  text-decoration: none;
  &:hover {
    color: #ffffff;
  }
  @include transition(all .2s);
}
em, .em {
  font-style: italic;
}
strong, .strong {
  font-weight: bold;
}
button{
  font-family: $font-family-base;
  cursor: pointer;
}
textarea, input, select{
  font-family: $font-family-base;
}
*/
::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  color: #888888; }

::-moz-placeholder {
  /* Firefox 19+ */
  color: #888888; }

:-ms-input-placeholder {
  /* IE 10+ */
  color: #888888; }

:-moz-placeholder {
  /* Firefox 18- */
  color: #888888; }

/*
button, input, textarea {
  transition: all 200ms ease;
}

input[type="text"] {
  outline: 0;
  border: 0;
}

input[type="text"], textarea {
  border-radius: 2px;
}
*/
.bebo-btn {
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 1px;
  display: inline-block;
  color: #ffffff;
  text-align: center;
  background-color: #2c3032;
  cursor: pointer;
  -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
          box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
  height: 2.66667rem;
  padding: 0.73333rem 1.6rem;
  -webkit-transition: all 200ms ease;
  -o-transition: all 200ms ease;
  transition: all 200ms ease;
  border-radius: 1.33333rem; }
  .bebo-btn:hover {
    color: #1d2123;
    background-color: #fdc20a;
    text-decoration: none; }
  .bebo-btn.loading {
    background-size: 1.06667rem;
    background-repeat: no-repeat;
    background-position: center;
    text-indent: -999999;
    overflow: hidden;
    color: transparent; }
    .bebo-btn.loading:hover {
      background-color: #ffffff;
      color: transparent;
      border: 1px solid #dddddd; }
  .bebo-btn.disabled {
    background: #eeeeee;
    color: #eeeeee;
    border: 1px solid #dddddd; }
    .bebo-btn.disabled:hover {
      background: #eeeeee;
      color: #eeeeee;
      border: 1px solid #dddddd; }
  .bebo-btn.text-button {
    text-transform: none;
    background: none;
    border: 0;
    color: #b1b1b1;
    font-weight: 400;
    height: auto;
    margin: 1.33333rem auto; }
    .bebo-btn.text-button:hover {
      background: none;
      color: #FDC823; }

.bebo-btn, .user-avatar, .community-avatar {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center; }

.user-avatar {
  background-size: cover;
  height: 1.6rem;
  width: 1.6rem;
  border-radius: 50%;
  background-color: #5d5e6b; }

.community-avatar {
  background-size: cover;
  height: 3.33333rem;
  width: 3.33333rem;
  background-color: #5d5e6b; }

/*body,
html {
  color: $color-white;
}*/
.toast-banner {
  position: absolute;
  z-index: 101;
  top: 0;
  left: 0;
  right: 0;
  background: red;
  text-align: center;
  line-height: 2.5;
  overflow: hidden;
  -webkit-box-shadow: 0 0 5px black;
  box-shadow: 0 0 5px black; }

@-webkit-keyframes slideDown {
  0%,
  100% {
    -webkit-transform: translateY(-50px); }
  10%,
  90% {
    -webkit-transform: translateY(0px); } }

.panel-collection {
  width: 100%;
  position: relative;
  background-color: none;
  padding: 1rem 1rem 0 1rem; }
  .panel-collection:last-of-type {
    margin-bottom: 1.33333rem;
    border-bottom: 0; }

.panel-collection.m-wrapper {
  padding: 0;
  overflow: hidden; }
  .panel-collection.m-wrapper:last-of-type {
    margin-bottom: 0; }

.panel-collection.disabled {
  opacity: 0.15;
  pointer-events: none; }

.panel-collection__header {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto; }

.panel-collection__content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column; }

.panel-collection.is-grid .panel-collection__content,
.panel-collection.is-grid .panel-collection__content > div {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -ms-flex-line-pack: start;
      align-content: flex-start;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%; }
  .panel-collection.is-grid .panel-collection__content .panel-item,
  .panel-collection.is-grid .panel-collection__content > div .panel-item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 48%;
    margin-bottom: 0.66667rem;
    margin-top: 0;
    display: inline-block; }
  .panel-collection.is-grid .panel-collection__content .panel-item.col-1-1,
  .panel-collection.is-grid .panel-collection__content > div .panel-item.col-1-1 {
    width: 100%; }
  .panel-collection.is-grid .panel-collection__content .panel-item.col-1-3,
  .panel-collection.is-grid .panel-collection__content > div .panel-item.col-1-3 {
    width: 33%; }

.panel-item.col-1-2 {
  width: 50%; }

.panel-item.col-1-1 {
  width: 100%; }

.panel-item.col-1-3 {
  width: 33%; }

.panel-collection__content--note {
  font-size: 0.8rem;
  color: #a0a0a0;
  font-weight: 400; }
.wrapper {
  display: -moz-flex;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -webkit-box-lines: single;
  -moz-box-lines: single;
  box-lines: single;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-box-align: center;
  box-align: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -o-align-items: center;
  align-items: center;
  -ms-flex-align: center; }

.bebo-btn {
  display: -moz-flex;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
  box-pack: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  -o-justify-content: center;
  justify-content: center;
  -ms-flex-pack: center;
  -webkit-box-align: center;
  box-align: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -o-align-items: center;
  align-items: center;
  -ms-flex-align: center;
  align-content: center;
  -ms-flex-line-pack: center; }

/*
body, html {
  overflow:hidden;
  height:100%;
  min-height: inherit;
  position:fixed;
  width:100%;
  top:0;
  left:0;
}
*/
.wrapper {
  max-width: 80rem;
  margin: 0 auto;
  padding: 0 1.33333rem; }

.wrapper {
  display: -moz-flex;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -webkit-box-lines: single;
  -moz-box-lines: single;
  box-lines: single;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-box-align: center;
  box-align: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -o-align-items: center;
  align-items: center;
  -ms-flex-align: center; }

.bebo-btn {
  display: -moz-flex;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
  box-pack: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  -o-justify-content: center;
  justify-content: center;
  -ms-flex-pack: center;
  -webkit-box-align: center;
  box-align: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -o-align-items: center;
  align-items: center;
  -ms-flex-align: center;
  align-content: center;
  -ms-flex-line-pack: center; }

/*
body, html {
  overflow:hidden;
  height:100%;
  min-height: inherit;
  position:fixed;
  width:100%;
  top:0;
  left:0;
}
*/
.wrapper {
  max-width: 80rem;
  margin: 0 auto;
  padding: 0 1.33333rem; }

.bebo-btn, .bebo-btn.text-button {
  font-size: 0.93333rem;
  line-height: 1.26667rem; }

/*
html, body {
  font-size: $font-size;
  line-height: 1.25;
  font-family: $font-family-base;
  font-weight: 400;
  word-wrap: break-word;
  color: $color-black;
  hyphens: auto;
}

%hero {
  @extend %font-size-huge;
  font-weight: 500;
  color: $color-brand;
}
h1 {
  @extend %font-size-x-large;
  font-weight: 300;
}
h2 {
  @extend %font-size-large;
  font-weight: 300;
}
h3 {
  @extend %font-size-medium;
  font-weight: 600;
}
h4 {
  @extend %font-size-medium;
  font-weight: 400;
  color: $color-grey4;
}
h5 {
  @extend %font-size-small;
  font-weight: 900;
  letter-spacing: 0.5px;
  color: $color-grey5;
}
p {
  @extend %font-size-default;
  font-weight: 400;
}
small {
  @extend %font-size-small;
}
a {
  color: #a0a0a0;
  cursor: pointer;
  text-decoration: none;
  &:hover {
    color: #ffffff;
  }
  @include transition(all .2s);
}
em, .em {
  font-style: italic;
}
strong, .strong {
  font-weight: bold;
}
button{
  font-family: $font-family-base;
  cursor: pointer;
}
textarea, input, select{
  font-family: $font-family-base;
}
*/
::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  color: #888888; }

::-moz-placeholder {
  /* Firefox 19+ */
  color: #888888; }

:-ms-input-placeholder {
  /* IE 10+ */
  color: #888888; }

:-moz-placeholder {
  /* Firefox 18- */
  color: #888888; }

/*
button, input, textarea {
  transition: all 200ms ease;
}

input[type="text"] {
  outline: 0;
  border: 0;
}

input[type="text"], textarea {
  border-radius: 2px;
}
*/
.bebo-btn {
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 1px;
  display: inline-block;
  color: #ffffff;
  text-align: center;
  background-color: #2c3032;
  cursor: pointer;
  -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
          box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
  height: 2.66667rem;
  padding: 0.73333rem 1.6rem;
  -webkit-transition: all 200ms ease;
  -o-transition: all 200ms ease;
  transition: all 200ms ease;
  border-radius: 1.33333rem; }
  .bebo-btn:hover {
    color: #1d2123;
    background-color: #fdc20a;
    text-decoration: none; }
  .bebo-btn.loading {
    background-size: 1.06667rem;
    background-repeat: no-repeat;
    background-position: center;
    text-indent: -999999;
    overflow: hidden;
    color: transparent; }
    .bebo-btn.loading:hover {
      background-color: #ffffff;
      color: transparent;
      border: 1px solid #dddddd; }
  .bebo-btn.disabled {
    background: #eeeeee;
    color: #eeeeee;
    border: 1px solid #dddddd; }
    .bebo-btn.disabled:hover {
      background: #eeeeee;
      color: #eeeeee;
      border: 1px solid #dddddd; }
  .bebo-btn.text-button {
    text-transform: none;
    background: none;
    border: 0;
    color: #b1b1b1;
    font-weight: 400;
    height: auto;
    margin: 1.33333rem auto; }
    .bebo-btn.text-button:hover {
      background: none;
      color: #FDC823; }

.bebo-btn, .user-avatar, .community-avatar {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center; }

.user-avatar {
  background-size: cover;
  height: 1.6rem;
  width: 1.6rem;
  border-radius: 50%;
  background-color: #5d5e6b; }

.community-avatar {
  background-size: cover;
  height: 3.33333rem;
  width: 3.33333rem;
  background-color: #5d5e6b; }

/*body,
html {
  color: $color-white;
}*/
.toast-banner {
  position: absolute;
  z-index: 101;
  top: 0;
  left: 0;
  right: 0;
  background: red;
  text-align: center;
  line-height: 2.5;
  overflow: hidden;
  -webkit-box-shadow: 0 0 5px black;
  box-shadow: 0 0 5px black; }

@-webkit-keyframes slideDown {
  0%,
  100% {
    -webkit-transform: translateY(-50px); }
  10%,
  90% {
    -webkit-transform: translateY(0px); } }

.card-button {
  width: 100%;
  cursor: pointer;
  -webkit-transition: all 0.2s ease-in;
  -o-transition: all 0.2s ease-in;
  transition: all 0.2s ease-in;
  -webkit-box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.15);
          box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.15);
  opacity: 0.85;
  -webkit-transition: all 200ms ease;
  -o-transition: all 200ms ease;
  transition: all 200ms ease;
  height: 6rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 0px 20px; }

.card-button:hover {
  opacity: 1;
  -webkit-box-shadow: 0px 2px 20px px rgba(0, 0, 0, 0.25);
          box-shadow: 0px 2px 20px px rgba(0, 0, 0, 0.25); }
  .card-button:hover .card-button__sub-text {
    opacity: 1;
    height: auto; }

.card-button__meta {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column; }

.card-button__text {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  text-align: center;
  font-size: 0.93333rem;
  color: #fff;
  font-weight: 600;
  display: block;
  margin: 0 auto;
  -webkit-transition: all 200ms ease;
  -o-transition: all 200ms ease;
  transition: all 200ms ease; }

.card-button__sub-text {
  height: 0px;
  margin-top: 0.46667rem;
  color: #a0a0a0;
  font-size: 0.8rem;
  font-weight: 400;
  max-width: 13.33333rem;
  opacity: 0;
  -webkit-transition: all 200ms ease;
  -o-transition: all 200ms ease;
  transition: all 200ms ease; }

.card-button__icon {
  max-height: 31px;
  height: 100%;
  width: auto;
  max-width: 100%;
  -o-object-fit: contain;
     object-fit: contain; }
.wrapper {
  display: -moz-flex;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -webkit-box-lines: single;
  -moz-box-lines: single;
  box-lines: single;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-box-align: center;
  box-align: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -o-align-items: center;
  align-items: center;
  -ms-flex-align: center; }

.bebo-btn {
  display: -moz-flex;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
  box-pack: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  -o-justify-content: center;
  justify-content: center;
  -ms-flex-pack: center;
  -webkit-box-align: center;
  box-align: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -o-align-items: center;
  align-items: center;
  -ms-flex-align: center;
  align-content: center;
  -ms-flex-line-pack: center; }

/*
body, html {
  overflow:hidden;
  height:100%;
  min-height: inherit;
  position:fixed;
  width:100%;
  top:0;
  left:0;
}
*/
.wrapper {
  max-width: 80rem;
  margin: 0 auto;
  padding: 0 1.33333rem; }

.wrapper {
  display: -moz-flex;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -webkit-box-lines: single;
  -moz-box-lines: single;
  box-lines: single;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-box-align: center;
  box-align: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -o-align-items: center;
  align-items: center;
  -ms-flex-align: center; }

.bebo-btn {
  display: -moz-flex;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
  box-pack: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  -o-justify-content: center;
  justify-content: center;
  -ms-flex-pack: center;
  -webkit-box-align: center;
  box-align: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -o-align-items: center;
  align-items: center;
  -ms-flex-align: center;
  align-content: center;
  -ms-flex-line-pack: center; }

/*
body, html {
  overflow:hidden;
  height:100%;
  min-height: inherit;
  position:fixed;
  width:100%;
  top:0;
  left:0;
}
*/
.wrapper {
  max-width: 80rem;
  margin: 0 auto;
  padding: 0 1.33333rem; }

.bebo-btn, .bebo-btn.text-button {
  font-size: 0.93333rem;
  line-height: 1.26667rem; }

/*
html, body {
  font-size: $font-size;
  line-height: 1.25;
  font-family: $font-family-base;
  font-weight: 400;
  word-wrap: break-word;
  color: $color-black;
  hyphens: auto;
}

%hero {
  @extend %font-size-huge;
  font-weight: 500;
  color: $color-brand;
}
h1 {
  @extend %font-size-x-large;
  font-weight: 300;
}
h2 {
  @extend %font-size-large;
  font-weight: 300;
}
h3 {
  @extend %font-size-medium;
  font-weight: 600;
}
h4 {
  @extend %font-size-medium;
  font-weight: 400;
  color: $color-grey4;
}
h5 {
  @extend %font-size-small;
  font-weight: 900;
  letter-spacing: 0.5px;
  color: $color-grey5;
}
p {
  @extend %font-size-default;
  font-weight: 400;
}
small {
  @extend %font-size-small;
}
a {
  color: #a0a0a0;
  cursor: pointer;
  text-decoration: none;
  &:hover {
    color: #ffffff;
  }
  @include transition(all .2s);
}
em, .em {
  font-style: italic;
}
strong, .strong {
  font-weight: bold;
}
button{
  font-family: $font-family-base;
  cursor: pointer;
}
textarea, input, select{
  font-family: $font-family-base;
}
*/
::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  color: #888888; }

::-moz-placeholder {
  /* Firefox 19+ */
  color: #888888; }

:-ms-input-placeholder {
  /* IE 10+ */
  color: #888888; }

:-moz-placeholder {
  /* Firefox 18- */
  color: #888888; }

/*
button, input, textarea {
  transition: all 200ms ease;
}

input[type="text"] {
  outline: 0;
  border: 0;
}

input[type="text"], textarea {
  border-radius: 2px;
}
*/
.bebo-btn {
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 1px;
  display: inline-block;
  color: #ffffff;
  text-align: center;
  background-color: #2c3032;
  cursor: pointer;
  -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
          box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
  height: 2.66667rem;
  padding: 0.73333rem 1.6rem;
  -webkit-transition: all 200ms ease;
  -o-transition: all 200ms ease;
  transition: all 200ms ease;
  border-radius: 1.33333rem; }
  .bebo-btn:hover {
    color: #1d2123;
    background-color: #fdc20a;
    text-decoration: none; }
  .bebo-btn.loading {
    background-size: 1.06667rem;
    background-repeat: no-repeat;
    background-position: center;
    text-indent: -999999;
    overflow: hidden;
    color: transparent; }
    .bebo-btn.loading:hover {
      background-color: #ffffff;
      color: transparent;
      border: 1px solid #dddddd; }
  .bebo-btn.disabled {
    background: #eeeeee;
    color: #eeeeee;
    border: 1px solid #dddddd; }
    .bebo-btn.disabled:hover {
      background: #eeeeee;
      color: #eeeeee;
      border: 1px solid #dddddd; }
  .bebo-btn.text-button {
    text-transform: none;
    background: none;
    border: 0;
    color: #b1b1b1;
    font-weight: 400;
    height: auto;
    margin: 1.33333rem auto; }
    .bebo-btn.text-button:hover {
      background: none;
      color: #FDC823; }

.bebo-btn, .user-avatar, .community-avatar {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center; }

.user-avatar {
  background-size: cover;
  height: 1.6rem;
  width: 1.6rem;
  border-radius: 50%;
  background-color: #5d5e6b; }

.community-avatar {
  background-size: cover;
  height: 3.33333rem;
  width: 3.33333rem;
  background-color: #5d5e6b; }

/*body,
html {
  color: $color-white;
}*/
.toast-banner {
  position: absolute;
  z-index: 101;
  top: 0;
  left: 0;
  right: 0;
  background: red;
  text-align: center;
  line-height: 2.5;
  overflow: hidden;
  -webkit-box-shadow: 0 0 5px black;
  box-shadow: 0 0 5px black; }

@-webkit-keyframes slideDown {
  0%,
  100% {
    -webkit-transform: translateY(-50px); }
  10%,
  90% {
    -webkit-transform: translateY(0px); } }

.panel-header {
  width: 100%;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding-right: 5px;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 1.2rem 1.33333rem 1.33333rem 1.33333rem;
  border-bottom: 1px solid #171717;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto; }

.panel-header__meta {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -ms-flex-line-pack: center;
      align-content: center; }

.panel-header__meta--btn {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: 1.6rem;
  height: 1.6rem;
  position: relative;
  left: -0.4rem; }
  .panel-header__meta--btn svg * {
    fill: #fff; }

.panel-header__meta--text {
  color: white;
  font-weight: 600;
  display: block;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  font-size: 1.2rem; }

.panel-header__description {
  font-size: 0.8rem;
  font-weight: 400;
  color: #686868;
  line-height: 1.5;
  margin-top: 0.33333rem; }
.dashboard--panel {
  width: 70vw;
  height: 70vh;
  width: 100%;
  -webkit-transition: height 300ms ease;
  -o-transition: height 300ms ease;
  transition: height 300ms ease;
  margin: 30px 0; }

.panel-sidebar {
  max-width: 700px;
  margin-top: 0;
  margin-bottom: 0; }
.wrapper {
  display: -moz-flex;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -webkit-box-lines: single;
  -moz-box-lines: single;
  box-lines: single;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-box-align: center;
  box-align: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -o-align-items: center;
  align-items: center;
  -ms-flex-align: center; }

.bebo-btn {
  display: -moz-flex;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
  box-pack: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  -o-justify-content: center;
  justify-content: center;
  -ms-flex-pack: center;
  -webkit-box-align: center;
  box-align: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -o-align-items: center;
  align-items: center;
  -ms-flex-align: center;
  align-content: center;
  -ms-flex-line-pack: center; }

/*
body, html {
  overflow:hidden;
  height:100%;
  min-height: inherit;
  position:fixed;
  width:100%;
  top:0;
  left:0;
}
*/
.wrapper {
  max-width: 80rem;
  margin: 0 auto;
  padding: 0 1.33333rem; }

.wrapper {
  display: -moz-flex;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -webkit-box-lines: single;
  -moz-box-lines: single;
  box-lines: single;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-box-align: center;
  box-align: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -o-align-items: center;
  align-items: center;
  -ms-flex-align: center; }

.bebo-btn {
  display: -moz-flex;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
  box-pack: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  -o-justify-content: center;
  justify-content: center;
  -ms-flex-pack: center;
  -webkit-box-align: center;
  box-align: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -o-align-items: center;
  align-items: center;
  -ms-flex-align: center;
  align-content: center;
  -ms-flex-line-pack: center; }

/*
body, html {
  overflow:hidden;
  height:100%;
  min-height: inherit;
  position:fixed;
  width:100%;
  top:0;
  left:0;
}
*/
.wrapper {
  max-width: 80rem;
  margin: 0 auto;
  padding: 0 1.33333rem; }

.bebo-btn, .bebo-btn.text-button {
  font-size: 0.93333rem;
  line-height: 1.26667rem; }

/*
html, body {
  font-size: $font-size;
  line-height: 1.25;
  font-family: $font-family-base;
  font-weight: 400;
  word-wrap: break-word;
  color: $color-black;
  hyphens: auto;
}

%hero {
  @extend %font-size-huge;
  font-weight: 500;
  color: $color-brand;
}
h1 {
  @extend %font-size-x-large;
  font-weight: 300;
}
h2 {
  @extend %font-size-large;
  font-weight: 300;
}
h3 {
  @extend %font-size-medium;
  font-weight: 600;
}
h4 {
  @extend %font-size-medium;
  font-weight: 400;
  color: $color-grey4;
}
h5 {
  @extend %font-size-small;
  font-weight: 900;
  letter-spacing: 0.5px;
  color: $color-grey5;
}
p {
  @extend %font-size-default;
  font-weight: 400;
}
small {
  @extend %font-size-small;
}
a {
  color: #a0a0a0;
  cursor: pointer;
  text-decoration: none;
  &:hover {
    color: #ffffff;
  }
  @include transition(all .2s);
}
em, .em {
  font-style: italic;
}
strong, .strong {
  font-weight: bold;
}
button{
  font-family: $font-family-base;
  cursor: pointer;
}
textarea, input, select{
  font-family: $font-family-base;
}
*/
::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  color: #888888; }

::-moz-placeholder {
  /* Firefox 19+ */
  color: #888888; }

:-ms-input-placeholder {
  /* IE 10+ */
  color: #888888; }

:-moz-placeholder {
  /* Firefox 18- */
  color: #888888; }

/*
button, input, textarea {
  transition: all 200ms ease;
}

input[type="text"] {
  outline: 0;
  border: 0;
}

input[type="text"], textarea {
  border-radius: 2px;
}
*/
.bebo-btn {
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 1px;
  display: inline-block;
  color: #ffffff;
  text-align: center;
  background-color: #2c3032;
  cursor: pointer;
  -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
          box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
  height: 2.66667rem;
  padding: 0.73333rem 1.6rem;
  -webkit-transition: all 200ms ease;
  -o-transition: all 200ms ease;
  transition: all 200ms ease;
  border-radius: 1.33333rem; }
  .bebo-btn:hover {
    color: #1d2123;
    background-color: #fdc20a;
    text-decoration: none; }
  .bebo-btn.loading {
    background-size: 1.06667rem;
    background-repeat: no-repeat;
    background-position: center;
    text-indent: -999999;
    overflow: hidden;
    color: transparent; }
    .bebo-btn.loading:hover {
      background-color: #ffffff;
      color: transparent;
      border: 1px solid #dddddd; }
  .bebo-btn.disabled {
    background: #eeeeee;
    color: #eeeeee;
    border: 1px solid #dddddd; }
    .bebo-btn.disabled:hover {
      background: #eeeeee;
      color: #eeeeee;
      border: 1px solid #dddddd; }
  .bebo-btn.text-button {
    text-transform: none;
    background: none;
    border: 0;
    color: #b1b1b1;
    font-weight: 400;
    height: auto;
    margin: 1.33333rem auto; }
    .bebo-btn.text-button:hover {
      background: none;
      color: #FDC823; }

.bebo-btn, .user-avatar, .community-avatar {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center; }

.user-avatar {
  background-size: cover;
  height: 1.6rem;
  width: 1.6rem;
  border-radius: 50%;
  background-color: #5d5e6b; }

.community-avatar {
  background-size: cover;
  height: 3.33333rem;
  width: 3.33333rem;
  background-color: #5d5e6b; }

/*body,
html {
  color: $color-white;
}*/
.toast-banner {
  position: absolute;
  z-index: 101;
  top: 0;
  left: 0;
  right: 0;
  background: red;
  text-align: center;
  line-height: 2.5;
  overflow: hidden;
  -webkit-box-shadow: 0 0 5px black;
  box-shadow: 0 0 5px black; }

@-webkit-keyframes slideDown {
  0%,
  100% {
    -webkit-transform: translateY(-50px); }
  10%,
  90% {
    -webkit-transform: translateY(0px); } }

.modal {
  position: fixed;
  top: 3.33333rem;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transition: all 0.2s ease-in-and-out;
  -o-transition: all 0.2s ease-in-and-out;
  transition: all 0.2s ease-in-and-out;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0); }

.app-root--modal {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0; }

.modal__close {
  height: 40px;
  width: 40px;
  background-color: rgba(255, 255, 255, 0.4);
  border-radius: 50% !important;
  position: absolute;
  left: 20px;
  top: 60px;
  z-index: 10;
  -webkit-transition: all 0s ease;
  -o-transition: all 0s ease;
  transition: all 0s ease;
  -webkit-transition: opacity 0.2s eaes-in;
  -o-transition: opacity 0.2s eaes-in;
  transition: opacity 0.2s eaes-in;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center; }

.modal__close svg {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto; }

.modal.sidebar {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse; }

.modal.sidebar.is-closed .modal__container {
  -webkit-transform: translate3d(-100%, 0, 0);
          transform: translate3d(-100%, 0, 0); }

.modal.sidebar.is-closed .modal__preview {
  -webkit-transform: scale(0.8);
      -ms-transform: scale(0.8);
          transform: scale(0.8);
  opacity: 0; }

.modal__container {
  position: relative;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  -ms-flex-preferred-size: 20%;
      flex-basis: 20%;
  -ms-flex-negative: 1;
      flex-shrink: 1;
  min-width: 220px;
  max-width: 260px;
  background: #151515;
  z-index: 3;
  height: 100vh;
  -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
          order: 1;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out; }

.modal__container--gradient {
  height: 200px;
  width: 100%;
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(24, 24, 24, 0)), to(#181818));
  background-image: -webkit-linear-gradient(top, rgba(24, 24, 24, 0) 0%, #181818 100%);
  background-image: -o-linear-gradient(top, rgba(24, 24, 24, 0) 0%, #181818 100%);
  background-image: linear-gradient(-180deg, rgba(24, 24, 24, 0) 0%, #181818 100%);
  position: absolute;
  left: 0;
  bottom: 0;
  pointer-events: none; }

.modal__panel {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  margin: 0; }

.modal__preview {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  z-index: 2;
  height: 100%;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  opacity: 1;
  -webkit-transform: scale(1);
      -ms-transform: scale(1);
          transform: scale(1);
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out; }

.Preview--layer {
  width: 90%;
  position: relative;
  display: relative; }
  .Preview--layer:before {
    display: block;
    content: "";
    width: 100%;
    padding-top: 56.25%; }
  .Preview--layer > .content {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0; }

.Preview--layer__wrapper {
  width: 100%;
  height: 100%;
  position: absolute;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  top: 0;
  left: 0; }

.Preview--layer__item {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  background-color: #000;
  overflow: hidden;
  position: relative;
  border-radius: 2px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background-color: #121212; }

.Preview--media__video {
  display: block;
  height: 100%;
  width: auto; }

.Preview--media__comingsoon {
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  color: #fff;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  align-item: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center; }

.Preview--media__comingsoon--header {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  text-align: center;
  font-size: 20px;
  display: block;
  opacity: 0.5; }

.Preview--media__comingsoon--subheader {
  margin-top: 20px;
  font-size: 13px;
  text-align: center;
  display: block;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  opacity: 0.3; }

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 1;
  background-color: rgba(0, 0, 0, 0.85); }
.wrapper {
  display: -moz-flex;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -webkit-box-lines: single;
  -moz-box-lines: single;
  box-lines: single;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-box-align: center;
  box-align: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -o-align-items: center;
  align-items: center;
  -ms-flex-align: center; }

.bebo-btn {
  display: -moz-flex;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
  box-pack: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  -o-justify-content: center;
  justify-content: center;
  -ms-flex-pack: center;
  -webkit-box-align: center;
  box-align: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -o-align-items: center;
  align-items: center;
  -ms-flex-align: center;
  align-content: center;
  -ms-flex-line-pack: center; }

/*
body, html {
  overflow:hidden;
  height:100%;
  min-height: inherit;
  position:fixed;
  width:100%;
  top:0;
  left:0;
}
*/
.wrapper {
  max-width: 80rem;
  margin: 0 auto;
  padding: 0 1.33333rem; }

.wrapper {
  display: -moz-flex;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -webkit-box-lines: single;
  -moz-box-lines: single;
  box-lines: single;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-box-align: center;
  box-align: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -o-align-items: center;
  align-items: center;
  -ms-flex-align: center; }

.bebo-btn {
  display: -moz-flex;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
  box-pack: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  -o-justify-content: center;
  justify-content: center;
  -ms-flex-pack: center;
  -webkit-box-align: center;
  box-align: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -o-align-items: center;
  align-items: center;
  -ms-flex-align: center;
  align-content: center;
  -ms-flex-line-pack: center; }

/*
body, html {
  overflow:hidden;
  height:100%;
  min-height: inherit;
  position:fixed;
  width:100%;
  top:0;
  left:0;
}
*/
.wrapper {
  max-width: 80rem;
  margin: 0 auto;
  padding: 0 1.33333rem; }

.bebo-btn, .bebo-btn.text-button {
  font-size: 0.93333rem;
  line-height: 1.26667rem; }

/*
html, body {
  font-size: $font-size;
  line-height: 1.25;
  font-family: $font-family-base;
  font-weight: 400;
  word-wrap: break-word;
  color: $color-black;
  hyphens: auto;
}

%hero {
  @extend %font-size-huge;
  font-weight: 500;
  color: $color-brand;
}
h1 {
  @extend %font-size-x-large;
  font-weight: 300;
}
h2 {
  @extend %font-size-large;
  font-weight: 300;
}
h3 {
  @extend %font-size-medium;
  font-weight: 600;
}
h4 {
  @extend %font-size-medium;
  font-weight: 400;
  color: $color-grey4;
}
h5 {
  @extend %font-size-small;
  font-weight: 900;
  letter-spacing: 0.5px;
  color: $color-grey5;
}
p {
  @extend %font-size-default;
  font-weight: 400;
}
small {
  @extend %font-size-small;
}
a {
  color: #a0a0a0;
  cursor: pointer;
  text-decoration: none;
  &:hover {
    color: #ffffff;
  }
  @include transition(all .2s);
}
em, .em {
  font-style: italic;
}
strong, .strong {
  font-weight: bold;
}
button{
  font-family: $font-family-base;
  cursor: pointer;
}
textarea, input, select{
  font-family: $font-family-base;
}
*/
::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  color: #888888; }

::-moz-placeholder {
  /* Firefox 19+ */
  color: #888888; }

:-ms-input-placeholder {
  /* IE 10+ */
  color: #888888; }

:-moz-placeholder {
  /* Firefox 18- */
  color: #888888; }

/*
button, input, textarea {
  transition: all 200ms ease;
}

input[type="text"] {
  outline: 0;
  border: 0;
}

input[type="text"], textarea {
  border-radius: 2px;
}
*/
.bebo-btn {
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 1px;
  display: inline-block;
  color: #ffffff;
  text-align: center;
  background-color: #2c3032;
  cursor: pointer;
  -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
          box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
  height: 2.66667rem;
  padding: 0.73333rem 1.6rem;
  -webkit-transition: all 200ms ease;
  -o-transition: all 200ms ease;
  transition: all 200ms ease;
  border-radius: 1.33333rem; }
  .bebo-btn:hover {
    color: #1d2123;
    background-color: #fdc20a;
    text-decoration: none; }
  .bebo-btn.loading {
    background-size: 1.06667rem;
    background-repeat: no-repeat;
    background-position: center;
    text-indent: -999999;
    overflow: hidden;
    color: transparent; }
    .bebo-btn.loading:hover {
      background-color: #ffffff;
      color: transparent;
      border: 1px solid #dddddd; }
  .bebo-btn.disabled {
    background: #eeeeee;
    color: #eeeeee;
    border: 1px solid #dddddd; }
    .bebo-btn.disabled:hover {
      background: #eeeeee;
      color: #eeeeee;
      border: 1px solid #dddddd; }
  .bebo-btn.text-button {
    text-transform: none;
    background: none;
    border: 0;
    color: #b1b1b1;
    font-weight: 400;
    height: auto;
    margin: 1.33333rem auto; }
    .bebo-btn.text-button:hover {
      background: none;
      color: #FDC823; }

.bebo-btn, .user-avatar, .community-avatar {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center; }

.user-avatar {
  background-size: cover;
  height: 1.6rem;
  width: 1.6rem;
  border-radius: 50%;
  background-color: #5d5e6b; }

.community-avatar {
  background-size: cover;
  height: 3.33333rem;
  width: 3.33333rem;
  background-color: #5d5e6b; }

/*body,
html {
  color: $color-white;
}*/
.toast-banner {
  position: absolute;
  z-index: 101;
  top: 0;
  left: 0;
  right: 0;
  background: red;
  text-align: center;
  line-height: 2.5;
  overflow: hidden;
  -webkit-box-shadow: 0 0 5px black;
  box-shadow: 0 0 5px black; }

@-webkit-keyframes slideDown {
  0%,
  100% {
    -webkit-transform: translateY(-50px); }
  10%,
  90% {
    -webkit-transform: translateY(0px); } }

.form-toggle {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column; }

.form-toggle.inline-label {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between; }

.form-toggle.inline-label .form-toggle__label {
  display: inline-block;
  margin-bottom: 0;
  width: auto; }

.form-toggle__label {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  text-align: left;
  color: #898989;
  width: 100%;
  margin-bottom: 10px;
  display: block; }

.form-toggle__label--desc {
  display: block;
  font-size: 12px;
  opacity: 0.8;
  margin-top: 5px; }

.form-toggle .react-toggle {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  -ms-touch-action: pan-x;
      touch-action: pan-x;
  display: inline-block;
  position: relative;
  cursor: pointer;
  background-color: transparent;
  border: 0;
  padding: 0;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-tap-highlight-color: transparent; }

.form-toggle .react-toggle-screenreader-only {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px; }

.form-toggle .react-toggle--disabled {
  cursor: not-allowed;
  opacity: 0.5;
  -webkit-transition: opacity 0.25s;
  -o-transition: opacity 0.25s;
  transition: opacity 0.25s; }

.form-toggle .react-toggle-track {
  width: 2rem;
  height: 0.4rem;
  padding: 0;
  border-radius: 3px;
  background-color: #4d4d4d;
  -webkit-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease;
  position: relative; }

.form-toggle .react-toggle:hover:not(.react-toggle--disabled) .react-toggle-track {
  background-color: #3d3d3d; }

.form-toggle .react-toggle--checked .react-toggle-track {
  background-color: #b88c02; }

.form-toggle .react-toggle--checked:hover:not(.react-toggle--disabled) .react-toggle-track {
  background-color: #866601; }

.form-toggle .react-toggle-track-check {
  display: none; }

.form-toggle .react-toggle--checked .react-toggle-track-check {
  opacity: 1;
  -webkit-transition: opacity 0.25s ease;
  -o-transition: opacity 0.25s ease;
  transition: opacity 0.25s ease; }

.form-toggle .react-toggle-track-x {
  display: none; }

.form-toggle .react-toggle--checked .react-toggle-track-x {
  opacity: 0; }

.form-toggle .react-toggle-thumb {
  -webkit-transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1) 0ms;
  -o-transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1) 0ms;
  transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1) 0ms;
  position: absolute;
  top: -5px;
  left: -6px;
  width: 1.06667rem;
  height: 1.06667rem;
  border: 1px solid #4d4d4d;
  border-radius: 50%;
  background: #686868;
  border: 0 solid rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 0 3px 1px 0 rgba(0, 0, 0, 0.05), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 3px 3px 0 rgba(0, 0, 0, 0.05);
          box-shadow: 0 3px 1px 0 rgba(0, 0, 0, 0.05), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 3px 3px 0 rgba(0, 0, 0, 0.05);
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-transition: all 0.25s ease;
  -o-transition: all 0.25s ease;
  transition: all 0.25s ease; }

.form-toggle .react-toggle--checked .react-toggle-thumb {
  left: 1.33333rem;
  background: #FDC823;
  border-color: #19ab27; }

.form-toggle .react-toggle--focus .react-toggle-thumb {
  -webkit-box-shadow: 0px 0px 2px 3px #0099e0;
          box-shadow: 0px 0px 2px 3px #0099e0; }

.form-toggle .react-toggle:active:not(.react-toggle--disabled) .react-toggle-thumb {
  -webkit-box-shadow: 0px 0px 5px 5px #0099e0;
          box-shadow: 0px 0px 5px 5px #0099e0; }
.form-radio {
  margin: 10px 0;
  width: auto;
  display: inline-block;
  text-align: center;
  position: relative;
  height: auto; }

.form-radio__label {
  margin-left: 5px;
  cursor: pointer; }

.four {
  width: 33.333333%; }

.form-radio.has-icon {
  margin: 0;
  padding: 10px 0; }
  .form-radio.has-icon .form-radio__label {
    opacity: 1;
    margin: 0;
    display: block; }
  .form-radio.has-icon .form-radio__input {
    opacity: 0;
    position: absolute;
    width: 100%;
    left: 0; }
  .form-radio.has-icon .form-radio__x {
    display: block;
    width: 100%; }

.form-radio.radio-button {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  background-color: #313131; }
  .form-radio.radio-button:hover {
    background-color: #383838; }

.form-radio.radio-button.is-checked {
  background-color: #4F4F4F; }

.form-radio.radio-button:first-child {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px; }

.form-radio.radio-button:last-child {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px; }
.form-radio-group {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column; }

.form-radio-group__label {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  text-align: left;
  color: #898989;
  margin-bottom: 0px;
  display: block;
  font-size: 12px; }

.form-radio-group__wrapper {
  width: 100%;
  border-radius: 5px;
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row; }

.form-radio-group.inline-label {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center; }
  .form-radio-group.inline-label .form-radio-group__label {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    text-align: left;
    margin: 0;
    width: 90px; }
  .form-radio-group.inline-label .form-radio-group__wrapper {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
            flex: 1 1 auto; }
.form-preview {
  width: 100%; }

.form-preview__inner {
  background: #2A2A2A;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  padding: 20px;
  border-radius: 5px; }

.form-preview__heading {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  margin-bottom: 20px;
  font-family: Roboto-Regular;
  font-size: 14px;
  color: #EEEEEE; }

.form-preview__subheading {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.69);
  letter-spacing: 0.4px;
  line-height: 17px; }
.wrapper {
  display: -moz-flex;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -webkit-box-lines: single;
  -moz-box-lines: single;
  box-lines: single;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-box-align: center;
  box-align: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -o-align-items: center;
  align-items: center;
  -ms-flex-align: center; }

.bebo-btn {
  display: -moz-flex;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
  box-pack: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  -o-justify-content: center;
  justify-content: center;
  -ms-flex-pack: center;
  -webkit-box-align: center;
  box-align: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -o-align-items: center;
  align-items: center;
  -ms-flex-align: center;
  align-content: center;
  -ms-flex-line-pack: center; }

/*
body, html {
  overflow:hidden;
  height:100%;
  min-height: inherit;
  position:fixed;
  width:100%;
  top:0;
  left:0;
}
*/
.wrapper {
  max-width: 80rem;
  margin: 0 auto;
  padding: 0 1.33333rem; }

.wrapper {
  display: -moz-flex;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -webkit-box-lines: single;
  -moz-box-lines: single;
  box-lines: single;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-box-align: center;
  box-align: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -o-align-items: center;
  align-items: center;
  -ms-flex-align: center; }

.bebo-btn {
  display: -moz-flex;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
  box-pack: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  -o-justify-content: center;
  justify-content: center;
  -ms-flex-pack: center;
  -webkit-box-align: center;
  box-align: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -o-align-items: center;
  align-items: center;
  -ms-flex-align: center;
  align-content: center;
  -ms-flex-line-pack: center; }

/*
body, html {
  overflow:hidden;
  height:100%;
  min-height: inherit;
  position:fixed;
  width:100%;
  top:0;
  left:0;
}
*/
.wrapper {
  max-width: 80rem;
  margin: 0 auto;
  padding: 0 1.33333rem; }

.bebo-btn, .bebo-btn.text-button {
  font-size: 0.93333rem;
  line-height: 1.26667rem; }

/*
html, body {
  font-size: $font-size;
  line-height: 1.25;
  font-family: $font-family-base;
  font-weight: 400;
  word-wrap: break-word;
  color: $color-black;
  hyphens: auto;
}

%hero {
  @extend %font-size-huge;
  font-weight: 500;
  color: $color-brand;
}
h1 {
  @extend %font-size-x-large;
  font-weight: 300;
}
h2 {
  @extend %font-size-large;
  font-weight: 300;
}
h3 {
  @extend %font-size-medium;
  font-weight: 600;
}
h4 {
  @extend %font-size-medium;
  font-weight: 400;
  color: $color-grey4;
}
h5 {
  @extend %font-size-small;
  font-weight: 900;
  letter-spacing: 0.5px;
  color: $color-grey5;
}
p {
  @extend %font-size-default;
  font-weight: 400;
}
small {
  @extend %font-size-small;
}
a {
  color: #a0a0a0;
  cursor: pointer;
  text-decoration: none;
  &:hover {
    color: #ffffff;
  }
  @include transition(all .2s);
}
em, .em {
  font-style: italic;
}
strong, .strong {
  font-weight: bold;
}
button{
  font-family: $font-family-base;
  cursor: pointer;
}
textarea, input, select{
  font-family: $font-family-base;
}
*/
::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  color: #888888; }

::-moz-placeholder {
  /* Firefox 19+ */
  color: #888888; }

:-ms-input-placeholder {
  /* IE 10+ */
  color: #888888; }

:-moz-placeholder {
  /* Firefox 18- */
  color: #888888; }

/*
button, input, textarea {
  transition: all 200ms ease;
}

input[type="text"] {
  outline: 0;
  border: 0;
}

input[type="text"], textarea {
  border-radius: 2px;
}
*/
.bebo-btn {
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 1px;
  display: inline-block;
  color: #ffffff;
  text-align: center;
  background-color: #2c3032;
  cursor: pointer;
  -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
          box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
  height: 2.66667rem;
  padding: 0.73333rem 1.6rem;
  -webkit-transition: all 200ms ease;
  -o-transition: all 200ms ease;
  transition: all 200ms ease;
  border-radius: 1.33333rem; }
  .bebo-btn:hover {
    color: #1d2123;
    background-color: #fdc20a;
    text-decoration: none; }
  .bebo-btn.loading {
    background-size: 1.06667rem;
    background-repeat: no-repeat;
    background-position: center;
    text-indent: -999999;
    overflow: hidden;
    color: transparent; }
    .bebo-btn.loading:hover {
      background-color: #ffffff;
      color: transparent;
      border: 1px solid #dddddd; }
  .bebo-btn.disabled {
    background: #eeeeee;
    color: #eeeeee;
    border: 1px solid #dddddd; }
    .bebo-btn.disabled:hover {
      background: #eeeeee;
      color: #eeeeee;
      border: 1px solid #dddddd; }
  .bebo-btn.text-button {
    text-transform: none;
    background: none;
    border: 0;
    color: #b1b1b1;
    font-weight: 400;
    height: auto;
    margin: 1.33333rem auto; }
    .bebo-btn.text-button:hover {
      background: none;
      color: #FDC823; }

.bebo-btn, .user-avatar, .community-avatar {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center; }

.user-avatar {
  background-size: cover;
  height: 1.6rem;
  width: 1.6rem;
  border-radius: 50%;
  background-color: #5d5e6b; }

.community-avatar {
  background-size: cover;
  height: 3.33333rem;
  width: 3.33333rem;
  background-color: #5d5e6b; }

/*body,
html {
  color: $color-white;
}*/
.toast-banner {
  position: absolute;
  z-index: 101;
  top: 0;
  left: 0;
  right: 0;
  background: red;
  text-align: center;
  line-height: 2.5;
  overflow: hidden;
  -webkit-box-shadow: 0 0 5px black;
  box-shadow: 0 0 5px black; }

@-webkit-keyframes slideDown {
  0%,
  100% {
    -webkit-transform: translateY(-50px); }
  10%,
  90% {
    -webkit-transform: translateY(0px); } }

.form-file__upload {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column; }
  .form-file__upload * {
    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Open Sans, Helvetica Neue, sans-serif;
    cursor: pointer; }

.form-file__upload--main {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  position: relative;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between; }

.form-file__upload--meta {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  margin-top: 20px; }

.form-file__upload--preview {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: 40%;
  position: relative;
  position: relative;
  background: #2a2a2a;
  border-radius: 6px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  text-align: center; }
  .form-file__upload--preview:before {
    display: block;
    content: '';
    width: 100%;
    padding-top: 61.22449%; }
  .form-file__upload--preview > .content {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0; }

.form-file__upload--preview__container {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  padding: 5px; }

.form-file__upload--preview--media {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: 80%;
  max-height: 100%;
  height: auto;
  -o-object-fit: contain;
     object-fit: contain; }

.form-file__upload--button {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: 100%;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center; }

.form-file__upload--button__input {
  opacity: 1;
  z-index: 10;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0; }
.error-message {
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  left: 0;
  position: fixed;
  top: 0;
  background: #191919;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column; }

.error-message__reason {
  margin-bottom: 40px; }

.error-message__reason--text {
  font-size: 3vh;
  color: #ff4e4e;
  margin: 0 auto;
  text-align: center;
  display: block;
  margin-top: 20px; }

.error-message__reason--image {
  -o-object-fit: contain;
     object-fit: contain;
  margin: 0 auto;
  height: 10vh;
  max-height: 120px;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  display: block; }

.error-message__text {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  font-size: 15px;
  max-width: 370px;
  text-align: center;
  color: rgba(255, 255, 255, 0.7);
  display: block;
  margin: 0 auto;
  white-space: none;
  -webkit-hyphens: none;
      -ms-hyphens: none;
          hyphens: none;
  line-height: 1.6; }

.error-message__actions {
  margin-top: 40px;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto; }

.error-message__action {
  margin: 10px 0; }
.wrapper, .navigation-bar, .client-navigation, .stream-info, .user-info, .user-info-details, .bot-list--item, .client-view, .settings-item, .settings-item.connect-device .settings-item-right {
  display: -moz-flex;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -webkit-box-lines: single;
  -moz-box-lines: single;
  box-lines: single;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-box-align: center;
  box-align: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -o-align-items: center;
  align-items: center;
  -ms-flex-align: center; }

.client-container.web, .bot-bar, .user-settings, .settings-item.connect-device {
  display: -moz-flex;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  box-orient: vertical;
  -webkit-box-direction: normal;
  box-direction: normal;
  -moz-flex-direction: column;
  flex-direction: column;
  -ms-flex-direction: column;
  -webkit-box-lines: single;
  -moz-box-lines: single;
  box-lines: single;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-box-pack: start;
  box-pack: start;
  -moz-justify-content: flex-start;
  -ms-justify-content: flex-start;
  -o-justify-content: flex-start;
  justify-content: flex-start;
  -ms-flex-pack: start; }

.bebo-btn, .bot-toggle-btn, .navigation-bar-brand, .client-navigation-item a, .stream-controls, .settings-save-btn {
  display: -moz-flex;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
  box-pack: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  -o-justify-content: center;
  justify-content: center;
  -ms-flex-pack: center;
  -webkit-box-align: center;
  box-align: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -o-align-items: center;
  align-items: center;
  -ms-flex-align: center;
  align-content: center;
  -ms-flex-line-pack: center; }

/*

body, html {
  overflow:hidden;
  height:100%;
  min-height: inherit;
  position:fixed;
  width:100%;
  top:0;
  left:0;
}
*/
.wrapper {
  max-width: 80rem;
  margin: 0 auto;
  padding: 0 1.33333rem; }

.wrapper, .navigation-bar, .client-navigation, .stream-info, .user-info, .user-info-details, .bot-list--item, .client-view, .settings-item, .settings-item.connect-device .settings-item-right {
  display: -moz-flex;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -webkit-box-lines: single;
  -moz-box-lines: single;
  box-lines: single;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-box-align: center;
  box-align: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -o-align-items: center;
  align-items: center;
  -ms-flex-align: center; }

.client-container.web, .bot-bar, .user-settings, .settings-item.connect-device {
  display: -moz-flex;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  box-orient: vertical;
  -webkit-box-direction: normal;
  box-direction: normal;
  -moz-flex-direction: column;
  flex-direction: column;
  -ms-flex-direction: column;
  -webkit-box-lines: single;
  -moz-box-lines: single;
  box-lines: single;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-box-pack: start;
  box-pack: start;
  -moz-justify-content: flex-start;
  -ms-justify-content: flex-start;
  -o-justify-content: flex-start;
  justify-content: flex-start;
  -ms-flex-pack: start; }

.bebo-btn, .bot-toggle-btn, .navigation-bar-brand, .client-navigation-item a, .stream-controls, .settings-save-btn {
  display: -moz-flex;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
  box-pack: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  -o-justify-content: center;
  justify-content: center;
  -ms-flex-pack: center;
  -webkit-box-align: center;
  box-align: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -o-align-items: center;
  align-items: center;
  -ms-flex-align: center;
  align-content: center;
  -ms-flex-line-pack: center; }

/*

body, html {
  overflow:hidden;
  height:100%;
  min-height: inherit;
  position:fixed;
  width:100%;
  top:0;
  left:0;
}
*/
.wrapper {
  max-width: 80rem;
  margin: 0 auto;
  padding: 0 1.33333rem; }

.bot-list--header {
  font-size: 1.86667rem;
  line-height: 2.53333rem; }
  @media screen and (max-width: 48rem) {
    .bot-list--header {
      font-size: 1.33333rem;
      line-height: 1.8rem; } }

.user-info-name, .settings-group header p {
  font-size: 1.2rem;
  line-height: 1.46667rem; }
  @media screen and (max-width: 48rem) {
    .user-info-name, .settings-group header p {
      font-size: 1.2rem;
      line-height: 1.66667rem; } }

p, .bot-list--item--title, .settings-item-left textarea, .settings-item-left input {
  font-size: 1.06667rem;
  line-height: 1.33333rem; }
  @media screen and (min-width: 48rem) {
    p, .bot-list--item--title, .settings-item-left textarea, .settings-item-left input {
      font-size: 1.06667rem;
      line-height: 1.33333rem; } }

h5, .bot-list--sub-header, small, .bebo-btn, .bot-toggle-btn, .bebo-btn.text-button, .text-button.bot-toggle-btn, .bot-list--item--instructions, .settings-item-left p {
  font-size: 0.93333rem;
  line-height: 1.26667rem; }

/*
html, body {
  font-size: $font-size;
  line-height: 1.25;
  font-family: $font-family-base;
  font-weight: 400;
  word-wrap: break-word;
  color: $color-black;
  hyphens: auto;
}

%hero {
  @extend %font-size-huge;
  font-weight: 500;
  color: $color-brand;
}
h1 {
  @extend %font-size-x-large;
  font-weight: 300;
}
h2 {
  @extend %font-size-large;
  font-weight: 300;
}
h3 {
  @extend %font-size-medium;
  font-weight: 600;
}
h4 {
  @extend %font-size-medium;
  font-weight: 400;
  color: $color-grey4;
}
*/
h5, .bot-list--sub-header {
  font-weight: 900;
  letter-spacing: 0.5px;
  color: #888888; }

p {
  font-weight: 400; }

a {
  color: #a0a0a0;
  cursor: pointer;
  text-decoration: none;
  -webkit-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s; }
  a:hover {
    color: #ffffff; }

em,
.em {
  font-style: italic; }

strong,
.strong {
  font-weight: bold; }

button {
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Open Sans, Helvetica Neue, sans-serif;
  cursor: pointer; }

textarea,
input,
select {
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Open Sans, Helvetica Neue, sans-serif; }

.navigation-bar-brand .bebo-logo {
  display: inline-block;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden; }

::-webkit-input-placeholder {
  color: #888888; }

::-moz-placeholder {
  color: #888888; }

:-ms-input-placeholder {
  color: #888888; }

:-moz-placeholder {
  color: #888888; }

/*
button, input, textarea {
  transition: all 200ms ease;
}

input[type="text"] {
  outline: 0;
  border: 0;
}

input[type="text"], textarea {
  border-radius: 2px;
}
*/
.bebo-btn, .bot-toggle-btn {
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 1px;
  display: inline-block;
  color: #ffffff;
  text-align: center;
  background-color: #2c3032;
  cursor: pointer;
  -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
          box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
  height: 2.66667rem;
  padding: 0.73333rem 1.6rem;
  -webkit-transition: all 200ms ease;
  -o-transition: all 200ms ease;
  transition: all 200ms ease;
  border-radius: 1.33333rem; }
  .bebo-btn:hover, .bot-toggle-btn:hover {
    color: #1d2123;
    background-color: #00e684;
    text-decoration: none; }
  .bebo-btn.loading, .loading.bot-toggle-btn {
    background-size: 1.06667rem;
    background-repeat: no-repeat;
    background-position: center;
    text-indent: -999999;
    overflow: hidden;
    color: transparent; }
    .bebo-btn.loading:hover, .loading.bot-toggle-btn:hover {
      background-color: #ffffff;
      color: transparent;
      border: 1px solid #dddddd; }
  .bebo-btn.disabled, .disabled.bot-toggle-btn {
    background: #eeeeee;
    color: #eeeeee;
    border: 1px solid #dddddd; }
    .bebo-btn.disabled:hover, .disabled.bot-toggle-btn:hover {
      background: #eeeeee;
      color: #eeeeee;
      border: 1px solid #dddddd; }
  .bebo-btn.text-button, .text-button.bot-toggle-btn {
    text-transform: none;
    background: none;
    border: 0;
    color: #b1b1b1;
    font-weight: 400;
    height: auto;
    margin: 1.33333rem auto; }
    .bebo-btn.text-button:hover, .text-button.bot-toggle-btn:hover {
      background: none;
      color: #00ff93; }

.bebo-btn, .bot-toggle-btn, .user-avatar, .user-info-avatar, .community-avatar, .stream-icon, .navigation-bar-brand .bebo-logo, .ic-coin {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center; }

.user-avatar, .user-info-avatar {
  background-size: cover;
  height: 1.6rem;
  width: 1.6rem;
  border-radius: 50%;
  background-color: #5d5e6b; }

.community-avatar, .stream-icon {
  background-size: cover;
  height: 3.33333rem;
  width: 3.33333rem;
  background-color: #5d5e6b; }

body,
html {
  color: #ffffff; }

.toast-banner {
  position: absolute;
  z-index: 101;
  top: 0;
  left: 0;
  right: 0;
  background: red;
  text-align: center;
  line-height: 2.5;
  overflow: hidden;
  -webkit-box-shadow: 0 0 5px black;
  box-shadow: 0 0 5px black; }

@-webkit-keyframes slideDown {
  0%,
  100% {
    -webkit-transform: translateY(-50px); }
  10%,
  90% {
    -webkit-transform: translateY(0px); } }

.client-container.web {
  width: 100vw;
  height: 100vh;
  background: rgba(15, 15, 15, 0.95); }
  .client-container.web.popup {
    background: transparent !important; }
    .client-container.web.popup .navigation-bar {
      display: none !important; }

.navigation-bar {
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  background: #232228;
  color: #5d5e6b;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  height: 5.33333rem; }

.navigation-bar-brand {
  width: 10.66667rem; }
  .navigation-bar-brand .bebo-logo {
    background-image: url(/static/media/bebo-logo-color-alpha.e2ab3000.svg);
    width: 5.93333rem;
    height: 3.06667rem; }

.client-navigation {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch; }

.client-navigation-items {
  height: 100%; }

.client-navigation-item {
  height: 100%;
  margin-right: 2.66667rem; }
  .client-navigation-item a {
    font-weight: 600;
    height: 100%;
    border-bottom: 4px solid #232228; }
    .client-navigation-item a:hover {
      text-decoration: none; }
  .client-navigation-item span {
    display: inline-block;
    margin-right: 0.53333rem;
    width: 1.33333rem;
    background-position: center top; }
  .client-navigation-item.active a,
  .client-navigation-item:hover a {
    color: #00ff93;
    border-bottom: 4px solid #00ff93; }
    .client-navigation-item.active a span,
    .client-navigation-item:hover a span {
      background-position: center bottom; }

.ic-bot-store {
  height: 0.8rem;
  background-image: url(/static/media/ic_nav_bots.dbdb9f06.svg);
  background-size: 1.33333rem 1.6rem; }

.stream-controls {
  margin-right: 2rem; }

.bot-toggle-btn {
  text-transform: uppercase;
  font-weight: 900;
  letter-spacing: 0.8px; }
  .bot-toggle-btn.active {
    background: #fa323c;
    color: #ffffff; }

.stream-info {
  margin-right: 2rem; }

.stream-icon {
  width: 2.66667rem;
  height: 2.66667rem;
  margin: 0;
  cursor: pointer; }

.user-info {
  padding: 2rem;
  cursor: pointer;
  background-color: #232228;
  color: #ffffff;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between; }
  .user-info:hover {
    color: #ffffff;
    text-decoration: none; }

.user-info-avatar {
  margin-right: 0.66667rem; }

.user-info-coin-count {
  font-weight: bold; }

.ic-coin {
  width: 0.66667rem;
  height: 0.66667rem;
  margin-right: 0.26667rem;
  display: inline-block;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAMAAAC6V+0/AAAABGdBTUEAALGPC/xhBQAAADZQTFRFAAAA//+A/8wz5qQp5KIn46Mn46In5KIn46Im5KMn46Im5KIm5qkq77w2+NJE+dVG/uFN/+RPNtXhYwAAAAp0Uk5TAAIFUVWKpdnc88bVI8MAAAB6SURBVBjTbZFXDsAgDENTyihl3/+ydRDqUO2PKHnKIoiojPUhxuCtkVv7cS4d+0KbO19y24QfBjpr1Uul9d5KUh8djPbLdUzVrH2NWM1bDFRzrXjYMm4VhF4CbHtgQxgkwvYHdoSRQ1pOB9GV6PL0mfwg/HT0yP/vuAB7AA81CcZ3iwAAAABJRU5ErkJggg==); }

.bot-bar {
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  height: calc(100vh - 62px);
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: 29.33333rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1); }

.bot-list {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  overflow-y: auto;
  padding: 0 3.33333rem 2rem 3.33333rem;
  background: #1c1c1c;
  margin: 0; }
  .bot-list--header {
    font-weight: 900;
    color: #ffffff;
    margin-top: 3.33333rem;
    padding-bottom: 1.33333rem;
    position: relative; }
    .bot-list--header::after {
      content: '';
      bottom: 0;
      position: absolute;
      left: 0;
      height: 2px;
      width: 20px;
      background: #FFFFFF; }
  .bot-list--sub-header {
    text-transform: uppercase;
    padding: 2rem 0 0.66667rem 0; }
  .bot-list--empty {
    font-size: 13px;
    font-weight: 400;
    line-height: 16px;
    color: rgba(255, 255, 255, 0.83);
    text-align: center;
    padding: 10px 0; }
    .bot-list--empty.warning {
      background: #ff535d;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
          -ms-flex-direction: row;
              flex-direction: row;
      border-radius: 3px; }
      .bot-list--empty.warning svg {
        margin: auto 0;
        margin-left: 20px; }
      .bot-list--empty.warning span {
        margin: auto 20px;
        max-width: 60%;
        text-align: left;
        font-weight: bold; }
  .bot-list--item {
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    border-bottom: 1px solid #232228;
    padding: 0 0 1.33333rem 0;
    margin: 1.33333rem 0 0 0; }
    .bot-list--item:first-of-type {
      margin-top: 1.33333rem; }
    .bot-list--item:last-of-type {
      border: 0; }
    .bot-list--item--top {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
          -ms-flex-direction: row;
              flex-direction: row;
      margin: 0 0 0.66667rem 0; }
    .bot-list--item--bot {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
          -ms-flex-direction: row;
              flex-direction: row; }
    .bot-list--item--left {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column; }
    .bot-list--item--right {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column;
      margin: auto 0; }
    .bot-list--item--instructions {
      margin: 0 2.5%;
      color: #888888; }
      .bot-list--item--instructions--rarity {
        font-weight: 900;
        color: #FFFFFF;
        margin-right: 5px; }
        .bot-list--item--instructions--rarity.uncommon {
          color: #00ff93; }
    .bot-list--item--image {
      height: 1.33333rem;
      width: 1.33333rem;
      -o-object-fit: contain;
         object-fit: contain;
      margin: auto 0.66667rem auto 0; }
    .bot-list--item--title {
      margin: auto 0;
      font-weight: 600;
      color: #ffffff; }
    .bot-list--item--btn {
      margin: auto;
      margin-right: 0; }
      .bot-list--item--btn svg {
        height: 28px;
        width: 28px;
        opacity: .2;
        -webkit-transition: opacity 200ms ease;
        -o-transition: opacity 200ms ease;
        transition: opacity 200ms ease; }
      .bot-list--item--btn:hover svg {
        opacity: .4; }
      .bot-list--item--btn.react-toggle:hover:not(.react-toggle--disabled) .react-toggle-track {
        background-color: #343434; }
      .bot-list--item--btn.react-toggle--focus .react-toggle-thumb {
        -webkit-box-shadow: 0px 0px 3px 2px transparent;
        box-shadow: 0px 0px 2px 3px transparent; }
      .bot-list--item--btn.react-toggle--checked .react-toggle-track {
        background-color: #facc47; }
      .bot-list--item--btn.react-toggle--checked .react-toggle-thumb {
        border-color: #facc47; }
      .bot-list--item--btn.react-toggle--checked:hover:not(.react-toggle--disabled) .react-toggle-track {
        background-color: #f9be15; }

.app-scene.live-view {
  background-image: url(https://a.imgdropt.com/image/0079996a-d313-495c-a5c0-d0c1d5bb67de); }
  .app-scene.live-view .preview-video-container {
    pointer-events: none; }
  .app-scene.live-view .stream-overlay {
    overflow: hidden; }
  .app-scene.live-view .selection-side {
    display: none; }
  .app-scene.live-view .selection-handle {
    display: none; }
  .app-scene.live-view .selection-name {
    display: none; }
  .app-scene.live-view .module-test-button {
    display: none; }

.client-view {
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch; }

.stream-preview-workspace {
  top: 0;
  left: 0;
  width: 100%;
  padding: 0 40px;
  overflow: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: relative;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column; }

.live-view .preview-video-container {
  margin-top: 10px; }

.popup .stream-preview-workspace {
  height: 100vh !important;
  max-width: auto !important;
  padding: 0 !important; }

.open-game-alert {
  width: 100%;
  height: 100%;
  background: #000000;
  text-align: center;
  font-weight: 100;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center; }

.live-stats {
  width: 100%;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  background-color: transparent;
  margin-top: 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  border-radius: 4px;
  overflow: hidden; }

.live-stats__item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 10px;
  border-radius: 4px;
  background-color: #0B0B0B;
  border: 1px solid rgba(255, 255, 255, 0.1); }

.live-stats__item--value {
  display: inline-block;
  color: #FFF;
  font-weight: 600;
  font-size: 12px;
  margin-right: 5px; }

.live-stats__item--desc {
  display: inline-block;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.65); }

.live-scenes {
  width: 100%;
  margin-top: 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-flow: row wrap;
          flex-flow: row wrap;
  padding: 10px; }

.live-scenes--header {
  margin-left: 5px;
  font-size: 12px;
  margin-bottom: 10px;
  display: block;
  width: 100%;
  text-align: left;
  color: rgba(255, 255, 255, 0.5); }

.live-scenes__item {
  width: 100px;
  height: 35px;
  margin: 5px 5px;
  background-color: #121212;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  border-radius: 4px;
  padding: 0 10px; }

.live-scenes__item.active {
  border: 1px solid rgba(54, 204, 108, 0.4);
  color: #FFF; }
  .live-scenes__item.active .live-scenes__item--name {
    opacity: 1; }

.live-scenes__item--name {
  cursor: pointer;
  text-align: center;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  opacity: 0.8;
  font-size: 0.8rem;
  color: #ececec;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  overflow: hidden;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: 14px; }

.live-scenes__item--name--text {
  color: inherit;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  white-space: nowrap;
  overflow: hidden;
  -o-text-overflow: ellipsis;
     text-overflow: ellipsis;
  font-size: 0.8rem; }

.preview-video-container {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  max-width: 1340px; }

.preview-video.popup {
  position: fixed;
  left: 0;
  top: 0;
  -webkit-box-shadow: none !important;
          box-shadow: none !important;
  border: 0 !important; }

.stream-overlay.is-resizing {
  opacity: 0; }

.preview-video {
  background: #000000;
  -webkit-box-flex: 0;
      -ms-flex: 0 1 auto;
          flex: 0 1 auto;
  position: relative;
  -webkit-box-shadow: 0 2px 40px 1px rgba(0, 0, 0, 0.15);
          box-shadow: 0 2px 40px 1px rgba(0, 0, 0, 0.15); }
  .preview-video:before {
    content: '';
    float: left;
    padding-bottom: 56.25%; }
  .preview-video:after {
    content: '';
    display: table;
    clear: both; }
  .preview-video .content {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: visible;
    border-radius: 2px; }
  .preview-video iframe {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%; }
  .preview-video .stream-overlay {
    position: absolute;
    z-index: 2000;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0; }
  .preview-video .preview-state {
    opacity: 1;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    background: #000000;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column; }
  .preview-video .preview-state__text {
    color: rgba(255, 255, 255, 0.8);
    font-size: 11px;
    margin-bottom: 10px;
    padding: 7px 12px;
    border-radius: 20px;
    background-color: rgba(255, 255, 255, 0.05); }
    .preview-video .preview-state__text b {
      color: #ff5757;
      opacity: 0.7;
      font-weight: 800; }
  .preview-video .preview-state__sub-text {
    color: #fff;
    opacity: 0.4;
    font-size: 10px;
    line-height: 1.5;
    max-width: 350px;
    width: 90%;
    text-align: center; }
  .preview-video .stream-offline {
    position: absolute;
    z-index: 2000;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0; }
    .preview-video .stream-offline span {
      position: absolute;
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
          -ms-transform: translate(-50%, -50%);
              transform: translate(-50%, -50%); }
  .preview-video.popup {
    background-color: transparent !important;
    width: 100vw;
    height: 100vh;
    margin: 0px; }
    .preview-video.popup .stream-overlay {
      width: 100vw !important;
      height: 100vh !important;
      position: fixed; }
    .preview-video.popup .widget-canvas {
      -webkit-box-shadow: inset 0px 0px 0px 0px #232228 !important;
              box-shadow: inset 0px 0px 0px 0px #232228 !important; }
    .preview-video.popup .stream-overlay-game-placeholder {
      display: none !important; }
    .preview-video.popup .navigation-bar {
      display: none !important; }

.obiwan-desktop-container {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; }
  .obiwan-desktop-container video {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    display: none; }
    .obiwan-desktop-container video.preview {
      display: block !important; }
  .obiwan-desktop-container .desktop-hangup {
    position: absolute;
    z-index: 7000;
    width: 2.4rem;
    height: 2.4rem;
    padding: 0.66667rem;
    top: 0.26667rem;
    right: 0.26667rem;
    cursor: pointer;
    background-color: #fa323c;
    -webkit-transform: scale(0.85);
        -ms-transform: scale(0.85);
            transform: scale(0.85);
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAOxAAADsQBlSsOGwAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAHeSURBVGiB7ZY9axRRGEbPrKtEImqtoCBmVzApopUfWIiFtcHWH6CFxB/gB4hYWAiCjaiVIFiLoI0gkiZJYSUGhQhBTJoEBEmKHIsdJawzmcnsLJviPXCbmfs+98x9ucOFIAiCIAiCIBgUSa8B6ghwGmgDI0AL2AvsA/ak034BK+mYS8dnYCpJkrleHbYqPKROqC/UBXtnIc26pA71U3xcfaYu1yCdx7L6VB2vU/yC+q6P0nm8Vc8X+eWeAbUNPAQuFmSsAFPALPAJ+A7MA7/Td9A5D7uBw8AhYAw4AZwC9hfkvwZuJEnypWDeP/Fd6j11tWCH5tVzarNUcPZaTfVsmrUZq+pddWdRYFudKdni6ariGetOl11TbW2sbWwIuQzM0GntduUkMKtO/H3QAFCvAy+B4QGJbYVh4JV6G6Cp3gTuDFRp6yTALXW9AUwO2qYHJhvAt4rF6zWKVM362gCuAEsVij9WXDSLDxVqFum4gzqqLpb8la2pD6zx3qLuUO+n2WX4qR7vDjmm/igofK+O1SWe8SEt9U0J+dG8gLxOrKnX+iWe4XE1pxv/73xGcXcnlixxqaob9UyXR/7OZxQfVZ+rj9WDfXbdzOOA+kh9oh4ZlEcQBEEQBEEQBNuTPzo5gbKq3GznAAAAAElFTkSuQmCC);
    background-size: 1.6rem 1.6rem !important;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 0.13333rem;
    -webkit-transition: all 200ms ease;
    -o-transition: all 200ms ease;
    transition: all 200ms ease; }
    .obiwan-desktop-container .desktop-hangup:hover {
      -webkit-transform: scale(1.1);
          -ms-transform: scale(1.1);
              transform: scale(1.1); }
  .obiwan-desktop-container .desktop-callin {
    position: absolute;
    z-index: 7000;
    width: 2.4rem;
    height: 2.4rem;
    padding: 0.66667rem;
    top: 0.26667rem;
    right: 0.26667rem;
    cursor: pointer;
    background-color: #01c270;
    -webkit-transform: scale(0.85);
        -ms-transform: scale(0.85);
            transform: scale(0.85);
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAqAQAAAADtuPT2AAAAAnRSTlMAAHaTzTgAAAAYSURBVHgBY2BgsAfigaL+g8ABIqiBdScA30crP8WUckkAAAAASUVORK5CYII=);
    background-size: 1.6rem 1.6rem !important;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 0.13333rem;
    -webkit-transition: all 200ms ease;
    -o-transition: all 200ms ease;
    transition: all 200ms ease; }
    .obiwan-desktop-container .desktop-callin:hover {
      -webkit-transform: scale(1.1);
          -ms-transform: scale(1.1);
              transform: scale(1.1); }
  .obiwan-desktop-container .callin-desktop {
    z-index: 6000;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    cursor: default;
    padding: 0.66667rem;
    opacity: 0.3; }
    .obiwan-desktop-container .callin-desktop:hover {
      opacity: 1; }
    .obiwan-desktop-container .callin-desktop span {
      position: absolute;
      padding: 0.66667rem;
      top: 0.2em;
      left: 2em; }
  .obiwan-desktop-container .desktop-preview-off {
    opacity: 1;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: #000000;
    text-align: center;
    font-weight: 100;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    font-size: 28px; }

.widget__camera--label {
  position: absolute;
  top: 5px;
  font-size: 10px;
  font-weight: 600;
  background-color: #51db77;
  color: #000;
  padding: 3px 5px;
  border-radius: 2px;
  right: 5px;
  z-index: 10; }

.obiwan-camera-container {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  overflow: hidden; }
  .obiwan-camera-container video {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    display: none;
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: center;
       object-position: center; }
    .obiwan-camera-container video.preview {
      display: block !important; }
  .obiwan-camera-container .camera-preview-off {
    opacity: 0.3;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%); }
  .obiwan-camera-container .camera-hangup {
    position: absolute;
    z-index: 7000;
    width: 2.4rem;
    height: 2.4rem;
    padding: 0.66667rem;
    top: 0.26667rem;
    right: 0.26667rem;
    cursor: pointer;
    background-color: #fa323c;
    -webkit-transform: scale(0.85);
        -ms-transform: scale(0.85);
            transform: scale(0.85);
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAOxAAADsQBlSsOGwAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAHeSURBVGiB7ZY9axRRGEbPrKtEImqtoCBmVzApopUfWIiFtcHWH6CFxB/gB4hYWAiCjaiVIFiLoI0gkiZJYSUGhQhBTJoEBEmKHIsdJawzmcnsLJviPXCbmfs+98x9ucOFIAiCIAiCIBgUSa8B6ghwGmgDI0AL2AvsA/ak034BK+mYS8dnYCpJkrleHbYqPKROqC/UBXtnIc26pA71U3xcfaYu1yCdx7L6VB2vU/yC+q6P0nm8Vc8X+eWeAbUNPAQuFmSsAFPALPAJ+A7MA7/Td9A5D7uBw8AhYAw4AZwC9hfkvwZuJEnypWDeP/Fd6j11tWCH5tVzarNUcPZaTfVsmrUZq+pddWdRYFudKdni6ariGetOl11TbW2sbWwIuQzM0GntduUkMKtO/H3QAFCvAy+B4QGJbYVh4JV6G6Cp3gTuDFRp6yTALXW9AUwO2qYHJhvAt4rF6zWKVM362gCuAEsVij9WXDSLDxVqFum4gzqqLpb8la2pD6zx3qLuUO+n2WX4qR7vDjmm/igofK+O1SWe8SEt9U0J+dG8gLxOrKnX+iWe4XE1pxv/73xGcXcnlixxqaob9UyXR/7OZxQfVZ+rj9WDfXbdzOOA+kh9oh4ZlEcQBEEQBEEQBNuTPzo5gbKq3GznAAAAAElFTkSuQmCC);
    background-size: 1.6rem 1.6rem !important;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 0.13333rem;
    -webkit-transition: all 200ms ease;
    -o-transition: all 200ms ease;
    transition: all 200ms ease; }
    .obiwan-camera-container .camera-hangup:hover {
      -webkit-transform: scale(1.1);
          -ms-transform: scale(1.1);
              transform: scale(1.1); }
  .obiwan-camera-container .camera-callin {
    position: absolute;
    z-index: 7000;
    width: 2.4rem;
    height: 2.4rem;
    padding: 0.66667rem;
    top: 0.26667rem;
    right: 0.26667rem;
    cursor: pointer;
    background-color: #01c270;
    -webkit-transform: scale(0.85);
        -ms-transform: scale(0.85);
            transform: scale(0.85);
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAqAQAAAADtuPT2AAAAAnRSTlMAAHaTzTgAAAAYSURBVHgBY2BgsAfigaL+g8ABIqiBdScA30crP8WUckkAAAAASUVORK5CYII=);
    background-size: 1.6rem 1.6rem !important;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 0.13333rem;
    -webkit-transition: all 200ms ease;
    -o-transition: all 200ms ease;
    transition: all 200ms ease; }
    .obiwan-camera-container .camera-callin:hover {
      -webkit-transform: scale(1.1);
          -ms-transform: scale(1.1);
              transform: scale(1.1); }
  .obiwan-camera-container .callin-camera {
    z-index: 6000;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    cursor: default;
    padding: 0.66667rem;
    opacity: 0.3; }
    .obiwan-camera-container .callin-camera:hover {
      opacity: 1; }
    .obiwan-camera-container .callin-camera span {
      position: absolute;
      padding: 0.66667rem;
      top: 0.2em;
      left: 2em; }

.widget-canvas {
  width: 100% !important;
  height: 100% !important;
  z-index: 1500;
  position: absolute;
  top: 0;
  left: 0; }

.widget-canvas-props {
  width: 100% !important;
  height: 100% !important;
  z-index: -100;
  position: absolute;
  top: 0;
  left: 0; }

.widgets-list {
  display: none; }

.react-draggable {
  cursor: default !important; }

.react-draggable-dragging {
  cursor: -webkit-grabbing !important;
  cursor: grabbing !important; }

.module-widget {
  opacity: 1 !important;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0; }

.module-test-button {
  pointer-events: none; }

.module {
  -webkit-user-select: none !important;
     -moz-user-select: none !important;
      -ms-user-select: none !important;
          user-select: none !important;
  position: absolute;
  -webkit-transition: border 200ms ease;
  -o-transition: border 200ms ease;
  transition: border 200ms ease;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  z-index: 10; }
  .module * {
    -webkit-user-select: none !important;
       -moz-user-select: none !important;
        -ms-user-select: none !important;
            user-select: none !important; }
  .module .selection-handle {
    -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
            box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2); }
  .module .selection-side {
    background: #FDC823; }
  .module .selection-handle,
  .module .selection-side,
  .module .selection-name {
    opacity: 0; }
  .module .selection-side {
    opacity: 0.2; }
  .module:hover .selection-name {
    opacity: 0;
    left: 0; }
  .module:hover .selection-name__text {
    background: #1e8fe1 !important; }
  .module:hover .selection-handle {
    opacity: 0; }
  .module:hover .selection-side {
    opacity: 0.86;
    background: #1e8fe1 !important; }
  .module.layer-selected, .module.resizing {
    z-index: 200 !important; }
    .module.layer-selected .module-test-button, .module.resizing .module-test-button {
      opacity: 0.8;
      pointer-events: all; }
    .module.layer-selected .selection-side,
    .module.layer-selected .selection-handle, .module.resizing .selection-side,
    .module.resizing .selection-handle {
      opacity: 1;
      background: #FDC823 !important; }
    .module.layer-selected .selection-name, .module.resizing .selection-name {
      left: 4px !important;
      opacity: 1; }
    .module.layer-selected .selection-name__text, .module.resizing .selection-name__text {
      background: #FDC823 !important;
      font-size: 0.8rem; }
    .module.layer-selected:before, .module.layer-selected:after, .module.resizing:before, .module.resizing:after {
      opacity: 1; }

.module-webcam {
  z-index: 99 !important; }

.module-image {
  height: 30px;
  width: 30px;
  margin: auto;
  margin-bottom: 15px; }

.module-test-button {
  border-radius: 100px;
  font-size: 13px;
  font-weight: bold;
  text-align: center;
  line-height: 1;
  color: #ffffff;
  position: absolute;
  z-index: 2000;
  bottom: 8px;
  left: 8px;
  opacity: 0; }
  .module-test-button:hover {
    color: #e6e6e6; }

.module-title {
  margin: 5px 8px;
  font-weight: 700;
  z-index: 1000;
  font-size: 0.93333rem;
  text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2); }

.module-full {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  background: none !important; }
  .module-full .module-image,
  .module-full .module-title {
    margin: 5px;
    line-height: 30px; }
  .module-full:hover {
    -webkit-box-shadow: none !important;
            box-shadow: none !important; }

.module-full-props {
  z-index: 0;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  background: none !important; }
  .module-full-props .module-image,
  .module-full-props .module-title {
    margin: 5px;
    line-height: 30px; }

.selection-name {
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transform: translate3d(0, -100%, 0);
          transform: translate3d(0, -100%, 0);
  height: 20px;
  overflow: hidden;
  -webkit-transition: all 100ms ease-in;
  -o-transition: all 100ms ease-in;
  transition: all 100ms ease-in; }

.selection-name__text {
  color: #000;
  font-size: 12px;
  padding: 3px 6px; }

.popup .module {
  background: none !important;
  border: 0 !important;
  padding: 0 !important; }
  .popup .module .module-title {
    display: none !important; }
  .popup .module .module-image {
    display: none !important; }
  .popup .module .module-test-button {
    display: none !important; }

.bot-preview-gif {
  z-index: 999;
  position: relative; }

.browser-source-container {
  text-align: right;
  position: fixed;
  bottom: 0;
  right: 0;
  padding: 10px;
  font-size: 13px;
  font-weight: bold;
  line-height: 16px;
  color: #b3b3b3;
  text-transform: uppercase; }
  .browser-source-container button {
    padding: 5px 20px;
    -webkit-transition: all 200ms ease;
    -o-transition: all 200ms ease;
    transition: all 200ms ease;
    background: #222222; }
    .browser-source-container button:hover {
      background: #333333; }
    .browser-source-container button input {
      background: 0;
      padding: 0;
      margin: 0;
      font-size: 13px;
      font-weight: bold;
      line-height: 16px;
      color: #b3b3b3 !important;
      text-decoration: none !important;
      border: none !important;
      min-width: 200px;
      cursor: pointer; }

.stream-editor-toolbar--browser-source {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-top: 10px; }
  .stream-editor-toolbar--browser-source span {
    font-size: 12px;
    font-weight: 600; }
  .stream-editor-toolbar--browser-source input[type='text'] {
    background: #242424;
    padding: 10px 15px;
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    border: 0;
    border-radius: 0;
    margin-left: 15px; }
    .stream-editor-toolbar--browser-source input[type='text']:hover {
      background: #242424;
      padding: 10px 15px;
      color: #fff;
      font-size: 13px;
      font-weight: 500;
      border: 0;
      border-radius: 0; }
  .stream-editor-toolbar--browser-source--button input[type='text'] {
    border: 0;
    border-radius: 0;
    background: none;
    font-size: 13px;
    color: #ffffff;
    font-weight: 500;
    padding: 17px 20px;
    outline: none;
    cursor: pointer;
    width: 230px; }

.user-settings {
  color: #ffffff;
  background-color: #ffffff;
  padding: 2rem 2.66667rem;
  overflow: hidden;
  z-index: 1000; }

.settings-group {
  padding-bottom: 5vh;
  border-bottom: 1px solid #eeeeee;
  margin: 0 auto;
  max-width: 40rem;
  width: 95vw; }
  .settings-group:last-of-type {
    border-bottom: 0; }
  .settings-group header p {
    text-align: center;
    text-transform: uppercase;
    color: #b1b1b1;
    margin: 3vh 1.33333rem 3vh; }

.settings-save-btn {
  cursor: pointer;
  text-align: center;
  margin: 1.2rem 1.33333rem;
  -webkit-box-flex: 1;
      -ms-flex: 1 0 auto;
          flex: 1 0 auto;
  color: #ffffff;
  padding: 1rem 1.33333rem;
  border-radius: 8px;
  background: #1d0efe;
  -webkit-transition: all 200ms ease;
  -o-transition: all 200ms ease;
  transition: all 200ms ease; }
  .settings-save-btn:hover {
    background-color: #1001f1; }

.settings-item {
  -webkit-box-flex: 1;
      -ms-flex: 1 0 auto;
          flex: 1 0 auto; }
  .settings-item.connect-device .settings-item-right button {
    margin: 0.66667rem; }

.settings-item-left {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto; }
  .settings-item-left p:first-of-type {
    margin-bottom: 0.66667rem; }
  .settings-item-left p {
    color: #5d5e6b; }
  .settings-item-left textarea {
    resize: none;
    outline: 0;
    padding: 0;
    border: 0;
    width: 90%;
    -webkit-transition: all 200ms ease;
    -o-transition: all 200ms ease;
    transition: all 200ms ease;
    color: #2c3032;
    margin-bottom: 0.66667rem; }
    .settings-item-left textarea::-webkit-input-placeholder {
      color: #888888; }
    .settings-item-left textarea:-moz-placeholder {
      /* Firefox 18- */
      color: #888888; }
    .settings-item-left textarea::-moz-placeholder {
      /* Firefox 19+ */
      color: #888888; }
    .settings-item-left textarea:-ms-input-placeholder {
      color: #888888; }
    .settings-item-left textarea:hover, .settings-item-left textarea:focus, .settings-item-left textarea:active {
      color: #1d0efe; }
  .settings-item-left input {
    outline: 0;
    padding: 0;
    border: 0;
    -webkit-transition: all 200ms ease;
    -o-transition: all 200ms ease;
    transition: all 200ms ease;
    color: #2c3032;
    margin-bottom: 0.66667rem; }
    .settings-item-left input::-webkit-input-placeholder {
      color: #888888; }
    .settings-item-left input:-moz-placeholder {
      /* Firefox 18- */
      color: #888888; }
    .settings-item-left input::-moz-placeholder {
      /* Firefox 19+ */
      color: #888888; }
    .settings-item-left input:-ms-input-placeholder {
      color: #888888; }
    .settings-item-left input:hover, .settings-item-left input:focus, .settings-item-left input:active {
      color: #1d0efe; }

.user-image {
  cursor: pointer;
  width: 3.33333rem;
  height: 3.33333rem;
  border-radius: 8px;
  border: 1px solid #dddddd;
  position: relative;
  background-repeat: no-repeat;
  background-size: cover; }

.user-image-input {
  width: 3.33333rem;
  height: 3.33333rem;
  position: relative;
  opacity: 0;
  cursor: pointer;
  z-index: 2; }

.user-image-input-label {
  width: 3.33333rem;
  height: 3.33333rem;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA2CAQAAAAxbjKfAAABzUlEQVR4Ae3YJ7DbQBAA0DNXYHqv0HwmPcHmZqkcyUiciCNxlrq7rr+5+5sjcWCW6l4vTj+5SR6VTfm3dGfe9Sa8FkqBdA9KiWALPsaZFxhn+DhAlhI4BuktcEyJoNhb0AO5RfToVgAsxOEDyC3jA8R9sngZWt5BJVp4WbgXGaPneAhtkCHHZzyk5zL2g82cgl2QEcZu5tS31kbMfqPnrabnIKMPei6gyQHjoYA2BwxtAZInjmD3mGIVdbqXuVHUilrmBt1DHaswDRXGPpiFE2JFKZwAE/shwfiycH6ZVPDz+CpwGGdoeDpUDJwFCOMsnRQeSzqJs+BgY6uj1AgIxpdLd5KHYIEN7XnYYNHDJfpVADD2nVOKrmNpKadE1xemWd9/i03HCN7G9yur9z59W80D0y88LZxQW+tknTRdd6zrqS8Yq46xK23MLTlyq/5gXZ1Srsf7QwXWfcF0Txk3yw0GS6nmPV9w5oYC266w/Ts7c8MXXNQUuO0Kt39nFzUmuHaMv6v5Jxf/cuLfQPi3TP5Dgv1YnAe+YrkIMF59GC97LNdbdawZLvSsTxjGR5u/OILbLPBnvu8mtg82ti9Fnk9U5dsYmhFMs/bvb+MvBMgLjq/O0vsAAAAASUVORK5CYII=);
  background-repeat: no-repeat;
  background-size: 0.93333rem 0.86667rem;
  background-position: right bottom;
  position: absolute;
  bottom: -0.33333rem;
  right: -0.33333rem;
  cursor: pointer;
  z-index: 1;
  pointer-events: none; }
  .user-image-input-label input {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0; }

* {
  color: white;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none; }

.resolution-warning {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; }
  .resolution-warning--text {
    margin: auto;
    background: #f44336;
    text-align: center;
    padding: 20px;
    font-weight: 700;
    border-radius: 10px; }

.flex-inline {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  position: absolute !important;
  top: 0;
  left: 0;
  right: 0; }

.initial-load-container {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background: #181818; }

.loader {
  max-width: 80vmin;
  max-height: 80vmin;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate3d(-50%, -50%, 0);
          transform: translate3d(-50%, -50%, 0);
  width: 300px;
  height: 300px;
  text-align: center;
  font-size: 1.2em;
  color: #555;
  background: url(/static/media/bebo-loader-sprite.c2645942.png) no-repeat;
  -webkit-animation: play 1.3s steps(31) infinite;
          animation: play 1.3s steps(31) infinite; }

@-webkit-keyframes play {
  100% {
    background-position: -9610px; } }

@keyframes play {
  100% {
    background-position: -9610px; } }

.modal-signin {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-blend-mode: darken;
  -webkit-transition: 4s;
  -o-transition: 4s;
  transition: 4s; }

* {
  -webkit-font-smoothing: antialiased; }

#ytplayer {
  display: none !important;
  opacity: 0 !important; }
.wrapper {
  display: -moz-flex;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -webkit-box-lines: single;
  -moz-box-lines: single;
  box-lines: single;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-box-align: center;
  box-align: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -o-align-items: center;
  align-items: center;
  -ms-flex-align: center; }

.bebo-btn, .modal-signin {
  display: -moz-flex;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
  box-pack: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  -o-justify-content: center;
  justify-content: center;
  -ms-flex-pack: center;
  -webkit-box-align: center;
  box-align: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -o-align-items: center;
  align-items: center;
  -ms-flex-align: center;
  align-content: center;
  -ms-flex-line-pack: center; }

/*
body, html {
  overflow:hidden;
  height:100%;
  min-height: inherit;
  position:fixed;
  width:100%;
  top:0;
  left:0;
}
*/
.wrapper {
  max-width: 80rem;
  margin: 0 auto;
  padding: 0 1.33333rem; }

.wrapper {
  display: -moz-flex;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -webkit-box-lines: single;
  -moz-box-lines: single;
  box-lines: single;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-box-align: center;
  box-align: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -o-align-items: center;
  align-items: center;
  -ms-flex-align: center; }

.bebo-btn, .modal-signin {
  display: -moz-flex;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
  box-pack: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  -o-justify-content: center;
  justify-content: center;
  -ms-flex-pack: center;
  -webkit-box-align: center;
  box-align: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -o-align-items: center;
  align-items: center;
  -ms-flex-align: center;
  align-content: center;
  -ms-flex-line-pack: center; }

/*
body, html {
  overflow:hidden;
  height:100%;
  min-height: inherit;
  position:fixed;
  width:100%;
  top:0;
  left:0;
}
*/
.wrapper {
  max-width: 80rem;
  margin: 0 auto;
  padding: 0 1.33333rem; }

.bebo-btn, .bebo-btn.text-button, .error {
  font-size: 0.93333rem;
  line-height: 1.26667rem; }

/*
html, body {
  font-size: $font-size;
  line-height: 1.25;
  font-family: $font-family-base;
  font-weight: 400;
  word-wrap: break-word;
  color: $color-black;
  hyphens: auto;
}

%hero {
  @extend %font-size-huge;
  font-weight: 500;
  color: $color-brand;
}
h1 {
  @extend %font-size-x-large;
  font-weight: 300;
}
h2 {
  @extend %font-size-large;
  font-weight: 300;
}
h3 {
  @extend %font-size-medium;
  font-weight: 600;
}
h4 {
  @extend %font-size-medium;
  font-weight: 400;
  color: $color-grey4;
}
h5 {
  @extend %font-size-small;
  font-weight: 900;
  letter-spacing: 0.5px;
  color: $color-grey5;
}
p {
  @extend %font-size-default;
  font-weight: 400;
}
small {
  @extend %font-size-small;
}
a {
  color: #a0a0a0;
  cursor: pointer;
  text-decoration: none;
  &:hover {
    color: #ffffff;
  }
  @include transition(all .2s);
}
em, .em {
  font-style: italic;
}
strong, .strong {
  font-weight: bold;
}
button{
  font-family: $font-family-base;
  cursor: pointer;
}
textarea, input, select{
  font-family: $font-family-base;
}
*/
::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  color: #888888; }

::-moz-placeholder {
  /* Firefox 19+ */
  color: #888888; }

:-ms-input-placeholder {
  /* IE 10+ */
  color: #888888; }

:-moz-placeholder {
  /* Firefox 18- */
  color: #888888; }

/*
button, input, textarea {
  transition: all 200ms ease;
}

input[type="text"] {
  outline: 0;
  border: 0;
}

input[type="text"], textarea {
  border-radius: 2px;
}
*/
.bebo-btn {
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 1px;
  display: inline-block;
  color: #ffffff;
  text-align: center;
  background-color: #2c3032;
  cursor: pointer;
  -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
          box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
  height: 2.66667rem;
  padding: 0.73333rem 1.6rem;
  -webkit-transition: all 200ms ease;
  -o-transition: all 200ms ease;
  transition: all 200ms ease;
  border-radius: 1.33333rem; }
  .bebo-btn:hover {
    color: #1d2123;
    background-color: #fdc20a;
    text-decoration: none; }
  .bebo-btn.loading {
    background-size: 1.06667rem;
    background-repeat: no-repeat;
    background-position: center;
    text-indent: -999999;
    overflow: hidden;
    color: transparent; }
    .bebo-btn.loading:hover {
      background-color: #ffffff;
      color: transparent;
      border: 1px solid #dddddd; }
  .bebo-btn.disabled {
    background: #eeeeee;
    color: #eeeeee;
    border: 1px solid #dddddd; }
    .bebo-btn.disabled:hover {
      background: #eeeeee;
      color: #eeeeee;
      border: 1px solid #dddddd; }
  .bebo-btn.text-button {
    text-transform: none;
    background: none;
    border: 0;
    color: #b1b1b1;
    font-weight: 400;
    height: auto;
    margin: 1.33333rem auto; }
    .bebo-btn.text-button:hover {
      background: none;
      color: #FDC823; }

.bebo-btn, .user-avatar, .community-avatar {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center; }

.user-avatar {
  background-size: cover;
  height: 1.6rem;
  width: 1.6rem;
  border-radius: 50%;
  background-color: #5d5e6b; }

.community-avatar {
  background-size: cover;
  height: 3.33333rem;
  width: 3.33333rem;
  background-color: #5d5e6b; }

/*body,
html {
  color: $color-white;
}*/
.toast-banner {
  position: absolute;
  z-index: 101;
  top: 0;
  left: 0;
  right: 0;
  background: red;
  text-align: center;
  line-height: 2.5;
  overflow: hidden;
  -webkit-box-shadow: 0 0 5px black;
  box-shadow: 0 0 5px black; }

@-webkit-keyframes slideDown {
  0%,
  100% {
    -webkit-transform: translateY(-50px); }
  10%,
  90% {
    -webkit-transform: translateY(0px); } }

.modal-signin {
  width: 100vw;
  height: 100%;
  position: fixed;
  z-index: 999999;
  overflow: hidden; }
  .modal-signin:after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background: rgba(33, 33, 33, 0.75); }
  .modal-signin .media-title {
    color: #fff;
    font-weight: 700;
    opacity: 0.4;
    position: absolute;
    bottom: 0.66667rem;
    left: 0.66667rem;
    text-transform: uppercase;
    text-decoration: none;
    font-size: 0.8rem;
    z-index: 999; }

.signup--login {
  position: relative;
  z-index: 2;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-transform: translateY(-10px);
      -ms-transform: translateY(-10px);
          transform: translateY(-10px); }
  .signup--login--title {
    font-size: 5.33333rem;
    line-height: 1.25; }
  .signup--login--button {
    background: #8653d7;
    border-radius: 4px;
    padding: 1.13333rem 3.33333rem 1.26667rem 7.33333rem;
    position: relative;
    display: block;
    height: 4rem;
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 0.5;
    -webkit-transition: all 200ms ease;
    -o-transition: all 200ms ease;
    transition: all 200ms ease;
    margin-top: 1.33333rem; }
    .signup--login--button:hover {
      background: #773ed2; }
    .signup--login--button > span {
      position: absolute;
      top: 0;
      left: 0;
      background: rgba(0, 0, 0, 0.25);
      width: 4rem;
      height: 4rem;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center; }
      .signup--login--button > span img {
        width: 1.53333rem;
        height: 1.6rem; }

.signup--legal {
  position: absolute;
  z-index: 2;
  bottom: 1.33333rem;
  left: 50%;
  margin-left: -16.66667rem;
  font-size: 0.8rem;
  opacity: 0.5;
  text-align: center;
  width: 33.33333rem; }

.signup--guide {
  position: absolute;
  bottom: 1.33333rem;
  right: 2.66667rem;
  z-index: 2;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center; }
  .signup--guide--video {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 16.66667rem;
    height: 9.33333rem;
    background-image: url(/static/media/cover-photo.ba563328.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    pointer: cursor;
    position: relative; }
    .signup--guide--video:hover:after {
      background: transparent; }
    .signup--guide--video:hover img {
      opacity: 0; }
    .signup--guide--video:after {
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      right: 0;
      left: 0;
      background: rgba(0, 0, 0, 0.35);
      -webkit-transition: all 200ms ease;
      -o-transition: all 200ms ease;
      transition: all 200ms ease; }
    .signup--guide--video img {
      width: 1.46667rem;
      height: 1.86667rem;
      -webkit-transform: translateX(5px);
          -ms-transform: translateX(5px);
              transform: translateX(5px);
      position: relative;
      z-index: 2;
      -webkit-transition: all 200ms ease;
      -o-transition: all 200ms ease;
      transition: all 200ms ease; }
  .signup--guide small {
    font-size: 0.8rem;
    text-align: center;
    font-weight: 600; }

.error {
  color: #fa323c; }
.release-note {
  width: 100%;
  display: block;
  border-bottom: 1px solid red;
  margin-bottom: 20px; }

.release-note:last-child {
  border-bottom: none;
  margin: 0; }

.release-note__meta {
  width: 100%; }

.release-note__meta--header {
  color: #fff;
  font-weight: 800; }

.release-note__meta--header small {
  font-size: 11px;
  font-weight: 400;
  margin-left: 10px; }

.release-note__meta--text {
  display: block;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  margin-top: 10px; }

.release-note__section {
  margin-top: 15px;
  display: block;
  font-size: 12px;
  font-weight: 600; }

.release-note__section--label {
  padding: 3px 7px;
  font-size: 10px;
  display: inline-block;
  border-radius: 2px;
  margin-bottom: 10px;
  text-transform: capitalize;
  font-weight: 800; }

.release-note__section--list-item {
  margin-bottom: 5px;
  line-height: 1.5;
  opacity: 0.5; }

.release-note__section--list-item b {
  font-size: 15px;
  margin-right: 5px; }

.release-note__row {
  display: block; }
.wrapper {
  display: -moz-flex;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -webkit-box-lines: single;
  -moz-box-lines: single;
  box-lines: single;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-box-align: center;
  box-align: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -o-align-items: center;
  align-items: center;
  -ms-flex-align: center; }

.bebo-btn {
  display: -moz-flex;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
  box-pack: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  -o-justify-content: center;
  justify-content: center;
  -ms-flex-pack: center;
  -webkit-box-align: center;
  box-align: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -o-align-items: center;
  align-items: center;
  -ms-flex-align: center;
  align-content: center;
  -ms-flex-line-pack: center; }

/*
body, html {
  overflow:hidden;
  height:100%;
  min-height: inherit;
  position:fixed;
  width:100%;
  top:0;
  left:0;
}
*/
.wrapper {
  max-width: 80rem;
  margin: 0 auto;
  padding: 0 1.33333rem; }

.wrapper {
  display: -moz-flex;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -webkit-box-lines: single;
  -moz-box-lines: single;
  box-lines: single;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-box-align: center;
  box-align: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -o-align-items: center;
  align-items: center;
  -ms-flex-align: center; }

.bebo-btn {
  display: -moz-flex;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
  box-pack: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  -o-justify-content: center;
  justify-content: center;
  -ms-flex-pack: center;
  -webkit-box-align: center;
  box-align: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -o-align-items: center;
  align-items: center;
  -ms-flex-align: center;
  align-content: center;
  -ms-flex-line-pack: center; }

/*
body, html {
  overflow:hidden;
  height:100%;
  min-height: inherit;
  position:fixed;
  width:100%;
  top:0;
  left:0;
}
*/
.wrapper {
  max-width: 80rem;
  margin: 0 auto;
  padding: 0 1.33333rem; }

.bebo-btn, .bebo-btn.text-button {
  font-size: 0.93333rem;
  line-height: 1.26667rem; }

/*
html, body {
  font-size: $font-size;
  line-height: 1.25;
  font-family: $font-family-base;
  font-weight: 400;
  word-wrap: break-word;
  color: $color-black;
  hyphens: auto;
}

%hero {
  @extend %font-size-huge;
  font-weight: 500;
  color: $color-brand;
}
h1 {
  @extend %font-size-x-large;
  font-weight: 300;
}
h2 {
  @extend %font-size-large;
  font-weight: 300;
}
h3 {
  @extend %font-size-medium;
  font-weight: 600;
}
h4 {
  @extend %font-size-medium;
  font-weight: 400;
  color: $color-grey4;
}
h5 {
  @extend %font-size-small;
  font-weight: 900;
  letter-spacing: 0.5px;
  color: $color-grey5;
}
p {
  @extend %font-size-default;
  font-weight: 400;
}
small {
  @extend %font-size-small;
}
a {
  color: #a0a0a0;
  cursor: pointer;
  text-decoration: none;
  &:hover {
    color: #ffffff;
  }
  @include transition(all .2s);
}
em, .em {
  font-style: italic;
}
strong, .strong {
  font-weight: bold;
}
button{
  font-family: $font-family-base;
  cursor: pointer;
}
textarea, input, select{
  font-family: $font-family-base;
}
*/
::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  color: #888888; }

::-moz-placeholder {
  /* Firefox 19+ */
  color: #888888; }

:-ms-input-placeholder {
  /* IE 10+ */
  color: #888888; }

:-moz-placeholder {
  /* Firefox 18- */
  color: #888888; }

/*
button, input, textarea {
  transition: all 200ms ease;
}

input[type="text"] {
  outline: 0;
  border: 0;
}

input[type="text"], textarea {
  border-radius: 2px;
}
*/
.bebo-btn {
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 1px;
  display: inline-block;
  color: #ffffff;
  text-align: center;
  background-color: #2c3032;
  cursor: pointer;
  -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
          box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
  height: 2.66667rem;
  padding: 0.73333rem 1.6rem;
  -webkit-transition: all 200ms ease;
  -o-transition: all 200ms ease;
  transition: all 200ms ease;
  border-radius: 1.33333rem; }
  .bebo-btn:hover {
    color: #1d2123;
    background-color: #fdc20a;
    text-decoration: none; }
  .bebo-btn.loading {
    background-size: 1.06667rem;
    background-repeat: no-repeat;
    background-position: center;
    text-indent: -999999;
    overflow: hidden;
    color: transparent; }
    .bebo-btn.loading:hover {
      background-color: #ffffff;
      color: transparent;
      border: 1px solid #dddddd; }
  .bebo-btn.disabled {
    background: #eeeeee;
    color: #eeeeee;
    border: 1px solid #dddddd; }
    .bebo-btn.disabled:hover {
      background: #eeeeee;
      color: #eeeeee;
      border: 1px solid #dddddd; }
  .bebo-btn.text-button {
    text-transform: none;
    background: none;
    border: 0;
    color: #b1b1b1;
    font-weight: 400;
    height: auto;
    margin: 1.33333rem auto; }
    .bebo-btn.text-button:hover {
      background: none;
      color: #FDC823; }

.bebo-btn, .user-avatar, .community-avatar {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center; }

.user-avatar {
  background-size: cover;
  height: 1.6rem;
  width: 1.6rem;
  border-radius: 50%;
  background-color: #5d5e6b; }

.community-avatar {
  background-size: cover;
  height: 3.33333rem;
  width: 3.33333rem;
  background-color: #5d5e6b; }

/*body,
html {
  color: $color-white;
}*/
.toast-banner {
  position: absolute;
  z-index: 101;
  top: 0;
  left: 0;
  right: 0;
  background: red;
  text-align: center;
  line-height: 2.5;
  overflow: hidden;
  -webkit-box-shadow: 0 0 5px black;
  box-shadow: 0 0 5px black; }

@-webkit-keyframes slideDown {
  0%,
  100% {
    -webkit-transform: translateY(-50px); }
  10%,
  90% {
    -webkit-transform: translateY(0px); } }

.intercom-toggle {
  margin-left: 10px;
  margin-right: 20px;
  padding: 5px 10px;
  border-radius: 2px;
  cursor: pointer;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: relative;
  background: #FDC823;
  -webkit-transition: all 200ms ease;
  -o-transition: all 200ms ease;
  transition: all 200ms ease; }
  .intercom-toggle:hover {
    background: #ebb202; }
  .intercom-toggle--text {
    color: #020202;
    text-transform: capitalize;
    font-size: 11px;
    font-weight: 700;
    line-height: 1; }
  .intercom-toggle--unread {
    overflow: hidden;
    text-indent: -9999999px;
    background: #565656;
    border-radius: 50%;
    width: 6px;
    height: 6px;
    position: absolute;
    right: -3px;
    top: 0;
    z-index: 3;
    -webkit-animation: pulse 1s infinite;
            animation: pulse 1s infinite;
    -webkit-animation-timing-function: ease;
            animation-timing-function: ease;
    -webkit-animation-direction: alternate;
            animation-direction: alternate; }

@-webkit-keyframes pulse {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 0.7; }
  100% {
    -webkit-transform: scale(1.3);
            transform: scale(1.3);
    opacity: 1; } }

@keyframes pulse {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 0.7; }
  100% {
    -webkit-transform: scale(1.3);
            transform: scale(1.3);
    opacity: 1; } }

#intercom-container .intercom-app .intercom-borderless-frame {
  max-height: 80vh !important; }
.wrapper {
  display: -moz-flex;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -webkit-box-lines: single;
  -moz-box-lines: single;
  box-lines: single;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-box-align: center;
  box-align: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -o-align-items: center;
  align-items: center;
  -ms-flex-align: center; }

.bebo-btn {
  display: -moz-flex;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
  box-pack: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  -o-justify-content: center;
  justify-content: center;
  -ms-flex-pack: center;
  -webkit-box-align: center;
  box-align: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -o-align-items: center;
  align-items: center;
  -ms-flex-align: center;
  align-content: center;
  -ms-flex-line-pack: center; }

/*
body, html {
  overflow:hidden;
  height:100%;
  min-height: inherit;
  position:fixed;
  width:100%;
  top:0;
  left:0;
}
*/
.wrapper {
  max-width: 80rem;
  margin: 0 auto;
  padding: 0 1.33333rem; }

.wrapper {
  display: -moz-flex;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -webkit-box-lines: single;
  -moz-box-lines: single;
  box-lines: single;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-box-align: center;
  box-align: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -o-align-items: center;
  align-items: center;
  -ms-flex-align: center; }

.bebo-btn {
  display: -moz-flex;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
  box-pack: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  -o-justify-content: center;
  justify-content: center;
  -ms-flex-pack: center;
  -webkit-box-align: center;
  box-align: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -o-align-items: center;
  align-items: center;
  -ms-flex-align: center;
  align-content: center;
  -ms-flex-line-pack: center; }

/*
body, html {
  overflow:hidden;
  height:100%;
  min-height: inherit;
  position:fixed;
  width:100%;
  top:0;
  left:0;
}
*/
.wrapper {
  max-width: 80rem;
  margin: 0 auto;
  padding: 0 1.33333rem; }

.bebo-btn, .bebo-btn.text-button {
  font-size: 0.93333rem;
  line-height: 1.26667rem; }

/*
html, body {
  font-size: $font-size;
  line-height: 1.25;
  font-family: $font-family-base;
  font-weight: 400;
  word-wrap: break-word;
  color: $color-black;
  hyphens: auto;
}

%hero {
  @extend %font-size-huge;
  font-weight: 500;
  color: $color-brand;
}
h1 {
  @extend %font-size-x-large;
  font-weight: 300;
}
h2 {
  @extend %font-size-large;
  font-weight: 300;
}
h3 {
  @extend %font-size-medium;
  font-weight: 600;
}
h4 {
  @extend %font-size-medium;
  font-weight: 400;
  color: $color-grey4;
}
h5 {
  @extend %font-size-small;
  font-weight: 900;
  letter-spacing: 0.5px;
  color: $color-grey5;
}
p {
  @extend %font-size-default;
  font-weight: 400;
}
small {
  @extend %font-size-small;
}
a {
  color: #a0a0a0;
  cursor: pointer;
  text-decoration: none;
  &:hover {
    color: #ffffff;
  }
  @include transition(all .2s);
}
em, .em {
  font-style: italic;
}
strong, .strong {
  font-weight: bold;
}
button{
  font-family: $font-family-base;
  cursor: pointer;
}
textarea, input, select{
  font-family: $font-family-base;
}
*/
::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  color: #888888; }

::-moz-placeholder {
  /* Firefox 19+ */
  color: #888888; }

:-ms-input-placeholder {
  /* IE 10+ */
  color: #888888; }

:-moz-placeholder {
  /* Firefox 18- */
  color: #888888; }

/*
button, input, textarea {
  transition: all 200ms ease;
}

input[type="text"] {
  outline: 0;
  border: 0;
}

input[type="text"], textarea {
  border-radius: 2px;
}
*/
.bebo-btn {
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 1px;
  display: inline-block;
  color: #ffffff;
  text-align: center;
  background-color: #2c3032;
  cursor: pointer;
  -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
          box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
  height: 2.66667rem;
  padding: 0.73333rem 1.6rem;
  -webkit-transition: all 200ms ease;
  -o-transition: all 200ms ease;
  transition: all 200ms ease;
  border-radius: 1.33333rem; }
  .bebo-btn:hover {
    color: #1d2123;
    background-color: #fdc20a;
    text-decoration: none; }
  .bebo-btn.loading {
    background-size: 1.06667rem;
    background-repeat: no-repeat;
    background-position: center;
    text-indent: -999999;
    overflow: hidden;
    color: transparent; }
    .bebo-btn.loading:hover {
      background-color: #ffffff;
      color: transparent;
      border: 1px solid #dddddd; }
  .bebo-btn.disabled {
    background: #eeeeee;
    color: #eeeeee;
    border: 1px solid #dddddd; }
    .bebo-btn.disabled:hover {
      background: #eeeeee;
      color: #eeeeee;
      border: 1px solid #dddddd; }
  .bebo-btn.text-button {
    text-transform: none;
    background: none;
    border: 0;
    color: #b1b1b1;
    font-weight: 400;
    height: auto;
    margin: 1.33333rem auto; }
    .bebo-btn.text-button:hover {
      background: none;
      color: #FDC823; }

.bebo-btn, .user-avatar, .community-avatar {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center; }

.user-avatar {
  background-size: cover;
  height: 1.6rem;
  width: 1.6rem;
  border-radius: 50%;
  background-color: #5d5e6b; }

.community-avatar {
  background-size: cover;
  height: 3.33333rem;
  width: 3.33333rem;
  background-color: #5d5e6b; }

/*body,
html {
  color: $color-white;
}*/
.toast-banner {
  position: absolute;
  z-index: 101;
  top: 0;
  left: 0;
  right: 0;
  background: red;
  text-align: center;
  line-height: 2.5;
  overflow: hidden;
  -webkit-box-shadow: 0 0 5px black;
  box-shadow: 0 0 5px black; }

@-webkit-keyframes slideDown {
  0%,
  100% {
    -webkit-transform: translateY(-50px); }
  10%,
  90% {
    -webkit-transform: translateY(0px); } }

.app-no-drag {
  -webkit-app-region: no-drag;
  cursor: pointer; }

.app-navbar {
  width: 100%;
  height: 100%;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-app-region: drag;
  background: #070707;
  border-bottom: 1px solid #191918;
  height: 42px;
  padding: 0 10px;
  -webkit-box-shadow: 0 2px 7px 0 rgba(0, 0, 0, 0.3);
          box-shadow: 0 2px 7px 0 rgba(0, 0, 0, 0.3); }

.app-navbar.is-transparent {
  background: transparent;
  -webkit-box-shadow: 0 2px 7px 0 transparent;
          box-shadow: 0 2px 7px 0 transparent;
  border-bottom: none; }

.app-navbar__center {
  width: 100px;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center; }

.app-navbar__left,
.app-navbar__right {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: 390px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center; }

.app-navbar__left {
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start; }

.app-navbar__right {
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end; }

.app-navbar__help {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  -webkit-app-region: no-drag; }

.app-navbar__controls {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row; }

.app-navbar__user {
  -webkit-app-region: no-drag;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-left: 15px;
  cursor: pointer;
  color: #fff;
  opacity: 0.9; }
  .app-navbar__user:hover {
    opacity: 1; }

.app-navbar__version {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  margin-left: 15px;
  -webkit-app-region: no-drag; }

.app-navbar__env {
  cursor: default;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  font-size: 10px;
  font-weight: 800;
  margin-top: 4px;
  margin-left: 5px;
  opacity: 0.5;
  -webkit-app-region: no-drag; }

.app-navbar__logo {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  -webkit-app-region: no-drag; }

.app-navbar__user--icon {
  margin-left: 14x;
  color: #fff; }

.app-navbar__user--name {
  font-size: 13px;
  font-weight: 400;
  color: #fff; }

.app-navbar--logo-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  position: absolute;
  left: 0;
  top: 0;
  margin: 0.66667rem 0.86667rem 0 12px;
  -webkit-app-region: no-drag; }

.app-navbar--version__important {
  padding: 3px 7px;
  font-size: 0.73333rem;
  border-radius: 4px;
  display: block;
  background-color: #242424;
  margin: auto;
  vertical-align: middle;
  font-weight: 500; }

.app-navbar--version__important.restart {
  color: #306883; }
  .app-navbar--version__important.restart .dot {
    /*
    this animation takes ~5% CPU, can't do that
    animation-name: updatePules;
    animation-duration: 2s;
    animation-iteration-count: infinite;

*/
    background-color: #3086ac;
    -webkit-box-shadow: 0 0 4px 1px #2d99c7;
            box-shadow: 0 0 4px 1px #2d99c7; }

.app-navbar--version__important.new-release {
  color: #30824e;
  cursor: pointer; }
  .app-navbar--version__important.new-release:hover {
    background-color: #363636; }
  .app-navbar--version__important.new-release .dot {
    background-color: #3aad5d;
    -webkit-box-shadow: 0 0 4px 1px #3aad5d;
            box-shadow: 0 0 4px 1px #3aad5d; }

.app-navbar--version__important .dot {
  width: 0.33333rem;
  height: 0.33333rem;
  border-radius: 50%;
  display: inline-block;
  margin-right: 0.33333rem;
  margin-bottom: 0.06667rem; }

.app-navbar--nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  padding: 0 30px; }

.app-navbar--link {
  position: relative;
  margin-left: 30px;
  height: 42px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-app-region: no-drag; }
  .app-navbar--link * {
    -webkit-transition: all 200ms;
    -o-transition: all 200ms;
    transition: all 200ms; }
  .app-navbar--link:hover span {
    color: #fff; }
  .app-navbar--link:first-child {
    margin-left: 0; }
  .app-navbar--link span {
    color: #a0a0a0;
    font-weight: 600;
    font-size: 13px;
    text-transform: capitalize; }
  .app-navbar--link svg {
    width: 1.2rem;
    height: 1.2rem; }
  .app-navbar--link.is-active span {
    text-shadow: 0 0 15px rgba(253, 253, 253, 0.57); }

.app-navbar--app-controls {
  position: absolute;
  right: 0;
  top: 0.53333rem;
  margin: auto;
  margin-right: 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-app-region: no-drag; }

.app-navbar--icon {
  position: relative;
  margin: auto;
  height: 24px;
  width: 24px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-left: 10px;
  padding: 0;
  -webkit-app-region: no-drag; }
  .app-navbar--icon * {
    -webkit-transition: all 200ms;
    -o-transition: all 200ms;
    transition: all 200ms; }
  .app-navbar--icon:hover svg * {
    fill: #fff; }
  .app-navbar--icon svg {
    margin: auto;
    width: 18px;
    height: 18px; }
  .app-navbar--icon:first-child {
    margin-left: 10px; }

.new-release__overlay {
  background-color: rgba(0, 0, 0, 0.45);
  width: 100%;
  height: 100%;
  position: fixed;
  display: block;
  z-index: 100;
  top: 0;
  left: 0; }

.new-release__drop-down {
  width: 340px;
  height: auto;
  background: #121212;
  -webkit-box-shadow: 0 2px 30px 2px rgba(0, 0, 0, 0.6);
          box-shadow: 0 2px 30px 2px rgba(0, 0, 0, 0.6);
  border-radius: 4px;
  display: block;
  position: absolute;
  top: 50px;
  padding: 15px;
  left: 50px;
  z-index: 1000000; }
.wrapper {
  display: -moz-flex;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -webkit-box-lines: single;
  -moz-box-lines: single;
  box-lines: single;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-box-align: center;
  box-align: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -o-align-items: center;
  align-items: center;
  -ms-flex-align: center; }

.bebo-btn {
  display: -moz-flex;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
  box-pack: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  -o-justify-content: center;
  justify-content: center;
  -ms-flex-pack: center;
  -webkit-box-align: center;
  box-align: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -o-align-items: center;
  align-items: center;
  -ms-flex-align: center;
  align-content: center;
  -ms-flex-line-pack: center; }

/*
body, html {
  overflow:hidden;
  height:100%;
  min-height: inherit;
  position:fixed;
  width:100%;
  top:0;
  left:0;
}
*/
.wrapper {
  max-width: 80rem;
  margin: 0 auto;
  padding: 0 1.33333rem; }

.wrapper {
  display: -moz-flex;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -webkit-box-lines: single;
  -moz-box-lines: single;
  box-lines: single;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-box-align: center;
  box-align: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -o-align-items: center;
  align-items: center;
  -ms-flex-align: center; }

.bebo-btn {
  display: -moz-flex;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
  box-pack: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  -o-justify-content: center;
  justify-content: center;
  -ms-flex-pack: center;
  -webkit-box-align: center;
  box-align: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -o-align-items: center;
  align-items: center;
  -ms-flex-align: center;
  align-content: center;
  -ms-flex-line-pack: center; }

/*
body, html {
  overflow:hidden;
  height:100%;
  min-height: inherit;
  position:fixed;
  width:100%;
  top:0;
  left:0;
}
*/
.wrapper {
  max-width: 80rem;
  margin: 0 auto;
  padding: 0 1.33333rem; }

.bebo-btn, .bebo-btn.text-button {
  font-size: 0.93333rem;
  line-height: 1.26667rem; }

/*
html, body {
  font-size: $font-size;
  line-height: 1.25;
  font-family: $font-family-base;
  font-weight: 400;
  word-wrap: break-word;
  color: $color-black;
  hyphens: auto;
}

%hero {
  @extend %font-size-huge;
  font-weight: 500;
  color: $color-brand;
}
h1 {
  @extend %font-size-x-large;
  font-weight: 300;
}
h2 {
  @extend %font-size-large;
  font-weight: 300;
}
h3 {
  @extend %font-size-medium;
  font-weight: 600;
}
h4 {
  @extend %font-size-medium;
  font-weight: 400;
  color: $color-grey4;
}
h5 {
  @extend %font-size-small;
  font-weight: 900;
  letter-spacing: 0.5px;
  color: $color-grey5;
}
p {
  @extend %font-size-default;
  font-weight: 400;
}
small {
  @extend %font-size-small;
}
a {
  color: #a0a0a0;
  cursor: pointer;
  text-decoration: none;
  &:hover {
    color: #ffffff;
  }
  @include transition(all .2s);
}
em, .em {
  font-style: italic;
}
strong, .strong {
  font-weight: bold;
}
button{
  font-family: $font-family-base;
  cursor: pointer;
}
textarea, input, select{
  font-family: $font-family-base;
}
*/
::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  color: #888888; }

::-moz-placeholder {
  /* Firefox 19+ */
  color: #888888; }

:-ms-input-placeholder {
  /* IE 10+ */
  color: #888888; }

:-moz-placeholder {
  /* Firefox 18- */
  color: #888888; }

/*
button, input, textarea {
  transition: all 200ms ease;
}

input[type="text"] {
  outline: 0;
  border: 0;
}

input[type="text"], textarea {
  border-radius: 2px;
}
*/
.bebo-btn {
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 1px;
  display: inline-block;
  color: #ffffff;
  text-align: center;
  background-color: #2c3032;
  cursor: pointer;
  -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
          box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
  height: 2.66667rem;
  padding: 0.73333rem 1.6rem;
  -webkit-transition: all 200ms ease;
  -o-transition: all 200ms ease;
  transition: all 200ms ease;
  border-radius: 1.33333rem; }
  .bebo-btn:hover {
    color: #1d2123;
    background-color: #fdc20a;
    text-decoration: none; }
  .bebo-btn.loading {
    background-size: 1.06667rem;
    background-repeat: no-repeat;
    background-position: center;
    text-indent: -999999;
    overflow: hidden;
    color: transparent; }
    .bebo-btn.loading:hover {
      background-color: #ffffff;
      color: transparent;
      border: 1px solid #dddddd; }
  .bebo-btn.disabled {
    background: #eeeeee;
    color: #eeeeee;
    border: 1px solid #dddddd; }
    .bebo-btn.disabled:hover {
      background: #eeeeee;
      color: #eeeeee;
      border: 1px solid #dddddd; }
  .bebo-btn.text-button {
    text-transform: none;
    background: none;
    border: 0;
    color: #b1b1b1;
    font-weight: 400;
    height: auto;
    margin: 1.33333rem auto; }
    .bebo-btn.text-button:hover {
      background: none;
      color: #FDC823; }

.bebo-btn, .user-avatar, .community-avatar {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center; }

.user-avatar {
  background-size: cover;
  height: 1.6rem;
  width: 1.6rem;
  border-radius: 50%;
  background-color: #5d5e6b; }

.community-avatar {
  background-size: cover;
  height: 3.33333rem;
  width: 3.33333rem;
  background-color: #5d5e6b; }

/*body,
html {
  color: $color-white;
}*/
.toast-banner {
  position: absolute;
  z-index: 101;
  top: 0;
  left: 0;
  right: 0;
  background: red;
  text-align: center;
  line-height: 2.5;
  overflow: hidden;
  -webkit-box-shadow: 0 0 5px black;
  box-shadow: 0 0 5px black; }

@-webkit-keyframes slideDown {
  0%,
  100% {
    -webkit-transform: translateY(-50px); }
  10%,
  90% {
    -webkit-transform: translateY(0px); } }

.news {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.5);
  position: fixed;
  top: 42px;
  left: 0;
  bottom: 61px;
  right: 0; }

.news__container {
  padding: 2.33333rem 2.66667rem;
  overflow: auto;
  height: 100%;
  width: 80%;
  max-width: 460px;
  margin: 15px;
  background: #1f1f1f;
  border-radius: 8px;
  height: 95%; }

.news__article {
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #111; }
  .news__article:last-of-type {
    border-bottom: 0;
    padding-bottom: 0; }

.news__article h2 {
  font-size: 1.6rem;
  font-weight: 500; }

.news__article p {
  margin-top: 1rem;
  font-size: 0.86667rem;
  line-height: 1.4; }

.news__article img {
  max-width: 100%;
  margin-top: 1rem; }

.news__article__read-more {
  display: block;
  color: #fdc824;
  margin-top: 0.66667rem; }
  .news__article__read-more:hover {
    color: #ecb302; }
.wrapper {
  display: -moz-flex;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -webkit-box-lines: single;
  -moz-box-lines: single;
  box-lines: single;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-box-align: center;
  box-align: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -o-align-items: center;
  align-items: center;
  -ms-flex-align: center; }

.bebo-btn {
  display: -moz-flex;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
  box-pack: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  -o-justify-content: center;
  justify-content: center;
  -ms-flex-pack: center;
  -webkit-box-align: center;
  box-align: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -o-align-items: center;
  align-items: center;
  -ms-flex-align: center;
  align-content: center;
  -ms-flex-line-pack: center; }

/*
body, html {
  overflow:hidden;
  height:100%;
  min-height: inherit;
  position:fixed;
  width:100%;
  top:0;
  left:0;
}
*/
.wrapper {
  max-width: 80rem;
  margin: 0 auto;
  padding: 0 1.33333rem; }

.wrapper {
  display: -moz-flex;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -webkit-box-lines: single;
  -moz-box-lines: single;
  box-lines: single;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-box-align: center;
  box-align: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -o-align-items: center;
  align-items: center;
  -ms-flex-align: center; }

.bebo-btn {
  display: -moz-flex;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
  box-pack: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  -o-justify-content: center;
  justify-content: center;
  -ms-flex-pack: center;
  -webkit-box-align: center;
  box-align: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -o-align-items: center;
  align-items: center;
  -ms-flex-align: center;
  align-content: center;
  -ms-flex-line-pack: center; }

/*
body, html {
  overflow:hidden;
  height:100%;
  min-height: inherit;
  position:fixed;
  width:100%;
  top:0;
  left:0;
}
*/
.wrapper {
  max-width: 80rem;
  margin: 0 auto;
  padding: 0 1.33333rem; }

.bebo-btn, .bebo-btn.text-button {
  font-size: 0.93333rem;
  line-height: 1.26667rem; }

/*
html, body {
  font-size: $font-size;
  line-height: 1.25;
  font-family: $font-family-base;
  font-weight: 400;
  word-wrap: break-word;
  color: $color-black;
  hyphens: auto;
}

%hero {
  @extend %font-size-huge;
  font-weight: 500;
  color: $color-brand;
}
h1 {
  @extend %font-size-x-large;
  font-weight: 300;
}
h2 {
  @extend %font-size-large;
  font-weight: 300;
}
h3 {
  @extend %font-size-medium;
  font-weight: 600;
}
h4 {
  @extend %font-size-medium;
  font-weight: 400;
  color: $color-grey4;
}
h5 {
  @extend %font-size-small;
  font-weight: 900;
  letter-spacing: 0.5px;
  color: $color-grey5;
}
p {
  @extend %font-size-default;
  font-weight: 400;
}
small {
  @extend %font-size-small;
}
a {
  color: #a0a0a0;
  cursor: pointer;
  text-decoration: none;
  &:hover {
    color: #ffffff;
  }
  @include transition(all .2s);
}
em, .em {
  font-style: italic;
}
strong, .strong {
  font-weight: bold;
}
button{
  font-family: $font-family-base;
  cursor: pointer;
}
textarea, input, select{
  font-family: $font-family-base;
}
*/
.big-logo {
  display: inline-block;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden; }

::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  color: #888888; }

::-moz-placeholder {
  /* Firefox 19+ */
  color: #888888; }

:-ms-input-placeholder {
  /* IE 10+ */
  color: #888888; }

:-moz-placeholder {
  /* Firefox 18- */
  color: #888888; }

/*
button, input, textarea {
  transition: all 200ms ease;
}

input[type="text"] {
  outline: 0;
  border: 0;
}

input[type="text"], textarea {
  border-radius: 2px;
}
*/
.bebo-btn {
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 1px;
  display: inline-block;
  color: #ffffff;
  text-align: center;
  background-color: #2c3032;
  cursor: pointer;
  -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
          box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
  height: 2.66667rem;
  padding: 0.73333rem 1.6rem;
  -webkit-transition: all 200ms ease;
  -o-transition: all 200ms ease;
  transition: all 200ms ease;
  border-radius: 1.33333rem; }
  .bebo-btn:hover {
    color: #1d2123;
    background-color: #fdc20a;
    text-decoration: none; }
  .bebo-btn.loading {
    background-size: 1.06667rem;
    background-repeat: no-repeat;
    background-position: center;
    text-indent: -999999;
    overflow: hidden;
    color: transparent; }
    .bebo-btn.loading:hover {
      background-color: #ffffff;
      color: transparent;
      border: 1px solid #dddddd; }
  .bebo-btn.disabled {
    background: #eeeeee;
    color: #eeeeee;
    border: 1px solid #dddddd; }
    .bebo-btn.disabled:hover {
      background: #eeeeee;
      color: #eeeeee;
      border: 1px solid #dddddd; }
  .bebo-btn.text-button {
    text-transform: none;
    background: none;
    border: 0;
    color: #b1b1b1;
    font-weight: 400;
    height: auto;
    margin: 1.33333rem auto; }
    .bebo-btn.text-button:hover {
      background: none;
      color: #FDC823; }

.bebo-btn, .user-avatar, .community-avatar, .big-logo {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center; }

.user-avatar {
  background-size: cover;
  height: 1.6rem;
  width: 1.6rem;
  border-radius: 50%;
  background-color: #5d5e6b; }

.community-avatar {
  background-size: cover;
  height: 3.33333rem;
  width: 3.33333rem;
  background-color: #5d5e6b; }

/*body,
html {
  color: $color-white;
}*/
.toast-banner {
  position: absolute;
  z-index: 101;
  top: 0;
  left: 0;
  right: 0;
  background: red;
  text-align: center;
  line-height: 2.5;
  overflow: hidden;
  -webkit-box-shadow: 0 0 5px black;
  box-shadow: 0 0 5px black; }

@-webkit-keyframes slideDown {
  0%,
  100% {
    -webkit-transform: translateY(-50px); }
  10%,
  90% {
    -webkit-transform: translateY(0px); } }

.legal {
  overflow: auto;
  height: 100vh;
  background-image: url(https://s3-us-west-2.amazonaws.com/bebo-widgets/images/bg-arrows3.png), url(https://s3-us-west-2.amazonaws.com/bebo-widgets/images/bg-stripes2.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: left top;
  background-color: #191919; }

.about-us {
  height: 100vh; }

.hero {
  padding: 10vh 0;
  text-align: center; }
  .hero a {
    color: white; }
    .hero a:hover {
      text-decoration: none; }
  .hero h2 {
    margin-bottom: 0;
    text-transform: uppercase; }

.content {
  color: white; }
  .content article {
    max-width: 33.33333rem;
    width: 85%;
    margin: 0 auto 40px;
    font-size: 13px; }
    .content article h1 {
      color: #FFFFFF;
      font-size: 24px;
      font-weight: bold;
      margin-bottom: 40px; }
    .content article h2 {
      color: #FFFFFF;
      font-size: 19px;
      font-weight: bold;
      margin-bottom: 20px; }
    .content article h3 {
      font-size: 17px;
      margin-top: 20px;
      font-weight: bold; }
    .content article h4 {
      color: #ffffff;
      font-weight: bold;
      font-size: 15px;
      margin-top: 20px; }
    .content article strong {
      display: block;
      margin-top: 20px;
      margin-bottom: 15px; }
    .content article p {
      margin-top: 15px;
      font-size: 13px;
      line-height: 1.4; }
    .content article ul {
      margin: 20px 0;
      padding: 0 12px;
      list-style-type: disc !important;
      color: #ffffff; }
      .content article ul li {
        margin-top: 10px; }
        .content article ul li:first-of-type {
          margin-top: 0; }
    .content article ol {
      margin: 20px;
      list-style-type: lower-roman !important; }
    .content article ul ul, .content article ul ol, .content article ol ol {
      margin-left: 1.33333rem; }

.big-logo {
  background-image: url(https://s3-us-west-2.amazonaws.com/bebo-widgets/images/bebo-logo.svg);
  height: 4rem;
  width: 12.93333rem; }
.stream-health-card {
  padding: 10px;
  background: #0a0a0a;
  width: 280px;
  border-radius: 5px;
  overflow: hidden;
  border: 1px solid #1b1b1b;
  -webkit-box-shadow: 0 2px 19px 1px rgba(0, 0, 0, 0.69);
          box-shadow: 0 2px 19px 1px rgba(0, 0, 0, 0.69);
  text-align: left; }

.stream-health-card.has-message {
  width: 300px; }

.stream-health-card__header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  padding-bottom: 10px; }

.stream-health-card__header--icon {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  margin-right: 10px; }

.stream-health-card__header--title {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  font-weight: 600; }

.stream-health-card__header--status {
  text-transform: capitalize;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  font-weight: 600; }

.stream-health-card__frames--value .streaming-bar__health--level--bar {
  height: 10px; }

.stream-health-card__message {
  padding: 10px 8px;
  margin-bottom: 10px;
  border-radius: 2px;
  white-space: normal;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4; }

.stream-health-card__message:last-child {
  margin-bottom: 0; }

.stream-health-card__stats--row {
  font-size: 12px;
  width: 100%;
  padding: 6px 0; }

.stream-health-card__stats--row:last-child {
  padding-bottom: 0; }

.stream-health-card__CPU {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  font-size: 12px;
  font-weight: 400; }

.stream-health-card__CPU--item {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 50%;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center; }

.stream-health-card__CPU--item:last-child {
  margin-left: 15px; }

.stream-health-card__CPU--item.single {
  margin-left: 0 !important; }

.stream-health-card__CPU--item--text {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  text-align: left;
  color: #919191; }

.stream-health-card__CPU--item--value {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  text-align: right;
  color: #fff;
  opacity: 0.7; }

.stream-health-card__frames {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  font-size: 14px;
  font-weight: 400; }

.stream-health-card__frames--text {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  color: #FFF; }

.stream-health-card__frames--value {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: #fff;
  opacity: 0.7; }
.app-root {
  background-image: url(https://a.imgdropt.com/image/28356f2c-a4a3-44e1-84ac-f4b15a7d0ee4);
  background-repeat: repeat; }

.Resizer {
  background: #292929;
  opacity: 1;
  z-index: 100;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  background-clip: padding-box; }

.Resizer:hover {
  -webkit-transition: all 2s ease;
  -o-transition: all 2s ease;
  transition: all 2s ease; }

.Resizer.horizontal {
  height: 11px;
  margin: -5px 0;
  border-top: 5px solid rgba(255, 255, 255, 0);
  border-bottom: 5px solid rgba(255, 255, 255, 0);
  cursor: row-resize;
  width: 100%; }

.Resizer.horizontal:hover {
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent; }

.Resizer.vertical {
  width: 11px;
  margin: 0 -5px;
  border-left: 5px solid rgba(255, 255, 255, 0);
  border-right: 5px solid rgba(255, 255, 255, 0);
  cursor: col-resize; }

.Resizer.vertical:hover {
  border-left: 5px solid transparent;
  border-right: 5px solid transparent; }

.Resizer.disabled {
  cursor: not-allowed; }

.Resizer.disabled:hover {
  border-color: transparent; }

/*# sourceMappingURL=common.bf9b50a8.css.map*/