/* ============================================
   PORTAL ICON SYSTEM
   Alle Icons aus assets/icons/ per CSS laden.
   
   Verwendung:  <i class="pi pi-{name}"></i>
   
   Common Icons:  mask-image → Farbe erbt von CSS (currentColor)
   Themed Icons:  background-image → Farbe im SVG eingebacken
   Theme-Overrides in portal-modern.css / portal-scifi.css / portal-modern.css
   ============================================ */

/* === BASE === */
.pi {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  flex-shrink: 0;
}

/* currentColor-Icons (mask-image Variante) */
.pi-mask {
  background-color: currentColor;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

/* Bild-Icons (background-image Variante, für Multi-Color SVGs) */
.pi-img {
  background-color: transparent;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}


/* ============================================
   COMMON ICONS (alle Themes gleich)
   Verwenden mask-image → CSS color bestimmt Farbe
   ============================================ */

/* --- Navigation --- */
.pi-nav-back {
  -webkit-mask-image: url(/portal/assets/icons/common/nav-back.svg);
  mask-image: url(/portal/assets/icons/common/nav-back.svg);
}
.pi-nav-forward {
  -webkit-mask-image: url(/portal/assets/icons/common/nav-forward.svg);
  mask-image: url(/portal/assets/icons/common/nav-forward.svg);
}
.pi-nav-forward-next {
  -webkit-mask-image: url(/portal/assets/icons/common/nav-forward-next.svg);
  mask-image: url(/portal/assets/icons/common/nav-forward-next.svg);
}

/* --- Buttons --- */
.pi-btn-check {
  -webkit-mask-image: url(/portal/assets/icons/common/btn-check.svg);
  mask-image: url(/portal/assets/icons/common/btn-check.svg);
}
.pi-btn-gear {
  -webkit-mask-image: url(/portal/assets/icons/common/btn-gear.svg);
  mask-image: url(/portal/assets/icons/common/btn-gear.svg);
}
.pi-btn-edit {
  -webkit-mask-image: url(/portal/assets/icons/common/btn-edit.svg);
  mask-image: url(/portal/assets/icons/common/btn-edit.svg);
}
.pi-btn-trash {
  -webkit-mask-image: url(/portal/assets/icons/common/btn-trash.svg);
  mask-image: url(/portal/assets/icons/common/btn-trash.svg);
}

/* --- Sortierung --- */
.pi-sort-newest {
  -webkit-mask-image: url(/portal/assets/icons/common/sort-newest.svg);
  mask-image: url(/portal/assets/icons/common/sort-newest.svg);
}
.pi-sort-oldest {
  -webkit-mask-image: url(/portal/assets/icons/common/sort-oldest.svg);
  mask-image: url(/portal/assets/icons/common/sort-oldest.svg);
}
.pi-sort-az {
  -webkit-mask-image: url(/portal/assets/icons/common/sort-az.svg);
  mask-image: url(/portal/assets/icons/common/sort-az.svg);
}
.pi-sort-za {
  -webkit-mask-image: url(/portal/assets/icons/common/sort-za.svg);
  mask-image: url(/portal/assets/icons/common/sort-za.svg);
}
.pi-sort-points {
  -webkit-mask-image: url(/portal/assets/icons/common/sort-points.svg);
  mask-image: url(/portal/assets/icons/common/sort-points.svg);
}
.pi-sort-difficulty {
  -webkit-mask-image: url(/portal/assets/icons/common/sort-difficulty.svg);
  mask-image: url(/portal/assets/icons/common/sort-difficulty.svg);
}
.pi-sort-importance {
  -webkit-mask-image: url(/portal/assets/icons/common/sort-importance.svg);
  mask-image: url(/portal/assets/icons/common/sort-importance.svg);
}

/* --- Dekorativ --- */
.pi-deco-bullet {
  -webkit-mask-image: url(/portal/assets/icons/common/deco-bullet.svg);
  mask-image: url(/portal/assets/icons/common/deco-bullet.svg);
}
.pi-deco-archive {
  -webkit-mask-image: url(/portal/assets/icons/common/deco-archive.svg);
  mask-image: url(/portal/assets/icons/common/deco-archive.svg);
}
.pi-deco-fire {
  /* Gradient → background-image (kein mask) */
  background-image: url(/portal/assets/icons/common/deco-fire.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-color: transparent;
}

/* --- Multiplayer --- */
.pi-mp-globe {
  -webkit-mask-image: url(/portal/assets/icons/common/mp-globe.svg);
  mask-image: url(/portal/assets/icons/common/mp-globe.svg);
}
.pi-mp-score-globe {
  -webkit-mask-image: url(/portal/assets/icons/common/mp-score-globe.svg);
  mask-image: url(/portal/assets/icons/common/mp-score-globe.svg);
}
.pi-mp-friend-add {
  -webkit-mask-image: url(/portal/assets/icons/common/mp-friend-add.svg);
  mask-image: url(/portal/assets/icons/common/mp-friend-add.svg);
}
.pi-mp-share {
  -webkit-mask-image: url(/portal/assets/icons/common/mp-share.svg);
  mask-image: url(/portal/assets/icons/common/mp-share.svg);
}
.pi-mp-partner {
  -webkit-mask-image: url(/portal/assets/icons/common/mp-partner.svg);
  mask-image: url(/portal/assets/icons/common/mp-partner.svg);
}
.pi-mp-partner-score {
  -webkit-mask-image: url(/portal/assets/icons/common/mp-partner-score.svg);
  mask-image: url(/portal/assets/icons/common/mp-partner-score.svg);
}

/* --- Filter (Punkteverlauf) --- */
.pi-filter-quests {
  -webkit-mask-image: url(/portal/assets/icons/common/filter-quests.svg);
  mask-image: url(/portal/assets/icons/common/filter-quests.svg);
}
.pi-filter-rituals {
  -webkit-mask-image: url(/portal/assets/icons/common/filter-rituals.svg);
  mask-image: url(/portal/assets/icons/common/filter-rituals.svg);
}
.pi-filter-todos {
  -webkit-mask-image: url(/portal/assets/icons/common/filter-todos.svg);
  mask-image: url(/portal/assets/icons/common/filter-todos.svg);
}


/* ============================================
   THEMED ICONS — Fantasy (Default)
   Multi-color → background-image (Farben im SVG)
   Single-color → mask-image + background-color
   ============================================ */

/* --- Multi-Color (background-image) --- */
.pi-nav-logout {
  background-image: url(/portal/assets/icons/fantasy/nav-logout.svg);
}
.pi-nav-logout-compact {
  background-image: url(/portal/assets/icons/fantasy/nav-logout-compact.svg);
}
.pi-logo-quests {
  background-image: url(/portal/assets/icons/fantasy/logo-quests.svg);
}
.pi-logo-todos {
  background-image: url(/portal/assets/icons/fantasy/logo-todos.svg);
}
.pi-logo-rituals {
  background-image: url(/portal/assets/icons/fantasy/logo-rituals.svg);
}
.pi-logo-compass {
  background-image: url(/portal/assets/icons/fantasy/logo-compass.svg);
}
.pi-logo-arkana {
  background-image: url(/portal/assets/icons/fantasy/logo-arkana.svg);
}
.pi-logo-ziele {
  background-image: url(/portal/assets/icons/fantasy/logo-ziele.svg);
}

/* --- Single-Color (mask-image) --- */
.pi-nav-back-accent {
  -webkit-mask-image: url(/portal/assets/icons/fantasy/nav-back-accent.svg);
  mask-image: url(/portal/assets/icons/fantasy/nav-back-accent.svg);
  background-color: rgba(255,204,122,.85);
}
.pi-btn-delete-x {
  -webkit-mask-image: url(/portal/assets/icons/fantasy/btn-delete-x.svg);
  mask-image: url(/portal/assets/icons/fantasy/btn-delete-x.svg);
  background-color: rgba(180,190,210,.7);
}
.pi-btn-accordion {
  -webkit-mask-image: url(/portal/assets/icons/fantasy/btn-accordion.svg);
  mask-image: url(/portal/assets/icons/fantasy/btn-accordion.svg);
  background-color: rgba(180,190,210,.7);
}
.pi-deco-wirken {
  -webkit-mask-image: url(/portal/assets/icons/fantasy/deco-wirken.svg);
  mask-image: url(/portal/assets/icons/fantasy/deco-wirken.svg);
}


/* ============================================
   THEMED ICONS — Sci-Fi Override
   ============================================ */

/* Multi-Color (background-image) */
body.theme-scifi .pi-nav-logout {
  background-image: url(/portal/assets/icons/scifi/nav-logout.svg);
}
body.theme-scifi .pi-nav-logout-compact {
  background-image: url(/portal/assets/icons/scifi/nav-logout-compact.svg);
}
body.theme-scifi .pi-logo-quests {
  background-image: url(/portal/assets/icons/scifi/logo-quests.svg);
}
body.theme-scifi .pi-logo-todos {
  background-image: url(/portal/assets/icons/scifi/logo-todos.svg);
}
body.theme-scifi .pi-logo-rituals {
  background-image: url(/portal/assets/icons/scifi/logo-rituals.svg);
}
body.theme-scifi .pi-logo-compass {
  background-image: url(/portal/assets/icons/scifi/logo-compass.svg);
}
body.theme-scifi .pi-logo-arkana {
  background-image: url(/portal/assets/icons/scifi/logo-arkana.svg);
}
body.theme-scifi .pi-logo-ziele {
  background-image: url(/portal/assets/icons/scifi/logo-ziele.svg);
}

/* Single-Color (mask-image + color) */
body.theme-scifi .pi-nav-back-accent {
  -webkit-mask-image: url(/portal/assets/icons/scifi/nav-back-accent.svg);
  mask-image: url(/portal/assets/icons/scifi/nav-back-accent.svg);
  background-color: rgba(0,212,255,.85);
}
body.theme-scifi .pi-btn-delete-x {
  -webkit-mask-image: url(/portal/assets/icons/scifi/btn-delete-x.svg);
  mask-image: url(/portal/assets/icons/scifi/btn-delete-x.svg);
  background-color: rgba(180,190,210,.6);
}
body.theme-scifi .pi-btn-accordion {
  -webkit-mask-image: url(/portal/assets/icons/scifi/btn-accordion.svg);
  mask-image: url(/portal/assets/icons/scifi/btn-accordion.svg);
  background-color: rgba(120,200,255,.7);
}
body.theme-scifi .pi-deco-wirken {
  -webkit-mask-image: url(/portal/assets/icons/scifi/deco-wirken.svg);
  mask-image: url(/portal/assets/icons/scifi/deco-wirken.svg);
}


/* ============================================
   THEMED ICONS — Modern / Basic Override
   (Gleiche SVGs, gleiche Farben)
   ============================================ */

/* Multi-Color (background-image) */
body.theme-modern .pi-nav-logout {
  background-image: url(/portal/assets/icons/modern/nav-logout.svg);
}
body.theme-modern .pi-nav-logout-compact {
  background-image: url(/portal/assets/icons/modern/nav-logout-compact.svg);
}
body.theme-modern .pi-logo-quests {
  background-image: url(/portal/assets/icons/modern/logo-quests.svg);
}
body.theme-modern .pi-logo-todos {
  background-image: url(/portal/assets/icons/modern/logo-todos.svg);
}
body.theme-modern .pi-logo-rituals {
  background-image: url(/portal/assets/icons/modern/logo-rituals.svg);
}
body.theme-modern .pi-logo-compass {
  background-image: url(/portal/assets/icons/modern/logo-compass.svg);
}
body.theme-modern .pi-logo-arkana {
  background-image: url(/portal/assets/icons/modern/logo-arkana.svg);
}
body.theme-modern .pi-logo-ziele {
  background-image: url(/portal/assets/icons/modern/logo-ziele.svg);
}

/* Single-Color (mask-image + color) */
body.theme-modern .pi-nav-back-accent {
  -webkit-mask-image: url(/portal/assets/icons/modern/nav-back-accent.svg);
  mask-image: url(/portal/assets/icons/modern/nav-back-accent.svg);
  background-color: rgba(99,179,237,.85);
}
body.theme-modern .pi-btn-delete-x {
  -webkit-mask-image: url(/portal/assets/icons/modern/btn-delete-x.svg);
  mask-image: url(/portal/assets/icons/modern/btn-delete-x.svg);
  background-color: rgba(160,175,200,.6);
}
body.theme-modern .pi-btn-accordion {
  -webkit-mask-image: url(/portal/assets/icons/modern/btn-accordion.svg);
  mask-image: url(/portal/assets/icons/modern/btn-accordion.svg);
  background-color: rgba(160,175,200,.7);
}
body.theme-modern .pi-deco-wirken {
  -webkit-mask-image: url(/portal/assets/icons/modern/deco-wirken.svg);
  mask-image: url(/portal/assets/icons/modern/deco-wirken.svg);
}


/* ============================================
   SIZE VARIANTS
   ============================================ */

.pi-xs  { width: 12px; height: 12px; }
.pi-sm  { width: 16px; height: 16px; }
.pi-md  { width: 20px; height: 20px; }
.pi-lg  { width: 24px; height: 24px; }
.pi-xl  { width: 32px; height: 32px; }
.pi-2xl { width: 40px; height: 40px; }


/* ============================================
   CONTEXT SIZES (passend zu bestehendem Layout)
   ============================================ */

/* Back/Forward in topbar */
.iconbtn .pi  { width: 20px; height: 20px; }

/* Logout FAB */
.logoutfab .pi { width: 22px; height: 22px; }

/* Sort-Pills */
.sortPill .pi { width: 16px; height: 16px; }

/* Action Buttons */
.todoDoneBtn .pi,
.archivCompleteBtn .pi { width: 18px; height: 18px; }
.todoDelBtn .pi { width: 14px; height: 14px; }

/* Settings Gear */
.ritualSettingsBtn .pi,
.goalSettingsBtn .pi { width: 16px; height: 16px; }

/* Accordion Chevron */
.createAccordionToggle .pi {
  width: 14px; height: 14px;
  transition: transform 0.25s ease;
}
.createAccordionToggle.collapsed .pi,
.collapsed > .createAccordionToggle .pi {
  transform: rotate(-90deg);
}

/* Page Logo */
.pageLogoSmall .pi { width: 22px; height: 22px; }

/* TodoIcon Bullet */
.todoIcon .pi { width: 6px; height: 6px; }

/* Archive Button */
.archiveBtn .pi { width: 44px; height: 44px; }

/* Nachbarwelt Accordion Headers */
.accordion-button .pi { width: 18px; height: 18px; margin-right: 8px; }

/* Forward in archive link */
.archiveLink .pi { width: 16px; height: 16px; }

/* Filter Pills */
.filterPill .pi { width: 16px; height: 16px; }

/* Chronicle mini buttons */
.mini .pi { width: 14px; height: 14px; }

/* Orbit nav buttons */
.orbitNav .pi { width: 18px; height: 18px; }

/* Wirken button */
.ritualMenuBtn .pi { width: 22px; height: 22px; }

/* Achievement Sigils */
.achSigil .pi { width: 22px; height: 22px; }

/* Home QuickStat Icons */
.quickStatIcon .pi { width: 18px; height: 18px; }

/* Home Share Button */
.sharePlaceholderBtn .pi { width: 18px; height: 18px; }


/* ============================================
   LIB-ICONS (portal_icon() Bibliothek)
   61 Icons — alle currentColor (mask-image)
   Verwendung: <i class="pi pi-mask pi-lib-{name}"></i>
   ============================================ */

.pi-lib-alert {
  -webkit-mask-image: url(/portal/assets/icons/common/lib-alert.svg);
  mask-image: url(/portal/assets/icons/common/lib-alert.svg);
}
.pi-lib-arrow-up {
  -webkit-mask-image: url(/portal/assets/icons/common/lib-arrow-up.svg);
  mask-image: url(/portal/assets/icons/common/lib-arrow-up.svg);
}
.pi-lib-award {
  -webkit-mask-image: url(/portal/assets/icons/common/lib-award.svg);
  mask-image: url(/portal/assets/icons/common/lib-award.svg);
}
.pi-lib-back {
  -webkit-mask-image: url(/portal/assets/icons/common/lib-back.svg);
  mask-image: url(/portal/assets/icons/common/lib-back.svg);
}
.pi-lib-book {
  -webkit-mask-image: url(/portal/assets/icons/common/lib-book.svg);
  mask-image: url(/portal/assets/icons/common/lib-book.svg);
}
.pi-lib-calendar {
  -webkit-mask-image: url(/portal/assets/icons/common/lib-calendar.svg);
  mask-image: url(/portal/assets/icons/common/lib-calendar.svg);
}
.pi-lib-chart {
  -webkit-mask-image: url(/portal/assets/icons/common/lib-chart.svg);
  mask-image: url(/portal/assets/icons/common/lib-chart.svg);
}
.pi-lib-check {
  -webkit-mask-image: url(/portal/assets/icons/common/lib-check.svg);
  mask-image: url(/portal/assets/icons/common/lib-check.svg);
}
.pi-lib-chess {
  -webkit-mask-image: url(/portal/assets/icons/common/lib-chess.svg);
  mask-image: url(/portal/assets/icons/common/lib-chess.svg);
}
.pi-lib-close {
  -webkit-mask-image: url(/portal/assets/icons/common/lib-close.svg);
  mask-image: url(/portal/assets/icons/common/lib-close.svg);
}
.pi-lib-compass {
  -webkit-mask-image: url(/portal/assets/icons/common/lib-compass.svg);
  mask-image: url(/portal/assets/icons/common/lib-compass.svg);
}
.pi-lib-crown {
  -webkit-mask-image: url(/portal/assets/icons/common/lib-crown.svg);
  mask-image: url(/portal/assets/icons/common/lib-crown.svg);
}
.pi-lib-delete {
  -webkit-mask-image: url(/portal/assets/icons/common/lib-delete.svg);
  mask-image: url(/portal/assets/icons/common/lib-delete.svg);
}
.pi-lib-edit {
  -webkit-mask-image: url(/portal/assets/icons/common/lib-edit.svg);
  mask-image: url(/portal/assets/icons/common/lib-edit.svg);
}
.pi-lib-eye-off {
  -webkit-mask-image: url(/portal/assets/icons/common/lib-eye-off.svg);
  mask-image: url(/portal/assets/icons/common/lib-eye-off.svg);
}
.pi-lib-eye {
  -webkit-mask-image: url(/portal/assets/icons/common/lib-eye.svg);
  mask-image: url(/portal/assets/icons/common/lib-eye.svg);
}
.pi-lib-flame {
  -webkit-mask-image: url(/portal/assets/icons/common/lib-flame.svg);
  mask-image: url(/portal/assets/icons/common/lib-flame.svg);
}
.pi-lib-forward {
  -webkit-mask-image: url(/portal/assets/icons/common/lib-forward.svg);
  mask-image: url(/portal/assets/icons/common/lib-forward.svg);
}
.pi-lib-gem {
  -webkit-mask-image: url(/portal/assets/icons/common/lib-gem.svg);
  mask-image: url(/portal/assets/icons/common/lib-gem.svg);
}
.pi-lib-globe {
  -webkit-mask-image: url(/portal/assets/icons/common/lib-globe.svg);
  mask-image: url(/portal/assets/icons/common/lib-globe.svg);
}
.pi-lib-handshake {
  -webkit-mask-image: url(/portal/assets/icons/common/lib-handshake.svg);
  mask-image: url(/portal/assets/icons/common/lib-handshake.svg);
}
.pi-lib-heart {
  -webkit-mask-image: url(/portal/assets/icons/common/lib-heart.svg);
  mask-image: url(/portal/assets/icons/common/lib-heart.svg);
}
.pi-lib-home {
  -webkit-mask-image: url(/portal/assets/icons/common/lib-home.svg);
  mask-image: url(/portal/assets/icons/common/lib-home.svg);
}
.pi-lib-infinity {
  -webkit-mask-image: url(/portal/assets/icons/common/lib-infinity.svg);
  mask-image: url(/portal/assets/icons/common/lib-infinity.svg);
}
.pi-lib-info {
  -webkit-mask-image: url(/portal/assets/icons/common/lib-info.svg);
  mask-image: url(/portal/assets/icons/common/lib-info.svg);
}
.pi-lib-journal {
  -webkit-mask-image: url(/portal/assets/icons/common/lib-journal.svg);
  mask-image: url(/portal/assets/icons/common/lib-journal.svg);
}
.pi-lib-link {
  -webkit-mask-image: url(/portal/assets/icons/common/lib-link.svg);
  mask-image: url(/portal/assets/icons/common/lib-link.svg);
}
.pi-lib-list {
  -webkit-mask-image: url(/portal/assets/icons/common/lib-list.svg);
  mask-image: url(/portal/assets/icons/common/lib-list.svg);
}
.pi-lib-lock {
  -webkit-mask-image: url(/portal/assets/icons/common/lib-lock.svg);
  mask-image: url(/portal/assets/icons/common/lib-lock.svg);
}
.pi-lib-logout {
  -webkit-mask-image: url(/portal/assets/icons/common/lib-logout.svg);
  mask-image: url(/portal/assets/icons/common/lib-logout.svg);
}
.pi-lib-map {
  -webkit-mask-image: url(/portal/assets/icons/common/lib-map.svg);
  mask-image: url(/portal/assets/icons/common/lib-map.svg);
}
.pi-lib-medal {
  -webkit-mask-image: url(/portal/assets/icons/common/lib-medal.svg);
  mask-image: url(/portal/assets/icons/common/lib-medal.svg);
}
.pi-lib-menu {
  -webkit-mask-image: url(/portal/assets/icons/common/lib-menu.svg);
  mask-image: url(/portal/assets/icons/common/lib-menu.svg);
}
.pi-lib-moon {
  -webkit-mask-image: url(/portal/assets/icons/common/lib-moon.svg);
  mask-image: url(/portal/assets/icons/common/lib-moon.svg);
}
.pi-lib-palette {
  -webkit-mask-image: url(/portal/assets/icons/common/lib-palette.svg);
  mask-image: url(/portal/assets/icons/common/lib-palette.svg);
}
.pi-lib-pen {
  -webkit-mask-image: url(/portal/assets/icons/common/lib-pen.svg);
  mask-image: url(/portal/assets/icons/common/lib-pen.svg);
}
.pi-lib-plus {
  -webkit-mask-image: url(/portal/assets/icons/common/lib-plus.svg);
  mask-image: url(/portal/assets/icons/common/lib-plus.svg);
}
.pi-lib-quest {
  -webkit-mask-image: url(/portal/assets/icons/common/lib-quest.svg);
  mask-image: url(/portal/assets/icons/common/lib-quest.svg);
}
.pi-lib-refresh {
  -webkit-mask-image: url(/portal/assets/icons/common/lib-refresh.svg);
  mask-image: url(/portal/assets/icons/common/lib-refresh.svg);
}
.pi-lib-repeat {
  -webkit-mask-image: url(/portal/assets/icons/common/lib-repeat.svg);
  mask-image: url(/portal/assets/icons/common/lib-repeat.svg);
}
.pi-lib-ritual {
  -webkit-mask-image: url(/portal/assets/icons/common/lib-ritual.svg);
  mask-image: url(/portal/assets/icons/common/lib-ritual.svg);
}
.pi-lib-rocket {
  -webkit-mask-image: url(/portal/assets/icons/common/lib-rocket.svg);
  mask-image: url(/portal/assets/icons/common/lib-rocket.svg);
}
.pi-lib-save {
  -webkit-mask-image: url(/portal/assets/icons/common/lib-save.svg);
  mask-image: url(/portal/assets/icons/common/lib-save.svg);
}
.pi-lib-settings {
  -webkit-mask-image: url(/portal/assets/icons/common/lib-settings.svg);
  mask-image: url(/portal/assets/icons/common/lib-settings.svg);
}
.pi-lib-share {
  -webkit-mask-image: url(/portal/assets/icons/common/lib-share.svg);
  mask-image: url(/portal/assets/icons/common/lib-share.svg);
}
.pi-lib-shield {
  -webkit-mask-image: url(/portal/assets/icons/common/lib-shield.svg);
  mask-image: url(/portal/assets/icons/common/lib-shield.svg);
}
.pi-lib-sparkle {
  -webkit-mask-image: url(/portal/assets/icons/common/lib-sparkle.svg);
  mask-image: url(/portal/assets/icons/common/lib-sparkle.svg);
}
.pi-lib-star {
  -webkit-mask-image: url(/portal/assets/icons/common/lib-star.svg);
  mask-image: url(/portal/assets/icons/common/lib-star.svg);
}
.pi-lib-sun {
  -webkit-mask-image: url(/portal/assets/icons/common/lib-sun.svg);
  mask-image: url(/portal/assets/icons/common/lib-sun.svg);
}
.pi-lib-target {
  -webkit-mask-image: url(/portal/assets/icons/common/lib-target.svg);
  mask-image: url(/portal/assets/icons/common/lib-target.svg);
}
.pi-lib-task {
  -webkit-mask-image: url(/portal/assets/icons/common/lib-task.svg);
  mask-image: url(/portal/assets/icons/common/lib-task.svg);
}
.pi-lib-tier-common {
  -webkit-mask-image: url(/portal/assets/icons/common/lib-tier-common.svg);
  mask-image: url(/portal/assets/icons/common/lib-tier-common.svg);
}
.pi-lib-tier-epic {
  -webkit-mask-image: url(/portal/assets/icons/common/lib-tier-epic.svg);
  mask-image: url(/portal/assets/icons/common/lib-tier-epic.svg);
}
.pi-lib-tier-legendary {
  -webkit-mask-image: url(/portal/assets/icons/common/lib-tier-legendary.svg);
  mask-image: url(/portal/assets/icons/common/lib-tier-legendary.svg);
}
.pi-lib-tier-rare {
  -webkit-mask-image: url(/portal/assets/icons/common/lib-tier-rare.svg);
  mask-image: url(/portal/assets/icons/common/lib-tier-rare.svg);
}
.pi-lib-tier-uncommon {
  -webkit-mask-image: url(/portal/assets/icons/common/lib-tier-uncommon.svg);
  mask-image: url(/portal/assets/icons/common/lib-tier-uncommon.svg);
}
.pi-lib-trending-up {
  -webkit-mask-image: url(/portal/assets/icons/common/lib-trending-up.svg);
  mask-image: url(/portal/assets/icons/common/lib-trending-up.svg);
}
.pi-lib-trophy {
  -webkit-mask-image: url(/portal/assets/icons/common/lib-trophy.svg);
  mask-image: url(/portal/assets/icons/common/lib-trophy.svg);
}
.pi-lib-unlock {
  -webkit-mask-image: url(/portal/assets/icons/common/lib-unlock.svg);
  mask-image: url(/portal/assets/icons/common/lib-unlock.svg);
}
.pi-lib-user {
  -webkit-mask-image: url(/portal/assets/icons/common/lib-user.svg);
  mask-image: url(/portal/assets/icons/common/lib-user.svg);
}
.pi-lib-users {
  -webkit-mask-image: url(/portal/assets/icons/common/lib-users.svg);
  mask-image: url(/portal/assets/icons/common/lib-users.svg);
}
.pi-lib-zap {
  -webkit-mask-image: url(/portal/assets/icons/common/lib-zap.svg);
  mask-image: url(/portal/assets/icons/common/lib-zap.svg);
}