.block {
        clear: both;
        min-height: 55px;
        vertical-align: middle;
        /* border-top: solid 1px #ECE9E9;*/
        width: fit-content;
        padding: 5px;
        text-align: center;
    }

    .block:first-child {
        border: none;
    }

    .block .item_type {
        vertical-align: middle;
        width: -984px;
        height: 50px;
        display: block;
        /*float: left; margin-right: 10px;*/
        background: transparent url("../css/images/item_type.png") no-repeat 0 0;
    }

    .block .img {
        vertical-align: middle;
        width: -984px;
        height: 50px;
        display: block;
        /*float: left; margin-right: 10px;*/
        background: transparent url("../css/images/icons.png") no-repeat 0 0;
    }

    .block .date {
        margin-top: 4px;
        font-size: 70%;
        color: #666;
    }

    .block:hover {
        text-decoration: none;
        background: #efefef;
        min-height: 60px;
    }
    /**---- item type icons ----**/

    .item_type {
        background-position: -345px 0 !important;
    }

    .manuscript {
        background-position: 0px 0 !important;
    }

    .newspaper {
        background-position: -60px 0 !important;
    }

    .map {
        background-position: -117px 0 !important;
    }

    .audio {
        background-position: -174px 0 !important;
    }

    .video {
        background-position: -231px 0 !important;
    }

    .picture {
        background-position: -292px 0 !important;
    }

    .book {
        background-position: -345px 0 !important;
    }
    /**---- File type icons ----**/

    .img {
        background-position: -984px 0 !important;
    }

    .zip {
        background-position: 0px 0 !important;
    }

    .xml {
        background-position: -53px 0 !important;
    }

    .xls {
        background-position: -104px 0 !important;
    }

    .txt {
        background-position: -156px 0 !important;
    }

    .svg {
        background-position: -208px 0 !important;
    }

    .search {
        background-position: -260px 0 !important;
    }

    .rtf {
        background-position: -312px 0 !important;
    }

    .psd {
        background-position: -363px 0 !important;
    }

    .ppt {
        background-position: -415px 0 !important;
    }

    .png {
        background-position: -467px 0 !important;
    }

    .pdf {
        background-position: -518px 0 !important;
    }

    .mp4 {
        background-position: -570px 0 !important;
    }

    .mp3 {
        background-position: -622px 0 !important;
    }

    .json {
        background-position: -674px 0 !important;
    }

    .jpg {
        background-position: -725px 0 !important;
    }

    .tif {
        background-position: -725px 0 !important;
    }


    .tiff {
        background-position: -725px 0 !important;
    }

    .js {
        background-position: -777px 0 !important;
    }

    .iso {
        background-position: -829px 0 !important;
    }

    .html {
        background-position: -881px 0 !important;
    }

    .link {
        background-position: -932px 0 !important;
    }

    .file {
        background-position: -984px 0 !important;
    }

    .exe {
        background-position: -1036px 0 !important;
    }

    .dwg {
        background-position: -1088px 0 !important;
    }

    .doc {
        background-position: -1139px 0 !important;
    }

    .dbf {
        background-position: -1191px 0 !important;
    }

    .csv {
        background-position: -1243px 0 !important;
    }

    .css {
        background-position: -1295px 0 !important;
    }

    .avi {
        background-position: -1347px 0 !important;
    }

    .ai {
        background-position: -1398px 0 !important;
    }
    /*
 -------exemple to call icon of item -------
    <div class="block" style="width:70px;">
        <div class="item_type manuscript">&nbsp;</div>
    </div>


    <div class="block" style="width:70px;">
        <div class="item_type newspaper">&nbsp;</div>
    </div>


    <div class="block" style="width:70px;">
        <div class="item_type map">&nbsp;</div>
    </div>


    <div class="block" style="width:70px;">
        <div class="item_type audio">&nbsp;</div>
    </div>


    <div class="block" style="width:70px;">
        <div class="item_type video">&nbsp;</div>
    </div>


    <div class="block" style="width:70px;">
        <div class="item_type picture">&nbsp;</div>
    </div>


    <div class="block" style="width:70px;">
        <div class="item_type book">&nbsp;</div>
    </div>

*/
    /*
 -------exemple to call icon of file -------
    <div class="block row" style="width: -webkit-fill-available; ">

        <div class="img {{$file->extension}} center-block">&nbsp;</div>
    </div>

*/
    /*
        .wrap { max-width: 600px; margin: 20px auto; background: white; padding: 40px; box-shadow: 0 0 2px #ccc; }
        @media only screen and (max-width: 700px) { .wrap { padding: 15px; } }
        h1 { text-align: center; margin: 40px 0; font-size: 22px; font-weight: bold; color: #666; }
        a { color: #399ae5; text-decoration: none; } a:hover { color: #206ba4; text-decoration: none; }
        .note { padding:  0 5px 25px 0; font-size:80%; color: #666; line-height: 18px; }
        .block { clear: both;  min-height: 55px;vertical-align: middle; border-top: solid 1px #ECE9E9;width: fit-content; padding: 5px;text-align: center; }
        .block:first-child { border: none; }
        .block .img { vertical-align: middle;width: -984px; height: 50px; display: block; float: left; margin-right: 10px; background: transparent url({{ asset('assets/home/css/images/icons.png') }}) no-repeat 0 0; }
        .block .date { margin-top: 4px; font-size: 70%; color: #666; }
        .block a { display: block; padding: 10px 15px; transition: all 0.35s; }
        .block:hover { text-decoration: none; background: #efefef; min-height: 60px;}
    */