.tabulator {
    border: 1px solid var(--grayM);
}

.tabulator .tabulator-header {
    border-bottom: 1px solid var(--grayM);
}

.tabulator .tabulator-header .tabulator-col {
    background: #fff;
    border-right: 1px solid var(--grayM);
    text-align: center;
    transition: all .3s ease 0s;
}
.tabulator .tabulator-header .tabulator-col.tabulator-sortable.tabulator-col-sorter-element:hover {
    background: #e8e8e8;
    transition: all .3s ease 0s;
}

.tabulator-row.tabulator-selectable:hover {
    background: #fff;
    cursor: default;
}

.tabulator-row.tabulator-row {
    border-bottom: 1px solid var(--grayM);
    background: #fff;
}

.tabulator .tabulator-table .tabulator-row .tabulator-cell {
    text-align: center;
    border-right: 1px solid var(--grayM);
    padding: 15px;
}

.tabulator-row .tabulator-responsive-collapse {
    border-bottom: 1px solid var(--grayM);
    border-top: 1px solid var(--grayM);
    padding: 0px;
}

.tabulator-card-container {
    display: flex;
    flex-wrap: wrap;
}

.tabulator-card {
    flex: 1 1 50%;
    border: 1px solid var(--grayM);
    padding: 10px;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.tabulator-card-container .tabulator-card span {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tabulator-card-container .tabulator-card:last-child {
    flex: 1 1 100%;
    margin-bottom: 20px;
}

.tabulator-card-container .tabulator-card span .request-options {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
}
.tabulator-card-container .tabulator-card span .request-user img,
.tabulator-card-container .tabulator-card span .channel-field img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
}

.tabulator .tabulator-footer {
    border: none;
    background-color: #fff;
}

.tabulator .tabulator-paginator {
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 10px 0px;
}
.tabulator .tabulator-paginator button[data-page="first"],
.tabulator .tabulator-paginator button[data-page="last"] {
    display: none;
}

.tabulator .tabulator-paginator button[data-page="prev"],
.tabulator .tabulator-paginator button[data-page="next"] {
    padding: 10px 16px;
    margin: 0;
    border: 1px solid #DAE0E6;
    border-radius: 0;
    height: 40px;
}
.tabulator .tabulator-paginator button[data-page="prev"] img,
.tabulator .tabulator-paginator button[data-page="next"] img {
    margin: 0;
}
.tabulator .tabulator-paginator button[data-page="prev"] {
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
}
.tabulator .tabulator-paginator button[data-page="next"] {
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
}
.tabulator .tabulator-paginator button[data-page="prev"]:hover,
.tabulator .tabulator-paginator button[data-page="next"]:hover {
    background: #fff;
}

.tabulator .tabulator-paginator .tabulator-pages {
    margin: 0;
}
.tabulator .tabulator-paginator .tabulator-pages .tabulator-page {
    height: 40px;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 500;
    color: #000;
    border: 1px solid #DAE0E6;
    margin: 0;
    border-radius: 0;
}
.tabulator .tabulator-paginator .tabulator-pages .tabulator-page.active {
    color: #0288FF;
}
.tabulator .tabulator-paginator .tabulator-pages .tabulator-page:hover {
    background: #fff;
    color: #0288FF;
}

.tabulator .tabulator-alert-msg {
    width: 100%;
    border: none !important;
}


.tabulator .tabulator-placeholder {
    background-color: #fff;
}
.tabulator .tabulator-placeholder .tabulator-placeholder-contents {
    background-color: #fff;
}
.tabulator .tabulator-placeholder .tabulator-placeholder-contents p {
    text-align: center; 
    font-size: 16px; 
    color: #000;
}


.tabulator-cell .user-field {
    display: flex;
    align-items: center;
    /* justify-content: center; */
    gap: 10px;

    font-size: 14px;
    line-height: 17px;
    color: var(--blue);
}
.tabulator-cell .user-field img {
    width: 46px;
    height: 46px;
    border-radius: 50%;
}

.tabulator-cell .status {
    border-radius: 44px;
    background: rgba(52, 201, 159, 0.10);
    color: var(--green);
    font-size: 12px;
    line-height: 20px;
    padding: 5px 10px;
}
.tabulator-cell .status.warning {
    background: #ffa5004a;
    color: var(--orange);
}
.tabulator-cell .status.danger {
    background: rgba(253, 40, 37, 0.10);
    color: var(--red);
}

.table-loader-overlay {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    background: transparent;
}


.tabulator-cell .actions-wrapper {
    display: flex;
    gap: 5px;
    justify-content: center;
    align-items: center;
}