:root {
	--item-height: 24px;
	--num-width: calc(var(--item-height) * 1.75);
	--cat-width: calc(var(--item-height) * 3.5);
	--unit-width: calc(var(--item-height) * 1.25);
	--gap-width: calc(var(--item-height) * 0.1);
}

@font-face {
	font-family: Oxanium;
	font-display: swap;
	src: url(../font/Oxanium-Medium.ttf);
	/* font-family: Comfortaa;
	src: url(../font/Comfortaa-Medium.ttf); */
	/* font-family: Caveat;
	src: url(../font/Caveat-Medium.ttf); */
}

/***** General Page *****/

* {
	box-sizing: border-box;
	outline-color: transparent;
}

*:not(input), *:focus:not(input) {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}


html, body {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	font-family: Oxanium;
	font-display: block;
	/* font-family: Comfortaa; */
	/* font-family: Caveat; */
	font-size: calc(var(--item-height) * 0.75);
}

body {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	overflow: auto;
	background-color: #555;
}

#lists {
	padding-bottom: 8vh;
}

.indicator {
	display: none;
}

.offline .indicatorOffline {
	display: block;
	cursor: pointer;
	width: 10vmin;
	height: 10vmin;
	border: 1px dashed red;
	border-radius: 6vmin;
	position: fixed;
	top: 1vmin;
	right: 1vmin;
	background-image: url(/img/offline.svg);
	background-color: #e663;
	background-position: center;
	background-size: 75%;
	background-repeat: no-repeat;
}

.list {
	display: grid;
	gap: 0.25rem 0;
	user-select: none;
	padding: 0.5rem;
}

.list > div {
	display: grid;

	/*                             category          amountNum          amountUnit   name               button; */
	grid-template-columns: var(--cat-width)   var(--num-width)   var(--unit-width)   auto;   /* calc(var(--item-height) * 1.25) */;

	align-items: center;
	cursor: pointer;
	column-gap: var(--gap-width);
}


/***** Items *****/

.category {
	width: var(--cat-width);
	height: 1.5rem;
	border: 5px solid transparent;
	border-color: rgba(255, 255, 255, 0.25);
	border-radius: calc(var(--item-height) / 3 * 2);
	white-space: nowrap;
	display: flex;
	overflow: hidden;
	justify-content: center;
	align-items: center;
}

.category > div {
	background: inherit;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	text-align: center;
	filter: invert(1) grayscale(1) contrast(9) drop-shadow(0.5px 0.5px grey);
}


.amountNum {
	width: var(--num-width);
	text-align: right;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	direction: rtl;
}


.amountUnit {
	width: var(--unit-width);
	justify-self: left;
	overflow: hidden;
}

.amountUnitText {
	transform-origin: left;
}

.name {
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	width: 99%;
}

/* .inactiveEntry {
	text-decoration: line-through;
} */
.inactiveEntry::after {
	content: "";
	display: block;
	width: calc(100vw - var(--cat-width) - var(--gap-width) * 3 - 1.5rem);
	height: 1px;
	background-color: white;
	position: relative;
	left: calc(var(--cat-width) + 4 * var(--gap-width));
	top: -0.85rem;
}

.action {
	margin-right: calc(var(--item-height) / 2);
}

.action > button {
	position: relative;
	width: var(--item-height);
	height: var(--item-height);
	border: 0px solid transparent;
	cursor: pointer;
	background-color: black;
	border-radius: 50%;
	overflow: hidden;
}


/***** Active List *****/

.active .action > button::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	transform: scale(0.7);
	width: var(--item-height);
	height: var(--item-height);
	display: block;
	background-color: red;
	filter: blur(12px);
	clip-path: polygon(10% 0, 0 10%, 40% 50%, 0 90%, 10% 100%, 50% 60%, 90% 100%, 100% 90%, 59% 50%, 100% 10%, 90% 0, 50% 40%);
	/* polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%); Fat /**/
	/* polygon(10% 0, 0 10%, 40% 50%, 0 90%, 10% 100%, 50% 60%, 90% 100%, 100% 90%, 59% 50%, 100% 10%, 90% 0, 50% 40%); Slim /**/
	/* polygon(15% 0, 0 15%, 40% 50%, 0 85%, 15% 100%, 50% 60%, 85% 99%, 100% 85%, 59% 50%, 100% 15%, 85% 0, 50% 40%); Strange /**/
}


.active {
	background: linear-gradient(to bottom, white calc(100% - 8px), #888 100%);
	padding-bottom: var(--item-height);
}


/***** Inactive List *****/

.inactive {
	/* background: linear-gradient(0, #5555, #555 20%, #555); */
	background: linear-gradient(to top, transparent calc(100% - 8px), #888 100%);
	color: #fff;
	padding-top: var(--item-height);
	padding-bottom: var(--item-height);
}

.inactive > * {
	opacity: 0.4;
}

/***** Menu and Controls *****/

.controls {
	position: fixed;
	width: 100vw;
	height: 8vh;
	right: 0;
	bottom: 0;
	padding: 1vmin;
	gap: 1vmin;

	z-index: 1;
	border: 0px dashed black;
}

.controls > .button {
	background-color: #fff4;
	border-radius: 60%;
	stroke: #eee;
	stroke-linecap: round;
	box-shadow: #444 3px 3px 7px;
	width: calc(8vh - 2vmin);
	height: calc(8vh - 2vmin);
}

/***** Dialogs *****/

label.mandatory::after {
	content: "*";
	font-size: 0.6em;
	vertical-align: top;
}

/* .menu {} */

.menu .button, .menu select {
	display: flex;
	justify-content: flex-start;
	align-items: center;

	gap: 0.5em;
	min-width: 2.5em;

	border: 1px solid white;
	background-color: white;
	outline: none;
	white-space: nowrap;

	border-radius: 4px;
	box-shadow: 0px 0px 5px #aaa;
}

.menu > * {
	text-overflow: ellipsis;
	overflow: hidden;

	white-space: nowrap;
	background-color: transparent;
}

.menu > .double {
	height: 4em;
}

.menu > .listcontrol {
	display: grid;
	grid-template-areas: "x x" "a b";
	grid-template-rows: 1fr 1fr;
	justify-content: stretch;
    align-items: flex-end;
	gap: 0.25em;
}

.menu > .listcontrol .selector {
	grid-area: x;
	justify-self: stretch;
	align-self: stretch;
}


.menu > .listcontrol .share {
	grid-area: a;
}

.menu > .listcontrol .remove {
	grid-area: b;
}