h1 {
    font-family:'Sarabun', sans-serif;
}

.cluster-container {
    display: table;
    grid-template-rows: auto 75pt;
    width: 100%;
    max-width: 800px;
    overflow-x: auto;
    font-family:'Sarabun', sans-serif;
    font-size: 14px;

    .row {
        display: table-row; /* This allows .table-row to act like a table row */
    }

    .cell {
        display: table-cell;
        margin: 2px 5px 2px 5px;
        padding: 4px 4px 4px 4px;
        vertical-align: top;
        border-top: 1px solid lightgray;
        border-bottom: 1px solid lightgray;
        white-space: nowrap;
        text-align: center;
    }

    .main {
        font-weight: bold;
    }

    .cell A {
        text-decoration: none;
    }

    .cell:hover, .cell A:hover {
        background-color: #bb0000;
        color: white;
    }

    .cell_sel, .cell_sel A {
        background-color: #bb0000;
        color: white;
    }
}

.entries-container {
    display: table;
    grid-template-rows: auto 1fr;
    width: 100%;
    max-width: 800px;
    overflow-x: auto;
    font-family:'Sarabun', sans-serif;
    font-size: 16px;

    .spacer {
        width: 100%;
        max-width: 800px;
        height: 10px;
    }
    .cluster {
        display: table-caption;
        width: 100%;
        max-width: 800px;
        padding: 2px 10px 2px 10px;
        margin: 10px 0px 2px 0px;
        background-color: #bb0000;
        box-shadow: 2px 2px lightgray;
        border-bottom: 1px solid white;
        border-radius: 3px;
        color: #ffffff;
        font-family:'Sarabun', sans-serif;
        font-size: 20px;
        font-weight: bold;
        .right {
            float: right;
            font-size: smaller;
            font-weight: normal;
            vertical-align: bottom;
            margin: 4px 0px 0px 0px;
        }
    }

    .subtitle {
        display: table-header-group;
        font-family:'Sarabun', sans-serif;
        font-weight: bold;
        border-bottom: 1px solid black;
    }

    .row {
        display: table-row; /* This allows .table-row to act like a table row */
    }


    .header, .cell {
        display: table-cell;
        margin: 0px 0px 0px 0px;
        padding: 4px 4px 4px 4px;
        border-bottom: 1px solid lightgrey;
        border-radius: 2px;
        vertical-align: top;
    }

    .odd {
        background-color: #eeeeee;
    }

    .nr, .amount {
        text-align: right;
    }
    .klasse {
        width: 100px;
    }

    .teams {
        .one {
            float: left;
            margin: 2px 10px 2px 0px;
            padding: 4px 8px 4px 8px;
            border: 1px solid grey;
            box-shadow: 2px 2px lightgray;
            border-radius: 2px;
            background-color: lightsteelblue;
        }
        .one:hover {
            background-color: lightgray;
            border: 1px solid #bb0000;
            cursor: pointer;
        }

        .teamdetail {
            position: absolute;

            .entrydetail {
                cursor: auto;
                min-width: 300px;
                margin: 5px 20px 16px 10px;
                padding: 5px 5px 5px 5px;
                background-color: #ffffff;
                border: 1px solid #cc0000;
                box-shadow: 5px 5px gray;
                .vereniging {
                    font-weight: bold;
                    background-color: #bb0000;
                    color: #ffffff;
                    font-size: 12pt;
                    padding: 4px 8px 4px 8px;
                }
                .boot {
                    padding: 4px 4px 4px 4px;
                    background-color: bisque;
                    border-top: 1px solid black;
                }
                .competitors {
                    padding: 4px 4px 4px 4px;
                    background-color: bisque;
                    line-height: 1.5;
                }
                .title {
                    float: left;
                    width: 50px;
                    margin: 0px 5px 0px 0px;
                    text-align: right;
                    font-weight: bold;
                }
            }
        }    
    }

    .button {
        float: left;
    }
    .button:hover {
        text-decoration: underline;
        cursor: pointer;
    }

    .winner {
        background-color: yellow;
        margin: 15px 15px 15px 15px !important;
        font-weight: bold;
    }
}

@media (max-width: 600px) {
    .table-container {
        .table-header, .table-body {
            grid-template-columns: 1fr;
        }

        .table-cell {
            display: block;
            text-align: left;
        }

        .table-cell::before {
            content: attr(data-header);
            font-weight: bold;
            display: block;
            margin-bottom: 5px;
        }

        .table-header .table-cell::before {
            display: none;
        }
    }

}