.ul-card-file {
    background-color: #fff;
    display: block;
    width: 240px;
    color: #000 !important;
    cursor: pointer;

    box-shadow: 0 0 2px #bbb;

    .main {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        padding: 15px 15px 5px 15px;
        height: 60px;

        .info {

            .name {
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                width: 160px;
            }

            .desc {
                color: #bbb;
                font-weight: normal;
                font-size: 12px;
                margin-top: 5px;
            }
        }


        .icon {
            font-size: 40px;
            color: #999;
            width: 40px;
            text-align: center;

            &.file {
                color: #bbb;
            }

            &.excel {
                color: rgb(32, 115, 70);
            }

            &.zip {
                color: rgb(139, 87, 42);
            }

            &.word {
                color: rgb(44, 86, 154);
            }

            &.powerpoint {
                color: rgb(242, 97, 63);
            }

            &.pdf {
                color: rgb(250, 81, 81);
            }

            &.video {
                color: #7c8eee;
            }

            &.audio {
                color: #f16c00;
            }

            &.image {
                color: #f6ad00;
            }

            &.text {
                color: #8289ad;
            }

            &.link {
                color: #4876f9;
            }
        }
    }

    .footer {
        display: flex;
        justify-content: space-between;
        font-size: 12px;
        color: #999;
        border-top: 1px solid #eee;
        padding: 5px 15px 5px 15px;
    }
}