/* Font Awesome's SVG mode swaps each icon <i> for an <svg>; these repeat style.bundle.css's icon <i> rules for it. */

/* Keeps event.target on the <svg>, which carries the original <i>'s attributes and classes. */
svg.svg-inline--fa * {
    pointer-events: none;
}

/* style.bundle.css sizes every <svg> in these containers for the template's own icons; give Font Awesome's back their 1em sizing. */
.btn svg.svg-inline--fa,
.side-nav li.menu-item a svg.svg-inline--fa,
.dsh-minimal-sidebar .side-nav li.menu-item a svg.svg-inline--fa,
.dsh-navbar .dsh-svg-icon svg.svg-inline--fa,
.dsh-sidebar-list .dsh-svg-icon svg.svg-inline--fa,
.dsh-svg-icon.svg-icon-sm svg.svg-inline--fa,
.dsh-svg-icon.svg-icon-md svg.svg-inline--fa,
.dsh-svg-icon.svg-icon-lg svg.svg-inline--fa {
    width: var(--fa-width, auto);
    height: 1em;
}

.side-nav li.menu-item a svg.svg-inline--fa,
.dsh-minimal-sidebar .side-nav li.menu-item a svg.svg-inline--fa {
    margin-right: 0;
}

/* style.bundle.css fills every path under .dsh-svg-icon, overriding Font Awesome's currentColor. */
.dsh-svg-icon svg.svg-inline--fa path {
    fill: var(--fa-primary-color, currentColor) !important;
}

.dsh-svg-icon svg.svg-inline--fa path.fa-secondary {
    fill: var(--fa-secondary-color, currentColor) !important;
}

.dsh-minimal-aside--inner ul li a span svg:where(.svg-inline--fa) {
    margin-right: 20px;
    font-size: 8px;
}

.media svg:where(.svg-inline--fa) {
    width: 30px;
    margin-right: 15px;
    font-size: 24px;
}

/* The user dropdown's .dsh-svg-icon icons are <span>s, which .media i never matched. */
.media .dsh-svg-icon svg.svg-inline--fa {
    width: var(--fa-width, auto);
    margin-right: 0;
}

.btn svg:where(.svg-inline--fa) {
    margin-right: 5px;
}

.btn.btn-icon svg:where(.svg-inline--fa) {
    margin-right: 0;
    font-size: 15px;
}

.btn.btn-icon.btn-sm svg:where(.svg-inline--fa) {
    font-size: 10px;
}

.accordion .card-header svg:where(.svg-inline--fa) {
    position: relative;
    top: 0;
    left: 0;
    margin-right: 10px;
    font-size: 20px;
}

.accordion .card-header[aria-expanded="true"] svg:where(.svg-inline--fa) {
    color: #4285f4;
}

.alert svg:where(.svg-inline--fa) {
    margin-right: 15px;
    font-size: 24px;
}

.nav-tabs .nav-link svg:where(.svg-inline--fa),
.nav-pills .nav-link svg:where(.svg-inline--fa) {
    margin-right: 5px;
    font-size: 15px;
}

ul.dsh-timeline span svg:where(.svg-inline--fa) {
    margin-right: 5px;
}

.has-icon svg:where(.svg-inline--fa) {
    position: absolute;
    right: 14px;
    top: 11px;
    color: #9c9c9c;
}

.notification button svg:where(.svg-inline--fa) {
    font-size: 16px;
}