body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

table {
    margin: 20px 0 0 0;
    width: 75%;
    border-collapse: collapse;
}

th,
td {
    border: 1px solid #ddd;
    padding: 8px;
}

td {
    text-align: left;
}

th {
    text-align: center;
}

#group-matches {
    transition: opacity 0.3s ease-in-out;
    margin-top: 2rem;
}

#group-table {
    font-size: 14px;
    border: 1px solid #dfe3e8;
    border-radius: 4px;
    overflow: hidden;
}

.summary-cell {
    width: 12px;
    height: 12px;
    border: 1px solid #ccc;
    padding: 0;
    line-height: 12px;
}

.summary-cell-empty {
    background-color: white;
}

.summary-cell-result {
    background-color: red;
}

.summary-cell-half-prediction {
    background-color: lightgreen;
}

.summary-cell-full-prediction {
    background-color: green;
}

.flag-icon {
    width: 2rem;
    height: 2rem;
    object-fit: contain;
}