:root {
    --uncommonColor: rgb(30, 255, 0);
    --rareColor: rgb(0, 112, 221);
    --epicColor: rgb(163, 53, 238);
    --legendaryColor: rgb(255, 128, 0);
    --artifactColor: rgb(230, 204, 128);
    --heirloomColor: rgb(0, 204, 255);

    --DeathKnight: rgb(196, 30, 58);
    --DemonHunter: rgb(163, 48, 201);
    --Druid: rgb(255, 124, 10);
    --Evoker: rgb(51, 147, 127);
    --Hunter: rgb(170, 211, 114);
    --Mage: rgb(63, 199, 235);
    --Monk: rgb(0, 255, 152);
    --Paladin: rgb(244, 140, 186);
    --Priest: rgb(255, 255, 255);
    --Rogue: rgb(255, 244, 104);
    --Shaman: rgb(0, 112, 221);
    --Warlock: rgb(135, 136, 238);
    --Warrior: rgb(198, 155, 109);
}

body {
    margin: 1rem;
}

a {
    color: darkkhaki;
    text-decoration-line: none;
    border-bottom: 1px dotted;
}

a:hover {
    color: var(--artifactColor);
    border-bottom: 1px solid;
}

table {
    width: 95%;
}

table th {
    font-size: 1.15rem;
    font-weight: bold;
}

#account-selector {
    font-size: 36px;
    justify-content: center;
}

#account-selector .account-name .faction-image {
    position: relative;
    top: 8px;
    margin-right: 2px;
    max-width: 28px;
}

#display-selector {
    font-size: 24px;
}

.rep-change-up {
    color: green;
}

.rep-change-down {
    color: red;
}

.character-name .character-faction {
    width: 16px;
}

.character-name .character-faction>img {
    position: relative;
    top: 2px;
    margin-right: 4px;
    max-height: 16px;
}

.something-selector {
    padding-bottom: 10px;
    border-bottom: 1px solid;
}

.something-selector>span {
    justify-content: center;
    display: flex;
}

.something-selector>span[id]>span:not(:last-child)::after {
    color: white;
    content: ' | '
}

.something-selector span.active {
    font-weight: bold;
}

.chart-container {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    gap: 10px 10px;
    grid-auto-flow: row;
    grid-template-areas:
        "tl"
        "tr"
        "bl";
}

.chart-container>div {
    max-height: 50vh;
}

#latest-reputation-gain {
    grid-area: tl;
}

#all-reputation {
    grid-area: tr;
}

#character-reps {
    grid-area: bl;
}

.table-container {
    display: flex;
    column-gap: 40px;
}

.table-container>.data-table {
    width: calc(50% - 40px);
}

.data-table .table-counter::before {
    content: ' ('
}

.data-table .table-counter::after {
    content: ')'
}

.data-table>div,
.data-table table {
    width: 100%;
}

.sortable th.dir-d::after,
.sortable th.dir-u::after {
    color: var(--legendaryColor) !important;
}

.sortable th:hover::after {
    color: var(--artifactColor) !important;
}

.sortable th.dir-d {
    border-bottom: 1px solid var(--legendaryColor);
}

.sortable th.dir-u {
    border-top: 1px solid var(--legendaryColor);
}

.data-table.filterable table tr.filtered {
    display: none;
}

.data-table.filterable .counter-filtered {
    display: none;
    color: var(--heirloomColor);
}

.data-table.filterable.filtered .counter-filtered {
    display: initial;
}


.data-table.filterable.filtered .counter-filtered::after {
    color: white;
    content: '|'
}

.data-table.filterable.filtered .counter-original {
    text-decoration: line-through;
    opacity: 0.5;
}

.filter-selector-container {
    width: 100%;
    display: flex;
    flex-flow: row wrap;
    row-gap: 16px;
    column-gap: 16px;
    align-content: space-between;
    justify-content: space-between;
}

.filter-selector {
    display: flex;
    width: calc(50% - 8px);
}

.filter-selector button {
    color: grey;
    border: 1px solid grey;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    width: 100%;
    height: 40px;
}

.filter-selector button>.indicator {
    display: none;
    margin-right: 5px;
    font-size: 16px;
}

.filter-selector button.selected>.indicator.checked {
    color: rgb(30, 255, 0);
    display: initial;
}

.filter-selector button:not(.selected)>.indicator.unchecked {
    color: rgba(196, 30, 58, 0.6);
    display: initial;
}

.filter-selector button.selected {
    color: var(--artifactColor);
    border-color: var(--artifactColor);
}

.footnote {
    vertical-align: super;
    font-size: 0.75em;
}

.footnote::before {
    content: ' '
}

@media only screen and (min-width: 1680px) {
    .chart-container {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr;
        grid-template-areas:
            "tl tr"
            "bl br";
    }

    .filter-selector {
        width: calc(33% - 8px);
    }
}

.table-row-count:not(:last-child)::after {
    color: white;
    content: '/'
}

.table-row-count.non-exalted {
    color: var(--uncommonColor);
}

.table-row-count.exalted-achievement {
    color: var(--artifactColor);
}

.table-row-count.all-exalted {
    color: var(--legendaryColor);
}

.reputation-progress {
    width: 100px;
    height: 10px;
    text-align: initial;
    background-color: gray;
}

.reputation-progress .progress-bar {
    height: 100%;
    background-color: var(--Hunter);
}

.class_DeathKnight {
    color: var(--DeathKnight) !important;
}

.class_DemonHunter {
    color: var(--DemonHunter) !important;
}

.class_Druid {
    color: var(--Druid) !important;
}

.class_Evoker {
    color: var(--Evoker) !important;
}

.class_Hunter {
    color: var(--Hunter) !important;
}

.class_Mage {
    color: var(--Mage) !important;
}

.class_Monk {
    color: var(--Monk) !important;
}

.class_Paladin {
    color: var(--Paladin) !important;
}

.class_Priest {
    color: var(--Priest) !important;
}

.class_Rogue {
    color: var(--Rogue) !important;
}

.class_Shaman {
    color: var(--Shaman) !important;
}

.class_Warlock {
    color: var(--Warlock) !important;
}

.class_Warrior {
    color: var(--Warrior) !important;
}