.ally-head, .enemy-head, .session-head {
    color: white;
    position: sticky;
    text-align: center;
    font-size: 2em;
    padding: 0.05em 0 0.125em;
    text-shadow: 0 0 0.125em black;
    align-self: stretch;
    user-select: none;
    border-bottom: 0.05em solid;
    top: 0;
    z-index: 90;
}

.ally-head.inactive, .enemy-head.inactive {
    color: #aaa;
}

.totalFPSpent, .totalUPSpent {
    color: white;
    line-height: 1.333;
    -webkit-text-stroke: 0.0444em black;
    text-shadow: 0.0444em 0.0444em 0.0444em black;
    font-size: 2.25em;
    letter-spacing: -0.06667em;
    text-align: center;
    font-weight: bold;
    height: 1.333em;
    width: 1.333em;
    background-repeat: no-repeat;
    background-position: center;
    user-select: none;
    flex: 0 0 auto;
}

.totalFPSpent {
    background-image: url("fabula-points.svg");
}

.totalUPSpent {
    background-image: url("ultima-points.svg");
}

.totalSPSpent {
    color: white;
    line-height: 2;
    text-shadow: 0.0333em 0.0333em 0.1em black;
    font-size: 1.5em;
    text-align: center;
    font-weight: bold;
    height: 2em;
    width: 6.6667em;
    white-space: nowrap;
    user-select: none;
    flex: 0 0 auto;
}

.ally-head.inactive {
    background: linear-gradient(to right, transparent 0%, darkcyan 50%, transparent 100%);
    border-bottom-color: darkcyan;
}

.session-head {
    background: linear-gradient(to right, transparent 0%, goldenrod 10%, gold 50%, goldenrod 90%, transparent 100%);
    border-bottom-color: gold;
}

.enemy-head.inactive {
    background: linear-gradient(to right, transparent 0%, maroon 50%, transparent 100%);
    border-bottom-color: maroon;
}

.ally-head {
    background: linear-gradient(to right, transparent 0%, darkcyan 10%, cyan 50%, darkcyan 90%, transparent 100%);
    border-bottom-color: cyan;
}

.enemy-head {
    background: linear-gradient(to right, transparent 0%, maroon 10%, red 50%, maroon 90%, transparent 100%);
    border-bottom-color: red;
}

.ally-head.active::before, .ally-head.active::after {
    color: lightpink;
}

.enemy-head.active::before, .enemy-head.active::after {
    color: lightskyblue;
}

.ally-head.active::before, .enemy-head.active::before {
    content: "❮";
}

.ally-head.active::after, .enemy-head.active::after {
    content: "❯";
}

.appHelpName {
    font-weight: bold;
}

.appHelpValue {
    margin-left: 5px;
    font-style: italic;
    font-size: smaller;
}

.appHelpHeader {
    text-align: left;
}

.appHelpDescription {
    text-align: left;
    font-size: smaller;
}

.appHelpValue::before {
    content: "("
}
.appHelpValue::after {
    content: ")"
}