@tableThColor: @colorNeutral11;
@tableTdColor: @colorNeutral9;

mor-table{
    width: 100%;
    overflow: auto;
    display: block;
    border: 0 none;
    font-size: @fontSize*0.875;
    background-color: @colorWhite;
    border-radius: @borderRadius;
    border-width: 1px !important;
    border-style: solid !important;
    position: relative;
    box-sizing: border-box;

    .setup-scrollbar();

    .load-mask{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(255, 255, 255, 0.9);
        z-index: 19;
    }

    table{
        border-spacing: 0;
        border-collapse: collapse;
        min-width: 100%;
        table-layout: auto;

        td{
            padding: initial;
            border: initial;
        }
    }

    header{
        position: relative;

        h1{
            margin: 0 !important;
            font-weight: 400 !important;
            text-align: left;
            max-width: 40%;
            position: absolute;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .action{
            margin-left: @fontSize;
        }

        .custom-header{
            max-width: 60%;
            position: absolute;
            right: 10px;
            display: flex;
            align-items: center;
        }
    }

    & > .wrap{
        overflow: hidden !important;
        // width: 100% !important;
        border-width: 0 !important;

        > tbody > tr > td {
            .setup-scrollbar();

            &:first-child{
                z-index: 2;
            }

            &.title-td{
                position: relative;
                z-index: 3;
            }
        }

        tr > td.no-data{
            min-width: @fontSize*3.125;
            overflow: hidden;
            word-break: break-all;
            text-overflow: ellipsis;
        }
    }

    .table{
        display: table;
        min-width: 100%;
        text-align: center;
        color: #666;
        margin: 0;
        box-sizing: content-box !important;
        border-collapse: separate;

        thead{
            tr{
                border-bottom-width: 2px;
                border-bottom-style: solid;
            }
        }

        tbody{
            width: 100%;
        }

        tr th{
            font-weight: 400;
            line-height: 1.2em;
            height: @fontSize*1.25;
            overflow: hidden;
            white-space: nowrap;
            border-bottom-width: 2px;
            border-bottom-style: solid;
            color: @tableThColor;
        }

        > tbody > tr{
            height: @fontSize*2.5;

            &.expand-row{
                background: @colorWhite !important;
                border-top-width: 1px;
                display: none;

                &.open{
                    display: table-row;
                }
            }

            > td{
                min-width: @fontSize*3.125;
                overflow: hidden;
                word-break: break-all;
                text-overflow: ellipsis;
                color: @tableTdColor;

                &.expand-row-col{
                    width: 100%;
                    padding: 0 !important;
                    border: none !important;

                    .expand-row-col-wrap{
                        background: @colorWhite !important;
                        padding: @fontSize;
                        border-top-width: 1px;
                        border-top-style: solid;

                        > mor-table{
                            // border-radius: 0;
                        }
                    }
                }
            }
        }

        .th-sort,
        .th-filters{
            .mo-icon{
                font-size: 12px;
                opacity: 0.35;

                &:hover{
                    cursor: pointer;
                    opacity: 0.7;
                }
            }
        }

        .table-checked{
            min-width: unset;
            width: 1px;

            mor-checkbox{
                // height: @fontSize*1.3125;
                // width: @fontSize*1.3125;
                min-width: unset;

                > .il label{
                    margin: 0;

                    .box{
                        margin: 0;
                    }
                }
            }
        }
    }

    .title-table{
        border-bottom-left-radius: @borderRadius;
        border-top-left-radius: @borderRadius;
    }

    .normal-table{
        border-radius: @borderRadius;
    }

    &.title-col-left-fixed,
    &.title-col-right-fixed{
        position: relative;
        // overflow: hidden;
    }

    &.title-col-right .title-table,
    &.title-col-right-fixed .title-table{
        border-left-style: solid;
        border-left-width: 1px;
        box-shadow: -2px 0 3px rgba(0, 0, 0, 0.08);
    }

    &.title-col-left .title-table,
    &.title-col-left-fixed .title-table{
        border-right-style: solid;
        border-right-width: 1px;
        box-shadow: 2px 0 3px rgba(0, 0, 0, 0.08);
    }

    &.has-title-col{
        .normal-table {
            border-radius: 0 @borderRadius @borderRadius 0;
        }

        .title-table{
            display: table;
        }
    }

    &.align-left .table,
    .cell-align-left{
        text-align: left;
    }

    &.align-center .table,
    .cell-align-center{
        text-align: center;
    }

    &.align-right .table,
    .cell-align-right{
        text-align: right;
    }

    &.vertical-border{
        .table{
            th,
            > tbody > tr > td{
                border-left-width: 1px !important;
                border-left-style: solid !important;
            }

            th:first-child,
            > tbody > tr > td:first-child{
                border-left: none !important;
            }
        }
    }

    &.horizontal-border{
        .table{
            th,
            td{
                border-top-width: 1px !important;
                border-top-style: solid !important;
            }

            tr:first-child th,
            tr:first-child td{
                border-top: none !important;
            }
        }
    }

    &.si-xl{
        & > .wrap{
            tr > td.no-data{
                padding: @fontSize*1.125 !important;
            }
        }

        header{
            height: @fontSize*6;

            h1{
                font-size: @fontSize*2 !important;
                padding: @fontSize*1 @fontSize*1.5 !important;
                line-height: @fontSize*4;
                height: @fontSize*6;
            }

            .custom-header{
                height: @fontSize*6;
            }
        }

        .table tr th{
            padding: @fontSize*1.125 !important;
        }

        .table > tbody{
            font-size: @fontSize*1.125;

            > tr{
                > td{
                    padding: @fontSize*1.125 !important;
                }
            }
        }
    }

    &.si-l{
        & > .wrap{
            tr > td.no-data{
                padding: @fontSize*0.875 !important;
            }
        }

        header{
            height: @fontSize*4.5;

            h1{
                font-size: @fontSize*1.75 !important;
                padding: @fontSize*0.75 @fontSize*1.25 !important;
                line-height: @fontSize*3;
                height: @fontSize*4.5;
            }

            .custom-header{
                height: @fontSize*4.5;
            }
        }

        .table tr th{
            padding: @fontSize*0.875 !important;
        }

        .table > tbody{
            font-size: @fontSize*1;

            > tr{
                > td{
                    padding: @fontSize*0.875 !important;
                }
            }
        }
    }

    &.si-m{
        & > .wrap{
            tr > td.no-data{
                padding: @fontSize*0.625 !important;
            }
        }

        header{
            height: @fontSize*3.25;

            h1{
                font-size: @fontSize*1.5 !important;
                padding: @fontSize*0.5 @fontSize !important;
                line-height: @fontSize*2.25;
                height: @fontSize*3.25;
            }

            .custom-header{
                height: @fontSize*3.25;
            }
        }

        .table tr th{
            padding: @fontSize*0.625 !important;
        }

        .table > tbody{
            font-size: @fontSize*0.875;

            > tr{
                > td{
                    padding: @fontSize*0.625 !important;
                }
            }
        }
    }

    &.si-s{
        & > .wrap{
            tr > td.no-data{
                padding: @fontSize*0.5 !important;
            }
        }

        header{
            height: @fontSize*2.5;

            h1{
                font-size: @fontSize*1.125 !important;
                padding: @fontSize*0.375 @fontSize*0.75 !important;
                line-height: @fontSize*1.75;
                height: @fontSize*2.5;
            }

            .custom-header{
                height: @fontSize*2.5;
            }
        }

        .table tr th{
            padding: @fontSize*0.5 !important;
        }

        .table > tbody{
            font-size: @fontSize*0.8125;

            > tr{
                > td{
                    padding: @fontSize*0.5 !important;
                }
            }
        }
    }

    &.si-xs{
        & > .wrap{
            tr > td.no-data{
                padding: @fontSize*0.1875 !important;
            }
        }

        header{
            height: @fontSize*1.875;

            h1{
                font-size: @fontSize*0.875 !important;
                padding: @fontSize*0.25 @fontSize*0.5 !important;
                line-height: @fontSize*1.375;
                height: @fontSize*1.875;
            }

            .custom-header{
                height: @fontSize*1.875;
            }
        }

        .table tr th{
            padding: @fontSize*0.1875 !important;
        }

        .table > tbody{
            font-size: @fontSize*0.75;

            > tr{
                > td{
                    padding: @fontSize*0.1875 !important;
                }
            }
        }
    }

    &.co-t{
        border-color: darken(@colorTheme, 20%) !important;

        header{
            background-color: darken(@colorTheme, 20%);
            color: @colorWhite;
        }

        .co-style{
            border-color: darken(@colorTheme, 20%) !important;

            th,
            td{
                color: @colorWhite;
            }

            th,
            td,
            tr,
            .expand-row-col-wrap,
            &{
                border-color: darken(@colorTheme, 20%) !important;
            }

            tr{
                background-color: darken(@colorTheme, 15%);
            }
        }

        &.ts-zp .co-style{
            tr.even-row td{
                background-color: darken(@colorTheme, 10%);
            }
        }

        &.ts-zp:not(.no-hover-effect) .table > tbody,
        &:not(.no-hover-effect) .table > tbody{
            > tr:not(.expand-row):hover,
            > tr.hover,
            > tr.last-click{
                td{
                    background-color: darken(@colorTheme, 20%);
                    border-color: darken(@colorTheme, 20%) !important;
                }

                + tr > td{
                    border-top-color: darken(@colorTheme, 20%) !important;
                }
            }
        }

        mor-empty{
            .empty-image i,
            .empty-image i.iconfont,
            .empty-image i.mo-icon{
                color: @colorWhite;
                opacity: 0.6;
            }

            .empty-note{
                color: @colorWhite;
                opacity: 0.6;
            }
        }
    }

    &.co-lt{
        border-color: darken(@colorLightTheme, 25%) !important;

        header{
            background-color: darken(@colorLightTheme, 25%);
            color: @colorWhite;
        }

        .co-style{
            border-color: darken(@colorLightTheme, 25%) !important;

            th,
            td{
                color: @colorWhite;
            }

            th,
            td,
            tr,
            .expand-row-col-wrap,
            &{
                border-color: darken(@colorLightTheme, 25%) !important;
            }

            tr{
                background-color: darken(@colorLightTheme, 15%);
            }
        }

        &.ts-zp .co-style{
            tr.even-row td{
                background-color: darken(@colorLightTheme, 10%);
            }
        }

        &.ts-zp:not(.no-hover-effect) .table > tbody,
        &:not(.no-hover-effect) .table > tbody{
            > tr:not(.expand-row):hover,
            > tr.hover,
            > tr.last-click{
                td{
                    background-color: darken(@colorLightTheme, 25%);
                    border-color: darken(@colorLightTheme, 25%) !important;
                }

                + tr > td{
                    border-top-color: darken(@colorLightTheme, 25%) !important;
                }
            }
        }

        mor-empty{
            .empty-image i,
            .empty-image i.iconfont,
            .empty-image i.mo-icon{
                color: @colorWhite;
                opacity: 0.6;
            }

            .empty-note{
                color: @colorWhite;
                opacity: 0.6;
            }
        }
    }

    &.co-dt{
        border-color: darken(@colorDarkTheme, 20%) !important;

        header{
            background-color: darken(@colorDarkTheme, 20%);
            color: @colorWhite;
        }

        .co-style{
            border-color: darken(@colorDarkTheme, 20%) !important;

            th,
            td{
                color: @colorWhite;
            }

            th,
            td,
            tr,
            .expand-row-col-wrap,
            &{
                border-color: darken(@colorDarkTheme, 20%) !important;
            }

            tr{
                background-color: darken(@colorDarkTheme, 15%);
            }
        }

        &.ts-zp .co-style{
            tr.even-row td{
                background-color: darken(@colorDarkTheme, 10%);
            }
        }

        &.ts-zp:not(.no-hover-effect) .table > tbody,
        &:not(.no-hover-effect) .table > tbody{
            > tr:not(.expand-row):hover,
            > tr.hover,
            > tr.last-click{
                td{
                    background-color: darken(@colorDarkTheme, 20%);
                    border-color: darken(@colorDarkTheme, 20%) !important;
                }

                + tr > td{
                    border-top-color: darken(@colorDarkTheme, 20%) !important;
                }
            }
        }

        mor-empty{
            .empty-image i,
            .empty-image i.iconfont,
            .empty-image i.mo-icon{
                color: @colorWhite;
                opacity: 0.6;
            }

            .empty-note{
                color: @colorWhite;
                opacity: 0.6;
            }
        }
    }

    &.co-s{
        border-color: darken(@colorSuccess, 25%) !important;

        header{
            background-color: darken(@colorSuccess, 25%);
            color: @colorWhite;
        }

        .co-style{
            border-color: darken(@colorSuccess, 25%) !important;

            th,
            td{
                color: @colorWhite;
            }

            th,
            td,
            tr,
            .expand-row-col-wrap,
            &{
                border-color: darken(@colorSuccess, 25%) !important;
            }

            tr{
                background-color: darken(@colorSuccess, 15%);
            }
        }

        &.ts-zp .co-style{
            tr.even-row td{
                background-color: darken(@colorSuccess, 10%);
            }
        }

        &.ts-zp:not(.no-hover-effect) .table > tbody,
        &:not(.no-hover-effect) .table > tbody{
            > tr:not(.expand-row):hover,
            > tr.hover,
            > tr.last-click{
                td{
                    background-color: darken(@colorSuccess, 25%);
                    border-color: darken(@colorSuccess, 25%) !important;
                }

                + tr > td{
                    border-top-color: darken(@colorSuccess, 25%) !important;
                }
            }
        }

        mor-empty{
            .empty-image i,
            .empty-image i.iconfont,
            .empty-image i.mo-icon{
                color: @colorWhite;
                opacity: 0.6;
            }

            .empty-note{
                color: @colorWhite;
                opacity: 0.6;
            }
        }
    }

    &.co-w{
        border-color: darken(@colorWarning, 25%) !important;

        header{
            background-color: darken(@colorWarning, 25%);
            color: @colorWhite;
        }

        .co-style{
            border-color: darken(@colorWarning, 25%) !important;

            th,
            td{
                color: @colorWhite;
            }

            th,
            td,
            tr,
            .expand-row-col-wrap,
            &{
                border-color: darken(@colorWarning, 25%) !important;
            }

            tr{
                background-color: darken(@colorWarning, 15%);
            }
        }

        &.ts-zp .co-style{
            tr.even-row td{
                background-color: darken(@colorWarning, 10%);
            }
        }

        &.ts-zp:not(.no-hover-effect) .table > tbody,
        &:not(.no-hover-effect) .table > tbody{
            > tr:not(.expand-row):hover,
            > tr.hover,
            > tr.last-click{
                td{
                    background-color: darken(@colorWarning, 25%);
                    border-color: darken(@colorWarning, 25%) !important;
                }

                + tr > td{
                    border-top-color: darken(@colorWarning, 25%) !important;
                }
            }
        }

        mor-empty{
            .empty-image i,
            .empty-image i.iconfont,
            .empty-image i.mo-icon{
                color: @colorWhite;
                opacity: 0.6;
            }

            .empty-note{
                color: @colorWhite;
                opacity: 0.6;
            }
        }
    }

    &.co-d{
        border-color: darken(@colorDanger, 25%) !important;

        header{
            background-color: darken(@colorDanger, 25%);
            color: @colorWhite;
        }

        .co-style{
            border-color: darken(@colorDanger, 25%) !important;

            th,
            td{
                color: @colorWhite;
            }

            th,
            td,
            tr,
            .expand-row-col-wrap,
            &{
                border-color: darken(@colorDanger, 25%) !important;
            }

            tr{
                background-color: darken(@colorDanger, 15%);
            }
        }

        &.ts-zp .co-style{
            tr.even-row td{
                background-color: darken(@colorDanger, 10%);
            }
        }

        &.ts-zp:not(.no-hover-effect) .table > tbody,
        &:not(.no-hover-effect) .table > tbody{
            > tr:not(.expand-row):hover,
            > tr.hover,
            > tr.last-click{
                td{
                    background-color: darken(@colorDanger, 25%);
                    border-color: darken(@colorDanger, 25%) !important;
                }

                + tr > td{
                    border-top-color: darken(@colorDanger, 25%) !important;
                }
            }
        }

        mor-empty{
            .empty-image i,
            .empty-image i.iconfont,
            .empty-image i.mo-icon{
                color: @colorWhite;
                opacity: 0.6;
            }

            .empty-note{
                color: @colorWhite;
                opacity: 0.6;
            }
        }
    }

    &.co-p{
        border-color: darken(@colorPrimary, 25%) !important;

        header{
            background-color: darken(@colorPrimary, 25%);
            color: @colorWhite;
        }

        .co-style{
            border-color: darken(@colorPrimary, 25%) !important;

            th,
            td{
                color: @colorWhite;
            }

            th,
            td,
            tr,
            .expand-row-col-wrap,
            &{
                border-color: darken(@colorPrimary, 25%) !important;
            }

            tr{
                background-color: darken(@colorPrimary, 15%);
            }
        }

        &.ts-zp .co-style{
            tr.even-row td{
                background-color: darken(@colorPrimary, 10%);
            }
        }

        &.ts-zp:not(.no-hover-effect) .table > tbody,
        &:not(.no-hover-effect) .table > tbody{
            > tr:not(.expand-row):hover,
            > tr.hover,
            > tr.last-click{
                td{
                    background-color: darken(@colorPrimary, 25%);
                    border-color: darken(@colorPrimary, 25%) !important;
                }

                + tr > td{
                    border-top-color: darken(@colorPrimary, 25%) !important;
                }
            }
        }

        mor-empty{
            .empty-image i,
            .empty-image i.iconfont,
            .empty-image i.mo-icon{
                color: @colorWhite;
                opacity: 0.6;
            }

            .empty-note{
                color: @colorWhite;
                opacity: 0.6;
            }
        }
    }

    &.co-m{
        border-color: darken(@colorMinor, 25%) !important;

        header{
            background-color: darken(@colorMinor, 25%);
            color: @colorWhite;
        }

        .co-style{
            border-color: darken(@colorMinor, 25%) !important;

            th,
            td{
                color: @colorWhite;
            }

            th,
            td,
            tr,
            .expand-row-col-wrap,
            &{
                border-color: darken(@colorMinor, 25%) !important;
            }

            tr{
                background-color: darken(@colorMinor, 15%);
            }
        }

        &.ts-zp .co-style{
            tr.even-row td{
                background-color: darken(@colorMinor, 10%);
            }
        }

        &.ts-zp:not(.no-hover-effect) .table > tbody,
        &:not(.no-hover-effect) .table > tbody{
            > tr:not(.expand-row):hover,
            > tr.hover,
            > tr.last-click{
                td{
                    background-color: darken(@colorMinor, 25%);
                    border-color: darken(@colorMinor, 25%) !important;
                }

                + tr > td{
                    border-top-color: darken(@colorMinor, 25%) !important;
                }
            }
        }

        mor-empty{
            .empty-image i,
            .empty-image i.iconfont,
            .empty-image i.mo-icon{
                color: @colorWhite;
                opacity: 0.6;
            }

            .empty-note{
                color: @colorWhite;
                opacity: 0.6;
            }
        }
    }

    &.co-i{
        border-color: darken(@colorInfo, 25%) !important;

        header{
            background-color: darken(@colorInfo, 25%);
            color: @colorWhite;
        }

        .co-style{
            border-color: darken(@colorInfo, 25%) !important;

            th,
            td{
                color: @colorWhite;
            }

            th,
            td,
            tr,
            .expand-row-col-wrap,
            &{
                border-color: darken(@colorInfo, 25%) !important;
            }

            tr{
                background-color: darken(@colorInfo, 15%);
            }
        }

        &.ts-zp .co-style{
            tr.even-row td{
                background-color: darken(@colorInfo, 10%);
            }
        }

        &.ts-zp:not(.no-hover-effect) .table > tbody,
        &:not(.no-hover-effect) .table > tbody{
            > tr:not(.expand-row):hover,
            > tr.hover,
            > tr.last-click{
                td{
                    background-color: darken(@colorInfo, 25%);
                    border-color: darken(@colorInfo, 25%) !important;
                }

                + tr > td{
                    border-top-color: darken(@colorInfo, 25%) !important;
                }
            }
        }

        mor-empty{
            .empty-image i,
            .empty-image i.iconfont,
            .empty-image i.mo-icon{
                color: @colorWhite;
                opacity: 0.6;
            }

            .empty-note{
                color: @colorWhite;
                opacity: 0.6;
            }
        }
    }

    &.co-bk{
        border-color: @colorBlack !important;

        header{
            background-color: @colorBlack;
            color: @colorWhite;
        }

        .co-style{
            border-color: @colorBlack !important;

            th,
            td{
                color: @colorWhite;
            }

            th,
            td,
            tr,
            .expand-row-col-wrap,
            &{
                border-color: @colorBlack !important;
            }

            tr{
                background-color: darken(@colorBlack, 5%);
            }
        }

        &.ts-zp .co-style{
            tr.even-row td{
                background-color: darken(@colorBlack, 10%);
            }
        }

        &.ts-zp:not(.no-hover-effect) .table > tbody,
        &:not(.no-hover-effect) .table > tbody{
            > tr:not(.expand-row):hover,
            > tr.hover,
            > tr.last-click{
                td{
                    background-color: lighten(@colorBlack, 5%);
                    border-color: lighten(@colorBlack, 5%) !important;
                }

                + tr > td{
                    border-top-color: lighten(@colorBlack, 5%) !important;
                }
            }
        }

        mor-empty{
            .empty-image i,
            .empty-image i.iconfont,
            .empty-image i.mo-icon{
                color: @colorWhite;
                opacity: 0.6;
            }

            .empty-note{
                color: @colorWhite;
                opacity: 0.6;
            }
        }
    }

    &.co-n1{
        border-color: @colorNeutral1 !important;

        header{
            background-color: @colorNeutral1;
            color: @colorBlack;
        }

        .co-style{
            border-color: @colorNeutral1 !important;

            th,
            td{
                color: @colorBlack;
            }

            th,
            td,
            tr,
            .expand-row-col-wrap,
            &{
                border-color: @colorNeutral1 !important;
            }

            tr{
                background-color: lighten(@colorNeutral1, 3%);
            }
        }

        &.ts-zp .co-style{
            tr.even-row td{
                background-color: lighten(@colorNeutral1, 8%);
            }
        }

        &.ts-zp:not(.no-hover-effect) .table > tbody,
        &:not(.no-hover-effect) .table > tbody{
            > tr:not(.expand-row):hover,
            > tr.hover,
            > tr.last-click{
                td{
                    background-color: darken(@colorNeutral1, 5%);
                    border-color: darken(@colorNeutral1, 5%) !important;
                }

                + tr > td{
                    border-top-color: darken(@colorNeutral1, 5%) !important;
                }
            }
        }

        mor-empty{
            .empty-image i,
            .empty-image i.iconfont,
            .empty-image i.mo-icon{
                color: @colorNeutral5;
                opacity: 0.6;
            }

            .empty-note{
                color: @colorBlack;
                opacity: 0.6;
            }
        }
    }

    each(range(11), {
        @colorName : 'colorNeutral@{value}';

        &.co-n@{value} when (@value > 1) {
            border-color: @@colorName !important;

            header{
                background-color: @@colorName;
                color: if((@value > 5), @colorWhite, @colorBlack);
            }

            .co-style{
                border-color: @@colorName !important;

                th,
                td{
                    color: if((@value > 5), @colorWhite, @colorBlack);
                }

                th,
                td,
                tr,
                .expand-row-col-wrap,
                &{
                    border-color: @@colorName !important;
                }

                tr{
                    background-color: if((@value > 5), darken(@@colorName, 3%), lighten(@@colorName, 3%));
                }
            }

            &.ts-zp .co-style{
                tr.even-row td{
                    background-color: if((@value > 5), darken(@@colorName, 5%), lighten(@@colorName, 8%));
                }
            }

            &.ts-zp:not(.no-hover-effect) .table > tbody,
            &:not(.no-hover-effect) .table > tbody{
                > tr:not(.expand-row):hover,
                > tr.hover,
                > tr.last-click{
                    td{
                        background-color: if((@value > 5), lighten(@@colorName, 5%), darken(@@colorName, 5%));
                        border-color: if((@value > 5), lighten(@@colorName, 5%), darken(@@colorName, 5%)) !important;
                    }

                    + tr > td{
                        border-top-color: if((@value > 5), lighten(@@colorName, 5%), darken(@@colorName, 5%)) !important;
                    }
                }
            }

            mor-empty{
                .empty-image i,
                .empty-image i.iconfont,
                .empty-image i.mo-icon{
                    color: if((@value > 5), @colorWhite, @colorNeutral5);
                    opacity: 0.6;
                }

                .empty-note{
                    color: if((@value > 5), @colorWhite, @colorBlack);
                    opacity: 0.6;
                }
            }
        }
    });

    &.co-wh{
        border-color: darken(@colorWhite, 5%) !important;

        header{
            background-color: darken(@colorWhite, 5%);
            color: @colorBlack;
        }

        .co-style{
            border-color: darken(@colorWhite, 5%) !important;

            th,
            td{
                color: @colorBlack;
            }

            th,
            td,
            tr,
            .expand-row-col-wrap,
            &{
                border-color: darken(@colorWhite, 5%) !important;
            }

            tr{
                background-color: @colorWhite;
            }
        }

        &.ts-zp .co-style{
            tr.even-row td{
                background-color: darken(@colorWhite, 2%);
            }
        }

        &.ts-zp:not(.no-hover-effect) .table,
        &:not(.no-hover-effect) .table{
            tr:not(.expand-row):hover,
            tr.hover,
            tr.last-click {
                td{
                    background-color: @colorNeutral1;
                    border-color: @colorNeutral1 !important;
                }

                + tr > td{
                    border-top-color: @colorNeutral1 !important;
                }
            }
        }
    }

    .table{
        th,
        td{
            &.cco-t{
                background: darken(@colorTheme, 5%) !important;
                color: @colorWhite !important;
            }

            &.cco-lt{
                background: darken(@colorLightTheme, 5%) !important;
                color: @colorWhite !important;
            }

            &.cco-dt{
                background: darken(@colorDarkTheme, 5%) !important;
                color: @colorWhite !important;
            }

            &.cco-s{
                background: darken(@colorSuccess, 5%) !important;
                color: @colorWhite !important;
            }

            &.cco-w{
                background: darken(@colorWarning, 5%) !important;
                color: @colorWhite !important;
            }

            &.cco-d{
                background: darken(@colorDanger, 5%) !important;
                color: @colorWhite !important;
            }

            &.cco-p{
                background: darken(@colorPrimary, 5%) !important;
                color: @colorWhite !important;
            }

            &.cco-m{
                background: darken(@colorMinor, 5%) !important;
                color: @colorWhite !important;
            }

            &.cco-i{
                background: darken(@colorInfo, 5%) !important;
                color: @colorWhite !important;
            }

            &.cco-bk{
                background: darken(@colorBlack, 5%) !important;
                color: @colorWhite !important;
            }

            each(range(11), {
                @colorName : 'colorNeutral@{value}';

                &.cco-n@{value}{
                    background: @@colorName !important;
                    color: if((@value > 5), @colorWhite, @colorBlack) !important;
                }
            });

            &.cco-wh{
                background: @colorWhite !important;
                color: @colorBlack !important;
            }
        }

        th,
        td{
            &.cell-disabled{
                background: darken(@colorComponentItemBgDisabled, 15%) !important;
                color: @colorBlack !important;
                cursor: not-allowed;
            }
        }
    }

    &:not(.no-hover-effect) .table{
        tr.hover{
            th,
            td{
                &.cco-t{
                    background: darken(@colorTheme, 15%) !important;
                }

                &.cco-lt{
                    background: darken(@colorLightTheme, 15%) !important;
                }

                &.cco-dt{
                    background: darken(@colorDarkTheme, 13%) !important;
                }

                &.cco-s{
                    background: darken(@colorSuccess, 13%) !important;
                }

                &.cco-w{
                    background: darken(@colorWarning, 15%) !important;
                }

                &.cco-d{
                    background: darken(@colorDanger, 13%) !important;
                }

                &.cco-p{
                    background: darken(@colorPrimary, 15%) !important;
                }

                &.cco-m{
                    background: darken(@colorMinor, 15%) !important;
                }

                &.cco-i{
                    background: darken(@colorInfo, 10%) !important;
                }

                &.cco-bk{
                    background: lighten(@colorBlack, 5%) !important;
                }

                each(range(11), {
                    @colorName : 'colorNeutral@{value}';

                    &.cco-n@{value}{
                        background: if((@value > 5), lighten(@@colorName, 5%), darken(@@colorName, 8%)) !important;
                    }
                });

                &.cco-wh{
                    background: darken(@colorWhite, 8%) !important;
                }
            }
        }
    }

    .table > tbody > tr > td.table-expand{
        cursor: pointer;
        max-width: 1px;
        min-width: 1px;

        .mo-icon{
            color: @colorNeutral6;
            font-size: @fontSize*0.8125;
        }

        + td{
            border-left: none !important;
        }
    }

    // default status
    &{
        .co-n1;
        .si-m;
    }
}

.mo-table-col-filter{
    mor-checkbox{
        .il{
            flex-direction: column;
            max-height: @fontSize*15;
        }
    }

    .filter-operate{
        display: flex;
        align-items: center;
        justify-content: center;
        border-top: 1px @colorComponentItemBorder solid;
        padding-top: @fontSize*0.5;

        mor-btn{
            margin-right: 0.5em;
        }
    }
}