#divAppSkywarsBuyInOverlay
{
	background-color:rgba(0, 0, 0, 0.75);
    display:none;
	height:100%;
	left:0px;
	opacity:0;
	position:fixed;
	top:0px;
	width:100%;
	z-index:20;
}

#divAppSkywarsBuyInOverlay.show
{
    animation:showSkywarsBuyIn 0.25s;
    display:block;
    opacity:1;
}

#divAppSkywarsBuyInOverlay #divSkywarsBuyInPopup
{
    background-color:#1b1c20;
	background-image:url('../images/skywars/buyInBackground.webp');
	background-position:center;
	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), inset 0px 0px 200px 0px rgba(0, 0, 0, 0.75), 0px 0px 50px #000000;
    height:520px;
    left:50%;
    opacity:0;
    overflow:hidden;
    padding:30px;
    position:absolute;
    top:50%;
    transform:translate(-50%, -50%);
    width:360px;
}

#divAppSkywarsBuyInOverlay.show #divSkywarsBuyInPopup
{
    animation:showSkywarsBuyIn 0.25s;
    opacity:1;
}

#divAppSkywarsBuyInOverlay #divBuyInHeading
{
	background-image:url('../images/skywars/skywarsLogoNeon.webp');
	background-position:center top;
	background-repeat:no-repeat;
	background-size:100%;
	color:#ffffff;
	filter:drop-shadow(3px 3px 5px rgba(0, 0, 0, 0.75));
	font-family:"Bebas Neue", sans-serif;
	font-size:20px;
	height:156px;
	left:50%;
	line-height:360px;
	position:relative;
	text-align:center;
	text-shadow:0px 0px 5px #000000;
	transform:translateX(-50%);
	width:330px;
}

#divAppSkywarsBuyInOverlay #divBuyInOptions
{
	left:calc(50% - 150px);
	margin-top:55px;
	position:relative;
	width:300px;
}

#divAppSkywarsBuyInOverlay .divBuyInOption
{
	background-image:url('../images/skywars/buttonPanel.webp');
	background-position:center;
	background-repeat:no-repeat;
	background-size:100% 100%;
	color:#ffffff;
	filter:drop-shadow(0px 0px 20px rgba(0, 0, 0, 0.5));
	font-family:"Bebas Neue", sans-serif;
	font-size:20px;
	cursor:pointer;
	line-height:20px;
	margin-bottom:10px;
	padding:25px 0px;
	text-align:center;
	text-shadow:0px 0px 2px #000000, 0px 0px 5px #000000, 0px 0px 10px #000000;
	transition:color 0.25s, text-shadow 0.25s;
}

#divAppSkywarsBuyInOverlay .divBuyInOption:hover, #divAppSkywarsBuyInOverlay .divBuyInOption:focus
{
	color:#cffdff;
	text-shadow:0px 0px 5px #01eff9;
}

#divAppSkywarsBuyInOverlay #btnCancelBuyIn
{
	background-image:url('../images/skywars/buttonPanel.webp');
	background-position:center;
	background-repeat:no-repeat;
	background-size:100% 100%;
	color:#ffffff;
	filter:drop-shadow(0px 0px 20px rgba(0, 0, 0, 0.5)) grayscale(0.75);
	font-family:"Bebas Neue", sans-serif;
	font-size:20px;
	cursor:pointer;
	left:calc(50% - 150px);
	line-height:20px;
	padding:25px 0px;
	position:relative;
	text-align:center;
	text-shadow:0px 0px 2px #000000, 0px 0px 5px #000000, 0px 0px 10px #000000;
	transition:color 0.25s, text-shadow 0.25s;
	width:300px;
}

#divAppSkywarsBuyInOverlay #btnCancelBuyIn:hover, #divAppSkywarsBuyInOverlay #btnCancelBuyIn:focus
{
	color:#fbd3ff;
	text-shadow:0px 0px 5px #e600ff;
}

/* IN-GAME MODE: X close button (top-right) - matches wallet popup style */
#divAppSkywarsBuyInOverlay #btnCloseBuyIn
{
	cursor:pointer;
	display:none;
	height:40px;
	position:absolute;
	right:10px;
	top:10px;
	width:40px;
	z-index:10;
}

#divAppSkywarsBuyInOverlay #btnCloseBuyIn:before
{
	background-color:#3f4656;
	content:"";
	height:2px;
	left:8px;
	position:absolute;
	top:20px;
	transform:rotate(45deg);
	transition:background-color 0.25s, box-shadow 0.25s;
	width:24px;
}

#divAppSkywarsBuyInOverlay #btnCloseBuyIn:after
{
	background-color:#3f4656;
	content:"";
	height:2px;
	left:8px;
	position:absolute;
	top:20px;
	transform:rotate(-45deg);
	transition:background-color 0.25s, box-shadow 0.25s;
	width:24px;
}

#divAppSkywarsBuyInOverlay #btnCloseBuyIn:hover:before,
#divAppSkywarsBuyInOverlay #btnCloseBuyIn:focus:before,
#divAppSkywarsBuyInOverlay #btnCloseBuyIn:hover:after,
#divAppSkywarsBuyInOverlay #btnCloseBuyIn:focus:after
{
	background-color:#fbd3ff;
	box-shadow:0px 0px 5px #e600ff;
}

/* IN-GAME MODE: Show X button, hide Cancel button */
#divAppSkywarsBuyInOverlay.inGame #btnCloseBuyIn
{
	display:block;
}

#divAppSkywarsBuyInOverlay.inGame #btnCancelBuyIn
{
	display:none;
}

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

/* MEDIA QUERIES */
@media (max-width: 420px)
{
    #divAppSkywarsBuyInOverlay #divSkywarsBuyInPopup
    {
        border-radius:0px;
		height:calc(100% - 60px);
        left:0%;
        top:0%;
        transform:translate(0%, 0%);
        width:calc(100% - 60px);
    }
}