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

#divAppSkywarsTournamentDetails.show
{
    animation:showSkywarsTournamentDetails 0.25s;
    display:block;
    opacity:1;
}

#divAppSkywarsTournamentDetails #divTournamentDetailsPopup
{
    background-color:#1b1c20;
    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 50px #000000;
    height:618px;
    left:50%;
    opacity:0;
    overflow:hidden;
    padding:30px;
    position:absolute;
    top:50%;
    transform:translate(-50%, -50%);
    transition:height 0.25s, padding 0.25s;
    width:480px;
}

#divAppSkywarsTournamentDetails.show #divTournamentDetailsPopup
{
    animation:showSkywarsTournamentDetails 0.25s;
    opacity:1;
}

#divAppSkywarsTournamentDetails #h3PopupHeading
{
    height:40px;
    line-height:40px;
    margin-bottom:15px;
    overflow:hidden;
    padding-right:70px;
    text-overflow:ellipsis;
    white-space:nowrap;
}

#divAppSkywarsTournamentDetails #h3PopupHeading:before
{
    background-image:url('../images/icons/tournaments.svg');
    background-position:center left;
    background-repeat:no-repeat;
    background-size:80%;
    content:"";
    float:left;
    height:40px;
    line-height:40px;
    margin-right:5px;
    opacity:0.5;
    width:40px;
}

#divAppSkywarsTournamentDetails #btnRefresh
{
    color:rgba(255, 255, 255, 0.25);
    cursor:pointer;
    font-size:24px;
    height:40px;
    line-height:40px;
    position:absolute;
    right:60px;
    text-align:center;
    top:30px;
    transition:color 0.25s, text-shadow 0.25s, transform 0.25s;
    width:40px;
}

#divAppSkywarsTournamentDetails #btnRefresh:hover, #divAppSkywarsTournamentDetails #btnRefresh:focus
{
    color:#cffdff;
    text-shadow:0px 0px 5px #01eff9;
    transform:rotate(360deg);
}

#divAppSkywarsTournamentDetails #btnClosePopup
{
    cursor:pointer;
    height:40px;
    position:absolute;
    right:20px;
    top:30px;
    width:40px;
}

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

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

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

#divAppSkywarsTournamentDetails .divTournamentDetails
{
    background-color:#292a2f;
    border-radius:10px;
	display:none;
    height:422px;
	margin-top:10px;
    overflow:auto;
    padding:20px;
}

#divAppSkywarsTournamentDetails .divLeaderboard, #divAppSkywarsTournamentDetails .divPrizePool
{    
	border-radius:10px;
    display:none;
    height:462px;
    margin-top:10px;
    overflow-y:auto;
}

#divAppSkywarsTournamentDetails.details .divTournamentDetails, #divAppSkywarsTournamentDetails.leaderboard .divLeaderboard, #divAppSkywarsTournamentDetails.prizePool .divPrizePool
{
    display:block;
}

/* DETAILS TAB */
#divAppSkywarsTournamentDetails #divTournamentTimer
{
	background-color:rgba(0, 0, 0, 0.5);
	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);
	display:none;
	margin-bottom:15px;
}

#divAppSkywarsTournamentDetails #divTournamentTimer.show
{
	display:block;
}

#divAppSkywarsTournamentDetails #divTournamentTimer .countdownTimer
{
	height:60px;
}

#divAppSkywarsTournamentDetails #divTournamentTimer .countdownTimer .divTimerLabel
{
	display:inline-block;
	font-size:18px;
	margin-left:15px;
	padding-top:18px;
	text-align:left;
	text-shadow:none;
}

#divAppSkywarsTournamentDetails #divTournamentTimer .countdownTimer .divTimerLabel:before, #divAppSkywarsTournamentDetails #divTournamentTimer .countdownTimer .divTimerLabel:after
{
	display:none;
}

#divAppSkywarsTournamentDetails #divTournamentTimer .countdownTimer .divDaysValue, #divAppSkywarsTournamentDetails #divTournamentTimer .countdownTimer .divDaysLabel
{
	left:48%;
}

#divAppSkywarsTournamentDetails #divTournamentTimer .countdownTimer .divHoursValue, #divAppSkywarsTournamentDetails #divTournamentTimer .countdownTimer .divHoursLabel
{
	left:62%;
}

#divAppSkywarsTournamentDetails #divTournamentTimer .countdownTimer .divMinutesValue, #divAppSkywarsTournamentDetails #divTournamentTimer .countdownTimer .divMinutesLabel
{
	left:76%;
}

#divAppSkywarsTournamentDetails #divTournamentTimer .countdownTimer .divSecondsValue, #divAppSkywarsTournamentDetails #divTournamentTimer .countdownTimer .divSecondsLabel
{
	left:90%;
}

#divAppSkywarsTournamentDetails #divTournamentTimer .countdownTimer .divDaysValue, #divAppSkywarsTournamentDetails #divTournamentTimer .countdownTimer .divHoursValue, #divAppSkywarsTournamentDetails #divTournamentTimer .countdownTimer .divMinutesValue, #divAppSkywarsTournamentDetails #divTournamentTimer .countdownTimer .divSecondsValue
{
	font-size:20px;
	height:26px;
	line-height:30px;
	top:10px;
	width:40px;
}

#divAppSkywarsTournamentDetails #divTournamentTimer .countdownTimer .divDaysLabel, #divAppSkywarsTournamentDetails #divTournamentTimer .countdownTimer .divHoursLabel, #divAppSkywarsTournamentDetails #divTournamentTimer .countdownTimer .divMinutesLabel, #divAppSkywarsTournamentDetails #divTournamentTimer .countdownTimer .divSecondsLabel
{
	bottom:5px;
	font-size:10px;
}

#divAppSkywarsTournamentDetails #divGameName, #divAppSkywarsTournamentDetails #divYourPosition, #divAppSkywarsTournamentDetails #divPrizePool, #divAppSkywarsTournamentDetails #divBuyIn, #divAppSkywarsTournamentDetails #divPlayersJoined, #divAppSkywarsTournamentDetails #divMinPlayers, #divAppSkywarsTournamentDetails #divMaxPlayers, #divAppSkywarsTournamentDetails #divMaxRounds, #divAppSkywarsTournamentDetails #divRegistrationStart, #divAppSkywarsTournamentDetails #divRegistrationEnd, #divAppSkywarsTournamentDetails #divTournamentStart, #divAppSkywarsTournamentDetails #divTournamentEnd
{
    color:#cffdff;
    line-height:24px;
    text-shadow:0px 0px 5px #01eff9;
    white-space:nowrap;
}

#divAppSkywarsTournamentDetails #divPrizePool, #divAppSkywarsTournamentDetails #divRegistrationEnd, #divAppSkywarsTournamentDetails #divTournamentEnd
{
    color:#fbd3ff;
    text-shadow:0px 0px 5px #e600ff;
}

#divAppSkywarsTournamentDetails #divGameName:before, #divAppSkywarsTournamentDetails #divYourPosition:before, #divAppSkywarsTournamentDetails #divPrizePool:before, #divAppSkywarsTournamentDetails #divBuyIn:before, #divAppSkywarsTournamentDetails #divPlayersJoined:before, #divAppSkywarsTournamentDetails #divMinPlayers:before, #divAppSkywarsTournamentDetails #divMaxPlayers:before, #divAppSkywarsTournamentDetails #divMaxRounds:before, #divAppSkywarsTournamentDetails #divRegistrationStart:before, #divAppSkywarsTournamentDetails #divRegistrationEnd:before, #divAppSkywarsTournamentDetails #divTournamentStart:before, #divAppSkywarsTournamentDetails #divTournamentEnd:before
{
    color:#888b90;
    display:inline-block;
    text-shadow:none;
    width:130px;
}

#divAppSkywarsTournamentDetails #divGameName:before
{
    content:"Game:";
}

#divAppSkywarsTournamentDetails #divYourPosition:before
{
    content:"Your Position:";
}

#divAppSkywarsTournamentDetails #divPrizePool:before
{
    content:"Prize pool:";
}

#divAppSkywarsTournamentDetails #divBuyIn:before
{
    content:"Buy In:";
}

#divAppSkywarsTournamentDetails #divPlayersJoined:before
{
    content:"Players Joined:";
}

#divAppSkywarsTournamentDetails #divMinPlayers:before
{
    content:"Min players:";
}

#divAppSkywarsTournamentDetails #divMaxPlayers:before
{
    content:"Max players:";
}

#divAppSkywarsTournamentDetails #divMaxRounds:before
{
    content:"Max rounds:";
}

#divAppSkywarsTournamentDetails #divRegistrationStart:before
{
    content:"Registration start:";
}

#divAppSkywarsTournamentDetails #divRegistrationEnd:before
{
    content:"Registration end:";
}

#divAppSkywarsTournamentDetails #divTournamentStart:before
{
    content:"Tournament start:";
}

#divAppSkywarsTournamentDetails #divTournamentEnd:before
{
    content:"Tournament end:";
}

/* Lobby tournaments - hide registration fields */
#divAppSkywarsTournamentDetails.lobby #divRegistrationStart,
#divAppSkywarsTournamentDetails.lobby #divRegistrationEnd
{
	display:none;
}

#divAppSkywarsTournamentDetails #btnJoinPlay
{
    margin-top:15px;
    padding:0px 15px;
    width:100%;
}

/* LEADERBOARD TAB */
#divAppSkywarsTournamentDetails #divLeaderboardDetails
{
    height:50px;
    line-height:25px;
    padding:15px 20px;
    white-space:nowrap;
}

#divAppSkywarsTournamentDetails .divLeaderboardYourPosition, #divAppSkywarsTournamentDetails .divLeaderboardPlayersJoined
{
    color:#ffffff;
	float:left;
    overflow:hidden;
    text-overflow:ellipsis;
    width:50%;
}

#divAppSkywarsTournamentDetails #divLeaderboardYourPositionValue, #divAppSkywarsTournamentDetails #divLeaderboardPlayersJoinedValue
{
    float:right;
    overflow:hidden;
    text-align:right;
    text-overflow:ellipsis;
    width:50%;
}

#divAppSkywarsTournamentDetails .divLeaderboardHeaderRow
{
	background-color:#1b1c20;
	height:56px;
    line-height:56px;
    white-space:nowrap;
}

#divAppSkywarsTournamentDetails #divLeaderboardList
{
    min-height:326px;
}

#divAppSkywarsTournamentDetails .divLeaderboardRow
{
    height:40px;
    line-height:40px;
    white-space:nowrap;
}

#divAppSkywarsTournamentDetails .divLeaderboardRow:after
{
    clear:both;
    content:"";
    display:block;
}

#divAppSkywarsTournamentDetails .divLeaderboardRow:nth-child(even)
{
    background-color:#1b1c20;
}

#divAppSkywarsTournamentDetails .divLeaderboardHeaderPosition
{
    float:left;
    overflow:hidden;
    text-align:center;
    text-overflow:ellipsis;
    width:60px;
}

#divAppSkywarsTournamentDetails .divLeaderboardHeaderUser
{
    float:left;
    overflow:hidden;
    padding-left:20px;
    text-overflow:ellipsis;
    width:120px;
}

#divAppSkywarsTournamentDetails .divLeaderboardHeaderPoints
{
    float:left;
    padding-right:20px;
    overflow:hidden;
    text-align:right;
    text-overflow:ellipsis;
    width:calc(100% - 220px);
}

#divAppSkywarsTournamentDetails .divLeaderboardPosition
{
    float:left;
    overflow:hidden;
    text-align:center;
    text-overflow:ellipsis;
    width:60px;
}

#divAppSkywarsTournamentDetails .divLeaderboardUser
{
    color:#ffffff;
    float:left;
    overflow:hidden;
    padding-left:20px;
    text-overflow:ellipsis;
    width:120px;
}

#divAppSkywarsTournamentDetails .divLeaderboardPoints
{
    color:#cffdff;
    float:left;
    padding-right:20px;
    overflow:hidden;
    text-align:right;
    text-overflow:ellipsis;
    text-shadow:0px 0px 5px #01eff9;
    width:calc(100% - 220px);
}

/* PRIZE POOL TAB */
#divAppSkywarsTournamentDetails .divPrizePoolHeaderRow
{
	height:56px;
    line-height:56px;
    white-space:nowrap;
}

#divAppSkywarsTournamentDetails #divPrizePoolList
{
    min-height:406px;
}

#divAppSkywarsTournamentDetails .divPrizePoolRow
{
    height:40px;
    line-height:40px;
    white-space:nowrap;
}

#divAppSkywarsTournamentDetails .divPrizePoolRow:after
{
    clear:both;
    content:"";
    display:block;
}

#divAppSkywarsTournamentDetails .divPrizePoolHeaderPosition
{
    float:left;
    overflow:hidden;
    text-align:center;
    text-overflow:ellipsis;
    width:60px;
}

#divAppSkywarsTournamentDetails .divPrizePoolHeaderPercentage
{
    float:left;
    overflow:hidden;
    padding-left:20px;
    text-overflow:ellipsis;
    width:120px;
}

#divAppSkywarsTournamentDetails .divPrizePoolHeaderAmount
{
    float:left;
    padding-right:20px;
    overflow:hidden;
    text-align:right;
    text-overflow:ellipsis;
    width:calc(100% - 220px);
}

#divAppSkywarsTournamentDetails .divPrizePoolPosition
{
    box-sizing:border-box;
    float:left;
    overflow:hidden;
    text-overflow:ellipsis;
    width:50%;
    padding-left:30px;
}

#divAppSkywarsTournamentDetails .divPrizePoolPercentage
{
    box-sizing:border-box;
    color:#ffffff;
    float:left;
    overflow:hidden;
    text-align:right;
    text-overflow:ellipsis;
    width:50%;
    padding-right:30px;
}

#divAppSkywarsTournamentDetails .divPrizePoolAmount
{
    color:#cffdff;
    float:left;
    padding-right:20px;
    overflow:hidden;
    text-align:right;
    text-overflow:ellipsis;
    text-shadow:0px 0px 5px #01eff9;
    width:calc(100% - 220px);
}

/* Prize Pool Tier Section */

#divAppSkywarsTournamentDetails .divPrizePoolTierHeader
{
    background-color: #575757;
    border-left: 3px solid #eff0f3;
    display:flex;
    justify-content:space-between;
    align-items:center;    
    padding:12px 15px;
    font-size:13px;
    color: #ffffff;
    border-bottom:1px solid #37383d;
    opacity:0.6;
}

#divAppSkywarsTournamentDetails .divPrizePoolTier.active .divPrizePoolTierHeader
{
    background-color:rgba(1, 239, 249, 0.08);
    border-left:3px solid #01eff9;
    color:#ffffff;
    opacity:1;
}

#divAppSkywarsTournamentDetails .divTierLabel
{
    font-weight:500;
}

#divAppSkywarsTournamentDetails .divTierActive
{
    font-size:9px;
    text-transform:uppercase;
    letter-spacing:0.5px;
    color:#01eff9;
    background-color:rgba(1, 239, 249, 0.2);
    padding:3px 8px;
    border-radius:3px;
}

#divAppSkywarsTournamentDetails .divPrizePoolTierRows
{
    background-color:#292a2f;
    opacity:0.5;
}

#divAppSkywarsTournamentDetails .divPrizePoolTier.active .divPrizePoolTierRows
{
    background-color:rgba(1, 239, 249, 0.03);
    opacity:1;
}

#divAppSkywarsTournamentDetails .divPrizePoolTier .divPrizePoolRow
{
    height:36px;
    line-height:36px;
}

#divAppSkywarsTournamentDetails .divPrizePoolTier.active .divPrizePoolRow .divPrizePoolPercentage
{
    color:#cffdff;
    text-shadow:0px 0px 5px #01eff9;
}

/* Hide header row when showing tiered prizes */
#divAppSkywarsTournamentDetails.tieredPrizePool .divPrizePoolHeaderRow
{
    display:none;
}

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

/* MEDIA QUERIES */
@media (max-height: 680px)
{
    #divAppSkywarsTournamentDetails #divTournamentDetailsPopup
    {
        height:calc(100% - 100px);
        overflow-y:auto;
        top:20px;
        transform:translate(-50%, 0%);
    }
}

@media (max-width: 540px)
{
    #divAppSkywarsTournamentDetails
    {
        display:block;
        opacity:1;
        transform:translate(-100%, 0%);
        transition:transform 0.25s;
    }

    #divAppSkywarsTournamentDetails.show
    {
        animation:none;
        transform:translate(0%, 0%);
    }

    #divAppSkywarsTournamentDetails #divTournamentDetailsPopup
    {
        box-shadow:none;
        border-radius:0px;
        height:calc(100% - 120px);
        left:0%;
        opacity:1;
        overflow-y:auto;
        padding:20px 20px 100px;
        top:0%;
        transform:translate(0%, 0%);
        width:calc(100% - 40px);
    }

    #divAppSkywarsTournamentDetails.show #divTournamentDetailsPopup
    {
        animation:none;
    }

    #divAppSkywarsTournamentDetails #h3PopupHeading
    {
        padding-right:85px;
    }

    #divAppSkywarsTournamentDetails #btnRefresh
    {
        right:55px;
        top:20px;
    }

    #divAppSkywarsTournamentDetails #btnClosePopup
    {
        right:15px;
        top:20px;
    }

    #divAppSkywarsTournamentDetails .divLeaderboard, #divAppSkywarsTournamentDetails .divPrizePool
    {
        height:auto;
    }
}

@media (max-width: 420px)
{
    #divAppSkywarsTournamentDetails #divTournamentDetailsPopup
    {
        height:calc(100% - 115px);
        padding:15px 15px 100px;
        width:calc(100% - 30px);
    }

	#divAppSkywarsTournamentDetails #btnRefresh
    {
        right:50px;
        top:15px;
    }

    #divAppSkywarsTournamentDetails #btnClosePopup
    {
        right:10px;
        top:15px;
    }
}

/* PRIZE POOL LOADING STATE */
#divAppSkywarsTournamentDetails .divPrizePoolLoading
{
    color:rgba(255, 255, 255, 0.5);
    padding:40px 20px;
    text-align:center;
}