/* reset css */
* {
  box-sizing: border-box;
}
html {
  margin: 0em;
  padding: 0;
  height: 100%;
  width: 100%;
}
a {
  outline: none;
}
body {
  margin: 0;
  padding: 0;
  font-family: sans-serif, "trebuchet ms", "lucida grande",
    "lucida sans unicode", arial, helvetica;
  font-size: 14px;
  width: 100%;
  height: 100%;
}
input:focus,
select:focus,
textarea:focus,
button:focus {
  outline: 0;
}
p {
  padding: 0;
  margin: 0;
}
img {
  border: 0px;
}
h1,
h2,
h3 {
  margin: 0;
  padding: 0;
}
h2 {
  font-size: 1.5em;
  margin-bottom: 5px;
}
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
li {
  list-style: none;
}
button {
  border: none;
  outline: none !important;
  cursor: pointer;
}
textarea,
input {
  resize: none;
  font-size: 14px;
  font-family: sans-serif, "trebuchet ms", "lucida grande",
    "lucida sans unicode", arial, helvetica, sans-serif;
}
input {
  font-family: "FontAwesome", sans-serif, "trebuchet ms", "lucida grande",
    "lucida sans unicode", arial, helvetica, sans-serif;
}
input:not([type="hidden"]):not([type="file"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]),
select,
textarea {
  min-height: 30px;
  padding: 4px 7px;
  border-radius: 3px;
  line-height: 1.2;
}

/* global element css */
.padBox {
  padding: 15px;
}
.vcClearbox {
  overflow-y: auto;
}
.vcClear {
  width: 100%;
  height: 1px;
  clear: both;
}
.vcClear3 {
  width: 100%;
  height: 3px;
  clear: both;
}
.vcClear5 {
  width: 100%;
  height: 5px;
  clear: both;
}
.vcClear10 {
  width: 100%;
  height: 10px;
  clear: both;
}
.vcClear15 {
  width: 100%;
  height: 15px;
  clear: both;
}
.vcClear20 {
  width: 100%;
  height: 20px;
  clear: both;
}
.vcClear25 {
  width: 100%;
  height: 25px;
  clear: both;
}
.vcClear30 {
  width: 100%;
  height: 30px;
  clear: both;
}
.vcTmargin3 {
  margin-top: 3px;
}
.vcTmargin5 {
  margin-top: 5px;
}
.vcTmargin10 {
  margin-top: 10px;
}
.vcTmargin15 {
  margin-top: 15px;
}
.vcTmargin20 {
  margin-top: 20px;
}
.vcTmargin25 {
  margin-top: 25px;
}
.vcTmargin30 {
  margin-top: 30px;
}
.vcBmargin3 {
  margin-bottom: 3px;
}
.vcBmargin5 {
  margin-bottom: 5px;
}
.vcBmargin10 {
  margin-bottom: 10px;
}
.vcBmargin15 {
  margin-bottom: 15px;
}
.vcBmargin20 {
  margin-bottom: 20px;
}
.vcBmargin25 {
  margin-bottom: 25px;
}
.vcBmargin30 {
  margin-bottom: 30px;
}
.vcLmargin3 {
  margin-left: 3px;
}
.vcLmargin5 {
  margin-left: 5px;
}
.vcLmargin10 {
  margin-left: 10px;
}
.vcLmargin15 {
  margin-left: 15px;
}
.vcLmargin20 {
  margin-left: 20px;
}
.vcLmargin25 {
  margin-left: 25px;
}
.vcLmargin30 {
  margin-left: 30px;
}
.vcRmargin3 {
  margin-right: 3px;
}
.vcRmargin5 {
  margin-right: 5px;
}
.vcRmargin10 {
  margin-right: 10px;
}
.vcRmargin15 {
  margin-right: 15px;
}
.vcRmargin20 {
  margin-right: 20px;
}
.vcRmargin25 {
  margin-right: 25px;
}
.vcRmargin30 {
  margin-right: 30px;
}
.vcVmargin5 {
  margin-top: 3px;
  margin-bottom: 3px;
}
.vcVmargin5 {
  margin-top: 5px;
  margin-bottom: 5px;
}
.vcVmargin10 {
  margin-top: 10px;
  margin-bottom: 10px;
}
.vcVmargin15 {
  margin-top: 15px;
  margin-bottom: 15px;
}
.vcVmargin20 {
  margin-top: 20px;
  margin-bottom: 20px;
}
.vcVmargin25 {
  margin-top: 25px;
  margin-bottom: 25px;
}
.vcVmargin30 {
  margin-top: 30px;
  margin-bottom: 30px;
}
.vcHmargin5 {
  margin-left: 3px;
  margin-right: 3px;
}
.vcHmargin5 {
  margin-left: 5px;
  margin-right: 5px;
}
.vcHmargin10 {
  margin-left: 10px;
  margin-right: 10px;
}
.vcHmargin15 {
  margin-right: 15px;
  margin-right: 15px;
}
.vcHmargin20 {
  margin-right: 20px;
  margin-right: 20px;
}
.vcHmargin25 {
  margin-right: 25px;
  margin-right: 25px;
}
.vcHmargin30 {
  margin-right: 30px;
  margin-right: 30px;
}
.vcNotpad3 {
  padding: 0px 3px 3px 3px;
}
.vcNotpad5 {
  padding: 0px 5px 5px 5px;
}
.vcNotpad10 {
  padding: 0px 10px 10px 10px;
}
.vcNotpad15 {
  padding: 0px 15px 15px 15px;
}
.vcNotpad20 {
  padding: 0px 20px 20px 20px;
}
.vcNotpad25 {
  padding: 0px 25px 25px 25px;
}
.vcNotpad30 {
  padding: 0px 30px 30px 30px;
}
.vcPad3 {
  padding: 3px;
}
.vcPad5 {
  padding: 5px;
}
.vcPad10 {
  padding: 10px;
}
.vcPad15 {
  padding: 15px;
}
.vcPad20 {
  padding: 20px;
}
.vcPad25 {
  padding: 25px;
}
.vcPad30 {
  padding: 30px;
}
.vcTpad3 {
  padding-top: 3px;
}
.vcTpad5 {
  padding-top: 5px;
}
.vcTpad10 {
  padding-top: 10px;
}
.vcTpad15 {
  padding-top: 15px;
}
.vcTpad20 {
  padding-top: 20px;
}
.vcTpad25 {
  padding-top: 25px;
}
.vcTpad30 {
  padding-top: 30px;
}
.vcBpad3 {
  padding-bottom: 3px;
}
.vcBpad5 {
  padding-bottom: 5px;
}
.vcBpad10 {
  padding-bottom: 10px;
}
.vcBpad15 {
  padding-bottom: 15px;
}
.vcBpad20 {
  padding-bottom: 20px;
}
.vcBpad25 {
  padding-bottom: 25px;
}
.vcBpad30 {
  padding-bottom: 30px;
}
.vcLpad3 {
  padding-left: 3px;
}
.vcLpad5 {
  padding-left: 5px;
}
.vcLpad10 {
  padding-left: 10px;
}
.vcLpad15 {
  padding-left: 15px;
}
.vcLpad20 {
  padding-left: 20px;
}
.vcLpad25 {
  padding-left: 25px;
}
.vcLpad30 {
  padding-left: 30px;
}
.vcRpad3 {
  padding-right: 3px;
}
.vcRpad5 {
  padding-right: 5px;
}
.vcRpad10 {
  padding-right: 10px;
}
.vcRpad15 {
  padding-right: 15px;
}
.vcRpad20 {
  padding-right: 20px;
}
.vcRpad25 {
  padding-right: 25px;
}
.vcRpad30 {
  padding-right: 30px;
}
.vcVpad3 {
  padding-top: 3px;
  padding-bottom: 3px;
}
.vcVpad5 {
  padding-top: 3px;
  padding-bottom: 3px;
}
.vcVpad5 {
  padding-top: 5px;
  padding-bottom: 5px;
}
.vcVpad10 {
  padding-top: 10px;
  padding-bottom: 10px;
}
.vcVpad15 {
  padding-top: 15px;
  padding-bottom: 15px;
}
.vcVpad20 {
  padding-top: 20px;
  padding-bottom: 20px;
}
.vcVpad25 {
  padding-top: 25px;
  padding-bottom: 25px;
}
.vcVpad30 {
  padding-top: 30px;
  padding-bottom: 30px;
}
.vcHpad3 {
  padding-left: 3px;
  padding-right: 3px;
}
.vcHpad5 {
  padding-left: 5px;
  padding-right: 5px;
}
.vcHpad10 {
  padding-left: 10px;
  padding-right: 10px;
}
.vcHpad15 {
  padding-left: 15px;
  padding-right: 15px;
}
.vcHpad20 {
  padding-left: 20px;
  padding-right: 20px;
}
.vcHpad25 {
  padding-left: 25px;
  padding-right: 25px;
}
.vcHpad30 {
  padding-left: 30px;
  padding-right: 30px;
}

/* table and cell css */
.vistaTable {
  display: table;
  table-layout: fixed;
  width: 100%;
}
.btableAuto {
  display: table;
  table-layout: auto;
}
.btableHeight {
  display: table;
  table-layout: fixed;
  width: 100%;
  height: 100%;
}
.vistaCell {
  display: table-cell;
}
.bcellAuto {
  display: table-cell;
  width: 1%;
  white-space: nowrap;
}
.vcBrow {
  display: table-row;
}
.browCenter {
  display: table-row;
  vertical-align: center;
}
.bcellMid {
  display: table-cell;
  vertical-align: middle;
}
.bcellMidCenter {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
.bcellMidAuto {
  display: table-cell;
  vertical-align: middle;
  width: 1%;
  white-space: nowrap;
}
.bcellMidRight {
  display: table-cell;
  vertical-align: middle;
  text-align: right;
}
.bcellMidLeft {
  display: table-cell;
  vertical-align: middle;
  text-align: left;
}
.bcellTop {
  display: table-cell;
  vertical-align: top;
}
.bcellBottom {
  display: table-cell;
  vertical-align: bottom;
}

/* overflow */
.vcBflow {
  overflow: visible;
}
.vcMaxflow {
  overflow: hidden;
  max-width: 100%;
}

/* icon size */
.tinyIcon {
  width: 16px;
  height: 16px;
}
.xsmallIcon {
  width: 24px;
  height: 24px;
}
.smallIcon {
  width: 32px;
  height: 32px;
}
.medIcon {
  width: 64px;
  height: 64px;
}
.largeIcon {
  width: 100px;
  height: 100px;
}

/* listing css */
.subListItem {
  display: table;
  table-layout: fixed;
  width: 100%;
  padding: 7px 8px;
  cursor: pointer;
  margin-bottom: 2px;
  border-radius: 0;
}
.subHalfItem {
  display: table;
  table-layout: fixed;
  width: calc(50% - 10px);
  padding: 10px;
  cursor: pointer;
  margin: 0 5px 3px 5px;
  float: left;
}
.subListAvatarSmall {
  width: 36px;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
.subListAvatarSmall img {
  width: 36px;
  height: 28px;
  border-radius: 50%;
  display: block;
}
.subListAvatar,
.subListImg {
  width: 40px;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  position: relative;
}
.subListAvatar img,
.subListImg img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: block;
}
.subListAvatarLarge {
  width: 60px;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
.subListAvatarLarge img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: block;
}
.subListOption {
  display: table-cell;
  vertical-align: middle;
  width: 40px;
  text-align: center;
  font-size: 20px;
}
.subListIcon {
  display: table-cell;
  vertical-align: middle;
  width: 30px;
  text-align: center;
  font-size: 16px;
}
.subListRicon {
  display: table-cell;
  vertical-align: middle;
  width: 30px;
  text-align: center;
}
.subListState {
  display: table-cell;
  width: 30px;
  vertical-align: middle;
  text-align: center;
  font-size: 16px;
}
.subListSelected {
  display: table-cell;
  vertical-align: middle;
  width: 24px;
  text-align: center;
  font-size: 15px;
}
.subListContent {
  display: table-cell;
  vertical-align: middle;
}
.subListPcontent {
  display: table-cell;
  vertical-align: middle;
  padding: 0 5px;
}
.subListCell {
  display: table-cell;
  vertical-align: middle;
}
.subListCellTop {
  display: table-cell;
  vertical-align: top;
}
.subListName {
  padding: 0 5px;
  display: table-cell;
  vertical-align: middle;
  white-space: nowrap;
  overflow: hidden;
}
.subListActive {
  position: absolute;
  bottom: 0;
  right: 0px;
  width: 12px !important;
  height: 12px !important;
  border-radius: 50% !important;
  border: none !important;
  overflow: hidden;
  display: block;
}

/* console css */
.consoleDate {
  width: 65px;
  display: table-cell;
  vertical-align: top;
  font-size: 11px;
}

/* listing element */
.listingElement {
  padding: 15px 10px;
}
.listingHalfElement {
  padding: 6px 10px;
  width: calc(50% - 10px);
  float: left;
  margin: 0 5px 8px 5px;
  min-height: 34px;
  display: flex;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.listingTitle {
  font-weight: bold;
  padding-bottom: 3px;
}
.listingText {
  font-size: 13px;
  word-wrap: break-word;
  min-height: 20px;
}

.infoPro {
  flex-direction: column;
  align-items: flex-start;
  white-space: normal;
  cursor: default;
}

.infoPro .listingText {
  display: block;
  width: 100%;
  color: #000;
  padding-top: 2px;
  line-height: 1.35;
}
.listingIcon {
  width: 18px;
  flex: 0 0 18px;
  text-align: center;
}

/* listing reg */
.listingReg {
  display: table;
  table-layout: fixed;
  width: 100%;
  padding: 15px 10px;
}
.listingRegIcon {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  width: 30px;
  font-size: 16px;
}
.listingRegContent {
  display: table-cell;
  vertical-align: middle;
}

/* settings element */
.settingElement {
  padding: 8px 0;
}

/* user box list css */
.ulistContainer {
  max-height: 386px;
  overflow: hidden;
  overflow-y: auto;
  padding: 15px;
}
.ulistItem {
  width: 100%;
  height: 36px;
  table-layout: fixed;
  display: table;
  padding: 2px 4px 2px 0;
  margin-bottom: 3px;
  border-radius: 0;
  box-sizing: border-box;
}
.ulistName {
  display: table-cell;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
  padding: 0 4px 0 6px;
  font-size: 14px;
}
.ulistData {
  display: table-cell;
  vertical-align: middle;
  padding: 0 4px 0 6px;
}
.ulistOption {
  display: table-cell;
  vertical-align: middle;
  width: 20px;
  text-align: center;
  font-size: 14px;
}
.ulistAvatar {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  width: 34px;
}
.ulistAvatar img {
  width: 32px;
  height: 32px;
  border-radius: 0;
  display: block;
  margin: 0 auto;
}
.ulistNotify {
  display: table-cell;
  vertical-align: middle;
  width: 32px;
  text-align: center;
}

/* userlist element css */
.vcUserItem,
.userItemCustom {
  position: relative;
  display: table;
  table-layout: fixed;
  width: 100%;
  cursor: pointer;
  height: 30px;
  padding: 2px 4px 2px 0;
  box-sizing: border-box;
}
.userItemAvatar {
  display: table-cell;
  vertical-align: middle;
  width: 36px;
  position: relative;
}
.userItemAvatar .listAvatarImage {
  width: 34px;
  height: 34px;
  border-radius: 0;
  display: block;
  cursor: pointer;
  object-fit: cover;
}
.userItemAvatar .vcAvsex {
  border: none !important;
}
.userItemData,
.userItemName {
  display: table-cell;
  vertical-align: middle;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 4px 0 6px;
  width: 100%;
  max-width: 0;
}
.userItemIcon {
  display: table-cell;
  vertical-align: middle;
  width: 20px;
  text-align: center;
  font-size: 14px;
}
.jailUserIcon {
  font-size: 13px;
  line-height: 13px;
  display: inline-block;
  vertical-align: middle;
  position: relative;
  top: 0;
}
.userItemOption {
  width: 40px;
  text-align: center;
  font-size: 20px;
  vertical-align: middle;
  display: table-cell;
}
.userItemDiv {
  width: 60px;
  text-align: center;
  font-size: 20px;
  vertical-align: middle;
  display: table-cell;
}
.userItemFlag {
  width: 20px;
  text-align: center;
  vertical-align: middle;
  display: table-cell;
}
.userItemFlag img {
  width: 15px;
  height: auto;
  display: inline-block;
  margin: 0 auto;
  border-radius: 2px;
}
.vcIcgender.genderMale, #actionMenu .vcAvgender.genderMale {
  color: #42a5ff;
}
.vcIcgender.genderFemale, #actionMenu .vcAvgender.genderFemale {
  color: #ff7fc8;
}
.vcUserItem .vcUsername {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 100%;
  font-size: 14px;
  line-height: 16px;
  overflow: hidden;
  position: relative;
  color: #ffffff;
}
.userNameText {
  display: inline-grid;
  grid-template-columns: minmax(12px, auto) max-content max-content;
  align-items: center;
  flex: 0 1 auto;
  width: auto;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}
.userNameInner,
.userMoodText {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#containerUser .userNameInner,
#containerFriends .userNameInner {
  display: block;
  width: auto;
  min-width: 0;
  max-width: 100%;
}
#containerUser .userlistVipAvatar,
#containerFriends .userlistVipAvatar {
  flex: 0 0 auto;
  margin-left: 2px;
}
.avBroadcastQueueBadge,
.avMediaTurnLabel,
.avRotationButtonPosition {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  margin-left: 2px;
  padding: 0 4px;
  border: 1px solid rgba(180,220,255,.85);
  border-radius: 9px;
  box-sizing: border-box;
  background: linear-gradient(#4ca4ec,#1761a8);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 14px;
  text-shadow: 0 1px 1px #16456f;
}
.avBroadcastQueueBadge[data-active="1"] {
  min-width: 48px;
  border-color: #555;
  background: linear-gradient(#252525,#050505);
  font-family: "Courier New", monospace;
  font-size: 11px;
  letter-spacing: .4px;
  text-shadow: 0 0 3px rgba(93,190,255,.9);
}
.avRotationWaiting {
  border-color: #d2aa35 !important;
  background: linear-gradient(#d8b84f,#8b6814) !important;
  color: #fff !important;
}
.roomRotationSetting .roomRotationHelp {
  flex: 0 0 100%;
  margin: 5px 0 0;
  padding-bottom: 8px;
  color: var(--sub-text-color, #aaa);
  font-size: 11px;
  line-height: 1.35;
}
.roomRotationSetting { flex-wrap: wrap; }
#containerUser .userItemData .vcUsername,
#containerFriends .userItemData .vcUsername {
  box-sizing: border-box;
}
.ulistItem .ulistName .vcUsername {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chatVipAvatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  margin-left: 2px;
  line-height: 18px;
  height: 18px;
  overflow: visible;
  position: static;
  top: 0;
}

.vipAvatarPageLoader {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 30px;
  clear: both;
}
.chatVipAvatar img {
  display: inline-block;
  vertical-align: middle;
}
.chatDisplayName .chatVipAvatar,
.vcUserItem .chatVipAvatar {
  vertical-align: middle;
}
.chatDisplayName .chatVipAvatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  margin-left: 0;
  padding: 0;
  height: 18px;
  line-height: 18px;
}
.chatDisplayName .chatVipAvatar img {
  height: 18px;
  width: auto;
  margin: 0;
}
.chatDisplayName .vcUsername,
.userNameInner,
.userMoodText {
  font-size: inherit !important;
  line-height: inherit !important;
}
.vcUserItem .vcUsername {
  line-height: 16px;
}
.vcUserItem .textXsmall {
  display: block;
  width: 100%;
  max-width: 100%;
  font-size: 12px !important;
  line-height: 13px;
  margin: 0;
  overflow: hidden;
  box-sizing: border-box;
  color: #ffffff;
}
.vcListStatus {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff;
  padding: 0;
  border: none !important;
}
.vcUserItem .vcListStatus {
  position: static;
  left: auto;
  bottom: auto;
  width: 10px;
  height: 10px;
  flex: 0 0 auto;
  display: inline-block;
  margin-right: 5px;
  background: transparent;
  vertical-align: baseline;
  transform: translateY(1px);
}
.listFlag {
  height: 13px;
  width: auto;
  border-radius: 2px;
}
.vcListRank {
  height: 15px;
  width: auto;
  display: inline-block;
}
.listAvatar {
  height: 15px;
  width: auto;
  display: inline-block;
}
.listMute {
  height: 15px;
  width: auto;
}
.listMob {
  height: 15px;
  width: auto;
}

/* switch element */
.switchItem {
  display: table;
  table-layout: fixed;
  width: 100%;
  padding: 12px;
}
.switchItemSwitch {
  display: table-cell;
  vertical-align: middle;
  width: 60px;
}
.switchItemText {
  display: table-cell;
  vertical-align: middle;
}
.switchWrap {
  display: block;
  width: 50px;
  margin: 0 auto;
}
.vcBswitch {
  display: table;
  width: 50px;
  padding: 2px;
  border-radius: 100px;
}
.bballWrap {
  display: table-cell;
  vertical-align: middle;
}
.vcBball {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: block;
}
.vcOffswitch {
  background: #ccc;
}
.vcOnswitch {
  background: #74b20e;
}
.vcOnball {
  background: #fff;
  margin-left: 22px;
}
.vcOffball {
  background: #fff;
  margin-left: 0px;
}

/* color choices */
.previewZone {
  padding: 5px;
  margin-bottom: 20px;
}
#previewName {
  font-weight: bold;
  display: inline-block;
}
#previewMood {
  font-weight: bold;
  display: inline-block;
}
#vcPreviewText {
  line-height: 1.4em;
  display: inline-block;
}

/* boom simple top box */
.vistaTopWrap {
  position: relative;
}
.vistaTop {
  padding: 10px 15px;
}
.vistaTopClose {
  cursor: pointer;
  width: 40px;
  text-align: center;
  font-size: 20px;
}
.vistaTopAvatar {
  width: 32px;
}
.vistaTopAvatar img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: block;
}
.vistaTopName {
  padding: 0 10px;
}

/* text area css */
.xlargeTextarea {
  height: 300px;
  max-height: 300px;
}
.largeTextarea {
  height: 180px;
  max-height: 180px;
}
.mediumTextarea {
  height: 100px;
  max-height: 100px;
}
.smallTextarea {
  height: 65px;
  max-height: 65px;
}

/* text special css */
.noBreak {
  white-space: nowrap;
}
.vcAleft {
  text-align: left;
}
.vcAright {
  text-align: right;
}
.vcFright {
  float: right;
}
.vcFleft {
  float: left;
}
.vcBellips {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

/* button css */
.btnEllips {
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fullButton {
  width: 100%;
  text-align: center;
}
.buttonHalf {
  width: 49%;
  text-align: center;
}
.buttonLeft {
  float: left;
}
.buttonRight {
  float: right;
}
.vcButton {
  padding: 8px 10px;
}
.macroButton {
  padding: 2px 8px;
  margin: 2px 0 0 0;
  font-size: 11px;
  min-width: 20px;
}
.microButton {
  padding: 3px 8px;
  margin: 2px 0 0 0;
  font-size: 12px;
  min-width: 20px;
}
.countButton {
  padding: 2px 6px;
  font-size: 11px;
  border-radius: 50px;
}
.tinyButton {
  padding: 3px 10px;
  margin: 5px 0 0 0;
  min-width: 40px;
}
.thinButton {
  padding: 5px 10px;
  min-width: 100px;
}
.regButton {
  padding: 8px;
  min-width: 100px;
}
.cardButton {
  padding: 8px 10px;
  min-width: 100px;
  max-width: 100px;
  margin-bottom: 5px;
}
.modButton {
  padding: 8px 10px;
  min-width: 100px;
  margin: 0 0 5px 0;
}
.modrButton {
  padding: 8px 10px;
  margin: 0 0 5px 0;
}
.smallButton {
  padding: 8px 10px;
  min-width: 50px;
}
.largeButton {
  padding: 10px 20px;
  border-radius: 3px;
  min-width: 200px;
  font-size: 16px;
}
.smallButtonRounded {
  padding: 8px 12px;
  border-radius: 25px;
}
.largeButtonRounded {
  padding: 12px 20px;
  border-radius: 25px;
  font-size: 16px;
  min-width: 200px;
  margin-top: 5px;
}
.smallButton,
.regButton,
.modButton,
.modrButton,
.vcButton,
.tinyButton,
.microButton,
.thinButton,
.macroButton,
.cardButton {
  border-radius: 0;
  border: 1px solid #2b3455;
}
.smallButton,
.regButton,
.modButton,
.modrButton,
.vcButton,
.tinyButton,
.microButton,
.thinButton,
.macroButton,
.cardButton {
  transition: filter 0.15s ease;
}
.smallButton:not(:disabled):not(.disabled):hover,
.regButton:not(:disabled):not(.disabled):hover,
.modButton:not(:disabled):not(.disabled):hover,
.modrButton:not(:disabled):not(.disabled):hover,
.vcButton:not(:disabled):not(.disabled):hover,
.tinyButton:not(:disabled):not(.disabled):hover,
.microButton:not(:disabled):not(.disabled):hover,
.thinButton:not(:disabled):not(.disabled):hover,
.macroButton:not(:disabled):not(.disabled):hover,
.cardButton:not(:disabled):not(.disabled):hover {
  filter: brightness(1.12);
}
.panelFullBtn {
  padding: 10px;
}
.roundedButton {
  border-radius: 100px;
}
.roundButton {
  width: 60px;
  height: 60px;
  border-radius: 50%;
}
.workButton {
  display: none;
}

/* box css */
.vcBoxHeight {
  max-height: 500px;
  overflow: hidden;
  overflow-y: auto;
}
.boxHeight800 {
  max-height: 800px;
  overflow: hidden;
  overflow-y: auto;
}
.boxHeight700 {
  max-height: 700px;
  overflow: hidden;
  overflow-y: auto;
}
.boxHeight600 {
  max-height: 600px;
  overflow: hidden;
  overflow-y: auto;
}
.boxHeight500 {
  max-height: 500px;
  overflow: hidden;
  overflow-y: auto;
}
.boxHeight400 {
  max-height: 400px;
  overflow: hidden;
  overflow-y: auto;
}
.boxHeight300 {
  max-height: 300px;
  overflow: hidden;
  overflow-y: auto;
}

/* misc element css */
.vcBblock {
  display: block;
}
.vcInblock {
  display: inline-block;
}
.centeredElement {
  text-align: center;
}
.hidden {
  display: none;
}
.vcFhide {
  display: none !important;
}
.vcBclick {
  cursor: pointer;
}
.fa {
  cursor: pointer;
}
.vcBwfull {
  width: 100%;
}
.vcBhfull {
  height: 100%;
}
.vcNoflow {
  overflow: hidden;
}
.vcBrelative {
  position: relative;
}

/* Font style CSS */
.normal {
  font-style: normal;
  font-weight: normal;
  text-decoration: none;
}

.bold {
  font-weight: bold;
}
.ital {
  font-style: italic;
}
.under {
  text-decoration: underline;
}

/* combinations */
.boldital {
  font-weight: bold;
  font-style: italic;
}
.boldunder {
  font-weight: bold;
  text-decoration: underline;
}
.italunder {
  font-style: italic;
  text-decoration: underline;
}
.vcBitalicun {
  font-weight: bold;
  font-style: italic;
  text-decoration: underline;
}

/* text css */
.textXmicro {
  font-size: 9px;
}
.textMicro {
  font-size: 10px;
}
.textXsmall {
  font-size: 11px;
}
.textSsmall {
  font-size: 12px;
}
.textSmall {
  font-size: 13px;
}
.textReg {
  font-size: 14px;
}
.textXreg {
  font-size: 15px;
}
.textXxreg {
  font-size: 16px;
}
.textMed {
  font-size: 18px;
}
.textXmed {
  font-size: 20px;
}
.textLarge {
  font-size: 22px;
}
.textXlarge {
  font-size: 25px;
}
.textJumbo {
  font-size: 35px;
}
.textXjumbo {
  font-size: 45px;
}
.textUltra {
  font-size: 60px;
}
.textXultra {
  font-size: 70px;
}
.vcNoem {
  line-height: 1em;
}

/* avatar css */
.avatarMenu {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: block;
  cursor: pointer;
  margin: 0 auto;
}
.avatarSmall {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: block;
  cursor: pointer;
}
.avatarMed {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: block;
  cursor: pointer;
}
.avatarLarge {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: block;
  cursor: pointer;
}
.avatarXlarge {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  display: block;
  cursor: pointer;
}
.avatarJumbo {
  width: 140px;
  height: 140px;
  border-radius: 5px;
  display: block;
  cursor: pointer;
}
.vcAvsex {
  border: none !important;
}

/* form css */
.vistaForm {
  padding: 0 0 10px 0;
}
.formLeft,
.formLeftFull {
  width: 50%;
  float: left;
  padding-right: 3px;
}
.formRight,
.formRightFull {
  width: 50%;
  float: right;
  padding-left: 3px;
}
.formSplit {
  width: 100%;
  clear: both;
}

/* page menu */
.pageMenuItem {
  display: table;
  table-layout: fixed;
  width: 100%;
  padding: 15px 10px;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  position: relative;
}
.pageMenuIcon {
  display: table-cell;
  vertical-align: middle;
  width: 30px;
  text-align: center;
}
.pageMenuText {
  display: table-cell;
  vertical-align: middle;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pageDrop {
  display: none;
}
.vcPageDropItem {
  display: table;
  table-layout: fixed;
  width: 100%;
  padding: 15px;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  position: relative;
}
.pageDropIcon {
  display: table-cell;
  vertical-align: middle;
  width: 24px;
  text-align: center;
}
.pageDropText {
  display: table-cell;
  vertical-align: middle;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vcPopen {
  display: none;
}

/* sub menu */
.subMenu {
  border-radius: 2px;
}
.subMenuItem {
  padding: 7px 8px;
  display: table;
  table-layout: fixed;
  width: 100%;
  cursor: pointer;
  font-size: 14px;
}
.subMenuIcon {
  width: 30px;
  text-align: center;
  display: table-cell;
  vertical-align: middle;
}
.subMenuText {
  display: table-cell;
  vertical-align: middle;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

/* pro menu */
.vcFmenu {
  position: absolute;
  border-radius: 5px;
  overflow: hidden;
  display: none;
}
.fmenuItem {
  padding: 15px 10px;
  display: table;
  table-layout: fixed;
  width: 100%;
  cursor: pointer;
  font-size: 14px;
  text-shadow: none;
  background: #000208;
}
.logMenuItem {
  background: linear-gradient(
    0deg,
    #403e5bcc 0%,
    #8a889acc 50%,
    #413f5ccc 100%
  );
}
.fmenuIcon {
  width: 30px;
  text-align: center;
  display: table-cell;
  vertical-align: middle;
}
.fmenuText {
  display: table-cell;
  vertical-align: middle;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  text-align: initial;
}
.vcFmenut {
  padding: 9px;
}

/* individual menu css */
#vcProMenu {
  right: 0;
  top: 100%;
  width: 170px;
  z-index: 40;
}
#privateMenu {
  right: 0;
  top: 100%;
  width: 170px;
  z-index: 1007;
}
#mobileMainMenu {
  right: 0;
  top: 100%;
  z-index: 161;
  width: 200px;
}

/* avatar menu */
#avMenu {
  width: 205px;
  height: auto;
  position: absolute;
  bottom: auto;
  left: -5000px;
  z-index: 99;
  border-radius: 0;
  max-width: calc(100vw - 10px);
  max-height: calc(100vh - 10px);
  overflow-x: hidden;
  overflow-y: auto;
  cursor: pointer;
}
.topcard {
  padding: 0;
  min-height: 0;
}
.bottomcard {
}
.vcAvavpart {
  text-align: center;
}
.vcAvagegender {
  font-size: 12px;
}
.vcAvdetails {
  text-align: center;
  padding: 6px 10px 10px 10px;
}
.vcAvmood {
  margin: 0 0 6px 0;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  line-height: 1.35;
  word-break: break-word;
}
.vcAvcoins {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin: 0;
  font-size: 12px;
  line-height: 1;
}
.avstatsInline {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 6px 0;
  line-height: 1;
}
.vcAvgifts {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  font-size: 12px;
  cursor: pointer;
  line-height: 1;
}
.avstatsAddonsHook {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}
.vcAvcoins img {
  width: 14px;
  height: 14px;
  display: block;
}
.vcAvgifts img {
  width: 14px;
  height: 14px;
  display: block;
}
.avcoinsValue,
.avgiftsValue {
  display: inline-block;
  line-height: 1;
  vertical-align: middle;
}
.vcAvtopmenu {
  min-height: 15px;
  margin-bottom: -10px;
}
.vcAvoption {
  width: 24px;
  height: 24px;
  font-size: 16px;
  text-align: center;
}
.vcAvavatar {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 0;
  display: block;
  margin: 0 auto;
  cursor: zoom-in;
}
.vcAvusername {
  font-weight: bold;
  font-size: 15px;
  width: 100%;
}
.vcAvflag {
  height: 14px;
  display: block;
  border-radius: 2px;
  margin: 0 auto;
  margin-top: 3px;
}
.vcAvcontent {
  width: 100%;
  display: block;
  position: relative;
}
.vcAvitem {
  padding: 4px 8px;
  text-align: center;
  cursor: pointer;
}
.vcAvtitle {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 29px;
  padding-left: 0;
}
.avtitleClose {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 5px;
  width: 0;
  display: flex !important;
  align-items: center;
  justify-content: center;
}
.vcAvtitle .vcAvusername {
  width: 100%;
}
.avtitleClose i {
  margin: 0;
  line-height: 1.2;
}
.vcAvbody {
  padding: 10px 0 0 0;
}
.avavatarWrap {
  padding: 0 10px;
}
.vcAvrank {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0 0 8px 0;
  text-align: center;
  font-size: 12px;
  font-weight: bold;
  line-height: 1.2;
}
.vcAvrank .vcRankIcon,
.vcAvrank img {
  width: 14px;
  height: 14px;
  display: inline-block;
  vertical-align: middle;
}
.avrankIconWrap,
.avrankText {
  display: inline-flex;
  align-items: center;
}
.avrankIconWrap {
  justify-content: center;
}
.avrankText {
  line-height: 1;
}

#vcLogMenu {
  width: 130px;
  height: auto;
  position: absolute;
  bottom: 0;
  left: -5000px;
  z-index: 99;
  border-radius: 3px;
  overflow: hidden;
  border: 2px solid #ffffff47;
}
.vcLogmenu {
  width: 100%;
  display: block;
  position: relative;
}

/* chat left menu css */
.leftItem {
  display: table;
  width: 100%;
  table-layout: fixed;
  padding: 15px 5px;
  cursor: pointer;
}
.leftItemText {
  display: table-cell;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}
.leftItemIcon {
  display: table-cell;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
  text-align: center;
  width: 26px;
}
.leftItemNotify {
  display: table-cell;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
  text-align: center;
  width: 36px;
  position: relative;
}
.leftDropItem {
  display: table;
  width: 100%;
  table-layout: fixed;
  padding: 15px 12px;
  cursor: pointer;
}
.leftDropText {
  display: table-cell;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}
.leftDropIcon {
  display: table-cell;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
  text-align: center;
  width: 26px;
}
.leftDropNotify {
  display: table-cell;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
  text-align: center;
  width: 36px;
  position: relative;
}
.statusOption {
  display: table;
  width: 100%;
  table-layout: fixed;
  padding: 7px 8px;
  margin-bottom: 2px;
  border-radius: 0;
  cursor: pointer;
}
.vcStatusText {
  display: table-cell;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
  font-size: 9px;
  text-align: center;
}
#currentStatus {
  display: flex;
  position: relative;
  text-align: center;
  vertical-align: middle;
  justify-content: center; /* horizontal */
  align-items: center; /* vertical */
}
#currentStatus:hover {
  font-weight: 600;
}
.statusZone {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  width: 28px;
}
.textStatus {
  display: table-cell;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}
.zoneStatus {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  width: 28px;
}
.vcStatusIcon {
  width: 16px;
  height: 16px;
  display: block;
  margin: 0 auto;
  border-radius: 50%;
  padding: 1px;
}
.iconStatus {
  width: 16px;
  height: 16px;
  display: block;
  margin: 0 auto;
  border-radius: 50%;
  padding: 1px;
}
.iconText {
  display: table-cell;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}

/* warning box css */
.vcWarningBox {
  display: table;
  table-layout: fixed;
  width: 100%;
  border-radius: 4px;
  margin: 10px 0;
}
.warningBoxIcon {
  display: table-cell;
  vertical-align: top;
  width: 32px;
  font-size: 17px;
  text-align: center;
  padding: 8px 0;
}
.warningBoxText {
  display: table-cell;
  vertical-align: top;
  padding: 10px 5px;
  font-size: 13px;
}

/* mods css */
.topMod {
  display: table;
  table-layout: fixed;
  width: 100%;
}
.topModEmpty {
  display: table-cell;
  vertical-align: middle;
}
.topModOption {
  display: table-cell;
  vertical-align: middle;
  font-size: 18px;
  text-align: center;
  width: 40px;
  height: 40px;
}

/*page css */
#pageGlobal {
  display: table;
  table-layout: fixed;
  width: 100%;
}
#pageWrapper {
  display: table;
  table-layout: fixed;
  width: 100%;
  position: relative;
  z-index: 1;
}
.pageIndata {
  display: table-cell;
  vertical-align: top;
}
.vcPageMenu {
  display: table-cell;
  vertical-align: top;
  width: 220px;
  padding-right: 10px;
}
.pageFull {
  width: 100%;
  display: table;
  table-layout: fixed;
}
.pageLeft {
  display: table-cell;
  vertical-align: top;
  padding-right: 10px;
}
.pageRight {
  display: table-cell;
  vertical-align: top;
  padding-left: 10px;
}
.vcPage350 {
  width: 330px;
  display: table-cell;
  vertical-align: top;
}
.vcPage40 {
  width: 40%;
  display: table-cell;
  vertical-align: top;
}
.pageQuarter {
  width: 25%;
  display: table-cell;
}
.pageHalf {
  width: 50%;
  display: table-cell;
  vertical-align: top;
}
.pageThird {
  width: 33%;
  display: table-cell;
  vertical-align: top;
}
.pageTwoThird {
  width: 66%;
  display: table-cell;
  vertical-align: top;
}
.vcPage350 img,
.pageFull img,
.pageLeft img,
.pageRight img,
.vcPage40 img,
.pageQuarter img,
.pageHalf img,
.pageThird img,
.pageTwoThird img {
  max-width: 100%;
}
.pageElement {
  padding: 15px;
  margin-bottom: 10px;
}
.vcBoxTitle {
  margin-bottom: 12px;
  padding: 7px 10px;
  font-weight: bold;
  display: flex;
  align-items: center;
  min-height: 36px;
  line-height: 20px;
  box-sizing: border-box;
}
.vcBoxTitle p {
  margin: 0;
}
.vcSplit {
  display: table;
  width: 100%;
  table-layout: fixed;
}
.splitLeft,
.elementLeft {
  width: 50%;
  display: table-cell;
  padding-right: 5px;
}
.splitRight,
.elementRight {
  width: 50%;
  display: table-cell;
  padding-left: 5px;
}
.pageTopElem {
  display: table;
  table-layout: fixed;
  width: 100%;
}
.pageTopTitle {
  display: table-cell;
  vertical-align: middle;
}
.pageTopOption {
  display: table-cell;
  vertical-align: middle;
  width: 120px;
}

/* label css */
.vcLabel {
  margin: 5px 0;
  font-size: 12px;
  font-weight: bold;
}
.avActionSectionTitle {
  margin: 8px 0 2px;
}
.avActionField {
  padding-bottom: 8px !important;
}
.avActionSectionTitle + .subListItem.avActionGap {
  margin-top: 0;
}
.labelLine {
  margin: 5px 0;
  font-size: 12px;
  font-weight: bold;
  padding-bottom: 5px;
}
.subLabel {
  padding-top: 5px;
  font-size: 12px;
}

/* list css */
.vcList {
  padding: 15px;
}
.vcList li {
  list-style: disc;
  padding: 1px 0;
}
.vcAclist {
  padding: 10px 20px;
}
.listIcon {
  width: 20px;
  display: inline-block;
}

/* modal css */
.modalOpen {
  overflow: hidden;
}

/* input css */
.fullInput,
.fullTextarea {
  padding: 5px 8px;
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  border: none;
  border-radius: 3px;
}
.editPageBox {
  min-height: 600px;
}
.largeInput {
  font-size: 20px;
}
.selectboxit-container .selectboxit-list {
  width: 100%;
}
.selectboxit-container {
  width: 100%;
}
.selectboxit-container .selectboxit {
  width: 100%;
}
.selectboxit-container .selectboxit-options {
  max-height: 180px;
  border-radius: 3px;
}
.selectboxit-container span,
.selectboxit-container .selectboxit-options a {
  height: 30px;
  line-height: 30px;
}
.selectboxit-container .selectboxit {
  border-radius: 3px;
}

/* side box css */
#sideContent {
  width: 480px;
  max-width: 100%;
  height: 100%;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 500;
  display: none;
}
#sideClose {
  width: 100%;
  height: 46px;
}
.sideCloseBtn {
  width: 40px;
  height: 100%;
  font-size: 22px;
  text-align: center;
  cursor: pointer;
}
#sideInside {
  overflow: hidden;
  overflow-y: auto;
}

/* misc element */
.vcUsername {
  font-weight: bold;
  cursor: pointer;
  display: inline-block;
}
.linkLike {
  text-decoration: underline;
  cursor: pointer;
}
.noLinkLike {
  text-decoration: none;
  cursor: pointer;
}
.systemText {
  display: inline-block;
  max-width: 100%;
  padding: 5px 10px;
  border-radius: 5px;
  margin-top: 5px;
  font-weight: normal !important;
  font-size: 12px;
}
.postContent .systemText {
  display: block;
  text-align: center;
  padding: 10px;
}
#contentPage {
  width: 100%;
  height: auto;
}
#chatRightData .loadMore {
  margin-bottom: 50px;
}

/* content radius */
.pageElement {
  border-radius: 2px;
}

/* form login & registration css */
.notMember {
  padding: 10px 15px;
  font-size: 12px;
  margin-top: 5px;
}
.loginControl {
  margin-top: 5px;
}
.rulesClick {
  cursor: pointer;
  text-decoration: underline;
}
.fblButton {
  background: #3b5998;
  color: #fff;
}
.twitButton {
  background: #1da1f2;
  color: #fff;
}
.gplusButton {
  background: #dd4b39;
  color: #fff;
}
.vcGplus {
  color: #dd4b39;
}
.vcFbook {
  color: #3b5998;
}
.vcTwit {
  color: #1da1f2;
}
.vcLinkedin {
  background: #0077b5;
  cursor: pointer;
  color: #fff;
}
.uploadedFile {
  text-decoration: none !important;
  display: block;
  padding: 3px 10px;
  border-radius: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/*monitor tool */
#monitorData {
  z-index: 10000;
  position: fixed;
  top: 15px;
  left: 15px;
  padding: 15px;
  background: rgba(0, 102, 0, 0.95);
  color: #fff;
  border-radius: 5px;
  display: none;
  cursor: pointer;
  min-width: 130px;
}

/* footer css */
#mainFooter {
  padding: 15px 0;
  height: auto;
}
#menuMainFooter {
  font-size: 15px;
  width: auto;
}
#menuMainFooter li {
  display: inline-block;
  margin-right: 10px;
  margin-bottom: 6px;
  font-size: 13px;
}
#menuMainFooter li a {
  color: inherit;
  text-decoration: none;
}

/* misc text css */
.pageTitle {
  padding-bottom: 5px;
  margin-bottom: 15px;
}
.vcTextBox .pageTitle {
  display: block;
  margin: -15px -15px 15px -15px;
  padding: 10px 14px;
  min-height: 40px;
  line-height: 20px;
  font-size: 15px;
  font-weight: bold;
  text-shadow: 0 0 3px #000;
  border-bottom: 0 !important;
}
.textTitle {
  font-weight: bold;
  font-size: 15px;
}
.textText {
  font-size: 13px;
  margin: 7px 0;
}
.vcTextBox {
  max-height: 500px;
  overflow-y: auto;
}

/* activeUser intro  */
#introSectionUser {
  padding: 72px 0;
}
.activeUser {
  height: 110px;
  text-align: center;
  float: left;
  overflow: hidden;
}
.activeEmbed {
  width: 50px;
  height: 50px;
  display: inline;
  margin: 5px;
}
.activeEmbedUser {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

/* outpage css */
.outPageContainer {
  width: 100%;
  height: 100%;
  display: table;
  table-layout: fixed;
}
.outPageContent {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  position: relative;
}
.outPageBox {
  max-width: 94%;
  width: 480px;
  margin: 0 auto;
}
.outPageTitle {
  font-size: 25px;
  font-weight: bold;
  margin-bottom: 10px;
}
.outPageText {
  font-size: 16px;
  margin-bottom: 15px;
}
.admLogin {
  position: absolute;
  bottom: 5px;
  left: 5px;
  display: block;
  padding: 10px;
}

/* chat parts css */
#vcMainInput {
  height: 38px;
  width: 100%;
}
#containerInput {
  padding: 0px 4px 4px 4px;
  height: 101px;
}
#mainMessageInput,
#privateMessageInput {
  width: 100%;
  height: 100%;
  padding: 0;
  padding: 3px 3px;
  float: left;
}
#inputtLeft {
  height: 100%;
}
.chatInputContainer {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}
#topChatContainer,
#containerInput {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}
.mainItem {
  width: 21px;
  height: 100%;
  text-align: center; /* font-size:24px; */
  z-index: 1;
  display: table-cell;
  vertical-align: middle;
  position: relative;
  cursor: pointer;
}
.mainItem img {
  vertical-align: middle;
}

.mainHide {
  display: none;
}
.subHidden {
  display: none;
}
.inputIcon {
  font-size: 18px;
}
.tdInput {
  height: 100%;
  display: table-cell;
  padding: 0 0px;
}
.inputTable {
  overflow: hidden;
  display: table;
  table-layout: fixed;
  width: 100%;
  height: 100%;
  background: #ffffff00;
}
.vcCsend {
}
#sendImage {
  border-radius: 0px;
}
#submitButton {
  width: 46px;
  display: block;
  height: 100% !important;
  font-weight: bold;
  box-shadow: none !important;
  padding: 0;
  margin: 0;
  border: none !important;
  line-height: 0;
  box-sizing: border-box;
  font-size: 16px;
}
#insideWrapChat {
  height: 100%;
  overflow: hidden;
}
#containerShowChat {
  width: 100%;
  height: auto;
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
  background: linear-gradient(
    0deg,
    #403e5bcc 0%,
    #413f5ccc 50%,
    #413f5ccc 100%
  );
  border: 1px solid #ffffff47;
}
#mainLogs {
  width: 100%;
  height: 100%;
  overflow: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column; /* από πάνω προς τα κάτω */
  justify-content: flex-start; /* ξεκινά από πάνω */
  overflow-y: auto;
  max-height: 500px; /* ή ό,τι ύψος θέλεις */
}
#wrapChat {
  height: 100%;
  width: 100%;
}
#warpShowChat {
  height: 78%;
  overflow: hidden;
  padding: 5px 0px 5px 0px;
  display: flex;
  flex-direction: column;
}
#roomBannerWrap {
  position: relative;
  width: 100%;
  flex: 0 0 auto;
  overflow: hidden;
  margin-bottom: 5px;
  text-align: center;
}
#roomBannerWrap .roomBannerClose {
  position: absolute;
  top: 5px;
  right: 0;
  left: auto;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 19px;
  height: 19px;
  padding: 0;
  cursor: pointer;
}
#roomBannerWrap.hidden {
  display: none;
}
#roomBannerImage {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 180px;
  margin: 0 auto;
  object-fit: contain;
}
#roomBannerImage.hidden {
  display: none;
}
#roomBannerPreview {
  display: block;
  width: 100%;
  max-width: 100%;
}
#mainLogs ul {
  width: 100%;
  position: relative;
}
#chatLogsContainer {
  box-sizing: border-box;
  padding-bottom: 10px;
}
#containerShowChat { position: relative; }
.vcChatScrollBottom {
  position: absolute;
  z-index: 240 !important;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  bottom: 10px;
  display: block;
  width: 50px !important;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: linear-gradient(0deg, var(--vc-deep-80) 0%, var(--vc-soft-80) 50%, var(--vc-deep-alt-80) 100%) !important;
  color: #fff;
  border: 1px solid #ffffff47 !important;
  box-shadow: 0 2px 7px rgba(0,0,0,.38) !important;
  cursor: pointer;
}
.vcChatScrollBottom.headToggle {
  top: auto !important;
  display: block;
  width: 50px !important;
}
.vcChatScrollBottom.hidden { display: none !important; }
.vcChatScrollBottom::before {
  content: none;
}
.vcChatScrollBottom i { position: relative; z-index: 1; }
.vcChatScrollBottom.headToggle:hover {
  background: linear-gradient(0deg, rgb(232 232 232 / 46%) 0%, rgb(255 255 255 / 0%) 15%, rgb(255 255 255 / 60%) 64%, rgb(222 222 222 / 37%) 100%) !important;
  filter: none;
  transform: translateX(-50%);
}
.vcChatScrollBottom:active { box-shadow: none; }
.vcPrivateScrollBottom.vcChatScrollBottom.headToggle {
  position: absolute !important;
  z-index: 240 !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translateX(-50%);
}
.adminUserSummary {
  padding: 4px 0 18px;
  text-align: center;
}
.adminUserSummaryAvatar {
  display: block;
  width: 92px;
  height: 92px;
  margin: 0 auto 8px;
  border: 2px solid rgba(255,255,255,.72);
  border-radius: 4px;
  object-fit: cover;
  box-shadow: 0 2px 9px rgba(0,0,0,.42);
}
.adminUserSummary.vcAvheader .vcAvbody { justify-content: center; }
.adminUserSummary.vcAvheader .vcAvavatar { border-radius: 4px; object-fit: cover; }
.adminUserSummary.vcAvheader .vcAvdetails { text-align: center; }
.adminUserSummary.vcAvheader {
  width: 205px;
  max-width: 100%;
  margin: 0 auto;
}
.adminUserSummary.vcAvheader .vcAvbody { display: block; padding-top: 10px; }
.adminUserSummary.vcAvheader .avavatarWrap { padding: 0 10px; }
.adminUserSummary.vcAvheader .vcAvrank { display: flex; }
.adminUserSummary.vcAvheader .vcAvavatar {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  border-radius: 0;
  cursor: zoom-in;
}
@media (max-width: 599px) {
	.privateHistoryModalWindow.coreMovableModal {
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
	}
  .coreMovableModal,
  .userProfileWindow {
    padding: 4px 3px 52px !important;
    box-sizing: border-box;
  }
  .coreMovableModal > .modalIn,
  .userProfileWindow > .modalIn {
	margin: 0 auto !important;
	width: calc(100% - 6px) !important;
    max-height: calc(100vh - 58px);
    overflow: auto;
  }
}
.adminUserSummaryName { font-size: 18px; font-weight: 700; }
.adminUserSummaryMeta {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px 10px;
  margin-top: 5px;
}
.adminUserSummaryStatus { width: 16px; height: 16px; vertical-align: middle; }
#menuContainerInside {
  margin: 0 auto;
}
#wrapFooter {
  height: 48px;
  min-height: 48px;
  max-height: 48px;
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 100000 !important;
  display: flex;
  align-items: flex-end;
  gap: 5px;
  padding: 5px;
  box-sizing: border-box;
}
#myMenu {
  width: 100%;
  height: 38px;
  display: table;
  table-layout: fixed;
}
#menuContainer {
  flex: 1 1 auto;
  min-width: 0;
  height: 38px;
}
.muteMode {
  position: absolute;
  top: 5px;
  border-radius: 50px;
  width: 90%;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
  text-align: center;
  z-index: 100;
  padding: 5px;
  opacity: 0.9;
}

/* private box */
#privateBox {
  width: 400px;
  max-width: calc(100% - 6px);
  position: absolute;
  bottom: calc(38px + 3px);
  right: 3px;
  z-index: 160;
  display: none;
  overflow: hidden;
  border-radius: 10px 10px 5px 5px;
	border: 1px solid rgba(150,150,150,.72) !important;
	box-sizing: border-box;
  box-shadow: 5px 5px 20px #00000073;
}
#privateTitlebar {
  position: relative;
  z-index: 5;
  width: 100%;
  display: table;
  table-layout: fixed;
  height: 30px;
  padding: 0 3px;
  overflow: visible;
}
@media screen and (min-width: 600px) {
  #privateTitlebar {
    touch-action: none;
    cursor: move;
  }
  #privateTitlebar .privateWindow-btn,
  #privateTitlebar #privateAvWrap {
    cursor: pointer;
  }
}
#privateTopToolbar {
  width: calc(100% - 10px);
  height: 36px;
  margin: 0 5px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0;
  overflow: visible;
  position: relative;
  z-index: 4;
  border-radius: 0;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
}
.privateTopToolbarLeft,
.privateTopToolbarRight {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}
.privateTopToolbarLeft {
  justify-content: flex-start;
}
.privateTopToolbarRight {
  justify-content: flex-end;
  margin-left: auto;
}
@media screen and (max-width: 768px) {
  #privateBox {
    left: 3px;
    right: 3px;
    width: auto;
    max-width: none;
  }
}
@media screen and (min-width: 1025px) {
  #privateBox {
    width: 500px;
  }
  #privateBox.privateDesktopResizable .ui-resizable-se {
    right: 1px;
    bottom: 1px;
    width: 12px;
    height: 12px;
    z-index: 20;
  }
}
#privateTitlebar .avatarTopMod,
#privateTitlebar .modalTopText,
#privateTitlebar .modalTopElement {
  position: static;
  display: table-cell;
  vertical-align: middle;
  top: auto;
  right: auto;
  height: 30px;
  line-height: 30px;
  background: none;
  border: 0;
  text-shadow: 0 0 3px #000;
}
#privateTitlebar .avatarTopMod {
  width: 34px;
  height: 30px;
  padding: 2px;
  box-sizing: border-box;
  text-align: center;
}
#privateTitlebar .modalTopText {
    padding: 0 6px 0 6px;
}
#vcPrivateMin {
  width: 34px !important;
  height: 34px !important;
  line-height: 34px !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  text-shadow: 0 0 3px #000 !important;
  text-align: center;
  cursor: pointer;
  position: relative;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
#vcPrivateMin i {
  display: inline-block !important;
  line-height: 22px;
}
.privateTopToolItem {
  width: 34px;
  height: 34px;
}
.privateTopToolbarIcon {
  width: 27px;
  height: 27px;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 0 2px rgba(2, 2, 2, 0.47))
    drop-shadow(0 0 2px rgba(2, 2, 2, 0.14));
}
.privateTopToolbarAction {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  flex: 0 0 auto;
}
.privateTopToolbarAction.avPrivateActionDisabled {
  opacity: 0.4;
  filter: grayscale(1);
  cursor: pointer !important;
  pointer-events: auto;
}
.privateTopToolbarUsericon {
  position: relative;
  width: 27px;
  height: 27px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.privateTopToolbarUsericon .privateTopToolbarIcon {
  width: 27px;
  height: 27px;
}
.privateTopToolbarBadge {
  position: absolute;
  right: -3px;
  bottom: 1px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  line-height: 1;
  text-shadow: none;
  box-shadow: 0 1px 3px rgba(0,0,0,0.45);
}
.privateTopToolbarBadge i {
  position: static;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  line-height: 1;
}
.privateTopToolbarBadgeAdd,
.privateTopToolbarBadgeUnblock {
  color: #fff;
  background: #2ea043;
}
.privateTopToolbarBadgeRemove,
.privateTopToolbarBadgeBlock {
  color: #fff;
  background: #d73a49;
}
.privateTopToolbarBadgePlain {
  width: 20px;
  height: 20px;
  right: -2px;
  bottom: -1px;
  border-radius: 0;
  background: none !important;
  box-shadow: none !important;
  font-size: 17px;
  line-height: 1;
}
.privateTopToolbarBadgePlain.privateTopToolbarBadgeBlock {
  color: #d73a49 !important;
}
.privateTopToolbarBadgePlain i {
  width: auto;
  height: auto;
}
#privateCameraInviteAction.hidden {
  display: none !important;
}
#privateCallInviteAction.hidden {
  display: none !important;
}
.privateTopToolbarBadgeCamera {
  padding: 0;
  width: 22px;
  height: 22px;
  right: -3px;
  bottom: -2px;
}
.privateTopToolbarBadgeImage {
  width: 18px;
  height: 18px;
  display: block;
  object-fit: contain;
}
.privateTopToolbarUsericonCallInvite .privateTopToolbarBadgeImage {
  width: 20px;
  height: 20px;
}
.privateTopToolbarBadgeCall {
  right: -3px;
  bottom: 1px;
  width: 16px;
  height: 16px;
  color: #fff;
  background: #2ea043;
  border-radius: 50%;
  font-size: 10px;
  line-height: 1;
}
.privateTopToolbarBadgeCall i {
  width: 100%;
  height: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.privateTopToolbarUsericonCameraInvite .privateTopToolbarBadgeImage {
  width: 22px;
  height: 22px;
}
.privateCameraInviteBox {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 8px 10px;
  margin: 3px 0;
  border: 1px solid #aeb9cb;
  border-top-color: #f4f8ff;
  border-left-color: #f4f8ff;
  border-bottom-color: #717f96;
  border-right-color: #717f96;
  background: linear-gradient(180deg, rgba(251,253,255,0.68) 0%, rgba(238,243,250,0.62) 48%, rgba(213,222,235,0.68) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.95), inset 0 -1px 0 rgba(116,129,150,0.25);
  text-shadow: none !important;
  color: #1f2d49 !important;
  border-radius: 5px;
}
.privateCameraInviteText {
  display: inline-block;
  line-height: 1.2;
  color: #1f2d49 !important;
  text-shadow: none !important;
  font-weight: 700;
  font-size: 18px;
}
.privateCameraInviteButton {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  position: relative;
  z-index: 2;
  pointer-events: auto;
}
.privateCameraInviteButtonSent,
.privateCameraInviteButtonSent:hover {
  opacity: 0.7;
  cursor: default;
  pointer-events: none;
}
.privateCameraInviteBtnIcon {
  width: 16px;
  height: 16px;
  object-fit: contain;
  display: inline-block;
}
#vcPrivateLogs .privateCameraInviteBox {
  text-shadow: none !important;
  font-family: "Trebuchet MS", Arial, sans-serif !important;
}
#privateControls {
  position: absolute;
  top: 0;
  right: 7px;
  height: 18px;
  display: flex;
  align-items: flex-start;
  gap: 0;
  z-index: 3;
}
#privMinimize,
#vcPrivateClose {
  position: relative;
  display: block;
  text-align: center;
  text-shadow: none !important;
}
#privMinimize {
  width: 26px;
  height: 18px;
  line-height: 19px;
  border-bottom-left-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.6) !important;
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: rgba(255, 255, 255, 0.6);
  border-right-width: 1px;
  border-right-style: solid;
  border-right-color: rgba(255, 255, 255, 0.6);
  border-top: none !important;
  border-right: none !important;
  background: -webkit-linear-gradient(top, #d8d8d8 0%, #c5c5c5e8 49%, #a9a9a9ba 50%, #d2d2d221 100%) !important;
  background: -moz-linear-gradient(top, #d8d8d8 0%, #c5c5c5e8 49%, #a9a9a9ba 50%, #d2d2d221 100%) !important;
  background: -o-linear-gradient(top, #d8d8d8 0%, #c5c5c5e8 49%, #a9a9a9ba 50%, #d2d2d221 100%) !important;
  background: -ms-linear-gradient(top, #d8d8d8 0%, #c5c5c5e8 49%, #a9a9a9ba 50%, #d2d2d221 100%) !important;
  border: 1px solid #aeb1b4 !important;
  border-right: 0px solid #aeb1b4 !important;
  box-shadow: none !important;
}
#vcPrivateClose {
  width: 41px;
  height: 18px;
  line-height: 19px;
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 0 !important;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  font-size: 12px;
  border: 1px solid #aeb1b4 !important;
  border-top: none !important;
  color: #f8f8f8 !important;
  text-shadow:
    -1px 0px 0px #505060,
    1px 0px 0px #505060,
    0px -1px 0px #505060,
    0px 1px 0px #505060 !important;
  background: -webkit-linear-gradient(#f8f8f8, #d0d0d0);
  -webkit-background-clip: text;
  background: -webkit-linear-gradient(top, #e39a9c 0%, #c1736e 49%, #b33c2e 50%, #cf6a5e 100%);
  background: -moz-linear-gradient(top, #e39a9c 0%, #c1736e 49%, #b33c2e 50%, #cf6a5e 100%);
  background: -o-linear-gradient(top, #e39a9c 0%, #c1736e 49%, #b33c2e 50%, #cf6a5e 100%);
  background: -ms-linear-gradient(top, #e39a9c 0%, #c1736e 49%, #b33c2e 50%, #cf6a5e 100%);
  opacity: 1 !important;
}
#privMinimize i,
#vcPrivateClose i {
  display: inline-block;
  line-height: 19px;
  font-size: 11px;
}
#privMinimize:hover {
  background: -webkit-linear-gradient(top, #b5c8dd 0%, #8ca6c3 49%, #52769f 50%, #7da4d6 100%) !important;
  background: -moz-linear-gradient(top, #b5c8dd 0%, #8ca6c3 49%, #52769f 50%, #7da4d6 100%) !important;
  background: -o-linear-gradient(top, #b5c8dd 0%, #8ca6c3 49%, #52769f 50%, #7da4d6 100%) !important;
  background: -ms-linear-gradient(top, #b5c8dd 0%, #8ca6c3 49%, #52769f 50%, #7da4d6 100%) !important;
  box-shadow: inset 1px -1px 0 rgba(255, 255, 255, 0.4), inset -1px 0 0 rgba(255, 255, 255, 0.4), inset 0 1px 0 #fff, -1px 1px 0 rgba(83, 99, 116, 0.7) !important;
}
#privMinimize:active,
#privMinimize.privateForceActive {
  background: -webkit-linear-gradient(#b4d5ef 0%, #76a9d1 49%, #0a619f 50%, #31cde2 100%) !important;
  background: -moz-linear-gradient(#b4d5ef 0%, #76a9d1 49%, #0a619f 50%, #31cde2 100%) !important;
  background: -o-linear-gradient(#b4d5ef 0%, #76a9d1 49%, #0a619f 50%, #31cde2 100%) !important;
  background: -ms-linear-gradient(#b4d5ef 0%, #76a9d1 49%, #0a619f 50%, #31cde2 100%) !important;
  box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.4),
    inset 0 -1px 0 rgba(10, 254, 251, 0.4),
    inset -1px 0 0 rgba(255, 255, 255, 0.4),
    inset 0 1px 0 #fff,
    -1px 1px 0 rgba(83, 99, 116, 0.7),
    -1px -1px 10px cyan,
    1px 1px 10px cyan !important;
}
#vcPrivateClose:hover {
  background: -webkit-linear-gradient(top, #d1a2a3 0%, #c1736e 49%, #b33c2e 50%, #cea6a5 100%);
  background: -moz-linear-gradient(top, #d1a2a3 0%, #c1736e 49%, #b33c2e 50%, #cea6a5 100%);
  background: -o-linear-gradient(top, #d1a2a3 0%, #c1736e 49%, #b33c2e 50%, #cea6a5 100%);
  background: -ms-linear-gradient(top, #d1a2a3 0%, #c1736e 49%, #b33c2e 50%, #cea6a5 100%);
  box-shadow: inset 1px -1px 0 rgba(255, 255, 255, 0.4),
    inset -1px 0 0 rgba(255, 255, 255, 0.4),
    inset 0 1px 0 #fff,
    -1px 1px 0 rgba(118, 29, 16, 0.5),
    1px 0 0 rgba(118, 29, 16, 0.7);
  opacity: 1 !important;
}
#vcPrivateClose:active,
#vcPrivateClose.privateForceActive {
  background: -webkit-linear-gradient(#f89c8c 0%, #e86c57 49%, #aa210c 50%, #e6942f 100%) !important;
  background: -moz-linear-gradient(#f89c8c 0%, #e86c57 49%, #aa210c 50%, #e6942f 100%) !important;
  background: -o-linear-gradient(#f89c8c 0%, #e86c57 49%, #aa210c 50%, #e6942f 100%) !important;
  background: -ms-linear-gradient(#f89c8c 0%, #e86c57 49%, #aa210c 50%, #e6942f 100%) !important;
  box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.4),
    inset 0 -1px 0 rgba(245, 228, 119, 0.4),
    inset -1px 0 0 rgba(255, 255, 255, 0.4),
    inset 0 1px 0 #fff,
    -1px 1px 0 rgba(118, 29, 16, 0.5),
    1px 0 0 rgba(118, 29, 16, 0.7),
    0 0 10px red,
    -1px -1px 10px rgba(255, 0, 0, 0.3),
    1px 1px 10px rgba(255, 0, 0, 0.3) !important;
}
#privateWrapContent {
  position: relative;
  z-index: 1;
  padding: 0 5px 0 5px;
}
#vcPrivateLogs {
  width: 100%;
  overflow: hidden;
  overflow-y: auto;
  padding: 5px;
  height: 275px;
  border-radius: 0 !important;
  box-shadow: none !important;
  position: relative;
  color: #fff;
}
#vcPrivateInput {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  padding: 0px 4px 4px 4px;
  position: relative;
  background: transparent !important;
  height: 101px;
  border: 0 !important;
  box-shadow: none !important;
  color: #fff;
}
#messageForm {
  height: 61px;
  width: 100%;
}
#privateInputToolbar {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  display: flex;
  height: 34px;
  padding: 0;
  margin: 0;
  overflow: hidden;
  gap: 3px;
  align-items: center;
  justify-content: flex-start;
  box-sizing: border-box;
  font-size: 24px;
}
.privateToolItem {
  width: 21px;
  height: 100%;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  position: relative;
  padding: 0;
}
.privateToolItem img {
	max-width: none;
	max-height: 20px;
	width: auto;
	height: auto;
  vertical-align: middle;
  margin-top: 0;
  filter: drop-shadow(0 0 2px rgba(2, 2, 2, 0.47))
    drop-shadow(0 0 2px rgba(2, 2, 2, 0.14));
}
.mainInputToolbar img,
.mainInputToolbar i,
#myMenu .baseMain img,
#myMenu .baseMain i,
#privateInputToolbar .privateToolItem img,
#privateInputToolbar .privateToolItem i {
  filter: drop-shadow(0 0 2px rgba(2, 2, 2, 0.47))
    drop-shadow(0 0 2px rgba(2, 2, 2, 0.14));
}
#privateInputToolbar .privateToolItem:hover img,
#privateInputToolbar .privateToolItem:hover i {
  filter: drop-shadow(0 0 2px rgba(2, 2, 2, 0.72))
    drop-shadow(0 0 2px rgba(2, 2, 2, 0.32));
}
#privateInputToolbar .privateToolItem img {
  margin-top: 0 !important;
}
#okPrivItem .inputIcon {
  color: #000;
  text-shadow: none;
}
#okPrivItem {
  padding-top: 0;
  vertical-align: middle;
  align-items: center;
  justify-content: center;
}
#privateInputBox {
  height: 100%;
  display: table-cell;
  padding: 0 0px;
}
#privateSendWrap {
  width: 110px;
  height: 100%;
  display: table-cell;
  vertical-align: middle;
  padding-left: 5px;
  background: transparent !important;
}
#privateSendWrap .defaultBtn {
  width: 100%;
  display: block;
  margin: 0;
  padding: 0;
}
#privateSend {
  width: 46px;
  height: 100% !important;
  cursor: pointer;
  display: block;
  font-weight: bold;
  box-shadow: none !important;
  padding: 0;
  margin: 0;
  border: none !important;
  line-height: 0;
  box-sizing: border-box;
  font-size: 16px;
}
#privateSendText {
  width: 100%;
}
#privateSendWrap .giftsPrivateSendButton + #privateSendText {
  margin-top: 5px;
}
#inputVip.disabledActionBtn,
#privateSendWrap .giftsPrivateSendButtonDisabled {
  opacity: 0.55;
  cursor: default !important;
  pointer-events: none;
}
#privateMobileSendWrap {
  display: none;
  width: 46px;
  height: 100%;
  vertical-align: middle;
  background: transparent !important;
}
#filePrivate {
  width: 40px;
  text-align: center;
  vertical-align: middle;
  font-size: 20px;
  display: table-cell;
  position: relative;
  text-align: center;
}
#privateLeft {
  display: table;
  width: 100%;
  height: 100%;
}
#privateAvWrap {
  width: 34px;
}
#privateAv {
  cursor: pointer;
  width: 22px;
  height: 22px;
  display: block;
  margin: 0 auto;
  border-radius: 3px;
}
#vcDpriv {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 184px;
  min-width: 0;
  max-width: none;
  height: 32px;
  margin: 3px 4px 3px 3px;
  padding: 3px 8px 3px 4px;
  box-sizing: border-box;
  overflow: hidden;
  vertical-align: middle;
  border: 1px solid rgba(176, 188, 198, 0.7);
  border-radius: 3px;
  color: #fff;
  background:
    linear-gradient(to bottom, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.035) 44%, rgba(255, 255, 255, 0.012) 49%, rgba(0, 0, 0, 0.09) 100%),
    linear-gradient(to right, rgba(255, 255, 255, 0.018), rgba(255, 255, 255, 0.055) 50%, rgba(255, 255, 255, 0.012)),
    rgba(255, 255, 255, 0.018);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -1px 0 rgba(0, 0, 0, 0.34),
    inset 1px 0 0 rgba(255, 255, 255, 0.035),
    inset -1px 0 0 rgba(0, 0, 0, 0.24),
    0 0 0 1px rgba(0, 0, 0, 0.88),
    0 1px 2px rgba(0, 0, 0, 0.36);
  text-shadow: 0 1px 2px #000;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}
#vcDpriv.privateTaskbarHover {
  border-color: rgba(216, 226, 234, 0.9);
  background:
    linear-gradient(to bottom, rgba(255, 255, 255, 0.32) 0%, rgba(255, 255, 255, 0.11) 44%, rgba(255, 255, 255, 0.04) 49%, rgba(0, 0, 0, 0.13) 100%),
    linear-gradient(to right, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.04)),
    rgba(255, 255, 255, 0.075);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.44),
    inset 0 -1px 0 rgba(0, 0, 0, 0.5),
    inset 1px 0 0 rgba(255, 255, 255, 0.09),
    inset -1px 0 0 rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(0, 0, 0, 0.9),
    0 1px 3px rgba(0, 0, 0, 0.4);
}
#vcDpriv.dprivActive {
  border-color: rgba(151, 205, 239, 0.9);
  background:
    radial-gradient(ellipse 88% 82% at 50% 112%, rgba(22, 155, 255, 0.92) 0%, rgba(12, 109, 209, 0.64) 38%, rgba(8, 53, 105, 0.18) 72%, transparent 100%),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.27) 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.02) 50%, rgba(0, 10, 28, 0.3) 100%),
    rgba(255, 255, 255, 0.05);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 0 7px rgba(66, 171, 255, 0.32),
    0 0 0 1px rgba(0, 0, 0, 0.9),
    0 0 3px rgba(68, 169, 255, 0.25);
}
#vcDpriv.dprivActive.privateTaskbarHover {
  border-color: rgba(196, 229, 250, 0.98);
  background:
    radial-gradient(ellipse 94% 90% at 50% 112%, rgba(46, 179, 255, 0.98) 0%, rgba(18, 126, 229, 0.72) 40%, rgba(10, 67, 126, 0.2) 74%, transparent 100%),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.34) 0%, rgba(255, 255, 255, 0.11) 45%, rgba(255, 255, 255, 0.03) 50%, rgba(0, 14, 35, 0.28) 100%),
    rgba(255, 255, 255, 0.065);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.56),
    inset 0 0 9px rgba(78, 188, 255, 0.44),
    0 0 0 1px rgba(0, 0, 0, 0.92),
    0 0 5px rgba(74, 181, 255, 0.38);
}
#vcDpriv.dprivUnread {
  border-color: rgba(235, 166, 69, 0.88);
  background:
    radial-gradient(ellipse 92% 88% at 50% 112%, rgba(255, 157, 35, 0.82) 0%, rgba(211, 91, 7, 0.46) 42%, rgba(91, 31, 2, 0.12) 74%, transparent 100%),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.2) 0%, rgba(255, 184, 86, 0.07) 45%, rgba(24, 11, 3, 0.38) 52%, rgba(22, 8, 1, 0.72) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 239, 202, 0.48),
    inset 0 0 7px rgba(255, 136, 25, 0.38),
    0 0 0 1px rgba(0, 0, 0, 0.92),
    0 0 4px rgba(255, 133, 27, 0.3);
}
#vcDpriv.dprivUnread.privateTaskbarHover {
  border-color: rgba(255, 204, 112, 0.98);
  background:
    radial-gradient(ellipse 98% 94% at 50% 112%, rgba(255, 174, 55, 0.9) 0%, rgba(224, 104, 13, 0.54) 43%, rgba(102, 37, 3, 0.14) 76%, transparent 100%),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.27) 0%, rgba(255, 196, 111, 0.09) 45%, rgba(31, 13, 3, 0.34) 52%, rgba(25, 9, 1, 0.68) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 248, 222, 0.58),
    inset 0 0 9px rgba(255, 151, 42, 0.48),
    0 0 0 1px rgba(0, 0, 0, 0.92),
    0 0 5px rgba(255, 147, 38, 0.38);
}
#vcPrivateName {
  cursor: pointer;
  font-size: 16px;
  font-weight: 700;
  vertical-align: middle;
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
}
#vcPrivateName p {
  line-height: 30px;
  display: block;
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
}
#dprivAv {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  display: block;
  margin: 0 7px 0 0;
  border: 1px solid rgba(255, 255, 255, 0.52);
  border-radius: 3px;
  box-sizing: border-box;
  object-fit: cover;
}
#dprivName {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  line-height: 24px;
}
#dprivCount {
  flex: 0 0 25px;
  min-width: 25px;
  max-width: 25px;
  overflow: hidden;
  margin-left: 5px;
  text-align: right;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 700;
  line-height: 24px;
  color: #fff4d1;
}
#dprivCount:empty {
  display: none;
}
#vcDpriv.dprivCompact {
  padding-left: 4px;
  padding-right: 4px;
}
#vcDpriv.dprivCompact #dprivAv {
  margin-right: 0;
}
#vcDpriv.dprivCompact #dprivName {
  display: none;
}
#vcDpriv.dprivCompact #dprivCount {
  flex: 0 0 16px;
  width: 16px;
  min-width: 16px;
  max-width: 16px;
  margin-left: 4px;
  text-align: center;
  font-size: 10px;
}

/* Desktop private window manager. The legacy singleton remains untouched on mobile. */
body.privateMultiDesktop > #privateBox,
body.privateMultiDesktop #vcDpriv {
  display: none !important;
}
body:not(.privateMultiDesktop):not(.privateMobileWindowsActive) #privateTaskbarWindows,
body:not(.privateMultiDesktop):not(.privateMobileWindowsActive) #privateTaskbarMore,
body:not(.privateMultiDesktop):not(.privateMobileWindowsActive) #vcPrivateTaskbarOverflow {
  display: none !important;
}
body.privateMultiMobile.privateMobileWindowsActive #vcDpriv { display:none !important; }
#privateTaskbarWindows {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  height: 38px;
  align-items: center;
  overflow: hidden;
}
#menuContainer { z-index: 100001 !important; }
#leftPanel.vcCleft2,
#rightPanel.vcCright2 {
  z-index: 95000 !important;
  top: 0;
	bottom: 43px;
	height: auto !important;
	max-height: calc(100vh - 43px);
}

/* Floating windows share one JS-managed stacking range. Side panels and the
   footer remain above that range; media lightboxes remain above the panels. */
.privateWindowInstance,
body > #privateBox,
.avStreamWindow,
#gamesModal,
.userProfileWindow,
.coreMovableModal { isolation: isolate; }
.fancybox-overlay { z-index: 900000 !important; }
.fancybox-wrap { z-index: 900001 !important; }
.privateTaskbarWindow {
  position: relative;
  display: inline-flex;
  flex: 0 1 auto;
  align-items: center;
  min-width: 0;
  height: 30px;
  margin: 4px 3px 4px 2px;
  padding: 3px 7px 3px 4px;
  box-sizing: border-box;
  overflow: hidden;
  cursor: pointer;
  color: #fff;
  border: 1px solid rgba(176, 188, 198, 0.7);
  border-radius: 3px;
  background:
    linear-gradient(to bottom, rgba(255,255,255,.14), rgba(255,255,255,.035) 44%, rgba(0,0,0,.09)),
    rgba(255,255,255,.018);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), inset 0 -1px 0 rgba(0,0,0,.34), 0 0 0 1px rgba(0,0,0,.88);
  text-shadow: 0 1px 2px #000;
  transition: none !important;
  animation: none !important;
  backface-visibility: visible;
  isolation: isolate;
  contain: layout;
}
.privateTaskbarWindow.privateTaskbarHover {
  transform: none;
}
.privateTaskbarWindow::after {
  content: none !important;
}
.privateTaskbarWindow.privateTaskbarHover,
.privateTaskbarWindow.dprivActive.privateTaskbarHover,
.privateTaskbarWindow.dprivUnread.privateTaskbarHover {
  animation: none !important;
  transition: none !important;
  filter: none !important;
  transform: none !important;
}
.privateTaskbarWindow.privateTaskbarHover {
  border-color: rgba(216,226,234,.9) !important;
  background: linear-gradient(to bottom, rgba(255,255,255,.30), rgba(255,255,255,.10) 44%, rgba(0,0,0,.13)), rgba(255,255,255,.075) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.44), inset 0 -1px 0 rgba(0,0,0,.5), 0 0 0 1px rgba(0,0,0,.9), 0 1px 3px rgba(0,0,0,.4) !important;
}

/* Close controls keep a square inner edge, matching private and games windows. */
.vcModalTop > .modalTopElement:last-child,
.vcModalTop > .closeModal:last-child,
.vcModalTop > .closeOver:last-child {
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 4px !important;
}
.vcModalTop > #gamesTitleMinimize + .gamesTitleClose,
.vcModalTop > .coreModalMinimize + .modalTopElement,
#privateTitlebar #vcPrivateClose {
  border-bottom-left-radius: 0 !important;
}
.savedDataInner > .vcModalTop > .modalTopElement:last-child {
  border-bottom-left-radius: 4px !important;
}
.savedData {
  z-index: 950000 !important;
}
.coreModalMinimize.modalTopElement {
  right: 48px !important;
  width: 26px !important;
  height: 18px !important;
  line-height: 19px !important;
  border: 1px solid #aeb1b4 !important;
  border-top: 0 !important;
  border-right: 0 !important;
  border-radius: 0 0 0 4px !important;
  background: linear-gradient(#d8d8d8 0%, rgba(197,197,197,.91) 49%, rgba(169,169,169,.73) 50%, rgba(210,210,210,.13) 100%) !important;
  box-shadow: none !important;
  cursor: pointer !important;
}
.coreModalMinimize.modalTopElement:hover {
  background: linear-gradient(#b5c8dd 0%, #8ca6c3 49%, #52769f 50%, #7da4d6 100%) !important;
}
.coreModalMinimize.modalTopElement:active {
  background: linear-gradient(#b4d5ef 0%, #76a9d1 49%, #0a619f 50%, #31cde2 100%) !important;
  box-shadow: inset 0 1px #fff, -1px -1px 10px cyan, 1px 1px 10px cyan !important;
}
.coreModalMinimize.modalTopElement i {
  display: inline-block !important;
  font-size: 11px !important;
  line-height: 19px !important;
  cursor: pointer !important;
}
.coreMovableModal > .modalIn > .vcModalTop > .modalTopEmpty,
.userProfileWindow > .modalIn > .vcModalTop > .modalTopEmpty {
  padding-right: 5px;
  box-sizing: border-box;
}
.privateTaskbarChosen { filter: none; }
.privateTaskbarGhost {
	opacity: .34 !important;
	border-style: dashed !important;
}
.privateTaskbarDragging {
	opacity: .92 !important;
	transform: scale(1.025);
	box-shadow: 0 7px 18px rgba(0,0,0,.5) !important;
}
.privateTaskbarWindow.dprivActive {
  border-color: rgba(151,205,239,.9);
  background: radial-gradient(ellipse 88% 82% at 50% 112%, rgba(22,155,255,.92), rgba(12,109,209,.64) 38%, transparent 100%), rgba(255,255,255,.05);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), inset 0 0 7px rgba(66,171,255,.32), 0 0 0 1px rgba(0,0,0,.9);
}
.privateTaskbarWindow.dprivActive.privateTaskbarHover {
  border-color: rgba(196,229,250,.98) !important;
  background: radial-gradient(ellipse 94% 90% at 50% 112%, rgba(46,179,255,.98), rgba(18,126,229,.72) 40%, transparent 100%), rgba(255,255,255,.065) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.56), inset 0 0 9px rgba(78,188,255,.44), 0 0 0 1px rgba(0,0,0,.92), 0 0 5px rgba(74,181,255,.38) !important;
}
.privateTaskbarWindow.dprivUnread {
  border-color: rgba(235,166,69,.88);
  background: radial-gradient(ellipse 92% 88% at 50% 112%, rgba(255,157,35,.82), rgba(211,91,7,.46) 42%, transparent 100%), rgba(255,255,255,.05);
  box-shadow: inset 0 1px 0 rgba(255,239,202,.48), inset 0 0 7px rgba(255,136,25,.38), 0 0 0 1px rgba(0,0,0,.92);
}
.privateTaskbarWindow.dprivUnread.privateTaskbarHover {
  border-color: rgba(255,204,112,.98) !important;
  background: radial-gradient(ellipse 98% 94% at 50% 112%, rgba(255,174,55,.9), rgba(224,104,13,.54) 43%, transparent 100%), rgba(255,255,255,.05) !important;
  box-shadow: inset 0 1px 0 rgba(255,248,222,.58), inset 0 0 9px rgba(255,151,42,.48), 0 0 0 1px rgba(0,0,0,.92), 0 0 5px rgba(255,147,38,.38) !important;
}

.userProfileWindow,
#gamesModal {
  background: transparent !important;
  pointer-events: none;
}
.coreMovableModal {
  background: transparent !important;
  pointer-events: none;
}
.coreMovableModal > .modalIn {
  pointer-events: auto;
}
@media (min-width: 600px) {
  .coreMovableModal > .modalIn {
    position: fixed;
    left: 50%;
    top: 9vh;
    transform: translateX(-50%);
    margin: 0;
  }
  .coreMovableModal > .modalIn.ui-draggable-dragging {
    transform: none;
  }
}
.userProfileWindow > .modalIn,
#gamesModal > .modalIn {
  pointer-events: auto;
}
.userProfileWindow-in {
  max-width: 400px;
}
@media (max-width: 599px) {
  .userProfileWindow {
    align-items: flex-start;
    justify-content: center;
    padding: 8px 3px 46px;
    box-sizing: border-box;
  }
  .userProfileWindow-in {
    width: min(98%, 400px);
    max-height: calc(100vh - 58px);
    margin: 0;
    overflow: auto;
  }
}
.privateTaskbarAvatar {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  margin-right: 6px;
  border: 1px solid rgba(255,255,255,.52);
  border-radius: 3px;
  object-fit: cover;
  box-sizing: border-box;
}
.privateTaskbarExternal .privateTaskbarAvatar,
.coreModalTask .privateTaskbarAvatar,
.coreModalTitleImage,
.gamesTitleIcon {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.privateTaskbarName {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 12px;
  font-weight: 600;
}
.privateTaskbarCount {
  flex: 0 0 auto;
  min-width: 16px;
  margin-left: 5px;
  text-align: center;
  color: #fff4d1;
  font-size: 11px;
  font-weight: 700;
}
.privateTaskbarCount:empty { display: none; }
.coreModalTask-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: linear-gradient(var(--vc-accent, #516f89), var(--vc-accent-dark, #263e54));
}
.coreModalTitleIcon { margin-right: 7px; }
.coreModalTitleImage {
  width: 20px;
  height: 20px;
  object-fit: contain;
  vertical-align: middle;
}
.privateTaskbarWindow.dprivCompact {
	padding-left: 4px;
	padding-right: 4px;
}
.privateTaskbarWindow.dprivCompact .privateTaskbarAvatar { margin-right: 3px; }
.privateTaskbarWindow.dprivCompact .privateTaskbarName { display: none; }
.privateTaskbarWindow.dprivCompact .privateTaskbarCount { margin-left: 0; }
#privateTaskbarMore {
	flex: 0 0 38px;
	width: 38px;
	height: 30px;
	line-height: 30px;
	margin: 4px 3px 4px 2px;
	text-align: center;
	cursor: pointer;
	color: #fff;
  border: 1px solid rgba(176,188,198,.75);
  border-radius: 3px;
	background: linear-gradient(to bottom, rgba(255,255,255,.28), rgba(255,255,255,.04) 48%, rgba(0,0,0,.3));
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	text-shadow: 0 1px 2px #000;
	transition: border-color .16s ease, box-shadow .16s ease, background .16s ease, filter .16s ease;
}
#privateTaskbarMore:hover { filter: brightness(1.2); }
#privateTaskbarMore.hidden { display:none; }
#privateTaskbarMore.dprivActive {
	border-color: rgba(151,205,239,.9);
	background: radial-gradient(ellipse 88% 82% at 50% 112%, rgba(22,155,255,.92), rgba(12,109,209,.64) 38%, transparent 100%), rgba(255,255,255,.05);
	box-shadow: inset 0 1px 0 rgba(255,255,255,.45), inset 0 0 7px rgba(66,171,255,.32), 0 0 0 1px rgba(0,0,0,.9);
}
#privateTaskbarMore.dprivUnread {
	border-color: rgba(235,166,69,.88);
	background: radial-gradient(ellipse 92% 88% at 50% 112%, rgba(255,157,35,.82), rgba(211,91,7,.46) 42%, transparent 100%), rgba(255,255,255,.05);
	box-shadow: inset 0 1px 0 rgba(255,239,202,.48), inset 0 0 7px rgba(255,136,25,.38), 0 0 0 1px rgba(0,0,0,.92);
}
.privateTaskbarMoreCount { min-width:9px; font-size:10px; font-weight:700; line-height:18px; }
#vcPrivateTaskbarOverflow {
	position: fixed;
	display: none;
	left: 0;
	right: auto;
	transform: none;
	bottom: 48px;
	z-index: 100010 !important;
	width: calc(100vw - 10px);
	max-height: calc(100vh - 58px);
	padding: 4px 5px;
	overflow-y: auto;
	flex-wrap: wrap;
	align-content: flex-end;
	justify-content: flex-start;
	box-sizing: border-box;
}
#vcPrivateTaskbarOverflow.privateTaskbarOverflowOpen { display: flex; }
#vcPrivateTaskbarOverflow .privateTaskbarWindow {
	flex:0 0 160px;
	width:160px!important;
	min-width:160px;
	max-width:160px;
}
#vcPrivateTaskbarOverflow .privateTaskbarExternal,
#vcPrivateTaskbarOverflow .gamesTaskbarWindow,
#vcPrivateTaskbarOverflow .coreModalTask {
  flex-basis: 160px !important;
  width: 160px !important;
  min-width: 160px !important;
  max-width: 160px !important;
}
@media screen and (max-width: 599px) {
  #vcPrivateTaskbarOverflow .privateTaskbarWindow {
    flex: 0 0 calc(50% - 5px);
    width: calc(50% - 5px) !important;
    min-width: 52px;
    max-width: 160px;
    transform: none;
  }
}

#privateAv {
  border: 1px solid rgba(255,255,255,.52);
  border-radius: 3px;
  box-sizing: border-box;
}

.giftListModalWindow > .modalIn {
	max-height: min(600px, calc(100vh - 58px)) !important;
	overflow: hidden !important;
}
.giftListModalWindow > .modalIn > .vcModalContent {
	max-height: none !important;
	overflow: hidden !important;
}
#serviceModal-gifts_send > .modalIn,
.giftListModalWindow > .modalIn {
	display: flex;
	flex-direction: column;
	height: min(600px, calc(100vh - 58px));
	max-height: min(600px, calc(100vh - 58px)) !important;
	box-sizing: border-box;
	overflow: hidden !important;
}
#serviceModal-gifts_send.giftConfirmModalWindow > .modalIn {
	height: auto !important;
	max-height: calc(100vh - 58px) !important;
}
#serviceModal-gifts_send.giftConfirmModalWindow > .modalIn > .vcModalContent {
	flex: 0 0 auto;
	height: auto !important;
	overflow-y: auto !important;
}
#serviceModal-gifts_send > .modalIn > .vcModalTop,
.giftListModalWindow > .modalIn > .vcModalTop {
	flex: 0 0 auto;
}
#serviceModal-gifts_send > .modalIn > .vcModalContent,
.giftListModalWindow > .modalIn > .vcModalContent {
	display: block;
	flex: 1 1 auto;
	min-height: 0;
	height: auto;
	width: 100%;
	box-sizing: border-box;
	max-height: none !important;
	overflow: hidden !important;
	border-radius: 0 0 5px 5px !important;
}
#serviceModal-gifts_send .giftPanelWrap {
	display: flex;
	flex-direction: column;
	height: 100%;
	box-sizing: border-box;
}
#serviceModal-gifts_send #giftPanelTabs {
	display: flex;
	flex: 1 1 auto;
	min-height: 0;
	flex-direction: column;
}
#serviceModal-gifts_send .giftPanelMenu {
	flex: 0 0 auto;
}
#serviceModal-gifts_send .giftPanelTab {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	padding-bottom: 10px;
	box-sizing: border-box;
}
.giftListModalWindow .giftListWrap {
	height: 100%;
	box-sizing: border-box;
	overflow-y: auto;
	padding-bottom: 20px;
}

@media screen and (max-width: 599px) {
  #vcPrivateTaskbarOverflow .privateTaskbarWindow,
  #vcPrivateTaskbarOverflow .privateTaskbarExternal,
  #vcPrivateTaskbarOverflow .gamesTaskbarWindow,
  #vcPrivateTaskbarOverflow .coreModalTask {
    flex: 0 0 calc(50% - 5px) !important;
    width: calc(50% - 5px) !important;
    min-width: 52px !important;
    max-width: none !important;
  }
}

.vcCright2 #chatRightContent,
.vcCright2 #wrapRightData,
.vcCright2 #rightPanelShell {
  height: 100% !important;
  min-height: 0 !important;
  box-sizing: border-box;
}
.vcCright2 #rightPanelShell { overflow: hidden; }
.vcCright2 #chatRightData { flex: 1 1 auto; height: auto !important; min-height: 0; }
.vcCright2 .ui-resizable-handle { display: none !important; }

.avMediaResults.avMediaLoading .vcLargeSpinner {
  position: relative !important;
  inset: auto !important;
  display: block !important;
  width: 42px !important;
  height: 42px !important;
  margin: auto !important;
  opacity: 1 !important;
}
.privateWindowInstance {
  position: absolute;
  width: 500px;
  max-width: calc(100vw - 6px);
  overflow: hidden;
  border-radius: 10px 10px 5px 5px;
	border: 1px solid rgba(150,150,150,.72) !important;
	box-sizing: border-box;
  outline: 0;
  box-shadow: 5px 5px 20px #00000073;
  background: linear-gradient(0deg, #ececf1 0%, #a9a8b6 100%);
}
.privateWindowInstance.privateBoxBlocked [id="privateWrapContent"]::before {
	content: "\f05e";
	font-family: FontAwesome;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	font-size: 210px;
	line-height: 1;
  color: rgba(215,58,73,.54);
	pointer-events: none;
	z-index: 1;
}
.privateWindowInstance.privateBoxBlocked [id="vcPrivateLogs"] { position: relative; z-index: 2; }
.privateWindowInstance.privateBoxBlocked [id="vcPrivateInput"] { opacity: .7; }
.privateWindowInstance.privateBoxBlocked [id="privateInputToolbar"],
.privateWindowInstance.privateBoxBlocked [id="privateSendWrap"],
.privateWindowInstance.privateBoxBlocked [id="privateMobileSendWrap"] { pointer-events: none; }
.privateWindowInstance .ui-resizable-se {
  right: 1px;
  bottom: 1px;
  width: 12px;
  height: 12px;
  z-index: 20;
}

/* Private conversation list: scoped taskbar/Vista treatment. */
.privateHistoryModal {
  overflow: hidden;
  border-radius: 8px;
}
.privateHistoryModal .vcModalTop {
  position: relative;
}
.privateHistorySearchWrap {
	position: relative;
	display: block;
  margin: 10px 0 8px;
}
.privateHistorySearchWrap .fullInput {
	width: 100%;
	min-width: 0;
	padding-left: 10px;
  box-sizing: border-box;
}
.privateHistorySearchWrap .fullInput::placeholder {
	font-family: FontAwesome, sans-serif;
}
.privateHistoryList {
  padding: 5px 15px;
}
.privateHistoryList .privateHistoryItem {
  width: 100%;
  min-height: 43px;
  margin: 4px 0;
  overflow: hidden;
  border: 1px solid rgba(176,188,198,.62);
  border-radius: 3px;
  background:
    linear-gradient(to bottom, rgba(255,255,255,.14), rgba(255,255,255,.035) 45%, rgba(0,0,0,.12)),
    rgba(58,62,78,.42);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), inset 0 -1px 0 rgba(0,0,0,.28), 0 0 0 1px rgba(0,0,0,.35);
  padding-left: 6px;
}
.privateHistoryItem .privateHistoryText { overflow: hidden; }
.privateHistoryItem .privateHistoryText .vcUsername { line-height: 20px; }
.vcPrivateHistoryPreview {
  overflow: hidden;
  margin: 0;
  color: rgba(255,255,255,.72);
  font-size: 11px;
  line-height: 16px;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.privateHistoryList .privateHistoryItem:hover {
  border-color: rgba(205,218,228,.82);
  background:
    linear-gradient(to bottom, rgba(255,255,255,.24), rgba(255,255,255,.07) 45%, rgba(0,0,0,.13)),
    rgba(68,73,91,.52);
}
.privateHistoryList .privateHistoryItem.dprivUnread {
	border-color: rgba(235,166,69,.88);
	background: radial-gradient(ellipse 92% 88% at 50% 112%, rgba(255,157,35,.82), rgba(211,91,7,.46) 42%, transparent 100%), rgba(58,62,78,.42);
	box-shadow: inset 0 1px 0 rgba(255,239,202,.48), inset 0 0 7px rgba(255,136,25,.38), 0 0 0 1px rgba(0,0,0,.92);
}
.privateHistoryList .privateHistoryItem.dprivActive:not(.dprivUnread) {
	border-color: rgba(151,205,239,.9);
	background: radial-gradient(ellipse 88% 82% at 50% 112%, rgba(22,155,255,.92), rgba(12,109,209,.64) 38%, transparent 100%), rgba(58,62,78,.42);
	box-shadow: inset 0 1px 0 rgba(255,255,255,.45), inset 0 0 7px rgba(66,171,255,.32), 0 0 0 1px rgba(0,0,0,.9);
}
.privateHistoryDelete {
  width: 34px !important;
  vertical-align: middle;
}
.privateHistoryDelete i {
  display: block;
  width: 17px;
  height: 17px;
  margin: 0 auto;
  line-height: 15px;
  text-align: center;
  color: #f8f8f8;
  border: 1px solid #aeb1b4;
  border-radius: 4px;
  background: linear-gradient(to bottom, #e39a9c 0%, #c1736e 49%, #b33c2e 50%, #cf6a5e 100%);
  text-shadow: 0 0 3px #000;
  box-sizing: border-box;
}
.privateHistoryDelete i:hover {
  filter: brightness(1.12);
}
.privateHistorySettings {
  position: relative;
}
.privateHistorySettingsHeading {
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:10px;
	margin:5px 0;
}
.privateHistorySettingsHeading .vcLabel { margin:0; }
.privateHistoryClear {
	position:static;
	flex:0 0 auto;
	min-width:0;
	height:auto;
	padding:0;
	color:#df0000;
	font-size:11px;
	line-height:18px;
	border:0;
	background:transparent;
	box-shadow:none;
	cursor:pointer;
	text-shadow:none;
	transition:color .16s ease;
}
.privateHistoryClear:hover {
	color:#ff3030;
	text-shadow:none;
}
.privateHistoryClear i { margin-right:4px; }
.privateDeleteAllIcon { margin:0 auto 2px; color:#df0000; font-size:38px; line-height:42px; text-align:center; text-shadow:none; }
.inputItem.inputActionDisabled { opacity:.55; filter:none; cursor:pointer!important; }
#vcDpriv.dprivCompact #dprivCount:empty {
  display: none;
}
.privateOpt {
  width: 30px;
  text-align: center;
  font-size: 14px;
  cursor: pointer;
  display: table-cell;
  vertical-align: middle;
  position: relative;
}
#privInputExtra {
  width: auto;
  min-width: 170px;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 100;
  padding: 0;
  display: none;
  background: rgb(24 30 41 / 58%);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-radius: 5px;
  min-height: 34px;
}
#privateBox.privateBoxBlocked #privateWrapContent::before {
  content: "\f05e";
  font-family: FontAwesome;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 210px;
  line-height: 1;
  color: rgba(215, 58, 73, 0.52);
  pointer-events: none;
  z-index: 1;
}
#privateBox.privateBoxBlocked #vcPrivateLogs {
  position: relative;
  z-index: 2;
}
#privateBox.privateBoxBlocked #vcPrivateInput {
  opacity: 0.7;
}
#privateBox.privateBoxBlocked #privateInputToolbar,
#privateBox.privateBoxBlocked #privateSendWrap,
#privateBox.privateBoxBlocked #privateMobileSendWrap {
  pointer-events: none;
}
#privateMessageInput:disabled {
  cursor: not-allowed;
}
#friendManageButtonBox,
#friendSearchBox,
#manageFriendSearchBox {
  padding: 10px 10px 0 10px;
}
#manageFriendsContainer.ulistContainer {
  padding: 10px;
  max-height: 340px;
}
#manageFriendsContainer .ulistItem {
  margin-bottom: 3px;
}
#manageFriendsContainer .ulistItem:last-child {
  margin-bottom: 0;
}
#manageFriendSearchBox .searchBar,
#friendSearchBox .searchBar {
  margin-bottom: 0;
}
#friendPanelLayout {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  box-sizing: border-box;
}
#friendPanelLayout #friendManageButtonBox,
#friendPanelLayout #friendSearchBox {
  flex: 0 0 auto;
}
#friendPanelLayout #containerFriends {
  flex: 1 1 auto;
  min-height: 0;
  margin-top: 5px;
  padding-bottom: 5px;
  overflow-x: hidden;
  overflow-y: auto;
  box-sizing: border-box;
}
.emptyPrivate {
  padding: 20px 10px;
  text-align: center;
  font-size: 17px;
}
#vcPrivateLogs ul li {
  width: 100%;
  margin-bottom: 3px;
}
#vcPrivateLogs .chatLogRow {
  margin-bottom: 3px;
}
#vcPrivateLogs .chatLogRow .privateMessageText {
  width: 100%;
}
#vcPrivateLogs .chatLogRow .vistaTable {
  display: table;
  table-layout: fixed;
  width: 100%;
  line-height: 1;
}
#vcPrivateLogs .chatLogRow .chatAvatar {
  display: inline-block;
  width: auto;
  vertical-align: middle;
}
#vcPrivateLogs .chatLogRow .chatAvatarImage {
  vertical-align: middle;
}
#vcPrivateLogs .chatLogRow .chatDisplayName,
#vcPrivateLogs .chatLogRow .chatSep,
#vcPrivateLogs .chatLogRow .chatMessage {
  vertical-align: middle;
  line-height: 1.2 !important;
}
#vcPrivateLogs .chatLogRow .chatMessage {
  display: inline;
  max-width: none;
  line-height: 1.2 !important;
  word-wrap: break-word;
  overflow-wrap: break-word;
  position: static;
  top: auto;
}
#vcPrivateLogs .chatLogRow .chatMessage.privateDefaultMessage {
	color: #fff;
}
.reportReasonNative {
	display: block !important;
	width: 100%;
}
#vcPrivateLogs .chatLogRow .chatDisplayName {
  align-items: center;
  vertical-align: middle;
}
#vcPrivateLogs .chatLogRow .chatDisplayName .vcUsername,
#vcPrivateLogs .chatLogRow .chatSep {
  vertical-align: middle;
  line-height: 1.2 !important;
}
#vcPrivateLogs .chatLogRow .vcCdate {
  display: none;
}
#vcPrivateLogs .chatLogRow.logActions .vcCdate {
  display: table-cell;
}
#vcPrivateLogs .chatLogRow .vcCclear {
  display: none !important;
}
#vcPrivateLogs .chatLogRow:hover {
  opacity: 0.96;
}
#vcPrivateLogs .chatImage {
  height: 70px;
  max-width: 100%;
}
#vcPrivateLogs .stickerChat {
  height: 70px;
  max-width: 100%;
}
#vcPrivateLogs .chatVideoContainer {
  max-width: 100% !important;
}


/* element css */
.vcNogranted {
  display: none !important;
}

/* chat logs css */
.chatLogRow {
  padding: 3px 7px;
  word-wrap: break-word;
  display: table;
  width: 100%;
  table-layout: fixed;
  max-width: 100%;
  overflow: hidden;
  cursor: pointer;
  font-size: var(--vc-message-size,23px);
  line-height: 1;
  height: auto;
}
.otherLogs {
  padding: 8px;
  word-wrap: break-word;
  display: table;
  width: 100%;
  table-layout: fixed;
  max-width: 100%;
  overflow: hidden;
}
.chatAvatar {
  display: inline-block; /* width:40px; */
  vertical-align: middle;
  position: static;
  vertical-align: middle;
  margin-right: 0;
  line-height: 0;
}
.chatAvatarImage {
  height: 30px;
  width: 30px; /* border-radius:50%; */
  display: block;
  overflow: hidden;
  cursor: pointer;
  line-height: 0;
  vertical-align: top;
}
.privateMessageText {
  display: table-cell;
  vertical-align: middle; /* padding:0 0 0 6px; */
  position: relative;
}
.chatLogRow .vistaTable {
  position: relative;
}
.chatHeadline {
  display: inline-flex;
  align-items: center;
  position: relative;
  padding-left: 38px;
  vertical-align: middle;
  line-height: 1.2;
}
.chatHeadline .chatAvatar {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}
.privateMessageText .vcUsername {
  font-size: var(--vc-message-size,23px);
  line-height: 1;
}
.chatImage {
  max-width: 100%;
  height: 100px;
  width: auto;
  margin: 5px 0 0 0;
  border-radius: 5px;
  vertical-align: middle;
}
#mainLogs .fancybox-video img,
#mainLogs .fancybox-vimeo img,
#mainLogs .fancybox img {
  position: relative;
}
#mainLogs ul {
  position: absolute;
  top: 0;
  max-height: 100%;
  overflow-y: auto;
}
#mainLogs li {
  position: relative;
}
.logsDate {
  font-size: 10px;
}
.vcCclear,
.vcSpclear {
  display: table-cell;
  width: 24px;
  font-size: 22px;
  vertical-align: middle;
  text-align: center;
  cursor: pointer;
}
.vcCdate {
  display: table-cell;
  width: 50px;
  font-size: 11px;
  vertical-align: middle;
  text-align: center; /* opacity: 0; */ /* visibility: hidden; */ /* transition: 0.2s; */
  font-weight: 800;
}
.chatDisplayName {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  margin-left: 0;
  padding: 0;
  gap: 2px;
  height: auto;
  line-height: 1.2;
}

.chatDisplayName .vcUsername {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  min-height: 0;
  line-height: 1.2 !important;
}
.chatSep {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  color: #ffffff;
  text-shadow: 0 0 3px #000;
  margin: 0 7px 0 0;
  line-height: 1.2;
  padding: 0 !important;
  padding-left: 0 !important;
}
.chatMessage {
  vertical-align: middle;
  line-height: 1.2 !important;
}
.vcChatRank {
  display: inline-block;
  width: auto;
  height: 11px;
  margin: 0 3px 0 0;
}
.specialDelete {
  font-size: 13px;
  position: absolute;
  top: 0;
  right: 0;
  padding: 5px;
}
.fbemoChat {
  height: 20px;
  width: 20px;
}
.emoChat {
  margin-bottom: 0;
  vertical-align: middle;
}
#chatLogsContainer .emoChat,
#vcPrivateLogs .emoChat {
  position: relative;
  top: -3px;
}
.stickerChat {
  height: 80px;
  max-width: 100%;
  vertical-align: middle;
}
.customChat {
  max-height: 200px;
  max-width: 400px;
}
.chatSystem {
  font-size: var(--vc-message-size,23px);
  line-height: 1;
  height: auto;
}
.chatLogRow.system .chatHeadline,
.chatLogRow.systemMsg .chatHeadline {
  display: none !important;
}
.vcSysname {
  font-weight: bold;
}

/* line height for elements */
.chatMessage {
  /* line-height:1.4em; */ /* display:inline-block; */ /* max-width:100%; */
  padding-left: 0;
  display: inline;
  line-height: 1.2 !important;
  vertical-align: middle;
}
.postContent {
  line-height: 1.4em;
}

/* empty zone css */
.vcEmptyZone {
  padding: 30px 15px;
  margin: 0 auto;
  text-align: center;
}
.emptyZoneIcon {
  width: 64px;
  height: 64px;
}
.emptyZoneText {
  font-size: 13px;
  margin-top: 10px;
  font-weight: bold;
}
.vcModalContent .emptyZoneText,
.vcModalContent .emptyZoneText.subText {
  color: #000;
}

/* post css */
.mainPostControl {
  display: table;
  table-layout: fixed;
  width: 100%;
  margin-top: 5px;
}
.mainPostItem {
  display: table-cell;
  vertical-align: middle;
  width: 40px;
  font-size: 20px;
  position: relative;
  text-align: center;
}
.mainPostButton {
  display: table-cell;
  vertical-align: middle;
  text-align: right;
}

.replyItem {
  display: table;
  table-layout: fixed;
  width: 100%;
  word-wrap: break-word;
  padding: 10px;
  margin-bottom: 3px;
}
.replyAvatar {
  display: table-cell;
  vertical-align: top;
  width: 32px;
}
.replyAvatar img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: block;
  cursor: pointer;
}
.replyContent {
  display: table-cell;
  vertical-align: top;
  padding: 0 5px;
}
.replyContent img {
  max-height: 160px;
}
.replyDelete {
  text-align: center;
  width: 30px;
  cursor: pointer;
}
.postTitle {
  display: table;
  table-layout: fixed;
  width: 100%;
}
.postAvatar {
  display: table-cell;
  vertical-align: center;
  width: 36px;
}
.postAvatar img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: block;
  cursor: pointer;
}
.postContent {
  display: table;
  table-layout: fixed;
  width: 100%;
  padding: 10px 0;
  word-wrap: break-word;
}
.postControl {
  display: table;
  table-layout: fixed;
  width: 100%;
  padding: 5px 0;
}
.newNews {
  padding: 0 5px;
  border-radius: 2px;
  margin-left: 3px;
}
.postElement {
  height: auto;
  padding: 15px 0;
  margin: 0 auto;
}
.postEdit {
  cursor: pointer;
  width: 40px;
  font-size: 15px;
  position: relative;
}
.vcCommentCount {
  text-align: right;
  cursor: pointer;
}
.doComment {
  width: 50px;
  text-align: center;
  cursor: pointer;
}
.vcLikeCount {
  float: left;
  cursor: pointer;
  padding: 5px;
  border-radius: 50px;
}
.showReply {
  height: auto;
  overflow: hidden;
  margin-bottom: 10px;
}
.moreComment {
  cursor: pointer;
  display: block;
  padding: 8px 0;
}
.moreComment:hover {
  text-decoration: underline;
}
.postImage {
  display: table;
  table-layout: fixed;
  width: 100%;
  margin: 10px 0;
}
.postImage img {
  max-width: 100%;
  max-height: 350px;
  width: auto;
  height: auto;
}
.addCommentZone {
  clear: both;
}
.addComment {
  border-radius: 50px;
}
.postInputContainer {
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}
.panelWrap {
  padding: 15px 15px 30px 15px;
}
.mainPostData img {
  max-height: 100px;
  max-width: 100%;
}
.upFile {
  display: table;
}
.upFileInside {
  display: table-cell;
  position: relative;
  min-width: 80px;
  min-height: 80px;
}
.upFileRemove {
  width: 30px;
  height: 30px;
  text-align: center;
  padding-top: 3px;
  font-size: 18px;
  position: absolute;
  bottom: 5px;
  right: 5px;
  border-radius: 20px;
}
#friendPost,
#newsData {
  min-height: 60px;
  height: 60px;
  border: 1px solid #b8c2d1;
  overflow: hidden;
  background: #fff !important;
  padding: 5px 8px;
  resize: none;
  line-height: 1.45;
  color: #1f2b3d !important;
  text-shadow: none !important;
  border-radius: 3px;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
}
#friendPost::placeholder,
#newsData::placeholder {
  color: #8a94a6;
}
#wallFile,
#newsFile {
  -webkit-appearance: none;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  padding: 0px !important;
}
.likeIcon,
.commentIcon {
  width: 20px;
  height: 20px;
  display: inline-block;
  vertical-align: middle;
  margin-top: -2px;
}
.wlikeIcon {
  width: 20px;
  height: 20px;
  vertical-align: middle;
}
.plikeText {
  vertical-align: middle;
}
.postMenu {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  width: 160px;
  text-align: left;
  z-index: 1;
}
.newsBox.postElement {
  padding: 10px 12px 8px 12px;
  margin: 0;
}
.newsBox .postTitle {
  align-items: center;
}
.newsBox .postAvatar {
  width: 40px;
  padding: 0;
  vertical-align: middle;
}
.newsBox .postAvatar img {
  width: 40px;
  height: 40px;
  border-radius: 0;
}
.newsBox .postInfo {
  padding-left: 8px;
}
.newsBox .postInfo .vcUsername {
  line-height: 1.2;
  margin-bottom: 2px;
}
.newsBox .postInfo .vcDate {
  line-height: 1.1;
}
.newsBox .postContent {
  padding: 8px 0 6px 0;
}
.newsBox .postControl {
  padding: 3px 0 0 0;
}
.newsBox .vcLikeCount {
  padding: 3px 5px;
}
.newsBox .vcCommentCount {
  padding: 0 0 0 8px;
}
.newsBox .addCommentZone {
  margin-top: 4px;
}
.newsBox .replyPost {
  padding-top: 6px !important;
}
.newsBox .addComment {
  border-radius: 4px;
}
.newsBox [class^="ncmtboxwrap"],
.newsBox [class*=" ncmtboxwrap"] {
  padding-top: 6px !important;
  padding-bottom: 0 !important;
}
.newsBox .vcNcmtbox,
.newsBox .vcNmorebox {
  margin-bottom: 0;
}
.postMenuItem {
  padding: 8px 10px;
}

/* video in post css */
.videoContainer {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  margin: 5px 0 0 0;
  clear: both;
}
.videoContainer iframe,
.videoContainer object,
.videoContainer embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.chatVideoContainer {
  display: inline-block;
  width: 172px;
  max-width: 100% !important;
  position: relative;
  margin: 3px 0 0 4px;
  vertical-align: middle;
  cursor: pointer;
}
.chatVideoThumb {
  display: block;
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  overflow: hidden;
  z-index: 10;
  border-radius: 3px;
  background: #111;
}
.chatVideoThumb:before {
  content: "\f04b";
  font-family: FontAwesome;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 12;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  font-size: 12px;
  color: #fff;
  background: linear-gradient(180deg, #d74f4f 0%, #8f1717 100%);
  border: 1px solid #f2a7a7;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 45%),
    0 1px 2px rgb(0 0 0 / 45%);
  border-radius: 5px;
  pointer-events: none;
}
.chatVideoThumb img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
  transform: scale(1.08);
  transform-origin: center center;
}
.chatVideo iframe,
.chatVideoThumb img,
.videoContainer object,
.videoContainer embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.chatVideoMeta {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  font-weight: 300;
  line-height: 1.25;
  color: #fff;
}
.chatVideoMeta i {
  color: #d61e1e;
  font-size: 14px;
  line-height: 1.1;
  display: inline;
  vertical-align: top;
  margin-right: 4px;
}
.chatVideoTitle {
  display: inline;
  color: #fff;
  text-shadow: 0 1px 1px rgb(0 0 0 / 45%);
  word-break: break-word;
  text-align: justify;
}
.chatSoundcloud {
  width: 500px;
  max-width: 100%;
  height: 130px;
  margin: 5px 0;
}
.wallSoundcloud {
  width: 500px;
  max-width: 100%;
  height: 130px;
  margin: 5px 0;
}
.chatSoundcloud iframe,
.wallSoundcloud iframe {
  width: 100%;
  height: 100%;
}

/* stream css */
#wrapStream {
  width: 200px;
  height: 160px;
  position: relative;
  background: linear-gradient(180deg, #f7f9fd 0%, #e4ebf5 46%, #d2dceb 100%);
  overflow: hidden;
}
#wrapStream iframe,
#wrapStream video {
  width: 100%;
  height: 100%;
  border: none;
  padding: 0;
  margin: 0;
  display: block;
}
#vcStreamVideo {
  object-fit: cover;
  background: #000;
  display: none;
}
#containerStream {
  width: auto;
  height: auto;
  z-index: 999;
  position: fixed;
  top: 0;
  left: 0;
  display: none;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}
#containerStream.streamMediaMode {
  border: none;
  border-radius: 10px 10px 5px 5px;
  box-sizing: border-box;
  outline: 1px solid rgb(255 255 255 / 42%);
  box-shadow: 5px 5px 20px #00000073;
}
#containerStream.streamMediaMode #streamHeader {
  height: 30px;
  padding: 0 3px 0 10px;
  position: relative;
  border: 0;
  border-radius: 10px 10px 0 0;
  box-sizing: border-box;
}
#containerStream.streamMediaMode #streamTitle {
  min-width: 0;
  width: 100%;
  line-height: 30px;
  padding-left: 0;
  padding-right: 48px;
  box-sizing: border-box;
}
.avStreamWindow {
  width: 200px;
  height: auto;
  z-index: 161;
  position: fixed;
  top: 80px;
  left: 12px;
  display: none;
  border-radius: 4px;
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1px 0 rgba(164, 174, 193, 0.35),
    1px 1px 0 rgba(73, 83, 109, 0.45),
    0 12px 32px rgba(0, 0, 0, 0.45);
  border: 1px solid #b8c2d1;
  border-top-color: #eef3fb;
  border-left-color: #eef3fb;
  border-bottom-color: #8d99ab;
  border-right-color: #8d99ab;
  background: linear-gradient(180deg, #f7f9fd 0%, #e4ebf5 46%, #d2dceb 100%);
}
#streamHeader {
  width: 100%;
  height: 30px;
  cursor: move;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0 0 10px;
  border: 1px solid #b8c2d1;
  border-bottom: none;
  box-sizing: border-box;
}
.avStreamHeader {
  width: 100%;
  height: 26px;
  cursor: move;
  display: table;
  table-layout: fixed;
  position: relative;
  padding: 0;
  border-bottom: none;
  box-sizing: border-box;
}
#streamTitle {
  color: #fff;
  font-weight: bold;
  text-shadow: 0 0 3px #000;
  padding-left: 10px;
  line-height: 30px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.avStreamTitle {
  display: table-cell;
  width: 100%;
  max-width: none;
  box-sizing: border-box;
  vertical-align: middle;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  text-shadow: none;
  padding: 0 22px 0 6px;
  line-height: 26px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#closeStream {
	color: #fff;
}
.avStreamClose {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 10px;
  line-height: 1;
  padding: 0;
  z-index: 2;
}

.avStreamClose i {
  display: block;
  line-height: 1;
  margin: 0 auto;
}
.avWrapStream {
  width: 200px;
  height: 160px;
  position: relative;
  background: #000;
  border: none;
  overflow: hidden;
}
.avWrapStream .avStreamVideo {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  border: none;
  padding: 0;
  margin: 0;
  display: block;
  object-fit: cover;
  background: #000;
  opacity: 0;
  transition: opacity 0.18s linear;
}
.avWrapStream .avStreamVideo.avStreamVideoReady {
  opacity: 1;
}
.avWrapStream .avStreamVideo.avStreamVideoWaiting {
  opacity: 0;
}
.avStreamWindow[data-window-key^="self_"] .avStreamVideo {
  transform: scaleX(-1);
}
.avStreamWaiting {
  position: absolute;
  inset: 0;
  display: none;
  color: #fff;
  text-align: center;
  font-weight: 700;
  text-shadow: 0 0 4px #000;
  padding: 0;
  z-index: 20;
  overflow: hidden;
}
.avStreamWaiting.streamWaitingActive {
  display: block;
  position: relative;
  background: #000;
}
#streamWaiting {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-align: center;
  font-weight: 700;
  text-shadow: 0 0 4px #000;
  padding: 15px;
}
#streamWaiting.streamWaitingActive {
  flex-direction: column;
  gap: 12px;
  position: relative;
}
.avStreamWaitBackdrop {
  position: absolute;
  inset: 0;
  background: #000;
  z-index: 0;
  pointer-events: none;
}
.avStreamWaitBg,
.avStreamWaitNoise {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  opacity: 0.2;
  pointer-events: none;
  object-fit: cover;
  z-index: 1;
  display: block;
}
.avStreamWaitInner {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  height: 100%;
  padding: 15px;
  box-sizing: border-box;
}
.avStreamWaitSpinner {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
}
.avStreamWaitSpinner .vcLargeSpinner {
  position: static;
  top: auto;
  left: auto;
  margin: 0;
  width: 42px;
  height: 42px;
}
.avStreamWaitText {
  font-size: 13px;
  color: #fff;
  text-shadow: 0 0 4px #000;
  margin-top: 10px;
}

/* header css */
#wrapMainHeader {
  max-width: 1100px !important;
  margin: 0 auto;
  height: 100%;
}
#vcHeader2 {
  width: 100%;
  height: 50px;
  margin: 0 auto;
  position: fixed;
  z-index: 4;
}
#chatHead {
  height: 50px;
  padding: 0 6px;
  width: 100%;
  display: table;
  table-layout: fixed;
}

#chatHead2Top {
  height: 40px;
  /* padding: 0 6px; */
  width: 100%;
  display: table;
  table-layout: fixed;
  padding-bottom: 3px;
}

#chatHead2 {
  height: 40px;
  /* padding: 0 6px; */
  width: 100%;
  display: table;
  table-layout: fixed;
}

.emptySubhead {
  width: 100%;
  height: 50px;
}

/* cookie bar */
.cookieWrap {
  position: fixed;
  display: table;
  bottom: 0;
  padding: 20px;
  width: 100%;
  z-index: 9999;
}
.cookieText {
  display: table-cell;
  vertical-align: middle;
}
.cookieButton {
  display: table-cell;
  width: 120px;
  vertical-align: middle;
  padding: 0 10px;
}

/* menu css */
#mainHeader {
  display: table;
  table-layout: fixed;
  width: 100%;
  height: 100%;
}
#mainMobMenu {
  display: table-cell;
  vertical-align: middle;
  width: 42px;
  position: relative;
  cursor: pointer;
}
#openLoginMenu {
  width: 50px;
  font-size: 24px;
  position: relative;
}
.headLogo,
.chatHeadLogo {
  display: table-cell;
  vertical-align: middle;
  width: 152px;
  white-space: nowrap;
}
.headLogo img,
.chatHeadLogo img {
  height: 40px;
  width: auto;
  display: block;
}
.chatLoader {
  position: fixed;
  inset: 0;
  z-index: 999999;
  overflow: hidden;
  background: #000;
}
.chatLoaderBackdrop,
.chatLoaderOverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100lvh;
}
.chatLoaderBackdrop {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-attachment: scroll;
  transform: none;
  filter: none;
}
.chatLoaderOverlay {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.28) 0%, rgba(0, 0, 0, 0.68) 100%),
    radial-gradient(circle at center, rgba(64, 62, 91, 0.18) 0%, rgba(0, 0, 0, 0.82) 70%);
}
.chatLoaderCredit {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 11px;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.55);
  opacity: 0.92;
  text-align: center;
}
.chatLoaderCredit,
.chatLoaderCredit a {
  color: #fff;
}
.chatLoaderCredit:hover {
  color: #fff;
  opacity: 1;
}
.chatLoaderInner {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
  padding: 30px 20px;
  text-align: center;
}
.chatLoaderLogoOuter {
  width: 100%;
  display: flex;
  justify-content: center;
}
.chatLoaderLogoShell {
  position: relative;
  display: inline-block;
  width: min(200px, 72vw);
  max-width: 100%;
}
.chatLoaderLogoShell img,
.chatLoaderLogoSvg {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
}
.uiProtectedImg {
  -webkit-user-drag: none;
  user-drag: none;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-touch-callout: none;
}
.chatLoaderLogoSvg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.chatLoaderLogoBase {
  opacity: 0.14;
  filter: drop-shadow(0 0 18px rgba(255, 255, 255, 0.08));
}
.chatLoaderPanel {
  width: min(430px, calc(100vw - 34px));
  padding: 16px 20px;
  color: #fff;
  background: linear-gradient(180deg, rgba(39, 35, 61, 0.86) 0%, rgba(64, 62, 91, 0.74) 100%);
  border: 1px solid #ffffff3b;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 10px 28px rgba(0, 0, 0, 0.34);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 18px;
}
.chatLoaderConsole {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 110px;
  font-size: 14px;
  line-height: 1.35;
  letter-spacing: 0.02em;
}
.chatLoaderLine {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  color: rgba(255, 255, 255, 0.96);
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
}
.chatLoaderLabel {
  white-space: nowrap;
}
.chatLoaderDots {
  flex: 1 1 auto;
  height: 7px;
  min-width: 44px;
  border-radius: 999px;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.72) 1.1px, rgba(255, 255, 255, 0) 1.3px);
  background-size: 8px 7px;
  background-repeat: repeat-x;
  background-position: left center;
  opacity: 0.68;
}
.chatLoaderPercent {
  min-width: 40px;
  text-align: right;
  white-space: nowrap;
}
.chatLoaderDone {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}
.headOption {
  display: table-cell;
  width: 36px;
  vertical-align: middle;
  font-size: 17px;
  text-align: center;
  position: relative;
  cursor: pointer;
}
.taskbarOption {
  display: table-cell;
  width: 28px;
  vertical-align: middle;
  font-size: 16px;
  text-align: center;
  position: relative;
  cursor: pointer;
}

/* language box */
.langFlag {
  width: 26px;
  height: auto;
  display: block;
  margin: 0 auto;
  border-radius: 3px;
}
.introLang {
  width: 26px;
  height: auto;
  display: block;
  margin: 0 auto;
  border-radius: 3px;
}
.langFlagBox {
  width: 40px;
}
.langLang {
  padding: 10px 5px;
}
.embedLang {
  padding: 5px;
}

/* list css */
.dropList {
  display: none;
  cursor: pointer;
}
.userCount {
  display: table;
  table-layout: fixed;
  width: 100%;
  padding: 10px;
  font-size: 13px;
  font-weight: normal;
  font-weight: bold;
}
.vcUcount {
  border-radius: 50px;
  padding: 4px 7px;
  font-size: 11px;
}

/* responsive menu page */
#sideMenu {
  position: fixed;
  left: 0;
  top: 0;
  height: 100%;
  width: 220px;
  background: #fff;
  display: none;
  overflow-y: auto;
  z-index: 3;
  padding-top: 50px;
}

/* opaque color */
.offline:hover {
  opacity: 1;
}

/*friends module */
#profileFriends {
  font-size: 0px;
  max-height: 332px;
  overflow: hidden;
  overflow-y: auto;
}
.userSquareElem {
  width: 60px;
  height: 60px;
  position: relative;
  display: inline-block;
  margin-left: 5px;
  margin-bottom: 5px;
  overflow: hidden;
  border-radius: 3px;
}
.userSquareElem img {
  width: 60px;
  height: 60px;
}
.userSquareName {
  font-size: 10px;
  text-align: center;
  width: 100%;
  position: absolute;
  bottom: 0;
  padding: 3px 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Search cards fill the sidebar width without changing profile friend tiles. */
#evUserResults {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(60px, 100%), 1fr));
  gap: 5px;
  min-width: 0;
}
#evUserResults > .userSquareElem {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  margin: 0;
  min-width: 0;
}
#evUserResults > .userSquareElem img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#evUserResults > :not(.userSquareElem) {
  grid-column: 1 / -1;
  min-width: 0;
}

/* global wrap chat display */
#globalChat {
  display: table;
  width: 100%;
  overflow: hidden;
}

/* chat left css */
#leftPanel {
  height: 100%;
  border-radius: 0px;
  overflow: hidden;
  overflow-y: auto;
}
#chatLeftMenu {
  width: 100%;
  overflow: hidden; /* overflow-y:auto; */
  padding: 5px 5px 0px 5px;
}
.vcCleft,
.vcCleft2 {
  width: 150px;
}
.vcCleft {
  border-radius: 0px;
  overflow: hidden;
  padding: 0;
  display: table-cell;
  vertical-align: top;
}
.vcCleft2 {
  position: absolute;
  top: 51px;
  left: 0;
  top: 0;
  z-index: 201;
  display: none;
  padding-bottom: 0;
}
.containerExtra {
  width: 100%; /* padding:5px; */
}
.containerExtra img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  padding-bottom: 10px;
}

/* chat center css */
#chatCenter {
  display: table-cell;
  vertical-align: top;
  overflow: hidden;
}

/* chat right css */
.vcPanelBar,
.sideBar {
  display: table;
  width: 100%;
  table-layout: fixed;
  height: 40px;
}
.panelBarItem,
.panelOption,
.sideBarItem {
  display: table-cell;
  vertical-align: middle;
  width: 40px;
  text-align: center;
  font-size: 18px;
  cursor: pointer;
}
#rightPanel {
  height: 100%;
}
.vcCright,
.vcCright2 {
  width: 260px;
}
.vcCright {
  border-radius: 0px;
  overflow: hidden;
  padding: 0;
  display: table-cell;
  vertical-align: top;
  max-width: 100% !important;
}
.vcCright2 {
  position: absolute;
  top: 51px;
  right: 0;
  top: 0;
  overflow: hidden;
  z-index: 201;
  padding-bottom: 0px;
  display: none;
  max-width: 100% !important;
}
.largePanel {
  width: 400px;
}
#chatRightContent {
  width: 100%;
}
#chatRightTop {
  width: 100%;
  height: 43px;
  display: table;
  table-layout: fixed;
}
#chatRightData {
  overflow: hidden;
  overflow-y: auto;
  position: relative;
  width: 100%;
  border: 1px solid #ffffff47;
  border-top: none;
  border-bottom: none;
}
#wrapRightData {
  position: relative;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: 5px 5px 0 5px;
}
#rightPanelShell {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  background: linear-gradient(
    0deg,
    #403e5bcc 0%,
    #413f5ccc 50%,
    #413f5ccc 100%
  );
}
#privateCallBarWrap {
  display: block;
  flex: 0 0 auto;
  padding: 5px 0 6px 0;
}
#privateCallRequestBarWrap {
  display: block;
  flex: 0 0 auto;
  padding: 5px 0 5px 0;
}
#privateCallRequestBarWrap.hidden {
  display: none;
}
#privateCallRequestBarWrap .privateCallRequestStack {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
#privateCallRequestBarWrap .privateCallRequestPanel {
  margin: 0 6px;
  padding: 8px 8px;
  height: auto;
  min-height: 44px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: linear-gradient(180deg, rgba(64, 62, 91, 0.92) 0%, rgba(50, 48, 74, 0.96) 100%);
}
#privateCallRequestBarWrap .privateCallRequestRow {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 30px 30px;
  align-items: center;
  gap: 8px;
  min-height: 36px;
}
#privateCallRequestBarWrap .privateCallRequestRow .ulistAvatar,
#privateCallRequestBarWrap .privateCallRequestRow .ulistOption {
  display: flex !important;
  align-items: center;
  justify-content: center;
  align-self: center;
  height: 36px;
  min-height: 36px;
  padding: 0;
  vertical-align: middle;
}
#privateCallRequestBarWrap .privateCallRequestRow .ulistAvatar {
  width: 36px;
  min-width: 36px;
}
#privateCallRequestBarWrap .privateCallRequestRow .ulistOption {
  width: 30px;
  min-width: 30px;
}
#privateCallRequestBarWrap .privateCallRequestRow .ulistAvatar img {
  display: block;
  width: 32px;
  height: 32px;
  margin: 0 auto;
}
#privateCallRequestBarWrap .privateCallRequestRow .ulistOption i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
#privateCallRequestBarWrap .privateCallRequestName {
  min-width: 0;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  line-height: 1.2;
  min-height: 36px;
  height: 36px;
}
#privateCallRequestBarWrap .privateCallRequestName:hover {
  text-decoration: underline;
}
#privateCallBarWrap.hidden {
  display: none;
}
#privateCallBarWrap .privateCallCard {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 24px 34px;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  margin: 0 6px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: linear-gradient(180deg, rgba(64, 62, 91, 0.92) 0%, rgba(50, 48, 74, 0.96) 100%);
}
#privateCallBarWrap .privateCallCardAvatar {
  display: flex;
  align-items: center;
}
#privateCallBarWrap .privateCallCardAvatar img {
  width: 36px;
  height: 36px;
  border-radius: 4px;
  object-fit: cover;
  display: block;
}
#privateCallBarWrap .privateCallCardInfo {
  min-width: 0;
}
#privateCallBarWrap .privateCallCardName {
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}
#privateCallBarWrap .privateCallCardName:hover {
  text-decoration: underline;
}
#privateCallBarWrap .privateCallCardStatus {
  font-size: 11px;
  margin-top: 2px;
  font-weight: 700;
}
#privateCallBarWrap .privateCallStatusWaiting {
  color: #ff6b6b;
}
#privateCallBarWrap .privateCallStatusLive {
  color: #86e08d;
}
#privateCallBarWrap .privateCallEndButton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 50%;
  background: linear-gradient(180deg, #ff6a6a 0%, #d91d2f 100%);
  color: #fff;
  font-size: 13px;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 0 6px rgba(201,28,43,0.45);
}
#privateCallBarWrap .privateCallMuteButton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  color: #fff;
  font-size: 14px;
  cursor: pointer;
  box-shadow: none;
}
#privateCallBarWrap .privateCallMuteButton i {
  display: block;
  line-height: 1;
}
#privateCallBarWrap .privateCallEndButton i {
  display: block;
  line-height: 1;
  transform: translateY(1px) rotate(135deg);
}
.privateCallRequestItem {
  margin: 4px 0;
}
#notifyPrivateCall {
  position: absolute;
  top: -7px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
}
.bnotifyPrivateCall {
  background: #3fb96f !important;
  border-color: #9bf0ba !important;
  color: #fff !important;
}
.bnotifyPrivateCall::before {
  border-top-color: #9bf0ba !important;
}
.bnotifyPrivateCall::after {
  border-top-color: #3fb96f !important;
}
.vcCright2 #wrapRightData {
  padding-bottom: 5px;
}
#rightPanelBarBottom {
  position: relative;
  flex: 0 0 auto;
  width: 100%;
}
#rightPanelBar .rightPanelBarTabsCell {
  display: table-cell;
  width: 100%;
  vertical-align: middle;
  overflow: hidden;
}
#rightPanelBar .rightPanelBarClose {
  width: 40px;
  padding: 0;
}
#rightPanelBar .rightPanelBarClose i {
  margin: 0 auto;
}
#rightPanelBar .rightPanelBarInner,
#rightPanelBarBottom .rightPanelBarInner {
  display: table;
  table-layout: fixed;
  height: 100%;
  width: 100%;
  margin: 0;
}
#rightPanelBar .rightPanelBarInner {
  table-layout: auto;
  float: right;
  width: auto;
  max-width: 100%;
  overflow: hidden;
}
#rightPanelBar .panelOption,
#rightPanelBarBottom .panelOption {
  position: relative;
  display: table-cell;
  vertical-align: middle;
  width: 50%;
  height: 100%;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  overflow: hidden;
}
#rightPanelBar .panelOption {
  width: auto;
  text-align: center;
  max-width: calc(100% / 3);
}
#rightPanelBar .panelOption .panelOptionText,
#rightPanelBarBottom .panelOption .panelOptionText {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
#rightPanelBarBottom .panelOption .panelOptionText {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
#rightPanelBarBottom .panelOption .panelOptionLabel {
  display: block;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
#rightPanelBarBottom .panelOptionNotify {
  flex: 0 0 auto;
  min-width: 16px;
  height: 16px;
  line-height: 14px;
  padding: 0 4px;
  border-radius: 50px;
  font-size: 11px;
  text-align: center;
  display: none;
}
#friendRequestsOptionBottom {
  overflow: visible !important;
}
#friendRequestsOptionBottom .panelOptionText {
  overflow: visible;
}
#friendRequestsOptionBottom .panelOptionNotify {
  position: absolute;
  left: 50%;
  top: -5px;
  transform: translateX(-50%);
  z-index: 3;
}
#rightPanelBar .panelOption .panelOptionText {
  width: 100%;
  box-sizing: border-box;
  padding: 0 12px;
}
#rightPanelBar .panelOption + .panelOption::before,
#rightPanelBarBottom .panelOption + .panelOption::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: linear-gradient(
    0deg,
    rgba(255, 255, 255, 0) 0%,
    #ffffff47 50%,
    rgba(255, 255, 255, 0) 100%
  );
}

/* bottom menu css */
.chatFooterItem {
  width: 45px;
  height: 100%;
  text-align: center;
  cursor: pointer;
  display: table-cell;
  max-width: 16.66666666%;
  vertical-align: middle;
  position: relative;
}
.vcPrivhide {
  display: none !important;
}
.iBtm {
  font-size: 20px;
}

/* notification icons */
.vcNotification {
  position: absolute;
  left: 50%;
  top: -5px;
  transform: translateX(-50%);
  min-width: 16px;
  height: 16px;
  line-height: 14px;
  padding: 0 4px;
  border-radius: 50px;
  font-size: 11px;
  font-weight: bold;
  text-align: center;
  z-index: 3;
  display: none;
}
.headNotify {
  position: absolute;
  left: 50%;
  top: -5px;
  transform: translateX(-50%);
  min-width: 16px;
  height: 16px;
  line-height: 14px;
  padding: 0 4px;
  border-radius: 50px;
  font-size: 11px;
  font-weight: bold;
  text-align: center;
  z-index: 3;
  display: none;
}
.menuNotify {
  position: absolute;
  left: 50%;
  top: -5px;
  transform: translateX(-50%);
  min-width: 16px;
  height: 16px;
  line-height: 14px;
  padding: 0 4px;
  border-radius: 50px;
  font-size: 11px;
  font-weight: bold;
  text-align: center;
  display: none;
}
.notifLeft {
  min-width: 16px;
  height: 16px;
  line-height: 14px;
  padding: 0 4px;
  border-radius: 50px;
  font-size: 11px;
  font-weight: bold;
  text-align: center;
  display: none;
}
.pmNotify {
  min-width: 16px;
  height: 16px;
  line-height: 14px;
  padding: 0 4px;
  border-radius: 50px;
  font-size: 11px;
  font-weight: bold;
  text-align: center;
}
.vcNotification::before,
.headNotify::before,
.menuNotify::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -5px;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid #fff;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.35));
}
.vcNotification::after,
.headNotify::after,
.menuNotify::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -4px;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid #e63737;
}

/* notification item */
.notifyItem {
  display: table;
  table-layout: fixed;
  width: 100%;
  padding: 10px 12px;
  cursor: pointer;
  margin-bottom: 5px;
  box-sizing: border-box;
}
.notifyDetails {
  display: table-cell;
  vertical-align: middle;
  padding: 0 8px;
}
.adminCommandsPage {
  width: 100%;
  box-sizing: border-box;
}
.adminCommandGroup {
  margin-bottom: 14px;
}
.adminCommandGroupTitle {
  padding: 8px 10px;
  font-weight: bold;
  border-radius: 4px 4px 0 0;
}
.adminCommandList {
  display: block;
}
.adminCommandItem {
  display: block;
  padding: 9px 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.adminCommandName {
  display: block;
  font-family: monospace;
  font-size: 13px;
  font-weight: bold;
}
.adminCommandDesc {
  display: block;
  padding-top: 3px;
  line-height: 1.4;
}
.adminPrivateHistoryPage,
.adminPrivateResults {
  width: 100%;
  box-sizing: border-box;
}
.adminPrivateParticipants {
  display: flex;
  align-items: flex-end;
  gap: 10px;
}
.adminPrivateUserOneWrap,
.adminPrivateUserTwoWrap {
  flex: 1 1 0;
  min-width: 0;
  position: relative;
}
.adminPrivateParticipants .adminPrivateUserOneWrap {
  flex: 1 1 100%;
}
.adminPrivateFilters .settingElement {
  margin-bottom: 12px;
}
.vcAdminprivate_conversation,
.vcAdminprivate_message_row {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 9px 10px;
}
.vcAdminprivate_conversation + .vcAdminprivate_conversation,
.vcAdminprivate_message_row + .vcAdminprivate_message_row {
  margin-top: 8px;
}
.adminPrivateConversationUsers,
.adminPrivateConversationMeta,
.adminPrivateConversationActions,
.adminPrivateMessageMeta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.adminPrivateConversationMeta {
  margin-top: 0;
  font-size: 11px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin-left: auto;
  flex: 0 0 64px;
  width: 64px;
  white-space: nowrap;
}
.adminPrivateDateLabel {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.1;
}
.adminPrivateDateLabel span + span {
  margin-top: 2px;
}
.adminPrivateCountBubble {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: bold;
  line-height: 1;
}
.adminPrivatePreview {
  margin-top: 6px;
  margin-bottom: 6px;
  font-size: 13px;
  line-height: 1.45;
  min-width: 0;
}
.adminPrivatePreview .chatImage {
  max-width: 100%;
  max-height: 130px;
}
.adminPrivatePreview .chatVideoContainer,
.adminPrivatePreview .containerUpFile,
.adminPrivatePreview .containerSubPlayer,
.adminPrivateMessageBody .chatVideoContainer,
.adminPrivateMessageBody .containerUpFile,
.adminPrivateMessageBody .containerSubPlayer {
  display: inline-block;
  max-width: 100%;
  vertical-align: middle;
}
.adminPrivatePreview .chatVideoContainer,
.adminPrivateMessageBody .chatVideoContainer {
  width: 260px;
}
.adminPrivatePreview .containerUpFile,
.adminPrivateMessageBody .containerUpFile {
  max-width: 300px;
}
.adminPrivatePreview .containerSubPlayer,
.adminPrivateMessageBody .containerSubPlayer {
  max-width: 300px;
}
.vcAdminprivate_conversation {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 64px;
  grid-template-areas:
    "users meta"
    "preview meta"
    "actions meta";
  column-gap: 10px;
  row-gap: 6px;
  align-items: start;
}
.adminPrivateConversationUsers {
  grid-area: users;
  min-width: 0;
}
.adminPrivatePreview {
  grid-area: preview;
}
.adminPrivateConversationActions {
  grid-area: actions;
}
.adminPrivateConversationMeta {
  grid-area: meta;
}
.adminPrivateUserBtn {
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-weight: bold;
}
.adminPrivatePairSep {
  opacity: 0.88;
  font-weight: bold;
}
.adminPrivateMessageMeta {
  justify-content: space-between;
  font-size: 12px;
}
.adminPrivateTitleUsers {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.adminPrivateTitleUser {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.adminPrivateTitleUser img,
.adminPrivateMessageAvatar {
  width: 26px;
  height: 26px;
  border-radius: 4px;
  object-fit: cover;
  flex: 0 0 auto;
}
.adminPrivateTime {
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  width: 64px;
  min-width: 64px;
}
.vcAdminprivate_message_row {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) 64px;
  column-gap: 8px;
  align-items: center;
}
.adminPrivateMessageUser {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  min-width: 0;
}
.adminPrivateMessageSep {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  opacity: 0.86;
  line-height: 1;
  align-self: center;
}
.adminPrivateMessageBody {
  margin-top: 0;
  font-size: 14px;
  line-height: 1.45;
  word-wrap: break-word;
  min-width: 0;
}
.adminPrivateMessageBody .containerUpFile,
.adminPrivateMessageBody .containerSubPlayer {
  margin-top: 0;
}
.adminPrivateMessageBody > * {
  max-width: 100%;
}
.adminPrivateMessageBody .chatImage {
  max-width: 100%;
  height: auto;
}
.adminPrivateModalContent {
  width: 100%;
  box-sizing: border-box;
  padding: 4px 0 0 0;
}
.adminPrivateModalSearch {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 2px 10px 2px;
}
.adminPrivateModalSearch .fullInput {
  flex: 1 1 auto;
}
.adminPrivateSuggestBox {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 40;
  margin-top: 4px;
  max-height: 220px;
  overflow-y: auto;
  border-radius: 4px;
}
.vcAdminprivate_suggest_item,
.adminPrivateSuggestEmpty {
  padding: 8px 10px;
  font-size: 13px;
  line-height: 1.3;
  cursor: pointer;
}
.adminPrivateSuggestEmpty {
  cursor: default;
}
.adminPrivateResults {
  padding-bottom: 4px;
}
.adminPrivateMessages {
  display: flex;
  flex-direction: column;
}
.adminPrivateResults .vcAdminprivate_conversation:last-child,
.adminPrivateResults .vcAdminprivate_message_row:last-child {
  margin-bottom: 0;
}
.adminPrivateModalContent .adminPrivateResults {
  padding: 0 2px 2px 2px;
}
.adminPrivateModalContent .vcAdminprivate_message_row {
  margin-top: 0;
  margin-bottom: 6px;
  padding: 8px 9px;
}
.adminPrivateModalContent .adminPrivateResults.adminPrivateMessages {
  padding: 0 2px 2px 2px;
}
.adminPrivateModalContent .vcAdminprivate_message_row:last-child {
  margin-bottom: 0;
}
.adminPrivateModalContent .adminPrivateConversationUsers {
  justify-content: center;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .adminPrivateParticipants,
  .adminPrivateModalSearch {
    flex-wrap: wrap;
  }
  .adminPrivateUserOneWrap,
  .adminPrivateUserTwoWrap {
    flex: 1 1 100%;
  }
  .vcAdminprivate_conversation {
    grid-template-columns: minmax(0, 1fr) 58px;
  }
  .adminPrivateConversationMeta,
  .adminPrivateTime {
    width: 58px;
    min-width: 58px;
    flex-basis: 58px;
  }
  .vcAdminprivate_message_row {
    grid-template-columns: auto 16px minmax(0, 1fr) 58px;
    align-items: center;
  }
  .adminPrivateMessageSep {
    font-size: 13px;
  }
}
.notifyStatus {
  display: table-cell;
  width: 16px;
  font-size: 13px;
  vertical-align: middle;
  text-align: center;
}
.notifyAvatar {
  display: table-cell;
  vertical-align: middle;
  width: 40px;
}
.notifyAvatar img {
  width: 36px;
  height: 36px;
  border-radius: 0;
  display: block;
  cursor: pointer;
}
.notifyItem .notifyText,
.notifyItem .dateNotify,
.notifyItem .subText,
.notifyItem .vcHnotify {
  margin: 0;
}
.notifyItem .notifyText {
  padding-top: 2px;
  line-height: 1.25;
}
.notifyItem .dateNotify {
  padding-top: 4px;
}
.dateNotify {
  margin-top: 2px;
}
#notifyList {
  overflow: hidden;
  padding: 0px;
}
#notifyContent {
  max-height: 364px;
  overflow: hidden;
  overflow-y: auto;
}
.notifyReaction {
  width: 16px;
  height: 16px;
  vertical-align: bottom;
  margin-bottom: -2px;
}

/* spinner box css */
.vcLargeSpinner {
  width: 42px;
  height: 42px;
  position: absolute;
  display: block;
  top: 50%;
  left: 50%;
  margin-left: -21px;
  margin-top: -21px;
}
.vistaSpinner {
  position: relative;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
  background: radial-gradient(50% 50% at 50% 50%, #005a63 60%, #29525a 90%);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Cdefs%3E%3Cmask id='a'%3E%3Crect width='1' height='1' fill='white'/%3E%3Ccircle cx='50%25' cy='50%25' r='30%25' fill='black' /%3E%3C/mask%3E%3C/defs%3E%3Crect width='1' height='1' mask='url(%23a)'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Cdefs%3E%3Cmask id='a'%3E%3Crect width='1' height='1' fill='white'/%3E%3Ccircle cx='50%25' cy='50%25' r='30%25' fill='black' /%3E%3C/mask%3E%3C/defs%3E%3Crect width='1' height='1' mask='url(%23a)'/%3E%3C/svg%3E");
}
.vistaSpinnerShell {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.45));
}
.vistaSpinnerGlowGroup,
.vistaSpinnerStarDust,
.vistaSpinnerNoise,
.vistaSpinnerRadarReveal {
  position: absolute;
  inset: 0;
}
.boomSpinnerGlow {
  position: absolute;
  top: 0;
  left: 50%;
  right: 50%;
  bottom: 0;
  animation: vcBoomSpinnerRotate 1s linear infinite;
  filter: blur(1.1px);
}
.boomSpinnerGlow::after {
  content: "";
  position: absolute;
  display: block;
  width: 8px;
  height: 4px;
  top: 2px;
  left: -4px;
  border-radius: 999px;
  background: #fff;
}
.boomSpinnerTrain {
  width: 100%;
  height: 100%;
  transform: rotate(-45deg);
}
.boomSpinnerTrain::after {
  content: "";
  position: absolute;
  left: -16px;
  top: 0;
  width: 32px;
  height: 16px;
  border-radius: 50%;
  background: radial-gradient(40% 90% at 60% 40%, #2bf1ef 0%, rgba(43, 241, 239, 0) 100%),
    radial-gradient(63.65% 77.14% at 50% 20%, rgba(5, 188, 106, 0.8) 0%, rgba(5, 188, 106, 0) 100%);
  mix-blend-mode: soft-light;
}
.vistaSpinnerStarDust {
  filter: contrast(180%) brightness(1500%) blur(0.3px) saturate(0) invert(1);
  animation: vcBoomSpinnerRotate 1s linear infinite;
  mix-blend-mode: color-dodge;
}
.vistaSpinnerNoise {
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
    url("data:image/svg+xml,%3Csvg viewBox='0 0 21 21' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.04' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  animation: vcBoomSpinnerStarTrail 1.6s linear infinite;
}
.vistaSpinnerRadarReveal {
  background: conic-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0));
}
.vistaSpinnerTopGlow {
  position: absolute;
  width: 34px;
  height: 20px;
  left: -1px;
  top: -3px;
  background: radial-gradient(50% 50% at 50% 50%, rgba(127, 188, 218, 0.64) 50%, rgba(178, 230, 255, 0) 100%);
  border-radius: 50%;
}
.vistaSpinnerBottomGlow {
  position: absolute;
  width: 29px;
  height: 18px;
  left: 2px;
  bottom: -4px;
  background: radial-gradient(50% 50% at 50% 50%, #21bda5 31.25%, rgba(43, 189, 162, 0) 100%);
  border-radius: 50%;
  mix-blend-mode: hard-light;
  filter: blur(1px);
}
.vistaSpinnerSpec {
  position: absolute;
  width: 32px;
  height: 15px;
  background-size: 32px 32px;
}
.vistaSpinnerSpecTop {
  left: 0;
  top: 0;
  background-image: radial-gradient(50% 50% at 50% 50%, rgba(255, 255, 255, 0) 67%, rgba(255, 255, 255, 0.1) 68%, rgba(255, 255, 255, 0.8) 80%, rgba(255, 255, 255, 0.9) 88%, rgba(255, 255, 255, 0) 93%);
  -webkit-mask-image: radial-gradient(ellipse at top, #fff 0%, rgba(255, 255, 255, 0) 85%);
  mask-image: radial-gradient(ellipse at top, #fff 0%, rgba(255, 255, 255, 0) 85%);
}
.vistaSpinnerSpecBottom {
  left: 0;
  bottom: 0;
  background-image: radial-gradient(50% 50% at 50% 50%, rgba(255, 255, 255, 0) 67%, rgba(255, 255, 255, 0.6) 77%, rgba(255, 255, 255, 0.6) 78%, rgba(255, 255, 255, 0) 88%);
  background-position: bottom;
  -webkit-mask-image: radial-gradient(ellipse at bottom, #fff 0%, rgba(255, 255, 255, 0) 90%);
  mask-image: radial-gradient(ellipse at bottom, #fff 0%, rgba(255, 255, 255, 0) 90%);
}

@keyframes vcBoomSpinnerStarTrail {
  0% {
    transform: rotate(10deg);
  }
  100% {
    transform: rotate(-710deg);
  }
}

/* page css */
#pageContent {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  height: auto;
  padding: 20px 0px;
}

/* room option css */
.roomOptions {
  width: 100%;
  padding: 0 5px 15px 5px;
}
.roomElement {
  display: table;
  padding: 20px 15px;
  border-radius: 3px;
  margin: 5px;
  table-layout: fixed;
  width: calc(33% - 10px);
  float: left;
  cursor: pointer;
  position: relative;
}
.vcRoomName {
  font-size: 18px;
  font-weight: bold;
  padding: 5px 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.vcRoomDescription {
  height: 45px;
  max-height: 60px;
  overflow: hidden;
  font-size: 12px;
  margin-bottom: 10px;
}
.vcRoomIcon {
  display: table-cell;
  width: 50px;
  vertical-align: top;
  position: relative;
}
.roomImg {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: block;
}
.vcRoomLock {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  position: absolute;
  top: 30px;
  right: 0;
}

.inRoomElement {
  display: table;
  table-layout: auto;
  width: 100%;
  padding: 3px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
}
.inRoomName {
  display: table-cell;
  vertical-align: middle;
  padding: 0 5px;
}
.inRoomCount {
  display: table-cell;
  vertical-align: middle;
  width: 1%;
  white-space: nowrap;
  text-align: right;
  padding-right: 6px;
}
.inRoomIcon {
  display: table-cell;
  width: 26px;
  vertical-align: middle;
  position: relative;
}
.inRoomImg {
  width: 24px;
  height: 24px;
  border-radius: 0;
  display: block;
}
.inRoomLock {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  position: absolute;
  bottom: -2px;
  right: 0;
}
.inRoomPinned,
.roomBoxPinned,
.adminRoomPinned {
  color: #c59d3d;
}
.inRoomPinned {
  font-size: 13px;
  line-height: 13px;
  display: inline-block;
  vertical-align: middle;
}
.roomPinWrap {
  position: absolute;
  top: 10px;
  right: 12px;
  font-size: 16px;
  line-height: 16px;
}
.adminRoomPinned {
  font-size: 14px;
  line-height: 14px;
}
.settingCheckboxLabel {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

/* Consistent classic checkbox treatment across the chat and admin panels. */
input[type="checkbox"]:not(.couponAdminStatus input) {
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  position: relative;
  width: 17px;
  height: 17px;
  min-width: 17px;
  margin: 0 4px 0 0;
  vertical-align: middle;
  border: 1px solid #687482;
  border-top-color: #4d5864;
  border-left-color: #4d5864;
  border-right-color: #d8dee5;
  border-bottom-color: #d8dee5;
  border-radius: 2px;
  background: linear-gradient(180deg, #f9fbfd 0%, #d9e0e7 100%);
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.85), inset -1px -1px 0 rgba(80, 91, 103, 0.18);
  cursor: pointer;
}
input[type="checkbox"]:not(.couponAdminStatus input):hover {
  border-top-color: #526574;
  border-left-color: #526574;
  border-right-color: #cad9e3;
  border-bottom-color: #cad9e3;
  background: linear-gradient(180deg, #f7fafc 0%, #d9e1e8 100%);
  box-shadow: inset 1px 1px 1px rgba(42, 62, 78, 0.2), inset -1px -1px 0 rgba(255, 255, 255, 0.86), inset 0 0 3px rgba(62, 151, 211, 0.22);
}
input[type="checkbox"]:not(.couponAdminStatus input):focus-visible {
  outline: 1px dotted #fff;
  outline-offset: 2px;
}
input[type="checkbox"]:not(.couponAdminStatus input):checked::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 4px;
  height: 9px;
  border: solid #174d78;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
input[type="checkbox"]:not(.couponAdminStatus input):disabled {
  opacity: 0.48;
  cursor: default;
  filter: grayscale(0.45);
}

/* player css */
.chatPlayer {
  display: table;
  table-layout: auto;
  padding-left: 2px;
}
.musicPlayer {
  display: table;
  table-layout: fixed;
  height: 100%;
  width: 100%;
}
.playerMenu {
  display: table-cell;
  width: 40px;
  font-size: 18px;
  text-align: center;
  vertical-align: middle;
  position: relative;
}
.playerButton {
  display: inline-block;
  width: 36px;
  font-size: 30px;
  text-align: center;
  vertical-align: middle;
}
.playerStateIcon {
  display: block;
  width: 30px;
  height: 30px;
  object-fit: contain;
  margin: 0 auto;
}
#playerActualStatus,
.currentPlayBtn {
  cursor: pointer;
}
.currentPlayBtn,
.subPlayIcon,
.chatPlayIcon,
.avMediaPreviewIcon {
  cursor: pointer;
  transition: transform 0.3s, filter 0.3s;
}
.currentPlayBtn {
  transition: transform 0.2s, filter 0.2s;
}
.currentPlayBtn:hover,
.subPlayIcon:hover,
.chatPlayIcon:hover,
.avMediaPreviewIcon:hover {
  transform: scale(1.03);
  filter: brightness(1.2) drop-shadow(0 0 2px rgb(255 255 255 / 90%))
    drop-shadow(0 0 2px rgb(255 255 255 / 80%));
}
.playerSound {
  display: table-cell;
  width: 40px;
  font-size: 20px;
  text-align: center;
  vertical-align: middle;
}
.playerCurrent {
  display: table-cell;
  vertical-align: middle;
  padding: 0 5px;
  width: 100px;
  max-width: 100px;
  line-height: 1em !important;
}
.radioStationTrigger {
  cursor: pointer;
}
.playerOptions {
  width: 320px;
  max-width: 100%;
  height: auto;
  position: absolute;
  bottom: 100%;
  left: 0;
  padding: 0 15px;
}
.soundPopup {
  position: fixed;
  right: 8px;
  bottom: 54px;
  width: 260px;
  max-width: calc(100vw - 16px);
  z-index: 1006;
}
.soundPopupInner {
  border-radius: 4px;
  overflow: hidden;
  color: #111;
}
.soundPopupHead {
  display: table;
  table-layout: fixed;
  width: 100%;
  height: 26px;
  position: relative;
}
.soundPopupTitle {
  display: table-cell;
  vertical-align: middle;
  padding: 0 8px;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  text-shadow: none;
}
.soundPopupClose {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 10px;
  line-height: 1;
  padding: 0;
}
.soundPopupClose i {
  display: block;
  line-height: 1;
  margin: 0 auto;
}

/* Floating-window close buttons use the right-panel button states. */
.soundPopupClose,
.avStreamClose {
  cursor: pointer;
}
.soundPopupBody {
  padding: 5px;
  color: #111;
}
.soundPopup .switchItem {
  display: table;
  width: 100%;
  table-layout: fixed;
  padding: 5px 6px;
  margin-bottom: 2px;
  border-radius: 0;
}
.soundPopup .switchItemText {
  font-size: 11px;
  line-height: 1.2;
  color: #111;
  text-shadow: none;
}
.soundPopup .switchItemSwitch {
  width: 42px;
}
.soundPopup .switchWrap {
  width: 34px;
}
.soundPopup .vcBswitch {
  width: 34px;
  padding: 1px;
  transform: scale(0.72);
  transform-origin: right center;
  border-radius: 2px;
}
.soundPopup .listElement + .listElement {
  margin-top: 0;
}
.soundPopup .vcBball {
  width: 18px;
  height: 18px;
  border-radius: 2px;
}
.roomBgPreview {
  position: relative;
  width: 100%;
  min-height: 150px;
  border-radius: 10px;
  overflow: hidden;
  background-color: #000;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}
.roomBgPreviewInner {
  min-height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.roomBgPreview.loading .roomBgPreviewInner {
  opacity: 0.55;
}
.chatImageDropActive {
	outline: 2px dashed rgba(255, 255, 255, .95);
	outline-offset: -4px;
}
.roomBgThumb {
  display: none;
}
.roomBgPreviewText {
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.2px;
  display: none;
}
.roomBgControl {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
  min-height: 42px;
}
.roomBgBtn {
  min-width: 136px;
  font-weight: 700;
}
.roomBgControl #removeRoomBg.hidden {
  display: inline-block !important;
  visibility: hidden;
  pointer-events: none;
}
.roomBgControl #removeRoomBanner.hidden {
  display: inline-block !important;
  visibility: hidden;
  pointer-events: none;
}
.roomIconSetting {
  margin-top: 12px;
}
.roomIconEditor {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.roomIconPreview {
  position: relative;
  width: 78px;
  height: 78px;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.roomIconPreview:not(.hasRoomIcon) {
	background-color: #071126;
	background-image: linear-gradient(180deg, rgba(11, 22, 48, .96) 0%, rgba(0, 0, 0, .98) 100%);
}
.roomIconPreview.loading {
  opacity: 0.6;
}
.roomIconThumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.roomIconThumb.hidden {
  display: none;
}
.roomIconOverlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
	gap: 7px;
}
.roomIconPlus {
	width: 32px;
	height: 32px;
	border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.58);
  color: #fff;
	font-size: 21px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  user-select: none;
}
.roomIconActions {
  display: flex;
  align-items: center;
}
.roomIconActions form {
  display: none;
}
.roomIconRemoveBtn.hidden {
  display: none;
}
.roomIconRemoveBtn {
  width: 38px !important;
  min-width: 38px !important;
  height: 38px !important;
  padding: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.roomIconRemoveBtn i {
  line-height: 1;
}
#roombgImage,
#roombannerImage,
#roomiconImage,
#adminRoomlogoImage,
#adminLoginbgImage,
#adminChatbgImage,
#adminFaviconImage,
#adminFaviconNotifyImage {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.adminFaviconCard .roomIconPreview {
  width: 78px;
  height: 78px;
}
.roomDeleteBox {
  margin-top: 14px;
  padding-top: 14px;
}
.roomDeleteText,
.roomDeleteConfirmNote,
.roomDeleteConfirmName {
  text-align: center;
}
.roomDeleteConfirmName {
  margin: 8px 0;
  font-weight: 700;
}
.roomDeleteConfirmIcon {
  margin: 0 0 12px;
  color: #d32626;
  font-size: 42px;
  line-height: 1;
  text-align: center;
  text-shadow: 0 1px 0 rgba(255,255,255,0.35);
}
.soundPopup .vcOnball {
  margin-left: 2px;
}
.soundPopup .vcOffball {
  margin-left: 0;
}
.playerVolume {
  display: table;
  table-layout: fixed;
  width: 100%;
  height: 23px;
}
.playerListContainer {
  padding: 15px 0 5px 0;
}
#playerListing {
  max-height: 200px;
  overflow-y: auto;
}
#soundDisplay {
  width: 22px;
  font-size: 20px;
}
#vcSlider {
  width: 100%;
}

.ui-widget-content {
  border: none;
}
.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
  border: none;
}
.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active {
  border: none;
}
.ui-corner-all {
  border-radius: 10px;
}
.ui-slider-horizontal {
  height: 7px;
}
.ui-slider-horizontal .ui-slider-handle {
  cursor: pointer;
  width: 14px;
  height: 14px;
  top: -4px;
  margin-left: -7px;
  z-index: 3;
}
.soundDisplay {
  text-align: left;
  margin-left: 15px;
}

/* profile css */
.chooseAvatar,
.chooseCover {
  position: relative;
}
.avatarSelect {
  -webkit-appearance: none;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}
.coverSelect {
  -webkit-appearance: none;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}
.coverSize {
  height: 250px;
}
.stateProfile {
  width: 16px;
  height: 16px;
  position: absolute;
  bottom: 5px;
  right: 5px;
  z-index: 30;
  border: 2px solid #fff;
  border-radius: 50px;
}

/* sub reg menu */
.regMenuContainer {
  position: relative;
}
.regMenu {
  font-size: 0px;
}
.regMenu ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
}
.regMenu ul li {
  display: inline-block;
  padding: 8px 10px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 13px;
  font-weight: bold;
}

/* pro top details */
.vcPdetails {
  display: table;
  table-layout: fixed;
  width: 100%;
}
.pdetailsIcon {
  display: table-cell;
  vertical-align: middle;
  width: 24px;
  cursor: pointer;
}
.pdetailsText {
  display: table-cell;
  vertical-align: middle;
  overflow: hidden;
  white-space: nowrap;
}

/* profile box */
.modalTopMenu {
  display: table;
  width: 100%;
  table-layout: fixed;
  margin: 5px 0 5px 0;
  padding: 0 5px;
}
.modalTopItem {
  display: table-cell;
  width: 40px;
  height: 40px;
  vertical-align: middle;
  font-size: 20px;
  text-align: center;
  cursor: pointer;
  position: relative;
}
.modalTopMenuEmpty {
  display: table-cell;
  vertical-align: middle;
  width: 10px;
}
.coverMenu {
  display: table-cell;
  vertical-align: middle;
  width: 80px;
}
.coverItemWrap {
  display: table;
  border-radius: 50px;
  overflow: hidden;
}
.coverItem {
  width: 40px;
  height: 30px;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
.modalMenu,
.tabMenu {
  font-size: 0px;
}
.profileBackground {
  background-size: cover !important;
  background-position: 50% 50% !important;
}
.modalMenu ul li,
.tabMenu ul li {
  display: inline-block;
  padding: 10px 15px;
  cursor: pointer;
  font-size: 14px;
}
.modalMenu ul li.modalMenuItemRight,
.tabMenu ul li.modalMenuItemRight {
  margin-left: auto;
}
.hideZone {
  display: none;
}
.modalWrapTop {
  position: relative;
}
.profileTop {
  padding: 0 15px 15px 15px;
  position: relative;
  height: 100%;
}
.vcProfileAvatar {
  display: table-cell;
  width: 130px;
  vertical-align: bottom;
  position: relative;
  border-radius: 5px;
  text-align: center;
}
.avatarProfile {
  width: 130px;
  height: 130px;
  cursor: pointer;
  display: block;
  border-radius: 5px;
}
.avatarButton {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  padding: 8px 0;
  position: relative;
}
.profileTinfo {
  display: table-cell;
  vertical-align: bottom;
  padding: 0 10px;
  position: relative;
}
.proName {
  font-size: 25px;
  font-weight: bold;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
}
.proNameIcon {
  width: 18px;
  height: 18px;
  display: block;
}
.vcProRanking {
  height: 14px;
  width: auto;
}
.proMute {
  height: 15px;
  width: auto;
}
.vcProRank {
  font-size: 14px;
  margin-bottom: -3px;
  font-weight: bold;
  display: block;
}
.proMood {
  font-size: 12px;
  font-weight: bold;
}
.proCoins {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: bold;
}
.proCoins img {
  width: 14px;
  height: 14px;
  display: block;
}
.vcAddCover {
  position: relative;
}
.profileInfoBox {
  font-size: 11px;
  padding: 10px 15px;
}
.levelProfile {
  text-align: center;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 7px 0;
}
.proFlag {
  display: inline-block;
  height: 12px;
}
.vcProli {
  width: 160px;
}
.avatarControl {
  position: absolute;
  display: table;
  table-layout: fixed;
  width: 100%;
  z-index: 40;
  width: 80px;
  left: 27px;
  border-radius: 50px;
  bottom: 10px;
}
.avatarSpin {
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  z-index: 30;
}

/* upload box css */
.upInput {
  -webkit-appearance: none;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  padding: 0px !important;
  overflow: hidden;
}

/* report box */
.reportItem {
  display: table;
  table-layout: fixed;
  width: 100%;
  margin-bottom: 5px;
  padding: 9px 10px;
  box-sizing: border-box;
}
.reportCheck {
  display: table-cell;
  width: 30px;
  text-align: center;
  vertical-align: middle;
  font-size: 20px;
}
.reportText {
  display: table-cell;
  vertical-align: middle;
  padding: 0 8px;
  line-height: 1.25;
}

/* report report css */
.headReport {
  display: table;
  table-layout: fixed;
  width: 100%;
  box-sizing: border-box;
  padding: 10px;
  border-radius: 6px;
  font-size: var(--vc-message-size,23px);
  line-height: 1.2;
}
.headReport .chatAvatar {
  display: inline-block;
  vertical-align: middle;
}
.headReport .chatAvatarImage {
  vertical-align: middle;
}
.headReport .privateMessageText {
  display: inline-block;
  width: calc(100% - 42px);
  vertical-align: middle;
}
.headReport .vistaTable {
  display: table;
  table-layout: fixed;
  width: 100%;
  line-height: 1.2;
}
.headReport .vcUsername,
.headReport .chatDisplayName,
.headReport .chatAvatar,
.headReport .chatMessage,
.headReport .vcCdate {
  vertical-align: middle;
}
.headReport .chatMessage {
  display: inline;
}
.headReport .vcCdate {
  color: rgba(255, 255, 255, 0.88);
}
.reportName {
  display: table-cell;
  vertical-align: middle;
  padding: 0 5px;
}
.reportAvatar {
  display: table-cell;
  vertical-align: middle;
  width: 36px;
}
.reportAvatar img {
  width: 36px;
  height: 36px;
  border-radius: 0;
  display: block;
  cursor: pointer;
}
.reportContent {
  width: 100%;
  margin: 10px 0;
  overflow: hidden;
  overflow-y: auto;
  box-sizing: border-box;
}
.reportContent .postElement {
  padding: 0;
}
#reportControl {
  width: 100%;
  box-sizing: border-box;
}
#reportControl .reportAction {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  align-items: center;
}

/* section css */
.vcEmptyZone {
  width: 100%;
}

/* input extra */
#mainInputExtra {
  width: max-content;
  min-width: min(80px, calc(100vw - 10px));
  max-width: min(calc(100% - 10px), calc(100vw - 10px));
  box-sizing: border-box;
  overflow-x: hidden;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 100;
  padding: 0;
  display: none;
  background: rgb(24 30 41 / 58%);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-radius: 5px; /* max-width:240px; */
}
#mainInputExtra.toolbarOverflowOpen,
#privInputExtra.toolbarOverflowOpen {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  align-content: flex-start;
  contain: layout paint;
}
#mainInputExtra > .inputItem:not(#chatCleanTools),
#privInputExtra > .inputItem,
#privInputExtra > .privateToolItem {
  width: 28px;
  height: 28px;
  min-width: 28px;
  max-width: 28px;
  min-height: 28px;
  max-height: 28px;
  margin: 3px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
#mainInputExtra > .inputItem:not(#chatCleanTools) img,
#privInputExtra > .inputItem img,
#privInputExtra > .privateToolItem img {
	width: auto;
	height: auto;
	max-width: none;
	max-height: 20px;
  margin: 0 !important;
}
.toolbarCleanSplitter {
  flex: 0 0 1px !important;
  width: 1px !important;
  min-width: 1px;
  height: 30px;
  margin: 0 0 0 5px !important;
}
.mainInputToolbar > .subOptions {
  width: 21px;
  height: 100%;
  margin: 0;
  padding: 0;
  flex: 0 0 21px;
}
.mainInputToolbar > #chatCleanTools,
.mainInputToolbar > #chatCleanTools:hover {
  width: auto;
  height: 100%;
  min-height: 0;
  margin: 0 !important;
  padding: 0 0 0 5px !important;
  gap: 3px;
  transform: none !important;
  transition: none !important;
}
.subOptions {
  width: 28px;
  height: 28px;
  padding: 0;
  margin: 3px;
  float: left;
  position: relative;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.subOptions:hover {
  padding: 0;
  transform: none;
  filter: none;
}
.subOptions img {
  max-width: 20px;
  max-height: 20px;
  width: auto;
  height: auto;
}
.subOptions:hover img {
  transform: none;
  filter: brightness(1.2) drop-shadow(0 0 2px rgb(255 255 255 / 90%))
    drop-shadow(0 0 2px rgb(255 255 255 / 80%));
}
.inputExtraPlateIcon {
  margin-right: 1px;
}
.inputExtraPlateIcon img {
  max-width: 24px;
  max-height: 24px;
}
.inputExtraSoundIcon {
  margin-right: 1px;
}
.inputExtraClean {
  width: auto;
  gap: 5px;
  padding: 3px 7px;
  margin: 3px 3px 3px 1px;
  justify-content: flex-start;
  align-items: center;
  min-height: 28px;
}
.inputExtraClean:hover,
.inputExtraClean .tool-btn:hover,
.inputExtraClean img:hover {
  transform: none !important;
  filter: none !important;
}
.inputExtraClean:hover {
  padding: 3px 7px !important;
  margin: 3px 3px 3px 1px !important;
  transition: none !important;
}
#chatCleanTools,
#chatCleanTools:hover,
#chatCleanTools .tool-btn,
#chatCleanTools .tool-btn:hover,
#chatCleanTools .inputExtraTool,
#chatCleanTools .inputExtraTool:hover,
#chatCleanTools .inputExtraTool img,
#chatCleanTools .inputExtraTool img:hover {
  box-sizing: border-box;
  transform: none !important;
  transition: none !important;
  filter: none !important;
}
#chatCleanTools .tool-btn,
#chatCleanTools .tool-btn:hover {
  margin: 0 !important;
  left: auto !important;
  right: auto !important;
  position: relative;
}
.inputExtraTool {
  width: 21px;
  height: 21px;
  flex: 0 0 21px;
  box-sizing: border-box;
  transform: none !important;
}
.inputExtraTool img {
  max-width: 17px;
  max-height: 17px;
}
.inputExtraClearBtn {
  width: 21px !important;
  min-width: 21px;
  flex: 0 0 21px;
  padding: 0 !important;
}
.inputExtraLabel {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  line-height: 1;
  white-space: nowrap;
}

#mainInputExtra .tool-btn,
#mainInputExtra .tool-btn:hover,
#mainInputExtra .inputExtraTool,
#mainInputExtra .inputExtraTool:hover,
#mainInputExtra .inputExtraTool img,
#mainInputExtra .inputExtraTool img:hover {
  box-sizing: border-box;
  transform: none !important;
}

/* private input extra */
#privInputExtra {
  width: max-content;
  min-width: min(170px, calc(100vw - 10px));
  max-width: min(calc(100% - 10px), calc(100vw - 10px));
  box-sizing: border-box;
  overflow-x: hidden;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 100;
  padding: 0;
  display: none;
  background: rgb(24 30 41 / 58%);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-radius: 5px;
}

#mainInputExtra > .inputItem,
#privInputExtra > .inputItem,
#privInputExtra > .privateToolItem {
  flex: 0 0 auto;
}
#privInputExtra > .privateToolItem {
  width: 28px;
  height: 28px;
  margin: 3px;
}
.psubOptions {
  width: 40px;
  height: 40px;
  padding: 5px;
  margin: 3px;
  float: left;
  position: relative;
  cursor: pointer;
}
.psubOptions:hover {
  padding: 0px;
  transition: all 0.3s;
}
.psubOptions img {
  width: 100%;
  height: auto;
}

/* emoticon panels */
#mainEmoticon {
  width: 456px;
  max-width: 100%;
  height: 222px;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 100;
  display: none;
}
#privateEmoticon {
  width: 100%;
  height: 200px;
  position: absolute;
  bottom: 100%;
  left: 0;
  z-index: 100;
  display: none;
}
.emoHead {
  width: 100%;
  height: 40px;
  display: table;
  table-layout: fixed;
}
.emoContent {
  width: 100%;
  height: 180px;
  overflow: hidden;
  overflow-y: auto;
  padding: 5px;
}
.sticker {
  height: 48px;
  float: left;
  margin: 6px;
}
.emoticon {
  height: 20px;
  float: left;
  margin: 5px;
}
.vcFbemo {
  float: left;
  margin: 5px;
}
.vcFood {
  height: 24px;
  float: left;
  margin: 5px;
}
.customEmo {
  max-width: 48px;
  max-height: 48px;
  float: left;
  margin: 6px;
}
.emoContent .emoticon img {
  height: 100%;
  width: auto;
}
.emoContent .vcFbemo img {
  height: 100%;
  width: auto;
}
.emoContent .vcFood img {
  height: 100%;
  width: auto;
}
.emoContent .sticker img {
  height: 100%;
}
.emoContent .customEmo img {
  max-width: 48px;
  max-height: 48px;
}
.emoMenu {
  width: 40px;
  height: 100%;
  cursor: pointer;
  text-align: center;
  font-size: 18px;
  display: table-cell;
  vertical-align: middle;
}
.vcEmoSelect {
  height: 40px;
  width: 40px;
  display: block;
}
.emptyEmo {
  display: table-cell;
  height: 40px;
  cursor: pointer;
  vertical-align: middle;
}
.emptyEmo .emoMenu {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  vertical-align: initial;
}
.emoContentPriv {
  width: 100%;
  height: 160px;
  overflow: hidden;
  overflow-y: auto;
  padding: 5px;
}
.emoContentPriv .emoticon img {
  height: 100%;
  width: auto;
}
.emoContentPriv .vcFbemo img {
  height: 100%;
  width: auto;
}
.emoContentPriv .vcFood img {
  height: 100%;
  width: auto;
}
.emoContentPriv .sticker img {
  height: 100%;
}
.emoContentPriv .customEmo img {
  max-width: 48px;
  max-height: 48px;
}
.emoticon,
.sticker,
.customEmo {
  cursor: pointer;
}
.emoResult {
  min-height: 240px;
  max-height: 400px;
}
.emoHead [data-emo-page="2"] {
  display: none;
}

/* admin section css */
.savedData {
  position: fixed;
  display: none;
  z-index: 1002;
  top: 12%;
  left: 50%;
  transform: translate(
    -50%,
    -50%
  ); /* border-top-left-radius: 7px; */ /* border-top-right-radius: 7px; */
  height: 138px; /* do not repeat image */
  background: #f3fafc url(/images/icons/error.png);
  background-repeat: no-repeat; /* do not repeat image */
  background-position: 19px 47%; /* set the height to 100px and auto for width */
  max-width: 95%; /* border: 1px solid #444444; */
  box-shadow: 5px 5px 20px #00000073;
}
.savedSpan {
	color: #000;
  padding-right: 15px;
  position: absolute;
  top: 45%;
  transform: translateY(-50%);
  left: 64px;
  text-align: left;
  max-width: 235px;
}
.roomRadioListenerIcon {
	display: none;
	margin: 0 5px 0 2px;
	color: #34c96b;
	text-shadow: 0 1px 2px rgba(0, 0, 0, .75);
}
.vcUserItem.radioListener .roomRadioListenerIcon { display: inline-block; }
.savedCoinReward {
  display: inline-block;
  margin: 0 2px;
  font-size: 1.14em;
  font-weight: 800;
  line-height: 1;
}
.savedStatusIcon {
  position:absolute;
  z-index:2;
  left:19px;
  top:42%;
  width:32px;
  height:32px;
  transform:translateY(-50%);
  object-fit:contain;
  pointer-events:none;
}

.exAdmin {
  padding: 5px 0 0 0;
  font-style: italic;
  font-size: 13px;
}
.adminSearch {
  display: table;
  width: 100%;
  overflow: hidden;
  border-radius: 3px;
}
.adminSearchBtn {
  display: table-cell;
  width: 50px;
  text-align: center;
  cursor: pointer;
}
.editVerify {
  margin-top: 8px;
}

/* other element */
.spBox {
  width: calc(50% - 10px);
  display: block;
  float: left;
  margin: 5px;
  overflow: hidden;
}
.spContent {
  width: 100%;
  display: table;
  table-layout: fixed;
}
.spIcon {
  width: 70px;
  font-size: 30px;
  text-align: center;
  padding: 20px 0;
}
.spInfo {
  padding: 0 10px;
}
.spTitle {
  font-weight: bold;
}

/* sub mobile menu and subpage */
#openSubMobile {
  display: none;
  width: 36px;
  vertical-align: middle;
  text-align: center;
  font-size: 24px;
}
#closeSubMob {
  height: 100%;
  display: table;
  width: 100%;
  cursor: pointer;
}
#closeSub {
  display: table-cell;
  vertical-align: middle;
  text-align: right;
  padding: 0 10px;
  font-size: 22px;
}

/* private modal box */
.pData {
  display: table;
  table-layout: fixed;
  width: 100%;
  height: auto;
}
.pItem {
  display: table-cell;
  vertical-align: middle;
  width: 24px;
  font-size: 20px;
}
.pEmpty {
  display: table-cell;
}
.getInfo {
  cursor: pointer;
}

/* modal css */
.smallModalOut,
.largeModalOut {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0, 0, 0);
  cursor: pointer;
}
.overModalOut,
.overEmodalOut,
.avRequestModalOut {
  display: none;
  position: fixed;
  z-index: 1001;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0, 0, 0);
  cursor: pointer;
}
.avRequestModalOut {
  z-index: 1002;
}
.smallModalIn {
  border-radius: 10px 10px 5px 5px;
  margin: 5% auto;
  max-width: 400px;
  width: 98%;
  box-shadow: 5px 5px 20px #00000073;
}
.largeModalIn {
  border-radius: 10px 10px 5px 5px;
  margin: 5% auto;
  max-width: 500px;
  width: 98%;
  box-shadow: 5px 5px 20px #00000073;
}
.overModalIn {
  border-radius: 10px 10px 5px 5px;
  margin: 6% auto;
  max-width: 500px;
  width: 98%;
  box-shadow: 5px 5px 20px #00000073;
}
.overEmodalIn {
  border-radius: 10px;
  margin: 6% auto;
  max-width: 500px;
  width: 98%;
  box-shadow: 5px 5px 20px #00000073;
}
.avRequestModalIn {
  border-radius: 10px 10px 5px 5px;
  margin: 6% auto;
  max-width: 420px;
  width: 98%;
  box-shadow: 5px 5px 20px #00000073;
}
.vcModalTop {
  width: 100%;
  display: table;
  table-layout: fixed;
}
.modalTopText {
  display: table-cell;
  font-size: 15px;
  vertical-align: middle;
}
.modalTopEmpty {
  display: table-cell;
  vertical-align: middle;
  font-size: 17px;
  padding: 0 5px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.modalTopEmpty.hasModalTitle {
  font-weight: bold;
  text-shadow: 0 0 3px #000;
}
.modalTopElement {
  display: table-cell;
  width: 40px;
  height: 40px;
  text-align: center;
  vertical-align: middle;
  font-size: 20px;
}

.avatarTopMod {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  width: 40px;
  height: 50px;
  padding: 5px;
}
.avatarTopMod img {
  display: block;
  margin: 0 auto;
  width: 100%;
  border-radius: 0;
}
.avatarTopName {
  display: table-cell;
  padding: 0 5px 0 2px;
  font-size: 14px;
  vertical-align: middle;
  font-weight: bold;
}
.modalUserHead {
  padding-bottom: 10px;
  text-align: center;
}
.modalUserHead .vistaTable {
  width: auto;
  margin: 0 auto;
}
.modalUserHeadTitle {
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}
.editProfilePhotoWrap {
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-align: left;
}
.editProfilePhotoTop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.editProfilePhotoMain {
  flex: 0 0 auto;
  max-width: none;
  order: 2;
}
.editProfilePhotoWrap .vcProfileAvatar {
  display: block;
  width: 140px;
  height: 140px;
  margin: 0;
  padding: 0;
  border: 1px solid #ffffff47;
  background: transparent;
  box-sizing: border-box;
  line-height: 0;
  border-radius: 0 !important;
}
.editProfilePhotoWrap .avatarProfile {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  border-radius: 0;
  border: 0;
  display: block;
}
.editProfilePhotoWrap .avatarSpin {
  border: 0 !important;
  border-radius: 0 !important;
  overflow: hidden;
  display: block;
  width: 100%;
  height: 100%;
}
.editProfilePhotoButtons {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
  flex: 0 0 140px;
  width: 140px;
  order: 1;
}
.editProfilePhotoBtn {
  width: 140px;
  max-width: 140px;
  padding: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
  display: block;
}
.editProfileFileInput {
  display: none !important;
}
.editProfilePhotoDefaults {
  width: 100%;
  min-width: 0;
}
.editProfileDefaultsTitle {
  margin-bottom: 8px;
}
.editProfileDefaultList {
  height: 132px;
  overflow-x: auto;
  overflow-y: hidden;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  padding: 10px;
  white-space: nowrap;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  scrollbar-width: thin;
  touch-action: pan-x;
  overscroll-behavior-x: contain;
  scroll-behavior: auto;
  direction: ltr;
}
.editProfileDefaultList.dragging {
  cursor: grabbing;
}
.editProfileDefaultItem {
  position: relative;
  cursor: pointer;
  margin: 0 2px 0 0;
  border: 1px solid transparent;
  flex: 0 0 auto;
  width: 110px;
  height: 110px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
}
.editProfileDefaultItem img {
  display: block;
  width: 110px;
  height: 110px;
  object-fit: cover;
  border-radius: 0;
  -webkit-user-drag: none;
}
.assetInlineSpinner {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.assetInlineSpinner .vistaSpinnerShell {
  width: 32px;
  height: 32px;
}
.assetInlineSpinner .vistaSpinner {
  width: 32px;
  height: 32px;
}
.assetInlineSpinner .vistaSpinnerTopGlow {
  top: -3px;
  width: 18px;
  height: 10px;
}
.assetInlineSpinner .vistaSpinnerBottomGlow {
  bottom: -4px;
  width: 20px;
  height: 10px;
}
.assetInlineSpinner .vistaSpinnerSpecTop,
.assetInlineSpinner .vistaSpinnerSpecBottom {
  width: 5px;
  height: 5px;
}
.editProfileDefaultItem.avatarLoading .assetInlineSpinner {
  opacity: 1;
}
.editProfileDefaultItem.avatarLoading img {
  opacity: 0;
}
.editProfileDefaultItem.avatarLoadError::after {
  content: "!";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ff6b6b;
  font-size: 28px;
  font-weight: bold;
}
@keyframes vcAvatarDefaultSpin {
  to {
    transform: rotate(360deg);
  }
}
.activeDefaultAvatar {
  outline: 2px solid #ffd64d;
  box-shadow:
    0 0 0 1px rgba(255, 214, 77, 0.55),
    0 0 14px rgba(255, 214, 77, 0.85),
    0 0 26px rgba(255, 214, 77, 0.45);
}
.editProfilePhotoActions {
  max-width: 340px;
  margin: 0 auto;
}
.editProfileVipMark {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  vertical-align: middle;
  flex: 0 0 auto;
}
.editProfileVipMark img {
  display: block;
  width: auto;
  height: auto;
  max-width: none;
  max-height: 18px;
}
.editProfilePhotoBtn .editProfileVipMark {
  margin-left: 5px;
}
.editProfilePhotoBtn .editProfileVipMark img {
  max-height: 14px;
}
.listingHalfElement.hasRankMark {
  justify-content: space-between;
}
.listingHalfElement.listingDisabled,
.editProfilePhotoButtons.listingDisabled {
  opacity: 0.5;
}
.listingHalfElement.listingDisabled {
  cursor: default !important;
  pointer-events: none !important;
}
.listingHalfElement.listingDisabled .listingHalfMain,
.listingHalfElement.listingDisabled .editProfileVipMark {
  pointer-events: none !important;
}
.editProfilePhotoButtons.listingDisabled {
  pointer-events: none !important;
}
.listingHalfMain {
  min-width: 0;
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  overflow: hidden;
}
.listingHalfText {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.listingIconImg {
	width: 16px;
	height: 16px;
	margin-right: 7px;
	object-fit: contain;
	vertical-align: middle;
}
.djManagementLabel {
	position: relative;
}
.djOnairBtn,
.djOffairBtn {
	color: #fff !important;
	border: 1px solid rgba(255, 255, 255, 0.35) !important;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.75);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.38),
		inset 0 -12px 18px rgba(0, 0, 0, 0.22),
		0 2px 5px rgba(0, 0, 0, 0.35) !important;
}
.djOnairBtn {
	background:
		linear-gradient(to bottom, rgba(255, 255, 255, 0.42) 0%, rgba(255, 255, 255, 0.12) 42%, transparent 48%),
		linear-gradient(to bottom, #61b56f 0%, #1f7b36 52%, #0d4d20 100%) !important;
}
.djOffairBtn {
	background:
		linear-gradient(to bottom, rgba(255, 255, 255, 0.38) 0%, rgba(255, 255, 255, 0.1) 42%, transparent 48%),
		linear-gradient(to bottom, #c95d5d 0%, #962424 52%, #5e1010 100%) !important;
}
.djOnairBtn:hover,
.djOffairBtn:hover {
	filter: brightness(1.08);
}
.setDjButton {
	position: absolute;
	right: 0;
	top: -4px;
}
.djManagementState,
.djManagementRemove {
  height: 100%;
  vertical-align: middle;
  align-items: center;
  justify-content: center;
}
.djManagementState i,
.djManagementRemove i {
  display: inline-block;
  vertical-align: middle;
  line-height: 1;
}
.djManagementState.success,
.djManagementState.success i {
  color: #35b85a !important;
}
.djManagementState.error,
.djManagementState.error i,
.djManagementRemove i {
  color: #e24343 !important;
}
.adminCoinCurrentRow {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 30px;
	padding: 4px 0;
}
.adminCoinCurrentRow img {
	width: 18px;
	height: 18px;
	object-fit: contain;
}
.adminCoinCurrentValue {
	font-weight: bold;
}
.avatarCropModal .vcPad15 {
	padding: 12px;
}
.avatarCropStage {
	position: relative;
	width: 320px;
	height: 320px;
	margin: 0 auto 12px auto;
	overflow: hidden;
	background: #0f0f15;
	border-radius: 6px;
	cursor: move;
	touch-action: none;
}
.avatarCropStage img {
	position: absolute;
	left: 0;
	top: 0;
	max-width: none;
	user-select: none;
	-webkit-user-drag: none;
}
.avatarCropMask {
	position: absolute;
	inset: 0;
	pointer-events: none;
	box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), inset 0 0 0 9999px rgba(0,0,0,.18);
}
.avatarCropControls {
	margin-bottom: 12px;
}
.avatarCropActions {
	display: flex;
	gap: 8px;
	justify-content: flex-end;
}
.avatarCropActions .regButton {
	min-width: 110px;
}
@media (max-width: 768px) {
  .editProfilePhotoTop {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  .editProfilePhotoMain {
    flex: 0 0 140px;
    margin-left: auto;
  }
  .editProfilePhotoWrap .vcProfileAvatar {
    width: 140px;
    height: 140px;
  }
}
.editProfileMoodBox {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 15px;
  padding: 10px 12px;
}
.editProfileMoodMain {
  flex: 1;
  min-width: 0;
}
.editProfileMoodLabel {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.editProfileMoodText {
  white-space: normal;
  word-break: break-word;
  line-height: 1.35;
}
.editProfileMoodEdit {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex: 0 0 32px;
}
.editProfileMoodEdit.moodEditDisabled {
  cursor: default !important;
  opacity: 0.35 !important;
  pointer-events: none !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
  box-shadow: none !important;
}
.editProfileMoodEdit.moodEditDisabled:hover {
  background: rgba(255, 255, 255, 0.05) !important;
}
.vcModalContent {
}

/* console css */
.consoleReason img {
  max-height: 40px;
}
.consoleReason .chatVideoContainer {
  max-width: 200px !important;
}

/* chat audio upload */
.containerSubPlayer {
  width: 170px;
  max-width: 100%;
  margin-top: 8px;
  margin-bottom: 8px;
  box-sizing: border-box;
  border-radius: 10px;
  overflow: hidden;
  backdrop-filter: blur(12px) saturate(150%);
}
.musicShare {
  display: table;
  table-layout: fixed;
  width: 100%;
  margin-top: 0;
}
.musicPlay,
.musicPause,
.fileIconCell {
  width: 36px;
  font-size: 30px;
  text-align: center;
  padding: 5px 0;
}
.musicPlay,
.musicPause {
  padding-left: 3px;
}
.subPlayIcon {
  display: block;
  width: 32px;
  height: 32px;
  object-fit: contain;
  margin: 0 auto;
}
.songProgress {
  font-size: 11px;
  line-height: 13px;
  padding: 5px 10px 5px 10px;
  vertical-align: middle;
  min-width: 0;
}
.musicDownload {
  width: 40px;
  text-align: center;
}
.uploadedMusic {
  color: inherit;
  font-size: 18px;
  padding: 5px;
  text-decoration: none !important;
}
.audioProgress {
  width: 100%;
  margin: 0;
  position: relative;
  top: 1px;
  cursor: pointer;
  touch-action: none;
}
.audioProgressWrap {
  width: 100%;
  padding-left: 2px;
  display: flex;
  align-items: center;
  min-width: 0;
}
.songProgress .audioProgress.ui-slider-horizontal .ui-slider-handle {
  width: 18px;
  height: 12px;
  top: -3px;
  margin-left: -9px;
  border-radius: 4px !important;
}
.songTitle {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  word-wrap: normal !important;
  padding: 4px 10px;
  border-radius: 0 0 3px 3px;
}


/* extra settings for first-child and last-child */
.listElement:first-child,
.listingReg:first-child,
.leftList:first-child,
.vcUserItem:first-child,
.userItemCustom:first-child,
.ulistItem:first-child,
.panelList:first-child,
.postElement:first-child,
.subList:first-child,
.subMenuItem:first-child,
.fmenuItem:first-child,
.vcPageDropItem:first-child,
.listingElement:first-child,
.listingHalfElement:first-child,
.replyItem:first-child,
.vcAvitem:first-child,
.subListItem:first-child,
.elemIn:first-child,
.vcAclist:first-child,
.listHoverItem:first-child {
  border-top: none !important;
}

.listElement:last-child,
.listingReg:last-child,
.leftList:last-child,
.vcUserItem:last-child,
.userItemCustom:last-child,
.ulistItem:last-child,
.panelList:last-child,
.postElement:last-child,
.subList:last-child,
.subMenuItem:last-child,
.fmenuItem:last-child,
.vcPageDropItem:last-child,
.listingElement:last-child,
.listingHalfElement:last-child,
.replyItem:last-child,
.vcAvitem:last-child,
.subListItem:last-child,
.elemIn:last-child,
.vcAclist:last-child,
.listHoverItem:last-child {
  border-bottom: none !important;
}
.subListItem.avActionGap {
  margin-top: 8px;
}

/* forced element overwrite */
.vcBwidth20 {
  width: 20%;
}
.vcBwidth25 {
  width: 25%;
}
.vcBwidth33 {
  width: 33%;
}
.vcBwidth50 {
  width: 50%;
}
.vcBwidth66 {
  width: 66%;
}
.vcBwidth100 {
  width: 100%;
}
.vcPwidth10 {
  width: 10px;
}
.vcPwidth20 {
  width: 20px;
}
.vcPwidth30 {
  width: 30px;
}
.vcPwidth40 {
  width: 40px;
}
.vcPwidth50 {
  width: 50px;
}
.vcPwidth60 {
  width: 60px;
}
.vcPwidth70 {
  width: 70px;
}
.vcPwidth80 {
  width: 80px;
}
.vcPwidth90 {
  width: 90px;
}
.vcPwidth100 {
  width: 100px;
}
.vcSquare20 {
  width: 20px;
  height: 20px;
}
.vcSquare30 {
  width: 30px;
  height: 30px;
}
.vcSquare40 {
  width: 40px;
  height: 40px;
}
.vcSquare50 {
  width: 50px;
  height: 50px;
}
.vcSquare60 {
  width: 60px;
  height: 60px;
}
.vcSquare70 {
  width: 70px;
  height: 70px;
}
.vcSquare80 {
  width: 80px;
  height: 80px;
}
.vcSquare90 {
  width: 90px;
  height: 90px;
}
.vcSquare100 {
  width: 100px;
  height: 100px;
}
.vcBtauto {
  table-layout: auto;
}
.vcBcauto {
  width: 1%;
  white-space: nowrap;
}

/* help box */
.docuBox {
  border-radius: 3px;
  margin-bottom: 5px;
}
.docuHead {
  padding: 10px;
  cursor: pointer;
}
.vcNoborder {
  border: none;
}
.docuContent {
  padding: 15px 0;
  display: none;
}
.docuContentView {
  padding: 0;
}
.docuContent img,
.docuContentView img {
  max-width: 100%;
}
.docuTitle {
  padding: 5px 10px;
  font-weight: bold;
  font-size: 13px;
}
.docuDescription {
  padding: 5px 10px;
  font-size: 13px;
}
.docuSubList {
  padding: 10px;
  margin-left: 10px;
}
.docuSubList li {
  list-style: disc;
}
.docuIntroText {
  font-size: 13px;
  padding: 10px;
}
.docZone {
  padding: 5px;
  margin-bottom: 10px;
  margin-top: 10px;
  font-weight: bold;
}

/* special log */
.vcSplog {
  padding: 15px 10px;
}
.vcSptext {
  margin-top: 2px;
}

.modalTopElement,
.leftPanelBarItem {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  font-size: 12px;
  position: absolute;
  line-height: 19px;
  width: 41px;
  height: 18px;
  right: 7px;
  top: 0px;
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
  text-shadow: 0px 0px 3px black;
  background: #f1f6fb;
  border: 1px solid #aeb1b4;
  border-top: none;
  border-bottom-right-radius: 4px;
  text-shadow:
    -1px 0px 0px #505060,
    1px 0px 0px #505060,
    0px -1px 0px #505060,
    0px 1px 0px #505060;
  color: #f8f8f8;
  background: -webkit-linear-gradient(#f8f8f8, #d0d0d0);
  -webkit-background-clip: text;
  /* -webkit-text-fill-color: transparent; */
  background: -webkit-linear-gradient(
    top,
    #e39a9c 0%,
    #c1736e 49%,
    #b33c2e 50%,
    #cf6a5e 100%
  );
  background: -moz-linear-gradient(
    top,
    #e39a9c 0%,
    #c1736e 49%,
    #b33c2e 50%,
    #cf6a5e 100%
  );
  background: -o-linear-gradient(
    top,
    #e39a9c 0%,
    #c1736e 49%,
    #b33c2e 50%,
    #cf6a5e 100%
  );
  background: -ms-linear-gradient(
    top,
    #e39a9c 0%,
    #c1736e 49%,
    #b33c2e 50%,
    #cf6a5e 100%
  );
}
.modalTopElement:hover,
.leftPanelBarItem:hover {
  background: -webkit-linear-gradient(
    top,
    #d1a2a3 0%,
    #c1736e 49%,
    #b33c2e 50%,
    #cea6a5 100%
  );
  background: -moz-linear-gradient(
    top,
    #d1a2a3 0%,
    #c1736e 49%,
    #b33c2e 50%,
    #cea6a5 100%
  );
  background: -o-linear-gradient(
    top,
    #d1a2a3 0%,
    #c1736e 49%,
    #b33c2e 50%,
    #cea6a5 100%
  );
  background: -ms-linear-gradient(
    top,
    #d1a2a3 0%,
    #c1736e 49%,
    #b33c2e 50%,
    #cea6a5 100%
  );
  box-shadow:
    inset 1px -1px 0 rgba(255, 255, 255, 0.4),
    inset -1px 0 0 rgba(255, 255, 255, 0.4),
    inset 0 1px 0 #fff,
    -1px 1px 0 rgba(118, 29, 16, 0.5),
    1px 0 0 rgba(118, 29, 16, 0.7);
}
.modalTopElement:active,
.leftPanelBarItem:active {
  background: -webkit-linear-gradient(
    #f89c8c 0%,
    #e86c57 49%,
    #aa210c 50%,
    #e6942f 100%
  );
  background: -moz-linear-gradient(
    #f89c8c 0%,
    #e86c57 49%,
    #aa210c 50%,
    #e6942f 100%
  );
  background: -o-linear-gradient(
    #f89c8c 0%,
    #e86c57 49%,
    #aa210c 50%,
    #e6942f 100%
  );
  background: -ms-linear-gradient(
    #f89c8c 0%,
    #e86c57 49%,
    #aa210c 50%,
    #e6942f 100%
  );
  box-shadow:
    inset 1px 0 0 rgba(255, 255, 255, 0.4),
    inset 0 -1px 0 rgba(245, 228, 119, 0.4),
    inset -1px 0 0 rgba(255, 255, 255, 0.4),
    inset 0 1px 0 #fff,
    -1px 1px 0 rgba(118, 29, 16, 0.5),
    1px 0 0 rgba(118, 29, 16, 0.7),
    0 0 10px red,
    -1px -1px 10px rgba(255, 0, 0, 0.3),
    1px 1px 10px rgba(255, 0, 0, 0.3);
}

.panelBarItem i,
.topModOption i {
  display: block;
  text-align: center;
  vertical-align: middle;
  font-size: 11px;
  line-height: 15px;
  width: 17px;
  height: 17px;
  border-radius: 4px;
  text-shadow: 0px 0px 3px black;
  background: #f1f6fb;
  border: 1px solid #aeb1b4;
  border-bottom-right-radius: 4px;
  text-shadow:
    -1px 0px 0px #505060,
    1px 0px 0px #50a5060,
    0px -1px 0px #505060,
    0px 1px 0px #505060;
  color: #f8f8f8;
  background: -webkit-linear-gradient(#f8f8f8, #d0d0d0);
  -webkit-background-clip: text;
  margin: 0;
  background: -webkit-linear-gradient(
    top,
    #e39a9c 0%,
    #c1736e 49%,
    #b33c2e 50%,
    #cf6a5e 100%
  );
  background: -moz-linear-gradient(
    top,
    #e39a9c 0%,
    #c1736e 49%,
    #b33c2e 50%,
    #cf6a5e 100%
  );
  background: -o-linear-gradient(
    top,
    #e39a9c 0%,
    #c1736e 49%,
    #b33c2e 50%,
    #cf6a5e 100%
  );
  background: -ms-linear-gradient(
    top,
    #e39a9c 0%,
    #c1736e 49%,
    #b33c2e 50%,
    #cf6a5e 100%
  );
}

.panelBarItem i:hover,
.topModOption i:hover {
  background: -webkit-linear-gradient(
    top,
    #d1a2a3 0%,
    #c1736e 49%,
    #b33c2e 50%,
    #cea6a5 100%
  );
  background: -moz-linear-gradient(
    top,
    #d1a2a3 0%,
    #c1736e 49%,
    #b33c2e 50%,
    #cea6a5 100%
  );
  background: -o-linear-gradient(
    top,
    #d1a2a3 0%,
    #c1736e 49%,
    #b33c2e 50%,
    #cea6a5 100%
  );
  background: -ms-linear-gradient(
    top,
    #d1a2a3 0%,
    #c1736e 49%,
    #b33c2e 50%,
    #cea6a5 100%
  );
}

.barBtn {
  min-width: 117px !important;
  max-width: 117px !important;
  margin-top: 5px;
}

.taskbarIcon {
  margin-top: 5px;
  margin-bottom: 2px;
  height: 22px;
}

.mainInputToolbar {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  display: flex;
  height: 34px;
  gap: 3px;
  overflow-x: hidden;
  box-sizing: border-box;
  justify-content: flex-start;
  align-items: center; /* vertical */
  font-size: 24px;
}
.mainInputToolbar > *,
#privateInputToolbar > * {
  flex-shrink: 0;
}

:is([class*="system_"], .systemMsg) .chatDisplayName .vcUsername,
:is([class*="system_"], .systemMsg) .chatAvatarImage,
:is([class*="system_"], .systemMsg) .chatDisplayName,
:is([class*="system_"], .systemMsg) .chatAvatar {
  display: none;
}
:is([class*="system_"], .systemMsg) .chatMessage {
  padding-left: 0px;
}

.chatLogRow .vcCdate,
.chatLogRow .vcCclear {
  display: none;
}

.chatLogRow.logActions .vcCdate,
.chatLogRow.logActions .vcCclear {
  display: table-cell;
  transition: 0.2s;
}

/* migrated-from-blue-start */

/* Migrated non-color rules from css/themes/blue/blue.css. Keep color overrides in the theme file. */

#globalChat {
  background-size: 100% 100%;
}

button {
  font-weight: 600;
}

.vcCsend img {
  height: 40px;
  padding-right: 5px;
}

#okSubItem {
  padding: 0;
  vertical-align: middle;
  align-items: center;
  justify-content: center;
}

#okSubItem,
#okPrivItem {
  width: 21px !important;
  min-width: 21px !important;
  max-width: 21px !important;
  height: 30px;
  margin: 0 !important;
  padding: 0 !important;
  flex: 0 0 21px !important;
  box-sizing: border-box;
  align-self: center;
}

.topBackground,
.backgroundHeader,
.panelTop,
.emoHead,
.vcModalTop {
  padding-right: 3px;
  position: relative;
  border-radius: 10px 10px 0px 0px;
  backdrop-filter: blur(12px) saturate(150%);
}

.chatFooter {
  margin: 0;
  border-radius: 10px;
  backdrop-filter: blur(12px) saturate(150%);
}
.rightToggleTaskbar {
  flex: 0 0 40px;
  width: 40px;
  height: 38px;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  overflow: visible;
}

.panelTop,
.vcModalTop {
  height: 30px;
}

.userCount {
  font-size: 14px;
  font-weight: bold;
  border-radius: 5px;
  padding: 10px;
  margin: 5px;
  width: 96%;
  margin-left: 2%;
  text-align: center;
}

.userCount2 {
  font-size: 14px;
  font-weight: bold;
  border-radius: 5px;
  padding: 5px;
  margin: 5px;
  width: 96%;
  margin-left: 2%;
  text-align: center;
}

.myNotice {
  display: inline-block;
  line-height: 1em;
  margin-top: 2px;
  font-weight: normal;
}

.backgroundChat {
  padding: 0px 5px 5px 5px;
}

#vcRoomsContainer {
  overflow-y: scroll;
  overflow-x: hidden;
}

.offline {
  opacity: 0.5;
}

.songTitle {
  display: none;
}

.chatDisplayName {
  padding: 0;
}

/* keep chat name, vip badge, separator and message on one clean baseline */
.chatLogRow .chatDisplayName {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  margin-left: 0;
  padding: 0;
  gap: 2px;
  height: auto;
  line-height: 1.2;
}
.chatLogRow .chatDisplayName .vcUsername {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  min-height: 0;
  line-height: 1.2 !important;
}
.chatLogRow .chatDisplayName .chatVipAvatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  margin-left: 0;
  padding: 0;
  height: auto;
  line-height: 1.2;
  position: static;
}
.chatLogRow .chatDisplayName .chatVipAvatar img {
  display: inline-block;
  vertical-align: middle;
  height: 18px;
  width: auto;
  margin: 0;
}
.chatLogRow .chatSep {
  display: inline;
  vertical-align: middle;
  line-height: 1.2;
  margin: 0 7px 0 0;
  padding: 0 !important;
  padding-left: 0 !important;
}
.chatLogRow .chatMessage {
  display: inline;
  vertical-align: middle;
  line-height: 1.2 !important;
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: break-word;
  position: static;
  top: auto;
}

.chatLogRow:is([class*="system_"], .systemMsg) .chatDisplayName,
.chatLogRow:is([class*="system_"], .systemMsg) .chatDisplayName .vcUsername,
.chatLogRow:is([class*="system_"], .systemMsg) .chatVipAvatar,
.chatLogRow:is([class*="system_"], .systemMsg) .chatSep,
.chatLogRow:is([class*="system_"], .systemMsg) .chatAvatar,
.chatLogRow:is([class*="system_"], .systemMsg) .chatAvatarImage {
  display: none !important;
}

.chatLogRow:is([class*="system_"], .systemMsg) .privateMessageText {
  vertical-align: middle;
}

.chatLogRow:is([class*="system_"], .systemMsg) .vistaTable {
  display: table;
  table-layout: fixed;
  width: 100%;
}

.chatLogRow:is([class*="system_"], .systemMsg) .chatMessage {
  display: table-cell;
  width: 100%;
  line-height: 18px;
  vertical-align: middle;
}

.flipInX,
.chatMessage {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInX;
  animation-name: flipInX;
}

.animated,
#notifyPrivate,
.chatMessage,
.chatLogRow.bcolor1 .smallModalIn,
.largeModalIn,
#privateBox,
.icoVip,
.myMood {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@charset "UTF-8";

.animated,
#notifyPrivate,
.chatMessage,
.chatLogRow.bcolor1 .smallModalIn,
.largeModalIn,
#privateBox,
.icoVip,
.myMood {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

#notifyPrivate {
  -webkit-animation-iteration-count: 20;
  animation-iteration-count: 20;
}

.animated.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

@-webkit-keyframes bounce {
  from,
  20%,
  53%,
  80%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  40%,
  43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0);
  }

  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -15px, 0);
    transform: translate3d(0, -15px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, -4px, 0);
    transform: translate3d(0, -4px, 0);
  }
}

@keyframes bounce {
  from,
  20%,
  53%,
  80%,
  to {
    /*! -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); */
    /*! animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); */
    /*! -webkit-transform: translate3d(0, 0, 0); */
    /*! transform: translate3d(0, 0, 0); */
  }

  40%,
  43% {
    /*! -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); */
    /*! animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); */
    /*! -webkit-transform: translate3d(0, -30px, 0); */
    /*! transform: translate3d(0, -30px, 0); */
  }

  70% {
    /*! -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); */
    /*! animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); */
    /*! -webkit-transform: translate3d(0, -15px, 0); */
    /*! transform: translate3d(0, -15px, 0); */
  }

  90% {
    /*! -webkit-transform: translate3d(0, -4px, 0); */
    /*! transform: translate3d(0, -4px, 0); */
  }
}

.bounce,
#notifyPrivate {
  -webkit-animation-name: bounce;
  animation-name: bounce;
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
}

@-webkit-keyframes bounceInUp {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 3000px, 0);
    transform: translate3d(0, 3000px, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }

  75% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, -5px, 0);
    transform: translate3d(0, -5px, 0);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes bounceInUp {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 3000px, 0);
    transform: translate3d(0, 3000px, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }

  75% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, -5px, 0);
    transform: translate3d(0, -5px, 0);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.bounceInUp,
.myMood {
  -webkit-animation-name: bounceInUp;
  animation-name: bounceInUp;
}

@-webkit-keyframes fadeInLeftBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInLeftBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.fadeInLeftBig,
#mainEmoticon {
  -webkit-animation-name: fadeInLeftBig;
  animation-name: fadeInLeftBig;
}

@-webkit-keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.fadeInRight,
#privateBox,
.smallModalIn,
.largeModalIn {
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight;
}

#privateBox,
.smallModalIn,
.largeModalIn {
  -webkit-animation: none !important;
  animation: none !important;
}

@-webkit-keyframes flipInX {
  from {
    /*! -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); */
    /*! transform: perspective(400px) rotate3d(1, 0, 0, 90deg); */
    /*! -webkit-animation-timing-function: ease-in; */
    /*! animation-timing-function: ease-in; */
    /*! opacity: 0; */
  }

  40% {
    /*! -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); */
    /*! transform: perspective(400px) rotate3d(1, 0, 0, -20deg); */
    /*! -webkit-animation-timing-function: ease-in; */
    /*! animation-timing-function: ease-in; */
  }

  60% {
    /*! -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); */
    /*! transform: perspective(400px) rotate3d(1, 0, 0, 10deg); */
    /*! opacity: 1; */
  }

  80% {
    /*! -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); */
    /*! transform: perspective(400px) rotate3d(1, 0, 0, -5deg); */
  }

  to {
    /*! -webkit-transform: perspective(400px); */
    /*! transform: perspective(400px); */
  }
}

@keyframes flipInX {
  from {
    /*! -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); */
    /*! transform: perspective(400px) rotate3d(1, 0, 0, 90deg); */
    /*! -webkit-animation-timing-function: ease-in; */
    /*! animation-timing-function: ease-in; */
    /*! opacity: 0; */
  }

  40% {
    /*! -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); */
    /*! transform: perspective(400px) rotate3d(1, 0, 0, -20deg); */
    /*! -webkit-animation-timing-function: ease-in; */
    /*! animation-timing-function: ease-in; */
  }

  60% {
    /*! -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); */
    /*! transform: perspective(400px) rotate3d(1, 0, 0, 10deg); */
    /*! opacity: 1; */
  }

  80% {
    /*! -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); */
    /*! transform: perspective(400px) rotate3d(1, 0, 0, -5deg); */
  }

  to {
    /*! -webkit-transform: perspective(400px); */
    /*! transform: perspective(400px); */
  }
}

.flipInX,
.chatMessage {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInX;
  animation-name: flipInX;
}

@-webkit-keyframes rotateIn {
  from {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, -200deg);
    transform: rotate3d(0, 0, 1, -200deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes rotateIn {
  from {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, -200deg);
    transform: rotate3d(0, 0, 1, -200deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

.rotateIn,
.icoVip {
  -webkit-animation-name: rotateIn;
  animation-name: rotateIn;
}

@-webkit-keyframes slideInUp {
  from {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slideInUp {
  from {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.slideInUp,
.chatMessage.bcolor1 {
  -webkit-animation-name: slideInUp;
  animation-name: slideInUp;
}

.dropList {
  display: none;
  cursor: pointer;
  position: absolute;
  margin-left: 10px;
  z-index: 99999;
  width: 200px;
}

#friendPost,
#newsData {
  height: 60px;
  overflow: hidden;
}

.panelItem {
  padding: 4px;
  margin-bottom: 5px;
}

.panelAvItem {
  position: relative;
  z-index: 20;
  overflow: visible;
}

.avMobileToggleItem {
  display: none;
}

.panel-wrapper {
  filter: drop-shadow(0px 2px 2px rgb(39 35 61 / 100%));
}

.panelTitleBox {
  padding: 5px;
  font-weight: 600;
  position: relative;
  clip-path: polygon(
    0% 0%,
    100% 0%,
    100% calc(100% - 10px),
    calc(100% - 40px) calc(100% - 10px),
    calc(100% - 50px) 100%,
    0% 100%
  );
}

#myAccountTitle {
  display: flex;
  align-items: center;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  box-sizing: border-box;
  white-space: nowrap;
}
#myAccountTitle .myAccountText {
  display: inline-flex;
  align-items: center;
  width: auto;
  max-width: 180px;
  min-width: 0;
  overflow: hidden;
}
#myAccountTitle .myAccountLabel,
#myAccountTitle .myAccountClose {
  flex: 0 0 auto;
}
#myAccountTitle .myAccountUsername {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.panelContent {
  padding: 5px 0px 5px 0px;
  font-weight: 400;
}

.avPanelContent {
  padding: 8px 8px 0 8px;
  position: relative;
  z-index: 21;
  overflow: visible;
}
.avMobileToggle {
  display: none;
  width: 100%;
  margin: 0 0 8px 0;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.avMobileToggle.activeTalk {
  color: #fff;
  background: linear-gradient(180deg, #ff6b6b 0%, #e73333 48%, #970000 100%);
  box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.18), 0 0 14px rgba(255, 0, 0, 0.85);
}

.avMobileToggleIcon {
  width: 20px;
  height: 20px;
  object-fit: contain;
  display: inline-block;
  vertical-align: middle;
}

.avPanelHeader {
  position: relative;
  display: block;
}
.avPanelTitle {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}
.avPanelTitleText {
	display: block;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.avMobilePanelClose {
	display: none !important;
}

.avMobileLayout,
.avMobileVisualBox,
.avMobileControlsBox {
  display: block;
}

#avMobileChatSlot {
  width: 100%;
  margin: 0;
}

#avMobileChatSlot.hidden {
  display: none;
}

.avPreviewRow {
  width: 100%;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 10px;
}

.avPreviewBox {
  position: relative;
  width: calc(100% - 16px);
  aspect-ratio: 5 / 4;
  max-width: calc(100% - 16px);
  background: #000;
  border: 1px solid rgba(255, 255, 255, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-sizing: border-box;
}

.avPreviewMedia {
  position: relative;
  flex: 1 1 auto;
  height: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.avPreviewStatus {
  color: #fff;
  font-weight: 700;
  text-shadow: 0 0 3px #000;
  text-align: center;
  padding: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.avPreviewLens {
  padding: 0;
}

#avPreviewLens {
  width: auto;
  height: 88%;
  max-width: 88%;
  object-fit: contain;
  display: block;
  opacity: 0.92;
}

#avLocalVideo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #000;
  transform: scaleX(-1);
}

.avLevelMeter {
  width: 10px;
  min-width: 10px;
  height: auto;
  box-sizing: border-box;
  padding: 0;
  display: flex;
  align-items: stretch;
  justify-content: center;
}

.avLevelMeterInner {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column-reverse;
  justify-content: space-between;
  gap: 0;
}

.avLevelSegment {
  flex: 1 1 0;
  min-height: 0;
  border: 1px solid #000;
  border-top-width: 0;
  box-sizing: border-box;
  background: #16351a;
  box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.8);
}

.avLevelMeterInner .avLevelSegment:last-child {
  border-top-width: 1px;
}

.avLevelSegment.avLevelSegmentYellow {
  background: #3f4118;
}

.avLevelSegment.avLevelSegmentRed {
  background: #48242d;
}

.avLevelMeterInner .avLevelSegment:nth-child(1).avLevelOn,
.avLevelMeterInner .avLevelSegment:nth-child(2).avLevelOn,
.avLevelMeterInner .avLevelSegment:nth-child(3).avLevelOn,
.avLevelMeterInner .avLevelSegment:nth-child(4).avLevelOn,
.avLevelMeterInner .avLevelSegment:nth-child(5).avLevelOn,
.avLevelMeterInner .avLevelSegment:nth-child(6).avLevelOn {
  background: #46b854;
}

.avLevelMeterInner .avLevelSegment:nth-child(4).avLevelOn {
  background: #6bb84a;
}

.avLevelMeterInner .avLevelSegment:nth-child(5).avLevelOn {
  background: #8eb946;
}

.avLevelMeterInner .avLevelSegment:nth-child(6).avLevelOn {
  background: #b7bf48;
}

.avLevelMeterInner .avLevelSegment:nth-child(7).avLevelOn {
  background: #c8ba43;
}

.avLevelMeterInner .avLevelSegment:nth-child(8).avLevelOn {
  background: #d4a53f;
}

.avLevelMeterInner .avLevelSegment:nth-child(9).avLevelOn {
  background: #d88a46;
}

.avLevelMeterInner .avLevelSegment:nth-child(10).avLevelOn {
  background: #cf684f;
}

.avLevelMeterInner .avLevelSegment:nth-child(11).avLevelOn {
  background: #c55462;
}

.avLevelMeterInner .avLevelSegment:nth-child(12).avLevelOn {
  background: #bc456f;
}

.avToolbarTable {
  width: 100%;
  display: table;
  table-layout: auto;
  margin-top: 2px;
}

.avToolbarCell {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  padding: 1px;
  overflow: visible;
}

.avIconCell {
  width: 26px;
  min-width: 26px;
  height: 30px;
  position: relative;
  cursor: pointer;
  z-index: 1;
}

.avIconCell.avDisabledState {
  opacity: 0.4;
}
.roomFeatureDisabled { opacity: .4; cursor: pointer; }

#avRequestsButton.avEyeDisabledState {
  cursor: default;
  opacity: 0.55;
}

#avRequestsButton.avEyeDisabledState .avToolbarIcon {
  filter: grayscale(1);
}

.avFloatingRequestsButton {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 30px;
  height: 30px;
  display: block;
  border-radius: 50%;
  cursor: pointer;
  z-index: 8;
  background: transparent;
}

.avCameraViewerCount {
  position: absolute;
  right: 28px;
  bottom: 7px;
  min-width: 14px;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 16px;
  text-align: right;
  white-space: nowrap;
  pointer-events: none;
  z-index: 8;
  text-shadow: 0 1px 2px #000, 0 0 3px #000;
}

.avFloatingRequestsButton .avToolbarIcon {
  position: absolute;
  right: 5px;
  bottom: 5px;
  width: 20px;
  height: 20px;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.9));
}

.avFloatingRequestsButton.avEyeDisabledState {
  cursor: default;
  opacity: 0.55;
}

.avFloatingRequestsButton.avEyeDisabledState .avToolbarIcon {
  filter: grayscale(1);
}

.avMediaPanel {
  --av-media-panel-height: 50vh;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100vw;
  height: var(--av-media-panel-height);
  max-height: var(--av-media-panel-height);
  margin: 0;
  padding: 12px 16px;
  box-sizing: border-box;
  border-radius: 0;
  overflow: visible;
  background: linear-gradient(0deg, rgba(64, 62, 91, 0.9) 0%, rgba(65, 63, 92, 0.9) 50%, rgba(65, 63, 92, 0.9) 100%);
  border: 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 8px 26px rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(10px);
  z-index: 999;
}

.avMediaPanel.hidden {
  display: none !important;
}

/* The live player stays below its panel; camera windows use the shared private-window stack. */
body.avMediaPanelVisible #containerStream {
  z-index: 998 !important;
}

.avMediaPanel.avMediaOpening {
  animation: avMediaOpen 0.22s ease-out both;
}

.avMediaPanel.avMediaClosing {
  animation: avMediaClose 0.18s ease-in both;
}

@keyframes avMediaOpen {
  from {
    opacity: 0;
    transform: translateY(-100%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes avMediaClose {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-100%);
  }
}

.avMediaPanelHead,
.avMediaQueueHead,
.avMediaSearchRow {
  display: flex;
  align-items: center;
  gap: 6px;
}

.avMediaQueueHead,
.avMediaSearchRow {
  height: 34px;
  margin-bottom: 8px;
}

.avMediaPanelHead {
  justify-content: space-between;
  margin-bottom: 8px;
  height: 34px;
}
.avMediaHeadActions { display:flex; align-items:center; gap:5px; }
.avMediaPin {
  width:30px;
  height:28px;
  padding:0;
  border:1px solid rgba(255,255,255,.2);
  border-radius:5px;
  color:#fff;
  background:rgba(255,255,255,.08);
  cursor:pointer;
  transition:background-color .15s ease,color .15s ease,box-shadow .15s ease;
}
.avMediaPin:hover { background:rgba(255,255,255,.18); color:#fff6bd; }
.avMediaPin.active {
  color:#fff2a6;
  background:rgba(225,181,55,.24);
  box-shadow:inset 0 0 7px rgba(255,220,105,.28);
}

.avMediaTabs {
  display: flex;
  gap: 5px;
  align-items:center;
}
.avMediaOnairToggle{border:1px solid rgba(255,255,255,.28);border-radius:5px;padding:6px 10px;color:#fff;cursor:pointer;font-weight:bold;text-shadow:0 1px 2px #000;box-shadow:inset 0 1px rgba(255,255,255,.25)}
.avMediaOnairToggle.isOffair{background:linear-gradient(#4f9b65,#23623a)}
.avMediaOnairToggle.isOnair{background:linear-gradient(#c75a5a,#7e2424)}

.avMediaTab,
.avMediaHide {
  border: 0;
  border-radius: 5px;
  padding: 6px 10px;
  cursor: pointer;
  color: #fff;
  background: rgba(255, 255, 255, 0.09);
}

.avMediaTab.active {
  background: rgba(255, 255, 255, 0.22);
  box-shadow: inset 0 0 8px rgba(255, 255, 255, 0.12);
}

.avMediaGrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
  height: calc(var(--av-media-panel-height) - 66px);
  min-height: 0;
}

.avMediaVideoGrid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.avMediaTabBody {
  height: calc(var(--av-media-panel-height) - 66px);
  min-height: 0;
}

.avMediaResizeHandle {
  position: absolute;
  left: 50%;
  bottom: -7px;
  width: 38px;
  height: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: rgb(38, 37, 55);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 5px;
  box-sizing: border-box;
  cursor: ns-resize;
  touch-action: none;
  transform: translateX(-50%);
  z-index: 12;
  opacity: 1;
}

.avMediaResizeHandle:hover,
.avMediaPanel.avMediaResizing .avMediaResizeHandle {
  color: #fff;
  background: rgb(18, 18, 24);
}

.avMediaResizeHandle .fa {
  font-size: 10px;
  line-height: 1;
  pointer-events: none;
}

body.avMediaResizeActive {
  cursor: ns-resize !important;
  user-select: none;
}

.avMediaSearchBox,
.avMediaQueueBox,
.avMediaVideoShareBox {
  min-width: 0;
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.avMediaVideoShareBox {
  gap: 8px;
}

.avMediaVideoShareSection {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 7px;
  box-sizing: border-box;
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.24);
}

.avMediaVideoShareHead {
  height: 24px;
  line-height: 24px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 5px;
}

.avMediaVideoPick {
  flex: 1 1 0;
  min-height: 0;
  position: relative;
  overflow: hidden;
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.86);
  border: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.78);
  text-align: center;
}

.avMediaVideoEmptyText {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  box-sizing: border-box;
  text-align: center;
  line-height: 1.25;
  color: rgba(255, 255, 255, 0.82);
  text-shadow: 0 1px 2px #000;
	flex-direction: column;
	gap: 8px;
}

.avMediaVideoEmptyText .fa { font-size: 34px; color: rgba(255,255,255,.88); }

.avMediaVideoPick img,
.avMediaVideoPick video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  background: #000;
}

.avMediaVideoPickTitle {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 7px;
  box-sizing: border-box;
  color: #fff;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.86), rgba(0, 0, 0, 0));
  text-shadow: 0 1px 2px #000;
  font-weight: 700;
  text-align: left;
}

.avMediaVideoShareBtn {
  margin-top: 6px;
}

.avRoomVideoHost {
  height: 30vh;
  min-height: 180px;
  margin: 0 0 5px 0;
  box-sizing: border-box;
  border-radius: 6px;
  overflow: hidden;
  position: relative;
  background: rgba(0, 0, 0, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.avRoomVideoHost.hidden {
  display: none !important;
}

.avRoomVideoStage {
  position: absolute;
  left: 0;
  right: 0;
  top: 30px;
  bottom: 40px;
  background: rgba(0, 0, 0, 0.88);
}

.avRoomVideoViewer.avRoomVideoScreen .avRoomVideoStage,
.avRoomVideoViewer.avRoomVideoYoutube .avRoomVideoStage {
  bottom: 0;
}

.avRoomVideoOwner.avRoomVideoScreen .avRoomVideoStage,
.avRoomVideoOwner.avRoomVideoYoutube .avRoomVideoStage {
  bottom: 40px;
}

.avRoomVideoLabel {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 30px;
  line-height: 30px;
  padding: 0 10px;
  box-sizing: border-box;
  color: #fff;
  background: rgba(0, 0, 0, 0.62);
  text-shadow: 0 1px 2px #000;
  font-weight: 700;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.avRoomVideoStage iframe,
.avRoomVideoStage video {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  object-fit: contain;
  background: #000;
}

.avRoomVideoOverlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: rgba(0, 0, 0, 0.18);
}

.avRoomVideoIframeBlock {
  position: absolute;
  inset: 0;
  z-index: 5;
  background: transparent;
}

.avRoomVideoOwner .avRoomVideoIframeBlock {
  display: none;
}

.avRoomVideoTop {
  position: absolute;
  top: 0;
  left: auto;
  right: 4px;
  height: 30px;
  width: auto;
  max-width: 180px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  z-index: 12;
}

@media screen and (max-width: 600px) {
  .avMediaScreenShareSection {
    display: none !important;
  }
}

.avRoomVideoYoutube .avRoomVideoTitle {
  display: none;
}

.avRoomVideoViewer .avRoomVideoStop {
  display: none !important;
}

.avRoomVideoActions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.avRoomVideoTitle {
  min-width: 0;
  padding: 5px 8px;
  border-radius: 4px;
  color: #fff;
  background: rgba(0, 0, 0, 0.55);
  text-shadow: 0 1px 2px #000;
  font-weight: 700;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.avRoomVideoStop,
.avRoomVideoFull {
  height: 30px;
  border: 0;
  color: #fff;
  cursor: pointer;
}

.avRoomVideoStop {
  position: absolute;
  left: 50%;
  bottom: 5px;
  transform: translateX(-50%);
  min-width: 86px;
  width: auto;
  padding: 0 12px;
  border-radius: 5px;
  background: #b70000;
  z-index: 3;
}

.avRoomVideoFull {
  width: 30px;
  min-width: 30px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.68);
  position: relative;
  z-index: 20;
}

.avRoomVideoLightboxOpen {
  overflow: hidden;
}

.avRoomVideoHost.avRoomVideoLightboxMode {
  position: fixed;
  inset: 0;
  width: auto;
  height: auto;
  min-height: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  z-index: 3000;
  background: rgba(0, 0, 0, 0.94);
}

.avRoomVideoHost.avRoomVideoLightboxMode .avRoomVideoStage {
  top: 20px;
  left: 20px;
  right: 20px;
  bottom: 20px;
  max-width: 1280px;
  max-height: calc(100vh - 40px);
  margin: auto;
}

.avRoomVideoHost.avRoomVideoLightboxMode.avRoomVideoYoutube .avRoomVideoStage,
.avRoomVideoHost.avRoomVideoLightboxMode.avRoomVideoScreen .avRoomVideoStage {
  top: 20px;
  bottom: 20px;
}

.avRoomVideoHost.avRoomVideoLightboxMode .avRoomVideoLabel,
.avRoomVideoHost.avRoomVideoLightboxMode .avRoomVideoStop,
.avRoomVideoHost.avRoomVideoLightboxMode .avRoomVideoFull {
  display: none !important;
}

.avRoomVideoHost.avRoomVideoLightboxMode .avRoomVideoTop {
  top: 28px;
  left: 28px;
  right: auto;
  max-width: 180px;
  margin: 0;
  pointer-events: none;
}

.avRoomVideoHost.avRoomVideoLightboxMode .avRoomVideoActions,
.avRoomVideoHost.avRoomVideoLightboxMode .avRoomVideoLightboxClose {
  pointer-events: auto;
}

.avRoomVideoLightbox {
  position: fixed;
  inset: 0;
  z-index: 3000;
  background: rgba(0, 0, 0, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
}

.avRoomVideoLightbox.hidden {
  display: none !important;
}

.avRoomVideoLightboxStage {
  width: 100%;
  height: 100%;
  max-width: 1280px;
  max-height: 90vh;
  background: #000;
  position: relative;
}

.avRoomVideoLightboxStage iframe,
.avRoomVideoLightboxStage video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border: 0;
  background: #000;
}

.avRoomVideoLightboxBlock {
  position: absolute;
  inset: 0;
  z-index: 5;
  background: transparent;
}

.avRoomVideoLightboxClose {
  position: fixed;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 0;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 24px;
  z-index: 3001;
  cursor: pointer;
}

.avMediaSearchRow .fullInput {
  min-width: 0;
  height: 34px;
  border: 1px solid #b8c2d1;
  border-top-color: #eef3fb;
  border-left-color: #eef3fb;
  border-bottom-color: #8d99ab;
  border-right-color: #8d99ab;
  background: linear-gradient(180deg, #fbfcff 0%, #eef2f8 46%, #dbe3ef 100%);
  color: #23314d;
  text-shadow: none;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.75);
}

.avMediaSearchRow #avMediaSearchButton,
.avMediaSearchRow #avMediaVideoSearchButton {
  width: 44px;
  min-width: 44px;
  height: 34px;
  border: 1px solid #b8c2d1;
  border-top-color: #eef3fb;
  border-left-color: #eef3fb;
  border-bottom-color: #8d99ab;
  border-right-color: #8d99ab;
  background: linear-gradient(180deg, #fbfcff 0%, #eef2f8 46%, #dbe3ef 100%);
  color: #23314d;
  text-shadow: none;
  padding: 0;
}

.avMediaQueueHead .bold {
  display: flex;
  align-items: center;
  height: 34px;
}

.avStereoToggleWrap {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 5px;
  height: 34px;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
}

.avStereoToggleWrap .switchWrap {
  flex: 0 0 30px;
  width: 30px;
  margin: 0;
  cursor: pointer;
}
.avStereoSwitch {
  display: table;
  width: 30px;
  padding: 1px;
  border: 1px solid #9ca9bc;
  border-radius: 2px;
  background: linear-gradient(180deg, #eef2f8 0%, #d4dce8 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8), inset 0 -1px 0 rgba(150,162,182,.35);
  box-sizing: border-box;
}
.avStereoSwitch.vcOnswitch {
  background: linear-gradient(180deg, #a9c46e 0%, #8faa56 100%);
  border-color: #758b46;
}
.avStereoSwitch .vcBball {
  width: 16px;
  height: 16px;
  border: 1px solid #8e9cb1;
  border-radius: 2px;
  background: linear-gradient(180deg, #fff 0%, #e7edf6 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
  box-sizing: border-box;
  transition: margin-left .1s ease;
}
.avStereoSwitch .vcBball.vcOnball { margin-left: 11px; }
.avStereoSwitch .vcBball.vcOffball { margin-left: 0; }
.avStereoSeparator {
  flex: 0 0 1px;
  width: 1px;
  height: 22px;
  margin: 0 5px;
  background: rgba(255,255,255,.24);
  box-shadow: 1px 0 0 rgba(0,0,0,.35);
}
.avStereoSeparator + .avMediaClearMenu { margin-left: 0; }

@media screen and (max-width: 600px) {
  .avStereoToggleWrap,
  .avStereoSeparator { display: none !important; }
  .avMediaQueueHead .avMediaClearMenu { margin-left: auto; }
}

.avMediaPanel.avStereoMode .avMediaSearchBox,
.avMediaPanel.avStereoMode #vcAvMediaQueue {
  opacity: .35;
  filter: grayscale(1);
  pointer-events: none;
}

.avMediaPanel.avStereoMode .avMediaNowTitle,
.avMediaPanel.avStereoMode .avMediaTimelineRow,
.avMediaPanel.avStereoMode .avMediaDuckRow,
.avMediaPanel.avStereoMode .avMediaVolumeRow {
  display: none !important;
}

.avMediaPanel.avStereoMode .avMediaMicDevice { flex: 1 1 100%; }

.avStereoBroadcastRow {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 30px;
}

.avStereoBroadcastRow.hidden { display: none !important; }
.avStereoBroadcastRow .avMediaOnairToggle { flex: 0 0 auto; min-height: 30px; }

.avStereoLevel {
  position: relative;
  flex: 1 1 auto;
  min-width: 40px;
  height: 13px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.32);
  border-radius: 3px;
  background: rgba(0,0,0,.5);
  box-shadow: inset 0 1px 3px rgba(0,0,0,.8);
}

.avStereoLevelFill {
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, #2f9b50 0%, #79c944 68%, #e2c33e 84%, #d64a3f 100%);
  transition: width 60ms linear;
}

.avMediaMenuButton {
  margin-bottom: 0;
}

.avMediaResults,
.vcAvMediaQueue {
  flex: 1 1 0;
  height: auto;
  min-height: 0;
  max-height: none;
  overflow: auto;
  padding: 5px;
  box-sizing: border-box;
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.24);
}

.avMediaResults.avMediaLoading {
  display: flex;
  align-items: center;
  justify-content: center;
}

.avMediaResults.avMediaLoading > * {
  margin: 0 !important;
}

.avMediaResult,
.avMediaQueueItem {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px;
  margin-bottom: 5px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.07);
}

.avMediaResult:last-child,
.avMediaQueueItem:last-child {
  margin-bottom: 0;
}

.avMediaThumb {
  width: 62px;
  height: 44px;
  position: relative;
  flex: 0 0 62px;
  overflow: hidden;
  border-radius: 4px;
  background: #000;
}

.avMediaThumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.avMediaPreview {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 22px;
  text-shadow: 0 0 5px #000;
  background: rgba(0, 0, 0, 0.2);
  cursor: pointer;
}

.avMediaPreview .avMediaPreviewIcon {
  width: 22px;
  height: 22px;
  object-fit: contain;
}

.avMediaInfo {
  min-width: 0;
  flex: 1 1 auto;
}

.avMediaTitle {
  font-size: 12px;
  line-height: 1.25;
  max-height: 32px;
  overflow: hidden;
}

.avMediaDuration {
  font-size: 11px;
  opacity: 0.72;
}

.avMediaAdd,
.avMediaPlay,
.avMediaDelete,
.avMediaHandle {
  width: 24px;
  min-width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
}

.avMediaPlay.vcAvMediaActionBusy {
  opacity: 0.78;
}

.avMediaHandle {
  cursor: move;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  color: rgba(255, 255, 255, 0.72);
  background: transparent;
}

.avMediaReorderButtons {
  display: none;
  flex-direction: column;
  gap: 2px;
}

.avMediaReorderButtons button {
  width: 22px;
  height: 19px;
  border: 0;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.avMediaQueueItem.avMediaPlayed .avMediaHandle,
.avMediaQueueItem.avMediaPlayed .avMediaThumb,
.avMediaQueueItem.avMediaPlayed .avMediaInfo,
.avMediaQueueItem.avMediaPlayed .avMediaPlay {
  opacity: 0.48;
  filter: grayscale(1);
}

.avMediaQueueItem.avMediaPlayed .avMediaDelete {
  opacity: 1;
  filter: none;
  cursor: pointer;
}

.avMediaQueueItem.avMediaCurrent {
  opacity: 1;
  filter: none;
  background: linear-gradient(90deg, rgba(54, 145, 78, 0.7), rgba(255, 255, 255, 0.08));
  box-shadow: inset 0 0 0 1px rgba(126, 220, 145, 0.35);
}

.avMediaQueueItem.avMediaNext {
  opacity: 1;
  filter: none;
  background: linear-gradient(90deg, rgba(168, 143, 45, 0.65), rgba(255, 255, 255, 0.08));
  box-shadow: inset 0 0 0 1px rgba(235, 207, 91, 0.35);
}

body.avMediaDragActive,
body.avMediaDragActive * {
  user-select: none;
  -webkit-user-select: none;
}

.avMediaSortablePlaceholder {
  display: block;
  margin-bottom: 5px;
  border: 2px dashed rgba(255, 255, 255, 0.85);
  border-radius: 5px;
  background: rgba(126, 220, 145, 0.16);
  box-shadow: inset 0 0 0 1px rgba(126, 220, 145, 0.35);
}

.avMediaDragSource {
  opacity: 0.18;
}

.avMediaDragGhost,
.ui-sortable-helper.avMediaQueueItem {
  position: fixed;
  z-index: 999999;
  pointer-events: none;
  opacity: 0.92;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.48);
  transform: scale(1.01);
}

.avMediaClearMenu {
  position: relative;
  margin-left: auto;
}

.avMediaMenuButton {
  width: 30px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 5px;
  cursor: pointer;
}

.avMediaClearDropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  min-width: 160px;
  border-radius: 6px;
  overflow: hidden;
  z-index: 1000;
  background: rgba(20, 19, 33, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
}

.avMediaMenuOption {
  padding: 8px 10px;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 8px;
}

.avMediaMenuOption i {
  width: 14px;
  text-align: center;
}

.avMediaMenuOption:hover {
  background: rgba(255, 255, 255, 0.12);
}

.avMediaNow {
  flex: 0 0 auto;
  margin-top: 8px;
  padding: 6px;
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.18);
  display: flex;
  flex-direction: column;
  gap: 7px;
  overflow: visible;
  min-height: 106px;
  box-sizing: border-box;
}

.avMediaPlayerWrap {
  position: fixed;
  left: -240px;
  bottom: 0;
  width: 200px;
  height: 200px;
  overflow: hidden;
  opacity: 0.01;
  pointer-events: none;
  z-index: -1;
}

.avMediaNowTitle {
  font-size: 12px;
  margin-bottom: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.avMediaNowTitle #avMediaNowText {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.avMediaNowOwner {
  flex: 0 0 auto;
  max-width: 42%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 2px 6px;
  border-radius: 3px;
  color: #fff;
  background: #25863a;
  font-weight: 600;
}

.avMediaTimelineRow {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
}

.avMediaTimeline {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  height: 14px;
  border-radius: 2px;
  overflow: hidden;
  cursor: pointer;
  padding: 2px;
  border: 1px solid #050505;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.16) 0%, rgba(0,0,0,0) 45%, rgba(0,0,0,0.38) 100%),
    repeating-linear-gradient(90deg, #0b0b0b 0 2px, #181818 2px 8px);
  box-shadow: inset 0 1px 2px #000, 0 1px 0 rgba(255,255,255,0.14);
}

#avMediaTimelineFill {
  position: relative;
  width: 0%;
  height: 100%;
  border-radius: 1px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.06) 42%, rgba(0,0,0,0.3) 100%),
    repeating-linear-gradient(90deg, #2b7fd2 0 7px, #1c5590 7px 9px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18), 0 0 6px rgba(57,147,236,0.45);
}

#avMediaTimelineFill::after {
  content: "";
  position: absolute;
  right: -4px;
  top: -3px;
  width: 7px;
  height: 14px;
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 3px;
  background: linear-gradient(180deg, #f8f8f8 0%, #9ba8b5 48%, #53606c 52%, #d8dde1 100%);
  box-shadow: 0 0 3px rgba(0,0,0,.8);
}

.avMediaTimelineTime {
  flex: 0 0 auto;
  min-width: 68px;
  color: #fff;
  font-size: 11px;
  line-height: 16px;
  text-align: left;
  white-space: nowrap;
  margin-left: 0;
  padding-right: 2px;
}

.avStereoConfirmBox .regButton + .regButton {
  margin-left: 8px;
}

.avStereoConfirmIcon {
  margin-bottom: 8px;
}

.avMediaVolumeRow {
  margin-top: 0;
  padding-right: 5px;
  height: 23px;
  display: flex !important;
  align-items: center;
  width: 100%;
  visibility: visible !important;
  opacity: 1 !important;
}

.avMediaVolumeIcon {
  width: 22px;
  min-width: 22px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-left: 5px;
  padding-right: 0;
  margin-right: 4px;
}

.avMediaVolumeIcon.avMutedState {
  opacity: 0.45;
}

.avMediaVolumeIcon .radioVolumeImg {
  width: 20px;
  height: 20px;
  object-fit: contain;
  display: block;
}

#avMediaVolume {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  padding-left: 2px;
  padding-right: 5px;
  display: flex;
  align-items: center;
}

#avMediaSlider {
  width: 100%;
  margin: 0;
  position: relative;
  top: 1px;
  touch-action: none;
}

.avMediaTalkRow {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
}

.avMediaTalkButton {
  flex: 0 0 88px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  line-height: 30px;
  margin-top: 0;
  color: #fff;
  text-align: center;
}

.avMediaMicDevice {
  flex: 1 1 auto;
  min-width: 0;
  height: 30px;
}

.avMediaDuckRow {
  flex: 0 0 145px;
  width: 145px;
  min-width: 115px;
  height: 23px;
  margin-top: 0;
  padding-right: 5px;
  display: flex !important;
  align-items: center;
}

.avMediaDuckLabel {
  flex: 0 0 auto;
  padding: 0 6px 0 3px;
  font-size: 11px;
  line-height: 23px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 2px #000;
}

#avMediaDuck {
  flex: 1 1 auto;
  min-width: 0;
  padding-left: 2px;
  padding-right: 4px;
  display: flex;
  align-items: center;
}

#avMediaDuckSlider {
  width: 100%;
  margin: 0;
  position: relative;
  top: 1px;
  touch-action: none;
}

#avMediaButton.avDisabledState[aria-disabled="true"] {
  opacity: 0.4;
  cursor: default;
  pointer-events: none;
}

.avMediaTab:disabled,
.avMediaTab.avDisabledState {
  opacity: 0.45;
  cursor: default;
  pointer-events: none;
}

.avMediaPlay.avDisabledState,
.avMediaVideoShareBtn.avDisabledState,
.avMediaTalkButton.avDisabledState {
  opacity: 0.42;
  cursor: default;
  pointer-events: none;
}

.avStatemedia .avListIcon,
.avMediaUserIcon .avListIcon {
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.45));
}

.avToolbarIcon,
.avVolumeImg,
.radioVolumeImg {
  width: 20px;
  height: 20px;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}

.avTalkCell {
  width: auto;
  min-width: 72px;
  white-space: nowrap;
  padding-left: 4px;
  padding-right: 4px;
  position: relative;
  z-index: 3;
}

.avIconCell.avOffState::after,
.avIconCell.avMutedState::after {
  content: "";
  position: absolute;
  left: 1px;
  right: 1px;
  top: 15px;
  height: 2px;
  background: #ff2a2a;
  transform: rotate(-52deg);
  transform-origin: center;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.6);
  pointer-events: none;
}

.avStateicon.avOffState::after,
.avFriendStateIcon.avOffState::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 23px;
  height: 2px;
  background: #ff2a2a;
  transform: translate(-50%, -50%) rotate(-52deg);
  transform-origin: center;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.6);
  pointer-events: none;
}

.avStateicon.avRemoteMicTrigger,
.avStateicon.avRemoteMediaTrigger {
  cursor: pointer;
  position: relative;
}

.avStateicon.avCameraRequestTrigger,
.avFriendStateIcon.avCameraRequestTrigger {
  cursor: pointer;
  position: relative;
  touch-action: manipulation;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.avStateicon.avCameraRequestTrigger .avListIcon,
.avFriendStateIcon.avCameraRequestTrigger .avListIcon {
  display: block;
  pointer-events: none;
}

#avSettingsButton.avSettingsActive .avToolbarIcon {
  filter: drop-shadow(0 0 6px rgba(255, 0, 0, 0.8));
}

.avSubpanel {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
  z-index: 22;
}

#avSettingsPanel {
  position: relative;
  z-index: 120;
  pointer-events: auto;
}

#avCameraControls,
#avMicControls,
#avCameraAutoapproveWrap {
  position: relative;
  z-index: 121;
  pointer-events: auto;
}

.avSubpanel.hidden {
  display: none;
}

.avSubpanelNote {
  font-size: 12px;
  opacity: 0.9;
}

.avAutoapproveWrap {
  margin-bottom: 2px;
  display: flex;
  align-items: center;
}

.avAutoapproveItem {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  line-height: 1.3;
  cursor: pointer;
  padding: 0;
  margin: 0;
  width: 100%;
}

.avAutoapproveItem input[type="checkbox"] {
  margin: -1px 0 0;
  flex: 0 0 auto;
}

.roomFeatureSetting {
  display: flex;
  align-items: center;
  gap: 10px;
}
.roomFeatureSetting .settingCheckboxLabel {
  flex: 1 1 48%;
  min-width: 0;
}
.roomFeatureSetting > .vcRoomFeatureMode,
.roomFeatureSetting > .selectboxit-container {
  flex: 1 1 52%;
  width: 0;
  min-width: 130px;
  max-width: none;
}
.roomFeatureSetting .vcRoomFeatureMode,
.roomFeatureSetting .selectboxit {
  width: 100% !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.roomFeatureSetting .selectboxit-text {
  max-width: calc(100% - 28px) !important;
  overflow: hidden;
  text-overflow: ellipsis;
}
.roomSettingDisabled .settingCheckboxLabel span,
.roomSettingDisabled .vcLabel {
  color: #8d8d8d;
  opacity: 0.72;
}
.roomSettingDisabled select,
.roomSettingDisabled .selectboxit-container,
.roomSettingDisabled input:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}
.roomDependentSettings {
  display: block;
}

.avAutoapproveLabel {
  display: block;
}

.avTalkButton {
  width: 100%;
  min-width: 0;
  min-height: 28px;
  padding: 0;
  opacity: 0.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  position: relative;
  z-index: 4;
  display: block;
}

.avTalkButton.avTalkDisabled {
  opacity: 0.4;
  cursor: default;
}

.avTalkButton:disabled {
  cursor: default;
}

.avTalkButton.activeTalk,
.avTalkButton.avTalkEnabled {
  opacity: 1;
}

.avDeviceSelect {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
  position: relative;
  z-index: 122;
  pointer-events: auto;
}

#avSettingsPanel .selectboxit-container,
#avSettingsPanel .selectboxit-container .selectboxit,
#avSettingsPanel .selectboxit-container .selectboxit-options {
  position: relative;
  z-index: 123;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
  pointer-events: auto;
}

#avSettingsPanel .selectboxit-container {
  display: none !important;
}

#avSettingsPanel .selectboxit-container .selectboxit-options {
  min-width: 100% !important;
  left: 0 !important;
  right: auto !important;
}

.avTalkButton.activeTalk {
  color: #fff;
  background: linear-gradient(180deg, #ff6b6b 0%, #e73333 48%, #970000 100%);
  box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.18), 0 0 14px rgba(255, 0, 0, 0.85);
}

.avMediaTalkRow .avMediaTalkButton {
  display: flex;
  width: auto;
  flex: 0 0 88px;
  opacity: 0.4;
}

.avMediaTalkRow .avMediaTalkButton.activeTalk,
.avMediaTalkRow .avMediaTalkButton.avTalkEnabled {
  opacity: 1;
}

.vcAvWebrtcVolume {
  display: flex;
  align-items: center;
  margin: 0px;
}

#avSoundDisplay {
  width: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#avVolumeWrap {
  flex: 1 1 auto;
  padding-left: 2px;
  display: flex;
  align-items: center;
  min-width: 0;
}

#avVolumeSlider {
  width: 100%;
  margin: 0;
  position: relative;
  top: 1px;
  touch-action: none;
}

.avListIcon {
  width: auto;
  height: 21px;
  max-width: 21px;
  display: block;
  margin: 0 auto;
}
body.avCompactMode .avMobileToggleItem {
  display: block;
  width: 100%;
}
body.avCompactMode .avMobileToggleItem.avMobileLauncherHidden {
	display: none;
}
body.avCompactMode .avMobileToggleItem .avMobileToggle {
  display: inline-flex;
  width: 100%;
  margin: 0;
}
body.avCompactMode .panelAvItem {
  display: none;
}
body.avCompactMode #avMobileChatSlot .panelAvItem {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin: 0 0 5px 0;
}
body.avCompactMode #avMobileChatSlot .avPanelContent {
  display: table;
  width: 100%;
  table-layout: fixed;
  padding: 6px 6px 0 6px;
  box-sizing: border-box;
}
body.avCompactMode #avMobileChatSlot .avPanelHeader {
  display: block;
}
body.avCompactMode #avMobileChatSlot .avPanelTitle {
	clip-path: none;
}
body.avCompactMode #avMobileChatSlot .avMobilePanelClose {
	position: absolute;
	top: 0;
	right: 1px;
	bottom: 0;
	left: auto;
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: auto;
	padding: 0;
	cursor: pointer;
	z-index: 125;
}
@media screen and (max-width: 768px) {
	#roomBannerImage {
		max-height: 100px;
	}
}
body.avCompactMode #avMobileChatSlot .avMobileLayout {
  display: table-row;
}
body.avCompactMode #avMobileChatSlot .avMobileVisualBox,
body.avCompactMode #avMobileChatSlot .avMobileControlsBox {
  display: table-cell;
  vertical-align: middle;
  box-sizing: border-box;
}
body.avCompactMode #avMobileChatSlot .avMobileVisualBox {
  width: 104px;
  padding-right: 6px;
}
body.avCompactMode #avMobileChatSlot .avPreviewRow {
  margin-bottom: 0;
  gap: 4px;
}
body.avCompactMode #avMobileChatSlot .avPreviewBox {
  width: calc(100% - 10px);
  max-width: calc(100% - 10px);
}
body.avCompactMode #avMobileChatSlot #avPreviewLens {
  height: 84%;
  max-width: 84%;
}
body.avCompactMode #avMobileChatSlot .avLevelMeter {
  width: 6px;
  min-width: 6px;
}
body.avCompactMode #avMobileChatSlot .avIconCell {
  width: 22px;
  min-width: 22px;
  height: 24px;
}
body.avCompactMode #avMobileChatSlot .avToolbarIcon,
body.avCompactMode #avMobileChatSlot .avVolumeImg {
  width: 16px;
  height: 16px;
}
body.avCompactMode #avMobileChatSlot .avTalkCell {
  min-width: 62px;
  padding-left: 3px;
  padding-right: 3px;
}
body.avCompactMode #avMobileChatSlot .avTalkButton {
  min-height: 24px;
  font-size: 11px;
}
body.avCompactMode #avMobileChatSlot .avSubpanel {
  margin-top: 4px;
}
body.avCompactMode #avMobileChatSlot .vcAvWebrtcVolume {
  margin-top: 6px;
}
body.avCompactMode #avMobileChatSlot #avSoundDisplay {
  width: 18px;
  justify-content: flex-start;
}
body.avCompactMode #avMobileChatSlot #avVolumeWrap {
  padding-left: 2px;
}
body.avCompactMode #containerStream,
body.avCompactMode .avStreamWindow {
  z-index: 161 !important;
}
@media (max-width: 768px) {
  .avMediaPanel {
    --av-media-panel-height: 75vh;
    overflow: visible;
    height: var(--av-media-panel-height);
    max-height: var(--av-media-panel-height);
    display: flex;
    flex-direction: column;
  }

  .avMobileToggleItem {
    display: block;
    width: 100%;
  }

  .avMobileToggleItem .avMobileToggle {
    display: inline-flex;
    width: 100%;
    margin: 0;
  }

  .panelAvItem {
    display: none;
  }

  .avMediaGrid {
    grid-template-columns: 1fr;
    height: auto;
    min-height: 0;
    overflow: visible;
    width: 100%;
    margin-left: 0;
  }

  .avMediaTabBody {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 2px;
  }

  .avMediaSearchBox,
  .avMediaQueueBox,
  .avMediaVideoShareBox {
    height: auto;
    min-height: 0;
  }

  .avMediaVideoShareBox {
    min-height: 500px;
  }

  .avMediaVideoShareSection {
    min-height: 245px;
  }

  .avMediaResults,
  .vcAvMediaQueue {
    padding: 7px;
  }

  .avMediaResults {
    height: 230px;
    min-height: 230px;
    max-height: 230px;
  }

  .vcAvMediaQueue {
    height: 330px;
    min-height: 330px;
    max-height: 330px;
  }

  .avMediaQueueItem,
  .avMediaResult {
    gap: 8px;
  }

  .avMediaReorderButtons {
    display: flex;
  }

  .avMediaHandle {
    width: 30px;
    min-width: 30px;
    height: 30px;
  }

  #avMobileChatSlot .panelAvItem {
    display: block;
    width: 100%;
    margin: 0 0 5px 0;
  }

  #avMobileChatSlot .avPanelContent {
    display: table;
    width: 100%;
    table-layout: fixed;
    padding: 6px 6px 0 6px;
    box-sizing: border-box;
  }

  #avMobileChatSlot .avPanelHeader {
    display: block;
  }

  #avMobileChatSlot .avMobileLayout {
    display: table-row;
  }

  #avMobileChatSlot .avMobileVisualBox,
  #avMobileChatSlot .avMobileControlsBox {
    display: table-cell;
    vertical-align: middle;
    box-sizing: border-box;
  }

  #avMobileChatSlot .avMobileVisualBox {
    width: 104px;
    padding-right: 6px;
  }

  #avMobileChatSlot .avPreviewRow {
    margin-bottom: 0;
    gap: 4px;
  }

  #avMobileChatSlot .avPreviewBox {
    width: calc(100% - 10px);
    max-width: calc(100% - 10px);
  }

  #avMobileChatSlot #avPreviewLens {
    height: 84%;
    max-width: 84%;
  }

  #avMobileChatSlot .avLevelMeter {
    width: 6px;
    min-width: 6px;
  }

  #avMobileChatSlot .avIconCell {
    width: 22px;
    min-width: 22px;
    height: 24px;
  }

  #avMobileChatSlot .avToolbarIcon,
  #avMobileChatSlot .avVolumeImg {
    width: 16px;
    height: 16px;
  }

  #avMobileChatSlot .avTalkCell {
    min-width: 62px;
    padding-left: 3px;
    padding-right: 3px;
  }

  #avMobileChatSlot .avTalkButton {
    min-height: 24px;
    font-size: 11px;
  }

  #avMobileChatSlot .avSubpanel {
    margin-top: 4px;
  }

  #avMobileChatSlot .vcAvWebrtcVolume {
    margin-top: 6px;
  }

  #avMobileChatSlot #avSoundDisplay {
    width: 18px;
    justify-content: flex-start;
  }

  #avMobileChatSlot #avVolumeWrap {
    padding-left: 2px;
  }

  #containerStream,
  .avStreamWindow {
    z-index: 161 !important;
  }
}

.avStatewatcher .avListIcon {
  width: 20px;
  height: 13px;
  max-width: 20px;
  object-fit: contain;
}

.avStateicon {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  width: 24px;
  min-width: 24px;
  position: relative;
}

.avFriendStateIcon {
  width: 24px;
  min-width: 24px;
  text-align: center;
  vertical-align: middle;
  padding: 0;
  position: relative;
}

.avCameraRequestList {
  padding: 0;
}

.avCameraRequestItem {
  padding-right: 5px;
  height: 40px;
  table-layout: fixed;
}

.avCameraRequestName {
  width: auto;
  padding-left: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: table-cell !important;
  vertical-align: middle;
  line-height: normal;
  height: 40px;
}

.avCameraRequestName {
  display: flex !important;
  align-items: center;
  gap: 6px;
}

.avCameraRequestNameText {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.avCameraBlockOption {
  flex: 0 0 auto;
  cursor: pointer;
  line-height: 1;
}

.avCameraRequestItem .ulistAvatar,
.avCameraRequestItem .ulistName,
.avCameraRequestItem .ulistOption {
  vertical-align: middle;
}

.avCameraRequestItem .ulistAvatar {
  width: 36px;
  min-width: 36px;
  text-align: center;
  padding-left: 2px;
  padding-right: 2px;
}

.avCameraRequestItem .ulistAvatar img {
  margin: 0 auto;
}

body.avCompactMode #avMobileChatSlot .avIconCell.avOffState::after,
body.avCompactMode #avMobileChatSlot .avIconCell.avMutedState::after {
  left: 50%;
  right: auto;
  top: 50%;
  width: 20px;
  transform: translate(-50%, -50%) rotate(-52deg);
}

.avCameraRequestItem .ulistOption {
  width: 24px;
}

.avCameraWatchEye {
  width: 20px;
  height: 13px;
  display: block;
  margin: 0 auto;
  flex: 0 0 auto;
  object-fit: contain;
  vertical-align: middle;
}

.avCameraWatchOnly {
  width: 24px;
  min-width: 24px;
}

.avCameraWatchInactive .avCameraWatchEye {
  opacity: 0.38;
  filter: grayscale(1);
}

.avCameraChoiceModal {
  padding-top: 10px;
}

.avCameraChoiceIcon {
  margin: 0 0 8px 0;
  line-height: 1;
}

.avCameraChoiceIcon i {
  font-size: 34px;
}

.avCameraChoiceText {
  margin-top: 0;
}

.avCameraChoiceActions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.avCameraChoiceActions .regButton {
  width: 100%;
}

/* Actual speech, not merely an open microphone. Filter follows image alpha. */
.avSpeakingNow:not(.avOffState) .avListIcon {
  filter: drop-shadow(0 0 2px #59ceff) drop-shadow(0 0 5px rgba(0,145,255,.95));
}

.plusButton {
  width: 20px;
  height: 20px;
  padding: 2px;
}

.forYouItem {
  margin: 3px 0px 0px 0px;
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: stretch;
  height: 30px !important;
  min-height: 30px;
  max-height: 30px;
  box-sizing: border-box;
  overflow: hidden;
}

.forYouItem > i {
  position: absolute;
  top: 50%;
  right: 4px;
  font-size: 12px;
  transform: translateY(-50%);
}

.forYouName {
  width: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2px 5px;
  position: relative;
  box-sizing: border-box;
  height: 100%;
  line-height: normal;
}

.forYouInfo {
  width: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2px 5px;
  box-sizing: border-box;
  height: 100%;
  line-height: normal;
}

.vipExpiryInfo {
  flex-direction: column;
  line-height: 1.05;
}

.vipExpiryDate,
.vipExpiryTime {
  display: block;
  line-height: 1.05;
}

.forYouInfo #currentStatus {
  width: 100%;
  height: auto;
  min-height: 0;
  align-self: stretch;
  justify-content: center;
  gap: 3px;
  box-sizing: border-box;
}

.forYouInfo #currentStatus .statusZone,
.forYouInfo #currentStatus .vcStatusText {
  display: flex;
  align-items: center;
  height: auto;
  min-height: 0;
  vertical-align: initial;
  box-sizing: border-box;
}

.forYouInfo #currentStatus .statusZone {
  flex: 0 0 auto;
  width: auto;
  justify-content: center;
}

.forYouInfo #currentStatus .vcStatusText {
  flex: 0 1 auto;
  width: auto;
  justify-content: center;
}

.vipPackageActions {
  display: flex !important;
  align-items: stretch;
  gap: 8px;
  border-spacing: 0 !important;
}

.vipPackageActions > .vipPaymentOption {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: calc(50% - 4px);
  text-align: center;
}

.vipPackageActions > .vipPaymentOption:only-child {
  width: 100%;
}

.vipPackageActions .vipPaymentText {
  align-items: center;
  text-align: center;
}

.forYouName img {
  display: inline;
  position: absolute;
  left: 101px;
  height: 25px;
  width: 25px;
  top: 50%;
  transform: translateY(-50%);
}

.radioBox {
  display: flex;
  flex-wrap: wrap;
  align-content: stretch;
  height: 101px;
  padding: 5px;
  box-sizing: border-box;
  border-radius: 0;
  overflow: hidden;
}

.radioTop1 {
  width: 56px;
  display: block;
  text-align: center;
  padding: 3px;
  position: relative;
  height: 58px;
  box-sizing: border-box;
  border-radius: 0;
}

.radioTop2 {
  width: calc(100% - 56px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
  padding: 5px 7px 4px 7px;
  position: relative;
  height: 58px;
  box-sizing: border-box;
}

.radioBottom {
  width: 100%;
  display: block;
  text-align: center;
  padding: 0;
  margin: 0;
  position: relative;
  height: 37px;
  border-radius: 0;
  box-sizing: border-box;
}

.radioVisualWrap {
  position: absolute;
  inset: 4px;
}

.radioLabelRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 3px;
}

.radioEqualizer {
  position: relative;
  right: auto;
  bottom: auto;
  width: 24px;
  height: 13px;
  flex: 0 0 auto;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

.radioEqualizer span {
  width: 3px;
  height: 100%;
  position: absolute;
  bottom: 0;
  transform-origin: bottom center;
  display: block;
  margin: 0;
  padding: 0;
  transform: none;
}

.radioEqualizer span:nth-child(1) {
  left: 0;
  height: 38%;
  animation: radioEq1 1s ease-in-out infinite;
}

.radioEqualizer span:nth-child(2) {
  left: 5px;
  height: 78%;
  animation: radioEq2 1.1s ease-in-out infinite;
}

.radioEqualizer span:nth-child(3) {
  left: 10px;
  height: 100%;
  animation: radioEq3 0.9s ease-in-out infinite;
}

.radioEqualizer span:nth-child(4) {
  left: 15px;
  height: 62%;
  animation: radioEq2 1.2s ease-in-out infinite reverse;
}

.radioEqualizer span:nth-child(5) {
  left: 20px;
  height: 36%;
  animation: radioEq1 1s ease-in-out infinite reverse;
}

.radioLabel {
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 1px;
  min-width: 0;
}

.radioStationScreen {
  height: 28px;
  padding: 5px 7px;
  box-sizing: border-box;
  overflow: hidden;
  cursor: pointer;
}

#currentStation {
  margin: 0;
  line-height: 16px;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.currentStationName {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.currentStationPickerIcon {
  flex: 0 0 auto;
  font-size: 11px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 16px;
}

.radioPickerModal .vcPad20 {
  padding: 14px 14px 12px;
}

.radioPickerList .radioElement {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.radioPickerList .radioElement .subListName {
  min-width: 0;
  flex: 1 1 auto;
}

.radioElementIcon {
  flex: 0 0 auto;
  width: 18px;
  text-align: center;
  font-size: 14px;
}

.playerVolume {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
}

#soundDisplay {
  width: 20px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-left: 0;
  padding-right: 0;
  margin-left: 0;
}

.volumeIconCell {
  cursor: pointer;
  position: relative;
}

#playerVolume {
  flex: 1 1 auto;
  padding-left: 2px;
  padding-right: 5px;
  display: flex;
  align-items: center;
  min-width: 0;
}

#playerVolume #vcSlider {
  width: 100%;
  margin: 0;
  position: relative;
  top: 1px;
  touch-action: none;
}

.radioTop1 #playerActualStatus {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 30px;
  font-size: 27px;
  line-height: 27px;
  text-align: center;
}

@keyframes radioEq1 {
  0%,100% { height:18%; }
  50% { height:45%; }
}
@keyframes radioEq2 {
  0%,100% { height:28%; }
  50% { height:78%; }
}
@keyframes radioEq3 {
  0%,100% { height:55%; }
  50% { height:100%; }
}

.headToggle {
  width: 28px !important;
  position: relative;
  top: 0px;
}

#chatToggle {
  width: 28px !important;
  top: 55px;
  position: absolute;
  height: 38px;
  display: table-cell;
  vertical-align: middle;
  font-size: 16px;
  text-align: center;
  cursor: pointer;
  z-index: 1;
  padding-top: 9px;
  left: 5px;
}

#toggleUsers {
  width: 100% !important;
  position: relative;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  font-size: 16px;
  text-align: center;
  cursor: pointer;
  z-index: 1;
  padding: 0;
  right: auto;
  border-radius: 10px;
  overflow: visible;
  margin: 0;
}
.rightToggleTaskbar #toggleUsers .vistaTable,
.rightToggleTaskbar #toggleUsers .bcellMid {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.savedData {
  position: fixed;
  display: none;
  z-index: 1002;
  top: 12%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 138px;
  background-repeat: no-repeat;
  background-position: 19px 47%;
  max-width: 95%;
  border-radius: 10px 10px 5px 5px;
}

.savedSpan {
  padding-right: 15px;
  position: absolute;
  top: 45%;
  transform: translateY(-50%);
  left: 64px;
  text-align: left;
  max-width: 235px;
}

.savedDataInner {
  height: 100%;
}

#toggleUsers img {
  height: 22px;
  display: block;
  margin: 0;
}

#homeBtn {
  border-radius: 10px 0px 25px 10px;
  font-weight: 600;
  margin-left: 2px;
  width: 54px;
  cursor: pointer;
  height: 34px;
}

#homeBtn img {
  position: relative;
  top: 3px;
  left: -2px;
  height: 25px;
}

#vcGetPrivate {
  width: 38px;
  cursor: pointer;
  position: relative;
  z-index: 10;
  overflow: visible;
}

#vcGetPrivate #notifyPrivate {
  z-index: 12;
}

#vcGetPrivate img {
  position: relative;
  top: 2px;
  height: 23px;
}

#vcGetPrivate:hover {
  transform: scale(1.1);
  filter: brightness(1.2) drop-shadow(0 0 2px rgb(0 0 0 / 90%))
    drop-shadow(0 0 2px rgb(255 255 255 / 80%));
}

/* Keep the Start control and private task button in independent layout boxes. */
.chatPlayer {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  height: 38px;
  table-layout: auto;
  padding-left: 0;
  /* Badges extend above the taskbar; the private-window row clips itself. */
  overflow: visible;
  box-sizing: border-box;
}
.chatPlayer > .playerMenu {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  height: 38px;
  box-sizing: border-box;
}
.chatPlayer > #homeBtn {
  height: 34px;
  align-self: center;
}
.chatPlayer > #vcDpriv {
  flex: 0 0 auto;
  margin-top: 0;
  margin-bottom: 0;
  align-self: center;
}

.vcSplitter {
  width: 1px;
  height: 30px;
  display: table-cell;
}

.taskbarIcon:hover,
#chatHead2Top img:hover {
  transform: scale(1.1);
  filter: brightness(1.2) drop-shadow(0 0 2px rgb(255 255 255 / 90%))
    drop-shadow(0 0 2px rgb(255 255 255 / 80%));
}

.mainInputToolbar > * > :first-child:hover {
  filter: drop-shadow(0 0 2px rgb(255 255 255 / 90%));
}

.mainInputToolbar img {
	width: auto;
	height: auto;
	max-width: none;
	max-height: 20px;
  margin-top: 0;
}

.mainInputToolbar img,
#privateInputToolbar .privateToolItem img {
  margin-top: 0 !important;
}

#chatHead2Top .headOption img {
	filter: drop-shadow(0 0 2px rgb(255 255 255 / 54%))
	  drop-shadow(0 0 3px rgb(255 255 255 / 32%));
}
#chatHead2Top .headOption img:hover{
	filter:brightness(1.18) drop-shadow(0 0 2px rgb(255 255 255 / 98%)) drop-shadow(0 0 4px rgb(255 255 255 / 88%));
}

.vcCreateRoom {
  margin-top: 5px;
  cursor: pointer;
}

.vcCreateRoom:hover {
  filter: drop-shadow(0 0 1px rgb(255 255 255 / 90%));
}

.vcToolbar {
  display: flex;
  gap: 4px;
}

.tool-btn {
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  cursor: pointer;
  padding: 0;
}

.italic {
  font-style: italic;
  font-family: serif;
}

.underline {
  text-decoration: underline;
}

.color-picker {
  position: relative;
  width: 20px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 4px;
}

.color-swatch {
  width: 20px;
  height: 14px;
}

.color-picker {
  position: relative;
  cursor: pointer;
}

.color-popup-box {
  position: absolute;
  bottom: 27px;
  left: 0;
  padding: 5px;
  width: 195px;
  z-index: 100;
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
}

.hideZone {
  display: none;
}

.chatLogRow {
  transition: 0.2s ease;
}

@media screen and (max-width: 768px) {
  .chatLoaderPanel {
    width: min(360px, calc(100vw - 24px));
    padding: 14px 14px;
  }
  .chatLoaderConsole {
    font-size: 12px;
    min-height: 92px;
  }
  .chatLoaderLine {
    gap: 7px;
  }
  .chatLoaderPercent {
    min-width: 34px;
  }
}

/* migrated-from-blue-end */


/* targeted old-school list/header fixes */
.ulistItem .ulistName,
.ulistItem .ulistName .vcUsername,
.ulistItem .ulistOption,
.ulistItem .ulistOption i {
  color: #fff !important;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.75);
}

.vcListRank {
  height: 17px;
  width: auto;
  display: inline-block;
  vertical-align: middle;
  position: relative;
  top: 0;
}

#containerUser .userItemFlag,
#containerFriends .userItemFlag {
  display: none !important;
}

#chatHead2Top img {
  margin-bottom: 0 !important;
}

#chatHead2Top .leftGamesOption {
  padding-right: 5px;
  top: 2px;
}
#chatHead2Top .leftLogoutOption{margin-left:auto;padding-right:5px;top:2px}
@media screen and (max-width:700px){.avMediaPanelHead{height:auto;align-items:flex-start}.avMediaTabs{flex-wrap:wrap}.avMediaOnairToggle{flex-basis:100%;width:100%}}

#mainEmoticon.backgroundBox,
#privateEmoticon.backgroundBox {
  background: linear-gradient(180deg, rgba(28, 24, 43, 0.98) 0%, rgba(42, 37, 62, 0.98) 100%);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 10px 10px 0px 0px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45);
}


/* themed topic log */
.topicLog {
  display: block;
  padding: 6px 8px;
  margin: 5px 0;
  box-sizing: border-box;
}

.topicLog .chatAvatar {
  display: none !important;
}

.topicLog .privateMessageText {
  display: block;
  width: 100%;
}

.topicLog .vistaTable {
  width: 100%;
}

.topicLog .vcSptitle {
  padding: 0 20px 3px 0;
  font-size: 12px;
  line-height: 15px;
}

.topicLog .vcSptext {
  display: block;
  margin: 0;
  padding: 0;
  line-height: 17px;
}

.topicLog .vcSpclear {
  width: 18px;
  text-align: center;
  vertical-align: middle;
}


/* topic log sizing refinement */
.topicLog {
  width: calc(100% - 16px);
  margin: 8px;
  padding: 8px 10px;
}

.topicLog .vcSptitle {
  font-size: 14px;
  line-height: 18px;
}

.topicLog .vcSptext {
  font-size: 14px;
  line-height: 1.35;
  white-space: normal;
}

.topicLog .vcSptext h1,
.topicLog .vcSptext h2,
.topicLog .vcSptext h3,
.topicLog .vcSptext h4,
.topicLog .vcSptext h5,
.topicLog .vcSptext h6,
.topicLog .vcSptext p,
.topicLog .vcSptext ul,
.topicLog .vcSptext ol {
  margin: 4px 0;
}

.topicLog .vcSpclear.panelBarItem {
  display: table-cell;
  width: 24px;
  padding: 0;
  font-size: 12px;
}

.topicLog .vcSpclear.panelBarItem i {
  margin: 0 auto;
}


#findYoutube::placeholder {
  font-family: FontAwesome, sans-serif;
}

/* topic log final sizing */
.topicLog {
  width: calc(100% - 16px);
  margin: 8px;
  position: relative;
}

.topicLog .vcSptext,
.topicLog .topicText {
  font-size: 15px !important;
  line-height: 1.35;
}

.topicLog .chatMessage.textReg.topicText.vcSptext,
.topicLog .chatMessage.textSmall.vcSptext {
  font-size: var(--vc-message-size,23px) !important;
}

.topicLog .chatMessage.topicText.vcSptext {
  box-sizing: border-box;
  padding-right: 32px;
}

.topicLog.seenLog .chatMessage.textReg.topicText.vcSptext,
.topicLog.seenLog .vcSptext {
  padding: 4px 28px 4px 4px;
  font-size: 15px !important;
  line-height: 1.45;
}

.topicLog .topicClose {
  position: absolute;
  top: 5px;
  right: 5px;
  z-index: 2;
}

.vcAdminpanel_shell {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 8px;
  gap: 8px;
  box-sizing: border-box;
  color: #fff;
}

.adminPanelTabbar {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: flex-start;
}

.vcAdminpanel_tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 28px;
  padding: 0 9px;
  flex: 0 0 calc(33.333% - 4px);
  max-width: calc(33.333% - 4px);
  border: 1px solid rgba(255,255,255,0.24);
  border-radius: 8px;
  color: #fff;
  background: rgba(255,255,255,0.06);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}

.vcAdminpanel_tab i {
  flex: 0 0 auto;
}

.vcAdminpanel_tab span {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vcAdminpanel_tab:hover {
  background: rgba(255,255,255,0.12);
}

.adminPanelTabActive {
  background: linear-gradient(180deg, rgba(154, 173, 221, 0.92) 0%, rgba(93, 109, 153, 0.96) 52%, rgba(61, 72, 108, 0.98) 100%);
  border-color: rgba(255,255,255,0.86);
  color: #ffffff;
  text-shadow: 0 0 3px rgba(0,0,0,0.45);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.32),
    inset 0 -1px 0 rgba(0,0,0,0.18),
    0 0 0 1px rgba(33, 42, 69, 0.42);
}

.adminPanelSubnavWrap {
  padding-top: 5px;
  border-top: 1px solid rgba(255,255,255,0.12);
}

.adminPanelSubnav {
  display: none;
  flex-wrap: wrap;
  gap: 0;
  margin: 0;
  padding-left: 0;
}

.adminPanelSubnavActive {
  display: flex;
}

.adminPanelSubnavSingle,
.adminPanelSubnavSingle.adminPanelSubnavActive {
  display: none;
}

.adminPanelLink {
  list-style: none;
}

.adminPanelContent {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 8px;
  border-radius: 12px;
  background: rgba(0,0,0,0.12);
  border: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(10px);
}

.adminPanelContent #pageWrapper,
.adminPanelContent #pageContent,
.adminPanelContent #pageGlobal,
.adminPanelContent .pageIndata,
.adminPanelContent .adminPage {
  width: 100%;
}

.adminPanelContent #pageWrapper {
  padding: 0;
}

.adminPanelContent .pageFull:first-child {
  margin-top: 0;
}

.adminPanelContent .pageTopElem {
  margin-top: 0;
  margin-bottom: 6px;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.adminPanelContent .pageTopElem i,
.adminPanelContent .pageTopTitle i {
  display: none;
}

.adminPanelContent .pageTopTitle {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 5px 12px 6px 10px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
  color: #ffffff;
  text-shadow: 0 0 3px #000;
  background: linear-gradient(
    0deg,
    rgb(232 232 232 / 46%) 0%,
    rgb(255 255 255 / 0%) 15%,
    rgb(255 255 255 / 60%) 64%,
    rgb(222 222 222 / 37%) 100%
  );
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  clip-path: polygon(
    0% 0%,
    100% 0%,
    100% calc(100% - 8px),
    calc(100% - 24px) calc(100% - 8px),
    calc(100% - 32px) 100%,
    0% 100%
  );
}

.adminPanelContent .pageFull {
  margin-bottom: 8px;
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}

.adminPanelContent .pageElement {
  padding: 0 !important;
  border: 0;
  outline: none;
  background: none !important;
  color: #f3f7ff;
  text-shadow: 0 0 2px rgba(0,0,0,0.35);
  border-radius: 0;
  box-shadow: none;
}

.adminPanelContent .pageElement + .pageElement {
  margin-top: 8px;
}

.adminPanelContent .settingElement,
.adminPanelContent .settingElementHalf {
  margin-bottom: 8px;
}

.adminPanelContent .vcLabel,
.adminPanelContent .spTitle {
  text-shadow: none;
}

.adminPanelContent .vcLabel {
  margin-bottom: 4px;
  font-size: 12px;
  font-weight: 700;
  color: #f3f7ff;
}

.adminPanelContent .fullInput,
.adminPanelContent .fullTextarea,
.adminPanelContent input:not([type="hidden"]):not([type="file"]):not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
.adminPanelContent textarea {
  background: linear-gradient(180deg, #ffffff 0%, #eef3fb 52%, #dfe7f5 100%);
  border: 1px solid #8a96ab !important;
  color: #23314d !important;
  text-shadow: none !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.95),
    inset 0 -1px 0 rgba(164,174,193,0.85);
}
.adminPanelContent input[type="number"] {
  appearance: auto;
  -moz-appearance: auto;
}
.adminPanelContent input[type="number"]::-webkit-inner-spin-button,
.adminPanelContent input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: inner-spin-button;
  opacity: 1;
}
.massAnnouncementPage .pageElement {
  max-width: 980px;
}
.massAnnouncementIntro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.massAnnouncementTargetGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}
.massAnnouncementTargetItem {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  cursor: pointer;
}
.massAnnouncementTargetItem span {
  display: block;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.massAnnouncementTargetItem input {
  flex: 0 0 auto;
  margin: 0;
}
.massAnnouncementTargetHidden {
  display: none;
}
#massAnnouncementMessage {
  min-height: 140px;
  height: 140px;
}
@media screen and (max-width: 640px) {
  .massAnnouncementTargetGrid {
    grid-template-columns: minmax(0, 1fr);
  }
}
.massAnnouncementBox {
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  text-align: center;
}
:is(#vcLargeModal,.serviceModal-window).customAnnouncementModal .largeModalIn {
  background: transparent !important;
  border: 0 !important;
  border-radius: 3px;
  box-shadow: none !important;
}
:is(#vcLargeModal,.serviceModal-window).customAnnouncementModal .largeModalIn > .vcModalTop {
  display: none !important;
}
:is(#vcLargeModal,.serviceModal-window).customAnnouncementModal .vcModalContent {
  padding: 0 !important;
  background: transparent !important;
}
.pollChangeHint {
  margin-top: 8px;
  font-size: 12px;
  opacity: .8;
}
.massAnnouncementDate {
  margin: 0;
  font-size: 12px;
  opacity: 0.75;
  text-align: right;
  white-space: nowrap;
}
.massAnnouncementSender {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  margin-top: 0;
}
.massAnnouncementSender .postAvatar {
  margin: 0;
  width: 36px;
  flex: 0 0 36px;
}
.massAnnouncementSender .postAvatar img {
  width: 36px;
  height: 36px;
  border-radius: 0 !important;
}
.massAnnouncementSender .postInfo {
  display: block;
  padding: 0;
  text-align: left;
}
.massAnnouncementSender .vcUsername {
  text-align: center;
}
.massAnnouncementContent p,
.massAnnouncementContent li {
  text-align: left;
}
.massAnnouncementContent {
  word-break: break-word;
}
.massAnnouncementNote {
  position: relative;
  display: block;
  width: 100%;
  max-width: 100%;
  padding: 0;
  overflow: hidden;
  border-radius: 3px;
  color: #4d3700;
  background: linear-gradient(180deg, #fff7b8 0%, #ffe27a 52%, #f6c94a 100%);
  border: 1px solid #b58416;
  border-top-color: #fff6bd;
  border-left-color: #fff6bd;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 8px 24px rgba(0,0,0,.3);
  box-sizing: border-box;
}
.massAnnouncementHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 34px;
  padding: 0 9px 0 12px;
  border-bottom: 1px solid rgba(126,86,0,.35);
  background: linear-gradient(180deg,rgba(255,255,255,.38),rgba(255,255,255,.04));
}
.massAnnouncementHeading {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-weight: 700;
  text-shadow: 0 1px rgba(255,255,255,.7);
}
.massAnnouncementClose {
  position: static;
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0;
  color: #4d3700;
  background: transparent !important;
  cursor: pointer;
}
.massAnnouncementClose:hover {
  color: #1f1700;
  background: transparent !important;
}
.massAnnouncementNoteText {
  padding: 22px 20px;
  font-size: 20px;
  line-height: 1.4;
  text-align: left;
}
.massAnnouncementFooter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  padding: 10px 14px;
  border-top: 1px solid rgba(126,86,0,.25);
  background: rgba(255,255,255,.13);
}
.massAnnouncementNotifyExcerpt {
  display: block;
  max-width: 100%;
  margin-top: 3px;
  overflow: hidden;
  color: inherit;
  font-size: 11px;
  line-height: 1.3;
  white-space: nowrap;
  text-overflow: ellipsis;
  opacity: .82;
}
@media screen and (max-width: 560px) {
  .massAnnouncementNoteText { padding: 17px 14px; font-size: 18px; }
  .massAnnouncementFooter { padding: 8px 10px; }
}
.massAnnouncementContent a {
  text-decoration: underline !important;
  font-weight: inherit;
  color: #7a4200 !important;
}
.massAnnouncementContent b,
.massAnnouncementContent strong {
  font-weight: 700 !important;
}
.massAnnouncementContent .chatVideoContainer,
.massAnnouncementContent .fancybox,
.massAnnouncementContent .chatImage {
  max-width: 100%;
}
.pollModeRow { display:grid; grid-template-columns:minmax(0,1fr) minmax(130px,.35fr); gap:12px; align-items:end; }
.pollOptionBuilder { margin:0 0 18px; }
.pollOptionRow { display:flex; align-items:center; gap:7px; margin:7px 0; }
.pollOptionRow .fullInput { flex:1 1 auto; min-width:0; }
.pollOptionRemove { flex:0 0 30px; width:30px; height:30px; border:0; background:transparent; color:#d34b4b; cursor:pointer; }
.pollContent { padding:18px 20px; text-align:left; }
.pollContent h3 { margin:0 0 15px; font-size:20px; color:#493400; }
.pollAnswerLimit { margin:0 0 10px; font-size:12px; opacity:.82; }
.vcPollOptions { display:grid; gap:8px; margin-bottom:15px; }
.pollVoteOption { display:flex; align-items:center; gap:10px; padding:10px 12px; border:1px solid rgba(94,66,0,.3); border-radius:4px; background:rgba(255,255,255,.22); cursor:pointer; }
.pollVoteOption input { flex:0 0 auto; margin:0; }
.pollVoteButton { width:100%; }
.pollThanks,.pollComplete { padding:10px 12px; margin-bottom:14px; border-radius:4px; font-weight:700; }
.pollThanks { color:#174f24; background:rgba(95,190,102,.22); border:1px solid rgba(28,111,45,.45); }
.pollComplete { color:#584000; background:rgba(255,255,255,.25); border:1px solid rgba(94,66,0,.28); }
.pollResult { margin:12px 0; }
.pollResultHead { display:flex; justify-content:space-between; gap:10px; font-size:14px; }
.pollResultHead span { min-width:0; overflow-wrap:anywhere; }
.pollResultTrack { height:13px; margin-top:5px; overflow:hidden; border:1px solid rgba(84,59,0,.45); border-radius:3px; background:rgba(255,255,255,.28); }
.pollResultTrack span { display:block; height:100%; background:linear-gradient(180deg,#82c5ff,#2879bd); transition:width .35s ease; }
.pollResultVotes,.pollTotal,.pollExpiry { font-size:11px; opacity:.78; }
.pollTotal { margin-top:13px; font-weight:700; }
.pollExpiry { margin-top:16px; padding-top:10px; border-top:1px solid rgba(94,66,0,.25); }
.pollAdminList { display:grid; gap:10px; padding-top:10px; padding-bottom:10px; }
.pollAdminToolbar { display:flex; justify-content:flex-end; padding:2px 0; }
.pollDangerButton { color:#fff !important; border:1px solid #8e1f1f !important; background:linear-gradient(180deg,#e66b6b 0%,#b92f2f 52%,#8f1e1e 100%) !important; text-shadow:0 1px 1px rgba(0,0,0,.65); }
.pollDangerButton:hover { background:linear-gradient(180deg,#ef7c7c 0%,#ca3b3b 52%,#a32626 100%) !important; }
.pollPauseButton { margin-left:5px; margin-right:5px; }
.pollDeleteConfirmIcon { display:block; margin:0 auto 12px; color:#c83232; font-size:38px; }
.pollConfirmActions { display:flex; gap:8px; justify-content:center; margin-top:18px; }
.pollConfirmActions .regButton { min-width:105px; }
.accountDeletionNotice{background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(0,0,0,.08))}.accountDeletionIcon{display:flex;width:58px;height:58px;align-items:center;justify-content:center;margin:0 auto 14px;border:1px solid rgba(218,170,42,.7);border-radius:50%;color:#e1b43f;background:radial-gradient(circle,rgba(225,180,63,.16),rgba(225,180,63,.03));font-size:28px}.accountDeletionText{line-height:1.65}.accountDeletionActions{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:18px}
.pollAdminItem { border:1px solid rgba(120,130,150,.45); border-radius:4px; overflow:hidden; background:rgba(255,255,255,.035); }
.pollAdminItem summary { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:10px; padding:12px; cursor:pointer; }
.pollAdminQuestion { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-weight:700; }
.pollAdminMeta { font-size:11px; opacity:.72; }
.pollAdminState { width:9px; height:9px; border-radius:50%; }
.pollStateActive { background:#38b85b; box-shadow:0 0 6px rgba(56,184,91,.65); }
.pollStateClosed { background:#8d929c; }
.pollAdminDetails { padding:14px; border-top:1px solid rgba(120,130,150,.35); }
.pollAdminDates { display:flex; flex-wrap:wrap; gap:8px 18px; margin-bottom:13px; font-size:11px; opacity:.8; }
.pollAdminEdit { margin:14px 0; padding:12px; border:1px solid rgba(120,130,150,.35); }
.pollExistingOption { margin:5px 0; padding:8px; opacity:.75; }
.pollAdminDetails .pollResults { margin:12px 0; }
.pollAdminDetails .pollResultTrack { border-color:#7f8da5; background:#dfe5ef; }
@media screen and (max-width:560px){.pollModeRow{grid-template-columns:1fr}.pollContent{padding:14px}.pollAdminItem summary{grid-template-columns:auto minmax(0,1fr)}.pollAdminMeta{grid-column:2}.pollAdminDates{display:grid;gap:5px}}

.adminPanelContent .selectboxit-btn,
.adminPanelContent .selectboxit-list {
  color: #23314d !important;
  text-shadow: none !important;
}

.adminPanelContent .selectboxit-btn {
  background: linear-gradient(180deg, #ffffff 0%, #eef3fb 52%, #dfe7f5 100%) !important;
  border: 1px solid #8a96ab !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.95),
    inset 0 -1px 0 rgba(164,174,193,0.85);
}

.adminPanelContent .regButton,
.adminPanelContent .themeBtn,
.adminPanelContent .defaultBtn {
  min-height: 28px;
  padding: 0 10px;
  font-size: 12px;
  line-height: 26px;
}

.adminPanelContent .listingElement,
.adminPanelContent .listElement,
.adminPanelContent .subListItem,
.adminPanelContent .boxRoom,
.adminPanelContent .ipBox,
.adminPanelContent .consoleDataLogs {
  padding: 8px 10px;
  border: 1px solid #b8c2d1;
  border-top-color: #eef3fb;
  border-left-color: #eef3fb;
  border-bottom-color: #8d99ab;
  border-right-color: #8d99ab;
  background: linear-gradient(180deg, #fbfcff 0%, #eef2f8 46%, #dbe3ef 100%);
  color: #23314d;
  text-shadow: none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.95),
    inset 0 -1px 0 rgba(164,174,193,0.35);
}

.adminPanelContent .subListItem,
.adminPanelContent .boxRoom {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 34px;
  padding: 4px 6px;
  margin: 0 0 6px 0;
  float: none;
  box-sizing: border-box;
  overflow: hidden;
}

.adminPanelContent #addonsList,
.adminPanelContent #adminStreamList,
.adminPanelContent #memberList,
.adminPanelContent #roomsList,
.adminPanelContent #ipList,
.adminPanelContent #updateList,
.adminPanelContent #consoleResults,
.adminPanelContent #actionMutedList,
.adminPanelContent #actionBannedList,
.adminPanelContent #actionKickedList,
.adminPanelContent #badwordList,
.adminPanelContent #spamList,
.adminPanelContent #nameList,
.adminPanelContent #emailList {
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  color: #f3f7ff;
}

.adminPanelContent #memberList .listingElement,
.adminPanelContent #memberList .listElement,
.adminPanelContent #memberList .subListItem,
.adminPanelContent #actionMutedList .listingElement,
.adminPanelContent #actionMutedList .listElement,
.adminPanelContent #actionMutedList .subListItem,
.adminPanelContent #actionBannedList .listingElement,
.adminPanelContent #actionBannedList .listElement,
.adminPanelContent #actionBannedList .subListItem,
.adminPanelContent #actionKickedList .listingElement,
.adminPanelContent #actionKickedList .listElement,
.adminPanelContent #actionKickedList .subListItem {
  background: linear-gradient(180deg, #7c88ad 0%, #687395 48%, #535d7f 100%);
  border-top-color: #aab4d3;
  border-left-color: #aab4d3;
  border-bottom-color: #39415d;
  border-right-color: #39415d;
  color: #f7fbff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    inset 0 -1px 0 rgba(0,0,0,0.18);
}

.adminPanelContent .subListImg,
.adminPanelContent .subListAvatar {
  width: 28px;
  flex: 0 0 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.adminPanelContent .subListImg img,
.adminPanelContent .subListAvatar img {
  width: 24px;
  height: 24px;
  border-radius: 0;
}

.adminPanelContent .subListActive {
  width: 10px !important;
  height: 10px !important;
  bottom: -1px;
  right: -1px;
  border-radius: 50% !important;
  border: none !important;
  display: block;
}

.adminPanelContent .subListName {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0 6px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-self: stretch;
  font-size: 12px;
  font-weight: 700;
  color: inherit;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}

/* Player rows use the same compact height as other admin lists. */
#adminStreamList .subListName {
  align-self: center;
  align-items: center;
  flex-direction: row;
  justify-content: flex-start;
  min-height: 24px;
  line-height: normal;
}

#adminStreamList .subListItem {
  align-items: center;
}

.adminPanelContent .subListOption,
.adminPanelContent .subListIcon,
.adminPanelContent .subListRicon,
.adminPanelContent .subListState,
.adminPanelContent .subListSelected {
  width: 22px;
  flex: 0 0 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}

.adminPanelContent .subListOption i,
.adminPanelContent .subListIcon i,
.adminPanelContent .subListRicon i,
.adminPanelContent .subListState i,
.adminPanelContent .subListSelected i {
  margin: 0;
}

.adminPanelContent .listingElement:hover,
.adminPanelContent .listElement:hover,
.adminPanelContent .subListItem:hover,
.adminPanelContent .boxRoom:hover,
.adminPanelContent .ipBox:hover {
  background: linear-gradient(180deg, #8b90b3 0%, #5f688f 48%, #434c73 100%);
  border-color: #565f86;
  color: #ffffff;
  text-shadow: 0 0 2px rgba(0,0,0,0.35);
}

.adminPanelContent .statusList {
  margin: 0;
  padding: 0;
  list-style: none;
}

.adminPanelContent .statusList .listingElement + .listingElement {
  margin-top: 4px;
}

.adminPanelContent #addonsList {
  margin: -8px;
}

.adminPanelContent #addonsList .subListItem.vcBtauto {
  margin: 0 0 6px 0;
}

.adminPanelContent #addonsList .subListName.addonsName {
  padding-right: 8px;
}

.adminPanelContent #addonsList .subListCell.vcBcauto {
  width: auto;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
}

.adminPanelContent #addonsList .vcButton {
  min-height: 24px;
  padding: 0 7px;
  line-height: 22px;
  font-size: 11px;
}

.adminPanelContent .adminSearch {
  display: table;
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
}

.adminPanelContent #adminMemberSearchTypeSelectBoxItContainer,
.adminPanelContent #adminMemberSearchTypeSelectBoxIt {
  width: 100% !important;
}

.adminPanelContent #adminMemberSearchTypeSelectBoxIt .selectboxit-text {
  max-width: calc(100% - 28px) !important;
}

.adminPanelContent .adminMemberSearchTypeWrap,
.adminPanelContent .adminMemberSearchWrap {
  margin-bottom: 10px;
}

.adminPanelContent .adminSearch .adminInput,
.adminPanelContent .adminSearchBtn {
  border: 1px solid #b8c2d1;
  border-top-color: #eef3fb;
  border-left-color: #eef3fb;
  border-bottom-color: #8d99ab;
  border-right-color: #8d99ab;
  background: linear-gradient(180deg, #fbfcff 0%, #eef2f8 46%, #dbe3ef 100%);
  color: #23314d;
  text-shadow: none;
}

.adminPanelContent .adminSearchBtn {
  width: 38px;
  vertical-align: middle;
}

.adminPanelContent .adminMainImagesGrid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.adminPanelContent .adminImageCard {
  flex: 1 1 calc(50% - 5px);
  min-width: 240px;
	margin-bottom: 0;
	padding-bottom: 2px;
}

.adminPanelContent .adminImageCard .roomBgPreview {
  margin-top: 0;
}

.adminPanelContent .adminImageCard .roomBgControl {
	margin: 0;
	min-height: 0;
	height: 0;
}

.adminPanelContent .adminImageCard .regButton,
.adminPanelContent .adminImageCard .themeBtn,
.adminPanelContent .adminImageCard .defaultBtn,
.adminPanelContent .adminImageCard .roomBgBtn {
  min-height: 0;
  min-width: 136px;
  padding: 8px;
  line-height: normal;
  font-size: inherit;
  font-weight: 700;
}

.adminPanelContent .roomBgControl form {
  margin: 0;
}

.adminPanelContent #vcAdminroomlogoupload,
.adminPanelContent #vcAdminloginbgupload,
.adminPanelContent #vcAdminchatbgupload {
  display: block;
}

.adminPanelContent .adminImageCard #removeAdminRoomlogo.hidden,
.adminPanelContent .adminImageCard #removeAdminLoginbg.hidden,
.adminPanelContent .adminImageCard #removeAdminChatbg.hidden {
  display: inline-block !important;
  visibility: hidden;
  pointer-events: none;
}

.adminPanelContent .adminLogoPreview .roomBgPreviewInner {
  padding: 12px;
}

.adminPanelContent .adminLogoThumb {
  display: block;
  width: 100%;
  height: 126px;
  object-fit: contain;
}

.adminPanelContent .adminLogoThumb.hidden,
.adminPanelContent #adminLoginbgPreview .roomBgThumb.hidden,
.adminPanelContent #adminChatbgPreview .roomBgThumb.hidden {
  display: none;
}

.adminPanelContent .adminLogoPreview .roomBgPreviewText.hidden,
.adminPanelContent #adminLoginbgPreview .roomBgPreviewText.hidden,
.adminPanelContent #adminChatbgPreview .roomBgPreviewText.hidden {
  display: none;
}

.adminPanelContent .spBox {
  width: calc(33.333% - 6px);
  float: left;
  margin: 0 4px 8px 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.adminPanelContent .spContent {
  min-height: 66px;
  padding: 7px 9px;
  border: 1px solid #b8c2d1;
  border-top-color: #eef3fb;
  border-left-color: #eef3fb;
  border-bottom-color: #8d99ab;
  border-right-color: #8d99ab;
  background: linear-gradient(180deg, #fbfcff 0%, #eef2f8 46%, #dbe3ef 100%);
  color: #23314d;
  text-shadow: none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.95),
    inset 0 -1px 0 rgba(164,174,193,0.35);
}

.adminPanelContent .spIcon {
  display: none;
}

.adminPanelContent .spInfo {
  display: block;
  width: 100%;
}

.adminPanelContent .spCount {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.15;
  color: #23314d;
}

.adminPanelContent .spTitle {
  display: block;
  margin: -7px -9px 8px -9px;
  padding: 4px 8px 5px 8px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  color: #ffffff;
  text-shadow: 0 0 3px #000;
  background: linear-gradient(180deg, rgba(26, 23, 39, 0.78) 0%, rgba(54, 49, 76, 0.84) 100%);
  border-bottom: 1px solid rgba(255,255,255,0.16);
}

.adminPanelContent .spTop,
.adminPanelContent .spBottom {
  display: block;
}

.adminPanelContent .spTop p,
.adminPanelContent .spBottom p {
  margin: 0;
}

.adminPanelContent .spTop p {
  font-size: 18px;
  font-weight: 700;
  color: #23314d;
}

.adminPanelContent .spTop i {
  display: none;
}

.adminPanelContent .spBottom p {
  margin-top: 6px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  color: #23314d;
}

.adminPanelContent .pageFull::after {
  content: "";
  display: block;
  clear: both;
}

@media (max-width: 768px) {
  .adminPanelContent .spBox {
    width: calc(50% - 4px);
  }
}

@media (max-width: 520px) {
  .adminPanelContent .spBox {
    width: 100%;
    margin-right: 0;
  }
}

@media (max-width: 768px) {
  .vcAdminpanel_shell {
    padding: 8px;
    gap: 8px;
  }

  .adminPanelTabbar,
  .adminPanelSubnav {
    gap: 4px;
  }

  .vcAdminpanel_tab {
    flex: 0 0 calc(50% - 2px);
    max-width: calc(50% - 2px);
  }

  .adminPanelSubnavWrap .adminPanelSubnav {
    display: none;
  }

  .adminPanelSubnavWrap .adminPanelSubnav.adminPanelSubnavActive {
    display: flex;
  }

  .adminPanelContent {
    padding: 8px;
  }
}

.adminPanelContent .docuBox,
.adminPanelContent .docuHead,
.adminPanelContent .docuContent,
.adminPanelContent .docuDescription,
.adminPanelContent .docuTitle,
.adminPanelContent .subList,
.adminPanelContent .backgroundReply {
  color: #f3f7ff !important;
}

.adminPanelContent .docuContent a,
.adminPanelContent .docuDescription a,
.adminPanelContent .pageElement a:not(.vcButton):not(.regButton):not(.themeBtn):not(.defaultBtn) {
  color: #8fe7ff !important;
  background: transparent !important;
  text-shadow: 0 0 2px rgba(0,0,0,0.45);
}

.adminPanelContent .selectboxit-options a,
.adminPanelContent .selectboxit-options .selectboxit-option-anchor,
.adminPanelContent .selectboxit-list .selectboxit-option-anchor,
.adminPanelContent .selectboxit-container .selectboxit,
.adminPanelContent .selectboxit-container .selectboxit .selectboxit-text,
.adminPanelContent .selectboxit-container .selectboxit-default-arrow,
.adminPanelContent .selectboxit-options li,
.adminPanelContent .selectboxit-options li a,
.adminPanelContent .selectboxit-options li span,
.adminPanelContent .selectboxit-list .selectboxit-focus .selectboxit-option-anchor,
.adminPanelContent .selectboxit-list .selectboxit-selected .selectboxit-option-anchor,
.adminPanelContent .selectboxit-list .selectboxit-hover .selectboxit-option-anchor {
  color: #23314d !important;
  text-shadow: none !important;
}

.adminPanelContent .selectboxit-options li a,
.adminPanelContent .selectboxit-options li span,
.adminPanelContent .selectboxit-list .selectboxit-focus .selectboxit-option-anchor,
.adminPanelContent .selectboxit-list .selectboxit-selected .selectboxit-option-anchor,
.adminPanelContent .selectboxit-list .selectboxit-hover .selectboxit-option-anchor {
  background: transparent !important;
}

#chatRightData .selectboxit-container .selectboxit,
#chatRightData .selectboxit-container .selectboxit .selectboxit-text,
#chatRightData .selectboxit-container .selectboxit-default-arrow,
#chatRightData .selectboxit-container .selectboxit-options,
#chatRightData .selectboxit-container .selectboxit-options li,
#chatRightData .selectboxit-container .selectboxit-options li a,
#chatRightData .selectboxit-container .selectboxit-options li span,
#chatRightData .selectboxit-container .selectboxit-option-anchor,
#chatRightData .selectboxit-list .selectboxit-focus .selectboxit-option-anchor,
#chatRightData .selectboxit-list .selectboxit-selected .selectboxit-option-anchor,
#chatRightData .selectboxit-list .selectboxit-hover .selectboxit-option-anchor,
#vcAdminpanel_shell .selectboxit-container .selectboxit,
#vcAdminpanel_shell .selectboxit-container .selectboxit .selectboxit-text,
#vcAdminpanel_shell .selectboxit-container .selectboxit-default-arrow,
#vcAdminpanel_shell .selectboxit-container .selectboxit-options,
#vcAdminpanel_shell .selectboxit-container .selectboxit-options li,
#vcAdminpanel_shell .selectboxit-container .selectboxit-options li a,
#vcAdminpanel_shell .selectboxit-container .selectboxit-options li span,
#vcAdminpanel_shell .selectboxit-container .selectboxit-option-anchor,
#vcAdminpanel_shell .selectboxit-list .selectboxit-focus .selectboxit-option-anchor,
#vcAdminpanel_shell .selectboxit-list .selectboxit-selected .selectboxit-option-anchor,
#vcAdminpanel_shell .selectboxit-list .selectboxit-hover .selectboxit-option-anchor {
  color: #23314d !important;
  text-shadow: none !important;
}

.adminPanelContent .docuBox .themeColor,
.adminPanelContent .docuBox .subText,
.adminPanelContent .docuBox .bold,
.adminPanelContent .docuBox p,
.adminPanelContent .docuBox li {
  color: #f3f7ff !important;
}

.adminPanelContent .addonKeyList {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.adminPanelContent .addonKeyRow {
  display: flex;
  align-items: center;
  gap: 6px;
}

.adminPanelContent .addonKeyRow .addonKeyInput {
  flex: 1 1 auto;
  min-width: 0;
}

.adminPanelContent .addonKeyBtn,
.adminPanelContent .addonKeyAddBtn {
  flex: 0 0 auto;
}

.emoAdminCreate, .vcEmoAdminUpload { display:flex; align-items:center; gap:8px; }
.emoAdminCreate .fullInput, .vcEmoAdminUpload .fullInput { flex:1 1 auto; min-width:0; }
.emoAdminNote { margin:8px 0 12px; }
.emoAdminCategoryList { display:grid; gap:12px; min-height:80px; padding:11px 0; box-sizing:border-box; }
.emoAdminCategoryList.hideZone { display:none; }
.emoAdminCategory { margin:0; border:1px solid rgba(255,255,255,.2); border-radius:8px; overflow:hidden; background:rgba(0,0,0,.12); }
.emoAdminCategoryHead { display:flex; align-items:center; gap:8px; padding:8px; background:rgba(255,255,255,.07); }
.emoAdminCategoryMove, .emoAdminCategoryLocked, .emoAdminCategoryHead .vcButton { width:30px; height:30px; padding:0; flex:0 0 30px; }
.emoAdminCategoryLocked { opacity:.65; cursor:not-allowed; }
.emoAdminCategoryIcon { width:34px; height:34px; display:flex; align-items:center; justify-content:center; }
.emoAdminCategoryIcon img { max-width:32px; max-height:32px; }
.emoAdminCategoryName { flex:1 1 auto; min-width:0; font-weight:bold; overflow:hidden; text-overflow:ellipsis; }
.emoAdminCategoryName span { opacity:.7; font-weight:normal; }
.emoAdminCategoryName strong { vertical-align:middle; }
.emoAdminTypeBadge { display:inline-flex; align-items:center; margin-right:7px; padding:2px 6px; border:1px solid rgba(255,255,255,.22); border-radius:10px; font-size:10px; line-height:1.2; text-transform:uppercase; vertical-align:middle; }
.emoAdminTypeEmoticon { color:#b9e5ff; background:rgba(36,137,190,.22); }
.emoAdminTypeSticker { color:#ffe0a8; background:rgba(184,113,31,.24); }
.emoAdminCategoryHead { cursor:pointer; }
.emoAdminCategoryChevron { flex:0 0 auto; transition:transform .15s ease; }
.emoAdminCategoryClosed .emoAdminCategoryChevron { transform:rotate(-90deg); }
.emoAdminCategoryClosed .emoAdminCategoryBody { display:none; }
.emoAdminIconUpload { display:inline-flex; align-items:center; justify-content:center; cursor:pointer; }
.emoAdminIconUpload input { display:none; }
.emoAdminCategoryBody { padding:10px; }
.vcEmoAdminUpload { padding:7px; border:1px dashed rgba(255,255,255,.25); border-radius:6px; transition:.15s ease; }
.vcEmoAdminUpload.dragOver { border-color:rgba(255,255,255,.85); background:rgba(255,255,255,.1); box-shadow:inset 0 0 10px rgba(255,255,255,.08); }
.emoAdminItems { display:grid; grid-template-columns:repeat(auto-fill,minmax(118px,1fr)); gap:8px; margin-top:8px; min-height:46px; }
.emoAdminItem { min-width:0; padding:7px; border:1px solid rgba(255,255,255,.16); border-radius:6px; background:rgba(255,255,255,.04); }
.emoAdminItemPreview { height:82px; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.emoAdminItemPreview img { max-width:100%; max-height:78px; object-fit:contain; }
.emoAdminItemName { margin:5px 0; font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-align:center; }
.emoAdminItemActions { display:flex; gap:5px; }
.emoAdminItemActions button { flex:1 1 50%; height:28px; padding:0; }
.emoAdminItemMove, .emoAdminCategoryMove { cursor:grab; }
.emoAdminGhost { opacity:.25; border-style:dashed; }
.emoAdminChosen { box-shadow:0 5px 18px rgba(0,0,0,.35); }
@media(max-width:640px){ .emoAdminCreate,.vcEmoAdminUpload{align-items:stretch;flex-direction:column}.emoAdminCreate button,.vcEmoAdminUpload button{width:100%}.emoAdminItems{grid-template-columns:repeat(2,minmax(0,1fr));} }
.emoAdminOverrideRow { display:grid; grid-template-columns:minmax(90px,.7fr) minmax(130px,1fr) 30px; gap:8px; align-items:center; margin-bottom:8px; }
.emoAdminOverrideRow .fullInput { min-width:0; width:100%; }
.emoAdminOverrideRow button { width:30px; height:30px; padding:0; }
.emoAdminCategoryTools { padding-top:10px; }
.emoAdminOverrideTargetWrap { display:flex; align-items:center; min-width:0; gap:7px; }
.emoAdminOverrideTargetWrap .emoOverrideTarget { flex:1 1 auto; }
.emoAdminOverridePreview { display:flex; align-items:center; justify-content:center; flex:0 0 34px; width:34px; height:34px; overflow:hidden; }
.emoAdminOverridePreview img { display:block; max-width:32px; max-height:32px; object-fit:contain; }
.emoAdminOverridePreview img[src=""] { visibility:hidden; }
.emoAdminOverrideActions { display:flex; gap:8px; margin-top:12px; }
@media(max-width:640px){.emoAdminOverrideRow{grid-template-columns:1fr 1fr 28px;gap:5px}.emoAdminOverrideActions button{flex:1 1 50%;}}

.vcVipAvatarAdminUpload { display:flex; align-items:center; gap:8px; padding:7px; border:1px dashed rgba(255,255,255,.25); border-radius:6px; transition:.15s ease; }
.vcVipAvatarAdminUpload .fullInput { flex:1 1 auto; min-width:0; }
.vcVipAvatarAdminUpload.dragOver { border-color:rgba(255,255,255,.85); background:rgba(255,255,255,.1); box-shadow:inset 0 0 10px rgba(255,255,255,.08); }
.vipAvatarAdminHint { margin:8px 0 12px; }
.vipAvatarAdminScroll { position:relative; height:min(62vh,680px); min-height:320px; overflow:auto; padding:8px; border:1px solid rgba(255,255,255,.18); border-radius:8px; background:rgba(0,0,0,.12); overscroll-behavior:contain; }
.vipAvatarAdminItems { display:grid; grid-template-columns:repeat(auto-fill,minmax(66px,1fr)); gap:6px; min-height:100%; align-content:start; }
.vipAvatarAdminItem { min-width:0; padding:5px 3px; cursor:grab; border:1px solid rgba(255,255,255,.13); border-radius:5px; background:rgba(255,255,255,.035); transition:opacity .15s ease,box-shadow .15s ease,border-color .15s ease; }
.vipAvatarAdminItem:active { cursor:grabbing; }
.vipAvatarAdminPreview { height:43px; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.vipAvatarAdminPreview img { width:auto; height:auto; max-width:34px; max-height:34px; image-rendering:auto; }
.vipAvatarAdminName { margin:2px 0 0; font-size:9px; line-height:12px; text-align:center; opacity:.72; }
.vipAvatarAdminActions { display:flex; align-items:center; justify-content:center; min-height:15px; }
.vcVipAvatarAdminDelete { border:0!important; background:transparent!important; box-shadow:none!important; color:#ef5a5a!important; width:18px!important; height:15px!important; min-width:0!important; padding:0!important; line-height:15px!important; }
.vipAvatarAdminGhost { opacity:.25; border-style:dashed; }
.vipAvatarAdminChosen { border-color:rgba(255,255,255,.6); box-shadow:0 5px 18px rgba(0,0,0,.35); }
.consoleMediaPreview { margin-top:6px; width:72px; height:54px; overflow:hidden; border:1px solid rgba(255,255,255,.28); border-radius:5px; background:#111; }
.consoleMediaPreview img { width:100%; height:100%; object-fit:cover; }
.consoleDataLogs { display:grid!important; grid-template-columns:minmax(0,1fr) auto; align-items:start; gap:10px; padding:8px!important; }
.consoleLogBody { min-width:0; }
.consoleLog { line-height:1.45; overflow-wrap:anywhere; }
.consoleLogMeta { display:grid; gap:3px; margin-top:5px; font-size:11px; line-height:1.4; }
.consoleReason { white-space:normal; overflow-wrap:anywhere; }
.consoleUserLink { cursor:pointer; font-weight:600; text-decoration:none; transition:color .15s ease,text-shadow .15s ease; }
.consoleUserLink:hover { color:#f3d56a; text-shadow:0 0 4px rgba(243,213,106,.35); }
.consoleDate { display:block; width:auto; align-self:start; white-space:nowrap; padding:2px 4px; font-size:10px; line-height:1.35; opacity:.72; }
@media(max-width:520px){.consoleDataLogs{grid-template-columns:1fr}.consoleDate{justify-self:start;padding-left:3px}}
.nameRequestBox{text-align:center}.nameRequestIcon{display:flex;align-items:center;justify-content:center;width:62px;height:62px;margin:0 auto 8px;border-radius:50%;color:#f3d56a;font-size:34px;background:rgba(0,0,0,.28);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 3px 10px rgba(0,0,0,.3)}.nameRequestTitle{font-size:16px;font-weight:bold;margin-bottom:14px}.nameRequestCompare{display:grid;grid-template-columns:minmax(0,1fr) 24px minmax(0,1fr);align-items:center;gap:7px;padding:10px;border:1px solid rgba(255,255,255,.17);border-radius:6px;background:rgba(0,0,0,.2)}.nameRequestValue{min-width:0;text-align:left}.nameRequestCurrent{text-align:right}.nameRequestValue span{display:block;margin-bottom:3px;font-size:10px;opacity:.68}.nameRequestValue strong{display:block;overflow-wrap:anywhere;font-size:14px}.nameRequestArrow{opacity:.65}.nameRequestActions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}.nameRequestActions button{width:100%;margin:0}@media(max-width:420px){.nameRequestCompare{grid-template-columns:1fr}.nameRequestArrow{transform:rotate(90deg);margin:auto}.nameRequestActions{grid-template-columns:1fr}}
@media(max-width:640px){.vcVipAvatarAdminUpload{align-items:stretch;flex-direction:column}.vcVipAvatarAdminUpload button{width:100%}.vipAvatarAdminScroll{height:65vh;min-height:300px}.vipAvatarAdminItems{grid-template-columns:repeat(5,minmax(0,1fr));}}
.roleAdminPage { min-width:0; }
.roleAdminSelf { display:grid; grid-template-columns:minmax(130px,1fr) minmax(150px,240px) 34px; align-items:center; gap:8px; margin-bottom:12px; padding:10px; border:1px solid rgba(255,255,255,.18); background:rgba(0,0,0,.12); }
.roleAdminSelf select { width:100%; }
.roleAdminTabs { margin-bottom:10px; }
.roleAdminTab.hidden { display:none !important; }
.roleAdminGroup { margin:0 0 8px; border:1px solid rgba(255,255,255,.18); background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(0,0,0,.13)); box-shadow:inset 0 1px rgba(255,255,255,.06); }
.roleAdminHidden > .roleAdminBase,.roleAdminPseudo.roleAdminHidden { opacity:.55; }
.roleAdminVisibility { color:#b9b9b9; }
.roleAdminHidden > .roleAdminBase .roleAdminVisibility,.roleAdminPseudo.roleAdminHidden .roleAdminVisibility { color:#efc45d; opacity:1; }
.roleAdminBase,.roleAdminPseudo,.roleAdminAdd { display:flex; align-items:center; min-width:0; gap:8px; padding:7px 8px; }
.roleAdminBase { min-height:44px; }
.roleAdminIconColumn { width:26px; min-width:26px; display:flex; flex-direction:column; align-items:center; gap:2px; }
.roleAdminIconPreview { width:26px; min-width:26px; height:26px; display:flex; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,.16); background:rgba(0,0,0,.22); }
.roleAdminIconPreview img { display:block; width:auto; height:17px; max-width:22px; object-fit:contain; }
.roleAdminIconRemove { width:20px; height:14px; padding:0; border:0; background:transparent; color:#d66; font-size:10px; line-height:14px; cursor:pointer; }
.roleAdminIconRemove:hover { color:#f99; }
.roleAdminIdentity { width:142px; min-width:142px; display:flex; align-items:center; gap:6px; overflow:hidden; }
.roleAdminIdentity strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.roleAdminBaseName,.roleAdminPseudoName { min-width:80px; flex:1 1 auto; }
.roleAdminActions { display:flex; align-items:center; gap:4px; flex:0 0 auto; }
.roleAdminActions .vcButton { width:30px; min-width:30px; height:28px; padding:0; display:inline-flex; align-items:center; justify-content:center; }
.roleAdminActions .roleAdminIconButton { width:30px; min-width:30px; padding:0; gap:0; cursor:pointer; }
.roleAdminIconButton input,.roleAdminNewFile input { display:none; }
.roleAdminPseudos { margin:0 8px 7px 42px; border-left:2px solid rgba(255,255,255,.13); }
.roleAdminPseudo { margin:0 0 4px 7px; padding:5px 6px; border:1px solid rgba(255,255,255,.12); background:rgba(0,0,0,.13); }
.roleAdminPseudo:last-child { margin-bottom:0; }
.roleAdminAdd { margin:0 8px 8px 49px; padding:6px; border:1px dashed rgba(255,255,255,.2); background:rgba(0,0,0,.08); }
.roleAdminNewIconPreview { flex:0 0 26px; }
.roleAdminAdd .roleAdminNewName { flex:1 1 auto; min-width:90px; }
.roleAdminNewFile { width:30px; min-width:30px; height:28px; padding:0; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; }
@media(max-width:700px){.roleAdminSelf{grid-template-columns:1fr 34px}.roleAdminSelf label{grid-column:1/-1}.roleAdminIdentity{width:calc(100% - 42px);min-width:0}.roleAdminBase,.roleAdminPseudo,.roleAdminAdd{flex-wrap:wrap}.roleAdminBaseName,.roleAdminPseudoName{order:3;flex-basis:calc(100% - 38px);margin-left:34px}.roleAdminActions{margin-left:auto}.roleAdminPseudos,.roleAdminAdd{margin-left:8px}.roleAdminAdd .roleAdminNewName{order:2;flex-basis:calc(100% - 30px)}.roleAdminNewFile{margin-left:30px}.roleAdminAdd .regButton{flex:1}}
.vcRoomEntrySettings{ margin-bottom:15px; }
.roomEntryConfirmBox{ padding-top:20px; }
.roomEntryConfirmText{ color:inherit; font-size:inherit; line-height:inherit; text-align:center; margin:0; }
.roomEntryConfirmIcon{ margin:0; line-height:1; }
.roomEntryConfirmIcon img{ width:54px; height:54px; object-fit:contain; filter:drop-shadow(0 2px 4px rgba(0,0,0,.35)); }
.roomEntryCostNote{ margin:0 0 15px; padding:6px 8px; border:1px solid #78b66b; border-top-color:#dff8d6; border-left-color:#dff8d6; border-bottom-color:#4d8c44; border-right-color:#4d8c44; background:linear-gradient(180deg,#ebffea 0%,#c9efc3 100%); color:#214f1f; font-size:11px; line-height:1.3; text-align:center; text-shadow:none; box-shadow:inset 0 1px 0 rgba(255,255,255,.9); display:flex; align-items:center; justify-content:center; gap:6px; }
.roomEntryCostNote strong{ font-weight:700; }
.roomEntryCostNote .soundEffectCostIcon{ width:16px; height:16px; object-fit:contain; flex:0 0 auto; }
.roomEntryCostNote .soundEffectNoteIcon{ width:16px; line-height:16px; text-align:center; flex:0 0 auto; font-size:15px; }
.roomEntryInsufficient{ border-color:#bd6d6d; border-top-color:#ffdada; border-left-color:#ffdada; border-bottom-color:#8e4545; border-right-color:#8e4545; background:linear-gradient(180deg,#ffeaea 0%,#efc3c3 100%); color:#5d2020; }
.coin-insufficient_note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 7px 0 10px;
  padding: 6px 8px;
  border: 1px solid #bd6d6d;
  border-top-color: #ffdada;
  border-left-color: #ffdada;
  border-bottom-color: #8e4545;
  border-right-color: #8e4545;
  background: linear-gradient(180deg,#ffeaea 0%,#efc3c3 100%);
  color: #5d2020;
  font-size: 11px;
  line-height: 1.3;
  text-align: center;
  text-shadow: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}
.coin-insufficient_note i { flex: 0 0 auto; font-size: 15px; }
.purchaseTransactionItem{display:flex;align-items:stretch;gap:12px;min-height:74px;padding:10px 12px;cursor:pointer;box-sizing:border-box}
.purchaseTransactionMain{flex:1 1 auto;min-width:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 16px;align-content:center}
.purchaseTransactionMain div{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}
.purchaseTransactionMain .purchaseTransactionReceived{grid-column:1/-1;overflow:visible;text-overflow:clip;white-space:normal;line-height:1.35}
.purchaseTransactionMain span,.purchaseDetailRow span{opacity:.72}
.purchaseTransactionSide{flex:0 0 112px;display:flex;align-items:center;justify-content:flex-end;gap:9px;text-align:right;font-size:11px;opacity:.85}
.purchaseTransactionSide i{font-size:18px}
.purchaseDetailGrid{margin:10px 0 14px;border:1px solid rgba(255,255,255,.14);background:rgba(0,0,0,.14)}
.purchaseDetailRow{display:grid;grid-template-columns:minmax(120px,.7fr) minmax(0,1.3fr);gap:12px;padding:8px 10px;border-bottom:1px solid rgba(255,255,255,.1);font-size:12px}
.purchaseDetailRow:last-child{border-bottom:0}.purchaseDetailRow b{overflow-wrap:anywhere}
.purchaseTransactionDetails .vcBoxTitle p{color:#fff!important;text-shadow:0 1px 2px #000}
@media(max-width:520px){.purchaseTransactionItem{gap:7px;padding:8px}.purchaseTransactionMain{grid-template-columns:1fr;gap:3px}.purchaseTransactionSide{flex-basis:84px;flex-direction:column;align-items:flex-end;gap:5px}.purchaseDetailRow{grid-template-columns:1fr;gap:2px}}
.roomEntryConfirmBox .regButton + .regButton{ margin-left:8px; }
.guestWriteLocked .tdInput{ position:relative; }
.guestWriteLocked textarea:disabled{ opacity:1; cursor:not-allowed; }
.guestWriteLocked .guestSendButton:disabled{ opacity:.55 !important; cursor:default !important; pointer-events:none; }
#vcMainInput.inputSendDisabled .inputTable,
#messageForm.inputSendDisabled .inputTable {
  background: transparent !important;
  opacity: 1;
}
#vcMainInput.inputSendDisabled .tdInput,
#vcMainInput.inputSendDisabled textarea,
#messageForm.inputSendDisabled .tdInput,
#messageForm.inputSendDisabled textarea {
  background: #303030 !important;
  background-image: none !important;
}
#vcMainInput.inputSendDisabled .tdInput,
#messageForm.inputSendDisabled .tdInput,
#vcMainInput.inputSendDisabled #inputtRight,
#messageForm.inputSendDisabled #privateMobileSendWrap {
  opacity: .58;
}
#vcMainInput.inputSendDisabled #inputtRight,
#messageForm.inputSendDisabled #privateMobileSendWrap {
  background: #303030 !important;
  background-image: none !important;
}
#submitButton:disabled,
#privateSend:disabled {
  background: #303030 !important;
  background-image: none !important;
  opacity: 1 !important;
  cursor: default !important;
  pointer-events: none !important;
}
#vcMainInput.inputSendDisabled textarea,
#messageForm.inputSendDisabled textarea {
	cursor: default !important;
}
#vcMainInput.inputSendDisabled textarea::placeholder,
#messageForm.inputSendDisabled textarea::placeholder,
.guestWriteLocked textarea:disabled::placeholder {
	color: rgba(255,255,255,.82) !important;
	-webkit-text-fill-color: rgba(255,255,255,.82) !important;
	opacity: 1 !important;
}
/* The overlay must remain clickable even though the underlying textarea is disabled. */
#vcMainInput.inputSendDisabled .guestRegisterInputOverlay,
#messageForm.inputSendDisabled .guestRegisterInputOverlay {
  pointer-events: auto !important;
  cursor: pointer !important;
}
#mobileInputtRight .guestSendButton:disabled,
#privateSendWrap .guestSendButton:disabled {
  opacity: .55 !important;
}
#vcMainInput.inputSendDisabled #mobileInputtRight,
#messageForm.inputSendDisabled #privateSendWrap {
  background: transparent !important;
  background-image: none !important;
  opacity: 1 !important;
}
.notifyItem .punishmentNotifyReason{display:block;margin-top:4px;white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere;line-height:1.35}
.guestRegisterInputOverlay{ position:absolute; inset:0; z-index:4; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.08); }
.guestRegisterInputOverlay{ cursor:pointer; }
.guestWriteLocked #inputtRight,
.guestWriteLocked #mobileInputtRight,
.guestWriteLocked #privateSendWrap,
.guestWriteLocked #privateMobileSendWrap{position:relative}
.guestRegisterSendOverlay{position:absolute;inset:0;z-index:5;cursor:pointer;background:transparent}
.guestFeatureDisabled{ opacity:.55; cursor:default !important; pointer-events:none !important; }
.vcGuestFeatureGate,.vipFeatureGate{ opacity:.55; cursor:pointer !important; }
.privateTopToolbarAction.vcGuestFeatureGate,
.inputItem.vcGuestFeatureGate{ pointer-events:auto !important; cursor:pointer !important; }
.listingHalfElement.vcGuestFeatureGate,.listingHalfElement.vipFeatureGate,
.editProfilePhotoButtons.vcGuestFeatureGate,.editProfilePhotoButtons.vipFeatureGate{ pointer-events:auto !important; }
.editProfileModalNotes{ padding:0; }
.editProfileModalNotes .profileInfoBox{ margin:0; width:100%; box-sizing:border-box; }
.modalMenu ul li.vcAdminprofile_actions_tab{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:0;
  height:auto;
  padding:0 4px;
  margin:0 0 0 5px;
  text-align:center;
  vertical-align:middle;
  line-height:0;
  box-sizing:border-box;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
.modalMenu ul li.vcAdminprofile_actions_tab:hover,
.modalMenu ul li.vcAdminprofile_actions_tab:active{
  border:0;
  background:transparent;
  box-shadow:none;
}
.adminProfileActionsIcon{
  width:20px;
  height:20px;
  display:block;
  object-fit:contain;
  filter:drop-shadow(0 0 2px rgba(2,2,2,.47)) drop-shadow(0 0 2px rgba(2,2,2,.14));
}
.guestPurchaseDisabled{ opacity:.55; cursor:default !important; pointer-events:none !important; }
#containerUser .guestUserItem .userNameText{ opacity:.9; }
.integrationAdminPanel .vcTabZone {
  width: 100%;
}
.vcIntegrationInstallGuide .docuDescription {
  padding: 10px;
}
.integrationGuideStep {
  padding: 9px 10px;
  margin-bottom: 8px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(0, 0, 0, .16);
  box-sizing: border-box;
}
.integrationGuideStep:last-child {
  margin-bottom: 0;
}
.integrationStepLabel {
  display: block;
  margin-bottom: 6px;
  font-weight: bold;
  line-height: 1.35;
}
.integrationGuideStep p {
  margin: 5px 0;
  line-height: 1.45;
}
.integrationFormatLabel {
  margin-top: 7px;
  overflow-wrap: anywhere;
}
.integrationFormatLabel code {
  display: inline-block;
  max-width: 100%;
  padding: 3px 6px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 3px;
  background: rgba(0, 0, 0, .28);
  color: inherit;
  white-space: normal;
  overflow-wrap: anywhere;
  box-sizing: border-box;
}
.integrationGuideLink {
  display: inline-block;
  margin-top: 3px;
  font-weight: bold;
}

/* Shared admin multiple-file upload surface. */
.adminMultiUploadZone {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 105px;
  padding: 16px;
  margin: 10px 0 12px;
  border: 1px dashed rgba(255,255,255,.38);
  background: rgba(0,0,0,.14);
  text-align: center;
  cursor: pointer;
  box-sizing: border-box;
  transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.adminMultiUploadZone input[type="file"] { display: none !important; }
.adminMultiUploadContent { display: block; min-width: 0; pointer-events: none; }
.adminMultiUploadIcon { display: block; margin-bottom: 7px; font-size: 27px; }
.adminMultiUploadTitle { display: block; font-weight: 700; line-height: 1.3; }
.adminMultiUploadHint { display: block; margin-top: 5px; font-size: 11px; line-height: 1.35; opacity: .75; }
.adminMultiUploadZone.adminMultiUploadDragover,
.adminMultiUploadZone.dragOver,
.adminMultiUploadZone.giftEditorUploadDragover {
  border-color: #7fca78;
  background: rgba(74,145,67,.2);
  box-shadow: inset 0 0 10px rgba(127,202,120,.1), 0 0 8px rgba(127,202,120,.12);
}
.adminMultiUploadZone.adminMultiUploadBusy,
.adminMultiUploadZone.giftEditorUploadBusy { opacity: .55; cursor: wait; pointer-events: none; }

/* vistachat-theme-common-start */
/* Shared component geometry and color applications. Theme files only provide palette variables. */
#globalChat {
  background: url(//) 100% 100% no-repeat;
}

a {
  color: orange;
}

body {
  background: #000000;
  color: #ffffff;
}

button {
  background: transparent;
  color: #fff;
}

.notMember {
  background: #ededed;
  color: #666;
}

.cookieWrap {
  background: #ddd;
  color: #666;
}

.backTheme {
  background: #d80303;
  color: #fff;
}

.backDark {
  background: #012832;
  color: #fff;
}

.backMed {
  background: #ededed;
  color: #666;
}

.backLite {
  background: #f3f3f3;
  color: #666;
}

.backXlite {
  background: #fff;
  color: #666;
}

.themeBtn {
  color: var(--vc-text-dark);
  background: linear-gradient(
    0deg,
    rgb(129 180 195) 0%,
    rgb(119 159 171) 11%,
    rgb(144 195 203) 50%,
    rgb(150 180 187) 100%
  );
}

.defaultBtn {
  color: var(--vc-text-dark);
  background: #a8b4c7;
  background: linear-gradient(
    0deg,
    rgb(170 182 201) 0%,
    rgb(145 155 171) 11%,
    rgb(182 191 207) 50%,
    rgba(170, 182, 202, 1) 100%
  );
}

.subBtn {
  background: #888;
  color: #fff;
}

.vcCsend {
  background-image: radial-gradient(circle, var(--vc-accent), var(--vc-accent), #000000);
  background: black;
}

.darkSelected {
  background: rgba(255, 255, 255, 0.27);
  color: #fff;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.okBtn {
  background: #b20e0e;
  color: #fff;
}

.warnBtn {
  background: orange;
  color: #fff;
}

.deleteBtn {
  background: linear-gradient(180deg, #ff6b6b 0%, #e73333 48%, #970000 100%);
  color: #fff;
}

.nameRequestRejectBtn {
  color: #fff;
  background: linear-gradient(
    0deg,
    #a81717 0%,
    #c62b2b 11%,
    #e25a5a 50%,
    #bd2929 100%
  );
}

.inputWrap {
  background: linear-gradient(180deg, var(--vc-deep-80) 0%, var(--vc-soft-80) 100%);
  border: 1px solid #ffffff47;
}

input:not([type="hidden"]):not([type="file"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]),
select,
textarea,
.selectboxit-btn {
  background: linear-gradient(180deg, #f8f9fc 0%, #e7ebf4 48%, #d8deeb 100%);
  color: var(--vc-text-dark);
  border: 1px solid #8a96ab !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1px 0 rgba(164, 174, 193, 0.9),
    0 1px 0 rgba(255, 255, 255, 0.14);
}

input:not([type="hidden"]):not([type="file"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]):focus,
select:focus,
textarea:focus,
.selectboxit-btn.selectboxit-enabled:hover,
.selectboxit-btn.selectboxit-enabled:focus,
.selectboxit-btn.selectboxit-enabled:active {
  background: linear-gradient(180deg, #ffffff 0%, #eef3fb 52%, #dfe7f5 100%);
  border-color: #6f7f99 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 -1px 0 rgba(173, 184, 204, 0.9),
    0 0 0 1px rgba(132, 167, 220, 0.2);
}

#mainMessageInput {
  background: #000;
  color: #fff;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

#privateMessageInput {
  background: #000;
  color: #fff;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

#mainInputExtra {
  background: linear-gradient(180deg, var(--vc-deep-80) 0%, var(--vc-soft-80) 100%);
  border: 1px solid #ffffff47;
  border-radius: 0;
}

#privInputExtra {
  background: linear-gradient(180deg, var(--vc-deep-80) 0%, var(--vc-soft-80) 100%);
  border: 1px solid #ffffff47;
  border-radius: 0;
}

.inputItem {
  color: #ffffff;
  text-shadow: 0 0 3px #000;
}

.topBackground,
.backgroundHeader,
.panelTop,
.emoHead,
.vcModalTop,
#containerStream.streamMediaMode #streamHeader,
.vcTextBox .pageTitle {
  background: #000000;
  background-image: linear-gradient(#000000, var(--vc-accent));
  color: #fff;
  background: linear-gradient(
    0deg,
    rgb(232 232 232 / 46%) 0%,
    rgb(255 255 255 / 0%) 15%,
    rgb(255 255 255 / 60%) 64%,
    rgb(222 222 222 / 37%) 100%
  );
  background-color: var(--vc-deep-65);
  background:
    linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.3) 0%,
      rgba(255, 255, 255, 0.08) 45%,
      transparent 50%
    ),
    linear-gradient(
      to bottom,
      transparent 50%,
      rgba(0, 0, 0, 0.15) 55%,
      rgba(0, 0, 0, 0.5) 100%
    ),
    linear-gradient(135deg, var(--vc-soft-60) 10px, transparent 60px),
    linear-gradient(225deg, var(--vc-soft-60) 10px, transparent 60px),
    linear-gradient(
        54deg,
        var(--vc-deep-60) 0 4%,
        var(--vc-soft-40) 6% 6%,
        var(--vc-deep-60) 8% 10%,
        var(--vc-deep-60) 15% 16%,
        var(--vc-soft-40) 17% 18%,
        var(--vc-deep-60) 23% 24%,
        var(--vc-soft-40) 25% 26%,
        var(--vc-deep-60) 31% 33%,
        var(--vc-deep-60) 34% 34.5%,
        var(--vc-soft-40) 36% 40%,
        var(--vc-deep-60) 41% 41.5%,
        var(--vc-soft-40) 44% 45%,
        var(--vc-soft-40) 46% 46.5%,
        var(--vc-deep-60) 48% 49%,
        var(--vc-deep-60) 50% 50.5%,
        var(--vc-deep-60) 56% 56.5%,
        var(--vc-soft-40) 57% 63%,
        var(--vc-deep-60) 67% 69%,
        var(--vc-soft-40) 70% 70%,
        var(--vc-deep-60) 73.5% 74%,
        var(--vc-soft-40) 74.5% 79%,
        var(--vc-deep-60) 80% 84%,
        var(--vc-soft-40) 85% 86%,
        var(--vc-deep-60) 87%,
        var(--vc-soft-40) 90%
      )
      0 / 100vw 100vh no-repeat fixed;
  border-top: 1.5px solid rgba(255, 255, 255, 0.7);
  border: none;
}

#containerStream.streamMediaMode #streamHeader {
  cursor: pointer;
}


.chatFooter,
.containerSubPlayer {
  background-color: var(--vc-deep-65);
  background: /* Top Gloss */
    linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.3) 0%,
      rgba(255, 255, 255, 0.08) 45%,
      transparent 50%
    ),
    /* Bottom Shadow */
      linear-gradient(
        to bottom,
        transparent 50%,
        rgba(0, 0, 0, 0.15) 55%,
        rgba(0, 0, 0, 0.5) 100%
      ),
    /* Your Pattern (Lowered Opacity) */
      linear-gradient(135deg, var(--vc-soft-60) 10px, transparent 60px),
    linear-gradient(225deg, var(--vc-soft-60) 10px, transparent 60px),
    linear-gradient(
        54deg,
        var(--vc-deep-60) 0 4%,
        var(--vc-soft-40) 6% 6%,
        var(--vc-deep-60) 8% 10%,
        var(--vc-deep-60) 15% 16%,
        var(--vc-soft-40) 17% 18%,
        var(--vc-deep-60) 23% 24%,
        var(--vc-soft-40) 25% 26%,
        var(--vc-deep-60) 31% 33%,
        var(--vc-deep-60) 34% 34.5%,
        var(--vc-soft-40) 36% 40%,
        var(--vc-deep-60) 41% 41.5%,
        var(--vc-soft-40) 44% 45%,
        var(--vc-soft-40) 46% 46.5%,
        var(--vc-deep-60) 48% 49%,
        var(--vc-deep-60) 50% 50.5%,
        var(--vc-deep-60) 56% 56.5%,
        var(--vc-soft-40) 57% 63%,
        var(--vc-deep-60) 67% 69%,
        var(--vc-soft-40) 70% 70%,
        var(--vc-deep-60) 73.5% 74%,
        var(--vc-soft-40) 74.5% 79%,
        var(--vc-deep-60) 80% 84%,
        var(--vc-soft-40) 85% 86%,
        var(--vc-deep-60) 87%,
        var(--vc-soft-40) 90%
      )
      0 / 100vw 100vh no-repeat fixed;
  border-top: 1.5px solid rgba(255, 255, 255, 0.7);
  border: none;
  outline: 1px solid rgb(255 255 255 / 42%);
}

.containerSubPlayer .musicShare.audioColor {
  background: transparent;
  border: 0;
}

.modalSelected,
.tabSelected {
  background: #aa0000;
  color: #fff;
}

.modalBack {
  background-color: rgba(0, 0, 0, 0.6);
}

.panelSelected {
  background: rgba(255, 255, 255, 0.27);
}

.regMenu {
  color: #ffffff;
}

.regSelected {
  background: linear-gradient(180deg, rgba(141, 156, 197, 0.74) 0%, rgba(72, 85, 123, 0.9) 100%);
  color: #fff;
  border-color: #ffffff75;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -1px 0 rgba(0, 0, 0, 0.12);
}

.pageMenuIcon,
.subMenuIcon,
.vcMenui {
  color: #ff0000;
}

.subMenuItem,
.subListItem,
.statusOption,
.subItem {
  border: 1px solid #b8c2d1;
  border-top-color: #eef3fb;
  border-left-color: #eef3fb;
  border-bottom-color: #8d99ab;
  border-right-color: #8d99ab;
  background: linear-gradient(180deg, #fbfcff 0%, #eef2f8 46%, #dbe3ef 100%);
  color: var(--vc-heading);
  text-shadow: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1px 0 rgba(164, 174, 193, 0.35);
}

.subMenuItem:hover,
.subListItem:hover,
.statusOption:hover,
.subItem:hover,
.subMenuItem:hover > .subMenuIcon,
.statusOption:hover .vcStatusText,
.statusOption:hover i {
  background: linear-gradient(180deg, var(--vc-steel-light) 0%, var(--vc-steel-mid) 48%, var(--vc-steel-dark) 100%);
  border-color: var(--vc-steel-accent);
  color: #ffffff;
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.35);
}

.vcAvitem {
  border-bottom: 1px solid #ffffff47;
}

.previewZone .vcLabel {
  color: #ffffff;
  text-shadow: 0 0 3px #000;
}

.modalMenu,
.tabMenu,
.regMenu {
  color: #ffffff;
}

.modalMenu ul,
.tabMenu ul,
.regMenu ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border-bottom: 1px solid #ffffff47;
}

.modalMenu ul li,
.tabMenu ul li,
.regMenu ul li {
  padding: 5px 10px;
  border: 1px solid #ffffff47;
  border-bottom: none;
  border-radius: 0;
  background: linear-gradient(180deg, var(--vc-shadow-72) 0%, var(--vc-panel-78) 100%);
  color: #ffffff;
  text-shadow: 0 0 3px #000;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -1px 0 rgba(0, 0, 0, 0.22);
}

.modalMenu ul li:hover,
.tabMenu ul li:hover,
.regMenu ul li:hover {
  background: #6e7da059;
}

.modalMenu ul li.modalSelected,
.tabMenu ul li.tabSelected,
.regMenu ul li.regSelected,
.adminPanelModalMenu ul li.adminPanelLinkActive {
  background: linear-gradient(180deg, rgba(141, 156, 197, 0.74) 0%, rgba(72, 85, 123, 0.9) 100%);
  color: #fff;
  border-color: #ffffff85;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -1px 0 rgba(0, 0, 0, 0.12);
}
.roomSettingMenu ul,
.editRoomMenu ul {
  flex-wrap: wrap;
}

.editProfileMoodBox {
  background: linear-gradient(180deg, var(--vc-shadow-72) 0%, var(--vc-panel-78) 100%);
  border: 1px solid #ffffff47;
  color: #ffffff;
  text-shadow: 0 0 3px #000;
}

.editProfileMoodEdit {
  border: 1px solid #ffffff47;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.04) 100%);
}

.editProfileMoodEdit:hover {
  background: #6e7da059;
}
.editProfileMoodEdit.moodEditDisabled,
.editProfileMoodEdit.moodEditDisabled:hover {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  opacity: 0.35 !important;
  cursor: default !important;
  box-shadow: none !important;
}

.editProfileDefaultList {
  border: 1px solid #ffffff47;
  background: linear-gradient(180deg, var(--vc-shadow-72) 0%, var(--vc-panel-78) 100%);
}

.editProfilePhotoWrap .vcProfileAvatar {
  background: transparent;
  border-color: #000000;
}

.editProfilePhotoWrap .avatarProfile {
  border-radius: 0;
}

.editProfileDefaultItem {
  border-color: #ffffff2d;
}

.editProfileDefaultItem:hover,
.activeDefaultAvatar {
  border-color: #ffd64d;
  background: rgba(255, 214, 77, 0.14);
}

.elemIn,
.vcAclist,
.leftDropItem,
.vcPageDropItem {
  background: #171717;
}

.elemIn:hover,
.vcAclist:hover,
.leftDropItem:hover,
.vcPageDropItem:hover {
  background: #0029b0;
  color: #fff;
}

.pageMenuWrapper {
  background: #fff;
}

.pageMenuItem {
  border-bottom: 1px solid #0022fd;
}

.pageMenuItem:hover,
.pageMenuItem:hover > .pageMenuIcon {
  background: var(--vc-accent);
  color: #666;
}

.pageSelected {
  color: #3c3c3c !important;
}

.error {
  color: red;
}

.success {
  color: #74b20e;
}

.vcWarn {
  color: orange;
}
.avActionGray {
  color: #989898;
}

.djActionIcon {
  color: #74b20e;
}

.onairActionIcon {
  color: #28b8d6;
}

.listingText {
  color: #ffffff;
}

.infoPro .listingText {
  color: #000000;
}

.listingHalfElement {
  border: 1px solid #b8c2d1;
  border-top-color: #eef3fb;
  border-left-color: #eef3fb;
  border-bottom-color: #8d99ab;
  border-right-color: #8d99ab;
  background: linear-gradient(180deg, var(--vc-listing-top) 0%, var(--vc-listing-mid) 46%, var(--vc-listing-bottom) 100%);
  color: var(--vc-heading);
  text-shadow: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1px 0 rgba(164, 174, 193, 0.35);
}

.listingHalfElement:hover {
  background: linear-gradient(180deg, var(--vc-steel-light) 0%, var(--vc-steel-mid) 48%, var(--vc-steel-dark) 100%);
  border-color: var(--vc-steel-accent);
  color: #ffffff;
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.35);
}
.infoPro:hover {
  background: linear-gradient(180deg, var(--vc-listing-top) 0%, var(--vc-listing-mid) 46%, var(--vc-listing-bottom) 100%);
  border-top-color: #eef3fb;
  border-left-color: #eef3fb;
  border-bottom-color: #8d99ab;
  border-right-color: #8d99ab;
  color: var(--vc-heading);
  text-shadow: none;
}

/* Keep profile action and information rows compact without changing shared lists. */
#vcMeditprofile .listingHalfElement,
#vcMadminuser .listingHalfElement {
  min-height: 32px;
  margin-bottom: 6px;
  padding: 4px 8px 6px;
  gap: 6px;
  line-height: 1.2;
}

#vcMeditprofile .listingHalfElement.infoPro,
#vcMadminuser .listingHalfElement.infoPro {
  height: auto;
  min-height: 46px;
  padding: 5px 6px 7px;
}

#vcMeditprofile .listingTitle,
#vcMadminuser .listingTitle {
  padding-bottom: 1px;
  line-height: 1.15;
}

#vcMeditprofile .listingText,
#vcMadminuser .listingText {
  min-height: 16px;
  line-height: 1.2;
}

.subDark {
  color: #ccc;
}

.inputText,
.logsDate,
.vcPdate,
.vcPtdate,
.vcCclear,
.vcCdate {
  color: #ffffff;
}

.themeColor {
  color: var(--vc-ink);
}

.vcLiked,
.vcUnliked {
  color: var(--vc-accent-bright);
}

.defaultColor {
  color: #61d4f9;
}

.userCount {
  color: white;
  background: linear-gradient(to right, var(--vc-accent-dark), #0041fd);
}

.userCount2 {
  color: white;
  background: linear-gradient(to right, #1e758c, #7889a0);
}

.myNotice {
  color: #fff;
  background: #ffffff2e;
}

.shadowText {
  text-shadow: 1px 1px #000;
}

.systemText {
  background: #ededed;
  color: #666;
  border: 1px solid #ccc;
}

.vcBustate {
  color: #dcdcdc;
}

.vcBnotify {
  background: #e63737;
  color: #fff;
  border: 1px solid #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
}
.vcBnotify::after {
  border-top-color: #e63737;
}
.adminCommandGroupTitle {
  background: linear-gradient(0deg, rgb(232 232 232 / 46%) 0%, rgb(255 255 255 / 0%) 15%, rgb(255 255 255 / 60%) 64%, rgb(222 222 222 / 37%) 100%);
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  color: #fff;
  text-shadow: 0 0 3px #000;
}
.adminCommandList {
  background: rgba(0, 0, 0, 0.16);
  color: #fff;
}
.adminCommandName {
  color: #fff;
}
.adminCommandDesc {
  color: rgba(255, 255, 255, 0.78);
}
.vcAdminprivate_conversation,
.vcAdminprivate_message_row {
  background: rgba(0, 0, 0, 0.28);
  color: #fff;
}
.vcAdminprivate_conversation,
.vcAdminprivate_message_row {
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.adminPrivateConversationMeta,
.adminPrivateTime,
.adminPrivatePreview {
  color: rgba(255, 255, 255, 0.84);
}
.adminPrivateCountBubble {
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.adminPrivateCountBubbleAlt {
  background: rgba(114, 214, 255, 0.18);
}
.adminPrivateSuggestBox {
  background: #f6f8fc;
  border: 1px solid rgba(44, 64, 99, 0.22);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
}
.vcAdminprivate_suggest_item,
.adminPrivateSuggestEmpty {
  color: var(--vc-heading);
}
.vcAdminprivate_suggest_item + .vcAdminprivate_suggest_item,
.adminPrivateSuggestEmpty + .vcAdminprivate_suggest_item,
.vcAdminprivate_suggest_item + .adminPrivateSuggestEmpty {
  border-top: 1px solid rgba(44, 64, 99, 0.08);
}
.vcAdminprivate_suggest_item:hover {
  background: rgba(114, 214, 255, 0.16);
}
.adminPrivateUserBtn,
.adminPrivateHunter,
.adminPrivateTarget {
  color: #fff;
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.35);
}
.adminPrivateTitleUser span,
.adminPrivateMessageSep {
  color: rgba(255, 255, 255, 0.88);
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.35);
}
.adminPrivateMessageBody {
  color: #fff;
}
.adminPrivateModalContent .vcAdminprivate_message_row {
  background: rgba(0, 0, 0, 0.42);
  border-color: rgba(255, 255, 255, 0.13);
}
.adminPrivateMessageBody a {
  color: #8fdfff;
}

.elementColor,
.playerOptions,
.pageElement,
#privateBox,
.chatSidePanel,
#sideMenu,
.roomContent {
  background: rgb(0 0 0);
  color: #000000;
  background: linear-gradient(0deg, #ececf1 0%, #a9a8b6 100%);
  outline: 1px solid rgb(255 255 255 / 42%);
}

.modalIn {
  background: transparent;
  color: #000;
  outline: 1px solid rgb(255 255 255 / 42%);
}

.modalIn > .vcModalContent {
  background: linear-gradient(0deg, #ececf1 0%, #a9a8b6 100%);
}

/* Modal glass must reveal the page beneath it, without blurring the artwork. */
.modalIn > .vcModalTop,
.vistaCaptchaGate > .vcModalTop,
#privateTitlebar,
.avStreamHeader,
.savedDataInner > .vcModalTop {
  background:
    linear-gradient(to bottom, rgb(255 255 255 / 24%) 0%, rgb(255 255 255 / 6%) 46%, transparent 50%),
    linear-gradient(to bottom, transparent 50%, rgb(0 0 0 / 10%) 55%, rgb(0 0 0 / 34%) 100%),
    linear-gradient(135deg, rgb(138 136 154 / 32%) 10px, transparent 60px),
    linear-gradient(225deg, rgb(138 136 154 / 32%) 10px, transparent 60px),
    rgb(64 62 91 / 46%);
  -webkit-backdrop-filter: blur(2px) saturate(120%);
  backdrop-filter: blur(2px) saturate(120%);
}

/* Keep the window body opaque while allowing the title glass to reveal the chat. */
#privateBox,
.privateWindowInstance {
  background: transparent !important;
  isolation: isolate;
}

#privateBox::before,
.privateWindowInstance::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 30px;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: 0 0 4px 4px;
  background: linear-gradient(0deg, #ececf1 0%, #a9a8b6 100%);
  pointer-events: none;
}

#privateBox > :not(.ui-resizable-handle),
.privateWindowInstance > :not(.ui-resizable-handle) {
  position: relative;
  z-index: 1;
}

.avStreamWindow {
  background: transparent !important;
}

.avStreamHeader {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

#containerStream {
  background: transparent !important;
  isolation: isolate;
}

#containerStream::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 30px;
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(180deg, #f7f9fd 0%, #e4ebf5 46%, #d2dceb 100%);
  pointer-events: none;
}
#containerStream.streamMediaMode::before {
  top: 30px;
}

#containerStream > * {
  position: relative;
  z-index: 1;
}

#streamHeader {
  background:
    linear-gradient(to bottom, rgb(255 255 255 / 24%) 0%, rgb(255 255 255 / 6%) 46%, transparent 50%),
    linear-gradient(to bottom, transparent 50%, rgb(0 0 0 / 10%) 55%, rgb(0 0 0 / 34%) 100%),
    linear-gradient(135deg, rgb(138 136 154 / 32%) 10px, transparent 60px),
    linear-gradient(225deg, rgb(138 136 154 / 32%) 10px, transparent 60px),
    rgb(64 62 91 / 46%);
  -webkit-backdrop-filter: blur(2px) saturate(120%);
  backdrop-filter: blur(2px) saturate(120%);
}

.savedData {
  background: transparent !important;
}

.savedDataInner {
  position: relative;
  isolation: isolate;
}

.savedDataInner::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 30px;
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(0deg, #ececf1 0%, #a9a8b6 100%);
  border-radius: 0 0 5px 5px;
  pointer-events: none;
}

.savedDataInner > * {
  z-index: 1;
}

.savedDataInner > .vcModalTop {
  position: relative;
}

#vcPrivateLogs,
#vcPrivateInput {
  color: #fff;
}

#vcPrivateLogs {
  background: linear-gradient(
    0deg,
    var(--vc-deep-80) 0%,
    var(--vc-deep-alt-80) 50%,
    var(--vc-deep-alt-80) 100%
  );
  border: 1px solid #ffffff47;
}

#privateTopToolbar {
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

#privateBox.privateBoxBlocked #privateWrapContent::before {
  color: rgba(215, 58, 73, 0.54);
}

#vcPrivateInput {
  background: transparent !important;
  border: 0 !important;
}

#privateBox {
	border-radius: 10px 10px 5px 5px;
	outline: 0;
	border: 1px solid rgba(150,150,150,.72) !important;
	box-sizing: border-box;
}

.privateWindowInstance {
	background: linear-gradient(0deg, #ececf1 0%, #a9a8b6 100%);
	outline: 0;
	border: 1px solid rgba(150,150,150,.72) !important;
	color: #000;
}

#privateTitlebar .modalTopText,
#privateTitlebar .privateOpt,
#privateControls .privateWindow-btn {
  color: #ffffff;
  text-shadow: 0 0 3px #000;
}

#privateTitlebar .privateOpt:hover {
  color: #ffffff;
  opacity: 0.9;
}

.djOnairBtn,
.djOffairBtn {
  min-width: 150px;
  color: #fff !important;
  border-width: 1px !important;
  border-style: solid !important;
  border-radius: 4px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.48),
    inset 0 -1px 0 rgba(0, 0, 0, 0.42),
    inset 0 -12px 18px rgba(0, 0, 0, 0.2),
    0 2px 4px rgba(0, 0, 0, 0.4) !important;
}

.djOnairBtn {
  border-color: #174f25 !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.48) 0%, rgba(255, 255, 255, 0.1) 45%, transparent 48%),
    linear-gradient(180deg, #70bd78 0%, #328a43 50%, #155c29 100%) !important;
}

.djOffairBtn {
  border-color: #681b1b !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.44) 0%, rgba(255, 255, 255, 0.08) 45%, transparent 48%),
    linear-gradient(180deg, #d56a6a 0%, #ad3333 50%, #741919 100%) !important;
}

.djOnairBtn:not(:disabled):hover,
.djOffairBtn:not(:disabled):hover {
  filter: brightness(1.1);
}

.djOnairBtn:not(:disabled):active,
.djOffairBtn:not(:disabled):active {
  transform: translateY(1px);
  box-shadow:
    inset 0 2px 5px rgba(0, 0, 0, 0.48),
    0 1px 2px rgba(0, 0, 0, 0.35) !important;
}

.emoContent {
  background: rgb(58, 58, 58);
}

.chatPanel {
  background-color: #ffffff00;
}

.addShadow,
.pageElement,
#privateBox,
.pageMenuWrapper,
.chatSidePanel,
.roomContent,
#sideMenu,
.subMenu {
  background: #000000;
  background: linear-gradient(0deg, #ececf1 0%, #a9a8b6 100%);
  border: 2px solid #5b5967;
}

.vcNoview {
  background: #6e7da0;
}

.borderRight,
#leftPanel {
  text-shadow: 0 0 6px #000;
}

.borderLeft,
#rightPanel {
  border-left: 1px solid #424242;
  text-shadow: 1px 1px 6px rgba(0, 0, 0, 0.34);
}

.borderBottom,
.vcPanelBar,
.postElement,
.listElement,
.vcUserItem,
.vcBoxTitle,
.leftList,
.userItemCustom {
  background-image: linear-gradient(180deg, var(--vc-shadow-72) 0%, var(--vc-panel-78) 100%);
}

#vcRoomsContainer .listElement {
  background: var(--vc-ink-36);
}

#vcRoomsContainer .listElement:hover {
  background: #6e7da059;
}

#containerUser .vcUserItem,
#containerFriends .vcUserItem {
  background: linear-gradient(180deg, var(--vc-shadow-72) 0%, var(--vc-panel-78) 100%);
}

#vcPrivateLogs .ulistItem,
.ulistContainer .ulistItem,
.roomContent .ulistItem {
  background: linear-gradient(180deg, var(--vc-shadow-72) 0%, var(--vc-panel-78) 100%);
}

#containerUser .vcUserItem:hover,
#containerFriends .vcUserItem:hover {
  background: #6e7da059;
}

#vcPrivateLogs .ulistItem:hover,
.ulistContainer .ulistItem:hover,
.roomContent .ulistItem:hover {
  background: #49546fad;
}

#notifyContent .notifyItem,
#containerReport .notifyItem,
.reportItem,
#preportBox,
.auditPrivateReportBox,
.reportContent {
  border: 1px solid #b8c2d1;
  border-top-color: #eef3fb;
  border-left-color: #eef3fb;
  border-bottom-color: #8d99ab;
  border-right-color: #8d99ab;
  background: linear-gradient(180deg, #fbfcff 0%, #eef2f8 46%, #dbe3ef 100%);
  color: var(--vc-heading);
  text-shadow: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1px 0 rgba(164, 174, 193, 0.35);
}

#notifyContent .notifyItem:hover {
  border-top-color: #eef3fb;
  border-left-color: #eef3fb;
  border-bottom-color: #8d99ab;
  border-right-color: #8d99ab;
  background: linear-gradient(180deg, #fbfcff 0%, #eef2f8 46%, #dbe3ef 100%);
  color: var(--vc-heading);
  text-shadow: none;
}

#containerReport .notifyItem:hover {
  background: linear-gradient(180deg, var(--vc-steel-light) 0%, var(--vc-steel-mid) 48%, var(--vc-steel-dark) 100%);
  border-color: var(--vc-steel-accent);
  color: #ffffff;
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.35);
}

#notifyContent .notifyItem .notifyText,
#notifyContent .notifyItem .dateNotify,
#notifyContent .notifyItem .subText,
#notifyContent .notifyItem .vcHnotify,
#containerReport .notifyItem .notifyText,
#containerReport .notifyItem .dateNotify,
#containerReport .notifyItem .subText,
#containerReport .notifyItem .vcHnotify,
.reportItem .reportText,
.reportContent,
#preportBox {
  color: var(--vc-heading) !important;
  text-shadow: none !important;
}

#preportBox,
.auditPrivateReportBox {
  background: linear-gradient(
    0deg,
    var(--vc-deep-80) 0%,
    var(--vc-deep-alt-80) 50%,
    var(--vc-deep-alt-80) 100%
  );
  color: #ffffff !important;
}

#preportBox .textSmall,
#preportBox .textMed,
#preportBox .subText,
#preportBox .vcLabel,
#preportBox p,
#preportBox span,
#preportBox div {
  color: #ffffff !important;
  text-shadow: none !important;
}

.headReport,
.reportRoomName {
  border: 1px solid #ffffff47;
  background: linear-gradient(
    0deg,
    var(--vc-deep-80) 0%,
    var(--vc-deep-alt-80) 50%,
    var(--vc-deep-alt-80) 100%
  );
  color: #ffffff;
  text-shadow: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -1px 0 rgba(0, 0, 0, 0.18);
}

.headReport .chatMessage.reportDefaultMessage,
.headReport .vcCdate,
.headReport .privateMessageText,
.headReport .vistaTable {
  color: #ffffff !important;
}

#containerReport .notifyItem:hover .notifyText,
#containerReport .notifyItem:hover .dateNotify,
#containerReport .notifyItem:hover .subText,
#containerReport .notifyItem:hover .vcHnotify,
#containerReport .notifyItem:hover .vcUsername,
.reportItem:hover .reportText {
  color: #ffffff !important;
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.35) !important;
}

#notifyContent .notifyItem .notifyAvatar img,
#containerReport .notifyItem .notifyAvatar img,
.headReport .reportAvatar img {
  border: 1px solid #b8c2d1;
  border-top-color: #eef3fb;
  border-left-color: #eef3fb;
  border-bottom-color: #8d99ab;
  border-right-color: #8d99ab;
  box-shadow: none;
}

#notifyContent .notifyItem .notifyStatus i,
#containerReport .notifyItem .notifyStatus i,
.reportCheck {
  color: #b33c2e;
  text-shadow: none;
}

.reportItem:hover {
  background: linear-gradient(180deg, var(--vc-steel-light) 0%, var(--vc-steel-mid) 48%, var(--vc-steel-dark) 100%);
  border-color: var(--vc-steel-accent);
  color: #ffffff;
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.35);
}

.reportItem:hover .reportCheck {
  color: #ffffff;
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.35);
}

#reportControl {
  background: transparent;
}

#containerUser .offline,
#containerFriends .offline {
  background: linear-gradient(180deg, var(--vc-shadow-72) 0%, var(--vc-panel-78) 100%);
}

#containerUser .userItemAvatar,
#containerFriends .userItemAvatar {
  padding-left: 0;
}

#containerUser .userItemAvatar .listAvatarImage,
#containerFriends .userItemAvatar .listAvatarImage {
  box-shadow: none;
}

#containerUser .userVipAvatar,
#containerFriends .userVipAvatar {
  margin: 0 !important;
}

#containerUser .userItemFlag img,
#containerUser .vcListRank,
#containerUser .listAvatar,
#containerUser .listMute,
#containerFriends .userItemFlag img,
#containerFriends .vcListRank,
#containerFriends .listAvatar,
#containerFriends .listMute {
  border: none;
  box-shadow: none;
}

.ulistAvatar img {
  border: none;
  box-shadow: none;
}

#containerUser .vcListRank,
#containerFriends .vcListRank {
  height: 17px;
  vertical-align: middle;
  position: relative;
  top: 0;
}

#containerUser .listMute,
#containerFriends .listMute {
  height: 13px;
}

#containerUser .userCount,
#containerFriends .userCount {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(39, 35, 61, 0.22) 100%);
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  border-bottom: 1px solid rgba(0, 0, 0, 0.35);
  border-radius: 0;
  padding: 0;
  margin: 5px;
  width: calc(100% - 10px);
  margin-left: 5px;
  text-align: left;
  box-sizing: border-box;
  filter: none;
  text-shadow: 0 1px 1px #000;
  font-weight: 600;
  position: relative;
  clip-path: none;
}

#containerUser .userCount .vistaCell,
#containerFriends .userCount .vistaCell {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 22px;
  padding: 0 6px;
}

#containerUser .userCount i,
#containerFriends .userCount i {
  margin-right: 5px;
}

#containerUser .vcUcount {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 7px;
  border-radius: 50px !important;
  line-height: 14px;
  order: 1;
  margin-left: auto;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.2) 0%,
    rgba(222, 222, 222, 0.14) 100%
  );
  color: #fff;
  border: 1px solid #ffffff26;
}

#containerUser .userCountOnair .vcUcount {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.2) 0%,
    rgba(222, 222, 222, 0.14) 100%
  );
  color: #fff;
}

#containerUser .userCountEqualizer {
  order: 0;
  margin-left: 2px;
}

#vcRoomsContainer .vcNoview {
  background: var(--vc-selection);
}

#vcRoomsContainer {
  border: 1px solid #ffffff47;
  background: var(--vc-soft-10);
}

.listingElement {
  border-bottom: 1px solid #bbbbbb;
}

.borderTop {
  border-top: 1px solid #ededed;
}

.fullBorder {
  border: 1px solid #ededed;
}

.backgroundReply,
.subListItem,
.subHalfItem,
.replyItem,
.ulistItem,
.subList {
  border-top: 1px solid #e1e1e1;
}

.subListItem,
.backgroundReply,
.subList {
  color: var(--vc-heading);
}

.vistaSlider .ui-widget-content {
  background: linear-gradient(180deg, #1b1a24 0%, #3a3948 100%);
  border: 1px solid #000;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -1px 0 rgba(0, 0, 0, 0.45);
}

.vistaSlider .ui-state-default {
  background: linear-gradient(180deg, #b6b4c3 0%, #6f6c80 100%);
  border: 1px solid #22202c;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.32),
    0 0 0 1px rgba(0, 0, 0, 0.25);
}

.vistaSlider .ui-state-active {
  background: linear-gradient(180deg, #cfcdda 0%, #7d7a90 100%) !important;
}

.vistaSlider .ui-slider-range {
  background: linear-gradient(180deg, #4b495c 0%, #22212e 100%);
}

.selectboxit-list,
.selectboxit-btn {
  background-color: #eef2f8;
  color: var(--vc-text-dark);
  border: 1px solid #8a96ab !important;
}

.selectboxit-list .selectboxit-focus .selectboxit-option-anchor {
  background-color: #dbe4f4;
  color: var(--vc-text-dark);
}

.selectboxit-default-arrow {
  border-top: 4px solid #495871;
}

.selectboxit-options {
  background: #eef2f8;
  border: 1px solid #8a96ab;
}

.selectboxit-list .selectboxit-option-anchor {
  color: var(--vc-text-dark);
}

.chatSystem {
  color: #ffffff;
}

.chatLogRow.systemAction .chatMessage .chatActionText,
.chatLogRow.systemAction .chatMessage .chatActionText .vcUsername,
.chatLogRow.systemAction .chatMessage .chatActionText b {
  color: #00b9b9 !important;
  font-style: italic;
}

.chatLogRow.systemWarn .chatMessage,
.chatLogRow.systemWarn .chatMessage .vcSysname,
.chatLogRow.systemWarn .chatMessage .vcUsername,
.chatLogRow.systemWarn .chatMessage b {
  color: darkcyan;
}

.chatLogRow.systemJail .chatMessage,
.chatLogRow.systemJail .chatMessage .vcSysname,
.chatLogRow.systemJail .chatMessage .vcUsername,
.chatLogRow.systemJail .chatMessage b {
  color: #ff6b6b;
}

.chatLogRow.systemPunish .chatMessage,
.chatLogRow.systemPunish .chatMessage .vcSysname,
.chatLogRow.systemPunish .chatMessage .vcUsername {
  color: #ffb3b3;
}

.chatLogRow.systemRelief .chatMessage,
.chatLogRow.systemRelief .chatMessage .vcSysname,
.chatLogRow.systemRelief .chatMessage .vcUsername {
  color: #b8f0c4;
}

.fa-link.vcWarn,
.fa-unlink.vcWarn,
.jailUserIcon {
	color: #aeb4bf;
}

.chatLogRow.system__join .chatMessage,
.chatLogRow.system__join .chatMessage .vcSysname,
.chatLogRow.system__join .chatMessage .vcUsername,
.chatLogRow.system__connect .chatMessage,
.chatLogRow.system__connect .chatMessage .vcSysname,
.chatLogRow.system__connect .chatMessage .vcUsername {
  color: #a9d8ff;
}

.chatLogRow.systemLeave .chatMessage,
.chatLogRow.systemLeave .chatMessage .vcSysname,
.chatLogRow.systemLeave .chatMessage .vcUsername,
.chatLogRow.systemDisconnect .chatMessage,
.chatLogRow.systemDisconnect .chatMessage .vcSysname,
.chatLogRow.systemDisconnect .chatMessage .vcUsername {
  color: #ffefad;
}

.away {
  color: #333;
}

.absent {
  color: #ffd11a;
}

.vcGone {
  color: red;
}

.online {
  color: #00ca00;
}

.vcInvisible {
  color: var(--vc-accent-bright);
}

.icoOwner {
  color: #ffcc00;
}

.icoSadmin {
  color: #ffcc00;
}

.icoAdmin {
  color: #ccc;
}

.icoMod {
  color: #777;
}

.icoVip {
  color: #ccc;
}

.icoBot {
  color: #1eb503;
}

.icoRadmin {
  color: #cc0033;
}

.icoRmod {
  color: var(--vc-accent-bright);
}

.icoGuest {
  color: #666;
}

.vcIsMuted {
  color: red;
}

.vcIsRoomMuted {
  color: orange;
}

.boy {
  border-color: var(--vc-accent-bright);
}

.girl {
  border-color: #ff99ff;
}

.nosex {
  border-color: #ccc;
}

.rLock {
  color: orange;
}

.fileColor,
.fileColor a {
  background: var(--vc-accent-bright);
  color: #fff;
}

.audioColor {
  background: var(--vc-ink);
  border: 1px solid #ffffff47;
  color: #fff;
  background: linear-gradient(180deg, var(--vc-deep-80) 0%, var(--vc-soft-80) 100%);
}

.songTitle {
  background: #03647d;
  color: #fff;
}

.fileTitle {
  background: #03647d;
  color: #fff;
}

.vistaWarning {
  color: #8a6d3b;
  background: #fcf8e3;
  border: 1px solid #faebcc;
}

.vistaError {
  background: #f2dede;
  color: #a94442;
  border: 1px solid #ebccd1;
}

.vistaSuccess {
  color: #3c763d;
  background: #dff0d8;
  border: 1px solid #d6e9c6;
}

.vistaNeutral {
  color: #31708f;
  background: #d9edf7;
  border: 1px solid #bce8f1;
}

#avMenu {
  border: 1px solid #ffffff47;
  background: linear-gradient(0deg, var(--vc-deep-80) 0%, var(--vc-soft-80) 50%, var(--vc-deep-alt-80) 100%);
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

#avMenu .vcAvtop,
#avMenu .bottomcard {
  background: transparent;
}

#avMenu .vcAvtop {
  padding: 4px;
}

#avMenu .vcAvbody {
  background: transparent;
}

#avMenu .vcAvavatar {
  border: 1px solid #ffffff47;
  box-shadow: none;
  max-width: 165px;
  margin: 0 auto;
}

#avMenu .vcAvagegender {
  color: #ffffff;
  text-shadow: 0 0 3px #000;
}

#avMenu .vcAvmood {
  color: #ffffff;
  text-shadow: 0 0 3px #000;
}

#avMenu .vcAvusername,
#avMenu .vcAvitem,
#avMenu .vcAvitem i,
#avMenu .avtitleClose {
  color: #ffffff;
  text-shadow: 0 0 3px #000;
}

#avMenu .vcAvflag {
  margin-top: 6px;
}

#avMenu .vcAvitem {
  border-bottom: 1px solid #ffffff47;
  background: var(--vc-ink-36);
}

#avMenu .vcAvitem:hover {
  background: #6e7da059;
}

#avMenu .panel-wrapper {
  filter: none;
}

#avMenu .vcAvtitle {
  text-align: center;
}

.spBox {
  background: #660000;
  color: #fff;
}

.spIcon {
  background: #c60000;
  color: #fff;
}


.seen {
  color: #330019;
}

.loginSubText,
.loginTitleText,
.loginRegisterText {
  text-shadow: 1px 1px 1px #666;
}

.pageMenuText {
  color: #ffffff;
}

.chatDisplayName {
  color: #ffffff;
  background: transparent;
}

.playerElem,
.chatFooterItem,
.chatHead {
  text-shadow: 0 0 6px #000;
}

.chatHead {
  border-bottom: 1px solid rgb(4, 48, 59);
}

#mobileMainMenu {
  text-shadow: 0 0 1px #ececec;
}

.vcAdv {
  background: #c6e2d5;
}

.dropList {
  border: 1px solid #00232c;
}

#friendPost,
#newsData {
  border: 1px solid #b8c2d1;
  background: #fff !important;
  color: #1f2b3d !important;
  text-shadow: none !important;
}

.panelItem {
  background: linear-gradient(
    0deg,
    var(--vc-deep-80) 0%,
    var(--vc-soft-80) 50%,
    var(--vc-deep-alt-80) 100%
  );
  border: 1px solid #ffffff47;
}

.panelTitleBox {
  background: linear-gradient(
    0deg,
    rgb(232 232 232 / 46%) 0%,
    rgb(255 255 255 / 0%) 15%,
    rgb(255 255 255 / 60%) 64%,
    rgb(222 222 222 / 37%) 100%
  );
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  text-shadow: 0 0 3px #000;
}

#containerStream {
  background: linear-gradient(180deg, #f7f9fd 0%, #e4ebf5 46%, #d2dceb 100%);
  border: 1px solid #b8c2d1;
  border-top-color: #eef3fb;
  border-left-color: #eef3fb;
  border-bottom-color: #8d99ab;
  border-right-color: #8d99ab;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1px 0 rgba(164, 174, 193, 0.35),
    1px 1px 0 rgba(73, 83, 109, 0.45);
}

#streamHeader {
  background: linear-gradient(
    0deg,
    rgb(232 232 232 / 46%) 0%,
    rgb(255 255 255 / 0%) 15%,
    rgb(255 255 255 / 60%) 64%,
    rgb(222 222 222 / 37%) 100%
  );
  background-color: var(--vc-deep-65);
  color: #fff;
}

.avControlItem,
.avSubpanelNote {
  color: #fff;
  text-shadow: 0 0 3px #000;
}

.plusButton {
  background: #95bdd0;
  background: linear-gradient(
    0deg,
    rgba(149, 189, 208, 1) 0%,
    rgba(193, 218, 230, 1) 100%
  );
  border: 1px solid #95bdd0;
  text-shadow: 0px 0px 5px black;
}

.forYouItem {
  border: 1px solid #ffffff47;
  background: var(--vc-soft-10);
}

.forYouItem i {
  text-shadow: 0px 0px 3px black;
}

.forYouName {
  background: var(--vc-ink-36);
}

.forYouInfo {
  background: var(--vc-soft-38);
}

.radioBox {
  background: linear-gradient(
    0deg,
    var(--vc-deep-80) 0%,
    var(--vc-soft-80) 50%,
    var(--vc-deep-alt-80) 100%
  );
  border: 1px solid #ffffff47;
  box-shadow: none;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}

.radioTop1 {
  background: var(--vc-ink-36) !important;
  border-right: 1px solid #ffffff26;
}

.radioBottom {
  background: transparent !important;
  border-top: 1px solid #c8d4ff24;
}

.radioTop2 {
  background: var(--vc-soft-38) !important;
  border-left: 1px solid rgba(255, 255, 255, 0.10);
}

.radioStationScreen {
  background: var(--vc-ink-36);
  border: 1px solid #ffffff47;
  box-shadow: none;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}

.radioLabel {
  color: #eef3ff;
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.52);
}

#currentStation {
  color: #ffffff;
  text-shadow:
    0 0 3px rgba(0, 0, 0, 0.55),
    0 1px 0 rgba(0, 0, 0, 0.32);
  font-weight: 700;
}

.currentStationPickerIcon {
  color: #ffffff;
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.45);
}

.radioElementActive .subListName,
.radioElementActive .radioElementIcon i {
  color: inherit;
}

#playerActualStatus {
  background: none;
  border: none;
  box-shadow: none;
}

#playerActualStatus i {
  color: #f2f6ff;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.18),
    0 -1px 0 rgba(20, 24, 37, 0.52),
    1px 1px 0 rgba(20, 24, 37, 0.52),
    0 0 8px rgba(200, 216, 255, 0.12),
    2px 2px 4px rgba(0, 0, 0, 0.30);
}

#soundDisplay .showSound {
  color: #eff4ff;
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.48);
}

.radioEqualizer span {
  background: linear-gradient(
    180deg,
    #ffd86a 0%,
    #f3a94b 24%,
    #89d770 62%,
    #53b36f 100%
  );
  border: 1px solid #ffffff22;
  border-bottom: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 0 3px rgba(0, 0, 0, 0.22);
}

.radioVisualWrap {
  background:
    linear-gradient(0deg, rgba(138, 136, 154, 0.34) 0%, rgba(39, 35, 61, 0.24) 100%);
  border: 1px solid #ffffff26;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -1px 0 rgba(0, 0, 0, 0.18);
}

.headToggle {
  background: linear-gradient(
    0deg,
    var(--vc-deep-80) 0%,
    var(--vc-soft-80) 50%,
    var(--vc-deep-alt-80) 100%
  );
  border: 1px solid #ffffff47;
}

#rightPanelBar,
#rightPanelBarBottom {
  background: linear-gradient(
    0deg,
    rgb(232 232 232 / 46%) 0%,
    rgb(255 255 255 / 0%) 15%,
    rgb(255 255 255 / 60%) 64%,
    rgb(222 222 222 / 37%) 100%
  ) !important;
  border: 1px solid #ffffff47 !important;
}

#chatToggle {
  background: linear-gradient(
    0deg,
    var(--vc-deep-80) 0%,
    var(--vc-soft-80) 50%,
    var(--vc-deep-alt-80) 100%
  );
  border: 1px solid #ffffff47;
}

#toggleUsers {
  border: 1px solid #ffffff47;
  background: linear-gradient(
    0deg,
    rgb(232 232 232 / 46%) 0%,
    rgb(255 255 255 / 0%) 15%,
    rgb(255 255 255 / 60%) 64%,
    rgb(222 222 222 / 37%) 100%
  );
}
.rightToggleTaskbar #toggleUsers {
  border: none;
  background: transparent;
}

#chatLeftMenu {
  background: var(--vc-ink);
  background: linear-gradient(0deg, var(--vc-ink-0) 0%, var(--vc-ink-55) 100%);
  position: relative;
  overflow: hidden;
}

#wrapRightData {
  position: relative;
  overflow: hidden;
}

#chatLeftMenu::before,
#wrapRightData::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  -webkit-mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 0.85) 55%,
    rgba(0, 0, 0, 0) 100%
  );
  mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 0.85) 55%,
    rgba(0, 0, 0, 0) 100%
  );
}

#chatLeftMenu > *,
#wrapRightData > * {
  position: relative;
  z-index: 1;
}

#chatLeftMenu .panelItem,
#chatLeftMenu .forYouItem,
#chatLeftMenu .radioBox,
#wrapRightData .vcUserItem,
#wrapRightData .ulistItem,
#wrapRightData .listElement,
#wrapRightData .userCount {
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}

#rightPanel {
  background: var(--vc-ink);
  background: linear-gradient(0deg, var(--vc-ink-0) 0%, var(--vc-ink-55) 100%);
  border: none;
  margin: 0;
}
.panelOption:hover {
  cursor: pointer;
  background: linear-gradient(180deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.04) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
}
.soundPopupInner {
  background: linear-gradient(180deg, #f7f9fd 0%, #e4ebf5 46%, #d2dceb 100%);
  border: 1px solid #b8c2d1;
  border-top-color: #eef3fb;
  border-left-color: #eef3fb;
  border-bottom-color: #8d99ab;
  border-right-color: #8d99ab;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1px 0 rgba(164, 174, 193, 0.35),
    1px 1px 0 rgba(73, 83, 109, 0.45);
}
.soundPopupHead {
  background: #000000;
  background-image: linear-gradient(#000000, var(--vc-accent));
  color: #fff;
  background: linear-gradient(
    0deg,
    rgb(232 232 232 / 46%) 0%,
    rgb(255 255 255 / 0%) 15%,
    rgb(255 255 255 / 60%) 64%,
    rgb(222 222 222 / 37%) 100%
  );
  background-color: var(--vc-deep-65);
  background:
    linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.3) 0%,
      rgba(255, 255, 255, 0.08) 45%,
      transparent 50%
    ),
    linear-gradient(
      to bottom,
      transparent 50%,
      rgba(0, 0, 0, 0.15) 55%,
      rgba(0, 0, 0, 0.5) 100%
    ),
    linear-gradient(135deg, var(--vc-soft-60) 10px, transparent 60px),
    linear-gradient(225deg, var(--vc-soft-60) 10px, transparent 60px),
    linear-gradient(
        54deg,
        var(--vc-deep-60) 0 4%,
        var(--vc-soft-40) 6% 6%,
        var(--vc-deep-60) 8% 10%,
        var(--vc-deep-60) 15% 16%,
        var(--vc-soft-40) 17% 18%,
        var(--vc-deep-60) 23% 24%,
        var(--vc-soft-40) 25% 26%,
        var(--vc-deep-60) 31% 33%,
        var(--vc-deep-60) 34% 34.5%,
        var(--vc-soft-40) 36% 40%,
        var(--vc-deep-60) 41% 41.5%,
        var(--vc-soft-40) 44% 45%,
        var(--vc-soft-40) 46% 46.5%,
        var(--vc-deep-60) 48% 49%,
        var(--vc-deep-60) 50% 50.5%,
        var(--vc-deep-60) 56% 56.5%,
        var(--vc-soft-40) 57% 63%,
        var(--vc-deep-60) 67% 69%,
        var(--vc-soft-40) 70% 70%,
        var(--vc-deep-60) 73.5% 74%,
        var(--vc-soft-40) 74.5% 79%,
        var(--vc-deep-60) 80% 84%,
        var(--vc-soft-40) 85% 86%,
        var(--vc-deep-60) 87%,
        var(--vc-soft-40) 90%
      )
      0 / 100vw 100vh no-repeat fixed;
  border-top: 1.5px solid rgba(255, 255, 255, 0.7);
  border: none;
}

.avStreamHeader {
  background: #000000;
  background-image: linear-gradient(#000000, var(--vc-accent));
  color: #fff;
  background: linear-gradient(
    0deg,
    rgb(232 232 232 / 46%) 0%,
    rgb(255 255 255 / 0%) 15%,
    rgb(255 255 255 / 60%) 64%,
    rgb(222 222 222 / 37%) 100%
  );
  background-color: var(--vc-deep-65);
  background: linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.3) 0%,
      rgba(255, 255, 255, 0.08) 45%,
      transparent 50%
    ),
    linear-gradient(
      to bottom,
      transparent 50%,
      rgba(0, 0, 0, 0.15) 55%,
      rgba(0, 0, 0, 0.5) 100%
    ),
    linear-gradient(135deg, var(--vc-soft-60) 10px, transparent 60px),
    linear-gradient(225deg, var(--vc-soft-60) 10px, transparent 60px),
    linear-gradient(
        54deg,
        var(--vc-deep-60) 0 4%,
        var(--vc-soft-40) 6% 6%,
        var(--vc-deep-60) 8% 10%,
        var(--vc-deep-60) 15% 16%,
        var(--vc-soft-40) 17% 18%,
        var(--vc-deep-60) 23% 24%,
        var(--vc-soft-40) 25% 26%,
        var(--vc-deep-60) 31% 33%,
        var(--vc-deep-60) 34% 34.5%,
        var(--vc-soft-40) 36% 40%,
        var(--vc-deep-60) 41% 41.5%,
        var(--vc-soft-40) 44% 45%,
        var(--vc-soft-40) 46% 46.5%,
        var(--vc-deep-60) 48% 49%,
        var(--vc-deep-60) 50% 50.5%,
        var(--vc-deep-60) 56% 56.5%,
        var(--vc-soft-40) 57% 63%,
        var(--vc-deep-60) 67% 69%,
        var(--vc-soft-40) 70% 70%,
        var(--vc-deep-60) 73.5% 74%,
        var(--vc-soft-40) 74.5% 79%,
        var(--vc-deep-60) 80% 84%,
        var(--vc-soft-40) 85% 86%,
        var(--vc-deep-60) 87%,
        var(--vc-soft-40) 90%
      )
      0 / 100vw 100vh no-repeat fixed;
  border-top: 1.5px solid rgba(255, 255, 255, 0.7);
  border: none;
}
.soundPopupBody .listElement {
  border: 1px solid #b8c2d1;
  border-top-color: #eef3fb;
  border-left-color: #eef3fb;
  border-bottom-color: #8d99ab;
  border-right-color: #8d99ab;
  background: linear-gradient(180deg, #fbfcff 0%, #eef2f8 46%, #dbe3ef 100%);
  color: var(--vc-heading);
  text-shadow: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1px 0 rgba(164, 174, 193, 0.35);
}
.soundPopup .switchItemText {
  color: #111;
}
.soundPopup .soundPopupTitle {
  color: #fff;
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.45);
}
.soundPopup .vcBswitch {
  background: linear-gradient(180deg, #eef2f8 0%, #d4dce8 100%);
  border: 1px solid #9ca9bc;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.8),
    inset 0 -1px 0 rgba(150, 162, 182, 0.35);
}
.soundPopup .vcOnswitch {
  background: linear-gradient(180deg, #a9c46e 0%, #8faa56 100%);
  border-color: #758b46;
}
.soundPopup .vcBball {
  background: linear-gradient(180deg, #ffffff 0%, #e7edf6 100%);
  border: 1px solid #8e9cb1;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9);
}
.soundPopup .modalTopElement {
  text-shadow: none;
  color: #49536d;
}
.roomBgPreview,
.roomIconPreview {
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), 0 8px 18px rgba(0,0,0,0.22);
}
.roomBgPreview,
.roomIconPreview {
	background-color: #071126;
	background-image: linear-gradient(180deg, rgba(11, 22, 48, .96) 0%, rgba(0, 0, 0, .98) 100%);
}
.roomBgPreview:before,
.roomIconPreview:before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.03) 35%, rgba(0,0,0,0.22) 100%);
  pointer-events: none;
}
.roomBgPreviewText,
.roomDeleteText,
.roomDeleteConfirmNote,
.roomDeleteConfirmName {
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.55);
}
.roomDeleteBox {
	margin: 0 0 0 auto;
	padding: 0;
	border: 0;
}
.roomSettingActions {
	display: flex;
	align-items: center;
	width: 100%;
	gap: 10px;
}
.roomSettingActions .roomDeleteLink { margin: 0; }
.roomDeleteLink {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 10px 0 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: #d93636;
	font: inherit;
	font-weight: 600;
	line-height: 1.35;
	text-shadow: 0 1px 0 rgba(0, 0, 0, .22);
	cursor: pointer;
	transition: color .15s ease;
}
.roomDeleteLink:hover,
.roomDeleteLink:focus-visible {
	background: transparent;
	color: #ff5454;
	box-shadow: none;
	outline: none;
}
.roomDeleteBox .roomDeleteLink {
	margin-top: 0;
}
:is(#overModal,.serviceModal-window) .roomDeleteConfirmTitle,
:is(#overModal,.serviceModal-window) .roomDeleteConfirmNote,
:is(#overModal,.serviceModal-window) .roomDeleteConfirmName {
  color: #111 !important;
  text-shadow: none !important;
}

.savedData {
  box-shadow: 5px 5px 20px #00000073;
  background: #f1f1f1;
  outline: 1px solid rgb(255 255 255 / 42%);
}

.vcFriendRequest .ulistOption .fa-times,
.vcFriendRequest .ulistOption .fa-times.error {
  color: #ff4b4b !important;
}

.vcFriendRequest .ulistOption .fa-check,
.vcFriendRequest .ulistOption .fa-check.success {
  color: #54d654 !important;
}

.savedSpan {
  color: #000;
}

/* Unified image-card controls for room settings and the admin image panel. */
.roomImageActions {
  justify-content: center;
	min-height: 0;
	height: 0;
	margin: 0;
}
.roomImageActions form {
  display: none;
}
.roomImageActions .roomIconRemoveBtn.hidden,
.adminPanelContent .roomImageActions .roomIconRemoveBtn.hidden {
  display: none !important;
  visibility: hidden;
}
.roomImageActions #removeRoomBg.hidden,
.roomImageActions #removeRoomBanner.hidden,
.roomImageActions #removeAdminRoomlogo.hidden,
.roomImageActions #removeAdminLoginbg.hidden,
.roomImageActions #removeAdminChatbg.hidden {
  display: none !important;
  visibility: hidden;
}
.roomBgPreview .roomIconOverlay {
  z-index: 2;
}
.roomIconOverlay .roomIconRemoveBtn {
	width: 32px !important;
	min-width: 32px !important;
	height: 32px !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 9px !important;
	background: rgba(0, 0, 0, .58) !important;
	box-shadow: none !important;
	color: #ff6868 !important;
	font-size: 14px;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease, opacity .15s ease;
}
.roomIconOverlay .roomIconRemoveBtn:hover {
	background: rgba(0, 0, 0, .72) !important;
	color: #ff8a8a !important;
}
.roomBgPreview .roomIconPlus {
  opacity: .82;
  transition: opacity .15s ease, background-color .15s ease;
}
.roomBgPreview:hover .roomIconPlus,
.roomBgPreview.chatImageDropActive .roomIconPlus {
  opacity: 1;
  background-color: rgba(0, 0, 0, .72);
}

/* Status messages grow with wrapped content instead of clipping it. */
.savedData {
  top: max(10px, 5vh);
  width: min(380px, calc(100vw - 20px));
  height: auto !important;
  min-height: 138px;
  transform: translateX(-50%);
  max-width: calc(100vw - 20px);
}
.savedDataInner {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 138px;
  height: auto;
  padding-bottom: 12px;
}
.savedMessageBody {
  position: relative;
  z-index: 1;
  display: flex;
  flex: 1 0 auto;
  align-items: center;
  gap: 13px;
  min-height: 62px;
  padding: 12px 18px 7px;
}
.savedStatusIcon {
  position: static;
  flex: 0 0 32px;
  transform: none;
}
.savedSpan {
  position: static;
  flex: 1 1 auto;
  min-width: 0;
  max-width: none;
  padding: 0;
  transform: none;
  line-height: 1.35;
  overflow-wrap: anywhere;
  word-break: normal;
}
.savedCloseButton {
  position: relative;
  z-index: 1;
  align-self: center;
  width: 70px;
  min-height: 28px;
  margin: 0;
}
@media screen and (max-width: 480px) {
  .savedData {
    width: calc(100vw - 16px);
    max-width: calc(100vw - 16px);
  }
  .savedMessageBody {
    gap: 10px;
    padding-right: 12px;
    padding-left: 12px;
  }
}

#homeBtn {
  background: linear-gradient(
    0deg,
    rgb(232 232 232 / 46%) 0%,
    rgb(255 255 255 / 0%) 15%,
    rgb(255 255 255 / 60%) 64%,
    rgb(222 222 222 / 37%) 100%
  );
  box-shadow: 1px 1px 4px #00000026;
}

#homeBtn:hover {
  background: linear-gradient(
    0deg,
    rgb(220 220 220 / 60%) 0%,
    rgb(255 255 255 / 10%) 20%,
    rgb(255 255 255 / 75%) 65%,
    rgb(210 210 210 / 50%) 100%
  );
}

.vcSplitter {
  background: #ffffff47;
  background: #ffffff;
  background: linear-gradient(
    0deg,
    rgba(255, 255, 255, 0) 0%,
    #ffffff47 50%,
    rgba(255, 255, 255, 0) 100%
  );
}

.headToggle:hover,
#chatToggle:hover,
#toggleUsers:hover {
  background: linear-gradient(
    0deg,
    rgb(232 232 232 / 46%) 0%,
    rgb(255 255 255 / 0%) 15%,
    rgb(255 255 255 / 60%) 64%,
    rgb(222 222 222 / 37%) 100%
  );
}
.rightToggleTaskbar #toggleUsers:hover {
  background: transparent;
}

#mainMessageInput,
#privateMessageInput {
  color: white;
  background: black;
  border: none;
}

.tool-btn {
  background-color: #2a4d91;
  color: white;
  border: 1px solid #7a96df;
  border-bottom-color: #1a2a5a;
  border-right-color: #1a2a5a;
}

.tool-btn:hover {
  background-color: #41609c;
}

.color-picker {
  background: #ffffff;
  border: 2px solid;
  border-color: #ffffff #808080 #808080 #ffffff;
}

.tool-btn.active {
  background-color: #64768d;
  border: 1px inset #748599;
}

.color-popup-box {
  background: #2c2c2c;
  border: 1px solid #ffffff47;
}

.chatLogRow:hover {
  background: var(--vc-ink-36);
}
.chatLogRow.logActions {
  background: var(--vc-ink-36);
}


/* popup and user list theme fixes */
.ulistItem .ulistName,
.ulistItem .ulistName .vcUsername,
.ulistItem .ulistOption,
.ulistItem .ulistOption i {
  color: #fff !important;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.75);
}

/* Preserve DJ state semantics after the generic white modal icon rule. */
.ulistItem .ulistOption.djManagementState.success,
.ulistItem .ulistOption.djManagementState.success i {
  color: #35b85a !important;
}
.ulistItem .ulistOption.djManagementState.error,
.ulistItem .ulistOption.djManagementState.error i {
  color: #e24343 !important;
}

.avCameraRequestItem .fa-ban,
.avCameraRequestItem .fa-ban.error {
  color: #ff4b4b !important;
}

.soundPopupInner {
  position: relative;
  isolation: isolate;
  background: transparent !important;
}

.soundPopupInner::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 26px;
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(180deg, #f7f9fd 0%, #e4ebf5 46%, #d2dceb 100%);
  pointer-events: none;
}

.soundPopupInner > * {
  position: relative;
  z-index: 1;
}

#mainEmoticon.backgroundBox,
#privateEmoticon.backgroundBox {
  background: linear-gradient(180deg, rgba(28, 24, 43, 0.98) 0%, rgba(42, 37, 62, 0.98) 100%);
  border: 1px solid #ffffff47;
  border-radius: 10px 10px 0px 0px;
}

.emoContent,
.emoContentPriv {
  background: rgba(13, 11, 22, 0.72);
}


/* themed topic log */
.topicLog {
  background: linear-gradient(180deg, var(--vc-shadow-68) 0%, var(--vc-panel-74) 100%);
  border: 1px solid #ffffff47;
  color: #fff;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.75);
}

.topicLog .vcSptitle,
.topicLog .vcSptext,
.topicLog .vcSpclear,
.topicLog .vcSpclear i {
  color: #fff !important;
}

/* Camera windows use the same lightweight glass as every modal titlebar. */
.avStreamHeader {
  background:
    linear-gradient(to bottom, rgb(255 255 255 / 24%) 0%, rgb(255 255 255 / 6%) 46%, transparent 50%),
    linear-gradient(to bottom, transparent 50%, rgb(0 0 0 / 10%) 55%, rgb(0 0 0 / 34%) 100%),
    linear-gradient(135deg, rgb(138 136 154 / 32%) 10px, transparent 60px),
    linear-gradient(225deg, rgb(138 136 154 / 32%) 10px, transparent 60px),
    rgb(64 62 91 / 46%);
  -webkit-backdrop-filter: blur(2px) saturate(120%);
  backdrop-filter: blur(2px) saturate(120%);
}

/* Theme-aware structural surfaces. Only color changes between palettes. */
.elementColor,
.playerOptions,
.pageElement,
.chatSidePanel,
#sideMenu,
.modalIn > .vcModalContent,
#privateBox::before,
.privateWindowInstance,
.privateWindowInstance::before,
.savedDataInner::before {
  background: linear-gradient(0deg, var(--vc-surface-light) 0%, var(--vc-surface-mid) 100%);
}

/* Keep the opaque modal body inside the rounded window shell. */
.modalIn > .vcModalContent,
.smallModalIn > .vcModalContent,
.largeModalIn > .vcModalContent,
.overModalIn > .vcModalContent,
.overEmodalIn > .vcModalContent,
.avRequestModalIn > .vcModalContent {
  border-radius: 0 0 4px 4px;
  overflow: hidden;
}

.modalIn > .vcModalTop,
.vistaCaptchaGate > .vcModalTop,
#privateTitlebar,
#streamHeader,
.avStreamHeader,
.soundPopupHead,
.savedDataInner > .vcModalTop {
  background:
    linear-gradient(to bottom, rgba(255, 255, 255, .24) 0%, rgba(255, 255, 255, .06) 46%, transparent 50%),
    linear-gradient(to bottom, transparent 50%, rgba(0, 0, 0, .10) 55%, rgba(0, 0, 0, .34) 100%),
    linear-gradient(135deg, var(--vc-glass-soft-32) 10px, transparent 60px),
    linear-gradient(225deg, var(--vc-glass-soft-32) 10px, transparent 60px),
    var(--vc-glass-deep-46);
}

/* Live/media popup surfaces follow the active theme palette. */
.avMediaPanel {
  background: linear-gradient(
    0deg,
    var(--vc-deep-80) 0%,
    var(--vc-deep-alt-80) 50%,
    var(--vc-deep-alt-80) 100%
  );
}

.avMediaResults,
.vcAvMediaQueue,
.avMediaVideoShareSection,
.avMediaNow {
  background: var(--vc-ink-36);
}

.avMediaResult,
.avMediaQueueItem,
.avMediaMenuOption:hover {
  background: var(--vc-soft-10);
}

.avMediaClearDropdown {
  background: var(--vc-shadow-72);
}

.avMediaResizeHandle {
  background: var(--vc-deep);
}

.avMediaResizeHandle:hover,
.avMediaPanel.avMediaResizing .avMediaResizeHandle {
  background: var(--vc-ink);
}

#rightPanelShell {
  background: linear-gradient(0deg, var(--vc-deep-80) 0%, var(--vc-deep-alt-80) 50%, var(--vc-deep-alt-80) 100%);
}

#containerShowChat {
  background: linear-gradient(
    0deg,
    var(--vc-deep-80) 0%,
    var(--vc-deep-alt-80) 50%,
    var(--vc-deep-alt-80) 100%
  );
}

.adminPanelContent {
  background: rgba(0, 0, 0, .12);
}

.adminPanelTabActive,
.modalSelected,
.tabSelected,
.regSelected,
.modalMenu ul li.modalSelected,
.tabMenu ul li.tabSelected,
.regMenu ul li.regSelected,
.adminPanelModalMenu ul li.adminPanelLinkActive {
  background: linear-gradient(180deg, var(--vc-admin-active-top) 0%, var(--vc-admin-active-bottom) 100%);
  color: #fff;
}

.subMenuItem,
.subListItem,
.statusOption,
.subItem,
.infoPro .listingText {
  color: #23314d;
}

.adminPanelContent #memberList .listingElement,
.adminPanelContent #memberList .listElement,
.adminPanelContent #memberList .subListItem,
.adminPanelContent #actionMutedList .listingElement,
.adminPanelContent #actionMutedList .listElement,
.adminPanelContent #actionMutedList .subListItem,
.adminPanelContent #actionBannedList .listingElement,
.adminPanelContent #actionBannedList .listElement,
.adminPanelContent #actionBannedList .subListItem,
.adminPanelContent #actionKickedList .listingElement,
.adminPanelContent #actionKickedList .listElement,
.adminPanelContent #actionKickedList .subListItem {
  background: linear-gradient(180deg, var(--vc-admin-row-top) 0%, var(--vc-admin-row-mid) 48%, var(--vc-admin-row-bottom) 100%);
}

#vcRoomsContainer .vcNoview,
.vcNoview {
  background: var(--vc-selection);
}

#vcRoomsContainer .vcNoview:hover {
  background: var(--vc-selection);
}

#vcRoomsContainer .listElement:hover,
#containerUser .vcUserItem:hover,
#containerFriends .vcUserItem:hover,
.modalMenu ul li:hover,
.tabMenu ul li:hover,
.regMenu ul li:hover {
  background: var(--vc-selection-soft);
}

#vcPrivateLogs .ulistItem:hover,
.ulistContainer .ulistItem:hover,
.roomContent .ulistItem:hover {
  background: var(--vc-selection-strong);
}

.chatLogRow:hover,
.chatLogRow.logActions {
  background: var(--vc-log-hover);
}

#mainEmoticon.backgroundBox,
#privateEmoticon.backgroundBox {
  background: linear-gradient(180deg, var(--vc-emo-top) 0%, var(--vc-emo-bottom) 100%);
}

.emoContent,
.emoContentPriv {
  background: var(--vc-emo-content);
}
/* vistachat-theme-common-end */

/* Theme picker previews; theme ids remain stable for stored user preferences. */
.selectboxit-option-icon.themeSwatch {
  display: inline-block;
  float: none;
  width: 12px;
  height: 12px;
  margin: 0 2px 0 0;
  vertical-align: middle;
  border: 1px solid rgba(0, 0, 0, 0.42);
  border-radius: 2px;
  background-image: linear-gradient(90deg,var(--theme-preview-mid) 0% 50%,var(--theme-preview-light) 50% 100%) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
}

/* Center only the swatch; keep SelectBoxIt's original row flow intact. */
#setUserThemeSelectBoxItContainer .selectboxit-option-icon.themeSwatch,
#setMainThemeSelectBoxItContainer .selectboxit-option-icon.themeSwatch {
  display: block;
  float: left;
  width: 12px;
  height: 12px;
  line-height: 12px;
  margin: 9px 2px 0 0;
}

.themeSwatchSystem,
.themeSwatchBlue { background-color: #403e5b; }
.themeSwatchAzure { background-color: #1769aa; }
.themeSwatchCyan { background-color: #087f8c; }
.themeSwatchAqua { background-color: #167985; }
.themeSwatchTeal { background-color: #176b68; }
.themeSwatchMint { background-color: #27745d; }
.themeSwatchEmerald { background-color: #246b4a; }
.themeSwatchForest { background-color: #315c3b; }
.themeSwatchLime { background-color: #5d7030; }
.themeSwatchOlive { background-color: #666b32; }
.themeSwatchYellow { background-color: #7d7028; }
.themeSwatchAmber { background-color: #9a681f; }
.themeSwatchCopper { background-color: #8a4f31; }
.themeSwatchSunset { background-color: #a34f3c; }
.themeSwatchRuby { background-color: #8a3046; }
.themeSwatchBurgundy { background-color: #642f45; }
.themeSwatchRose { background-color: #9b4965; }
.themeSwatchMagenta { background-color: #88446f; }
.themeSwatchViolet { background-color: #64458b; }
.themeSwatchIndigo { background-color: #414b8a; }
.themeSwatchNavy { background-color: #344f78; }
.themeSwatchSlate { background-color: #4b5968; }

.registrationConsentList {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: 5px 0 10px;
}
.registrationConsent {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  font-size: 12px;
  line-height: 1.3;
  cursor: pointer;
}
.registrationConsent input {
  flex: 0 0 auto;
  margin: 1px 0 0;
  cursor: pointer;
}

/* User notification links and unclipped modal select lists. */
.notifyPrivateUser{cursor:pointer}
.notifyPrivateUser:focus-visible{outline:2px solid #80cfff;outline-offset:2px}
.vcSelectOverflow{overflow:visible!important}

/* Room management: separate each control from its explanatory label. */
.vcRoomEntrySettings > .formContent + .formContent { margin-top:18px; }
.vcRoomEntrySettings .settingElementContent { padding-bottom:8px; }
.vcRoomEntrySettings .settingElementContent > .vcLabel { margin-bottom:5px; }

@keyframes vcBoomSpinnerRotate {
  0% {
    transform: rotate(90deg);
  }
  100% {
    transform: rotate(450deg);
  }
}

/* Toolbar color swatches retain the same geometry at every viewport. */
#toolbar-color-popup { width:max-content; max-width:calc(100vw - 10px); box-sizing:border-box; display:grid; grid-template-columns:repeat(8,20px); gap:2px; }
#toolbar-color-popup.hideZone { display:none; }
#toolbar-color-popup .colorSwitch { width:20px; height:20px; min-width:20px; margin:0; float:none; flex:none; }
.vistaMentionMenu { position:fixed; list-style:none; margin:0; padding:4px; max-height:220px; overflow:auto; min-width:180px; max-width:calc(100vw - 16px); border-radius:6px; z-index:1000000; box-shadow:0 4px 16px rgba(0,0,0,.25); }
.vistaMentionMenu button { display:block; width:100%; text-align:start; padding:8px 12px; border:0; background:none; color:inherit; cursor:pointer; border-radius:4px; font:inherit; }
.vistaMentionMenu button.mentionActive { outline:1px solid currentColor; }
.adminPanelLink > .fa, .regMenuItem > .fa { margin-inline-end:6px; }
.vistaStereoHelp ol { padding-inline-start:24px; line-height:1.65; }

/* VistaChat 4: fitted palette, title/control boundaries and informational spacing. */
.modalTopEmpty.hasModalTitle { display:block; box-sizing:border-box; line-height:30px; width:calc(100% - 80px); max-width:calc(100% - 80px); font-size:17px; }
.radioPickerModal [data-modal-heading] { font-size:15px; }
.adminUserSummary .vcAvusername { margin-bottom:8px; }
#vcAdminpanel_shell .adminPanelLink > i.fa,
#vcAdminpanel_shell .tabMenuItem > i.fa,
#vcAdminpanel_shell .regMenuItem > i.fa { margin-inline-end:7px; }
.vistaStereoHelp { padding:25px; }
.vistaStereoHelp ol { list-style:decimal; padding-inline-start:24px; margin:0 0 15px; }
.vistaStereoHelp li { list-style:decimal; display:list-item; margin-bottom:10px; line-height:1.5; }
.vistaStereoHelp p { line-height:1.5; margin-bottom:12px; }
.vistaStereoHelp button { margin-top:12px; }

/* Room ordering and addon tab spacing, scoped to management pages. */
.vistaAddonConfigPage .tabMenu, .vistaAddonConfigPage .regMenu, .vistaAddonConfigPage .modalMenu, .roomManagementMenu { margin-bottom:12px; }
.vistaAddonConfigPage .tabMenuItem > .fa, .vistaAddonConfigPage .regMenuItem > .fa, .vistaAddonConfigPage .modalMenuItem > .fa, .roomManagementMenu .tabMenuItem > .fa { margin-inline-end:7px; }
.roomSortableList .roomOrderHandle { display:none; cursor:grab; touch-action:none; }
.roomSortableList[data-sort-mode="custom"] .roomOrderHandle { display:table-cell; }
.roomOrderHandle.roomOrderBusy { pointer-events:none; opacity:.5; }
.roomSortableList .sortable-ghost { opacity:.4; }
.roomAccessVisibilityRow .settingCheckboxLabel { gap:8px; }

.roomRestrictedVisibility .inRoomIcon,.roomRestrictedVisibility .inRoomName,.roomRestrictedVisibility .vcRoomIcon,.roomRestrictedVisibility .vcRoomName,.roomRestrictedVisibility .vcRoomDescription{opacity:.65}

.identityHistoryItem{padding:4px 0;overflow-wrap:anywhere}.identityHistoryItem small{display:block;margin-top:3px}

.addonCatalogIcon,.addonCatalogIcon img{border-radius:0}.vistaRichImage{max-width:100%;max-height:200px;object-fit:contain}.vistaRichAudio{max-width:100%;vertical-align:middle}.pollContent h3 .vistaRichImage{display:block;margin:8px 0}

.reportRoomName { border-radius: 6px; color: #fff; margin-bottom: 10px; }
.reportRoomName i { margin-right: 6px; }

/* System archive: isolated from chat media/lightbox handlers. */
.auditFilters{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px 18px;padding-top:10px}
.auditFilters label{display:flex;align-items:center;gap:8px;min-width:0;cursor:pointer;font-size:13px}
.auditFilters input{flex:none}
.auditRoomLink{cursor:pointer}.auditRoomLink:hover{text-decoration:underline}
.auditEvidence{padding:0;margin-top:8px;border-radius:6px;overflow-wrap:anywhere}
.auditEvidenceText{white-space:normal;margin:5px 0}
.auditEvidence .chatImage{display:block;max-width:100%;max-height:260px;object-fit:contain;margin-top:8px;cursor:default}
.auditEvidence .containerSubPlayer{margin-top:8px}
.auditEvidence .chatAudio{display:none}
.auditDetails{white-space:normal;overflow-wrap:anywhere;padding-top:5px}

/* Archive fits its own admin viewport; other scrolling lists retain their layout. */
#consoleResults{height:var(--vista-audit-height,300px);max-height:none;overflow-y:auto;overscroll-behavior:contain}
.auditAttachment{display:block;margin-top:8px;overflow-wrap:anywhere}

.reportRoomName{display:table;width:fit-content;max-width:100%;margin-left:auto;margin-right:auto;cursor:pointer;text-align:center;overflow-wrap:anywhere}
.reportRoomName:hover{text-decoration:none}
.reportRoomName:hover .reportRoomText{text-decoration:underline}
.reportRoomText{display:inline}
.auditPrivateReportLink{margin-top:8px}
.auditPrivateReportBox{color:#fff}
.auditPrivateReportBox .auditEvidence{margin:0 0 8px}
.auditPrivateReportBox .auditEvidence .subText{color:#fff}
.newsUploadIcon{display:block;width:28px;height:28px;object-fit:contain;margin:auto}
.newsPublishButton{border-radius:0}

/* Room DJ rows retain identical middle alignment in every theme. */
.roomDjListItem{display:flex;align-items:center;gap:6px;min-height:40px;height:auto;padding:4px 6px;}
.roomDjListItem .ulistAvatar{display:flex;align-items:center;flex:0 0 30px;padding:0;}
.roomDjListItem .ulistAvatar img{display:block;width:30px;height:30px;object-fit:cover;}
.roomDjListItem .ulistName{display:block;flex:1;min-width:0;padding:0;line-height:20px;}
.roomDjListItem .ulistOption{display:flex;align-items:center;justify-content:center;flex:0 0 auto;width:auto;height:30px;gap:4px;padding:0 5px;}

.slapExtensionTextarea{min-height:260px;resize:vertical;}

/* VistaChat4.0.31: aspect-correct news reactions and selection glow. */
.newsReaction .likeIcon, .newsReactionMenu .wlikeIcon { width:auto; height:20px; max-width:none; object-fit:contain; }
.newsReaction:hover .likeIcon, .newsReactionMenu .modalMenuItem:hover .wlikeIcon,
.newsReaction.vcLiked .likeIcon { filter:brightness(1.12) drop-shadow(0 0 2px rgba(255,255,255,.9)); }
.newsReaction.vcLiked { color:inherit; font-weight:700; }
.djRemoveActionIcon { color:#e34b4b; }

.newsReactionMenu .newsOwnReaction { color:inherit; font-weight:700; }
.newsReactionMenu .newsOwnReaction .wlikeIcon { filter:brightness(1.12) drop-shadow(0 0 2px rgba(255,255,255,.9)); }

/* Reaction user lists use the same full-width table rows as room staff. */
.newsReactionUsers .ulistItem { display:table; width:100%; }

.coreMovableModal > .modalIn, .userProfileWindow > .modalIn { max-height:calc(100vh - 70px); overflow-y:auto; }

/* Mobile fixed dialogs use viewport width, including borders, with equal gutters. */
@media (max-width:599px) {
  .coreMovableModal > .modalIn,
  .userProfileWindow > .modalIn {
    box-sizing:border-box !important;
    width:calc(100vw - 12px) !important;
    min-width:0 !important;
    margin:0 !important;
  }
}
/* v4.0.41: compact facts first, independent flowing information columns. */
:is(#adminProfileInfo,#profileSelfInfo) .vcInfoColumns{column-count:2;column-gap:12px}
:is(#adminProfileInfo,#profileSelfInfo) .vcInfoColumns>.infoPro{float:none;width:100%;margin:0 0 10px;box-sizing:border-box;break-inside:avoid}
:is(#adminProfileInfo,#profileSelfInfo) .listingText{overflow-wrap:anywhere}
:is(#adminProfileInfo,#profileSelfInfo) .vcInfoUser{border:0;background:none;padding:0;color:inherit;font:inherit;cursor:pointer}
.vcImageDownload{color:#fff!important;text-shadow:0 1px 3px #000,0 0 4px #000;font-size:18px;z-index:8;cursor:pointer;position:absolute;right:7px;bottom:6px;line-height:24px}
.roomBgPreview,.roomIconPreview{position:relative}
.roomIconPreview>.vcImageDownload{right:-28px;bottom:calc(50% - 12px)}
@media(max-width:360px){:is(#adminProfileInfo,#profileSelfInfo) .vcInfoColumns{column-gap:7px}}
:is(#adminProfileInfo,#profileSelfInfo) .vcInfoColumns{column-count:auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;align-items:start}
:is(#adminProfileInfo,#profileSelfInfo) .vcInfoColumn{display:flex;flex-direction:column;min-width:0;gap:10px}
:is(#adminProfileInfo,#profileSelfInfo) .vcInfoColumn>.infoPro{float:none;width:100%;margin:0;box-sizing:border-box}
.vcImageDownload.vcIconImageDownload{position:static;display:inline-flex;align-items:center;justify-content:center;flex:none;width:24px;min-height:28px}

/* Independent gift viewers share bounds regardless of the recipient-specific window ID. */
.giftListModalWindow .giftListWrap,
#profileSelfGifts .giftListWrap {
 display: flex;
 flex-direction: column;
 min-height: 0;
 overflow: hidden;
}
.giftListModalWindow .giftListHead,
.giftListModalWindow .giftPager,
#profileSelfGifts .giftListHead,
#profileSelfGifts .giftPager { flex: 0 0 auto; }
.giftListModalWindow .giftListGrid,
#profileSelfGifts .giftListGrid {
 flex: 1 1 auto;
 min-height: 0;
 overflow-y: auto;
 align-content: start;
}
/* 600px is the entire radio window, including its fixed title bar. */
#serviceModal-radio_picker > .modalIn {
 display: flex;
 flex-direction: column;
 max-height: min(600px, calc(100vh - 58px)) !important;
 overflow: hidden;
}
#serviceModal-radio_picker > .modalIn > .vcModalTop { flex: 0 0 auto; }
#serviceModal-radio_picker > .modalIn > .vcModalContent {
 flex: 1 1 auto;
 min-height: 0;
 max-height: none;
 overflow-y: auto;
}

/* Embedded profile gift pages also keep their pager above the viewport edge. */
#profileSelfGifts .giftListWrap {
 height: min(450px, calc(100vh - 220px));
 box-sizing: border-box;
}

/* Camera invitation remains fixed at the right of each private input toolbar. */
[id="privateInputToolbar"] > .privateCameraSend{position:relative;margin-left:auto;flex:0 0 28px;width:28px;height:32px}
[id="privateInputToolbar"] > .privateCameraSend img{width:22px;height:22px;transform:translateY(-2px)}
.privateCameraSend::after{content:"\f064";font-family:FontAwesome;font-weight:normal;font-style:normal;display:block;width:16px;height:15px;line-height:15px;position:absolute;left:4px;bottom:1px;color:#1cba2d;transform:scaleY(-1);font-size:15px;text-shadow:none;filter:drop-shadow(0 0 2px rgba(2,2,2,.47)) drop-shadow(0 0 2px rgba(2,2,2,.14));background:linear-gradient(to bottom,#42d54f 0%,#1cba2d 30%,#1cba2d 70%,#149523 100%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;pointer-events:none}

/* Camera icon uses the same normal/hover shadow as adjacent input tools. */
[id="privateInputToolbar"] > .privateCameraSend img{filter:drop-shadow(0 0 2px rgba(2,2,2,.47)) drop-shadow(0 0 2px rgba(2,2,2,.14))}
[id="privateInputToolbar"] > .privateCameraSend:hover img{filter:drop-shadow(0 0 2px rgba(2,2,2,.72)) drop-shadow(0 0 2px rgba(2,2,2,.32))}

[id="privateInputToolbar"] > .privateGameSend{position:relative;margin-left:auto;flex:0 0 28px;width:28px;height:32px}
[id="privateInputToolbar"] > .privateCameraSend ~ .privateGameSend{margin-left:0}
[id="privateInputToolbar"] > .privateGameSend img{width:22px;height:22px;transform:translateY(-2px)}
.privateGameSend::after{content:"\f064";font-family:FontAwesome;font-weight:normal;font-style:normal;display:block;width:16px;height:15px;line-height:15px;position:absolute;left:4px;bottom:1px;color:#1cba2d;transform:scaleY(-1);font-size:15px;text-shadow:none;filter:drop-shadow(0 0 2px rgba(2,2,2,.47)) drop-shadow(0 0 2px rgba(2,2,2,.14));background:linear-gradient(to bottom,#42d54f 0%,#1cba2d 30%,#1cba2d 70%,#149523 100%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;pointer-events:none}
.privateGameInviteDetails{display:block;font-size:12px;margin:6px 0}

.vistaInvitationHero{margin:0 0 12px;line-height:1;height:auto}.vistaInvitationHero img{width:44px;height:44px;object-fit:contain}.vistaInvitationDetails{margin:0 0 15px;line-height:1.6}

/* Occupied sidebar rooms use the existing visible online count. */
.inRoomElement.roomHasUsers .inRoomName{color:#d1ffc8}
/* Same single glow when hovering the icon or its surrounding button hit area. */
.mainInputToolbar .inputExtraPlateIcon:hover > img,
.mainInputToolbar .inputExtraSoundIcon:hover > img,
#mainInputExtra > .inputExtraPlateIcon:hover > img,
#mainInputExtra > .inputExtraSoundIcon:hover > img{
 filter:drop-shadow(0 0 2px rgb(255 255 255 / 90%));transform:none;
}


/* One Vista loading design for inline controls and centered content loaders. */
.vistaInlineSpinner {display:inline-block;position:relative;width:24px;height:24px;vertical-align:middle;flex:none;line-height:0;}
.vistaInlineSpinner > .vistaSpinnerShell {position:absolute;left:0;top:0;width:42px;height:42px;transform:scale(.57142857);transform-origin:top left;}
.vistaLoadingBlock {position:relative;min-height:96px;display:flex;align-items:center;justify-content:center;}
.vistaLoadingBlock > .vistaInlineSpinner {position:absolute;left:50%;top:50%;width:42px;height:42px;margin:-21px 0 0 -21px;}
.vistaLoadingBlock > .vistaInlineSpinner > .vistaSpinnerShell {transform:none;}
.vistaSpinnerHost:before {display:none;}
.vistaSpinnerHost {display:inline-flex;align-items:center;justify-content:center;}
.auditResultsFrame {position:relative;}
#consoleSpinner {position:absolute;inset:0;min-height:0;pointer-events:none;}
.vipAvatarPageLoader,.voiceRecordBusy {display:flex;align-items:center;justify-content:center;}

.vistaInlineSpinner .vistaSpinner {display:block;}

.identityOldIps{cursor:pointer}.identityOldIps:focus-visible{outline:2px solid currentColor;outline-offset:2px}.identityIpResults{max-height:500px;overflow:auto}.identityIpLink{border:0;background:none;padding:0;color:#fff;font:inherit;cursor:pointer;text-align:inherit}.identityIpRow .ulistName{white-space:normal;overflow-wrap:anywhere}.identityIpRow .ulistAvatar{color:#fff}.identityIpRow .identityIpDate{color:#fff!important;font-size:11px;max-width:140px;flex-wrap:wrap}.identityIpResults .giftPager{display:flex;justify-content:center;flex-wrap:wrap;gap:4px}

/* Bound information content independently of modal title and profile tabs. */
#adminProfileInfo,#profileSelfInfo{max-height:550px;overflow-y:auto;overflow-x:hidden;box-sizing:border-box}

#vistaConnectingPanel{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2147483647;display:none;text-align:center;box-sizing:border-box;pointer-events:auto}
.vistaConnectingTitle{font-size:18px;font-weight:bold;margin:0 0 20px}.vistaConnectingSpinner{display:flex;justify-content:center;align-items:center;min-height:65px}.vistaConnectingSpinner .vcLargeSpinner{position:relative;top:auto;left:auto;margin:0;width:56px;height:56px;transform:none}

/* v4.1.44: base rank title on first row; full-width controls below. */
.roleAdminBase { display:grid; grid-template-columns:26px minmax(0,1fr) auto; }
.roleAdminBase > .roleAdminIdentity { grid-column:2 / -1; width:auto; min-width:0; }
.roleAdminBase > .roleAdminBaseName { grid-column:1 / 3; grid-row:2; width:100%; min-width:0; margin-left:0; order:initial; box-sizing:border-box; }
.roleAdminBase > .roleAdminActions { grid-column:3; grid-row:2; margin-left:0; }
/* One AV DOM instance is moved; collapsing does not stop media. */
body.avCompactMode .avMobileToggleItem { display:none !important; }
body.avCompactMode #avMobileChatSlot .panelAvItem.avPanelCollapsed > .avPanelContent { display:none; }
body.avCompactMode #avMobileChatSlot .avPanelTitle { clip-path:polygon(0% 0%,100% 0%,100% calc(100% - 10px),calc(100% - 40px) calc(100% - 10px),calc(100% - 50px) 100%,0% 100%); min-height:30px; box-sizing:border-box; }
body.avCompactMode #avMobileChatSlot .avMobilePanelClose { left:2px; right:auto; width:28px; }

/* v4.1.46: fixed sidebar controls; only its room listing owns overflow. */
#leftPanel { overflow:hidden; }
#chatLeftMenu { display:flex; flex-direction:column; box-sizing:border-box; overflow:hidden; }
#chatLeftMenu > * { flex:0 0 auto; }
#chatLeftMenu > #roomListPanel { flex:1 1 0; min-height:0; display:flex; flex-direction:column; }
#roomListPanel > .panel-wrapper { flex:0 0 auto; }
#roomListPanelContent { flex:1 1 0; min-height:0; overflow:hidden; }
#containerRoom { height:100%; min-height:0; }
body.avCompactMode #avMobileChatSlot .avMobilePanelClose { color:#fff; background:linear-gradient(#b5c8dd 0%,#8ca6c3 49%,#52769f 50%,#7da4d6 100%); border-radius:0 0 4px 0; transition:filter .15s,box-shadow .15s; }
body.avCompactMode #avMobileChatSlot .avMobilePanelClose:hover,
body.avCompactMode #avMobileChatSlot .avMobilePanelClose:focus-visible { background:linear-gradient(#b4d5ef 0%,#76a9d1 49%,#0a619f 50%,#31cde2 100%); box-shadow:inset 0 1px #fff,0 0 5px #31cde280; }
#chatLeftMenu > .chatLeftMenuWrap { display:flex; flex-direction:column; flex:1 1 0; min-height:0; }
.chatLeftMenuWrap > * { flex:0 0 auto; }
#chatLeftMenu .chatLeftMenuWrap > #roomListPanel { flex:1 1 0; min-height:0; display:flex; flex-direction:column; }

/* v4.1.47: size the overlay menu to its actual inset panel, not full viewport. */
#leftPanel.vcCleft2 #chatLeftMenu { height:100% !important; max-height:100%; }
body.avCompactMode #avMobileChatSlot .avMobilePanelClose { border:1px solid #aeb1b4; border-top:0; padding:0; margin:0; font-size:11px; line-height:1; box-sizing:border-box; appearance:none; -webkit-appearance:none; touch-action:manipulation; }
body.avCompactMode #avMobileChatSlot .avMobilePanelClose > i { background:none; border:0; box-shadow:none; width:auto; height:auto; line-height:1; font-size:11px; color:inherit; pointer-events:none; text-shadow:0 1px 2px #263a50; }
/* v4.1.49: restore the original 17px icon + 1px border geometry. */
body.avCompactMode #avMobileChatSlot .avMobilePanelClose { width:19px; height:19px; min-width:0; min-height:0; top:5px; bottom:auto; left:4px; border:1px solid #aeb1b4; border-radius:4px; }

/* v4.1.52: full AV title hit area and a decorative arrow, not a button. */
body.avCompactMode #avMobileChatSlot .avPanelHeader { cursor:pointer; touch-action:manipulation; }
body.avCompactMode #avMobileChatSlot .avPanelHeader .avPanelTitle { transition:filter .15s; }
body.avCompactMode #avMobileChatSlot .avPanelHeader:hover .avPanelTitle,
body.avCompactMode #avMobileChatSlot .avPanelHeader:focus-visible .avPanelTitle { filter:brightness(1.2); }
body.avCompactMode #avMobileChatSlot .avMobilePanelClose,
body.avCompactMode #avMobileChatSlot .avMobilePanelClose:hover { background:none; border:0; border-radius:0; box-shadow:none; color:#fff; pointer-events:none; }
body.avCompactMode #avMobileChatSlot .avPanelHeader:hover .avMobilePanelClose { color:#fff; }
#leftLogoutOption { cursor:default; }
#leftLogoutOption img { cursor:pointer; }

/* v4.1.59: crossfade the original Start surface with sampled play.png gloss. */
#homeBtn { position:relative; }
#homeBtn.radioPlaying::before {
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(180deg,#a7b8da 0%,#a3b5db 28%,#2b58b5 46%,#3261be 60%,#3e6ece 80%,#4b7cdf 100%);
  box-shadow:inset 0 1px 1px #ffffffa0,inset 0 -1px 2px #132e6880,0 0 8px #4b7cdf90;
  animation:radioVistaGlossPulse 1.1s ease-in-out infinite alternate;
}
#homeBtn.radioPlaying img { z-index:1; }
@keyframes radioVistaGlossPulse { from { opacity:0; } to { opacity:1; } }

/* v4.1.70: shadow clipped below crescent and stronger progressive right-edge fade. */
#homeBtn.radioPlaying::after {
  content:""; position:absolute; inset:0; left:-6px; border-radius:inherit; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2054%2037%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cfilter%20id%3D%22soft%22%20x%3D%22-100%25%22%20y%3D%22-100%25%22%20width%3D%22300%25%22%20height%3D%22300%25%22%3E%3CfeGaussianBlur%20stdDeviation%3D%224%22%2F%3E%3C%2Ffilter%3E%3CclipPath%20id%3D%22belowCurve%22%3E%3Cpath%20d%3D%22M-8%2046%20C-2%2020%208%205%2058%20-4%20L80%20-4%20L80%2060%20L-8%2060%20Z%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3Cg%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M-8%2046%20C-2%2020%208%205%2058%20-4%22%20transform%3D%22translate%28-3%20-4%29%22%20stroke%3D%22white%22%20stroke-opacity%3D%22.80%22%20stroke-width%3D%2216%22%20filter%3D%22url%28%23soft%29%22%2F%3E%3Cg%20clip-path%3D%22url%28%23belowCurve%29%22%3E%3Cpath%20d%3D%22M-8%2046%20C-2%2020%208%205%2058%20-4%22%20transform%3D%22translate%283%204%29%22%20stroke%3D%22%2310284d%22%20stroke-opacity%3D%22.52%22%20stroke-width%3D%2216%22%20filter%3D%22url%28%23soft%29%22%2F%3E%3C%2Fg%3E%3Cpath%20d%3D%22M-8%2046%20C-2%2020%208%205%2058%20-4%22%20stroke%3D%22white%22%20stroke-opacity%3D%22.50%22%20stroke-width%3D%22.7%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  background-size:100% 100%; background-repeat:no-repeat;
  -webkit-mask-image:linear-gradient(to right,transparent 0%,#000 12%,rgba(0,0,0,.8) 25%,rgba(0,0,0,.25) 48%,transparent 72%);
  mask-image:linear-gradient(to right,transparent 0%,#000 12%,rgba(0,0,0,.8) 25%,rgba(0,0,0,.25) 48%,transparent 72%);
  will-change:transform,opacity;
  animation:radioVistaGlassReflection 2.2s cubic-bezier(.25,.1,.25,1) infinite;
}
@keyframes radioVistaGlassReflection {
  0% { opacity:0; transform:translate3d(0,0,0); }
  50% { opacity:1; transform:translate3d(3px,0,0); }
  100% { opacity:0; transform:translate3d(6px,0,0); }
}

/* v4.1.73: playback-only internal radio surface shine, matching Score 4. */
.radioBox { position:relative; }
.radioBox.radioShining::after {
 content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:2;
 background:linear-gradient(115deg,transparent 35%,rgba(192,232,255,.05) 42%,rgba(238,250,255,.18) 50%,rgba(192,232,255,.05) 58%,transparent 65%);
 background-size:300% 100%; animation:radioSurfaceShine 2.8s linear infinite;
 box-shadow:inset 0 0 12px rgba(160,215,255,.16);
}
@keyframes radioSurfaceShine {0%{background-position:100% 0;opacity:1}100%{background-position:0 0;opacity:1}}
@media(prefers-reduced-motion:reduce){.radioBox.radioShining::after{animation:none;background-size:100% 100%;opacity:.2}}

/* Pending notifications: rise, small bell rotations, then return every 1.5s. */
.taskbarOption.vcNotificationAttention .taskbarIcon,
.panelOption.vcNotificationAttention .panelOptionText {
 animation:vcNotificationRing 1.5s ease-in-out infinite;
 transform-origin:50% 55%;
}
@keyframes vcNotificationRing {
 0%,65%,100% {transform:scale(1) rotate(0deg)}
 15% {transform:scale(1.18) rotate(0deg)}
 22%,36% {transform:scale(1.18) rotate(-7deg)}
 29%,43% {transform:scale(1.18) rotate(7deg)}
 50% {transform:scale(1.18) rotate(0deg)}
}
@media(prefers-reduced-motion:reduce){.taskbarOption.vcNotificationAttention .taskbarIcon,.panelOption.vcNotificationAttention .panelOptionText{animation:none}}

/* News uses the announcement note, with a separate interaction section. */
.newsBox.postElement{padding:0;margin:0 0 18px;border:0;background:transparent;overflow:visible}
.newsBox .postContent.massAnnouncementContent{padding:0}
.newsBox .massAnnouncementSender .postAvatar,.newsBox .massAnnouncementSender .postAvatar img{width:36px;height:36px}
.newsBox .massAnnouncementSender .postInfo{padding:0;text-align:left}
.newsBox .massAnnouncementSender .vcUsername{text-align:left;color:#4d3700!important}
.newsBox .massAnnouncementSender .vcDate{color:#4d3700}
.newsBox .massAnnouncementHeader .postEdit{position:relative;display:block;width:28px;cursor:pointer}
.newsBox .massAnnouncementHeader{overflow:visible}
.newsBox .massAnnouncementNote{overflow:visible}
.newsInteractionSection{padding:10px 12px;border-radius:0 0 3px 3px;background:var(--vc-deep-80);border:1px solid #ffffff26;color:#fff}
.newsComposer .postInputContainer{padding:22px 20px}
.newsComposer #newsData{background:transparent;color:#4d3700;border:0;box-shadow:none;width:100%;box-sizing:border-box}
.newsComposer #newsData::placeholder{color:#785b18;opacity:1}
.newsComposer .mainPostControl{margin:0}
@media(max-width:560px){.newsComposer .postInputContainer{padding:17px 14px}}

/* News sender header and yellow interaction area; shared theme context menus. */
.newsBox .massAnnouncementHeader{padding:9px 12px;gap:10px}
.newsBox .massAnnouncementHeader .massAnnouncementSender{flex:1;min-width:0;width:auto}
.newsBox .massAnnouncementHeader .postInfo{min-width:0}
.newsBox .massAnnouncementHeader .vcDate{margin-top:3px}
.newsBox .newsInteractionSection{color:#4d3700;background:linear-gradient(180deg,#fff7b8 0%,#ffe27a 52%,#f6c94a 100%);border-color:#b58416;border-top-color:#fff6bd;box-shadow:inset 0 1px 0 #ffffff80}
.newsInteractionSection .replyItem{background:rgba(255,255,255,.16);border-color:rgba(126,86,0,.25);color:#4d3700}
.newsInteractionSection .addComment{background:rgba(255,255,255,.32);color:#4d3700;border:1px solid rgba(126,86,0,.35)}
.newsInteractionSection .addComment::placeholder{color:#785b18;opacity:1}
.newsInteractionSection .vcDate{color:#785b18}
.postMenu.vcFmenu,#logMenuContent,#vcLogMenu,#vcLogmenu{border-radius:2px;border:1px solid var(--vc-soft,#8a889a);border-top-color:#ffffff80;border-left-color:#ffffff80;background:var(--vc-deep,#403e5b);box-shadow:inset 0 1px 0 #ffffff30,2px 3px 7px #0009;color:#fff}
.postMenu.vcFmenu .fmenuItem,#logMenuContent .logMenuItem,#vcLogmenu .logMenuItem{color:#fff;background:linear-gradient(180deg,var(--vc-soft,#8a889a),var(--vc-deep,#403e5b) 48%,var(--vc-deep,#403e5b));border-bottom:1px solid #0005;box-shadow:inset 0 1px 0 #ffffff26;text-shadow:0 1px 1px #0009}
.postMenu.vcFmenu .fmenuItem:hover,#logMenuContent .logMenuItem:hover,#vcLogmenu .logMenuItem:hover{background:linear-gradient(180deg,var(--vc-soft,#8a889a),var(--vc-deep,#403e5b));box-shadow:inset 0 0 8px #ffffff40;color:#fff}

/* One continuous news note, including its reactions and comments. */
.newsBox .newsInteractionSection{background:transparent;border:0;border-top:1px solid rgba(126,86,0,.25);box-shadow:none;border-radius:0;padding:10px 14px}
.newsComposer .upFileInside{position:relative;display:inline-block;max-width:100%;padding:0}
.newsComposer .upFileInside>img{display:block;max-width:100%}
.newsComposer .upFileRemove{position:absolute;top:6px;right:6px;left:auto;bottom:auto;display:flex;align-items:center;justify-content:center;width:18px;height:18px;min-width:0;min-height:0;padding:0;font-size:10px;line-height:1;transform:none;z-index:2;cursor:pointer}
.newsComposer .upFileRemove i{display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:18px;height:18px;padding:0;line-height:1;margin:0;flex:0 0 18px}
#vcLogmenu{box-sizing:border-box}

/* Theme-colored news comments with the standard small centered close. */
.newsInteractionSection .replyItem{color:#fff;background:linear-gradient(180deg,var(--vc-soft,#8a889a),var(--vc-deep,#403e5b) 48%,var(--vc-deep,#403e5b));border:1px solid #ffffff40;border-radius:2px;box-shadow:inset 0 1px 0 #ffffff26;box-sizing:border-box}
.newsInteractionSection .replyItem .vcDate{color:#fff;opacity:.75}
.newsInteractionSection .replyItem .replyDelete{width:18px;padding:0;vertical-align:top}
.newsInteractionSection .replyDelete i{display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:18px;height:18px;padding:0;line-height:1;margin:0;flex:0 0 18px}

/* Additional nature palettes in existing theme selector. */
.theme_swatch_ocean,.themeSwatchOcean {background-color:#314d6a;}
.theme_swatch_ice,.themeSwatchIce {background-color:#375f76;}
.theme_swatch_water,.themeSwatchWater {background-color:#346671;}
.theme_swatch_moss,.themeSwatchMoss {background-color:#456c32;}
.theme_swatch_sand,.themeSwatchSand {background-color:#715b34;}
.theme_swatch_wood,.themeSwatchWood {background-color:#421900;}
.theme_swatch_flame,.themeSwatchFlame {background-color:#6f4033;}
.theme_swatch_lavender,.themeSwatchLavender {background-color:#563573;}

/* Deep Wood-reference palettes: selector previews match actual deep colors. */
.theme_swatch_ice,.themeSwatchIce {background-color:#122b38;}
.theme_swatch_forest,.themeSwatchForest {background-color:#182d1a;}
.theme_swatch_midnight,.themeSwatchMidnight {background-color:#0c2260;}
.theme_swatch_ember,.themeSwatchEmber {background-color:#471904;}
.theme_swatch_amethyst,.themeSwatchAmethyst {background-color:#3d1254;}
.theme_swatch_flame,.themeSwatchFlame {background-color:#540803;}
.theme_swatch_indigo,.themeSwatchIndigo {background-color:#1f244e;}
.theme_swatch_emerald,.themeSwatchEmerald {background-color:#132c25;}
.theme_swatch_magenta,.themeSwatchMagenta {background-color:#3e1b36;}
.theme_swatch_amber,.themeSwatchAmber {background-color:#332511;}
.theme_swatch_sand,.themeSwatchSand {background-color:#322510;}
.theme_swatch_lime,.themeSwatchLime {background-color:#242b11;}
.theme_swatch_yellow,.themeSwatchYellow {background-color:#2d2710;}
.theme_swatch_navy,.themeSwatchNavy {background-color:#1b2740;}
.theme_swatch_copper,.themeSwatchCopper {background-color:#372318;}
.theme_swatch_water,.themeSwatchWater {background-color:#102b32;}
.theme_swatch_slate,.themeSwatchSlate {background-color:#1c2935;}
.theme_swatch_rose,.themeSwatchRose {background-color:#3c1d30;}
.theme_swatch_ocean,.themeSwatchOcean {background-color:#14283e;}
.theme_swatch_teal,.themeSwatchTeal {background-color:#102b2e;}
.theme_swatch_lavender,.themeSwatchLavender {background-color:#361950;}
.theme_swatch_bronze,.themeSwatchBronze {background-color:#362408;}
.theme_swatch_olive,.themeSwatchOlive {background-color:#292913;}
.theme_swatch_ruby,.themeSwatchRuby {background-color:#421b27;}
.theme_swatch_cyan,.themeSwatchCyan {background-color:#0d2b36;}
.theme_swatch_pine,.themeSwatchPine {background-color:#092e19;}
.theme_swatch_obsidian,.themeSwatchObsidian {background-color:#252730;}
.theme_swatch_mint,.themeSwatchMint {background-color:#142d23;}
.theme_swatch_moss,.themeSwatchMoss {background-color:#182c0e;}
.theme_swatch_sunset,.themeSwatchSunset {background-color:#3c2019;}
.theme_swatch_violet,.themeSwatchViolet {background-color:#321f44;}
.theme_swatch_burgundy,.themeSwatchBurgundy {background-color:#431b25;}
.theme_swatch_aqua,.themeSwatchAqua {background-color:#122b2e;}

/* Palette preview uses its actual medium highlight, not the deep background. */
.theme_swatch_blue,.themeSwatchBlue {background-color:#8a889a;}
.theme_swatch_obsidian,.themeSwatchObsidian {background-color:#595b68;}
.theme_swatch_azure,.themeSwatchAzure {background-color:#7097ab;}
.theme_swatch_ocean,.themeSwatchOcean {background-color:#405e7d;}
.theme_swatch_ice,.themeSwatchIce {background-color:#3c6074;}
.theme_swatch_cyan,.themeSwatchCyan {background-color:#336174;}
.theme_swatch_water,.themeSwatchWater {background-color:#36626b;}
.theme_swatch_aqua,.themeSwatchAqua {background-color:#3a6266;}
.theme_swatch_teal,.themeSwatchTeal {background-color:#376367;}
.theme_swatch_mint,.themeSwatchMint {background-color:#3c6454;}
.theme_swatch_emerald,.themeSwatchEmerald {background-color:#3b6358;}
.theme_swatch_forest,.themeSwatchForest {background-color:#446347;}
.theme_swatch_pine,.themeSwatchPine {background-color:#296744;}
.theme_swatch_moss,.themeSwatchMoss {background-color:#436533;}
.theme_swatch_lime,.themeSwatchLime {background-color:#556038;}
.theme_swatch_olive,.themeSwatchOlive {background-color:#5d5d3b;}
.theme_swatch_yellow,.themeSwatchYellow {background-color:#655b36;}
.theme_swatch_amber,.themeSwatchAmber {background-color:#6d5939;}
.theme_swatch_bronze,.themeSwatchBronze {background-color:#735729;}
.theme_swatch_sand,.themeSwatchSand {background-color:#6c5937;}
.theme_swatch_copper,.themeSwatchCopper {background-color:#725546;}
.theme_swatch_wood,.themeSwatchWood {background-color:#85461e;}
.theme_swatch_sunset,.themeSwatchSunset {background-color:#7a5248;}
.theme_swatch_flame,.themeSwatchFlame {background-color:#8e4824;}
.theme_swatch_ember,.themeSwatchEmber {background-color:#805223;}
.theme_swatch_ruby,.themeSwatchRuby {background-color:#814c5c;}
.theme_swatch_burgundy,.themeSwatchBurgundy {background-color:#834b5a;}
.theme_swatch_rose,.themeSwatchRose {background-color:#7a4f68;}
.theme_swatch_magenta,.themeSwatchMagenta {background-color:#7d4b71;}
.theme_swatch_violet,.themeSwatchViolet {background-color:#6b5084;}
.theme_swatch_amethyst,.themeSwatchAmethyst {background-color:#7d419d;}
.theme_swatch_lavender,.themeSwatchLavender {background-color:#714a93;}
.theme_swatch_indigo,.themeSwatchIndigo {background-color:#52578e;}
.theme_swatch_navy,.themeSwatchNavy {background-color:#4a5c7e;}
.theme_swatch_midnight,.themeSwatchMidnight {background-color:#3a57a9;}
.theme_swatch_slate,.themeSwatchSlate {background-color:#4c5e6f;}
.themeSwatchSystem{background-color:#8a889a;}

/* Representative theme previews: 55% deep + 45% highlight, matched to palette. */
.theme_swatch_blue,.themeSwatchBlue {background-color:#615f77;}
.theme_swatch_flame,.themeSwatchFlame {background-color:#6e2512;}
.theme_swatch_sunset,.themeSwatchSunset {background-color:#58362e;}
.theme_swatch_ember,.themeSwatchEmber {background-color:#613312;}
.theme_swatch_copper,.themeSwatchCopper {background-color:#523a2d;}
.theme_swatch_wood,.themeSwatchWood {background-color:#602d0e;}
.theme_swatch_amber,.themeSwatchAmber {background-color:#4d3c23;}
.theme_swatch_bronze,.themeSwatchBronze {background-color:#513b17;}
.theme_swatch_sand,.themeSwatchSand {background-color:#4c3c22;}
.theme_swatch_yellow,.themeSwatchYellow {background-color:#46400b;}
.theme_swatch_olive,.themeSwatchOlive {background-color:#404025;}
.theme_swatch_lime,.themeSwatchLime {background-color:#3a4323;}
.theme_swatch_moss,.themeSwatchMoss {background-color:#2b461f;}
.theme_swatch_forest,.themeSwatchForest {background-color:#2c452e;}
.theme_swatch_pine,.themeSwatchPine {background-color:#17482c;}
.theme_swatch_mint,.themeSwatchMint {background-color:#264639;}
.theme_swatch_emerald,.themeSwatchEmerald {background-color:#25453c;}
.theme_swatch_teal,.themeSwatchTeal {background-color:#224448;}
.theme_swatch_aqua,.themeSwatchAqua {background-color:#244447;}
.theme_swatch_water,.themeSwatchWater {background-color:#21444c;}
.theme_swatch_cyan,.themeSwatchCyan {background-color:#1e4352;}
.theme_swatch_ice,.themeSwatchIce {background-color:#254353;}
.theme_swatch_azure,.themeSwatchAzure {background-color:#47697f;}
.theme_swatch_ocean,.themeSwatchOcean {background-color:#28405a;}
.theme_swatch_navy,.themeSwatchNavy {background-color:#303f5c;}
.theme_swatch_midnight,.themeSwatchMidnight {background-color:#213a81;}
.theme_swatch_indigo,.themeSwatchIndigo {background-color:#363b6b;}
.theme_swatch_violet,.themeSwatchViolet {background-color:#4c3561;}
.theme_swatch_lavender,.themeSwatchLavender {background-color:#512f6e;}
.theme_swatch_amethyst,.themeSwatchAmethyst {background-color:#5a2775;}
.theme_swatch_magenta,.themeSwatchMagenta {background-color:#5a3151;}
.theme_swatch_rose,.themeSwatchRose {background-color:#583449;}
.theme_swatch_ruby,.themeSwatchRuby {background-color:#5e313f;}
.theme_swatch_burgundy,.themeSwatchBurgundy {background-color:#60313d;}
.theme_swatch_slate,.themeSwatchSlate {background-color:#32414f;}
.theme_swatch_obsidian,.themeSwatchObsidian {background-color:#3c3e49;}
.theme_swatch_gold,.themeSwatchGold {background-color:#4e3d0c;}
.theme_swatch_lemon,.themeSwatchLemon {background-color:#41410a;}
.themeSwatchSystem{background-color:#615f77;}

/* Hard split two-tone swatches: no interpolation between the two colors. */
.theme_swatch_ice,.themeSwatchIce { --theme-preview-mid:#3c6074; --theme-preview-light:#7095a9; }
.theme_swatch_blue,.themeSwatchBlue { --theme-preview-mid:#8a889a; --theme-preview-light:#a2a6c2; }
.theme_swatch_forest,.themeSwatchForest { --theme-preview-mid:#446347; --theme-preview-light:#77977a; }
.theme_swatch_midnight,.themeSwatchMidnight { --theme-preview-mid:#3a57a9; --theme-preview-light:#758dd0; }
.theme_swatch_azure,.themeSwatchAzure { --theme-preview-mid:#7097ab; --theme-preview-light:#9cbacc; }
.theme_swatch_ember,.themeSwatchEmber { --theme-preview-mid:#805223; --theme-preview-light:#b48556; }
.theme_swatch_amethyst,.themeSwatchAmethyst { --theme-preview-mid:#7d419d; --theme-preview-light:#ad7bc8; }
.theme_swatch_flame,.themeSwatchFlame { --theme-preview-mid:#8e4824; --theme-preview-light:#c47c58; }
.theme_swatch_indigo,.themeSwatchIndigo { --theme-preview-mid:#52578e; --theme-preview-light:#888cba; }
.theme_swatch_emerald,.themeSwatchEmerald { --theme-preview-mid:#3b6358; --theme-preview-light:#6e988b; }
.theme_swatch_magenta,.themeSwatchMagenta { --theme-preview-mid:#7d4b71; --theme-preview-light:#b17fa5; }
.theme_swatch_amber,.themeSwatchAmber { --theme-preview-mid:#6d5939; --theme-preview-light:#a18c6c; }
.theme_swatch_sand,.themeSwatchSand { --theme-preview-mid:#6c5937; --theme-preview-light:#a18d6a; }
.theme_swatch_lime,.themeSwatchLime { --theme-preview-mid:#556038; --theme-preview-light:#89956b; }
.theme_swatch_yellow,.themeSwatchYellow { --theme-preview-mid:#645d18; --theme-preview-light:#99914b; }
.theme_swatch_wood,.themeSwatchWood { --theme-preview-mid:#85461e; --theme-preview-light:#ba7951; }
.theme_swatch_navy,.themeSwatchNavy { --theme-preview-mid:#4a5c7e; --theme-preview-light:#7e90b2; }
.theme_swatch_copper,.themeSwatchCopper { --theme-preview-mid:#725546; --theme-preview-light:#a68a79; }
.theme_swatch_water,.themeSwatchWater { --theme-preview-mid:#36626b; --theme-preview-light:#6a95a0; }
.theme_swatch_gold,.themeSwatchGold { --theme-preview-mid:#6f591a; --theme-preview-light:#a38d4d; }
.theme_swatch_slate,.themeSwatchSlate { --theme-preview-mid:#4c5e6f; --theme-preview-light:#8091a4; }
.theme_swatch_rose,.themeSwatchRose { --theme-preview-mid:#7a4f68; --theme-preview-light:#ae819c; }
.theme_swatch_ocean,.themeSwatchOcean { --theme-preview-mid:#405e7d; --theme-preview-light:#7492b1; }
.theme_swatch_teal,.themeSwatchTeal { --theme-preview-mid:#376367; --theme-preview-light:#6a969b; }
.theme_swatch_lavender,.themeSwatchLavender { --theme-preview-mid:#714a93; --theme-preview-light:#a281c0; }
.theme_swatch_bronze,.themeSwatchBronze { --theme-preview-mid:#735729; --theme-preview-light:#a88b5d; }
.theme_swatch_olive,.themeSwatchOlive { --theme-preview-mid:#5d5d3b; --theme-preview-light:#92926e; }
.theme_swatch_ruby,.themeSwatchRuby { --theme-preview-mid:#814c5c; --theme-preview-light:#b58190; }
.theme_swatch_cyan,.themeSwatchCyan { --theme-preview-mid:#336174; --theme-preview-light:#6696a9; }
.theme_swatch_pine,.themeSwatchPine { --theme-preview-mid:#296744; --theme-preview-light:#5d9b78; }
.theme_swatch_obsidian,.themeSwatchObsidian { --theme-preview-mid:#595b68; --theme-preview-light:#8d8f9c; }
.theme_swatch_mint,.themeSwatchMint { --theme-preview-mid:#3c6454; --theme-preview-light:#709788; }
.theme_swatch_moss,.themeSwatchMoss { --theme-preview-mid:#436533; --theme-preview-light:#779866; }
.theme_swatch_sunset,.themeSwatchSunset { --theme-preview-mid:#7a5248; --theme-preview-light:#ae857c; }
.theme_swatch_lemon,.themeSwatchLemon { --theme-preview-mid:#5e5e16; --theme-preview-light:#929249; }
.theme_swatch_violet,.themeSwatchViolet { --theme-preview-mid:#6b5084; --theme-preview-light:#9e86b5; }
.theme_swatch_burgundy,.themeSwatchBurgundy { --theme-preview-mid:#834b5a; --theme-preview-light:#b67f8e; }
.theme_swatch_aqua,.themeSwatchAqua { --theme-preview-mid:#3a6266; --theme-preview-light:#6d969a; }
.themeSwatchSystem { --theme-preview-mid:#8a889a; --theme-preview-light:#a2a6c2; }

/* Carbon neutral dark; Petrol uses Hours Dark cyan/petroleum colors. */
.theme_swatch_carbon { --theme-preview-mid:#292929; --theme-preview-light:#656565; }
.theme_swatch_petrol { --theme-preview-mid:#003e4c; --theme-preview-light:#005c71; }

/* Shared deletion confirmation artwork, native 40px asset. */
.vistaDeleteConfirmHero{display:block;text-align:center;margin:0 0 12px;line-height:1;height:auto}.vistaDeleteConfirmHero img{display:inline-block;width:40px;height:40px;object-fit:contain;vertical-align:middle}

/* Keep deletion artwork centered even under modal/theme paragraph rules. */
.vcModalContent .vistaDeleteConfirmHero{display:flex!important;justify-content:center;align-items:center;width:100%;float:none!important;text-align:center!important}.vcModalContent .vistaDeleteConfirmHero img{float:none!important;margin:0!important;flex:0 0 40px}

/* Incoming calls use the same bounded ring as pending taskbar notifications. */
#toggleUsers.vcPrivateCallAttention .taskbarIcon{animation:vcNotificationRing 1.5s ease-in-out infinite;transform-origin:50% 55%}
#toggleUsers.vcPrivateCallAttention{animation:vcPrivateCallTint 1.5s ease-in-out infinite;border-radius:10px}
@keyframes vcPrivateCallTint{0%,100%{background-color:transparent}50%{background-color:rgba(33,139,59,.30)}}
@media(prefers-reduced-motion:reduce){#toggleUsers.vcPrivateCallAttention,#toggleUsers.vcPrivateCallAttention .taskbarIcon{animation:none}#toggleUsers.vcPrivateCallAttention{background-color:rgba(33,139,59,.30)}}

/* Message scale keeps original line-height ratios and proportional log avatars. */
.chatLogRow .chatMessage{font-size:var(--vc-message-size,23px)}
.chatLogRow .chatAvatarImage{width:var(--vc-message-avatar,30px);height:var(--vc-message-avatar,30px)}
.chatLogRow .chatHeadline{padding-left:var(--vc-message-headline-space,38px)}
.massAnnouncementNoteText{font-size:var(--vc-message-size,23px)}
@media(max-width:560px){.massAnnouncementNoteText{font-size:var(--vc-message-size,23px)}}
/* Hours notched multicolor headings; online/guest/recent follow each theme. */
#containerUser.vcCount-hours .userCount,#containerUser.vcCount-theme .userCount{clip-path:none;border-radius:5px;border-bottom:0;box-shadow:inset 0 1px 0 #ffffff38;color:#e4ecec;text-shadow:0 1px 2px #000}
#containerUser.vcCount-hours .userCountOnline,#containerUser.vcCount-hours .userCountOffline,#containerUser.vcCount-hours .userCountGuest{background-image:var(--vc-user-header-gradient,linear-gradient(rgba(0,203,255,.69),rgba(0,0,0,.47)))}
#containerUser.vcCount-hours .userCountOnair{background-image:linear-gradient(rgb(255,138,0),rgba(255,0,0,.85))}
#containerUser.vcCount-hours .userCountStaff{background-image:linear-gradient(rgba(255,33,220,.9),rgba(0,0,0,.47))}
#containerUser.vcCount-hours .userCountFriends{background-image:linear-gradient(rgba(0,255,146,.69),rgba(0,0,0,.47))}
.vcUserlistLayoutNote p{margin:5px 0;line-height:1.4}
.vcUserlistClassicHeading{font-size:13px;font-weight:bold;padding:8px}

/* Stable call hit targets: a very small ring on pending cards only. */
.privateCallRequestPanel{animation:vcPrivateCallCardRing 1.5s ease-in-out infinite;transform-origin:50% 50%}
@keyframes vcPrivateCallCardRing{0%,65%,100%{transform:scale(1) rotate(0)}15%,50%{transform:scale(1.01) rotate(0)}22%,36%{transform:scale(1.01) rotate(-.35deg)}29%,43%{transform:scale(1.01) rotate(.35deg)}}
@media(prefers-reduced-motion:reduce){.privateCallRequestPanel{animation:none}}

.massAnnouncementContent.pollContent h3{font-size:var(--vc-message-size,23px);line-height:1.4}

/* v4.1.107: independent call controls and radio-style incoming surface shine. */
#privateCallBarWrap .privateCallIcon{position:relative;flex-shrink:0;width:24px;height:24px}
#privateCallBarWrap .privateCallIcon img{width:20px;height:20px;object-fit:contain}
#privateCallBarWrap .privateCallIcon.avOffState::after{content:"";position:absolute;left:1px;right:1px;top:11px;height:2px;background:#ff2a2a;transform:rotate(-52deg);box-shadow:0 0 3px #0009;pointer-events:none}
.privateCallRequestPanel{animation:none;transform:none;position:relative;overflow:hidden}
.privateCallRequestPanel::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(115deg,transparent 35%,rgba(192,232,255,.05) 42%,rgba(238,250,255,.18) 50%,rgba(192,232,255,.05) 58%,transparent 65%);background-size:300% 100%;animation:radioSurfaceShine 2.8s linear infinite;box-shadow:inset 0 0 12px rgba(160,215,255,.16)}
.vcUserlistLayoutNote p{display:block!important;margin:6px 0!important;white-space:normal}
.vcUserlistLayoutNote strong{font-weight:bold;display:inline}
#containerUser.vcCount-hours .userCount{clip-path:none;border-radius:5px;border-bottom:0}
@media(prefers-reduced-motion:reduce){.privateCallRequestPanel::after{animation:none}}

/* v4.1.108: keep all call controls together and restore panel precedence. */
#privateCallBarWrap .privateCallCard{grid-template-columns:36px minmax(0,1fr) 24px 24px 30px;gap:5px}
#leftPanel.vcCleft2,#rightPanel.vcCright2{z-index:20000}
#rightPanel.vcCright2 #rightPanelShell{z-index:auto!important}
#containerUser.vcCount-theme .userCount{background-image:var(--vc-user-header-gradient);border-bottom:0}
#containerUser .vcUcount{padding:2px 5px;font-size:10px}

/* v4.1.109: compact count badges grow with their digits. */
#containerUser .vcUcount{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-width:18px;height:18px;line-height:18px;padding:0 4px;border-radius:999px;vertical-align:middle}
#containerUser.vcCount-hours .userCountVip{background-image:linear-gradient(rgba(255,185,0,.91),rgba(0,0,0,.47))}
.vcCacheTable{width:100%;border-collapse:separate;border-spacing:0;overflow:hidden;border-radius:6px;background:var(--vc-ink);border:1px solid rgba(255,255,255,.16);color:#fff}
.vcCacheTable th,.vcCacheTable td{padding:12px 14px;text-align:start;border-bottom:1px solid rgba(255,255,255,.1);overflow-wrap:anywhere}
.vcCacheTable th{font-weight:bold;background:rgba(255,255,255,.035);width:50%}
.vcCacheTable tr:last-child th,.vcCacheTable tr:last-child td{border-bottom:0}
.vcCacheTable th .fa{margin-inline-end:8px;color:var(--vc-soft)}
.vcCacheStatus{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:4px;font-weight:bold;border:1px solid currentColor}
.vcCacheStatus-online{color:#a0edac;background:rgba(37,161,62,.18)}
.vcCacheStatus-offline{color:#ffaaa6;background:rgba(210,44,40,.18)}

/* Name previews inherit the same default white as chat usernames; selected colors remain authoritative. */
#previewName:not([class*="bcolor"]):not([class*="bgrad"]):not([class*="bneon"]){color:#fff;}
#containerUser .vcDjEqualizer{display:inline-flex;vertical-align:middle;margin:0 5px;}


.vcThemeChoiceGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;}
.vcThemeChoice{display:flex;align-items:center;gap:8px;padding:8px;cursor:pointer;}
.vcThemeChoice input{margin-left:auto;}
.vcAdminBinaryCheckbox{width:18px;height:18px;cursor:pointer;accent-color:#4085cb;}
.vcPendingDeletion{background:linear-gradient(180deg,#b74752 0%,#9c333e 46%,#81232e 100%)!important;color:#fff!important;}
.vcPendingDeletion .listingTitle,.vcPendingDeletion .listingText{background:transparent!important;color:#fff!important;}
.vcInlineCoin{height:1em;width:auto;vertical-align:-.12em;}

#avRoomVideoHost:fullscreen{inset:0!important;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;z-index:2147483647!important;background:#000;}
#avRoomVideoHost:-webkit-full-screen{inset:0!important;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;z-index:2147483647!important;background:#000;}
#avRoomVideoHost.avRoomVideoLightboxMode{z-index:2147483646;}
#avRoomVideoHost.avRoomVideoLightboxMode .avRoomVideoIframeBlock{display:block!important;z-index:5;pointer-events:auto;}
#avRoomVideoHost.avRoomVideoLightboxMode .avRoomVideoLightboxClose{z-index:20;}
@media (orientation:portrait){
 #avRoomVideoHost.vcVideoLandscapeFallback.avRoomVideoLightboxMode .avRoomVideoStage{position:absolute!important;inset:auto!important;top:50%!important;left:50%!important;width:100dvh!important;height:100dvw!important;max-width:none!important;max-height:none!important;margin:0!important;transform:translate(-50%,-50%) rotate(90deg);transform-origin:center;}
}

.vcCheckboxLabel{display:flex;align-items:center;gap:8px;}
.vcCheckboxLabel .vcAdminBinaryCheckbox{flex:0 0 18px;margin:0;}
.vcThemeChoice .themeSwatch{display:inline-block;width:28px;height:28px;flex:0 0 28px;border-radius:4px;background:linear-gradient(90deg,var(--theme-preview-mid,currentColor) 50%,var(--theme-preview-light,currentColor) 50%);}
.vcThemeChoiceActions{margin:0 0 12px;}
#actionMenu .vcAvgender .fa{font-size:16px;vertical-align:middle;}
#actionMenu .vcAvcountry{font-size:inherit;margin-top:4px;}

.accountDeletionIcon{border:0;border-radius:0;background:none;}
.accountDeletionIcon img{width:48px;height:48px;object-fit:contain;display:block;}

/* Color actual menu copies and profile icons, including gradient usernames. */
.vcGenderIcon.genderMale,.vcGenderIcon.genderMale>.fa{color:#42a5ff!important;-webkit-text-fill-color:#42a5ff!important;}
.vcGenderIcon.genderFemale,.vcGenderIcon.genderFemale>.fa{color:#ff7fc8!important;-webkit-text-fill-color:#ff7fc8!important;}
.vcGenderIcon>.fa{background:none!important;font-size:16px;}
#avMenu .vcAvusername,.adminUserSummary .vcAvusername{display:flex;align-items:center;gap:6px;}
#avMenu .vcAvusernameText{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.vcGenderIcon{flex:0 0 auto;-webkit-text-fill-color:currentColor;}
.adminUserSummary .vcAvcountry{margin-top:4px;}

/* Fill the whole fullscreen viewport; preserve source aspect ratio. */
.avRoomVideoHost.avRoomVideoLightboxMode .avRoomVideoStage{inset:0!important;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;margin:0!important;}
#avMenu .vcAvagegender .vcGenderIcon,#avMenu .vcAvcountry .vcGenderIcon,.adminUserSummary .vcAvagegender .vcGenderIcon,.adminUserSummary .vcAvcountry .vcGenderIcon{display:inline-block;margin-right:6px;}
#avMenu .avstatsInline img,#avMenu .vcGenderIcon>.fa,#avMenu .vcAvrank img,.adminUserSummary .avstatsInline img,.adminUserSummary .vcGenderIcon>.fa,.adminUserSummary .vcAvrank img{filter:none;}
#avMenu .vcGenderIcon>.fa,.adminUserSummary .vcGenderIcon>.fa{font-size:16px!important;width:18px;height:18px;line-height:18px;vertical-align:middle;}

.vcRoomAlias{color:#a5c9e7;font-size:12px;margin-left:5px;}
.vcRoomShareHero{max-width:480px;margin:auto;text-align:center}.vcRoomShareHero>img{width:64px;height:64px;object-fit:contain}.vcRoomShareLinks{display:grid;gap:8px;margin:16px 0}.vcRoomShareLinks input{min-width:0;width:100%}.vcRoomShareBrand{margin-top:20px;text-align:left}

#avMenu .vcAvrooms{margin-top:4px;max-height:120px;overflow-y:auto;}#avMenu .vcAvroomLine{display:flex;align-items:center;justify-content:center;gap:5px;border:0;background:transparent;color:inherit;cursor:pointer;padding:2px 0;width:100%;min-width:0;font:inherit;}#avMenu .vcAvroomLine img{width:18px;height:18px;object-fit:contain;flex:0 0 18px;filter:none;}#avMenu .vcAvroomLine span{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}#avMenu .vcAvroomLine:hover span{text-decoration:underline;}

/* Room sharing/appearance refinement: bounded panels, compact aligned gender glyphs. */
#roomShare,#roomAudio{max-height:550px;overflow-y:auto;box-sizing:border-box;}
#roomShareAlias{text-align:center;}
#roomShare .referralLinkRow{display:flex;align-items:center;gap:8px;margin:12px 0;min-width:0;}
#roomShare .referralLinkRow input{flex:1;min-width:0;}
#roomShare .referralCopyIcon{border:0;background:transparent;cursor:pointer;padding:6px;font-size:20px;line-height:1;flex:none;}
#roomShare .referralCopyIcon:hover{filter:drop-shadow(0 0 3px currentColor);}
#avMenu .vcGenderIcon>.fa,.adminUserSummary .vcGenderIcon>.fa{font-size:14px!important;width:16px;height:16px;line-height:16px;vertical-align:baseline;}
#avMenu .vcAvagegender,.adminUserSummary .vcAvagegender{display:flex;align-items:center;justify-content:center;gap:4px;}

body.vcRoomRadioHidden #leftPanel.vcCleft2 #chatLeftMenu{padding-bottom:0!important;}

body.vcRoomRadioHidden #roomListPanel{margin-bottom:0;}

/* Shared-login cards match admin logo/login-background controls. */
.vcRoomShareBrand .adminImageCard {
  flex: 1 1 calc(50% - 5px);
  min-width: 240px;
	margin-bottom: 0;
	padding-bottom: 2px;
}

.vcRoomShareBrand .adminImageCard .roomBgPreview {
  margin-top: 0;
}

.vcRoomShareBrand .adminImageCard .roomBgControl {
	margin: 0;
	min-height: 0;
	height: 0;
}

.vcRoomShareBrand .adminImageCard .regButton,
.vcRoomShareBrand .adminImageCard .themeBtn,
.vcRoomShareBrand .adminImageCard .defaultBtn,
.vcRoomShareBrand .adminImageCard .roomBgBtn {
  min-height: 0;
  min-width: 136px;
  padding: 8px;
  line-height: normal;
  font-size: inherit;
  font-weight: 700;
}

.vcRoomShareBrand .roomBgControl form {
  margin: 0;
}

.vcRoomShareBrand #vcAdminroomlogoupload,
.vcRoomShareBrand #vcAdminloginbgupload,
.vcRoomShareBrand #vcAdminchatbgupload {
  display: block;
}

.vcRoomShareBrand .adminImageCard .vcRoomShareRemove.hidden,
.vcRoomShareBrand .adminImageCard .vcRoomShareRemove.hidden,
.vcRoomShareBrand .adminImageCard .vcRoomShareRemove.hidden {
  display: inline-block !important;
  visibility: hidden;
  pointer-events: none;
}

.vcRoomShareBrand .adminLogoPreview .roomBgPreviewInner {
  padding: 12px;
}

.vcRoomShareBrand .adminLogoThumb {
  display: block;
  width: 100%;
  height: 126px;
  object-fit: contain;
}

.vcRoomShareBrand .adminLogoThumb.hidden,
.vcRoomShareBrand .vcRoomLoginBackgroundPreview .roomBgThumb.hidden,
.vcRoomShareBrand .vcRoomLoginBackgroundPreview .roomBgThumb.hidden {
  display: none;
}

.vcRoomShareBrand .adminLogoPreview .roomBgPreviewText.hidden,
.vcRoomShareBrand .vcRoomLoginBackgroundPreview .roomBgPreviewText.hidden,
.vcRoomShareBrand .vcRoomLoginBackgroundPreview .roomBgPreviewText.hidden {
  display: none;
}


.adminPanelContent .vcAdminStackedSetting{display:block;}
.adminPanelContent .vcAdminStackedSetting>.settingElementContent,.adminPanelContent .vcAdminStackedSetting>.settingElementOption{display:block;width:100%;float:none;}

/* v4.1.133: readable setting help; titles retain the theme's heading color. */
#adminPanelContent .subText:not(.vcLabel):not(.settingCheckboxLabel),
#adminPanelContent .vcAdminSettingHelp,
.pageFull .settingElement .subText:not(.vcLabel):not(.settingCheckboxLabel),
.pageFull .formContent .subText:not(.vcLabel):not(.settingCheckboxLabel){color:#afb6c2!important}
#adminPanelContent .settingCheckboxLabel,.adminPanelContent .settingCheckboxLabel,.pageFull .settingCheckboxLabel{font-weight:700;color:#f3f7ff}
#roomBackground{max-height:550px;overflow-y:auto;box-sizing:border-box}
#roomBackground .vcRoomThemeSave{display:block;margin-top:12px}
#roomShare .vcRoomShareLinks{gap:4px;margin:10px 0}
#roomShare .referralLinkRow{margin:3px 0}
.vcRoomAlias,.vcRoomNumericId{color:#afb6c2;font-size:12px;margin-left:5px}
.adminUserSummary .vcAvusername{justify-content:center;text-align:center}
#avMediaButton.vcLiveBroadcasting{position:relative;border-radius:5px}
#avMediaButton.vcLiveBroadcasting .avToolbarIcon{filter:drop-shadow(0 0 3px #349dff) drop-shadow(0 0 5px rgba(35,145,255,.7));animation:vcLiveIconPulse 1.8s ease-in-out infinite}
#avMediaButton.vcLiveBroadcasting::after{content:"";position:absolute;inset:3px;border-radius:inherit;pointer-events:none;background:linear-gradient(115deg,transparent 35%,rgba(192,232,255,.05) 42%,rgba(238,250,255,.25) 50%,rgba(192,232,255,.05) 58%,transparent 65%);background-size:300% 100%;animation:radioSurfaceShine 2.8s linear infinite;box-shadow:inset 0 0 6px rgba(160,215,255,.25)}
@keyframes vcLiveIconPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.09)}}
@media(prefers-reduced-motion:reduce){#avMediaButton.vcLiveBroadcasting .avToolbarIcon,#avMediaButton.vcLiveBroadcasting::after{animation:none}}

/* v4.1.134: policy badges and shared image upload surfaces. */
.vcSettingRoleIcon{display:inline-block;width:1em;height:1em;object-fit:contain;vertical-align:-.12em;margin-left:.35em;flex:none}
.vcRoomShareBrand .roomBgControl{display:none!important}
.vcRoomShareBrand .adminImageCard{min-width:0;width:100%;box-sizing:border-box}
.vcRoomShareBrand .roomIconOverlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}
.vcRoomShareBrand .roomIconOverlay .roomIconPlus{margin:0;position:static;transform:none;pointer-events:auto}
.vcRoomShareBrand .roomIconOverlay .roomIconRemoveBtn{pointer-events:auto}
/* Live uses the shared floating-window order, below navigation/screen effects. */
#avMediaPanel{z-index:20001}
.vcRoomShareBrand .roomIconOverlay .roomIconRemoveBtn{position:absolute;left:calc(50% + 24px);top:50%;transform:translateY(-50%);margin:0}
.vcRoomShareBrand .adminImageCard .vcRoomShareRemove.hidden{display:none!important}

/* v4.1.135: circular live surface follows the actual play icon, including its pulse. */
.vcLiveIconFace{display:block;position:relative;width:20px;height:20px;margin:0 auto}
#avMediaButton.vcLiveBroadcasting::after{content:none}
#avMediaButton.vcLiveBroadcasting .vcLiveIconFace{animation:vcLiveFacePulse 1.8s ease-in-out infinite}
#avMediaButton.vcLiveBroadcasting .avToolbarIcon{animation:none;filter:drop-shadow(0 0 5px #349dff) drop-shadow(0 0 9px rgba(35,145,255,.85))}
#avMediaButton.vcLiveBroadcasting .vcLiveIconFace::after{content:"";position:absolute;inset:14%;border-radius:50%;pointer-events:none;background:linear-gradient(115deg,transparent 35%,rgba(192,232,255,.08) 42%,rgba(238,250,255,.35) 50%,rgba(192,232,255,.08) 58%,transparent 65%);background-size:300% 100%;animation:radioSurfaceShine 2.8s linear infinite;box-shadow:inset 0 0 5px rgba(160,215,255,.3)}
@keyframes vcLiveFacePulse{0%,100%{transform:scale(1)}50%{transform:scale(1.24)}}
body.avCompactMode #avMobileChatSlot .vcLiveIconFace{width:16px;height:16px}
@media(max-width:768px){#avMobileChatSlot .vcLiveIconFace{width:16px;height:16px}}
#avMenu .vcAvusername{justify-content:center;text-align:center}
@media(prefers-reduced-motion:reduce){#avMediaButton.vcLiveBroadcasting .vcLiveIconFace,#avMediaButton.vcLiveBroadcasting .vcLiveIconFace::after{animation:none}}

/* v4.1.136: atomic room ID pair and compositor-friendly live pulse. */
.vcRoomIdPair{display:inline-flex;align-items:center;gap:5px;white-space:nowrap;flex-wrap:nowrap}
.vcRoomIdPair .vcRoomNumericId,.vcRoomIdPair .vcRoomAlias{display:inline-block;margin-left:0;flex:none}
#avMediaButton.vcLiveBroadcasting .vcLiveIconFace{will-change:transform;backface-visibility:hidden;transform:translate3d(0,0,0)}
#avMediaButton.vcLiveBroadcasting .avToolbarIcon{filter:none}
#avMediaButton.vcLiveBroadcasting .vcLiveIconFace::before{content:"";position:absolute;inset:14%;border-radius:50%;pointer-events:none;box-shadow:0 0 5px #349dff,0 0 9px rgba(35,145,255,.85)}
@keyframes vcLiveFacePulse{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(0,0,0) scale(1.24)}}

/* v4.1.137: archive timestamps must remain readable on the pale evidence cards. */
#adminPanelContent .consoleDataLogs .consoleDate.subText{color:#59616d!important;opacity:1}
/* Keep both live effects on compositor transforms; do not repaint a gradient each frame. */
#avMediaButton.vcLiveBroadcasting .vcLiveIconFace{isolation:isolate}
#avMediaButton.vcLiveBroadcasting .vcLiveIconFace::after{
 background:linear-gradient(115deg,transparent 20%,rgba(238,250,255,.35) 50%,transparent 80%);
 background-size:100% 100%;animation:vcLiveFaceShine 2.8s linear infinite;
 will-change:transform,opacity;box-shadow:none
}
@keyframes vcLiveFaceShine{
 0%{transform:translate3d(-45%,0,0);opacity:0}
 25%{opacity:.8}75%{opacity:.8}
 100%{transform:translate3d(45%,0,0);opacity:0}
}
@media(prefers-reduced-motion:reduce){#avMediaButton.vcLiveBroadcasting .vcLiveIconFace::after{animation:none}}
/* Isolate the bitmap pulse from the independently moving shine in Firefox. */
#avMediaButton.vcLiveBroadcasting .vcLiveIconFace{animation:none;will-change:auto;transform:none;backface-visibility:visible}
#avMediaButton.vcLiveBroadcasting .vcLiveIconFace .avToolbarIcon{
 animation:vcLiveFacePulse 1.8s ease-in-out infinite;will-change:transform;
 transform-origin:50% 50%;backface-visibility:hidden;transform:translate3d(0,0,0)
}
@media(prefers-reduced-motion:reduce){#avMediaButton.vcLiveBroadcasting .vcLiveIconFace .avToolbarIcon{animation:none}}

/* v4.1.140: preserve the original circular shading; bitmap pulse is independent. */
.vcActionRoleIcons{display:table-cell;vertical-align:middle;text-align:right;white-space:nowrap;width:1%;padding-left:8px}
.avActionField .vcActionRoleIcons,.setDjButton .vcActionRoleIcons{display:inline-block;float:right;width:auto}
#avMediaButton.vcLiveBroadcasting .vcLiveIconFace::after{background:linear-gradient(115deg,transparent 35%,rgba(192,232,255,.08) 42%,rgba(238,250,255,.35) 50%,rgba(192,232,255,.08) 58%,transparent 65%);background-size:300% 100%;animation:radioSurfaceShine 2.8s linear infinite;box-shadow:inset 0 0 5px rgba(160,215,255,.3);transform:none;opacity:1;will-change:auto}
#avMediaButton.vcLiveBroadcasting .vcLiveIconFace .avToolbarIcon{animation:none;transform:none}
@media(prefers-reduced-motion:reduce){#avMediaButton.vcLiveBroadcasting .vcLiveIconFace::after{animation:none}}

/* v4.1.141: badges belong to the action surface; dropdown badges follow labels. */
.subListContent>.vcActionRoleIcons{display:inline-flex;float:right;align-items:center;width:auto;padding-left:8px}
.avActionField .vcLabel>.vcActionRoleIcons{display:inline-flex;float:none;vertical-align:middle;width:auto;padding-left:3px}
.setDjButton>button{display:inline-flex;align-items:center;gap:6px}
.setDjButton{display:flex;align-items:center;gap:8px}
.setDjButton>.vcActionRoleIcons{display:inline-flex;float:none;align-items:center;width:auto;padding-left:0}
#adminPanelContent .consoleDataLogs:hover .consoleDate.subText{color:#d2d5da!important}
/* Original bitmap-shaped blue filter is static; the foreground scales independently. */
#avMediaButton.vcLiveBroadcasting .vcLiveIconFace::before{inset:0;background:url('../images/icons/media.png') center/contain no-repeat;box-shadow:none;filter:drop-shadow(0 0 5px #349dff) drop-shadow(0 0 9px rgba(35,145,255,.85))}
#avMediaButton.vcLiveBroadcasting .vcLiveIconFace .avToolbarIcon{position:relative;filter:none;transform:none;will-change:scale;animation:vcLiveScalePulse 1s ease-in-out infinite}
@keyframes vcLiveScalePulse{0%,100%{scale:1}50%{scale:1.24}}
@supports not (scale:1){#avMediaButton.vcLiveBroadcasting .vcLiveIconFace .avToolbarIcon{animation:vcLiveFacePulse 1s ease-in-out infinite;will-change:transform}}
@media(prefers-reduced-motion:reduce){#avMediaButton.vcLiveBroadcasting .vcLiveIconFace .avToolbarIcon{animation:none;scale:1}}

/* v4.1.143: permission badges immediately to the left of Add DJ. */
.setDjButton>.vcActionRoleIcons{order:-1}

body.vcRoomRadioHidden #chatLeftMenu{padding-bottom:0!important;}

/* Keep occupancy and pinned-room indicators visible beside long names. */
.inRoomName {display:flex;align-items:center;min-width:0;overflow:hidden;}
.inRoomName .vcRoomLabel {min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.inRoomName .vcRoomOccupancy {flex:0 0 auto;white-space:nowrap;margin-left:.25em;}
.inRoomCount {flex:0 0 auto;}

/* Main-log avatars share the existing taskbar/private avatar frame. */
#mainLogs .chatAvatarImage {border:1px solid rgba(255,255,255,.52);border-radius:3px;box-sizing:border-box;object-fit:cover;}

/* Per-gift price/free allowance: reuse the taskbar notification motion. */
.giftPanelItem {height:auto;min-height:0;}
.vcGiftItemPrice {display:flex;align-items:center;justify-content:center;gap:3px;font-size:12px;line-height:18px;margin-top:4px;}
.vcGiftItemFree {font-size:10px;line-height:14px;text-align:center;animation:vcNotificationRing 1.5s ease-in-out infinite;transform-origin:center;overflow-wrap:anywhere;}
@media(prefers-reduced-motion:reduce){.vcGiftItemFree{animation:none;}}

.inRoomElement {display:flex;align-items:center;}
.inRoomElement > .inRoomIcon {display:block;flex:0 0 26px;}
.inRoomElement > .inRoomName {flex:1 1 0;}
.inRoomElement > .inRoomCount {display:block;flex:0 0 auto;width:auto;}

#evUserResults .userSquareElem {cursor:pointer;}


/* Fixed sidebar columns must not expand to a room's intrinsic text width. */
#leftPanel.vcCleft,#leftPanel.vcCleft2{width:250px;min-width:250px;max-width:250px;}
#leftPanel #chatLeftMenu,#leftPanel .chatLeftMenuWrap{min-width:0;max-width:250px;box-sizing:border-box;}
#leftPanel .inRoomElement{width:100%;max-width:100%;min-width:0;box-sizing:border-box;}
#leftPanel .inRoomName{min-width:0;max-width:100%;overflow:hidden;}
#leftPanel .vcRoomLabel{display:block;flex:0 1 auto;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
#leftPanel .vcRoomOccupancy,#leftPanel .inRoomCount{flex-shrink:0;}
#roomEntryCostRow[hidden]{display:none!important;}
.vistaCaptchaChallengeRow{display:flex;align-items:stretch;gap:6px;width:100%;height:40px;}
.vistaCaptchaBox .vistaCaptchaChallengeRow img{display:block;width:calc(100% - 46px);max-width:none;height:40px;object-fit:contain;background:#e2e9f2;flex:1 1 0;min-width:0;}
.vistaCaptchaChallengeRow button{flex:0 0 40px;width:40px;height:40px;padding:0;display:flex;align-items:center;justify-content:center;}
/* Matching the existing archive timestamp contrast on light list surfaces. */
#adminPanelContent .subListItem .subText,#adminPanelContent .listElement .subText{color:#59616d!important;opacity:1;}
#adminPanelContent .subListItem:hover .subText,#adminPanelContent .listElement:hover .subText{color:#d2d5da!important;}
.vcPackageRemove{display:inline-flex!important;align-items:center!important;justify-content:center!important;width:24px!important;height:24px!important;min-width:24px!important;padding:0!important;margin:auto 0!important;flex:0 0 24px!important;border:1px solid rgba(255,255,255,.35)!important;border-radius:4px 4px 9px 4px!important;background:linear-gradient(#f38d8d 0%,#c92c39 48%,#8e071a 52%,#c92c39 100%)!important;color:#fff!important;box-shadow:inset 0 1px rgba(255,255,255,.5),0 1px 2px #0008!important;cursor:pointer;}
.vcPackageRemove:hover{filter:brightness(1.18);}
.vcPackageRemove i{line-height:1;margin:0;}
@keyframes vcGiftAllowanceRing{0%,55%,100%{transform:scale(1) rotate(0)}10%,30%{transform:scale(1.03) rotate(-2deg)}20%,40%{transform:scale(1.03) rotate(2deg)}}
.vcGiftItemFree{animation-name:vcGiftAllowanceRing;}
.chatLogRow .chatAvatarImage{border:1px solid rgba(255,255,255,.52);border-radius:3px;box-sizing:border-box;object-fit:cover;}

.vcPackageRemove.panelBarItem{background:transparent!important;border:0!important;box-shadow:none!important;border-radius:0!important;}
.vcPackageRemove.panelBarItem i{font-size:11px;width:17px;height:17px;line-height:15px;}

/* List metadata must retain archive-date contrast over light admin rows. */
#adminPanelContent :is(.subListItem,.listElement) .subText:not(.vcLabel):not(.settingCheckboxLabel){color:#59616d!important;opacity:1;}
#adminPanelContent :is(.subListItem,.listElement):hover .subText:not(.vcLabel):not(.settingCheckboxLabel){color:#d2d5da!important;}
/* One frame for message, private-title and taskbar avatars. */
.chatLogRow .chatAvatarImage,.avatarTopMod img,.privateTaskbarAvatar{border:1px solid rgba(255,255,255,.52);border-radius:3px;box-sizing:border-box;object-fit:cover;}

/* Status follows the name/VIP avatar without consuming the ellipsis area. */
.vcUserItem .vcListStatus { margin-left: 5px; margin-right: 0; }
#leftPanel .vcRoomNameSuffix { color: #c4c8d1; font-weight: 400; }

/* Override the legacy gender-frame suppression on log avatars only. */
.chatLogRow .chatAvatarImage.vcAvsex { border:1px solid rgba(255,255,255,.52) !important; border-radius:3px; box-sizing:border-box; }
.previewZone #previewName, .previewZone #previewMood { display:block; width:100%; }
#previewMood:not([class*="bcolor"]):not([class*="bgrad"]):not([class*="bneon"]) { color:#fff; }

/* Identity detail windows use the same container and rows as room DJs. */
.identityDetailRows .ulistItem{color:#fff;margin-bottom:4px}.identityDetailRows .identityDetailLink{border:0;background:none;color:inherit;font:inherit;cursor:pointer;padding:0;text-align:left}.identityDetailRows small{display:block;color:#afb6c2}

#privateCallRequestBarWrap .privateCallRequestPanel,
#privateCallBarWrap .privateCallCard{background:linear-gradient(180deg,var(--vc-panel-78),var(--vc-shadow-72));color:#fff}
.inputItem.vistaFileDropActive img{transform:scale(1.18);filter:drop-shadow(0 0 5px #76bbff);transition:transform .15s ease,filter .15s ease}
.inputItem.vistaFileDropDone img{animation:vistaFileDropPulse .35s ease-out}
@keyframes vistaFileDropPulse{0%,100%{transform:scale(1)}45%{transform:scale(1.2)}}
@media(prefers-reduced-motion:reduce){.inputItem.vistaFileDropActive img{transform:none}.inputItem.vistaFileDropDone img{animation:none}}

/* v4.2.35: private-report context cards; preserve private-log rendering. */
.vcPrivateReportPeople{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.vcPrivateReportPerson{padding:12px;border-radius:6px;min-width:0}.vcPrivateReportPerson small{display:block;margin-bottom:9px;color:#afb6c2}.vcPrivateReportPerson>div{display:flex;align-items:center;gap:8px;overflow-wrap:anywhere}.vcPrivateReportPerson img{width:34px;height:34px;object-fit:cover;border-radius:3px}.vcPrivateReportPerson strong{min-width:0;overflow-wrap:anywhere}.vcPrivateReportFacts{display:flex;flex-wrap:wrap;gap:10px 18px;padding:12px;margin-top:10px;border-radius:6px}.vcPrivateReportFacts>strong{flex-basis:100%}.vcSmWarningIcon{display:block;width:64px;height:64px;object-fit:contain;margin:0 auto 16px}.vcSmWarningActions{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin-top:15px}@media(max-width:420px){.vcPrivateReportPeople{grid-template-columns:1fr}}

/* Support-only advanced configuration, grouped and responsive. */
#vcSupportOptions .vcSupportIntro{display:flex;align-items:center;gap:15px;padding:18px;border-radius:6px;margin-bottom:16px}#vcSupportOptions .vcSupportIntro>i{font-size:30px;color:#65baff}#vcSupportOptions .vcSupportIntro>div{flex:1;min-width:0}#vcSupportOptions .vcSupportIntro p{margin-top:7px;line-height:1.5}#vcSupportOptions .vcSupportCount{padding:6px 10px;border-radius:20px;background:rgba(70,150,255,.2);font-weight:bold}#vcSupportOptions .vcSupportGroup{border:1px solid rgba(150,165,190,.24);border-radius:6px;margin-bottom:12px;overflow:hidden}#vcSupportOptions summary{cursor:pointer;padding:14px;font-weight:bold;background:linear-gradient(180deg,var(--vc-panel-78),var(--vc-shadow-72));color:white}#vcSupportOptions summary i{margin-inline-end:8px}#vcSupportOptions .vcSupportGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:12px}#vcSupportOptions .vcSupportOption{padding:13px;margin:0;min-width:0;background:rgba(35,45,65,.09);border:1px solid rgba(130,145,165,.2);border-radius:5px}#vcSupportOptions .vcSupportOption>.vcLabel{display:block;margin-bottom:10px;line-height:1.4}#vcSupportOptions .vcSupportOption select,#vcSupportOptions .vcSupportOption input[type=number]{width:100%}#vcSupportOptions .vcSupportOption .subText{color:#707987;line-height:1.5;margin-top:9px}#vcSupportOptions .vcSupportBoolean input{margin-inline-end:7px;vertical-align:middle}#vcSupportOptions .vcSupportOptionMeta{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-top:9px;font-size:11px;color:#707987}#vcSupportOptions code{font-size:11px}@media(max-width:650px){#vcSupportOptions .vcSupportGrid{grid-template-columns:1fr}}

/* Avatar picker/drop affordance, fixed inline loader footprint. */
[data-vc-avatar-drop]{transition:box-shadow .15s,filter .15s;}
[data-vc-avatar-drop].vcAvatarDropHover{box-shadow:inset 0 0 0 2px #62baff,0 0 10px #4199ef;filter:brightness(1.16);}
.editProfilePhotoBtn #avatIcon,.editProfilePhotoBtn #avatAdmin{display:inline-flex;width:1em;height:1em;align-items:center;justify-content:center;vertical-align:middle;position:relative;}
.editProfilePhotoBtn .vistaSpinnerHost>.vistaInlineSpinner{position:absolute;width:24px;height:24px;left:50%;top:50%;margin:0;transform:translate(-50%,-50%) scale(.65);transform-origin:center;}

/* Do not let the mobile right-panel header shrink as async list content arrives. */
@media(max-width:600px){#rightPanelBar{flex:0 0 auto;min-height:40px;}#rightPanelBar .rightPanelBarInner{min-height:38px;}#rightPanelBar .panelOption{min-height:38px;}}

.vipBenefits{margin:10px 0;padding:9px 12px;border:1px solid #c49a4355;border-radius:7px;background:linear-gradient(135deg,#e9bc3920,#b2711010);}.vipBenefits>b{display:block;font-size:13px;margin-bottom:5px;}.vipBenefitsGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 12px;font-size:11px;line-height:1.35;}.vipBenefitsGrid span{overflow-wrap:anywhere;}.vipBenefitsGrid i{color:#dfb44c;width:14px;text-align:center;}

/* v4.2.39: presence badge floats over the avatar, independent of name width. */
.vcUserItem .userItemAvatar > .vcListStatus {
 position:absolute;left:auto;right:0;bottom:1px;width:9px;height:9px;
 margin:0;transform:none;z-index:1;pointer-events:none;object-fit:contain;
}
.vcModalSelectPortal {box-sizing:border-box;overscroll-behavior:contain;}
.vcModalSelectPortal .themeSwatch {vertical-align:middle;}

/* Authentication is the only non-dismissable blocking dialog. */
.vistaCaptchaGate{padding:0;border:1px solid #66758b;border-radius:8px;width:400px;max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px);overflow:auto;color:#fff;background:var(--vc-panel-98,#172536);box-shadow:0 15px 55px #000b;}
.vistaCaptchaGate::backdrop{background:rgba(0,0,0,.78);}
.vistaCaptchaGate .modalTopEmpty{width:100%;padding:10px;box-sizing:border-box;}
.vistaCaptchaGate #vistaAuthCaptchaPrompt{padding:20px;}
.vistaCaptchaGate .themeBtn{margin-top:14px;}
.vistaCaptchaGate .captchaLimitMessage{color:#ffb9b9;margin-top:12px;}

/* Portaled options retain readable widget rows outside their original container. */
.vcModalSelectPortal {padding:0;list-style:none;text-align:left;background:#eef2f8;color:#23314d;border-radius:6px;overflow-x:hidden;}
.vcModalSelectPortal .selectboxit-option-anchor {display:block;min-height:30px;line-height:30px;padding:0 7px;font:14px/30px Helvetica,Arial,sans-serif;color:#23314d;text-shadow:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;}
.vcModalSelectPortal .selectboxit-option-icon-container {height:30px;line-height:30px;}
.vcModalSelectPortal .selectboxit-focus .selectboxit-option-anchor {background:#dbe4f4;color:#23314d;}

/* Private report participants use readable evidence colours in live/archive views. */
.vcPrivateReportView{max-height:520px;max-height:min(520px,calc(100dvh - 80px));overflow:auto;overscroll-behavior:contain;}
.vcPrivateReportPerson,.vcPrivateReportFacts{color:#23314d;text-shadow:none;}
.vcPrivateReportPerson small{color:#526078;}
.vcPrivateReportView #preportBox,.vcPrivateReportView .auditPrivateReportBox{height:auto;max-height:300px;overflow:auto;}
#streamHeader{position:relative;z-index:2;}
#closeStream{box-sizing:border-box;position:absolute;right:0;top:0;width:40px;height:30px;display:flex;align-items:center;justify-content:center;z-index:3;cursor:pointer;pointer-events:auto;touch-action:manipulation;}

.vistaCaptchaGate .vcModalTop{border-radius:10px 10px 0 0;min-height:30px;}.vistaCaptchaGate .modalTopEmpty.hasModalTitle{width:100%;max-width:100%;padding:0 10px;line-height:30px;}.vistaCaptchaGate .modalTitleIcon{width:20px;height:20px;object-fit:contain;vertical-align:middle;margin-right:7px;}

.vistaCaptchaGate{background:transparent;border-radius:10px;}
.vistaCaptchaGate #vistaAuthCaptchaPrompt{background:var(--vc-panel-98,#172536);}

/* The bounded friend results, rather than the nested rows, own the scroll. */
#friendPanelLayout #friendListResults { flex:1 1 0; min-height:0; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; }
#friendPanelLayout #containerFriends { overflow:visible; }

/* Compact option menus; modal lists open below, admin may flip if required. */
.selectboxit-options { max-height:180px; overflow-y:auto; }

/* v4.2.58: keep status inside the image and report metadata readable. */
.vcUserItem .userItemAvatar > .vcListStatus{right:3px;bottom:3px;width:8px;height:8px;}
.vcPrivateReportPerson small{color:#344158;}
#safeMediaConfig #smProvider.vcNativeSelect{height:30px;min-height:30px;padding:0 8px;line-height:normal;}
.vcPrivateReportView .chatAvatar{display:inline-block!important;visibility:visible!important;}
.vcPrivateReportView .chatAvatarImage{display:block!important;visibility:visible!important;}

#containerStream #closeStream{position:absolute;right:7px;top:0;width:41px;height:18px;min-width:0;padding:0;margin:0;display:flex;align-items:center;justify-content:center;cursor:pointer;touch-action:manipulation;}

.auditPrivateReportBox .auditAuthorAvatar{width:30px;height:30px;object-fit:cover;border-radius:3px;float:left;margin:5px 8px 5px 0;border:1px solid #ffffff85;}.auditPrivateReportBox .auditEvidence{display:flow-root;}

.vipShop,.coinsShop{max-height:550px;max-height:min(550px,calc(100dvh - 90px));overflow-y:auto;overscroll-behavior:contain;}

.vistaCaptchaGate .vistaCaptchaError{position:sticky;bottom:0;padding:10px 14px;margin:8px;border-radius:5px;background:#8e2020;color:#fff;text-align:center;z-index:2;}

.vcAdminTabsMore{display:none;}
@media(max-width:768px){
#vcAdminpanel_shell .vcAdminTabOverflow{display:none!important;}
#vcAdminpanel_shell .vcAdminTabsExpanded>.vcAdminTabOverflow{display:inline-flex!important;}
#vcAdminpanel_shell .vcAdminTabsMore{display:inline-flex;align-items:center;justify-content:center;cursor:pointer;}
#vcAdminpanel_shell button.vcAdminTabsMore,#vcAdminpanel_shell .vcAdminTabsMore button{border:0;border-radius:4px;background:var(--vc-panel-98,#23314d);color:inherit;padding:8px 12px;cursor:pointer;}
}

/* Always show evidence timestamps and keep report facts flush with the people cards. */
.vcPrivateReportView .chatLogRow .vcCdate{display:table-cell!important;white-space:nowrap;}
.vcPrivateReportFacts{margin-top:0;}
#safeMediaConfig #smProvider.vcNativeSelect{box-sizing:border-box;height:30px!important;min-height:30px!important;max-height:30px;padding:0 8px!important;}
#vistaCaptchaGate{overflow:visible;}

#vistaCaptchaGate .vistaCaptchaError{position:fixed;top:auto;bottom:16px;left:50%;transform:translateX(-50%);margin:0;box-sizing:border-box;width:max-content;max-width:calc(100vw - 24px);z-index:1;text-align:center;}
.vipShop,.coinsShop{box-sizing:border-box;max-height:min(550px,calc(100dvh - 90px));overflow-y:auto;}
.topicLog .chatMessage.topicText.vcSptext{padding-top:6px;padding-bottom:6px;vertical-align:middle;}
.topicLog .topicClose{top:6px;}

/* Inline headings share the message baseline at every configured font size. */
.chatLogRow .chatHeadline,.chatLogRow .chatDisplayName,.chatLogRow .chatDisplayName .vcUsername,.chatLogRow .chatSep{vertical-align:baseline;line-height:inherit!important;}
.chatLogRow .chatHeadline{align-items:baseline;}
#avMenu .vcAvusername{position:relative;z-index:2;overflow:visible;}
#avMenu .vcAvusernameText{overflow:visible;white-space:normal;overflow-wrap:anywhere;}
#avMenu .panel-wrapper,#avMenu .vcAvtitle{overflow:visible;}

#containerUser .roomRadioListenerIcon{display:none!important;}
#containerUser .radioListeningMood,#containerUser .radioListeningMood span,#containerUser .radioListeningMood i{color:#fff!important;font-family:inherit;font-weight:normal;text-shadow:none;}
#containerUser .radioListeningMood i{font-family:FontAwesome;}

/* Overlay sidebars use the shared window stack; fixed desktop panels retain their normal layer. */
#leftPanel.vcCleft2,#rightPanel.vcCright2{z-index:20000!important;}
#avMenu .vcAvusername{position:absolute;inset-inline:0;top:0;min-height:29px;margin:0;display:flex;align-items:center;justify-content:center;}

.chatLogRow .chatMessage{vertical-align:baseline;}

#avMenu .vcAvtop{position:relative;}
#avMenu .vcAvtop>.vcAvusername{top:4px;pointer-events:none;}

/* Match the shared glass title and 4px modal body corners. */
#vistaCaptchaGate{border-radius:10px 10px 4px 4px;}
#vistaCaptchaGate>.vcModalTop{border-radius:10px 10px 0 0;backdrop-filter:blur(2px) saturate(120%);}
#vistaCaptchaGate>#vistaAuthCaptchaPrompt{border-radius:0 0 4px 4px;overflow:hidden;color:#000;background:linear-gradient(0deg,var(--vc-surface-light,#ececf1),var(--vc-surface-mid,#a9a8b6));}
#avMenu .vcAvtop>.vcAvusername{inset-inline:34px 8px;justify-content:flex-start;text-align:start;}
#vcAdminpanel_shell .vcAdminTabsMore{display:none!important;}
@media(max-width:768px){
#vcAdminpanel_shell button.vcAdminTabsMore{display:inline-flex!important;align-items:center;justify-content:center;border:0;background:none;box-shadow:none;border-radius:0;color:inherit;padding:6px 10px;cursor:pointer;}
}
#containerUser .radioListeningMood i{color:#8bc34a!important;text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;}



#avMenu .vcAvtop>.vcAvusername{inset-inline:0;justify-content:center;text-align:center;}
/* Avoid anonymous inline line-box space beneath the topic body. */
.topicLog>.privateMessageText{display:block;line-height:0;}
.topicLog .topicClose{top:6px;}
@media(max-width:768px){
.vcAdminTabsLayout{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:0;}
#vcAdminpanel_shell .vcAdminTabsLayout>.adminPanelTabbar,#vcAdminpanel_shell .vcAdminTabsLayout>.adminPanelSubnav,#adminPanelContent .vcAdminTabsLayout>ul{flex:0 1 auto;width:auto;max-width:100%;min-width:0;}
#vcAdminpanel_shell .vcAdminTabsLayout>.vcAdminTabsMore{flex:0 0 auto;}
}
@media(max-width:768px){
#vcAdminpanel_shell .vcAdminTabsLayout>.adminPanelTabbar,#vcAdminpanel_shell .vcAdminTabsLayout>.adminPanelSubnav,#adminPanelContent .vcAdminTabsLayout>ul{display:contents;}
#vcAdminpanel_shell .vcAdminTabsLayout .vcAdminpanel_tab{flex:0 1 auto;max-width:100%;}
.vcAdminTabsLayout{gap:0;}
}

/* Section switches set an inline flex display; flatten only the active mobile
   subnav so its independent overflow icon shares the same wrapping row. */
@media(max-width:768px){
#vcAdminpanel_shell .vcAdminTabsLayout:has(>.adminPanelSubnav:not(.adminPanelSubnavActive)),
#vcAdminpanel_shell .vcAdminTabsLayout:has(>.adminPanelSubnavSingle){display:none;}
#vcAdminpanel_shell .vcAdminTabsLayout>.adminPanelSubnav{display:none!important;}
#vcAdminpanel_shell .vcAdminTabsLayout>.adminPanelSubnavActive:not(.adminPanelSubnavSingle){display:contents!important;}
}
#avMenu .vcAvmood,#avMenu .vcAvmood .userMoodText{
 white-space:pre-wrap;overflow:visible;text-overflow:clip;overflow-wrap:anywhere;
 word-break:normal;max-height:none;-webkit-line-clamp:unset;
}

/* Revealed action cells must fit the existing small-message line box. */
.chatLogRow .vcCclear{font-size:min(22px,var(--vc-message-size,23px));line-height:1;padding-top:0;padding-bottom:0;}
.chatLogRow .vcCdate{line-height:1;padding-top:0;padding-bottom:0;}