.apple,
.hov-apple:hover {
    background-color: var(--apple-green);
}
.light-neutral {
    background-color: var(--light-neutral);
}
div.dark-cyan {
    background-color: var(--dark-cyan);
}
.darker-cyan {
    background-color: var(--darker-cyan);
}
.dark-gray {
    background-color: var(--dark-gray);
}
.darker-gray {
    background-color: var(--darker-gray);
}
.darkish-gray {
    background-color: var(--darkish-gray);
}
.green {
    background-color: var(--green);
}
.gray {
    background-color: var(--gray);
}
.lilac,
.hov-lilac:hover {
    background-color: var(--lilac);
}
.mint,
.hov-mint:hover {
    background-color: var(--fresh-mint);
}
.half-mint {
    background-color: var(--half-fresh-mint);
}
.mute-green {
    background-color: var(--mute-green);
}
.neutral,
.hov-neutral:hover {
    background-color: var(--neutral);
}
.orange {
    background-color: var(--orange) !important;
}
.red {
    background-color: var(--red) !important;
}
div.white {
    background-color: var(--white) !important;
}

.fresh-mint {
    background-color: var(--fresh-mint);
}

div.graph-red {
    background-color: var(--graph-red);
}
div.graph-lilac {
    background-color: var(--graph-lilac);
}
div.graph-green {
    background-color: var(--graph-green);
}

img.dark-cyan {
    filter: brightness(0) saturate(100%) invert(18%) sepia(5%) saturate(4558%) hue-rotate(131deg) brightness(92%) contrast(80%);
}
img.white {
    filter: brightness(0) saturate(100%) invert(99%) sepia(12%) saturate(0%) hue-rotate(18deg) brightness(103%) contrast(100%);
}

span.dark-cyan {
    color: var(--dark-cyan);
}
span.white {
    color: var(--white);
}

.red-img {
    filter: brightness(0) saturate(100%) invert(29%) sepia(73%) saturate(1320%) hue-rotate(317deg) brightness(107%) contrast(92%);
}
.grey-img {
    filter: brightness(0) saturate(100%) invert(18%) sepia(5%) saturate(4558%) hue-rotate(131deg) brightness(92%) contrast(80%);
}
.green-img {
    filter: brightness(0) saturate(100%) invert(39%) sepia(80%) saturate(431%) hue-rotate(101deg) brightness(101%) contrast(85%);
}

.red-hover:hover {
    background-color: var(--redred);
}
.red-hover > img {
    filter: brightness(0) saturate(100%) invert(29%) sepia(73%) saturate(1320%) hue-rotate(317deg) brightness(107%) contrast(92%);
}
.red-hover:hover > img {
    filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(182deg) brightness(102%) contrast(101%);
}
.red-hover > span {
    color: var(--redred);
}
.red-hover:hover > span {
    color: var(--neutralswhite);
}

.grey-hover:hover {
    background-color: var(--dark-cyan);
}
.grey-hover > img {
    filter: brightness(0) saturate(100%) invert(18%) sepia(5%) saturate(4558%) hue-rotate(131deg) brightness(92%) contrast(80%);
}
.grey-hover:hover > img {
    filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(182deg) brightness(102%) contrast(101%);
}
.grey-hover > span {
    color: var(--dark-cyan);
}
.grey-hover:hover > span {
    color: var(--neutralswhite);
}

.green-hover:hover {
    background-color: var(--greendark-green-1);
}
.green-hover > img {
    filter: brightness(0) saturate(100%) invert(39%) sepia(80%) saturate(431%) hue-rotate(101deg) brightness(101%) contrast(85%);
}
.green-hover:hover > img {
    filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(182deg) brightness(102%) contrast(101%);
}
.green-hover > span {
    color: var(--greendark-green-1);
}
.green-hover:hover > span {
    color: var(--neutralswhite);
}

.red-outline {
    outline: var(--red) solid 1px !important;
}