/* COLOR STATUS PILLS, DISCS, TABLE CELL REPLACMENTS */
.color-pill,
.color-disc,
li span.forceOutputFormulaHtml:has(img:not([alt=" "])),
td span.forceOutputFormulaHtml:has(img:not([alt=" "])) {
    padding: 7px 9px 5px;
    font-size: 12px;
    line-height: 1;
    background: var(--uiui-dark, #6E6F72);
    color: var(--shield-palette-inverse-text, #FFF);
    min-width: 20px;
    border-radius: 14px;
    text-transform: uppercase;
    font-weight: 800;
    letter-spacing: .025em;
    display: inline-block;
    white-space: nowrap !important;
    overflow: hidden !important;
}
.color-disc,
li span.forceOutputFormulaHtml:has(img[alt="Tier 0"]),
li span.forceOutputFormulaHtml:has(img[alt="Tier 1"]),
li span.forceOutputFormulaHtml:has(img[alt="Tier 2"]),
li span.forceOutputFormulaHtml:has(img[alt="Not applicable"]),
li span.forceOutputFormulaHtml:has(img[alt="Not approved"]),
li span.forceOutputFormulaHtml:has(img[alt="Public"]),
li span.forceOutputFormulaHtml:has(img[alt="None"]),
td span.forceOutputFormulaHtml:has(img[alt="Tier 0"]),
td span.forceOutputFormulaHtml:has(img[alt="Tier 1"]),
td span.forceOutputFormulaHtml:has(img[alt="Tier 2"]),
td span.forceOutputFormulaHtml:has(img[alt="Not applicable"]),
td span.forceOutputFormulaHtml:has(img[alt="Not approved"]),
td span.forceOutputFormulaHtml:has(img[alt="Public"]),
td span.forceOutputFormulaHtml:has(img[alt="None"]) {
    width: 20px;
    padding: 5px 0 3px;
    display: flex;
    align-items: center;
    justify-content: center;
}
li span.forceOutputFormulaHtml:has(img) img,
td span.forceOutputFormulaHtml:has(img) img {
    display: none;
}
.color-pill[title="Training Only (WDI)"],
.color-pill[title="Not applicable"],
li span.forceOutputFormulaHtml:has(img[alt="Not applicable"]),
li span.forceOutputFormulaHtml:has(img[alt="None"]),
li span.forceOutputFormulaHtml:has(img[alt="Training Only - WDI"]),
td span.forceOutputFormulaHtml:has(img[alt="Not applicable"]),
td span.forceOutputFormulaHtml:has(img[alt="None"]),
td span.forceOutputFormulaHtml:has(img[alt="Training Only - WDI"]) {
    background: var(--uiui-light, #E4E5E9);
    color: var(--uiui-dark, #6E6F72);
}
.color-pill[title="Tier 2"],
.color-disc[title="2"],
li span.forceOutputFormulaHtml:has(img[alt="Tier 2"]),
td span.forceOutputFormulaHtml:has(img[alt="Tier 2"]) {
    background: #50D9F7;
}
.color-pill[title="Tier 1"],
.color-disc[title="1"],
li span.forceOutputFormulaHtml:has(img[alt="Tier 1"]),
td span.forceOutputFormulaHtml:has(img[alt="Tier 1"]) {
    background: #1991CD;
}
.color-pill[title="Tier 0"],
.color-disc[title="0"],
li span.forceOutputFormulaHtml:has(img[alt="Tier 0"]),
td span.forceOutputFormulaHtml:has(img[alt="Tier 0"]) {
    background: #124883;
}


.color-pill[title="Approved"],
li span.forceOutputFormulaHtml:has(img[alt="Approved"]),
td span.forceOutputFormulaHtml:has(img[alt="Approved"]) {
    background: #028D21;
}
.color-pill[title="In Process - can receive assets"],
li span.forceOutputFormulaHtml:has(img[alt="In Process - can receive assets"]),
td span.forceOutputFormulaHtml:has(img[alt="In Process - can receive assets"]) {
    background: #F6D10C;
}
/* color: var(--shield-palette-text, #121212); */
.color-pill[title="In Process - can't receive assets"],
li span.forceOutputFormulaHtml:has(img[alt="In Process - can't receive assets"]),
td span.forceOutputFormulaHtml:has(img[alt="In Process - can't receive assets"]),
.color-pill[title="Not Approved"],
li span.forceOutputFormulaHtml:has(img[alt="Public"]),
li span.forceOutputFormulaHtml:has(img[alt="Not Approved"]),
td span.forceOutputFormulaHtml:has(img[alt="Public"]),
td span.forceOutputFormulaHtml:has(img[alt="Not Approved"]),
.color-pill[title="Approval Expired"],
li span.forceOutputFormulaHtml:has(img[alt="Approval Expired"]),
td span.forceOutputFormulaHtml:has(img[alt="Approval Expired"]) {
    background: #EA2222;
}
.color-pill[title="Not Active"],
li span.forceOutputFormulaHtml:has(img[alt="Not Active"]),
td span.forceOutputFormulaHtml:has(img[alt="Not Active"]),
.color-pill[title="Assessment Not Required"],
li span.forceOutputFormulaHtml:has(img[alt="Assessment Not Required"]),
td span.forceOutputFormulaHtml:has(img[alt="Assessment Not Required"]),
.color-pill[title="Location Closed"],
li span.forceOutputFormulaHtml:has(img[alt="Location Closed"]),
td span.forceOutputFormulaHtml:has(img[alt="Location Closed"]) {
    background: #E4E5E9;
    color: #6E6F72;
}


/* INDICATORS */
li span.forceOutputFormulaHtml:has(img[alt="VER"]) img, 
li span.forceOutputFormulaHtml:has(img[alt="IMP"]) img,
td span.forceOutputFormulaHtml:has(img[alt="VER"]) img, 
td span.forceOutputFormulaHtml:has(img[alt="IMP"]) img {
    display: inline-block;
    position: relative;
    font-size: 10px;
    width: 30px;
    height: 20px;
    color: transparent;
    font-weight: 800;
    text-align: center;
    letter-spacing: .05em;
    overflow: visible;
}
li span.forceOutputFormulaHtml:has(img[alt="VER"]) img,
td span.forceOutputFormulaHtml:has(img[alt="VER"]) img {
    margin-right: 3px;
}
li span.forceOutputFormulaHtml:has(img[alt="VER"]), 
li span.forceOutputFormulaHtml:has(img[alt="IMP"]),
td span.forceOutputFormulaHtml:has(img[alt="VER"]), 
td span.forceOutputFormulaHtml:has(img[alt="IMP"]) {
    padding: 0;
    font-size: 16px;
    background: none;
    color: initial;
    min-width: auto;
    border-radius: 0;
    text-transform: none;
    font-weight: normal;
    letter-spacing: normal;
    overflow: visible !important;
}
li span.forceOutputFormulaHtml img[alt="VER"]:after,
li span.forceOutputFormulaHtml img[alt="IMP"]:after,
td span.forceOutputFormulaHtml img[alt="VER"]:after,
td span.forceOutputFormulaHtml img[alt="IMP"]:after {
    display: block;
    position: absolute;
    content: attr(alt);
    top: -1px;
    left: -1px;
    width: 30px;
    border-radius: 5px;
    padding: 5px 4px 4px 4px;
    color: white;
}
li span.forceOutputFormulaHtml img[alt="VER"]:after,
td span.forceOutputFormulaHtml img[alt="VER"]:after {
    background-color: #6BC9DE;
}
li span.forceOutputFormulaHtml img[alt="IMP"]:after,
td span.forceOutputFormulaHtml img[alt="IMP"]:after {
    background-color: #E4CC61;
}