.rd200-page {
    --rd200-radius: 1rem;
}

.rd200-card,
.dashboard-box {
    border-radius: var(--rd200-radius, 1rem);
}

.rd200-table thead th,
.rd200-status-table thead th {
    background: #f5f7fa;
    border-bottom: 0;
    color: #586174;
    font-size: .75rem;
    letter-spacing: .04em;
    padding: 1rem;
    text-transform: uppercase;
    white-space: nowrap;
}

.rd200-table td,
.rd200-status-table td {
    padding: 1rem;
}

.rd200-table code,
.credential-box code {
    color: inherit;
}

.credential-box {
    background: #f5f7fa;
    border: 1px solid #e5e9f0;
    border-radius: .75rem;
    padding: 1rem;
}

.credential-label {
    color: #6c757d;
    display: block;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .04em;
    margin-bottom: .35rem;
    text-transform: uppercase;
}

.rd200-status-online > td {
    background: #dff4e5;
}

.rd200-status-warning > td {
    background: #fff3cd;
}

.rd200-status-offline > td {
    background: #f8d7da;
}

@media (max-width: 767.98px) {
    .rd200-table thead {
        display: none;
    }

    .rd200-table,
    .rd200-table tbody,
    .rd200-table tr,
    .rd200-table td {
        display: block;
        width: 100%;
    }

    .rd200-table tr {
        border-bottom: 1px solid #e5e9f0;
        padding: .75rem 1rem;
    }

    .rd200-table td {
        border: 0;
        display: grid;
        gap: .75rem;
        grid-template-columns: minmax(8rem, 38%) 1fr;
        padding: .45rem 0;
        text-align: left !important;
    }

    .rd200-table td::before {
        color: #6c757d;
        content: attr(data-label);
        font-size: .75rem;
        font-weight: 700;
        text-transform: uppercase;
    }

    .rd200-table .btn-group {
        display: grid;
        gap: .4rem;
        grid-column: 2;
    }

    .rd200-table .btn-group .btn {
        border-radius: .375rem !important;
    }
}