body {
    background-color: #254465;
}
h1, h2, h3 {
    text-align: center;
}
a {
    text-decoration: none;
    color: inherit;
}

.tpLobbyGrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    column-gap: 10px;
    justify-items: center;
    width: 100%;
    margin: 0 auto;
}
.tpLobbyImage
{
    width: 150px;
    height: 101px;
    border: solid transparent 1px;
    border-radius: 10px;
    margin-top: 30px;
    cursor: pointer;
}
.tpLobbyHeader {
    color: white;
    font-size: 16px;
    text-align: center;
    border-radius: 25px;
    border-color: transparent;
    margin-top: 5px;
}

.tpRules table {
    border: 1px solid lightgray;
    width: 100%;
    margin-top: 10px;
}

.tpRules th {
    border: 1px solid lightgray;
    padding-left: 5px;
}

.tpRules td {
    border: 1px solid lightgray;
    padding-left: 5px;
}

.tpHeader {
    color: #d7bc7b;
    font-size: 12px;
    font-weight: bolder;
    text-align: center;
    margin-bottom: 10px;
}

.tpHand {
    min-width: 100px;
    min-height: 100px;
    margin-top: 10px;
    margin-bottom: 10px;
}

.tpCards {
    min-width: 200px;
    min-height: 125px;
    padding-top: 20px;
    padding-bottom: 10px;
    padding-left: 25px;
    padding-right: 25px;
    border: solid #3a563a 2px;
    border-radius: 25px;
}
.tpCardsSmallHorizontal {
    min-width: 200px;
    min-height: 100px;
    padding-top: 20px;
    padding-bottom: 10px;
    padding-left: 25px;
    padding-right: 25px;
    border: solid #3a563a 2px;
    border-radius: 25px;
}
.tp2CardsSmallHorizontal {
    min-width: 150px;
    min-height: 100px;
    padding-top: 20px;
    padding-bottom: 10px;
    padding-left: 25px;
    padding-right: 25px;
    border: solid #3a563a 2px;
    border-radius: 25px;
}
.tpCommunityCards {
    min-width: 280px;
    min-height: 100px;
    padding-top: 20px;
    padding-bottom: 10px;
    padding-left: 20px;
    padding-right: 20px;
    border: solid #3a563a 2px;
    border-radius: 25px;
}
.tpCardsWithCounter {
    min-width: 200px;
    min-height: 107px;
    padding-top: 20px;
    padding-bottom: 10px;
    padding-left: 25px;
    padding-right: 25px;
    border: solid #3a563a 2px;
    border-radius: 25px;
}
.tpOneCard {
    width: 100px;
    height: 130px;
    padding-top: 21px;
    padding-bottom: 10px;
    padding-left: 13px;
    padding-right: 12px;
    border: solid #3a563a 2px;
    border-radius: 25px;
}

.tpAnimatedCard {
    height: 86px;
    animation-duration: 1s;
    animation-name: cardhorizontalflip;
}
@keyframes cardhorizontalflip {
    from {
        transform: rotateY(0deg);
    }

    to {
        transform: rotateY(360deg);
    }
}

.tpFirstCard3Cards {
    height: 86px;
    transform: rotate(-5deg);
}

.tpMidddleCard3Cards {
    height: 86px;
    transform: rotate(0deg);
    margin-left: -30px;
    margin-bottom: 5px;
}

.tpLastCard3Cards {
    height: 86px;
    transform: rotate(5deg);
    margin-left: -30px;
}
.tpFirstCard5Cards {
    height: 57px;
    transform: rotate(-2.5deg);
}
.tpSecondCard5Cards {
    height: 57px;
    transform: rotate(-5deg);
}
.tpThirdCard5Cards {
    height: 57px;
    transform: rotate(0deg);
}
.tpFourthCard5Cards {
    height: 57px;
    transform: rotate(2.5deg);
}
.tpFifthCard5Cards {
    height: 57px;
    transform: rotate(5deg);
}

.tpCardSmall {
    height: 37px;
}

.tpCardMedium {
    height: 57px;
}

.tpCardLarge {
    height: 86px;
}

.tp5CardsHorizontalSize {
    height: 57px;
}

.tp3CardsLarge {
    height: 65px;
}
.tpCounter {
    width: 80px;
    height: 25px;
    line-height: 25px;
    margin-top: 10px;
    color: #d7bc7b;
    font-size: 12px;
    font-weight: bolder;
    text-align: center;
    border: solid #3a563a 1px;
    border-radius: 20px;
    margin-left: auto;
    margin-right: auto;
}
.tpTable {
    min-width: 260px;
    background-color: #0a190a;
    width: 100%;
    padding: 10px;
    color: white;
}

.tpPlayersGrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    column-gap: 20px;
    justify-items: center;
    margin-top: 10px;
    width: 95%;
    margin: 0 auto;
}
.tpPokerGrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    column-gap: 20px;
    justify-items: center;
    margin-top: 10px;
    width: 95%;
    margin: 0 auto;
}
.tpHistoryWideGrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    justify-items: center;
    margin-top: 10px;
    width: 95%;
    margin: 0 auto;
}

.tpPlayersGridOneCard {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    column-gap: 10px;
    justify-items: center;
    margin-top: 10px;
    width: 95%;
    margin: 0 auto;
}

.tpSelectionsTableHeader {
    width: 70px;
    background-color: #254465;
    color: white;
    text-align: center;
}

.tpSelectionsTableTitle {
    min-width: 70px;
    background-color: #193756;
    color: white;
    text-align: center;
}

.tpSelectionName {
    font-weight: bold;
    height: 40px;
    color: #cac4bb;
}

.tpSelectionNameWinner {
    font-weight: bold;
    height: 40px;
    background-color: #b7f776;
    color: #cac4bb;
}

.tpPnlProfit {
    font-weight: bold;
    text-align: center;
    color: green;
}

.tpPnlLoss {
    font-weight: bold;
    text-align: center;
    color: red;
}

.tpSelectionStatus {
    background-color: #ececed;
    color: black;
    text-align: center;
}

.tpSelectionBack {
    background-color: #e9f6fc;
    text-align: center;
}

.tpSelectionLay {
    background-color: #fce3e4;
    text-align: center;
}

.tpSelectionLabel {
    font-weight: bold;
    font-size: 14px;
}

.tpSelectionSmallLabel {
    font-size: 10px;
    color: #cac5d5;
}

.tpRulesBack {
    background-color: #0a190a;
    color: white;
    width: 100%;
    min-height: 200px;
    padding: 20px;
}

.tpHistoryBack {
    background: linear-gradient(#000000, #ffffff);
    padding: 10px;
}

.tpHistoryTop {
    display: flex;
    justify-content: space-between;
}

.tpHistoryHeader {
    color: white;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    margin-top: 10px;
    margin-left: 10px;
    margin-right: 10px;
}

.tpHistoryLabel {
    color: white;
    text-align: center;
}

.tpTopHandBack {
    text-align: center;
    margin: 0 auto;
    background-color: #3a3a3a;
    width: 300px;
    padding-bottom: 10px;
    border-radius: 20px;
}

.tpHistorySelectionBackWinner {
    background-color: #008000;
    padding: 20px,20px,0,20px;
    border-radius: 20px;
    text-align: center;
    min-width: 100px;
    margin-top: 10px;
    margin-bottom: 10px;
}

.tpHistorySelectionBackLoser {
    background-color: #353535;
    border-radius: 20px;
    text-align: center;
    min-width: 100px;
    margin-top: 10px;
    margin-bottom: 10px;
}
.tpHistorySelectionNarrowBackWinner {
    background-color: #008000;
    padding: 20px,20px,0,20px;
    border-radius: 20px;
    text-align: center;
    min-width: 80px;
    margin-top: 10px;
    margin-bottom: 10px;
}

.tpHistorySelectionNarrowBackLoser {
    background-color: #353535;
    border-radius: 20px;
    text-align: center;
    min-width: 80px;
    margin-top: 10px;
    margin-bottom: 10px;
}
.tpWiderHistorySelection {
    min-width: 150px;
    min-height: 100px;
}

.tpHistoryCards {
    margin-left: 10px;
    margin-right: 10px;
}

.tpHistorySelectionStatusWinner {
    color: black;
    background-color: #cf8d2e;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    border-radius: 5px;
}

.tpHistorySelectionStatusLoser {
    color: black;
    background-color: #cf3f3f;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    border-radius: 5px;
}

.tpTabActive {
    background-color: black;
    color: white;
    line-height: 30px;
    padding-left: 10px;
    padding-right: 10px;
    font-size: 12px;
    cursor: pointer;
}

.tpTabInactive {
    background-color: #00b181;
    color: white;
    line-height: 30px;
    padding-left: 10px;
    padding-right: 10px;
    font-size: 12px;
    cursor: pointer;
}

/* coin */

.tpCoinContainer {
    min-height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.tpCoin {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    border: 1px solid transparent;
    background-color: transparent;
    transform-style: preserve-3d; /* Keep the 3D transformation */
    position: relative;
    transition: transform 1s ease-in-out; /* Smooth transition for the flip */
}

.tpCoinHead, .tpCoinTail {
    width: 150px;
    height: 150px;
    position: absolute;
    border-radius: 50%;
    background-color: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
    backface-visibility: hidden; /* Hide the backface */
}

.tpCoinTail {
    transform: rotateY(180deg); /* Start the back rotated */
}

.tpCoinSize {
    width: 150px;
    height: 150px;
}

.tpCoinAnimation {
    animation-name: coinflip;
    animation-duration: 0.3s;
    animation-iteration-count: infinite; /* Flips three times */
    animation-timing-function: ease-in-out;
}

@keyframes coinflip {
    0% {
        transform: rotateX(0deg);
    }

    50% {
        transform: rotateX(180deg);
    }

    100% {
        transform: rotateX(360deg);
    }
}

.tpMarketSeparator {
    background-color: black;
    margin-top: 5px;
    height: 3px;
    width: 100%;
}