:root {
    --pf2emm-color-essential: #008000;
    --pf2emm-color-essential-outline: #008000bf;
    --pf2emm-color-helpful: #91a82a;
    --pf2emm-color-helpful-outline: #91a82abf;
    --pf2emm-color-harmful: #ff0000;
    --pf2emm-color-harmful-outline: #ff0000bf;
    --pf2emm-color-detrimental: #ff852f;
    --pf2emm-color-detrimental-outline: #ff852fbf;

    --pf2emm-color-glow: #ffcc00;
}

.pf2emm-highlight {
    font-weight: bold;
}

.tag_alt.pf2emm-is-ESSENTIAL {
    background-color: var(--pf2emm-color-essential);
}

.tag_alt.pf2emm-is-HELPFUL {
    background-color: var(--pf2emm-color-helpful);
}

.tag_alt.pf2emm-is-HARMFUL {
    background-color: var(--pf2emm-color-harmful);
}

.tag_alt.pf2emm-is-DETRIMENTAL {
    background-color: var(--pf2emm-color-detrimental);
}

.tag_transparent.pf2emm-is-ESSENTIAL {
    color: var(--pf2emm-color-essential);
    box-shadow: inset 0 0 0 1px var(--pf2emm-color-essential-outline);
}

.tag_transparent.pf2emm-is-HELPFUL {
    color: var(--pf2emm-color-helpful);
    box-shadow: inset 0 0 0 1px var(--pf2emm-color-helpful-outline);
}

.tag_transparent.pf2emm-is-HARMFUL {
    color: var(--pf2emm-color-harmful);
    box-shadow: inset 0 0 0 1px var(--pf2emm-color-harmful-outline);
}

.tag_transparent.pf2emm-is-DETRIMENTAL {
    color: var(--pf2emm-color-detrimental);
    box-shadow: inset 0 0 0 1px var(--pf2emm-color-detrimental-outline);
}

.pf2emm-suffix.pf2emm-is-ESSENTIAL {
    color: var(--pf2emm-color-essential);
}

.pf2emm-suffix.pf2emm-is-HELPFUL {
    color: var(--pf2emm-color-helpful);
}

.pf2emm-suffix.pf2emm-is-HARMFUL {
    color: var(--pf2emm-color-harmful);
}

.pf2emm-suffix.pf2emm-is-DETRIMENTAL {
    color: var(--pf2emm-color-detrimental);
}

@keyframes pf2emm-glow {
    0% {
        text-shadow: 0 0 12px var(--pf2emm-color-glow);
        opacity: 0.7;
    }
    100% {
        text-shadow: 0 0 6px var(--pf2emm-color-glow);
        opacity: 1;
    }
}

.pf2emm-potential {
    display: none; /* overridden with !important if it is visible */
    margin: 0 8px;
    /* 51 iterations, 30s total, ends on 100% */
    animation: pf2emm-glow 0.6s 51 alternate;
    animation-timing-function: ease-in-out;
    animation-fill-mode: both;
    font-weight: 600;
}

.pf2emm_hp_1_status .pf2emm-potential.has_potential_1_status,
.pf2emm_hp_2_status .pf2emm-potential.has_potential_2_status,
.pf2emm_hp_2_circumstance_ac .pf2emm-potential.has_potential_2_circumstance_ac {
    display: unset !important;
}