html
{
	background-color:#1b1c20;
	color:#888b90;
	font-family:"Jost", sans-serif;
	height:100%;
	overflow-x:hidden;
	overflow-y:auto;
}

body
{
	height:100%;
	margin:0px;
	overflow-x:hidden;
	overflow-y:auto;
	touch-action:pan-y;
}

body::before
{
	background-image:url('../images/backgrounds/smoke.webp');
	bottom:0px;
	content:"";
	left:0px;
	opacity:0.035;
	position:fixed;
	right:0px;
	top:0px;
	z-index:-1;
}

h1, h2, h3, h4, h5, h6
{
	color:#ffffff;
	margin:0px;
	padding:0px;
}

h1
{
	font-size:44px;
	font-weight:100;
	line-height:48px;
}

h2
{
	font-size:36px;
	font-weight:100;
	line-height:40px;
}

h3
{
	font-size:26px;
	font-weight:100;
	line-height:28px;
}

p
{
	margin:0px;
	padding:0px;
}

/* AUTHENTICATION */
.authenticated
{
	display:none;
}

.signedIn .authenticated
{
	display:block;
}

.grecaptcha-badge
{
    display:none !important;
}

/* APP LAYOUT */
#divAppBody
{
	bottom:0px;
	left:320px;
	overflow-x:hidden;
	overflow-y:auto;
	padding-top:110px;
	position:absolute;
	right:0px;
	scroll-behavior:smooth;
	top:0px;
	transition:left 0.25s, padding 0.25s;
}

.hideMenu #divAppBody
{
	left:0px;
}

#divAppBody .divScrollSentinel
{
	position:absolute;
	top:0px;
}

#divAppContent
{
	min-height:600px;
	overflow:hidden;
	position:relative;
}

#divAppContent:before
{
	background-color:#1b1c20;
	content:"";
	display:block;
	height:100%;
	left:0px;
	opacity:1;
	position:fixed;
	top:0px;
	width:100%;
	z-index:1;
}

#divAppContent:after
{
	background-image:url('../images/backgrounds/smoke.webp');
	content:"";
	display:block;
	height:100%;
	left:0px;
	opacity:0.035;
	position:fixed;
	top:0px;
	width:100%;
	z-index:1;
}

#divAppContent.hideOverlay:before
{
	animation-duration:0.25s;
	animation-name:hideContentOverlay1;
	height:0%;
	opacity:0;
}

#divAppContent.hideOverlay:after
{
	animation-duration:0.25s;
	animation-name:hideContentOverlay2;
	height:0%;
	opacity:0;
}

.clear
{
    clear:both;
}

/* RAND ICON CLASS */
.randBefore:before
{
	border:2px solid #ffffff;
    border-radius:50%;
    box-shadow:inset 0px 0px 5px #7262f2, inset 0px 0px 5px #7262f2, 0px 0px 5px #7262f2, 0px 0px 5px #7262f2;
    color:#ffffff;
    content:"R";
    display:inline-block;
    font-family:"JostBold", sans-serif;
    font-size:14px;
    height:20px;
    line-height:20px;
    margin-right:10px;
    text-align:center;
    text-shadow:0px 0px 5px #7262f2, 0px 0px 5px #7262f2;
    width:20px;
}

.randBefore.loading:before
{
    content: "⃪";
    animation:rotateBalanceLoader 2.5s linear infinite;
}

/* CUSTOM TEXT COLOUR CLASSES */
.textBlue
{
	color:#cffdff;
	text-shadow:0px 0px 5px #01eff9;
}

.textGreen
{
	color:#ffffff;
	text-shadow:0px 0px 1px #00ff00, 0px 0px 3px #00ff00, 0px 0px 5px #00ff00;
}

.textPurple
{
	color:#fbd3ff;
	text-shadow:0px 0px 5px #e600ff;
}

.textRed
{
    color:#ffeeee;
    text-shadow:0px 0px 5px #ff0000;
}

.textYellow
{
	color:#f5c400;
}

/* GENERIC NO RESULTS PLACEHOLDER */
.no-results
{
    text-align: center;
    font-size: 22px;
    color: grey;
}

/* CUSTOM SCROLLBARS */
*::-webkit-scrollbar
{
	height:5px;
	width:5px;
}

.mobile::-webkit-scrollbar, .mobile *::-webkit-scrollbar
{
	height:0px;
	width:0px;
}

*::-webkit-scrollbar-track
{
	background-color:transparent;
}

body::-webkit-scrollbar-track
{
	background-color:rgba(0, 0, 0, 0.5);
}

*::-webkit-scrollbar-thumb
{
	background-color:#7262f2;
	border-radius:2.5px;
}

/* IPHONE HACKS */
.gameActive.iphone #divAppBody,
.gameActive.iphone #divAppHeader,
.gameActive.iphone #divAppMenu,
.gameActive.iphone #divAppEditProfile,
.gameActive.iphone #divAppUserNotifications,
.gameActive.iphone #divAppBonuses,
.gameActive.iphone #divAppTournamentDetails,
.gameActive.iphone #divAppUserProfile,
.gameActive.iphone #divAppFloatingMenu,
.gameActive.iphone #divAppGameSlideOut,
.gameActive.iphone #divAppLogin,
.gameActive.iphone #divAppWallet,
.gameActive.iphone #divAppBalanceHistory,
.gameActive.iphone #divAppFooter,
.gameActive.iphone #divAppLoader,
.gameActive.iphone #divAppAlert,
.gameActive.iphone #divAppGameSearch,
.gameActive.iphone #divAppSkywarsTournamentDetails,
.gameActive.iphone #divAppLoyaltyRewards,
.gameActive.iphone #divAppGamblePrize,
.gameActive.iphone #divAppPromotionWheel,
.gameActive.iphone #divAppPromotionPopup,
.gameActive.iphone #divAppChallengeDetails,
.gameActive.iphone #divAppLuckyStreakChallenge,
.gameActive.iphone #divAppSportPredictor,
.gameActive.iphone #divAppPushNotificationIntroduction,
.gameActive.iphone #divAppUserAlerts,
.gameActive.iphone #divAppSurvey,
.gameActive.iphone #divAppWelcomePackage
{
    display: none;
}

/* Disable ALL animations/transitions on iOS when game is active to prevent memory crashes */
/* iOS Safari has limited GPU memory - compositing layers from animations can cause crashes */
.gameActive.iphone *
{
    transition: none !important;
    animation: none !important;
}

/* Exception: Allow prize overlay animations on iOS (important user feedback) */
.gameActive.iphone #divAppSkywarsPrizeOverlay,
.gameActive.iphone #divAppSkywarsPrizeOverlay *
{
    transition: revert !important;
    animation: revert !important;
}

/* RECAPCHA STYLING */
#divAlertMessage #recaptcha-v2 > div
{
    margin: 0 auto;
}

/* ANIMATION KEY FRAMES */
@keyframes hideContentOverlay1
{
	0%   {height:100%; opacity:1;}
	1%   {height:100%; opacity:1;}
	99%  {height:100%; opacity:0;}
	100% {height:0%; opacity:0;}
}

@keyframes hideContentOverlay2
{
	0%   {height:100%; opacity:0.035;}
	1%   {height:100%; opacity:0.035;}
	99%  {height:100%; opacity:0;}
	100% {height:0%; opacity:0;}
}

@keyframes rotateBalanceLoader
{
    from {transform:rotateY(0deg);}
    to   {transform:rotateY(360deg);}
}

/* MEDIA QUERIES */
@media (max-width: 1200px)
{
	#divAppBody
	{
		left:0px;
	}
}

@media (max-width: 800px)
{
	h1
	{
		font-size:36px;
		line-height:40px;
	}

	h2
	{
		font-size:26px;
		line-height:28px;
	}

	h3
	{
		font-size:22px;
		line-height:24px;
	}

	#divAppBody
	{
		padding-top:90px;
	}
}

@media (max-width: 600px)
{
    .iphone
	{
        touch-action: pan-x pan-y;
    }

    .iphone *, .iphone .divImageScroller *
	{
        touch-action: pan-y pan-x;
    }

    .iphone svg, .iphone img, .iphone rect
	{
        pointer-events: none;
        touch-action: pan-y pan-x;
    }

    .iphone .divGame .divGameOverlay
	{
        pointer-events: auto;
    }

	h1
	{
		font-size:26px;
		line-height:28px;
	}

	h2
	{
		font-size:22px;
		line-height:24px;
	}

	h3
	{
		font-size:18px;
		line-height:20px;
	}

	#divAppBody
	{
		padding-top:80px;
	}
}

@media (max-width: 420px)
{
	h1
	{
		font-size:22px;
		line-height:24px;
	}

	h2
	{
		font-size:18px;
		line-height:20px;
	}
}

/* FIX FOR IOS SAFARI BOUNCE SCROLL EFFECT */
@media only screen and (max-width: 600px)
{
    html, body, #root
	{
        height:100%;
        width:100%;
    }

    body
	{
        overflow:hidden;
    }
}