.xfile, .xfolder { width: 85%; padding-left: 40px; padding-top: 4px; padding-bottom: 4px; float: left; }
.downFile { width: 15%; padding-top: 4px; float: left; }
/*.xfile:hover,.xfolder:hover{background-color:#eee;}*/
@media (max-width: 450px) {
    .xfile, .xfolder { width: 75%; padding-left: 40px; padding-top: 4px; padding-bottom: 4px; }
    .downFile { width: 25%; float: left; }
}

@media(max-width: 768px) and (min-width: 451px) {
    .xfile, .xfolder { width: 85%; padding-left: 40px; padding-top: 4px; padding-bottom: 4px; }
    .downFile { width: 15%; float: left; }
}

.cs { background: url("/images/fileico/cs.png") no-repeat scroll left center transparent; }
.asax { background: url("/images/fileico/asax.png") no-repeat scroll left center transparent; }
.doc { background: url("/images/fileico/doc.png") no-repeat scroll left center transparent; }
.docx { background: url("/images/fileico/docx.png") no-repeat scroll left center transparent; }
.jpg { background: url("/images/fileico/jpg.png") no-repeat scroll left center transparent; }
.jpeg { background: url("/images/fileico/jpeg.png") no-repeat scroll left center transparent; }
.png { background: url("/images/fileico/png.png") no-repeat scroll left center transparent; }
.bmp { background: url("/images/fileico/bmp.png") no-repeat scroll left center transparent; }
.ico { background: url("/images/fileico/ico.png") no-repeat scroll left center transparent; }
.gif { background: url("/images/fileico/gif.png") no-repeat scroll left center transparent; }
.vb { background: url("/images/fileico/vb.png") no-repeat scroll left center transparent; }
.aspx { background: url("/images/fileico/aspx.png") no-repeat scroll left center transparent; }
.ascx { background: url("/images/fileico/ascx.png") no-repeat scroll left center transparent; }
.xml { background: url("/images/fileico/xml.png") no-repeat scroll left center transparent; }
.html { background: url("/images/fileico/html.png") no-repeat scroll left center transparent; }
.htm { background: url("/images/fileico/htm.png") no-repeat scroll left center transparent; }
.js { background: url("/images/fileico/js.png") no-repeat scroll left center transparent; }
.xls { background: url("/images/fileico/xls.png") no-repeat scroll left center transparent; }
.xlsx { background: url("/images/fileico/xlsx.png") no-repeat scroll left center transparent; }
.pdf { background: url("/images/fileico/pdf.png") no-repeat scroll left center transparent; }
.zip { background: url("/images/fileico/rar.png") no-repeat scroll left center transparent; }
.txt { background: url("/images/fileico/txt.png") no-repeat scroll left center transparent; }
.pdf { background: url("/images/fileico/pdf.png") no-repeat scroll left center transparent; }
.pptx { background: url("/images/fileico/pptx.png") no-repeat scroll left center transparent; }
.ppt { background: url("/images/fileico/ppt.png") no-repeat scroll left center transparent; }
.config { background: url("/images/fileico/config.png") no-repeat scroll left center transparent; }
.bat { background: url("/images/fileico/bat.png") no-repeat scroll left center transparent; }
.css { background: url("/images/fileico/css.png") no-repeat scroll left center transparent; }
.rar { background: url("/images/fileico/rar.png") no-repeat scroll left center transparent; }
.mp3 { background: url("/images/fileico/mp3.png") no-repeat scroll left center transparent; }
.mp4 { background: url("/images/fileico/mp4.png") no-repeat scroll left center transparent; }


.document_file { display: table; width: 100%; margin: 0 0 5px 0}
    .document_file .downFile, .document_file .xfile { display: table-cell; vertical-align: middle; float: none !important; text-align: justify; }
    .document_file .downFile { width: 85px; padding: 0 10px; text-align: right; }
    .document_file .xfile {width: calc(100% - 85px);}
    .document_file:hover { background-color: #eee; }
.document_download_link:hover { text-decoration: underline; }