:root {
    --green: #7AB700;
    --green-dark: #006A4B;
    --text: #1F2937;
    --muted: #6B7280;
    --line: #E5E7EB;
    --table-head-bg: #EEF8F3;
}

.inner {
    background: #fff;
    padding: 1vh 1vh;
    max-width: 1200px;
}
    /* Naslov stranice */
    .inner h2 {
        color: var(--green-dark);
        font-size: 35px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .4px;
        margin: 0 auto 24px;
    }

    .inner p {
        color: var(--text);
        font-size: 14px;
        line-height: 1.65;
        margin: 0 0 10px 0;
    }


    .inner h3 {
        color: var(--green-dark);
        font-size: 16px;
        font-weight: 700;
        margin: 18px 0 6px 0;
        line-height: 1.3;
    }
    .tg{
        width:100%;
    }

.listauvjeta {
    text-align: left;
}

.tg {
    border-collapse: collapse;
    border-spacing: 0;
}

    .tg td {
        border-color: lightgray;
        border-style: solid;
        border-width: 1px;
        font-family: Arial, sans-serif;
        font-size: 14px;
        overflow: hidden;
        padding: 10px 5px;
        word-break: normal;
    }

    .tg th {
        border-color: lightgray;
        border-style: solid;
        border-width: 1px;
        font-family: Arial, sans-serif;
        font-size: 14px;
        font-weight: normal;
        overflow: hidden;
        padding: 10px 5px;
        word-break: normal;
        color:var(--green-dark);
    }

    .tg .tg-1wig {
        font-weight: bold;
        text-align: left;
        vertical-align: top
    }

    .tg .tg-0lax {
        text-align: left;
        vertical-align: top
    }
/* ========== Responsive table ========== */
@media (max-width: 768px) {
    .tg {
        width: 100%;
    }

        .tg thead {
            /* sakrie zaglavlje na mobitelu, jer prikazujemo labele kroz :before */
            position: absolute;
            left: -9999px;
            top: -9999px;
            height: 0;
            width: 0;
            overflow: hidden;
        }

        .tg tbody tr {
            display: grid;
            grid-template-columns: 1fr 1fr;
            grid-template-areas:
                "c1 c1" /* Naziv preko cijele sirine */
                "c2 c3" /* Domena | Trajanje */
                "c4 c4"; /* Svrha preko cijele širine */
            gap: 8px 12px;
            padding: 12px 0;
            border-top: 1px solid var(--line);
        }

            .tg tbody tr:first-child {
                border-top: 0;
            }

        .tg td {
            border: 0; /* ukloni table okvire na mobile */
            padding: 8px 0 0 0; /* kompaktno */
            font-size: 14px;
        }
    td.tg-0lax {
        /* overflow: auto; */
        font-size: 12px;
    }

            /* mapiranje celija u grid pdorucja */
            .tg td:nth-child(1) {
                grid-area: c1;
            }

            .tg td:nth-child(2) {
                grid-area: c2;
            }

            .tg td:nth-child(3) {
                grid-area: c3;
            }

            .tg td:nth-child(4) {
                grid-area: c4;
            }

            /* labela iz data-label */
            .tg td::before {
                content: attr(data-label);
                display: block;
                font-weight: 700;
                color: var(--green-dark);
                margin-bottom: 3px;
            }

        /* estetika */
        .tg tbody tr {
            background: #fff;
        }
}
@media (max-width:480px) {
    .inner {
        padding: 1vh 1vh;
        max-width: 100%;
    }
        .inner .listauvjeta > h2 {
            font-size: 22px;
            margin-bottom: 10px;
        }
}