/* HEADER MENU */
#divAppHeader #btnHeaderMenu
{
	background-image:url('../images/icons/menu.svg');
	background-position:center;
	background-position:center;
	background-repeat:no-repeat;
	background-size:24px;
	cursor:pointer;
	display:none;
    float:left;
	height:40px;
	margin:5px 0px 0px 50px;
    filter: drop-shadow(0px 0px 5px #7262f2) drop-shadow(0px 0px 10px #7262f2);
    opacity: 1;
	transition:filter 0.25s, opacity 0.25s;
	width:40px;
}

#divAppHeader #btnHeaderMenu:hover
{
	filter:drop-shadow(0px 0px 5px #e600ff);
	opacity:1;
}

.hideMenu #divAppHeader #btnHeaderMenu
{
	display:inline-block;
}

/* MAIN MENU */
#divAppMenu
{
	bottom:0px;
	left:0px;
	position:fixed;
	top:0px;
	transition:left 0.25s;
	user-select:none;
	-webkit-tap-highlight-color:rgba(0, 0, 0, 0);
	width:320px;
	z-index:3;
}

.hideMenu #divAppMenu
{
	left:-340px;
}

#divAppMenu #divMenuOverlay
{
	background-color:rgba(0, 0, 0, 0.5);
	display:none;
	height:100%;
	left:0px;
	opacity:0;
	position:fixed;
	top:0px;
	transition:opacity 0.25s;
	width:100%;
	z-index:-1;
}

#divAppMenu .divMenuContainer
{
	background-color:#292a2f;
	box-shadow:-10px 0px 30px rgba(0, 0, 0, 0.75);
	height:100%;
	left:0px;
	position:absolute;
	top:0px;
	width:100%;
	z-index:-1;
}

#divAppMenu .divMenuHeader
{
	height:140px;
	position:relative;
}

#divAppMenu #imgMenuLogo
{
	cursor:pointer;
	left:30px;
	position:absolute;
	top:32px;
	width:200px;
}

#divAppMenu #btnCloseMenu
{
	cursor:pointer;
	height:40px;
	position:absolute;
	right:10px;
	top:10px;
	width:40px;
}

#divAppMenu #btnCloseMenu:before
{
	background-color:#ffffff;
	box-shadow:0px 0px 5px #7262f2;
	content:"";
	height:2px;
	left:8px;
	position:absolute;
	top:20px;
	transform:rotate(45deg);
	width:24px;
}

#divAppMenu #btnCloseMenu:after
{
	background-color:#ffffff;
	box-shadow:0px 0px 5px #7262f2;
	content:"";
	height:2px;
	left:8px;
	position:absolute;
	top:20px;
	transform:rotate(-45deg);
	width:24px;
}

#divAppMenu #divMenuItemsContainer
{
	height:calc(100% - 140px);
	overflow-y:auto;
	-webkit-overflow-scrolling:touch;
}

#divAppMenu #divMenuItemsContainer::-webkit-scrollbar
{
	background:transparent;
	height:0px;
	width:0px;
}

#divAppMenu #btnLeaderboard
{
	background-image:url('../images/menu/leaderboardChests.webp');
	background-position:center;
	background-repeat:no-repeat;
	background-size:cover;
	border-radius:10px;
	box-shadow:inset 0px 20px 10px -20px rgba(255, 255, 255, 0.75), inset 0px -20px 10px -20px rgba(0, 0, 0, 0.75), 0px 0px 10px rgba(0, 0, 0, 0.5);
	cursor:pointer;
	float:left;
	height:70px;
	margin:10px 10px 20px 30px;
	overflow:hidden;
	padding-top:85px;
	position:relative;
	transition:width 0.25s;
	width:calc(50% - 40px);
}

#divAppMenu #divChestsAvailable
{
    background-color:#ee0000;
    border-radius:50%;
    color:#ffffff;
    display:none;
    font-family:"Jost", sans-serif;
	font-size:9px;
    height:14px;
    line-height:14px;
    position:absolute;
	right:5px;
    top:5px;
    text-align:center;
    width:14px;
}

#divAppMenu #divChestsAvailable.show
{
    display:block;
}

#divAppMenu #divNextLeaderboardTimer
{
	height:50px;
	left:50%;
	position:absolute;
	top:50%;
	transform:translate(-50%, -50%);
	width:135px;
}

#divAppMenu #divNextLeaderboardTimer .countdownTimer
{
	height:50px;
}

#divAppMenu #divNextLeaderboardTimer .countdownTimer .divTimerLabel
{
	color:#f1cd98;
	line-height:18px;
	padding-top:0px;
	text-shadow:1px 2px 0px #000000;
}

#divAppMenu #divNextLeaderboardTimer .countdownTimer .divTimerLabel:before, #divAppMenu #divNextLeaderboardTimer .countdownTimer .divTimerLabel:after
{
	display:none;
}

#divAppMenu #divNextLeaderboardTimer .countdownTimer .divDaysValue, #divAppMenu #divNextLeaderboardTimer .countdownTimer .divHoursValue, #divAppMenu #divNextLeaderboardTimer .countdownTimer .divMinutesValue, #divAppMenu #divNextLeaderboardTimer .countdownTimer .divSecondsValue
{
	background-color:rgba(0, 0, 0, 0.75);
	border-color:#8d4e00;
	border-radius:50%;
	box-shadow:1px 1px 0px rgba(0, 0, 0, 0.75);
	color:#e76d00;
	font-size:14px;
	height:20px;
	line-height:20px;
	text-shadow:1px 2px 0px #000000;
	top:20px;
	width:20px;
}

#divAppMenu #divNextLeaderboardTimer .countdownTimer .divDaysLabel, #divAppMenu #divNextLeaderboardTimer .countdownTimer .divHoursLabel, #divAppMenu #divNextLeaderboardTimer .countdownTimer .divMinutesLabel, #divAppMenu #divNextLeaderboardTimer .countdownTimer .divSecondsLabel
{
	display:none;
}

#divAppMenu #btnSkywars
{
	background-color:#53b4cc;
	background-image:url('../images/menu/skywarsBackground.webp'), linear-gradient(180deg, #1974ac 15%, #7dc3cd 35%, #7dc3cd 45%, #53b4cc 60%, #53b4cc 100%);
	background-position:center bottom;
	background-repeat:no-repeat;
	background-size:100%;
	border-radius:10px;
	box-shadow:inset 0px 20px 10px -20px rgba(255, 255, 255, 0.75), inset 0px -20px 10px -20px rgba(0, 0, 0, 0.75), 0px 0px 10px rgba(0, 0, 0, 0.5);
	color:#ffffff;
	cursor:pointer;
	display:none;
	float:left;
	height:40px;
	margin:10px 10px 20px 30px;
	overflow:hidden;
	padding-top:115px;
	position:relative;
	text-align:center;
	text-shadow:0px 0px 5px #000000;
	transition:width 0.25s;
	width:calc(50% - 40px);
}

#divAppMenu #btnSkywars span
{
	animation:skywarsMenuAnimation 5s infinite linear 2s;
	background-image:url('../images/menu/skywarsPlane.webp');
	background-position:center top 42%;
	background-repeat:no-repeat;
	background-size:88%;
	display:block;
	filter:drop-shadow(0px 0px 5px rgba(255, 255, 255, 0.75));
	height:100%;
	left:0px;
	position:absolute;
	top:0px;
	width:100%;
}

#divAppMenu #btnSkywars:before
{
	background-image:url('../images/menu/skywarsClouds.webp');
	background-position:center top 15%;
	background-repeat:no-repeat;
	background-size:100%;
	content:"";
	display:block;
	height:100%;
	left:0px;
	position:absolute;
	top:0px;
	width:100%;
}

#divAppMenu #btnSkywars:after
{
	background-image:url('../images/menu/skywarsLogo.webp');
	background-position:center top 65%;
	background-repeat:no-repeat;
	background-size:80%;
	content:"";
	display:block;
	filter:drop-shadow(0px 0px 3px rgba(0, 0, 0, 0.75));
	height:100%;
	left:0px;
	position:absolute;
	top:0px;
	width:100%;
}

#divAppMenu #btnLuckyStreakChallenge
{
	border-radius:10px;
	box-shadow:0px 0px 10px rgba(0, 0, 0, 0.5);
	color:#ffffff;
	cursor:pointer;
	float:left;
	height:40px;
	margin:10px 30px 20px 10px;
	overflow:hidden;
	padding-top:115px;
	position:relative;
	text-align:center;
	text-shadow:0px 0px 5px #000000;
	transition:width 0.25s;
	width:calc(50% - 40px);
}

#divAppMenu #btnLuckyStreakChallenge:before
{
	background-image:url('../images/promotions/luckyStreakChallenge/luckyStreakBackground.webp');
	background-position:center;
	background-size:cover;
	box-shadow:inset 0px 20px 10px -20px #ffffff, inset 0px -20px 10px -20px #000000;
	content:"";
	display:block;
	height:100%;
	left:0px;
	opacity:0.85;
	position:absolute;
	top:0px;
	width:100%;
	z-index:-1;
}

#divAppMenu #btnLuckyStreakChallenge:after
{
	background-image:url('../images/promotions/luckyStreakChallenge/luckyStreakHeading.webp');
	background-repeat:no-repeat;
	background-size:cover;
	content:"";
	display:block;
	filter:drop-shadow(0px 0px 2px #000000);
	height:32px;
	left:5px;
	position:absolute;
	top:8px;
	width:calc(100% - 10px);
}

#divAppMenu #divVipClaimedPromotionsButton
{
    background-image:url('../images/menu/vipClaimedPromotions.webp');
	background-position:center;
    background-repeat:no-repeat;
    background-size:cover;
    border-radius:10px;
    box-shadow:inset 0px 20px 10px -20px rgba(255, 255, 255, 0.75), inset 0px -20px 10px -20px rgba(0, 0, 0, 0.75), 0px 0px 10px rgba(0, 0, 0, 0.5);
    cursor:pointer;
    clear:both;
    display:none;
    height:60px;
    margin:20px 30px 10px;
    position:relative;
    width:calc(100% - 60px);
}

#divAppMenu #divVipClaimedPromotionsButton.show
{
	display:block;
}

#divAppMenu .btnPromotionButton
{
	animation:menuNeonTextPink 5s linear 2.5s infinite;
    background-position:center top;
    background-repeat:no-repeat;
    background-size:100%;
    border-radius:10px;
    box-shadow:inset 0px 20px 10px -20px rgba(255, 255, 255, 0.75), inset 0px -20px 10px -20px rgba(0, 0, 0, 0.75), 0px 0px 10px rgba(0, 0, 0, 0.5);
    color:#ffffff;
    cursor:pointer;
    clear:both;
    font-family:"Bayshore", sans-serif;
    font-size:30px;
    height:60px;
    line-height:22px;
    margin:20px 30px 10px;
    position:relative;
    text-align:center;
    width:calc(100% - 60px);
}

#divAppMenu .btnPromotionButton span
{
	display:inline-block;
	margin-top:8px;
}

#divAppMenu #divMenuItems
{
	clear:both;
	padding-bottom:80px;
}

#divAppMenu #divMenuItems a
{
	text-decoration:none;
}

#divAppMenu .divMenuItemContianer
{
	position:relative;
}

#divAppMenu .divMenuItem
{
	margin-top:15px;
	position:relative;
}

#divAppMenu .divSubmenuItems
{
	display:none;
	position:relative;
}

#divAppMenu .expanded .divSubmenuItems
{
	display:block;
}

#divAppMenu .btnExpandCollapse
{
	cursor:pointer;
	height:40px;
	position:absolute;
	right:20px;
	top:10px;
	width:40px;
}

#divAppMenu .btnExpandCollapse:before
{
	background-color:#ffffff;
	content:"";
	height:2px;
	position:absolute;
	right:12px;
	top:19px;
	transition:background-color 0.25s, box-shadow 0.25s;
	width:16px;
}

#divAppMenu .btnExpandCollapse:after
{
	background-color:#ffffff;
	content:"";
	height:2px;
	position:absolute;
	right:12px;
	top:19px;
	transform:rotate(90deg);
    transition:background-color 0.25s, box-shadow 0.25s, transform 0.25s;
	width:16px;
}

#divAppMenu .expanded .btnExpandCollapse:after
{
	transform:rotate(0deg);
}

#divAppMenu .btnExpandCollapse:hover:before, #divAppMenu .btnExpandCollapse:focus:before, #divAppMenu .btnExpandCollapse:hover:after, #divAppMenu .btnExpandCollapse:focus:after
{
	background-color:#cffdff;
    box-shadow:0px 0px 5px #01eff9;
}

#divAppMenu .divSubmenuItem
{
	position:relative;
}

#divAppMenu .divMenuItem.clickable, #divAppMenu .divSubmenuItem.clickable
{
	cursor:pointer;
}

#divAppMenu .divMenuItem.clickable:before, #divAppMenu .divSubmenuItem.clickable:before
{
	background:linear-gradient(90deg, #6b42de, #966dff);
	bottom:0px;
	content:"";
	display:block;
	left:0px;
	opacity:0;
	position:absolute;
	right:0px;
	top:0px;
	transition:opacity 0.25s;
	z-index:-1;
}

#divAppMenu .divMenuItem.clickable:hover:before, #divAppMenu .divMenuItem.clickable:focus:before, #divAppMenu .divMenuItem.clickable.selected:before, #divAppMenu .divSubmenuItem.clickable:hover:before, #divAppMenu .divSubmenuItem.clickable:focus:before, #divAppMenu .divSubmenuItem.clickable.selected:before
{
	opacity:1;
}

.signedIn #divAppMenu .divSubmenuItem.menuItemLobbySignedOut
{
	display:none;
}

#divAppMenu .divMenuItem.menuItemWelcomePackage, #divAppMenu .divSubmenuItem.menuItemWelcomePackage
{
	display:none;
}

.showWelcomePackage #divAppMenu .divMenuItem.menuItemWelcomePackage, .showWelcomePackage #divAppMenu .divSubmenuItem.menuItemWelcomePackage
{
	display:block;
}

#divAppMenu .divSubmenuItem.menuItemFullOpacity .divSubmenuItemIcon
{
	opacity:1;
}

#divAppMenu .divMenuItemLabel
{
	color:#ffffff;
	font-family:"JostBold", sans-serif;
	font-size:22px;
	line-height:30px;
	overflow:hidden;
	padding:15px 35px;
	position:relative;
	text-overflow:ellipsis;
	white-space:nowrap;
}

#divAppMenu .divSubmenuItemLabel
{
	color:#888b90;
	font-size:20px;
	line-height:30px;
	overflow:hidden;
	padding:15px 35px 15px 80px;
	position:relative;
	text-overflow:ellipsis;
	transition:color 0.25s;
	white-space:nowrap;
}

#divAppMenu .divSubmenuItem.clickable:hover .divSubmenuItemLabel, #divAppMenu .divSubmenuItem.clickable:focus .divSubmenuItemLabel, #divAppMenu .divSubmenuItem.clickable.selected .divSubmenuItemLabel
{
	color:#ffffff;
}

#divAppMenu .divSubmenuItemIcon
{
	background-position:center;
	background-repeat:no-repeat;
	background-size:100%;
	left:35px;
	height:20px;
	opacity:0.4;
	position:absolute;
	top:50%;
	transform:translateY(-50%);
	transition:opacity 0.25s;
	width:20px;
}

#divAppMenu .divSubmenuItem.clickable:hover .divSubmenuItemIcon, #divAppMenu .divSubmenuItem.clickable:focus .divSubmenuItemIcon, #divAppMenu .divSubmenuItem.clickable.selected .divSubmenuItemIcon
{
	opacity:1;
}

#divAppMenu .divMenuItemHr
{
	background-color:#6a6a6a;
	height:2px;
	margin:15px 35px;
}

#divAppMenu .spnSubmenuItemBonusCount
{
    background-color:#ee0000;
    border-radius:50%;
    color:#ffffff;
	display:none;
    font-size:9px;
    height:14px;
    line-height:14px;
	margin:-5px 0px 0px 5px;
    padding: 2px 7px;
    position:absolute;
    text-align:center;
}

#divAppMenu .spnSubmenuItemBonusCount.show
{
	display:inline;
}

#divAppMenu .spnTournamentsAvailable
{
    background-color:#ee0000;
    border-radius:50%;
    color:#ffffff;
    font-size:9px;
    height:14px;
    line-height:14px;
	margin:-5px 0px 0px 5px;
    padding: 2px 7px;
    position:absolute;
    text-align:center;
}

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

@keyframes skywarsMenuAnimation
{
	0%	 {transform:translate(0%, 0px) rotate(0deg);}
	10%  {transform:translate(calc(0% - 1px), -1px) rotate(-1deg);}
	20%  {transform:translate(0%, -1px) rotate(1deg);}
	30%  {transform:translate(calc(0% + 1px), 0px) rotate(0deg);}
	40%  {transform:translate(0%, 1px) rotate(1deg);}
	50%  {transform:translate(calc(0% - 1px), 1px) rotate(-1deg);}
	60%  {transform:translate(0%, 0px) rotate(0deg);}
	70%  {transform:translate(calc(0% + 1px), 0px) rotate(-1deg);}
	80%  {transform:translate(0%, -1px) rotate(1deg);}
	90%  {transform:translate(calc(0% - 1px), -1px) rotate(0deg);}
	100% {transform:translate(0%, 0px) rotate(-1deg);}
}

@keyframes menuNeonText
{
	0%   {text-shadow:0px 0px 1px #000000;}
	1%   {text-shadow:0px 0px 1px #000000, 0px 0px 5px #01eff9, 0px 0px 5px #01eff9, 0px 0px 10px #01eff9;}
    5%   {text-shadow:0px 0px 1px #000000, 0px 0px 5px #01eff9, 0px 0px 5px #01eff9, 0px 0px 10px #01eff9;}
    6%   {text-shadow:0px 0px 1px #000000;}
    9%   {text-shadow:0px 0px 1px #000000;}
    10%  {text-shadow:0px 0px 1px #000000, 0px 0px 5px #01eff9, 0px 0px 5px #01eff9, 0px 0px 10px #01eff9;}
    16%  {text-shadow:0px 0px 1px #000000, 0px 0px 5px #01eff9, 0px 0px 5px #01eff9, 0px 0px 10px #01eff9;}
    17%  {text-shadow:0px 0px 1px #000000;}
    20%  {text-shadow:0px 0px 1px #000000;}
    21%  {text-shadow:0px 0px 1px #000000, 0px 0px 5px #01eff9, 0px 0px 5px #01eff9, 0px 0px 10px #01eff9;}
    59%  {text-shadow:0px 0px 1px #000000, 0px 0px 5px #01eff9, 0px 0px 5px #01eff9, 0px 0px 10px #01eff9;}
    60%  {text-shadow:0px 0px 1px #000000;}
    64%  {text-shadow:0px 0px 1px #000000;}
	65%  {text-shadow:0px 0px 1px #000000, 0px 0px 5px #01eff9, 0px 0px 5px #01eff9, 0px 0px 10px #01eff9;}
    100% {text-shadow:0px 0px 1px #000000, 0px 0px 5px #01eff9, 0px 0px 5px #01eff9, 0px 0px 10px #01eff9;}
}

@keyframes menuNeonTextPink
{
	0%   {text-shadow:0px 0px 1px #000000;}
	1%   {text-shadow:0px 0px 1px #000000, 0px 0px 5px #e600ff, 0px 0px 5px #e600ff, 0px 0px 10px #e600ff;}
    5%   {text-shadow:0px 0px 1px #000000, 0px 0px 5px #e600ff, 0px 0px 5px #e600ff, 0px 0px 10px #e600ff;}
    6%   {text-shadow:0px 0px 1px #000000;}
    9%   {text-shadow:0px 0px 1px #000000;}
    10%  {text-shadow:0px 0px 1px #000000, 0px 0px 5px #e600ff, 0px 0px 5px #e600ff, 0px 0px 10px #e600ff;}
    16%  {text-shadow:0px 0px 1px #000000, 0px 0px 5px #e600ff, 0px 0px 5px #e600ff, 0px 0px 10px #e600ff;}
    17%  {text-shadow:0px 0px 1px #000000;}
    20%  {text-shadow:0px 0px 1px #000000;}
    21%  {text-shadow:0px 0px 1px #000000, 0px 0px 5px #e600ff, 0px 0px 5px #e600ff, 0px 0px 10px #e600ff;}
    59%  {text-shadow:0px 0px 1px #000000, 0px 0px 5px #e600ff, 0px 0px 5px #e600ff, 0px 0px 10px #e600ff;}
    60%  {text-shadow:0px 0px 1px #000000;}
    64%  {text-shadow:0px 0px 1px #000000;}
	65%  {text-shadow:0px 0px 1px #000000, 0px 0px 5px #e600ff, 0px 0px 5px #e600ff, 0px 0px 10px #e600ff;}
    100% {text-shadow:0px 0px 1px #000000, 0px 0px 5px #e600ff, 0px 0px 5px #e600ff, 0px 0px 10px #e600ff;}
}

/* MEDIA QUERIES */
@media (max-width: 1400px)
{
	#divAppMenu .divMenuContainer
	{
		width:320px;
	}
}

@media (max-width: 1200px)
{
	/* HEADER MENU */
	#divAppHeader #btnHeaderMenu
	{
		display:inline-block;
		margin:5px 0px 0px 15px;
	}

	/* MAIN MENU */
	#divAppMenu
	{
		left:-340px;
	}

	.hideMenu #divAppMenu
	{
		left:0px;
	}

	.hideMenu #divAppMenu #divMenuOverlay
	{
		animation:showMenu 0.25s;
		display:block;
		opacity:1;
	}

	#divAppMenu .menuItemMyBets
	{
		display:none;
	}
}

@media (max-width: 600px)
{
	/* HEADER MENU */
	#divAppHeader #btnHeaderMenu
	{
		margin:5px 0px 0px 10px;
	}
}

@media (max-width: 540px)
{
	/* MAIN MENU */
	#divAppMenu .divMenuContainer
	{
		width:300px;
	}

	#divAppMenu .divMenuHeader
	{
		height:80px;
	}

	#divAppMenu #imgMenuLogo
	{
		left:30px;
		top:15px;
		width:134px;
	}

	#divAppMenu #btnCloseMenu
	{
		right:20px;
		top:20px;
	}

	#divAppMenu #btnLeaderboard
	{
		font-size:16px;
		height:55px;
		padding-top:90px;
	}

	#divAppMenu #btnSkywars, #divAppMenu #btnLuckyStreakChallenge
	{
		height:40px;
		padding-top:105px;
	}

	#divAppMenu #btnLuckyStreakChallenge:after
	{
		height:29px;
	}

	#divAppMenu .divMenuItem
	{
		margin-top:0px;
	}

	#divAppMenu .divMenuItemLabel
	{
		font-size:18px;
		padding:10px 35px;
	}

	#divAppMenu .divSubmenuItemLabel
	{
		font-size:16px;
		line-height:20px;
		padding:10px 35px 10px 70px;
	}

	#divAppMenu .btnExpandCollapse
	{
		top:5px;
	}
}