:root{
    --width-icon: 48px;
    --height-icon: 48px;
};

.sprite  {
    border: 2px solid blue;
    width: 100px;
    height: 100px;
}

.in-sprite {
    display: inline-block;
    background-image: url("../imgs/spriteIconsfile.png");
    background-size: calc( 8 * var(--width-icon) ) calc( 12 * var(--height-icon) );
    background-repeat: no-repeat;
    background-color: transparent;
    height: var(--height-icon);
    width: var(--width-icon);
    font-size: 0;
    line-height: 0;
    text-align: center;
    vertical-align: middle;
    overflow: hidden;    
}

.fichero          { background-position: calc( 0 * var(--width-icon) ) calc( 0 * var(--height-icon) ); } /* fila:1, col:1 */
.carpeta-c        { background-position: calc(-1 * var(--width-icon) ) calc( 0 * var(--height-icon) ); } /* fila:1, col:2 */
.carpeta-o        { background-position: calc(-2 * var(--width-icon) ) calc( 0 * var(--height-icon) ); } /* fila:1, col:3 */
.fichero-c        { background-position: calc(-3 * var(--width-icon) ) calc( 0 * var(--height-icon) ); } /* fila:1, col:4 */
.fichero-o        { background-position: calc(-4 * var(--width-icon) ) calc( 0 * var(--height-icon) ); } /* fila:1, col:5 */
.icon16           { background-position: calc(-5 * var(--width-icon) ) calc( 0 * var(--height-icon) ); } /* fila:1, col:6 */
.icon17           { background-position: calc(-6 * var(--width-icon) ) calc( 0 * var(--height-icon) ); } /* fila:1, col:7 */
.file-ac3         { background-position: calc(-7 * var(--width-icon) ) calc( 0 * var(--height-icon) ); } /* fila:1, col:8 */

.file-ai          { background-position: calc( 0 * var(--width-icon) ) calc(-1 * var(--height-icon) ); } /* fila:2, col:1 */
.file-aiff        { background-position: calc(-1 * var(--width-icon) ) calc(-1 * var(--height-icon) ); } /* fila:2, col:2 */
.file-ani         { background-position: calc(-2 * var(--width-icon) ) calc(-1 * var(--height-icon) ); } /* fila:2, col:3 */
.file-asf         { background-position: calc(-3 * var(--width-icon) ) calc(-1 * var(--height-icon) ); } /* fila:2, col:4 */
.file-au          { background-position: calc(-4 * var(--width-icon) ) calc(-1 * var(--height-icon) ); } /* fila:2, col:5 */
.file-avi         { background-position: calc(-5 * var(--width-icon) ) calc(-1 * var(--height-icon) ); } /* fila:2, col:6 */
.file-bat         { background-position: calc(-6 * var(--width-icon) ) calc(-1 * var(--height-icon) ); } /* fila:2, col:7 */
.file-bin         { background-position: calc(-7 * var(--width-icon) ) calc(-1 * var(--height-icon) ); } /* fila:2, col:8 */

.file-bmp         { background-position: calc( 0 * var(--width-icon) ) calc(-2 * var(--height-icon) ); } /* fila:3, col:1 */
.file-bup         { background-position: calc(-1 * var(--width-icon) ) calc(-2 * var(--height-icon) ); } /* fila:3, col:2 */
.file-cab         { background-position: calc(-2 * var(--width-icon) ) calc(-2 * var(--height-icon) ); } /* fila:3, col:3 */
.file-cal         { background-position: calc(-3 * var(--width-icon) ) calc(-2 * var(--height-icon) ); } /* fila:3, col:4 */
.file-cat         { background-position: calc(-4 * var(--width-icon) ) calc(-2 * var(--height-icon) ); } /* fila:3, col:5 */
.file-cur         { background-position: calc(-5 * var(--width-icon) ) calc(-2 * var(--height-icon) ); } /* fila:3, col:6 */
.file-dat         { background-position: calc(-6 * var(--width-icon) ) calc(-2 * var(--height-icon) ); } /* fila:3, col:7 */
.file-dcr         { background-position: calc(-7 * var(--width-icon) ) calc(-2 * var(--height-icon) ); } /* fila:3, col:8 */

.file-der         { background-position: calc( 0 * var(--width-icon) ) calc(-3 * var(--height-icon) ); } /* fila:4, col:1 */
.file-dic         { background-position: calc(-1 * var(--width-icon) ) calc(-3 * var(--height-icon) ); } /* fila:4, col:2 */
.file-dll         { background-position: calc(-2 * var(--width-icon) ) calc(-3 * var(--height-icon) ); } /* fila:4, col:3 */
.file-doc         { background-position: calc(-3 * var(--width-icon) ) calc(-3 * var(--height-icon) ); } /* fila:4, col:4 */
.file-docx        { background-position: calc(-4 * var(--width-icon) ) calc(-3 * var(--height-icon) ); } /* fila:4, col:5 */
.file-dvd         { background-position: calc(-5 * var(--width-icon) ) calc(-3 * var(--height-icon) ); } /* fila:4, col:6 */
.file-0000        { background-position: calc(-6 * var(--width-icon) ) calc(-3 * var(--height-icon) ); } /* fila:4, col:7 */
.file-dwt         { background-position: calc(-7 * var(--width-icon) ) calc(-3 * var(--height-icon) ); } /* fila:4, col:8 */

.file-fon         { background-position: calc( 0 * var(--width-icon) ) calc(-4 * var(--height-icon) ); } /* fila:5, col:1 */
.file-gif         { background-position: calc(-1 * var(--width-icon) ) calc(-4 * var(--height-icon) ); } /* fila:5, col:2 */
.file-hlp         { background-position: calc(-2 * var(--width-icon) ) calc(-4 * var(--height-icon) ); } /* fila:5, col:3 */
.file-hst         { background-position: calc(-3 * var(--width-icon) ) calc(-4 * var(--height-icon) ); } /* fila:5, col:4 */
.file-html        { background-position: calc(-4 * var(--width-icon) ) calc(-4 * var(--height-icon) ); } /* fila:5, col:5 */
.file-ico         { background-position: calc(-5 * var(--width-icon) ) calc(-4 * var(--height-icon) ); } /* fila:5, col:6 */
.file-ifo         { background-position: calc(-6 * var(--width-icon) ) calc(-4 * var(--height-icon) ); } /* fila:5, col:7 */
.file-inf         { background-position: calc(-7 * var(--width-icon) ) calc(-4 * var(--height-icon) ); } /* fila:5, col:8 */

.file-ini         { background-position: calc( 0 * var(--width-icon) ) calc(-5 * var(--height-icon) ); } /* fila:6, col:1 */
.file-java        { background-position: calc(-1 * var(--width-icon) ) calc(-5 * var(--height-icon) ); } /* fila:6, col:2 */
.file-jif         { background-position: calc(-2 * var(--width-icon) ) calc(-5 * var(--height-icon) ); } /* fila:6, col:3 */
.file-jpg         { background-position: calc(-3 * var(--width-icon) ) calc(-5 * var(--height-icon) ); } /* fila:6, col:4 */
.file-log         { background-position: calc(-4 * var(--width-icon) ) calc(-5 * var(--height-icon) ); } /* fila:6, col:5 */
.file-m4a         { background-position: calc(-5 * var(--width-icon) ) calc(-5 * var(--height-icon) ); } /* fila:6, col:6 */
.file-mmf         { background-position: calc(-6 * var(--width-icon) ) calc(-5 * var(--height-icon) ); } /* fila:6, col:7 */
.file-mmm         { background-position: calc(-7 * var(--width-icon) ) calc(-5 * var(--height-icon) ); } /* fila:6, col:8 */

.file-mov         { background-position: calc( 0 * var(--width-icon) ) calc(-6 * var(--height-icon) ); } /* fila:7, col:1 */
.file-mp2         { background-position: calc(-1 * var(--width-icon) ) calc(-6 * var(--height-icon) ); } /* fila:7, col:2 */
.file-mp2v        { background-position: calc(-2 * var(--width-icon) ) calc(-6 * var(--height-icon) ); } /* fila:7, col:3 */
.file-mp3         { background-position: calc(-3 * var(--width-icon) ) calc(-6 * var(--height-icon) ); } /* fila:7, col:4 */
.file-mp4         { background-position: calc(-4 * var(--width-icon) ) calc(-6 * var(--height-icon) ); } /* fila:7, col:5 */
.file-mpeg        { background-position: calc(-5 * var(--width-icon) ) calc(-6 * var(--height-icon) ); } /* fila:7, col:6 */
.file-msp         { background-position: calc(-6 * var(--width-icon) ) calc(-6 * var(--height-icon) ); } /* fila:7, col:7 */
.file-pdf         { background-position: calc(-7 * var(--width-icon) ) calc(-6 * var(--height-icon) ); } /* fila:7, col:8 */

.file-png         { background-position: calc( 0 * var(--width-icon) ) calc(-7 * var(--height-icon) ); } /* fila:8, col:1 */
.file-ppt         { background-position: calc(-1 * var(--width-icon) ) calc(-7 * var(--height-icon) ); } /* fila:8, col:2 */
.file-pptx        { background-position: calc(-2 * var(--width-icon) ) calc(-7 * var(--height-icon) ); } /* fila:8, col:3 */
.file-psd         { background-position: calc(-3 * var(--width-icon) ) calc(-7 * var(--height-icon) ); } /* fila:8, col:4 */
.file-ra          { background-position: calc(-4 * var(--width-icon) ) calc(-7 * var(--height-icon) ); } /* fila:8, col:5 */
.file-rar         { background-position: calc(-5 * var(--width-icon) ) calc(-7 * var(--height-icon) ); } /* fila:8, col:6 */
.file-reg         { background-position: calc(-6 * var(--width-icon) ) calc(-7 * var(--height-icon) ); } /* fila:8, col:7 */
.file-rtf         { background-position: calc(-7 * var(--width-icon) ) calc(-7 * var(--height-icon) ); } /* fila:8, col:8 */

.file-theme       { background-position: calc( 0 * var(--width-icon) ) calc(-8 * var(--height-icon) ); } /* fila:9, col:1 */
.file-tiff        { background-position: calc(-1 * var(--width-icon) ) calc(-8 * var(--height-icon) ); } /* fila:9, col:2 */
.file-tlb         { background-position: calc(-2 * var(--width-icon) ) calc(-8 * var(--height-icon) ); } /* fila:9, col:3 */
.file-ttf         { background-position: calc(-3 * var(--width-icon) ) calc(-8 * var(--height-icon) ); } /* fila:9, col:4 */
.file-txt         { background-position: calc(-4 * var(--width-icon) ) calc(-8 * var(--height-icon) ); } /* fila:9, col:5 */
.file-vob         { background-position: calc(-5 * var(--width-icon) ) calc(-8 * var(--height-icon) ); } /* fila:9, col:6 */
.file-wav         { background-position: calc(-6 * var(--width-icon) ) calc(-8 * var(--height-icon) ); } /* fila:9, col:7 */
.file-wma         { background-position: calc(-7 * var(--width-icon) ) calc(-8 * var(--height-icon) ); } /* fila:9, col:8 */

.file-wmv         { background-position: calc( 0 * var(--width-icon) ) calc(-9 * var(--height-icon) ); } /* fila:10, col:1 */
.file-wpl         { background-position: calc(-1 * var(--width-icon) ) calc(-9 * var(--height-icon) ); } /* fila:10, col:2 */
.file-wri         { background-position: calc(-2 * var(--width-icon) ) calc(-9 * var(--height-icon) ); } /* fila:10, col:3 */
.file-xls         { background-position: calc(-3 * var(--width-icon) ) calc(-9 * var(--height-icon) ); } /* fila:10, col:4 */
.file-xlsx        { background-position: calc(-4 * var(--width-icon) ) calc(-9 * var(--height-icon) ); } /* fila:10, col:5 */
.file-xml         { background-position: calc(-5 * var(--width-icon) ) calc(-9 * var(--height-icon) ); } /* fila:10, col:6 */
.file-xsl         { background-position: calc(-6 * var(--width-icon) ) calc(-9 * var(--height-icon) ); } /* fila:10, col:7 */
.file-zip         { background-position: calc(-7 * var(--width-icon) ) calc(-9 * var(--height-icon) ); } /* fila:10, col:8 */

.file-skp         { background-position: calc( 0 * var(--width-icon) ) calc(-10 * var(--height-icon) );} /* fila:11, col:1 */
.file-dxf         { background-position: calc(-1 * var(--width-icon) ) calc(-10 * var(--height-icon) );} /* fila:11, col:2 */
.file-dwg         { background-position: calc(-2 * var(--width-icon) ) calc(-10 * var(--height-icon) );} /* fila:11, col:3 */
.file-0003        { background-position: calc(-3 * var(--width-icon) ) calc(-10 * var(--height-icon) );} /* fila:11, col:4 */
.file-0004        { background-position: calc(-4 * var(--width-icon) ) calc(-10 * var(--height-icon) );} /* fila:11, col:5 */
.file-0005        { background-position: calc(-5 * var(--width-icon) ) calc(-10 * var(--height-icon) );} /* fila:11, col:6 */
.file-0006        { background-position: calc(-6 * var(--width-icon) ) calc(-10 * var(--height-icon) );} /* fila:11, col:7 */
.file-0007        { background-position: calc(-7 * var(--width-icon) ) calc(-10 * var(--height-icon) );} /* fila:11, col:8 */

.file-0008        { background-position: calc( 0 * var(--width-icon) ) calc(-11 * var(--height-icon) );} /* fila:12, col:1 */
.file-0009        { background-position: calc(-1 * var(--width-icon) ) calc(-11 * var(--height-icon) );} /* fila:12, col:2 */
.file-0010        { background-position: calc(-2 * var(--width-icon) ) calc(-11 * var(--height-icon) );} /* fila:12, col:3 */
.file-0011        { background-position: calc(-3 * var(--width-icon) ) calc(-11 * var(--height-icon) );} /* fila:12, col:4 */
.file-0012        { background-position: calc(-4 * var(--width-icon) ) calc(-11 * var(--height-icon) );} /* fila:12, col:5 */
.file-0013        { background-position: calc(-5 * var(--width-icon) ) calc(-11 * var(--height-icon) );} /* fila:12, col:6 */
.file-0014        { background-position: calc(-6 * var(--width-icon) ) calc(-11 * var(--height-icon) );} /* fila:12, col:7 */
.file-0015        { background-position: calc(-7 * var(--width-icon) ) calc(-11 * var(--height-icon) );} /* fila:12, col:8 */