.vjs-cbcustom {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -webkit-tap-highlight-color: transparent; }
  .vjs-cbcustom .vjs-control {
    width: 2em;
    margin-left: 3px;
    margin-right: 3px;
    outline: none;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none; }
    .vjs-cbcustom .vjs-control:hover:before, .vjs-cbcustom .vjs-control:focus, .vjs-cbcustom .vjs-control :focus:before {
      text-shadow: none;
      box-shadow: none; }
    .vjs-cbcustom .vjs-control.vjs-progress-control {
      position: absolute;
      top: -25%;
      left: 0px;
      height: 50%;
      width: 100%;
      margin: 0; }
      .vjs-cbcustom .vjs-control.vjs-progress-control .vjs-progress-holder {
        margin: 0; }
  .vjs-cbcustom .vjs-control-bar {
    height: 45px;
    padding-top: 3px;
    font-size: 14px;
    background-color: rgba(43, 51, 63, 0.7); }
    .vjs-cbcustom .vjs-control-bar button {
      background: none !important;
      color: #fff !important; }
    .vjs-cbcustom .vjs-control-bar span {
      background: none !important;
      color: #fff !important; }
  .vjs-cbcustom .vjs-duration, .vjs-cbcustom .vjs-time-divider, .vjs-cbcustom .vjs-current-time {
    display: inline-block; }
  .vjs-cbcustom .vjs-time-control {
    padding-left: 1px;
    padding-right: 1px;
    min-width: 0px;
    width: auto; }
  .vjs-cbcustom .vjs-fullscreen-control {
    position: absolute;
    right: 5px;
    height: 42px; }
  .vjs-cbcustom .vjs-progress-holder .vjs-play-progress {
    background-color: #F47321; }
  .vjs-cbcustom .vjs-slider-bar {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none; }
  .vjs-cbcustom .vjs-slider:focus {
    text-shadow: none;
    box-shadow: none; }
  .vjs-cbcustom .vjs-big-play-button {
    display: none; }

.noscript {
  min-width: 1000px; }
  .noscript .chat-input .button-send,
  .noscript .info .description .bio-title,
  .noscript .cam_nav .link,
  .noscript .video div,
  .noscript .bio .attribute .label,
  .noscript .pics-title {
    font-family: 'UbuntuMedium', Helvetica, Arial, sans-serif; }
  .noscript .cam_nav {
    width: 100%;
    -webkit-tap-highlight-color: transparent;
    padding: 10px 32px 0 32px;
    background: url(../../tsdefaultassets/gender_tab_bg.gif?0437047d9c3a) repeat-x #e2e2e2;
    border-bottom: 1px solid #8bb3da;
    position: relative; }
    .noscript .cam_nav .subnav-1, .noscript .cam_nav .subnav-2 {
      font-size: 0;
      display: inline-block;
      vertical-align: bottom; }
    .noscript .cam_nav .subnav-2 {
      position: absolute;
      bottom: 0;
      right: 96px; }
      .noscript .cam_nav .subnav-2 a {
        display: block;
        font-size: 10px;
        color: #dc5500;
        padding: 7px 11px 5px;
        background-color: #fceadb;
        border: 1px solid #8bb3da;
        border-bottom: none;
        border-radius: 4px 4px 0 0; }
    .noscript .cam_nav .link {
      display: inline-block;
      vertical-align: bottom;
      height: 27px;
      position: relative;
      top: 1px;
      box-sizing: border-box;
      border: 1px solid #8bb3da;
      border-image: initial;
      border-radius: 4px 4px 0 0;
      font-size: 13px;
      margin-right: 2px;
      padding: 4px 11px 0;
      color: #5e81a4;
      background-color: #dde9f5; }
      .noscript .cam_nav .link.selected {
        font-size: 15px;
        color: #dc5500;
        background-color: white;
        border-bottom: none; }
  .noscript .container {
    padding: 4px 0;
    margin: 11px 32px;
    background-color: #e0e0e0;
    border: 1px solid #acacac;
    border-radius: 4px;
    font-size: 0;
    min-width: 1000px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box; }
    .noscript .container .cam-offline, .noscript .container .room {
      display: inline-block; }
  .noscript .content {
    width: 100%;
    border-spacing: 4px 0; }
    .noscript .content .cam, .noscript .content .chat {
      height: 100%;
      vertical-align: top;
      display: table-cell; }
    .noscript .content .chat {
      border: 1px solid #acacac;
      border-radius: 4px;
      width: 100%; }
  .noscript .cam .video {
    vertical-align: top;
    background-color: white;
    border-radius: 4px 4px 0 0;
    border: 1px solid #acacac; }
    .noscript .cam .video .room-subject {
      padding: 8px 9px;
      color: #494949;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      box-sizing: border-box; }
    .noscript .cam .video div {
      font-size: 12px;
      visibility: visible; }
    .noscript .cam .video .player {
      width: 100%;
      height: 480px; }
  .noscript .cam .video.hd {
    width: 854px; }
  .noscript .cam .video.sd {
    width: 640px; }
  .noscript .cam-offline {
    font-weight: bold;
    color: #0b5d81;
    margin: 10px 0 10px 5px;
    width: 100%;
    font-size: 12px; }
  .noscript .chat .tabs {
    background: #7f7f7f;
    padding: 3px 3px 0; }
    .noscript .chat .tabs div {
      font-size: 11px;
      border-radius: 4px 4px 0 0;
      margin-right: 2px;
      padding: 3px 8px;
      min-width: 32px;
      display: inline-block;
      color: #dc5500;
      background-color: white; }
  .noscript .chatbox {
    padding: 10px 10px 44px 10px;
    box-sizing: border-box;
    height: 490px;
    position: relative;
    background-color: #FFF; }
    .noscript .chatbox .messages {
      height: 100%;
      overflow-y: scroll; }
      .noscript .chatbox .messages span {
        display: block;
        font-size: 12px;
        margin-top: 4px; }
  .noscript .room {
    border: 0;
    padding: 4px 4px 0;
    width: 100%;
    position: static;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
    background-color: transparent;
    border-radius: unset;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box; }
    .noscript .room .info {
      border-radius: 4px;
      border: 1px solid #acacac; }
  .noscript .info .header {
    font-size: 0;
    padding: 4px 0 0 5px;
    background: #747474 none;
    border-radius: 4px 4px 0 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box; }
    .noscript .info .header .bio-tab {
      background: white;
      color: #dc5500; }
    .noscript .info .header div {
      display: inline-block;
      border-radius: 4px 4px 0 0;
      font-size: 13px;
      margin-right: 2px;
      padding: 5px 11px 4px;
      color: #4c4c4c;
      background: #c9c9c9; }
  .noscript .info .description {
    position: static;
    overflow: auto;
    -webkit-tap-highlight-color: transparent;
    background-color: white;
    padding: 15px;
    font-size: 14px; }
    .noscript .info .description .bio-title {
      font-size: 14px;
      color: #494949;
      margin: 18px 0; }
  .noscript .bio .attribute {
    color: #000000;
    font-weight: normal;
    margin: 9px 0; }
    .noscript .bio .attribute .label {
      color: #0c6a93;
      font-size: 14px;
      width: 150px; }
    .noscript .bio .attribute .label, .noscript .bio .attribute .data {
      display: inline-block;
      vertical-align: top; }
    .noscript .bio .attribute.about-me .data {
      width: 85%; }
  .noscript .video .player {
    width: 100%;
    font-size: 0;
    position: relative; }
    .noscript .video .player .room-status, .noscript .video .player .nojs-overlay {
      position: absolute; }
  .noscript .room-status {
    height: 100%;
    width: 100%;
    font-size: 12px;
    background-color: #464646; }
    .noscript .room-status div {
      height: auto;
      width: 100%;
      position: absolute;
      overflow: hidden;
      -webkit-tap-highlight-color: transparent;
      box-sizing: border-box;
      padding: 0 50px;
      left: 0;
      text-align: center;
      pointer-events: none;
      z-index: 1;
      top: 127px;
      font-size: 32px;
      color: #72c0ff; }
  .noscript .player .nojs-overlay {
    display: inline-block;
    background: rgba(0, 0, 0, 0.65);
    border-radius: 3px;
    border: 1px solid #5C5C5C;
    top: 35%;
    right: 10%;
    left: 10%;
    padding: 25px; }
  .noscript .nojs-overlay div {
    font-family: 'UbuntuRegular', Helvetica, Arial, sans-serif;
    text-align: center; }
  .noscript #overlay-text {
    color: #aeaeae;
    font-size: 14px; }
  .noscript #overlay-title {
    padding-bottom: 10px;
    font-size: 25px;
    color: #ffffff; }
  .noscript .photo_list {
    overflow: auto; }
  .noscript .photoset-detail {
    position: relative;
    border: 1px solid #CCC;
    padding: 4px;
    margin: 0 12px 2px 0; }
  .noscript .chat-input {
    box-sizing: border-box;
    font-size: 12px;
    color: #727272;
    font-family: 'UbuntuRegular', Helvetica, Arial, sans-serif;
    width: 100%;
    position: absolute;
    bottom: 2px;
    right: 0;
    padding: 5px; }
    .noscript .chat-input .button-send {
      position: absolute;
      bottom: 3px;
      right: 3px;
      line-height: 13px;
      overflow: hidden;
      width: auto;
      font-size: 12px;
      border-radius: 4px;
      background: linear-gradient(darkgray 0%, #adadad 50%, #8b8b8b 60%); }
      .noscript .chat-input .button-send a {
        display: block;
        padding: 4px 5px;
        color: #e0e0e0; }
  .noscript .chatjs-warning {
    height: 28px;
    min-width: 300px;
    line-height: 30px;
    border: 1px solid #b1b1b1;
    background-color: #e0e0e0;
    position: relative;
    -webkit-border-radius: 4px 4px 0 0;
    -moz-border-radius: 4px; }
    .noscript .chatjs-warning span {
      margin-left: 10px;
      font-weight: bold; }
  .noscript .message {
    position: relative;
    height: 100%;
    padding: 5px; }
  .noscript .pics-title {
    position: absolute;
    color: #0c6a93;
    width: 150px; }
  .noscript .pics-description {
    height: 100%;
    padding-left: 150px;
    color: #000;
    margin: 0 0 9px; }
  .noscript .photoset-detail {
    position: relative;
    border: 1px solid #CCC;
    padding: 4px;
    margin: 0 12px 2px 0;
    font-size: 0; }
  .noscript .photo-videos .label, .noscript .photo-videos .ps-content {
    display: inline-block;
    margin-bottom: 20px; }
  .noscript .photo-videos .ps-content .content-wrapper {
    display: inline-block; }
  .noscript .photo-videos .more-photosets {
    display: block; }
  .noscript .photoset-name {
    font-size: 14px;
    color: #0c6a93;
    max-width: 145px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    text-decoration: none; }
  .noscript .photoset-label {
    position: absolute;
    bottom: 7px;
    right: 8px;
    padding: 1px 3px;
    text-align: center;
    color: #fff;
    font-size: 10px;
    background-color: #6d85b5; }
    .noscript .photoset-label.fanclub_only, .noscript .photoset-label.fanclub_or_purchase, .noscript .photoset-label.purchase_only {
      background-color: #090; }
  .noscript .photoset-preview {
    position: absolute;
    top: 7px;
    left: 7px;
    border: none; }
  .noscript #fan_club_exclusive_label {
    background-color: #090; }
  .noscript .user_uploads .thumbnail_label_tokens {
    top: 87px;
    background-color: #6D85B5; }
  .noscript a {
    text-decoration: underline; }

@-moz-keyframes spin {
  from {
    -moz-transform: rotate(0deg); }
  to {
    -moz-transform: rotate(360deg); } }

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

@keyframes spin {
  from {
    transform: rotate(0deg); }
  to {
    transform: rotate(360deg); } }

@-moz-keyframes fadein {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }

@-webkit-keyframes fadein {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }

@keyframes fadein {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }

html, body {
  padding: 0;
  margin: 0;
  min-height: 100%;
  font-family: 'UbuntuRegular',Arial, Helvetica, sans-serif; }

body > object[type="application/x-shockwave-flash"] {
  display: none; }

#main {
  min-height: 500px;
  /*this css is only here to remove the box around videojs playbutton remove is no longer using videojs*/ }
  #main .bio-container h1 {
    margin-bottom: 20px;
    font-size: 1.2em;
    line-height: 1.4em; }
  #main div, #main p, #main a, #main li, #main td, #main span {
    -webkit-text-size-adjust: none; }
  #main .vjs-big-play-button {
    display: none !important; }
  #main .video-js button:focus {
    outline: 0; }
  #main input[type='number']::-webkit-inner-spin-button,
  #main input[type='number']::-webkit-outer-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0; }
  #main input[type='number'],
  #main input[type='number']:hover,
  #main input[type='number']:focus {
    -moz-appearance: textfield; }
  #main select {
    font: 100% 'UbuntuRegular', Arial, Helvetica, sans-serif;
    background-color: #ffffff; }
  #main a {
    text-decoration: none; }
  #main p {
    margin: 0; }

#StaffLinks .prevUsernamesSection {
  background: #f7ff00;
  background: rgba(247, 255, 0, 0.23);
  color: #503d08; }

/* 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: #0C6A93; }

#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)
 */
.tab.chat-tab-handle.active {
  color: #dc5500; }
  .darkmode .tab.chat-tab-handle.active {
    color: #68B5F0; }

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

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

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

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

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

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

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

#FVChatTabContents .chat-input-div,
#FVChatSettingsTab .chat-input-div {
  background-color: #ffffff; }
  .darkmode #FVChatTabContents .chat-input-div, .darkmode
  #FVChatSettingsTab .chat-input-div {
    background-color: #474747; }
  .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)
 */
#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; }

/*
 * 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)
 */
#TheaterModeRoomContents #video-mode, #TheaterModeRoomContents #fvm-link, #TheaterModeRoomContents .link {
  color: #0a5a83; }
  .darkmode #TheaterModeRoomContents #video-mode, .darkmode #TheaterModeRoomContents #fvm-link, .darkmode #TheaterModeRoomContents .link {
    color: #68B5F0; }

#TheaterModeRoomContents .styledDiv {
  background-color: #cccccc; }
  .darkmode #TheaterModeRoomContents .styledDiv {
    background-color: #333638; }

/* 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)
 */
#AppPanelTable {
  color: #000000; }
  .darkmode #AppPanelTable {
    color: #B3B3B3; }
  #AppPanelTable .rowOne, #AppPanelTable .rowThree {
    background-color: #d5ebf8; }
    .darkmode #AppPanelTable .rowOne, .darkmode #AppPanelTable .rowThree {
      background-color: #252728; }
  #AppPanelTable .rowTwo {
    background-color: #f2f9fd; }
    .darkmode #AppPanelTable .rowTwo {
      background-color: #303134; }
  #AppPanelTable .threeRows-11-21-31 {
    color: #0b5d81; }
    .darkmode #AppPanelTable .threeRows-11-21-31 {
      color: #68B5F0; }
  #AppPanelTable .threeRowsOfLabels {
    color: #057205; }
    .darkmode #AppPanelTable .threeRowsOfLabels {
      color: #059605; }

/*
 * 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)
 */
#VideoPanel {
  background-color: #ffffff; }
  .darkmode #VideoPanel {
    background-color: #202223; }
  #VideoPanel.border {
    border: 1px solid #acacac; }
    .darkmode #VideoPanel.border {
      border: 1px solid #474747; }
  #VideoPanel .reportAbuseLink {
    color: #0c6a93; }
    .darkmode #VideoPanel .reportAbuseLink {
      color: #68B5F0; }
  #VideoPanel .roomSubjectTooltip {
    border-color: #000;
    background-color: #fff; }
    .darkmode #VideoPanel .roomSubjectTooltip {
      border-color: #fff;
      background-color: #202223; }
  #VideoPanel .currentBalance {
    border-bottom: 1px solid #000000; }
    .darkmode #VideoPanel .currentBalance {
      border-bottom: 1px solid #fff; }
  #VideoPanel .panelLink {
    color: #0a5a83; }
    .darkmode #VideoPanel .panelLink {
      color: #68B5F0; }

.sendTipButton {
  background-color: #588A42;
  color: #ffffff; }
  .sendTipButton.gradient {
    background: linear-gradient(180deg, #75A95C 0%, #75A95C 51.06%, #66994F 53.65%, #598B43 56.77%, #588A42 100%); }
    .darkmode .sendTipButton.gradient {
      background: linear-gradient(180deg, #75A95C 0%, #75A95C 51.06%, #66994F 53.65%, #598B43 56.77%, #588A42 100%); }

.resizeHandle {
  background: #e0e0e0 url(../../tsdefaultassets/resize_arrows.gif?7aec7159f84f) no-repeat left center; }
  .resizeHandle:hover {
    background-image: url(../../tsdefaultassets/resize.gif?1ac15fbe0dbb); }
  .darkmode .resizeHandle {
    background: #2a2c2e url(../../tsdefaultassets/resize_arrows.png?3999a0692aaf) no-repeat left center; }
    .darkmode .resizeHandle:hover {
      background-image: url(../../tsdefaultassets/resize.png?d1a45a113bda); }

/* 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)
 */
#AbuseReport {
  color: #454545; }
  .darkmode #AbuseReport {
    color: #B3B3B3; }
  #AbuseReport .abuseInput {
    border-color: #4b4c4b; }
    .darkmode #AbuseReport .abuseInput {
      color: #B3B3B3;
      background-color: #202223; }
    .darkmode #AbuseReport .abuseInput:focus {
      outline: none;
      box-shadow: 0 0 0 2px #68b5f0; }
  #AbuseReport .submitSpan {
    color: #ffffff;
    background-color: #eb3404; }
    .darkmode #AbuseReport .submitSpan {
      background-color: #e9371d; }
    #AbuseReport .submitSpan.gradient {
      background: linear-gradient(#f66d51, #eb3404); }
      .darkmode #AbuseReport .submitSpan.gradient {
        background: linear-gradient(180deg, #f46d55 0%, #e9371d 100%); }
  #AbuseReport .cancelSpan {
    color: #ffffff;
    background-color: #383838; }
    .darkmode #AbuseReport .cancelSpan {
      background-color: #696969; }
    #AbuseReport .cancelSpan.gradient {
      background: linear-gradient(#8b8b8b, #686868); }
      .darkmode #AbuseReport .cancelSpan.gradient {
        background: linear-gradient(180deg, #888888 0%, #696969 100%); }

/*
 * 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)
 */
#AbuseReportModal {
  background-color: #ffffff;
  border-color: #0b5d81; }
  .darkmode #AbuseReportModal {
    background-color: #000000;
    border-color: #202223;
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.5); }
  #AbuseReportModal .header {
    color: #0b5d81;
    background-color: #e0e0e0; }
    .darkmode #AbuseReportModal .header {
      color: #68B5F0;
      background-color: #333639; }
  #AbuseReportModal .divot .divotBorder {
    border-bottom-color: #0b5d81; }
    .darkmode #AbuseReportModal .divot .divotBorder {
      border-bottom-color: #202223; }
  #AbuseReportModal .divot .divotBackground {
    border-bottom-color: #e0e0e0; }
    .darkmode #AbuseReportModal .divot .divotBackground {
      border-bottom-color: #333639; }

/*
 * 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)
 */
.BaseRoomContents {
  background-color: #e0e0e0;
  border-color: #acacac; }
  .darkmode .BaseRoomContents {
    background-color: #2a2c2e;
    border-color: #474747; }
  .BaseRoomContents .offlineRoomNotice {
    color: #0b5d81; }
    .darkmode .BaseRoomContents .offlineRoomNotice {
      color: #68B5F0; }
  .BaseRoomContents .topSectionWrapper {
    background-color: #e0e0e0; }
    .darkmode .BaseRoomContents .topSectionWrapper {
      background-color: #2a2c2e; }

/* Note this is a theme file -- Only color css allowed here! */
/* Note this is a theme file -- Only color css allowed here! */
.draggableCanvasChatWindow .chatInnerDiv {
  background-color: rgba(0, 0, 0, 0.6);
  border-color: #7f7f7f; }
  .darkmode .draggableCanvasChatWindow .chatInnerDiv {
    border-color: rgba(0, 0, 0, 0.6); }

/* 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)
 */
.showsComponent {
  background-color: #f3f3f3;
  border-color: #dedede; }
  .darkmode .showsComponent {
    background-color: #202223;
    border-color: #333639; }
  .showsComponent .showsHeader {
    color: #033e58; }
    .darkmode .showsComponent .showsHeader {
      color: #68B5F0; }
  .showsComponent .showsButton {
    text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.25);
    border-color: #3c5464;
    color: #ffffff;
    background-color: #4083a1; }
    .showsComponent .showsButton.showsButtonGradient {
      background: linear-gradient(180deg, #4083a1 30.21%, #4063a1 78.45%); }
      .darkmode .showsComponent .showsButton.showsButtonGradient {
        background: linear-gradient(180deg, #43839f 0%, #42659f 100%); }
  .showsComponent .tokensRequirement {
    color: #49494f; }
    .darkmode .showsComponent .tokensRequirement {
      color: #fcfcfc; }
  .showsComponent .minutesRequirement, .showsComponent .usersRequirement {
    color: #999999; }
    .darkmode .showsComponent .minutesRequirement, .darkmode .showsComponent .usersRequirement {
      color: #9a9a9a; }
  .showsComponent .showsFooter {
    color: #49494f; }
    .darkmode .showsComponent .showsFooter {
      color: #fcfcfc; }

.cancelShowButton {
  text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.25);
  background-color: #fd5035;
  color: #ffffff; }
  .cancelShowButton.cancelShowButtonGradient {
    background: linear-gradient(180deg, #FD5035 16.39%, #C51B01 86.03%); }

/*
 * 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)
 */
.draggableCanvasWindow {
  color: #FFFFFF; }
  .darkmode .draggableCanvasWindow {
    color: #B3B3B3; }
  .draggableCanvasWindow .titleBar {
    color: #0b5d81;
    background-color: #cccccc; }
    .darkmode .draggableCanvasWindow .titleBar {
      color: #68B5F0;
      background-color: #333639; }
  .draggableCanvasWindow .closeButton {
    border-color: #eee; }
    .darkmode .draggableCanvasWindow .closeButton {
      border-color: #999999; }
    .draggableCanvasWindow .closeButton:hover {
      background-color: #c9c9c9; }
  .draggableCanvasWindow .tokenTextArea {
    color: #494949; }
    .darkmode .draggableCanvasWindow .tokenTextArea {
      color: #b3b3b3; }
  .draggableCanvasWindow .innerDiv {
    border-color: #0d5d81;
    background-color: #ffffff; }
    .darkmode .draggableCanvasWindow .innerDiv {
      border-color: #202223;
      background-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)
 */
.floatingPlayer .header {
  background-color: #ffffff;
  color: #494949; }
  .darkmode .floatingPlayer .header {
    background-color: #1a1a1a;
    color: #B3B3B3; }
  .floatingPlayer .header .optionsArea .darkOptionsIcon {
    display: none; }
  .darkmode .floatingPlayer .header .optionsArea .lightOptionsIcon {
    display: none; }
  .darkmode .floatingPlayer .header .optionsArea .darkOptionsIcon {
    display: block; }
  .floatingPlayer .header .optionsArea:hover {
    background-color: #e3e3e3; }
    .darkmode .floatingPlayer .header .optionsArea:hover {
      background-color: #888888; }
  .floatingPlayer .header .closeArea .darkCloseIcon {
    display: none; }
  .darkmode .floatingPlayer .header .closeArea .lightCloseIcon {
    display: none; }
  .darkmode .floatingPlayer .header .closeArea .darkCloseIcon {
    display: block; }
  .floatingPlayer .header .closeArea:hover {
    background-color: #e3e3e3; }
    .darkmode .floatingPlayer .header .closeArea:hover {
      background-color: #888888; }

.floatingPlayer .menuBubble {
  background-color: #ffffff;
  color: #666666;
  border-color: #efefef; }
  .darkmode .floatingPlayer .menuBubble {
    background-color: #1a1a1a;
    color: #B3B3B3;
    border-color: #2a2c2f; }
  .darkmode .floatingPlayer .menuBubble .link {
    color: #68B5F0; }
  .floatingPlayer .menuBubble .caret {
    border-bottom-color: #ffffff; }
    .darkmode .floatingPlayer .menuBubble .caret {
      border-bottom-color: #1a1a1a; }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* 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)
 */
.sendTip .buttons {
  color: #ffffff;
  background-color: #f47321;
  border-color: #b1b1b1; }
  .sendTip .buttons:hover {
    background-color: #ff6300; }
  .sendTip .buttons.disabled {
    color: #cccccc;
    background-color: #888888; }
  .darkmode .sendTip .buttons:focus {
    outline: none;
    box-shadow: 0 0 0 2px #68b5f0; }

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

/*
 * 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)
 */
#SplitModeTipCallout .tokenBalance, #FVTipCallout .tokenBalance {
  color: green; }
  .darkmode #SplitModeTipCallout .tokenBalance, .darkmode #FVTipCallout .tokenBalance {
    color: #0CE112; }

#SplitModeTipCallout .purchaseTokens, #FVTipCallout .purchaseTokens {
  color: #0a5a83; }
  .darkmode #SplitModeTipCallout .purchaseTokens, .darkmode #FVTipCallout .purchaseTokens {
    color: #68B5F0; }

#SplitModeTipCallout .tipAmountInput, #FVTipCallout .tipAmountInput {
  border-color: #b4b4b4; }
  .darkmode #SplitModeTipCallout .tipAmountInput, .darkmode #FVTipCallout .tipAmountInput {
    border-color: #4b4c4b;
    background-color: #202223;
    color: #ffffff; }
    .darkmode #SplitModeTipCallout .tipAmountInput:focus, .darkmode #FVTipCallout .tipAmountInput:focus {
      outline: none;
      box-shadow: 0 0 0 2px #68b5f0; }

.darkmode #SplitModeTipCallout .tipMessageInput, .darkmode #FVTipCallout .tipMessageInput {
  border-color: #4b4c4b;
  background-color: #202223;
  color: #ffffff; }
  .darkmode #SplitModeTipCallout .tipMessageInput:focus, .darkmode #FVTipCallout .tipMessageInput:focus {
    outline: none;
    box-shadow: 0 0 0 2px #68b5f0; }

#SplitModeTipCallout .tipOptionsSelect, #FVTipCallout .tipOptionsSelect {
  border-color: #4b4c4b; }
  .darkmode #SplitModeTipCallout .tipOptionsSelect, .darkmode #FVTipCallout .tipOptionsSelect {
    background-color: #000000;
    color: #B3B3B3; }
    .darkmode #SplitModeTipCallout .tipOptionsSelect:focus, .darkmode #FVTipCallout .tipOptionsSelect:focus {
      outline: none;
      box-shadow: 0 0 0 2px #68b5f0; }

#SplitModeTipCallout .warning, #FVTipCallout .warning {
  color: #ff0000; }

#SplitModeTipCallout {
  background-color: #ffffff;
  border-color: #0b5d81; }
  .darkmode #SplitModeTipCallout {
    color: #B3B3B3;
    background-color: #000000;
    border-color: #202223;
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.5); }
  #SplitModeTipCallout .titleBar {
    color: #0b5d81;
    background-color: #e0e0e0; }
    .darkmode #SplitModeTipCallout .titleBar {
      color: #68B5F0;
      background-color: #333639; }
  #SplitModeTipCallout .purchaseTokens {
    color: #d55215; }
    .darkmode #SplitModeTipCallout .purchaseTokens {
      color: #68B5F0; }
  #SplitModeTipCallout .bottomDivot .divotBackground {
    border-top-color: #ffffff; }
    .darkmode #SplitModeTipCallout .bottomDivot .divotBackground {
      border-top-color: #000000; }
  #SplitModeTipCallout .bottomDivot .divotBorder {
    border-top-color: #0b5d81; }
    .darkmode #SplitModeTipCallout .bottomDivot .divotBorder {
      border-top-color: #202223; }
  #SplitModeTipCallout .topDivot .divotBackground {
    border-bottom-color: #ffffff; }
    .darkmode #SplitModeTipCallout .topDivot .divotBackground {
      border-bottom-color: #333639; }
  #SplitModeTipCallout .topDivot .divotBorder {
    border-bottom-color: #0b5d81; }
    .darkmode #SplitModeTipCallout .topDivot .divotBorder {
      border-bottom-color: #202223; }
  #SplitModeTipCallout .leftDivot .divotBackground {
    border-right-color: #ffffff; }
    .darkmode #SplitModeTipCallout .leftDivot .divotBackground {
      border-right-color: #000000; }
  #SplitModeTipCallout .leftDivot .divotBorder {
    border-right-color: #0b5d81; }
    .darkmode #SplitModeTipCallout .leftDivot .divotBorder {
      border-right-color: #202223; }

.darkmode #FVTipCallout .checkbox {
  border-color: #4b4c4b;
  background-color: #202223;
  color: #ffffff; }
  .darkmode #FVTipCallout .checkbox: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)
 */
#RemoveIgnoredUsersModal {
  background-color: #ffffff;
  box-shadow: 0 0 18px rgba(0, 0, 0, 0.4); }
  .darkmode #RemoveIgnoredUsersModal {
    background-color: #1a1a1a;
    box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.4); }
  #RemoveIgnoredUsersModal .overlay {
    background-color: #000000; }
  #RemoveIgnoredUsersModal .bluetxt {
    color: #0c6a93; }
    .darkmode #RemoveIgnoredUsersModal .bluetxt {
      color: #68B5F0; }
  #RemoveIgnoredUsersModal .select {
    border-color: #b1b1b1; }
    .darkmode #RemoveIgnoredUsersModal .select {
      border-color: #b3b3b3;
      background-color: #1a1a1a;
      color: #B3B3B3; }
      .darkmode #RemoveIgnoredUsersModal .select:focus {
        outline: none;
        box-shadow: 0 0 0 2px #68b5f0; }
  #RemoveIgnoredUsersModal .saveButton {
    color: #ffffff;
    background-color: #ff7002;
    text-shadow: #f18112 1px 1px 0px; }
    .darkmode #RemoveIgnoredUsersModal .saveButton {
      background-color: #fd7123; }
    #RemoveIgnoredUsersModal .saveButton.gradient {
      background: linear-gradient(180deg, #ff9735 0%, #ff9e36 50%, #ff7002 60%); }
      .darkmode #RemoveIgnoredUsersModal .saveButton.gradient {
        background: linear-gradient(180deg, #fd9742 0%, #fd9a41 42.19%, #fd7324 58.85%, #fd7123 100%); }
  #RemoveIgnoredUsersModal .darkCloseButton {
    display: none; }
  .darkmode #RemoveIgnoredUsersModal .lightCloseButton {
    display: none; }
  .darkmode #RemoveIgnoredUsersModal .darkCloseButton {
    display: block; }

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

/* 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)
 */
#user-context-menu {
  background-color: #fff;
  border-color: #f0f0f0;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.35);
  color: #000; }
  .darkmode #user-context-menu {
    background-color: #303030;
    border-color: #6B6B6B;
    color: #EDEDED; }
  #user-context-menu #ucm-header {
    background-color: #f9f9f9;
    color: #000; }
    .darkmode #user-context-menu #ucm-header {
      background-color: #262626;
      color: #EDEDED; }
  #user-context-menu #ucm-bottom,
  #user-context-menu #ucm-mid {
    border-top-color: #F0F0F0; }
    .darkmode #user-context-menu #ucm-bottom, .darkmode
    #user-context-menu #ucm-mid {
      border-top-color: #6B6B6B; }
  #user-context-menu .ucm-agespan {
    color: #000; }
    .darkmode #user-context-menu .ucm-agespan {
      color: #EDEDED; }
  #user-context-menu #ucm-sublabel {
    color: #49494F; }
    .darkmode #user-context-menu #ucm-sublabel {
      color: #EDEDED; }
  #user-context-menu #ucm-mentionuser .ucm-mentionicon {
    background: url(../../tsdefaultassets/mention-user-d.svg) no-repeat center;
    background-size: contain; }
    .darkmode #user-context-menu #ucm-mentionuser .ucm-mentionicon {
      background: url(../../tsdefaultassets/mention-user.svg?e3b0c44298fc) no-repeat center;
      background-size: contain; }
  #user-context-menu #ucm-reportmsg .ucm-reporticon {
    background: url(../../tsdefaultassets/report-msg-d.svg?eb708f4209bb) no-repeat center; }
    .darkmode #user-context-menu #ucm-reportmsg .ucm-reporticon {
      background: url(../../tsdefaultassets/report-msg.svg?2fb3afefb325) no-repeat center; }
  #user-context-menu #ucm-ignoreuser.notIgnored .ucm-ignoreicon {
    background: url(../../tsdefaultassets/ignore-user-d.svg?02a8f1bed31a) no-repeat center; }
    .darkmode #user-context-menu #ucm-ignoreuser.notIgnored .ucm-ignoreicon {
      background: url(../../tsdefaultassets/ignore-user.svg?3e36707ef6dc) no-repeat center; }
  #user-context-menu #ucm-pvtmsg .ucm-sendicon {
    background: url(../../tsdefaultassets/send-pvt-msg-d.svg?b766d83858cc) no-repeat center; }
    .darkmode #user-context-menu #ucm-pvtmsg .ucm-sendicon {
      background: url(../../tsdefaultassets/send-pvt-msg.svg?195a6f6cc89c) no-repeat center; }
  #user-context-menu .ucm-linkhover {
    background-color: transparent; }
    #user-context-menu .ucm-linkhover:hover {
      background-color: #F9E4D5; }
      .darkmode #user-context-menu .ucm-linkhover:hover {
        background-color: #563E2E; }
  #user-context-menu .ucm-linkcolor {
    color: #49494F; }
    .darkmode #user-context-menu .ucm-linkcolor {
      color: #EDEDED; }
  #user-context-menu .ucm-placeholder {
    background-color: #E0E0E0; }
    .darkmode #user-context-menu .ucm-placeholder {
      background-color: #5B5B5B; }
  .darkmode #user-context-menu .ucm-notes-textarea {
    background-color: #202223;
    color: #dedede; }
  #user-context-menu .cancel-link {
    color: #0a5a83; }
    .darkmode #user-context-menu .cancel-link {
      color: #68B5F0; }
  #user-context-menu .notesIcon {
    background: url(../../tsdefaultassets/notes_light.svg?9743cb4941b2) no-repeat center; }
    .darkmode #user-context-menu .notesIcon {
      background: url(../../tsdefaultassets/notes_dm_light.svg?5f4262c591e5) no-repeat center; }
  .darkmode #user-context-menu textarea {
    background-color: #202223;
    color: #dedede;
    scrollbar-arrow-color: transparent;
    scrollbar-track-color: #303030;
    scrollbar-face-color: #6b6b6b; }
  .darkmode #user-context-menu textarea::-webkit-scrollbar {
    background-color: #303030;
    width: 10px; }
  .darkmode #user-context-menu textarea::-webkit-scrollbar-thumb {
    background-color: #6b6b6b;
    height: 20px;
    border-radius: 10px;
    width: 5px; }

/* 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 .genderTabs .tabAnchor.orange,
#main .followedContainer .tabAnchor.orange {
  background-color: #FAE6C4 !important;
  color: #dc5500 !important; }
  .darkmode #main .top-section .sub-nav li a.tabAnchor.orange, .darkmode #main .genderTabs .tabAnchor.orange, .darkmode #main .followedContainer .tabAnchor.orange {
    background-color: #885336 !important;
    color: #ffffff !important; }

/* 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)
 */
.tab.chat-tab-handle.active {
  color: #dc5500; }
  .darkmode .tab.chat-tab-handle.active {
    color: #68B5F0; }

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

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

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

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

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

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

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

#FVChatTabContents .chat-input-div,
#FVChatSettingsTab .chat-input-div {
  background-color: #ffffff; }
  .darkmode #FVChatTabContents .chat-input-div, .darkmode
  #FVChatSettingsTab .chat-input-div {
    background-color: #474747; }
  .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; }

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

/* 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 .genderTabs .tabAnchor.orange,
#main .followedContainer .tabAnchor.orange {
  background-color: #FAE6C4 !important;
  color: #dc5500 !important; }
  .darkmode #main .top-section .sub-nav li a.tabAnchor.orange, .darkmode #main .genderTabs .tabAnchor.orange, .darkmode #main .followedContainer .tabAnchor.orange {
    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; }

#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",
----userInfoDropdownBgColor: "#3C87BA", ---- DONE
----userInfoDropdownHighlightColor: "#F47321", ---- DONE
----userInfoDropdownTextColor: "#ffffff", ---- DONE
signupBgColor: "#f47321",
 */
.smc-preview-modal,
.helpOverlay {
  background-color: #F8F9FA;
  color: #49494F; }
  .darkmode .smc-preview-modal, .darkmode
  .helpOverlay {
    background-color: #202223;
    color: #B3B3B3; }

.panel {
  background-color: #fff;
  border-color: #ACACAC;
  color: #49494F; }
  .darkmode .panel {
    background-color: #323639;
    border-color: #474747;
    color: #B3B3B3; }

.smc-preview-modal .startButton,
.smc-preview-modal button {
  background-color: #C9C9C9;
  border-color: #ACACAC;
  color: #49494F; }
  .smc-preview-modal .startButton:disabled,
  .smc-preview-modal button:disabled {
    opacity: 0.5; }
  .darkmode .smc-preview-modal .startButton, .darkmode
  .smc-preview-modal button {
    background-color: #323639;
    border-color: #474747;
    color: #B3B3B3; }

.title {
  color: #306A91; }
  .darkmode .title {
    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)
 */
.dismissible-message {
  background-color: #C9C9C9;
  color: #49494F; }
  .darkmode .dismissible-message {
    background-color: #333638;
    color: #B3B3B3; }