jobs.css

#jobs {
  position: relative;
}

#bars {
  position: relative;
  top: 20px; /* Space for pull counter */
  left: 100px; /* Space for some left buffs */
}

#jobs-container.hide {
  display: none;
}

/* Bars */

/* Relative to #bars */
#pull-bar,
#hp-bar,
#mp-bar,
#mp-tick,
#cp-bar,
#gp-bar {
  width: 202px;
  height: 7px;
  margin-top: 1px;
}

#pull-bar {
  position: absolute;
  left: 100px;
  top: 0;
  height: 18px;
  font-size: 12px;
}

div.justbuffs div#bars,
div.justbuffs div#procs-container {
  display: none;
}

/** force non-transparent when you are crafter/gatherer */
#jobs.crafter > #opacity-container,
#jobs.gatherer > #opacity-container {
  opacity: 1 !important;
}

#mp-bar,
#gnb-bar,
#mnk-bar,
#rdm-bar {
  margin-top: 1px;
}

#hp-bar.show-number {
  height: 32px;
}

#mp-bar.show-number,
#cp-bar,
#gp-bar {
  height: 18px;
}

.mnk #hp-bar {
  height: 10px;
}

.pld #hp-bar,
.drk #hp-bar,
.whm #hp-bar,
.sch #hp-bar,
.ast #hp-bar,
.sge #hp-bar,
.blu #hp-bar {
  height: 18px;
}

.blm #mp-bar {
  height: 24px;
}

.bar-container {
  position: relative;
  width: 202px;
  height: 0;
  background: rgb(30 30 30 / 70%);
}

.timer-bar {
  display: block;
  position: relative;
  width: 100%;
  height: 8px;
  margin-top: 1px;
}

/* Relative to #bars */
#rdm-bar {
  position: relative;
  border: 1px solid black;
  width: 200px; /* 202 minus borders */
  height: calc(8px * 2 - 4px);
  background: rgb(30 30 30 / 70%);
}

#rdm-bar .marker {
  position: absolute;
  height: 100%;
}

#rdm-bar .marker.even {
  background: rgb(0 0 0 / 70%);
}

/* Relative to #rdm-bar */
#rdm-white-bar,
#rdm-black-bar {
  display: block;
  position: relative;
  margin: -1px -1px -2px;
  width: 100%;
  height: calc(100% - 4px);
}

/* Boxes */

/* Relative to #bars */
.box-container {
  display: flex;
  position: absolute;
  left: 202px;
  top: 0;
}

/*
  Fit the exact height of the bars if not too small
  Height of default/HP bar(show number)
*/
.box-container > div {
  display: inline-block;
  margin-left: 4;
  border: 1px solid rgb(0 0 0 / 70%);
  width: 29px;
  height: 29px;
}

.box-container .text {
  text-align: center;
  position: relative;
  top: 5px;
  font-size: 16px;
  line-height: 1.1em;
}

/* Height of HP + MP bar(show number) */
#pld-boxes > div,
#drk-boxes > div,
#whm-boxes > div,
#sch-boxes > div,
#ast-boxes > div,
#sge-boxes > div {
  width: 35px;
  height: 35px;
}

#pld-boxes .text,
#drk-boxes .text,
#whm-boxes .text,
#sch-boxes .text,
#ast-boxes .text,
#sge-boxes .text {
  text-align: center;
  position: relative;
  top: 6px;
  font-size: 20px;
}

/* Height of something special */
#smn-boxes > div,
#rdm-boxes > div {
  width: 28px;
  height: 28px;
}

#smn-boxes .text,
#rdm-boxes .text {
  text-align: center;
  position: relative;
  top: 5px;
  font-size: 16px;
}

#blm-boxes > div {
  width: 30px;
  height: 30px;
}

#blm-boxes .text {
  text-align: center;
  position: relative;
  top: 6px;
  font-size: 16px;
}

#mnk-boxes > div {
  width: 32px;
  height: 32px;
}

#mnk-boxes .text {
  text-align: center;
  position: relative;
  top: 7px;
  font-size: 16px;
}

/* Left box */
.blm-umbral-timer {
  position: absolute;

  /* fix this hack by using better layout primitives */
  left: -242px;
  background-color: rgb(0 0 0 / 30%);
}

/* Side Icons */
.big-buff {
  border: 1px solid black;
  width: 44px;
  height: 32px;
}

/* Relative to #bars */
#left-side-icons {
  position: absolute;
  left: -2px;
}

.blm #left-side-icons {
  left: -40px;
}

/* Relative to #bars, default for 1 small box */
#right-side-icons {
  position: absolute;
  left: 242px;
}

/* Space for no resource box */
.blu #right-side-icons {
  left: 204px;
}

/* Space for 2 resource boxes */
.drg #right-side-icons,
.nin #right-side-icons,
.sam #right-side-icons,
.rpr #right-side-icons,
.vpr #right-side-icons,
.brd #right-side-icons,
.mch #right-side-icons,
.dnc #right-side-icons,
.smn #right-side-icons,
.rdm #right-side-icons,
.pct #right-side-icons {
  left: 278px;
}

/* Space for 1 big resource box */
.drk #right-side-icons,
.whm #right-side-icons,
.sge #right-side-icons {
  left: 250px;
}

/* Space for 2 big resource box */
.pld #right-side-icons,
.sch #right-side-icons,
.ast #right-side-icons {
  left: 288px;
}

.justbuffs #right-side-icons {
  position: fixed;
  left: 0;
}

/* Stacks */
.stacks {
  display: flex;
  margin-top: 1px;
  width: 202px;
  height: 12px;
  align-items: stretch;
}

.stacks > * {
  display: flex;
  margin-right: 2px;
  flex: 1;
  width: 100%;
  height: 100%;
  align-items: stretch;
}

.stacks > * > * {
  background-color: rgb(174 227 235 / 20%);
  margin-right: 2px;
  display: inline-block;
  border: 1px solid black;
  height: 100%;
  flex: 1;
}

.stacks :last-child {
  margin-right: 0;
}

#pld-stacks-requiescat > div.active {
  background-color: rgb(25 156 255);
}

#whm-stacks-lily > div.active {
  background-color: rgb(60 80 200);
}

#whm-stacks-bloodlily > div {
  background-color: rgb(66 19 128 / 20%);
}

#whm-stacks-bloodlily > div.active {
  background-color: rgb(190 43 30);
}

#ast-stacks-card1.balance {
  background-color: #f90;
}

#ast-stacks-card1.spear {
  background-color: #47d;
}

#ast-stacks-card2.arrow {
  background-color: #37ccee;
}

#ast-stacks-card2.bole {
  background-color: #2d7;
}

#ast-stacks-card3.spire {
  background-color: #ddd044;
}

#ast-stacks-card3.ewer {
  background-color: #6cd;
}

#ast-stacks-card4.lord {
  background-color: #9a2222;
}

#ast-stacks-card4.lady {
  background-color: #9e5599;
}

#ast-stacks-sign > div.solar {
  background-color: rgb(190 43 30);
}

#ast-stacks-sign > div.lunar {
  background-color: rgb(222 195 95);
}

#ast-stacks-sign > div.celestial {
  background-color: rgb(125 250 250);
}

#sge-stacks-addersgall > div.active {
  background-color: rgb(120 170 250);
}

#sge-stacks-addersting > div {
  background-color: rgb(66 19 128 / 20%);
}

#sge-stacks-addersting > div.active {
  background-color: rgb(195 85 155);
}

#mnk-stacks-beastchakra {
  flex: 5;
}

#mnk-stacks-lunar > div,
#mnk-stacks-solar > div,
#mnk-stacks-raptor > div {
  background-color: rgb(66 19 128 / 20%);
}

#mnk-stacks-lunar > div.active {
  background-color: rgb(90 50 170);
}

#mnk-stacks-solar > div.active {
  background-color: rgb(200 200 200);
}

#mnk-stacks-beastchakra > div.raptor,
#mnk-stacks-raptor > div.active {
  background-color: rgb(150 90 180);
}

#mnk-stacks-beastchakra > div.opo,
#mnk-stacks-opoopo > div.active {
  background-color: rgb(240 100 150);
}

#mnk-stacks-beastchakra > div.coeurl,
#mnk-stacks-coeurl > div.active {
  background-color: rgb(75 155 120);
}

#sam-stacks-setsu.active {
  background-color: rgb(139 209 242);
}

#sam-stacks-getsu.active {
  background-color: rgb(100 100 238);
}

#sam-stacks-ka.active {
  background-color: rgb(230 142 142);
}

#rpr-stacks-enshroud > div.lemure {
  background-color: rgb(70 255 255);
}

#rpr-stacks-enshroud > div.void {
  background-color: rgb(255 0 255);
}

#vpr-stacks-vipersight[data-stacks="0"] {
  --bg-color: rgb(255 255 0);
}

#vpr-stacks-vipersight[data-stacks="1"] {
  --bg-color: rgb(255 0 0);
}

#vpr-stacks-vipersight[data-stacks="2"] {
  --bg-color: rgb(20 200 255);
}

#vpr-stacks-vipersight[data-side="both"] > div.left,
#vpr-stacks-vipersight[data-side="both"] > div.right,
#vpr-stacks-vipersight[data-side="left"] > div.left,
#vpr-stacks-vipersight[data-side="right"] > div.right {
  background-color: var(--bg-color);
}

#brd-stacks-magescoda.active {
  background-color: rgb(143 90 143);
}

#brd-stacks-armyscoda.active {
  background-color: rgb(207 205 52);
}

#brd-stacks-wandererscoda.active {
  background-color: rgb(100 150 100);
}

#mch-stacks-wildfire > div.active {
  background-color: rgb(250 0 0);
}

#mch-stacks-wildfire > div.fix {
  background-color: rgb(190 80 70);
}

#blm-stacks-heart > div.active {
  background-color: rgb(174 227 235);
}

#blm-stacks-xeno > div {
  background-color: rgb(66 19 128 / 20%);
}

#blm-stacks-xeno > div.active {
  background-color: rgb(200 50 200);
}

#blm-stacks-astral-souls {
  margin-top: 2px;
}

#blm-stacks-astral-souls > div.active {
  background-color: rgb(255 40 0);
}

#smn-stacks-ruin4 > div.active {
  background-color: rgb(65 0 200);
}

#smn-stacks-ruby > div.active {
  background-color: rgb(240 30 30);
}

#smn-stacks-emerald > div.active {
  background-color: rgb(0 140 0);
}

#smn-stacks-topaz > div.active {
  background-color: rgb(238 234 14);
}

#rdm-stacks-manastack > div.active {
  background-color: rgb(255 100 100);
}

/* Living Canvas Progress - total 4 steps */

/* First: Pom */
#pct-stacks-living > div.active:nth-child(1) {
  background-color: rgb(250 112 12);
}

/* Second: Wing */
#pct-stacks-living > div.active:nth-child(2) {
  background-color: rgb(177 106 165);
}

/* Third: Claw */
#pct-stacks-living > div.active:nth-child(3) {
  background-color: rgb(217 142 187);
}

/* Fourth: Fang */
#pct-stacks-living > div.active:nth-child(4) {
  background-color: rgb(74 27 27);
}

@keyframes pct-living-pulse {
  50% {
    box-shadow: 0 0 4px 0 rgb(247 185 243);
  }
}

#pct-stacks-living > div.pulse {
  animation: pct-living-pulse 1s infinite;
}

#pct-stacks-portrait > div.active:nth-child(1) {
  background-color: rgb(255 255 255);
}

#pct-stacks-portrait > div.active:nth-child(2) {
  background-color: rgb(175 190 100);
}

/* Procs */

/*
  Relative to #bars
  In general, jobs has ui such that the health bar can appear on top
  of the ffxiv target+buffs bar, with the procs appearing underneath.
  All jobs should have procs in roughly the same spot, and the
  entire bars + procs should be roughly 250px wide, 210px tall.
*/

#procs-container {
  position: absolute;
  top: 146px;
  left: 100px;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  align-items: flex-start;
  width: 210px;
}

#procs-container.compact {
  top: 80px;
}

.blm #procs-container.compact {
  top: 100px;
}

#procs-container > div {
  display: flex;

  /* every box is 50px big */
  width: 50px;

  /* although the box itself is only 50px, we want a gap of 5px */
  height: 55px;
}

/* Colors */
.bar-border-color {
  background-color: rgb(30 30 30);
}

.hp-color {
  background-color: rgb(59 133 4);
}

.hp-color.low {
  background-color: rgb(190 43 30);
}

.hp-color.mid {
  background-color: rgb(127 185 29);
}

.mp-color {
  background-color: rgb(188 55 147);
}

.mp-color.far {
  background-color: rgb(215 120 0);
}

.mp-color.low {
  background-color: rgb(210 20 65);
}

.mp-color.medium {
  background-color: rgb(65 0 200);
}

.mp-tick-color {
  background-color: rgb(133 192 231);
}

.mp-tick-color.ice {
  background-color: rgb(30 80 245);
}

.mp-tick-color.fire {
  background-color: rgb(229 56 53);
}

.cp-color {
  background-color: rgb(75 135 230);
}

.gp-color {
  background-color: rgb(20 50 20);
}

.combo-color {
  background-color: rgb(180 200 220);
}

@keyframes pulse-red {
  50% {
    background-color: rgb(255 50 0);
  }
}

@keyframes pulse-white { /* For those self red color */
  50% {
    background-color: rgb(255 255 255);
  }
}

/* PLD */
.pld-color-oath {
  background-color: rgb(255 210 45);
}

.pld-color-oath.mid {
  background-color: rgb(255 255 100);
}

.pld-color-oath.low {
  background-color: rgb(255 255 200);
}

.pld-color-atonement {
  background-color: rgb(214 237 255);
}

.pld-color-atonement.any,
.pld-color-requiescat {
  background-color: rgb(25 156 255);
}

.pld-color-gore,
.pld-color-scorn {
  background-color: rgb(255 135 35);
}

.pld-color-fightorflight {
  background-color: rgb(140 20 50);
}

.pld-color-fightorflight.active {
  background-color: rgb(240 50 20);
}

.pld-color-expiacion {
  background-color: rgb(140 60 200);
}

/* WAR */
.war-color-beast {
  background-color: rgb(230 20 20);
}

.war-color-beast.low {
  background-color: rgb(255 235 153);
}

.war-color-beast.mid {
  background-color: rgb(255 153 0);
}

.war-color-tempest {
  background-color: rgb(255 140 140);
}

.war-color-upheaval {
  background-color: rgb(130 40 0);
}

.war-color-innerrelease {
  background-color: rgb(255 0 0);
}

/* DRK */
.drk-color-blood {
  background-color: rgb(255 0 10);
}

.drk-color-blood.low {
  background-color: rgb(60 0 10);
}

.drk-color-blood.mid {
  background-color: rgb(200 0 10);
}

.drk-color-blood.pulse {
  animation: 1s pulse-white infinite;
}

.drk-color-darkside {
  background-color: rgb(129 33 138);
}

.drk-color-bloodweapon {
  background-color: rgb(133 0 0 / 70%);
}

.drk-color-saltedearth {
  background-color: rgb(255 80 80 / 60%);
}

.drk-color-livingshadow {
  background-color: rgb(123 58 126 / 50%);
}

/* GNB */
.gnb-color-cartridge {
  background-color: rgb(115 218 255);
}

.gnb-color-cartridge.full {
  background-color: rgb(250 86 45);
}

.gnb-color-gnashingfang {
  background-color: rgb(216 111 12);
}

.gnb-color-nomercy {
  background-color: rgb(232 127 127 / 70%);
}

.gnb-color-nomercy.active {
  background-color: rgb(232 127 127);
}

.gnb-color-bloodfest {
  background-color: rgb(9 81 98);
}

/* WHM */
.whm-color-dia {
  background-color: rgb(120 170 250);
}

.whm-color-assize {
  background-color: rgb(62 224 170);
}

.whm-color-pom {
  background-color: rgb(230 100 140);
}

.whm-color-lucid {
  background-color: rgb(227 148 210);
}

.whm-color-lilysecond {
  background-color: rgb(120 170 250);
}

.whm-color-lilysecond.full {
  background-color: rgb(240 30 30);
}

/* SCH */
.sch-color-bio {
  background-color: rgb(60 80 200);
}

.sch-color-aetherflow {
  background-color: rgb(255 96 207);
}

.sch-color-aetherflow.pulse {
  animation: 1s pulse-white infinite;
}

.sch-color-fairygauge {
  background-color: rgb(62 224 170);
}

.sch-color-fairygauge.bright {
  background-color: rgb(120 170 250);
}

.sch-color-lucid {
  background-color: rgb(227 148 210);
}

/* AST */
.ast-color-combust {
  background-color: rgb(120 170 250);
}

.ast-color-draw {
  background-color: rgb(64 65 163);
}

.ast-color-draw.astral {
  background-color: rgb(62 224 170);
}

.ast-color-draw.umbral {
  background-color: rgb(150 110 180);
}

.ast-color-lucid {
  background-color: rgb(227 148 210);
}

.ast-color-card {
  background-color: rgb(180 200 220);
}

.ast-color-card.range {
  background-color: rgb(255 96 207);
}

.ast-color-card.melee {
  background-color: rgb(120 170 250);
}

.ast-color-card.lady {
  background-color: rgb(200 160 200);
}

.ast-color-card.lord {
  background-color: rgb(200 70 70);
}

.ast-color-minordraw {
  background-color: rgb(250 120 60);
}

/* SGE */
.sge-color-adder {
  background-color: rgb(120 170 250);
}

.sge-color-adder.exceed {
  background-color: rgb(255 0 0);
}

.sge-color-dosis {
  background-color: rgb(195 85 155);
}

.sge-color-phlegma {
  background-color: rgb(255 200 255);
}

.sge-color-rhizomata {
  background-color: rgb(40 95 150);
}

.sge-color-lucid {
  background-color: rgb(227 148 210);
}

/* MNK */
.mnk-color-chakra {
  background-color: rgb(230 20 20);
}

.mnk-color-chakra.dim {
  background-color: rgb(244 194 66 / 30%);
}

.mnk-color-form {
  background-color: rgb(180 200 220);
}

.mnk-color-pb {
  background-color: rgb(200 130 0);
}

.mnk-color-dragonkick {
  background-color: rgb(200 130 0);
}

.mnk-color-twinsnakes {
  background-color: rgb(215 80 70);
}

.mnk-color-demolish {
  background-color: rgb(60 80 200);
}

.mnk-color-perfectbalance {
  background-color: rgb(225 80 0);
}

.mnk-color-riddleoffire {
  background-color: rgb(255 0 0);
}

.mnk-color-riddleofwind {
  background-color: rgb(60 160 120);
}

.mnk-color-brotherhood {
  background-color: rgb(255 170 50);
}

/* DRG */
.drg-color-disembowel,
.drg-color-powerserge {
  background-color: rgb(0 255 255 / 70%);
}

.drg-color-blood,
.drg-color-geirskogul {
  background-color: rgb(180 200 220);
}

.drg-color-blood.blood {
  background-color: rgb(0 89 255 / 50%);
}

.drg-color-blood.zero {
  background-color: rgb(0 89 255 / 50%);
}

.drg-color-blood.one {
  background-color: rgb(200 50 200 / 60%);
}

.drg-color-blood.two {
  background-color: rgb(217 51 0 / 70%);
}

.drg-color-blood.life,
.drg-color-geirskogul.active {
  background-color: rgb(217 51 0);
}

.drg-color-eyes {
  background-color: rgb(180 200 220);
}

.drg-color-eyes.zero {
  background-color: rgb(0 89 255 / 50%);
}

.drg-color-eyes.one {
  background-color: rgb(200 50 200 / 70%);
}

.drg-color-eyes.two {
  background-color: rgb(217 51 0);
}

.drg-color-highjump {
  background-color: rgb(35 100 255);
}

.drg-color-lancecharge {
  background-color: rgb(100 15 15);
}

.drg-color-lancecharge.active {
  background-color: rgb(217 51 0);
}

.drg-color-dragonsight {
  background-color: rgb(187 42 42 / 80%);
}

.drg-color-dragonsight.active {
  background-color: rgb(217 51 0);
}

.drg-color-firstmindsfocus {
  background-color: rgb(170 80 200);
}

/* NIN */
.nin-color-huton,
.nin-color-kazematoi {
  background-color: rgb(0 255 255);
}

@keyframes kazematoi-pulse {
  50% {
    background-color: rgb(255 50 0);
  }
}

.nin-kazematoi.pulse {
  animation: 1s kazematoi-pulse infinite;
}

.nin-color-trickattack {
  background-color: rgb(255 200 0 / 60%);
}

.nin-color-trickattack.active {
  background-color: rgb(255 200 0);
}

.nin-color-bunshin {
  background-color: rgb(250 80 0);
}

.nin-color-ninjutsu {
  background-color: rgb(250 150 250);
}

.nin-color-ninki.low {
  background-color: rgb(140 90 200);
}

.nin-color-ninki {
  background-color: rgb(200 50 20 / 70%);
}

.nin-color-ninki.high {
  background-color: rgb(255 42 0);
}

/* SAM */
.sam-color-kenki {
  background-color: rgb(255 150 150);
}

.sam-color-kenki.high {
  background-color: rgb(255 50 50);
}

.sam-color-meditation {
  background-color: rgb(188 76 35);
}

.sam-color-meditation.high {
  background-color: rgb(255 255 160);
}

.sam-color-fuka {
  background-color: rgb(200 50 40);
}

.sam-color-fugetsu {
  background-color: rgb(10 40 160);
}

.sam-color-tsubamegaeshi {
  background-color: rgb(150 100 230);
}

.sam-color-higanbana {
  background-color: rgb(220 115 60);
}

/* RPR */
.rpr-color-deathsdesign {
  background-color: rgb(140 35 140);
}

.rpr-color-gluttony {
  background-color: rgb(220 60 100);
}

.rpr-color-soulslice {
  background-color: rgb(15 35 75);
}

.rpr-color-arcanecircle {
  background-color: rgb(220 150 180);
}

.rpr-color-arcanecircle.active {
  background-color: rgb(200 40 120);
}

.rpr-color-bloodsowncircle {
  background-color: rgb(100 220 150);
}

.rpr-color-soul {
  background-color: rgb(180 20 20);
}

.rpr-color-shroud {
  background-color: rgb(0 170 170);
}

/* VPR */
.vpr-color-noxious-gnash {
  background-color: rgb(100 20 30);
}

.vpr-color-hunters-instinct {
  background-color: rgb(255 60 140);
}

.vpr-color-swiftscaled {
  background-color: rgb(255 200 60);
}

.vpr-color-vicecombo {
  background-color: rgb(99 123 77);
}

.vpr-color-rattling-coil {
  background-color: rgb(255 60 50);
}

.vpr-color-rattling-coil.pulse {
  animation: 1s pulse-white infinite;
}

.vpr-color-serpentofferings {
  background-color: rgb(255 30 20 / 30%);
}

.vpr-color-serpentofferings.high {
  background-color: rgb(90 150 220);
}

.vpr-color-serpentofferings.high.pulse {
  animation: 1s pulse-red infinite;
}

.vpr-color-serpentofferings.active {
  background-color: rgb(130 255 255);
}

/* BRD */
.brd-color-causticbite {
  background-color: rgb(182 68 235);
}

.brd-color-stormbite {
  background-color: rgb(72 117 202);
}

.brd-color-bite {
  background-color: rgb(150 30 90);
}

.brd-color-straightshotready {
  background-color: rgb(240 130 80);
}

.brd-color-song {
  background-color: rgb(180 200 220);
}

.brd-color-song.minuet {
  background-color: rgb(100 150 100);
}

.brd-color-song.minuet.full {
  background-color: rgb(250 150 0);
}

.brd-color-song.ballad {
  background-color: rgb(143 90 143);
}

.brd-color-song.paeon {
  background-color: rgb(207 205 52);
}

.brd-color-soulvoice {
  background-color: rgb(180 200 220);
}

.brd-color-soulvoice.high {
  background-color: rgb(250 100 0);
}

.brd-color-empyreal {
  background-color: rgb(80 200 250);
}

/* MCH */
.mch-color-heat {
  background-color: rgb(250 100 0);
}

.mch-color-heat.overheat {
  background-color: rgb(250 0 0);
}

.mch-color-battery {
  background-color: rgb(60 110 110);
}

.mch-color-battery.robot-active {
  background-color: rgb(80 200 200);
}

.mch-color-drill {
  background-color: rgb(235 235 50);
}

.mch-color-airanchor {
  background-color: rgb(80 200 200 / 50%);
}

.mch-color-chainsaw {
  background-color: rgb(190 60 100);
}

.mch-color-wildfire {
  background-color: rgb(160 40 20 / 70%);
}

.mch-color-wildfire.active {
  background-color: rgb(250 0 0);
}

/* DNC */
.dnc-color-standardstep {
  background-color: rgb(235 235 50);
}

.dnc-color-technicalstep {
  background-color: rgb(80 200 200 / 70%);
}

.dnc-color-technicalstep.active {
  background-color: rgb(80 200 200);
}

.dnc-color-flourish {
  background-color: rgb(150 100 0);
}

.dnc-color-flourish.active {
  background-color: rgb(255 145 0);
}

.dnc-color-esprit {
  background-color: rgb(255 200 0 / 70%);
}

.dnc-color-esprit.high {
  background-color: rgb(255 50 150);
}

.dnc-color-feather {
  background-color: rgb(160 200 50);
}

/* BLM */
.blm-color-thunder {
  background-color: rgb(64 65 163);
}

.blm-color-dot {
  background-color: rgb(200 110 245);
}

.blm-color-manafont {
  background-color: rgb(110 186 245);
}

.blm-color-fire {
  background-color: rgb(217 51 0);
}

.blm-umbral-timer.fire {
  background-color: rgb(229 56 53);
}

.blm-umbral-timer.ice {
  background-color: rgb(30 80 245);
}

.blm-xeno-timer {
  background-color: rgb(0 0 0 / 30%);
}

.blm-xeno-timer.active {
  background-color: rgb(200 50 200);
}

/* Pulse effect for xeno overwrite */
@keyframes pulse {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgb(200 50 200 / 70%);
  }

  70% {
    transform: scale(1);
    box-shadow: 0 0 0 10px rgb(200 50 200 / 0%);
  }

  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgb(200 50 200 / 0%);
  }
}

.blm-xeno-timer.pulse {
  box-shadow: 0 0 0 0 rgb(200 50 200 / 100%);
  animation: pulse 1s infinite;
}

/* SMN */
.smn-color-ruin {
  background-color: rgb(150 233 140);
}

.smn-color-aetherflow {
  background-color: rgb(255 96 207);
}

.smn-color-aetherflow.too-much-stacks {
  background-color: rgb(240 30 30);
}

.smn-color-biosmn {
  background-color: olivedrab;
}

.smn-color-miasma {
  background-color: cornflowerblue;
}

.smn-color-energydrain {
  background-color: brown;
}

.smn-color-trance {
  background-color: rgb(60 80 200);
}

.smn-color-demisummon,
.smn-color-demisummon.solarbahamutready {
  background-color: rgb(180 200 220);
}

.smn-color-demisummon.bahamutready {
  background-color: rgb(64 65 163);
}

.smn-color-demisummon.firebirdready {
  background-color: orange;
}

.smn-color-demisummon.last {
  background-color: rgb(240 30 30);
}

.smn-color-demisummon.ifrit {
  background-color: rgb(240 30 30);
}

.smn-color-demisummon.garuda {
  background-color: rgb(0 140 0);
}

.smn-color-demisummon.titan {
  background-color: rgb(238 234 14);
}

.smn-color-lucid {
  background-color: rgb(227 148 210);
}

/* RDM */
.rdm-color-white-mana {
  background-color: rgb(220 220 240);
}

.rdm-color-black-mana {
  background-color: rgb(47 100 208);
}

.rdm-color-white-mana.dim {
  background-color: rgb(100 100 100);
}

.rdm-color-black-mana.dim {
  background-color: rgb(13 76 80);
}

.rdm-color-lucid {
  background-color: rgb(227 148 210);
}

.rdm-color-stone {
  background-color: rgb(250 176 73);
}

.rdm-color-fire {
  background-color: rgb(240 76 0);
}

.rdm-color-fleche {
  background-color: rgb(25 190 255);
}

.rdm-color-contresixte {
  background-color: rgb(30 80 170);
}

/* PCT */
.pct-color-palettegauge {
  background-color: rgb(192 250 255);
}

.pct-color-palettegauge.full {
  /* Rainbow color */
  background: linear-gradient(90deg, #2d68b1, #c4247f, #fac16d, #e4f57b, #0a9b4f, #0bab7a, #0bb4a8);
}

.pct-color-whitepaint {
  background-color: rgb(110 255 255);
}

.pct-color-whitepaint.black {
  background-color: rgb(125 0 235);
}

.pct-color-livingmuse {
  background-color: rgb(139 184 52);
}

.pct-color-steelmuse {
  background-color: rgb(170 55 40);
}

.pct-color-scenicmuse {
  background-color: rgb(140 78 174);
}

/* BLU */
.blu-color-offguard {
  background-color: rgb(210 255 196);
}

.blu-color-torment {
  background-color: rgb(168 65 45);
}

.blu-color-lucid {
  background-color: rgb(227 148 210);
}

/* Proc box animation */
.proc-box.in-combat .notify-when-expired.expired {
  display: block;
  animation:
    var(--proc-box-notify-animation, proc-box-flash)
    var(--proc-box-notify-duration, 1s)
    var(--proc-box-notify-repeat, infinite);
}

@keyframes proc-box-flash {
  50% {
    opacity: 0;
  }
}

/** hide bars except hp-bar and mp-bar */
#jobs-container[data-inpvp="true"] #procs-container,
#jobs-container[data-inpvp="true"] #opacity-container > #bars > div:not(#hp-bar):not(#mp-bar) {
  display: none;
}