.flex-box {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
}

.flex-row {
	flex-direction: row;
	gap: 12px;
}


.flex-col {
	flex-direction: column;
}

.flex-item {
	align-self: center;
	border: solid 1px #777777;
	margin: 2px;
	text-align: center;
	padding: 4px;
	width: 320px;
}

.flex-item hr {
	color: #777777;
}

.flex-item input {
	width: 250px;
}

.flex-item .input-gold {
	color: gold;
	width: 250px;
}

.flex-item button {
	border: 0;
	margin: 0;
	padding: 0;
}

.flex-item .header {
	color: lime;
	font-weight: bold;
	padding: 2px;
}

.flex-item .error {
	color: tomato;
}

.flex-item .text {
	color: #aaaaaa;
}

.flex-item .text p {
	color: #cccccc;
	margin: 8px;
	text-align: center;
}

.flex-item .text b {
	color: white;
}

.flex-item .text .error {
	color: tomato;
}

.grid {
	display: grid;
	gap: 4px;
	grid-template-areas: "left right";
}

.grid > div.left {
	color: #cccccc;
	grid-area: left;
	text-align: right;
}

.grid > div.right {
	color: #ffffff;
	font-weight: bold;
	grid-area: right;
	text-align: left;
}