#header {
  position: relative;
  width: 100%;
  background: #fff url(../../images/bg-body.gif?588dc80f5af1) repeat-x;
  -webkit-text-size-adjust: none; }
  #header .ad, #header .vote-banner {
    position: absolute;
    display: inline-block;
    margin-top: 10px;
    left: 270px;
    width: 468px;
    height: 60px;
    z-index: 10; }
    #header .ad img, #header .vote-banner img {
      display: block; }
  #header .section {
    height: 88px;
    width: 100%; }
  #header .right_section {
    position: absolute;
    right: 0; }
  .darkmode #header a {
    color: #fff; }
  #header #user_information {
    display: inline-block;
    width: auto;
    min-width: 247px;
    margin-top: 13px;
    margin-right: 12px;
    z-index: 100;
    text-align: left;
    border-top: 1px solid #0c6a93;
    border-right: 1px solid #0c6a93;
    border-bottom: none;
    border-left: 1px solid #0c6a93;
    border-image: initial;
    border-radius: 5px 5px 0 0;
    color: #494949;
    font-size: 11px;
    background: #0c6a93;
    position: relative;
    box-sizing: border-box; }
    #header #user_information.lang-hi, #header #user_information.lang-ja, #header #user_information.lang-zh {
      margin-top: 9px; }
    #header #user_information.uip_v2 {
      position: absolute;
      bottom: 10px;
      right: 12px;
      background: none;
      border: none;
      min-width: auto;
      vertical-align: bottom; }
      #header #user_information.uip_v2 a.uip_btn {
        border-radius: 4px;
        box-sizing: border-box;
        font-family: UbuntuRegular, Helvetica, Arial, sans-serif;
        font-style: normal;
        font-size: 16px;
        line-height: 22px;
        padding: 5px 10px;
        margin: 0px 2px;
        text-decoration: none;
        cursor: pointer;
        vertical-align: bottom;
        display: inline-block;
        height: 32px; }
        #header #user_information.uip_v2 a.uip_btn.uip_primary {
          background: #F47321;
          color: #ffffff;
          border: 1px solid #D56125; }
        #header #user_information.uip_v2 a.uip_btn.uip_secondary {
          background: #ffffff;
          color: #6C6C78;
          border: 1px solid #ACACAC; }
          .darkmode #header #user_information.uip_v2 a.uip_btn.uip_secondary {
            background-color: #272A2C;
            color: #DEDEDE;
            border: 1px solid #474747; }
          #header #user_information.uip_v2 a.uip_btn.uip_secondary.triggerElement {
            border: 1px solid #ACACAC; }
            .darkmode #header #user_information.uip_v2 a.uip_btn.uip_secondary.triggerElement {
              border: 1px solid #474747; }
            #header #user_information.uip_v2 a.uip_btn.uip_secondary.triggerElement.tabindex_fix {
              border: 1px solid #D56125; }
        #header #user_information.uip_v2 a.uip_btn.uip_upgrade {
          font-size: 12px;
          line-height: 14px;
          padding: 8px 12px; }
        #header #user_information.uip_v2 a.uip_btn.purchase_tokens {
          padding-right: 12px;
          padding-left: 12px; }
        #header #user_information.uip_v2 a.uip_btn .token_img {
          width: 17px;
          height: 17px;
          vertical-align: middle;
          margin-bottom: 3px;
          margin-right: 2px;
          display: inline-block;
          background-image: url(../../images/uip_tokens.svg?1a695b98c8a7);
          background-repeat: no-repeat;
          text-decoration: none; }
          .darkmode #header #user_information.uip_v2 a.uip_btn .token_img {
            background-image: url(../../images/uip_tokens_darkmode.svg?5a603b1e7789); }
      #header #user_information.uip_v2 .user_information_header_icon {
        margin-left: 0px;
        padding-left: 0px;
        position: inherit;
        top: 2px;
        width: 18px;
        height: 18px;
        padding: 0px 2px; }
        #header #user_information.uip_v2 .user_information_header_icon.anonymous {
          background-image: url(../../images/gendericons/anon_dark.svg?7a02cebefc89);
          background-repeat: no-repeat;
          display: inline-block; }
          .darkmode #header #user_information.uip_v2 .user_information_header_icon.anonymous {
            background-image: url(../../images/gendericons/anon.svg?00993266cf7f); }
      #header #user_information.uip_v2 #user_information_profile_container:hover .user_information_header_username {
        text-decoration: underline; }
      #header #user_information.uip_v2 #userInfoPanelMenuDropdownRoot {
        display: inline;
        position: absolute;
        width: 100%;
        left: 0px; }
      #header #user_information.uip_v2 #userInfoPanelMenuDropdownRoot:hover ~ .user_information_header_username {
        text-decoration: none; }
    #header #user_information a.tokencountlink,
    #header #user_information strong.auip_tokens {
      color: #494949;
      font-size: 13px;
      font-family: 'UbuntuBold', Arial, Helvetica, sans-serif; }
    #header #user_information table th, #header #user_information table td, #header #user_information a {
      font: 11px 'UbuntuMedium', Arial, Helvetica, sans-serif;
      text-align: left; }
      #header #user_information table th.auip_links, #header #user_information table td.auip_links, #header #user_information a.auip_links {
        font-family: 'UbuntuRegular', Arial, Helvetica, sans-serif; }
    #header #user_information tr > td:last-child {
      text-align: right; }
    #header #user_information table th, #header #user_information table td {
      padding: 2px 0 2px 5px; }
    #header #user_information .bottom table td strong {
      font: 13px 'UbuntuBold', Arial, Helvetica, sans-serif; }
    #header #user_information .overflow {
      width: 105px;
      height: 15px;
      overflow: hidden; }
    #header #user_information a {
      color: #e45900; }
    #header #user_information .bottom {
      height: 42px;
      background-color: #e9e9e9;
      padding: 4px 4px 4px 0; }
    #header #user_information .user_information_header {
      padding: 3px 0 4px;
      height: 17px;
      width: 100%; }
      #header #user_information .user_information_header .user_information_container {
        display: inline-block;
        cursor: pointer; }
        #header #user_information .user_information_header .user_information_container.anonymous {
          cursor: default; }
          #header #user_information .user_information_header .user_information_container.anonymous > .user_information_header_icon {
            top: 0; }
    #header #user_information .user_information_container:hover span {
      text-decoration: underline; }
    #header #user_information .user_information_header_icon {
      vertical-align: top;
      padding-left: 2px;
      position: relative;
      margin-left: 3px;
      top: -1px;
      width: 16px;
      height: 16px; }
    #header #user_information .user_information_header_username {
      display: inline-block;
      color: white;
      font-family: 'UbuntuBold', Helvetica, Arial, sans-serif;
      font-size: 12px;
      position: relative;
      margin: 0 2px;
      max-width: 150px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      vertical-align: bottom;
      line-height: 17px;
      cursor: pointer; }
      #header #user_information .user_information_header_username.uip_v2 {
        line-height: 10px;
        vertical-align: top;
        margin: 0px;
        color: #49494F;
        min-width: 55px;
        max-width: 105px;
        padding-bottom: 2px; }
        .darkmode #header #user_information .user_information_header_username.uip_v2 {
          color: #fcfcfc; }
    #header #user_information .user_information_status.uip_v2 {
      color: #6C6C78;
      vertical-align: bottom;
      position: absolute;
      left: 35px;
      bottom: 3px;
      font-family: UbuntuRegular, Helvetica, Arial, sans-serif;
      font-style: normal;
      font-size: 9px;
      line-height: 10px; }
      .darkmode #header #user_information .user_information_status.uip_v2 {
        color: #CBCBCB; }
      #header #user_information .user_information_status.uip_v2.supporter {
        color: #F47321; }
    #header #user_information .uipTestLink {
      background-color: #fff;
      color: #306A91; }
      #header #user_information .uipTestLink:hover {
        background-color: #306A91;
        color: #FFF; }
        .darkmode #header #user_information .uipTestLink:hover {
          background-color: #7f7f7f; }
      .darkmode #header #user_information .uipTestLink {
        background-color: #2a2a2c;
        color: #fff; }
    #header #user_information .user_information_header_arrowdown {
      border: none;
      vertical-align: top;
      position: relative;
      top: 4px;
      width: 8px;
      height: 8px; }
      #header #user_information .user_information_header_arrowdown.uip_v2 {
        top: 8px;
        width: 10px;
        height: 7px;
        margin-left: 14px;
        background-image: url(../../images/arrowdown_black.svg?d52de6552c38);
        display: inline-block; }
        .darkmode #header #user_information .user_information_header_arrowdown.uip_v2 {
          background-image: url(../../images/arrowdown_grey.svg?8d913e8950f8); }
    #header #user_information .user_information_icon {
      background: center/contain no-repeat;
      border: none;
      cursor: pointer;
      float: right;
      height: 16px;
      width: 13px; }
    #header #user_information .chat_bubble {
      margin: 0 10px 0 0;
      background-image: url(../../tsdefaultassets/pms/chat-bubble-gray.svg?fc4198c61bdf);
      width: 12px; }
    #header #user_information .chat_bubble.active {
      background-image: url(../../tsdefaultassets/pms/chat-bubble-normal.svg?018218ac58fc); }
    #header #user_information .chat_bubble.has_unread {
      background-image: url(../../tsdefaultassets/pms/chat-bubble-new.svg?1a2e10645f4a);
      width: 16px; }
    #header #user_information .notification_bell {
      background-image: url(../../images/bell_inactive.svg?b7c610114958);
      margin-right: 6px; }
      .darkmode #header #user_information .notification_bell {
        background-image: url(../../images/darkmode_bell_inactive.svg?adffa5f94466); }
    #header #user_information .notification_bell.has_unseen {
      background-image: url(../../images/bell_notification.svg?7c8c88191e0c); }
      .darkmode #header #user_information .notification_bell.has_unseen {
        background-image: url(../../images/darkmode_bell_notification.svg?f91063ab46c7); }
    #header #user_information #userUpdatesBellRoot.has_unseen .notification_bell.uip_v2 {
      background-image: url(../../images/bell_notification_black.svg?9f7cd01adff1); }
      .darkmode #header #user_information #userUpdatesBellRoot.has_unseen .notification_bell.uip_v2 {
        background-image: url(../../images/darkmode_bell_notification.svg?f91063ab46c7); }
    #header #user_information .notification_bell.active {
      background-image: url(../../images/bell_active.svg?6e820b132257); }
      .darkmode #header #user_information .notification_bell.active {
        background-image: url(../../images/darkmode_bell_active.svg?be025e95b1a2); }
  @media (max-width: 1280px) {
    #header .ad.uip_v2 {
      display: none; } }
  #header .anon_dropdown_container {
    display: inline;
    position: relative; }
  #header .tabindex_fix {
    outline: none; }

.nav-bar {
  overflow: hidden;
  height: 1%;
  padding: 0 12px 0 32px;
  background: #0c6a93;
  border-bottom: 3px solid #f47321;
  white-space: nowrap; }
  .nav-bar .purchase_tokens {
    display: inline-block;
    color: #FFF; }
    .nav-bar .purchase_tokens a {
      float: none; }
  .nav-bar #beta {
    height: 14px;
    vertical-align: text-top;
    margin: 0 0 0 3px;
    background: #f47321;
    border-radius: 2px;
    color: #fff;
    padding: 0 4px 0 3px;
    text-shadow: none;
    font: 11px 'UbuntuRegular', Arial, Helvetica, sans-serif;
    line-height: 1.7; }
  .nav-bar #tube-link-container:hover {
    text-decoration: none; }
  .nav-bar #tube-link:hover {
    text-decoration: underline; }

#nav {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  line-height: 30px;
  height: 36px;
  overflow: hidden;
  display: block;
  box-sizing: content-box;
  width: 100%; }
  #nav li {
    font: 1.166em 'UbuntuMedium', Arial, Helvetica, sans-serif;
    text-shadow: 1px 1px 0 #000;
    padding: 12px 0 3px 0;
    float: left;
    margin: 0 20px 0 0; }
    #nav li a {
      color: #fff; }
  #nav div {
    color: #fff; }

.sub-nav {
  display: inline-block;
  position: relative;
  top: 3px;
  list-style: none;
  margin: 0;
  padding: 0;
  height: 27px;
  font: .8666em/16px 'UbuntuMedium', Arial, Helvetica, sans-serif; }
  .sub-nav li {
    float: left;
    margin: 0 2px 0 0;
    height: 27px;
    overflow: hidden; }
    .sub-nav li.selected {
      font-size: 1.153em;
      line-height: 16px; }

#mybroadcast-nav-tab a, #contest_nav_tab a {
  color: #090; }

.gender-tab a, .sub-nav li > a {
  float: left;
  box-sizing: border-box;
  height: 27px;
  color: #5e81a4;
  background: #dde9f5;
  border: 1px solid #8bb3da;
  border-radius: 4px 4px 0 0;
  -webkit-border-radius: 4px 4px 0 0;
  -moz-border-radius: 4px 4px 0 0;
  padding: 5px 11px 4px;
  text-decoration: none; }
  .gender-tab ahover, .active .gender-tab a, .sub-nav li > ahover, .active .sub-nav li > a {
    text-decoration: none;
    background: #fff;
    color: #dc5500;
    border-bottom: 1px solid #fff;
    cursor: default; }

.darkmode #header {
  background: #000; }

.darkmode #header #user_information .user_information_header {
  background: #3a3e41;
  border-radius: 5px 5px 0 0; }

.darkmode #header #user_information {
  border-top-color: #323639;
  border-left-color: #323639;
  border-right-color: #323639;
  background: transparent; }

.darkmode #header #user_information .bottom {
  background-color: #262a2c; }

.darkmode #header #user_information,
.darkmode .logo-zone strong,
.darkmode #header #user_information a.tokencountlink,
.darkmode #header #user_information strong.auip_tokens {
  color: #b3b3b3; }

.darkmode #header #user_information a {
  color: #68B5F0; }

.footer-holder {
  padding: 20px 0 15px;
  width: 100%;
  overflow: hidden;
  font: .833em/1.2em 'UbuntuRegular', Arial, Helvetica, sans-serif;
  text-align: center;
  background: url(../../images/bg-footer-holder.gif?cc1e09ef1e7a) repeat-x; }
  .footer-holder p {
    margin: 0 0 8px; }
  .footer-holder ul {
    text-align: center;
    list-style: none;
    margin: 0;
    padding: 0 65px 27px;
    font: 12px/20px 'UbuntuMedium', Arial, Helvetica, sans-serif; }
    .footer-holder ul li {
      display: inline;
      padding: 0 3px 0 4px;
      background: url(../../images/divider-01.gif?f035b6ed9178) no-repeat 0 50%; }
      .footer-holder ul li:first-child {
        background: none; }
      .footer-holder ul li a {
        color: #6b6b6b; }
  .footer-holder .nav {
    font: 13px/15px 'UbuntuMedium', Arial, Helvetica, sans-serif;
    padding: 0 65px 13px; }
    .footer-holder .nav li {
      padding: 0 7px 0 11px; }
      .footer-holder .nav li a {
        color: #dc5500; }
  .footer-holder #social-media-icons li {
    padding: 0 10px;
    background: none;
    height: 20px;
    line-height: 20px; }
    .footer-holder #social-media-icons li a {
      height: 20px;
      line-height: 20px; }

.darkmode .footer-holder {
  background: #1a1a1b;
  border-top: 5px solid #727272; }

.darkmode .footer-holder h2, .darkmode .footer-holder .nav li a, .darkmode .footer-holder ul li a, .darkmode .footer-holder a, .darkmode .footer-holder p {
  color: #b3b3b3; }

.footer-holder .footer-cb-address {
  background: transparent url(../../images/cb-footer-address-US.svg?32f8dfba1611) no-repeat center;
  background-size: contain;
  text-align: center;
  margin: 5px auto;
  display: block;
  height: 10px; }
  .darkmode .footer-holder .footer-cb-address {
    background: transparent url(../../images/cb-footer-address-US_dm.svg?01811869745d) no-repeat center;
    background-size: contain; }

.footer-holder .twitter-icon {
  display: inline-block;
  width: 20px;
  height: 17px;
  background-image: url(../../images/socialmediaicons/social-media-twitter.svg?f674327e0970); }
  .darkmode .footer-holder .twitter-icon {
    background-image: url(../../images/socialmediaicons/social-media-twitter_dm.svg?96b2640b9b30); }

.footer-holder .facebook-icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-image: url(../../images/socialmediaicons/social-media-facebook.svg?ca05d9320c6d); }
  .darkmode .footer-holder .facebook-icon {
    background-image: url(../../images/socialmediaicons/social-media-facebook_dm.svg?1650dafbb2cf); }

.footer-holder .instagram-icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-image: url(../../images/socialmediaicons/social-media-instagram.svg?4ccdae05a467); }
  .darkmode .footer-holder .instagram-icon {
    background-image: url(../../images/socialmediaicons/social-media-instagram_dm.svg?805f07623584); }

.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 .send-button {
  background-color: #F47321;
  border: 1px solid #D56125;
  cursor: pointer; }
  #ChatWindowBar .PrivateChatWindow .send-button.disabled {
    background-color: grey;
    border: 1px solid grey;
    cursor: wait; }

#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; }

/* Note this is a theme file -- Only color css allowed here! */
#header #user_information #userInfoPanelMenuDropdownRoot #UserMenuDropDown {
  border-color: #2C6990; }
  .darkmode #header #user_information #userInfoPanelMenuDropdownRoot #UserMenuDropDown {
    border-color: #323639; }

#header #user_information #userInfoPanelMenuDropdownRoot .dmSwitchCircle {
  background-color: #fff; }

#header #user_information #userInfoPanelMenuDropdownRoot .dmSwitch {
  background-color: #474747; }

/* 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)
 */
.userFeedbackForm {
  background-color: #fff; }
  .darkmode .userFeedbackForm {
    background-color: #1a1a1a; }
  .userFeedbackForm .submitRow {
    background-color: #F47321;
    border-color: #A8A8A8;
    color: #fff; }
  .darkmode .userFeedbackForm .cancelAnchor {
    color: #68B5F0; }
  .userFeedbackForm .editToggle {
    background-color: rgba(249, 249, 249, 0.75);
    color: #000; }
    .userFeedbackForm .editToggle:hover {
      background-color: #fff;
      color: #0471A1; }
  .userFeedbackForm .closeControl {
    background: transparent url(../../tsdefaultassets/close.svg?9a87e6f7a4de) no-repeat center center; }
    .darkmode .userFeedbackForm .closeControl {
      background: transparent url(../../tsdefaultassets/close-dark.svg?aaaa0dcab22a) no-repeat center center; }
  .userFeedbackForm :focus {
    outline: -webkit-focus-ring-color solid 1px; }
  .darkmode .userFeedbackForm .feedbackComment {
    background-color: #1a1a1a;
    color: #B3B3B3; }
  .userFeedbackForm .feedbackComment:focus {
    border-color: transparent; }
  .userFeedbackForm .screenShotControl .sscButton {
    background: #0c6a93;
    border-color: #A8A8A8;
    color: #fff; }
  .userFeedbackForm .screenShotControl .info {
    color: #ABABAB; }
  .userFeedbackForm .highlight:not(.active) {
    background-color: transparent; }
    .userFeedbackForm .highlight:not(.active):hover {
      background-color: #3C87BA; }
  .userFeedbackForm .highlight.active {
    background-color: #3C87BA; }
  .userFeedbackForm .error {
    color: red; }

.canvas .infoToolTip {
  background-color: #FFFFD3;
  border-color: #CCCCCC; }

.canvas .drawControls {
  background-color: #fff; }
  .canvas .drawControls .done:hover {
    background-color: #E8E8E8; }
  .canvas .drawControls .hideImage {
    background-color: #000; }

/* 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)
 */
.roomElement {
  border: 1px solid rgba(100, 100, 100, 0.5); }
  .darkmode .roomElement {
    border: 1px solid rgba(100, 100, 100, 0.5); }

.roomElementAnchor {
  background-color: #f0f1f1; }
  .darkmode .roomElementAnchor {
    background-color: #252728; }
  .roomElementAnchor.isHighlighted {
    background-color: #f9eed0; }
    .darkmode .roomElementAnchor.isHighlighted {
      background-color: #F47321; }
  .roomElementAnchor:hover {
    color: #dc5500; }
    .darkmode .roomElementAnchor:hover {
      color: #DEDEDE; }

/* 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)
 */
/*
 * 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)
 */
.PmListItem {
  border-color: #E0E0E0;
  background-color: #ffffff; }
  .darkmode .PmListItem, .hasDarkBackground .PmListItem {
    color: #CBCBCB; }
  .darkmode .PmListItem {
    background-color: #202223; }
  .PmListItem .replyIconSvg svg {
    fill: #49494F; }
    .darkmode .PmListItem .replyIconSvg svg, .hasDarkBackground .PmListItem .replyIconSvg svg {
      fill: #ffffff; }
  .darkmode .PmListItem .messageDiv, .hasDarkBackground .PmListItem .messageDiv {
    color: #ffffff; }
  .PmListItem.unreadBg {
    background-color: #FCEADC; }
    .darkmode .PmListItem.unreadBg, .hasDarkBackground .PmListItem.unreadBg {
      background-color: #5B4736; }
  .PmListItem.selected {
    background-color: #E0E0E0; }
    .darkmode .PmListItem.selected, .hasDarkBackground .PmListItem.selected {
      background-color: #434649; }
  .hasDarkBackground .PmListItem {
    border-color: #7F7F7F;
    background-color: #2A2C2E; }
  .PmListItem .avatarBubble .broadcaster {
    background-color: #DC5500; }
    .darkmode .PmListItem .avatarBubble .broadcaster, .hasDarkBackground .PmListItem .avatarBubble .broadcaster {
      background-color: #ff6200; }
  .PmListItem .avatarBubble .mod {
    background-color: #DC0000; }
    .darkmode .PmListItem .avatarBubble .mod, .hasDarkBackground .PmListItem .avatarBubble .mod {
      background-color: #DC0000; }
  .PmListItem .avatarBubble .inFanclub {
    background-color: #090; }
    .darkmode .PmListItem .avatarBubble .inFanclub, .hasDarkBackground .PmListItem .avatarBubble .inFanclub {
      background-color: #00ff00; }
  .PmListItem .avatarBubble .tippedTonsRecently {
    background-color: #804baa; }
    .darkmode .PmListItem .avatarBubble .tippedTonsRecently, .hasDarkBackground .PmListItem .avatarBubble .tippedTonsRecently {
      background-color: #ad62e1; }
  .PmListItem .avatarBubble .tippedALotRecently {
    background-color: #be6aff; }
    .darkmode .PmListItem .avatarBubble .tippedALotRecently, .hasDarkBackground .PmListItem .avatarBubble .tippedALotRecently {
      background-color: #d4a0ff; }
  .PmListItem .avatarBubble .tippedRecently {
    background-color: #009; }
    .darkmode .PmListItem .avatarBubble .tippedRecently, .hasDarkBackground .PmListItem .avatarBubble .tippedRecently {
      background-color: #8a98ff; }
  .PmListItem .avatarBubble .hasTokens {
    background-color: #69A; }
    .darkmode .PmListItem .avatarBubble .hasTokens, .hasDarkBackground .PmListItem .avatarBubble .hasTokens {
      background-color: #84c6dc; }
  .PmListItem .avatarBubble .defaultUser {
    background-color: #49494F; }
    .darkmode .PmListItem .avatarBubble .defaultUser, .hasDarkBackground .PmListItem .avatarBubble .defaultUser {
      background-color: #B3B3B3; }
  .PmListItem .closeBtnContainer {
    fill: #888; }
    .PmListItem .closeBtnContainer:hover {
      fill: #222; }
    .darkmode .PmListItem .closeBtnContainer:hover, .hasDarkBackground .PmListItem .closeBtnContainer:hover {
      fill: #D1D1D1; }
  .PmListItem .timeString {
    color: #6C6C78; }
    .darkmode .PmListItem .timeString {
      color: #888; }

/*
 * 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)
 */
.PMControlBar {
  background-color: #ffffff; }
  .darkmode .PMControlBar {
    background-color: #202223; }
  .PMControlBar .backButton {
    color: #0471A1; }
    .darkmode .PMControlBar .backButton {
      color: #68B5F0; }

.SearchBar {
  border-color: #BDBDBD; }
  .SearchBar .searchUserInput {
    color: #000000;
    border-color: #BDBDBD; }
    .SearchBar .searchUserInput:focus {
      border-color: #000000; }
    .darkmode .SearchBar .searchUserInput, .hasDarkBackground .SearchBar .searchUserInput {
      color: #ffffff; }
      .darkmode .SearchBar .searchUserInput:focus, .hasDarkBackground .SearchBar .searchUserInput:focus {
        border-color: #ffffff; }

.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; }

#ChatTabContents .chat-input-div .send-button,
#ChatTabContents .inputDiv .send-button,
#SplitModeChatSettingsTab .chat-input-div .send-button,
#SplitModeChatSettingsTab .inputDiv .send-button,
#UserListTab .chat-input-div .send-button,
#UserListTab .inputDiv .send-button,
#FVChatTabContents .chat-input-div .send-button,
#FVChatTabContents .inputDiv .send-button,
#FVChatSettingsTab .chat-input-div .send-button,
#FVChatSettingsTab .inputDiv .send-button {
  color: #ffffff;
  background-color: #eb3404;
  cursor: pointer;
  text-shadow: #bc2b1d 1px 1px 0; }
  #ChatTabContents .chat-input-div .send-button.disabled,
  #ChatTabContents .inputDiv .send-button.disabled,
  #SplitModeChatSettingsTab .chat-input-div .send-button.disabled,
  #SplitModeChatSettingsTab .inputDiv .send-button.disabled,
  #UserListTab .chat-input-div .send-button.disabled,
  #UserListTab .inputDiv .send-button.disabled,
  #FVChatTabContents .chat-input-div .send-button.disabled,
  #FVChatTabContents .inputDiv .send-button.disabled,
  #FVChatSettingsTab .chat-input-div .send-button.disabled,
  #FVChatSettingsTab .inputDiv .send-button.disabled {
    background-color: grey;
    cursor: wait;
    text-shadow: none; }

#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)
 */
#FVChatSettingsTab .chat-settings-input, #SplitModeChatSettingsTab .chat-settings-input {
  border-color: #b1b1b1; }
  .darkmode #FVChatSettingsTab .chat-settings-input::placeholder, .darkmode #SplitModeChatSettingsTab .chat-settings-input::placeholder {
    color: #ddd; }
  .darkmode #FVChatSettingsTab .chat-settings-input:focus, .darkmode #SplitModeChatSettingsTab .chat-settings-input:focus {
    outline: none;
    box-shadow: 0 0 0 2px #68b5f0; }

.darkmode #FVChatSettingsTab .chat-settings-select, .darkmode #SplitModeChatSettingsTab .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; }

.tooltip-white {
  color: #000;
  background-color: #FFF;
  border-color: #EFEFEF; }
  .darkmode .tooltip-white {
    color: #ededed;
    background-color: #303030;
    border-color: #222222; }
  .tooltip-white .divotBottom .divotBackground {
    border-top-color: #fff; }
    .darkmode .tooltip-white .divotBottom .divotBackground {
      border-top-color: #303030; }
  .tooltip-white .divotBottom .divotBorder {
    border-top-color: #efefef; }
    .darkmode .tooltip-white .divotBottom .divotBorder {
      border-top-color: #303030; }

.tooltip {
  color: #222222;
  background-color: #fdf294;
  border-color: #ff9130; }
  .darkmode .tooltip {
    color: #ededed;
    background-color: #303030;
    border-color: #222222; }
  .tooltip .divotTop .divotBackground {
    border-bottom-color: #fdf294; }
    .darkmode .tooltip .divotTop .divotBackground {
      border-bottom-color: #303030; }
  .tooltip .divotTop .divotBorder {
    border-bottom-color: #ff9130; }
    .darkmode .tooltip .divotTop .divotBorder {
      border-bottom-color: #222222; }
  .tooltip .divotBottom .divotBackground {
    border-top-color: #fdf294; }
    .darkmode .tooltip .divotBottom .divotBackground {
      border-top-color: #303030; }
  .tooltip .divotBottom .divotBorder {
    border-top-color: #ff9130; }
    .darkmode .tooltip .divotBottom .divotBorder {
      border-top-color: #222222; }
  .tooltip .divotLeft .divotBackground {
    border-right-color: #fdf294; }
    .darkmode .tooltip .divotLeft .divotBackground {
      border-right-color: #303030; }
  .tooltip .divotLeft .divotBorder {
    border-right-color: #ff9130; }
    .darkmode .tooltip .divotLeft .divotBorder {
      border-right-color: #222222; }
  .tooltip .divotRight .divotBackground {
    border-left-color: #fdf294; }
    .darkmode .tooltip .divotRight .divotBackground {
      border-left-color: #303030; }
  .tooltip .divotRight .divotBorder {
    border-left-color: #ff9130; }
    .darkmode .tooltip .divotRight .divotBorder {
      border-right-color: #222222; }

.tooltip.modern {
  color: #222222;
  background-color: #FFFFFF;
  border-color: #EFEFEF;
  box-shadow: 0 0 30px grey;
  fill: currentColor !important; }
  .tooltip.modern .tooltipCloseButton {
    cursor: pointer; }
    .tooltip.modern .tooltipCloseButton:hover {
      fill: #999 !important; }
  .darkmode .tooltip.modern {
    color: #EDEDED;
    background-color: #303030;
    border-color: #222222;
    box-shadow: 0 0 16px black; }
  .tooltip.modern .divotTop .divotBackground {
    border-bottom-color: #FFFFFF; }
    .darkmode .tooltip.modern .divotTop .divotBackground {
      border-bottom-color: #303030; }
  .tooltip.modern .divotTop .divotBorder {
    border-bottom-color: #EFEFEF; }
    .darkmode .tooltip.modern .divotTop .divotBorder {
      border-bottom-color: #222222; }
  .tooltip.modern .divotBottom .divotBackground {
    border-top-color: #FFFFFF; }
    .darkmode .tooltip.modern .divotBottom .divotBackground {
      border-top-color: #303030; }
  .tooltip.modern .divotBottom .divotBorder {
    border-top-color: #EFEFEF; }
    .darkmode .tooltip.modern .divotBottom .divotBorder {
      border-top-color: #222222; }
  .tooltip.modern .divotLeft .divotBackground {
    border-right-color: #FFFFFF; }
    .darkmode .tooltip.modern .divotLeft .divotBackground {
      border-right-color: #303030; }
  .tooltip.modern .divotLeft .divotBorder {
    border-right-color: #EFEFEF; }
    .darkmode .tooltip.modern .divotLeft .divotBorder {
      border-right-color: #222222; }
  .tooltip.modern .divotRight .divotBackground {
    border-left-color: #FFFFFF; }
    .darkmode .tooltip.modern .divotRight .divotBackground {
      border-left-color: #303030; }
  .tooltip.modern .divotRight .divotBorder {
    border-left-color: #EFEFEF; }
    .darkmode .tooltip.modern .divotRight .divotBorder {
      border-left-color: #222222; }

.tooltip.white-shadow {
  color: #222222;
  background-color: #FFFFFF;
  border-color: #ACACAC;
  box-shadow: 0 0 16px rgba(0, 0, 0, 0.16); }
  .darkmode .tooltip.white-shadow {
    color: #FFFFFF;
    background-color: #222429;
    border-color: #2E3137;
    box-shadow: 0 0 16px black; }
  .tooltip.white-shadow .divotTop .divotBackground {
    border-bottom-color: #FFFFFF; }
    .darkmode .tooltip.white-shadow .divotTop .divotBackground {
      border-bottom-color: #222429; }
  .tooltip.white-shadow .divotTop .divotBorder {
    border-bottom-color: #ACACAC; }
    .darkmode .tooltip.white-shadow .divotTop .divotBorder {
      border-bottom-color: #2E3137; }
  .tooltip.white-shadow .divotBottom .divotBackground {
    border-top-color: #FFFFFF; }
    .darkmode .tooltip.white-shadow .divotBottom .divotBackground {
      border-top-color: #222429; }
  .tooltip.white-shadow .divotBottom .divotBorder {
    border-top-color: #ACACAC; }
    .darkmode .tooltip.white-shadow .divotBottom .divotBorder {
      border-top-color: #2E3137; }
  .tooltip.white-shadow .divotLeft .divotBackground {
    border-right-color: #FFFFFF; }
    .darkmode .tooltip.white-shadow .divotLeft .divotBackground {
      border-right-color: #222429; }
  .tooltip.white-shadow .divotLeft .divotBorder {
    border-right-color: #ACACAC; }
    .darkmode .tooltip.white-shadow .divotLeft .divotBorder {
      border-right-color: #2E3137; }
  .tooltip.white-shadow .divotRight .divotBackground {
    border-left-color: #FFFFFF; }
    .darkmode .tooltip.white-shadow .divotRight .divotBackground {
      border-left-color: #222429; }
  .tooltip.white-shadow .divotRight .divotBorder {
    border-left-color: #ACACAC; }
    .darkmode .tooltip.white-shadow .divotRight .divotBorder {
      border-left-color: #2E3137; }

/* Note this is a theme file -- Only color css allowed here! */
.transparentCheckbox {
  border-color: #A8A8A8; }
  .transparentCheckbox.focused {
    box-shadow: 0 0 0 2px #68b5f0; }
  .transparentCheckbox.checked {
    background-color: #0075ff; }
    .darkmode .transparentCheckbox.checked {
      background-color: #8E8E93; }

/* Note this is a theme file -- Only color css allowed here! */
/* Note this is a theme file -- Only color css allowed here! */
.followedContainer {
  color: #0a5a83; }
  .darkmode .followedContainer {
    color: #b3b3b3; }

#main .top-section .sub-nav li a.tabAnchor.orange, #main .top-section .sub-nav li a.tabAnchor.orange .followed,
#main .genderTabs .tabAnchor.orange,
#main .followedContainer .tabAnchor.orange,
#main .genderTabs .tabAnchor.orange .followed,
#main .followedContainer .tabAnchor.orange .followed, #nav > #followed_tab.orange, #nav > #followed_tab.orange .followed, #nav.orange, #nav.orange .followed, .right-buttons #followed_tab .followed.orange, .right-buttons #followed_tab .followed.orange .followed {
  background-color: #FAE6C4 !important;
  color: #dc5500 !important; }
  .darkmode #main .top-section .sub-nav li a.tabAnchor.orange, .darkmode #main .top-section .sub-nav li a.tabAnchor.orange .followed, .darkmode #main .genderTabs .tabAnchor.orange, .darkmode #main .followedContainer .tabAnchor.orange, .darkmode #main .genderTabs .tabAnchor.orange .followed, .darkmode #main .followedContainer .tabAnchor.orange .followed, .darkmode #nav > #followed_tab.orange, .darkmode #nav > #followed_tab.orange .followed, .darkmode #nav.orange, .darkmode #nav.orange .followed, .darkmode .right-buttons #followed_tab .followed.orange, .darkmode .right-buttons #followed_tab .followed.orange .followed {
    background-color: #885336 !important;
    color: #ffffff !important; }

/* 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; }

/*
 * 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)
 */
body.darkmode {
  background: #000; }

body.darkmode #main {
  color: #b3b3b3; }

.textColor {
  color: #494949; }
  .darkmode .textColor {
    color: #b3b3b3; }

.bgColor {
  background-color: #FFFFFF; }
  .darkmode .bgColor {
    background-color: #2a2c30; }

.tabSectionBorder {
  border-bottom: 1px solid #8bb3da; }
  .darkmode .tabSectionBorder {
    border-bottom: 1px solid #666666; }

.tabBorder {
  border-color: #8bb3da; }
  .darkmode .tabBorder {
    border-color: #666666; }

.tabActiveBorder, .tabBorder:hover:not(.orange) {
  border-bottom: 1px solid #ffffff; }
  .darkmode .tabActiveBorder, .darkmode .tabBorder:hover:not(.orange) {
    border-bottom: 1px solid #000; }

.tabBorder.tabBorderNoHover:hover {
  border-bottom: 1px solid #8bb3da; }
  .darkmode .tabBorder.tabBorderNoHover:hover {
    border-bottom: 1px solid #666666; }

.tabInactiveBgColor {
  background-color: #dde9f5; }
  .darkmode .tabInactiveBgColor {
    background-color: #2a2c30; }

.tabInactiveColor {
  color: #5e81a4; }
  .darkmode .tabInactiveColor {
    color: #dedede; }

.tabActiveBgColor, .tabInactiveBgColor:hover {
  background-color: #FFFFFF; }
  .darkmode .tabActiveBgColor, .darkmode .tabInactiveBgColor:hover {
    background-color: #000; }

.tabActiveColor, .tabInactiveColor:hover {
  color: #dc5500; }
  .darkmode .tabActiveColor, .darkmode .tabInactiveColor:hover {
    color: #68B5F0; }

.chatAreaTabColor {
  color: #4c4c4c; }
  .darkmode .chatAreaTabColor {
    color: #aaaaaa; }

.defaultColor {
  color: #494949; }
  .darkmode .defaultColor {
    color: #b3b3b3; }

.defaultTooltipColor {
  color: #222222; }
  .darkmode .defaultTooltipColor {
    color: #B3B3B3; }

.roomSubjectToolTipColor {
  color: #494949; }
  .darkmode .roomSubjectToolTipColor {
    color: #b3b3b3; }

.hrefColor {
  color: #0A5B83; }
  .darkmode .hrefColor {
    color: #68B5F0; }

.tagFontColor {
  color: #FFFFFF; }

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

.tagHDColor {
  background-color: #2472B4; }

.tagLineColor {
  background-color: #0b5d81; }

.tagOfflineColor {
  background-color: #4F4F4F; }

.tagPrivateGroupColor {
  background-color: #B60A42; }

.camBgColor {
  background-color: #F0F1F1; }
  .darkmode .camBgColor {
    background-color: #2A2C2E; }

.camBorderColor {
  color: #ACACAC; }
  .darkmode .camBorderColor {
    color: #2A2C2E; }

.camSubjectColor {
  color: #000000; }
  .darkmode .camSubjectColor {
    color: #B3B3B3; }

.camSubjectTagColor {
  color: #0A5A83; }
  .darkmode .camSubjectTagColor {
    color: #68B5F0; }

.camAltTextColor {
  color: #575757; }
  .darkmode .camAltTextColor {
    color: #888888; }

.camHrefColor {
  color: #0A5A83; }
  .darkmode .camHrefColor {
    color: #68B5F0; }

.transparentBg {
  background: transparent; }

.nextCamBgColor {
  background: #FCEADB; }
  .darkmode .nextCamBgColor {
    background: #303843; }

.navigationAlt2BgImage {
  background: url(../../tsdefaultassets/gender_tab_bg.gif?0437047d9c3a) repeat-x; }
  .darkmode .navigationAlt2BgImage {
    background-image: none; }

.navigationAlt2BgColor {
  background-color: #ffffff; }
  .darkmode .navigationAlt2BgColor {
    background-color: #2a2c30; }

.contentBgColor:hover {
  border-bottom-color: #ffffff; }
  .darkmode .contentBgColor:hover {
    border-bottom-color: #202223; }

.overlayOpacity {
  background-color: #000 !important;
  opacity: 0.85; }

.dismissibleMessageColor {
  color: #49494F; }
  .darkmode .dismissibleMessageColor {
    color: #B3B3B3; }

#header #user_information .userInfoDropdownBgColor {
  background-color: #3C87BA; }
  .darkmode #header #user_information .userInfoDropdownBgColor {
    background-color: #515151; }

#header #user_information .userInfoDropdownTextColor {
  color: #fff; }
  .darkmode #header #user_information .userInfoDropdownTextColor {
    color: #fff; }

#header #user_information .userInfoDropdownHighlightColor {
  background-color: transparent; }

#header #user_information .userInfoDropdownHighlightColor:hover {
  background-color: #F47321; }

.darkmode .logo-zone image {
  opacity: 0.8; }

.darkmode.isIpad select {
  color: #000 !important; }

/**
From defaultSiteSettings
----bgColor: "#ffffff", ---- DONE
navigationBgColor: "#0c6a93",
navigationFontColor: "#ffffff",
navigationAltBgColor: "#f47321",
----navigationAlt2BgColor: "#ffffff", ---- DONE
----navigationAlt2BgImage: `url(../../scss/site/${STATIC_URL_ROOT}tsdefaultassets/gender_tab_bg.gif) repeat-x`, ---- DONE
h1Color: "#004B5E",
----textColor: "#494949", ---- DONE
----defaultColor: "#494949", ---- DONE
----defaultTooltipColor: "#222222", ---- DONE
userInfoAreaTextColor: "#222222",
----hrefColor: "#0A5B83", ---- DONE
----tabBorderColor: "#8bb3da",---- DONE
----tabActiveColor: "#ffffff", ---- DONE
----tabInactiveColor: "#dde9f5", ---- DONE
----tabActiveFontColor: "#dc5500", ---- DONE
----tabInactiveFontColor: "#5e81a4", ---- DONE
----tagExhibColor: "#6D85B5", ---- DONE
----tagFontColor: "#FFF", ---- DONE
----tagHDColor: "#2472B4", ---- DONE
----tagLineColor: "#0b5d81", ---- DONE
----tagOfflineColor: "#4F4F4F", ---- DONE
----tagPrivateGroupColor: "#B60A42", ---- DONE
----contentBgColor: "#FFFFFF", ---- DONE
----camBgColor: "#F0F1F1", ---- DONE
----camBorderColor: "#ACACAC", ---- DONE
----camSubjectColor: "#000", ---- DONE
----camSubjectTagColor: "#0A5A83", ---- DONE
----camAltTextColor: "#575757", ---- DONE
----camHrefColor: "#0A5A83", ---- DONE
tokenHrefColor: "#e45900",
footerHrefColor: "#676767",
footerTextColor: "#494949",
copyrightTextColor: "#494949",
userInfoBgColor: "#e9e9e9",
usernameColor: "#ffffff",
----nextCamBgColor: "#FCEADB", ---- DONE
footerColNameColor: "#494949",
footerRowColor: "#0A5A83",
footerSiteNavColor: "#dc5500",
----chatAreaTabColor: "#4C4C4C", ---- DONE
----roomSubjectToolTipColor: "#494949", ---- DONE
loginOverlayColor: "#000000",
----dismissibleMessageColor: "#494949", ---- DONE
----userInfoDropdownBgColor: "#3C87BA", ---- DONE
----userInfoDropdownHighlightColor: "#F47321", ---- DONE
----userInfoDropdownTextColor: "#ffffff", ---- DONE
signupBgColor: "#f47321",
 */
/**
 * Generic mixins
 */
.overlay {
  background: transparent url(../../images/overlay_black.png?4979f19d01ae) repeat top left;
  position: fixed;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  z-index: 1100;
  display: none; }

#entrance_terms, #broadcast_terms, #obs_broadcast_info, #daily_payout_info, #electronic_consent_terms {
  position: absolute;
  top: 250px;
  left: 20%;
  right: 20%;
  background-color: #fff;
  color: #7F7F7F;
  padding: 20px;
  display: none;
  border: 2px solid #ccc;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  -khtml-border-radius: 20px;
  -ms-border-radius: 20px;
  -o-border-radius: 20px;
  border-radius: 20px;
  -webkit-box-shadow: 0 1px 5px #333;
  -moz-box-shadow: 0 1px 5px #333;
  -ms-box-shadow: 0 1px 5px #333;
  -o-box-shadow: 0 1px 5px #333;
  box-shadow: 0 1px 5px #333;
  z-index: 1100;
  min-width: 700px; }

.overlay_popup {
  /*
    Used on CB1 chat page for tip and emote popups
    */ }
  .overlay_popup .formborder {
    border-top: 2px solid #0b5d81;
    border-right: 2px solid #0b5d81;
    border-left: 2px solid #0b5d81;
    background-color: #fff;
    margin: 0px;
    border-radius: 4px 4px 0 0;
    -webkit-border-radius: 4px 4px 0 0;
    -moz-border-radius: 4px 4px 0 0;
    height: 222px; }
  .overlay_popup td.formborder {
    vertical-align: top;
    display: block; }
  .overlay_popup .divider {
    margin: 0px;
    padding: 0px; }
  .overlay_popup .popup_imgs {
    width: 369px;
    height: auto;
    padding: 8px 10px 6px; }
  .overlay_popup .title {
    margin: 0px;
    padding: 6px 0px 0px 6px;
    background-color: #e0e0e0;
    height: 23px;
    color: #0b5d81;
    font: 15px 'UbuntuBold', Arial, Helvetica, sans-serif; }
  .overlay_popup .more {
    margin: 0px;
    padding: 0px 10px 0px;
    width: 369px;
    text-align: right; }
    .overlay_popup .more a {
      color: #d55215;
      font: 13px 'UbuntuRegular', Arial, Helvetica, sans-serif;
      text-decoration: underline; }
  .overlay_popup .body {
    padding: 8px 10px 6px; }
    .overlay_popup .body a {
      color: #d55215;
      text-decoration: underline;
      font-weight: normal; }
    .overlay_popup .body form {
      clear: both;
      display: block; }
  .overlay_popup .balance {
    font-weight: bold;
    margin-bottom: 15px;
    float: left; }
    .overlay_popup .balance span {
      color: green; }
  .overlay_popup .purchase_tokens {
    font-size: .9em;
    float: right; }

/**
 * Generic mixins
 */
.overlay {
  background: transparent url(../../images/overlay_black.png?4979f19d01ae) repeat top left;
  position: fixed;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  z-index: 1100;
  display: none; }

#entrance_terms, #broadcast_terms, #obs_broadcast_info, #daily_payout_info, #electronic_consent_terms {
  position: absolute;
  top: 250px;
  left: 20%;
  right: 20%;
  background-color: #fff;
  color: #7F7F7F;
  padding: 20px;
  display: none;
  border: 2px solid #ccc;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  -khtml-border-radius: 20px;
  -ms-border-radius: 20px;
  -o-border-radius: 20px;
  border-radius: 20px;
  -webkit-box-shadow: 0 1px 5px #333;
  -moz-box-shadow: 0 1px 5px #333;
  -ms-box-shadow: 0 1px 5px #333;
  -o-box-shadow: 0 1px 5px #333;
  box-shadow: 0 1px 5px #333;
  z-index: 1100;
  min-width: 700px; }

#entrance_terms#electronic_consent_terms, #broadcast_terms#electronic_consent_terms, #obs_broadcast_info#electronic_consent_terms, #daily_payout_info#electronic_consent_terms, #electronic_consent_terms#electronic_consent_terms {
  min-width: 0; }

#entrance_terms .header, #broadcast_terms .header, #obs_broadcast_info .header, #daily_payout_info .header, #electronic_consent_terms .header {
  text-align: center;
  color: #222; }

#entrance_terms p, #entrance_terms ul, #broadcast_terms p, #broadcast_terms ul, #obs_broadcast_info p, #obs_broadcast_info ul, #daily_payout_info p, #daily_payout_info ul, #electronic_consent_terms p, #electronic_consent_terms ul {
  line-height: 1.4em !important; }

#entrance_terms .scroll, #broadcast_terms .scroll, #obs_broadcast_info .scroll, #daily_payout_info .scroll, #electronic_consent_terms .scroll {
  height: 200px;
  overflow: auto;
  padding: 0 15px 0 10px;
  border: 1px solid #ccc;
  margin: 0 auto;
  text-align: left; }
  #entrance_terms .scroll p, #broadcast_terms .scroll p, #obs_broadcast_info .scroll p, #daily_payout_info .scroll p, #electronic_consent_terms .scroll p {
    margin-block-start: 1em !important;
    margin-block-end: 1em !important;
    margin-inline-start: 0 !important;
    margin-inline-end: 0 !important; }

#entrance_terms a, #broadcast_terms a, #obs_broadcast_info a, #daily_payout_info a, #electronic_consent_terms a {
  color: #0a5a83; }

#entrance_terms .footer, #broadcast_terms .footer, #obs_broadcast_info .footer, #daily_payout_info .footer, #electronic_consent_terms .footer {
  text-align: center;
  color: #222; }
  #entrance_terms .footer a, #broadcast_terms .footer a, #obs_broadcast_info .footer a, #daily_payout_info .footer a, #electronic_consent_terms .footer a {
    width: 200px;
    height: 30px;
    line-height: 30px;
    font-weight: bold;
    background-color: orange;
    margin: 10px 5px 0 5px;
    display: inline-block;
    text-align: center; }
  #entrance_terms .footer .exit_entrance_terms, #broadcast_terms .footer .exit_entrance_terms, #obs_broadcast_info .footer .exit_entrance_terms, #daily_payout_info .footer .exit_entrance_terms, #electronic_consent_terms .footer .exit_entrance_terms {
    background-color: #CCC; }

#entrance_terms {
  display: block; }

#entrance_terms_overlay {
  position: fixed;
  overflow: auto;
  display: block;
  background-color: black; }
  #entrance_terms_overlay #entrance_terms {
    min-width: 400px;
    top: 20%; }
    @media (max-width: 900px) {
      #entrance_terms_overlay #entrance_terms {
        left: 10%;
        right: 10%; } }
    @media (max-width: 600px) {
      #entrance_terms_overlay #entrance_terms {
        left: 5%;
        right: 5%; } }
    @media (max-height: 800px) {
      #entrance_terms_overlay #entrance_terms {
        top: 10%; } }
    @media (max-height: 600px) {
      #entrance_terms_overlay #entrance_terms {
        top: 5%; } }
/*
 * 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)
 */
.broadcastTermsModal {
  background-color: #FFFFFF;
  border-color: #CCCCCC;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); }
  .darkmode .broadcastTermsModal {
    background-color: #1A1A1B;
    border-color: #474747; }
  .broadcastTermsModal .header {
    color: #0B5D81; }
    .darkmode .broadcastTermsModal .header {
      color: #68B5F0; }
  .broadcastTermsModal .body {
    border-color: #CCCCCC; }
    .darkmode .broadcastTermsModal .body {
      background-color: #1A1A1B;
      color: #B3B3B3;
      border-color: #474747; }
    .darkmode .broadcastTermsModal .body a {
      color: #68B5F0; }
  .broadcastTermsModal .acceptLink {
    background-color: #F47321;
    color: #FFFFFF;
    border-radius: 4px;
    border-color: #B1B1B1; }

.blackOverlay {
  background-color: black; }

.transparentOverlay {
  background-color: rgba(0, 0, 0, 0.4); }

.darkmode div#broadcast_terms {
  background-color: #2a2c2e;
  color: #cbcbcb; }
  .darkmode div#broadcast_terms a, .darkmode div#broadcast_terms p strong {
    color: #68b5f0; }
  .darkmode div#broadcast_terms .footer a {
    color: #2a2c2e; }

/* Note this is a theme file -- Only color css allowed here! */
/* Note this is a theme file -- Only color css allowed here! */
#shareTab .urlInput {
  border-color: #b1b1b1; }
  .darkmode #shareTab .urlInput {
    border-color: #4b4c4b;
    background-color: #202223;
    color: #ffffff; }
    .darkmode #shareTab .urlInput:focus {
      outline: none;
      box-shadow: 0 0 0 2px #68b5f0; }

/* 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)
 */
.BioContents .tokenText, #tabs_content_container .tokenText, .psContainer .tokenText {
  color: #ffffff; }

.darkmode .BioContents a, .darkmode #tabs_content_container a, .darkmode .psContainer a {
  color: #68B5F0; }

/* 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)
 */
.darkmode #PhotoVideos:focus {
  outline: none; }

#PhotoVideos .link,
#PhotoVideos .showMoreText {
  color: #0A5A83; }
  .darkmode #PhotoVideos .link, .darkmode #PhotoVideos .showMoreText {
    color: #68B5F0; }

#PhotoVideos .createdAt {
  color: #555555; }
  .darkmode #PhotoVideos .createdAt {
    color: #B3B3B3; }

#PhotoVideos .buttonBorder {
  border-color: #000000; }
  #PhotoVideos .buttonBorder.rgba {
    border-color: rgba(0, 0, 0, 0.35); }

#PhotoVideos .buttonBgColor {
  background-color: #488839; }
  #PhotoVideos .buttonBgColor.gradient {
    background: linear-gradient(#57A863 26.52%, #488839 75.14%); }
  #PhotoVideos .buttonBgColor.grey {
    background-color: #8B8B8B; }
    #PhotoVideos .buttonBgColor.grey.gradient {
      background: linear-gradient(#A9A9A9 29.7%, #8B8B8B 70.67%); }

#PhotoVideos .lockOverlayBg {
  background-color: #333333; }
  #PhotoVideos .lockOverlayBg.rgba {
    background-color: rgba(0, 0, 0, 0.7); }

#PhotoVideos .previewText {
  color: white; }

#PhotoVideos .errorMessage {
  color: #000000;
  background-color: #ffd0b8;
  border-color: #cccccc; }

#PhotoVideos .videoProcessing {
  color: red; }

#PhotoVideos .purchasedBadge {
  color: #ffffff;
  background-color: #6d85b5; }

#PhotoVideos .popoutIcon {
  background: url(../../tsdefaultassets/popout.svg?fa74da7e69d7) no-repeat center; }
  .darkmode #PhotoVideos .popoutIcon {
    background: url(../../tsdefaultassets/popout_darkmode.svg?4ed4b17ed080) no-repeat center; }

.darkmode #PhotoVideos #broadcaster_links a, .darkmode #PhotoVideos #staff_links a {
  color: #68B5F0; }

/* 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)
 */
.ContestStats .statsContainer {
  color: #0c6a93; }
  .darkmode .ContestStats .statsContainer {
    color: #68B5F0; }

.ContestStats .statText {
  color: #0b5d81; }
  .darkmode .ContestStats .statText {
    color: #68B5F0; }

.ContestStats .statData {
  color: #000000; }
  .darkmode .ContestStats .statData {
    color: #B3B3B3; }

.ContestStats .topRow {
  color: #dc5500; }

.ContestStats .otherRows {
  color: #0c6a93; }
  .darkmode .ContestStats .otherRows {
    color: #68B5F0; }

.ContestStats .rowBorder {
  border-bottom: 1px solid #cccccc; }

/* 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)
 */
.roomCard {
  border-color: #acacac; }
  .darkmode .roomCard {
    border-color: rgba(100, 100, 100, 0.5); }
  .roomCard .cardTitle {
    border-bottom-color: #acacac; }
    .darkmode .roomCard .cardTitle {
      border-bottom-color: #666666; }
  .roomCard .tagNewColor {
    color: #ffffff;
    background-color: #71b404; }
  .roomCard li.cams {
    background: url(../../images/cam.svg?aee4a41ba664) no-repeat 0 0;
    background-size: auto; }
    .darkmode .roomCard li.cams {
      background: url(../../images/cam_white.svg?282a760aab80) no-repeat 0 0;
      background-size: auto; }
  .roomCard li.location {
    background: url(../../images/location.svg?5021cfc1ff61) no-repeat 0 0;
    background-size: auto; }
    .darkmode .roomCard li.location {
      background: url(../../images/location_white.svg?339f27869359) no-repeat 0 0;
      background-size: auto; }
  .roomCard .age {
    float: left;
    color: #49494F;
    padding: 2px 6px 0 0;
    font: 1em/1.333em 'UbuntuMedium', Arial, Helvetica, sans-serif; }
    .darkmode .roomCard .age {
      color: #B3B3B3; }
  .roomCard .age_gender_container {
    float: right;
    height: 17px; }
  .roomCard .genderf,
  .roomCard .genderm,
  .roomCard .genderc,
  .roomCard .genders,
  .roomCard .genderx {
    width: 14px;
    height: 14px;
    display: inline-block;
    float: left; }
  .roomCard .genderf {
    background: url(../../images/ico-female.svg?818c9c4c368f) no-repeat 100% 0;
    background-size: contain; }
  .roomCard .genderm {
    background: url(../../images/ico-male.svg?251793534c73) no-repeat 100% 0;
    background-size: contain; }
  .roomCard .genderc {
    background: url(../../images/ico-couple.svg?b74df354b80e) no-repeat 100% 0;
    background-size: contain; }
  .roomCard .genders {
    background: url(../../images/ico-trans.svg?4984008acb01) no-repeat 100% 0;
    background-size: contain; }
  .roomCard .genderx {
    background: url(../../images/ico-blank.png?c807e40114dc) no-repeat 100% 0;
    background-size: contain; }

/* Note this is a theme file -- Only color css allowed here! */
/* 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)
 */
/*
 * 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)
 */
.PmListItem {
  border-color: #E0E0E0;
  background-color: #ffffff; }
  .darkmode .PmListItem, .hasDarkBackground .PmListItem {
    color: #CBCBCB; }
  .darkmode .PmListItem {
    background-color: #202223; }
  .PmListItem .replyIconSvg svg {
    fill: #49494F; }
    .darkmode .PmListItem .replyIconSvg svg, .hasDarkBackground .PmListItem .replyIconSvg svg {
      fill: #ffffff; }
  .darkmode .PmListItem .messageDiv, .hasDarkBackground .PmListItem .messageDiv {
    color: #ffffff; }
  .PmListItem.unreadBg {
    background-color: #FCEADC; }
    .darkmode .PmListItem.unreadBg, .hasDarkBackground .PmListItem.unreadBg {
      background-color: #5B4736; }
  .PmListItem.selected {
    background-color: #E0E0E0; }
    .darkmode .PmListItem.selected, .hasDarkBackground .PmListItem.selected {
      background-color: #434649; }
  .hasDarkBackground .PmListItem {
    border-color: #7F7F7F;
    background-color: #2A2C2E; }
  .PmListItem .avatarBubble .broadcaster {
    background-color: #DC5500; }
    .darkmode .PmListItem .avatarBubble .broadcaster, .hasDarkBackground .PmListItem .avatarBubble .broadcaster {
      background-color: #ff6200; }
  .PmListItem .avatarBubble .mod {
    background-color: #DC0000; }
    .darkmode .PmListItem .avatarBubble .mod, .hasDarkBackground .PmListItem .avatarBubble .mod {
      background-color: #DC0000; }
  .PmListItem .avatarBubble .inFanclub {
    background-color: #090; }
    .darkmode .PmListItem .avatarBubble .inFanclub, .hasDarkBackground .PmListItem .avatarBubble .inFanclub {
      background-color: #00ff00; }
  .PmListItem .avatarBubble .tippedTonsRecently {
    background-color: #804baa; }
    .darkmode .PmListItem .avatarBubble .tippedTonsRecently, .hasDarkBackground .PmListItem .avatarBubble .tippedTonsRecently {
      background-color: #ad62e1; }
  .PmListItem .avatarBubble .tippedALotRecently {
    background-color: #be6aff; }
    .darkmode .PmListItem .avatarBubble .tippedALotRecently, .hasDarkBackground .PmListItem .avatarBubble .tippedALotRecently {
      background-color: #d4a0ff; }
  .PmListItem .avatarBubble .tippedRecently {
    background-color: #009; }
    .darkmode .PmListItem .avatarBubble .tippedRecently, .hasDarkBackground .PmListItem .avatarBubble .tippedRecently {
      background-color: #8a98ff; }
  .PmListItem .avatarBubble .hasTokens {
    background-color: #69A; }
    .darkmode .PmListItem .avatarBubble .hasTokens, .hasDarkBackground .PmListItem .avatarBubble .hasTokens {
      background-color: #84c6dc; }
  .PmListItem .avatarBubble .defaultUser {
    background-color: #49494F; }
    .darkmode .PmListItem .avatarBubble .defaultUser, .hasDarkBackground .PmListItem .avatarBubble .defaultUser {
      background-color: #B3B3B3; }
  .PmListItem .closeBtnContainer {
    fill: #888; }
    .PmListItem .closeBtnContainer:hover {
      fill: #222; }
    .darkmode .PmListItem .closeBtnContainer:hover, .hasDarkBackground .PmListItem .closeBtnContainer:hover {
      fill: #D1D1D1; }
  .PmListItem .timeString {
    color: #6C6C78; }
    .darkmode .PmListItem .timeString {
      color: #888; }

/*
 * 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)
 */
.PMControlBar {
  background-color: #ffffff; }
  .darkmode .PMControlBar {
    background-color: #202223; }
  .PMControlBar .backButton {
    color: #0471A1; }
    .darkmode .PMControlBar .backButton {
      color: #68B5F0; }

.SearchBar {
  border-color: #BDBDBD; }
  .SearchBar .searchUserInput {
    color: #000000;
    border-color: #BDBDBD; }
    .SearchBar .searchUserInput:focus {
      border-color: #000000; }
    .darkmode .SearchBar .searchUserInput, .hasDarkBackground .SearchBar .searchUserInput {
      color: #ffffff; }
      .darkmode .SearchBar .searchUserInput:focus, .hasDarkBackground .SearchBar .searchUserInput:focus {
        border-color: #ffffff; }

.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; }

#ChatTabContents .chat-input-div .send-button,
#ChatTabContents .inputDiv .send-button,
#SplitModeChatSettingsTab .chat-input-div .send-button,
#SplitModeChatSettingsTab .inputDiv .send-button,
#UserListTab .chat-input-div .send-button,
#UserListTab .inputDiv .send-button,
#FVChatTabContents .chat-input-div .send-button,
#FVChatTabContents .inputDiv .send-button,
#FVChatSettingsTab .chat-input-div .send-button,
#FVChatSettingsTab .inputDiv .send-button {
  color: #ffffff;
  background-color: #eb3404;
  cursor: pointer;
  text-shadow: #bc2b1d 1px 1px 0; }
  #ChatTabContents .chat-input-div .send-button.disabled,
  #ChatTabContents .inputDiv .send-button.disabled,
  #SplitModeChatSettingsTab .chat-input-div .send-button.disabled,
  #SplitModeChatSettingsTab .inputDiv .send-button.disabled,
  #UserListTab .chat-input-div .send-button.disabled,
  #UserListTab .inputDiv .send-button.disabled,
  #FVChatTabContents .chat-input-div .send-button.disabled,
  #FVChatTabContents .inputDiv .send-button.disabled,
  #FVChatSettingsTab .chat-input-div .send-button.disabled,
  #FVChatSettingsTab .inputDiv .send-button.disabled {
    background-color: grey;
    cursor: wait;
    text-shadow: none; }

#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; }

/*
 * 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)
 */
.followButton {
  color: #ffffff;
  background-color: #ff7002;
  text-shadow: #f18112 1px 1px 0px; }
  .followButton.gradient {
    background: linear-gradient(180deg, #FD9742 0%, #FD9D43 44.27%, #FD943C 51.25%, #FC7E2C 58.99%, #FD7023 100%); }
    .darkmode .followButton.gradient {
      background: linear-gradient(180deg, #FD9742 0%, #FD9D43 44.27%, #FD943C 51.25%, #FC7E2C 58.99%, #FD7023 100%); }

.unfollowButton {
  color: #ffffff;
  background-color: #8b8b8b;
  text-shadow: #383838 1px 1px 0px;
  border-right-color: #474747; }
  .darkmode .unfollowButton {
    color: #888888;
    background-color: #2A2C2F;
    text-shadow: 1px 1px 0px #000000;
    border-right-color: #000000; }
  .unfollowButton.gradient {
    background: linear-gradient(180deg, #B2B2B2 0%, #B6B6B6 51.06%, #969696 51.25%, #969696 100%); }
    .darkmode .unfollowButton.gradient {
      background: linear-gradient(180deg, #474747 29.7%, #2A2C2F 70.67%); }

.notificationBtnMenu {
  background-color: #fff;
  color: #49494F; }
  .darkmode .notificationBtnMenu {
    background-color: #2a2c2e;
    color: #B3B3B3; }
  .notificationBtnMenu .notification-item {
    border-color: #ACACAC;
    color: #49494F; }
    .darkmode .notificationBtnMenu .notification-item {
      border-color: #474747;
      color: #B3B3B3; }
    .notificationBtnMenu .notification-item:hover {
      background-color: #fde3d3; }
    .darkmode .notificationBtnMenu .notification-item:hover {
      background-color: #202223; }
  .notificationBtnMenu .title {
    background-color: #fafafa;
    border-color: #ACACAC; }
    .darkmode .notificationBtnMenu .title {
      background-color: #202223;
      border-color: #474747; }
  .notificationBtnMenu .bookend {
    border-color: #ACACAC; }
    .darkmode .notificationBtnMenu .bookend {
      border-color: #474747; }

.FollowNotificationButton {
  background-color: #8b8b8b; }
  .FollowNotificationButton.gradient {
    background: linear-gradient(180deg, #a9a9a9 0%, #adadad 50%, #8b8b8b 60%); }
    .darkmode .FollowNotificationButton.gradient {
      background: linear-gradient(180deg, #474747 29.7%, #2A2C2F 70.67%); }
  .darkmode .FollowNotificationButton {
    background-color: #2A2C2F; }

.notification-btn-icon.all {
  background-image: url(../../images/follower/alarm-bell-ring-1.svg?e0f4045214c5); }

.darkmode .notification-btn-icon.all, .notification-btn-icon.all.static {
  background-image: url(../../images/follower/alarm-bell-ring-1-white.svg?94c2bd6bf819); }

.notification-btn-icon.smart {
  background-image: url(../../images/follower/alarm-bell-1.svg?281ea1ddd63e); }

.darkmode .notification-btn-icon.smart, .notification-btn-icon.smart.static {
  background-image: url(../../images/follower/alarm-bell-1-white.svg?512f5994fa74); }

.notification-btn-icon.none {
  background-image: url(../../images/follower/alarm-bell-off.svg?69c6917c7525); }

.darkmode .notification-btn-icon.none, .notification-btn-icon.none.static {
  background-image: url(../../images/follower/alarm-bell-off-white.svg?cc61a12667d8); }

/* 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)
 */
/*
 * 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)
 */
#satisfactionScore.enabled {
  background-color: #ffffff;
  color: #0a5a83;
  text-shadow: #94d2e6 1px 1px 0px; }
  .darkmode #satisfactionScore.enabled {
    background-color: #2a2c2f;
    color: #68B5F0;
    text-shadow: 1px 1px 0px #274a62; }
  #satisfactionScore.enabled.gradient {
    background: linear-gradient(180deg, #ffffff 0%, #ffffff 50%, #dddddd 60%); }
    .darkmode #satisfactionScore.enabled.gradient {
      background: linear-gradient(180deg, #474747 29.7%, #2a2c2f 70.67%); }

#satisfactionScore.disabled {
  background-color: #bbbbbb;
  color: #777777;
  text-shadow: #bababa 1px 1px 0px; }
  .darkmode #satisfactionScore.disabled {
    background-color: #202223;
    color: #747474;
    text-shadow: 1px 1px 0px #363636; }
  #satisfactionScore.disabled.gradient {
    background: linear-gradient(180deg, #bbbbbb 0%, #bbbbbb 50%, #aaaaaa 60%); }
    .darkmode #satisfactionScore.disabled.gradient {
      background: linear-gradient(180deg, #2A2C2F 29.7%, #1A1A1A 70.67%); }

#satisfactionScore .highPercent {
  color: #298A08; }

#satisfactionScore .mediumPercent {
  color: #af5c01; }

#satisfactionScore .lowPercent {
  color: #af0101; }

#satisfactionComment {
  background-color: #ffffff;
  border-color: #0b5d81;
  color: #777777; }
  .darkmode #satisfactionComment {
    background-color: #000000;
    border-color: #202223;
    color: #B3B3B3; }
  #satisfactionComment .divot .divotBorder {
    border-bottom-color: #0b5d81; }
    .darkmode #satisfactionComment .divot .divotBorder {
      border-bottom-color: #202223; }
  #satisfactionComment .divot .divotBackground {
    border-bottom-color: #e0e0e0; }
    .darkmode #satisfactionComment .divot .divotBackground {
      border-bottom-color: #333639; }
  #satisfactionComment .header {
    color: #0b5d81;
    background-color: #e0e0e0; }
    .darkmode #satisfactionComment .header {
      color: #68B5F0;
      background-color: #333639; }
  #satisfactionComment .textBox {
    border-color: #777777;
    color: #000000; }
    .darkmode #satisfactionComment .textBox {
      border-color: #4b4c4b;
      color: #ffffff;
      background-color: #202223; }
      .darkmode #satisfactionComment .textBox:focus {
        outline: none;
        box-shadow: 0 0 0 2px #68b5f0; }
  #satisfactionComment .submitBtn {
    color: #ffffff;
    background-color: #ff9735; }
    #satisfactionComment .submitBtn.gradient {
      background: linear-gradient(#ff9735 0%, #ff9e36 50%, #ff7002 60%); }
    .darkmode #satisfactionComment .submitBtn:focus {
      outline: none;
      box-shadow: 0 0 0 2px #68b5f0; }
  #satisfactionComment .submittedMsg {
    color: #777777; }
    .darkmode #satisfactionComment .submittedMsg {
      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)
 */
.gender-tab.active a, .gender-tab a.active, a.gender-tab.active, div.gender-tab.active,
.gender-tab a:hover, a.gender-tab:hover, div.gender-tab:hover, .followed-tab.active, .followed-tab:hover,
#main .top-section .sub-nav li.active a, #main .top-section .sub-nav li a.active,
#main .top-section .sub-nav li a:hover {
  border: 1px solid #8bb3da;
  background: #fff;
  color: #dc5500;
  border-bottom-color: transparent; }
  .darkmode .gender-tab.active a, .darkmode .gender-tab a.active, .darkmode a.gender-tab.active, .darkmode div.gender-tab.active, .darkmode .gender-tab a:hover, .darkmode a.gender-tab:hover, .darkmode div.gender-tab:hover, .darkmode .followed-tab.active, .darkmode .followed-tab:hover, .darkmode #main .top-section .sub-nav li.active a, .darkmode #main .top-section .sub-nav li a.active, .darkmode #main .top-section .sub-nav li a:hover {
    color: #68b5f0;
    border: 1px solid #3d3d3d;
    background-color: #000;
    border-bottom-color: transparent; }

.gender-tab.collapsed, .gender-tab.collapsed a {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid transparent !important; }

.darkmode .gender-tab.collapsed {
  background-color: transparent; }

.gender-tab a, a.gender-tab, div.gender-tab,
#main .top-section .sub-nav li a {
  color: #5e81a4;
  background: #dde9f5;
  border-color: #8bb3da; }
  .darkmode .gender-tab a, .darkmode a.gender-tab, .darkmode div.gender-tab, .darkmode #main .top-section .sub-nav li a {
    background-color: transparent;
    color: #DEDEDE;
    border-color: #666; }
  .gender-tab a:hover, a.gender-tab:hover, div.gender-tab:hover,
  #main .top-section .sub-nav li a:hover {
    cursor: pointer; }

.followedContainer a {
  background-color: transparent; }

.darkmode #main .top-section {
  background: #2a2c2f;
  border-bottom-color: #666; }

#main .top-section #search_icon .search_svg {
  width: 12px;
  height: 12px;
  display: inline-block;
  position: relative;
  top: 1px;
  background-image: url(../../images/search.svg?45db19d3993d); }
  .darkmode #main .top-section #search_icon .search_svg {
    background-image: url(../../images/search_dm.svg?3492defa25bc); }

.darkmode #main .top-section #SearchInput input.search_input {
  background-color: #202223;
  color: #dedede; }

#main .content .searching-overlay {
  background-color: #f1f2f2; }
  .darkmode #main .content .searching-overlay {
    background-color: #2a2c2e; }

#roomTabs {
  border-color: #acacac;
  background-color: #ffffff; }
  .darkmode #roomTabs {
    border-color: #3d3d3d;
    background-color: #222222; }
  #roomTabs .tabBar {
    background-color: #7f7f7f; }
    .darkmode #roomTabs .tabBar {
      background-color: #1a1a1a; }
  #roomTabs .link {
    color: #0b5d81; }
    .darkmode #roomTabs .link {
      color: #68B5F0; }
  #roomTabs .label {
    color: #0a5a83; }
    .darkmode #roomTabs .label {
      color: #B3B3B3; }
  #roomTabs .contentText {
    color: #000000; }
    .darkmode #roomTabs .contentText {
      color: #B3B3B3; }
  #roomTabs .fanclubMessage {
    color: #494949; }
    .darkmode #roomTabs .fanclubMessage {
      color: #B3B3B3; }
  #roomTabs .psContainer {
    color: #0a5a83; }
    .darkmode #roomTabs .psContainer {
      color: #68B5F0; }
  #roomTabs .previewBorder {
    color: #cccccc; }
    .darkmode #roomTabs .previewBorder {
      color: #2A2C2E; }

.tabLink {
  color: #4c4c4c;
  background-color: #c9c9c9; }
  .darkmode .tabLink {
    color: #B3B3B3;
    background-color: #343638; }
  .tabLink.tabOpen, .tabLink.active {
    color: #dc5500;
    background-color: #ffffff; }
    .darkmode .tabLink.tabOpen, .darkmode .tabLink.active {
      color: #68B5F0;
      background-color: #202223; }
  .tabLink.tabCollapsed {
    background-color: #ffffff; }
    .darkmode .tabLink.tabCollapsed {
      background-color: #202223; }

.room-tabs-dropdown-border {
  border-color: #7f7f7f; }
  .darkmode .room-tabs-dropdown-border {
    border-color: #666666; }

/* Note this is a theme file -- Only color css allowed here! */
form .field {
  border-color: #b1b1b1;
  background-color: #ffffff; }
  .darkmode form .field {
    border-color: #4b4c4b;
    background-color: #202223;
    color: #ffffff; }
    .darkmode form .field:focus {
      outline: none;
      box-shadow: 0 0 0 2px #68b5f0; }

form .fieldError {
  color: #d50000; }
  .darkmode form .fieldError {
    color: #d50000; }

/* 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)
 */
.standardEmoticonsModal {
  background-color: #ffffff;
  border-color: #0b5d81; }
  .darkmode .standardEmoticonsModal {
    background-color: #000000;
    border-color: #202223; }
  .standardEmoticonsModal .emoticonsHeader {
    color: #0b5d81;
    background-color: #e0e0e0; }
    .darkmode .standardEmoticonsModal .emoticonsHeader {
      color: #68B5F0;
      background-color: #333639; }
  .standardEmoticonsModal .uploadLink {
    color: #dc5500; }
  .standardEmoticonsModal .divot .divotBorder {
    border-top-color: #0b5d81; }
    .darkmode .standardEmoticonsModal .divot .divotBorder {
      border-top-color: #202223; }
  .standardEmoticonsModal .divot .divotBackground {
    border-top-color: #ffffff; }
    .darkmode .standardEmoticonsModal .divot .divotBackground {
      border-top-color: #000000; }

/* 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)
 */
.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; }

/* 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: #fff;
      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: #fff;
      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: #fff;
      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: #fff;
      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: #fff;
      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: #fff;
      background-color: #B3B3B3; }
  .defaultUser.mentionHl {
    color: #fff;
    background-color: #49494F; }

form .button, button.ajax_button {
  display: block;
  padding: 0px 30px 2px 15px;
  margin: 15px 0px 0px 137px;
  width: auto;
  height: 28px;
  border: 1px solid #b1b1b1;
  border-radius: 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  color: #FFF;
  font: 1.16em/1.0em 'UbuntuMedium', Arial, Helvetica, sans-serif;
  background: #f47321 url(../../images/arrow-white-v2.gif?75bde39356c3) no-repeat right 50%; }
  form .button:hover, button.ajax_button:hover {
    background-color: #FF6300;
    text-decoration: underline;
    cursor: pointer; }
  form .button:disabled, button.ajax_button:disabled, form .disabled.button, button.disabled.ajax_button {
    background-color: #bababa;
    cursor: default; }
    form .button:disabled:hover, button.ajax_button:disabled:hover, form .disabled.button:hover, button.disabled.ajax_button:hover {
      text-decoraton: none; }

.search_autocomplete::-ms-clear {
  display: none; }