body {
	color: white;
	font-family: monospace;
	font-weight: bold;
	text-shadow: 0px 0px 4px;
	font-size: 20px;
}

.ui {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 1280px;
	height: 720px;
	background-color: #00000080;
	display: inline;
	user-select: none;
}

.tokens {
	border-radius: 6px;
	border: 2px solid grey;
	min-width: 100px;
	min-height: 30px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	transition: border 0.2s ease-in-out;
	padding: 0px 40px 0px 0px;
	margin: 0px 5px 0px 0px;
}

.invlabel {
	margin: 0px 5px;
}

token>div {
	border-radius: 12px;
	margin: 0px 2px;
	display: flex;
	cursor: move;
}

token:hover {
	color: white;
}

.common {
	border: 2px solid silver;
	color: silver;
}

.uncommon {
	border: 2px solid palegoldenrod;
	color: palegoldenrod;
}

.rare {
	border: 2px solid palevioletred;
	color: palevioletred;
}

.exceptional {
	border: 2px solid paleturquoise;
	color: paleturquoise;
}

.unique {
	border: 2px solid palegreen;
	color: palegreen;
}

.display {
	position: absolute;
	pointer-events: none;
	opacity: 0.6;
	user-select: none;
}

.loading {
	color: yellow;
}

.loaded {
	color: lime;
	animation-name: loaded;
	animation-duration: 1s;
	animation-iteration-count: 1;
}

.bar {
	height: 100%;
	background-color: white;
}

.barRect {
	border-color: white;
	border-style: solid;
}

.dropallowed {
	border: 2px solid white;
}

.gun1 {
	color: #80ff80;
}

.gun2 {
	color: #8080ff;
}

.gun3 {
	color: #ffc080;
}

.gun4 {
	color: #80ffff;
}

.gun5 {
	color: #ff80ff;
}

button {
	font-family: monospace;
	font-weight: bold;
	font-size: 20px;
	border-radius: 12px;
	border: 2px solid steelblue;
	background-color: steelblue;
	transition-duration: 0.25s;
	margin: 0px 3px;
	cursor: pointer;
}

button:hover {
	background-color: lightblue;
}

button:active {
	background-color: lightcyan;
	transition-duration: 0.0s;
}

button:disabled {
	border: 2px solid dimgrey;
	background-image: repeating-linear-gradient(135deg, grey, steelblue 5%);
	color: darkgray;
	cursor: not-allowed;
}

button.greyedOut {
	border: 2px solid dimgrey;
	background-image: repeating-linear-gradient(135deg, grey, steelblue 5%);
	color: darkgray;
	cursor: not-allowed;
}

input[type="radio"] {
	accent-color: black;
}

.gunswitch {
	animation-name: gunswitch;
	animation-duration: 0.1s;
	animation-iteration-count: 1;
}

@keyframes gunswitch {
	0% {
		opacity: 1;
	}

	100% {
		opacity: 0.6;
	}
}

@keyframes loaded {
	0% {
		opacity: 1;
	}

	100% {
		opacity: 0;
	}
}