/* QuickGrid */
.quick-grid {
    border: 1px solid #ffffff; /* ccc Add a border to the grid */
    border-radius: 5px; /* Add rounded corners */
    overflow: hidden; /* Ensure child elements respect the border radius */
}
    /* QuickGrid header and footer cells */
    .quick-grid th.bg-light,
    .quick-grid tfoot td.bg-light {
        background-color: #f8f9fa !important;
        color: #212529 !important;
    }

    /* Striped body rows */
    .quick-grid tr.striped-row:nth-child(odd) {
        background-color: #fff; /* white */
    }

    .quick-grid tr.striped-row:nth-child(even) {
        background-color: #f1f3f4; /* light gray for striping */
    }

    .quick-grid tr.striped-row {
        color: #212529; /* dark text for readability */
    }

    /* Example: Make QuickGrid header bold */
    .quick-grid th {
        font-weight: bold;
    }
/* Ensure all user images are the same size, and centered */
.assignedto {
    width: 2rem;
    height: 1.5rem;
    margin: auto;
}

/* Assign default width to label column */
::deep thead .label {
    width: 15rem;
}

/* Stop country name text from wrapping, and truncate with ellipsis */
::deep tbody .country-name {
    white-space: nowrap;
    overflow: hidden;
    max-width: 0;
    text-overflow: ellipsis;
}

/* Stop the last page from collapsing to the number of rows on it */
::deep tr {
    height: 1.8rem;
}

    /* Subtle stripe effect */
    ::deep tr:nth-child(even) {
        background: rgba(255,255,255,0.4);
    }

/* Magnifying glass */
::deep .country-name .col-options-button {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" /> </svg>');
}

/* QuickGrid Paginatior*/
.quickgrid-pagination {
    display: flex;
    justify-content: center;
    gap: 0.5rem; /* Adjust spacing between buttons */
}

    .quickgrid-pagination button {
        padding: 0.5rem 1rem;
        border: 1px solid #ccc;
        background-color: #f9f9f9;
        cursor: pointer;
    }

        .quickgrid-pagination button:hover {
            background-color: #e0e0e0;
        }