/* STYLES */

/* ubuntu-300 - latin */
@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 300;
  src: local(''),
       url('fonts/ubuntu-v20-latin-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('fonts/ubuntu-v20-latin-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* ubuntu-regular - latin */
@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 400;
  src: local(''),
       url('fonts/ubuntu-v20-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('fonts/ubuntu-v20-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* ubuntu-700 - latin */
@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 700;
  src: local(''),
       url('fonts/ubuntu-v20-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('fonts/ubuntu-v20-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

:root {
	
	--gr-xs: 0.4rem;
	--gr-sm: 0.6rem;
	--gr-md: 1.0rem;
	--gr-lg: 1.6rem;
	--gr-xl: 2.6rem;
	--gr-x2: 4.2rem;
	--gr-x3: 6.8rem;
	--gr-x4: 11.0rem;
	--gr-x5: 17.8rem;
	--gr-x6: 28.8rem;
	--gr-x7: 46.6rem;
	
	--font-primary: Ubuntu;
	--font-secondary: sans-serif;
	
	--primary:		#025159;	--primary-dk:		#013237;
	--secondary:	#21bda0;	--secondary-dk:		#1ca188;	--secondary-lt:	#94dbce;
	--background:	#f9fafa;	--background-dk:	#e6eaea;
	--foreground:	#ffffff;	--foreground-dk:	#f7f7f7;
	--light:		#a0a0a0;	--light-dk:			#979797;
	--pos:			#21bda0;	--pos-dk:			#095345;
	--neg:			#d98162;	--neg-dk:			#d26b46;	--neg-lt: #f0e1db;
	--hue1:			#2172bd;	--hue1-dk:			#1c61a1;
	--hue2:			#3821bd;	--hue2-dk:			#301ca1;
	--hue3:			#a222bf;	--hue3-dk:			#881ca0;
	--hue4:			#bf2273;	--hue4-dk:			#a01c60;
	
	/*pos 0d7360*/
	
	--overlay: rgba(0, 0, 0, 0.7);
	
	--shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
	
	--radius: var(--gr-xs);
}

/* THE GREAT RESET --------------------------- */

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

* {
	margin: 0;
	padding: 0;
}

body {
	-webkit-font-smoothing: antialiased;
}

img, picture, video, canvas, svg {
	display: block;
}

input, button, textarea, select {
	font: inherit;
}

p, h1, h2, h3, h4, h5, h6 {
	overflow-wrap: break-word;
}

button {
	border: none;
	cursor: pointer;
}

/* ------------------------------------------- */

html {
	font-size: 16px;
}

#period-button, main, nav button, #form-inputs, #form-buttons, form label, .col2 {
	gap: var(--gr-lg);
}

body {
	background-color: var(--background);
	color: var(--primary);
	font-family: var(--font-primary);
	font-size: var(--gr-md);
}

body.flex {
	align-items: center;
	display: flex;
	flex-flow: column nowrap;
	gap: var(--gr-lg);
	height: 100vh;
	justify-content: center;
	width: 100%;
}

#logo {
	width: var(--gr-x4);
}

#logo .foreground {
	fill: var(--secondary);
}

#logo .background {
	fill: var(--secondary-dk);
}

h1 {
	color: var(--secondary);
	font-size: var(--gr-xl);
	line-height: var(--gr-xl);
}

h2 {
	font-size: var(--gr-lg);
	line-height: var(--gr-lg);
}

h3 {
	font-size: var(--gr-md);
	line-height: var(--gr-md);
}

hr {
	border: 0;
	height: 0;
	border-top: 1px solid var(--background-dk);
}

a {
	cursor: pointer;
	text-decoration: none;
}

.menu {
	position: relative;
}

.menu .opener {
	background-color: transparent;
	border-radius: var(--radius);
	padding: var(--gr-sm);
	width: var(--gr-xl);
}

.menu .opener:hover,
.menu .opener:active {
	background-color: var(--foreground-dk);
}

.menu .opener * {
	pointer-events: none;
}

.menu .opener svg path {
	fill: var(--light);
}

.menu .inner {
	background-color: var(--foreground);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	display: flex;
	flex-flow: column nowrap;
	padding-bottom: var(--gr-sm);
	position: absolute;
	right: 0;
	top: calc(var(--gr-xl) + var(--gr-sm));
	width: var(--gr-x4);
}

.menu .inner.hidden {
	display: none;
}

.menu .inner h3 {
	color: var(--primary);
	padding: var(--gr-md);
}

.menu .inner button {
	align-items: center;
	background-color: transparent;
	color: var(--primary);
	display: flex;
	justify-content: space-between;
	padding: var(--gr-sm) var(--gr-md);
	text-align: left;
}

.menu .inner button:hover,
.menu .inner button:active {
	background-color: var(--foreground-dk);
}

.menu .inner button span {
	width: var(--gr-sm);
}

.menu .inner button span svg path {
	fill: var(--primary);
}

header {
	align-items: center;
	background-color: var(--primary);
	box-shadow: var(--shadow);
	display: flex;
	justify-content: space-between;
	left: 0;
	padding: var(--gr-lg) calc(var(--gr-lg) - var(--gr-sm)) var(--gr-lg) var(--gr-md);
	position: fixed;
	right: 0;
	top: 0;
	width: 100%;
	z-index: 3;
}

#logo-button {
	cursor: pointer;
	padding: 0;
	margin-right: calc(var(--gr-md) + var(--gr-xs));
	width: var(--gr-xl);
}

#logo-button:hover,
#logo-button:active {
	background-color: transparent;
}

#logo-button:hover path.background,
#logo-button:active path.background {
	fill: var(--background-dk);
}

#logo-button path.foreground {
	fill: var(--foreground);
}

#logo-button path.background {
	fill: var(--background);
}

header #spacer {
	flex: 1;
}

header > input {
	background-color: var(--primary);
	border: 2px solid var(--foreground);
	border-radius: var(--radius);
	color: var(--foreground);
	font-size: var(--gr-md);
	margin-right: var(--gr-md);
	max-width: var(--gr-x5);
	min-width: var(--gr-x2);
	padding: var(--gr-sm) var(--gr-md) var(--gr-sm) var(--gr-sm);
}

.menu.filter {
	margin-right: calc(var(--gr-lg) - var(--gr-sm) * 2);
}

.menu.filter .opener:hover,
.menu.filter .opener:active,
header > button:hover,
header > button:active {
	background-color: var(--primary-dk);
}

.menu.filter .opener svg path {
	fill: var(--foreground);
}

.menu.filter .inner {
	width: var(--gr-x5);
}

.inner .selector {
	border-top: 1px solid var(--light);
	display: flex;
	justify-content: center;
	padding: var(--gr-sm) var(--gr-md) 0;
}

.inner .selector.hidden {
	display: none;
}

.inner .selector .icon {
	background-color: transparent;
	border-radius: var(--radius);
	padding: var(--gr-sm);
	width: var(--gr-xl);
}

.inner .selecter .icon:hover,
.inner .selector .icon:active {
	background-color: var(--foreground-dk);
}

.inner .selector .current {
	border-radius: var(--radius);
	cursor: auto;
	flex: 1;
	justify-content: center;
	text-align: center;
}

.inner .selector .current:hover,
.inner .selector .current:active {
	background-color: transparent;
}

header > button {
	background-color: transparent;
	border-radius: var(--radius);
	padding: var(--gr-sm);
	width: var(--gr-xl);
}

header > button * {
	pointer-events: none;
}

header > button svg path {
	fill: var(--foreground);
}

#search-close {
	left: calc(var(--gr-xl) * -1);
	padding: 0;
	position: relative;
	width: var(--gr-sm);
}

#search-close:hover {
	background-color: transparent;
}

nav {
	display: flex;
	flex-flow: column nowrap;
	gap: var(--gr-sm);
	left: var(--gr-md);
	overflow-x: hidden;
	position: fixed;
	top: calc(var(--gr-lg) * 3 + var(--gr-xl) + var(--gr-md));
	z-index: 1;
}

nav button {
	align-items: center;
	background-color: transparent;
	border-radius: var(--radius);
	color: var(--light);
	display: flex;
	flex-flow: row nowrap;
	justify-content: flex-start;
	padding: var(--gr-sm);
	width: var(--gr-x4);
}

nav button.selected {
	background-color: var(--background-dk);
	color: var(--secondary);
}

nav button * {
	pointer-events: none;
}

nav button svg {
	width: var(--gr-lg);
}

nav button svg path {
	fill: var(--light);
}

nav button.selected svg path {
	fill: var(--secondary);
}

nav button:hover,
nav button:active {
	background-color: var(--background-dk);
}

main {
	align-items: start;
	background-color: var(--background);
	display: grid;
	grid-template-columns: 1fr 1fr;
	left: calc(var(--gr-lg) * 3);
	max-width: 1600px;
	min-height: var(--gr-x5);
	padding-bottom: calc(var(--gr-x3) + var(--gr-lg));
	position: absolute;
	right: var(--gr-lg);
	top: calc(var(--gr-lg) * 3 + var(--gr-xl));
	transition: left 0.3s;
	z-index: 2;
}

main.hover {
	left: calc(var(--gr-lg) * 2 + var(--gr-x4));
}

.col2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
}

section {
	background-color: var(--foreground);
	box-shadow: var(--shadow);
	border-radius: var(--radius);
	position: relative;
}

section.full {
	grid-column: 1 / 3;
}

section h2 {
	color: var(--light);
	font-size: var(--gr-md);
	font-weight: 300;
	padding: var(--gr-lg);
}

section h2 span {
	display: block;
	font-size: calc(var(--gr-md) * 0.8);
}

section .menu.sort {
	position: absolute;
	top: var(--gr-md);
	right: var(--gr-md);
}

section > h3 {
	align-items: center;
	display: grid;
	padding: 0 var(--gr-lg);
}

#total-account, #total-net {
	margin-bottom: var(--gr-lg);
}

section h3 span.balance {
	border-radius: var(--radius);
	text-align: right;
	padding: var(--gr-sm);
}

section ul {
	list-style-type: none;
}

section ul li {
	background-color: var(--foreground);
	border-top: 1px solid var(--background-dk);
	cursor: pointer;
	display: grid;
	padding: var(--gr-lg);
	gap: 4px;
}

section ul li:last-child {
	border-bottom-right-radius: var(--radius);
	border-bottom-left-radius: var(--radius);
}

section ul li:hover,
section ul li:active {
	background-color: var(--foreground-dk);
}

section ul li * {
	pointer-events: none;
}

section ul li span {
	align-self: center;
}

li.transaction {
	grid-template-columns: var(--gr-xl) 1fr 1fr;
}

li.account, li.category, section h3 {
	grid-template-columns: 1fr 1fr;
}

#bills li.category,
#debts li.account,
#due li.category,
#due li.account {
	grid-template-columns: var(--gr-xl) 1fr 1fr;
	column-gap: var(--gr-sm);
}

li.slice-row {
	grid-template-columns: var(--gr-x2) 1fr 1fr;
	column-gap: var(--gr-sm);
}

span.amount,
span.category,
span.balance,
span.budget,
span.limit {
	justify-self: end;
}

#bills span.balance,
#budgets span.balance,
#due span.balance,
#debts span.balance {
	justify-self: start;
}

span.to,
span.amount,
span.name,
span.balance,
span.day,
span.hue {
	font-weight: 700;
}

span.date,
span.from,
span.category,
span.budget,
span.limit,
span.remaining {
	color: var(--light);
	font-weight: 400;
	font-size: calc(var(--gr-md) * 0.8);
}

.balance {
	color: var(--light);
}

span.amount,
span.balance,
span.day,
span.hue {
	font-size: calc(var(--gr-md) * 1.2);
}

span.day, span.hue {
	background-color:var(--neg);
	border-radius: var(--radius);
	color: var(--foreground);
	padding: var(--gr-sm);
	text-align: center;
}

span.hue.hue1 { background-color: var(--hue1); }
span.hue.hue2 { background-color: var(--hue2); }
span.hue.hue3 { background-color: var(--hue3); }
span.hue.hue4 { background-color: var(--hue4); }
span.hue.secondary { background-color: var(--secondary); }

span.reconciled {
	width: var(--gr-lg);
}

span.reconciled path {
	fill: var(--secondary);
}

#categories span.budget,
#categories span.day,
#categories span.gauge,
#categories span.inner,
#accounts span.day,
#accounts span.budget,
#accounts span.inner,
#accounts span.gauge,
#accounts span.remaining,
#accounts span.limit {
	display: none;
}

#bills span.balance,
#debts span.balance,
#due span.balance {
	color: var(--light);
}

#bills span.day.paid,
#debts span.day.paid,
#due span.day.paid {
	background-color: var(--secondary);
}

#bills span.budget.paid,
#debts span.budget.paid,
#due span.budget.paid {
	color: var(--light);
	text-decoration: line-through
}

#bills span.balance.paid,
#debts span.balance.paid,
#due span.balance.paid {
	color: var(--pos);
	font-weight: 700;
}

li.transaction span.to {
	grid-column: 2;
	grid-row: 1;
}

li.transaction span.amount {
	align-self: end;
	grid-column: 3;
	grid-row: 1 / 3;
}

li.transaction span.date {
	grid-column: 2;
	grid-row: 2;
}

li.transaction span.from {
	grid-column: 2;
	grid-row: 3;
}

li.transaction span.category {
	grid-column: 3;
	grid-row: 3;
}

li.transaction span.reconciled {
	grid-column: 1;
	grid-row: 1 / 4;
}

#bills li.category span.day,
#debts li.account span.day,
#due li.category span.day,
#due li.account span.day {
	grid-column: 1;
	grid-row: 1 / 3;
}

#bills li.category span.name,
#debts li.account span.name
#due li.category span.name,
#due li.account span.name {
	grid-column: 2;
	grid-row: 1;
}

#bills li.category span.balance,
#debts li.account span.balance,
#due li.category span.balance,
#due li.account span.balance {
	grid-column: 2;
	grid-row: 2;
}

#bills li.category span.budget,
#debts li.account span.budget,
#due li.category span.budget,
#due li.account span.budget {
	grid-column: 3;
	grid-row: 1;
}

#budgets li.category span.name {
	grid-column: 1;
	grid-row: 1;
}

#budgets li.category span.budget {
	align-self: end;
	grid-column: 2;
	grid-row: 2;
}

#budgets li.category span.balance {
	grid-column: 1;
	grid-row: 2;
}

#budgets li.category span.balance.over {
	color: var(--neg);
}

#debts li.account span.limit,
#due li.account span.limit {
	grid-column: 3;
	grid-row: 4;
}

#debts li.account span.remaining,
#due li.account span.remaining {
	grid-column: 1 / 3;
	grid-row: 4;
}

#budgets li.category span.gauge,
#budgets li.category span.inner,
#debts li.account span.gauge,
#debts li.account span.inner,
#due li.account span.gauge,
#due li.account span.inner {
	background-color: var(--background-dk);
	border-radius: var(--radius);
	color: var(--light);
	grid-column: 1 / 3;
	grid-row: 3;
	justify-self: stretch;
	text-align: right;
	z-index: 1;
}

#debts li.account span.gauge,
#debts li.account span.inner,
#due li.account span.gauge,
#due li.account span.inner {
	grid-column: 1 / 4;
}

#budgets li.category span.gauge,
#budgets li.category span.inner,
#debts li.account span.gauge,
#debts li.account span.inner,
#due li.account span.gauge,
#due li.account span.inner {
	height: var(--gr-md);
}

#budgets li.category span.inner,
#debts li.account span.inner,
#due li.account span.inner {
	background-color: var(--secondary);
	justify-self: start;
	z-index: 2;
}

#debts li.account span.inner,
#due li.account span.inner {
	background-color: var(--neg);
}

#budgets li.category span.inner.over {
	background-color: var(--neg);
}

.pie {
	align-items: center;
	aspect-ratio: 1;
	display: inline-grid;
	justify-content: center;
	margin: var(--gr-x2);
	position: relative;
	width: calc(100% - var(--gr-x2) * 2);
}

.slice {
	border-radius: 50%;
	inset: 0;
	mask: radial-gradient(farthest-side, #0000 calc(99% - var(--gr-x2)), #000 calc(100% - var(--gr-x2)));
	position: absolute;
}

#more-button {
	background-color: transparent;
	border-top: 1px solid var(--background-dk);
	border-bottom-left-radius: var(--radius);
	border-bottom-right-radius: var(--radius);
	color: var(--secondary);
	font-weight: 700;
	height: var(--gr-xl);
	width: 100%;
}

#more-button:hover,
#more-button:active {
	background-color: var(--foreground-dk);
}

#add-button {
	background-color: var(--foreground);
	border: var(--gr-xs) solid var(--foreground);
	border-radius: var(--gr-x2);
	bottom: calc(var(--gr-xl));
	box-shadow: var(--shadow);
	position: fixed;
	right: var(--gr-xl);
	width: var(--gr-x2);
	z-index: 4;
}

#add-button svg path {
	fill: var(--secondary);
}

#add-button:hover svg path,
#add-button:active svg path {
	fill: var(--secondary-dk);
}
	
#add-button svg {
	/*width: var(--gr-xl);*/
}

#offline {
	background-color: var(--neg-lt);
	color: var(--neg);
	left: 0;
	padding: var(--gr-sm);
	position: fixed;
	right: 0;
	text-align: center;
	bottom: 0;
	z-index: 3;
}

.overlay {
	background-color: var(--overlay);
	bottom: 0;
	cursor: pointer;
	height: 100%;
	left: 0;
	position:fixed;
	right: 0;
	top: 0;
	width: 100%;
	z-index: 5;
}

.overlay.hidden {
	display: none;
}

#loading {
	align-items: center;
	color: var(--foreground);
	display: flex;
	flex-flow: column nowrap;
	font-weight: 700;
	gap: var(--gr-lg);
	justify-content: center;
}

#loading svg {
	animation: rotation 2s linear infinite;
	width: var(--gr-xl);
}

#loading path {
	fill: var(--foreground);
}

#loading.hidden {
	display: none;
}

@keyframes rotation {
	from { transform: rotate(0deg); }
	to { transform: rotate(359deg); }
}

form {
	background-color: var(--foreground);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	display: flex;
	flex-flow: column nowrap;
	gap: var(--gr-xl);
	left: calc(50% - var(--gr-x6) / 2);
	max-height: 100%;
	overflow-y: auto;
	padding: var(--gr-lg);
	position: fixed;
	text-align: center;
	top: var(--gr-lg);
	width: var(--gr-x6);
	z-index: 6;
}

#login-form {
	position: static;
}

#logout-form {
	box-shadow: none;
	left: calc(50% - var(--gr-x6) / 2 + 140px);
	padding: 0;
	top: calc(var(--gr-lg) + var(--gr-md) + var(--gr-xs));
	width: auto;
}

#logout-form.offline {
	display: none;
}

p.alert {
	background-color: var(--neg-lt);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	color: var(--neg);
	padding: var(--gr-md);
	text-align: center;
	width: var(--gr-x6);
}

p.alert span {
	font-weight: 700;
}

button.text, a.text {
	background-color: var(--secondary);
	border-radius: var(--radius);
	color: var(--foreground);
	padding: var(--gr-sm);
	min-width: var(--gr-x3);
}

button.text:hover,
button.text:active,
a.text:hover,
a.text:active {
	background-color: var(--secondary-dk);
}

a.text.neg {
	background-color: var(--neg);
}

a.text.neg:hover,
a.text.neg:active {
	background-color: var(--neg-dk);
}

form h2 {
	text-align: left;
}

form label {
	align-items: center;
	display: grid;
	grid-template-columns: var(--gr-lg) 1fr;
	position: relative;
	text-align: left;
}

form label.text {
	grid-template-columns: var(--gr-x4) 1fr;
}

form label.alert {
	color: var(--neg);
	grid-template-columns: 1fr;
	text-align: center;
}

form label.alert input {
	color: var(--primary);
}

#login-form label.text {
	grid-template-columns: var(--gr-x3) 1fr;
}

form label span svg {
	width: var(--gr-lg);
}

form label span svg path {
	fill: var(--light);
}

form label input {
	background-color: transparent;
	border: 2px solid var(--background-dk);
	border-radius: var(--radius);
	padding: var(--gr-sm);
	min-width: var(--gr-x3);
}

form label input:disabled {
	background-color: var(--background-dk);
}

form label.checkbox input {
	display: none;
}

form label.checkbox .box {
	background-color: var(--background-dk);
	border-radius: var(--gr-md);
	cursor: pointer;
	height: var(--gr-md);
	position: relative;
	width: var(--gr-xl);
}

form label.checkbox .box * {
	pointer-events: none;
}

form label.checkbox .slider {
	background-color: var(--secondary);
	border-radius: var(--gr-md);
	height: calc(var(--gr-xs) + var(--gr-md));
	left: 0;
	position: absolute;
	top: calc(var(--gr-xs) / -2);
	transition: left 0.3s;
	width: calc(var(--gr-xs) + var(--gr-md));
}

form label.checkbox input:checked + .box {
	background-color: var(--secondary-lt);
}

form label.checkbox input:checked + .box .slider {
	background-color: var(--secondary);
	left: calc(var(--gr-xl) - var(--gr-md) - var(--gr-xs));
}

form label.checkbox input:disabled + .box {
	background-color: var(--background-dk);
}

form label.checkbox input:disabled + .box .slider {
	background-color: var(--light);
}

#form-inputs {
	display: flex;
	flex-flow: column nowrap;
}

form label ul {
	background-color: var(--foreground);
	border: 2px solid var(--background-dk);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	left: calc(var(--gr-lg) * 2);
	list-style-type: none;
	position: absolute;
	top: calc(var(--gr-sm) * 3 + var(--gr-md));
	width: calc(100% - var(--gr-lg) * 2);
	z-index: 6;
}

form label.text ul {
	left: calc(var(--gr-lg) + var(--gr-x4));
	width: calc(100% - var(--gr-lg) - var(--gr-x4));
}

form label ul li {
	background-color: transparent;
	border-bottom: 1px solid var(--background-dk);
	cursor: pointer;
	padding: var(--gr-sm);
	position: relative;
	z-index: 7;
}

form label ul li:hover {
	background-color: var(--foreground-dk);
}

.tracker {
	display: flex;
	gap: var(--gr-lg);
	justify-content: center;
}

.tracker button {
	align-items: center;
	background-color: var(--secondary);
	border-radius: var(--radius);
	color: var(--foreground);
	display: flex;
	flex-flow: column nowrap;
	font-weight: 700;
	gap: var(--gr-lg);
	justify-content: start;
	padding: var(--gr-sm);
	text-align: center;
	width: var(--gr-x3);
}

.tracker button * {
	pointer-events: none;
}

.tracker button:hover,
.tracker button:active {
	background-color: var(--secondary-dk);
}

.tracker button:hover svg path,
.tracker button:active svg path {
	fill: var(--foreground);
}

.tracker button svg {
	width: var(--gr-xl);
}

.tracker button svg path {
	fill: var(--foreground);
}

#form-buttons {
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
}

#form-buttons.hidden {
	display: none;
}

form button {
	background-color: transparent;
}

form button svg {
	width: var(--gr-lg);
}

#logout-form button svg {
	width: calc(var(--gr-lg) + var(--gr-xs));
}

form button svg path {
	fill: var(--secondary);
}

form button:hover svg path,
form button:active svg path {
	fill: var(--secondary-dk);
}

#form-close {
	position: absolute;
	right: var(--gr-lg);
	top: var(--gr-lg);
}

#form-delete svg path {
	fill: var(--neg);
}

#form-delete:hover svg path,
#form-delete:active svg path {
	fill: var(--neg-dk);
}

.hidden {
	display: none;
}

.pos {
	color: var(--pos);
}

.neg {
	color: var(--neg);
}

.light {
	color: var(--light);
}

.icon {
	overflow: visible;
}

@media only screen and (max-width: 1400px) {
	.col2 {
		grid-template-columns: 1fr;
	}
	
	section.full {
		grid-column: 1;
	}
}

@media only screen and (max-width: 800px) {
	
	#period-button, nav button, #form-inputs, form label, .col2 {
		gap: var(--gr-md);
	}
	
	body.flex {
		gap: var(--gr-lg);
	}
	
	h1 {
		display: none;
	}
	
	#logo svg {
		height: var(--gr-x2);
		width: var(--gr-x2);
	}
	
	header input {
		flex: 1;
		max-width: none;
	}
	
	header h2, #spacer { display: none; }
	
	nav {
		background-color: var(--foreground);
		bottom: 0;
		box-shadow: var(--shadow);
		flex-flow: row nowrap;
		justify-content: start;
		left: 0;
		right: 0;
		padding: var(--gr-sm) var(--gr-lg);
		top: auto;
		width: 100%;
		z-index: 2;
	}
	
	nav button {
		width: calc(var(--gr-xl) + 4px);
	}
	
	nav button span {
		display: none;
	}
	
	main {
		grid-template-columns: 1fr;
		left: 0;
		padding-bottom: calc(var(--gr-x3));
		right: 0;
		top: calc(var(--gr-lg) * 2 + var(--gr-xl));
		z-index: 1;
	}
	
	main.hover {
		left: 0;
	}
	
	.col1 {
		grid-row: 2;
	}
	
	.col2 {
		grid-row: 1;
	}
	
	section {
		background-color: transparent;
		box-shadow: none;
		border-radius: 0;
		border-bottom: 1px solid var(--background-dk);
	}
	
	section .header {
		background-color: var(--background);
		border-bottom: 1px solid var(--background-dk);
		position: -webkit-sticky;
		position: sticky;
		top: calc(var(--gr-lg) * 2 + var(--gr-xl));
	}
	
	#transactions, #accounts, #categories {
		order: 1;
	}
	
	.menu .opener:hover,
	.menu .opener:active {
		background-color: var(--background-dk);
	}
	
	#offline {
		bottom: calc(var(--gr-sm) * 4 + var(--gr-lg));
	}
	
	#add-button {
		bottom: var(--gr-lg);
		right: var(--gr-md);
	}
	
	form {
		border-top-left-radius: 0;
		border-top-right-radius: 0;
		left: 0;
		right: 0;
		top: 0;
		width: 100%;
	}
	
	#logout-form {
		left: 140px;
		right: auto;
		top: calc(var(--gr-md) + var(--gr-xs));
		width: auto;
	}
	
	#login-bad {
		border-radius: 0;
		box-shadow: none;
		top: 0;
		width: 100%;
	}
	
	form label ul {
		left: calc(var(--gr-lg) + var(--gr-md));
		width: calc(100% - var(--gr-lg) - var(--gr-md));
	}
	
	form label.text ul {
		left: calc(var(--gr-x4) + var(--gr-md));
		width: calc(100% - var(--gr-x4) - var(--gr-md));
	}
}