/* Variable Declarations */
:root {
	/* Color Palette Declarations */
	--cp-bg:#fff8ed;
	--cp-bg2:#eee8de;
	--cp-fg:#222;
	--cp-fg2:#000;

	--cp-acc1:#004d80;
	--cp-acc2:#0ae;
	--cp-acc2a:#08ba;
	--cp-acc3:#0af;
	--cp-acc4:#004d80;
	--cp-gray1:#aaa;
	--cp-gray2:#555;

	--cp-success:#0a0;
	--cp-warning:#cc0;
	--cp-error:#a00;
	--color-nump:#20c600;
	--color-numn:#ff5e4c;
	--color-numz:#818181;
	--color-rank1:#caa800;
	--color-rank2:#999;
	--color-rank3:#9d5700;

	/* Other Colors */
	--color-white:#fff8ed;
	--color-black:#000000;

	/* font-family Declarations */
	/*--ff-heading:"Futura","Tw Cen MT","Roboto",sans-serif;*/
	--ff-heading:'Avenir','Arial','Helvetica',sans-serif;
	--ff-plaintext:'Avenir','Arial','Helvetica',sans-serif;
	--ff-input:-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',sans-serif;
	--ff-sysdefault:-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',sans-serif;
	/*--ff-old:"Avenir", "Arial", sans-serif;*/
}

@media (prefers-color-scheme: dark) {
	:root {
		--cp-bg:#111;
		--cp-bg2:#222;
		--cp-fg:#ddd;
		--cp-fg2:#fff8ed;

		--cp-acc1:#004d80;
		--cp-acc2:#08b;
		--cp-acc2a:#08ba;
		--cp-acc3:#0af;
		--cp-acc4:#00375B;
		--cp-gray1:#555;
		--cp-gray2:#aaa;

		--cp-success:#080;
		--cp-warning:#cc0;
		--cp-error:#800;
		--color-nump:#20c600;
		--color-numn:#ff5e4c;
		--color-numz:#818181;
		--color-rank1:#caa800;
		--color-rank2:#999;
		--color-rank3:#9d5700;
	}
}

body {margin:0; background-color:var(--cp-bg); color:var(--cp-fg); height:100vh; font-family:var(--ff-plaintext);}
header {background-color:var(--cp-acc1); border-bottom:1px solid var(--color-white); padding:18px; display:flex; flex-flow:row nowrap; justify-content:space-between; align-items:center; color:var(--color-white)}
footer {display:flex; flex-flow:row nowrap; justify-content:space-between; padding:0 10px; text-align:left;}
#container {display:grid; grid-template:auto 1fr auto / 250px 1fr; height:100vh;}
#container header {grid-area:1/1/2/3;}
#container header a, #login-container header a, #index-container header a {color:var(--color-white); text-decoration:none;}
#container nav {grid-area:2/1/4/2; padding:18px; background-color:var(--cp-bg2); overflow-y:auto;}
#container main {grid-area:2/2/3/3; padding:30px; /*display:grid; grid-template-columns:1fr 1fr;*/ overflow-y:auto;}
#container footer {grid-area:3/2/4/3;}
#container footer :last-child {text-align:right;}
#container main > section {margin-bottom:12px;}

.center {text-align:center;}
a {color:var(--cp-acc2);}
h2, .success, .warning {font-weight:500;}
.success {background-color:var(--cp-success); color:var(--color-white);}
.error, .button-inline.error {background-color:var(--cp-error); color:var(--color-white);}
.emphasis {background-color:var(--cp-gray1);}
p.success, p.error, div.success, div.error, div.emphasis {padding:8px;}
div.success, div.emphasis {margin-bottom:16px;}
.warning {color:var(--cp-warning);}
.log {color:var(--cp-gray2);}
.small, footer p {font-size:12px; color:var(--cp-gray2); font-style:italic;}
.required {color:var(--color-numn);}
#error-not-found {display:none;}
.number.number-p {color:var(--color-nump);}
.number.number-n, .required {color:var(--color-numn);}
.number.number-z {color:var(--color-numz);}
.number.number-w {color:var(--cp-warning);}
.rank.rank-1 {color:var(--color-rank1);}
.rank.rank-2 {color:var(--color-rank2);}
.rank.rank-3 {color:var(--color-rank3);}

button {padding:8px 12px; font-size:16px; background-color:#ddd; color:#222; border:0px solid #ddd; text-transform:uppercase;}
button:active {background-color:#888; color:#000;}
button.text {background-color:#0000; color:var(--cp-acc3);}

.logout-button {display:flex; flex-flow:row nowrap; align-items:center; font-weight:500;}
nav .logout-button {display:none;}
nav #form_selectTable {padding:10px;}

nav ul {list-style:none; padding:0; user-select:none; -webkit-user-select:none; color:var(--cp-fg2);}
nav ul div > * {padding:2px 6px;}
nav ul li {font-weight:500;}
nav ul h3, nav ul li {margin-bottom:4px;}
nav ul li:hover, nav ul li.active {background-color:var(--cp-acc2);}
nav ul li:active {background-color:var(--cp-acc2a);}
nav ul li a {color:var(--cp-fg2); text-decoration:none; display:block;}

h1 {margin:0;}
h2 {margin:10px 0 10px 0;}
h2:first-child {margin-top:0;}
main h3 {margin-top:24px; margin-bottom:8px;}

table {border-collapse:collapse;}
td, th {border:1px solid var(--cp-gray1); padding:4px 8px;}
th {background-color:var(--cp-acc4); color:var(--color-white); min-height:32px;}
tr td {transition:0.2s;}
tr:hover td {background-color:var(--cp-bg2);}
table.simple {text-align:right;}
table.simple th {text-align:left;padding:8px;}
table.simple td:first-child {font-weight:600; background-color:var(--cp-bg2);}

form {border:1px solid var(--cp-fg); padding:20px; border-radius:8px; display:inline-grid; grid-template-columns:auto auto; grid-gap:10px; text-align:left;}
form p {margin:0 10px 0 0;}
form button {grid-column:1/3;}
form .wide {grid-column:1/3;}
form.submit-only {padding:0; border:0;}
form.submit-only button {padding:0; cursor:pointer;}
form.small {display:block; padding:0; border:0; margin-left:10px;}
.table-name-smallscreen {display:none;}
.nav-toggle-button {display:none;}
.button-inline {display:inline-block; width:20px; height:20px; background-color:#aaa; color:#000; text-decoration:none; text-align:center; border-radius:5px;}

.demo-image {height:auto; width:60%; margin:0 20%; box-shadow:0 0 10px 5px #111;}

.dashboard-widgets {display:flex; flex-flow:row wrap;}
.dashboard-widgets > a {color:var(--cp-fg); text-decoration:none; display:block; padding:10px; margin:0 2% 10px 0; background-color:var(--cp-bg2); width:28%; min-width:120px; height:100px; text-align:left; border-radius:10px; transition:0.2s;}
.dashboard-widgets > a:hover {background-color:var(--cp-gray1);}
.dashboard-widgets section p {margin:0 0 5px 0;}
.dashboard-widgets section p:first-child, .dashboard-widgets section p:first-child *{font-weight:700; font-size:26px;}
.dashboard-widgets section p:last-child {font-size:14px;}

.view thead th {text-align:left;}
.view tbody td {text-align:right;}

.leaderboard tbody tr td:nth-child(1) {font-weight:bold;}
.leaderboard tbody tr:nth-child(1) td {background-color:#C3A938; font-size:24px; text-shadow:0 0 5px #222;}
.leaderboard tbody tr:nth-child(1):hover td {background-color:#b49d3a;}
.leaderboard tbody tr:nth-child(2) td {background-color:#9A9A99; font-size:20px; text-shadow:0 0 3px #222;}
.leaderboard tbody tr:nth-child(2):hover td {background-color:#858585;}
.leaderboard tbody tr:nth-child(3) td {background-color:#945B1D; font-size:16px; text-shadow:0 0 2px #222;}
.leaderboard tbody tr:nth-child(3):hover td {background-color:#81501a;}

#form-buyinout {font-size:18px; grid-template-columns:112px auto;}
#form-buyinout .toggle {height:75px;}
#form-buyinout .toggle > * {position:absolute;}
#form-buyinout .toggle.out {margin-left:20px;}
#form-buyinout .toggle label {background-color:var(--cp-gray1); height:auto; width:90px; display:block; padding:25px 20px; text-align:center; border-radius:10px; transition:.2s; font-weight:500; transition:0.1s; color:var(--color-white);}
#form-buyinout .in label {background-color:var(--cp-error); font-weight:700;}
#form-buyinout.toggle_in .in label {background-color:var(--cp-gray1); font-weight:500;}
#form-buyinout.toggle_in .out label {background-color:var(--cp-success); font-weight:700;}

#page__dashboard .page-title {display:none;}

#login-container {display:grid; grid-template:auto 1fr auto / 1fr; justify-content:center; align-items:center; background-color:var(--cp-bg2);}
#login-container header {grid-row:1/2;}
#login-container .center {grid-row:2/3; width:100%;}
#login-container .center h1 {margin-bottom:10px;}
#login-container footer {grid-row:3/4;}
#login-container footer p {padding:2px;}
#login-container footer > p:last-child {text-align:right;}

#index-container {display:grid; grid-template:auto 1fr auto / 1fr; justify-content:center; align-items:center; min-height:100%;}
#index-container header {grid-row:1/2;}
#index-container main {grid-row:2/3; margin:0 5%; padding:20px; background-color:var(--cp-bg2);}
#index-container footer {grid-row:3/4;}
#index-container footer p {padding:2px;}
#index-container footer > p:last-child {text-align:right;}

@media only screen and (max-width:700px) {
	body {height:auto;}
	#container {display:flex; flex-flow:column nowrap;}
	header {padding:18px; display:flex; flex-flow:row nowrap; justify-content:space-between; align-items:center;}
	nav {overflow-y:auto; display:none; grid-template:auto 1fr / 1fr; padding:10px 30px;}
	main {padding:20px; height:auto; overflow-y:none;}
	footer {text-align:center; margin-right:0;}
	header .logout-button {display:none;}
	#page__index header .logout-button {display:flex;}

	nav > .selected_table {display:flex; grid-area:1/1/2/2;}
	nav > .logout-button {display:flex; grid-area:2/1/3/2;}
	nav > ul {grid-area:1/2/3/3; display:flex;}
	nav > ul h3 {margin-top:0;}
	nav.visible {display:grid;}

	.table-name-smallscreen {display:block;}
	.nav-toggle-button {display:block;}
}

@media only screen and (max-width:512px) {
	nav {position:absolute; left:0; top:81px; width:calc(100% - 60px); height:calc(100% - 101px); opacity:0; display:flex; flex-flow:column nowrap; transition:.25s; z-index:-2;}
	main {padding:20px; height:auto; overflow-y:none;}
	footer {text-align:center; margin-right:0;}

	nav > ul {display:flex; flex-flow:column nowrap;}
	nav > ul h3 {margin-top:1em;}
	nav.visible {display:flex; opacity:1; z-index:20;}
}

@media only print {
	#container {display:block}
	#container nav {display:none;}
}