html {
    margin: 0;
    height: 100%;
}

body {
    margin: 0;
    height: 100%;
    background: #2e2e2e;
    color: rgb(238, 238, 238);
    font-family: sans-serif;
}

.loading {
    height: 100%;
    font-size: 24pt;
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.window-filler {
    width: 100%;
    height: 100%;
    overflow: scroll;
}

.controls {
    padding: 10px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.controls > * {
    background-color: #2e687b;
    border-radius: 5px;
    padding: 10px;
    margin: 10px;
    flex: 0 0 0px;
    display: flex;
    flex-direction: column;
    min-width: 25em;
}

.stat-sum-sort label {
    padding-left: 10px;
}

.stat-min-filter label {
    display: flex;
    width: 100%;
    white-space: nowrap;
    flex-wrap: nowrap;
    justify-content: space-between;
}

.stat-name-label {
    display: inline-block;
    min-width: 2em;
}

.resistance-name-label {
    display: inline-block;
    width: 6em;
}

.stat-min-filter input {
    flex-grow: 1;
}

.stat-min-filter output {
    width: 1em;
}

.stat-min-filter label > * {
    margin-left: 10px;
}

#name-filter-list, #ability-filter-list, #move-filter-list {
    width: 100%;
    height: 100%;
}

#move-filter-list {
    font-family: monospace;
}

.type-label-list {
    display: flex;
    flex-wrap: wrap;
}

.type-label-list > * {
    margin-left: 10px;
    white-space: nowrap;
    display: flex;
    justify-content: space-between;
    user-select: none;
}

.poke-gallery {
    padding: 10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.poke-card {
    margin: 10px;
    padding: 10px;
    width: 192px;
    background: rgb(92, 192, 117);
    color: #0b0b0b;
    border-radius: 1em;
    text-align: center;
}

.poke-card .artist-names {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.poke-card .unknown-artist {
    color: #575757;
    font-style: italic;
}

.poke-img {
    width: 192px;
    height: 192px;
}

.alt-sprite-select {
    width: 100%;
    text-align: left;
}

.alt-sprite-select button {
    background: none;
    border: none;
    font-weight: bold;
    padding-left: 0.5em;
    padding-right: 0.5em;
}

.alt-sprite-select button:hover {
    outline: 1px solid rgba(0, 0, 0, 0.3);
}

.details-link {
    display: block;
    background-repeat: no-repeat;
    background-size: 3840px;
    image-rendering: pixelated;
    width: 100%;
    height: 100%;
}

.poke-name {
    font-weight: bold;
}

.poke-stats {
    padding-left: 12.5%;
}

.poke-stat {
    width: 50%;
    display: inline-block;
    white-space: nowrap;
    text-align: left;
}

.poke-type {
    display: flex;
}

.typelabel {
    padding: 2px;
    border: 1px solid rgb(42, 42, 42);
    border-radius: 5px;
    color: rgb(238, 238, 238);
    text-shadow: rgb(39, 39, 39) 1px 1px 0px;
    width: 44%;
}

.type-normal {
    background-color: #aa9
}

.type-fire {
    background-color: #f42
}

.type-water {
    background-color: #39f
}

.type-electric {
    background-color: #fc3
}

.type-grass {
    background-color: #7c5
}

.type-ice {
    background-color: #6cf
}

.type-fighting {
    background-color: #b54
}

.type-poison {
    background-color: #a59
}

.type-ground {
    background-color: #db5
}

.type-flying {
    background-color: #89f
}

.type-psychic {
    background-color: #f59
}

.type-bug {
    background-color: #ab2
}

.type-rock {
    background-color: #ba6
}

.type-ghost {
    background-color: #66b
}

.type-dragon {
    background-color: #76e
}

.type-dark {
    background-color: #754
}

.type-steel {
    background-color: #aab
}

.type-fairy {
    background-color: #e9e
}

.type-curse {
    background-color: #698
}

.input-clear-button {
    background: none;
    border: none;
    color: #ff6565;
    vertical-align: middle;
}

.empty-option {
    color: gray;
}

.stat-sort-checkboxes {
    display: flex;
    flex-wrap: wrap;
}

.stat-sort-checkboxes > label {
    width: 30%;
    white-space: nowrap;
}

.evolution-level-range-labels {
    display: flex;
    justify-content: space-between;
}

.evolution-level-range-input {
    width: 50%;
    padding: 0;
    margin: 0;
}

.confirming-button-confirm {
    color: red;
}

hr {
    width: 100%;
}