.img-boss {
    width: 40px;
    height: 40px;
    --size: 40;
    margin: 2px;
}

.popover-success {
    --bs-popover-max-width: 250px;
    --bs-popover-border-color: var(--bs-success);
    --bs-popover-header-bg: var(--bs-success);
    --bs-popover-header-color: var(--bs-white);
    --bs-popover-body-padding-x: 1rem;
    --bs-popover-body-padding-y: .5rem;
}

.popover-danger {
    --bs-popover-max-width: 250px;
    --bs-popover-border-color: var(--bs-danger);
    --bs-popover-header-bg: var(--bs-danger);
    --bs-popover-header-color: var(--bs-white);
    --bs-popover-body-padding-x: 1rem;
    --bs-popover-body-padding-y: .5rem;
}

.boss-data {
    font-family: Avenir, Arial, sans-serif !important;
}

.artifact {
    color: #FFEB3B !important /* yellow 500 */
    /* color: #e5cc80 !important */
}

.legendary {
    color: #ff8000 !important
}

.astounding {
    color: #e268a8 !important
}

.magnificent {
    color: #be8200 !important
}

.epic {
    color: #a335ee !important
}

.rare {
    color: #0070ff !important
}

.uncommon {
    color: #43A047 !important /* Green 600 */
    /* color: #1eff00 !important */
}

.common {
    color: #666 !important
}

.sprite {
    object-fit: cover;
}

.tiny-icon {
    width: 18px !important;
    height: 18px !important;
    margin: 0 6px;
    vertical-align: -6px;
    --size: 18 !important;
}

.big-icon {
    width: 24px !important;
    height: 24px !important;
    margin: 0 2px;
    vertical-align: -6px;
    --size: 24 !important;
}

.icon-row {
    display: flex;
    justify-content: center;
    align-items: center;
    vertical-align: middle;
}

.actor-sprite-1-Blood {
    object-position: calc(-1px*var(--size))0
}

.actor-sprite-1-BloodDPS {
    object-position: calc(-2px*var(--size))0
}

.actor-sprite-1-Frost {
    object-position: calc(-3px*var(--size))0
}

.actor-sprite-1-Lichborne {
    object-position: calc(-4px*var(--size))0
}

.actor-sprite-1-Melee {
    object-position: calc(-5px*var(--size))0
}

.actor-sprite-1-Runeblade {
    object-position: calc(-6px*var(--size))0
}

.actor-sprite-1-Unholy {
    object-position: calc(-7px*var(--size))0
}

.actor-sprite-1 {
    object-position: calc(-8px*var(--size))0
}

.actor-sprite-12-Havoc {
    object-position: calc(-9px*var(--size))0
}

.actor-sprite-12-Vengeance {
    object-position: calc(-10px*var(--size))0
}

.actor-sprite-12 {
    object-position: calc(-11px*var(--size))0
}

.actor-sprite-2-Balance {
    object-position: calc(-12px*var(--size))0
}

.actor-sprite-2-Dreamstate {
    object-position: calc(-13px*var(--size))0
}

.actor-sprite-2-Feral {
    object-position: calc(-14px*var(--size))0
}

.actor-sprite-2-Guardian {
    object-position: calc(-15px*var(--size))0
}

.actor-sprite-2-Restoration {
    object-position: calc(-16px*var(--size))0
}

.actor-sprite-2-Warden {
    object-position: calc(-17px*var(--size))0
}

.actor-sprite-2 {
    object-position: calc(-18px*var(--size))0
}

.actor-sprite-13-Augmentation {
    object-position: calc(-19px*var(--size))0
}

.actor-sprite-13-Devastation {
    object-position: calc(-20px*var(--size))0
}

.actor-sprite-13-Preservation {
    object-position: calc(-21px*var(--size))0
}

.actor-sprite-13-Ranged {
    object-position: calc(-22px*var(--size))0
}

.actor-sprite-13 {
    object-position: calc(-23px*var(--size))0
}

.actor-sprite-3-BeastMastery {
    object-position: calc(-24px*var(--size))0
}

.actor-sprite-3-Marksmanship {
    object-position: calc(-25px*var(--size))0
}

.actor-sprite-3-Melee {
    object-position: calc(-26px*var(--size))0
}

.actor-sprite-3-Ranged {
    object-position: calc(-27px*var(--size))0
}

.actor-sprite-3-Survival {
    object-position: calc(-28px*var(--size))0
}

.actor-sprite-3 {
    object-position: calc(-29px*var(--size))0
}

.actor-sprite-4-Arcane {
    object-position: calc(-30px*var(--size))0
}

.actor-sprite-4-Fire {
    object-position: calc(-31px*var(--size))0
}

.actor-sprite-4-Frost {
    object-position: calc(-32px*var(--size))0
}

.actor-sprite-4-Healer {
    object-position: calc(-33px*var(--size))0
}

.actor-sprite-4-Ranged {
    object-position: calc(-34px*var(--size))0
}

.actor-sprite-4 {
    object-position: calc(-35px*var(--size))0
}

.actor-sprite-5-Brewmaster {
    object-position: calc(-36px*var(--size))0
}

.actor-sprite-5-Mistweaver {
    object-position: calc(-37px*var(--size))0
}

.actor-sprite-5-Windwalker {
    object-position: calc(-38px*var(--size))0
}

.actor-sprite-5 {
    object-position: calc(-39px*var(--size))0
}

.actor-sprite-NPC {
    object-position: calc(-40px*var(--size))0
}

.actor-sprite-6-Holy {
    object-position: calc(-41px*var(--size))0
}

.actor-sprite-6-Justicar {
    object-position: calc(-42px*var(--size))0
}

.actor-sprite-6-Protection {
    object-position: calc(-43px*var(--size))0
}

.actor-sprite-6-Retribution {
    object-position: calc(-44px*var(--size))0
}

.actor-sprite-6 {
    object-position: calc(-45px*var(--size))0
}

.actor-sprite-Pet {
    object-position: calc(-46px*var(--size))0
}

.actor-sprite-7-Discipline {
    object-position: calc(-47px*var(--size))0
}

.actor-sprite-7-Healing {
    object-position: calc(-48px*var(--size))0
}

.actor-sprite-7-Holy {
    object-position: calc(-49px*var(--size))0
}

.actor-sprite-7-Shadow {
    object-position: calc(-50px*var(--size))0
}

.actor-sprite-7-Smiter {
    object-position: calc(-51px*var(--size))0
}

.actor-sprite-7 {
    object-position: calc(-52px*var(--size))0
}

.actor-sprite-8-Assassination {
    object-position: calc(-53px*var(--size))0
}

.actor-sprite-8-Combat {
    object-position: calc(-54px*var(--size))0
}

.actor-sprite-8-Melee {
    object-position: calc(-55px*var(--size))0
}

.actor-sprite-8-Outlaw {
    object-position: calc(-56px*var(--size))0
}

.actor-sprite-8-Subtlety {
    object-position: calc(-57px*var(--size))0
}

.actor-sprite-8-Tank {
    object-position: calc(-58px*var(--size))0
}

.actor-sprite-8 {
    object-position: calc(-59px*var(--size))0
}

.actor-sprite-9-Elemental {
    object-position: calc(-60px*var(--size))0
}

.actor-sprite-9-Enhancement {
    object-position: calc(-61px*var(--size))0
}

.actor-sprite-9-Restoration {
    object-position: calc(-62px*var(--size))0
}

.actor-sprite-9-Tank {
    object-position: calc(-63px*var(--size))0
}

.actor-sprite-9 {
    object-position: calc(-64px*var(--size))0
}

.actor-sprite-TricksOfTheTrade {
    object-position: calc(-65px*var(--size))0
}

.actor-sprite-UnholyFrenzy {
    object-position: calc(-66px*var(--size))0
}

.actor-sprite-10-Affliction {
    object-position: calc(-67px*var(--size))0
}

.actor-sprite-10-Demonology {
    object-position: calc(-68px*var(--size))0
}

.actor-sprite-10-Destruction {
    object-position: calc(-69px*var(--size))0
}

.actor-sprite-10-Ranged {
    object-position: calc(-70px*var(--size))0
}

.actor-sprite-10-Tank {
    object-position: calc(-71px*var(--size))0
}

.actor-sprite-10 {
    object-position: calc(-72px*var(--size))0
}

.actor-sprite-11-Arms {
    object-position: calc(-73px*var(--size))0
}

.actor-sprite-11-Champion {
    object-position: calc(-74px*var(--size))0
}

.actor-sprite-11-Fury {
    object-position: calc(-75px*var(--size))0
}

.actor-sprite-11-Gladiator {
    object-position: calc(-76px*var(--size))0
}

.actor-sprite-11-Melee {
    object-position: calc(-77px*var(--size))0
}

.actor-sprite-11-Protection {
    object-position: calc(-78px*var(--size))0
}

.actor-sprite-11-Warden {
    object-position: calc(-79px*var(--size))0
}

.actor-sprite-11 {
    object-position: calc(-80px*var(--size))0
}


.chart-container {
    position: relative;
    height: 500px;
    margin: 20px 0;
}
.loading {
    text-align: center;
    padding: 20px;
    font-size: 18px;
    color: #666;
}
.error {
    text-align: center;
    padding: 20px;
    font-size: 18px;
    color: #d32f2f;
    background-color: #ffebee;
    border-radius: 4px;
    margin: 20px 0;
}