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

.datatable-icon-search {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAQAAABIkb+zAAADf0lEQVR4AeyaA/DdThDHt3YHf7M2kttv7fZ1WNsd1e0YtUe13THrdlTbtm3bTK295+TyUz47etrL97KX27d7FBAQEBAQEBAQkCxl/+M+mIwF2Myn+QU/wVnehAWYzH2sfyh1YymM4ANwoth+jABTasSuzrvhxGe8265OqYlyhbEUToK2VBWgVEEWjMArOIkbv8AIykIpC/7i7XCSN96Ovyjl4Cq4A8el3eEqlDKgPV7D8cBeoz35j6oaJfLv8BSuV76s+rtgzoI58ZdVRoUwme9F/P4rVZX8xS4Y6XJ4BZoiG4UB2dCUV0T41b3yhcg/kC3CdrUqdjyjBlaFlXBAyjYIxoaN5FYUJ6pz2PAbR/5gVeJ3egjY1SgBUEMPQX5nVSIfyMTHtLl7YBejBLGL4YEm4RhlItOoxvrMqfpJeaqv30nVmEzDGzQBA5P2NVD6wnrT8V9cG3IfuQB7NX8lySQ8Wg7oLhGwq2n+RpNJcE0Mt4xcwsuEx6tkjvIl5HzZdcglqOtjEHF3MdRdDx57mbSMtpc5ATPFUHPIAzBXeJ1hTsBGMZQnabBqJ1bBRnMCLohtp5YnAmqJablIppD5i1XcyN5yl0wht/4S+cgDSuQTIfSWTCGT4DJ5yQPK5JWJeVoPoYdkClwUi7g2eYCqLQRcNidgvYjWDt5UN4TXDeYEzBBzNdfIRjbXv1TijgelwSy4K+5AVzIFSmr/oELkEhWSPq0yZA6+ZTqdxjUyCY/REupq7qqr0h9PIYnZIMJeV/72aQJAZuG1moT+lCTor13+VjINN/KsrBIKUyBrSMbJhCNeFLa4qF7YwhbyA1R2X1q0q4UrLTLIHzAuXHE3/sSCO4RrjfBU8osy2bEfThhbyVXiaMeG7xGcKZrf18ZqMg0OuwnWwQlrz1DS98Z29BaTCpUva/3zb66COdXf5cuqEE8RkoUAP54/YSPZa+Oh5B92NQ/arA/5rXinH/mH9Q9vdXX5F63iaAonBSVQFjWcXyTZH56BX+kDcFJWAqkCSRz2WMlF6QtwUkaCfCrtj3uhblPt6AfgpJAECRgjYxx4OswDUYQEPCylJciF3QeTMf/TkbMnX7apLTxatVR/k8R/Cabg9+3PMREAIADDQDShjBH5jBXAQrmPgjzC7wQEhLkQEBAQ7kMIoJOQ/UpC9nsJe3QVQu1+CO/vS5IkSQd2zX60cmQg4gAAAABJRU5ErkJggg==);
    display: inline-block;
    background-repeat: no-repeat;
    background-size: contain;
}

// 不同分辨率 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;
    }
}