body{
	font-family: "STHeiti", "Helvetica", "sans-serif";
	touch-action: none;
	overflow: hidden;
	position: fixed;	
	width: 100%;	
	height: 100%;			
}


table, li{
	font-size:13px;
	text-shadow:none !important;
}
				
div{
	touch-action: pan-y;
	text-shadow:none !important;
}

input:focus,
textarea:focus,
select:focus {
	outline: none; 
}

	
.heartCornerS{
background-repeat: no-repeat;
background-position: center;
background-size: 100% auto;}

.heartS{
	height: 35px;
}

.MemberName
{
	font-size:22px;
	text-shadow: 1px 1px 3px #1a1a1a;
}

.MemberStarSignAndAge
{
	font-size:16px;
	color:#FFF;
	text-shadow: 1px 1px 3px #1a1a1a;
}

.MemberDescription
{
	font-size:19px;
	color:#FFF;
	display = none;
	text-shadow: black 0.1em 0.1em 0.2em;
}

#overlay {
  z-index: 5 !important;
}

.redDot	{
	color: red;
}

.blackBG
{
	display: none;
	position: absolute; 
	width:100%; 
	height:100%;
	background-color: rgba(0,0,0,0.8);
	z-index: 3;
}

.TipsBG
{
	background-color: rgba(0,0,0,0.5) !important;
}

#NotificationpopupDiv
{
	background-color: rgba(0,0,0,1);
}

#LoginDiv, #RegisterDiv, #ForgetPasswordDiv
{
	background-color: rgba(0,0,0,0.9) !important;
}
				
.UpgradeVIPPopup {
	display:none;
	position: absolute;
	bottom: 0;
	left: 0;
	transform: translateY(100%);
	height: 100%;
	width: 100%;
	padding: 0px;
	z-index: 11 !important; 
	background-color: rgba(160,159,160,0.85);
	transition: transform 0.3s ease;
	background-blend-mode: darken; /* Blend mode */
}

.UpgradeVIPPopup.open {
	transform: translateY(0);
}

.SelectPaymentMethodDiv{
	display:none;
	position: absolute;
	bottom: 0;
	left: 0;
	transform: translateY(100%);
	height: 270px;
	width: 100%;
	padding: 0px;
	z-index: 13 !important; 
	background-image: linear-gradient(#fff, #ccc);
	transition: transform 0.3s ease;
	background-blend-mode: darken; /* Blend mode */
	border-top-left-radius: 20px;
	border-top-right-radius: 20px;
}

.SelectPaymentMethodDiv.open {
	transform: translateY(0);
}

.SelectRegisterMethodDiv{
	position: absolute;
	bottom: 0;
	left: 0;
	transform: translateY(100%);
	width: 100%;
	padding: 0px;
	z-index: 12 !important; 
	background-image: linear-gradient(#4b4d4b, #040404);
	transition: transform 0.3s ease;
	background-blend-mode: darken; /* Blend mode */
	border-top-left-radius: 20px;
	border-top-right-radius: 20px;
}

.SelectRegisterMethodDiv.open {
	transform: translateY(0);
}

.whiteBG
{
	display:none;
	position: absolute;
	top: 0;
	height: 100%;
	width: 100%;
	background-color: #fff;
	padding: 0px;
	z-index: 2;
}

.webappspacer
{
	display:none;
	height:40px;
}

.NotificationDot {
  height: 12px;
  width: 12px;
  background-color: #fa1052;
  border-radius: 50%;
  display: none;
  animation: blinker 1.3s step-start infinite;
}

@keyframes blinker {
  50% {
	opacity: 0;
  }
}


.menu {
	position: absolute;
	top: 0;
	right: 0;
	transform: translateX(100%);
	height: 100%;
	width: 250px;
	background-color: #fff;
	padding: 0px;
	z-index: 4;
	transition: transform 0.3s ease;	
	background-size: cover;
	background-position: center;
	border-collapse: collapse; 

}

.menu.open {
	transform: translateX(0);
	box-shadow: 0px 2px 18px 0px rgba(255, 255, 255, 0.5); /* 顯示時添加陰影 */
}

.SlidePage
{
	position: absolute;
	top: 0;
	transform: translateX(100%);
	height: 100%;
	width: 100%;
	background-color: #fff;
	padding: 0px;
	z-index: 5;
	transition: transform 0.3s ease;
}

.NotificationPageDiv.open {
	transform: translateX(0);
}

.ChatPageDiv.open {
	transform: translateX(0);
}

.ChatPageDiv {
	z-index: 8 !important;
}

.EventPageDiv.open {
	transform: translateX(0);
}

.EventPageDiv {
	z-index: 8 !important;
}


#PhotoUploadPopupDiv
{
	background-color: rgba(0,0,0,0.7) !important;
	z-index: 15 !important;
}

.EditProfileDiv.open {
   transform: translateX(0);
}

.GeneralDiv.open {
	transform: translateX(0);
}

#NotificationTipsDiv
{
	display: none;
	position: absolute; 
	width:100%; 
	left:0px;
	right:0px;
	z-index: 6;
	top:80px;
}

.NonSelectedSlider
{
	background-color: rgba(255,255,255,0.5);
}

.SelectedSlider
{
	background-color: #FFF !important;
}

.alertBox
{
	display: none;
	position: absolute; 
	width:100%; 
	height:100%;
	background-color: rgba(0,0,0,0.3);
	z-index: 100; 
}

.VIPFinishPopUp
{
	display: none;
	position: absolute; 
	width:100%; 
	height:100%;
	background-color: rgba(0,0,0,0.3);
	z-index: 100; 
}

#SmallPopup
{
	background-color: rgba(0,0,0,0.5) !important;
	z-index: 11 !important;
}

#MBTIPopup
{
	background-color: rgba(0,0,0,0.5) !important;
	z-index: 11 !important;
}

.Stdbutton {
	background-color: #dc19a9;
	 border: none;
	 color: white;
	 padding: 10px 10px;
	 text-align: center;
	 text-decoration: none;
	 display: inline-block;
	 font-size: 16px;
	 cursor: pointer;
	 border-radius: 10px;
}

.StdTopRightbutton {
	font-size:16px;
	color:#dc19a9;
}

.Greybutton {
	background-color: transparent; !important;
	color: #a4a2a4 !important; /* Grey */
	border: 1px solid #a4a2a4 !important;
}

@keyframes placeHolderShimmer{
	0%{
		background-position: -468px 0
	}
	100%{
		background-position: 468px 0
	}
}

#fullscreenSlider {
	position: absolute;
	right: 0;
	top: 0;
	height: 100%;
	overflow-x: hidden; /* Needed for initial hidden state */
	z-index: 5; 
}
#fullscreenSlider > div {
	height: 100%;
	border-left: 2px solid white;
	float: left;
}
#fullscreenSlider-content {
	background-color: #fff;
	height: 100%;
}
#fullscreenSlider-content > p {
	padding: 10px;
}


@-webkit-keyframes fadeinout {
  0%,100% { opacity: 0; }
  50% { opacity: 1; }
}

@keyframes fadeinout {
  0%,100% { opacity: 0; }
  50% { opacity: 1; }
}

.unselectable {
	-webkit-user-select: none;
	-webkit-touch-callout: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	color: #cc0000;
  }

.circlePhoto
{
	cursor: pointer; 
	border-radius: 50%;
	width:70px;
	height:70px;
	overflow:hidden;
	background-color:transparent;
	background-image:none;
}

.sidebar {
	position: absolute;
	top: 0;
	right: -100%; /* 隱藏在右側 */
	width: 250px;
	height: 100%;
	width: 100%;
	background-color: #fff;
	transition: right 0.3s ease;
	padding: 0px;
	z-index: 2 !important;
	
}

.sidebar.open {
	right: 0; /* 打開側邊欄 */
}


.loader {
	animation: spinloader 1.5s infinite;
}

@keyframes spinloader {
	0%, 100% {
		transform: scale(1);
		opacity: 1;
	}
	50% {
		transform: scale(1.1);
		opacity: 0.9;
	}
}

.search-circle {
	width: 60px;
	height: 60px;
	border: 6px solid #6a3292;
	border-radius: 50%;
	animation: searchpulse 1.5s ease-in-out infinite;
}

@keyframes searchpulse {
	0%, 100% { transform: scale(1);  opacity: 1;}
	50% { transform: scale(1.2); opacity: 0.5; }
}

#purchaseLoader {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 150px; /* Set a width */
	height: 150px; /* Set a height */
	background-color: rgba(0,0,0,0.8);
	border-radius: 25px;
	text-align: center; /* Center text */
	z-index:13;
	display:none;
}

.LoadingVIPPageloader {
  border: 10px solid #f3f3f3; 
  border-top: 10px solid #969498; 
  border-radius: 50%;
  width: 30px;
  height: 30px;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.ScreenDisabled {
	pointer-events: none; /* Disable all user interactions */
	opacity: 0.5; /* Optional: visually indicate that interaction is disabled */
}

.BGImageSrc
{
	width: 100%;
	height: 100%;
	object-fit: cover; /* Ensures the image covers the entire div */
	position: absolute; /* Positioning to fill the container */
	top: 0;
	left: 0;
	
}


#BGImageSrc {
-webkit-mask-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0) 1%, rgba(0, 0, 0, 1) 20%);

}

.square {
	width: 220px;
	height: 60px;
	background-color: #ef514e;
	position: absolute;
	
	border-radius: 20px;
	color: #fff;
}

#AskToOpenInExternalBrowserInner
{
	width: 350px;
	height: 140px;
	background-color: #fff;
	position: absolute;
	top:11px;right:8px;
	border-radius: 5px;
	color: black;
}

#AskToOpenInExternalBrowserInner .arrowtop
{
	right:0px !important;
	right:0px !important;
	border-bottom: 10px solid #fff !important;
}

.Tips-Hearts
{
	position: absolute;
	bottom:3px;
	left:3px;
}

.arrowright {
	width: 0;
	height: 0;
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
	border-left: 10px solid #ef514e; /* Change to left to point right */
	position: absolute;
	top: 50%; /* Center vertically */
	left: 100%; /* Position to the right */
	transform: translateY(-50%); /* Adjust to center vertically */
}

.arrowtop {
	width: 0;
	height: 0;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	border-bottom: 10px solid #ef514e; /* Change to bottom to point up */
	position: absolute;
	right: 44px; /* Center horizontally */
	bottom: 100%; /* Position above the square */
	transform: translateX(-50%); /* Adjust to center horizontally */
}

.arrow {
	width: 0;
	height: 0;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	border-top: 10px solid #ef514e;
	position: absolute;
	bottom: -9px;
	left: 50%;
	transform: translateX(-50%);
}

.date-input {
	width: 100% !important;
	box-sizing: border-box !important;
	-webkit-appearance: none !important;
	appearance: none !important;
	text-align: left !important;
}

input::-webkit-date-and-time-value {
  text-align: left !important;
}	

.online-dot {
	height: 10px;
	width: 10px;
	background-color: #10e03c;
	border-radius: 50%;
	display: inline-block;
}

#AddLINEFriendbutton {
	background-color: #06C755 !important;
	color: #fff !important;
	border-radius: 10px !important;
	width: 100% !important;
}

.menu::-webkit-scrollbar,
#RegisterDiv::-webkit-scrollbar {
	width: 0; /* Remove scrollbar width */
	background: transparent; /* Optional: make background transparent */
}

/* Hide scrollbar for Firefox */
.menu, #RegisterDiv {
	scrollbar-width: none; /* Firefox */
}


.DownloadPopUp {
	width:100%;
	position: absolute;
	bottom: 0;
	left: 0;
	transform: translateY(100%);
	z-index: 3;
	transition: transform 0.3s ease;
	display: none;
}

.iOSChromeDownloadPopUp
{
	width: calc(100% - 5px);
	position: absolute;
	top: 10px;
	left: 0;
	//transform: translateY(100%);
	z-index: 3;
	display: none;
}

#DownloadPopUpTbl{
	width:350px;
	background-color: #FFF; /* Background color for visibility */
	padding: 10px;
	border-radius: 10px;
	box-shadow: 0 2px 10px rgba(58, 145, 253, 0.2);
}

.DownloadPopUp.open {
	transform: translateY(0);
}


.down-arrow {
	width: 0;
	height: 0;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	border-top: 10px solid #fff;
	position: absolute;
	bottom: -10px;
	left: 50%;
	transform: translateX(-50%);
}

.up-arrow {
	width: 0;
	height: 0;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	border-bottom: 10px solid #fff; /* Change to border-bottom for up arrow */
	position: absolute;
	top: -10px; /* Adjust position to be above */
	right: 8px;
	transform: translateX(-50%);
}

.app-icon {
	width: 60px; /* Set the desired width */
	height: 60px; /* Set the desired height */
	border-radius: 15%; /* Rounded corners for the icon */
	overflow: hidden; /* Ensure the image fits within the rounded corners */
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Shadow effect */
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: white; /* Background color */
}

.app-icon img {
	width: 100%; /* Make the image fill the container */
	height: auto; /* Maintain aspect ratio */
}

.BGVideo {
	width: 100%;
	height: 100%;
	object-fit: cover; /* Ensures the video covers the entire div */
	position: absolute; /* Positioning to fill the container */
	top: 0;
	left: 0px;
	z-index: 0; /* Send it behind other content */
	display: none;
}