:root {
	--id-1: #6764FF;
	--id-2: #E5D1FA;
	--id-3: #321EB4;

	--hl-1: #DD0000;
	--hl-2: #FDB9D9;
	--hl-3: #3C8E5C;
	--hl-4: #CDE6D7;
	--hl-5: #FFDC3C;
	--hl-6: #FAEDCD;

	--ui-1: #F1F3F6;
	--ui-2: #F6F6F4;
	--ui-3: #DCDCDC;
	--ui-4: #EBEBEB;
	--ui-5: #B9B9B9;
	--ui-6: #373737;

	--input-line-height: 24pt;
}

*,
*:before,
*:after {
	box-sizing: border-box;
}

article {
	padding-left: 56pt;
	padding-bottom: 32pt;
}

body {
	background: white;
	font-family: 'Inter', sans-serif;
	font-size: 10pt;
	color: var(--ui-6);
	margin: 0;
	min-height: 100%;
}

nav {
	display: flex;
	flex-wrap: nowrap;
	line-height: 18pt;
	justify-content: space-between;
	padding: 12pt;
	padding-bottom: 0px;
}

nav a,
nav a:visited,
nav a:active {
	color: var(--ui-6);
	margin-right: 8pt;
	text-decoration: none;
}

nav a:hover {
	text-decoration: underline;
	text-underline-offset: 6pt;
}

nav a:active {
	color: var(--ui-5);
}

nav .group {
	padding: 4pt 8pt;
}

nav .group:nth-child(odd) {
	border-left: 1px solid var(--ui-3);
	border-right: 1px solid var(--ui-3);
}

nav .title {
	font-weight: bold;
}

#rrLogo {
	width: 48px;
	height: 48px;
	margin-top: 4px;
}

h1 {
	font-size: 22pt;
}

h2 {
	font-size: 18pt;
}

h3 {
	font-size: 14pt;
}

hr {
	border: 1px solid var(--ui-3);
	margin: 24pt 0pt;
	width: 70%;
}

label {
	display: block;
}

input,
select {
	background: none;
	border: 1px solid var(--ui-3);
	line-height: var(--input-line-height);
	display: block;
	padding: 0pt 8pt;
	width: 100%;
}

input[type="checkbox"] {
	width: 14pt;
	height: 14pt;
}

select {
	height: var(--input-line-height);
}

button {
	border: none;
	border-radius: 2pt;
	line-height: var(--input-line-height);
	cursor: pointer;
	min-width: 96pt;
}

button,
input,
select {
	border-radius: 2pt;
}
input[type="radio"] {
	border-radius: initial;
	box-shadow: initial;
}

button:active {
	background: var(--ui-5);
}

form {
	width: 300pt;
}

fieldset {
	border: 1px solid var(--ui-3);
	border-radius: 4pt;
}

fieldset > legend {
	position: relative;
	top: -10px;
	border-bottom: 1px solid var(--ui-3);
	margin: 0;
	padding-bottom: 4px;
	font-variant: all-petite-caps;
	font-size: 10pt;
}

table {
	margin-bottom: 1em;
	border-collapse: collapse;
}

table.xl td {
	font-size: 14pt;
}

thead {
	color: #788195;
	height: 3em;
	font-size: 10pt;
	background: white;
	position: sticky;
	top: 0;
	z-index: 100;
}

tbody {
	color: var(--ui-6);
	font-size: 8pt;
}

td {
	padding: 10pt 8pt;
	max-width: 200pt;
}

thead td {
	padding: 6pt 8pt;
}

.report td {
	width: 86pt;
}

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

.row {
	display: flex;
	flex-wrap: wrap;
}

thead > tr:hover {
	box-shadow: none;
}

tr:hover {
	box-shadow: inset 0 0 8px var(--ui-1);
}

tr.kpi {
	font-weight: bold;
	background: var(--ui-2);
}

tr.h2hl {
	color: var(--id-1);
	font-weight: bold;
}
tr.h2hl .account {
	padding-left: 16pt;
}

td.account {
	width: 172pt;
	position: sticky;
	left: 0;
	background: white;
	z-index: 50;
}

.kpi > td.account {
	background: var(--ui-2);
}

tr.h1 .account {
	padding-left: 8pt;
}
tr.h2 .account {
	padding-left: 16pt;
}
tr.h3 .account {
	padding-left: 24pt;
}
tr.def .account {
	padding-left: 24pt;
}

.report > tbody > tr td {
	border: 1px solid var(--ui-3);
}

table .pos {
	color: var(--hl-3);
}

table .neg {
	color: var(--hl-1);
}

li {
	line-height: 1.5em;
}

/* MODIFIERS */

.block {
	display: block;
}

.center {
	margin: 0 auto;
}

.wrap {
	flex-wrap: wrap;
}

.max-width {
	width: 100%;
}

.error {
	color: var(--hl-1);
}

.warning {
	color: var(--hl-5);
}

.success {
	color: var(--hl-3);
}

.primary {
	background: var(--id-1);
	color: var(--ui-1);
}

.primary:active {
	background: var(--id-3);
}

.secondary {
	background: var(--ui-1);
	color: var(--ui-6);
}

.tertiary {
	background: var(--ui-3);
}

.tertiary:active {
	background: var(--ui-5);
}

.delete {
	background: var(--hl-1);
	color: var(--ui-1);
}

.delete:active {
	background: var(--hl-2);
}

.action {
	cursor: pointer;
	width: 24pt;
	min-width: 24pt;
	min-height: 24pt;
	height: 24pt;
	border-radius: 2pt;
	padding: 4pt;
}

.inline {
	display: inline-block;
	margin-right: 8pt;
}

.mbs {
	margin-bottom: 4pt;
}

.mbm {
	margin-bottom: 8pt;
}

.mbl {
	margin-bottom: 16pt;
}

.mbxl {
	margin-bottom: 32pt;
}

.mbxxl {
	margin-bottom: 64pt;
}

.mbxxxl {
	margin-bottom: 128pt;
}

.mts {
	margin-top: 4pt;
}

.mtm {
	margin-top: 8pt;
}

.mtl {
	margin-top: 16pt;
}

.mtxl {
	margin-top: 32pt;
}

.mtxxl {
	margin-top: 64pt;
}

.mtxxxl {
	margin-top: 128pt;
}

.action-bar {
	position:fixed;
	bottom: 0;
	width: 100%;
	height: 36pt;
	line-height: 36pt;
	background: white;
	border-top: 1px solid var(--ui-1);
	z-index: 99999;
}

.export-link {
	font-size: 8pt;
	border: 1px solid var(--ui-3);
	margin-left: 8pt;
	padding: 4pt;
	vertical-align: middle;
}

@media print {
	#navBar {
		display: none;
	}
	article {
		padding-bottom: 0;
		padding-left: 0;
	}
	.row {
		page-break-inside: avoid;
		break-inside: avoid;
	}
	.row.col {
		display: table;
	}
	thead {
		position: initial;
	}
	input,
	select {
		background: #FFFFFF;
		border: none;
		box-shadow: none;
		margin: 0;
		padding: 0;
	}
	hr {
		display: none;
	}
}