@font-face {
  font-family: 'UbuntuRegular';
  src: url("../../fonts/ubuntur-webfont.eot?1188017abdc0");
  src: url("../../fonts/ubuntur-webfont.eot?&1188017abdc0#iefix") format("eot"), url("../../fonts/ubuntur-webfont.woff?896a82003cd1") format("woff"), url("../../fonts/ubuntur-webfont.ttf?37cf452b3f58") format("truetype"), url("../../fonts/ubuntur-webfont.svg?396700312810#webfontH0ji1hXa") format("svg");
  font-weight: normal;
  font-style: normal; }

@font-face {
  font-family: 'UbuntuBold';
  src: url("../../fonts/ubuntub-webfont.eot?a870ebadce32");
  src: url("../../fonts/ubuntub-webfont.eot?&a870ebadce32#iefix") format("eot"), url("../../fonts/ubuntub-webfont.woff?6455d1004bc5") format("woff"), url("../../fonts/ubuntub-webfont.ttf?abee57aeee27") format("truetype"), url("../../fonts/ubuntub-webfont.svg?693d742037eb#webfontOIyUgfKw") format("svg");
  font-weight: normal;
  font-style: normal; }

@font-face {
  font-family: 'UbuntuMedium';
  src: url("../../fonts/ubuntum-webfont.eot?d8f8ba0da549");
  src: url("../../fonts/ubuntum-webfont.eot?&d8f8ba0da549#iefix") format("eot"), url("../../fonts/ubuntum-webfont.woff?a7fc63c36394") format("woff"), url("../../fonts/ubuntum-webfont.ttf?b720a4d699c2") format("truetype"), url("../../fonts/ubuntum-webfont.svg?c08a26c0b9c4#webfontl8qOUOft") format("svg");
  font-weight: normal;
  font-style: normal; }

/* Note this is a theme file -- Only color css allowed here! */
/*
 * Before using one these variables, check if a mixin could be used. If
 * the lightmode color and darkmode color in the design both match the colors
 * here, then we can use a mixin from _color_mixins.scss instead. May need to
 * build the mixin first, following the example of existing ones.
 *
 * (Darkmode colors not necessarily finalized, should check back later with the
 * figma to confirm them)
 */
.sendTip .buttons {
  color: #ffffff;
  background-color: #f47321;
  border-color: #b1b1b1; }
  .sendTip .buttons:hover {
    background-color: #ff6300; }
  .sendTip .buttons.disabled {
    color: #cccccc;
    background-color: #888888; }
  .darkmode .sendTip .buttons:focus {
    outline: none;
    box-shadow: 0 0 0 2px #68b5f0; }

.sendTip .menu {
  background-color: #ffffff;
  box-shadow: 0 1px 5px #333; }
  .darkmode .sendTip .menu {
    background-color: #202223; }
  .sendTip .menu .menuItem {
    border-color: #c9cbcc;
    color: #000000; }
    .darkmode .sendTip .menu .menuItem {
      border-color: #2a2c2e;
      color: #B3B3B3; }
    .sendTip .menu .menuItem.disabled {
      color: #aaaaaa; }
      .darkmode .sendTip .menu .menuItem.disabled {
        color: #606060; }
    .sendTip .menu .menuItem dt.selected {
      background: transparent url(../../tsdefaultassets/black-checkmark.svg?b58253f8c0e7) no-repeat 8px 45%; }
      .darkmode .sendTip .menu .menuItem dt.selected {
        background: transparent url(../../tsdefaultassets/gray-checkmark.svg?f16b45d972c5) no-repeat 8px 45%; }
    .sendTip .menu .menuItem:hover {
      border-color: #767b7d;
      text-shadow: #aaaaaa 0 0 0; }

/* Note this is a theme file -- Only color css allowed here! */
/* Note this is a theme file -- Only color css allowed here! */
/*
 * Before using one these variables, check if a mixin could be used. If
 * the lightmode color and darkmode color in the design both match the colors
 * here, then we can use a mixin from _color_mixins.scss instead. May need to
 * build the mixin first, following the example of existing ones.
 *
 * (Darkmode colors not necessarily finalized, should check back later with the
 * figma to confirm them)
 */
.tab.chat-tab-handle.active {
  color: #dc5500; }
  .darkmode .tab.chat-tab-handle.active {
    color: #68B5F0; }

#ChatTabContainer {
  background-color: #fff;
  border: 1px solid #acacac; }
  .darkmode #ChatTabContainer {
    background-color: #202223;
    border: 1px solid #474747; }
  #ChatTabContainer #tab-row {
    background-color: #7f7f7f;
    border-bottom: none; }
    .darkmode #ChatTabContainer #tab-row {
      background-color: #1a1a1c; }
  #ChatTabContainer .refreshUsersLink {
    color: #0a5a83; }
    .darkmode #ChatTabContainer .refreshUsersLink {
      color: #68B5F0; }
  #ChatTabContainer .notesIcon {
    background: url(../../tsdefaultassets/notes_light.svg?9743cb4941b2) no-repeat center; }
    .darkmode #ChatTabContainer .notesIcon {
      background: url(../../tsdefaultassets/notes_dm_light.svg?5f4262c591e5) no-repeat center; }
    #ChatTabContainer .notesIcon.hover {
      background: url(../../tsdefaultassets/notes.svg?83c71ae8f502) no-repeat center; }
      .darkmode #ChatTabContainer .notesIcon.hover {
        background: url(../../tsdefaultassets/notes_dm.svg?aebbc4d049ee) no-repeat center; }

.noteIconSvg.tipMsg svg, .noteIconSvg.regMsg svg, .noteIconSvg.tipMsg svg, .noteIconSvg.regMsg svg {
  stroke: #6C6C78;
  fill: transparent !important;
  color: transparent !important; }
  .noteIconSvg.tipMsg svg:hover, .noteIconSvg.regMsg svg:hover, .noteIconSvg.tipMsg svg:hover, .noteIconSvg.regMsg svg:hover {
    stroke: #272F35; }

.darkmode .noteIconSvg.regMsg svg,
.draggableCanvasWindow .noteIconSvg.regMsg svg,
.draggableCanvasWindow .noteIconSvg.regMsg.fvm svg, .darkmode .noteIconSvg.regMsg svg,
.draggableCanvasWindow .noteIconSvg.regMsg svg,
.draggableCanvasWindow .noteIconSvg.regMsg.fvm svg {
  stroke: #DDD;
  fill: transparent !important;
  color: transparent !important; }
  .darkmode .noteIconSvg.regMsg svg:hover,
  .draggableCanvasWindow .noteIconSvg.regMsg svg:hover,
  .draggableCanvasWindow .noteIconSvg.regMsg.fvm svg:hover, .darkmode .noteIconSvg.regMsg svg:hover,
  .draggableCanvasWindow .noteIconSvg.regMsg svg:hover,
  .draggableCanvasWindow .noteIconSvg.regMsg.fvm svg:hover {
    stroke: #FFF; }

/* Note this is a theme file -- Only color css allowed here! */
/* Note this is a theme file -- Only color css allowed here! */
.updatesTabContents {
  background-color: #ffffff; }
  .darkmode .updatesTabContents {
    background-color: #202223; }

/* Note this is a theme file -- Only color css allowed here! */
/*
 * Before using one these variables, check if a mixin could be used. If
 * the lightmode color and darkmode color in the design both match the colors
 * here, then we can use a mixin from _color_mixins.scss instead. May need to
 * build the mixin first, following the example of existing ones.
 *
 * (Darkmode colors not necessarily finalized, should check back later with the
 * figma to confirm them)
 */
.twitterUpdateRow, .userUpdatesPanel {
  background-color: #ffe5be;
  border-color: #dabb95; }
  .darkmode .twitterUpdateRow, .darkmode .userUpdatesPanel {
    background-color: #ffe5be;
    border-color: #d9bb97; }
  .twitterUpdateRow.uipExp, .userUpdatesPanel.uipExp {
    background-color: #fff;
    border-color: #F0F0F0; }
    .darkmode .twitterUpdateRow.uipExp, .darkmode .userUpdatesPanel.uipExp {
      background-color: #2a2c2e;
      border-color: #1a1a1b; }
  .twitterUpdateRow.seen, .userUpdatesPanel.seen {
    background-color: #FCEADC;
    border-color: #EFEFEF; }
    .twitterUpdateRow.seen.uipExp, .userUpdatesPanel.seen.uipExp {
      background-color: #F8F9FA; }
  .twitterUpdateRow .contentSection, .userUpdatesPanel .contentSection {
    color: #494949; }
    .twitterUpdateRow .contentSection .tweetLink, .userUpdatesPanel .contentSection .tweetLink {
      color: #e45900; }
  .twitterUpdateRow .timeSince, .userUpdatesPanel .timeSince {
    color: #7f7f7f; }
    .darkmode .twitterUpdateRow .timeSince, .darkmode .userUpdatesPanel .timeSince {
      color: #6c6c78; }
  .twitterUpdateRow .twitterLink, .twitterUpdateRow .tweetLink, .userUpdatesPanel .twitterLink, .userUpdatesPanel .tweetLink {
    color: #0a5a83; }
    .darkmode .twitterUpdateRow .twitterLink, .darkmode .twitterUpdateRow .tweetLink, .darkmode .userUpdatesPanel .twitterLink, .darkmode .userUpdatesPanel .tweetLink {
      color: #68B5F0; }
  .twitterUpdateRow.seen, .userUpdatesPanel.seen {
    background-color: #efefef;
    border-color: #c1c1c1; }
    .darkmode .twitterUpdateRow.seen, .darkmode .userUpdatesPanel.seen {
      background-color: #2a2c2e;
      border-color: #1a1a1b; }
      .darkmode .twitterUpdateRow.seen .contentSection, .darkmode .userUpdatesPanel.seen .contentSection {
        color: #B3B3B3; }

/*
 * Before using one these variables, check if a mixin could be used. If
 * the lightmode color and darkmode color in the design both match the colors
 * here, then we can use a mixin from _color_mixins.scss instead. May need to
 * build the mixin first, following the example of existing ones.
 *
 * (Darkmode colors not necessarily finalized, should check back later with the
 * figma to confirm them)
 */
#UserUpdatesPanel {
  background-color: #ffffff;
  border-color: #2C6990; }
  .darkmode #UserUpdatesPanel {
    background-color: #202223;
    border-color: #333639;
    box-shadow: 0 8px 8px -8px rgba(0, 0, 0, 0.5), 8px 0px 8px -8px rgba(0, 0, 0, 0.5), -8px 0px 8px -8px rgba(0, 0, 0, 0.5); }
  #UserUpdatesPanel #updates-tab {
    color: #dc5500; }
  #UserUpdatesPanel .tab.active {
    color: #dc5500; }
    .darkmode #UserUpdatesPanel .tab.active {
      color: #68B5F0; }
  #UserUpdatesPanel #tab-row {
    background-color: #747474; }
    .darkmode #UserUpdatesPanel #tab-row {
      background-color: #474747; }
  #UserUpdatesPanel .feedbackLink {
    color: #0a5a83; }
    .darkmode #UserUpdatesPanel .feedbackLink {
      color: #68B5F0; }

/* Note this is a theme file -- Only color css allowed here! */
#ChatTabContents .message-list {
  background-color: #fff;
  color: #494949; }
  .darkmode #ChatTabContents .message-list {
    background-color: transparent;
    color: #dedede; }
  #ChatTabContents .message-list .msg-text {
    color: #494949; }
    .darkmode #ChatTabContents .message-list .msg-text {
      color: #dedede; }
    #ChatTabContents .message-list .msg-text .roomNotice {
      color: #494949; }
      .darkmode #ChatTabContents .message-list .msg-text .roomNotice {
        color: #dedede; }

#FVChatTabContents .chat-input-div,
#FVChatSettingsTab .chat-input-div {
  background-color: #ffffff; }
  .darkmode #FVChatTabContents .chat-input-div, .darkmode
  #FVChatSettingsTab .chat-input-div {
    background-color: #474747; }
  #FVChatTabContents .chat-input-div .chat-input-field,
  #FVChatSettingsTab .chat-input-div .chat-input-field {
    color: #000000; }
    .darkmode #FVChatTabContents .chat-input-div .chat-input-field, .darkmode
    #FVChatSettingsTab .chat-input-div .chat-input-field {
      background-color: #474747;
      color: #ffffff; }
  #FVChatTabContents .chat-input-div .send-button,
  #FVChatSettingsTab .chat-input-div .send-button {
    color: #ffffff;
    background-color: #eb3404; }
    #FVChatTabContents .chat-input-div .send-button.send-button-gradient,
    #FVChatSettingsTab .chat-input-div .send-button.send-button-gradient {
      background: linear-gradient(#f66d51, #eb3404); }
  #FVChatTabContents .chat-input-div .tip-button,
  #FVChatSettingsTab .chat-input-div .tip-button {
    color: #ffffff;
    background-color: #53843a; }
    #FVChatTabContents .chat-input-div .tip-button.tip-button-gradient,
    #FVChatSettingsTab .chat-input-div .tip-button.tip-button-gradient {
      background: linear-gradient(#87c667, #53843a); }

#FVChatTabContents .msg-text,
#FVChatSettingsTab .msg-text {
  color: #FFFFFF; }
  .darkmode #FVChatTabContents .msg-text, .darkmode
  #FVChatSettingsTab .msg-text {
    color: #dedede; }

.msg-link {
  color: #0a5a83; }
  .darkmode .msg-link,
  .hasDarkBackground .msg-link {
    color: #85FFFF; }
  .bright-background .msg-link {
    color: #0a5a83; }

/* Note this is a theme file -- Only color css allowed here! */
/*
 * Before using one these variables, check if a mixin could be used. If
 * the lightmode color and darkmode color in the design both match the colors
 * here, then we can use a mixin from _color_mixins.scss instead. May need to
 * build the mixin first, following the example of existing ones.
 *
 * (Darkmode colors not necessarily finalized, should check back later with the
 * figma to confirm them)
 */
#SplitModeChatSettingsTab .chat-settings-input, #FVChatSettingsTab .chat-settings-input {
  border-color: #b1b1b1; }
  .darkmode #SplitModeChatSettingsTab .chat-settings-input::placeholder, .darkmode #FVChatSettingsTab .chat-settings-input::placeholder {
    color: #ddd; }
  .darkmode #SplitModeChatSettingsTab .chat-settings-input:focus, .darkmode #FVChatSettingsTab .chat-settings-input:focus {
    outline: none;
    box-shadow: 0 0 0 2px #68b5f0; }

.darkmode #SplitModeChatSettingsTab .chat-settings-select, .darkmode #FVChatSettingsTab .chat-settings-select {
  background-color: #000000;
  color: #ddd; }

#SplitModeChatSettingsTab .link {
  color: #0a5a83; }
  .darkmode #SplitModeChatSettingsTab .link {
    color: #68B5F0; }

#FVChatSettingsTab {
  color: #ffffff; }
  #FVChatSettingsTab .manage-ignored-link {
    color: #85ffff; }
    .darkmode #FVChatSettingsTab .manage-ignored-link {
      color: #68B5F0; }
  #FVChatSettingsTab .chat-input-div {
    background-color: #ffffff; }
    .darkmode #FVChatSettingsTab .chat-input-div {
      background-color: #474747; }
    .darkmode #FVChatSettingsTab .chat-input-div .chat-input-field {
      background-color: #474747;
      color: #ffffff; }

/*
 * Before using one these variables, check if a mixin could be used. If
 * the lightmode color and darkmode color in the design both match the colors
 * here, then we can use a mixin from _color_mixins.scss instead. May need to
 * build the mixin first, following the example of existing ones.
 *
 * (Darkmode colors not necessarily finalized, should check back later with the
 * figma to confirm them)
 */
.BaseTabsContainer .inputDiv {
  background-color: #fff; }
  .darkmode .BaseTabsContainer .inputDiv {
    background-color: #202223; }
  .BaseTabsContainer .inputDiv .msg-input {
    background-color: #fff;
    color: #000; }
    .darkmode .BaseTabsContainer .inputDiv .msg-input {
      background-color: #202223;
      color: #dedede; }

#tab-row {
  background-color: #7f7f7f;
  border-bottom: 2px solid #7f7f7f; }
  .darkmode #tab-row {
    background-color: #1a1a1c;
    border-bottom: 2px solid #1a1a1c; }

.tab {
  background-color: #c9c9c9; }
  .darkmode .tab {
    background-color: #323639; }
  .tab:hover {
    background-color: #fff; }
    .darkmode .tab:hover {
      background-color: #202223; }
  .tab.active {
    background-color: #fff;
    color: #0d5d81;
    cursor: default; }
    .darkmode .tab.active {
      background-color: #202223;
      color: #68B5F0; }
  .tab.collapsed {
    background-color: #fff; }
    .darkmode .tab.collapsed {
      background-color: #202223; }
    .tab.collapsed:hover {
      background-color: #c9c9c9; }
      .darkmode .tab.collapsed:hover {
        background-color: #323639; }

.chat-tabs-dropdown-border {
  border-color: #c9c9c9; }
  .darkmode .chat-tabs-dropdown-border {
    border-color: #666666; }

/*
 * Before using one these variables, check if a mixin could be used. If
 * the lightmode color and darkmode color in the design both match the colors
 * here, then we can use a mixin from _color_mixins.scss instead. May need to
 * build the mixin first, following the example of existing ones.
 *
 * (Darkmode colors not necessarily finalized, should check back later with the
 * figma to confirm them)
 */
.notificationsModal {
  background-color: #e0e0e0;
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.75); }
  .darkmode .notificationsModal {
    background-color: #333639;
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.5); }
  .notificationsModal .upArrow {
    color: #e0e0e0;
    text-shadow: 0 -2px 4px rgba(0, 0, 0, 0.65); }
    .darkmode .notificationsModal .upArrow {
      color: #333639;
      text-shadow: 0 -2px 4px rgba(0, 0, 0, 0.5); }
  .notificationsModal .upArrowCover {
    color: #e0e0e0; }
    .darkmode .notificationsModal .upArrowCover {
      color: #333639; }
  .notificationsModal .title {
    color: #0c6a93; }
    .darkmode .notificationsModal .title {
      color: #68B5F0; }
  .notificationsModal .confirmButton {
    background-color: #0c6a93;
    color: #eeeeee; }
    .darkmode .notificationsModal .confirmButton {
      background-color: #68b5f0;
      color: #ffffff; }
    .notificationsModal .confirmButton:hover {
      background-color: #0c6a93cc; }
      .darkmode .notificationsModal .confirmButton:hover {
        background-color: #3e83a1; }

/* Note this is a theme file -- Only color css allowed here! */
/*
 * Before using one these variables, check if a mixin could be used. If
 * the lightmode color and darkmode color in the design both match the colors
 * here, then we can use a mixin from _color_mixins.scss instead. May need to
 * build the mixin first, following the example of existing ones.
 *
 * (Darkmode colors not necessarily finalized, should check back later with the
 * figma to confirm them)
 */
.modalAlert {
  color: #000000;
  background-color: rgba(0, 0, 0, 0.4); }
  .darkmode .modalAlert {
    color: #B3B3B3; }
  .modalAlert .dialog {
    background-color: #ffffff;
    border: 1px solid #ACACAC; }
    .darkmode .modalAlert .dialog {
      background-color: #1a1a1a;
      border: 1px solid #474747; }
    .modalAlert .dialog .dialogForm {
      background-color: #f9f9f9;
      border-top-color: #cccccc; }
      .darkmode .modalAlert .dialog .dialogForm {
        background-color: #202223;
        border-top-color: #474747; }
      .modalAlert .dialog .dialogForm .accept {
        color: #ffffff;
        background-color: #006ffc;
        border-color: #006ffc; }
        .darkmode .modalAlert .dialog .dialogForm .accept {
          background-color: #68B5F0;
          border-color: #68B5F0; }
      .modalAlert .dialog .dialogForm .decline {
        color: #0268ff;
        background-color: #ffffff;
        border-color: #cccccc; }
        .darkmode .modalAlert .dialog .dialogForm .decline {
          color: #68B5F0;
          background-color: #202223;
          border-color: #68B5F0; }

/* Note this is a theme file -- Only color css allowed here! */
/* Note this is a theme file -- Only color css allowed here! */
/*
 * Before using one these variables, check if a mixin could be used. If
 * the lightmode color and darkmode color in the design both match the colors
 * here, then we can use a mixin from _color_mixins.scss instead. May need to
 * build the mixin first, following the example of existing ones.
 *
 * (Darkmode colors not necessarily finalized, should check back later with the
 * figma to confirm them)
 */
.chatReport {
  color: #454545; }
  .darkmode .chatReport {
    color: #B3B3B3; }
  .chatReport .headerDiv {
    color: #005b85; }
    .darkmode .chatReport .headerDiv {
      color: #68B5F0; }
  .chatReport .submitButton {
    color: #fff;
    background-color: #eb3404; }
  .chatReport .cancelButton {
    color: #fff;
    background-color: #383838; }
  .chatReport .closeReportLink {
    color: #0a5a83; }
    .darkmode .chatReport .closeReportLink {
      color: #68B5F0; }
  .chatReport .ignoreUserLink {
    color: #0a5a83; }
    .darkmode .chatReport .ignoreUserLink {
      color: #68B5F0; }
    .chatReport .ignoreUserLink.disabled {
      color: #454545; }
      .darkmode .chatReport .ignoreUserLink.disabled {
        color: #B3B3B3; }

/*
 * Before using one these variables, check if a mixin could be used. If
 * the lightmode color and darkmode color in the design both match the colors
 * here, then we can use a mixin from _color_mixins.scss instead. May need to
 * build the mixin first, following the example of existing ones.
 *
 * (Darkmode colors not necessarily finalized, should check back later with the
 * figma to confirm them)
 */
.userContextMenu .menuContents {
  background-color: transparent; }

.userContextMenu .menu {
  background-color: #fff;
  border: 1px solid #f0f0f0;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.35);
  color: #000; }
  .darkmode .userContextMenu .menu {
    background-color: #303030;
    border: 1px solid #000;
    color: #EDEDED; }
  .userContextMenu .menu .rowDivider {
    background-color: #f0f0f0; }
    .darkmode .userContextMenu .menu .rowDivider {
      background-color: #222; }

.userContextMenu .header {
  background-color: #f9f9f9;
  color: #000; }
  .darkmode .userContextMenu .header {
    background-color: #262626;
    color: #EDEDED; }

.userContextMenu .age {
  color: #000; }
  .darkmode .userContextMenu .age {
    color: #EDEDED; }

.userContextMenu .userLabel .subLabel {
  color: #49494F; }
  .darkmode .userContextMenu .userLabel .subLabel {
    color: #EDEDED; }

.userContextMenu .links {
  color: #49494F;
  background-color: transparent; }
  .darkmode .userContextMenu .links {
    color: #EDEDED; }

.userContextMenu .links:hover {
  background-color: #F9E4D5; }
  .darkmode .userContextMenu .links:hover {
    background-color: #563E2E; }

.broadcaster {
  color: #DC5500; }
  .darkmode .broadcaster,
  .hasDarkBackground .broadcaster {
    color: #ff6200; }
    .darkmode .broadcaster.mentionHl,
    .hasDarkBackground .broadcaster.mentionHl {
      color: #49494F;
      background-color: #ff6200; }
  .broadcaster.mentionHl {
    color: #fff;
    background-color: #DC5500; }

.mod {
  color: #DC0000; }
  .mod.mentionHl {
    color: #fff;
    background-color: #DC0000; }

.inFanclub {
  color: #090; }
  .darkmode .inFanclub,
  .hasDarkBackground .inFanclub {
    color: #00ff00; }
    .darkmode .inFanclub.mentionHl,
    .hasDarkBackground .inFanclub.mentionHl {
      color: #49494F;
      background-color: #00ff00; }
  .roomNotice .inFanclub {
    color: #090; }
  .inFanclub.mentionHl {
    color: #fff;
    background-color: #090; }

.tippedTonsRecently {
  color: #804baa; }
  .darkmode .tippedTonsRecently,
  .hasDarkBackground .tippedTonsRecently {
    color: #ad62e1; }
    .darkmode .tippedTonsRecently.mentionHl,
    .hasDarkBackground .tippedTonsRecently.mentionHl {
      color: #49494F;
      background-color: #ad62e1; }
  .tippedTonsRecently.mentionHl {
    color: #fff;
    background-color: #804baa; }

.tippedALotRecently {
  color: #be6aff; }
  .darkmode .tippedALotRecently,
  .hasDarkBackground .tippedALotRecently {
    color: #d4a0ff; }
    .darkmode .tippedALotRecently.mentionHl,
    .hasDarkBackground .tippedALotRecently.mentionHl {
      color: #49494F;
      background-color: #d4a0ff; }
  .tippedALotRecently.mentionHl {
    color: #fff;
    background-color: #be6aff; }

.tippedRecently {
  color: #009; }
  .darkmode .tippedRecently,
  .hasDarkBackground .tippedRecently {
    color: #8a98ff; }
    .darkmode .tippedRecently.mentionHl,
    .hasDarkBackground .tippedRecently.mentionHl {
      color: #49494F;
      background-color: #8a98ff; }
  .tippedRecently.mentionHl {
    color: #fff;
    background-color: #009; }

.hasTokens {
  color: #69A; }
  .darkmode .hasTokens,
  .hasDarkBackground .hasTokens {
    color: #84c6dc; }
    .darkmode .hasTokens.mentionHl,
    .hasDarkBackground .hasTokens.mentionHl {
      color: #49494F;
      background-color: #84c6dc; }
  .hasTokens.mentionHl {
    color: #fff;
    background-color: #69A; }

.defaultUser {
  color: #49494F; }
  .darkmode .defaultUser,
  .hasDarkBackground .defaultUser {
    color: #B3B3B3; }
    .darkmode .defaultUser.mentionHl,
    .hasDarkBackground .defaultUser.mentionHl {
      color: #49494F;
      background-color: #B3B3B3; }
  .defaultUser.mentionHl {
    color: #fff;
    background-color: #49494F; }

/* Note this is a theme file -- Only color css allowed here! */
.emoticonAutocompleteModal {
  background-color: #ffffff;
  border-color: #acacac;
  color: #494949; }
  .darkmode .emoticonAutocompleteModal {
    background-color: #000000;
    border-color: #202223;
    color: #b3b3b3; }
  .emoticonAutocompleteModal .selectedEmoticon {
    background-color: #cccccc; }
    .darkmode .emoticonAutocompleteModal .selectedEmoticon {
      color: #000000; }
  .emoticonAutocompleteModal .previewWrapper {
    border-bottom-color: #acacac; }
  .emoticonAutocompleteModal .hrefColor {
    color: #0A5B83; }
    .darkmode .emoticonAutocompleteModal .hrefColor {
      color: #68B5F0; }

/*
 * Before using one these variables, check if a mixin could be used. If
 * the lightmode color and darkmode color in the design both match the colors
 * here, then we can use a mixin from _color_mixins.scss instead. May need to
 * build the mixin first, following the example of existing ones.
 *
 * (Darkmode colors not necessarily finalized, should check back later with the
 * figma to confirm them)
 */
.emoticonPreviewModal {
  background-color: #ffffff;
  color: #494949; }
  .darkmode .emoticonPreviewModal {
    background-color: #000;
    color: #b3b3b3; }
  .emoticonPreviewModal .closeButton {
    background: url(../../tsdefaultassets/close.svg?9a87e6f7a4de) no-repeat center center;
    background-size: cover; }
    .darkmode .emoticonPreviewModal .closeButton {
      background: url(../../tsdefaultassets/close-white.svg?b0389426f1cb) no-repeat center center;
      background-size: cover; }
  .emoticonPreviewModal .cancelButton {
    color: #fff;
    background-color: #898989; }
  .emoticonPreviewModal .reportButton {
    color: #fff;
    background-color: #ef6352; }
  .darkmode .emoticonPreviewModal .categorySelect {
    background-color: #000000;
    color: #B3B3B3; }
  .emoticonPreviewModal .hrefColor {
    color: #0A5B83; }
    .darkmode .emoticonPreviewModal .hrefColor {
      color: #68B5F0; }

.emoticonImage img {
  max-width: 100%;
  max-height: 100%;
  height: auto;
  width: auto;
  display: inline-block; }

.pm-control-bar {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -ms-flex-pack: justify; }

@media screen and (min-width: 0\0) {
  .pm-control-bar span {
    display: inline-block;
    height: 100%; } }

#ChatWindowBar .pm-more-menus li:hover {
  color: #ccc !important; }

#ChatWindowBar .PrivateChatWindow form input[type=radio] {
  height: 14px;
  width: 14px; }

#ChatWindowBar .PrivateChatWindow form label {
  margin: 3px 8px !important; }

#ChatWindowBar .PrivateChatWindow div.corner div.me {
  border-radius: 10px 10px 4px 10px !important; }

#ChatWindowBar .PrivateChatWindow div.corner div.other {
  border-radius: 10px 10px 10px 4px !important; }

#ChatWindowBar .emoticonImage img {
  max-width: 100%;
  max-height: 100%;
  height: auto;
  width: auto;
  display: inline-block; }

.pmListItem .closeBtnContainer {
  fill: #888; }
  .pmListItem .closeBtnContainer:hover {
    fill: #222; }
  .darkmode .pmListItem .closeBtnContainer:hover, .hasDarkBackground .pmListItem .closeBtnContainer:hover {
    fill: #D1D1D1; }

body {
  font-family: 'UbuntuRegular', Arial, Helvetica, sans-serif;
  margin: 0;
  min-width: 0;
  overflow-x: hidden;
  padding: 0;
  width: 100%; }

html {
  -webkit-text-size-adjust: 100%;
  /* Prevent font scaling in landscape while allowing user zoom */
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden; }

#main {
  position: relative;
  height: auto; }

/* this moves content and header 240px to the right */
.push-page-content {
  -webkit-transform: translate3d(240px, 0, 0); }

/* this moves content and header 240px to the left */
.push-page-content-left {
  -webkit-transform: translate3d(-240px, 0, 0); }

.content {
  -moz-transition: all .15s ease;
  -webkit-transition: all .15s ease;
  background: #fff;
  font-family: 'UbuntuRegular', Arial, Helvetica, sans-serif;
  font-size: 12px;
  padding: 0 15px 15px;
  transition: all .15s ease;
  z-index: 2; }

.content a {
  color: #156b95;
  text-decoration: none; }

.content .c-1 {
  margin: 0; }

#btp {
  margin-top: 25px; }

#entrance_terms {
  display: none;
  z-index: 9999;
  position: fixed;
  border: none;
  background: none;
  padding: 0;
  height: 94%;
  top: 2%;
  bottom: 2%;
  left: 2%;
  right: 2%;
  display: block; }

#entrance_terms_overlay {
  background: black none;
  height: 100%;
  width: 100%;
  position: fixed;
  z-index: 9998;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: block; }

#entrance_terms .header p {
  font-size: 12px !important;
  -webkit-margin-before: 0;
  -webkit-margin-after: 5px;
  -webkit-margin-start: 0;
  -webkit-margin-end: 0; }

#entrance_terms .scroll {
  height: 260px;
  max-height: 260px !important;
  overflow-y: scroll !important;
  /* has to be scroll, not auto */ }

#entrance_terms .scroll p {
  -webkit-margin-before: 5px;
  -webkit-margin-after: 0;
  -webkit-margin-start: 0;
  -webkit-margin-end: 0; }

#entrance_terms #law_enf {
  color: red;
  font-weight: bold;
  font-size: 11px;
  text-align: center;
  -webkit-margin-before: 10px;
  -webkit-margin-after: 10px;
  -webkit-margin-start: 0;
  -webkit-margin-end: 0; }

#entrance_terms .footer a {
  text-decoration: none; }

#close_entrance_terms {
  display: block;
  height: 40px;
  line-height: 40px;
  background-color: #0A6A97;
  color: #fff !important;
  text-transform: uppercase;
  font-weight: normal !important;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  overflow: hidden;
  width: 80%;
  margin: 0 auto;
  max-width: 80%;
  cursor: pointer;
  text-decoration: none;
  font-size: 12px; }

.exit_entrance_terms {
  width: 100% !important;
  margin: 0 !important;
  background-color: transparent !important;
  color: #7F7F7F !important;
  font-weight: normal !important;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  height: 20px !important;
  line-height: 20px !important;
  padding-top: 4px;
  padding-bottom: 8px; }

#close-entterms {
  position: absolute;
  width: 100%;
  bottom: 70px;
  text-align: center;
  height: 40px; }

.ui-focus,
.ui-btn:focus {
  -moz-box-shadow: none !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important; }

header, .dynamic-header {
  background: #156b95;
  height: 46px;
  left: 0;
  top: 0;
  width: 100%; }

.dynamic-header {
  position: fixed;
  display: none;
  z-index: 300; }

#mheader-logo {
  max-height: 46px;
  width: 124px;
  margin: 0 auto; }

#whitelabel-header-logo {
  margin: 0 auto;
  padding: 5px;
  text-align: center; }

#logo-img {
  display: inline;
  height: 33px;
  margin-top: 6px;
  margin-left: 9px; }

#whitelabel-logo-img {
  display: inline;
  max-height: 36px;
  max-width: 230px; }

.w_intro {
  float: left;
  clear: both; }

#entterms {
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  background: white;
  border-radius: 10px;
  font-family: 'UbuntuRegular', Arial, Helvetica, sans-serif;
  height: 100%;
  min-height: 265px;
  position: relative;
  z-index: 9999; }

#entterms-over18, #entterms-scroll, #entterms-lawenforce, #entterms-exit, #entterms-images {
  position: absolute;
  overflow: auto;
  text-align: center; }

#entterms-over18 {
  font-family: 'UbuntuMedium', Arial, Helvetica, sans-serif;
  height: auto;
  padding: 15px;
  top: 0;
  left: 0;
  right: 0;
  font-size: 12px;
  color: #222;
  margin: 0 auto; }

#entterms-scroll {
  font-size: 12px;
  color: #7f7f7f;
  min-height: 35px;
  width: 94%;
  padding: 4px;
  border: 1px solid #ccc;
  margin: 0 auto;
  text-align: left;
  left: 0;
  right: 0;
  overflow-y: scroll;
  line-height: 14px; }

#entterms-scroll-inner {
  padding: 4px; }

#entterms-scroll-inner a {
  color: #156b95; }

#entterms-lawenforce {
  height: auto;
  padding: 15px 15px 5px;
  left: 0;
  right: 0;
  bottom: 115px;
  font-size: 10px;
  color: red;
  font-weight: bold;
  line-height: 14px; }

#entterms-exit {
  height: 35px;
  left: 0;
  right: 0;
  bottom: 35px;
  line-height: 35px;
  font-size: 12px; }

#entterms-exit a {
  color: #494949;
  text-decoration: none; }

#entterms-images {
  height: 35px;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden; }

#entterms-images img {
  max-width: 65px; }

#safelabeling, #asacp {
  padding-top: 2px; }

#rta {
  padding-top: 2px;
  padding-left: 10px;
  padding-right: 10px; }

#entterms-scroll p {
  margin: 0;
  padding: 0; }

#entterms-img-table {
  width: 100%;
  height: 35px;
  margin: 0;
  padding: 0;
  cell-spacing: 0;
  cell-padding: 0; }

#entterms-img-table img {
  max-width: 100%; }

#entterms-img-table td {
  vertical-align: middle; }

.user-info {
  height: 19px;
  padding: 0 5px 2px 5px;
  line-height: 19px; }

.user-info .username {
  float: left;
  font-family: 'UbuntuBold', Arial, Helvetica, sans-serif;
  color: #0c6a93;
  font-size: 15px;
  line-height: 19px;
  max-width: 78%;
  overflow: hidden;
  text-overflow: ellipsis; }

.user-info .age {
  float: right;
  color: #898989;
  font-family: 'UbuntuBold', Arial, Helvetica, sans-serif;
  font-size: 14px;
  line-height: 19px;
  padding-right: 3px; }

.user-info .gender {
  padding-right: 1px;
  height: 19px;
  width: 13px;
  float: right; }

.clear {
  margin: 0 5px 0 5px;
  border-top: 1px solid #acacac; }

.room-sub {
  height: 29px;
  font-family: 'UbuntuRegular', Arial, Helvetica, sans-serif;
  font-size: 12px;
  padding: 0 5px 0 5px;
  color: #3a3a3a;
  line-height: 15px;
  margin-top: -1px;
  margin-bottom: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; }

.location {
  height: 14px;
  font-size: 12px;
  padding: 0 5px 0 5px;
  overflow: hidden;
  -ms-text-overflow: ellipsis;
  text-overflow: ellipsis;
  white-space: nowrap; }

.location-inner {
  height: 14px;
  line-height: 14px;
  float: left;
  margin-top: -1px;
  font-family: 'UbuntuRegular', Arial, Helvetica, sans-serif;
  font-size: 10px;
  padding-left: 5px;
  white-space: nowrap;
  width: -webkit-calc(100% - 20px);
  width: -moz-calc(100% - 20px);
  width: calc(100% - 20px);
  -ms-text-overflow: ellipsis;
  text-overflow: ellipsis;
  overflow: hidden; }

.time-viewers {
  height: 14px;
  font-size: 12px;
  padding: 0 5px 5px 5px;
  overflow: hidden;
  -ms-text-overflow: ellipsis;
  text-overflow: ellipsis;
  white-space: nowrap; }

.time-viewers-inner {
  height: 14px;
  line-height: 14px;
  float: left;
  margin-top: -1px;
  font-family: 'UbuntuRegular', Arial, Helvetica, sans-serif;
  font-size: 10px;
  padding-left: 5px;
  white-space: nowrap;
  width: -webkit-calc(100% - 20px);
  width: -moz-calc(100% - 20px);
  width: calc(100% - 20px);
  -ms-text-overflow: ellipsis;
  text-overflow: ellipsis;
  overflow: hidden; }

.thumbnail_label {
  position: absolute;
  right: 3px;
  bottom: 3px;
  padding: 1px 3px 1px 3px;
  text-align: center;
  overflow: hidden;
  color: #FFF;
  font: 10px 'UbuntuRegular',Arial,Helvetica,sans-serif; }

.thumbnail_label_offline {
  background-color: #4f4f4f; }

.thumbnail_label_c {
  background-color: #0C6A93; }

.thumbnail_label_c_hd {
  background-color: #2472b4; }

.thumbnail_label_c_hd_plus {
  background-color: #2472b4; }

.thumbnail_label_c_new {
  background-color: #71b404; }

.thumbnail_label_exhibitionist {
  background-color: #6D85B5; }

.thumbnail_label_recorded {
  background-color: #4f4f4f; }

.thumbnail_label_c_private_show {
  background-color: #C00; }

/* ------ CAM GRID ------ */
#broadcasters {
  margin: 0 auto;
  padding: 0;
  font-size: 0;
  list-style: none; }

#broadcasters li {
  display: inline-block;
  position: relative;
  width: 10%;
  vertical-align: middle;
  box-sizing: border-box; }

.room_list_room {
  padding: 0px;
  margin: 3px;
  background: #f0f1f1;
  border: 1px solid #acacac;
  border-radius: 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px; }

#broadcasters li a {
  color: #0a5a83;
  text-decoration: none; }

/* The wrapper for each item */
.broadcaster-cell {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: 3px 3px 0 0;
  -webkit-border-radius: 3px 3px 0 0; }

/* Image layer */
.broadcaster-img {
  display: block;
  width: 100%;
  height: auto;
  border: none; }

/* ------ END CAM GRID ------ */
/* ------ CAM GRID MEDIA QUERIES ------ */
@media (max-width: 2200px) {
  #broadcasters li {
    width: 10%; } }

@media (max-width: 2000px) {
  #broadcasters li {
    width: 11.11%; } }

@media (max-width: 1800px) {
  #broadcasters li {
    width: 12.50%; } }

@media (max-width: 1600px) {
  #broadcasters li {
    width: 14.28%; } }

@media (max-width: 1400px) {
  #broadcasters li {
    width: 16.66%; } }

@media (max-width: 1200px) {
  #broadcasters li {
    width: 20%; } }

@media (max-width: 1000px) {
  #broadcasters li {
    width: 25%; } }

@media (max-width: 800px) {
  #broadcasters li {
    width: 33.33%; } }

@media (max-width: 550px) {
  #broadcasters li {
    width: 50%; } }

@media (max-width: 351px) {
  .user-info .username {
    width: 100px !important; } }

/* ------ END MEDIA QUERIES ------ */
/* ------ SVGs ------ */
#mmnav {
  background: url(../../images/hamburger_menu.svg?a97a6b59efff) no-repeat center;
  height: 40px;
  width: 40px;
  position: absolute;
  left: 3px;
  top: 3px;
  cursor: pointer; }
  #mmnav.has_unseen {
    left: 7px;
    top: 0;
    background-image: url(../../images/hamburger_menu_notification.svg?28683b6a79b0); }

#mmnav-player {
  background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOC4xLjEsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9Ik1lbnUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMjAgMjAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDIwIDIwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0xNi40LDlIMy42QzMuMDQ4LDksMyw5LjQ0NywzLDEwYzAsMC41NTMsMC4wNDgsMSwwLjYsMWgxMi44YzAuNTUyLDAsMC42LTAuNDQ3LDAuNi0xUzE2Ljk1Miw5LDE2LjQsOXoNCgkgTTE2LjQsMTNIMy42QzMuMDQ4LDEzLDMsMTMuNDQ3LDMsMTRjMCwwLjU1MywwLjA0OCwxLDAuNiwxaDEyLjhjMC41NTIsMCwwLjYtMC40NDcsMC42LTFTMTYuOTUyLDEzLDE2LjQsMTN6IE0zLjYsN2gxMi44DQoJQzE2Ljk1Miw3LDE3LDYuNTUzLDE3LDZzLTAuMDQ4LTEtMC42LTFIMy42QzMuMDQ4LDUsMyw1LjQ0NywzLDZTMy4wNDgsNywzLjYsN3oiLz4NCjwvc3ZnPg0K");
  height: 40px;
  width: 40px;
  position: absolute;
  left: 3px;
  top: 3px;
  z-index: 9999;
  cursor: pointer; }

.icon-location {
  background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgODAwIDgwMCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgODAwIDgwMDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+LnN0MHtmaWxsOiNBMkEwQTA7fTwvc3R5bGU+PHBhdGggY2xhc3M9InN0MCIgZD0iTTM5OS43LDAuN0MxNzguOSwwLjcsMCwxNzkuNiwwLDQwMC4zQzAsNjIxLjEsMTc4LjksODAwLDM5OS43LDgwMGMyMjAuNywwLDM5OS43LTE3OC45LDM5OS43LTM5OS43Qzc5OS4zLDE3OS42LDYyMC40LDAuNywzOTkuNywwLjd6IE01OTEuNCwzMjMuN2MwLDAsMS40LDE0MC4yLTE5MS43LDM2OS4zQzIwNi42LDQ2My45LDIwOCwzMjMuNywyMDgsMzIzLjdjLTAuOS03LjUtMS40LTE1LjItMS40LTIzYzAtMTA2LjYsODYuNC0xOTMuMSwxOTMuMS0xOTMuMWMxMDYuNiwwLDE5My4xLDg2LjQsMTkzLjEsMTkzLjFDNTkyLjcsMzA4LjUsNTkyLjMsMzE2LjIsNTkxLjQsMzIzLjd6Ii8+PGNpcmNsZSBjbGFzcz0ic3QwIiBjeD0iMzk5LjciIGN5PSIyOTEuNSIgcj0iMTA4LjgiLz48L3N2Zz4=") no-repeat scroll 0 0 transparent;
  width: 12px;
  height: 12px;
  float: left; }

.icon-cam {
  background: url("data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMjkuODUgMTQ0LjI1Ij48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2EyYTFhMTt9LmNscy0ye2ZpbGw6I2ViZWNlZDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPmNhbSBpY29uIGZvciBjYiBtb2JpbGU8L3RpdGxlPjxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTY0LjkyLDUuOTVhNTksNTksMCwxLDEtNTksNTksNTksNTksMCwwLDEsNTktNTltMC01Ljk1YTY0LjkyLDY0LjkyLDAsMSwwLDY0LjkyLDY0LjkyQTY0LjkyLDY0LjkyLDAsMCwwLDY0LjkyLDBoMFoiLz48cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik02NC45MiwzMy4xOEEzMS43NSwzMS43NSwwLDEsMSwzMy4xOCw2NC45MiwzMS43OCwzMS43OCwwLDAsMSw2NC45MiwzMy4xOG0wLTI5LjYxYTYxLjM2LDYxLjM2LDAsMSwwLDYxLjM2LDYxLjM2QTYxLjM2LDYxLjM2LDAsMCwwLDY0LjkyLDMuNTZoMFoiLz48cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik0xMTAuODMsMTQ0LjI1SDE4YTguMDUsOC4wNSwwLDAsMS04LThoMGE4LjA1LDguMDUsMCwwLDEsOC04aDMuMDlsOC42NS04LjgzYTY1LjIyLDY1LjIyLDAsMCwwLDMzLjE4LDguODNjMTkuNzcsMCwzNi05LDM2LTlsOC40Nyw5aDMuNDRhOC4wNSw4LjA1LDAsMCwxLDgsOGgwQTguMDUsOC4wNSwwLDAsMSwxMTAuODMsMTQ0LjI1WiIvPjxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTY0LjkyLDQzYTIyLDIyLDAsMCwwLTQuMy40M0ExMC42LDEwLjYsMCwxLDEsNDQuNTYsNTYuNzcsMjEuOTQsMjEuOTQsMCwxLDAsNjQuOTIsNDNaIi8+PGVsbGlwc2UgY2xhc3M9ImNscy0yIiBjeD0iMTA1LjQxIiBjeT0iNjcuNzYiIHJ5PSIwLjA0Ii8+PC9zdmc+") no-repeat scroll 0 0 transparent;
  width: 12px;
  height: 14px;
  float: left; }

.icon-m {
  background: url(../../images/icon-male.svg?fe3203a05c16) no-repeat center;
  background-size: cover;
  height: 20px;
  width: 20px; }

.icon-f {
  background: url(../../images/icon-fem.svg?818c9c4c368f) no-repeat center;
  background-size: cover;
  height: 20px;
  width: 20px; }

.icon-s {
  background: url(../../images/icon-trans.svg?4984008acb01) no-repeat center;
  background-size: cover;
  height: 20px;
  width: 20px; }

.icon-c {
  background: url(../../images/icon-cpl.svg?b74df354b80e) no-repeat center;
  background-size: cover;
  height: 20px;
  width: 20px; }

.icon-anon {
  background: url(../../images/gendericons/anon.svg?00993266cf7f) no-repeat center;
  background-size: cover;
  height: 20px;
  width: 20px; }

.icon-gender {
  margin-top: 4px; }

.icon-broadcaster {
  background-position: 50% 48%; }

/* ------ END SVGS ------ */
.form-wrapper {
  max-width: 350px;
  margin: 0 auto; }

.standardform fieldset {
  border: 0;
  margin: 0;
  padding: 0;
  width: 100%;
  font-family: 'UbuntuRegular', Arial, Helvetica, sans-serif; }

.standardform form {
  margin: 0;
  padding: 0; }

.standardform form label {
  color: #000;
  font-size: 14px;
  margin-bottom: 3px; }

.standardform input[type=text],
.standardform input[type=password],
.standardform input[type=email] {
  width: 100%;
  font-family: 'UbuntuRegular', Arial, Helvetica, sans-serif;
  font-size: 16px;
  box-sizing: border-box; }

.custom_tag_wrapper {
  float: left; }

.standardform select {
  margin-left: 8px;
  margin-right: 8px;
  box-sizing: border-box; }

.standardform #id_birthday_month {
  margin-left: 0;
  font-size: 16px;
  font-family: 'UbuntuRegular', Arial, Helvetica, sans-serif; }

.standardform #id_birthday_day {
  font-size: 16px; }

.standardform #id_birthday_year {
  font-size: 16px; }

.standardform #id_gender {
  margin-left: 0;
  font-size: 16px; }

.help_text {
  text-align: left;
  color: #999; }

h1 {
  color: #0a6a97;
  font-family: 'UbuntuBold', Arial, Helvetica, sans-serif;
  font-size: 19px;
  margin-top: 15px;
  margin-bottom: 10px;
  text-align: left; }

h2 {
  font-family: 'UbuntuBold', Arial, Helvetica, sans-serif;
  font-size: 14px;
  color: #666; }

.standardform #field-wrapper {
  margin-top: 10px;
  margin-bottom: 10px; }

.standardform #error_notice {
  font-family: 'UbuntuBold', Arial, Helvetica, sans-serif;
  font-size: 12px;
  color: red; }

.standardform .error-msg {
  font-size: 11px;
  color: red;
  margin-top: 3px; }

#checkbox-field {
  float: left;
  height: 20px; }

#checkbox-label {
  float: left;
  height: 20px;
  line-height: 20px;
  margin-top: 1px;
  margin-left: 2px; }

.button-wrapper {
  text-align: center; }

.login-title-lg {
  width: 100%;
  text-align: center;
  color: #f47500;
  font-family: 'UbuntuBold', Arial, Helvetica, sans-serif;
  font-size: 18px;
  margin-top: 10px; }

.login-title-sm {
  width: 100%;
  text-align: center;
  color: #0a6a97;
  font-family: 'UbuntuBold', Arial, Helvetica, sans-serif;
  font-size: 14px; }

.signup-title-lg {
  width: 100%;
  text-align: center;
  color: #f47500;
  font-family: 'UbuntuBold', Arial, Helvetica, sans-serif;
  font-size: 18px;
  margin-top: 10px;
  margin-bottom: 5px; }

.signup-title-sm {
  width: 100%;
  text-align: center;
  color: #0a6a97;
  font-family: 'UbuntuBold', Arial, Helvetica, sans-serif;
  font-size: 14px; }

.signup-msg,
.signup-err-msg {
  margin-top: 15px;
  font-family: 'UbuntuRegular', Arial, Helvetica, sans-serif;
  text-align: center; }

.signup-msg span {
  font-family: 'UbuntuBold', Arial, Helvetica, sans-serif;
  font-weight: bold;
  display: inline-block;
  vertical-align: bottom;
  width: auto;
  max-width: 250px;
  text-overflow: ellipsis;
  overflow: hidden; }

.signup-err-msg span {
  font-family: 'UbuntuBold', Arial, Helvetica, sans-serif;
  color: #d50000;
  font-weight: bold;
  display: inline-block;
  vertical-align: bottom;
  width: auto;
  max-width: 250px;
  text-overflow: ellipsis;
  overflow: hidden; }

.signup-submit {
  cursor: pointer;
  width: 100%;
  color: #fff;
  background: #f67300;
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2Y2NzMwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNkNDYzMDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
  background: -moz-linear-gradient(top, #f67300 0%, #d46300 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f67300), color-stop(100%, #d46300));
  background: -webkit-linear-gradient(top, #f67300 0%, #d46300 100%);
  background: -o-linear-gradient(top, #f67300 0%, #d46300 100%);
  background: -ms-linear-gradient(top, #f67300 0%, #d46300 100%);
  background: linear-gradient(to bottom, #f67300 0%, #d46300 100%);
  background-color: #f47321;
  filter: "progid:DXImageTransform.Microsoft.gradient( startColorstr='#f67300', endColorstr='#d46300',GradientType=0 )";
  text-transform: uppercase;
  padding: 6px 0;
  text-decoration: none !important;
  border: 1px solid #b1b1b1;
  border-radius: 3px;
  font-size: 18px;
  font-family: 'UbuntuMedium', Arial, Helvetica, sans-serif;
  text-align: center; }

.signup-submit:disabled {
  opacity: 0.4;
  cursor: default; }

.signup-submit:hover:disabled {
  opacity: 0.4;
  cursor: default; }

.submit {
  cursor: pointer;
  margin-top: 25px;
  border-radius: 3px;
  width: 100%;
  background: #0A6A97;
  color: #fff;
  border: 1px solid #b1b1b1;
  border-radius: 3px;
  padding: 6px 0;
  text-transform: uppercase;
  font-size: 18px;
  font-family: 'UbuntuMedium', Arial, Helvetica, sans-serif;
  text-align: center; }

#pw-reset-text {
  margin-bottom: 10px;
  margin-top: 15px;
  text-align: left;
  color: #646464;
  font-family: 'UbuntuRegular', Arial, Helvetica, sans-serif;
  font-size: 12px; }

.signup-spacer {
  height: 1px;
  width: 100%;
  background: #e0e0e0;
  margin: 10px 0; }

.signup-button-spacer {
  height: 15px;
  width: 100%;
  margin: 0; }

.over_18 {
  text-align: center;
  color: #646464;
  width: 100%;
  font-family: 'UbuntuRegular', Arial, Helvetica, sans-serif;
  font-size: 12px;
  line-height: 24px;
  margin: 10px 0; }

.med_notice {
  text-align: center;
  color: #555;
  width: 100%;
  font-family: 'UbuntuRegular', Arial, Helvetica, sans-serif;
  font-size: 14px;
  line-height: 15px;
  margin-top: 20px; }

.small_notice {
  text-align: center;
  color: #555;
  width: 100%;
  font-family: 'UbuntuRegular', Arial, Helvetica, sans-serif;
  font-size: 11px;
  line-height: 15px;
  margin-top: 20px; }

#forgotpw {
  text-align: center;
  width: 100%;
  height: 28px;
  line-height: 28px;
  margin: 8px 0;
  font-size: 14px;
  font-family: 'UbuntuRegular', Arial, Helvetica, sans-serif; }

#forgotpw a {
  color: #0a6a97;
  text-decoration: none; }

.products {
  margin-top: 20px; }

#purchase-tokens-header {
  margin-bottom: 20px; }

.content_body > .message, .dismissible_message {
  text-align: center;
  border: 1px solid #ccc;
  margin: 5px 5px 2px 5px !important;
  background-color: #ffffd3;
  padding: 0 10px !important; }

#room_list_loading_overlay {
  position: absolute;
  top: 46px;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #fff;
  z-index: 200; }

#footer {
  font-size: 12px;
  width: 100%;
  text-align: center;
  padding: 10px 0 5px 0; }

#payment-form > select, .btc-input {
  width: 280px;
  font-size: 16px;
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box; }

#payment-form > select {
  font-family: 'UbuntuRegular', Arial, Helvetica, sans-serif; }

#mobile_advanced_options_link_container {
  margin: 5px 5px 0;
  float: right;
  position: relative;
  width: 100%;
  text-align: right;
  z-index: 101; }

#mobile_advanced_options_link {
  width: 100% !important;
  text-align: right; }

#mobile_advanced_options_container {
  padding: 0 5px;
  position: relative;
  top: -30px;
  margin-bottom: -30px; }

#mobile_advanced_options_container h2 {
  margin-bottom: 2px; }

#mobile_advanced_options_container .submit, #mobile_advanced_options_container #id_keywords {
  width: 100%; }

#mobile_advanced_options_container .submit {
  margin-top: 5px; }

#mobile_advanced_options_container span {
  margin-right: 8px; }

#mobile_advanced_options_container input[type=checkbox] {
  margin: 0; }

#broadcasters > li > div.location {
  font-size: 12px;
  max-height: 18px;
  overflow: hidden; }

.cryptopayment div {
  margin: 5px 0; }

#cryptopayment_info {
  max-width: 280px; }

#cryptopayment_info .invoices {
  background-color: #ffffd3;
  color: #444;
  padding: 3px;
  max-width: 280px; }

#cryptopayment_tokens_label,
#coin_estimated_cost_label {
  font-size: 14px;
  float: left;
  width: 120px;
  line-height: 26px; }

#cryptopayment_tokens_input,
#coin_estimated_cost {
  float: right;
  width: 150px; }

#coin_estimated_cost {
  line-height: 30px; }

#cryptopayment_tokens {
  width: 141px;
  font-size: 14px;
  padding: 3px 3px;
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
  border-radius: 4px;
  -webkit-border-radius: 4px;
  border: 1px solid #b1b1b1; }

.cryptopayment_tokens_info {
  overflow: auto;
  display: table; }

.cryptopayment_tokens_info div {
  display: table-row;
  height: 100%; }

.cryptopayment_email_info input,
.cryptopayment_email_info span {
  display: inline-block;
  font-size: 14px; }

.cryptopayment_email_info span {
  margin-right: 10px; }

.cryptopayment_email_info input {
  width: 222px;
  font-size: 14px;
  padding: 3px 3px;
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
  border-radius: 4px;
  -webkit-border-radius: 4px;
  border: 1px solid #b1b1b1; }

.cryptopayment_data {
  overflow: auto;
  height: 100%; }

#oneclick_cvv2 {
  font-size: 14px; }

.followed_online_offline {
  display: flex;
  width: 100%;
  padding: 5px 0 5px 5px; }

.followed_online_offline .title {
  padding-right: 15px; }

.followed_online_offline .bold {
  font-family: 'UbuntuBold', Arial, Helvetica, sans-serif; }

.followed_online_offline .title p {
  margin: 0; }

.icon_following {
  background: url(../../whitelabels/mobile/images/following-hover.png?c8a176cf1dcb) no-repeat;
  opacity: .7; }

.icon_not_following {
  background: url(../../whitelabels/mobile/images/following-off.png?e2f3a7174c61) no-repeat;
  opacity: .5; }

.icon_update_following {
  background: url(../../whitelabels/mobile/images/following-update.gif?8a00b582b46c) no-repeat;
  opacity: .5; }

.no_select {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; }

.icon_following, .icon_update_following, .icon_not_following {
  background-origin: content-box;
  position: absolute;
  top: 0;
  right: 0;
  width: 35px;
  height: 35px;
  padding-top: 6px;
  padding-right: 6px;
  background-size: 35px 35px;
  z-index: 1;
  cursor: pointer; }

.cbValidate_neutral {
  display: none; }

.cbValidate_invalid {
  color: #d50000; }

.cbValidate_valid {
  display: none; }

.formvalidate_error {
  color: red; }

.formvalidate_spinner {
  display: inline-block; }

.formvalidate_spinner img {
  width: 12px;
  height: 12px; }

.formvalidate_hidden {
  display: none !important; }

.grecaptcha-badge {
  display: none; }

#cc_descriptor_info {
  display: block;
  border: 1px solid #C4C4C4;
  background: #f4f4f4;
  text-decoration: none;
  border-radius: 4px;
  /*margin-left: 8px;*/
  margin-top: 10px;
  /*width: 202px;*/
  /*height: 68px;*/
  padding: 8px 10px 8px 10px;
  font-family: 'UbuntuRegular', Arial, Helvetica, sans-serif;
  font-style: normal;
  font-weight: normal;
  font-size: 12px;
  line-height: 140%;
  color: #49494F; }

#header-links {
  height: 75px;
  padding: 10px;
  font-family: 'UbuntuRegular', Arial, Helvetica, sans-serif;
  font-size: 13px;
  line-height: 25px;
  background: #1b8fbf; }
  #header-links.shorter {
    height: 25px; }
  #header-links #user-info {
    margin: 0 0 6px 0; }
    #header-links #user-info div {
      display: inline-block; }
    #header-links #user-info #gender-menu {
      float: left;
      margin-right: 8px; }
    #header-links #user-info .notification_bell {
      background: url(../../images/bell_inactive.svg?b7c610114958) no-repeat center;
      border: none;
      cursor: pointer;
      height: 18px;
      padding: 1px 5px;
      position: absolute;
      right: 5px;
      vertical-align: top;
      width: 16px; }
    #header-links #user-info .notification_bell.has_unseen {
      background-image: url(../../images/bell_notification.svg?7c8c88191e0c); }
    #header-links #user-info .notification_bell.active {
      background-image: url(../../images/bell_active.svg?6e820b132257); }
  #header-links #user-status, #header-links #user-tokens {
    width: 100%; }
  #header-links #tokens-label, #header-links #status-label {
    float: left;
    clear: both;
    width: 60px;
    font-size: 12px; }
  #header-links #token-balance, #header-links #status {
    float: left;
    font-family: 'UbuntuMedium', Arial, Helvetica, sans-serif;
    width: auto;
    font-size: 12px; }
  #header-links #getmore, #header-links #upgrade-link {
    width: auto;
    float: right; }
  #header-links #purchase_tokens, #header-links #upgrade_user {
    color: #ff8a3f;
    text-decoration: none;
    font-family: 'UbuntuMedium', Arial, Helvetica, sans-serif;
    font-size: 12px; }
    #header-links #purchase_tokens a:hover, #header-links #upgrade_user a:hover {
      text-decoration: underline; }

#static-header .notification_bell, .dynamic-header .notification_bell {
  background: url(../../images/bell_inactive.svg?b7c610114958) no-repeat center;
  background-size: cover;
  border: none;
  cursor: pointer;
  height: 29px;
  padding: 0 5px;
  position: absolute;
  right: 5px;
  vertical-align: top;
  width: 16px;
  bottom: 0;
  top: 0;
  margin: auto 0; }

#static-header .notification_bell.has_unseen, .dynamic-header .notification_bell.has_unseen {
  background-image: url(../../images/bell_notification.svg?7c8c88191e0c); }

#static-header .notification_bell.active, .dynamic-header .notification_bell.active {
  background-image: url(../../images/bell_active.svg?6e820b132257); }

/* ------PUSH MENU---------- */
.pushmenu {
  /*this is the nav*/
  background: #187cae;
  font-family: 'UbuntuMedium', Arial, Helvetica, sans-serif;
  width: 240px;
  height: 100%;
  color: #fff;
  top: 0;
  bottom: 0;
  z-index: 9999;
  position: absolute;
  overflow: auto; }
  .pushmenu li {
    display: block;
    /* drops the nav vertically*/
    font-size: 13px;
    text-decoration: none;
    border-top: 1px solid #2289bc;
    border-bottom: 1px solid #0a4666;
    line-height: 44px;
    height: 44px;
    overflow: hidden !important;
    background: #146b95; }
    .pushmenu li a.indent1 {
      padding-left: 25px; }
    .pushmenu li a {
      display: block;
      padding-left: 10px;
      line-height: 44px;
      height: 44px;
      color: #fff;
      text-decoration: none; }
  .pushmenu .hl {
    background: #15709e; }
  .pushmenu li:hover:last-child {
    /*background: none;*/ }
  .pushmenu li:active {
    color: #fff; }
  .pushmenu .bottom-link {
    color: #fff;
    font-size: 10px;
    font-family: 'UbuntuRegular', Arial, Helvetica, sans-serif;
    text-decoration: none;
    margin: 0 3px 10px 3px; }
  .pushmenu .spacer {
    height: 8px !important; }
  .pushmenu #bottom-box {
    text-align: center;
    width: 240px;
    position: relative;
    height: 100px;
    margin-top: 15px; }
  .pushmenu .bottom-spacer {
    height: 100px; }
  .pushmenu #bottom-box a:hover {
    text-decoration: underline; }
  .pushmenu #bottom-box div {
    height: 18px; }
  .pushmenu #cam_page_container {
    margin: 0;
    padding: 0; }
  .pushmenu #mobile-social-media-icons {
    padding: 0;
    margin: 0; }
    .pushmenu #mobile-social-media-icons li, .pushmenu #mobile-social-media-icons a {
      padding: 0; }
    .pushmenu #mobile-social-media-icons li {
      display: inline-block;
      border: 0;
      background: none;
      padding: 0 12px;
      height: 40px;
      line-height: 50px; }
    .pushmenu #mobile-social-media-icons a {
      display: inline-block;
      height: 20px;
      line-height: 20px;
      height: auto; }

/* this moves menu 240px to the right */
.pushmenu-animate {
  transform: translate3d(240px, 0, 0);
  -o-transform: translate3d(240px, 0, 0);
  -ms-transform: translate3d(240px, 0, 0);
  -moz-transform: translate3d(240px, 0, 0);
  -webkit-transform: translate3d(240px, 0, 0); }

.pushmenu-animate-left {
  transform: translate3d(-240px, 0, 0);
  -o-transform: translate3d(-240px, 0, 0);
  -ms-transform: translate3d(-240px, 0, 0);
  -moz-transform: translate3d(-240px, 0, 0);
  -webkit-transform: translate3d(-240px, 0, 0); }

.pushmenu-left {
  left: -240px; }

.pushmenu-right {
  right: -240px; }

.pushmenu-left.pushmenu-open {
  left: 0;
  top: 0;
  bottom: 0;
  position: fixed;
  overflow-x: hidden;
  width: 240px;
  height: auto; }

.pushmenu-push {
  position: relative;
  left: 0; }

/*Transition*/
.pushmenu, .pushmenu-push {
  -webkit-transition: all .15s ease;
  -moz-transition: all .15s ease;
  transition: all .15s ease; }

.push-overlay, .notification-overlay {
  background-color: rgba(0, 0, 0, 0.8);
  display: none;
  cursor: pointer;
  position: absolute;
  overflow-x: hidden;
  overflow-y: hidden;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1001;
  -webkit-transition: all 0.15s ease;
  -moz-transition: all 0.15s ease;
  transition: all 0.1s ease; }

.clear {
  clear: both; }

.clearfix {
  float: left;
  clear: left; }

.hidden {
  display: none; }

.locked {
  display: block; }

.noscroll {
  overflow: hidden;
  height: 100%;
  position: relative; }

#userUpdatesMenuDropdownRoot {
  background: transparent;
  overflow: hidden;
  pointer-events: none; }
  #userUpdatesMenuDropdownRoot div {
    pointer-events: auto; }