.farris-treetable {
    position: relative;
    table {
        border-collapse: collapse;
        width: 100%;
        table-layout: fixed;
    }
    .farris-treetable-thead {
        table thead th,
        th {
            padding: 0.571em 0.857em;
            border: 1px solid #c8c8c8;
            font-weight: 700;
            color: #333333;
            background-color: #f4f4f4;
            .tt-checkbox {
                margin-right: 0;
                vertical-align: top;
            }
        }
        .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;
        }
    }
    .farris-treetable-tbody {
        tr {
            background: #ffffff;
            color: #333333;
            &:not(.farris-table-selectedrow):hover {
                cursor: pointer;
                background-color: #e7f2ff;
            }
            &.farris-table-selectedrow {
                background-color: #b7d7ff;
            }
        }
        td {
            background: inherit;
            border: 1px solid #c8c8c8;
            padding: 0.429em 0.857em;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            .tt-checkbox {
                margin-right: 0;
                vertical-align: top;
            }
            .treetable-toggler {
                background-size: 16px;
                background-position: 50% 50%;
                background-repeat: no-repeat;
                padding-right: 6px;
                width: 16px;
                height: 22px;
                display: inline-block;
                vertical-align: top;
                content: " ";
                background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23979797' d='M6 4v8l4-4-4-4zm1 2.414L8.586 8 7 9.586V6.414z'/%3E%3C/svg%3E");
            }
            .treenode-icon {
                width: 16px;
                height: 22px;
                display: inline-block;
                background-position: 50% 50%;
                vertical-align: top;
                background-repeat: no-repeat;
            }
            .folder {
                background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 4H4c-1.11 0-2 .89-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8c0-1.11-.9-2-2-2h-8l-2-2z' fill='#90a4ae' /%3E%3C/svg%3E");
            }
            .folder-open {
                background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19 20H4c-1.11 0-2-.9-2-2V6c0-1.11.89-2 2-2h6l2 2h7a2 2 0 0 1 2 2H4v10l2.14-8h17.07l-2.28 8.5c-.23.87-1.01 1.5-1.93 1.5z' fill='#90a4ae' /%3E%3C/svg%3E");
            }
            .file {
                background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg version='1.1' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m13 9h5.5l-5.5-5.5v5.5m-7-7h8l6 6v12a2 2 0 0 1 -2 2h-12c-1.11 0-2-.9-2-2v-16c0-1.11.89-2 2-2m5 2h-5v16h5 7v-9h-7v-7z' fill='#42a5f5'/%3E%3C/svg%3E");
            }
            .extanded.treetable-toggler {
                background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000000' d='M11 10H5.344L11 4.414V10z'/%3E%3C/svg%3E")
            }
        }
    }
    .column-resizer-helper {
        width: 1px;
        position: absolute;
        z-index: 10;
        display: none;
        background-color: #6c757d;
        opacity: .6;
    }
}

.farris-treetable.fixed {
    border: 1px solid #C8C8C8;
    box-sizing: border-box;
    overflow: hidden;
    .farris-treetable-tbody {
        tr td:first-child {
            border-left: 0;
        }
        tr td:last-child {
            border-right: 0;
        }
        tr:first-child td {
            border-top: 0;
        }
    }
    .farris-treetable-thead {
        th:first-child {
            border-left: 0;
        }
        th:last-child {
            border-right: 0;
        }
        tr:first-child th {
            border-top: 0;
        }
    }
}