smart-table {
    width: 100%;
    max-width: 100%;
    margin-bottom: 1rem;
    background-color: transparent;
    font-family: var(--smart-font-family);
    font-size: var(--smart-font-size);
}

.smart-table-container {
    width: 100%;
    height: 100%;
}

smart-table th,
smart-table td {
    padding: 0.75rem;
    vertical-align: top;
    border-top: 1px solid #dee2e6;
}

smart-table thead th {
    vertical-align: bottom;
    border-bottom: 2px solid #dee2e6;
}

    smart-table thead th .sort-by {
        padding-right: 18px;
        position: relative;
        user-select: none;
    }

        smart-table thead th .sort-by.asc:before,
        smart-table thead th .sort-by.desc:after {
            border: 4px solid transparent;
            content: "";
            display: block;
            height: 0;
            right: 5px;
            top: 50%;
            position: absolute;
            width: 0;
        }

        smart-table thead th .sort-by.asc:before {
            border-bottom-color: #666;
            margin-top: -5px;
        }

        smart-table thead th .sort-by.desc:after {
            border-top-color: #666;
            margin-top: 1px;
        }

smart-table.table-dark thead th .sort-by.asc:before {
    border-bottom-color: #fff;
}

smart-table.table-dark thead th .sort-by.desc:after {
    border-top-color: #fff;
}

smart-table.thead-dark th .sort-by.asc:before {
    border-bottom-color: #fff;
}

smart-table.thead-dark thead th .sort-by.desc:after {
    border-top-color: #fff;
}

smart-table tbody + tbody {
    border-top: 2px solid #dee2e6;
}

smart-table smart-table {
    background-color: #fff;
}

.smart-table-sm th,
.smart-table-sm td {
    padding: 0.3rem;
}

smart-table.table-bordered table {
    border: 1px solid #dee2e6;
}

    smart-table.table-bordered table th,
    smart-table.table-bordered table td {
        border: 1px solid #dee2e6;
    }

    smart-table.table-bordered table thead th,
    smart-table.table-bordered table thead td {
        border-bottom-width: 2px;
    }

smart-table.table-striped table tbody tr:nth-of-type(odd) {
    background-color: rgba(0, 0, 0, 0.05);
}

smart-table.table-hover table tbody tr:hover {
    background-color: rgba(0, 0, 0, 0.075);
}

.smart-table-primary,
.smart-table-primary > th,
.smart-table-primary > td {
    background-color: #b8daff;
}

smart-table.table-hover table .smart-table-primary:hover {
    background-color: #9fcdff;
}

    smart-table.table-hover table .smart-table-primary:hover > td,
    smart-table.table-hover table .smart-table-primary:hover > th {
        background-color: #9fcdff;
    }

.smart-table-secondary,
.smart-table-secondary > th,
.smart-table-secondary > td {
    background-color: #d6d8db;
}

smart-table.table-hover table .smart-table-secondary:hover {
    background-color: #c8cbcf;
}

    smart-table.table-hover table .smart-table-secondary:hover > td,
    smart-table.table-hover table .smart-table-secondary:hover > th {
        background-color: #c8cbcf;
    }

.smart-table-success,
.smart-table-success > th,
.smart-table-success > td {
    background-color: #c3e6cb;
}

smart-table.table-hover table .smart-table-success:hover {
    background-color: #b1dfbb;
}

    smart-table.table-hover table .smart-table-success:hover > td,
    smart-table.table-hover table .smart-table-success:hover > th {
        background-color: #b1dfbb;
    }

.smart-table-info,
.smart-table-info > th,
.smart-table-info > td {
    background-color: #bee5eb;
}

smart-table.table-hover table .smart-table-info:hover {
    background-color: #abdde5;
}

    smart-table.table-hover table .smart-table-info:hover > td,
    smart-table.table-hover table .smart-table-info:hover > th {
        background-color: #abdde5;
    }

.smart-table-warning,
.smart-table-warning > th,
.smart-table-warning > td {
    background-color: #ffeeba;
}

smart-table.table-hover table .smart-table-warning:hover {
    background-color: #ffe8a1;
}

    smart-table.table-hover table .smart-table-warning:hover > td,
    smart-table.table-hover table .smart-table-warning:hover > th {
        background-color: #ffe8a1;
    }

.smart-table-danger,
.smart-table-danger > th,
.smart-table-danger > td {
    background-color: #f5c6cb;
}

smart-table.table-hover table .smart-table-danger:hover {
    background-color: #f1b0b7;
}

    smart-table.table-hover table .smart-table-danger:hover > td,
    smart-table.table-hover table .smart-table-danger:hover > th {
        background-color: #f1b0b7;
    }

smart-table.table-light table,
smart-table.table-light table > th,
smart-table.table-light table > td {
    background-color: #fdfdfe;
}

smart-table.table-hover table smart-table.table-light table:hover {
    background-color: #ececf6;
}

    smart-table.table-hover table smart-table.table-light table:hover > td,
    smart-table.table-hover table smart-table.table-light table:hover > th {
        background-color: #ececf6;
    }

smart-table.table-dark table,
smart-table.table-dark table > th,
smart-table.table-dark table > td {
    background-color: #c6c8ca;
}

smart-table.table-hover table smart-table.table-dark table:hover {
    background-color: #b9bbbe;
}

    smart-table.table-hover table smart-table.table-dark table:hover > td,
    smart-table.table-hover table smart-table.table-dark table:hover > th {
        background-color: #b9bbbe;
    }

.smart-table-active,
.smart-table-active > th,
.smart-table-active > td {
    background-color: rgba(0, 0, 0, 0.075);
}

smart-table.table-hover table .smart-table-active:hover {
    background-color: rgba(0, 0, 0, 0.075);
}

    smart-table.table-hover table .smart-table-active:hover > td,
    smart-table.table-hover table .smart-table-active:hover > th {
        background-color: rgba(0, 0, 0, 0.075);
    }

smart-table.thead-dark table th {
    color: #fff;
    background-color: #212529;
    border-color: #32383e;
}

smart-table.thead-primary table th {
    color: var(--smart-primary-color);
    background-color: var(--smart-primary);
    border-color: var(--smart-primary);
}

smart-table.thead-secondary table th {
    color: var(--smart-secondary-color);
    background-color: var(--smart-secondary);
    border-color: var(--smart-secondary);
}

smart-table.thead-surface table th {
    color: var(--smart-surface-color);
    background-color: var(--smart-surface);
    border-color: var(--smart-surface);
}

smart-table.thead-light table th {
    color: #495057;
    background-color: #e9ecef;
    border-color: #dee2e6;
}

smart-table.table-dark table {
    color: #fff;
    background-color: #212529;
}

    smart-table.table-dark table th,
    smart-table.table-dark table td,
    smart-table.table-dark table thead th {
        border-color: #32383e;
    }

smart-table.table-dark.table-bordered table {
    border: 0;
}

smart-table.table-dark.table-striped table tbody tr:nth-of-type(odd) {
    background-color: rgba(255, 255, 255, 0.05);
}

smart-table.table-dark.table-hover table tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.075);
}

@media (max-width: 575.98px) {
    smart-table.table-responsive-sm {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        -ms-overflow-style: -ms-autohiding-scrollbar;
    }

        smart-table.table-responsive-sm > smart-table.table-bordered table {
            border: 0;
        }
}

@media (max-width: 767.98px) {
    smart-table.table-responsive-md {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        -ms-overflow-style: -ms-autohiding-scrollbar;
    }

        smart-table.table-responsive-md > smart-table.table-bordered table {
            border: 0;
        }
}

@media (max-width: 991.98px) {
    smart-table.table-responsive-lg {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        -ms-overflow-style: -ms-autohiding-scrollbar;
    }

        smart-table.table-responsive-lg > smart-table.table-bordered table {
            border: 0;
        }
}

@media (max-width: 1199.98px) {
    smart-table.table-responsive-xl {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        -ms-overflow-style: -ms-autohiding-scrollbar;
    }

        smart-table.table-responsive-xl > smart-table.table-bordered table {
            border: 0;
        }
}

smart-table.table-responsive {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
}

    smart-table.table-responsive > smart-table.table-bordered table {
        border: 0;
    }