$blue: #38f;
$darkblue: #27f;
$orange: #f60;


.zent-table {
    box-sizing: border-box;
    margin-bottom:20px;
    width:100%;
    // border-spacing: 0;
    a {
        color: #38f;
        cursor: pointer;
        &:hover {
            color:#27f;
            cursor:pointer;
            text-decoration: none;
        }
    }

    .tr {
        display: flex;
        border-bottom:1px solid #DCDCDC;
        &:last-child {
            border-bottom:none;
        }
    }

    .thead {
        .tr {
            border-top: none;
            border-bottom:1px solid #e5e5e5;
            background: #f2f2f2;
        }
    }

    .tbody {
        .tr {
            &:hover {
                background: #f8f8f8;
            }
        }
    }

    .cell {
        position: relative;
        display: inline-block;
        flex: auto;
        flex-basis: 0;
        align-self: center;
        padding:10px;
        padding-left:0;
        text-align: left;
        font-size:12px;

        &:first-child {
            padding-left:10px;
        }
        &:last-child {
            text-align: right;
        }
        &.empty-data {
            line-height: 20px;
            height:40px;
            text-align: center;
        }
        &.cell--selection {
            padding-left: 34px;
        }
        &.cell--money {
            text-align: right
        }
        .asc,
        .desc {
            margin-left: 3px;
        }

        .desc {
            &:after {
                position: absolute;
                content: '\2193';
            }
        }

        .asc {
            &:after {
                position: absolute;
                content: '\2191';
            }
        }

        .select-check {
            position: absolute;
            left:10px;
            top:50%;
            transform: translateY(-50%);
            margin-top:0
        }
    }

    .card__thumb {
        float: left;
        margin-right:5px;
        height:50px;
    }

    .card__title {
        display: block;
        height: 32px;
        line-height:1.4;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 12px;
        color:$blue;

        &:hover {
            text-decoration: none;
        }
    }

    .card__info {
        font-size: 12px;
        color:$orange;
    }
}