body {
	background-color: lightgray;
	display: flex;
	flex-flow: column nowrap;
	justify-content: space-between;
	height: 100vh;
    margin: 0px;
    padding: 0px;
}

header h1 {
	text-align: center;
    font-family: monospace;
    font-size: xxx-large;
}

main {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-around;
}

section {
	margin: 20px;
	width: 360px;
	border: 1px solid #ff0;
	box-shadow: 0px 0px 6px 0px darkgrey;
	border-radius: 1em;
	padding: 1em;
	background-color: beige;
	max-height: 75vh;
	overflow-y: auto;
}
section > h2:first-child {
	margin-top: 0px;
	text-align: center;
	/*border-bottom: 1px solid #dd9;*/
	/*margin-left: -16px;*/
	/*margin-right: -16px;*/
}
section h2, section h3 {
	text-align: center;
}

footer {
	margin-top: 2em;
	padding: 1em;
	font-family: monospace;
	text-align: center;
}
footer p {
	margin: 1px;
}
footer .small {
	font-size: smaller;
	overflow-wrap: break-word;
}

.bg-fuel {
	background-color: #f00;
}
.bg-ore {
	background-color: #bbf;
}
.bg-iron {
	background-color: #77f;
}
.bg-steel {
	color: white;
	background-color: #00f;
}
.bg-baux {
	background-color: #f9f;
}
.bg-alum {
	background-color: #f0f;
}
.bg-goods {
	background-color: #0f0;
}
.bg-money {
	background-color: #ff0;
}
.bg-wealth {
	background-color: #990;
}

.price {
	color: #333;
	border-radius: 4mm;
	background-color: beige;
	/*padding: 2px;*/
	margin: 0px;
	text-align: center;
}
.price.ps-6 {
	font-weight: bolder;
	text-decoration: double underline;
	margin: 0px;
	/*border: solid 2px;*/
	border-color: initial;
}
.price.ps-5 {
	font-weight: bolder;
	text-decoration: double underline;
}
.price.ps-4 {
	font-weight: bolder;
	text-decoration: double underline;
}
.price.ps-3 {
	font-weight: bolder;
}
.price.ps-2 {
	font-weight: bold;
}
.price.ps-1 {
	/* no additional styling */
}
.price.p-pos.ps-6 {
	color: #0f0;
	background-color: lightcyan;
}
.price.p-pos.ps-5 {
	color: #0f0;
	background-color: lightcyan;
}
.price.p-pos.ps-4 {
	color: #0f0;
	background-color: azure;
}
.price.p-pos.ps-3 {
	color: #0f0;
	background-color: azure;
}
.price.p-pos.ps-2 {
	color: #4c4;
}
.price.p-pos.ps-1 {
	color: #484;
}
.price.p-neg.ps-1 {
	color: #844;
}
.price.p-neg.ps-2 {
	color: #c44;
}
.price.p-neg.ps-3 {
	color: #f00;
	background-color: bisque;
}
.price.p-neg.ps-4 {
	color: #f00;
	background-color: bisque;
}
.price.p-neg.ps-5 {
	color: #f00;
	background-color: lightpink;
}
.price.p-neg.ps-6 {
	color: #f00;
	background-color: lightpink;
}

.notifications {
	display: block;
    position: fixed;
    top: 30px;
	width: 100vw;
}
.notifications .container {
	margin-left: auto;
    margin-right: auto;
    max-width: 600px;
}
.notifications .box p {
	margin: 0px;
}
.notifications .box {
	position: relative;
	background-color: darkgray;
	border: solid 2px gray;
	box-shadow: 0px 0px 3px gray;
	margin: 20px;
	padding: 10px;
	border-radius: 6px;
	text-shadow: 1px 1px #1115;
	font-family: Arial, Helvetica, sans-serif;
	cursor: pointer;
}
.notifications .box {
	transition: visibility 0s 2s, opacity 2s linear;
}
.notifications .box.visible {
	visibility: visible;
	opacity: 1;
	transition: opacity 2s linear;
}
.notifications .box.hidden {
	visibility: hidden;
	opacity: 0;
	transition: visibility 0s 2s, opacity 2s linear;
}
.notifications .box:hover {
    transition: 0.5s;
}
.notifications .box.danger {
	color: #711;
	background-color: #f54;
	box-shadow: #c00;
	border-color: #a00;
}
.notifications .box.danger:hover {
    background-color: #f84;
}
.notifications .box.success {
	color: #171;
	background-color: #4f5;
	box-shadow: #0c0;
	border-color: #0a0;
}
.notifications .box.success:hover {
    background-color: #4f8;
}
.notifications .box.info {
	color: #117;
	background-color: #54f;
	box-shadow: #00c;
	border-color: #00a;
}
.notifications .box.info:hover {
    background-color: #84f;
}

.money {
	color: #990 !important;
	font-weight: bold;
}
.centered {
	text-align: center !important;
}
.left {
	text-align: left !important;
}
.right {
	text-align: right !important;
}
.num {
	text-align: right !important;
}
.pos {
	color: green !important;
}
.neg {
	color: firebrick !important;
}

table {
	border-collapse: collapse;
	width: 100%;
	margin-top: 8px;
	margin-bottom: 10px;
}
table.listing th {
	text-align: left;
}
table tr:nth-child(2n) {
	/*background-color: rgb(221, 221, 221);*/
}
table td, table th {
	border: 1px solid #bbb;
	border-width: 0 0 1px;
	padding: 4px;
	/*text-align: left;*/
}
table th {
	border-width: 0 0 2px;
}
table.listing th {
	border-width: 0 0 1px;
}
table.listing tr:first-child td, table.listing tr:first-child th {
	border-width: 1px 0;
}
table.listing tr:last-child td, table.listing tr:last-child th {
	border-width: 2px 0;
}
table.listing tr:last-child {
	background-color: #ddd;
}
table td.bar {
	border-width: 0 0 !important;
	width: 1em;
}

table tr.total td, table tr.total th {
	border-width: 2px 0;
}
table tr.total {
	background-color: #ddd;
}

.input-line {
	display: flex;
	flex-flow: row wrap;
}
.input-line input {
	flex-grow: 1;
}