body {
    background-color:#f8f9fa
}
@media all and (display-mode: standalone) {
    body {
        /*background-color: yellow;*/
    }
}
.description {
    font-style: italic;
    color:#4e4e4e
}


.message {
    padding: 8px;
    border: 1px solid;
    border-radius: 4px;
}

.message.good {
    background-color: var(--bs-success-bg-subtle);
    border-color:var(--bs-success);
    color:var(--bs-success)
}


.message.bad {
    background-color: var(--bs-danger-bg-subtle);
    border-color:var(--bs-danger);
    color:var(--bs-danger)
}


.message.error {
    background-color: var(--bs-danger-bg-subtle);
    border-color:var(--bs-danger);
    color:var(--bs-danger)
}


.card, .list-group {
    border:0;
    box-shadow: var(--bs-box-shadow-sm);
}

.card > table {
    margin-top:1rem;
}


@media (max-width: 768px) {
    .tabulator-row {
        padding: 0.5rem 0.25rem;
        font-size: 0.9rem;
    }

    .tabulator-cell {
        padding: 0.5rem 0.25rem;
    }
}
@media (max-width: 768px) {
    .tabulator-table {
        border: none;
    }

    .tabulator-row {
        display: block;
        margin-bottom: 1rem;
        border: 1px solid #dee2e6;
        border-radius: 0.5rem;
        padding: 0.75rem;
    }

    .tabulator-cell {
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid #f1f1f1;
        padding: 0.5rem 0;
    }

    .tabulator-cell:last-child {
        border-bottom: none;
    }
}
.tabulator {
    overflow-x: auto;
}