.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;

            &.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;
    }
}