html {
    background-color: rgb(48, 48, 48);
    color: white;
    font-family: Arial, Helvetica, sans-serif;
}
h3 {
    margin: 4px;
}
.header {
    display: block;
    margin: 4px;
    font-size: 36px;
    width: 100%;
    cursor: pointer;
}
.button {
    display: inline-block;
    background-color: rgb(30, 46, 77);
    border-radius: 8px;
    margin: 4px;
    padding: 16px;
    font-size: 16px;
    cursor: pointer;
    margin-right: 0;

    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
}
.blue:hover {
    background-color: rgb(46, 70, 119);
}
.red {
    background-color: rgb(104, 38, 38);
}
.red:hover {
    background-color: rgb(224, 75, 75);
}
.green {
    background-color: rgb(38, 104, 43);
}
.green:hover {
    background-color: rgb(55, 165, 64);
}
.grey {
    color: #ffffff30;
    background-color: rgb(39, 39, 39);
}
.selected {
    color: #ffffff;
    background-color: rgb(11, 117, 167);
}
.label-header {
    display: block;
    margin: 4px;
    font-size: 24px;
    width: 100%;
}
.outer-container {
    position: relative;
    display: block;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 8px;
    margin: auto;
    margin-bottom: 8px;
    padding: 4px;
}
.container-square {
    position: relative;
    display: inline-block;
    background-color: rgba(0, 0, 0, 0.5);
    height: 144px;
    width: 144px;
    border-radius: 8px;
    margin: 4px 4px 0 4px;
    cursor: pointer;
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
}
.container-wide {
    position: relative;
    display: inline-block;
    background-color: rgba(0, 0, 0, 0.5);
    height: 144px;
    width: 256px;
    border-radius: 8px;
    margin: 4px 4px 0 4px;
    cursor: pointer;
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
}
.container-loadout-individual {
    display: inline-block;
}
.hidden {
    display: none;
}
.image {
    display: block;
    height: 144px;
    width: 100%;
    border-radius: 8px;
    object-fit: contain;
}
.armor {
    display: block;
    height: 100%;
    margin: auto;
    border-radius: 8px;
    object-fit: cover;
}
.cover {
    object-fit: cover;
}
.contain {
    object-fit: contain;
}
.stratagem, .booster {
    display: block;
    height: 100%;
    border-radius: 8px;
    object-fit: contain;
}
.icon {
    height: 100%;
    width: 100%;
    border-radius: 8px;
    object-fit: contain;
}
.subtitle {
    position: absolute;
    left: 0;
    bottom: 0;
    color: white;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 4px;
    border-radius: 8px;
}
.icon-label {
    position: absolute;
    left: 0;
    top: 0;
    color: white;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 4px;
    border-radius: 8px;
}
.disabled {
    opacity: 0.25;
}
.rarity-common, .rarity-uncommon, .rarity-rare, .rarity-epic, .rarity-super {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border-width: 1px;
    border-style: solid;
}
.common {
    color: #b9b9b9;
}
.uncommon {
    color: #34A853;
}
.rare {
    color: #4285F4;
}
.epic {
    color: #800080;
}
.super {
    color: #FBBC04;
}
.rarity-common {
    border-color: #727272;
    background-color: #72727230;
    box-shadow: 0 0 4px 4px #72727230;
}
.rarity-uncommon {
    border-color: #34A853;
    background-color: #34A85330;
    box-shadow: 0 0 4px 4px #34A85360;
}
.rarity-rare {
    border-color: #4285F4;
    background-color: #4285F430;
    box-shadow: 0 0 4px 4px #4285F460;
}
.rarity-epic {
    border-color: #800080;
    background-color: #80008030;
    box-shadow: 0 0 4px 4px #80008080;
}
.rarity-super {
    border-color: #FBBC04;
    background-color: #FBBC0430;
    box-shadow: 0 0 4px 4px #FBBC0480;
}
.noglow {
    box-shadow: 0 0 0 0;
    background-color: #72727230;
    border-color: #00000000;
}
.rarity-common.selected {
    border-color: #b9b9b9;
    box-shadow: 0 0 4px 4px #72727230;
}
.rarity-uncommon.selected {
    border-color: #34A853;
    box-shadow: 0 0 4px 4px #34A85360;
}
.rarity-rare.selected {
    border-color: #4285F4;
    box-shadow: 0 0 4px 4px #4285F460;
}
.rarity-epic.selected {
    border-color: #800080;
    box-shadow: 0 0 4px 4px #80008080;
}
.rarity-super.selected {
    border-color: #FBBC04;
    box-shadow: 0 0 4px 4px #FBBC0480;
}
.input {
    display:block;
    padding: 16px;
    margin: 4px;
    border-radius: 8px;
    border: 1px solid white;
    color: white;
    background-color: #00000090;
    font-size: 16px;
}
@keyframes pop-in {
    0% {
        opacity: 0.8;
        transform: scale(0.8);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}
.pop-in-element {
    animation: pop-in 0.5s ease-out;
}
.button-remove {
    position: absolute;
    width: 32px;
    height: 32px;
    display: block;
    top: 0;
    right: 0;
    background-size: cover;
    background-repeat: no-repeat;
}
.button-remove:hover {
    background-image: url('./img/remove_icon.png');
}
#results {
    min-height: 152px;
    background-color: #00000090;
    border-radius: 8px;
}