/*************************************/
/* General Styles                    */
/*************************************/

* {
	margin: 0;
	padding: 0;
	border: 0;
	text-decoration: none;
	box-sizing: border-box;
	white-space: nowrap;
}

html {
	font-family: system-ui;
}

body {
	width: 100%;
	height: 100%;
	color: black;
	background: #79f;
	line-height: 1.0rem;
}

a {
	cursor: pointer;
	color: #55F;
}

h1 {
	color: #000;
}

h2, h3 {
	padding: 0.5rem;
}

p {
	padding-top: 0.5rem;
	padding-left: 0.5rem;
	padding-right: 0.5rem;
	white-space: normal;
	line-height: 1.5rem;
}

.error {
	color: #f66;
	font-weight: bold;
}

.error:empty {
	display: none;
}

.success {
	color: #6f6;
	font-weight: bold;
}

#templates {
	display: none;
}

#offscreen__overlay, #offscreen__content {
	display: none;
}

/*************************************/
/* Main Layout                       */
/*************************************/

#overall {
	width: 100%;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

#overlay {
	position: fixed;
	width: 100%;
	height: 100%;
	z-index: 1;
	background: rgba(0, 0, 0, 0.5);
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: table;
}

#overlay:empty {
	display: none;
}

.shortcuts {
/* 	align-self: right; */
	position: relative;
	float: right;
	top: 0;
	right: 0;
}

#content, #overlay_inner {
	border-radius: 0.5rem;
	border: 1.2px solid #55f;
	padding: 0.5rem;
	margin: 0.3rem;
	background: rgba(255, 255, 255, 0.8);
}

#content {
	flex: 1;
}

#overlay_mid {
	display: table-cell;
	vertical-align: middle;
	max-height: 100vh;
}

#overlay_inner {
	max-width: 700px;
	max-height: 100%;
	margin-left: auto;
	margin-right: auto;
	overflow-y: visible;
}

#overlay_content {
	overflow-y: visible;
}

.title {
	padding: 0.8rem;
	font-style: italic;
}

.menu_item {
	flex: 1;
	width: 100%;
	margin: 0.1rem;
	padding: 0.2rem;
	padding-left: 0.8rem;
	font-size: 110%;
}

.menu_line {
/* 	align-self: center; */
	height: 1px;
	border-top: 1px solid #000;
	margin: 1rem;
}

.menu_button {
	padding: 0.8rem;
	display: table-cell;
}

.loading {
	margin: 2.5rem;
	font-size: 150%;
}

.dash {
	position: relative;
	padding: 0.75rem;
	display: table-cell;
}

.graph {
/* 	display: flex; */
}

.graph_row {
/* 	flex: 1; */
 	position: relative;
 	display: table-cell;
	vertical-align: bottom;
	bottom: 0;
	padding-left: 1px;
	padding-right: 1px;
}

.graph_vbar {
	position: relative;
	display: table-cell;
	border-radius: 0.2rem;
	border: 1px solid #55f;
	background: rgba(100, 100, 255, 0.8);
	min-width: 1px;
	width: 2rem;
	vertical-align: bottom;
}

.graph_subtext {
	position: absolute;
	margin-bottom: -3rem;
	padding-bottom: 0.1rem;
	padding-top: 0.1rem;
	font-weight: bold;
	text-align: right;
	right: 0;
	margin-right: -1px;
	border-right: 1px solid #55f;
	margin-top: -0.1rem;
}

/*************************************/
/* Table Styles                      */
/*************************************/

.table_cont {
	width: 100%;
	height: fit-content;
	overflow-x: auto;
	overflow-y: hidden;
	padding-top: 0.2rem;
	padding-bottom: 0.2rem;
}

table {
	border-collapse: collapse;
	margin: 1px;
}

form table {
	margin: 0;
}

#overlay form table {
	width: 100%;
}

tr {
	border-top: 1px solid rgba(0, 0, 0, 0);
}

tr.table_inner:last-child:not(.table_bottom) {
	border-bottom: 1px solid rgba(0, 0, 0, 0.3);
}

tr.table_inner:nth-child(even) {
	background: rgba(255, 255, 255, 0.8);
}

tr.table_inner:nth-child(even).table_clickrow:hover, tr.table_clickrow:hover {
	background: rgba(0, 0, 0, 0.2);
}

tr.table_newrow {
	border-top: 1px solid rgba(0, 0, 0, 0.3);
}

tr.table_clickrow {
	cursor: pointer;
}

td, th {
	padding-left: 0.2rem;
	padding-right: 0.2rem;
}

tr.table_inner td:first-child {
	border-left: 1px solid rgba(0, 0, 0, 0.3);
}

tr.table_inner td:last-child {
	border-right: 1px solid rgba(0, 0, 0, 0.3);
}

th:not([class$="_n"])+th[class^="cell_"] {
	border-left: 1px solid rgba(0, 0, 0, 0.3);
}

th:not([class$="_n"])+th[class^="cell_"].cell_amount:not(:last-child) {
	border-right: 1px solid rgba(0, 0, 0, 1);
}

td[class^="cell_"][class$="_n"] {
	border-left: 1px solid rgba(0, 0, 0, 0.3);
}

td[class^="cell_"]:not([class$="_n"]) {
	border-right: 1px solid rgba(0, 0, 0, 0.3);
}

td[class^="cell_"].cell_amount_n {
	border-left: 0;
}

td[class^="cell_"].cell_amount_n+td {
	border-left: 1px solid rgba(0, 0, 0, 1);
}

th[class^="cell_"].cell_amount_n+th {
	border-left: 1px solid rgba(0, 0, 0, 1);
}

td[class^="cell_"].cell_amount {
	border-right: 0;
	text-align: right;
}

.table_inner td a {
	display: block;
	color: #000;
}

/*************************************/
/* Form Styles                       */
/*************************************/

input[type=text], input[type=password], input[type=submit], input[type=date], input[type=number], select {
	align-self: center;
	height: 2rem;
	margin-bottom: 0.6rem;
	padding-left: 0.5rem;
	border-radius: 0.2rem;
	border: 1px solid #55f;
}

#overlay input:not([type=radio]) {
	width: 100%;
}

#overlay select {
	width: 100%;
}

form th {
	display: flex;
	align-items: center;
	height: 2rem;
}

form {
	white-space: normal;
}

form span {
	white-space: nowrap;
}

.fetch_container {
	position: relative;
	z-index: 2;
	top: -0.6rem;
}

.fetch {
	position: absolute;
	display: table-row;
	width: 100%;
	background: #fff;
	border-radius: 0.2rem;
	border: 1px solid #55f;
}

/*.fetch_input:focus + .fetch_container .fetch {
	display: table-row;
}*/

.fetch:empty {
	display: none;
}

.fetch_line {
	padding: 0.1rem;
	padding-left: 0.5rem;
	width: 100%;
}

.fetch_line:hover, a.chosen > .fetch_line {
	background: rgba(119, 153, 255, 0.2);
}

.optional {
	display: none;
}

/*************************************/
/* Responsive Design                 */
/*************************************/

@media (max-width: 700px) {
	html {
		font-size: 90%;
	}

	.desktop_only {
		display: none;
	}

	#overlay_inner {
		margin-left: 0.3rem;
		margin-right: 0.3rem;
	}

	#overlay_content * {
		line-height: 1.5rem;
	}

	#menu {
		width: 100%;
	}

	#menu_inner {
		display: none;
	}

	#menu_shortcuts {
/* 		align-self: right; */
		position: absolute;
		float: right;
		top: 0;
		right: 0;
	}

	th {
		white-space: nowrap;
	}
}

@media (min-width: 701px) {
	html {
		font-size: 110%;
	}

	.mobile_only {
		display: none;
	}

	#content {
		margin-left: 20rem;
	}

	#menu {
		width: 20rem;
		padding: 1rem;
		position: absolute;
		float: left;
	}

	#menu_shortcuts {
		display: none;
	}

	#menu_shortcuts .menu_button {
		display: none;
	}

	.menu_button {
		padding: 0.5rem;
	}
}