.farris-ui-datatable {
    display: flex;
    flex-direction: column;
    height: 100%;
    font-size: 13px;
    table {
        border-collapse: collapse;
        width: 100%;
        table-layout: fixed;
    }
    .farris-table-header {
        position: relative;
        // overflow: hidden;
        min-height: 34px;
        thead>tr>th {
            padding: 0.571em 0.857em;
            border: 1px solid #c8c8c8;
            font-weight: 700;
            color: #333333;
            background-color: #ffffff;
            border-top: 0;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            .tt-checkbox {
                margin-right: 0;
                vertical-align: top;
                min-height: 1rem;
            }
        }
        thead>tr>th:first-child {
            border-left: 0;
        }
        thead>tr>th:last-child {
            border-right: 0;
        }
        .checkbox-cell {
            width: 40px;
        }
    }
    .farris-table-scorllable-body {
        overflow: hidden; // flex: 1 auto;
        .ui-table-tbody {
            tr>td {
                background: inherit;
                border: 1px solid #c8c8c8;
                padding: 6px 10px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
            .tt-checkbox {
                margin-right: 0;
                vertical-align: top;
            }
            .checkbox-cell {
                width: 40px;
            }
        }
        .row-hight-light {
            background-color: #b7d7ff;
            color: #000;
        }
        .ui-table-tbody tr:not(.row-hight-light):hover {
            cursor: pointer;
            background-color: #e7f2ff;
        }
        .ui-table-tbody>tr:first-child>td {
            border-top: 0;
        } // .ui-table-tbody>tr:last-child>td {
        //     border-bottom: 0;
        // }
        table>.ui-table-tbody>tr>td:last-child {
            border-right: 0;
        }
        table>.ui-table-tbody>tr>td:first-child {
            border-left: 0;
        }
    }
    .farris-table-pager {
        background-color: #f3f3f3;
        height: 50px;
        min-height: 50px;
        width: 100%;
        border-top: 1px solid #c8c8c8;
    }
}

.filter-row {
    display: flex;
    margin: 10px 0;
    .search-fields {
        min-width: 140px;
    }
    .search-text {
        flex: 1;
        margin-left: 10px;
        .btn-outline-secondary {
            border-color: #CED4DA;
            &:focus {
                box-shadow: none;
            }
            &:active {
                box-shadow: none;
            }
        }
    }
    .form-control:focus {
        border-color: #CED4DA;
        box-shadow: none;
    }
    .custom-select:focus {
        box-shadow: none;
    }
}

.farris-table-footer {
    @extend .farris-table-header;
}

.farris-datatable {
    position: relative;
}

.resizable-column {
    background-clip: padding-box;
    position: relative;
}

.column-resizer {
    display: block;
    position: absolute !important;
    top: 0;
    right: 0;
    margin: 0;
    width: .5em;
    height: 100%;
    padding: 0;
    cursor: col-resize;
    border: 1px solid transparent;
}

.column-resizer-helper {
    width: 1px;
    position: absolute;
    z-index: 10;
    display: none;
    background-color: #6c757d;
    opacity: .6;
}

.farris-table-fixed-header,
.farris-table-fixed-body {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    box-shadow: 2px 0 6px -2px rgba(0, 0, 0, .2);
}

.farris-table-fixed-right-header,
.farris-table-fixed-right-body {
    position: absolute;
    top: 0;
    right: 0;
    overflow: hidden;
    box-shadow: -2px 0 6px -2px rgba(0, 0, 0, .2);
}

.td-hidden {
    visibility: hidden;
}

// 不同分辨率 td需要隐藏
@media (min-width:576px) {
    .td-sm-hidden {
        visibility: hidden !important;
    }
    .td-sm-visible {
        visibility: visible !important;
    }
}

@media (min-width:768px) {
    .td-md-hidden {
        visibility: hidden !important;
    }
    .td-md-visible {
        visibility: visible !important;
    }
}

@media (min-width:992px) {
    .td-lg-hidden {
        visibility: hidden !important;
    }
    .td-lg-visible {
        visibility: visible !important;
    }
}

@media (min-width:1200px) {
    .td-xl-hidden {
        visibility: hidden !important;
    }
    .td-xl-visible {
        visibility: visible !important;
    }
}