/* General Table Customization */
.table-customization table {
    border-radius: 10px;
    overflow: hidden;
    width: 100%;
    box-sizing: border-box;
    table-layout: fixed;
    word-wrap: break-word;
}

.table-customization .table > thead {
    vertical-align: middle;
}

.table-customization thead tr {
    height: 60px;
    background: #36304a;
}

    .table-customization thead tr th {
        font-size: 18px;
        color: #fff;
        line-height: 1.2;
        font-weight: unset;
        white-space: nowrap;
        padding-bottom: 16px;
    }

.table-customization td,
.table-customization th {
    padding-left: 20px;
}

/* Responsive Stack Table */
.table-responsive-stack td,
.table-responsive-stack th {
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    word-wrap: break-word;
}

.table-responsive-stack .table-responsive-stack-thead {
    font-weight: bold;
    position: absolute;
    top: 8px;
    left: 6px;
    width: 45%;
    padding-right: 10px;
    white-space: nowrap;
    font-size: 14px;
}

.pl-1 {
    padding-left: 4px;
}

/* Responsive Toggle */
.table-responsive-toggle {
    display: flex !important;
    gap: 8px !important;
    position: relative !important;
    padding-left: 50% !important;
    min-height: 50px;
    border-bottom: 1px solid #eee;
}

.action-column {
    max-width: 200px;
    width: 200px;
    white-space: nowrap;
}

/* Mobile View */
@media screen and (max-width: 768px) {
    .table-responsive-stack tr {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        display: block;
    }

    .table-responsive-stack td {
        float: left\9;
        width: 100%;
        flex-direction: column;
        word-wrap: break-word;
    }

    .table > :not(:first-child) {
        border-top: inherit;
    }

    .table-responsive {
        display: block;
        overflow-x: auto;
        box-sizing: border-box;
        width: 100%;
        min-width: 100%;
        max-width: 100vw;
    }
    .btn {
        width: 91% !important;
    }

    .action-column {
        max-width: 100%;
        width: 100%;
    }
}