/* ----- ----- */
/*  Player 1   */
/* ----- ----- */

.player_1 {
    width: 200px;
}

.container {
    height: 100%;
    margin: 0;
    display: grid;
    grid-template-columns: 1.1fr 1fr 1fr 0.9fr 2fr;
    grid-template-rows: 0.6fr 0.2fr 0.2fr;
    gap: 0px 1px;
    grid-auto-flow: row;
    grid-template-areas:
        "Player-Picture Card-1 Card-2 Pot-Odds Empty_2"
        "Player-Picture Name Name Unknown Info"
        "Flag Move Move Chips Info";
    /*align-items: center;*/
    justify-content: center;
    width: fit-content;
    /*margin: auto;*/
}

/* ----- */
/* Grid  */
/* ----- */

.Player-Picture {
    grid-area: Player-Picture;
    width: 50px;
    align-content: center;
}

    .Player-Picture > img {
        width: 100px;
        /*margin: auto;*/
        margin-left: -25px;
    }

.Flag {
    grid-area: Flag;
}

    .Flag > img {
        /*margin: auto;*/
        /*width: fit-content;*/
        margin-left: 10px;
        height: 15px;
    }

.Card-1 {
    grid-area: Card-1;
}

.Card-2 {
    grid-area: Card-2;
}

.Pot-Odds {
    grid-area: Pot-Odds;
    width: fit-content;
    margin: auto;
    background-color: #191c3b;
    color: white;
    font-weight: bold;
    height: 100%;
    display: flex;
    align-items: center;
}

.Name {
    grid-area: Name;
    color: black;
    background-color: #bcbcbc;
    font-weight: bold;
    text-transform: uppercase;
}

.Move {
    grid-area: Move;
    background-color: #191c3b;
    color: white;
    font-weight: bold;
    text-transform: uppercase;
    display: flex;
    align-items: center;
}

.Unknown {
    grid-area: Unknown;
    text-align: center;
    text-transform: uppercase;
    background-color: #bcbcbc;
    font-weight: bold;
}

.Chips {
    grid-area: Chips;
    color: white;
    font-weight: bold;
    background-color: #464c5c;
    padding: 1px;
}

.Info {
    grid-area: Info;
    text-align: center;
    text-transform: uppercase;
    color: red;
    /*width: fit-content;*/
    /*margin: auto;*/
    font-weight: bold;
    background-color: #191c3b;
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0 10px;
}

.Empty_2 {
    grid-area: Empty_2;
}

/* ----- */
/* Other */
/* ----- */

.card {
    width: 40px;
}

/* ----- ----- ----- ----- */

/* For presentation only, no need to copy the code below */

/*.container * {
    border: 1px solid red;
    position: relative;
}*/

/*.container *:after {
    content: attr(class);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: grid;
    align-items: center;
    justify-content: center;
}*/