#divAppTournamentDetails
{
    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;
}

#divAppTournamentDetails.show
{
    animation-duration:0.25s;
    animation-name:showTournamentDetails;
    display:block;
    opacity:1;
}

#divAppTournamentDetails #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:590px;
    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;
}

#divAppTournamentDetails.show #divTournamentDetailsPopup
{
    animation-duration:0.25s;
    animation-name:showTournamentDetails;
    opacity:1;
}

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

#divAppTournamentDetails #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;
}

#divAppTournamentDetails #btnRefresh
{
    color:#3f4656;
    cursor:pointer;
    font-size:24px;
    height:40px;
    line-height:40px;
    position:absolute;
    right:60px;
    text-align:center;
    top:20px;
    transition:color 0.25s, text-shadow 0.25s, transform 0.25s;
    width:40px;
}

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

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

#divAppTournamentDetails #btnClosePopup: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;
}

#divAppTournamentDetails #btnClosePopup: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;
}

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

#divAppTournamentDetails .divDetails
{
    background-color:#292a2f;
    display:none;
    height:405px;
    margin-top:10px;
    overflow:hidden;
    padding:20px;
}

#divAppTournamentDetails #divGames, #divAppTournamentDetails .divLeaderboard, #divAppTournamentDetails .divPrizePool
{
    background-color: #292a2f;
    display: none;
    height:436px;
    margin-top: 10px;
    overflow-y: auto;
}

#divAppTournamentDetails.details .divDetails, #divAppTournamentDetails.games #divGames, #divAppTournamentDetails.leaderboard .divLeaderboard, #divAppTournamentDetails.prizepool .divPrizePool
{
    display:block;
}

/* DETAILS TAB */
#divAppTournamentDetails #divPrizePool, #divAppTournamentDetails #divBuyIn, #divAppTournamentDetails #divYourPosition, #divAppTournamentDetails #divPlayerCount, #divAppTournamentDetails #divMinBet, #divAppTournamentDetails #divMaxBet, #divAppTournamentDetails #divMinRounds, #divAppTournamentDetails #divMaxRounds, #divAppTournamentDetails #divRegistrationStart, #divAppTournamentDetails #divRegistrationEnd, #divAppTournamentDetails #divTournamentStart, #divAppTournamentDetails #divTournamentEnd
{
    color:#cffdff;
    margin-bottom:3px;
    text-shadow:0px 0px 5px #01eff9;
    white-space:nowrap;
}

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

#divAppTournamentDetails #divPrizePool:before, #divAppTournamentDetails #divBuyIn:before, #divAppTournamentDetails #divYourPosition:before, #divAppTournamentDetails #divPlayerCount:before, #divAppTournamentDetails #divMinBet:before, #divAppTournamentDetails #divMaxBet:before, #divAppTournamentDetails #divMinRounds:before, #divAppTournamentDetails #divMaxRounds:before, #divAppTournamentDetails #divRegistrationStart:before, #divAppTournamentDetails #divRegistrationEnd:before, #divAppTournamentDetails #divTournamentStart:before, #divAppTournamentDetails #divTournamentEnd:before
{
    color:#888b90;
    display:inline-block;
    text-shadow:none;
    width:125px;
}

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

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

#divAppTournamentDetails #divBuyIn.alreadyJoined:after
{
    content:"(Already joined)";
    margin-left:3px;
}

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

#divAppTournamentDetails #divPlayerCount:before
{
    content:"Player count:";
}

#divAppTournamentDetails #divMinBet:before
{
    content:"Min bet:";
}

#divAppTournamentDetails #divMaxBet:before
{
    content:"Max bet:";
}

#divAppTournamentDetails #divMinRounds:before
{
    content:"Min rounds:";
}

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

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

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

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

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

#divAppTournamentDetails #btnJoinNow
{
    margin-top:20px;
    width:100%;
}

/* GAMES TAB */
#divAppTournamentDetails .divTournamentGame
{
    border-bottom: 1px solid #3f4656;
    height: 94px;
    position: relative;
    padding: 10px 0 10px 0px;
}

#divAppTournamentDetails .imgGameImage
{
    height: 100%;
    object-fit: cover;
}

#divAppTournamentDetails .divGameName
{
    left: 144px;
    overflow: hidden;
    position: absolute;
    right: 10px;
    text-overflow: ellipsis;
    top: 10px;
    white-space: nowrap;
}

#divAppTournamentDetails .divGameProvider
{
    left: 144px;
    overflow: hidden;
    position: absolute;
    right: 0px;
    text-overflow: ellipsis;
    top: 30px;
    white-space: nowrap;
}

#divAppTournamentDetails .btnPlayNow
{
    left: 144px;
    position: absolute;
    top: 54px;
}

/* LEADERBOARD TAB */
#divAppTournamentDetails .divLeaderboardRow
{
    height:56px;
    line-height:56px;
    white-space:nowrap;
}

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

#divAppTournamentDetails .divLeaderboard > .divLeaderboardRow, #divAppTournamentDetails .divLeaderboardRow:nth-child(even)
{
    background-color:#1b1c20;
}

#divAppTournamentDetails .divLeaderboardMyPositionText, #divAppTournamentDetails .divLeaderboardUsersJoinedText
{
    float:left;
    overflow:hidden;
    text-overflow:ellipsis;
    width:50%;
}

#divAppTournamentDetails #divLeaderboardMyPosition, #divAppTournamentDetails #divLeaderboardUsersJoined
{
    color: #ffffff;
    float:right;
    overflow:hidden;
    text-align: right;
    text-overflow:ellipsis;
    width:50%;
}

#divLeaderboardRowDetails {
    clear: both;
    padding: 10px 15px;
    height: 60px;
    line-height: 30px;
    white-space: nowrap;
}

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

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

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

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

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

#divAppTournamentDetails .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 */
#divAppTournamentDetails .divPrizePoolRow
{
    height:56px;
    line-height:56px;
    white-space:nowrap;
}

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

#divAppTournamentDetails .divPrizePool > .divPrizePoolRow, #divAppTournamentDetails .divPrizePoolRow:nth-child(even)
{
    background-color:#1b1c20;
}

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

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

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

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

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

#divAppTournamentDetails .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);
}

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

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

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

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

    #divAppTournamentDetails #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);
    }

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

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

    #divAppTournamentDetails #btnRefresh
    {
        right:55px;
        top:15px;
    }

    #divAppTournamentDetails #btnRefresh:before, #divAppTournamentDetails #btnRefresh:after
    {
        color:#cffdff;
        text-shadow:0px 0px 5px #01eff9;
    }

    #divAppTournamentDetails #btnClosePopup
    {
        right:15px;
        top:15px;
    }

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

    #divAppTournamentDetails #divGames, #divAppTournamentDetails .divLeaderboard, #divAppTournamentDetails .divPrizePool
    {
        height:auto;
    }
}

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

    #divAppTournamentDetails #btnClosePopup
    {
        right:10px;
        top:10px;
    }

    #divAppTournamentDetails .divLeaderboardRow {
        font-size: 90%;
    }
}