/******************* Allgemeine Layout-Definitionen ******************************/
.flex-container {
  display: flex;
  flex-direction: column;
  align-items: center; /* Dies zentriert die Tabellen horizontal */
  justify-content: space-between; /* Dies gibt gleichmäßigen vertikalen Abstand */
  width: 100%; /* Der Container nimmt die volle Breite ein */
  max-width: 960px; /* Maximale Breite des Containers */
  margin: auto; /* Zentriert den Container horizontal */
}
/*********************************************************************************/

/************************ table_payoffMatrix-Design ******************************/
#table_payoffMatrix {
    width: 100%; /* Sorgt dafür, dass die Tabelle die volle Breite einnimmt */
    text-align: center; /* Zentriert Text in allen Zellen */
}

#table_payoffMatrix th, #table_payoffMatrix td {
    border: 1px solid #000; /* Dünne Linien für ein feineres Gitter */
    padding: 10px; /* Größere Polsterung für mehr Platz */
    height: 50px; /* Definiert eine feste Höhe für die Zellen */
    width: 50px; /* Definiert eine feste Breite für die Zellen */
}

#table_payoffMatrix td.impossible-value {
    background-color: #f3f3f3 !important; /* dunkelgraue Hintergrundfarbe */
}

#table_payoffMatrix .first-column {
    background-color: #ffffff;
}


#table_payoffMatrix td:first-child, #table_payoffMatrix th:first-child {
    border: none; /* Entfernt die Ränder der ersten Zelle jeder Zeile */
}
/*********************************************************************************/


/************************ table_other_players Design *****************************/
/* table_other_players Design
#table_other_players {
    background-color: #0056b3;
} */

#table_other_players th, #table_other_players td {
  width: 109px; /* Passen Sie diesen Wert an, um die Zellen breiter zu machen */
  padding-bottom: 20px; /* Vergrößern Sie diesen Wert, um den Abstand unterhalb des Textes zu vergrößern */
}

.table-shift-right {
  position: relative;
  left: 110px; /* Passen Sie diesen Wert an, um die Tabelle nach rechts zu verschieben */
}
/*********************************************************************************/


/************************ payoff-matrix-10x10-Design ******************************/
#payoff-matrix-10x10 {
    width: 100%; /* Sorgt dafür, dass die Tabelle die volle Breite einnimmt */
    text-align: center; /* Zentriert Text in allen Zellen */
    margin-bottom: 20px; /* Fügt einen unteren Abstand von 20 Pixeln hinzu */
}
#payoff-matrix-10x10 th, #payoff-matrix-10x10 td {
    border: 1px solid #000; /* Dünne Linien für ein feineres Gitter */
}

#payoff-matrix-10x10 td.impossible-value {
    background-color: #f3f3f3 !important; /* dunkelgraue Hintergrundfarbe */
}

#payoff-matrix-10x10 .first-column {
    background-color: #ffffff !important; /* Verhindert die Änderung der Hintergrundfarbe */
    width: 60px; /* Oder welche Breite auch immer notwendig ist */
    box-sizing: border-box;
}

#payoff-matrix-10x10 td:first-child, #payoff-matrix-10x10 th:first-child {
    border: none; /* Entfernt die Ränder der ersten Zelle jeder Zeile */
}

.header-cell {
    font-weight: bold; /* Macht den Text fett */
    background-color: #b3b3b3; /* Setzt die Hintergrundfarbe auf grau */
}
/*********************************************************************************/