:root {
    --druid: #FF7D0A;
    --hunter: #ABD473;
    --mage: #69CCF0;
    --priest: #F58CBA;
    --rogue: #FFF569;
    --shaman: #0070DE;
    --warlock: #9482C9;
    --warrior: #C79C6E;
    --red: red;
    --orange: orange;
    --green: green;
    --lightred: #ffa4ab;
    --lightorange: #ffeba8;
    --lightgreen: #81c993;
}

.red {
    color: var(--red);
}

.red-background {
    background-color: var(--lightred);
}

.green {
    color: var(--green);
}
.green-background {
    background-color: var(--lightgreen);
}

.orange {
    color: var(--orange);
}
.orange-background {
    background-color: var(--lightorange);
}

.druid {
    color: var(--druid);
    background-color: var(--druid);
}
.hunter {
    color: var(--hunter);
    background-color: var(--hunter);
}
.mage {
    color: var(--mage);
    background-color: var(--mage);
}

.priest {
    color: var(--priest);
    background-color: var(--priest);
}
.rogue {
    color: var(--rogue);
    background-color: var(--rogue);
}
.shaman {
    color: var(--shaman);
    background-color: var(--shaman);
}
.warlock {
    color: var(--warlock);
    background-color: var(--warlock);
}
.warrior {
    color: var(--warrior);
    background-color: var(--warrior);
}

.class-icon {
    border: 1px solid black;
    border-radius: 50%;
    height: 10px;
    width: 10px;
    border-radius: 50%;
    display: inline-block;
}

th[sortable="true"]:before {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: "\f0dc\00a0 ";
}

th[sortable="true"] {
    cursor: pointer;
}

/* 
th[sortable="true"]:before {
    
}
th[sortable="true"] {
    font-family: var(--bs-body-font-family);
    font-size: var(--bs-body-font-size);
    font-weight: var(--bs-body-font-weight);
    line-height: var(--bs-body-line-height);
} */