style.css

:root {
  --themeColor: #5AB7FA;
  --premiumColor: #FF42A7;
  --leftSidebarColor: #262630;
  /* --rightSidebarColor: ; */
  --pageColor: #151617;
  --pageColor2: #151617;
  --sidebarBG: #151617;
  --contentColor: #1f1f28;
  --contentColor2: #24242e;
  --contentColor3: #2a2a37;
	--contentColor4:#373748;
  --borderColor: #323242;
  --grayColor: #555555;
  --signInColor: #5ab7fa;
  --signUpColor: #2AF5B5;
  --fontColor: #fff;
  --mainFont: "Roboto", sans-serif;
  --secondFont: "Poppins", "Roboto", sans-serif;
  --mentionColor: #FE5D6A;
  --postColor: #C95EFF;
  --chatColor: #2AF5B5;
  --linkColor: #3D87FF;
  --likeColor: #FF5786;
}

html {
  overflow-y: scroll;
}

.body {
  background: var(--pageColor);
  background-color: var(--pageColor2);
  margin: 0;
  padding: 0;
  color: var(--fontColor);
  font-family: var(--mainFont);
  font-size: 18px;
  overflow-wrap: anywhere;
  background-attachment: fixed;
  background-position: bottom;
  background-repeat: no-repeat;
  background-size: contain;
}

#backdrop {
  width: 100%;
  background-position-x: center;
  background-position-y: center;
  background-repeat-x: no-repeat;
  background-repeat-y: no-repeat;
  background-size: cover;
  height: 100%;
  position: fixed;
  opacity: 0;
  z-index: -999;
}

.app {
  display: flex;
  width: 850px;
  height: fit-content;
  min-width: 650px;
  max-width: calc(100% - 16px);
  margin: 0px auto 0px auto;
  padding: 8px;
}
.main {
  width: calc(100% - 208px);
  height: fit-content;
  margin-left: 8px;
}

.stickyContainer {
  position: sticky;
  top: 8px;
  z-index: 500;
  box-shadow: 0px 6px 5px var(--pageColor2), 0px -25px 0px var(--pageColor2);
}

#connectingDisplay {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 12px;
  margin-bottom: 8px;
  z-index: 999;
  background: var(--contentColor);
  border-left-style: solid;
  border-left-width: 8px;
  border-radius: 12px;
  font-weight: 500;
  animation: borderColorChange .8s infinite linear;
}
.connectingDisplayTitle {
  margin-right: 12px;
  color: var(--themeColor);
  font-weight: 600;
  font-size: 20px;
  line-height: 20px;
  display: block;
  font-family: var(--secondFont);
}
.connectingDisplayDisc {
  margin-left: auto;
}

@keyframes borderColorChange {
  0% {
		border-color: var(--themeColor);
	}
	50% {
		border-color: transparent;
	}
	100% {
		border-color: var(--themeColor);
	}
}

#signInUpBar {
  display: flex;
  flex-wrap: wrap;
  padding: 8px;
  margin-bottom: 8px;
  align-items: center;
  z-index: 601;
  background: var(--contentColor);
  border-radius: 12px;
}
.signInUpText {
  flex: 1;
  margin-right: 8px;
  font-size: 22px;
  line-height: 22px;
  font-weight: 600;
  font-family: var(--secondFont);
}
.signUpButton {
  margin-left: auto;
  background: var(--signUpColor);
}
.signInButton {
  margin-left: 8px;
  background: var(--signInColor);
}

#refreshPosts {
  margin-bottom: 8px;
  padding: 12px;
  text-align: center;
  font-family: var(--secondFont);
  font-weight: 400;
  color: var(--themeColor);
  background: var(--contentColor);
  border-radius: 12px;
  cursor: pointer;
}

.sidebarSection {
  padding: 6px;
  margin-bottom: 8px;
  font-size: 20px;
  line-height: 20px;
  background: var(--contentColor);
  border-radius: 12px;
}

#sidebarButtons {
  padding-bottom: 0px;  
}

.sidebarButton {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 6px;
  border: none;
  margin-bottom: 6px;
  border-radius: 8px;
  cursor: pointer;
  background: var(--contentColor2);
  font-weight: 600;
  font-size: 20px;
  line-height: 20px;
  font-family: inherit;
  color: var(--secondFont);
  text-align: left;
}

.sidebarButtonImg {
  width: 30px;
  height: 30px;
  margin-right: 8px;
}

.newPost {
  position: relative;
  display: flex;
  padding: 16px;
  margin-bottom: 8px;
  background: var(--contentColor);
  border-bottom-width: 8px;
  z-index: 501;
  border-radius: 12px;
  animation: borderColorChange .8s infinite linear;
}
.newPostSectionContent {
  flex: 1;
  padding-left: 6px;
  overflow: hidden;
}
.newPostButtons {
  display: flex;
  margin-top: 16px;
  margin-bottom: 0px;
}

#createPostButton {
  display: flex;
  align-items: center;
  margin-left: auto;
  border-radius: 8px;
  line-height: 20px;
  color: #fff;
}
#postButtonImg {
  width: 26px;
  height: 26px;
  margin-right: 4px;
}

button {
  border: none;
  color: white;
  background: var(--themeColor);
  padding: 6px;
  font-family: var(--secondFont);
  font-weight: 600;
  font-size: 20px;
  line-height: 20px;
  cursor: pointer;
  transition: 0.1s;
  border-radius: 8px;
}

button:active {
  transform: scale(0.95);
}

.groupNotif {
  display: block;
}

.sidebar {
  position: sticky;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: 200px;
  height: calc(100vh - 16px);
  top: 8px;
  background: var(--sidebarBG);
  color: var(--themeColor);
  font-size: 20px;
  line-height: 20px;
  font-family: var(--secondFont);
  font-weight: bold;
  border-radius: 12px;
}

.sidebarShowButton {
  position: absolute;
  display: flex;
  width: 80px;
  height: 60px;
  right: -80px;
  bottom: 24px;
  justify-content: center;
  align-items: center;
  background: var(--pageColor2);
  border-radius: 0px 30px 30px 0px;
}

#premium {
  color: var(--premiumColor);
}

#accountInfo {
  display: none;
  box-sizing: border-box;
  margin: auto 0px 0px 0px;
}

.accountInfoPic {
  width: 50px;
  min-width: 50px;
  height: 50px;
  object-fit: cover;
  border-radius: 6px;
}

.accountInfoMain {
  width: calc(100% - 50px);
  margin-left: 6px;
}

.accountInfoName {
  color: var(--fontColor);
  font-size: 18px;
  line-height: 25px;
  font-weight: 500;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.accountInfoActions {
  display: flex;
  margin-top: auto;
}

.gift {
  background-color: var(--themeColor);
  margin-left: 5px;
  overflow: hidden;
}

.subscribe {
  background-color: var(--premiumColor);
}

.shine {
  width: calc(35% - 15px);
  padding: 10px;
  border-radius: 30px;
  border: 5px solid rgba(255, 255, 255, 0.5);
  margin-bottom: 8px;
  min-width: fit-content;
  position: relative;
  color: white;
}

.shine:before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  content: "";
  background: linear-gradient(135deg, transparent 25%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.2) 50%, transparent 75%);
  transition: 0.2s;
}

.shine:hover {
  filter: brightness(110%);
  transform: scale(1.05);
}

.shine:active {
  filter: brightness(90%);
  transform: scale(0.95);
}
.shine:hover:before {
  left: 20px;
}
.shine:active:before {
  left: -20px;
}

.accountInfoAction {
  display: flex;
  width: 24px;
  height: 24px;
  margin-right: 6px;
  padding: 2px;
  justify-content: center;
  align-items: center;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  background: var(--contentColor2);
  transition: all 0.1s ease;
}
.accountInfoActionImg {
  width: 20px;
  height: 20px;
}

.groupNotif {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  padding: 6px;
  margin-bottom: 8px;
  cursor: pointer;
  background: var(--contentColor);
  border-radius: 12px;
}

.notifGroupImg {
  width: 32px;
  height: 32px;
  object-fit: cover;
  border-radius: 6px;
}

.post {
  position: relative;
  display: flex;
  min-height: 200px;
  margin-bottom: 8px;
  background: var(--contentColor);
  border-radius: 12px;
  overflow: hidden;
	transition:opacity 0.2s;
}

.postPost {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: 58%;
  padding: 6px;
  overflow: hidden;
  cursor:pointer;
}

.postUser {
  display: flex;
  margin-bottom: 6px;
}
.postProfilePic {
  width: 45px;
  height: 45px;
  object-fit: cover;
  border-radius: 8px;
}
.postInfo {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-left: 6px;
}
.postUsername {
  width: fit-content;
  font-size: 20px;
  line-height: 20px;
  font-weight: 500;
}
.postTimestamp {
  margin-top: 1.5px;
  font-size: 14px;
  font-weight: 400;
  color: #999;
}

.postContent {
  padding-left: 4px;
  margin-bottom: 8px;
  font-size: 20px;
  max-height: 300px;
  overflow-y: auto;
  transition: all .1s ease;
}

.postText {
  overflow-wrap: break-word;
  white-space: break-spaces;
}

.postButtons {
  display: flex;
  margin-top: auto;
  line-height: 20px;
}
.postStat {
  display: flex;
  flex: 1;
  justify-content: center;
  align-items: center;
  margin-right: 6px;
  color: #999;
}
.postStatTicker {
  overflow-y: hidden;
  display: inline-block;
  height: 20px;
}
.postStatNumber {
  display: inline-block;
  height: 18px;
  font-size: 18px;
  line-height: 18px;
}
.postButton {
  width: 24px;
  height: 24px;
  padding: 0px;
  margin-right: 4px;
  background: none;
}

.notifGroupName {
  margin-left: 6px;
  color: var(--fontColor);
  font-weight: 500;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.notifRoundCircle {
  position: absolute;
  width: 14px;
  height: 14px;
  right: -5px;
  top: -5px;
  background: var(--themeColor);
  border-radius: 100%;
  border-style: solid;
  border-color: var(--contentColor);
  border-width: 4px;
}

#newPostUserPfp {
  width: 45px;
  height: 45px;
  border-radius: 8px;
  object-fit: cover;
}

#newPostUsername {
  font-size: 20px;
  font-weight: 500;
	display: flex;
	width: calc(100% - 45px);
}

#newPostArea {
  border-radius: 8px;
  background: var(--contentColor2);
  padding: 8px;
  margin-top: 4px;
  min-height: 40px;
  max-height: 150px;
  width: calc(100% - 58px);
  word-wrap: break-word;
  overflow-y: auto;
  overflow-x: hidden;
	white-space:pre-wrap;
}

#newPostArea:empty:before {
  content: attr(placeholder);
  cursor: text;
  color: #999;
}

#premiumLogo {
  width: 100%;
  margin: auto;
  display: block;
}

#premiumBannerText {
  text-align: center;
  color: white;
  font-size: 25px;
  font-weight: bold;
  margin: 10px;
}

#premiumBanner {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

#premiumPage {
  padding: 15px 0;
  background: var(--contentColor2);
  border-radius: 16px;
  position: relative;
  margin-top: -10px;
}

#premiumInfo {
  z-index: 10;
  position: relative;
}

#premiumBenefits {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.planSelector {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  align-content: stretch;
  justify-content: space-around;
}
.planAlert {
  background: var(--contentColor2);
  padding: 8px;
  border-radius: 8px;
  font-size: 13px;
  margin-bottom: 4px;
}
.plan {
	background: var(--contentColor2);
  padding: 8px;
  border-radius: 8px;
  flex-direction: row;
  flex: 1;
  text-align: center;
  display: flex;
  align-items: center;
  gap: 4px;
}
.planGift {
  padding: 8px;
}
.planImg {
	width: 50px;
  height: 50px;
  display: block;
}
.planPriceInfo {
  display: block;
}
.planPrice {
	color: var(--fontColor);
  font-size: 20px;
  font-family: var(--secondFont);
  font-weight: bold;
}
.planInterval {
	color: gray;
  font-size: 15px;
  font-family: var(--secondFont);
  font-weight: bold;
}
.planSave {
  color: var(--premiumColor);
  font-family: var(--secondFont);
  font-weight: bold;
  font-size: 13px;
  display: block;
  text-align: left;
}
.checkout {
  display: block;
  margin-left: auto;
  min-width: fit-content;
  border-radius: 30px;
  box-shadow: 0 0 0 0px var(--premiumColor);
  padding: 10px;
}

.checkout:active {
  box-shadow: 0 0 0 20px transparent;
}
.premiumBenefitTitle {
  margin: 6px 0px 4px 0px;
  color: white;
  font-family: var(--secondFont);
  font-size: 22px;
  font-weight: 600;
  line-height: 26px;
}
.premiumBenefitDesc {
  font-size: 16px;
  font-weight: 400;
  color: #999;
}

.premiumButtonWrapper {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  padding: 8px 0px;
  width: 100%;
  flex-wrap: wrap;
  margin: 15px 0;
}

#premiumTop {
  border-radius: 16px;
  margin: 8px 16px 32px 16px;
  padding: 8px;
}

.premiumBenefit {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 185px;
  height: 200px;
  padding: 8px;
  margin: 4px;
  text-align: center;
  background: rgba(21, 22, 23, .9);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  border-radius: 12px;
}

.benefitImageShowcase {
  width: calc(100% - 16px);
  height: 100px;
  border-radius: 12px;
}

#newPostCharCount {
	position:absolute;
  color: gray;
  font-size: 12px;
  font-weight: bold;
  right:0px;
	bottom:0px;
  margin-bottom: 4px;
}

#premiumMarketShowcase {
  display: block;
  width: 100%;
}

.postActionButton {
  width: 38px;
  height: 38px;
  margin-right: 8px;
  background: var(--contentColor2);
  border-radius: 8px;
}

::-webkit-scrollbar-track {
  border: 6px solid transparent;
  background-clip: padding-box;
  border-radius: 10px;
  background-color: var(--contentColor);
  z-index: 100;
}

::-webkit-scrollbar {
  width: 18px;
  height: 18px;
  z-index: 99;
}

::-webkit-scrollbar-thumb {
  border: 6px solid transparent;
  background-clip: padding-box;
  min-height: 45px;
  border-radius: 10px;
  background-color: #444459;
  z-index: 100;
}

::-webkit-scrollbar-track {
  border: 6px solid transparent;
  background-clip: padding-box;
  border-radius: 10px;
  background-color: var(--contentColor);
}


.standardScroll::webkit-scrollbar {
  background-color: #151617;
}

::-webkit-scrollbar {
  width: 18px;
  height: 18px;
}

::-webkit-scrollbar-thumb {
  border: 6px solid transparent;
  background-clip: padding-box;
  min-height: 45px;
  border-radius: 10px;
  background-color: #444459;
}

::-webkit-scrollbar-corner {
  background: transparent;
}

[contenteditable=true]:focus, input:focus {
  transition: 0.04s;
  outline: solid;
  outline-width: 3px;
  outline-color: #9292a8;
}
:focus {
  outline: none;
}

#photopIcon {
  padding-top: 8px;
}

.postImages {
  display: flex;
  margin-top: 6px;
  overflow-x: auto;
  border-radius: 8px;
}

.postImage {
  height: 122px;
  object-fit: cover;
  border-radius: 8px;
  margin-right: 6px;
}

#newPostImages {
  display: flex;
  width: calc(100% - 42px);
  overflow-x: auto;
}

.newPostImageContainer {
  position: relative;
  width: fit-content;
  margin: 8px 8px 8px 0px;
}

.newPostImage {
  height: 200px;
  border-radius: 16px;
}

.deleteImage {
  position: absolute;
  display: flex;
  width: 30px;
  height: 30px;
  right: 4px;
  top: 4px;
  background: rgba(0, 0, 0, 0.45);
  border-radius: 100%;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  font-size: 28px;
  line-height: 28px;
}

.mention {
  color: var(--mentionColor);
  border-radius: 6px;
  transition: all .1s ease;
  cursor: pointer;
}
.post-embed {
  color: var(--postColor);
  border-radius: 6px;
  transition: all .1s ease;
  cursor: pointer;
}
.chat-embed {
  color: var(--chatColor);
  border-radius: 6px;
  transition: all .1s ease;
  cursor: pointer;
}
.link {
  color: var(--linkColor);
  font-style: italic;
  text-decoration: none;
  border-radius: 6px;
  transition: all .1s ease;
}
.mention:hover {
  background: #FE5D6A22;
}
.post-embed:hover {
  background: #C95EFF22;
}
.chat-embed:hover {
  background: #2AF5B522;
}
.link:hover {
  text-decoration: underline;
  background: #3D87FF22;
}

.postChat {
  position: absolute;
  display: flex;
  flex-direction: column;
  width: 42%;
  height: 100%;
  right: 0px;
  background: var(--contentColor2);
  overflow: hidden;
}

.postChatInfo {
  display: flex;
  padding: 4px 8px 4px 8px;
  background: var(--contentColor3);
  font-family: var(--secondFont);
  font-weight: 600;
  color: var(--themeColor);
  align-items: center;
}
.postChatLiveCircle {
  width: 12px;
  height: 12px;
  margin-right: 4px;
  background: var(--themeColor);
  border-radius: 100%;
}
.postChatLive {
  margin-right: 8px;
}
.postChatChatting {
  display: flex;
  margin-left: auto;
  font-size: 14px;
  line-height: 14px;
  font-weight: 400;
  color: #bbb;
  font-family: var(--mainFont);
}
.postChatChatting div {
  display: flex;
  height: 14px;
  margin-right: 3px;
  font-size: 14px;
  line-height: 14px;
  text-align: right;
  overflow-y: hidden;
}

.postChatHolder {
  flex: 1;
  box-sizing: border-box;
  text-align: left;
  padding: 4px;
  overflow-y: auto;
}

.loadingChatsInfo {
  display: flex;
  flex-direction: column;
  margin-top: 16px;
  align-items: center;
}
.loadingChatMsg {
  margin-top: 8px;
  color: #bbb;
}

.postChatNew {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  background: var(--contentColor3);
  bottom: 0px;
}

.postChatInput {
  width: calc(100% - 54px);
  max-height: 86px;
  overflow-y: auto;
  font-size: 16px;
  border-radius: 8px;
  background: var(--contentColor2);
  margin: 4px;
  padding: 6px;
}
.postChatInput:empty:before {
  content: attr(placeholder);
  cursor: text;
  color: #999;
}

.postChatButton {
  width: 30px;
  height: 31px;
  padding: 6px;
  font-size: 14px;
  border-radius: 8px;
}

.postChatReply {
  width: 100%;
  height: 20px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.postChatReplyLine {
  position: absolute;
  display: inline-block;
  width: 16px;
  height: 14px;
  margin-left: 16px;
  margin-top: 10px;
  border-style: solid;
  border-width: 0px;
  border-left-width: 3px;
  border-top-width: 3px;
  border-top-left-radius: 8px;
  border-color: #666666;
  box-sizing: border-box;
}
.postChatReplyText {
  width: calc(100% - 50px);
  margin: 4px 0px 0px 34px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  font-size: 14px;
  font-weight: 400;
}
.postChatReplyClose {
  position: absolute;
  display: flex;
  width: 18px;
  height: 18px;
  right: 2px;
  top: 2px;
  background: rgba(0, 0, 0, 0.45);
  border-radius: 100%;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  cursor: pointer;
}

.chat {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 0px;
  padding: 4px;
  border-radius: 12px;
  font-size: 14px;
  transition: all .25s ease;
}
.chatReplyHolder {
  position: relative;
  width: 100%;
  height: 16px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  font-size: 13px;
  color: #bbb;
  cursor: pointer;
}
.chatReplyLine {
  position: absolute;
  display: inline-block;
  width: 20px;
  height: 10px;
  margin-left: 16px;
  margin-top: 6px;
  border-style: solid;
  border-width: 0px;
  border-left-width: 3px;
  border-top-width: 3px;
  border-top-left-radius: 8px;
  border-color: #666666;
  box-sizing: border-box;
}
.chatReplyUsername {
  margin: 0px 4px 0px 39px;
  font-weight: 600;
}

.minifyChat {
  display: flex;
  flex-wrap: wrap;
  padding: 2px 4px 2px 4px;
  margin: -2px 0px 2px 0px;
  border-radius: 8px;
  font-size: 14px;
  transition: all .25s ease;
}
.chat:hover {
  background: var(--contentColor);
}
.minifyChat:hover {
  background: var(--contentColor);
}
.minifyChat:hover .chatMinfiyTime {
  opacity: 1;
}
.chatPfp {
  width: 35px;
  height: 35px;
  border-radius: 8px;
  object-fit: cover;
  margin-right: 4px;
  cursor: pointer;
}
.chatUser {
  cursor: pointer;
}
.chatAttr {
  display: block;
  font-weight: bold;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.chatTextArea .chatAttr {
  margin: 1px 0px 1px 0px;
}
.chatTime {
  font-size: 13px;
  font-weight: normal;
  color: #bbb;
}
.chatMinfiyTime {
  opacity: 0;
  width: 39px;
  font-size: 13px;
  font-weight: normal;
  color: #bbb;
  transition: all .05s ease;
}
.chatTextArea {
  width: calc(100% - 39px);
  overflow-wrap: break-word;
  white-space: pre-wrap;
}
.chatText {
  display: block;
  width: 95%;
  overflow-wrap: break-word;
  white-space: pre-wrap;
  border-radius: 2px;
}
.chatText[contenteditable="true"] {
  padding: 4px;
  background: var(--contentColor3);
  border-radius: 4px;
}
.chatMinfiyText {
  display: block;
  width: calc(99% - 39px);
  overflow-wrap: break-word;
  white-space: pre-wrap;
  border-radius: 2px;
}

.scrollToBottom {
  position: absolute;
  display: flex;
  box-sizing: border-box;
  bottom: calc(100% + 4px);
  right: 16px;
  height: 36px;
  width: 36px;
  padding-top: 4px;
  background-color: rgba(0, 0, 0, 0.45);
  border-radius: 60px;
  z-index: 50;
  cursor: pointer;
  font-size: 18px;
  font-family: Roboto, sans-serif;
  font-weight: 1800;
  color: #cccccc;
  text-align: center;
  justify-content: center;
  align-items: center;
}

@keyframes liveCircle {
  from {
    box-shadow: 0 0 0 0 var(--themeColor);
  } to {
    box-shadow: 0 0 0 5px transparent;
  }
}

.backBlur {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 99999;
  opacity: 0;
  transition: opacity 0.2s;
}
.modal {
  padding: 8px;
  background: var(--contentColor);
  border: 2px solid var(--contentColor2);
  border-radius: 12px;
  width: 350px;
  max-height: calc(100% - 32px);
  overflow-y: auto;
  transform: scale(0.9);
  transition: transform 0.2s;
}
.modal.exotek {
  display: flex;
  flex-direction: column;
  width: 1000px;
  height: 650px;
  border: none;
  color: #000;
  font-family: var(--secondFont);
  padding: 0;
  overflow-x: hidden;
  overflow-y: hidden;
}
.closeModal{
  position: absolute;
  display: flex;
  width: 24px;
  height: 24px;
  right: 4px;
  top: 4px;
  background: rgba(0, 0, 0, 0.45);
  border-radius: 100%;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  font-size: 22px;
  line-height: 22px;
  transition: 0.1s;
  font-weight: normal;
  color: white;
}
.modalTitle {
  font-weight: bold;
  font-size: 30px;
}
.modalTitle.exotek {
  padding: 4px;
  background: #fff;
  font-size: 15px;
  font-weight: bold;
}
.modalContent {
  font-size: 15px;
}
.modalTextExotek {
  position: relative;
  flex: 1;
}
.modalButtons {
  margin-top: 8px;
  text-align: right;
}
.modalButton {
  margin-left: 4px;
  border-radius: 8px;
  margin-top: 4px;
  line-height: unset;
}
.exotekIFrame {
  position: absolute;
  width: 100%;
  height: 100%;
  border: none;
  overflow: scroll;
}
.exotekLoginBtn {
  display: flex;
  width: 100%;
  margin-top: 8px;
  font-family: var(--secondFont);
  text-align: center;
  color: black;
  background-color: white;
  background: url(https://exotek.co/images/lightbackground.svg) no-repeat center center;
  background-size: cover;
  border-radius: 16px;
  line-height: 50px;
  font-size: 30px;
  font-weight: 700;
  justify-content: center;
}
.btnImg {
  height: 50px;
  width: 50px;
}
.dropdown {
  position: fixed;
  min-width: 150px;
  background: var(--contentColor);
  box-shadow: 0px 6px 5px var(--pageColor2);
  padding: 4px;
  padding-bottom: 0px;
  border-radius: 8px;
  z-index: 999999;
  transition: transform 0.2s, opacity 0.2s;
  transform-origin: top left;
  transform: scale(0.9);
  opacity: 0;
}
.dropdownButton {
  border-radius: 6px;
  margin-bottom: 4px;
  background: var(--contentColor2);
  font-size: 15px;
  padding: 4px;
  display: block;
  font-family: var(--mainFont);
  width: 100%;
  color: var(--fontColor);
}
.dropdownButton:hover {
  color: white;
}
#simpleTopBar {
  display: flex;
  flex-wrap: wrap;
  height: 30px;
  padding: 8px;
  margin-bottom: 8px;
  align-items: center;
  background: var(--contentColor);
  border-radius: 12px;
}
#groupTopBar {
  display: flex;
  flex-wrap: wrap;
  min-height: 32px;
  padding: 6px;
  margin-bottom: 8px;
  align-items: center;
  background: var(--contentColor);
  border-radius: 12px;
  z-index: 600;
}
#groupBackButton {
  height: 30px;
}
.backButton {
  display: flex;
  height: 100%;
  padding: 0px;
  align-items: center;
  background: unset;
  font-family: var(--secondFont);
  font-size: 22px;
  font-weight: 600;
  color: var(--themeColor);
}
#backButtonArrow {
  margin: 0px 8px 0px 6px;
}
#detailInfo {
  flex: 1;
  margin-left: auto;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  text-align: right;
}

.profilePreview {
  position: fixed;
  width: 280px;
  min-height: 265px;
  background: var(--contentColor2);
  box-shadow: 0px 6px 5px var(--pageColor2);
  padding: 0;
  padding-bottom: 0px;
  border-radius: 12px;
  z-index: 99999;
  transition: transform 0.2s, opacity 0.2s;
  transform-origin: top left;
  transform: scale(0.9);
  opacity: 0;
  overflow: hidden;
}
.previewPfpHolder {
  position: relative;
}
.previewFollowButton {
  height: 36px;
  margin: auto 0px 0px auto;
  border-radius: 8px;
  color: #fff;
}
.previewBanner {
  display: block;
  width: 100%;
  height: 100px;
  object-fit: cover;
  min-height: 50px;
}
.previewPfp {
  width: 70px;
  height: 70px;
  object-fit: cover;
  border-radius: 16px;
  border: 6px solid var(--contentColor2);
  background: var(--contentColor2);
  margin-left: 4px;
}
.previewContent {
  display: flex;
  padding: 8px;
  margin-top: -50px;
}
.previewStatus {
  border: 6px solid var(--contentColor2);
  border-radius: 100px;
  width: 18px;
  height: 18px;
  position: absolute;
  top: 58px;
  left: 58px;
  transition: 0.2s;
}
.previewFollow {
  display: flex;
  margin-top: 8px;
  justify-content: space-around;
  font-family: var(--mainFont);
  text-align: center;
}
.previewUsername {
  margin-left: 16px;
  font-weight: bold;
}
.previewCount {
  display: inline-block;
  margin: 0px 4px;
  cursor: pointer;
}
.previewCountTicker {
  overflow-y: hidden;
  display: inline-block;
  height: 18px;
}
.previewCountNumber {
  font-weight: bold;
  font-family: var(--secondFont);
  display: inline-block;
  height: 18px;
  font-size: 18px;
  line-height: 18px;
}
.previewBio {
  overflow-wrap: break-word;
  font-size: 14px;
  padding: 6px;
}
.previewActionButton {
  display: block;
  width: calc(100% - 12px);
  margin: 6px;
  background: var(--contentColor3);
}
.profileTop {
  display: flex;
  flex-direction: column;
  padding-bottom: 8px;
  overflow: hidden;
  background: var(--contentColor);
  border-radius: 12px;
}
.profileBanner {
  display: block;
  height: 250px;
  object-fit: cover;
  cursor: pointer;
}
@media only screen and (max-width: 450px) {
  .profilePictureHolder {
    margin-top: -20px !important;
  }
  .profilePicture {
    width: 60px !important;
    height: 60px !important;
    border-radius: 12px !important;
  }
  .profileStatus {
    top: 50px !important;
    left: 60px !important;
  }
  .profileFollowCounts {
    margin-top: 8px !important;
    width: unset !important;
  }
  .profileCount {
    display: inline-block !important;
    margin-right: 8px !important;
  }
  .profileBanner {
    height: 140px !important;
  }
  .zoomedImage {
    max-width: 100% !important;
    max-height: 100% !important;
    border-radius: 0 !important;
  }
  #backButtonArrow, #groupInvite, #groupPins, #groupSettings {
    display: none !important;
  }
}
.groupToolbar {
  margin-left: auto;
}
.profilePictureHolder {
  position: relative;
  display: flex;
  margin-top: -80px;
  pointer-events: none;
}
.profilePicture {
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: 24px;
  border: 6px solid var(--contentColor);
  background: var(--contentColor2);
  margin-left: 16px;
  pointer-events: all;
  cursor: pointer;
}
.profileUsername {
  flex: 1;
  margin: auto 7px 8px 8px;
  font-weight: bold;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  pointer-events: all;
}
.profileStatus {
  position: absolute;
  width: 20px;
  height: 20px;
  top: 104px;
  left: 118px;
  border: 6px solid var(--contentColor);
  border-radius: 100px;
  transition: 0.2s;
  pointer-events: all;
}
.profileDataHolder {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  z-index: 600;
}
.profileFollowLabel {
  display: inline-block;
  width: 78px;
  text-align: left;
}
.profileFollowCounts {
  text-align: right;
  margin-left: 8px;
  width: 135px;
  display: inline-block;
}
.profileCount {
  cursor: pointer;
}
.profileCountTicker {
  overflow-y: hidden;
  display: inline-block;
  height: 18px;
}
.profileCountNumber {
  font-weight: bold;
  font-family: var(--secondFont);
  display: inline-block;
  height: 18px;
  font-size: 18px;
  line-height: 18px;
}
.profileInfo {
  flex: 1 300px;
  display: inline-block;
  vertical-align: top;
  margin: 6px 0px 0px 8px;
}
.profileBio {
  max-width: 491px;
  overflow-wrap: break-word;
  font-size: 16px;
}
.profileTabs {
  margin: 25px 0px 8px 0px;
}
#tabs {
  display: flex;
  background: var(--contentColor);
  text-align: center;
  border-radius: 12px;
  font-size: 22px;
  font-family: var(--secondFont);
  font-weight: bold;
  flex-wrap: wrap;
  overflow-x: hidden;
  position: sticky;
  transition: 0.2s;
}
.settingsTabs {
  font-family: var(--mainFont) !important;
}
.tab {
  border-bottom: 4px solid transparent;
  flex: 1;
  padding: 8px 8px 8px 8px;
  line-height: 30px;
  cursor: pointer;
  transition: 0.2s;
  height: 30px;
}
.tab.selected {
  color: var(--themeColor);
  border-color: var(--themeColor);
}
.tab.selected[type="chats"], .tab.selected[type="invites"] {
  color: var(--chatColor);
  border-color: var(--chatColor);
}
.tab.selected[type="likes"] {
  color: var(--likeColor);
  border-color: var(--likeColor);
}
.tab.selected[type="new"] {
  color: #FF4DD2;
  border-color: #FF4DD2;
}
.tab.selected[type="discover"] {
  color: #635ee0;
  border-color: #635ee0;
}
.tooltip {
  text-align: center;
  font-weight: bold;
  font-size: 18px;
  line-height: 18px;
  padding: 4px;
  margin-top: 6px;
}
.profileDates {
  display: flex;
  flex-wrap: wrap;
}
.profileDate {
  display: flex;
  margin: 12px 12px 0px 0px;
  align-items: center;
  font-size: 16px;
  line-height: 16px;
}
.profileDateSpan {
  margin-left: 6px;
}
.profileFollow {
  margin: auto 0px 4px auto;
  height: 40px;
  line-height: 20px;
  pointer-events: all;
  color: #fff;
}
.profileSocialLinkHolder {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-top: 6px;
}
.profileSocialButton {
  box-sizing: border-box;
  width: 31px;
  height: 31px;
  padding: 4px;
  border-radius: 6px;
  cursor: pointer;
  transition: 0.1s;
}
.profileSocialButton:active {
  transform: scale(0.95);
}

.profileMenu {
  margin: auto 8px 4px auto;
  margin-left: 6px;
  background: var(--grayColor);
  height: 40px;
  line-height: 20px;
  pointer-events: all;
}
.profileHolder-chats {
  display: flex;
  flex-wrap: wrap;
  margin-top: 8px;
  justify-content: center;
}
.profileChat {
  flex: 1 1 250px;
  margin: 8px;
  padding: 4px;
  border-radius: 12px;
  background: var(--contentColor);
  display: flex;
  font-size: 14px;
  line-height: 14px;
  max-width: 296px;
  flex-wrap: wrap;
  position: relative;
  transition: 0.1s;
}
.profileChatText {
  overflow-wrap: anywhere;
}
.profileChatOverlay {
  z-index: 100;
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  object-fit: cover;
  cursor: pointer;
}
.profileChatOverlay:active .profileChat {
  transform: scale(0.95);
}
.settingsHolder-account, .settingsHolder-display, .groupsHolder-new {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.settingsSection {
  flex: 1 1 297px;
  max-width: 297px;
  margin: 8px 4px 0px 4px;
  padding: 8px;
  background: var(--contentColor);
  border-radius: 12px;
}
.settingsPfp {
  width: 80px;
  height: 80px;
  object-fit: cover;
  background: var(--contentColor3);
  border-radius: 12px;
  border: 4px solid var(--contentColor2);
}
.settingsInput, .signInInput {
  box-sizing: border-box;
  width: 100%;
  background: var(--contentColor2);
  font-weight: bold;
  font-family: inherit;
  font-size: 16px;
  height: 32px;
  color: inherit;
  border: none;
  padding: 4px;
  margin-top: 6px;
  border-radius: 8px;
}
input[type="radio"], input[type="checkbox"] {
  display: none;
}

.radioLabel {
  display: block;
  padding: 6px;
  margin-top: 6px;
  border-radius: 8px;
  transition: 0.2s;
  font-size: 16px;
  line-height: 16px;
  cursor: pointer;
}
input[type="radio"]:checked + .radioLabel, input[type="checkbox"]:checked + .radioLabel {
  background: var(--themeColor);
  color: white;
  font-weight: bold;
}
input[type="radio"]:checked + .radioLabel.report, input[type="checkbox"]:checked + .radioLabel.report {
  background: #FFCB70;
  font-weight: bold;
}
input[type="radio"]:checked + .radioLabel.ban, input[type="checkbox"]:checked + .radioLabel.ban {
  background: #FF5C5C;
  font-weight: bold;
}
input[type="radio"]:checked + .radioLabel.premPlan, input[type="checkbox"]:checked + .radioLabel.premPlan {
  background: var(--premiumColor);
  font-weight: bold;
}
.radioLabel:hover {
  background: var(--contentColor3);
}
.radioLabel:before {
  content: "✓";
  display: inline-block;
  margin-right: 4px;
  opacity: 0;
  transition: 0.2s;
}
input[type="radio"]:checked + .radioLabel:before, input[type="checkbox"]:checked + .radioLabel:before {
  opacity: 1;
}
.reportContextTitle {
  margin: 4px 0px 4px 0px;
}
.textArea {
  border-radius: 8px;
  background: var(--contentColor3);
  padding: 8px;
  min-height: 40px;
  max-height: 220px;
  word-wrap: break-word;
  overflow-y: auto;
  overflow-x: hidden;
}
.textArea:empty:before {
  content: attr(placeholder);
  cursor: text;
  color: #999;
}
#profileDescription {
  flex: 1;
  height: 165px;
  margin-top: 4px;
  font-size: 16px;
  line-height: 16px;
}
.settingsProfileDescriptionChar {
  margin-top: 2px;
  font-size: 13px;
  line-height: 13px;
  color: gray;
  text-align: right;
}
.settingsBanner {
  display: block;
  width: 100%;
  height: 100px;
  margin-bottom: 6px;
  object-fit: cover;
  border-radius: 8px;
  background: var(--contentColor3);
}
.settingsPfpHolder {
  margin: -50px 0px 0px 12px;
}
.settingsBackdropHolder {
  position: relative;
  background: var(--contentColor3);
  border-radius: 8px;
  width: 80%;
  height: 100px;
  margin: auto;
  margin-top: 10px;
  margin-bottom: 6px;
}
.settingsBackdrop {
  display: block;
  object-fit: cover;
  border-radius: 8px;
  background: var(--contentColor2);
  width: 100%;
  height: 100%;
}
#settingsBackdropRemove {
  background: var(--grayColor);
  display: block;
  padding: 4px;
  margin: auto;
  margin-top: 4px;
}
#settingsNewUrl {
	display:inline-block;
	margin:auto 0px auto 0px;
	width:176px;
}
#settingsUsername {
	display:inline-block;
	margin:auto 0px auto 0px;
}
#saveURL {
	display:inline;
	margin:auto 0px auto 6px;
	width:63.62px;
}
#saveBasic {
	display:inline;
	margin:auto 0px auto 6px;
	width:80px;
}

#exotekAccount {
	display:flex;
	padding:8px;
	flex-direction:column;
	flex-wrap:wrap;
}

#exotekButtons {
	display:flex;
	width:100%;
	flex-wrap:wrap;
	margin-top:4px;
}
#exotekButtons button {
	border-radius:8px;
	height:fit-content;
	padding:8px;
	margin:4px;
	flex: 1 1 140px;
}
#exotekManageButton {
	margin: 4px 2px 4px 4px;
	background-color:#FF008A;
}
#exotekTransferButton {
	margin: 4px 4px 4px 2px;
	background-color:var(--borderColor);
}

#exotekUser {
	display:inline-flex;
	flex-wrap:wrap;
	justify-content:center;
}
#exotekInfo {
	display:flex;
	margin: auto 0px auto 8px;
	padding: 3px;
	flex-direction:column;
}
#exotekUser img {
	width:80px;
	height:80px;
	border:solid;
	border-width:3px;
	border-color:var(--themeColor);
	border-radius:50%;
	object-fit:cover;
}
#exotekUsername {
	font-weight:bold;
	font-size:20px;
}
#exotekEmail {
	margin-top:5px;
	
	font-size:15px;
	color:#9d9d9d;
}

.settingsLink {
  width: 100%;
  margin: 6px 0px 6px 0px;
  display: block;
  text-align: center;
}

#settingsAffiliateLinkFlex {
  display: flex;
  width: 100%;
  height: 100%;
  margin-top: 6px;
}
#affiliateUrlInput {
  flex: 1;
  width: unset;
  margin: 0px;
  color: var(--themeColor);
}
#settingsCopyText {
  margin-left: 6px;
}
.settingsAffiliateStats {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  margin-top: 8px;
  justify-content: space-around;
}
.settingsAffiliateStat {
  font-size: 14px;
  font-weight: 600;
  color: #ccc;
}

.zoomedImageHolder {
  position: relative;
  display: block;
  transform: scale(0.9);
  transition: 0.2s;
  animation: imageIn 0.2s;
}

.zoomedImage {
  position: relative;
  display: inline-block;
  min-width: 100px;
  min-height: 100px;
  max-width: 60vw;
  max-height: 60vh;
  object-fit: scale-down;
  background-color: var(--contentColor2);
  border-radius: 12px;
}

@keyframes imageBlurIn {
  from {
    opacity: 0;
  }
}
@keyframes imageIn {
  from {
    transform: scale(0.9);
  }
}

.zoomedImageClose{
  position: absolute;
  display: flex;
  width: 30px;
  height: 30px;
  right: 4px;
  top: 4px;
  background: rgba(0, 0, 0, 0.45);
  border-radius: 100%;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  font-size: 28px;
  line-height: 28px;
  transition: 0.1s;
  font-weight: normal;
  color: white;
}
.zoomedImageClose:active {
  transform: scale(0.95);
}
.roleEmoji {
  border-radius: 6px;
  padding: 0 2px;
}
.roleEmoji.onProfile {
  cursor: pointer;
}
.roleEmoji.onProfile:active {
  filter: brightness(0.8);
}
.settingsTitle {
  font-weight: bold;
  font-size: 14px;
  line-height: 14px;
}
.settingsSaveHolder {
  display: flex;
  justify-content: center;
}
.settingsSave {
  text-align: center;
  display: block;
  margin-top: 8px;
}
.hidden {
  display: none;
}
#socialRow .profileSocialButton {
  margin: 3px 3px 0px 0px;
}
.settingsSmall {
  font-size: 12px;
  color: #aaa;
}
.settingsBannerHolder {
  position: relative;
}
.settingsPfpHolder {
  position: relative;
  width: 88px;
  height: 88px;
}
.settingsUploadButton {
  position: absolute;
  width: 20px;
  height: 20px;
  padding: 8px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.45);
  border-radius: 100%;
  content: url(./icons/upload.svg);
  cursor: pointer;
}
#backdropRemove {
  content: url(./icons/XButton.svg);
  left: 70%;
}
.upload2 {
  left: 30%;
}
.socialConnection {
  margin-top: 4px;
  padding: 4px;
  background: var(--contentColor2);
  border-radius: 8px;
  align-items: center;
  display: flex;
}
.socialConnection .profileSocialButton {
  margin-right: 4px;
}
.removeSocial {
  margin-left: auto;
  margin-right: 4px;
  font-size: 16px;
  background: var(--contentColor);
  border-radius: 100px;
  width: 20px;
  line-height: 20px;
  text-align: center;
  padding: 0;
  cursor: pointer;
  color: #FF5786;
}

.followTile {
  display: flex;
  flex-wrap: wrap;
  padding: 6px;
  margin-top: 8px;
  align-items: center;
  background: var(--contentColor);
  border-radius: 12px;
  overflow: hidden;
}
.followTilePic {
  width: 35px;
  height: 35px;
  border-radius: 8px;
  object-fit: cover;
  cursor: pointer;
}
.followTileUser {
  margin: 0px 6px 0px 6px;
  font-weight: 600;
  cursor: pointer;
}
.followTileButton {
  margin-left: auto;
}

.settingsVisibility {
  margin-top: 6px;
  background: var(--contentColor2);
}
.settingsRemoval {
  margin-top: 6px;
  background: transparent;
  border: 2px solid #FF5786;
  font-weight: 500;
  font-size: 18px;
  color: #FF5786;
}

.previewBlockButton {
  height: 36px;
  margin: 0px 0px 0px auto;
  border-radius: 8px;
  line-height: 20px;
}
.blockedTileUser {
  margin-left: 6px;
  font-weight: 600;
  cursor: pointer;
}
.blockedTilePic {
  width: 35px;
  height: 35px;
  border-radius: 6px;
  object-fit: cover;
  cursor: pointer;
}
.blockTile {
  display: flex;
  flex-wrap: wrap;
  padding: 6px;
  margin-top: 8px;
  align-items: center;
  background: var(--contentColor);
  border-radius: 12px;
  overflow: hidden;
}
.embedHolder {
  position: relative;
  display: flex;
  height: 205px;
  padding: 6px;
  margin-top: 8px;
  overflow: hidden;
  background: var(--contentColor2);
  font-family: var(--secondFont);
  font-size: 20px;
  font-weight: 600;
  color: #bbb;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
}
.iframeembed {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0px;
  top: 0px;
  border: none;
}

a {
  color: var(--linkColor);
  cursor: pointer;
}
.tosAgreeText {
  margin-top: 12px;
  padding: 6px;
  background-color: #2A2A37;
  border-radius: 10px;
  font-size: 16px;
  text-align: center;
}

input[type="date"] {
  background: transparent;
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  padding: 0;
  border: none;
  margin: 0;
}
input[type="date"]:focus {
  outline: none;
}
.embed {
  position: relative;
  padding: 6px;
  margin-top: 4px;
  background: var(--contentColor2);
  border-radius: 10px;
  font-size: 15px;
}
.linkEmbed {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  padding: 6px;
  margin-top: 4px;
  background: var(--contentColor2);
  border-radius: 10px;
  font-size: 15px;
}
.embedVideo {
  width: 100%;
  height: 150px;
  margin-bottom: 6px;
  border-radius: 6px;
}
.embedMedia {
  max-width: 100%;
  height: 180px;
  margin-top: 6px;
  object-fit: cover;
  border-radius: 10px;
}
.embedImage {
  width: 45px;
  height: 45px;
  margin-right: 6px;
  object-fit: cover;
  z-index: 101;
  border-radius: 6px;
}
.embedInfoHolder {
  flex: 1;
  width: 100%;
  overflow: hidden;
}
.embedTitle {
  font-weight: 600;
  font-size: 16px;
  color: var(--linkColor);
}
.embedDesc {
  color: #bbb;
}

.embedUser {
  display: flex;
  margin-bottom: 6px;
}
.embedUsername {
  width: fit-content;
  margin-top: 1px;
  font-size: 15px;
  font-weight: 500;
}
.embedTimestamp {
  font-size: 12px;
  font-weight: 400;
  color: #999;
}
.embedProfilePic {
  width: 35px;
  height: 35px;
  object-fit: cover;
  border-radius: 6px;
  margin-right: 4px;
}
.embedContent {
  padding-left: 4px;
  font-size: 15px;
  max-height: 300px;
  overflow-y: hidden;
  transition: all .1s ease;
}
.embedText {
  overflow-wrap: break-word;
  white-space: break-spaces;
}
.searchSection {
  background: var(--contentColor);
  padding: 4px;
  border-radius: 8px;
  margin-bottom: 4px;
}
.searchResult {
  background: var(--contentColor2);
  border-radius: 8px;
  margin-bottom: 4px;
  padding: 4px;
  padding-bottom: 0;
}
.searchSection .searchResult:last-of-type {
  margin-bottom: 0;
}
#searchBar {
  font-size: 18px;
  font-family: inherit;
  display: block;
  width: calc(100% - 8px);
  border-radius: 6px;
  background: var(--contentColor2);
  padding: 4px;
  border: none;
  color: inherit;
}
.searchPfp {
  width: 40px;
  height: 40px;
  margin-right: 4px;
  object-fit: cover;
  border-radius: 6px;
  cursor: pointer;
}
.searchUsername {
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
}
table {
  border-spacing: 0;
}
td {
  margin: 0;
  padding: 0;
}
.hashtag {
  color: var(--themeColor);
  cursor: pointer;
}
@keyframes like {
  0%,
  100% {
    transform: scale(1);
    transform-origin: 50% 50%;
  }
  15% {
    transform: translateY(-5px) scale(1.5);
  }
  30% {
    transform: translateY(5px) scale(0.8);
  }
  45% {
    transform: translateY(-3px) scale(1.25);
  }
  60% {
    transform: translateY(3px) scale(0.9);
  }
  75% {
     transform: translateY(-1px) scale(1.1);
  }
}
.groupsHolder-groups, .groupsHolder-invites {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.groupSection {
  position: relative;
  flex: 1 1 206px;
  max-width: 206px;
  height: 206px;
  margin: 8px 4px 0px 4px;
  background: var(--contentColor);
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
}
.groupIcon {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.groupInfo {
  position: absolute;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  bottom: 0;
  background-color: rgba(0,0,0,0.75);
  /* backdrop-filter: blur(10px); CREATES SCROLL LAG*/
  justify-content: center;
}
.groupName {
  width: 100%;
  padding: 4px;
  text-align: center;
  font-weight: 500;
  color: #fff;
}
.inviteTileButtons {
  margin: 0px 4px 8px 4px;
  color: #fff;
}
.groupToolbarButton {
  width: 32px;
  height: 32px;
  padding: 0px;
  margin-right: 8px;
  background: transparent;
}
.groupJoinButton {
  margin-right: 8px;
  vertical-align: top;
}
.inviteUsername {
  padding: 4px;
  background: var(--contentColor2);
}

.groupMainHolder {
  display: inline-block;
  width: calc(100% - 206px);
}
.groupMembersHolder {
  width: 198px;
  float: right;
  margin-left: 8px;
  z-index: 601;
  transition: 0.2s;
  transform-origin: right center;
}
.groupMembers {
  position: fixed;
  display: flex;
  flex-direction: column;
  min-width: 198px;
  height: 100vh;
  top: 0px;
  overflow-y: auto;
  background: var(--sidebarBG);
}
@media only screen and (max-width: 1075px) {
  .groupMembers {
    background: var(--pageColor);
    padding-left: 4px !important;
    margin-left: -4px;
  }
  .groupMembersHolder {
    position: fixed;
  }
  .groupMembersX {
    display: block !important;
    width: 40px;
    height: 40px;
    background: var(--pageColor);
    right: 48px;
    position: relative;
    line-height: 15px;
    border-radius: 100px;
    font-size: 30px;
  }
}
.groupMembersX {
  display: none;
}
.groupMemberSection {
  margin-top: 8px;
}
.groupMember {
  display: flex;
  margin-bottom: 8px;
  background: var(--contentColor);
  padding: 4px;
  border-radius: 12px;
  cursor: pointer;
}
.groupMemberPfp {
  width: 35px;
  height: 35px;
  object-fit: cover;
  border-radius: 8px;
  opacity: 0;
}
.groupMemberInfo {
  width: 137px;
  margin-left: 4px;
}
.groupMemberUsername {
  margin-top: 1px;
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.groupMemberStatus {
  display: flex;
  margin-top: 2px;
  align-items: center;
  font-size: 12px;
  line-height: 0px;
}
.groupMemberStatusCircle {
  width: 10px;
  height: 10px;
  margin-right: 3px;
  border-radius: 100%;
}
.groupInfoInGroup {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-right: 6px;
}
.groupIconInGroup {
  width: 35px;
  min-width: 35px;
  height: 35px;
  object-fit: cover;
  background: var(--pageColor2);
  border-radius: 8px;
  cursor: pointer;
}
#groupInvite {
  visibility: hidden;
}
#groupSettings {
  visibility: hidden;
}
.groupCreateSection {
  display: flex;
  width: 100%;
  margin: 12px 4px 0px 4px;
  padding: 8px;
  justify-content: center;
}
#createGroup {
  padding: 10px;
  background: #FF4DD2;
  color: #fff;
}

#mentionsDropdown {
  height: 0px;
  transform-origin: top left;
  transform: scale(1);
  transition: 0.2s;
  overflow: hidden;
}
.mentionUser {
  display: flex;
  padding: 4px;
  align-items: center;
  background: var(--contentColor);
  border-radius: 8px;
  transition: 0.2s;
  cursor: pointer;
}
.mentionUser:hover {
  background: var(--contentColor3);
}
.mentionUserPfp {
  width: 35px;
  height: 35px;
  margin-right: 4px;
  object-fit: cover;
  border-radius: 6px;
}
.groupIconCreate {
  position: relative;
  background: var(--contentColor3);
  width: 100px;
  height: 100px;
  margin: auto;
  border-radius: 8px;
  overflow: hidden;
}
.groupIconCreateHolder {
  position: relative;
  display: none;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.invites {
  display: flex;
  flex-wrap: wrap;
  margin: 8px 0px 8px 0px;
  justify-content: center;
}
.invitePreview {
  display: flex;
  align-items: center;
  margin: 8px 0px 12px 0px;
}
.inviteUsernameTile {
  display: flex;
  width: 100%;
  padding: 4px;
  margin-top: 4px;
  border-radius: 8px;
  background: var(--contentColor2);
  font-weight: bold;
  align-items: center;
  flex-direction: row;
}
.invitePfp {
  width: 30px;
  height: 30px;
  object-fit: cover;
  border-radius: 8px;
  margin-right: 4px;
}
.inviteUsernameUsername {
  margin-right: 4px;
}
.inviteButton {
  margin-left: auto;
}
.inviteLink {
  width: 100%;
  margin-top: 4px;
  padding: 4px;
  background: var(--contentColor2);
  border-radius: 8px;
  align-items: center;
  display: flex;
}
.removeLink {
  margin-left: auto;
  font-size: 16px;
  background: var(--contentColor);
  border-radius: 100px;
  width: 20px;
  line-height: 20px;
  text-align: center;
  padding: 0;
  cursor: pointer;
  color: tomato;
}
.groupHolder-links {
  display: flex;
  flex-wrap: wrap;
  margin-top: 8px;
  justify-content: center;
  align-items: center;
}
.loadMoreButton {
  margin-top: 8px;
  color: #bbb;
  cursor: pointer;
}

.mobilePostChatHolder {
  position: fixed;
  background: var(--pageColor2);
  opacity: 0;
  z-index: 900;
  transition: 0.35s ease-in-out;
}
.mobileChatBackButton {
  position: absolute;
  display: flex;
  width: 100%;
  height: 45px;
  left: 0px;
  bottom: 0px;
  cursor: pointer;
  justify-content: center;
  align-items: center;
}
@keyframes scale-in-center {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
}

#banAppealInput {
  margin-top: 6px;
}
#submitAppealButton{
  float: right;
  padding: 8px;
  margin-top: 6px;
}
#banContext {
  margin: 6px 0px 6px 0px;
}
#banTempNum {
  width: 50px;
}
#banTermTx {
  margin-top: 8px;
}
.banInput {
  width: 130px;
  height: 30px;
  padding: 0px 6px 0px 6px;
  border: none;
  border-radius: 8px;
  background: var(--contentColor2);
  color: var(--fontColor);
  font-size: inherit;
  font-family: inherit;
  font-weight: inherit;
}

#premTopShowcase {
  background: url(../Images/PremiumBanner.png),linear-gradient(315deg, #7132a8, #FF42A7);
  padding: 20px;
  margin-top: 8px;
  border-radius: 16px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.premTopShowcase {
  width: 290px;
  margin: auto;
  display: block;
  margin-top: 20px;
}

#premiumHeader {
  font-size: 25px;
  font-weight: bold;
  text-shadow: 0 3px 5px rgb(0 0 0 / 50%);
  color: white;
}

#premiumCardFlexData {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100%;
}

.premiumInput {
  height: 30px;
  border: none;
  outline: none;
  border-radius: 8px;
  background: var(--contentColor2);
  color: var(--fontColor);
  margin-top: 5px;
}

.premiumInputLarge {
  width: 100%;
}

#premTopSupport {
  text-align: center;
  margin-top: 10px;
}

#premiumButtonWrapper2 {
  margin-top: 5px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
#premiumBannerSub {
  display: block;
  margin: auto;
  margin-top: 10px;
}

.inventorySection {
  background: var(--contentColor);
  padding: 8px;
  border-radius: 8px;
  margin-top: 7.5px;
}

.inventoryTitle {
  font-size: 20px;
}

.settingsInventoryPremiumGift {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: calc(100% - 16px);
  height: 100%;
  margin-top: 7.5px;
  background: var(--contentColor2);
  padding: 8px;
  border-radius: 8px;
}

.settingsPremiumClaim {
  background: var(--premiumColor);
}

.settingsPremiumTaken {
  background: var(--grayColor);
}
.gift-link {
  color: var(--premiumColor) !important;
  text-shadow: 0 0 3px var(--premiumColor);
  text-decoration: none;
  cursor: pointer;
}

.profileRole {
  width: 15px;
  height: 15px;
}

.charCount {
    width: calc(100% - 2.5px);
    color: gray;
    font-size: 12px;
    font-weight: bold;
    text-align: right;
    margin-top: 4px 0px;
}

.chatEditingButtonFlex {
  display: flex;
  flex-direction: row;
}

.chatEditingClose, .chatEditingConfirm {
  width: 30px;
  height: 30px;
}

.chatEditingClose {
  background-color: var(--grayColor);
}

.chatEditingConfirm {
  background-color: var(--premiumColor);
}

.chatEditingSvg {
  width: 18px;
  height: 18px;
}
#editPost {
  background: var(--contentColor2);
  padding: 4px;
  border-radius: 7px;
}
.particle-snow {
  position: fixed;
  width: 5px;
  height: 5px;
  border-radius: 100%;
  z-index: 999;
  background: white;
  pointer-events: none;
  animation: particleSnow 15s linear, particleSnow2 15s ease;
}
@keyframes particleSnow {
  0% {
    top: -5px;
  }
  100% {
    top: 100%;
  }
}
@keyframes particleSnow2 {
  5%, 15%, 25%, 35%, 45%, 55%, 65%, 75%, 85%, 95% {
    transform: translateX(-5px);
  }
  10%, 20%, 30%, 40%, 50%, 60%, 70%, 80%, 90% {
    transform: translateX(5px);
  }
}
.particle-fireworks1 {
  position: fixed;
  z-index: 999;
  animation: particleFirework11 3s cubic-bezier(0,.75,.6,1), particleFirework12 3s ease;
  width: 32px;
  height: 16px;
  opacity: 0;
  transform: translateX(50px);
}
@keyframes particleFirework11 {
  0% {
    top: 100%;
    opacity: 3;
  }
  100% {
    top: 25%;
    opacity: 0;
  }
}
@keyframes particleFirework12 {
  5%, 15%, 25%, 35%, 45%, 55%, 65%, 75%, 85%, 95% {
    transform: translateX(50px);
  }
  10%, 20%, 30%, 40%, 50%, 60%, 70%, 80%, 90% {
    transform: translateX(52px);
  }
}
.particle-fireworks2 {
  position: fixed;
  z-index: 999;
  opacity: 0;
  animation: particleFirework2 0.75s linear;
  width: 150px;
  height: 150px;
  top: 25%;
}
@keyframes particleFirework2 {
  0% {
    opacity: 1;
    transform: scale(0);
  }
  40% {
    opacity: 1;
    transform: scale(2);
  }
  100% {
    opacity: 0;
    transform: scale(1.9, 1.8);
  }
}

.snowtop{
  animation: showSnowBg 1s ease;
  background-position-y: 100%;
}

@keyframes showSnowBg {
  from{
    background-position-y: 500%;
  }
  to{
    background-position-y: 100%;
  }
}

.editChatButton{
  background-color: transparent;
  font: var(--mainFont);
}

.saveEditButton{
  font-weight:bold;
  color: var(--themeColor);
  padding: 0;
  left: 30px;
}
.saveEditButton[minified="defined"] {
	margin-left:35px;
}

.cancelEditButton{
  color: #aaa;
  float: right;
  padding: 0;
  margin-left: auto;
}

.editChatButtons{
	width:100%;
  padding: 0;
  margin-top: 6px;
  display: flex;
}

.chatEditedTitle {
	color:grey;
	font-size:10px;
	user-select:none;
}

#editPostCharCount {
	margin:2px 0px 0px auto;
	color:grey;
	font-size:12px;
	font-weight:bold;
}

#premiumStats {
	padding:6px;
	margin:2px 0px 2px 0px;
	background-color:var(--contentColor2);
	border-radius:10px;
}
.premiumSection {
	display:flex;
	margin-bottom:6px;
}

#giftDivFlex1 {
  display: flex;
  flex-direction: horizontal;
}
#giftCount {
	display: flex;
  justify-content: center;
  align-items: center;
  height: 45px;
  font-size: 45px;
  text-shadow: 0px 3px purple;
  font-weight: 800;
  color: var(--premiumColor);
  transition: all 0s ease 0s;
}

.managePremiumBtn {
  width: 100%;
  margin: 4px 4px 4px 2px;
}

.lightBlue {
  background: var(--themeColor);
}

.premiumColor {
  background: var(--premiumColor);
}

#claimPremiumPopup{
  overflow: hidden;
  text-align: center;
  position: relative; 
  padding: 10px;
}

#claimPremiumSolving{
  color: var(--premiumColor);
}

#claimPremiumPopup iframe{
  padding: 10px;
}

#claimPremiumButton{
  width: 100%;
}

.giftAnimBackground{
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 999;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.giftAnimBackgroundHide{
  animation: scale-anim 1s ease reverse;
  -webkit-backdrop-filter: blur(0);
  backdrop-filter: blur(0);
}

.giftAnimContainer{
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  display: block;
}

.giftAnim{
  line-height: 0;
  cursor: pointer;
  width: 340px;
  margin-bottom: 25px;
  transition: scale .5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.giftAnimTop{
  transition: margin-bottom 2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.giftAnim[open="false"]{
  animation: shake-gift 2s ease infinite;
}

.giftAnim[open="false"]:active{
  scale: 0.9;
}

.giftAnimLabel{
  color: var(--premiumColor);
  font-size: 30px;
  font-weight: bold;
}

.giftAnimGem{
  height: 120px;
  position: absolute;
  width: 100%;
  object-fit: contain;
  top: 235px;
  z-index: -1;
  scale: 1;
  filter: drop-shadow(0 0 10px var(--premiumColor));
  animation: scale-anim 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  user-select: none;
}

.giftAnimShine{
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0.5;
  z-index: -1;
  animation: rotate-shine 5s linear infinite;
  user-select: none;
}

@keyframes rotate-shine{
  to{
    rotate: 360deg;
  }
}

@keyframes scale-anim{
  from{
    scale: 0;
  }
}

@keyframes shake-gift{
  10%{
    rotate: 5deg;
    filter: drop-shadow(0 0 0px var(--premiumColor));
  }
  20%{
    rotate: -5deg;
  }
  30%{
    rotate: 10deg;
  }
  40%{
    rotate: -10deg;
  }
  50%{
    rotate: 0deg;
    filter: drop-shadow(0 0 5px var(--premiumColor));
  }
  100% {
    filter: drop-shadow(0 0 0px var(--premiumColor));
  }
}

.activeGiftIcon{
  animation: shake-gift 2s ease infinite;
  width:45px;
  height:45px;
}

.solvingTicker{
  overflow-y: hidden;
  display: inline-block;
  height: 17px;
}

.solvingCounter{
  font-weight: bold;
}

#messageHolder {
	max-width: 196px;
}
#newMessageBtn {
	width:196px;
	height:44px;
	margin-top:3px;
	color:var(--themeColor);
	border-radius:12px;
	background-color:var(--pageColor);
	font-size:16px;
	font-weight:700;
}
#startAMessageButton {
	width:196px;
	height:44px;
	color:var(--themeColor);
	border-radius:12px;
	background-color:var(--contentColor);
	font-size:16px;
	font-weight:700;
}
#activeMessages {
	width: 188px;
	padding: 4px;
	padding-top: 1px;
	background: var(--contentColor);
	border-radius: 10px;
	margin-top: 3px;
	transition: 0.2s;
}
#requestMessages {
  max-height: 0;
  transition: 0.2s;
  overflow-y: hidden;
  transform: scaleY(0);
  transform-origin: center top;
  position: absolute;
  z-index: 999;
  width: 196px;
}
.message {
	display: flex;
	position: relative;
	padding: 4px;
	margin-top: 3px;
	border-radius: 6px;
	cursor: pointer;
	transition: transform .1s, background .4s;
}
.message[active] {
	background: var(--contentColor2);
}
.message:hover {
	background: var(--contentColor2);
}
.message:active {
	transform: scale(0.95);
}
.messageImage {
	width:38px;
	height:38px;
	border-radius:4px;
	object-fit:cover;
}
.messageStatus {
	position:absolute;
	width:10px;
	height:10px;
	top:29px;
	left:29px;
	border: solid;
	border-color: var(--contentColor);
	border-radius: 100px;
  transition: 0.4s;
}
/*.message:hover .messageStatus, .message[active] .messageStatus {
  border-color: var(--contentColor);
}*/
.messageName {
	margin:auto 0 auto 6px;
	font-weight:bold;
	font-size:16px;
}
.messageNotif {
	display:flex;
	align-items:center;
	justify-content:center;
	padding:2px 7px;
	margin:auto 0 auto auto;
	border-radius:100px;
	background-color:var(--themeColor);
	font-weight:900;
	font-size:14px;
}

#mainHolder {
	width:100%;
	height:calc(100vh - 70px);
	margin-left:6px;
}
#dmTopBar {
	display:flex;
	flex-wrap:wrap;
	min-height:39px;
	padding:3px;
	margin-bottom:8px;
	align-items:center;
	background:var(--contentColor);
	border-radius:12px;
	z-index:600;
}
.topbarImage {
	width:41px;
	height:41px;
	border-radius:9px;
	object-fit:cover;
}
.topbarStatus {
	position:absolute;
	width:10px;
	height:10px;
	top:31px;
	left:31px;
	border: solid;
	border-color:var(--contentColor);
	border-radius: 100px;
}
.topbarName {
	margin:auto 0 auto 6px;
	font-weight:700;
	font-size:16px;
}
.topbarOptions {
	margin-left:auto;
}

#dmHolder {
	display:flex;
	flex-direction:column;
	height:100%;
	width:100%;
	background-color:var(--contentColor);
	border-radius:12px;
}
#dmContent {
	display:flex;
	flex-wrap:wrap;
	margin-top:auto;
	padding:0 12px 12px 12px;
}
#dms {
	display:flex;
	flex-direction:column;
	overflow:auto;
	overflow-x:hidden;
	padding: 12px;
}
.dm {
	display:flex;
	flex-wrap:wrap;
	width:98%;
	padding:4px;
	border-radius:15px;
	transition:background .4s;
}
.dm:hover {
	background:var(--contentColor2);
}
.dm[self] {
	margin-left:auto;
}
.dmMinified {
	display:flex;
	width:calc(100% - 14px);
	padding:2px 6px 2px 6px;
	border-radius:12px;
	margin-top:-2px;
	transition:background .4s;
}
.dmMinified:hover {
	background:var(--contentColor2);
}
.dmMinified[self] {
	margin-left:auto;
}
.dmContent {
	margin:auto 0;
}
.dmContent[self] {
	margin:auto 0 auto auto;
}
.dmUser {
	display:flex;
}
.dmImage {
	width:35px;
	height:35px;
	margin-right:6px;
	border-radius:12px;
	object-fit:cover;
	cursor:pointer;
}
.dmImage[self] {
	margin-right:0;
	margin-left:6px;
}
.dmUsername {
	font-weight:bold;
	font-size:14px;
	cursor:pointer;
}
.dmTimestamp {
	display:flex;
	align-items:center;
	margin-left:6px;
	font-size:12px;
	color:#999;
}
.dmTimestamp[self] {
	margin-left:auto;
	margin-right:6px;
}
.dmTimestamp[minified] {
	width:33px;
	margin: auto 6px auto 0;
	justify-content: right;
}
.dmTimestampMinified[minifiedself] {
	width:33px;
	margin: auto 0 auto 6px;
}
.dmText {
	margin-top:3px;
	font-size:13px;
}
.dmText[self] {
	text-align:right;
}
.dmText[minified] {
	margin-top:0;
}
.dmText[minified][self] {
	margin-left:auto;
}
.messageReplyHolder {
	position: relative;
	width:100%;
  height: 16px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  font-size: 13px;
  color: #bbb;
  cursor: pointer;
}
.messageReplyHolder .chatReplyUsername {
	margin:0px 0px 0px 4px;
}
.messageReplyHolder[self] {
	text-align:right;
}
.messageReplyHolder[self] .chatReplyUsername {
	margin:0px 4px 0px 0px;
}
.messageReplyLine {
  display: inline-block;
  width: 20px;
  height: 10px;
  margin-left: 16px;
  margin-top: 6px;
  border-style: solid;
  border-width: 0px;
  border-left-width: 3px;
  border-top-width: 3px;
  border-top-left-radius: 8px;
  border-color: #666666;
  box-sizing: border-box;
}
.messageReplyLine[self] {
	margin-right: 16px;
	margin-left: 0;
	border-right-width:3px;
	border-left-width:0;
	border-top-left-radius: 0;
	border-top-right-radius: 8px;
}
.messageReplyContent {
	display:flex;
}
.acceptMessageHolder {
	display:flex;
	padding:6px;
	width:calc(100% - 12px);
	border-radius:10px;
	background:var(--contentColor2);
}
.acceptMessageText {
	margin:auto 0;
}
.acceptMessageButtons {
	margin-left:auto;
}
.acceptMessageButtons button {
	padding:3px;
	border-radius:7px;
	font-size:14px;
}
.denyMessageButton {
	background:grey;
}
.acceptMessageButton {
	background:#2AF5B5;
}

.sendDMInput {
	width: calc(100% - 89px);
	max-height: 86px;
	overflow-y: auto;
	font-size: 16px;
	border-radius: 8px;
	background: var(--contentColor2);
	margin: 4px 6px 4px 0;
	padding: 6px;
}
.sendDMInput:empty:before {
	content: attr(placeholder);
	cursor: text;
	color: #999;
}
.sendDMButton {
	width: 30px;
	height: 31px;
	padding: 6px;
	margin:auto 0 auto 0;
	font-size: 14px;
	border-radius: 8px;
}
.addDMImage {
	width: 30px;
	height: 31px;
	margin: auto 6px auto 0;
	background: var(--contentColor2);
	border-radius: 8px;
	padding:6px;
}
.searchUserInput {
	border: none;
  max-height: 86px;
  overflow-y: auto;
  font-size: 16px;
  border-radius: 8px;
  background: var(--contentColor2);
  margin-bottom: 6px;
  padding: 6px;
  font-family: inherit;
  display: block;
  width: calc(100% - 12px);
  color: inherit;
}

.newMessageUser {
	display:flex;
	padding:4px;
	border-radius:10px;
	cursor:pointer;
	transition: background 0.4s, transform 0.1s;
}
.newMessageUser:hover {
	background-color:var(--contentColor3);
}
.newMessageUser:active {
	transform:scale(0.95);
}
.newMessagePfp {
	width: 35px;
	height: 35px;
	margin-right: 4px;
	border-radius: 6px;
  background-size: cover;
  background-position: center;
  overflow-clip-margin: content-box;
  overflow: clip;
  transition: 0.2s;
}
.newMessagePfp:after {
  width: 35px;
  height: 35px;
  border-radius: 6px;
  content: "✔";
  background: var(--themeColor);
  opacity: 0;
  transition: 0.2s;
  display: block;
  text-align: center;
  line-height: 15px;
  padding-top: 10px;
}
.newMessageUser.selected .newMessagePfp {
  background-image: none;
}
.newMessageUser.selected .newMessagePfp:after {
  opacity: 1;
}
.newMessageUserInfo {
	margin:auto 0;
}
.selectUserBox {
	display:initial !important;
	width:30px;
	height:calc(100% - 4px);
	margin:auto 0 auto auto;
	background-color:transparent;
	border-color:var(--contentColor2);
	border-radius:5px;
}
.loading {
  width: 35px;
  height: 35px;
  margin: auto;
  border-radius: 100px;
  border: 4px solid rgba(255, 255, 255, 0.3);
  border-left-color: var(--themeColor);
  animation: loading 1s;
  animation-iteration-count: infinite;
}
@keyframes loading {
  from {
    transform: rotate(0deg);
  } to {
    transform: rotate(360deg);
  }
}

#newConvoMessage {
	width:calc(100% - 12px);
	text-align:center;
	background:var(--contentColor2);
	margin-bottom:20px;
	padding:6px;
	border-radius:12px;
}
.newConvoImage {
	border-radius:100px;
	margin-bottom:2px;
	height:60px;
	width:60px;
	object-fit:cover;
}
.newConvoText {
	color:grey;
	font-size:13px;
}
.newConvoName {
	color:white;
	font-size:20px;
	margin-bottom:5px;
	font-weight:bold;
}

#themeSelector {
  text-align: center;
}
.themeOption {
  border-radius: 18px;
  height: 50px;
  width: 50px;
  display: inline-block;
  margin: 4px;
  border: 2px solid var(--fontColor);
  cursor: pointer;
  margin-bottom: 0;
}
.themeOption:after {
  content: "✓";
  display: block;
  position: absolute;
  background: var(--themeColor);
  width: 20px;
  height: 20px;
  font-size: 17px;
  border-radius: 100px;
  line-height: 20px;
  font-weight: 800;
  transform: translate(44px, -9px) scale(0);
  opacity: 0;
  transition: 0.1s;
  outline: 2px solid var(--contentColor);
}
.themeSelected:after {
  transform: translate(33px, -2px) scale(1);
  transition: 0.2s cubic-bezier(0.18, 0.89, 0.32, 1.28);
  opacity: 1;
}
.themeSelected {
  border-color: var(--themeColor);
}
.premiumPerkAd {
  padding: 8px;
  border-radius: 8px;
  border: 2px solid #831c53;
  background: linear-gradient(45deg, #831c53, black);
  display: flex;
  color: white;
  margin: 4px 0px;
}
.premiumPerkTitle {
  font-weight: bold;
  font-size: 18px;
}
.premiumPerkDesc {
  font-size: 15px;
}
.premiumPerkIcon {
  width: 30px;
  height: 30px;
  display: block;
}
.premiumAdAction {
  padding: 4px;
  background: var(--premiumColor);
  color: white;
  margin-top: 4px;
}

.newMessageImage {
	border-radius:16px;
	height:100px;
	margin-left:3px;
}
.newMessageImageContainer {
	position:relative;
	width:fit-content;
}
#newMessageImages {
	display: flex;
	width: calc(100% - 42px);
	overflow-x: auto;
}
.dmContentImages {
	display: flex;
	margin-top: 6px;
	overflow-x: auto;
	border-radius: 8px;
}
.dmContentImage {
	height:100px;
	object-fit: cover;
	border-radius: 8px;
	margin-right: 6px;
}
.pollStat {
  margin-bottom: 4px;
  color: var(--fontColor);
}
.pollStatBar {
  position: absolute;
  background: var(--themeColor);
  height: 25px;
  border-radius: 4px;
  text-align: right;
  padding-right: 4px;
  font-size: 15px;
  line-height: 25px;
}
.pollStatText {
  position: relative;
  font-weight: bold;
  margin-left: 4px;
  font-size: 20px;
  line-height: 25px;
}

#migrateTag {
	display:flex;
	font-family:var(--mainFont);
	margin-top:7px;
	font-weight:100;
	font-size:14px;
	line-height:1;
}
#migrateTagIcon[mobile] {
	border-radius: 100px;
  margin-right: 3px;
  background: var(--contentColor2);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  padding: 0px 10px;
  font-size: 16px;
}
#migrateTagIcon {
  border-radius: 100px;
  margin-right: 3px;
  background: var(--contentColor2);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  padding: 2px 4px;
  font-size: 14px;
}

#postCounter {
	border-radius: 100px;
  background: var(--themeColor);
  display: inline-flex;
  padding: 0 4px;
	justify-content: center;
  align-items: center;
	overflow-y:hidden;
	color:white;
}
#postCounterNum {
  display: inline-block;
  height: 22px;
  font-size: 22px;
  line-height: 22px;
}
h1, h2, p {
  margin: 0;
}

.previewOptions {
	display:flex;
	position:absolute;
	justify-content:center;
	align-items:center;
	top:5px;
	right:5px;
	border-radius:100px;
	padding:6px;
	width:20px;
	cursor:pointer;
	background:rgba(0,0,0,.5);
}

#newPostPoll {
  position:relative;
	padding:8px;
	padding-bottom:4px;
	height:fit-content;
	width:65%;
	background:var(--contentColor2);
	border-radius:10px;
	margin-top:9px;
}
#newPostPollX {
  display: flex;
  border-radius: 100%;
  color: white;
  background: rgba(0,0,0,.4);
  font-weight: bold;
  cursor: pointer;
  margin-left: 6px;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  padding: 0px 8px;
}
#newPostPollTitle {
	background:var(--contentColor3);
	border-radius:6px;
	margin-top:0;
  width:100%;
}
#newPostPollOptions {
	margin-top:7px;
}
.newPostPollOption {
	width:100%;
	background:var(--contentColor3);
	border-radius:6px;
	margin-top:0;
}
#newPostPollOptionCreate {
	width:100%;
	text-align:center;
	background:var(--contentColor3);
	margin-bottom:4px;
	color:var(--themeColor);
	border-radius:6px;
}

.poll-embed {
	background: var(--contentColor2);
	border-radius: 12px;
	margin-top: 6px;
	width: calc(100% - 8px);
}
.pollInfo {
	display: flex;
	align-items: center;
	padding: 4px 8px;
	border: solid;
	border-width: 0;
	border-bottom-width: 2px;
	border-color: var(--contentColor3);
}
.pollTitle {
	font-weight:bold;
}
.pollVotes {
	margin-left:auto;
	font-size:14px;
	color:grey;
  min-width:fit-content;
}
.pollOptions {
	display: flex;
	flex-direction: column;
	margin-top: 5px;
	gap: 3px;
	padding: 4px;
	padding-top: 0;
}
.pollOption {
	display:flex;
	padding:2px;
	cursor: pointer;
	transition:scale .2s;
}
.pollOption:active {
	scale:0.95;
}
.pollOptionInfo {
	position:relative;
	width:100%;
	display: flex;
	font-size: 17px;
	border-radius: 8px;
}
.pollOptionBackground {
	position:absolute;
	width:100%;
	height:100%;
	background:var(--contentColor3);
	border-radius:8px;
	transition:width 0.4s;
}
.optionBubble {
	display: flex;
	position:relative;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	background: transparent;
	overflow:visible;
	
	margin:auto 4px auto 0;

	border:solid;
	border-width:2px;
	border-radius: 100px;
	border-color:grey;

	transition:background 0.2s;
}
.optionCheck {
	position:absolute;
	width:18px;
	height:18px;
	margin-top:-6px;
	margin-left:4px;
}
.newPostPollOptionDelete {
	position:absolute;
	color:red;
	border-radius:100px;
	padding:0px 6px;
	background:var(--contentColor2);
	right:4px;
	top:6px;
	font-size:13px;
}
.newPostPollOptionHolder {
	position:relative;
	margin-bottom:4px;
	scale: 1.1;
	transition:opacity .3s, scale .3s;
}
.voteLabel {
	margin:auto 8px auto auto;
	z-index:1;
	font-size:14px;
	color:grey;
  min-width:fit-content;
}
.optionName {
	margin:6px 0 6px 8px;
	z-index:1;
}

.enlargedPost {
	width:60vw;
	height:70vh;
	max-width:600px;
	max-height:315px;

	position:relative;
	display:flex;
	flex-direction: column;
	box-sizing: border-box;
	background:var(--contentColor);
	border-radius:15px;
	padding:6px;
	overflow:hidden;
	z-index:1;
	transform:translateX(-160px);

	opacity:0;
	scale:0.9;
	transition:opacity 0.2s, scale 0.2s;
}
.enlargedPostUser {
	display:flex;
	margin-bottom:8px;
}
.enlargedPostProfileImage {
	width: 55px;
	height: 55px;
	object-fit: cover;
	border-radius: 10px;
}
.enlargedPostInfo {
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin-left: 6px;
}
.enlargedPostUsername {
	width: fit-content;
	font-size: 22px;
	line-height: 20px;
	font-weight: 500;
}
.enlargedPostTimestamp {
	margin-top: 1.5px;
	font-size: 15px;
	font-weight: 400;
	color: #999;
}
.enlargedPostContent {
	padding-left: 4px;
	margin-bottom: 8px;
	font-size: 22px;
	overflow-y: auto;
	transition: all .1s ease;
}
.enlargedPostText {
	overflow-wrap: break-word;
	white-space: break-spaces;
}

.enlargedChat {
	position:absolute;
	width:40vw;
	height:70vh;
	max-width:350px;
	max-height:315px;

	margin-left:10px;
	border-radius:15px;
	background:var(--contentColor);

	transition:transform 0.2s;
}
.postChatInfo[enlarged] {
  border-radius: 15px 15px 0 0;
}

#signInHolder {
  display: flex;
  align-items: center;
  width:100%;
}