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

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

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

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

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

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

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

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

#PhotoVideos .previewText {
  color: white; }

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

#PhotoVideos .videoProcessing {
  color: red; }

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

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

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

#PhotoVideos .psToggleSort {
  color: #306A91; }
  .darkmode #PhotoVideos .psToggleSort {
    color: #68B5F0; }

#PhotoVideos .psDropDownArrow {
  width: 10px;
  height: 7px;
  padding-left: 2px;
  padding-bottom: 3px;
  margin-left: 4px;
  display: inline-block;
  background-repeat: no-repeat;
  background-size: 75%;
  background-position: center;
  background-image: url(../../tsdefaultassets/arrowdown_blue.svg?ac299e35c90a); }
  .darkmode #PhotoVideos .psDropDownArrow {
    background-image: url(../../tsdefaultassets/darkmode_arrowdown_blue.svg?4c0f9c6565ba); }

.darkmode .psSortingDropdown .psSortingContainer {
  background: #222429; }

.psSortingDropdown .psSortingContainer .psSortingOption {
  background: #fff;
  color: #525252; }
  .darkmode .psSortingDropdown .psSortingContainer .psSortingOption {
    background: #222429;
    color: #B3B3B3; }

.psSortingDropdown .psSortingContainer .psSortingOption:hover {
  background: #FCEADC; }
  .darkmode .psSortingDropdown .psSortingContainer .psSortingOption:hover {
    background: #303A42; }

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

/*
 * 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 .AppsBotsTab a {
  color: #68B5F0; }

.AppsBotsTab .noneSelected {
  color: #808080; }
  .darkmode .AppsBotsTab .noneSelected {
    color: #6C6C78; }

.AppsBotsTab .deactivate {
  color: #af0000; }
  .darkmode .AppsBotsTab .deactivate {
    color: #FE3D39; }

.AppsBotsTab .orText {
  color: #dc5500; }

/*
 * 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 .GamesTab a {
  color: #68B5F0; }

.GamesTab .deactivate {
  color: #af0000; }
  .darkmode .GamesTab .deactivate {
    color: #FE3D39; }

.GamesTab .orText {
  color: #dc5500; }

.GamesTab .tabSection {
  border: 1px solid #EFEFEF; }
  .darkmode .GamesTab .tabSection {
    border: none; }

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

.OBSBroadcastInfo #obs_broadcast_info {
  color: #7F7F7F;
  background-color: #FFFFFF; }
  .darkmode .OBSBroadcastInfo #obs_broadcast_info .supportLink {
    color: #68B5F0 !important; }
  .darkmode .OBSBroadcastInfo #obs_broadcast_info {
    color: #b3b3b3;
    background-color: #2A2C2E; }
  .OBSBroadcastInfo #obs_broadcast_info .warning {
    color: #0a5a83; }
    .darkmode .OBSBroadcastInfo #obs_broadcast_info .warning {
      color: #B3B3B3; }
  .OBSBroadcastInfo #obs_broadcast_info .tokenValue {
    border-color: #b1b1b1;
    background-color: #FFFFFF; }
    .darkmode .OBSBroadcastInfo #obs_broadcast_info .tokenValue {
      border-color: #b3b3b3;
      background-color: #2A2C2E;
      color: #B3B3B3; }
      .darkmode .OBSBroadcastInfo #obs_broadcast_info .tokenValue:focus {
        outline: none;
        box-shadow: 0 0 0 2px #68b5f0; }
  .OBSBroadcastInfo #obs_broadcast_info .rtmpUrl {
    color: #0b5d81; }
    .darkmode .OBSBroadcastInfo #obs_broadcast_info .rtmpUrl {
      color: #68B5F0; }
  .OBSBroadcastInfo #obs_broadcast_info .button {
    background-color: #F47321;
    color: #FFFFFF;
    border-color: #CD5D26; }
  .OBSBroadcastInfo #obs_broadcast_info .button a {
    color: #FFFFFF; }

.GameInfoBar {
  color: #49494F;
  background-color: white; }
  .GameInfoBar .gameImage {
    border-right: solid 1px #EFEFEF; }
  .GameInfoBar .stopStreamingButton {
    border: 1px solid #49494F; }
  .darkmode .GameInfoBar {
    color: #B3B3B3;
    background-color: #2A2C2E; }
    .darkmode .GameInfoBar a {
      color: #68B5F0; }
    .darkmode .GameInfoBar .gameImage {
      border-right: solid 1px #666666; }
    .darkmode .GameInfoBar .stopStreamingButton {
      border: 1px solid #B3B3B3; }

.darkmode .OBSInfoSection a {
  color: #68B5F0; }

.GameSelection {
  background-color: white;
  color: #49494F; }
  .GameSelection .searchBar {
    border: 1px solid #ACACAC; }
  .GameSelection .title {
    color: #272F35; }
  .GameSelection .selectGameButton {
    border: 1px solid #49494F; }
  .darkmode .GameSelection {
    background-color: #202223;
    color: #B3B3B3;
    border: 1px solid #2e3137; }
    .darkmode .GameSelection .searchBar {
      border: 1px solid #2e3137; }
      .darkmode .GameSelection .searchBar input[type=text] {
        background-color: inherit;
        color: inherit; }
    .darkmode .GameSelection .title {
      color: white; }
    .darkmode .GameSelection .selectGameButton {
      border: 1px solid #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)
 */
.BroadcastContestStats .statsContainer {
  color: #0c6a93; }
  .darkmode .BroadcastContestStats .statsContainer {
    color: #68B5F0; }

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

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

.BroadcastContestStats .topRow {
  color: #dc5500; }

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

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

.darkmode .BroadcastContestStats {
  color: #B3B3B3; }

.darkmode .TokenStatsTab {
  color: #b3b3b3; }

.TokenStatsTab .lightText {
  color: #666666; }
  .darkmode .TokenStatsTab .lightText {
    color: #b3b3b3; }

.TokenStatsTab .tokenStatsTable {
  color: #525252; }
  .darkmode .TokenStatsTab .tokenStatsTable {
    color: #D1D1D1;
    border-color: #2A2C2E; }
  .TokenStatsTab .tokenStatsTable table, .TokenStatsTab .tokenStatsTable td, .TokenStatsTab .tokenStatsTable th {
    border-color: #E0E0E0; }
    .darkmode .TokenStatsTab .tokenStatsTable table, .darkmode .TokenStatsTab .tokenStatsTable td, .darkmode .TokenStatsTab .tokenStatsTable th {
      border-color: #2A2C2E; }
  .TokenStatsTab .tokenStatsTable .rowHeader {
    background-color: #E0E0E0; }
    .darkmode .TokenStatsTab .tokenStatsTable .rowHeader {
      background-color: #2A2C2E; }
  .TokenStatsTab .tokenStatsTable .rowOdd {
    background-color: #FFFFFF; }
    .darkmode .TokenStatsTab .tokenStatsTable .rowOdd {
      background-color: #0D0D0E; }
  .TokenStatsTab .tokenStatsTable .rowEven {
    background-color: #F8F9FA; }
    .darkmode .TokenStatsTab .tokenStatsTable .rowEven {
      background-color: #202223; }
  .TokenStatsTab .tokenStatsTable .transactionMessage {
    color: #666666; }
    .darkmode .TokenStatsTab .tokenStatsTable .transactionMessage {
      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)
 */
.MembershipsTab .membershipLightText {
  color: #717171; }
  .darkmode .MembershipsTab .membershipLightText {
    color: #B3B3B3; }

.MembershipsTab .membershipHeader {
  border-bottom-color: #4c4c4c; }

.MembershipsTab .username {
  color: #e45900; }

.NewMembershipsTab .newMembershipHeader {
  color: #000000;
  border-bottom-color: #EFEFEF; }
  .darkmode .NewMembershipsTab .newMembershipHeader {
    color: #B3B3B3; }

.NewMembershipsTab .tr {
  color: #49494F; }
  .darkmode .NewMembershipsTab .tr {
    color: #b3b3b3; }

.NewMembershipsTab .durationCol, .NewMembershipsTab .sinceStyle, .NewMembershipsTab .cantRenewMessage {
  color: #CBCBCB; }
  .darkmode .NewMembershipsTab .durationCol, .darkmode .NewMembershipsTab .sinceStyle, .darkmode .NewMembershipsTab .cantRenewMessage {
    color: #B3B3B3; }

.NewMembershipsTab .supporterDescriptions {
  color: #6C6C78; }
  .darkmode .NewMembershipsTab .supporterDescriptions {
    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)
 */
/*
 * 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)
 */
.SatisfactionRating {
  background-color: #bbbbbb; }
  .darkmode .SatisfactionRating {
    background-color: #202223; }
  .SatisfactionRating.gradient {
    background: linear-gradient(180deg, #ffffff 0%, #ffffff 50%, #dddddd 60%); }
    .darkmode .SatisfactionRating.gradient {
      background: linear-gradient(180deg, #474747 29.7%, #2a2c2f 70.67%); }
  .SatisfactionRating .satisfactionSpan {
    color: #7F7F7F;
    text-shadow: 1px 1px 0px #94d2e6; }
    .darkmode .SatisfactionRating .satisfactionSpan {
      color: #B3B3B3;
      text-shadow: 1px 1px 0px #274a62; }
  .SatisfactionRating .voteText {
    text-shadow: 1px 1px 0px #bababa; }
    .darkmode .SatisfactionRating .voteText {
      text-shadow: 1px 1px 0px #363636; }
  .SatisfactionRating .ratingHistory {
    border-color: #0b5d81; }
  .SatisfactionRating .highPercent {
    color: #298A08; }
  .SatisfactionRating .mediumPercent {
    color: #af5c01; }
  .SatisfactionRating .lowPercent {
    color: #af0101; }
  .SatisfactionRating .commentDate {
    color: #aaaaaa; }
  .SatisfactionRating .vote {
    border-color: #888888; }
    .darkmode .SatisfactionRating .vote {
      border-color: #474747; }
  .SatisfactionRating .positiveVote {
    background-color: #EEEEEE; }
    .darkmode .SatisfactionRating .positiveVote {
      background-color: #2A2C2F;
      color: #B3B3B3; }
  .SatisfactionRating .negativeVote {
    background-color: #ffe9e5; }
    .darkmode .SatisfactionRating .negativeVote {
      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)
 */
.roomCard {
  border-color: #acacac; }
  .darkmode .roomCard {
    border-color: rgba(100, 100, 100, 0.5); }
  .roomCard .cardTitle {
    border-bottom-color: #acacac; }
    .darkmode .roomCard .cardTitle {
      border-bottom-color: #666666; }
  .roomCard .tagNewColor {
    color: #ffffff;
    background-color: #71b404; }
  .roomCard li.cams {
    background: url(../../images/cam.svg?aee4a41ba664) no-repeat 0 0;
    background-size: auto; }
    .darkmode .roomCard li.cams {
      background: url(../../images/cam_white.svg?282a760aab80) no-repeat 0 0;
      background-size: auto; }
  .roomCard li.location {
    background: url(../../images/location.svg?5021cfc1ff61) no-repeat 0 0;
    background-size: auto; }
    .darkmode .roomCard li.location {
      background: url(../../images/location_white.svg?339f27869359) no-repeat 0 0;
      background-size: auto; }
  .roomCard .age {
    float: left;
    color: #49494F;
    padding: 2px 6px 0 0;
    font: 1em/1.333em 'UbuntuMedium', Arial, Helvetica, sans-serif; }
    .darkmode .roomCard .age {
      color: #B3B3B3; }
  .roomCard .age_gender_container {
    float: right;
    height: 17px; }
  .roomCard .genderf,
  .roomCard .genderm,
  .roomCard .genderc,
  .roomCard .genders,
  .roomCard .genderx {
    width: 14px;
    height: 14px;
    display: inline-block;
    float: left; }
  .roomCard .genderf {
    background: url(../../images/ico-female.svg?818c9c4c368f) no-repeat 100% 0;
    background-size: contain; }
  .roomCard .genderm {
    background: url(../../images/ico-male.svg?251793534c73) no-repeat 100% 0;
    background-size: contain; }
  .roomCard .genderc {
    background: url(../../images/ico-couple.svg?b74df354b80e) no-repeat 100% 0;
    background-size: contain; }
  .roomCard .genders {
    background: url(../../images/ico-trans.svg?4984008acb01) no-repeat 100% 0;
    background-size: contain; }
  .roomCard .genderx {
    background: url(../../images/ico-blank.png?c807e40114dc) no-repeat 100% 0;
    background-size: contain; }

/* Note this is a theme file -- Only color css allowed here! */
/* Note this is a theme file -- Only color css allowed here! */
/* Note this is a theme file -- Only color css allowed here! */
/*
 * Before using one these variables, check if a mixin could be used. If
 * the lightmode color and darkmode color in the design both match the colors
 * here, then we can use a mixin from _color_mixins.scss instead. May need to
 * build the mixin first, following the example of existing ones.
 *
 * (Darkmode colors not necessarily finalized, should check back later with the
 * figma to confirm them)
 */
/*
 * Before using one these variables, check if a mixin could be used. If
 * the lightmode color and darkmode color in the design both match the colors
 * here, then we can use a mixin from _color_mixins.scss instead. May need to
 * build the mixin first, following the example of existing ones.
 *
 * (Darkmode colors not necessarily finalized, should check back later with the
 * figma to confirm them)
 */
.PmListItem {
  border-color: #E0E0E0;
  background-color: #ffffff; }
  .darkmode .PmListItem, .hasDarkBackground .PmListItem {
    color: #CBCBCB; }
  .darkmode .PmListItem {
    background-color: #202223; }
  .PmListItem .replyIconSvg svg {
    fill: #49494F; }
    .darkmode .PmListItem .replyIconSvg svg, .hasDarkBackground .PmListItem .replyIconSvg svg {
      fill: #ffffff; }
  .darkmode .PmListItem .messageDiv, .hasDarkBackground .PmListItem .messageDiv {
    color: #ffffff; }
  .PmListItem.unreadBg {
    background-color: #FCEADC; }
    .darkmode .PmListItem.unreadBg, .hasDarkBackground .PmListItem.unreadBg {
      background-color: #5B4736; }
  .PmListItem.selected {
    background-color: #E0E0E0; }
    .darkmode .PmListItem.selected, .hasDarkBackground .PmListItem.selected {
      background-color: #434649; }
  .hasDarkBackground .PmListItem {
    border-color: #7F7F7F;
    background-color: #2A2C2E; }
  .PmListItem .avatarBubble .broadcaster {
    background-color: #DC5500; }
  .PmListItem .avatarBubble .mod {
    background-color: #DC0000; }
  .PmListItem .avatarBubble .inFanclub {
    background-color: #090; }
  .PmListItem .avatarBubble .tippedTonsRecently {
    background-color: #804baa; }
  .PmListItem .avatarBubble .tippedALotRecently {
    background-color: #be6aff; }
  .PmListItem .avatarBubble .tippedRecently {
    background-color: #1E5CFB; }
  .PmListItem .avatarBubble .hasTokens {
    background-color: #69A; }
  .PmListItem .avatarBubble .defaultUser {
    background-color: #939393; }
  .PmListItem .closeBtnContainer {
    fill: #888; }
    .PmListItem .closeBtnContainer:hover {
      fill: #222; }
    .darkmode .PmListItem .closeBtnContainer:hover, .hasDarkBackground .PmListItem .closeBtnContainer:hover {
      fill: #D1D1D1; }
  .PmListItem .timeString {
    color: #6C6C78; }
    .darkmode .PmListItem .timeString {
      color: #888; }

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

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

.tab.chat-tab-handle.active {
  color: #dc5500; }
  .darkmode .tab.chat-tab-handle.active {
    color: #68B5F0; }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

#tab-row {
  background-color: #7f7f7f; }
  #ChatTabContainer.modern #tab-row, .draggableCanvasWindow .modern #tab-row {
    background-color: #c9c9c9; }
    .darkmode #ChatTabContainer.modern #tab-row, .darkmode .draggableCanvasWindow .modern #tab-row {
      background-color: #323639; }
  .darkmode #tab-row {
    background-color: #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: #dc5500;
    cursor: default; }
    #ChatTabContainer.modern .tab.active, .draggableCanvasWindow .modern .tab.active {
      color: #4c4c4c; }
      .darkmode #ChatTabContainer.modern .tab.active, .darkmode .draggableCanvasWindow .modern .tab.active {
        color: #d1d1d1; }
    .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); }

.whiteModal {
  background-color: #FFFFFF;
  color: #525252;
  border-color: #EFEFEF; }
  .darkmode .whiteModal {
    background-color: #1F2C39;
    color: #B3B3B3;
    border-color: #29323F; }
  .whiteModal .divot {
    color: #EFEFEF; }
    .darkmode .whiteModal .divot {
      color: #29323F; }
    .whiteModal .divot .divotBackground {
      color: #FFFFFF; }
      .darkmode .whiteModal .divot .divotBackground {
        color: #1F2C39; }
  .whiteModal .headerDivot {
    color: #EFEFEF; }
    .darkmode .whiteModal .headerDivot {
      color: #29323F; }
    .whiteModal .headerDivot .divotBackground {
      color: #F8F9FA; }
      .darkmode .whiteModal .headerDivot .divotBackground {
        color: #17202A; }

#FollowSettingsModal .header {
  background-color: #F8F9FA;
  border-color: #EFEFEF; }
  .darkmode #FollowSettingsModal .header {
    background-color: #17202A;
    border-color: #29323F; }

#FollowSettingsModal .button {
  background-color: #F47321;
  color: #FFFFFF;
  border-color: #CD5D26; }

#FollowSettingsModal .textInput {
  border-color: #ACACAC;
  color: #525252;
  background-color: #FFFFFF; }
  .darkmode #FollowSettingsModal .textInput {
    color: #B3B3B3;
    background-color: #1F2C39;
    border-color: #2D3E50; }

#FollowSettingsModal .popularBadge {
  background-color: #E0E0E0; }
  .darkmode #FollowSettingsModal .popularBadge {
    background-color: #1C2733; }

#FollowSettingsModal .greenCheckbox {
  background-color: #090; }

#FollowSettingsModal .errorMessage {
  color: #CC0000; }

#FollowSettingsModal .verifyLink {
  color: #306A91; }
  .darkmode #FollowSettingsModal .verifyLink {
    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)
 */
/*
 * 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 .separator {
    color: #222222; }
    .darkmode #roomTabs .separator {
      color: #b3b3b3; }
  #roomTabs .fanclubMessage {
    color: #494949; }
    .darkmode #roomTabs .fanclubMessage {
      color: #B3B3B3; }
  #roomTabs .psContainer {
    color: #0a5a83; }
    .darkmode #roomTabs .psContainer {
      color: #68B5F0; }
  #roomTabs .previewBorder {
    color: #cccccc; }
    .darkmode #roomTabs .previewBorder {
      color: #2A2C2E; }

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

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

/* Note this is a theme file -- Only color css allowed here! */
/*
 * 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: #306A91; }
  .floatingPlayer .header a {
    color: #306A91; }
  .darkmode .floatingPlayer .header {
    background-color: #1a1a1a;
    color: #68B5F0; }
    .darkmode .floatingPlayer .header a {
      color: #68B5F0; }
  .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; }

.suggestionsDiv {
  border: 1px solid #bdbdbd; }
  .suggestionsDiv a {
    color: #494949; }
    .darkmode .suggestionsDiv a {
      color: #fcfcfc; }
  .suggestionsDiv .statusText {
    color: #6C6C78; }
    .darkmode .suggestionsDiv .statusText {
      color: #cbcbcb; }
  .suggestionsDiv .icon-online {
    background: url(../../tsdefaultassets/search_online_broadcaster.svg?e5b99c9c4dd7) no-repeat center center; }
    .darkmode .suggestionsDiv .icon-online {
      background: url(../../tsdefaultassets/search_online_broadcaster_dm.svg?cf182a59dbea) no-repeat center center; }
  .suggestionsDiv .icon-offline {
    background: url(../../tsdefaultassets/search_offline_broadcaster.svg?caa457f278fe) no-repeat center center; }
    .darkmode .suggestionsDiv .icon-offline {
      background: url(../../tsdefaultassets/search_offline_broadcaster_dm.svg?728f6cbf906d) no-repeat center center; }
  .suggestionsDiv .icon-hashtag {
    background: url(../../tsdefaultassets/search_hashtag.svg?11e0ce450c3e) no-repeat center center; }
    .darkmode .suggestionsDiv .icon-hashtag {
      background: url(../../tsdefaultassets/search_hashtag_dm.svg?fd60e5e9daaa) no-repeat center center; }
  .suggestionsDiv div.broadcaster_suggestion,
  .suggestionsDiv div.hashtag_suggestion {
    background-color: #fcfcfc;
    border-bottom-color: #EFEFEF;
    color: #494949; }
    .darkmode .suggestionsDiv div.broadcaster_suggestion, .darkmode .suggestionsDiv div.hashtag_suggestion {
      background-color: #2a2c2e;
      border-bottom-color: #7f7f7f;
      color: #fcfcfc; }
    .suggestionsDiv div.broadcaster_suggestion:hover, .suggestionsDiv div.broadcaster_suggestion.active,
    .suggestionsDiv div.hashtag_suggestion:hover,
    .suggestionsDiv div.hashtag_suggestion.active {
      background-color: #efefef; }
      .darkmode .suggestionsDiv div.broadcaster_suggestion:hover, .darkmode .suggestionsDiv div.broadcaster_suggestion.active, .darkmode .suggestionsDiv div.hashtag_suggestion:hover, .darkmode .suggestionsDiv div.hashtag_suggestion.active {
        background-color: #7f7f7f; }

.darkmode #main .paging li.active a, .darkmode #main .paging li:hover a:not(.prev):not(.next) {
  background: transparent;
  border: 1px solid transparent;
  color: #68b5f0; }

.darkmode #main .paging li a {
  border: 1px solid transparent;
  background: #2a2c2e;
  color: #B3B3B3; }

.darkmode #main .paging li a.prev, .darkmode #main .paging li a.prev:hover {
  background: #2a2c2e url(../../images/arrow-left_dm.svg?b9699c1795b0) no-repeat 50% 50%; }

.darkmode #main .paging li a.next {
  background: #2a2c2e url(../../images/arrow-right_dm.svg?2ab10858e309) no-repeat 50% 50%; }

/*
 * 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 #room_list .room_list_room {
  background: #2a2c2e;
  border: 1px solid rgba(100, 100, 100, 0.5); }

.darkmode #room_list .room_list_room .title .age {
  color: #B3B3B3; }

.darkmode #room_list .room_list_room .sub-info {
  color: #888; }

#room_list .room_list_room .sub-info li.cams {
  background: url(../../images/cam.svg?aee4a41ba664) no-repeat 0 50%;
  background-size: auto; }
  .darkmode #room_list .room_list_room .sub-info li.cams {
    background: url(../../images/cam_white.svg?282a760aab80) no-repeat 0 50%;
    background-size: auto; }

#room_list .room_list_room .sub-info li.location {
  background: url(../../images/location.svg?5021cfc1ff61) no-repeat 0 50%;
  background-size: auto; }
  .darkmode #room_list .room_list_room .sub-info li.location {
    background: url(../../images/location_white.svg?339f27869359) no-repeat 0 50%;
    background-size: auto; }

.darkmode #room_list .room_list_room .subject {
  color: #B3B3B3; }

.darkmode #room_list .room_list_room a, .darkmode #room_list #hashtag_ticker a, .darkmode #room_list .dismissable_notice a, .darkmode #room_list .advanced_search_button_shell a {
  color: #68b5f0; }

.darkmode #main .endless_page_template h2 {
  color: #68b5f0 !important; }

.darkmode a {
  color: #68b5f0; }

.darkmode #hashtag_ticker, .darkmode .searching-keyword p {
  color: #B3B3B3; }

.darkmode div.advanced_search_options {
  background-color: #2a2c2e; }

.darkmode div.advanced_search_options h2 {
  color: #F47321; }

.darkmode div.advanced_search_options .transparentCheckbox.checked {
  background-color: #306A91;
  border-color: #306A91; }

.darkmode div.advanced_search_options input[type='checkbox'] {
  border-color: #4b4c4b;
  background-color: #202223;
  color: #ffffff; }
  .darkmode div.advanced_search_options input[type='checkbox']:focus {
    outline: none;
    box-shadow: 0 0 0 2px #68b5f0; }

.darkmode div.advanced_search_options #filter_location_form input + label, .darkmode div.advanced_search_options .label {
  color: #fcfcfc; }

.darkmode div.advanced_search_options #filter_location_form label {
  color: #bfbfbf; }

#search_icon {
  display: inline;
  position: relative;
  float: right;
  right: 15px;
  top: 3px;
  height: 25px;
  width: 25px;
  z-index: 2; }
  #search_icon:hover {
    cursor: pointer; }
  #search_icon div {
    position: relative;
    top: 5px;
    left: 3px;
    width: 12px; }

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

.search_input:-ms-input-placeholder {
  color: #d3d3d3; }

li.advanced_search_button_shell {
  display: inline;
  position: relative;
  top: 8px;
  right: 5px;
  font: 13px "UbuntuMedium", Arial, Helvetica, sans-serif;
  float: right;
  -webkit-text-size-adjust: none; }

div.advanced_search_options {
  position: relative;
  background: none repeat scroll 0 0 #f0f1f1;
  padding: 10px 5px 10px 5px;
  border: 1px solid #acacac;
  margin-left: 15px;
  margin-bottom: 15px;
  font-size: 11px;
  border-radius: 4px;
  box-sizing: border-box;
  overflow: hidden;
  max-height: 2000px;
  transition: max-height 0.6s ease; }
  div.advanced_search_options h2 {
    color: #dc5500;
    font: 1.2em/1.4em "UbuntuBold", Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
    margin-left: 15px; }
  div.advanced_search_options h3 {
    color: #000000;
    font-weight: bold;
    width: 100%;
    text-align: left; }
  div.advanced_search_options .button {
    margin: 0;
    line-height: 27px; }
  div.advanced_search_options p.label {
    margin-bottom: 0px;
    margin-top: 0px; }
  div.advanced_search_options .wide {
    width: 200px;
    margin-bottom: 18px; }
    div.advanced_search_options .wide form {
      width: 150px; }
  div.advanced_search_options .section {
    vertical-align: top;
    padding-left: 25px;
    padding-top: 10px;
    display: inline-block; }
  div.advanced_search_options .checkboxes {
    width: 400px; }
  .darkmode div.advanced_search_options#advanced_search_options #filter_location_form input + label, .darkmode div.advanced_search_options#advanced_search_options .label {
    color: #fcfcfc; }
  div.advanced_search_options #filter_location_form label,
  div.advanced_search_options #filter_options_form label,
  div.advanced_search_options #animate_thumbnails_form label,
  div.advanced_search_options #floatingplayer_options_form label {
    padding: 3px 0 4px; }
    .darkmode div.advanced_search_options #filter_location_form label, .darkmode div.advanced_search_options #filter_options_form label, .darkmode div.advanced_search_options #animate_thumbnails_form label, .darkmode div.advanced_search_options #floatingplayer_options_form label {
      color: #bfbfbf; }
  div.advanced_search_options input[type="checkbox"]:hover,
  div.advanced_search_options label:hover {
    cursor: pointer; }
  .darkmode div.advanced_search_options select, .darkmode div.advanced_search_options input {
    background-color: #000000;
    color: #b3b3b3; }
  div.advanced_search_options .checkboxes > div {
    vertical-align: top;
    display: inline-block; }

div.advanced_search_options.collapsed {
  padding: 0;
  border: 0;
  height: 0;
  margin: 0;
  max-height: 0; }

.advanced_search_region {
  color: #4e8aaa; }

.content .c-1 {
  margin-right: 20px; }