.flex-container {
    display: flex;
    flex-flow: column wrap;
    justify-content: space-around;
    margin: 20px 5px 5px 5px;
    gap: 5px;
    align-items: center;
}

table.games {
    border-collapse: collapse;
}


.games tr:hover>td {
    background-color: rgba(69, 130, 152, 0.73) !important;
}

.games tr.phase-header:hover>td {
    background-color: unset !important;
}

.games {
    width: 100%;
    max-width: 1000px;
    border: solid 1px gray;
    box-shadow: 0 2px 2px gray;

    background: linear-gradient(rgba(30, 64, 110, 0.9), rgba(30, 64, 110, 0.8));
    color: white;
}

.games th>a {
    color: white;
}

.games td, .games th {
    padding: 3px 5px 3px 5px;
}

.games th {
    border-bottom: solid 2px black;
    background-color: #333;
}

@media (min-width: 1900px) {
    .games {
        max-width: 1500px;
        font-size: 1.6em;
        & td {
            padding: 7px !important;
        }
    }

    .live {
        width: 20px !important;
        height: 20px !important;
        top: 7px !important;
    }
}

.games>tbody>tr.running {
/*    background-color: rgb(220, 213, 99, 0.1);*/
}

.games>tbody>tr.finished {
/*    background-color: rgba(84, 195, 67, 0.2);*/
}

.games td.winner {
    background-color: rgba(77, 133, 80, 0.73) !important;
    font-weight: bold;
}

.games>tbody>tr:nth-of-type(10n) {
    border-top: solid 2px black;
}

.games>tbody>tr {
    border-top: solid 1px #333;
}

.games>tbody>tr.phase-header {
    background-color: #333;
}

.highlight {
    font-weight: bold;
    /*background-color: rgba(9, 165, 129, 0.76) !important;*/
    background-color: rgba(69, 130, 152, 0.73) !important;
}

@media (max-width: 1000px) {
    .flex-container {
        margin-left: unset;
        margin-right: unset;
    }

    table.games {
        border-right: unset;
        border-left: unset;
        box-shadow: unset;
    }
}

@media (max-width: 900px) {
    table.games td:nth-child(3),
    table.games td:nth-child(9),
    table.games th:nth-child(3),
    table.games th:nth-child(9)
    {
        display: none; /* Hide the column */
    }

    .phase-links-mobile {
        display: flex;
    }

    ul.navbar>li.phase-links {
        display: none;
    }
}

@media (max-width: 700px) {
    table.games td:nth-child(12),
    table.games th:nth-child(12)
    {
        display: none; /* Hide the column */
    }
    .games {
        font-size: 0.9em;
    }

    .games>thead>tr>th {
        padding: 1px 3px 1px 3px;;
    }

    .games>tbody>tr>td {
        padding: 1px 3px 1px 3px;
    }

}

@media (max-width: 500px) {
    table.games td:nth-child(1),
    table.games th:nth-child(1),
    table.games td:nth-child(2),
    table.games th:nth-child(2) {
        display: none; /* Hide the column */
    }
    table.games td.phase-header {
        display: table-cell;
    }
    .games {
        font-size: 0.8em;
    }
}

@media (max-width: 400px) {
    table.games td:nth-child(10),
    table.games th:nth-child(10) {
        display: none; /* Hide the column */
    }
    .navbar-icon {
        display: none;
    }
}


.player-group {
    cursor: pointer;
}

.player:hover, .player-group:hover {
    font-weight: bold;
}

button.vote-button {
    background-color: unset;
    cursor: pointer;
    margin: 0;
    padding: 0;
    border: none;
    font-size: 1.1em;
}

button.vote-button>svg {
    fill: rgba(255,255,255, 0.62);
}

button.vote-button:hover>svg {
    fill: white;
}

.hint {
    margin-left: 10px;
    font-size: 1.3em;
    text-align: center;
    align-items: center;
    display: flex;
    justify-content: center;
}

.phase-links {
    position: sticky;
    top: 48px;
    z-index: 110;
    box-shadow: 0 2px 2px gray;
    background-color: black;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    padding-top: 10px;
    padding-bottom: 10px;
    & a {
        color: white;
        font-weight: unset;
    }
    & a:hover {
        text-decoration: none;
        font-weight: bold;
    }
}

:target {
    scroll-margin-top: 130px;
}