/* type selectors */

#type-box {
    cursor: pointer;
    overflow: auto;
}
#type-box > div {
    display: inline-block;
    width: calc(100% / 12);
    float: left;
}

.type-selected {
    background-color: #0a0;
}

/* rarity selectors */

#tier-box {
    cursor: pointer;
    width: 58.33%;
}
#tier-box > div {
    width: calc(100% / 7);
    aspect-ratio: 1/1;
    position: relative;
    display: inline-block;
}
#tier-box > div > b {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
#tier-box > div.tier-selected > b {
    color: black;
}

#tier-normal { color: #FFFFFF; }
#tier-normal.tier-selected { background-color: #FFFFFF; }
#tier-unique { color: #FFFF55; }
#tier-unique.tier-selected { background-color: #FFFF55; }
#tier-set { color: #55FF55; }
#tier-set.tier-selected { background-color: #55FF55; }
#tier-rare { color: #FF55FF; }
#tier-rare.tier-selected { background-color: #FF55FF; }
#tier-legendary { color: #55FFFF; }
#tier-legendary.tier-selected { background-color: #55FFFF; }
#tier-fabled { color: #FF5555; }
#tier-fabled.tier-selected { background-color: #FF5555; }
#tier-mythic { color: #AA00AA; }
#tier-mythic.tier-selected { background-color: #AA00AA; }

#tier-zero { color: #FFFFFF; }
#tier-zero.tier-selected { background-color: #FFFFFF; }
#tier-one { color: #FFFFBB; }
#tier-one.tier-selected { background-color: #FFFFBB; }
#tier-two { color: #FFFF88; }
#tier-two.tier-selected { background-color: #FFFF88; }
#tier-three { color: #FFFF55; }
#tier-three.tier-selected { background-color: #FFFF55; }

/* filters */
.filter-row {
    border: 1px solid #121212;
}
.filter-dragged-over {
    border: 1px solid white;
}

.reorder-filter {
    height: 2ch;
    cursor: pointer;
}

input.filter-input {
    width: 27ch!important;
    max-width: 90%;
    display: inline-block;
}

.asc-icon {
    opacity: 0.25;
    width: 1.75ch;
}
.desc-icon {
    opacity: 0.25;
    width: 1.75ch;
    transform: rotate(180deg);
}
img.asc-sel {
    opacity: 0.85;
}

input.min-max-input {
    width: 6ch!important;
    display: inline-block;
}

.delete-filter {
    cursor: pointer;
}

#filter-container > div > div > *, #exclude-container > div > div > * {
    margin: 0 2px;
}

/* item display */
@media (min-width: 576px) and (max-width: 991px) {
    div.col-sm-6 {
        width: 100%;
    }
}