/* ==========================================
   SPORTACTUA CSS
========================================== */

:root {

    --si-primary: #81d742;
    --si-primary-dark: #69b52f;

    --si-dark: #254018;
    --si-text: #374151;

    --si-border: #dcefc7;

    --si-row-even: #f7fcf1;
    --si-row-hover: #edf8e2;

}

/* ==========================================
   TABELLEN
========================================== */

.si-table {

    width: 100%;

    border-collapse: separate;
    border-spacing: 0;

    border: 3px solid var(--si-primary);

    border-radius: 15px;

    overflow: hidden;

    background: #ffffff;

    margin: 20px 0;

}

.si-table th {

    background: var(--si-primary);

    color: #ffffff;

    padding: 12px;

    text-align: center;

    font-weight: 600;

    border: none;

}

.si-table th.si-team-header {

    text-align: left;

    padding-left: 20px;

}

.si-table td {

    padding: 12px;

    border-bottom: 1px solid var(--si-border);

    text-align: center;

    color: var(--si-text);

}

.si-table tr:last-child td {

    border-bottom: none;

}

.si-table tbody tr:nth-child(even) {

    background: var(--si-row-even);

}

.si-table tbody tr:hover {

    background: var(--si-row-hover);

}

/* ==========================================
   PLOEGEN
========================================== */

.si-team {

    text-align: left !important;

    padding-left: 20px !important;

}

.si-team-header {

    text-align: left !important;

    padding-left: 20px !important;

}

/* ==========================================
   TITELS
========================================== */

h2 {

    color: var(--si-primary-dark);

}

h3 {

    color: var(--si-primary-dark);

}

/* ==========================================
   WORDPRESS BUTTONS
========================================== */

.button-primary {

    background: var(--si-primary) !important;

    border-color: var(--si-primary-dark) !important;

}

.button-primary:hover {

    background: var(--si-primary-dark) !important;

}

/* ==========================================
   RESPONSIVE TABLETS
========================================== */

@media (max-width: 768px) {

    .si-table {

        display: block;

        overflow-x: auto;

        white-space: nowrap;

        font-size: 13px;

    }

    .si-table th,
    .si-table td {

        padding: 8px 6px;

    }

    .si-team,
    .si-team-header {

        min-width: 140px;

        padding-left: 8px !important;

    }

}

/* ==========================================
   RESPONSIVE SMARTPHONES
========================================== */

@media (max-width: 480px) {

    .si-table {

        font-size: 12px;

    }

    .si-table th,
    .si-table td {

        padding: 6px 4px;

    }

    .si-team,
    .si-team-header {

        min-width: 120px;

    }

}