.hidden {
	display: none;
}

html {
	background-color: #2a2e2f;
	color: white;
}

body {
	margin: 0;
}

header {
	background-color: #222222;
	color: lightyellow;
	font-size: large;
	box-shadow: 2px 0 5px rgba(255, 255, 255, 0.5);
	padding: 8px;
	margin-bottom: 10px;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
}

#content {
	padding: 20px;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 20px;
}

#main {
	flex: 1 2;
}

#main form, #main table {
	height: 100%;
	width: 100%;
}

.price, .stash {
	text-align: right;
	padding-right: 1em;
}

.empty {
	color: grey;
}

.negative {
	color: red;
}

.positive {
	color: green;
}

table {
	border-collapse: collapse;
}

table tr td{
	border: 1px solid blueviolet;
	padding: 4px;
}

table tr td:first-child {
  border-left: 0;
}

table tr td:last-child {
  border-right: 0;
}

table thead th {
	padding: 6px;
}

table tfoot th {
	padding: 6px;
}

#trend {
	flex: 2 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 60vw;
}

#trend-canvas {
	position: relative;
	width: 100%;
	height: 100%;
}

#trend-controls button {
	padding: 8px 16px;
}

.control {
	text-align: center;
}

canvas {
	min-width: 500px;
	min-height: 500px;
}

#pointing_xenia {
	position: fixed;
	right: 0px;
	bottom: 0px;
	width: 64px;
	z-index: 2;
	transition: .5s ease;
}

#pointing_xenia:hover {
	opacity: 0.8
}

#readme {
	position: fixed;
	bottom: 0px;
	width: calc(100% - 36px);
	padding: 6px 16px;
	z-index: 1;
	background-color: #101a10;
	border: 2px solid #3a8ddb;
}

h3 {
	text-align: center;
}

button {
  background: #2a2a2a;
  color: #e0e0e0;
  border: 1px solid #555;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}

button:hover {
  background: #3A2637;
  border-color: #3a8ddb;
  color: #fff;
}

button:focus {
  outline: none;
  box-shadow: 0 0 0 1px rgba(58, 141, 219, 0.4);
}

button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

input[type="number"] {
  background-color: #3A2637;
  color: white;
  border: 1px solid #555;
  padding: 3px;
  border-radius: 3px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

input[type="number"]:hover {
  border-color: #3a8ddb;
}

input[type="number"]:focus {
  outline: none;
  border-color: #3a8ddb;
  box-shadow: 0 0 0 3px rgba(58, 141, 219, 0.3);
}

input[type="number"]:invalid {
  outline: 2px solid red;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type=number] {
  -moz-appearance: textfield;
}

td {
	min-width: max-content;
}