table.flex-table {
    display: flex;
    flex-direction: column;
    border: 1px solid #ddd;
    height: 295px; /*Fixed height */
    position: relative; /*    For absolute positioning of scrollbar*/
    border-radius: 4px;
}

table.flex-table-child {
    display: flex;
    flex-direction: column;
    border: 1px solid #ddd;
    position: relative;
    border-radius: 4px;
    /* No fixed height */
}

.flex-table td {
    vertical-align: middle;
}

.flex-header {
    font-weight: bold;
    color: #fff;
    font-size: 14px;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
}

.flex-header-default {
    background-color: #f8f9fa;
}

.flex-header-info-light {
    background-color: #bce8f1;
}

.flex-header-primary {
    background-color: #337ab7;
}

.flex-header-success {
    background-color: #5cb85c;
}

.flex-header-warning {
    background-color: #f0ad4e;
}

.flex-header-danger {
    background-color: #d9534f;
}

.flex-header-info {
    background-color: #5bc0de;
}

.flex-header-dark {
    background-color: #4e5154;
}


.flex-body-wrapper {
    position: relative;
    flex-grow: 1;
    overflow: auto; /*Hide the default scrollbar */
}


.flex-body {
    position: absolute;
    top: 0;
    left: 0;
    right: -17px; /*Hide default scrollbar */
    bottom: 0;
    overflow-y: scroll; /*    Compensate for hidden scrollbar*/
}

.flex-row {
    display: flex;
    border-bottom: 1px solid #ddd;
}

.flex-cell {
    flex: 1;
    padding: 10px;
    display: flex;
    align-items: flex-start;
    word-wrap: break-word; /* Allow long words to break and wrap */
    overflow: hidden;
    text-overflow: ellipsis; /* Truncate text with ellipsis */
}

    .flex-cell:not(:last-child) {
        border-right: 1px solid #ddd;
    }

.flex-cell-email {
    flex: 2; /* Increase the width for the email column */
}

.flex-cell-center {
    justify-content: center;
}

.action-cell {
    /*flex: 0 0 30%;*/
    justify-content: center;
    gap: 5px;
    /*max-width: 120px !important;*/
}

    .action-cell > button {
        margin-right: 5px;
    }

/* default (no extra margin) */
.action-cell-header {
    margin-right: 0;
}
/* when JavaScript adds the “.overflowing” modifier */
.flex-table.overflowing .action-cell-header {
    margin-right: 5px !important;
}

/* Custom Sizes for Specific Cells (Percentage-Based) */
.flex-cell-custom-10 {
    flex: 0 0 10%; /* 10% width */
}

.flex-cell-custom-15 {
    flex: 0 0 15%; /* 10% width */
}

.flex-cell-custom-20 {
    flex: 0 0 20%; /* 20% width */
}

.flex-cell-custom-30 {
    flex: 0 0 30%; /* 30% width */
}

.flex-cell-custom-40 {
    flex: 0 0 40%; /* 40% width */
}

.flex-cell-custom-50 {
    flex: 0 0 50%; /* 50% width */
}

.flex-cell-custom-60 {
    flex: 0 0 60%; /* 60% width */
}

.flex-cell-custom-70 {
    flex: 0 0 70%; /* 70% width */
}

.flex-cell-custom-80 {
    flex: 0 0 80%; /* 80% width */
}

.flex-cell-custom-90 {
    flex: 0 0 90%; /* 90% width */
}

.flex-cell-custom-100 {
    flex: 0 0 100%; /* 100% width */
}

.flex-td {
    display: flex;
    align-items: center; /* Vertically center */
}

.hidden {
    display: none;
}
/* Custom scrollbar styles */
.custom-scrollbar {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 5px;
    background-color: #f1f1f1;
    pointer-events: painted;
    cursor: pointer;
}

.custom-scrollbar-thumb {
    position: absolute;
    right: 0;
    width: 8px;
    background-color: #888;
    border-radius: 4px;
}

    .custom-scrollbar-thumb:hover {
        background-color: #555;
    }

.clamp-lines {
    display: -webkit-box; /* Enables the flexbox for multi-line clamp */
    -webkit-box-orient: vertical; /* Sets the box orientation to vertical */
    -webkit-line-clamp: 4; /* Limits the text to 3 lines */
    overflow: hidden; /* Hides the overflowing text */
    text-overflow: ellipsis; /* Adds an ellipsis (...) at the end */
}

.responsive-image {
    width: 100%; /* Makes the image responsive within its cell */
    max-width: 150px; /* Sets a maximum width to prevent it from getting too large */
    height: auto; /* Maintains the image's aspect ratio */
    border-radius: 5px; /* Optional: Adds rounded corners */
    object-fit: cover; /* Ensures the image fills the box without distortion */
}

/* Default width for desktop/tablet */
.custom-img-width {
    width: 50%; /* normal width */
}

@media screen and (max-width: 600px) {
    .flex-table {
        height: 365px;
        overflow: hidden; /* Allow horizontal and vertical scrolling */
    }
    .flex-header .flex-th:not(:first-child) {
        display: none;
    }

    .flex-header {
        display: none;
    }
    .flex-row {
        display: inherit !important;
        border: 1px solid #ccc;
        margin-bottom: 10px;
    }

    .flex-td, .flex-th {
        display: block;
        clear: both;
    }
        .flex-td[data-label]:before {
            content: attr(data-label);
            float: left;
            width: 50%;
            white-space: nowrap;
            font-weight: bold;
            font-size: 1rem;
            margin-bottom: 8px;
        }

    .flex-cell {
        display: flex;
        justify-content: space-between;
        padding: 4px 10px;
        white-space: normal;
        border-bottom: 1px solid  #ddd;
    }

    .flex-cell-center {
        justify-content: space-between;
    }

    .action-cell {
        gap: 5px;
        max-width: unset !important;
    }


    .btn-details{
        display: none;
    }

    .custom-img-width {
        width: 25%; /* remove the 25% */
        max-width: 100%; /* responsive */
    }
}