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

table.group {
    width: 100%;
    border-collapse: collapse;
}

@media (min-width: 800px) {
    table.group {
        width: 600px;
    }
}

table.group {
    border: solid 1px #333;
    box-shadow: 0 2px 2px gray;

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

table.group>thead {
    border-bottom: solid 2px black;
    /* background: linear-gradient(rgba(72, 101, 197, 0.5), rgba(72, 101, 197, 0.37)); */
    /*background-color: rgba(187, 193, 198, 0.3);*/
    padding-left: 2px;
}

td, th {
    padding: 3px 0 3px 3px;
    text-align: left;
}

table.group>tbody>tr>td:hover {
    font-weight: bold;
}

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

.group>tbody.player-count-4>tr:nth-of-type(3n) {
    border-top: solid 2px black;
}

.group>tbody.player-count-5>tr:nth-of-type(4n) {
    border-top: solid 2px black;
}

.group>tbody.player-count-4>tr:nth-of-type(-n+2) {
    background-color: rgba(84, 195, 67, 0.2);
}

.group>tbody.player-count-5>tr:nth-of-type(-n+3) {
    background-color: rgba(84, 195, 67, 0.2);
}

.group th, .group td {
    border-right: solid 1px #333;
}

.group tr:hover>td {
   /* background-color: rgba(77, 133, 80, 0.73) !important;*/
}

.group>thead>tr>th.number-col {
    width: 50px;
}

table.games {
    width: 100%;
    color: white;
    border-collapse: collapse;
}

table.games tr {
    border-bottom: solid 1px #333;
}

table.games td {
    padding: 3px 3px 3px 3px;
}

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

table.games td.not-started {
    font-style: italic;
}

.modal-body {
    padding: 5px 0 0 0 !important;
    background: linear-gradient(rgba(30, 64, 110, 0.9), rgba(30, 64, 110, 0.8));
}

@media (max-width: 800px) {
    table.group {
        width: 100%;
        border-right: unset;
        border-left: unset;
        box-shadow: unset;
    }

    .modal-content {
        width: unset !important;
    }

    .flex-container {
        margin-left: unset;
        margin-right: unset;
    }
}

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

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

.group-name {
    cursor: pointer;
}

.group-name:hover {
    text-decoration: underline;
}