@fktable-prefix-cls: ~"@{css-prefix}fktable";
@table-prefix-cls: ~"@{css-prefix}table";
.@{fktable-prefix-cls} {
    width: 300px;
    min-width: 150px;
    max-height: 310px;
    box-sizing: border-box;
    font-size: 12px;
    display: flex;
    flex-direction: column;
    border: 1px solid #d1dbe5;
    padding: 5px;
    background-color: #fff;
    position: relative;

    .@{css-prefix}spin-fix{
        .demo-spin-icon-load{
            animation: ani-demo-spin 1s linear infinite;
        }
        @keyframes ani-demo-spin {
            from { transform: rotate(0deg);}
            50%  { transform: rotate(180deg);}
            to   { transform: rotate(360deg);}
        }
    }
    .tableSearch {
        margin-bottom: 5px;
    }
    //.@{table-prefix-cls} {
    .table {
        width: 100%;
        max-height: 275px;
        overflow: auto;
        table {
            border-collapse: collapse;
            border-spacing: 0;
            width: 100%;
            flex-direction: column;

            flex: 1 1 auto;
            color: #575757;
            thead {
                background-color: #f5f6fa;
                height: 26px;
                min-width: 100%;

                tr {
                    th {
                        height: 26px;
                        line-height: 26px;
                        white-space: nowrap;
                        padding: 0 5px;
                        text-align: left;
                        min-width: 50px;
                        .@{css-prefix}checkbox-wrapper {
                            border-collapse: separate;
                        }
                    }

                    th:first-child {
                        min-width: 30px;
                    }
                }
            }

            tbody {
                flex: 1 1 auto;
                min-width: 100%;

                tr {
                    border-bottom: 1px solid #d8d8d8;

                    td {
                        height: 23px;

                        line-height: 23px;
                        white-space: nowrap;
                        padding: 0 5px;
                        text-align: left;
                        min-width: 50px;
                        cursor: pointer;
                        .@{css-prefix}checkbox-wrapper {
                            border-collapse: separate;
                        }
                    }

                    td:first-child {

                        min-width: 30px;
                        span {
                            margin-left: 0px;
                        }
                    }
                }

                :hover {
                    background-color: #F8F7F7;
                }

                tr.selected {
                    background-color: #f8f7f7;
                }
            }
        }
        p {
            text-align: center;
            font-weight: normal;
            color: #575757;
        }
    }

    .multi-table {
        max-height: 243px;
    }

    .page {
        margin-top: 5px;
        .@{css-prefix}page-item {
            min-width: 19px;
            height: 19px;
            line-height: 19px;
        }
        .@{css-prefix}page-item-jump-next {
            min-width: 19px;
            height: 19px;
            line-height: 19px;
        }
        .@{css-prefix}page-prev {
            min-width: 19px;
            height: 19px;
            line-height: 19px;
        }
        .@{css-prefix}page-next {
            min-width: 19px;
            height: 19px;
            line-height: 19px;
        }
    }
}