.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;
}

.flex-header {
    font-weight: bold;
    color: #fff;
    font-size: 14px;
    /*border-bottom: 2px solid #ddd;*/
    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 {
    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;
    max-width: 100px !important;
}

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

.action-cell-header {
    margin-right: 5px !important;
}


/* Custom Sizes for Specific Cells */
/* 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 */
}

.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 */
}

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

    /*.flex-body-wrapper {
        overflow-x: auto;*/ /* Enable horizontal scrolling */
        /*overflow-y: auto;*/ /* Disable vertical scrolling (if needed) */
        /*width: 100%;*/ /* Ensure it takes full width */
    /*}*/

    .flex-row {
        flex-wrap: nowrap; /* Prevent rows from wrapping */
        min-width: 600px; /* Ensure rows are wider than the viewport */
    }

    .action-cell {
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: flex-start; /* Align buttons horizontally */
    }
}