:root {
    --ico-x: 14;
    --ico-y:  8;
}
i.sprite, i.sprite i           { --size:6ex; }
i.sprite.menu, i.sprite.menu i { --size:1.6rem; position:relative; bottom: -0.4rem; margin-right:0.8rem; }  /* Menu size */
i.sprite.f, i.sprite.f i       { --size:1em; position:relative; bottom: -0.15em; }  /* Font size */
i.sprite.fm, i.sprite.fm i     { --size:1em; position:relative; }  /* Font size; middle */
i.sprite.t, i.sprite.t i       { --size:16px; } /* Tiny */
i.sprite.s, i.sprite.s i       { --size:24px; } /* Small */
i.sprite.m, i.sprite.m i       { --size:32px; } /* Medium */
i.sprite.l, i.sprite.l i       { --size:48px; } /* Large */
i.sprite.xl, i.sprite.xl i     { --size:64px; } /* Extra-large */
i.sprite i.left { position:relative; left:calc(var(--size) / 2 * -1); }
i.sprite, i.sprite i {
    display:inline-block;
    margin:0; padding:0;
    width:var(--size); height:var(--size);
    background-image:url(../images/sprite-solid.png?v=4.0.14);
    background-position:var(--size);
    background-repeat: no-repeat;
    background-size:calc(var(--size) * var(--ico-x)) calc(var(--size) * var(--ico-y));
    --ico:calc(var(--size) * -1);
}
i.sprite.shop { background-position:0 0; }
/* Primary modules */
i.sprite.home       { background-position:calc(var(--size) *   0) var(--ico); }
i.sprite.wr         { background-position:calc(var(--size) *  -1) var(--ico); }
i.sprite.wo         { background-position:calc(var(--size) *  -2) var(--ico); }
i.sprite.loc        { background-position:calc(var(--size) *  -3) var(--ico); }
i.sprite.ast        { background-position:calc(var(--size) *  -4) var(--ico); }
i.sprite.ast-tree   { background-position:calc(var(--size) *  -4) calc(var(--ico) * 2); }
i.sprite.ast-man    { background-position:calc(var(--size) *  -4) calc(var(--ico) * 3); }
i.sprite.ast-grp    { background-position:calc(var(--size) *  -4) calc(var(--ico) * 4); }
i.sprite.ast-risk   { background-position:calc(var(--size) *  -4) calc(var(--ico) * 6); }
i.sprite.pm         { background-position:calc(var(--size) *  -5) var(--ico); }
i.sprite.pm-time    { background-position:calc(var(--size) *  -5) calc(var(--ico) * 2); }
i.sprite.pm-evt     { background-position:calc(var(--size) *  -5) calc(var(--ico) * 3); }
i.sprite.pm-mtr     { background-position:calc(var(--size) *  -5) calc(var(--ico) * 4); }
i.sprite.pm-grp     { background-position:calc(var(--size) *  -5) calc(var(--ico) * 5); }
i.sprite.pm-tsk     { background-position:calc(var(--size) *  -5) calc(var(--ico) * 6); }
i.sprite.pm-gen     { background-position:calc(var(--size) *  -5) calc(var(--ico) * 7); }
i.sprite.usr-cust   { background-position:calc(var(--size) *  -6) calc(var(--ico) * 1); }
i.sprite.usr        { background-position:calc(var(--size) *  -6) calc(var(--ico) * 2); }
i.sprite.time       { background-position:calc(var(--size) *  -6) calc(var(--ico) * 3); }
i.sprite.mat        { background-position:calc(var(--size) *  -7) var(--ico); }
i.sprite.mat-stor   { background-position:calc(var(--size) *  -7) calc(var(--ico) * 2); }
i.sprite.mat-bin    { background-position:calc(var(--size) *  -7) calc(var(--ico) * 3); }
i.sprite.mat-sup    { background-position:calc(var(--size) *  -7) calc(var(--ico) * 4); }
i.sprite.mat-attr   { background-position:calc(var(--size) *  -7) calc(var(--ico) * 5); }
i.sprite.mat-bulk   { background-position:calc(var(--size) *  -7) calc(var(--ico) * 6); }
i.sprite.pur        { background-position:calc(var(--size) *  -8) var(--ico); }
i.sprite.pur-pr     { background-position:calc(var(--size) *  -8) calc(var(--ico) * 2); }
i.sprite.pur-po     { background-position:calc(var(--size) *  -8) calc(var(--ico) * 3); }
i.sprite.pur-grn    { background-position:calc(var(--size) *  -8) calc(var(--ico) * 4); }
i.sprite.mst        { background-position:calc(var(--size) *  -9) var(--ico); }
i.sprite.rpt        { background-position:calc(var(--size) * -10) var(--ico); }
i.sprite.rpt-gra    { background-position:calc(var(--size) * -10) calc(var(--ico) * 2); }
i.sprite.rpt-prn    { background-position:calc(var(--size) * -10) calc(var(--ico) * 3); }
i.sprite.adm        { background-position:calc(var(--size) * -11) var(--ico); }
i.sprite.adm-grp    { background-position:calc(var(--size) * -11) calc(var(--ico) * 2); }
i.sprite.adm-aud    { background-position:calc(var(--size) * -11) calc(var(--ico) * 3); }
i.sprite.adm-set    { background-position:calc(var(--size) * -11) calc(var(--ico) * 4); }
i.sprite.out        { background-position:calc(var(--size) * -12) var(--ico); }
/* Custom modules */
i.sprite.tpa        { background-position:calc(var(--size) *  -4) calc(var(--ico) * 5); }
i.sprite.kpi        { background-position:calc(var(--size) * -10) calc(var(--ico) * 4); }
i.sprite.apd        { background-position:calc(var(--size) * -10) calc(var(--ico) * 5); }
i.sprite.was        { background-position:calc(var(--size) * -13) var(--ico); }
i.sprite.pj         { background-position:calc(var(--size) * -12) calc(var(--ico) * 7); }
i.sprite.rsv        { background-position:calc(var(--size) * -13) calc(var(--ico) * 2); }
i.sprite.util       { background-position:calc(var(--size) * -13) calc(var(--ico) * 4); }
i.sprite.dlp        { background-position:calc(var(--size) * -13) calc(var(--ico) * 5); }
i.sprite.prop       { background-position:calc(var(--size) * -13) calc(var(--ico) * 3); }
i.sprite.cln        { background-position:calc(var(--size) * -13) calc(var(--ico) * 7); }
i.sprite.dwg        { background-position:calc(var(--size) * -13) calc(var(--ico) * 6); }
/* General use */
i.sprite.mail       { background-position:calc(var(--size) *  -2) calc(var(--ico) * 2); }
i.sprite.phone      { background-position:calc(var(--size) * -12) calc(var(--ico) * 6); }
i.sprite.harr       { background-position:calc(var(--size) * -12) calc(var(--ico) * 5); }
i.sprite.reply      { background-position:calc(var(--size) * -12) calc(var(--ico) * 4); }
i.sprite.folder     { background-position:calc(var(--size) * -12) calc(var(--ico) * 3); }
i.sprite.browse     { background-position:calc(var(--size) * -12) calc(var(--ico) * 2); }
i.sprite.vol        { background-position:calc(var(--size) * -11) calc(var(--ico) * 7); }
i.sprite.calc       { background-position:calc(var(--size) * -11) calc(var(--ico) * 6); }
/* Actions */
i.sprite.add        { background-position:calc(var(--size) *  0) 0; filter: invert(0) !important; }
i.sprite.att        { background-position:calc(var(--size) * -1) 0; filter: invert(0) !important; }
i.sprite.io         { background-position:calc(var(--size) * -2) 0; filter: invert(0) !important; }
i.sprite.imp        { background-position:calc(var(--size) * -3) 0; filter: invert(0) !important; }
i.sprite.chk        { background-position:calc(var(--size) * -4) 0; filter: invert(0) !important; }
i.sprite.del        { background-position:calc(var(--size) * -5) 0; filter: invert(0) !important; }
i.sprite.find       { background-position:calc(var(--size) * -6) 0; filter: invert(0) !important; }
i.sprite.help       { background-position:calc(var(--size) * -7) 0; filter: invert(0) !important; }
i.sprite.relo       { background-position:calc(var(--size) * -8) 0; filter: invert(0) !important; }
i.sprite.reset      { background-position:calc(var(--size) * -8) 0; filter:grayscale(1) !important; }
i.sprite.share      { background-position:calc(var(--size) * -9) 0; filter: invert(0) !important; }
i.sprite.warning    { background-position:calc(var(--size) * -10) 0; filter: invert(0) !important; }
i.sprite.fav        { background-position:calc(var(--size) * -11) 0; filter: invert(0) !important; }

/* Overlays */
i.sprite > i {
    --ovl: 0;
    --ovl-size: calc(var(--size) / 2);
    --ico:calc(var(--ovl-size) * -1);
    background-size:calc(var(--ovl-size) * var(--ico-x)) calc(var(--ovl-size) * var(--ico-y));
    display: block;
    width:var(--ovl-size); height:var(--ovl-size);
    position: relative;
    left: var(--ovl-size);
    top: var(--ovl-size);
}
/* Emphasized overlay */
i.sprite > i.em {
    --ovl-size: calc(var(--size) / 1.5);
    left: 0;
    top: calc(var(--ovl-size) / 4);
    filter:grayscale(.4);
    opacity:.9;
}
/* Overlay icons */
i.sprite i.add      { background-position:calc(var(--ovl-size) *   0) var(--ovl); }
i.sprite i.att      { background-position:calc(var(--ovl-size) *  -1) var(--ovl); }
i.sprite i.io       { background-position:calc(var(--ovl-size) *  -2) var(--ovl); }
i.sprite i.imp      { background-position:calc(var(--ovl-size) *  -3) var(--ovl); }
i.sprite i.chk      { background-position:calc(var(--ovl-size) *  -4) var(--ovl); }
i.sprite i.del      { background-position:calc(var(--ovl-size) *  -5) var(--ovl); }
i.sprite i.find     { background-position:calc(var(--ovl-size) *  -6) var(--ovl); }
i.sprite i.help     { background-position:calc(var(--ovl-size) *  -7) var(--ovl); }
i.sprite i.relo     { background-position:calc(var(--ovl-size) *  -8) var(--ovl); }
i.sprite i.renew    { background-position:calc(var(--ovl-size) *  -8) var(--ovl); filter:hue-rotate(90deg) !important; }
i.sprite i.reset    { background-position:calc(var(--ovl-size) *  -8) var(--ovl); filter:grayscale(1) !important; }
i.sprite i.hand,
i.sprite i.share    { background-position:calc(var(--ovl-size) *  -9) var(--ovl); }
i.sprite i.alert,
i.sprite i.warning  { background-position:calc(var(--ovl-size) * -10) var(--ovl); }
i.sprite i.fav      { background-position:calc(var(--ovl-size) * -11) var(--ovl); }

/* Custom styling */
i.sprite.d-muted   { filter: grayscale(1) !important; }
i.sprite .d-invert  { filter: invert(1) !important; }

/* Dark theme support */
[data-bs-theme="dark"] i.sprite,
.bg-primary > i.sprite, .btn-primary > i.sprite,
.bg-dark > i.sprite, .btn-dark > i.sprite,
.bg-info > i.sprite, .btn-info > i.sprite
{ filter: invert(1); }

[data-bs-theme="dark"] i.sprite > i,
.bg-primary > i.sprite > i, .btn-primary > i.sprite > i,
.bg-dark > i.sprite > i, .btn-dark > i.sprite > i,
.bg-info > i.sprite > i, .btn-info > i.sprite > i,
i.sprite :not(.add) :not(reset) :not(share) :not(warning)
{ filter: invert(0) !important; }

/* Animations */
.ani.rotate {
    display: inline-block;
    animation: ani-rotate 2s linear infinite;
}
.ani.pulse {
    display: inline-block;
    animation: ani-pulse 1s linear infinite;
}

@keyframes ani-rotate {
      0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
@keyframes ani-pulse {
      0% { opacity: 1; }
     50% { opacity: .5; }
    100% { opacity: 1; }
}