@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap");
.userUpdatesPanel .twitterUpdateRow {
  background-color: #ffe5be;
  border-color: #dabb95;
}
.darkmode .userUpdatesPanel .twitterUpdateRow {
  background-color: #885336;
  border-color: #2a323f;
}
.userUpdatesPanel .twitterUpdateRow.uipExp {
  background-color: #fff;
  border-color: #f0f0f0;
}
.darkmode .userUpdatesPanel .twitterUpdateRow.uipExp {
  background-color: #2a2c2e;
  border-color: #1a1a1b;
}
.userUpdatesPanel .twitterUpdateRow .contentSection {
  color: #494949;
}
.darkmode .userUpdatesPanel .twitterUpdateRow .contentSection {
  color: #ffffff;
}
.userUpdatesPanel .twitterUpdateRow .timeSince {
  color: #7f7f7f;
}
.darkmode .userUpdatesPanel .twitterUpdateRow .timeSince {
  color: #b3b3b3;
}
.userUpdatesPanel .twitterUpdateRow .twitterLink,
.userUpdatesPanel .twitterUpdateRow .tweetLink {
  color: #f47321;
}
.darkmode .userUpdatesPanel .twitterUpdateRow .twitterLink,
.darkmode .userUpdatesPanel .twitterUpdateRow .tweetLink {
  color: #68b5f0;
}
.userUpdatesPanel .twitterUpdateRow.seen {
  background-color: #efefef;
  border-color: #c1c1c1;
}
.userUpdatesPanel .twitterUpdateRow.seen.uipExp {
  background-color: #f8f9fa;
}
.darkmode .userUpdatesPanel .twitterUpdateRow.seen {
  background-color: #253441;
  border-color: #2a323f;
}
.darkmode .userUpdatesPanel .twitterUpdateRow.seen .contentSection {
  color: #b3b3b3;
}
.darkmode .userUpdatesPanel .twitterUpdateRow.seen .timeSince {
  color: #6e6f70;
}

#UserUpdatesPanel {
  background-color: #ffffff;
  border-color: #2c6990;
}
.darkmode #UserUpdatesPanel {
  background-color: #1c2733;
  border-color: #1c2733;
  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 .tab.active,
#UserUpdatesPanel #updates-tab {
  color: #f47321;
}
.darkmode #UserUpdatesPanel .tab.active,
.darkmode #UserUpdatesPanel #updates-tab {
  color: #68b5f0;
}
#UserUpdatesPanel #tab-row {
  background-color: #747474;
}
.darkmode #UserUpdatesPanel #tab-row {
  background-color: #17202a;
}
#UserUpdatesPanel .feedbackLink {
  color: #f47321;
}
.darkmode #UserUpdatesPanel .feedbackLink {
  color: #68b5f0;
}

#userInfoPanelMenuDropdownRoot #UserMenuDropDown {
  border-color: #2c6990;
}
.darkmode #userInfoPanelMenuDropdownRoot #UserMenuDropDown {
  border-color: #2d3e50;
}
#userInfoPanelMenuDropdownRoot .dmSwitchCircle {
  background-color: #fff;
}
#userInfoPanelMenuDropdownRoot .dmSwitch {
  background-color: #474747;
}
.darkmode #userInfoPanelMenuDropdownRoot .dmSwitch {
  background-color: #f47321;
}

.dmListDropdownRoot {
  background-color: #fff;
  border-color: #0c6a93;
}
.darkmode .dmListDropdownRoot {
  background-color: #202c39;
  border-color: #1c2733;
}
.dmListDropdownRoot .header {
  color: #49494f;
  border-bottom-color: #e0e0e0;
}
.darkmode .dmListDropdownRoot .header {
  color: #b3b3b3;
  border-bottom-color: #2d3e50;
}
.dmListDropdownRoot .header .popoutIcon {
  background: url(../../tsdefaultassets/popout.svg?cd939ba3d01e) no-repeat center;
}
.darkmode .dmListDropdownRoot .header .popoutIcon {
  background: url(../../tsdefaultassets/popout_darkmode.svg?4ed4b17ed080) no-repeat center;
}
.dmListDropdownRoot .sendDmPrompt {
  color: #222222;
}
.darkmode .dmListDropdownRoot .sendDmPrompt {
  color: #ffffff;
}
.dmListDropdownRoot .signupPrompt {
  color: #525252;
}
.darkmode .dmListDropdownRoot .signupPrompt {
  color: #b3b3b3;
}
.darkmode .dmListDropdownRoot .link {
  color: #68b5f0;
}

.noScrollbar {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE 10+ */
}
.noScrollbar br {
  display: none;
}
.noScrollbar::-webkit-scrollbar {
  width: 0px;
  height: 0px;
  background: transparent; /* Chrome/Safari/Webkit */
}

.dmWindow {
  background-color: #ffffff;
  color: #525252;
}
.darkmode .dmWindow {
  background-color: #202c39;
  color: #b3b3b3;
}
.dmWindow:not(.DmPopout .dmWindow) {
  box-shadow: 0px 0px 32px rgba(0, 0, 0, 0.32);
}
.darkmode .dmWindow:not(.DmPopout .dmWindow) {
  box-shadow: 0px 0px 32px rgba(0, 0, 0, 0.32);
}
.dmWindow .dmWindowHeader {
  background-color: #f8f9fa;
  border-bottom-color: #efefef;
}
.darkmode .dmWindow .dmWindowHeader {
  background-color: #17202a;
  border-bottom-color: #2a323f;
}
.dmWindow .dmWindowHeader.highlight:not(.noHighlight) {
  background-color: #e0e0e0;
}
.darkmode .dmWindow .dmWindowHeader.highlight:not(.noHighlight) {
  background-color: #1c2733;
}
.dmWindow .dmWindowHeader.loadedHighlight {
  animation-duration: 4s;
}
.dmWindow .dmWindowHeader.loadedHighlight:not(.darkmode .dmWindow .dmWindowHeader.loadedHighlight) {
  animation-name: color1;
}
@keyframes color1 {
  0% {
    background-color: #d5ebf8;
  }
  80% {
    background-color: #d5ebf8;
  }
}
.darkmode .dmWindow .dmWindowHeader.loadedHighlight {
  animation-name: color2;
}
@keyframes color2 {
  0% {
    background-color: #2d3e50;
  }
  80% {
    background-color: #2d3e50;
  }
}
.dmWindow .dmWindowHeader .button:hover {
  background-color: #c9c9c9;
}
.darkmode .dmWindow .dmWindowHeader .button:hover {
  background-color: #202c39;
}
.dmWindow .dmWindowMessage {
  color: #525252;
}
.darkmode .dmWindow .dmWindowMessage {
  color: #ffffff;
}
.dmWindow .dmWindowMessage .me {
  background-color: #d5ebf8;
}
.darkmode .dmWindow .dmWindowMessage .me {
  background-color: #303a42;
}
.dmWindow .dmWindowMessage .other {
  background-color: transparent;
  border-color: #a7a7a7;
}
.darkmode .dmWindow .dmWindowMessage .other {
  border-color: #6e6f70;
}
.dmWindow .logMessage .tipNotice {
  background-color: #ffff33;
  color: #000000;
  border: none !important;
}
.dmWindow .timestamp {
  color: #525252;
}
.darkmode .dmWindow .timestamp {
  color: #b3b3b3;
}
.dmWindow .dmWindowInput {
  background-color: #f8f9fa;
  border-color: #efefef;
}
.dmWindow .dmWindowInput textarea {
  background-color: transparent;
  color: #525252;
}
.darkmode .dmWindow .dmWindowInput textarea {
  color: #b3b3b3;
}
.darkmode .dmWindow .dmWindowInput {
  background-color: #202c39;
  border-color: #2d3e50;
}
.dmWindow .dmWindowInput .sendButton:focus {
  outline: -webkit-focus-ring-color auto 1px;
}
.darkmode .dmWindow .dmWindowInput .sendButton:is(textarea, input, button):is(:not(button, input[type=submit], input[type=button])) {
  background-color: #202c39;
}
.darkmode .dmWindow .dmWindowInput .sendButton:is(textarea, input, button):focus {
  outline: none;
  box-shadow: 0 0 0 2px #68b5f0;
}
.darkmode .dmWindow .dmWindowInput .sendButton:is(select) {
  background-color: #202c39;
}
.darkmode .dmWindow .dmWindowInput .sendButton:is(select):focus {
  outline: 2px solid #68b5f0;
}
.dmWindow .dmWindowInput .sendButton, .darkmode .dmWindow .dmWindowInput .sendButton {
  background-color: var(--wl-signup-bg-color, #f47321);
  color: #ffffff;
  border: 1px solid var(--wl-signup-alt-bg-color, #cd5d26);
  border-radius: 4px;
}
.dmWindow .dmWindowInput .sendButton.disabled {
  opacity: 0.5;
}
.dmWindow .dmWindowInput .tipButton:focus {
  outline: -webkit-focus-ring-color auto 1px;
}
.darkmode .dmWindow .dmWindowInput .tipButton:is(textarea, input, button):is(:not(button, input[type=submit], input[type=button])) {
  background-color: #202c39;
}
.darkmode .dmWindow .dmWindowInput .tipButton:is(textarea, input, button):focus {
  outline: none;
  box-shadow: 0 0 0 2px #68b5f0;
}
.darkmode .dmWindow .dmWindowInput .tipButton:is(select) {
  background-color: #202c39;
}
.darkmode .dmWindow .dmWindowInput .tipButton:is(select):focus {
  outline: 2px solid #68b5f0;
}
.dmWindow .dmWindowInput .tipButton, .darkmode .dmWindow .dmWindowInput .tipButton {
  background-color: #009900;
  color: #ffffff;
  border: 1px solid #288a09;
  border-radius: 4px;
}
.dmWindow .dmWindowTipOverlay {
  background-color: #000000;
  opacity: 0.5;
}
.dmWindow .dmWindowTipCallout {
  background-color: #ffffff;
}
.darkmode .dmWindow .dmWindowTipCallout {
  background-color: #202c39;
}
.dmWindow .dmWindowTipCallout .titleBar {
  color: #0c6a93;
  background-color: #e0e0e0;
}
.darkmode .dmWindow .dmWindowTipCallout .titleBar {
  color: #68b5f0;
  background-color: #1c2733;
}
.dmWindow .dmWindowTipCallout .tokenBalance {
  color: #288a09;
}
.dmWindow .dmWindowTipCallout .tokenInputError {
  color: #cc0000;
}
.dmWindow .dmWindowTipCallout .purchaseLink {
  color: #0c6a93;
}
.darkmode .dmWindow .dmWindowTipCallout .purchaseLink {
  color: #68b5f0;
}
.dmWindow .tipInput:focus,
.dmWindow .tipMessage:focus {
  outline: -webkit-focus-ring-color auto 1px;
}
.darkmode .dmWindow .tipInput:is(textarea, input, button):is(:not(button, input[type=submit], input[type=button])),
.darkmode .dmWindow .tipMessage:is(textarea, input, button):is(:not(button, input[type=submit], input[type=button])) {
  background-color: #202c39;
}
.darkmode .dmWindow .tipInput:is(textarea, input, button):focus,
.darkmode .dmWindow .tipMessage:is(textarea, input, button):focus {
  outline: none;
  box-shadow: 0 0 0 2px #68b5f0;
}
.darkmode .dmWindow .tipInput:is(select),
.darkmode .dmWindow .tipMessage:is(select) {
  background-color: #202c39;
}
.darkmode .dmWindow .tipInput:is(select):focus,
.darkmode .dmWindow .tipMessage:is(select):focus {
  outline: 2px solid #68b5f0;
}
.dmWindow .tipInput,
.dmWindow .tipMessage {
  border-color: #acacac;
  background-color: transparent;
}
.darkmode .dmWindow .tipInput,
.darkmode .dmWindow .tipMessage {
  border-color: #2d3e50;
  color: #ffffff;
}
.dmWindow .sendTipButton:focus {
  outline: -webkit-focus-ring-color auto 1px;
}
.darkmode .dmWindow .sendTipButton:is(textarea, input, button):is(:not(button, input[type=submit], input[type=button])) {
  background-color: #202c39;
}
.darkmode .dmWindow .sendTipButton:is(textarea, input, button):focus {
  outline: none;
  box-shadow: 0 0 0 2px #68b5f0;
}
.darkmode .dmWindow .sendTipButton:is(select) {
  background-color: #202c39;
}
.darkmode .dmWindow .sendTipButton:is(select):focus {
  outline: 2px solid #68b5f0;
}
.dmWindow .sendTipButton, .darkmode .dmWindow .sendTipButton {
  background-color: #009900;
  color: #ffffff;
  border: 1px solid #288a09;
  border-radius: 4px;
}
.dmWindow .sendTipButton:disabled {
  opacity: 0.5;
}

.dmWindow.collapsed .dmWindowHeader {
  background-color: #ffffff;
}
.darkmode .dmWindow.collapsed .dmWindowHeader {
  background-color: #202c39;
}
.dmWindow.collapsed .dmWindowHeader:hover {
  background-color: #e0e0e0;
}
.darkmode .dmWindow.collapsed .dmWindowHeader:hover {
  background-color: #1c2733;
}

.pmUcmContainer {
  background-color: #ffffff;
  border-color: #efefef;
  box-shadow: 0px 0px 32px rgba(0, 0, 0, 0.32);
  color: #525252;
}
.darkmode .pmUcmContainer {
  background-color: #202c39;
  border-color: #2a323f;
  box-shadow: 0px 0px 32px rgba(0, 0, 0, 0.32);
  color: #b3b3b3;
}
.pmUcmContainer .pmUcmHeader {
  background-color: #f8f9fa;
  border-bottom-color: #efefef;
}
.darkmode .pmUcmContainer .pmUcmHeader {
  background-color: #17202a;
  border-bottom-color: #2a323f;
}
.pmUcmContainer .pmUcmHeader .placeholder {
  background-color: #e0e0e0;
}
.darkmode .pmUcmContainer .pmUcmHeader .placeholder {
  background-color: #1c2733;
}
.pmUcmContainer .pmUcmHeader .ageIcon {
  color: #525252;
}
.darkmode .pmUcmContainer .pmUcmHeader .ageIcon {
  color: #b3b3b3;
}
.pmUcmContainer .pmUcmDescription {
  border-top-color: #efefef;
}
.darkmode .pmUcmContainer .pmUcmDescription {
  border-top-color: #2a323f;
}
.pmUcmContainer .pmUcmLinks {
  border-top-color: #efefef;
}
.darkmode .pmUcmContainer .pmUcmLinks {
  border-top-color: #2a323f;
}
.pmUcmContainer .pmUcmLinks .pmUcmLinkItem:hover {
  background-color: #f9e4d5;
}
.darkmode .pmUcmContainer .pmUcmLinks .pmUcmLinkItem:hover {
  background-color: #885336;
}
.pmUcmContainer .pmUcmLinks .pmUcmLinkItem .pmUcmPopoutIcon {
  background: url(../../tsdefaultassets/popout-grey-d.svg?5e3e40bb292b) no-repeat center;
}
.darkmode .pmUcmContainer .pmUcmLinks .pmUcmLinkItem .pmUcmPopoutIcon {
  background: url(../../tsdefaultassets/popout-grey.svg?37347d0904cf) no-repeat center;
}
.pmUcmContainer .pmUcmLinks .pmUcmLinkItem .pmUcmIgnoreIcon {
  background: url(../../tsdefaultassets/ignore-user-d.svg?02a8f1bed31a) no-repeat center;
}
.darkmode .pmUcmContainer .pmUcmLinks .pmUcmLinkItem .pmUcmIgnoreIcon {
  background: url(../../tsdefaultassets/ignore-user.svg?4ca83bc3b789) no-repeat center;
}
.pmUcmContainer .pmUcmLinks .pmUcmLinkItem .pmUcmReportIcon {
  background: url(../../tsdefaultassets/report-msg-d.svg?eb708f4209bb) no-repeat center;
}
.darkmode .pmUcmContainer .pmUcmLinks .pmUcmLinkItem .pmUcmReportIcon {
  background: url(../../tsdefaultassets/report-msg.svg?9f05fef58682) no-repeat center;
}

.cornerSurveyWrapper {
  box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.16);
}
.cornerSurveyWrapper .cornerSurveyContainer {
  background-color: #ffffff;
  border-color: #efefef;
}
.darkmode .cornerSurveyWrapper .cornerSurveyContainer {
  background-color: #1c2733;
  border-color: #17202a;
}
.cornerSurveyWrapper .cornerSurveyContainer .timer {
  background-color: #0c6a93;
}
.darkmode .cornerSurveyWrapper .cornerSurveyContainer .timer {
  background-color: #68b5f0;
}
.cornerSurveyWrapper .cornerSurveyContainer .survey .title {
  color: #272f35;
}
.darkmode .cornerSurveyWrapper .cornerSurveyContainer .survey .title {
  color: #ffffff;
}
.cornerSurveyWrapper .cornerSurveyContainer .survey .emoteContainer {
  background-color: transparent;
  border-color: #acacac;
}
.darkmode .cornerSurveyWrapper .cornerSurveyContainer .survey .emoteContainer {
  border-color: #2d3e50;
}
.cornerSurveyWrapper .cornerSurveyContainer .survey .emoteContainer:hover {
  background-color: #e0eefb;
  border-color: #0b5b7e;
}
.darkmode .cornerSurveyWrapper .cornerSurveyContainer .survey .emoteContainer:hover {
  background-color: rgba(104, 181, 240, 0.1);
  border-color: #68b5f0;
}
.cornerSurveyWrapper .cornerSurveyContainer .survey .emoteContainer.selected svg path, .cornerSurveyWrapper .cornerSurveyContainer .survey .emoteContainer:hover svg path {
  fill: #0b5b7e;
}
.evolveMode .cornerSurveyWrapper .cornerSurveyContainer .survey .emoteContainer.selected svg path, .evolveMode .cornerSurveyWrapper .cornerSurveyContainer .survey .emoteContainer:hover svg path {
  fill: var(--text-button-brand);
}
.cornerSurveyWrapper .cornerSurveyContainer .survey .emoteContainer.selected svg g, .cornerSurveyWrapper .cornerSurveyContainer .survey .emoteContainer:hover svg g {
  opacity: 1;
}
.darkmode .cornerSurveyWrapper .cornerSurveyContainer .survey .emoteContainer svg path {
  fill: #d1d1d1;
}
.evolveMode .darkmode .cornerSurveyWrapper .cornerSurveyContainer .survey .emoteContainer svg path {
  fill: #68b5f0;
}
.darkmode .cornerSurveyWrapper .cornerSurveyContainer .survey .emoteContainer.selected svg path, .darkmode .cornerSurveyWrapper .cornerSurveyContainer .survey .emoteContainer:hover svg path {
  fill: #68b5f0;
}
.evolveMode .cornerSurveyWrapper .cornerSurveyContainer .survey .emoteContainer svg path {
  fill: var(--text-button-neutral);
}
.evolveMode .cornerSurveyWrapper .cornerSurveyContainer .survey .emoteContainer.selected svg path, .evolveMode .cornerSurveyWrapper .cornerSurveyContainer .survey .emoteContainer:hover svg path {
  fill: var(--text-button-brand);
}
.cornerSurveyWrapper .cornerSurveyContainer .confirmation .title {
  color: #525252;
}
.darkmode .cornerSurveyWrapper .cornerSurveyContainer .confirmation .title {
  color: #b3b3b3;
}
.cornerSurveyWrapper .cornerSurveyContainer .confirmation .feedbackLink {
  color: #0c6a93;
}
.darkmode .cornerSurveyWrapper .cornerSurveyContainer .confirmation .feedbackLink {
  color: #68b5f0;
}
.cornerSurveyWrapper.mobile {
  box-shadow: none;
}
.cornerSurveyWrapper.mobile .cornerSurveyContainer {
  background-color: #e0eefb;
  border-color: #8db4d9;
}
.cornerSurveyWrapper.mobile .survey .title {
  color: #272f35;
}
.cornerSurveyWrapper.mobile .confirmation .title {
  color: #49494f;
}
.cornerSurveyWrapper.mobile .timerContainer {
  background-color: #8db4d9;
}

.userFeedbackForm {
  background-color: var(--wl-bg-color, #ffffff);
}
.darkmode .userFeedbackForm {
  background-color: #1c2733;
}
.userFeedbackForm p {
  margin: 0;
}
.userFeedbackForm .header h2 {
  color: var(--wl-h1-color, #272f35);
}
.darkmode .userFeedbackForm .header h2 {
  color: #ffffff;
}
.userFeedbackForm .submitRow button:focus {
  outline: -webkit-focus-ring-color auto 1px;
}
.darkmode .userFeedbackForm .submitRow button:is(textarea, input, button):is(:not(button, input[type=submit], input[type=button])) {
  background-color: #202c39;
}
.darkmode .userFeedbackForm .submitRow button:is(textarea, input, button):focus {
  outline: none;
  box-shadow: 0 0 0 2px #68b5f0;
}
.darkmode .userFeedbackForm .submitRow button:is(select) {
  background-color: #202c39;
}
.darkmode .userFeedbackForm .submitRow button:is(select):focus {
  outline: 2px solid #68b5f0;
}
.userFeedbackForm .submitRow button, .darkmode .userFeedbackForm .submitRow button {
  background-color: var(--wl-signup-bg-color, #f47321);
  color: #ffffff;
  border: 1px solid var(--wl-signup-alt-bg-color, #cd5d26);
  border-radius: 4px;
}
.userFeedbackForm .screenshot {
  border: 1px solid #acacac;
}
.darkmode .userFeedbackForm .screenshot {
  border: 1px solid #b1b1b1;
}
.userFeedbackForm .screenshot .editToggle {
  background-color: rgba(249, 249, 249, 0.9);
  border: 1px solid #acacac;
  color: #49494f;
}
.darkmode .userFeedbackForm .screenshot .editToggle {
  border: 1px solid #2d3e50;
}
.userFeedbackForm .screenshot .editToggle:hover {
  background-color: #fff;
  color: #0471a1;
}
.userFeedbackForm .closeControl {
  background: transparent url(../../tsdefaultassets/close-lightgray.svg?b790c690d4c9) no-repeat center center;
}
.darkmode .userFeedbackForm .closeControl {
  background: transparent url(../../tsdefaultassets/close-dark.svg?6933d007232e) no-repeat center center;
}
.userFeedbackForm .sentimentOption:focus {
  outline: none;
  border-color: transparent;
}
.userFeedbackForm .sentimentOption.selected svg path, .userFeedbackForm .sentimentOption:hover svg path {
  fill: #0b5b7e;
}
.evolveMode .userFeedbackForm .sentimentOption.selected svg path, .evolveMode .userFeedbackForm .sentimentOption:hover svg path {
  fill: var(--text-button-brand);
}
.userFeedbackForm .sentimentOption.selected svg g, .userFeedbackForm .sentimentOption:hover svg g {
  opacity: 1;
}
.darkmode .userFeedbackForm .sentimentOption svg path {
  fill: #d1d1d1;
}
.evolveMode .darkmode .userFeedbackForm .sentimentOption svg path {
  fill: #68b5f0;
}
.darkmode .userFeedbackForm .sentimentOption.selected svg path, .darkmode .userFeedbackForm .sentimentOption:hover svg path {
  fill: #68b5f0;
}
.evolveMode .userFeedbackForm .sentimentOption svg path {
  fill: var(--text-button-neutral);
}
.evolveMode .userFeedbackForm .sentimentOption.selected svg path, .evolveMode .userFeedbackForm .sentimentOption:hover svg path {
  fill: var(--text-button-brand);
}
.userFeedbackForm .feedbackComment:focus {
  outline: -webkit-focus-ring-color auto 1px;
}
.darkmode .userFeedbackForm .feedbackComment:is(textarea, input, button):is(:not(button, input[type=submit], input[type=button])) {
  background-color: #202c39;
}
.darkmode .userFeedbackForm .feedbackComment:is(textarea, input, button):focus {
  outline: none;
  box-shadow: 0 0 0 2px #68b5f0;
}
.darkmode .userFeedbackForm .feedbackComment:is(select) {
  background-color: #202c39;
}
.darkmode .userFeedbackForm .feedbackComment:is(select):focus {
  outline: 2px solid #68b5f0;
}
.userFeedbackForm .feedbackComment {
  border: 1px solid #acacac;
}
.darkmode .userFeedbackForm .feedbackComment {
  border: 1px solid #2d3e50;
  background-color: #1c2733;
  color: #ffffff;
}
.userFeedbackForm .screenShotControl .sscButton {
  background: none;
  color: var(--wl-href-color, #0c6a93);
}
.darkmode .userFeedbackForm .screenShotControl .sscButton {
  color: #68b5f0;
}
.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;
}
.userFeedbackForm .privacyNotice,
.userFeedbackForm .screenShotControl .info {
  color: var(--wl-text-color, #49494f);
}
.darkmode .userFeedbackForm .privacyNotice,
.darkmode .userFeedbackForm .screenShotControl .info {
  color: #b3b3b3;
}

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

.evolveMode .UserFeedbackModal {
  padding: 24px 16px 16px 24px;
  width: 460px;
  left: 50%;
  transform: translateX(-50%);
  box-sizing: border-box;
  border-radius: var(--corner-radius-3xl);
  background: var(--background-others-popup-neutral);
  max-width: 95%;
  box-shadow: 0 0 var(--blur-200) 0 var(--drop-shadow-low);
}
.evolveMode .sentimentOptions {
  width: 304px;
  display: flex;
  gap: 16px;
  justify-content: center;
  margin: 9px auto 23px;
  position: relative;
  padding-right: 8px;
}
.evolveMode .sentimentOption {
  background-color: transparent;
  border-radius: var(--corner-radius-full);
}
.evolveMode .sentimentOption:hover {
  background-color: var(--overlay-button-hover);
}
.evolveMode .sentimentOption.selected {
  background: var(--background-low-brand-secondary);
}
.evolveMode .feedbackLabel {
  color: var(--text-primary);
  font-size: 14px;
  line-height: 20px;
}
.evolveMode .feedbackInput {
  font-family: "UbuntuRegular", Arial, Helvetica, sans-serif;
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--corner-radius-md);
  border: 1px solid var(--border-button-neutral);
  background-color: transparent;
  color: var(--text-primary);
  font-size: 16px;
  line-height: 24px;
  margin-top: 8px;
  outline: none;
}
.evolveMode .feedbackInput::placeholder {
  color: var(--text-light);
}
.evolveMode .feedbackInput:focus {
  outline: none;
  border-color: var(--border-button-focused);
  box-shadow: 0px 0px 0px 1px var(--border-button-focused);
}
.evolveMode .feedbackPrivacyNotice {
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 16px;
  padding-right: 8px;
}
.evolveMode .userFeedbackForm .feedbackAddScreenshotButton {
  color: var(--text-button-brand);
  font-size: 14px;
  line-height: 20px;
}
.evolveMode .userFeedbackForm .screenShotControl .info {
  color: var(--text-secondary);
}
.evolveMode .userFeedbackForm .submitRow {
  padding-top: 8px;
}
.evolveMode .userFeedbackForm .submitRow button {
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-sm) var(--spacing-lg);
  background: var(--background-button-brand-primary);
  font-size: 16px;
  line-height: 24px;
  color: var(--text-button-white);
}
.evolveMode .userFeedbackForm .submitRow button:disabled {
  background: var(--background-button-grey);
}
.darkMode.evolveMode .userFeedbackForm .submitRow button:disabled {
  background: var(--color-grey-90);
}

.evolveMode .userFeedbackForm .feedbackErrorMessage {
  box-sizing: border-box;
  display: flex;
  padding: 15px 15px 15px 56px;
  align-items: center;
  border-radius: var(--corner-radius-lg);
  border: 1px solid var(--border-medium);
  background: var(--background-system-error-light);
  width: 100%;
  font-family: "UbuntuBold", Arial, Helvetica, sans-serif;
  color: var(--text-system-error);
  font-size: 16px;
  line-height: 24px;
  margin-bottom: 24px;
  position: relative;
}
.evolveMode .userFeedbackForm .feedbackErrorMessage::after {
  content: "";
  display: block;
  position: absolute;
  top: 15px;
  left: 15px;
  width: 24px;
  height: 24px;
  margin-right: 16px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-image: url("../../images/warning.svg?35ea8d56f1f9");
}
.darkMode.evolveMode .userFeedbackForm .feedbackErrorMessage::after {
  background-image: url("../../images/warning-dm.svg?35ea8d56f1f9");
}

.evolveMode .userFeedbackForm .feedbackErrorMessage.hidden {
  display: none;
}
.evolveMode .userFeedbackForm .closeControl {
  display: flex;
  width: 40px;
  height: 40px;
  padding: var(--spacing-sm) var(--spacing-lg);
  justify-content: center;
  align-items: center;
  border-radius: var(--corner-radius-full);
  background: transparent url("../../tsdefaultassets/floating-player-close.svg?aa352a6af708") no-repeat center center;
  background-size: 24px;
  outline: none;
  border: 2px solid transparent;
}
.darkMode.evolveMode .userFeedbackForm .closeControl {
  background: transparent url("../../tsdefaultassets/floating-player-close-darkmode.svg?48f7cd32ac5c") no-repeat center center;
  background-size: 24px;
}

.evolveMode .userFeedbackForm .closeControl:focus {
  border-color: var(--border-button-focused);
}
.evolveMode .feedbackSubmittedMessage {
  color: var(--text-primary);
  font-size: 16px;
  line-height: 24px;
}

.roomElement {
  border: 1px solid rgba(100, 100, 100, 0.5);
}
.darkmode .roomElement {
  border: 1px solid #202c39;
}

.roomElementAnchor {
  background-color: #f0f1f1;
}
.darkmode .roomElementAnchor {
  background-color: #202c39;
}
.roomElementAnchor.isHighlighted {
  background-color: #f9eed0;
}
.darkmode .roomElementAnchor.isHighlighted {
  background-color: #885336;
}
.roomElementAnchor:hover {
  color: #f47321;
}
.darkmode .roomElementAnchor:hover {
  color: #f47321;
}

.sub-nav.genderTabs, .sub-nav.followedContainer {
  overflow: hidden;
  position: relative;
  display: block;
  top: 1px;
  margin-top: 2px;
}

.tooltip {
  color: #525252;
  background-color: #ffffff;
  border-color: #efefef;
  box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.08);
}
.tooltip .tooltipCloseButton {
  fill: #a7a7a7;
}
.darkmode .tooltip, .darkMode .tooltip {
  color: #ffffff;
  background-color: #1c2733;
  border-color: #17202a;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.8);
}
.tooltip .divotTop .divotBackground {
  border-bottom-color: #ffffff;
}
.darkmode .tooltip .divotTop .divotBackground, .darkMode .tooltip .divotTop .divotBackground {
  border-bottom-color: #1c2733;
}
.tooltip .divotTop .divotBorder {
  border-bottom-color: #efefef;
}
.darkmode .tooltip .divotTop .divotBorder, .darkMode .tooltip .divotTop .divotBorder {
  border-bottom-color: #17202a;
}
.tooltip .divotBottom .divotBackground {
  border-top-color: #ffffff;
}
.darkmode .tooltip .divotBottom .divotBackground, .darkMode .tooltip .divotBottom .divotBackground {
  border-top-color: #1c2733;
}
.tooltip .divotBottom .divotBorder {
  border-top-color: #efefef;
}
.darkmode .tooltip .divotBottom .divotBorder, .darkMode .tooltip .divotBottom .divotBorder {
  border-top-color: #17202a;
}
.tooltip .divotLeft .divotBackground {
  border-right-color: #ffffff;
}
.darkmode .tooltip .divotLeft .divotBackground, .darkMode .tooltip .divotLeft .divotBackground {
  border-right-color: #1c2733;
}
.tooltip .divotLeft .divotBorder {
  border-right-color: #efefef;
}
.darkmode .tooltip .divotLeft .divotBorder, .darkMode .tooltip .divotLeft .divotBorder {
  border-right-color: #17202a;
}
.tooltip .divotRight .divotBackground {
  border-left-color: #ffffff;
}
.darkmode .tooltip .divotRight .divotBackground, .darkMode .tooltip .divotRight .divotBackground {
  border-left-color: #1c2733;
}
.tooltip .divotRight .divotBorder {
  border-left-color: #efefef;
}
.darkmode .tooltip .divotRight .divotBorder, .darkMode .tooltip .divotRight .divotBorder {
  border-left-color: #17202a;
}

.onlineRoomsTitle,
.recommendedRoomsTitle {
  color: #494949;
}
.darkmode .onlineRoomsTitle,
.darkmode .recommendedRoomsTitle {
  color: #b3b3b3;
}

.followedDropdown.collapsed {
  left: calc(50vw - 197px);
}

.followedContainer {
  width: 314px;
  max-height: 450px;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
  box-sizing: border-box;
  padding: 8px;
  border-radius: 4px 4px 4px 4px;
  -webkit-border-radius: 4px 4px 4px 4px;
}

.followRecommendedContainer {
  -webkit-border-radius: 4px;
  border-radius: 4px;
  box-sizing: border-box;
  max-height: 480px;
  overflow: hidden auto;
  padding: 8px;
  position: relative;
  width: 350px;
}
.followRecommendedContainer .roomElementAnchor.notHighlighted {
  background-color: transparent;
}
.darkmode .followRecommendedContainer .roomElementAnchor.notHighlighted {
  background-color: #202c39;
}

.followRoomTable {
  display: inline-block;
  overflow: hidden;
}

.recommendationsBorder {
  background-color: #e2e2e2;
  height: 1px;
  margin-bottom: 4px;
}
.darkmode .recommendationsBorder {
  background-color: #2a323f;
}

.followRecommendedHeader {
  margin: 5px 3px;
  width: 100%;
}
.followRecommendedHeader .roomElement {
  display: inline-block !important;
}

.followedContainer {
  color: #0c6a93;
}
.darkmode .followedContainer {
  color: #b3b3b3;
}
.followedContainer .followedCount {
  color: #525252;
  font-family: "UbuntuRegular", Arial, Helvetica, sans-serif;
}
.darkmode .followedContainer .followedCount {
  color: #b3b3b3;
}

#followed_anchor.followed-header.orange:after {
  display: inline-block;
  content: "";
  position: relative;
  height: 8px;
  width: 8px;
  top: -8px;
  right: 2px;
  background-image: url(../../tsdefaultassets/orange_dot.svg?d12655f82ca4);
  background-position: center;
  background-repeat: no-repeat;
}

#followed_anchor.followed-header.orange.text:after {
  content: var(--unseen-follow-count, "");
  height: 13px;
  min-width: 13px;
  width: auto;
  padding: 0 4px 1px;
  top: -8px;
  right: 0;
  background-image: none;
  background-color: #f47321;
  border-radius: 8px;
  font-family: "UbuntuBold", Arial, Helvetica, sans-serif;
  font-size: 11px;
  text-align: center;
  text-shadow: none;
}

.followedDropdown {
  border: 1px solid #8bb3da;
  border-radius: 0 4px 4px;
  background-color: white;
  color: #0c6a93;
}
.darkmode .followedDropdown {
  color: #b3b3b3;
  background-color: #17202a;
  border-color: #2d3e50;
}

.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: #17202a;
  border: none;
}
.modalAlert .dialog .dialogForm {
  background-color: #f9f9f9;
  border-top-color: #cccccc;
}
.darkmode .modalAlert .dialog .dialogForm {
  background-color: #1c2733;
  border-top-color: #2a323f;
}
.modalAlert .dialog .dialogForm .accept:focus {
  outline: -webkit-focus-ring-color auto 1px;
}
.darkmode .modalAlert .dialog .dialogForm .accept:is(textarea, input, button):is(:not(button, input[type=submit], input[type=button])) {
  background-color: #202c39;
}
.darkmode .modalAlert .dialog .dialogForm .accept:is(textarea, input, button):focus {
  outline: none;
  box-shadow: 0 0 0 2px #68b5f0;
}
.darkmode .modalAlert .dialog .dialogForm .accept:is(select) {
  background-color: #202c39;
}
.darkmode .modalAlert .dialog .dialogForm .accept:is(select):focus {
  outline: 2px solid #68b5f0;
}
.modalAlert .dialog .dialogForm .accept, .darkmode .modalAlert .dialog .dialogForm .accept {
  background-color: #0c6a93;
  color: #ffffff;
  border: 1px solid #0c6a93;
  border-radius: 4px;
}
.modalAlert .dialog .dialogForm .decline:focus {
  outline: -webkit-focus-ring-color auto 1px;
}
.darkmode .modalAlert .dialog .dialogForm .decline:is(textarea, input, button):is(:not(button, input[type=submit], input[type=button])) {
  background-color: #202c39;
}
.darkmode .modalAlert .dialog .dialogForm .decline:is(textarea, input, button):focus {
  outline: none;
  box-shadow: 0 0 0 2px #68b5f0;
}
.darkmode .modalAlert .dialog .dialogForm .decline:is(select) {
  background-color: #202c39;
}
.darkmode .modalAlert .dialog .dialogForm .decline:is(select):focus {
  outline: 2px solid #68b5f0;
}
.modalAlert .dialog .dialogForm .decline {
  background-color: transparent;
  color: #494949;
  border: 1px solid #6c6c6c;
  border-radius: 4px;
}
.darkmode .modalAlert .dialog .dialogForm .decline {
  color: #b3b3b3;
  border: 1px solid #b3b3b3;
}

.subgenderModal {
  color: #525252;
}
.darkmode .subgenderModal {
  color: #b3b3b3;
}

.ButtonColor-blue:focus {
  outline: -webkit-focus-ring-color auto 1px;
}
.darkmode .ButtonColor-blue:is(textarea, input, button):is(:not(button, input[type=submit], input[type=button])) {
  background-color: #202c39;
}
.darkmode .ButtonColor-blue:is(textarea, input, button):focus {
  outline: none;
  box-shadow: 0 0 0 2px #68b5f0;
}
.darkmode .ButtonColor-blue:is(select) {
  background-color: #202c39;
}
.darkmode .ButtonColor-blue:is(select):focus {
  outline: 2px solid #68b5f0;
}
.ButtonColor-blue, .darkmode .ButtonColor-blue {
  background-color: #0c6a93;
  color: #ffffff;
  border: 1px solid #0c6a93;
  border-radius: 4px;
}

.ButtonColor-orange:focus {
  outline: -webkit-focus-ring-color auto 1px;
}
.darkmode .ButtonColor-orange:is(textarea, input, button):is(:not(button, input[type=submit], input[type=button])) {
  background-color: #202c39;
}
.darkmode .ButtonColor-orange:is(textarea, input, button):focus {
  outline: none;
  box-shadow: 0 0 0 2px #68b5f0;
}
.darkmode .ButtonColor-orange:is(select) {
  background-color: #202c39;
}
.darkmode .ButtonColor-orange:is(select):focus {
  outline: 2px solid #68b5f0;
}
.ButtonColor-orange, .darkmode .ButtonColor-orange {
  background-color: var(--wl-signup-bg-color, #f47321);
  color: #ffffff;
  border: 1px solid var(--wl-signup-alt-bg-color, #cd5d26);
  border-radius: 4px;
}

.ButtonColor-green:focus {
  outline: -webkit-focus-ring-color auto 1px;
}
.darkmode .ButtonColor-green:is(textarea, input, button):is(:not(button, input[type=submit], input[type=button])) {
  background-color: #202c39;
}
.darkmode .ButtonColor-green:is(textarea, input, button):focus {
  outline: none;
  box-shadow: 0 0 0 2px #68b5f0;
}
.darkmode .ButtonColor-green:is(select) {
  background-color: #202c39;
}
.darkmode .ButtonColor-green:is(select):focus {
  outline: 2px solid #68b5f0;
}
.ButtonColor-green, .darkmode .ButtonColor-green {
  background-color: #009900;
  color: #ffffff;
  border: 1px solid #288a09;
  border-radius: 4px;
}

.ButtonColor-red:focus {
  outline: -webkit-focus-ring-color auto 1px;
}
.darkmode .ButtonColor-red:is(textarea, input, button):is(:not(button, input[type=submit], input[type=button])) {
  background-color: #202c39;
}
.darkmode .ButtonColor-red:is(textarea, input, button):focus {
  outline: none;
  box-shadow: 0 0 0 2px #68b5f0;
}
.darkmode .ButtonColor-red:is(select) {
  background-color: #202c39;
}
.darkmode .ButtonColor-red:is(select):focus {
  outline: 2px solid #68b5f0;
}
.ButtonColor-red, .darkmode .ButtonColor-red {
  background-color: #eb3404;
  color: #ffffff;
  border: 1px solid #eb3404;
  border-radius: 4px;
}

.ButtonColor-text:focus {
  outline: -webkit-focus-ring-color auto 1px;
}
.darkmode .ButtonColor-text:is(textarea, input, button):is(:not(button, input[type=submit], input[type=button])) {
  background-color: #202c39;
}
.darkmode .ButtonColor-text:is(textarea, input, button):focus {
  outline: none;
  box-shadow: 0 0 0 2px #68b5f0;
}
.darkmode .ButtonColor-text:is(select) {
  background-color: #202c39;
}
.darkmode .ButtonColor-text:is(select):focus {
  outline: 2px solid #68b5f0;
}
.ButtonColor-text {
  background-color: transparent;
  color: #494949;
  border: none;
}
.darkmode .ButtonColor-text {
  color: #b3b3b3;
}
.ButtonColor-text:hover {
  text-decoration: underline;
}
.ButtonColor-text--tab-focus-only:focus {
  outline: none;
}
.ButtonColor-text--tab-focus-only:focus-visible {
  outline: -webkit-focus-ring-color auto 1px;
}

.ButtonColor-clear:focus {
  outline: -webkit-focus-ring-color auto 1px;
}
.darkmode .ButtonColor-clear:is(textarea, input, button):is(:not(button, input[type=submit], input[type=button])) {
  background-color: #202c39;
}
.darkmode .ButtonColor-clear:is(textarea, input, button):focus {
  outline: none;
  box-shadow: 0 0 0 2px #68b5f0;
}
.darkmode .ButtonColor-clear:is(select) {
  background-color: #202c39;
}
.darkmode .ButtonColor-clear:is(select):focus {
  outline: 2px solid #68b5f0;
}
.ButtonColor-clear {
  background-color: transparent;
  color: #494949;
  border: 1px solid #6c6c6c;
  border-radius: 4px;
}
.darkmode .ButtonColor-clear {
  color: #b3b3b3;
  border: 1px solid #b3b3b3;
}

.ButtonColor-clearBlue:focus {
  outline: -webkit-focus-ring-color auto 1px;
}
.darkmode .ButtonColor-clearBlue:is(textarea, input, button):is(:not(button, input[type=submit], input[type=button])) {
  background-color: #202c39;
}
.darkmode .ButtonColor-clearBlue:is(textarea, input, button):focus {
  outline: none;
  box-shadow: 0 0 0 2px #68b5f0;
}
.darkmode .ButtonColor-clearBlue:is(select) {
  background-color: #202c39;
}
.darkmode .ButtonColor-clearBlue:is(select):focus {
  outline: 2px solid #68b5f0;
}
.ButtonColor-clearBlue {
  background-color: transparent;
  color: #0c6a93;
  border: 1px solid #0c6a93;
  border-radius: 4px;
}

body.darkmode {
  background-color: #17202a;
}
body.darkmode #main {
  color: #b3b3b3;
}

.textColor {
  color: #494949;
}
.darkmode .textColor {
  color: rgb(179, 179, 179);
}

.titleColor {
  color: #222222;
}
.darkmode .titleColor {
  color: #ffffff;
}

.brandColor {
  color: #f47321;
}

.brandBlue {
  color: #0c6a93;
}

.textBodySecondary {
  color: #a7a7a7;
}
.darkmode .textBodySecondary {
  color: #6e6f70;
}

.bgColor {
  background-color: #ffffff;
}
.darkmode .bgColor {
  background-color: rgb(42, 44, 48);
}

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

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

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

.tabBorder.tabBorderNoHover:hover {
  border-bottom: 1px solid #8bb3da;
}
.darkmode .tabBorder.tabBorderNoHover:hover {
  border-bottom: 1px solid rgb(102, 102, 102);
}

.tabInactiveBgColor {
  background-color: #dde9f5;
}
.darkmode .tabInactiveBgColor {
  background-color: rgb(42, 44, 48);
}

.tabInactiveColor {
  color: #0c6a93;
}
.darkmode .tabInactiveColor {
  color: #68b5f0;
}

.tabActiveBgColor,
.tabInactiveBgColor:hover {
  background-color: #ffffff;
}
.darkmode .tabActiveBgColor,
.darkmode .tabInactiveBgColor:hover {
  background-color: #17202a;
}

.tabActiveColor,
.tabInactiveColor:hover {
  color: #f47321;
}

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

.defaultColor {
  color: var(--wl-text-color, #494949);
}
.darkmode .defaultColor {
  color: #b3b3b3;
}

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

.roomSubjectToolTipColor {
  color: #494949;
}
.darkmode .roomSubjectToolTipColor {
  color: rgb(179, 179, 179);
}

.hrefColor {
  color: var(--wl-href-color, #0c6a93);
}
.darkmode .hrefColor {
  color: #68b5f0;
}

.supportSuccess {
  color: #288a09;
}
.darkmode .supportSuccess {
  color: #288a09;
}

.supportError {
  color: #cc0000;
}
.darkmode .supportError {
  color: #dc0000;
}

.tagFontColor,
.whiteFontColor {
  color: #ffffff;
}

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

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

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

.tagPrivateGroupColor {
  background-color: #b60a42;
}

.tagGamingColor {
  background-color: #7f26b1;
}

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

.camBgColor {
  background-color: #f0f1f1;
}
.darkmode .camBgColor {
  background-color: #202c39;
  box-shadow: 0px 0px 32px rgba(0, 0, 0, 0.32);
}

.camBorderColor {
  color: #acacac;
}
.darkmode .camBorderColor {
  color: #202c39;
}

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

.camSubjectTagColor {
  color: #0c6a93;
}
.darkmode .camSubjectTagColor {
  color: #68b5f0;
}

.camAltTextColor {
  color: #575757;
}
.darkmode .camAltTextColor {
  color: #6e6f70;
}

.camHrefColor,
.list .title a {
  color: #0c6a93;
}
.darkmode .camHrefColor,
.darkmode .list .title a {
  color: #68b5f0;
}

.transparentBg {
  background: transparent;
}

.nextCamBgColor {
  background: #fceadb;
}
.darkmode .nextCamBgColor {
  background: #2a323f;
}

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

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

.contentBgColor:hover {
  border-bottom-color: #ffffff;
}
.darkmode .contentBgColor:hover {
  border-bottom-color: rgb(32, 34, 35);
}

.overlayOpacity {
  background-color: #000 !important;
  opacity: 0.85;
}
.evolveMode .overlayOpacity {
  background-color: var(--overlay-backdrop-popup) !important;
}

.dismissibleMessageColor {
  color: #49494f;
}
.darkMode .dismissibleMessageColor, .darkmode .dismissibleMessageColor {
  color: #b3b3b3;
}

#header #user_information .userInfoDropdownBgColor {
  background-color: #3c87ba;
}
.darkmode #header #user_information .userInfoDropdownBgColor {
  background-color: #1c2733;
}
#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: #2c6990;
}
.darkmode #header #user_information .userInfoDropdownHighlightColor:hover {
  background-color: #885336;
}

.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/templates/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: "#0C6A93", ---- DONE
----tabBorderColor: "#8bb3da",---- DONE
----tabActiveColor: "#ffffff", ---- DONE
----tabInactiveColor: "#dde9f5", ---- DONE
----tabActiveFontColor: "#f47321", ---- DONE
----tabInactiveFontColor: "#0C6A93", ---- DONE
----tagExhibColor: "#6D85B5", ---- DONE
----tagFontColor: "#FFF", ---- DONE
----tagLineColor: "#0C6A93", ---- DONE
----tagOfflineColor: "#4F4F4F", ---- DONE
----tagPrivateGroupColor: "#B60A42", ---- DONE
----contentBgColor: "#FFFFFF", ---- DONE
----camBgColor: "#F0F1F1", ---- DONE
----camBorderColor: "#ACACAC", ---- DONE
----camSubjectColor: "#000", ---- DONE
----camSubjectTagColor: "#0C6A93", ---- DONE
----camAltTextColor: "#575757", ---- DONE
----camHrefColor: "#0C6A93", ---- DONE
tokenHrefColor: "#e45900",
footerHrefColor: "#676767",
footerTextColor: "#494949",
copyrightTextColor: "#494949",
userInfoBgColor: "#e9e9e9",
usernameColor: "#ffffff",
----nextCamBgColor: "#FCEADB", ---- DONE
footerColNameColor: "#494949",
footerRowColor: "#0C6A93",
footerSiteNavColor: "#f47321",
----chatAreaTabColor: "#4C4C4C", ---- DONE
----roomSubjectToolTipColor: "#494949", ---- DONE
loginOverlayColor: "#000000",
----dismissibleMessageColor: "#494949", ---- DONE
----userInfoDropdownBgColor: "#3C87BA", ---- DONE
----userInfoDropdownHighlightColor: "#f47321", ---- DONE
----userInfoDropdownTextColor: "#ffffff", ---- DONE
signupBgColor: "#f47321",
 */
.sendTip .buttons:focus {
  outline: -webkit-focus-ring-color auto 1px;
}
.darkmode .sendTip .buttons:is(textarea, input, button):is(:not(button, input[type=submit], input[type=button])) {
  background-color: #202c39;
}
.darkmode .sendTip .buttons:is(textarea, input, button):focus {
  outline: none;
  box-shadow: 0 0 0 2px #68b5f0;
}
.darkmode .sendTip .buttons:is(select) {
  background-color: #202c39;
}
.darkmode .sendTip .buttons:is(select):focus {
  outline: 2px solid #68b5f0;
}
.sendTip .buttons, .darkmode .sendTip .buttons {
  background-color: var(--wl-signup-bg-color, #f47321);
  color: #ffffff;
  border: 1px solid var(--wl-signup-alt-bg-color, #cd5d26);
  border-radius: 4px;
}
.darkmode .sendTip .buttons:focus {
  outline: -webkit-focus-ring-color auto 1px;
}
.darkmode .darkmode .sendTip .buttons:is(textarea, input, button):is(:not(button, input[type=submit], input[type=button])) {
  background-color: #202c39;
}
.darkmode .darkmode .sendTip .buttons:is(textarea, input, button):focus {
  outline: none;
  box-shadow: 0 0 0 2px #68b5f0;
}
.darkmode .darkmode .sendTip .buttons:is(select) {
  background-color: #202c39;
}
.darkmode .darkmode .sendTip .buttons:is(select):focus {
  outline: 2px solid #68b5f0;
}
.darkmode .sendTip .buttons, .darkmode .darkmode .sendTip .buttons {
  background-color: var(--wl-signup-bg-color, #f47321);
  color: #ffffff;
  border: 1px solid var(--wl-signup-alt-bg-color, #cd5d26);
  border-radius: 4px;
}
.sendTip .buttons.disabled {
  color: #cccccc;
  background-color: #888888;
}
.sendTip .buttons.mobile {
  background: linear-gradient(#87c667, #53843a);
}
.sendTip .buttons.mobile.disabled {
  background: linear-gradient(#b5b5b5, #6c6c78);
}
.sendTip .menu {
  background-color: #ffffff;
  box-shadow: 0 1px 5px #333;
}
.darkmode .sendTip .menu {
  background-color: #202c39;
  box-shadow: 0px 0px 32px rgba(0, 0, 0, 0.32);
}
.sendTip .menu .menuItem {
  border-color: #c9cbcc;
  color: #000000;
}
.darkmode .sendTip .menu .menuItem {
  border-color: #2d3e50;
  color: #ffffff;
}
.sendTip .menu .menuItem.disabled {
  color: #aaaaaa;
}
.darkmode .sendTip .menu .menuItem.disabled {
  color: #6e6f70;
}
.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/white-checkmark.svg?8979b55ff488) no-repeat 8px 45%;
}
.sendTip .menu .menuItem:hover {
  border-color: #767b7d;
  text-shadow: #aaaaaa 0 0 0;
}

.notificationsModal {
  background-color: #e0e0e0;
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.75);
  color: #494949;
}
.darkmode .notificationsModal {
  color: #6e6f70;
  background-color: #202c39;
  border: 1px solid #2a323f;
  box-shadow: 0px 0px 32px rgba(0, 0, 0, 0.32);
}
.notificationsModal .divotTop .divotBackground {
  border-bottom-color: #e0e0e0;
}
.darkmode .notificationsModal .divotTop .divotBackground {
  border-bottom-color: #202c39;
}
.notificationsModal .divotTop .divotBorder {
  border-bottom-color: #e0e0e0;
}
.darkmode .notificationsModal .divotTop .divotBorder {
  border-bottom-color: #2a323f;
}
.notificationsModal .title {
  color: #0c6a93;
}
.darkmode .notificationsModal .title {
  color: #ffffff;
}
.notificationsModal .confirmButton:focus {
  outline: -webkit-focus-ring-color auto 1px;
}
.darkmode .notificationsModal .confirmButton:is(textarea, input, button):is(:not(button, input[type=submit], input[type=button])) {
  background-color: #202c39;
}
.darkmode .notificationsModal .confirmButton:is(textarea, input, button):focus {
  outline: none;
  box-shadow: 0 0 0 2px #68b5f0;
}
.darkmode .notificationsModal .confirmButton:is(select) {
  background-color: #202c39;
}
.darkmode .notificationsModal .confirmButton:is(select):focus {
  outline: 2px solid #68b5f0;
}
.notificationsModal .confirmButton, .darkmode .notificationsModal .confirmButton {
  background-color: #0c6a93;
  color: #ffffff;
  border: 1px solid #0c6a93;
  border-radius: 4px;
}
.notificationsModal .denyButton:focus {
  outline: -webkit-focus-ring-color auto 1px;
}
.darkmode .notificationsModal .denyButton:is(textarea, input, button):is(:not(button, input[type=submit], input[type=button])) {
  background-color: #202c39;
}
.darkmode .notificationsModal .denyButton:is(textarea, input, button):focus {
  outline: none;
  box-shadow: 0 0 0 2px #68b5f0;
}
.darkmode .notificationsModal .denyButton:is(select) {
  background-color: #202c39;
}
.darkmode .notificationsModal .denyButton:is(select):focus {
  outline: 2px solid #68b5f0;
}
.notificationsModal .denyButton {
  background-color: transparent;
  color: #494949;
  border: none;
}
.darkmode .notificationsModal .denyButton {
  color: #b3b3b3;
}
.notificationsModal .denyButton:hover {
  text-decoration: underline;
}

.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: #17202a;
  border: none;
}
.modalAlert .dialog .dialogForm {
  background-color: #f9f9f9;
  border-top-color: #cccccc;
}
.darkmode .modalAlert .dialog .dialogForm {
  background-color: #1c2733;
  border-top-color: #2a323f;
}
.modalAlert .dialog .dialogForm .accept:focus {
  outline: -webkit-focus-ring-color auto 1px;
}
.darkmode .modalAlert .dialog .dialogForm .accept:is(textarea, input, button):is(:not(button, input[type=submit], input[type=button])) {
  background-color: #202c39;
}
.darkmode .modalAlert .dialog .dialogForm .accept:is(textarea, input, button):focus {
  outline: none;
  box-shadow: 0 0 0 2px #68b5f0;
}
.darkmode .modalAlert .dialog .dialogForm .accept:is(select) {
  background-color: #202c39;
}
.darkmode .modalAlert .dialog .dialogForm .accept:is(select):focus {
  outline: 2px solid #68b5f0;
}
.modalAlert .dialog .dialogForm .accept, .darkmode .modalAlert .dialog .dialogForm .accept {
  background-color: #0c6a93;
  color: #ffffff;
  border: 1px solid #0c6a93;
  border-radius: 4px;
}
.modalAlert .dialog .dialogForm .decline:focus {
  outline: -webkit-focus-ring-color auto 1px;
}
.darkmode .modalAlert .dialog .dialogForm .decline:is(textarea, input, button):is(:not(button, input[type=submit], input[type=button])) {
  background-color: #202c39;
}
.darkmode .modalAlert .dialog .dialogForm .decline:is(textarea, input, button):focus {
  outline: none;
  box-shadow: 0 0 0 2px #68b5f0;
}
.darkmode .modalAlert .dialog .dialogForm .decline:is(select) {
  background-color: #202c39;
}
.darkmode .modalAlert .dialog .dialogForm .decline:is(select):focus {
  outline: 2px solid #68b5f0;
}
.modalAlert .dialog .dialogForm .decline {
  background-color: transparent;
  color: #494949;
  border: 1px solid #6c6c6c;
  border-radius: 4px;
}
.darkmode .modalAlert .dialog .dialogForm .decline {
  color: #b3b3b3;
  border: 1px solid #b3b3b3;
}

.subgenderModal {
  color: #525252;
}
.darkmode .subgenderModal {
  color: #b3b3b3;
}

.rulesModal {
  background-color: white;
  box-shadow: 0 0 10px #888;
  border-color: #efefef;
  color: #494940;
  flex-direction: column;
}
.rulesModal > * {
  flex-shrink: 0;
}
.rulesModal .rulesTextContainer {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}
.rulesModal .rulesText {
  flex: 1 1 auto;
  min-height: 0;
}
.rulesModal > .acceptRulesButton {
  align-self: center;
}
.rulesModal .rulesModal__languagePill {
  background-color: #f1f1f1;
  border-radius: 4px;
  box-sizing: border-box;
  display: block;
  font-size: 12px;
  margin: 0 0 8px;
  padding: 4px 8px;
  text-align: left;
  text-align: left;
  width: 100%;
}
.darkmode .rulesModal .rulesModal__languagePill {
  background-color: #37414b;
  color: #b3b3b3;
}
.darkmode .rulesModal {
  background-color: #1c2733;
  border-color: #17202a;
  box-shadow: 0px 0px 32px rgba(0, 0, 0, 0.32);
  color: #b3b3b3;
}
.rulesModal .closeRulesButton:focus {
  outline: -webkit-focus-ring-color auto 1px;
}
.darkmode .rulesModal .closeRulesButton:is(textarea, input, button):is(:not(button, input[type=submit], input[type=button])) {
  background-color: #202c39;
}
.darkmode .rulesModal .closeRulesButton:is(textarea, input, button):focus {
  outline: none;
  box-shadow: 0 0 0 2px #68b5f0;
}
.darkmode .rulesModal .closeRulesButton:is(select) {
  background-color: #202c39;
}
.darkmode .rulesModal .closeRulesButton:is(select):focus {
  outline: 2px solid #68b5f0;
}
.rulesModal .closeRulesButton {
  background: none;
  border-radius: 0;
  border: none;
}
.darkmode .rulesModal .closeRulesButton {
  background-color: transparent;
}
.rulesModal .acceptRulesButton:focus {
  outline: -webkit-focus-ring-color auto 1px;
}
.darkmode .rulesModal .acceptRulesButton:is(textarea, input, button):is(:not(button, input[type=submit], input[type=button])) {
  background-color: #202c39;
}
.darkmode .rulesModal .acceptRulesButton:is(textarea, input, button):focus {
  outline: none;
  box-shadow: 0 0 0 2px #68b5f0;
}
.darkmode .rulesModal .acceptRulesButton:is(select) {
  background-color: #202c39;
}
.darkmode .rulesModal .acceptRulesButton:is(select):focus {
  outline: 2px solid #68b5f0;
}
.rulesModal .acceptRulesButton, .darkmode .rulesModal .acceptRulesButton {
  background-color: var(--wl-signup-bg-color, #f47321);
  color: #ffffff;
  border: 1px solid var(--wl-signup-alt-bg-color, #cd5d26);
  border-radius: 4px;
}
.rulesModal .scrollIndicator {
  background: linear-gradient(0deg, white 0%, rgba(255, 255, 255, 0) 100%);
}
.darkmode .rulesModal .scrollIndicator {
  background: linear-gradient(0deg, rgb(32, 34, 35) 0%, rgba(32, 34, 35, 0) 100%);
}

.evolveMode.rulesModal {
  background: var(--background-others-popup-neutral);
  border-color: transparent;
  border-radius: var(--spacing-xl);
  box-shadow: 0 0 var(--blur-200) 0 var(--drop-shadow-low);
  box-sizing: border-box;
  color: var(--text-primary);
  pointer-events: unset;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}
.evolveMode.rulesModal .rulesModal__heading {
  align-items: center;
  display: flex;
  gap: var(--spacing-sm);
  justify-content: space-between;
  flex-shrink: 0;
}
.evolveMode.rulesModal .rulesModal__heading .rulesModal__title {
  font-size: 1.14em;
  height: 100%;
  overflow: hidden;
  text-align: start;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.evolveMode.rulesModal .rulesModal__heading .closeRulesButton {
  box-sizing: border-box;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  border-radius: var(--corner-radius-full);
  border: 0;
  cursor: pointer;
  position: relative;
  font-family: "UbuntuRegular", Arial, Helvetica, sans-serif;
  font-size: 14px;
  line-height: 20px;
}
.evolveMode.rulesModal .rulesModal__heading .closeRulesButton:focus-visible {
  outline: 2px solid var(--border-button-focused);
  outline-offset: 2px;
}
.evolveMode.rulesModal .rulesModal__heading .closeRulesButton:disabled {
  color: var(--text-button-neutral-disabled);
  cursor: not-allowed;
}
.evolveMode.rulesModal .rulesModal__heading .closeRulesButton {
  color: var(--text-button-neutral);
  background-color: var(--background-button-neutral-transparent);
  box-shadow: inset 0 0 0 1px var(--border-button-neutral);
}
.evolveMode.rulesModal .rulesModal__heading .closeRulesButton:hover:not(:disabled) {
  background-image: linear-gradient(0deg, var(--overlay-button-hover) 0%, var(--overlay-button-hover) 100%);
}
.evolveMode.rulesModal .rulesModal__heading .closeRulesButton:active:not(:disabled) {
  background-image: linear-gradient(0deg, var(--overlay-button-press) 0%, var(--overlay-button-press) 100%);
}
.evolveMode.rulesModal .rulesModal__heading .closeRulesButton:disabled {
  background-color: var(--background-button-neutral-transparent);
}
.evolveMode.rulesModal .rulesModal__heading .closeRulesButton {
  background-color: transparent;
  backdrop-filter: unset;
  border: none;
  box-shadow: none;
  color: var(--text-primary);
  height: fit-content;
  padding: 6px;
  flex: 0 0 auto;
}
.evolveMode.rulesModal .rulesModal__buttonContainer {
  display: flex;
  gap: var(--spacing-sm);
  flex-direction: row-reverse;
  flex-shrink: 0;
}
.evolveMode.rulesModal .rulesModal__buttonContainer .acceptRulesButton {
  box-sizing: border-box;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  border-radius: var(--corner-radius-full);
  border: 0;
  cursor: pointer;
  position: relative;
  font-family: "UbuntuRegular", Arial, Helvetica, sans-serif;
  font-size: 14px;
  line-height: 20px;
}
.evolveMode.rulesModal .rulesModal__buttonContainer .acceptRulesButton:focus-visible {
  outline: 2px solid var(--border-button-focused);
  outline-offset: 2px;
}
.evolveMode.rulesModal .rulesModal__buttonContainer .acceptRulesButton:disabled {
  color: var(--text-button-neutral-disabled);
  cursor: not-allowed;
}
.evolveMode.rulesModal .rulesModal__buttonContainer .acceptRulesButton {
  background-color: var(--background-button-brand-primary);
  color: var(--text-button-white);
}
.evolveMode.rulesModal .rulesModal__buttonContainer .acceptRulesButton:hover:not(:disabled) {
  background-image: linear-gradient(0deg, var(--overlay-button-hover-bright) 0%, var(--overlay-button-hover-bright) 100%);
}
.evolveMode.rulesModal .rulesModal__buttonContainer .acceptRulesButton:active:not(:disabled) {
  background-image: linear-gradient(0deg, var(--overlay-button-press) 0%, var(--overlay-button-press) 100%);
}
.evolveMode.rulesModal .rulesModal__buttonContainer .acceptRulesButton:disabled {
  color: var(--text-button-primary-disabled);
  background-color: var(--background-button-grey);
}
.evolveMode.rulesModal .rulesModal__buttonContainer .acceptRulesButton {
  padding: 6px var(--spacing-md);
  gap: var(--spacing-xs);
  font-family: "UbuntuRegular", Arial, Helvetica, sans-serif;
  font-size: 14px;
  line-height: 20px;
  flex: 0 1 auto;
  font-size: unset;
  line-height: 1.2;
  height: auto;
  min-width: 0;
  z-index: 2;
}
.evolveMode.rulesModal .rulesModal__buttonContainer .acceptRulesButton span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.evolveMode.rulesModal .rulesModal__body {
  box-sizing: border-box;
  color: var(--text-primary);
  font-size: inherit;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  padding: var(--spacing-lg);
  flex: 1 1 auto;
  min-height: 0;
}
.evolveMode.rulesModal .rulesModal__body .rulesModal__content {
  font-size: 1em;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  flex: inherit;
  min-height: inherit;
}
.evolveMode.rulesModal .rulesModal__body .rulesModal__languagePill {
  background: var(--background-others-popup-neutral-light-contrast, #f3f3f3);
  border-radius: var(--corner-radius-md, 12px);
  box-sizing: border-box;
  color: var(--text-secondary);
  display: block;
  font-size: 0.875em;
  padding: var(--spacing-sm) var(--spacing-md);
  text-align: start;
  width: 100%;
  flex-shrink: 0;
}
.evolveMode.rulesModal .rulesModal__body .rulesModal__languagePill strong {
  color: var(--text-primary);
  font-weight: 600;
}
.evolveMode.rulesModal .rulesModal__body .scrollIndicator {
  background: linear-gradient(0deg, var(--background-neutral) 0%, rgba(255, 255, 255, 0) 100%);
}

.languagePreferenceToast {
  align-items: center;
  background: #f1f1f1;
  border-radius: 8px;
  box-shadow: 0 0 20px 0 rgba(16, 16, 16, 0.2);
  box-sizing: border-box;
  color: #494940;
  display: flex;
  font-size: 12px;
  gap: 8px;
  justify-content: space-between;
  margin: 0 8px;
  padding: 8px 12px;
}
.darkmode .languagePreferenceToast {
  background: #37414b;
  box-shadow: 0 0 20px 0 rgba(16, 16, 16, 0.88);
  color: #d6d6d6;
}
.languagePreferenceToast .languagePreferenceToast__text strong {
  color: inherit;
  font-weight: 600;
}
.languagePreferenceToast .languagePreferenceToast__closeButton {
  background: none;
  border: none;
  cursor: pointer;
  line-height: 0;
  padding: 0;
}
.darkmode .languagePreferenceToast .languagePreferenceToast__closeButton {
  background-color: transparent;
}

.evolveMode.languagePreferenceToast {
  background: var(--background-low-contrast);
  border-radius: var(--spacing-lg);
  box-shadow: 0 0 var(--blur-300, 20px) 0 var(--drop-shadow-medium, rgba(16, 16, 16, 0.88));
  color: var(--text-secondary);
  margin: 0 var(--spacing-lg);
  padding: var(--spacing-lg);
}
.evolveMode.languagePreferenceToast .languagePreferenceToast__text {
  flex: 1;
  font-size: 0.875em;
}
.evolveMode.languagePreferenceToast .languagePreferenceToast__text strong {
  color: var(--text-primary);
  font-weight: 600;
}
.evolveMode.languagePreferenceToast .languagePreferenceToast__closeButton {
  color: var(--text-primary);
  flex: 0 0 auto;
  height: fit-content;
}

.userUpdatesPanel .twitterUpdateRow {
  background-color: #ffe5be;
  border-color: #dabb95;
}
.darkmode .userUpdatesPanel .twitterUpdateRow {
  background-color: #885336;
  border-color: #2a323f;
}
.userUpdatesPanel .twitterUpdateRow.uipExp {
  background-color: #fff;
  border-color: #f0f0f0;
}
.darkmode .userUpdatesPanel .twitterUpdateRow.uipExp {
  background-color: #2a2c2e;
  border-color: #1a1a1b;
}
.userUpdatesPanel .twitterUpdateRow .contentSection {
  color: #494949;
}
.darkmode .userUpdatesPanel .twitterUpdateRow .contentSection {
  color: #ffffff;
}
.userUpdatesPanel .twitterUpdateRow .timeSince {
  color: #7f7f7f;
}
.darkmode .userUpdatesPanel .twitterUpdateRow .timeSince {
  color: #b3b3b3;
}
.userUpdatesPanel .twitterUpdateRow .twitterLink,
.userUpdatesPanel .twitterUpdateRow .tweetLink {
  color: #f47321;
}
.darkmode .userUpdatesPanel .twitterUpdateRow .twitterLink,
.darkmode .userUpdatesPanel .twitterUpdateRow .tweetLink {
  color: #68b5f0;
}
.userUpdatesPanel .twitterUpdateRow.seen {
  background-color: #efefef;
  border-color: #c1c1c1;
}
.userUpdatesPanel .twitterUpdateRow.seen.uipExp {
  background-color: #f8f9fa;
}
.darkmode .userUpdatesPanel .twitterUpdateRow.seen {
  background-color: #253441;
  border-color: #2a323f;
}
.darkmode .userUpdatesPanel .twitterUpdateRow.seen .contentSection {
  color: #b3b3b3;
}
.darkmode .userUpdatesPanel .twitterUpdateRow.seen .timeSince {
  color: #6e6f70;
}

#UserUpdatesPanel {
  background-color: #ffffff;
  border-color: #2c6990;
}
.darkmode #UserUpdatesPanel {
  background-color: #1c2733;
  border-color: #1c2733;
  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 .tab.active,
#UserUpdatesPanel #updates-tab {
  color: #f47321;
}
.darkmode #UserUpdatesPanel .tab.active,
.darkmode #UserUpdatesPanel #updates-tab {
  color: #68b5f0;
}
#UserUpdatesPanel #tab-row {
  background-color: #747474;
}
.darkmode #UserUpdatesPanel #tab-row {
  background-color: #17202a;
}
#UserUpdatesPanel .feedbackLink {
  color: #f47321;
}
.darkmode #UserUpdatesPanel .feedbackLink {
  color: #68b5f0;
}

#userInfoPanelMenuDropdownRoot #UserMenuDropDown {
  border-color: #2c6990;
}
.darkmode #userInfoPanelMenuDropdownRoot #UserMenuDropDown {
  border-color: #2d3e50;
}
#userInfoPanelMenuDropdownRoot .dmSwitchCircle {
  background-color: #fff;
}
#userInfoPanelMenuDropdownRoot .dmSwitch {
  background-color: #474747;
}
.darkmode #userInfoPanelMenuDropdownRoot .dmSwitch {
  background-color: #f47321;
}

.noScrollbar {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE 10+ */
}
.noScrollbar br {
  display: none;
}
.noScrollbar::-webkit-scrollbar {
  width: 0px;
  height: 0px;
  background: transparent; /* Chrome/Safari/Webkit */
}

.dmWindow {
  background-color: #ffffff;
  color: #525252;
}
.darkmode .dmWindow {
  background-color: #202c39;
  color: #b3b3b3;
}
.dmWindow:not(.DmPopout .dmWindow) {
  box-shadow: 0px 0px 32px rgba(0, 0, 0, 0.32);
}
.darkmode .dmWindow:not(.DmPopout .dmWindow) {
  box-shadow: 0px 0px 32px rgba(0, 0, 0, 0.32);
}
.dmWindow .dmWindowHeader {
  background-color: #f8f9fa;
  border-bottom-color: #efefef;
}
.darkmode .dmWindow .dmWindowHeader {
  background-color: #17202a;
  border-bottom-color: #2a323f;
}
.dmWindow .dmWindowHeader.highlight:not(.noHighlight) {
  background-color: #e0e0e0;
}
.darkmode .dmWindow .dmWindowHeader.highlight:not(.noHighlight) {
  background-color: #1c2733;
}
.dmWindow .dmWindowHeader.loadedHighlight {
  animation-duration: 4s;
}
.dmWindow .dmWindowHeader.loadedHighlight:not(.darkmode .dmWindow .dmWindowHeader.loadedHighlight) {
  animation-name: color1;
}
@keyframes color1 {
  0% {
    background-color: #d5ebf8;
  }
  80% {
    background-color: #d5ebf8;
  }
}
.darkmode .dmWindow .dmWindowHeader.loadedHighlight {
  animation-name: color2;
}
@keyframes color2 {
  0% {
    background-color: #2d3e50;
  }
  80% {
    background-color: #2d3e50;
  }
}
.dmWindow .dmWindowHeader .button:hover {
  background-color: #c9c9c9;
}
.darkmode .dmWindow .dmWindowHeader .button:hover {
  background-color: #202c39;
}
.dmWindow .dmWindowMessage {
  color: #525252;
}
.darkmode .dmWindow .dmWindowMessage {
  color: #ffffff;
}
.dmWindow .dmWindowMessage .me {
  background-color: #d5ebf8;
}
.darkmode .dmWindow .dmWindowMessage .me {
  background-color: #303a42;
}
.dmWindow .dmWindowMessage .other {
  background-color: transparent;
  border-color: #a7a7a7;
}
.darkmode .dmWindow .dmWindowMessage .other {
  border-color: #6e6f70;
}
.dmWindow .logMessage .tipNotice {
  background-color: #ffff33;
  color: #000000;
  border: none !important;
}
.dmWindow .timestamp {
  color: #525252;
}
.darkmode .dmWindow .timestamp {
  color: #b3b3b3;
}
.dmWindow .dmWindowInput {
  background-color: #f8f9fa;
  border-color: #efefef;
}
.dmWindow .dmWindowInput textarea {
  background-color: transparent;
  color: #525252;
}
.darkmode .dmWindow .dmWindowInput textarea {
  color: #b3b3b3;
}
.darkmode .dmWindow .dmWindowInput {
  background-color: #202c39;
  border-color: #2d3e50;
}
.dmWindow .dmWindowInput .sendButton:focus {
  outline: -webkit-focus-ring-color auto 1px;
}
.darkmode .dmWindow .dmWindowInput .sendButton:is(textarea, input, button):is(:not(button, input[type=submit], input[type=button])) {
  background-color: #202c39;
}
.darkmode .dmWindow .dmWindowInput .sendButton:is(textarea, input, button):focus {
  outline: none;
  box-shadow: 0 0 0 2px #68b5f0;
}
.darkmode .dmWindow .dmWindowInput .sendButton:is(select) {
  background-color: #202c39;
}
.darkmode .dmWindow .dmWindowInput .sendButton:is(select):focus {
  outline: 2px solid #68b5f0;
}
.dmWindow .dmWindowInput .sendButton, .darkmode .dmWindow .dmWindowInput .sendButton {
  background-color: var(--wl-signup-bg-color, #f47321);
  color: #ffffff;
  border: 1px solid var(--wl-signup-alt-bg-color, #cd5d26);
  border-radius: 4px;
}
.dmWindow .dmWindowInput .sendButton.disabled {
  opacity: 0.5;
}
.dmWindow .dmWindowInput .tipButton:focus {
  outline: -webkit-focus-ring-color auto 1px;
}
.darkmode .dmWindow .dmWindowInput .tipButton:is(textarea, input, button):is(:not(button, input[type=submit], input[type=button])) {
  background-color: #202c39;
}
.darkmode .dmWindow .dmWindowInput .tipButton:is(textarea, input, button):focus {
  outline: none;
  box-shadow: 0 0 0 2px #68b5f0;
}
.darkmode .dmWindow .dmWindowInput .tipButton:is(select) {
  background-color: #202c39;
}
.darkmode .dmWindow .dmWindowInput .tipButton:is(select):focus {
  outline: 2px solid #68b5f0;
}
.dmWindow .dmWindowInput .tipButton, .darkmode .dmWindow .dmWindowInput .tipButton {
  background-color: #009900;
  color: #ffffff;
  border: 1px solid #288a09;
  border-radius: 4px;
}
.dmWindow .dmWindowTipOverlay {
  background-color: #000000;
  opacity: 0.5;
}
.dmWindow .dmWindowTipCallout {
  background-color: #ffffff;
}
.darkmode .dmWindow .dmWindowTipCallout {
  background-color: #202c39;
}
.dmWindow .dmWindowTipCallout .titleBar {
  color: #0c6a93;
  background-color: #e0e0e0;
}
.darkmode .dmWindow .dmWindowTipCallout .titleBar {
  color: #68b5f0;
  background-color: #1c2733;
}
.dmWindow .dmWindowTipCallout .tokenBalance {
  color: #288a09;
}
.dmWindow .dmWindowTipCallout .tokenInputError {
  color: #cc0000;
}
.dmWindow .dmWindowTipCallout .purchaseLink {
  color: #0c6a93;
}
.darkmode .dmWindow .dmWindowTipCallout .purchaseLink {
  color: #68b5f0;
}
.dmWindow .tipInput:focus,
.dmWindow .tipMessage:focus {
  outline: -webkit-focus-ring-color auto 1px;
}
.darkmode .dmWindow .tipInput:is(textarea, input, button):is(:not(button, input[type=submit], input[type=button])),
.darkmode .dmWindow .tipMessage:is(textarea, input, button):is(:not(button, input[type=submit], input[type=button])) {
  background-color: #202c39;
}
.darkmode .dmWindow .tipInput:is(textarea, input, button):focus,
.darkmode .dmWindow .tipMessage:is(textarea, input, button):focus {
  outline: none;
  box-shadow: 0 0 0 2px #68b5f0;
}
.darkmode .dmWindow .tipInput:is(select),
.darkmode .dmWindow .tipMessage:is(select) {
  background-color: #202c39;
}
.darkmode .dmWindow .tipInput:is(select):focus,
.darkmode .dmWindow .tipMessage:is(select):focus {
  outline: 2px solid #68b5f0;
}
.dmWindow .tipInput,
.dmWindow .tipMessage {
  border-color: #acacac;
  background-color: transparent;
}
.darkmode .dmWindow .tipInput,
.darkmode .dmWindow .tipMessage {
  border-color: #2d3e50;
  color: #ffffff;
}
.dmWindow .sendTipButton:focus {
  outline: -webkit-focus-ring-color auto 1px;
}
.darkmode .dmWindow .sendTipButton:is(textarea, input, button):is(:not(button, input[type=submit], input[type=button])) {
  background-color: #202c39;
}
.darkmode .dmWindow .sendTipButton:is(textarea, input, button):focus {
  outline: none;
  box-shadow: 0 0 0 2px #68b5f0;
}
.darkmode .dmWindow .sendTipButton:is(select) {
  background-color: #202c39;
}
.darkmode .dmWindow .sendTipButton:is(select):focus {
  outline: 2px solid #68b5f0;
}
.dmWindow .sendTipButton, .darkmode .dmWindow .sendTipButton {
  background-color: #009900;
  color: #ffffff;
  border: 1px solid #288a09;
  border-radius: 4px;
}
.dmWindow .sendTipButton:disabled {
  opacity: 0.5;
}

.dmWindow.collapsed .dmWindowHeader {
  background-color: #ffffff;
}
.darkmode .dmWindow.collapsed .dmWindowHeader {
  background-color: #202c39;
}
.dmWindow.collapsed .dmWindowHeader:hover {
  background-color: #e0e0e0;
}
.darkmode .dmWindow.collapsed .dmWindowHeader:hover {
  background-color: #1c2733;
}

.ChatMediaCarousel {
  box-shadow: 0 0 3px black;
  background: #ffffff;
}
.darkmode .ChatMediaCarousel {
  box-shadow: 0px 0px 32px rgba(0, 0, 0, 0.32);
  background: #202c39;
}

.pmUcmContainer {
  background-color: #ffffff;
  border-color: #efefef;
  box-shadow: 0px 0px 32px rgba(0, 0, 0, 0.32);
  color: #525252;
}
.darkmode .pmUcmContainer {
  background-color: #202c39;
  border-color: #2a323f;
  box-shadow: 0px 0px 32px rgba(0, 0, 0, 0.32);
  color: #b3b3b3;
}
.pmUcmContainer .pmUcmHeader {
  background-color: #f8f9fa;
  border-bottom-color: #efefef;
}
.darkmode .pmUcmContainer .pmUcmHeader {
  background-color: #17202a;
  border-bottom-color: #2a323f;
}
.pmUcmContainer .pmUcmHeader .placeholder {
  background-color: #e0e0e0;
}
.darkmode .pmUcmContainer .pmUcmHeader .placeholder {
  background-color: #1c2733;
}
.pmUcmContainer .pmUcmHeader .ageIcon {
  color: #525252;
}
.darkmode .pmUcmContainer .pmUcmHeader .ageIcon {
  color: #b3b3b3;
}
.pmUcmContainer .pmUcmDescription {
  border-top-color: #efefef;
}
.darkmode .pmUcmContainer .pmUcmDescription {
  border-top-color: #2a323f;
}
.pmUcmContainer .pmUcmLinks {
  border-top-color: #efefef;
}
.darkmode .pmUcmContainer .pmUcmLinks {
  border-top-color: #2a323f;
}
.pmUcmContainer .pmUcmLinks .pmUcmLinkItem:hover {
  background-color: #f9e4d5;
}
.darkmode .pmUcmContainer .pmUcmLinks .pmUcmLinkItem:hover {
  background-color: #885336;
}
.pmUcmContainer .pmUcmLinks .pmUcmLinkItem .pmUcmPopoutIcon {
  background: url(../../tsdefaultassets/popout-grey-d.svg?5e3e40bb292b) no-repeat center;
}
.darkmode .pmUcmContainer .pmUcmLinks .pmUcmLinkItem .pmUcmPopoutIcon {
  background: url(../../tsdefaultassets/popout-grey.svg?37347d0904cf) no-repeat center;
}
.pmUcmContainer .pmUcmLinks .pmUcmLinkItem .pmUcmIgnoreIcon {
  background: url(../../tsdefaultassets/ignore-user-d.svg?02a8f1bed31a) no-repeat center;
}
.darkmode .pmUcmContainer .pmUcmLinks .pmUcmLinkItem .pmUcmIgnoreIcon {
  background: url(../../tsdefaultassets/ignore-user.svg?4ca83bc3b789) no-repeat center;
}
.pmUcmContainer .pmUcmLinks .pmUcmLinkItem .pmUcmReportIcon {
  background: url(../../tsdefaultassets/report-msg-d.svg?eb708f4209bb) no-repeat center;
}
.darkmode .pmUcmContainer .pmUcmLinks .pmUcmLinkItem .pmUcmReportIcon {
  background: url(../../tsdefaultassets/report-msg.svg?9f05fef58682) no-repeat center;
}

.evolveMode {
  /* ------ Start Primitives ------ */
  /* Color / Primary */
  --color-primary-10: #271b15;
  --color-primary-20: #573121;
  --color-primary-30: #87482d;
  --color-primary-40: #b75e38;
  --color-primary-50: #f66100;
  --color-primary-60: #ff804a; /* brand color */
  --color-primary-70: #fe8c5c;
  --color-primary-80: #ffa680;
  --color-primary-90: #ffbfa4;
  --color-primary-100: #ffd8c8;
  --color-primary-110: #fff2ec;
  /* Color / Secondary */
  --color-secondary-10: #0e1f24;
  --color-secondary-20: #0b3d4e;
  --color-secondary-30: #085c78;
  --color-secondary-40: #006b8f;
  --color-secondary-50: #0199cb;
  --color-secondary-60: #00a9e0; /* brand color */
  --color-secondary-70: #19b1e3;
  --color-secondary-80: #4cc2e9;
  --color-secondary-90: #7fd4ef;
  --color-secondary-100: #b2e5f5;
  --color-secondary-110: #e5f6fb;
  /* Color / Grey */
  --color-grey-10: #101010;
  --color-grey-15: #1c1c1c;
  --color-grey-20: #272727;
  --color-grey-30: #3f3f3f;
  --color-grey-40: #575757;
  --color-grey-50: #6f6f6f;
  --color-grey-60: #878787;
  --color-grey-70: #ababab;
  --color-grey-80: #c3c3c3;
  --color-grey-90: #dbdbdb;
  --color-grey-100: #f3f3f3;
  --color-grey-105: #f9f9f9;
  --color-grey-110: #ffffff;
  /* Color / Green */
  --color-green-10: #182518;
  --color-green-20: #1f391f;
  --color-green-30: #2d612d;
  --color-green-40: #348234;
  --color-green-50: #47a247;
  --color-green-60: #78d64b;
  --color-green-70: #94e277;
  --color-green-80: #b0eea3;
  --color-green-90: #ccfacf;
  --color-green-100: #e7fff0;
  --color-green-110: #f3fff8;
  /* Color / Yellow */
  --color-yellow-10: #241712;
  --color-yellow-20: #381f14;
  --color-yellow-30: #603218;
  --color-yellow-40: #88461c;
  --color-yellow-50: #c14b00;
  --color-yellow-60: #e87400;
  --color-yellow-70: #ffb549;
  --color-yellow-80: #ffc566;
  --color-yellow-90: #ffdf99;
  --color-yellow-100: #fff6dd;
  --color-yellow-110: #fff9f2;
  /* Color / Red */
  --color-red-10: #291617;
  --color-red-20: #401c1e;
  --color-red-30: #70282c;
  --color-red-40: #9f343a;
  --color-red-50: #cd3d45;
  --color-red-60: #ef343f;
  --color-red-70: #f35768;
  --color-red-80: #f89999;
  --color-red-90: #fdcbcb;
  --color-red-100: #fff6f6;
  --color-red-110: #fffbfb;
  /* Color / Purple */
  --color-purple-10: #23182d;
  --color-purple-20: #351f65;
  --color-purple-30: #492867;
  --color-purple-40: #633c95;
  --color-purple-50: #814abf;
  --color-purple-60: #9250c9;
  --color-purple-70: #b177db;
  --color-purple-80: #c390e2;
  --color-purple-90: #c5b4e3;
  --color-purple-100: #f9f3ff;
  --color-purple-110: #fcfbff;
  /* Color / Blue */
  --color-blue-10: #1b223a;
  --color-blue-20: #0f2251;
  --color-blue-30: #163e8c;
  --color-blue-40: #0657c3;
  --color-blue-50: #1c7cee;
  --color-blue-60: #347991;
  --color-blue-70: #569eb6;
  --color-blue-80: #99ccdd;
  --color-blue-90: #b3dded;
  --color-blue-100: #eaf9ff;
  --color-blue-110: #f7fcff;
  /* Color / Transparent / Brand Primary */
  --color-transparent-brand-primary-10: rgba(255, 128, 74, 0.08);
  --color-transparent-brand-primary-20: rgba(255, 140, 92, 0.12);
  --color-transparent-brand-primary-30: rgba(255, 128, 74, 0.24);
  --color-transparent-brand-primary-40: rgba(255, 140, 92, 0.24);
  /* Color / Transparent / Brand Secondary */
  --color-transparent-brand-secondary-10: rgba(0, 169, 224, 0.08);
  --color-transparent-brand-secondary-20: rgba(25, 177, 227, 0.12);
  --color-transparent-brand-secondary-30: rgba(0, 169, 224, 0.24);
  --color-transparent-brand-secondary-40: rgba(25, 177, 227, 0.24);
  /* Color / Transparent / White */
  --color-transparent-white-0: rgba(255, 255, 255, 0);
  --color-transparent-white-10: rgba(255, 255, 255, 0.08);
  --color-transparent-white-20: rgba(255, 255, 255, 0.12);
  --color-transparent-white-30: rgba(255, 255, 255, 0.2);
  --color-transparent-white-40: rgba(255, 255, 255, 0.48);
  --color-transparent-white-50: rgba(255, 255, 255, 0.88);
  /* Color / Transparent / Light Grey */
  --color-transparent-light-grey-0: rgba(243, 243, 243, 0);
  --color-transparent-light-grey-10: rgba(243, 243, 243, 0.08);
  --color-transparent-light-grey-20: rgba(243, 243, 243, 0.12);
  --color-transparent-light-grey-30: rgba(243, 243, 243, 0.2);
  --color-transparent-light-grey-40: rgba(243, 243, 243, 0.48);
  --color-transparent-light-grey-50: rgba(243, 243, 243, 0.88);
  /* Color / Transparent / Black */
  --color-transparent-black-0: rgba(16, 16, 16, 0);
  --color-transparent-black-10: rgba(16, 16, 16, 0.04);
  --color-transparent-black-20: rgba(16, 16, 16, 0.12);
  --color-transparent-black-30: rgba(16, 16, 16, 0.2);
  --color-transparent-black-40: rgba(16, 16, 16, 0.48);
  --color-transparent-black-50: rgba(16, 16, 16, 0.88);
  /* Color / Transparent / Dark Grey */
  --color-transparent-dark-grey-0: rgba(39, 39, 39, 0);
  --color-transparent-dark-grey-10: rgba(39, 39, 39, 0.04);
  --color-transparent-dark-grey-20: rgba(39, 39, 39, 0.12);
  --color-transparent-dark-grey-30: rgba(39, 39, 39, 0.2);
  --color-transparent-dark-grey-40: rgba(39, 39, 39, 0.48);
  --color-transparent-dark-grey-50: rgba(39, 39, 39, 0.88);
  /* Color / Others */
  --color-bubblegum: #f1a7dc;
  --color-afterglow: #ffb549;
  --color-glow-stick: #78d64b;
  --color-wet-dream: #9adbe8;
  --color-kiss-kiss: #ef343f;
  --color-vibey-violet: #6344bb;
  --color-bratty: #ceea80;
  --color-ocean-eyes: #0657c3;
  --color-ink-blot: #351f65;
  --color-lemonade: #f9e27d;
  --color-wine-stained: #890b58;
  --color-lavendar-milk: #c5b4e3;
  --color-latex-pink: #eb6fbd;
  --color-apricot: #ff9d6d;
  /* Spacing */
  --spacing-0: 0px;
  --spacing-50: 2px;
  --spacing-100: 4px;
  --spacing-200: 8px;
  --spacing-300: 12px;
  --spacing-400: 16px;
  --spacing-500: 20px;
  --spacing-600: 24px;
  --spacing-700: 32px;
  --spacing-800: 40px;
  /* Corner Radius */
  --corner-radius-0: 0px;
  --corner-radius-50: 2px;
  --corner-radius-100: 4px;
  --corner-radius-200: 8px;
  --corner-radius-300: 12px;
  --corner-radius-400: 16px;
  --corner-radius-500: 20px;
  --corner-radius-600: 24px;
  --corner-radius-700: 32px;
  --corner-radius-800: 48px;
  --corner-radius-full: 100px;
  /* Blur */
  --blur-50: 2px;
  --blur-100: 8px;
  --blur-200: 16px;
  --blur-300: 20px;
  --blur-400: 32px;
  /* ------ End Primitives ------ */
  /* ------ Start Tokens ------ */
  /* Background */
  --background-neutral: var(--color-grey-110);
  --background-neutral-transparent: var(--color-transparent-white-50);
  --background-neutral-light-transparent: var(--color-transparent-white-40);
  --background-ultra-low-contrast: var(--color-grey-105);
  --background-low-contrast: var(--color-grey-100);
  --background-low-contrast-transparent: var(
      --color-transparent-light-grey-50
  );
  --background-mid-contrast: var(--color-grey-90);
  --background-high-contrast: var(--color-grey-60);
  --background-full-contrast: var(--color-grey-10);
  --background-brand-primary: var(--color-primary-50);
  --background-low-brand-primary: var(--color-primary-110);
  --background-brand-secondary: var(--color-secondary-50);
  --background-low-brand-secondary: var(--color-secondary-110);
  --background-white: var(--color-grey-110);
  --background-white-transparent: var(--color-transparent-white-50);
  --background-white-light-transparent: var(--color-transparent-white-40);
  --background-black: var(--color-grey-10);
  --background-black-transparent: var(--color-transparent-black-50);
  --background-black-light-transparent: var(--color-transparent-black-40);
  /* Background / System */
  --background-system-success: var(--color-green-40);
  --background-system-success-light: var(--color-green-100);
  --background-system-warning: var(--color-yellow-60);
  --background-system-warning-light: var(--color-yellow-100);
  --background-system-error: var(--color-red-60);
  --background-system-error-light: var(--color-red-100);
  /* Background / Badge */
  --background-badge-private-light: var(--color-red-100);
  --background-badge-promoted-light: var(--color-blue-100);
  --background-badge-gaming-light: var(--color-purple-100);
  --background-badge-new-tag-light: var(--color-green-100);
  --background-badge-spy-light: var(--color-yellow-100);
  --background-badge-new-tag: var(--color-green-40);
  /* Background / Chat */
  --background-chat-tip: #fdff4a;
  --background-chat-fanclub: var(--color-green-60);
  --background-chat-private-request: #f66100;
  --background-chat-goal-completion: var(--color-grey-100);
  /* Background / Button */
  --background-button-brand-primary: var(--color-primary-50);
  --background-button-brand-primary-light: var(
      --background-low-brand-primary
  );
  --background-button-brand-secondary: var(--color-secondary-50);
  --background-button-brand-secondary-light: var(
      --background-low-brand-secondary
  );
  --background-button-neutral: var(--background-neutral);
  --background-button-neutral-transparent: var(--color-transparent-white-40);
  --background-button-grey-light: var(--color-grey-100);
  --background-button-grey-light-transparent: var(
      --color-transparent-light-grey-40
  );
  --background-button-grey: var(--background-mid-contrast);
  --background-button-success: var(--background-system-success);
  --background-button-warning: var(--background-system-warning);
  --background-button-error: var(--background-system-error);
  --background-button-white: var(--color-grey-110);
  --background-button-white-transparent: var(--color-transparent-white-40);
  --background-button-fanclub: var(--color-green-40);
  /* Background / Others */
  --background-others-popup-neutral: var(--color-grey-110);
  --background-others-popup-neutral-light-contrast: var(--color-grey-100);
  --background-others-plain-tooltip: var(--color-transparent-black-50);
  --background-others-follow: var(--color-lemonade);
  --background-others-tooltip: var(--color-transparent-dark-grey-50);
  --background-button-green-light: var(--color-green-110);
  /* Background / Broadcast */
  --background-broadcast-live: var(--color-green-90);
  --background-broadcast-private: var(--color-purple-90);
  --background-broadcast-hidden: var(--color-green-30);
  --background-broadcast-away: var(--color-yellow-90);
  --background-broadcast-offline: var(--color-grey-90);
  --background-broadcast-hd-resolution: var(--color-grey-90);
  --background-broadcast-4k-resolution: var(--color-grey-20);
  /* Text */
  --text-brand-primary: var(--color-primary-50);
  --text-brand-secondary: var(--color-secondary-40);
  --text-primary: var(--color-grey-10);
  --text-primary-contrast: var(--color-grey-110);
  --text-secondary: var(--color-grey-50);
  --text-light: var(--color-grey-70);
  --text-white: var(--color-grey-110);
  --text-black: var(--color-grey-10);
  /* Text / System */
  --text-system-success: var(--color-green-40);
  --text-system-warning: var(--color-yellow-50);
  --text-system-error: var(--color-red-50);
  /* Text / Badge */
  --text-badge-private: var(--color-red-60);
  --text-badge-promoted: var(--color-blue-60);
  --text-badge-gaming: var(--color-purple-60);
  --text-badge-new-tag: var(--color-green-40);
  --text-badge-spy: var(--color-yellow-50);
  /* Text / Chat */
  --text-chat-broadcaster: var(--color-primary-50);
  --text-chat-moderator: var(--color-red-50);
  --text-chat-fan-member: var(--color-green-40);
  --text-chat-tipped-1k: var(--color-purple-40);
  --text-chat-tipped-250: var(--color-purple-60);
  --text-chat-tipped-50: var(--color-blue-30);
  --text-chat-purchased-tkns: var(--color-blue-60);
  --text-chat-no-tkns: var(--color-grey-50);
  /* Text / Button */
  --text-button-white: var(--color-grey-110);
  --text-button-primary-disabled: var(--color-grey-110);
  --text-button-neutral: var(--color-grey-10);
  --text-button-neutral-disabled: var(--color-grey-70);
  --text-button-brand: var(--color-secondary-40);
  /* Border */
  --border-low: var(--color-grey-100);
  --border-medium: var(--color-grey-90);
  --border-high: var(--color-grey-70);
  --border-contrast: var(--color-grey-30);
  --border-transparent: var(--color-transparent-black-30);
  --border-brand: var(--color-secondary-110);
  /* Border / Button */
  --border-button-primary: var(--color-primary-50);
  --border-button-secondary: var(--color-secondary-50);
  --border-button-neutral: var(--border-medium);
  --border-button-neutral-high: var(--border-high);
  --border-button-neutral-contrast: var(--border-contrast);
  --border-button-focused: var(--color-secondary-40);
  /* Overlay */
  --overlay-backdrop-popup: var(--color-transparent-black-30);
  --overlay-low: var(--color-transparent-black-10);
  --overlay-medium: var(--color-transparent-black-30);
  --overlay-high: var(--color-transparent-black-40);
  --overlay-backdrop-popup: var(--overlay-medium);
  /* Overlay / Button */
  --overlay-button-hover-bright: var(--color-transparent-white-20);
  --overlay-button-hover: var(--color-transparent-black-10);
  --overlay-button-press: var(--color-transparent-black-30);
  --overlay-button-brand-primary-hover: var(
      --color-transparent-brand-primary-10
  );
  --overlay-button-brand-primary-press: var(
      --color-transparent-brand-primary-30
  );
  --overlay-button-brand-secondary-hover: var(
      --color-transparent-brand-secondary-10
  );
  --overlay-button-brand-secondary-press: var(
      --color-transparent-brand-secondary-30
  );
  /* Drop Shadow */
  --drop-shadow-low: var(--color-transparent-black-20);
  --drop-shadow-medium: var(--color-transparent-black-30);
  --drop-shadow-high: var(--color-transparent-black-50);
  --drop-shadow-adaptive-low: var(--color-transparent-black-20);
  --drop-shadow-adaptive-medium: var(--color-transparent-black-30);
  --drop-shadow-adaptive-high: var(--color-transparent-black-50);
  /* Gradient */
  --gradient-neutral-full: var(--color-grey-110);
  --gradient-neutral-clear: var(--color-transparent-white-0);
  --gradient-light-grey-full: var(--color-grey-100);
  --gradient-light-grey-clear: var(--color-transparent-light-grey-0);
  --gradient-black-full: var(--color-grey-10);
  --gradient-black-clear: var(--color-transparent-black-0);
  --gradient-white-full: var(--color-grey-110);
  --gradient-white-clear: var(--color-transparent-white-0);
  /* Logo */
  --logo: var(--color-primary-60);
  /* Spacing */
  --spacing-none: var(--spacing-0);
  --spacing-2xs: var(--spacing-50);
  --spacing-xs: var(--spacing-100);
  --spacing-sm: var(--spacing-200);
  --spacing-md: var(--spacing-300);
  --spacing-lg: var(--spacing-400);
  --spacing-xl: var(--spacing-500);
  --spacing-2xl: var(--spacing-600);
  --spacing-3xl: var(--spacing-700);
  --spacing-4xl: var(--spacing-800);
  /* Corner Radius */
  --corner-radius-none: var(--corner-radius-0);
  --corner-radius-2xs: var(--corner-radius-50);
  --corner-radius-xs: var(--corner-radius-100);
  --corner-radius-sm: var(--corner-radius-200);
  --corner-radius-md: var(--corner-radius-300);
  --corner-radius-lg: var(--corner-radius-400);
  --corner-radius-xl: var(--corner-radius-500);
  --corner-radius-2xl: var(--corner-radius-600);
  --corner-radius-3xl: var(--corner-radius-700);
  --corner-radius-4xl: var(--corner-radius-800);
  /* Blur */
  --blur-x-light: var(--blur-50);
  --blur-light: var(--blur-100);
  --blur-low: var(--blur-200);
  --blur-medium: var(--blur-300);
  --blur-high: var(--blur-400);
  /* Blur / Backdrop Filter */
  --blur-low-backdrop-filter: blur(calc(var(--blur-100) / 2));
  --blur-mid-backdrop-filter: blur(calc(var(--blur-300) / 2));
  --blur-high-backdrop-filter: blur(calc(var(--blur-400) / 2));
  --blur-shadow-mid-backdrop-filter: blur(calc(var(--blur-medium) / 2));
}

/* Dark Mode For Native UI Elements */
html:has(body.darkMode.evolveMode) {
  color-scheme: dark;
}

.darkMode .evolveMode,
.darkMode.evolveMode {
  /* Background */
  --background-neutral: var(--color-grey-10);
  --background-neutral-transparent: var(--color-transparent-black-50);
  --background-neutral-light-transparent: var(--color-transparent-black-40);
  --background-ultra-low-contrast: var(--color-grey-15);
  --background-low-contrast: var(--color-grey-20);
  --background-low-contrast-transparent: var(
      --color-transparent-dark-grey-50
  );
  --background-mid-contrast: var(--color-grey-30);
  --background-high-contrast: var(--color-grey-60);
  --background-full-contrast: var(--color-grey-110);
  --background-brand-primary: var(--color-primary-50);
  --background-low-brand-primary: var(--color-primary-20);
  --background-brand-secondary: var(--color-secondary-50);
  --background-low-brand-secondary: var(--color-secondary-20);
  --background-white: var(--color-grey-110);
  --background-white-transparent: var(--color-transparent-white-50);
  --background-white-light-transparent: var(--color-transparent-white-40);
  --background-black: var(--color-grey-10);
  --background-black-transparent: var(--color-transparent-black-50);
  --background-black-light-transparent: var(--color-transparent-black-40);
  /* Background / System */
  --background-system-success: var(--color-green-40);
  --background-system-success-light: var(--color-green-20);
  --background-system-warning: var(--color-yellow-60);
  --background-system-warning-light: var(--color-yellow-20);
  --background-system-error: var(--color-red-60);
  --background-system-error-light: var(--color-red-20);
  /* Background / Badge */
  --background-badge-private-light: var(--color-red-20);
  --background-badge-promoted-light: var(--color-blue-20);
  --background-badge-gaming-light: var(--color-purple-20);
  --background-badge-new-tag-light: var(--color-green-20);
  --background-badge-spy-light: var(--color-yellow-20);
  --background-badge-new-tag: var(--color-green-40);
  /* Background / Chat */
  --background-chat-tip: #fdff4a;
  --background-chat-fanclub: var(--color-green-60);
  --background-chat-private-request: #f66100;
  --background-chat-goal-completion: var(--color-grey-100);
  /* Background / Button */
  --background-button-brand-primary: var(--color-primary-50);
  --background-button-brand-primary-light: var(
      --background-low-brand-primary
  );
  --background-button-brand-secondary: var(--color-secondary-50);
  --background-button-brand-secondary-light: var(
      --background-low-brand-secondary
  );
  --background-button-neutral: var(--background-neutral);
  --background-button-neutral-transparent: var(--color-transparent-black-40);
  --background-button-grey-light: var(--color-grey-30);
  --background-button-grey-light-transparent: var(
      --color-transparent-dark-grey-40
  );
  --background-button-grey: var(--background-mid-contrast);
  --background-button-success: var(--background-system-success);
  --background-button-warning: var(--background-system-warning);
  --background-button-error: var(--background-system-error);
  --background-button-white: var(--color-grey-110);
  --background-button-white-transparent: var(--color-transparent-white-40);
  --background-button-fanclub: var(--color-green-40);
  /* Background / Broadcast */
  --background-broadcast-live: var(--color-green-30);
  --background-broadcast-private: var(--color-purple-30);
  --background-broadcast-hidden: var(--color-green-90);
  --background-broadcast-away: var(--color-yellow-30);
  --background-broadcast-offline: var(--color-grey-30);
  --background-broadcast-hd-resolution: var(--color-grey-30);
  --background-broadcast-4k-resolution: var(--color-grey-20);
  /* Background / Others */
  --background-others-popup-neutral: var(--color-grey-20);
  --background-others-popup-neutral-light-contrast: var(--color-grey-30);
  --background-others-plain-tooltip: var(--color-transparent-dark-grey-50);
  --background-others-follow: var(--color-lemonade);
  /* Text */
  --text-brand-primary: var(--color-primary-70);
  --text-brand-secondary: var(--color-secondary-60); /* brand color */
  --text-primary: var(--color-grey-110);
  --text-primary-contrast: var(--color-grey-10);
  --text-secondary: var(--color-grey-70);
  --text-light: var(--color-grey-60);
  --text-white: var(--color-grey-110);
  --text-black: var(--color-grey-10);
  /* Text / System */
  --text-system-success: var(--color-green-60);
  --text-system-warning: var(--color-yellow-60);
  --text-system-error: var(--color-red-70);
  /* Text / Badge */
  --text-badge-private: var(--color-red-60);
  --text-badge-promoted: var(--color-blue-80);
  --text-badge-gaming: var(--color-purple-80);
  --text-badge-new-tag: var(--color-green-60);
  --text-badge-spy: var(--color-yellow-60);
  /* Text / Chat */
  --text-chat-broadcaster: var(--color-primary-70);
  --text-chat-moderator: var(--color-red-70);
  --text-chat-fan-member: var(--color-green-60);
  --text-chat-tipped-1k: var(--color-purple-60);
  --text-chat-tipped-250: var(--color-purple-80);
  --text-chat-tipped-50: var(--color-blue-50);
  --text-chat-purchased-tkns: var(--color-blue-70);
  --text-chat-no-tkns: var(--color-grey-70);
  /* Button Text */
  --text-button-white: var(--color-grey-110);
  --text-button-primary-disabled: var(--color-grey-70);
  --text-button-neutral: var(--color-grey-110);
  --text-button-neutral-disabled: var(--color-grey-60);
  --text-button-brand: var(--color-secondary-60);
  /* Border */
  --border-low: var(--color-grey-20);
  --border-medium: var(--color-grey-40);
  --border-high: var(--color-grey-50);
  --border-contrast: var(--color-grey-90);
  --border-transparent: var(--color-transparent-white-30);
  --border-brand: var(--color-secondary-20);
  /* Border / Button */
  --border-button-primary: var(--color-primary-70);
  --border-button-secondary: var(--color-secondary-70);
  --border-button-neutral: var(--border-medium);
  --border-button-neutral-high: var(--border-high);
  --border-button-neutral-contrast: var(--border-contrast);
  --border-button-focused: var(--color-secondary-80);
  /* Overlay */
  --overlay-backdrop-popup: var(--color-transparent-black-40);
  --overlay-low: var(--color-transparent-black-10);
  --overlay-medium: var(--color-transparent-black-30);
  --overlay-high: var(--color-transparent-black-40);
  --overlay-backdrop-popup: var(--overlay-high);
  /* Overlay / Button */
  --overlay-button-hover-bright: var(--color-transparent-black-20);
  --overlay-button-hover: var(--color-transparent-white-10);
  --overlay-button-press: var(--color-transparent-white-30);
  --overlay-button-brand-primary-hover: var(
      --color-transparent-brand-primary-20
  );
  --overlay-button-brand-primary-press: var(
      --color-transparent-brand-primary-40
  );
  --overlay-button-brand-secondary-hover: var(
      --color-transparent-brand-secondary-20
  );
  --overlay-button-brand-secondary-press: var(
      --color-transparent-brand-secondary-40
  );
  /* Drop Shadow */
  --drop-shadow-low: var(--color-transparent-black-30);
  --drop-shadow-medium: var(--color-transparent-black-50);
  --drop-shadow-high: var(--color-transparent-black-50);
  --drop-shadow-adaptive-low: var(--color-transparent-white-20);
  --drop-shadow-adaptive-medium: var(--color-transparent-white-30);
  --drop-shadow-adaptive-high: var(--color-transparent-white-50);
  /* Gradient */
  --gradient-neutral-full: var(--color-grey-10);
  --gradient-neutral-clear: var(--color-transparent-black-0);
  --gradient-light-grey-full: var(--color-grey-20);
  --gradient-light-grey-clear: var(--color-transparent-dark-grey-0);
  --gradient-black-full: var(--color-grey-10);
  --gradient-black-clear: var(--color-transparent-black-0);
  --gradient-white-full: var(--color-grey-110);
  --gradient-white-clear: var(--color-transparent-white-0);
  /* Logo */
  --logo: var(--color-grey-110);
  /* ------ End Tokens ------ */
}

.chatReport {
  color: #454545;
  background-color: #ffffff;
}
.darkmode .chatReport {
  color: #b3b3b3;
  background-color: #1c2733;
}
.chatReport .headerDiv {
  color: rgb(0, 91, 133);
}
.darkmode .chatReport .headerDiv {
  color: #68b5f0;
}
.chatReport textarea:focus {
  outline: -webkit-focus-ring-color auto 1px;
}
.darkmode .chatReport textarea:is(textarea, input, button):is(:not(button, input[type=submit], input[type=button])) {
  background-color: #202c39;
}
.darkmode .chatReport textarea:is(textarea, input, button):focus {
  outline: none;
  box-shadow: 0 0 0 2px #68b5f0;
}
.darkmode .chatReport textarea:is(select) {
  background-color: #202c39;
}
.darkmode .chatReport textarea:is(select):focus {
  outline: 2px solid #68b5f0;
}
.chatReport textarea {
  background-color: transparent;
  border-color: #b4b4b4;
}
.darkmode .chatReport textarea {
  border-color: #2d3e50;
  color: #ffffff;
}
.chatReport .submitButton:focus {
  outline: -webkit-focus-ring-color auto 1px;
}
.darkmode .chatReport .submitButton:is(textarea, input, button):is(:not(button, input[type=submit], input[type=button])) {
  background-color: #202c39;
}
.darkmode .chatReport .submitButton:is(textarea, input, button):focus {
  outline: none;
  box-shadow: 0 0 0 2px #68b5f0;
}
.darkmode .chatReport .submitButton:is(select) {
  background-color: #202c39;
}
.darkmode .chatReport .submitButton:is(select):focus {
  outline: 2px solid #68b5f0;
}
.chatReport .submitButton, .darkmode .chatReport .submitButton {
  background-color: #0c6a93;
  color: #ffffff;
  border: 1px solid #0c6a93;
  border-radius: 4px;
}
.chatReport .cancelSpan:focus {
  outline: -webkit-focus-ring-color auto 1px;
}
.darkmode .chatReport .cancelSpan:is(textarea, input, button):is(:not(button, input[type=submit], input[type=button])) {
  background-color: #202c39;
}
.darkmode .chatReport .cancelSpan:is(textarea, input, button):focus {
  outline: none;
  box-shadow: 0 0 0 2px #68b5f0;
}
.darkmode .chatReport .cancelSpan:is(select) {
  background-color: #202c39;
}
.darkmode .chatReport .cancelSpan:is(select):focus {
  outline: 2px solid #68b5f0;
}
.chatReport .cancelSpan {
  background-color: transparent;
  color: #494949;
  border: none;
}
.darkmode .chatReport .cancelSpan {
  color: #b3b3b3;
}
.chatReport .cancelSpan:hover {
  text-decoration: underline;
}
.chatReport .closeReportLink {
  color: rgb(10, 90, 131);
}
.darkmode .chatReport .closeReportLink {
  color: #68b5f0;
}
.chatReport .ignoreUserLink {
  color: rgb(10, 90, 131);
}
.darkmode .chatReport .ignoreUserLink {
  color: #68b5f0;
}
.chatReport .ignoreUserLink.disabled {
  color: #454545;
}
.darkmode .chatReport .ignoreUserLink.disabled {
  color: #b3b3b3;
}

.broadcaster {
  color: var(--text-chat-broadcaster, #f47321);
}
.broadcaster.mentionHl {
  color: #fff;
  background-color: var(--text-chat-broadcaster, #f47321);
}

.mod {
  color: var(--text-chat-moderator, #dc0000);
}
.mod.mentionHl {
  color: #fff;
  background-color: var(--text-chat-moderator, #dc0000);
}

.inFanclub {
  color: var(--text-chat-fan-member, #009900);
}
.inFanclub.mentionHl {
  color: #fff;
  background-color: var(--text-chat-fan-member, #009900);
}

.tippedTonsRecently {
  color: var(--text-chat-tipped-1k, #804baa);
}
.tippedTonsRecently.mentionHl {
  color: #fff;
  background-color: var(--text-chat-tipped-1k, #804baa);
}

.tippedALotRecently {
  color: var(--text-chat-tipped-250, #be6aff);
}
.tippedALotRecently.mentionHl {
  color: #fff;
  background-color: var(--text-chat-tipped-250, #be6aff);
}

.tippedRecently {
  color: var(--text-chat-tipped-50, #1e5cfb);
}
.tippedRecently.mentionHl {
  color: #fff;
  background-color: var(--text-chat-tipped-50, #1e5cfb);
}

.hasTokens {
  color: var(--text-chat-purchased-tkns, #69a);
}
.hasTokens.mentionHl {
  color: #fff;
  background-color: var(--text-chat-purchased-tkns, #69a);
}

.defaultUser {
  color: var(--text-chat-no-tkns, #939393);
}
.defaultUser.mentionHl {
  color: #fff;
  background-color: var(--text-chat-no-tkns, #939393);
}

/**
 * Generic mixins
 */
.autocompleteModal {
  background-color: #ffffff;
  border-width: 1px;
  border-style: solid;
  border-bottom: none;
  border-color: #acacac;
  color: #494949;
}
.darkmode .autocompleteModal {
  background-color: #1c2733;
  border-color: #1c2733;
  color: #b3b3b3;
}
.autocompleteModal.broadcasterTags {
  border-color: #efefef;
  -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  -ms-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  -o-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.darkmode .autocompleteModal.broadcasterTags {
  border-color: #1c2733;
}
.autocompleteModal.broadcasterTags .selectedEmoticon {
  background-color: #d9d9d9;
}
.autocompleteModal .selectedEmoticon {
  background-color: #cccccc;
}
.darkmode .autocompleteModal .selectedEmoticon {
  background-color: #885336;
}
.autocompleteModal .previewWrapper {
  border-bottom-color: #acacac;
}
.darkmode .autocompleteModal .previewWrapper {
  border-bottom-color: #6e6f70;
}
.autocompleteModal .hrefColor {
  color: #0c6a93;
}
.darkmode .autocompleteModal .hrefColor {
  color: #68b5f0;
}
.autocompleteModal .modalItem {
  padding: 2px 8px;
}
.autocompleteModal .modalItem:hover {
  background-color: #eeeeee;
}
.darkmode .autocompleteModal .modalItem:hover {
  background-color: #17202a;
}

.evolveMode .autocompleteModal:not(.broadcasterTags) {
  border-radius: var(--corner-radius-xl);
  background: var(--background-others-popup-neutral);
  box-shadow: 0 0 var(--blur-200) 0 var(--drop-shadow-low);
  color: var(--text-primary);
  border: none;
}
.evolveMode .autocompleteModal:not(.broadcasterTags) .autocompleteList {
  padding: 8px;
}
.evolveMode .autocompleteModal:not(.broadcasterTags) .selectedEmoticon {
  background-color: var(--overlay-button-hover);
}
.evolveMode .autocompleteModal:not(.broadcasterTags) .modalItem {
  display: flex;
  padding: var(--spacing-sm) var(--spacing-md);
  align-items: flex-start;
  gap: var(--spacing-sm);
  align-self: stretch;
  font-family: "UbuntuRegular", Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
  border-radius: var(--corner-radius-lg);
}
.evolveMode .autocompleteModal:not(.broadcasterTags) .modalItem:hover {
  background-color: var(--overlay-button-hover);
}
.evolveMode .autocompleteModal:not(.broadcasterTags).emoticonAutocompleteModal .tag-text {
  flex: 1;
}
.evolveMode .autocompleteModal:not(.broadcasterTags).emoticonAutocompleteModal .modalItem {
  display: flex;
  align-items: center;
}
.evolveMode .autocompleteModal:not(.broadcasterTags).emoticonAutocompleteModal .emoticonIcon {
  width: 20px;
  height: 20px;
  object-fit: contain;
}
.evolveMode .autocompleteModal:not(.broadcasterTags).emoticonAutocompleteModal .kebabIcon {
  color: var(--text-secondary);
}
@media (hover: hover) {
  .evolveMode .autocompleteModal:not(.broadcasterTags).emoticonAutocompleteModal .modalItem:not(:hover):not(.selectedEmoticon) .kebabIcon {
    display: none;
  }
}

.emoticonPreviewModal {
  background-color: #ffffff;
  color: #494949;
}
.darkmode .emoticonPreviewModal {
  background-color: #1c2733;
  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:focus {
  outline: -webkit-focus-ring-color auto 1px;
}
.darkmode .emoticonPreviewModal .cancelButton:is(textarea, input, button):is(:not(button, input[type=submit], input[type=button])) {
  background-color: #202c39;
}
.darkmode .emoticonPreviewModal .cancelButton:is(textarea, input, button):focus {
  outline: none;
  box-shadow: 0 0 0 2px #68b5f0;
}
.darkmode .emoticonPreviewModal .cancelButton:is(select) {
  background-color: #202c39;
}
.darkmode .emoticonPreviewModal .cancelButton:is(select):focus {
  outline: 2px solid #68b5f0;
}
.emoticonPreviewModal .cancelButton {
  background-color: transparent;
  color: #494949;
  border: none;
}
.darkmode .emoticonPreviewModal .cancelButton {
  color: #b3b3b3;
}
.emoticonPreviewModal .cancelButton:hover {
  text-decoration: underline;
}
.emoticonPreviewModal .reportButton:focus {
  outline: -webkit-focus-ring-color auto 1px;
}
.darkmode .emoticonPreviewModal .reportButton:is(textarea, input, button):is(:not(button, input[type=submit], input[type=button])) {
  background-color: #202c39;
}
.darkmode .emoticonPreviewModal .reportButton:is(textarea, input, button):focus {
  outline: none;
  box-shadow: 0 0 0 2px #68b5f0;
}
.darkmode .emoticonPreviewModal .reportButton:is(select) {
  background-color: #202c39;
}
.darkmode .emoticonPreviewModal .reportButton:is(select):focus {
  outline: 2px solid #68b5f0;
}
.emoticonPreviewModal .reportButton, .darkmode .emoticonPreviewModal .reportButton {
  background-color: #0c6a93;
  color: #ffffff;
  border: 1px solid #0c6a93;
  border-radius: 4px;
}
.emoticonPreviewModal .categorySelect:focus {
  outline: -webkit-focus-ring-color auto 1px;
}
.darkmode .emoticonPreviewModal .categorySelect:is(textarea, input, button):is(:not(button, input[type=submit], input[type=button])) {
  background-color: #202c39;
}
.darkmode .emoticonPreviewModal .categorySelect:is(textarea, input, button):focus {
  outline: none;
  box-shadow: 0 0 0 2px #68b5f0;
}
.darkmode .emoticonPreviewModal .categorySelect:is(select) {
  background-color: #202c39;
}
.darkmode .emoticonPreviewModal .categorySelect:is(select):focus {
  outline: 2px solid #68b5f0;
}
.darkmode .emoticonPreviewModal .categorySelect {
  background-color: transparent;
  color: #b3b3b3 !important;
  -webkit-appearance: menulist;
}
.emoticonPreviewModal .hrefColor {
  color: #0c6a93;
}
.darkmode .emoticonPreviewModal .hrefColor {
  color: #68b5f0;
}

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

.mediaPreviewModal {
  background-color: #ffffff;
  color: #49494f;
}
.darkmode .mediaPreviewModal {
  background-color: #1c2733;
  color: #b3b3b3;
}
.mediaPreviewModal .closeButton {
  background: url(../../tsdefaultassets/close.svg?9a87e6f7a4de) no-repeat center center;
  background-size: cover;
}
.darkmode .mediaPreviewModal .closeButton {
  background: url(../../tsdefaultassets/close-white.svg?b0389426f1cb) no-repeat center center;
  background-size: cover;
}

.conversationList {
  color: #494949;
}
.hasDarkBackground .conversationList, .darkmode .conversationList {
  color: #ffffff;
  background-color: #202c39;
}
.draggableCanvasWindow .conversationList {
  background-color: unset;
}
.conversationList .conversationBodyRoot {
  border-bottom-color: #e0e0e0;
}
.darkmode .conversationList .conversationBodyRoot {
  border-bottom-color: #2d3e50;
}
.conversationList .conversationBodyRoot .sendDmPrompt {
  color: #222222;
}
.darkmode .conversationList .conversationBodyRoot .sendDmPrompt {
  color: #ffffff;
}
.conversationList .conversationBodyRoot .cautionMessage {
  color: #525252;
}
.darkmode .conversationList .conversationBodyRoot .cautionMessage {
  color: #b3b3b3;
}

.conversationListItem {
  border-color: #e0e0e0;
  background-color: transparent;
}
.darkmode .conversationListItem {
  border-color: #2d3e50;
}
.conversationListItem .replyIconSvg svg {
  fill: #49494f;
}
.darkmode .conversationListItem .replyIconSvg svg, .hasDarkBackground .conversationListItem .replyIconSvg svg {
  fill: #ffffff;
}
.darkmode .conversationListItem .messageDiv, .hasDarkBackground .conversationListItem .messageDiv {
  color: #ffffff;
}
.conversationListItem.currentConvo {
  background-color: #d5ebf8;
}
.darkmode .conversationListItem.currentConvo, .hasDarkBackground .conversationListItem.currentConvo {
  background-color: #2d3e50;
}
.conversationListItem.unreadBg {
  background-color: #fceadc;
}
.darkmode .conversationListItem.unreadBg, .hasDarkBackground .conversationListItem.unreadBg {
  background-color: #885336;
}
.conversationListItem.selected {
  background-color: #e0e0e0;
}
.darkmode .conversationListItem.selected, .hasDarkBackground .conversationListItem.selected {
  background-color: #434649;
}
.conversationListItem .closeBtnContainer {
  fill: #888;
}
.conversationListItem .closeBtnContainer:hover {
  fill: #222;
}
.darkmode .conversationListItem .closeBtnContainer:hover, .hasDarkBackground .conversationListItem .closeBtnContainer:hover {
  fill: #d1d1d1;
}
.conversationListItem .timeString {
  color: #6c6c78;
}
.darkmode .conversationListItem .timeString {
  color: #888;
}
.conversationListItem .flagged {
  color: #cc0000;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.darkmode .conversationListItem .flagged {
  color: #dc0000;
}
.conversationListItem .message-content-wrapper {
  display: flex;
  align-items: center;
  gap: 5px;
  overflow: hidden;
}
.conversationListItem .flagged-message-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.conversationListItem .flagged-message-icon svg {
  width: 14px;
  height: 14px;
  fill: #cc0000;
}
.darkmode .conversationListItem .flagged-message-icon svg {
  fill: #dc0000;
}

.avatarBubble div {
  color: #ffffff;
}
.avatarBubble .broadcaster {
  background-color: #f47321;
}
.avatarBubble .mod {
  background-color: #dc0000;
}
.avatarBubble .inFanclub {
  background-color: #009900;
}
.avatarBubble .tippedTonsRecently {
  background-color: #804baa;
}
.avatarBubble .tippedALotRecently {
  background-color: #be6aff;
}
.avatarBubble .tippedRecently {
  background-color: #1e5cfb;
}
.avatarBubble .hasTokens {
  background-color: #69a;
}
.avatarBubble .defaultUser {
  background-color: #939393;
}

.PMControlBar {
  background-color: #ffffff;
  border-bottom-color: #bdbdbd;
  color: #494949;
}
.darkmode .PMControlBar {
  background-color: #202c39;
  border-bottom-color: #2d3e50;
  color: #b3b3b3;
}
.PMControlBar .backButton {
  color: #0471a1;
}
.darkmode .PMControlBar .backButton {
  color: #68b5f0;
}

.evolveMode .PMControlBar {
  background-color: var(--background-neutral);
  border-bottom-color: var(--background-low-contrast);
  color: var(--text-primary);
}
.evolveMode .PMControlBar .backButton {
  color: var(--text-brand-secondary);
}
.evolveMode .LoadHistoryMessagesDOM {
  color: var(--text-primary);
}

.SearchBar {
  border-color: #e0e0e0;
}
.darkmode .SearchBar {
  border-color: #2d3e50;
}
.SearchBar .searchUserInput {
  color: #000000;
  border-color: #bdbdbd;
}
.SearchBar .searchUserInput:focus {
  border-color: #000000;
}
.darkmode .SearchBar .searchUserInput {
  border-color: #2d3e50;
}
.darkmode .SearchBar .searchUserInput, .hasDarkBackground .SearchBar .searchUserInput {
  color: #ffffff;
}
.darkmode .SearchBar .searchUserInput:focus, .hasDarkBackground .SearchBar .searchUserInput:focus {
  border-color: #ffffff;
}

.noteIconSvg svg {
  stroke: #6c6c78;
  fill: transparent;
  color: transparent;
}
.darkmode .noteIconSvg svg, .draggableCanvasWindow .noteIconSvg svg {
  stroke: #b3b3b3;
}
.isTip .noteIconSvg svg {
  stroke: #6c6c78;
}

.followerStarSvg svg {
  fill: #ffc72c;
  stroke: black;
  stroke-width: 1px;
}

.trustedViewerShieldSvg svg {
  fill: var(--trusted-viewer-modal-link, #0a7dc2);
}

.evolveMode .noteIconSvg svg {
  stroke: var(--text-secondary);
}
.evolveMode .trustedViewerShieldSvg {
  color: var(--text-brand-secondary);
}

#ChatTabContainer {
  border: 1px solid #acacac;
}
#ChatTabContainer.modern, .darkmode #ChatTabContainer {
  border: none;
}
#ChatTabContainer {
  background-color: #fff;
  border-radius: 4px 4px 2px 2px;
}
.darkmode #ChatTabContainer {
  border-color: #2d3e50;
}
#ChatTabContainer.modern.embedChatTabContainer {
  border-right-color: #e0e0e0;
}
.darkmode #ChatTabContainer {
  background-color: #202c39;
}
#ChatTabContainer #tab-row {
  background-color: #7f7f7f;
  border-bottom: none;
}
.darkmode #ChatTabContainer #tab-row {
  background-color: #17202a;
}
#ChatTabContainer .refreshUsersLink {
  color: #0c6a93;
}
.darkmode #ChatTabContainer .refreshUsersLink {
  color: #68b5f0;
}

.evolveMode#ChatTabContainer {
  background: var(--background-neutral);
  border: 1px solid var(--border-low);
  border-radius: var(--corner-radius-md);
}
.evolveMode#ChatTabContainer #tab-row {
  background: var(--background-neutral);
  border-bottom: 1px solid var(--border-low);
  padding: var(--spacing-xs) var(--spacing-sm) 0 var(--spacing-sm);
}
.evolveMode#ChatTabContainer #tab-row .settingsWrapper {
  display: flex;
}
.evolveMode#ChatTabContainer #tab-row .tab {
  background: var(--background-neutral);
  color: var(--text-secondary);
  cursor: pointer;
  float: left;
  min-width: 16px;
  padding: var(--spacing-sm) var(--spacing-sm) 0 var(--spacing-sm);
  text-size-adjust: none;
  white-space: nowrap;
  -webkit-text-size-adjust: none;
  user-select: none;
  font-family: "UbuntuMedium", Arial, Helvetica, sans-serif;
  font-size: 14px;
  line-height: 20px;
}
.evolveMode#ChatTabContainer #tab-row .tab.active {
  color: var(--text-brand-secondary);
}
.evolveMode#ChatTabContainer #tab-row .tab.active .underline {
  visibility: visible;
}
.evolveMode#ChatTabContainer #tab-row .tab:not(.active):hover {
  color: var(--text-primary);
}
.evolveMode#ChatTabContainer #tab-row .tab .textContainer {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}
.evolveMode#ChatTabContainer #tab-row .tab .underline {
  background-color: var(--text-brand-secondary);
  border-radius: 4px 4px 0 0;
  height: 2px;
  visibility: hidden;
}
.evolveMode#ChatTabContainer .ExpandableDropDownMenuWrapper {
  display: flex;
  height: 20px;
  justify-content: center;
}
.evolveMode#ChatTabContainer .ExpandableDropDownMenuWrapper svg {
  margin-top: -2px;
}
.evolveMode#DraggableChatTabContainer {
  background: var(--background-light-transparent);
  border: none;
  border-radius: var(--corner-radius-md);
}
.evolveMode#DraggableChatTabContainer #tab-row {
  background: var(--background-black-light-transparent, rgba(16, 16, 16, 0.48));
  border-radius: 12px 12px 0 0;
  /* blur/blur-mid */
  backdrop-filter: var(--blur-mid-backdrop-filter);
  padding: var(--spacing-xs) var(--spacing-sm) 0 var(--spacing-sm);
}
.evolveMode#DraggableChatTabContainer #tab-row .settingsWrapper {
  display: flex;
}
.evolveMode#DraggableChatTabContainer #tab-row .tab {
  background: var(--background-light-transparent);
  color: var(--text-white, #fff);
  cursor: pointer;
  float: left;
  min-width: 16px;
  padding: var(--spacing-sm) var(--spacing-sm) 0 var(--spacing-sm);
  text-size-adjust: none;
  white-space: nowrap;
  -webkit-text-size-adjust: none;
  user-select: none;
  font-family: "UbuntuMedium", Arial, Helvetica, sans-serif;
  font-size: 14px;
  line-height: 20px;
}
.evolveMode#DraggableChatTabContainer #tab-row .tab.active {
  color: var(--color-secondary-60, #00a9e0);
}
.evolveMode#DraggableChatTabContainer #tab-row .tab.active .underline {
  visibility: visible;
}
.evolveMode#DraggableChatTabContainer #tab-row .tab:hover {
  color: var(--color-secondary-60, #00a9e0);
}
.evolveMode#DraggableChatTabContainer #tab-row .tab .textContainer {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}
.evolveMode#DraggableChatTabContainer #tab-row .tab .underline {
  background-color: var(--color-secondary-60, #00a9e0);
  border-radius: 4px 4px 0 0;
  height: 2px;
  visibility: hidden;
}
.evolveMode#DraggableChatTabContainer .ExpandableDropDownMenuWrapper {
  display: flex;
  height: 20px;
  justify-content: center;
}
.evolveMode#DraggableChatTabContainer .ExpandableDropDownMenuWrapper svg {
  margin-top: -2px;
}
.evolveMode#DraggableChatTabContainer #tab-row.fullscreenEvolve {
  background: var(--background-black-light-transparent, rgba(16, 16, 16, 0.48));
  border: none;
}
.draggableCanvasChatWindow:hover .evolveMode#DraggableChatTabContainer #tab-row.fullscreenEvolve, .draggableCanvasChatWindow.resizing .evolveMode#DraggableChatTabContainer #tab-row.fullscreenEvolve {
  background-color: var(--background-black-transparent, rgba(16, 16, 16, 0.88));
}

.ChatTabContents .message-list {
  background-color: #fff;
  color: #494949;
}
.darkmode .ChatTabContents .message-list {
  background-color: transparent;
  color: #ffffff;
}
.ChatTabContents .message-list .msg-text {
  color: #494949;
}
.darkmode .ChatTabContents .message-list .msg-text {
  color: #ffffff;
}
.ChatTabContents .message-list .msg-text .roomNotice {
  color: #494949;
}
.darkmode .ChatTabContents .message-list .msg-text .roomNotice {
  color: #ffffff;
}
.ChatTabContents .message-list .msg-text .roomNotice.titleChange {
  color: #f47321;
}
.darkmode .ChatTabContents .message-list .msg-text .roomNotice.titleChange {
  color: #f47321;
}

#FVChatTabContents .roomNotice,
.theatermodePureChat .roomNotice {
  color: #aaaaaa;
}
#FVChatTabContents .roomNotice.titleChange,
.theatermodePureChat .roomNotice.titleChange {
  color: #f47321;
}

.ChatTabContents .chat-input-div,
.ChatTabContents .inputDiv,
#SplitModeChatSettingsTab .chat-input-div,
#SplitModeChatSettingsTab .inputDiv,
#UserListTab .chat-input-div,
#UserListTab .inputDiv,
#FVChatTabContents .chat-input-div,
#FVChatTabContents .inputDiv,
#FVChatSettingsTab .chat-input-div,
#FVChatSettingsTab .inputDiv {
  background-color: #ffffff;
}
.darkmode .ChatTabContents .chat-input-div,
.darkmode .ChatTabContents .inputDiv,
.darkmode #SplitModeChatSettingsTab .chat-input-div,
.darkmode #SplitModeChatSettingsTab .inputDiv,
.darkmode #UserListTab .chat-input-div,
.darkmode #UserListTab .inputDiv,
.darkmode #FVChatTabContents .chat-input-div,
.darkmode #FVChatTabContents .inputDiv,
.darkmode #FVChatSettingsTab .chat-input-div,
.darkmode #FVChatSettingsTab .inputDiv {
  background-color: #2a323f;
}

#FVChatTabContents .chat-input-div,
#FVChatSettingsTab .chat-input-div {
  background-color: #ffffff;
}
.darkmode #FVChatTabContents .chat-input-div,
.darkmode #FVChatSettingsTab .chat-input-div {
  background-color: #2a323f;
}
.pureChat #FVChatTabContents .chat-input-div,
.pureChat #FVChatSettingsTab .chat-input-div {
  background-color: rgba(0, 0, 0, 0.15);
}
.pureChat #FVChatTabContents .chat-input-div .chat-input-form,
.pureChat #FVChatTabContents .chat-input-div .chat-input-field,
.pureChat #FVChatSettingsTab .chat-input-div .chat-input-form,
.pureChat #FVChatSettingsTab .chat-input-div .chat-input-field {
  color: #ffffff;
}
#FVChatTabContents .chat-input-div .chat-input-form,
#FVChatTabContents .chat-input-div .chat-input-field,
#FVChatSettingsTab .chat-input-div .chat-input-form,
#FVChatSettingsTab .chat-input-div .chat-input-field {
  color: #000000;
}
.darkmode #FVChatTabContents .chat-input-div .chat-input-form,
.darkmode #FVChatTabContents .chat-input-div .chat-input-field,
.darkmode #FVChatSettingsTab .chat-input-div .chat-input-form,
.darkmode #FVChatSettingsTab .chat-input-div .chat-input-field {
  color: #ffffff;
}
#FVChatTabContents .chat-input-div .tip-button:focus,
#FVChatSettingsTab .chat-input-div .tip-button:focus {
  outline: -webkit-focus-ring-color auto 1px;
}
.darkmode #FVChatTabContents .chat-input-div .tip-button:is(textarea, input, button):is(:not(button, input[type=submit], input[type=button])),
.darkmode #FVChatSettingsTab .chat-input-div .tip-button:is(textarea, input, button):is(:not(button, input[type=submit], input[type=button])) {
  background-color: #202c39;
}
.darkmode #FVChatTabContents .chat-input-div .tip-button:is(textarea, input, button):focus,
.darkmode #FVChatSettingsTab .chat-input-div .tip-button:is(textarea, input, button):focus {
  outline: none;
  box-shadow: 0 0 0 2px #68b5f0;
}
.darkmode #FVChatTabContents .chat-input-div .tip-button:is(select),
.darkmode #FVChatSettingsTab .chat-input-div .tip-button:is(select) {
  background-color: #202c39;
}
.darkmode #FVChatTabContents .chat-input-div .tip-button:is(select):focus,
.darkmode #FVChatSettingsTab .chat-input-div .tip-button:is(select):focus {
  outline: 2px solid #68b5f0;
}
#FVChatTabContents .chat-input-div .tip-button, .darkmode #FVChatTabContents .chat-input-div .tip-button,
#FVChatSettingsTab .chat-input-div .tip-button,
.darkmode #FVChatSettingsTab .chat-input-div .tip-button {
  background-color: #009900;
  color: #ffffff;
  border: 1px solid #288a09;
  border-radius: 4px;
}
#FVChatTabContents .msg-text,
#FVChatSettingsTab .msg-text {
  color: #ffffff;
}
.darkmode #FVChatTabContents .msg-text,
.darkmode #FVChatSettingsTab .msg-text {
  color: rgb(222, 222, 222);
}
.pureChat #FVChatTabContents .msg-list-wrapper-fvm,
.pureChat #FVChatSettingsTab .msg-list-wrapper-fvm {
  text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
}
.pureChat #FVChatTabContents .msg-list-wrapper-fvm .pureChatColor,
.pureChat #FVChatSettingsTab .msg-list-wrapper-fvm .pureChatColor {
  color: var(--pureChatColor);
}
.pureChat #FVChatTabContents .msg-list-wrapper-fvm .pureHidden,
.pureChat #FVChatSettingsTab .msg-list-wrapper-fvm .pureHidden {
  visibility: hidden;
}

.msg-link {
  color: #0c6a93;
}
.darkmode .msg-link, .hasDarkBackground .msg-link {
  color: #68b5f0;
}
.bright-background .msg-link {
  color: #0c6a93;
}

.appPreview {
  color: #000000;
  background-color: #ffffff;
  border: 1px solid rgb(235, 236, 236);
}
.darkmode .appPreview {
  color: #ffffff;
  background-color: #17202a;
  border: 1px solid #2d3e50;
}
.appPreview .subText {
  color: #808285;
}
.darkmode .appPreview .subText {
  color: #b3b3b3;
}

.evolveMode #ChatTabContainer .ChatTabContents {
  background-color: var(--background-neutral);
}
.evolveMode #ChatTabContainer .ChatTabContents .message-list,
.evolveMode #ChatTabContainer .ChatTabContents .msg-list-wrapper-split {
  background-color: transparent;
}
.evolveMode #ChatTabContainer .ChatTabContents .message-list,
.evolveMode #ChatTabContainer .ChatTabContents .msg-list-wrapper-split {
  color: var(--text-primary);
}
.evolveMode #ChatTabContainer .ChatTabContents .message-list .msg-text,
.evolveMode #ChatTabContainer .ChatTabContents .msg-list-wrapper-split .msg-text {
  color: var(--text-primary);
}
.evolveMode #ChatTabContainer .ChatTabContents .message-list .msg-text .roomNotice,
.evolveMode #ChatTabContainer .ChatTabContents .msg-list-wrapper-split .msg-text .roomNotice {
  color: var(--text-primary);
}
.evolveMode #ChatTabContainer .ChatTabContents .message-list .msg-text .isTip,
.evolveMode #ChatTabContainer .ChatTabContents .msg-list-wrapper-split .msg-text .isTip {
  background-color: var(--background-chat-tip);
}
.evolveMode #ChatTabContainer .ChatTabContents .msg-link {
  color: var(--text-brand-secondary);
}
.bright-background .evolveMode #ChatTabContainer .ChatTabContents .msg-link {
  color: var(--color-secondary-40);
}
.evolveMode #ChatTabContainer .ChatTabContents .roomNotice.titleChange a {
  color: var(--text-brand-secondary);
}
.evolveMode #FVChatTabContents,
.evolveMode #FVChatSettingsTab {
  container-type: inline-size;
}
.evolveMode #FVChatTabContents .msg-list-wrapper-fvm,
.evolveMode #FVChatSettingsTab .msg-list-wrapper-fvm {
  box-sizing: border-box;
  padding: 12px 16px;
}
.evolveMode #FVChatTabContents .chat-row-div,
.evolveMode #FVChatSettingsTab .chat-row-div {
  display: flex;
  padding: var(--spacing-md) var(--spacing-lg);
  justify-content: flex-end;
  align-items: flex-end;
  gap: var(--spacing-xs);
  align-self: stretch;
}
.evolveMode #FVChatTabContents .chat-input-div,
.evolveMode #FVChatSettingsTab .chat-input-div {
  display: flex;
  padding: var(--spacing-sm, 8px) var(--spacing-md, 12px) var(--spacing-md, 12px) var(--spacing-md, 12px);
  justify-content: flex-end;
  align-items: center;
  gap: var(--spacing-xs);
  flex: 1 0 0;
  border-radius: var(--corner-radius-2xl, 24px);
  background: var(--background-low-contrast);
  min-width: 0;
}
.evolveMode #FVChatTabContents .chat-input-div .chat-input-form,
.evolveMode #FVChatSettingsTab .chat-input-div .chat-input-form {
  display: flex;
  flex: 1 0 0;
  min-width: 0;
  background: transparent;
}
.evolveMode #FVChatTabContents .chat-input-div .chat-input-form .chat-input-field,
.evolveMode #FVChatSettingsTab .chat-input-div .chat-input-form .chat-input-field {
  flex: 1 0 0;
  color: var(--text-primary);
  font-family: "UbuntuRegular", Arial, Helvetica, sans-serif;
  font-size: 14px;
  line-height: 20px;
}
.evolveMode #FVChatTabContents .fullvideoEmojiButtonChat,
.evolveMode #FVChatTabContents .fullvideoEmojiButtonPm,
.evolveMode #FVChatSettingsTab .fullvideoEmojiButtonChat,
.evolveMode #FVChatSettingsTab .fullvideoEmojiButtonPm {
  display: flex;
  color: var(--text-button-brand);
  cursor: pointer;
  align-self: flex-end;
}
.evolveMode #FVChatTabContents .isTip,
.evolveMode #FVChatSettingsTab .isTip {
  background-color: var(--background-chat-tip);
  text-shadow: none;
}
@container (max-width: 185px) {
  .evolveMode #FVChatTabContents .chat-row-div,
  .evolveMode #FVChatSettingsTab .chat-row-div {
    gap: 0;
    padding: 12px 8px;
  }
  .evolveMode #FVChatTabContents .chat-input-div,
  .evolveMode #FVChatSettingsTab .chat-input-div {
    margin-right: 8px;
  }
  .evolveMode #FVChatTabContents .fullvideoEmojiButtonChat,
  .evolveMode #FVChatTabContents .fullvideoEmojiButtonPm,
  .evolveMode #FVChatSettingsTab .fullvideoEmojiButtonChat,
  .evolveMode #FVChatSettingsTab .fullvideoEmojiButtonPm {
    display: none;
  }
}
.evolveMode .ChatTabContents {
  container-type: inline-size;
}
.evolveMode .ChatTabContents .inputDiv {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--spacing-xs);
  flex: 1 0 0;
  background: var(--background-low-contrast);
  color: var(--text-primary);
  border: none;
  border-radius: var(--corner-radius-2xl, 24px);
  min-width: 0;
  padding: var(--spacing-sm) var(--spacing-sm) var(--spacing-sm) var(--spacing-md);
  position: relative;
}
.evolveMode .ChatTabContents .inputDiv .chat-input-form {
  display: flex;
  flex: 1 0 0;
  background: transparent;
  min-width: 0;
}
.evolveMode .ChatTabContents .inputDiv .chat-input-form .chat-input-field {
  flex: 1 0 0;
  color: var(--text-primary);
  font-family: "UbuntuRegular", Arial, Helvetica, sans-serif;
  font-size: 14px;
  line-height: 20px;
}
.evolveMode .ChatTabContents .chat-row-div {
  gap: var(--spacing-xs);
  padding: var(--spacing-md) var(--spacing-md);
  width: 100%;
  align-items: flex-end;
}
.evolveMode .ChatTabContents .chat-row-div .theatermodeEmojiButtonChat,
.evolveMode .ChatTabContents .chat-row-div .theatermodeEmojiButtonPm {
  display: flex;
  color: var(--text-button-brand);
  cursor: pointer;
  align-self: flex-end;
}
.evolveMode .ChatTabContents .chat-row-div .SendButton {
  flex: 0 0 auto;
}
@container (max-width: 185px) {
  .evolveMode .ChatTabContents .chat-row-div {
    gap: 0;
    padding: 12px 8px;
  }
  .evolveMode .ChatTabContents .chat-row-div .inputDiv {
    margin-right: 8px;
  }
  .evolveMode .ChatTabContents .chat-row-div .theatermodeEmojiButtonChat,
  .evolveMode .ChatTabContents .chat-row-div .theatermodeEmojiButtonPm {
    display: none;
  }
}

.BroadcastChatSettings .chat-settings-input:focus, #FVChatSettingsTab .chat-settings-input:focus, #SplitModeChatSettingsTab:not(.evolveMode) .chat-settings-input:focus {
  outline: -webkit-focus-ring-color auto 1px;
}
.darkmode .BroadcastChatSettings .chat-settings-input:is(textarea, input, button):is(:not(button, input[type=submit], input[type=button])), .darkmode #FVChatSettingsTab .chat-settings-input:is(textarea, input, button):is(:not(button, input[type=submit], input[type=button])), .darkmode #SplitModeChatSettingsTab:not(.evolveMode) .chat-settings-input:is(textarea, input, button):is(:not(button, input[type=submit], input[type=button])) {
  background-color: #202c39;
}
.darkmode .BroadcastChatSettings .chat-settings-input:is(textarea, input, button):focus, .darkmode #FVChatSettingsTab .chat-settings-input:is(textarea, input, button):focus, .darkmode #SplitModeChatSettingsTab:not(.evolveMode) .chat-settings-input:is(textarea, input, button):focus {
  outline: none;
  box-shadow: 0 0 0 2px #68b5f0;
}
.darkmode .BroadcastChatSettings .chat-settings-input:is(select), .darkmode #FVChatSettingsTab .chat-settings-input:is(select), .darkmode #SplitModeChatSettingsTab:not(.evolveMode) .chat-settings-input:is(select) {
  background-color: #202c39;
}
.darkmode .BroadcastChatSettings .chat-settings-input:is(select):focus, .darkmode #FVChatSettingsTab .chat-settings-input:is(select):focus, .darkmode #SplitModeChatSettingsTab:not(.evolveMode) .chat-settings-input:is(select):focus {
  outline: 2px solid #68b5f0;
}
.BroadcastChatSettings .chat-settings-input, #FVChatSettingsTab .chat-settings-input, #SplitModeChatSettingsTab:not(.evolveMode) .chat-settings-input {
  border-color: #b1b1b1;
}
.darkmode .BroadcastChatSettings .chat-settings-input, .darkmode #FVChatSettingsTab .chat-settings-input, .darkmode #SplitModeChatSettingsTab:not(.evolveMode) .chat-settings-input {
  border-color: #6e6f70;
  color: #ffffff;
}
.BroadcastChatSettings .chat-settings-select:focus, #FVChatSettingsTab .chat-settings-select:focus, #SplitModeChatSettingsTab:not(.evolveMode) .chat-settings-select:focus {
  outline: -webkit-focus-ring-color auto 1px;
}
.darkmode .BroadcastChatSettings .chat-settings-select:is(textarea, input, button):is(:not(button, input[type=submit], input[type=button])), .darkmode #FVChatSettingsTab .chat-settings-select:is(textarea, input, button):is(:not(button, input[type=submit], input[type=button])), .darkmode #SplitModeChatSettingsTab:not(.evolveMode) .chat-settings-select:is(textarea, input, button):is(:not(button, input[type=submit], input[type=button])) {
  background-color: #202c39;
}
.darkmode .BroadcastChatSettings .chat-settings-select:is(textarea, input, button):focus, .darkmode #FVChatSettingsTab .chat-settings-select:is(textarea, input, button):focus, .darkmode #SplitModeChatSettingsTab:not(.evolveMode) .chat-settings-select:is(textarea, input, button):focus {
  outline: none;
  box-shadow: 0 0 0 2px #68b5f0;
}
.darkmode .BroadcastChatSettings .chat-settings-select:is(select), .darkmode #FVChatSettingsTab .chat-settings-select:is(select), .darkmode #SplitModeChatSettingsTab:not(.evolveMode) .chat-settings-select:is(select) {
  background-color: #202c39;
}
.darkmode .BroadcastChatSettings .chat-settings-select:is(select):focus, .darkmode #FVChatSettingsTab .chat-settings-select:is(select):focus, .darkmode #SplitModeChatSettingsTab:not(.evolveMode) .chat-settings-select:is(select):focus {
  outline: 2px solid #68b5f0;
}
.BroadcastChatSettings .chat-settings-select, #FVChatSettingsTab .chat-settings-select, #SplitModeChatSettingsTab:not(.evolveMode) .chat-settings-select {
  -webkit-appearance: menulist;
}
.darkmode .BroadcastChatSettings .chat-settings-select, .darkmode #FVChatSettingsTab .chat-settings-select, .darkmode #SplitModeChatSettingsTab:not(.evolveMode) .chat-settings-select {
  color: #ffffff !important;
}
.BroadcastChatSettings .chat-settings-subheader, #FVChatSettingsTab .chat-settings-subheader, #SplitModeChatSettingsTab:not(.evolveMode) .chat-settings-subheader {
  color: #6f6f6f;
}
.darkmode .BroadcastChatSettings .chat-settings-subheader, .darkmode #FVChatSettingsTab .chat-settings-subheader, .darkmode #SplitModeChatSettingsTab:not(.evolveMode) .chat-settings-subheader {
  color: #ababab;
}
.BroadcastChatSettings .tooltip-info-icon, #FVChatSettingsTab .tooltip-info-icon, #SplitModeChatSettingsTab:not(.evolveMode) .tooltip-info-icon {
  cursor: pointer;
  height: 10px;
  width: 10px;
  display: inline-block;
  align-self: center;
  border-radius: 50%;
  margin-left: 4px;
  background: url(../../images/broadcastnotification/infoicon.svg?950c74b2d1f3) right 50%/contain no-repeat transparent;
}

#SplitModeChatSettingsTab:not(.evolveMode) .chat-settings-input {
  background-color: transparent;
}
#SplitModeChatSettingsTab:not(.evolveMode) .link {
  color: #0c6a93;
}
.darkmode #SplitModeChatSettingsTab:not(.evolveMode) .link {
  color: #68b5f0;
}

#FVChatSettingsTab {
  color: #ffffff;
}
.darkmode #FVChatSettingsTab .chat-settings-input:not(.slider, .colorSwatch) {
  background-color: #202c39;
  border-color: #2a323f;
}
#FVChatSettingsTab .chat-settings-subheader {
  color: #b3b3b3;
}
#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: #202c39;
}
.darkmode #FVChatSettingsTab .chat-input-div .chat-input-field {
  color: #ffffff;
}

.BroadcastChatSettings .link {
  color: #0c6a93;
}
.darkMode .BroadcastChatSettings .link {
  color: #68b5f0;
}
.BroadcastChatSettings .ColorPickerModal input {
  background-color: field;
  color: fieldText;
}

.BaseTabsContainer .inputDiv {
  background-color: transparent;
  border-color: #acacac;
}
.darkmode .BaseTabsContainer .inputDiv {
  border-color: #2d3e50;
}
.BaseTabsContainer .inputDiv .msg-input {
  color: #000;
}
.darkmode .BaseTabsContainer .inputDiv .msg-input {
  color: #ffffff;
}
.BaseTabsContainer .chat-row-div {
  display: flex;
  padding: 4px 8px;
  align-items: center;
  gap: 4px;
  min-height: 44px;
  box-sizing: border-box;
}
.BaseTabsContainer .chat-row-div .inputDiv,
.BaseTabsContainer .chat-row-div .chat-input-div {
  width: 100%;
}

#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: #17202a;
}
.darkmode #tab-row {
  background-color: #17202a;
}

.tab {
  background-color: rgb(201, 201, 201);
}
.darkmode .tab {
  background-color: transparent;
}
.tab:hover {
  background-color: #fff;
  color: #f47321;
}
.darkmode .tab:hover {
  background-color: #202c39;
  color: #f47321;
}
.tab.active {
  background-color: #fff;
  color: #f47321;
  cursor: default;
}
.darkmode .tab.active {
  background-color: #202c39;
  color: #f47321;
}
.tab.collapsed {
  background-color: transparent;
}
.tab.collapsed:hover {
  background-color: rgb(201, 201, 201);
}
.darkmode .tab.collapsed:hover {
  background-color: #17202a;
}

.chat-tabs-dropdown-border {
  border-color: rgb(201, 201, 201);
  box-shadow: 0px 4px 13px rgba(0, 0, 0, 0.32);
}
.darkmode .chat-tabs-dropdown-border {
  border-color: #17202a;
}

.evolveMode.dropdown {
  background-color: var(--background-others-popup-neutral);
  box-shadow: 0 0 var(--blur-200) 0 var(--drop-shadow-low);
}
.evolveMode.dropdown .tab {
  background: transparent;
  border: none;
  color: var(--text-primary);
  cursor: pointer;
  padding: var(--spacing-sm) var(--spacing-md);
  width: 100%;
  text-align: center;
  font-family: "UbuntuRegular", Arial, Helvetica, sans-serif;
  font-size: 12px;
  line-height: 16px;
}
.evolveMode.dropdown .tab:hover {
  background: var(--overlay-button-hover);
  border-radius: var(--corner-radius-lg);
}
.evolveMode.dropdown .tab.active {
  color: var(--text-brand-secondary);
}

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

@media screen and (min-width: 0\0 ) {
  .pm-control-bar span {
    display: inline-block;
    height: 100%;
  }
}
#DmWindowBar .pm-more-menus li:hover {
  color: #ccc !important;
}
#DmWindowBar .PrivateChatWindow form input[type=radio] {
  height: 14px;
  width: 14px;
}
#DmWindowBar .PrivateChatWindow form label {
  margin: 3px 8px !important;
}
#DmWindowBar .PrivateChatWindow .send-button {
  background-color: #f47321;
  border: 1px solid #d56125;
  cursor: pointer;
}
#DmWindowBar .PrivateChatWindow .send-button.disabled {
  background-color: grey;
  border: 1px solid grey;
  cursor: wait;
}
#DmWindowBar .PrivateChatWindow div.corner div.me {
  border-radius: 10px 10px 4px 10px !important;
}
#DmWindowBar .PrivateChatWindow div.corner div.other {
  border-radius: 10px 10px 10px 4px !important;
}
#DmWindowBar img.emoticonImage {
  max-width: 100%;
  max-height: 100%;
  height: auto;
  width: auto;
  display: inline-block;
}

.userPanel {
  color: #222;
}
.darkmode .userPanel {
  color: #ccc;
}

@font-face {
  font-family: "UbuntuRegular";
  src: url("../../fonts/ubuntur-webfont.eot?1188017abdc0");
  src: url("../../fonts/ubuntur-webfont.eot?&1188017abdc0#iefix") format("eot"), url("../../fonts/ubuntur-webfont.woff?896a82003cd1") format("woff"), url("../../fonts/ubuntur-webfont.ttf?37cf452b3f58") format("truetype"), url("../../fonts/ubuntur-webfont.svg?396700312810#webfontH0ji1hXa") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "UbuntuBold";
  src: url("../../fonts/ubuntub-webfont.eot?a870ebadce32");
  src: url("../../fonts/ubuntub-webfont.eot?&a870ebadce32#iefix") format("eot"), url("../../fonts/ubuntub-webfont.woff?6455d1004bc5") format("woff"), url("../../fonts/ubuntub-webfont.ttf?abee57aeee27") format("truetype"), url("../../fonts/ubuntub-webfont.svg?693d742037eb#webfontOIyUgfKw") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "UbuntuMedium";
  src: url("../../fonts/ubuntum-webfont.eot?d8f8ba0da549");
  src: url("../../fonts/ubuntum-webfont.eot?&d8f8ba0da549#iefix") format("eot"), url("../../fonts/ubuntum-webfont.woff?a7fc63c36394") format("woff"), url("../../fonts/ubuntum-webfont.ttf?b720a4d699c2") format("truetype"), url("../../fonts/ubuntum-webfont.svg?c08a26c0b9c4#webfontl8qOUOft") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "InterRegular";
  src: url("../../fonts/Inter_18pt-regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
:root {
  --cbt-scroll-down-button-base-bg: rgba(0, 0, 0, 0.8);
  --cbt-scroll-down-button-highlight-bg: rgba(46, 46, 46, 0.8);
}

@keyframes flashScrollDownButton {
  0%, 20% {
    background-color: var(--cbt-scroll-down-button-highlight-bg);
  }
  100% {
    background-color: var(--cbt-scroll-down-button-base-bg);
  }
}
.scrollDownButtonWrapper {
  position: absolute;
  display: flex;
  justify-content: center;
  width: 100%;
  pointer-events: none;
}
.scrollDownButtonWrapper .scrollDownButton {
  display: flex;
  pointer-events: all;
  box-sizing: border-box;
  padding: 8px min(5%, 16px);
  border-radius: 4px;
  background-color: var(--cbt-scroll-down-button-base-bg);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  color: #ffffff;
  cursor: pointer;
}
.scrollDownButtonWrapper .scrollDownButton.flash {
  animation-name: flashScrollDownButton;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
}
.scrollDownButtonWrapper .scrollDownButton:hover {
  background-color: var(--cbt-scroll-down-button-highlight-bg);
}
.scrollDownButtonWrapper .scrollDownButton svg {
  margin-right: 8px;
  vertical-align: text-top;
  flex-shrink: 0;
}
.scrollDownButtonWrapper .scrollDownButton .scrollDownText {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 12px;
  min-width: 0;
}

.evolveMode .scrollDownButtonWrapper .scrollDownButton {
  background: var(--background-button-grey-light-transparent, rgba(243, 243, 243, 0.48));
  -webkit-backdrop-filter: var(--blur-high-backdrop-filter);
  backdrop-filter: var(--blur-high-backdrop-filter);
  border-radius: var(--corner-radius-md, 12px);
  color: var(--text-button-neutral, #101010);
  margin-bottom: 4px;
  padding: var(--spacing-md, 12px) var(--spacing-lg, 16px);
}
.evolveMode .scrollDownButtonWrapper .scrollDownButton svg path:first-child {
  stroke: var(--text-button-neutral, #101010);
}
.evolveMode .scrollDownButtonWrapper .scrollDownButton svg path:not(:first-child) {
  fill: var(--text-button-neutral, #101010);
}
.evolveMode .reactScrollButton {
  pointer-events: auto;
  position: static;
  transform: unset;
}

#SearchInput {
  display: block;
  position: relative;
}
#SearchInput.RoomlistSearchInput {
  top: 3px;
  z-index: 2;
}
#SearchInput.RoomlistSearchInput .inputDelete {
  display: none;
  position: absolute;
  width: 18px;
  height: 20px;
  top: 2px;
  right: 20px;
  visibility: hidden;
}
#SearchInput.RoomlistSearchInput input.search_input {
  display: none;
  font-size: 12px;
  height: 21px;
  margin-top: 0;
  outline: none;
  position: relative;
}
#SearchInput #filter_search_form {
  position: relative;
  overflow: unset;
  height: unset;
}
#SearchInput input.search_input {
  border-color: #bdbdbd;
  border-radius: 3px;
  border-style: solid;
  border-width: 1px;
  font-family: "UbuntuRegular", Arial, Helvetica, sans-serif;
  right: 0;
}
.darkmode #SearchInput input.search_input {
  color: #ffffff;
  border-color: #6e6f70;
  background-color: #17202a;
}
#SearchInput input.search_input.maximized {
  padding: 0px 40px 2px 5px;
  width: 197px;
}
#SearchInput input.search_input.maximized:placeholder-shown {
  width: 222px;
  padding-right: 15px;
  text-overflow: ellipsis;
}
#SearchInput input.search_input.minimized {
  padding: 0px 40px 2px 5px;
  width: 197px;
}
@media (max-width: 995px) {
  #SearchInput input.search_input.minimized {
    width: 55px;
  }
}
#SearchInput .suggestionsDiv {
  border-color: #bdbdbd;
  margin-right: -15px;
  border-width: 1px;
  border-style: solid;
  display: none;
  font: 12px UbuntuBold, Arial, Helvetica, sans-serif;
  position: absolute;
  top: 25px;
  width: 242px;
}
.darkmode #SearchInput .suggestionsDiv {
  border-color: #2a323f;
  box-shadow: 0px 0px 32px rgba(0, 0, 0, 0.32);
}
#SearchInput .suggestionsDiv a {
  color: #494949;
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
}
.darkmode #SearchInput .suggestionsDiv a {
  color: #b3b3b3;
}
#SearchInput .suggestionsDiv .icon-online {
  background: url(../../tsdefaultassets/search_online_broadcaster.svg?e5b99c9c4dd7) no-repeat center center;
}
.darkmode #SearchInput .suggestionsDiv .icon-online {
  background: url(../../tsdefaultassets/search_online_broadcaster_dm.svg?cf182a59dbea) no-repeat center center;
}
#SearchInput .suggestionsDiv .icon-offline {
  background: url(../../tsdefaultassets/search_offline_broadcaster.svg?caa457f278fe) no-repeat center center;
}
.darkmode #SearchInput .suggestionsDiv .icon-offline {
  background: url(../../tsdefaultassets/search_offline_broadcaster_dm.svg?728f6cbf906d) no-repeat center center;
}
#SearchInput .suggestionsDiv .icon-hashtag {
  background: url(../../tsdefaultassets/search_hashtag.svg?11e0ce450c3e) no-repeat center center;
}
.darkmode #SearchInput .suggestionsDiv .icon-hashtag {
  background: url(../../tsdefaultassets/search_hashtag_dm.svg?fd60e5e9daaa) no-repeat center center;
}
#SearchInput .suggestionsDiv .icon-history,
#SearchInput .suggestionsDiv .icon-keywords {
  background: url(../../tsdefaultassets/search_emojis.svg?05c1318122e6) no-repeat center center;
}
.darkmode #SearchInput .suggestionsDiv .icon-history,
.darkmode #SearchInput .suggestionsDiv .icon-keywords {
  background: url(../../tsdefaultassets/search_emojis_darkmode.svg?9a00a1affa02) no-repeat center center;
}
#SearchInput .suggestionsDiv div.broadcaster_suggestion,
#SearchInput .suggestionsDiv div.hashtag_suggestion,
#SearchInput .suggestionsDiv div.history_suggestion,
#SearchInput .suggestionsDiv div.keywords_suggestion {
  background-color: #fcfcfc;
  border-bottom-color: #efefef;
  color: #494949;
}
.darkmode #SearchInput .suggestionsDiv div.broadcaster_suggestion,
.darkmode #SearchInput .suggestionsDiv div.hashtag_suggestion,
.darkmode #SearchInput .suggestionsDiv div.history_suggestion,
.darkmode #SearchInput .suggestionsDiv div.keywords_suggestion {
  background-color: #202c39;
  border-bottom-color: #6e6f70;
  color: #b3b3b3;
}
#SearchInput .suggestionsDiv div.broadcaster_suggestion.active,
#SearchInput .suggestionsDiv div.hashtag_suggestion.active,
#SearchInput .suggestionsDiv div.history_suggestion.active,
#SearchInput .suggestionsDiv div.keywords_suggestion.active {
  background-color: #efefef;
}
.darkmode #SearchInput .suggestionsDiv div.broadcaster_suggestion.active,
.darkmode #SearchInput .suggestionsDiv div.hashtag_suggestion.active,
.darkmode #SearchInput .suggestionsDiv div.history_suggestion.active,
.darkmode #SearchInput .suggestionsDiv div.keywords_suggestion.active {
  background-color: #885336;
}
#SearchInput p.broadcaster_suggestion,
#SearchInput p.hashtag_suggestion,
#SearchInput p.history_suggestion,
#SearchInput p.keywords_suggestion {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
}
#SearchInput p.broadcaster_suggestion .statusText,
#SearchInput p.hashtag_suggestion .statusText,
#SearchInput p.history_suggestion .statusText,
#SearchInput p.keywords_suggestion .statusText {
  font-size: 9px;
  position: relative;
  width: 105px;
  color: #6c6c78;
}
.darkmode #SearchInput p.broadcaster_suggestion .statusText,
.darkmode #SearchInput p.hashtag_suggestion .statusText,
.darkmode #SearchInput p.history_suggestion .statusText,
.darkmode #SearchInput p.keywords_suggestion .statusText {
  color: #cbcbcb;
}
#SearchInput p.keywords_suggestion .statusText {
  font-size: 10px;
  width: fit-content;
}
#SearchInput p.hashtag_suggestion {
  top: 7px;
  width: calc(100% - 10px);
}
#SearchInput p.history_suggestion,
#SearchInput p.keywords_suggestion {
  width: calc(100% - 28px);
}
#SearchInput p.broadcaster_suggestion {
  width: calc(100% - 10px);
}
#SearchInput div.inputDelete {
  background-image: url(../../tsdefaultassets/close_icon_black.svg?ce9b4aee9590);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 10px 10px;
  visibility: visible;
  cursor: pointer;
}
.darkmode #SearchInput div.inputDelete {
  background-image: url(../../tsdefaultassets/close_icon_white.svg?11fb3db3bec8);
}
#SearchInput div.historyDelete {
  background-image: url(../../tsdefaultassets/close_icon_black.svg?ce9b4aee9590);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 10px 10px;
  width: 18px;
  height: 20px;
  position: absolute;
  top: 5px;
  left: 167px;
  cursor: pointer;
}
.darkmode #SearchInput div.historyDelete {
  background-image: url(../../tsdefaultassets/close_icon_white.svg?11fb3db3bec8);
}

.darkmode .checkboxComponent input:focus-visible {
  outline-color: #68b5f0;
}
.checkboxComponent.toggle {
  background-color: #c9c9c9 !important;
}
.checkboxComponent.toggle.checked {
  background-color: #f47321 !important;
}
.darkmode .checkboxComponent.toggle {
  background-color: #6e6f70 !important;
}
.darkmode .checkboxComponent.toggle.checked {
  background-color: #f47321 !important;
}
.checkboxComponent.toggle .toggleButton {
  background-color: white;
}

.transparentCheckbox {
  background-color: transparent;
  border-color: #a8a8a8;
}
.darkmode .transparentCheckbox {
  background-color: #17202a;
  border-color: #2d3e50;
}
.transparentCheckbox.disabled {
  background-color: #f8f9fa;
  border-color: #efefef;
}
.darkmode .transparentCheckbox.disabled {
  background-color: #202c39;
  border-color: #2d3e50;
}
.transparentCheckbox.checked {
  background: url(../../tsdefaultassets/settings-checkmark-white.svg?ae5c98f6a38e) no-repeat center center/60%, #0c6a93;
  border-color: #033e58;
}
.evolveMode .transparentCheckbox.checked {
  background-color: var(--background-button-brand-primary);
}
.transparentCheckbox.checked.disabled {
  background-color: #d1d1d1;
  border-color: #efefef;
}
.darkmode .transparentCheckbox.checked.disabled {
  background-color: #17202a;
  border-color: #2d3e50;
}

.darkmode .draggableCanvasWindow .transparentCheckbox {
  border-color: #b3b3b3;
}
.draggableCanvasWindow .transparentCheckbox.checked {
  background: url(../../tsdefaultassets/round-white-checkmark.svg?de510ac7d460) no-repeat center center, #b3b3b3;
}
.evolveMode .draggableCanvasWindow .transparentCheckbox.checked {
  background-color: var(--background-button-brand-primary);
}

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

.checkboxComponent.transparentCheckbox {
  border-radius: 2px;
  border-style: solid;
  border-width: 1px;
  display: inline-block;
}
.checkboxComponent.toggle {
  box-sizing: content-box;
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: background-color 0.4s ease 0s;
  user-select: none;
  vertical-align: middle;
  -webkit-tap-highlight-color: transparent;
}
.checkboxComponent.toggle .toggleButton {
  border-radius: 100%;
  display: block;
  overflow: hidden;
  position: absolute;
  top: 2px;
  transition: left 0.4s;
}
.checkboxComponent input[type=checkbox] {
  appearance: none;
  -webkit-appearance: none;
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  border: none;
  border-radius: inherit;
  outline-offset: 1px;
  pointer-events: none;
}
.checkboxComponent input[type=checkbox]:focus-visible {
  outline-offset: 1px;
  outline-style: solid;
  outline-width: 2px;
}
.checkboxFieldLabel .checkboxComponent {
  margin: 0px 3px 0px 0px;
  transform: translateY(4px);
}

.checkboxFieldLabel {
  padding: 0px 10px 0px 0px;
}

form fieldset {
  border-style: none;
}
form {
  /* Classic HTML forms - copied from css/forms.css */
  /* Note these rules in css/forms.css apply to all forms - but here they are constrained to .fieldset_main to avoid clashing */
}
form .fieldset_main th {
  text-align: right;
  vertical-align: top;
  padding-top: 10px;
}
form .fieldset_main th label {
  display: block;
  font: 1em/1.3em "UbuntuMedium", Arial, Helvetica, sans-serif;
  padding: 0px;
  margin: 0px 4px 6px 0px;
  color: #494949;
}
form .fieldset_main .requiredfield label:after,
form .fieldset_main .required label:after {
  content: " *";
}
form .fieldset_main ul {
  list-style: none;
  margin: 0px;
  padding: 0px;
  -webkit-margin-before: 0px;
  -webkit-margin-after: 0px;
  -webkit-margin-start: 0px;
  -webkit-margin-end: 0px;
  -webkit-padding-start: 0px;
  clear: both;
  display: block;
}
form .fieldset_main ul li {
  float: left;
  margin: 0px 10px 0px 0px;
  padding: 0px;
}
form .errorlist {
  background: url(../../images/ico-error.gif?5bbd9994802d) no-repeat 2px 50%;
  font: 0.833em "UbuntuMedium", Arial, Helvetica, sans-serif;
  color: #666;
  margin: 5px 0px 0px 2px;
  padding: 2px 0px 0px 20px;
  display: inline-block;
}
form .search_criteria ul {
  margin-top: 12px;
}
form .search_criteria ul li {
  margin: 0px 10px 0px 0px;
  width: 150px;
}
form .submit_button_footer {
  display: block;
  margin: 5px 0px 0px 148px;
  font-size: 0.8em;
}
form .formvalidate_error {
  color: #d50000;
  padding: 0;
}
form .formvalidate_spinner {
  display: inline-block;
  vertical-align: middle;
}
form .formvalidate_spinner::after {
  content: "";
  display: inline-block;
  width: 19px;
  height: 19px;
  background: url(../../images/spinner.gif?5368f68c1780) no-repeat center/contain;
  vertical-align: middle;
  visibility: hidden;
}
form .formvalidate_spinner.active::after {
  visibility: visible;
}
form .formvalidate_hidden {
  display: none !important;
}
form {
  /* End Classic HTML forms */
}

.evolveMode input[type=checkbox]:checked {
  accent-color: var(--background-button-brand-primary);
}

.evolveMode .checkbox_label_row input[type=checkbox],
.evolveMode .checkbox-field-row input[type=checkbox] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 20px;
  height: 20px;
  margin: 0;
}
.evolveMode .checkbox_label_row input[type=checkbox] + .checkboxControl,
.evolveMode .checkbox-field-row input[type=checkbox] + .checkboxControl {
  width: 20px;
  height: 20px;
  box-sizing: border-box;
  background: var(--background-input-primary);
  display: inline-block;
  position: relative;
  flex-shrink: 0;
  border-radius: var(--spacing-xs);
  border: 1px solid var(--border-button-neutral-high);
}
.evolveMode .checkbox_label_row input[type=checkbox] + .checkboxControl::after,
.evolveMode .checkbox-field-row input[type=checkbox] + .checkboxControl::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url(../../tsdefaultassets/evolve-checkbox.svg?b672d203df7d) center/16px no-repeat;
  opacity: 0;
}
.evolveMode .checkbox_label_row input[type=checkbox]:checked + .checkboxControl,
.evolveMode .checkbox-field-row input[type=checkbox]:checked + .checkboxControl {
  background: var(--background-brand-primary);
  border-color: var(--background-brand-primary);
}
.evolveMode .checkbox_label_row input[type=checkbox]:checked + .checkboxControl::after,
.evolveMode .checkbox-field-row input[type=checkbox]:checked + .checkboxControl::after {
  opacity: 1;
}
.evolveMode .checkbox_label_row input[type=checkbox]:focus-visible + .checkboxControl,
.evolveMode .checkbox-field-row input[type=checkbox]:focus-visible + .checkboxControl {
  outline: none;
  border-color: var(--border-button-focused);
  box-shadow: 0px 0px 0px 1px var(--border-button-focused);
}

/**
 * Generic mixins
 */
.auth_option {
  color: #0373a3;
  text-decoration: none;
}
.auth_option:hover {
  text-decoration: none;
}
.auth_option div {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 32px;
  box-sizing: border-box;
  border: 1px solid #525252;
  border-radius: 4px;
  color: #525252;
  margin-bottom: 8px;
  vertical-align: middle;
}
.mobile .auth_option div {
  height: 46px;
}
.auth_option p {
  font-size: 14px;
  line-height: 16px;
  font-family: "UbuntuRegular", Arial, Helvetica, sans-serif;
  margin: 0 0 0 8px !important;
}
.mobile .auth_option p {
  font-size: 16px;
  line-height: 24px;
}
.evolveMode .auth_option img {
  padding-left: 3px;
}
.evolveMode .auth_option div {
  border: 1px solid var(--border-button-neutral);
  height: 40px;
  border-radius: var(--corner-radius-full);
  background-color: var(--background-button-neutral-transparent);
}
.evolveMode .auth_option p {
  color: var(--text-button-neutral);
  font-size: 16px;
  line-height: 24px;
  margin: 0 0 0 12px !important;
}

.or_separator p {
  color: #a7a7a7;
  overflow: hidden;
  text-align: center;
  font-size: 14px;
  line-height: 22px;
}
.or_separator p:before, .or_separator p:after {
  background-color: #efefef;
  content: "";
  display: inline-block;
  height: 1px;
  position: relative;
  vertical-align: middle;
  width: 50%;
}
.or_separator p:before {
  right: 0.5em;
  margin-left: -50%;
}
.or_separator p:after {
  left: 0.5em;
  margin-right: -50%;
}
.or_separator.darker p:before, .or_separator.darker p:after {
  background-color: #cbcbcb;
}
.evolveMode .or_separator p {
  font-size: 14px;
  line-height: 20px;
  margin: 0 0 12px;
  color: var(--text-light);
}
.evolveMode .or_separator p:before, .evolveMode .or_separator p:after {
  transform: translateY(-2px);
  background-color: var(--text-light);
}

body.embed-blurred-login-overlay {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

@supports (filter: blur(5px)) and (-webkit-filter: blur(5px)) {
  body.blurred-login-overlay-shown,
  .blurred-login-overlay {
    background: rgba(255, 255, 255, 0.75);
    visibility: visible;
  }
  body.blurred-login-overlay-shown.join-overlay-organic-expansion,
  .blurred-login-overlay.join-overlay-organic-expansion {
    background: rgba(0, 0, 0, 0.5);
  }
  .evolveMode body.blurred-login-overlay-shown,
  .evolveMode .blurred-login-overlay {
    background: var(--overlay-backdrop-popup);
  }
  body.isIpad.blurred-login-overlay-shown,
  body.isIpad .blurred-login-overlay {
    background: none;
  }
  body.darkmode.blurred-login-overlay-shown .blurred-login-overlay {
    background: rgba(0, 0, 0, 0.75);
  }
  body.darkmode.blurred-login-overlay-shown .blurred-login-overlay.join-overlay-organic-expansion {
    background: rgba(0, 0, 0, 0.5);
  }
  body.darkmode.blurred-login-overlay-shown {
    background-color: #17202a;
  }
  body.isIpad.darkmode.blurred-login-overlay-shown .blurred-login-overlay {
    background: rgba(0, 0, 0, 0.5);
  }
}
@supports (backdrop-filter: blur(3px)) or (-webkit-backdrop-filter: blur(3px)) {
  .blurred-login-overlay {
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
  }
  .evolveMode .blurred-login-overlay {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  body.isIpad .blurred-login-overlay {
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
  }
  .evolveMode body.isIpad .blurred-login-overlay {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  body.isIpad.darkmode .blurred-login-overlay {
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
  }
  .evolveMode body.isIpad.darkmode .blurred-login-overlay {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}
#id_login_btn[disabled] {
  cursor: auto;
  opacity: 0.5;
}
#id_login_btn {
  cursor: pointer;
  opacity: 1;
  color: #ffffff;
  font: 16px "UbuntuMedium", Arial, Helvetica, sans-serif;
  width: 100%;
  height: 36px;
  box-sizing: border-box;
  border-radius: 4px;
  border: 1px solid #a8a8a8;
  background-color: #f47321;
  -webkit-appearance: none;
}
.evolveMode #id_login_btn {
  height: 40px;
  border-radius: var(--corner-radius-full);
  background-color: var(--background-button-brand-primary);
  border: none;
  font: 16px "UbuntuRegular", Arial, Helvetica, sans-serif;
}

.darkmode .MobileLoginOverlay a {
  color: #0c6a93;
}

form input.evolveLoginOverlayInput {
  font-family: "UbuntuRegular", Arial, Helvetica, sans-serif;
  border: 1px solid var(--border-button-neutral);
  background: var(--background-neutral);
}
form input.evolveLoginOverlayInput::placeholder {
  color: var(--color-grey-70);
}
form input.evolveLoginOverlayInput:focus {
  outline: none;
  border-color: var(--border-button-focused);
  box-shadow: 0px 0px 0px 1px var(--border-button-focused);
}

.evolveLoginCloseButton {
  width: 40px;
  height: 40px;
  border-radius: var(--corner-radius-full);
  background-color: var(--background-button-neutral-transparent);
  background-image: url("../../tsdefaultassets/floating-player-close.svg?aa352a6af708");
  background-size: 24px;
  background-repeat: no-repeat;
  background-position: center;
  outline: none;
  border: 2px solid transparent;
}
.darkMode .evolveLoginCloseButton {
  background-image: url("../../tsdefaultassets/floating-player-close-darkmode.svg?48f7cd32ac5c");
}
.evolveLoginCloseButton:focus {
  border-color: var(--border-button-focused);
}

.checkbox_label_row {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.checkboxLabelText {
  color: var(--text-primary);
  font-family: "UbuntuRegular", Arial, Helvetica, sans-serif;
  font-size: 12px;
  line-height: 16px;
}

/**
 * Generic mixins
 */
.big_form_button:focus {
  outline: -webkit-focus-ring-color auto 1px;
}
.darkmode .big_form_button:is(textarea, input, button):is(:not(button, input[type=submit], input[type=button])) {
  background-color: #202c39;
}
.darkmode .big_form_button:is(textarea, input, button):focus {
  outline: none;
  box-shadow: 0 0 0 2px #68b5f0;
}
.darkmode .big_form_button:is(select) {
  background-color: #202c39;
}
.darkmode .big_form_button:is(select):focus {
  outline: 2px solid #68b5f0;
}
.big_form_button, .darkmode .big_form_button {
  background-color: var(--wl-signup-bg-color, #f47321);
  color: #ffffff;
  border: 1px solid var(--wl-signup-alt-bg-color, #cd5d26);
  border-radius: 4px;
}
.big_form_button {
  font: 18px "UbuntuBold", Arial, Helvetica, sans-serif;
  line-height: 32px;
  padding: 3px 35px 2px 35px;
  cursor: pointer;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.big_form_button:after {
  content: "";
  width: 20px;
  height: 20px;
  position: absolute;
  right: 0;
  background-image: url(../../images/arrow-white-v2.gif?75bde39356c3);
  background-repeat: no-repeat;
  background-position: center;
}
.big_form_button:hover {
  background-color: var(--wl-signup-bg-color, #ff6300);
  text-decoration: underline;
}
.big_form_button--small-text {
  font-size: 16px;
}
.big_form_button--full-width {
  width: 100%;
}
.big_form_button--margin {
  margin: 13px auto 20px auto;
}
.big_form_button--blue {
  color: var(--wl-text-color, #6783a3);
  border: 1px solid var(--wl-content-bgcolor, #b1b1b1);
  background-color: var(--wl-content-bgcolor, #dfe9f4);
}
.big_form_button--blue:after {
  background-image: url(../../images/arrow-blue.gif?5064c292cfa2);
}
.big_form_button--blue:hover {
  background-color: var(--wl-content-bgcolor, #cde0f5);
}
.big_form_button a {
  color: #fff;
}

/**
 * Generic mixins
 */
header {
  --evolve-header-bg-color: #f8f9fa;
  --evolve-hamburger-menu-icon: url(../../images/hamburger_menu-light.svg?fb0a13130c38);
  --evolve-sort-icon: url(../../images/sorting-light.svg?e5f98b4b2df4);
}
.darkmode header {
  --evolve-header-bg-color: #202c39;
  --evolve-hamburger-menu-icon: url(../../images/hamburger_menu-dark.svg?f924947d73b3);
  --evolve-sort-icon: url(../../images/sorting-dark.svg?30379065c3fd);
}

header:not(.EvolveMobileHeader) {
  -webkit-transition: all 0.15s ease;
  -moz-transition: all 0.15s ease;
  transition: all 0.15s ease;
  position: fixed;
  background: #0c6a93;
  height: 40px;
  left: 0;
  top: 0;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
}
.darkmode header:not(.EvolveMobileHeader) {
  background-color: #202c39;
}
header:not(.EvolveMobileHeader).evolve-header:not(.room-header) {
  background: var(--evolve-header-bg-color);
}
header:not(.EvolveMobileHeader).evolve-header:not(.room-header) #mmnav {
  background: var(--evolve-hamburger-menu-icon) no-repeat center/contain;
}
header:not(.EvolveMobileHeader).evolve-header:not(.room-header) .mobile-sorting-button {
  background: var(--evolve-sort-icon) no-repeat center;
}
header:not(.EvolveMobileHeader).evolve-header:not(.room-header) #mheader-logo #logo-img img {
  height: 100%;
}
header:not(.EvolveMobileHeader).evolve-header:not(.room-header) #mheader-logo #logo-img .dark {
  display: none;
}
.darkmode header:not(.EvolveMobileHeader).evolve-header:not(.room-header) #mheader-logo #logo-img .light {
  display: none;
}
.darkmode header:not(.EvolveMobileHeader).evolve-header:not(.room-header) #mheader-logo #logo-img .dark {
  display: block;
}
header:not(.EvolveMobileHeader).evolve-header.room-header {
  grid-template-columns: auto 1fr;
}
header:not(.EvolveMobileHeader).evolve-header.room-header #mheader-logo {
  display: none;
}
header:not(.EvolveMobileHeader) .right-nav {
  display: flex;
  justify-content: flex-end;
}

#evolve-mobile-header {
  height: 48px;
  width: 100%;
  left: 0;
  top: 0;
  background: var(--background-neutral);
  backdrop-filter: var(--blur-mid-backdrop-filter);
  padding: var(--spacing-sm) 0;
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}
#evolve-mobile-header #evolve-mheader-logo #logo-img {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding-left: var(--spacing-md);
}
#evolve-mobile-header #evolve-mheader-logo #logo-img .dark {
  display: none;
}
#evolve-mobile-header #evolve-mheader-logo #logo-img .darkmode .light, .darkMode #evolve-mobile-header #evolve-mheader-logo #logo-img .light {
  display: none;
}
#evolve-mobile-header #evolve-mheader-logo #logo-img .darkmode .dark, .darkMode #evolve-mobile-header #evolve-mheader-logo #logo-img .dark {
  display: block;
}
#evolve-mobile-header #evolve-mheader-logo #logo-img img {
  height: 32px;
  width: 44px;
}
#evolve-mobile-header .EvolveMobileSearchBar__template {
  padding: var(--spacing-sm);
  width: 100%;
  box-sizing: border-box;
  overflow-x: auto;
  overflow-y: hidden;
  background: transparent;
}
#evolve-mobile-header .EvolveMobileSearchBar__template input {
  background: unset;
  border: 1px solid var(--border-low);
  border-radius: var(--corner-radius-full);
  box-sizing: inherit;
  height: 40px;
  padding-left: 40px;
  width: 100%;
}
#evolve-mobile-header .EvolveMobileHeader__tokens-container {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding-right: var(--spacing-md);
  height: 56px;
}
#evolve-mobile-header .EvolveMobileHeader__tokens-container .EvolveMobileHeader__add-tokens-button {
  color: var(--text-secondary);
  height: 24px;
  width: 24px;
  padding: 0 1px;
  gap: 10px;
}
#evolve-mobile-header .EvolveMobileHeader__tokens-container .EvolveMobileHeaderTokenButton__amount {
  color: var(--text-primary);
  /* Paragraph/Default (Medium) */
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px; /* 142.857% */
}
#evolve-mobile-header.EvolveMobileHeader--hidden {
  display: none;
}

.left-nav,
.right-nav {
  max-height: 40px;
}

#mmnav {
  background: url(../../images/hamburger_menu.svg?a97a6b59efff) no-repeat center;
  background-size: contain;
  height: 100%;
  width: 27px;
  margin: 0 8px;
  position: relative;
  cursor: pointer;
}
#mmnav::after {
  content: "";
  display: none;
  position: absolute;
  left: 20px;
  top: 5px;
  height: 12px;
  width: 12px;
  border-radius: 50%;
  background-color: #f47321;
}
#mmnav.has_unseen::after {
  display: block;
}

#mheader-logo,
#evolve-mheader-logo {
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 50vw;
  max-height: 40px;
  box-sizing: border-box;
  padding: 2px 0;
}

#logo-img {
  display: inline;
  height: 28px;
}

#whitelabel-logo-img {
  display: inline;
  max-width: 100%;
  max-height: 100%;
}

header.room-header {
  background-color: #17202a;
  grid-template-columns: auto auto 1fr;
}
.darkmode header.room-header {
  background-color: #17202a;
}
header.room-header #mheader-logo {
  max-width: 30vw;
}
header.room-header .right-nav {
  min-width: 0;
}

.mobile-sorting-button {
  margin: 0;
  padding: 0;
  display: block;
  width: 40px;
  height: 40px;
  background-image: url(../../images/sorting.svg?b78408ca4f08);
  background-size: 24px 24px;
  background-position: center center;
  background-repeat: no-repeat;
  background-color: transparent;
  border: none;
  color: transparent;
  pointer-events: none;
}
.mobile-sorting-button.active::after {
  content: "";
  position: absolute;
  top: 4px;
  right: 4px;
  display: block;
  background: var(--wl-href-color, #68b5f0);
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

#mobile-sorting-options {
  opacity: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 0;
  display: block;
  width: 40px;
  height: 40px;
  cursor: pointer;
  font-size: 20px;
}

:root {
  --cbt-MobileDmsMenu-color: #000;
  --cbt-MobileDmsMenu-background-color: #ffffff;
  --cbt-MobileDmsMenu-contentMask-background-color: #ffffff;
  --cbt-MobileDmsMenu-title-border-bottom-color: #efefef;
  --cbt-MobileDmsMenu-link-color: #0c6a93;
  --cbt-BackButton-color: #0c6a93;
  --cbt-BackButton-border-bottom-color: #efefef;
}

.darkmode {
  --cbt-MobileDmsMenu-color: #ffffff;
  --cbt-MobileDmsMenu-background-color: #202c39;
  --cbt-MobileDmsMenu-contentMask-background-color: #202c39;
  --cbt-MobileDmsMenu-title-border-bottom-color: #2a323f;
  --cbt-MobileDmsMenu-link-color: #68b5f0;
  --cbt-BackButton-color: #68b5f0;
  --cbt-BackButton-border-bottom-color: #2a323f;
}

.MobileDmsMenu {
  color: var(--cbt-MobileDmsMenu-color);
  background-color: var(--cbt-MobileDmsMenu-background-color);
}
.MobileDmsMenu__contentMask {
  background-color: var(--cbt-MobileDmsMenu-contentMask-background-color);
}
.MobileDmsMenu__title {
  border-bottom: 1px solid var(--cbt-MobileDmsMenu-title-border-bottom-color);
}
.MobileDmsMenu__link {
  color: var(--cbt-MobileDmsMenu-link-color);
}

.BackButton {
  color: var(--cbt-BackButton-color);
  border-bottom: 1px solid var(--cbt-BackButton-border-bottom-color);
}

:root {
  --cbt-MobileDmWindowManager-color: #000;
  --cbt-MobileDmWindowManager-background-color: #ffffff;
}

.MobileDmWindowManager {
  color: var(--cbt-MobileDmWindowManager-color);
  background-color: var(--cbt-MobileDmWindowManager-background-color);
}

:root {
  --cbt-MobileConversationListItem-background-color: #ffffff;
  --cbt-MobileConversationListItem-border-bottom-color: #efefef;
  --cbt-MobileConversationListItem-unread-background-color: #fceadc;
  --cbt-MobileConversationListItem-timestamp-color: #6c6c78;
  --cbt-MobileConversationListItem-icon-color: #222222;
}

.darkmode {
  --cbt-MobileConversationListItem-background-color: #202c39;
  --cbt-MobileConversationListItem-border-bottom-color: #2d3e50;
  --cbt-MobileConversationListItem-unread-background-color: #885336;
  --cbt-MobileConversationListItem-timestamp-color: #888888;
  --cbt-MobileConversationListItem-icon-color: #ffffff;
}

.MobileConversationListItem {
  background-color: var(--cbt-MobileConversationListItem-background-color);
  border-bottom: 1px solid var(--cbt-MobileConversationListItem-border-bottom-color);
}
.MobileConversationListItem--unread {
  background-color: var(--cbt-MobileConversationListItem-unread-background-color);
}
.MobileConversationListItem__timestamp {
  color: var(--cbt-MobileConversationListItem-timestamp-color);
}
.MobileConversationListItem__icon, .MobileConversationListItem__icon svg {
  fill: var(--cbt-MobileConversationListItem-icon-color);
}

.flagged {
  color: #cc0000;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.darkmode .flagged {
  color: #dc0000;
}

.message-content-wrapper {
  display: flex;
  align-items: center;
  gap: 5px;
  overflow: hidden;
}

.flagged-message-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.flagged-message-icon svg {
  display: flex;
  width: 14px;
  height: 14px;
}
.flagged-message-icon svg path {
  fill: #cc0000;
}
.darkmode .flagged-message-icon svg path {
  fill: #dc0000;
}

#id-submitted {
  justify-items: center;
  text-align: center;
}
#id-submitted .content-title {
  color: #f47321;
  text-align: center;
}
#id-submitted .content-text {
  font-size: 14px;
  line-height: 22px;
  padding: 16px 0 32px;
}
#id-submitted .content-text-bold {
  font-family: "UbuntuBold";
}
#id-submitted .ButtonSize-large {
  height: 40px;
  padding: 8px 24px;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  font-size: 16px;
  line-height: 24px;
}

@-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);
  }
}
body {
  font-family: "UbuntuRegular", Arial, Helvetica, sans-serif;
  margin: 0;
  min-width: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  min-height: 100%;
  box-sizing: border-box;
  padding-top: 40px;
}
body.evolveMode {
  padding-top: 0;
}
body:has(.RoomlistFilters__Overlay) {
  overflow: hidden;
}
body.no-scroll {
  overflow: hidden;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
body #main,
body header {
  transition: opacity 0.3s ease;
}
body.fade-content #main,
body.fade-content header {
  opacity: 0.1;
}

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

#main {
  position: relative;
  height: auto;
  overflow-x: hidden;
}

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

a,
.content a {
  color: var(--wl-href-color, #0c6a93);
  text-decoration: none;
}
.darkmode a,
.darkmode .content a {
  color: #68b5f0;
}

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

#btp {
  margin-top: 25px;
}

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

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

.thumbnail_label,
.thumbnail_label_featured {
  bottom: 3px;
  color: #fff;
  display: inline-block;
  font: 10px "UbuntuRegular", Arial, Helvetica, sans-serif;
  overflow: hidden;
  padding: 1px 3px 1px 3px;
  pointer-events: none;
  position: absolute;
  right: 3px;
  text-align: center;
}

.theme-external .thumbnail_label_recommender {
  display: none;
}

.thumbnail_label_featured {
  border-bottom: 2px solid #dd7f21;
}

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

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

.thumbnail_label_c_promoted {
  background-color: #0471a1;
}

.thumbnail_label_c_gaming {
  background-color: #7f26b1;
}

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

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

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

.thumbnail_label_c_private_show {
  background-color: #c00;
}

#mobile_pagination {
  margin: 12px auto 10px auto;
  padding: 8px 0 10px;
  width: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
#mobile_pagination > ul {
  height: 31px;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  margin: 0;
  padding: 0;
}
#mobile_pagination > ul span {
  margin: 0 5px 0 0;
}
#mobile_pagination > ul span.endless_separator {
  color: #000000;
}
#mobile_pagination > ul > li, #mobile_pagination > ul > li.paging, #mobile_pagination > ul > span {
  display: block;
}
#mobile_pagination > ul > li.active > a, #mobile_pagination > ul > li.paging.active > a, #mobile_pagination > ul > span.active > a {
  color: #525252;
  border-color: #acacac;
  background-color: #c9c9c9;
}
#mobile_pagination > ul > li a, #mobile_pagination > ul > li.paging a, #mobile_pagination > ul > span a {
  display: inline-block;
  box-sizing: border-box;
  border: 1px solid #a7a7a7;
  border-radius: 4px;
  color: #525252;
  flex: 1 1 auto;
  height: 26px;
  padding-left: 6px;
}
@media (min-width: 500px) {
  #mobile_pagination > ul > li a, #mobile_pagination > ul > li.paging a, #mobile_pagination > ul > span a {
    padding-left: calc(1vw + 1px);
  }
}
@media (min-width: 700px) {
  #mobile_pagination > ul > li a, #mobile_pagination > ul > li.paging a, #mobile_pagination > ul > span a {
    padding-left: 8px;
  }
}
#mobile_pagination > ul > li a, #mobile_pagination > ul > li.paging a, #mobile_pagination > ul > span a {
  padding-right: 6px;
}
@media (min-width: 500px) {
  #mobile_pagination > ul > li a, #mobile_pagination > ul > li.paging a, #mobile_pagination > ul > span a {
    padding-right: calc(1vw + 1px);
  }
}
@media (min-width: 700px) {
  #mobile_pagination > ul > li a, #mobile_pagination > ul > li.paging a, #mobile_pagination > ul > span a {
    padding-right: 8px;
  }
}
#mobile_pagination > ul > li a, #mobile_pagination > ul > li.paging a, #mobile_pagination > ul > span a {
  line-height: 26px;
  margin: 0 5px;
  white-space: nowrap;
  text-transform: capitalize;
  background: #ffffff;
  font-family: "UbuntuRegular", Arial, Helvetica, sans-serif;
  font-size: 14px;
}
#mobile_pagination > ul > li a:active, #mobile_pagination > ul > li.paging a:active, #mobile_pagination > ul > span a:active {
  color: #525252;
  border-color: #acacac;
  background-color: #c9c9c9;
}
@media (hover: hover) {
  #mobile_pagination > ul > li a:hover, #mobile_pagination > ul > li.paging a:hover, #mobile_pagination > ul > span a:hover {
    color: #525252;
    background-color: #c9c9c9;
    font-family: "UbuntuRegular", Arial, Helvetica, sans-serif;
  }
}
#mobile_pagination > ul > li a.prev, #mobile_pagination > ul > li a.next, #mobile_pagination > ul > li.paging a.prev, #mobile_pagination > ul > li.paging a.next, #mobile_pagination > ul > span a.prev, #mobile_pagination > ul > span a.next {
  text-indent: 0;
  background: #ffffff;
  width: auto;
}
#mobile_pagination > ul > li a.prev.no-link, #mobile_pagination > ul > li a.next.no-link, #mobile_pagination > ul > li.paging a.prev.no-link, #mobile_pagination > ul > li.paging a.next.no-link, #mobile_pagination > ul > span a.prev.no-link, #mobile_pagination > ul > span a.next.no-link {
  opacity: 0.7;
  pointer-events: none;
}
#mobile_pagination > ul > li a.prev.no-link:hover, #mobile_pagination > ul > li a.next.no-link:hover, #mobile_pagination > ul > li.paging a.prev.no-link:hover, #mobile_pagination > ul > li.paging a.next.no-link:hover, #mobile_pagination > ul > span a.prev.no-link:hover, #mobile_pagination > ul > span a.next.no-link:hover {
  color: #525252;
  background: #ffffff;
}
@media (hover: hover) {
  #mobile_pagination > ul > li a.prev:hover, #mobile_pagination > ul > li a.next:hover, #mobile_pagination > ul > li.paging a.prev:hover, #mobile_pagination > ul > li.paging a.next:hover, #mobile_pagination > ul > span a.prev:hover, #mobile_pagination > ul > span a.next:hover {
    background-color: #c9c9c9;
  }
}
#mobile_pagination > ul > li a.prev.condensed, #mobile_pagination > ul > li a.next.condensed, #mobile_pagination > ul > li.paging a.prev.condensed, #mobile_pagination > ul > li.paging a.next.condensed, #mobile_pagination > ul > span a.prev.condensed, #mobile_pagination > ul > span a.next.condensed {
  padding: 0 11.5px;
}
#mobile_pagination > ul > li a.prev.condensed:hover, #mobile_pagination > ul > li a.next.condensed:hover, #mobile_pagination > ul > li.paging a.prev.condensed:hover, #mobile_pagination > ul > li.paging a.next.condensed:hover, #mobile_pagination > ul > span a.prev.condensed:hover, #mobile_pagination > ul > span a.next.condensed:hover {
  background-color: #c9c9c9;
}
#mobile_pagination > ul > li a.prev.condensed, #mobile_pagination > ul > li.paging a.prev.condensed, #mobile_pagination > ul > span a.prev.condensed {
  background: url(../../images/arrow-left-page.svg?5dd5a22ab94a) no-repeat 50% 50%;
}
#mobile_pagination > ul > li a.next.condensed, #mobile_pagination > ul > li.paging a.next.condensed, #mobile_pagination > ul > span a.next.condensed {
  background: url(../../images/arrow-right-page.svg?7eb5ee13a7eb) no-repeat 50% 50%;
}
.darkmode #mobile_pagination > ul.paging span.endless_separator {
  color: #68b5f0;
}
.darkmode #mobile_pagination > ul.paging > li, .darkmode #mobile_pagination > ul.paging > li.paging, .darkmode #mobile_pagination > ul.paging > span {
  display: block;
}
.darkmode #mobile_pagination > ul.paging > li.active > a, .darkmode #mobile_pagination > ul.paging > li.paging.active > a, .darkmode #mobile_pagination > ul.paging > span.active > a {
  background: transparent;
  border: 1px solid transparent;
  color: #68b5f0;
}
.darkmode #mobile_pagination > ul.paging > li a, .darkmode #mobile_pagination > ul.paging > li.paging a, .darkmode #mobile_pagination > ul.paging > span a {
  border: 1px solid #2a323f;
  background: #202c39;
  color: #b3b3b3;
}
@media (hover: hover) {
  .darkmode #mobile_pagination > ul.paging > li a:hover, .darkmode #mobile_pagination > ul.paging > li.paging a:hover, .darkmode #mobile_pagination > ul.paging > span a:hover {
    background: transparent;
    border: 1px solid transparent;
    color: #68b5f0;
  }
}
.darkmode #mobile_pagination > ul.paging > li a:active, .darkmode #mobile_pagination > ul.paging > li.paging a:active, .darkmode #mobile_pagination > ul.paging > span a:active {
  background: transparent;
  border: 1px solid transparent;
  color: #68b5f0;
}
.darkmode #mobile_pagination > ul.paging > li a.prev, .darkmode #mobile_pagination > ul.paging > li a.next, .darkmode #mobile_pagination > ul.paging > li.paging a.prev, .darkmode #mobile_pagination > ul.paging > li.paging a.next, .darkmode #mobile_pagination > ul.paging > span a.prev, .darkmode #mobile_pagination > ul.paging > span a.next {
  border: 1px solid #2a323f;
  background: #202c39;
  background-image: none;
  color: #b3b3b3;
}
.darkmode #mobile_pagination > ul.paging > li a.prev.no-link, .darkmode #mobile_pagination > ul.paging > li a.next.no-link, .darkmode #mobile_pagination > ul.paging > li.paging a.prev.no-link, .darkmode #mobile_pagination > ul.paging > li.paging a.next.no-link, .darkmode #mobile_pagination > ul.paging > span a.prev.no-link, .darkmode #mobile_pagination > ul.paging > span a.next.no-link {
  opacity: 0.7;
  pointer-events: none;
}
.darkmode #mobile_pagination > ul.paging > li a.prev.no-link:hover, .darkmode #mobile_pagination > ul.paging > li a.next.no-link:hover, .darkmode #mobile_pagination > ul.paging > li.paging a.prev.no-link:hover, .darkmode #mobile_pagination > ul.paging > li.paging a.next.no-link:hover, .darkmode #mobile_pagination > ul.paging > span a.prev.no-link:hover, .darkmode #mobile_pagination > ul.paging > span a.next.no-link:hover {
  border: 1px solid #2a323f;
  background: #202c39;
  color: #b3b3b3;
}
@media (hover: hover) {
  .darkmode #mobile_pagination > ul.paging > li a.prev:hover, .darkmode #mobile_pagination > ul.paging > li a.next:hover, .darkmode #mobile_pagination > ul.paging > li.paging a.prev:hover, .darkmode #mobile_pagination > ul.paging > li.paging a.next:hover, .darkmode #mobile_pagination > ul.paging > span a.prev:hover, .darkmode #mobile_pagination > ul.paging > span a.next:hover {
    background: transparent;
    border: 1px solid transparent;
    color: #68b5f0;
  }
}
.darkmode #mobile_pagination > ul.paging > li a.prev.condensed, .darkmode #mobile_pagination > ul.paging > li.paging a.prev.condensed, .darkmode #mobile_pagination > ul.paging > span a.prev.condensed {
  background: #202c39 url(../../images/arrow-left-page_dm.svg?6cc19872b052) no-repeat 50% 50%;
}
.darkmode #mobile_pagination > ul.paging > li a.prev.condensed:hover, .darkmode #mobile_pagination > ul.paging > li.paging a.prev.condensed:hover, .darkmode #mobile_pagination > ul.paging > span a.prev.condensed:hover {
  background: transparent url(../../images/arrow-left_dm.svg?b9699c1795b0) no-repeat 50% 50%;
  border: 1px solid transparent;
}
.darkmode #mobile_pagination > ul.paging > li a.next.condensed, .darkmode #mobile_pagination > ul.paging > li.paging a.next.condensed, .darkmode #mobile_pagination > ul.paging > span a.next.condensed {
  background: #202c39 url(../../images/arrow-right-page_dm.svg?fd53fe388fe5) no-repeat 50% 50%;
}
.darkmode #mobile_pagination > ul.paging > li a.next.condensed:hover, .darkmode #mobile_pagination > ul.paging > li.paging a.next.condensed:hover, .darkmode #mobile_pagination > ul.paging > span a.next.condensed:hover {
  background: transparent url(../../images/arrow-right_dm.svg?2ab10858e309) no-repeat 50% 50%;
  border: 1px solid transparent;
}

#mobile_pagination_sel {
  width: 100%;
  text-align: center;
  padding: 0;
}
#mobile_pagination_sel a {
  text-decoration: none;
  color: #fff;
}
#mobile_pagination_sel .mselect {
  padding: 0;
  text-align: center;
  border: 1px solid #0c6a93;
  border-radius: 3px;
  overflow: hidden;
  background-color: #fff;
  height: 26px;
  color: #555;
  margin: 0 5px;
  line-height: 27px;
  font-size: 16px;
  font-family: "UbuntuRegular", Arial, Helvetica, sans-serif;
}
.darkmode #mobile_pagination_sel .mselect {
  border: 1px solid #6e6f70;
  color: #ffffff;
  background-color: #202c39;
}
#mobile_pagination_sel .mselect:-moz-focusring {
  color: transparent;
  text-shadow: 0 0 0 #000;
}

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

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

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

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

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

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

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

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

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

.standardform input[type=text]:focus,
.standardform input[type=password]:focus,
.standardform input[type=email]:focus {
  outline: -webkit-focus-ring-color auto 1px;
}
.darkmode .standardform input[type=text]:is(textarea, input, button):is(:not(button, input[type=submit], input[type=button])),
.darkmode .standardform input[type=password]:is(textarea, input, button):is(:not(button, input[type=submit], input[type=button])),
.darkmode .standardform input[type=email]:is(textarea, input, button):is(:not(button, input[type=submit], input[type=button])) {
  background-color: #202c39;
}
.darkmode .standardform input[type=text]:is(textarea, input, button):focus,
.darkmode .standardform input[type=password]:is(textarea, input, button):focus,
.darkmode .standardform input[type=email]:is(textarea, input, button):focus {
  outline: none;
  box-shadow: 0 0 0 2px #68b5f0;
}
.darkmode .standardform input[type=text]:is(select),
.darkmode .standardform input[type=password]:is(select),
.darkmode .standardform input[type=email]:is(select) {
  background-color: #202c39;
}
.darkmode .standardform input[type=text]:is(select):focus,
.darkmode .standardform input[type=password]:is(select):focus,
.darkmode .standardform input[type=email]:is(select):focus {
  outline: 2px solid #68b5f0;
}
.standardform input[type=text],
.standardform input[type=password],
.standardform input[type=email] {
  width: 100%;
  font-family: "UbuntuRegular", Arial, Helvetica, sans-serif;
  font-size: 16px;
  box-sizing: border-box;
}
.darkmode .standardform input[type=text],
.darkmode .standardform input[type=password],
.darkmode .standardform input[type=email] {
  color: #ffffff;
  background-color: #202c39;
  border: 1px solid #6e6f70;
}

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

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

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

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

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

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

.password_header,
h1 {
  color: #0c6a93;
  font-family: "UbuntuBold", Arial, Helvetica, sans-serif;
  font-size: 19px;
  margin-top: 15px;
  margin-bottom: 10px;
  text-align: left;
}
.darkmode .password_header,
.darkmode h1 {
  color: #68b5f0;
}

.settings_header,
h2 {
  font-family: "UbuntuBold", Arial, Helvetica, sans-serif;
  font-size: 14px;
  color: #666;
}
.darkmode .settings_header,
.darkmode h2 {
  color: #ffffff;
}

.mycollection_header {
  font-weight: bold;
  font-size: 14px;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.submit:disabled {
  background: #bababa;
  cursor: default;
}

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

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

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

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

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

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

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

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

.products {
  margin-top: 20px;
}

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

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

#mobile-genders-banner {
  position: relative;
  height: 44px;
  padding: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
}
#mobile-genders-banner .gender {
  display: inline-block;
  box-sizing: border-box;
  border: 1px solid #a7a7a7;
  border-radius: 4px;
  color: #525252;
  flex: 1 1 auto;
  height: 34px;
  padding: 0 8px;
  line-height: 34px;
  margin: 0 5px 0 0;
  white-space: nowrap;
  text-align: center;
}
.darkmode #mobile-genders-banner .gender {
  color: #68b5f0;
  border-color: #2d3e50;
}
#mobile-genders-banner .gender:last-child {
  margin: 0;
}
#mobile-genders-banner .gender.active, #mobile-genders-banner .gender:active {
  border-color: #acacac;
  background-color: #c9c9c9;
}
.darkmode #mobile-genders-banner .gender.active, .darkmode #mobile-genders-banner .gender:active {
  background-color: #68b5f0;
  color: #17202a;
  border-color: #17202a;
}

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

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

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

.cryptopayment div {
  margin: 5px 0;
}

#cryptopayment_info {
  max-width: 280px;
}

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

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

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

#coin_estimated_cost {
  line-height: 30px;
}

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

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

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

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

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

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

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

#oneclick_cvv2 {
  font-size: 14px;
}

.follow_star_btn {
  background-color: var(--wl-signup-bg-color, #e0e0e0);
}

.follow_txt {
  color: var(--wl-text-color, #222222);
}

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

.icon_following_new {
  background: url(../../whitelabels/mobile/images/following-hover-new.svg?2882baf91c62) no-repeat center center;
}

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

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

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

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

.cbValidate_neutral {
  display: none;
}

.cbValidate_invalid {
  color: #d50000;
}

.cbValidate_valid {
  display: none;
}

.formvalidate_error {
  color: red;
}

.formvalidate_spinner {
  display: inline-block;
}
.formvalidate_spinner::after {
  width: 12px;
  height: 12px;
}

.formvalidate_hidden {
  display: none !important;
}

.grecaptcha-badge {
  display: none;
}

body.evolveMode {
  background-color: var(--background-neutral);
}

.ssoLoginWrapper {
  width: 337px;
  margin: 0 auto 24px;
}

.evolveMode #main {
  background-color: var(--background-neutral);
}
.evolveMode .ssoLoginWrapper {
  width: auto;
  margin: 0;
}
.evolveMode .content {
  padding: 0 12px 7px;
  background: var(--background-neutral);
}
.evolveMode #footer {
  padding-bottom: 85px;
}
.evolveMode .evolveSignup {
  max-width: 768px;
}
.evolveMode .evolveSignup a {
  color: var(--text-brand-secondary);
}
.evolveMode .evolveSignup .signup-title-lg {
  color: var(--text-brand-primary);
  font-size: 20px;
  line-height: 28px;
  margin-bottom: 5px;
  text-align: left;
}
.evolveMode .evolveSignup .signup-title-sm {
  color: var(--text-secondary);
  font-family: "UbuntuRegular", Arial, Helvetica, sans-serif;
  font-size: 14px;
  line-height: 20px;
  text-align: left;
}
.evolveMode .evolveSignup table {
  border-spacing: 0;
  padding-top: 15px;
}
.evolveMode .evolveSignup .field-wrapper {
  margin: 0 0 16px;
}
.evolveMode .evolveSignup label {
  display: flex;
  align-items: center;
  color: var(--text-primary);
  font-size: 16px;
  line-height: 24px;
  margin-bottom: 8px;
}
.evolveMode .evolveSignup input {
  padding: 7px 11px;
  border-radius: var(--corner-radius-full);
  border: 1px solid var(--border-button-neutral);
  color: var(--text-primary);
  font-size: 16px;
  line-height: 24px;
  background-color: transparent;
}
.evolveMode .evolveSignup input:focus {
  outline: none;
  border-color: var(--border-button-focused);
  box-shadow: 0px 0px 0px 1px var(--border-button-focused);
}
.evolveMode .evolveSignup input::placeholder {
  color: var(--text-light);
}
.evolveMode .evolveSignup .select_wrapper {
  display: flex;
  width: 100%;
  gap: var(--spacing-xs);
  justify-content: space-around;
}
.evolveMode .evolveSignup select {
  border-radius: var(--corner-radius-full);
  border: 1px solid var(--border-button-neutral);
  color: var(--text-primary);
  font-size: 16px;
  line-height: 24px;
  background-color: transparent;
  padding: 7px 11px;
  margin: 0;
}
.evolveMode .evolveSignup select:has(> option[value=""]:checked) {
  color: var(--text-light);
}
.evolveMode .evolveSignup select option[value=""] {
  display: none;
}
.evolveMode .evolveSignup select:focus {
  outline: none;
  border-color: var(--border-button-focused);
  box-shadow: 0px 0px 0px 1px var(--border-button-focused);
}
.evolveMode .evolveSignup select#id_birthday_day, .evolveMode .evolveSignup select#id_subgender, .evolveMode .evolveSignup select#id_gender {
  flex: 1;
}
.evolveMode .evolveSignup select#id_birthday_month, .evolveMode .evolveSignup select#id_birthday_year {
  flex: 2;
}
.evolveMode .evolveSignup .checkbox-field-row {
  margin-bottom: 8px;
}
.evolveMode .evolveSignup .checkbox-label-row {
  display: flex;
  gap: var(--spacing-200);
  margin-bottom: 0;
  cursor: pointer;
  align-items: center;
}
.evolveMode .evolveSignup .checkbox-label-text {
  color: var(--text-button-neutral);
  font-family: "UbuntuRegular", Arial, Helvetica, sans-serif;
  font-size: 12px;
  line-height: 16px;
}
.evolveMode .evolveSignup .checkbox-label-text a {
  color: var(--text-brand-secondary);
}
.evolveMode .evolveSignup .formvalidate_spinner {
  line-height: 19px;
}
.evolveMode .evolveSignup .signup-submit {
  border: none;
  text-transform: capitalize;
  padding: var(--spacing-sm) var(--spacing-lg);
  border-radius: var(--corner-radius-full);
  background: var(--background-button-brand-primary);
  color: var(--text-button-white);
  font-family: "UbuntuRegular", Arial, Helvetica, sans-serif;
  font-size: 16px;
  line-height: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}
.evolveMode .evolveSignup .or_separator {
  padding: 16px 0 4px;
}
.evolveMode .evolveSignup .med_notice {
  color: var(--text-primary);
  font-size: 16px;
  line-height: 24px;
  margin-top: 26px;
}
.evolveMode .evolveSignup .small_notice {
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 16px;
  margin-top: 24px;
}
.evolveMode .evolveSignup .username_assist_row {
  color: var(--text-button-neutral);
  font-size: 12px;
  line-height: 16px;
}
.evolveMode .evolveSignup .username_assist_row button {
  color: var(--text-brand-secondary);
}
.evolveMode #footer a {
  color: var(--text-brand-secondary);
  font-size: 12px;
  line-height: 16px;
}
.evolveMode #flashMessages .message {
  border-radius: var(--corner-radius-lg);
  border: 1px solid var(--border-medium);
  background: var(--background-system-warning-light);
  margin: 16px 5px 2px 5px !important;
}
.evolveMode #flashMessages .message p {
  font-family: "UbuntuMedium", Arial, Helvetica, sans-serif;
  font-size: 14px;
  line-height: 20px;
  color: var(--text-primary);
}

/* ------ START SMALLER ROOM IMAGES MEDIA QUERIES ------ */
@media (max-width: 550px) {
  .icon_following,
  .icon_update_following,
  .icon_not_following {
    width: 30px;
    height: 30px;
    background-size: 30px 30px;
  }
}
/* ------ END SMALLER ROOM IMAGES MEDIA QUERIES ------ */
#header-links {
  padding: 10px;
  font-family: "UbuntuRegular", Arial, Helvetica, sans-serif;
  font-size: 13px;
  line-height: 25px;
  background: #1b8fbf;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.darkmode #header-links {
  background-color: #202c39;
}
#header-links .darkmode-toggle-container {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-bottom: 6px;
}
#header-links #user-info {
  margin: 0 0 6px 0;
  display: flex;
  justify-content: space-between;
}
#header-links #user-info .gender-username-container {
  display: flex;
  overflow: hidden;
}
#header-links #user-info .user-info-username {
  overflow: hidden;
  text-overflow: ellipsis;
}
#header-links #user-info .feature-icons {
  display: flex;
  align-items: start;
}
#header-links #user-info #gender-menu {
  margin-right: 8px;
  flex-shrink: 0;
}
#header-links #user-info .notification_bell {
  background: url(../../images/bell_inactive.svg?b7c610114958) no-repeat center;
  border: none;
  cursor: pointer;
  height: 18px;
  padding: 1px 0 1px 7px;
  vertical-align: top;
  width: 16px;
}
#header-links #user-info .notification_bell.has_unseen {
  background-image: url(../../images/bell_notification.svg?7c8c88191e0c);
}
#header-links #user-info .notification_bell.active {
  background-image: url(../../images/bell_active.svg?6e820b132257);
}
#header-links #user-info .chat_bubble {
  background: url(../../images/chat-bubble-gray.svg?7d187139b245) no-repeat center/contain;
  width: 22px;
  height: 20px;
  padding: 1px 7px;
  box-sizing: border-box;
}
#header-links #user-info .chat_bubble.active {
  background-image: url(../../images/chat-bubble-normal.svg?9ca8fb9daa5e);
}
#header-links #user-info .chat_bubble.has_unread {
  background-image: url(../../images/chat-bubble-new.svg?1a2e10645f4a);
}
#header-links #user-info .messaging_icon {
  padding: 1px 7px;
  box-sizing: border-box;
}
#header-links #user-status,
#header-links #user-tokens {
  width: 100%;
}
#header-links #tokens-label,
#header-links #status-label {
  float: left;
  clear: both;
  width: 60px;
  font-size: 12px;
}
#header-links #token-balance,
#header-links #status {
  float: left;
  font-family: "UbuntuMedium", Arial, Helvetica, sans-serif;
  width: auto;
  font-size: 12px;
}
#header-links #getmore,
#header-links #upgrade-link {
  width: auto;
  float: right;
}
#header-links #purchase_tokens,
#header-links #upgrade_user {
  color: #ff8a3f;
  text-decoration: none;
  font-family: "UbuntuMedium", Arial, Helvetica, sans-serif;
  font-size: 12px;
}
#header-links #purchase_tokens a:hover,
#header-links #upgrade_user a:hover {
  text-decoration: underline;
}

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

/**
 * Generic mixins
 */
#pushmenu-container {
  height: 100%;
  width: 100%;
  position: fixed;
  overflow: hidden auto;
  display: none;
  z-index: 1001;
  top: 0;
}

.pushmenu {
  background-color: #1b8fbf;
  font-family: "Poppins", "UbuntuMedium", "UbuntuRegular", Arial, Helvetica, sans-serif;
  width: 320px;
  font-weight: 400;
  height: 100%;
  color: #fff;
  top: 0;
  bottom: 0;
  position: absolute;
  overflow: auto;
}
.darkmode .pushmenu {
  background-color: #202c39;
}
.pushmenu.pushmenu-animate {
  transform: translate3d(320px, 0, 0);
  -o-transform: translate3d(320px, 0, 0);
  -ms-transform: translate3d(320px, 0, 0);
  -moz-transform: translate3d(320px, 0, 0);
  -webkit-transform: translate3d(320px, 0, 0);
}
.pushmenu.pushmenu-left {
  left: -320px;
}

.main-menu {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.main-menu .pushmenu-link {
  display: block;
  font-size: 13px;
  text-decoration: none;
  border-top: 1px solid #2289bc;
  border-bottom: 1px solid #0a4666;
  line-height: 44px;
  overflow: hidden !important;
  background-color: #0c6a93;
}
.darkmode .main-menu .pushmenu-link {
  border-top: 1px solid #2d3e50;
  border-bottom: 1px solid #202c39;
  background-color: #17202a;
}
.main-menu .pushmenu-link a.indent1 {
  padding-left: 25px;
}
.main-menu .pushmenu-link a {
  display: block;
  padding-left: 10px;
  line-height: 44px;
  height: 44px;
  color: #fff;
  text-decoration: none;
}
.main-menu .pushmenu-link:active {
  color: #fff;
}
.main-menu .bottom-link {
  color: #fff;
  font-size: 10px;
  font-family: "Poppins", "UbuntuMedium", "UbuntuRegular", Arial, Helvetica, sans-serif;
  font-weight: 400;
  text-decoration: none;
  margin: 0 3px 0 3px;
  display: inline-block;
}
.main-menu .feedback-button {
  background: none;
  border: none;
  cursor: pointer;
  color: #fff;
  font-size: 10px;
  font-family: "Poppins", "UbuntuMedium", "UbuntuRegular", Arial, Helvetica, sans-serif;
  font-weight: 400;
  text-decoration: none;
  margin: 0 3px 10px 3px;
  padding: 0;
}
.main-menu .feedback-button:hover {
  text-decoration: underline;
}
.main-menu .spacer {
  height: 8px !important;
}
.main-menu .bottom-box {
  text-align: center;
  width: 320px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  margin: 0;
}
@media (min-height: 992px) {
  .main-menu .bottom-box {
    height: 250px;
  }
}
.main-menu .bottom-box > * {
  flex: 0 1 18px;
}
.main-menu .bottom-box a:hover {
  text-decoration: underline;
}
.main-menu .bottom-box div {
  line-height: 18px;
}
.main-menu .bottom-spacer {
  height: 100px;
}
.main-menu #cam_page_container {
  margin: 0;
  padding: 0;
}
.main-menu #mobile-social-media-icons {
  padding: 0;
  margin: 0;
}
.main-menu #mobile-social-media-icons li,
.main-menu #mobile-social-media-icons a {
  padding: 0;
}
.main-menu #mobile-social-media-icons li {
  display: inline-block;
  border: 0;
  background: none;
  padding: 0 12px;
  height: 40px;
  line-height: 50px;
}
.main-menu #mobile-social-media-icons a {
  display: inline-block;
  height: 20px;
  line-height: 20px;
  height: auto;
}
.main-menu #header-links {
  font-family: "Poppins", "UbuntuMedium", "UbuntuRegular", Arial, Helvetica, sans-serif;
}
.main-menu #header-links #status,
.main-menu #header-links #token-balance {
  font-family: "Poppins", "UbuntuMedium", "UbuntuRegular", Arial, Helvetica, sans-serif;
}
.main-menu #header-links #upgrade_user,
.main-menu #header-links #purchase_tokens {
  font-family: "Poppins", "UbuntuMedium", "UbuntuRegular", Arial, Helvetica, sans-serif;
  font-weight: 500;
}
.main-menu #header-links #status-label,
.main-menu #header-links #tokens-label {
  width: 65px;
}
.main-menu .pushmenu_container {
  height: 166px;
  display: block;
}
.main-menu .pushmenu_container--shorter {
  height: auto;
}
.main-menu .pushmenu_notif_bar {
  padding: 16px;
  height: 18px;
}
.main-menu .pushmenu_notif_bar::after {
  content: "";
  clear: both;
}
.main-menu .pushmenu_notif_bell {
  background: url(../../images/bell_inactive.svg?b7c610114958) no-repeat center;
  border: none;
  cursor: pointer;
  height: 18px;
  width: 18px;
  float: right;
}
.main-menu .pushmenu_notif_bell.has_unseen {
  background-image: url(../../images/bell_notification.svg?7c8c88191e0c);
}
.main-menu .pushmenu_notif_bell.active {
  background-image: url(../../images/bell_active.svg?6e820b132257);
}
.main-menu .pushmenu_gender, .main-menu .pushmenu_profpic {
  background-position: center;
  background-repeat: no-repeat;
  background-size: 18px 18px;
  background-image: url(../../images/gendericons/anon.svg?00993266cf7f);
  width: 18px;
  height: 18px;
  float: left;
}
.main-menu .pushmenu_gender--m, .main-menu .pushmenu_profpic--m {
  background-image: url(../../images/icon-male.svg?fe3203a05c16);
}
.main-menu .pushmenu_gender--f, .main-menu .pushmenu_profpic--f {
  background-image: url(../../images/icon-male.svg?fe3203a05c16);
}
.main-menu .pushmenu_gender--t, .main-menu .pushmenu_profpic--t {
  background-image: url(../../images/icon-trans.svg?4984008acb01);
}
.main-menu .pushmenu_gender--c, .main-menu .pushmenu_profpic--c {
  background-image: url(../../images/icon-cpl.svg?b74df354b80e);
}
.main-menu .pushmenu_gender--anon, .main-menu .pushmenu_profpic--anon {
  background-image: url(../../images/gendericons/anon.svg?00993266cf7f);
}
.main-menu .pushmenu_infobox {
  padding: 8px 16px;
}
.main-menu .pushmenu_lisu-btn {
  display: block;
  text-decoration: none;
  color: white;
  text-align: center;
  font-family: "Poppins", "UbuntuMedium", "UbuntuRegular", Arial, Helvetica, sans-serif;
  border-radius: 4px;
  font-size: 14px;
  height: 46px;
  line-height: 46px;
  text-transform: uppercase;
  font-weight: 700;
}
.main-menu .pushmenu_lisu-btn--sign-up {
  background-color: #033e58;
  margin-bottom: 8px;
}
.darkmode .main-menu .pushmenu_lisu-btn--sign-up {
  background-color: #0c6a93;
}
.main-menu .pushmenu_lisu-btn--log-in {
  background-color: rgba(34, 34, 34, 0.1);
}
.darkmode .main-menu .pushmenu_lisu-btn--log-in {
  background-color: #2d3e50;
}

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

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

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

#static-header {
  z-index: 1000;
}

.clear {
  clear: both;
}

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

.hidden {
  display: none;
}

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

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

#entrance_terms {
  display: block;
  position: fixed;
  border: none;
  background: none;
  padding: 0;
  height: 90%;
  min-height: 360px;
  top: 5%;
  left: 2px;
  right: 2px;
}
@media screen and (orientation: landscape) {
  #entrance_terms {
    min-height: 360px;
    left: 18%;
    right: 18%;
  }
}
@media screen and (min-width: 320px) and (orientation: portrait) {
  #entrance_terms {
    left: 18px;
    right: 18px;
  }
}
@media screen and (min-height: 480px) {
  #entrance_terms {
    height: 75%;
    top: 13%;
    bottom: 12%;
    left: 24px;
    right: 24px;
  }
}
@media screen and (min-height: 680px) {
  #entrance_terms {
    height: 56%;
    top: 21%;
    bottom: 21%;
  }
}
@media screen and (min-height: 320px) and (orientation: landscape) {
  #entrance_terms {
    width: 64%;
    max-width: 64vw;
    top: 3%;
    left: 18%;
    right: 18%;
    height: 94%;
    max-height: 94vh;
  }
}

.entrance-terms--shown {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
}

.entrance-terms--shown,
.age-gate--shown {
  background-color: black;
}
.entrance-terms--shown #main,
.age-gate--shown #main {
  background: white;
}

#entrance_terms_overlay,
#age_gate_overlay {
  background-color: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  height: 100%;
  width: 100%;
  position: fixed;
  z-index: 1100;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: block;
  overflow-y: scroll;
}
@media screen and (max-height: 500px) and (orientation: portrait) {
  #entrance_terms_overlay,
  #age_gate_overlay {
    overflow-y: scroll;
  }
}
@media screen and (min-height: 360px) and (orientation: landscape) {
  #entrance_terms_overlay,
  #age_gate_overlay {
    overflow-y: hidden;
  }
}

#close-entterms {
  width: 100%;
  text-align: center;
  height: 48px;
}
#close-entterms #close_entrance_terms {
  display: block;
  background-color: #0c6a93;
  color: #fff !important;
  text-transform: uppercase;
  font-family: inherit;
  font-weight: normal !important;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  overflow: hidden;
  margin: 0 auto;
  cursor: pointer;
  text-decoration: none;
  font-size: 16px;
  width: 100%;
  max-width: calc(100% - 48px);
  height: 48px;
  line-height: 48px;
  border: none;
  padding: 0;
}

#entterms {
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  background-color: white;
  border-radius: 10px;
  font-family: "UbuntuRegular", Arial, Helvetica, sans-serif;
  height: 100%;
  min-height: 265px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.darkmode #entterms {
  background-color: #1c2733;
}

#entterms-over18,
#entterms-scroll,
#entterms-lawenforce,
#entterms-exit,
#entterms-images {
  flex: 0 0 auto;
  text-align: center;
  position: relative;
}

#entterms-over18 {
  font-family: "UbuntuMedium", Arial, Helvetica, sans-serif;
  height: auto;
  top: 0;
  left: 0;
  right: 0;
  font-size: 12px;
  color: #222;
  margin: 0 auto;
  padding: 24px 24px 8px 24px;
}
.darkmode #entterms-over18 {
  color: #68b5f0;
}
@media screen and (orientation: landscape) {
  #entterms-over18 {
    padding: 16px 24px 8px 24px;
  }
}
@media screen and (max-height: 360px) and (orientation: landscape) {
  #entterms-over18 {
    padding: 8px 24px;
  }
}

#entterms-scroll {
  font-size: 12px;
  color: #7f7f7f;
  min-height: 35px;
  padding: 4px;
  border: 1px solid #ccc;
  margin: 0 auto;
  text-align: left;
  line-height: 14px;
  width: calc(100% - 80px);
  height: 30%;
  flex: 1 1 auto;
  overflow-y: scroll;
}
.darkmode #entterms-scroll {
  color: #b3b3b3;
  border: 1px solid #6e6f70;
}
@media screen and (max-width: 320px) and (orientation: portrait) {
  #entterms-scroll {
    width: calc(100% - 72px);
  }
}
#entterms-scroll p {
  margin: 0;
  padding: 0;
}

#entterms-scroll-inner {
  padding: 4px;
}
#entterms-scroll-inner a {
  color: #0c6a93;
}
.darkmode #entterms-scroll-inner a {
  color: #68b5f0;
}

#entterms-lawenforce {
  height: auto;
  left: 0;
  right: 0;
  color: red;
  font-weight: bold;
  padding: 12px 24px 20px 24px;
  font-size: 9px;
  line-height: 12.6px;
}
@media screen and (orientation: landscape) {
  #entterms-lawenforce {
    padding: 6px 24px 14px 24px;
  }
}
@media screen and (max-height: 360px) and (orientation: landscape) {
  #entterms-lawenforce {
    padding: 8px 24px;
  }
}

#entterms-exit {
  font-size: 12px;
  height: 20px;
  line-height: 20px;
  padding-top: 5px;
}
#entterms-exit a {
  color: #494949;
  text-decoration: none;
}
.darkmode #entterms-exit a {
  color: #68b5f0;
}

#entterms-images {
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  height: 26px;
  padding-top: 16px;
  padding-bottom: 24px;
}
@media screen and (orientation: landscape) {
  #entterms-images {
    padding-top: 8px;
    padding-bottom: 16px;
  }
}
@media screen and (max-height: 360px) and (orientation: landscape) {
  #entterms-images {
    padding-bottom: 8px;
  }
}
#entterms-images img {
  max-width: 65px;
}

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

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

#age-gate-signup {
  background-color: white;
  border-radius: 8px;
  box-sizing: border-box;
  font-size: 14px;
  max-width: 930px;
  width: 95vw;
  display: flex;
  overflow: auto;
  scrollbar-width: none;
}
#age-gate-signup::-webkit-scrollbar {
  display: none;
}
#age-gate-signup .left-half {
  padding: 20px 30px;
  background-color: rgba(44, 170, 44, 0.05);
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 140px;
  flex: 1 2 265px;
}
#age-gate-signup .right-half {
  min-width: 500px;
  height: 570px;
  padding: 20px;
  flex: 1 0 500px;
}
#age-gate-signup .right-half iframe {
  width: 100%;
  height: 100%;
  border: none;
  scrollbar-width: none;
  display: none;
}
#age-gate-signup .right-half iframe::-webkit-scrollbar {
  display: none;
}
#age-gate-signup .text-container {
  margin-top: 80px;
}
#age-gate-signup .text-container img.verified-check {
  height: 40px;
}
#age-gate-signup .text-container h2 {
  color: #222429;
  font-family: UbuntuBold, Arial, Helvetica, sans-serif;
  font-size: 1.4em;
  line-height: 1.4em;
}
#age-gate-signup .text-container p {
  margin-bottom: 2.4em;
  color: black;
}
#age-gate-signup .link-row {
  margin-bottom: 10px;
}
#age-gate-signup .link-row .login {
  padding: 5px 16px 5px 0;
  margin-right: 16px;
  white-space: nowrap;
  display: inline-block;
}
#age-gate-signup .link-row .age-gate-signup-dismiss {
  padding: 5px 0 5px 1px;
  white-space: nowrap;
  display: inline-block;
}

.multi-av {
  position: relative;
  color: #222429;
  max-width: 450px !important;
  box-sizing: border-box;
}
.multi-av .age-gate-tooltip {
  z-index: 1;
}
.multi-av .age-gate-info-icon.blue {
  background-image: url("../../images/info-icon-blue.svg?c88fbc603783") !important;
  width: 14px !important;
  height: 14px !important;
  position: relative;
  top: 1px;
}
.multi-av .header {
  font-size: 20px;
  line-height: 28px;
  margin-bottom: 8px;
}
.multi-av .yoti-logo {
  width: 45px;
}
.multi-av #av-choice-submit:focus,
.multi-av #av-keepalive-submit:focus {
  outline: -webkit-focus-ring-color auto 1px;
}
.darkmode .multi-av #av-choice-submit:is(textarea, input, button):is(:not(button, input[type=submit], input[type=button])),
.darkmode .multi-av #av-keepalive-submit:is(textarea, input, button):is(:not(button, input[type=submit], input[type=button])) {
  background-color: #202c39;
}
.darkmode .multi-av #av-choice-submit:is(textarea, input, button):focus,
.darkmode .multi-av #av-keepalive-submit:is(textarea, input, button):focus {
  outline: none;
  box-shadow: 0 0 0 2px #68b5f0;
}
.darkmode .multi-av #av-choice-submit:is(select),
.darkmode .multi-av #av-keepalive-submit:is(select) {
  background-color: #202c39;
}
.darkmode .multi-av #av-choice-submit:is(select):focus,
.darkmode .multi-av #av-keepalive-submit:is(select):focus {
  outline: 2px solid #68b5f0;
}
.multi-av #av-choice-submit, .darkmode .multi-av #av-choice-submit,
.multi-av #av-keepalive-submit,
.darkmode .multi-av #av-keepalive-submit {
  background-color: var(--wl-signup-bg-color, #f47321);
  color: #ffffff;
  border: 1px solid var(--wl-signup-alt-bg-color, #cd5d26);
  border-radius: 4px;
}
.multi-av #av-choice-submit,
.multi-av #av-keepalive-submit {
  border: none !important;
  font-size: 16px;
  line-height: 24px;
  display: block;
  text-align: center;
  padding: 8px 32px;
  margin: 30px 0 0 0;
  cursor: pointer;
}
.multi-av #av-choices {
  margin-top: 20px;
}
.multi-av #av-choices .show-more-verification-options {
  display: block;
  font-size: 14px;
  cursor: pointer;
  margin-bottom: 6px;
}
.multi-av #av-choices .show-more-verification-options img {
  position: relative;
  top: -2px;
  margin-left: 3px;
}
.multi-av #av-choices .method-div .choice-div {
  border: none;
  background-color: #f8f9fa;
  height: 60px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  cursor: pointer;
}
.multi-av #av-choices .method-div .choice-div.highlight {
  border: 1px solid #0c6a93;
  background-color: white;
}
.multi-av #av-choices .method-div .choice-div .left-half {
  display: flex;
  align-items: center;
}
.multi-av #av-choices .method-div .choice-div input {
  margin: 0 12px;
  position: relative;
  top: 1px;
  width: 12px;
  height: 12px;
}
.multi-av #av-choices .method-div .choice-div label span {
  color: #222429;
  font-size: 14px;
  line-height: 20px;
}
.multi-av #av-choices .method-div .choice-div label img {
  position: relative;
  margin-right: 4px;
}
.multi-av #av-choices .method-div .choice-div label .age-gate-info-label {
  display: inline-block;
  border-radius: 5px;
  padding: 1px 10px;
  vertical-align: top;
  background-color: rgb(229, 238, 255);
}
.multi-av #av-choices .method-div .choice-div label[for=choice-verifymy-email] img {
  top: 5px;
}
.multi-av #av-choices .method-div .choice-div label[for=choice-incode-id] img {
  top: 2px;
}
.multi-av #av-choices .method-div .choice-div label[for=choice-incode-face] img {
  top: 4px;
}
.multi-av #av-choices .method-div .choice-div label[for=choice-yoti] img.yoti-logo {
  width: 75px;
  top: 3px;
}
.multi-av #av-choices .method-div .choice-div label[for=choice-yoti] img.smartphone-logo {
  top: 4px;
}
.multi-av #av-choices .method-div .choice-div label[for=choice-cc] img {
  top: 4px;
}
.multi-av #av-choices .method-div .choice-div label[for=choice-age-key] img {
  top: 4px;
}
.multi-av #av-choices .method-div .choice-div .recommended-text {
  color: #288a09;
  font-family: UbuntuRegular, Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px; /* 142.857% */
  justify-content: center;
  text-align: center;
}
@media (max-width: 375px) {
  .multi-av #av-choices .method-div .choice-div .recommended-text {
    display: none;
  }
}
.multi-av #av-choices .method-div .choice-div .right-half {
  margin-right: 12px;
}
.multi-av #av-choices .method-div .choice-div .right-half .age-gate-info-icon {
  background-image: url("../../images/info-icon-gray.svg?00bc780983de");
  position: relative;
  top: 1px;
}
.multi-av #av-choices .method-div .choice-div .right-half .age-gate-tooltip {
  width: 290px;
  right: unset;
  left: -145px;
  z-index: 1;
  font-size: 12px;
  position: absolute;
}
.multi-av #av-choices .method-div .choice-div .with-help-text {
  margin: 14px 13px 14px 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: baseline;
}
.multi-av #av-choices .method-div .choice-div .label-above-help {
  margin-right: auto;
}
.multi-av #av-choices .method-div .choice-div .verifymy-email-help-text {
  display: block;
}
.multi-av #av-choices .method-div .choice-div .verifymy-email-help-text p {
  color: #525252;
  font-size: 12px;
  line-height: 16px;
  font-family: UbuntuRegular, Arial, Helvetica, sans-serif;
  margin-bottom: 10px;
}
.multi-av #av-choices .method-div .choice-div.no-height {
  height: unset;
}

.verify-cc-home {
  display: none;
  background-color: white;
  border: 1px solid #ccc;
  border-radius: 8px;
  max-width: 400px;
  padding: 30px 30px 0;
  box-sizing: border-box;
  position: relative;
}
.verify-cc-home .top-container {
  margin-left: 10px;
}
.verify-cc-home .back-to-methods {
  font-size: 14px;
  line-height: 22px;
  margin-bottom: 15px;
  cursor: pointer;
  color: #0c6a93;
  display: inline-block;
}
.verify-cc-home .back-to-methods img {
  position: relative;
  top: 1px;
  margin-right: 6px;
}
.verify-cc-home .title {
  font-size: 20px;
  line-height: 28px;
  font-family: UbuntuBold, Arial, Helvetica, sans-serif;
  color: #f47321;
  margin-bottom: 10px;
}
.verify-cc-home .description {
  font-size: 13px;
  line-height: 18px;
  color: #6e6f70;
}

.under-modal {
  font-size: 12px;
  position: absolute;
  bottom: -64px;
  width: calc(100% - 60px) !important;
  padding: 20px 0;
  color: white;
  font-size: 14px;
  display: block;
  text-align: center;
}
.under-modal a {
  color: white;
}

.multi-av {
  font-size: 0.875em;
}
.multi-av .age-gate-account.under-modal {
  bottom: -74px;
  width: calc(100% - 40px) !important;
}

#av-choices .age-gate-tooltip {
  left: unset !important;
  right: 0 !important;
}

#age_gate_overlay {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow-y: auto;
}

#age_gate_home {
  background-color: white;
  border-radius: 8px;
  line-height: 1.4em;
  max-width: 400px;
  padding: 20px;
  margin: 10px;
}
#age_gate_home strong {
  font-family: UbuntuBold, Arial, Helvetica, sans-serif;
}
#age_gate_home .age-gate-header {
  margin-bottom: 1.2em;
}
#age_gate_home .age-gate-header strong {
  font-size: 1.4em;
}
#age_gate_home .age-gate-header span.branding {
  color: #ccc;
  float: right;
}
#age_gate_home .age-gate-header .incode-logo,
#age_gate_home .age-gate-header .yoti-logo {
  display: inline-block;
  height: 11px;
  margin-left: 2px;
  vertical-align: baseline;
}
#age_gate_home .age-gate-tooltip-container {
  display: inline;
  position: relative;
}
#age_gate_home .age-gate-info-icon {
  align-self: center;
  background: url(../../images/info-icon-black.svg?a8153a214a15) center center/contain no-repeat;
  border-radius: 50%;
  cursor: pointer;
  display: inline-block;
  height: 12px;
  margin-left: 4px;
  width: 12px;
}
#age_gate_home .age-gate-tooltip {
  background: white;
  border: 1px solid #ccc;
  border-radius: 6px;
  box-sizing: border-box;
  display: none;
  left: 0;
  margin: 0 auto;
  max-width: 400px;
  padding: 0 15px;
  position: absolute;
  right: 0;
}
#age_gate_home .age-gate-info-icon:hover + .age-gate-tooltip,
#age_gate_home .age-gate-info-icon:active + .age-gate-tooltip,
#age_gate_home .age-gate-info-icon:focus + .age-gate-tooltip,
#age_gate_home .age-gate-tooltip:hover,
#age_gate_home .age-gate-tooltip:active,
#age_gate_home .age-gate-tooltip:focus {
  display: block;
}
#age_gate_home .age-gate-subtext {
  color: #999;
  font-size: 0.9em;
}
#age_gate_home a.age-gate-verify,
#age_gate_home span.age-gate-account {
  display: block;
  text-align: center;
  width: 100%;
}
#age_gate_home a.age-gate-verify:focus {
  outline: -webkit-focus-ring-color auto 1px;
}
.darkmode #age_gate_home a.age-gate-verify:is(textarea, input, button):is(:not(button, input[type=submit], input[type=button])) {
  background-color: #202c39;
}
.darkmode #age_gate_home a.age-gate-verify:is(textarea, input, button):focus {
  outline: none;
  box-shadow: 0 0 0 2px #68b5f0;
}
.darkmode #age_gate_home a.age-gate-verify:is(select) {
  background-color: #202c39;
}
.darkmode #age_gate_home a.age-gate-verify:is(select):focus {
  outline: 2px solid #68b5f0;
}
#age_gate_home a.age-gate-verify, .darkmode #age_gate_home a.age-gate-verify {
  background-color: var(--wl-signup-bg-color, #f47321);
  color: #ffffff;
  border: 1px solid var(--wl-signup-alt-bg-color, #cd5d26);
  border-radius: 4px;
}
#age_gate_home a.age-gate-verify {
  font-size: 1.1em;
  height: 50px;
  line-height: 50px;
  margin: 30px 0 20px;
  width: 100%;
}

.overlayModalOverlay {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1100;
  background-color: rgba(0, 0, 0, 0.4);
}

.overlayModalElement {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.auth_option {
  color: #0373a3;
  text-decoration: none;
}
.auth_option:hover {
  text-decoration: none;
}
.auth_option div {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 32px;
  box-sizing: border-box;
  border: 1px solid #525252;
  border-radius: 4px;
  color: #525252;
  margin-bottom: 8px;
  vertical-align: middle;
}
.mobile .auth_option div {
  height: 46px;
}
.auth_option p {
  font-size: 14px;
  line-height: 16px;
  font-family: "UbuntuRegular", Arial, Helvetica, sans-serif;
  margin: 0 0 0 8px !important;
}
.mobile .auth_option p {
  font-size: 16px;
  line-height: 24px;
}
.evolveMode .auth_option img {
  padding-left: 3px;
}
.evolveMode .auth_option div {
  border: 1px solid var(--border-button-neutral);
  height: 40px;
  border-radius: var(--corner-radius-full);
  background-color: var(--background-button-neutral-transparent);
}
.evolveMode .auth_option p {
  color: var(--text-button-neutral);
  font-size: 16px;
  line-height: 24px;
  margin: 0 0 0 12px !important;
}

.or_separator p {
  color: #a7a7a7;
  overflow: hidden;
  text-align: center;
  font-size: 14px;
  line-height: 22px;
}
.or_separator p:before, .or_separator p:after {
  background-color: #efefef;
  content: "";
  display: inline-block;
  height: 1px;
  position: relative;
  vertical-align: middle;
  width: 50%;
}
.or_separator p:before {
  right: 0.5em;
  margin-left: -50%;
}
.or_separator p:after {
  left: 0.5em;
  margin-right: -50%;
}
.or_separator.darker p:before, .or_separator.darker p:after {
  background-color: #cbcbcb;
}
.evolveMode .or_separator p {
  font-size: 14px;
  line-height: 20px;
  margin: 0 0 12px;
  color: var(--text-light);
}
.evolveMode .or_separator p:before, .evolveMode .or_separator p:after {
  transform: translateY(-2px);
  background-color: var(--text-light);
}

@import url("../../css/twemoji-sprite-1.css?f1f24fe0d99b");
@import url("../../css/twemoji-sprite-2.css?f215bebda57f");
@import url("../../css/twemoji-sprite-3.css?f49289dba297");
.sprite-twemoji {
  zoom: 0.75;
  transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%) scale(0.75);
}

img.emoji {
  height: 1em;
  width: 1em;
  margin: 0 0.05em 0 0.05em;
  vertical-align: -0.1em;
}
img.emojiButton {
  height: 1em;
  width: 1em;
  vertical-align: text-bottom;
}
img.emojiToneChoice {
  height: 1em;
  width: 1em;
}
img.emojiChat {
  height: 1.1em;
  width: 1.1em;
  margin: 0 0.05em 0 0.05em;
  vertical-align: -0.1em;
}