
.render-array-dropdown-column {

    position: relative;

    .dropdown {

    }

    // .col-badge {

    //     position: absolute;
    //     top: 50%;
    //     left: 50%;
    //     transform: translate(-50%, -50%);
    //     background-color: var(--bs-danger);
    //     border-radius: 50%;
    //     width: 1.25rem;
    //     height: 1.25rem;
    //     display: flex;
    //     justify-content: center;
    //     align-items: center;
    //     flex-shrink: 0;

    //     >* {

    //     }

    // }

    button[data-bs-toggle="dropdown"] {

        position: relative;
        width: 100%;
        height: 100%;
        border: 0;
        padding: 0;
        background: none;

    }

    // .col-badge {

    //     position: absolute;
    //     top: 0;
    //     right: 100%;
    //     transform: translateY(-100%);
    //     background-color: var(--bs-danger);

    // }

    .dropdown-menu {

        border: none;
        padding: 0.25rem;
        box-shadow: var(--bs-box-shadow);
        border-radius: var(--bs-border-radius-sm);
        background-color: var(--bs-tertiary-bg);

        .dropdown-item {

            border-radius: var(--bs-border-radius-sm);

            &:hover, &:focus { background-color: var(--bs-body-bg); }

        }

    }

}







.table {
    color: var(--bs-body-color) !important;
}

.table tbody tr.selected > * {
    box-shadow: inset 0 0 0 9999px rgba(var(--bs-secondary-bg-rgb), 0.9) !important;
    color: var(--bs-body-color) !important;
}

.table.dataTable > tbody > tr.selected a {
    color: var(--bs-link-color) !important;
}

/* Fuck ugly <td> height fix */
td {
    height: 1px;
    text-wrap: nowrap;
}
td > .btn-link { padding-left: 0; }
  
@-moz-document url-prefix() {
    tr { height: 100%; }
    td { height: 100%; }
}


/* Empty Table */

.table .dt-empty {
    padding: 2rem 0;
    border-bottom: none !important;
}

.table tr:hover > .dt-empty {
    box-shadow: none !important;
}


/* Table Search */

.table-search-group {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    width: 100%;
    max-width: 450px;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.25rem;
    background-color: var(--bs-body-bg);
    overflow: hidden;
}

.table-search-label {
    display: flex;
    align-items: center;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--bs-body-color);
    text-align: center;
    white-space: nowrap;
    padding-right: 0;
    border: none;
    background-color: inherit;
}

.table-search-input {
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--bs-body-color);
    appearance: none;
    background-clip: padding-box;
    position: relative;
    flex: 1 1 auto;
    width: 1%;
    min-width: 0;
    border: none;
    border-radius: 0;
    background-color: inherit
}

.table-search-input:focus {
    outline: 0;
    box-shadow: none;
}


/* Button Controls */

.table-search-buttons > div {
    margin-left: 1rem;
}

@media (max-width: 576px) {
    .table-search-buttons > div {
        margin-left: 0.25rem;
    }
}

.table-search-buttons > div:first-of-type {
    margin-left: 0 !important;
}


/* Table Border Colour */

table.dataTable > thead > tr > th, table.dataTable > thead > tr > td {
    border-bottom: 1px solid var(--bs-border-color);
}

div.dt-container.dt-empty-footer tbody > tr:last-child > * {
    border-bottom: 1px solid var(--bs-border-color);
}


/* Cell Data Types */

.table-cell-hex {
    margin: 0 auto;
    width: 25px;
    height: 25px;
    border-radius: 0.25rem;
}