:root {
	--background-body: hsl(213deg, 4%, 10%);
	--background-nav: hsl(230deg, 5%, 30%);
	--background-row: hsl(213deg, 4%, 15%);
	--background-row-swipe: rgb(68, 39, 39);
	--background-input-unit: hsl(210deg, 4%, 19%);
	--background-button: hsl(213deg, 75%, 35%);
	--text-grey: hsl(213deg, 11%, 71%);
	--text-grey-dark: hsl(213deg, 11%, 55%);
	--text-blue: hsl(213deg, 100%, 69%);
	--border-red: hsl(0deg, 66%, 47%);
	--border-blue: hsl(213deg, 66%, 47%);
	--white: hsl(0 0% 100%);
	--white-10: hsl(0 0% 100% / 0.1);
	--white-20: hsl(0 0% 100% / 0.2);
	--white-50: hsl(0 0% 100% / 0.5);
	--white-70: hsl(0 0% 100% / 0.7);
	--black-20: hsl(0 0% 0% / 0.2);
	--black-30: hsl(0 0% 0% / 0.3);
	--black-70: hsl(0 0% 0% / 0.7);
}

* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

body {
	background-color: var(--background-body);
	margin: 0;
	padding: 0;
	font-family: 'Roboto', sans-serif;
}

nav {
	font-size: 16px;
	align-items: center;
	background: var(--background-nav);
	display: grid;
	color: #fff;
	grid-template-columns: auto max-content;
	height: 55px;
	padding: 0 7px;
	position: relative;
	user-select: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 4;
}

#nav_title {
	padding: 0 10px;
	font-size: 24px;
	font-family: 'Roboto Slab', sans-serif;
	font-weight: 500;
}

.nav-button {}

.nav-button svg {
	fill: var(--white-50);
	transition: all .2s ease-in-out;
}

.nav-button:hover svg {
	fill: var(--white);
	transition: all .2s ease-in-out;
}

#template {
	display: none;
}

#content {
	display: grid;
	grid-template-rows: max-content auto;
	min-height: calc(100vh - 55px);
	padding: 10px;
	display: none;
	margin-top: 55px;
}

#add_button_container {
	display: grid;
	place-content: center;
	padding: 10px;
}

.row {
	align-items: center;
	background: var(--background-row);
	border-radius: 4px;
	color: #fff;
	display: grid;
	gap: 10px;
	grid-template-columns: 1.5fr 1fr 1fr 1.5fr;
	padding: 10px;
	margin-bottom: 10px;
	box-shadow: 0 0 2px hsl(0deg 0% 0% / 60%);
	font-size: 18px;
}

.row.swiping {
	background: var(--background-row-swipe);
}

.label {
	font-size: 13px;
	margin-bottom: 5px;
	color: var(--text-grey-dark);
}

.unit {
	/* color: #acb4bd; */
}

.results {
	display: grid;
	gap: 5px;
}

.result-group {
	display: none;
}

.results.expanded .result-group {
	display: block;
	opacity: .75;
}

.results .result-group:first-child {
	display: block;
	opacity: 1;
}

.result-price {
	display: inline-block;
	color: var(--text-blue);
	font-weight: 400;
}

.result-amount {
	display: inline-block;
	font-size: 13px;
	color: var(--text-grey);
}

.remove {
	width: 20px;
}

.remove svg {
	width: 80%;
	fill: var(--text-grey);
}

#add_button {
	background: var(--background-button);
	color: #fff;
	font-size: 47px;
	width: 60px;
	height: 60px;
	border-radius: 60px;
	text-align: center;
	cursor: pointer;
	line-height: 1.25em;
	box-shadow: 0 10px 20px hsl(0deg 0% 0% / 35%);
	user-select: none;
}

#form {
	padding: 10px 20px;
	margin-top: 85px;
	position: relative;
	min-height: calc(100vh - 85px);
}

.form-row {
	color: #fff;
	margin-bottom: 20px;
}

.form-label {
	font-size: 16px;
	margin-bottom: 5px;
	color: var(--text-grey);
}

.form-row input {
	padding: 6px 10px;
	font-family: 'Roboto', sans-serif;
	width: 100%;
	font-size: 20px;
	border: 0;
	border-radius: 3px;
}

.form-row input.error {
	box-shadow: 0 0 0 2px #c52929;
}

#input_type {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 10px;
}

.input-unit {
	background-color: var(--background-input-unit);
	padding: 10px;
	text-align: center;
	border-radius: 3px;
	cursor: pointer;
	font-size: 17px;
}

.input-unit.selected {
	box-shadow: 0 0 0 2px var(--border-blue);
}

#form_submit {
	background: var(--background-button);
	color: #fff;
	cursor: pointer;
	padding: 15px;
	text-align: center;
	border-radius: 4px;
	font-size: 18px;
}

#form_close {
	position: absolute;
	top: -20px;
	right: 10px;
	width: 40px;
	height: 40px;
	text-align: center;
}

#form_close svg {
	fill: var(--text-grey);
	width: 50%;
	margin-top: 4px;
}