@font-face {
	font-family: alfredo;
	src: url(/librsc/font/Animosa-Regular.otf);
	font-weight: normal;
}

@font-face {
	font-family: alfredo;
	src: url(/librsc/font/Animosa-Bold.otf);
	font-weight: 600;
}

@font-face {
	font-family: alfredo;
	src: url(/librsc/font/Animosa-ExtraBold.otf);
	font-weight: 900;
}

@font-face {
	font-family: alfredo;
	src: url(/librsc/font/Animosa-Light.otf);
	font-weight: 300;
}

@font-face {
	font-family: alfredo;
	src: url(/librsc/font/Animosa-ExtraLight.otf);
	font-weight: 100;
}

:root {
	--theme: #443c6d;
	--theme-bg: #fffbe7;
	font-size: 16px;
	line-height: 1.875em;
	font-family: alfredo;
	color: #333333;
	background-color: var(--theme-bg);
	font-weight: 100;
	letter-spacing: 0.4px;
}

* {
	box-sizing: border-box;
}

body {
	margin: 0;
}

body.spin > *:not(.spin) {
	display: none !important;
}

body > .spin {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	animation-delay: 2s;
}

body .spin {
	animation-name: spin;
	animation-direction: alternate;
	animation-duration: 1s;
	animation-iteration-count: infinite;
	animation-fill-mode: both;
}

@keyframes spin {
	from {
		opacity: 1;
	} to {
		opacity: 0.8;	
	}
}

body:not(.spin) > .spin {
	display: none;
}

#cache, #pane-cache {
	display: none !important;
}

#login {
	margin-top: 5em;
}

#login, #login label, #signup, #signup label {
	display: flex;
	flex-direction: column;
	padding: 0.3em 0;
}

label[for=stay] {
	flex-direction: row !important;
	grid-gap: 0.25em;
	align-items: center;
}

#login input, #signup input {
	padding: 0.5em;
	margin-top: 0.5em;
}

#login > span, #signup > span {
	text-align: center;
	text-decoration: underline;
	margin-top: 1em;
}

#topper {
	height: 2.5em;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	display: flex;
	flex-direction: column;
	background-color: var(--theme);
	/*box-shadow: 0px 0px 3px 0px black;*/
	box-shadow: 0.4px 0.8px 0.8px hsl(50deg 10% 10% / 0.3);
}

#thinking-blinking-thing {
	animation-name: flutter;
	animation-duration: 0.1s;
	animation-iteration-count: infinite;
	animation-fill-mode: both;
	position: fixed;
	top: 2px;
	left: 2px;
	width: 4px;
	height: 4px;
	border: 1px solid var(--theme-bg);
	border-radius: 50%;
	background-color: var(--theme-bg);
	z-index: 2;
}

@keyframes flutter {
	from {
		opacity:0.5;
	}	to {
		opacity: 0.2;
	}
}

h1 {
	display: inline;
	margin: 0;
	font-size: 1.5em;
	font-weight: 100;
}

h2 {
	margin: 0;
	font-size: 1.3em;
}

#bottomer {
	height: 3.2em;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	display: flex;
	flex-direction: column;
}

#content {
	position: fixed;
	top: 2.5em;
	bottom: 0;
	left: 0;
	right: 0;
	overflow-y: auto;
	background-color: var(--theme-bg);
	z-index: -1;
}

#inventory, #meals {
	padding-bottom: 40vh;
}

.binary-pane {
	display: flex;
	flex-direction: column;
}

.binary-pane > span:first-child {
	display: flex;
	border-bottom: 1px solid var(--theme);
}

.binary-pane > span:first-child span
{	flex-grow: 1;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: var(--theme);
	color: var(--theme-bg);
}

.binary-pane > span:first-child span.vacant
{	font-weight: bold;
	text-decoration: underline;
}

#bottomer > div, #topper > div:first-of-type {
	display: flex;
	justify-content: space-around;
	align-items: center;
	color: var(--theme-bg);
	height: 100%;
	background-color: var(--theme);
}

#bottomer > div::before {
    height: 3px;
    width: 100%;
    position: absolute;
    content: "";
    top: -3px;
    backdrop-filter: blur(1px);
}

.hidden-right > div {
	animation-name: hide-right;
	animation-duration: 0.2s;
	animation-fill-mode: forwards;
}

.hidden-left > div {
	animation-name: hide-left;
	animation-duration: 0.2s;
	animation-fill-mode: forwards;
}

@keyframes hide-right{
	from {
		transform: translateX(60%);	
	}
	to {
		transform: translateX(100%);
	}
}

@keyframes hide-left{
	from {
		transform: translateX(-60%);	
	}
	to {
		transform: translateX(-100%);
	}
}

#rolling-pin {
	display: none;
	position: fixed;
	bottom: 2px;
	justify-content: center;
	align-items: center;
	background-color: var(--theme);
	border-radius: 10px;
	padding: 0.3em;
	opacity: 0;
}

#rolling-pin img {
	height: 2.5em;
	width: auto;
}

.hidden-right #rolling-pin {
	animation-name: fadein;
	animation-fill-mode: forwards;
	animation-duration: 0.2s;
	animation-delay: 0.2s;
	animation-timing-function: ease-in;
	display: flex;
	right: 2px;
}

.hidden-left #rolling-pin {
	animation-name: fadein;
	animation-fill-mode: forwards;
	animation-duration: 0.2s;
	animation-delay: 0.2s;
	animation-timing-function: ease-in;
	display: flex;
	left: 2px;
}

@keyframes fadein {
	to {
		opacity: 1;	
	}
}

.fadeout 
{	animation-name: fadeout;
	animation-duration: 3s;
	animation-fill-mode: forwards;
	animation-timing-function: ease-out;
}

@keyframes fadeout {
	to {
		opacity: 0;	
	}
}

#bottomer .icon img {
	height: 1.5em;
	width: auto;
}

#bottomer .icon {
	padding: 0.5em;
	display: flex;
	justify-content: center;
	align-items: center;
}

#home-icon {
	border-radius: 50%;
	height: 2.5em;
	width: 2.5em;
	border: 1px solid var(--theme-bg);
}

.icon-active {
	border-bottom: 2px solid var(--theme-bg);
}

#menu-relative {
	height: 0;
	position: relative;
}

#profile-menu, #right-menu {
	position: absolute;
	top: 0;
	display: flex;
	flex-direction: column;
	padding: 1em;
	min-width: 50vw;
	background-color: var(--theme);
	color: var(--theme-bg);
}

#profile-menu {
	left: 0;
}

#profile-menu-heading {
	display: flex;
	flex-direction: column;
	border-bottom: 1px dotted var(--theme-bg);
	margin-bottom: 1em;
}

#logout:link, #logout:visited, #logout:hover, #logout:active {
	text-decoration: none;
	color: white;
}

#user-username {
	font-size: 0.7em;
}

#right-menu {
	right: 0;
	text-align: right;
}

.right-menu {
	display: none;
	flex-direction: column;
}

#right-menu .right-menu {
	display: flex;
}

.right-menu > * {
	padding: 0.5em;
	border-bottom: var(--theme-bg) 1px dotted;
}

.bye {
	display: none !important;
}

.hidden {
	visibility: hidden !important;
}

.almost {
	opacity: 0.3;
}

.assistive-header {
	position:absolute;
	left:-10000px;
	top:auto;
	width:1px;
	height:1px;
	overflow:hidden;
}

.pop {
	display: none;
	flex-direction: column;
}

.popped .pop {
	display: flex;
}

.popped .pane-body {
	display: none;
}

.pop-header {
	background-color: var(--theme);
	display: flex;
	justify-content: space-between;
	align-items: center;
	color: var(--theme-bg);
	height: 1.25em;
	font-size: 2em;
	padding: 0 0.8em;
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	z-index: 9;
}

.pop-stack {
	position: relative;
}

.pop-item {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: none;
	overflow-y: auto;
	margin-top: 2.5em;
}

.pop-item form {
    display: flex;
    flex-direction: column;
}

.fieldset-button {
	padding: 0;
	margin: 0;
	border: none;
	display: flex;
	flex-direction: column;
	border-bottom: 1px solid var(--theme);
}

.drop:not(.open) > *:not(span:first-child) {
	display: none;
}

.fieldset-button > span:first-child {
	font-size: larger;
	font-weight: bold;
	color: var(--theme);
	padding: 0.5em;
	display: flex;
	justify-content: space-between;
}

.fieldset-button > span:first-child::after {
	content: url(/librsc/img/arrow-up-theme-16.png);
	transform: rotate(180deg);
	display: inline-flex;
	transition: transform 0.3s;
}


.fieldset-button.open > span:first-child {
	font-weight: bold;
	text-decoration: underline;
	box-shadow: 0.6px 1.2px 1.2px hsl(50deg 10% 10% / 0.3);
	border-bottom: 2px solid var(--theme);
}

.fieldset-button.open > span:first-child::after {
	transform: unset;
}

.fieldset-button.open {
	max-width: 100vw;
}

.input-hint {
	font-size: smaller;
	opacity: 0.8;
	padding-left: 0.5em;
}

.pop-item form > span {
	color: var(--theme);
	font-size: larger;
	font-weight: bold;
	text-align: center;
	line-height: 4;
}

.pop-item:last-child {
	display: unset;
	animation-name: popup;
	animation-timing-function: ease-out;
	animation-duration: 0.2s;
	animation-fill-mode: forwards;
}

@keyframes popup {
	from {
		top: 2.4em;	
	}	to {
		top: 0;	
	}
}

.help {
	display: inline-flex;
	background: var(--theme);
	color: var(--theme-bg);
	border-radius: 50%;
	height: 20px;
	width: 20px;
	justify-content: center;
	align-items: center;
	margin: 0 0.5em;
	font-size: smaller;
	font-weight: bold;	
}

[data-help-for] {
	padding: 0 0.25em;
	display: flex;
	flex-direction: column;	
}

[data-help-for] b {
	color: var(--theme);
}

.theme-link {
	text-decoration: underline;
	color: var(--theme);
	cursor: pointer;
}

.list-of-meals, .list-of-recipes, .list-of-families, .list-of-family-users, .list-of-mealnames, .list-of-places,
.list-of-goods, .list-of-needs, .list-of-objects, .list-of-social, .list-of-step-objects {
	display: flex;
	flex-direction: column;
	list-style-type: none;
	padding: 0;
	margin: 0;
}

.list-of-objects, .list-of-meals, .list-of-recipes {
	flex-direction: row;
	flex-wrap: wrap;
}

.list-of-recipes {
	justify-content: space-evenly;
	grid-row-gap: 1.875em;
	padding: 2em 0;
}

.list-of-step-objects {
	border-top: 2px solid var(--theme);
}

.list-of-step-objects, .step-object img, .step-object video {
	width: 100%;
}

.list-of-meals::before {
	content: "My Recipes:";
	padding: 0.5em;
	color: var(--theme);
	font-size: 1.4em;
	font-weight: bold;
}

.list-of-places::before {
	content: "My Inventory:";
	padding: 0.5em;
	color: var(--theme);
	font-size: 1.4em;
	font-weight: bold;
}

.need .manual-shopping-list::before {
	content: "My Shopping List:";
	padding: 0.5em;
	color: var(--theme);
	font-size: 1.4em;
	font-weight: bold;
}

.need .list-of-places::before {
	display: none;
}

.list-of-social::before {
	content: "For Me:";
	padding: 0.5em;
	color: var(--theme);
	font-size: 1.4em;
	font-weight: bold;
}

.list-hint {
	padding: 0 3em;
	text-align: center;
	font-style: italic;
	line-height: 1.5;
}

.list-action {
	display: flex;
	align-items: center;
	padding-left: 0.5em;
	font-style: italic;
	width: 100%;
}

.social .list-of-meals {
	display: none;
}

.library .list-of-social {
	display: none;
}

.list-of-spots, .list-of-recipes
{	padding-left: 0.25em;
}

.list-of-steps {
	padding: 0;
	counter-reset: step;
	flex-direction: column;
}

form .list-of-steps {
	max-width: 100vw;
	overflow-x: clip;
}

.list-of-ingredients {
	padding-left: 0em;
	flex-direction: column;
}

form .list-of-ingredients {
	margin-top: 0;
	border-top: 3px solid var(--theme);
}

.list-meal
{	display: flex;
	flex-direction: column;
	margin: 0.25em !important;
	font-weight: 100;
}

.drop:not(.open) > ul, .drop:not(.open) > ol, .drop:not(.open) > label {
	display: none;
}

.drop > ul, .drop > ol, .drop > label {
	display: flex;
}

.drop.button-after.open::after {
    background-color: var(--theme);
    width: 100%;
    content: url(/librsc/img/arrow-up-theme-bg-16.png);
    color: var(--theme-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px 0;
    margin-top: 2em;
	 box-shadow: 0.6px 1.2px 1.2px hsl(50deg 10% 10% / 0.3);
}

.list-meal.open {
	width: 100%;
	margin: 0.25em 0 !important;
}

.list-meal > span {
	border: 2px solid var(--theme);
	max-width: max-content;
}

.list-meal ul {
	padding-top: 0.25em;
	display: none;
	background-color: var(--theme-bg);
	grid-row-gap: 1.625em;
}

.list-recipe {
	padding: 0.5em;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 128px;
	text-align: center;
	position: relative;
}

.list-recipe .shared-icon {
	position: absolute;
	top: 0.7em;
	right: 0.25em;
	display: flex;
	background: var(--theme-bg);
	padding: 0.5em;
	border-radius: 50%;
	opacity: 0.9;
}

.list-recipe:not(.shared) .shared-icon {
	display: none;
}

.list-recipe > .name {
	margin-top: 1em;
}

.list-social > .name {
	padding: 0.3em;
	border-bottom: 1px dotted var(--theme);
}

.list-meal.open ul {
	display: flex;
	border-top: 2px solid var(--theme);
	/*border-bottom: 1px solid var(--theme);*/
	/*box-shadow: 0.6px 1.2px 1.2px hsl(50deg 10% 10% / 0.3);*/
}

.list-meal.open > span {
	border-bottom: none;
	margin-left: 0.25em;
	margin-top: -1px;
	box-shadow: 0.6px 1.2px 1.2px hsl(50deg 10% 10% / 0.3);
}

.home-family, .list-family {
	display: flex;
	flex-direction: column;
	padding: 0.5em;
}

.home-family {
	padding-bottom: 1em;
}

.home-family > span, .list-family > span {
	display: flex;
	align-items: flex-end;
}

.home-family .names, .list-family .names {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
}

.home-family > span img {
	height: 1em;
	margin: 0 0.25em;	
}

.home-family > span .name {
	font-size: 1.4em;
}

.home-family .names, .home-family .names *, .list-family .names, .list-family .names *
{	white-space: nowrap;
	overflow-x: hidden;
	text-overflow: ellipsis;
}

.list-family > span {
	border-bottom: 1px dotted lightgrey;
}

.list-family > span img {
	height: 1em;
	margin: 0 0.25em;	
}

.list-family ul {
	padding-top: 0.25em;
	display: none;
}

.list-family .add-people, .home-family .add-people {
	font-size: 0.8em;
	padding: 0 0.25em;
	margin-left: 1.25em;
}

.list-family-user {
	padding: 0.25em 1.25em;
	font-size: 0.9em;
	display: flex;
}

.list-family-user .username, .search-result-user .username {
	font-size: 0.9em;
	opacity: 0.9;
}

.search-results {
	padding: 0;
}

.search-result-user, .search-result-mealname, .search-result-foodstuff {
	display: flex;
	align-items: center;
	padding: 0.5em 1.25em;
	border-bottom: 1px dotted lightgrey;
}

.search-result-user .names
{	display: flex;
	flex-direction: column;
}

.joined
{	height: 1em;
	width: 1em;
	border-radius: 50%;
	border: 2px solid var(--theme);
	background-color: var(--theme);
	margin: 0 0.5em
}

.joined.not-joined {
	background: none;
}

.list-family.open ul {
	display: flex;
}

.list-meal, .list-place, .list-spot {
	display: flex;
	flex-direction: column;
	padding: 0.5em 0;
}

.list-place > span {
	border-bottom: 1px dotted lightgrey;
}

.list-place > span, .list-spot > span, .list-meal > span {
	display: flex;
	align-items: center;
}

.list-place > span img, .list-spot > span img, .list-meal > span img, .list-action img {
	height: 1em;
	margin: 0 0.25em;	
}

.list-place > span .name {
	font-size: 1.4em;
	margin: 0 0.5em;
}

.list-place > ul {
	display: none;
	flex-direction: column;
}

.list-place.open > ul
{	display: flex;
}

.need .list-spot, .need .add-a-spot {
	display: none;
}

.need .list-place > span {
	font-size: smaller;
	color: var(--theme);
	font-weight: bold;
	border-bottom: 1px solid var(--theme);
}

.need .list-place > span img {
	display: none;
}

.list-spot > span .name, .list-meal > span .name {
	margin: 0 0.5em;
}

.list-spot > ul {
	display: none;
	flex-direction: column;
//	margin-left: 2em;
}

.list-spot.open > ul
{	display: flex;
}

.list-spot:not(.open) .pencil {
	display: none;
}

.list-good {
	display: flex;
	align-items: center;
}

.list-good > .text
{	display: flex;
}

.list-good .name
{	margin: 0 0.3em;
	text-overflow: ellipsis;
	overflow-x: hidden;
	white-space: nowrap;
	/*max-width: 8em;*/
}

.list-good .name::first-letter {
	font-size: larger;
	color: var(--theme);
}

.list-good .quantity, .list-good .measure {
	text-align: unset;
	margin: 0 0.2em;
}

.list-good img 
{	height: 1em;
	margin: 0 0.2em;
}

.have .list-of-needs {
	display: none !important;
}

.list-need {
	display: flex;
	align-items: center;
}

.list-need > span:first-of-type
{	display: flex;
	align-items: baseline;
}

.list-need .name
{	margin: 0 0.3em;
	text-overflow: ellipsis;
	overflow-x: hidden;
	white-space: nowrap;
	max-width: 10em;
}

.list-need .spot-name
{	font-size: smaller;
	color: var(--theme);
	font-weight: bold;
}

.list-need .name::first-letter {
	font-size: larger;
	color: var(--theme);
}

.list-need .quantity, .list-need .measure {
	text-align: unset;
	margin: 0 0.2em;
}

.list-need img 
{	height: 1em;
	margin: 0 0.2em;
}

.end-buttons {
	display: flex;
	justify-content: flex-end;
	flex-grow: 1;
}

.par {
	min-width: 2em;
	min-height: 1.3em
}

.full-recipe {
	padding-bottom: 10em;
	text-align: justify;
	font-weight: 100;
}

.full-recipe h3 {
	font-size: 1.25em;
	margin: 1em 0 2.25em 0;
}

.full-recipe h3 img,
.full-recipe h4 img, 
.full-recipe h5 img {
	height: 0.8em;
}

.full-recipe:not(.own-recipe) .for-own-recipe {
	display: none !important;
}

h3 
{	padding-left: 0.25em;
}

.edit-media {
    position: absolute;
    right: 4px;
    top: 4px;
    background: var(--theme-bg);
    padding: 0.5em;
    border-radius: 12px;
    display: flex;
    opacity: 0.8;
}

.dummy {
	background: var(--theme);
   opacity: 0.3;
   padding: 30%;
}

.media-button {
	position: relative;
}

.media-button .counter {
	position: absolute;
	top: 3px;
	right: -8px;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	height: 16px;
	width: 16px;
	font-size: 0.875em;
	background-color: var(--theme);
	color: var(--theme-bg);
	border-radius: 50%;
	font-weight: bold;	
}

.full-recipe .sharing {
	display: flex;
   flex-direction: column;
   align-items: center;	
}

.full-recipe .sharing span {
	font-weight: 600;
	color: var(--theme);
}

.full-recipe h4, .full-recipe h5
{	text-align: center;
	font-weight: 600;
	margin: 2.25em 0;
}

.full-recipe h4 {
	font-size: 1.125em;
}

.full-recipe h5 {
	font-size: 1em;
}

.button-set {
	display: flex;
	flex-wrap: wrap;
}

.inline-button, .rect-button {
    border: var(--theme) 1px solid;
    background-color: var(--theme);
    color: var(--theme-bg);
    border-radius: 10px;
    padding: 0.2em 1em;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin: 0.5em;
    height: 3em;
    min-width: 3.7em;
}

.list-button {
	border: var(--theme) 1px solid;
	background-color: var(--theme);
	color: var(--theme-bg);
	border-radius: 10px;
	padding: 0 0.3em;
	margin: 0 0.3em;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	line-height: 1.3em;
}

.vacant {
	background-color: var(--theme-bg) !important;
	color: var(--theme) !important;
	border-color: var(--theme) !important;
}

.rect-button {
	border-radius: 0px !important;
}

.inline-button img {
	height: 1em;
	margin: 0.25em;
}

.main-add-button {
	position: fixed;
	bottom: 4em;
	right: 1em;
	display: inline-flex;
	align-items: flex-end;
	display: none;
}

.main-add-button img {
	height: 2.5em;
	width: 2.5em;
	transition-property: transform;
	transition-duration: 0.1s;
}

.add-menu {
	flex-direction: column;
	margin-right: 0.5em;
	display: none;
}

.add-menu span {
	background-color: var(--theme);
	color: var(--theme-bg);
	margin: 0.1em 0;
	padding: 0.3em 0.5em;
	border-radius: 1px;
	min-width: 85px;
}

.main-add-button.open img
{	transform: rotate(45deg);	
}

.main-add-button.open .add-menu
{	display: inline-flex;
}

@keyframes quarter-turn {
	to {
		transform: rotate(45deg);	
	} 
}

@keyframes quarter-back {
	to {
		transform: rotate(0deg);	
	} 
}

.quantity, .measure, .integer, .decimal {
	font-weight: bold;
	color: var(--theme);
	display: inline-block;
	width: 2em;
	text-align: right;
}

.integer {
	width: 1.2em;
}

.decimal {
	width: 1.3em;
	text-align: left;
	margin-right: 0.5em;
}

.decimal::before {
	content: ".";
}

.measure {
	width: unset;
}

.editable-step {
	padding: 0.5em 0;
	counter-increment: step;
	position: relative; 
}

.drop-step {
	position: absolute;
	color: var(--theme);
	top: 0.1em;
	right: 0.5em;
	display: flex;
	justify-content: center;
	font-weight: bold;
}

.ingredient-preview > * {
	margin: 0 0.12em;
}

.step-controls, .ingredient-controls {
	display: flex;
	flex-wrap: wrap;
	position: relative;
}

.ingredient-controls	input[type=number], input[type=number] {
	width: 5em;
	text-align: right;
}

.q-m {
	display: flex;
}

.ingredient-controls	select {
	width: 4em;
	appearance: none;
	padding: 1em 0.25em;
}

.search-results-relative {
	position: relative;
	height: 0em;
}

.ingredient-controls .search-results-relative {
	width: 100%;
	position: absolute;
	bottom: 0;
	background-color: whitesmoke;
	backdrop-filter: opacity(50%);
}

.search-results {
	position: absolute;
	list-style-type: none;
	background-color: whitesmoke;
	right: 0;
	left: 0;
	display: flex;
	flex-direction: column;
}

.ingredient-controls .search-results {
	left: 7em;
	z-index: 1;
}
 
.step-preview {
	display: flex;
	padding: 1em 0;
	align-items: center;
}

.step-preview img, .step-preview video {
	max-height: 48px;
	border: 1px solid var(--theme);
	background-color: var(--theme);
}

.to-delete .step-preview, .to-delete .ingredient-preview 
{	display: none;
}

.delete-notice {
	display: none;
	font-style: italic;
}

.delete-notice span {
	font-style: normal;
	text-decoration: underline
}

.to-delete .delete-notice {
	display: block;
}

.to-delete .drop-step {
	display: none;
}

.editable-step, .editable-ingredient, .step-preview, .ingredient-preview, .step-preview span:last-of-type {
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow-y:visible;
	/*overflow-x:hidden;*/
	line-height: 1.2em;
}

.editable-ingredient input[type="text"] {
	flex-grow: 1;
}

.open .drop-step {
	display: none;
}

.blog, .recipe-step {
	line-height: 1.375em;
}

.recipe-step
{	counter-increment: step;
	display: flex;
	flex-direction: column;
}

.recipe-step:not(:last-child)::after
{	/*border: 2px solid var(--theme);*/
	content: "";
	margin-top: 3em;
}

.recipe-step .text-wrapper
{	margin-right: 1.5em;
	display: flex;
}

.recipe-step .text-wrapper > span:first-child, .editable-step .step-preview > span:first-child 
{	padding: 0 0.5em 0 0.5em;
	display: flex;
	flex-direction: column;
	font-weight: bold;
	color: var(--theme);
	font-size: 1.5em;
}

.editable-step > span:first-child
{	padding-left: 0;
}

.recipe-step .text-wrapper > span:first-child span::before,
.editable-step:not(.to-delete) > .step-preview span:first-child span::before
{	content: counter(step);
}

.new-capture-button {
	height: 90px;
	width: 90px;
}

.editable-object {
	border: 1px solid var(--theme);
	display: inline-flex;
	margin: 0.5em;
	position: relative;
}

.editable-object img, .editable-object video {
	width: 90px;
	height: 90px;
	object-fit: cover;
	object-position: center;
}

.editable-object .indicator {
	position: absolute;
	top: 1px;
	right: 1px;
	width: 20px;
	height: 20px;
	border-radius: 7px;
	background-color: var(--theme-bg);
	border: 2px solid var(--theme);
	color: var(--theme);
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 1.375em;
	font-weight: bold;
}

.editable-object.to-delete {
	opacity: 0.3;
}

.editable-object:not(.to-delete) .indicator::before {
	content: "\2713";
}

.capture, .captured {
	padding-top: 5em;
	background-color: black;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	display: flex;
	flex-direction: column;
}

.capture video, .captured video, .captured img
{	width: 100%;
}

.capture-tools
{	position: relative;
	flex-grow: 1;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	flex-direction: column;
}

.capture-button
{	height: 72px;
	width: 72px;
	border-radius: 50%;
	border: 8px solid var(--theme);
	margin-bottom: 1em;
}

.capture-meter {
    position: absolute;
    left: 3vw;
    right: auto;
    top: -0.7em;
    height: 0.3em;
    background-color: var(--theme);
    z-index: 9;
    border-radius: 10px;
}

.capture-meter:not(bye)
{	animation-name: capturemeter;
	animation-duration: 10s;
	animation-fill-mode: forwards;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
} 

@keyframes capturemeter {
	from {
		width: 3vw;	
	}
	to {
		width: 94vw;
	}
}

.pending {
	position: relative;
}

.pending * {
	visibility: hidden;
}

.pending::after {
	content: "...";
	color: var(--theme);
	position: absolute;
	top: 10%;
	left: 0.5em;
	font-size: 3em;
	animation-name: spin;
	animation-direction: alternate;
	animation-duration: 0.75s;
	animation-iteration-count: infinite;
	animation-fill-mode: both;
}

.for-me .my-calendar {
	display: none;
}

.my-calendar .my-calendar::before {
	content: "My Calendar:";
	padding: 0.75em 0.5em;
	color: var(--theme);
	font-size: 1.4em;
	font-weight: bold;
	display: flex;
}

.my-calendar .my-calendar {
	display: flex;
	flex-wrap: wrap;
	justify-items: space-between;
}

.calendar {
	display: flex;
	flex-direction: column;
	width: 100%;
	position: relative;
}

.calendar-week {
	display: flex;
	flex-grow: 1;
}

.calendar-day {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	border: 1px solid var(--theme);
	border-bottom: none;
	max-width: 15vw;
	background: var(--theme-bg);
	transition: left 0.1s 0s, right 0.1s 0s;
	transition-timing-function: ease-out; 
}

.calendar-day.abs {
	position: absolute;
	width: unset;
	max-width: unset;
	min-width: 15vw;
	left: 0 !important;
	right: 0 !important;
	z-index: 2;
}

.calendar-day.today::before {
	content: "";
	display: flex;
	height: 16px;
	width: 16px;
	border-radius: 50%;
	background: url(/librsc/img/food/eggplant-bg-32.png);
	background-size: 16px 16px;
	transform: rotate(12deg);
	position: absolute;
	margin: auto;
	align-self: center;
	top: 0;
}

.calendar-day .close {
	display: none;
	height: 1em;
	width: 1em;
	border-radius: 50%;
	color: var(--theme-bg);
	opacity: 0;
	transition: opacity 0.1s 0.2s;
}

.calendar-day.abs .close {
	display: flex;
	position: absolute;
	top: 0;
	right: 0;
	margin: 0.325em 0.5em;
	font-size: 24px;
	opacity: 1;
}

.calendar-day:nth-of-type(2n) {
	background: #e5e2d0;
}

.calendar-day > span:first-child {
	display: flex;
	justify-content: center;
	align-items: center;
	color: var(--theme-bg);
	background: var(--theme);
	line-height: 3;
	font-weight: 800;
}

.calendar-day > ul {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	position: relative;
	border-bottom: 1px dashed var(--theme);
	flex-grow: 1;
	background-position: center;
	background-repeat: no-repeat;
	background-size: 24px 24px;
	padding: 2px;
	height: 14vh;
	margin: 0;
}

.calendar-day > ul:last-child {
	border: none;
}

.calendar-day > ul::before {
	content: "";
   position: absolute;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
   display: flex;
   justify-content: center;
   align-items: center;
   background-size: 32px 32px;
   background-repeat: no-repeat;
   background-position: center 0.5em;
}
.calendar-day > ul:empty::before {
	opacity: 0.5;
}

.breakfast::before {
	background: url(/librsc/img/food/eggs-64.png);
}

.breakfast .event:empty::before {
	content: "breakfast";
}

.lunch::before {
	background: url(/librsc/img/food/hamburger-64.png);
}

.lunch .event:empty::before {
	content: "lunch";
}

.dinner::before {
	background: url(/librsc/img/food/mushroom-64.png);
}

.dinner .event:empty::before {
	content: "dinner";
}

.dessert::before {
	background: url(/librsc/img/food/ice-cream-64.png);
}

.dessert .event:empty::before {
	content: "dessert";
}

.event, .calendar-day > ul:empty::after {
	width: 100%;
	background: var(--theme);
	text-overflow: ellipsis;
	overflow: hidden;
	overflow-y: auto;
	color: var(--theme-bg);
	font-size: 0.875em;
	line-height: 1;
	z-index: 1;
	padding: 1px 0;
	min-height: 16px;
}

.event + .event {
	border-top: 1px solid var(--theme-bg);
}

.calendar-day > ul:empty::after {
	content: "+";
	text-align: center;
	font-weight: bold;
	border: none;
	background: none;
	color: var(--theme);
	font-size: 1.125em;
	opacity: 0.7;
	overflow: hidden;
}

.calendar-day.abs .event {
	text-align: center;
	width: 80%;
	margin-left: auto;
	margin-right: auto;
}

.full-event {
	display: flex;
	flex-direction: column;
}

.event-details {
	padding: 0 0.5em;
	display: flex;
	flex-direction: column;	
}

.event-details > span {
	display: flex;
	flex-direction: column;
}

.event-details > span > span {
	padding-left: 1em;
	color: var(--theme);
	font-weight: bold;
}

@media screen and (max-width: 800px)
{	.full-recipe .blog {
		padding: 0 1.5em 1em 1em;
	}	

	.full-recipe > img, .full-recipe > video {
		width: 100%;
	}
	
	label {
		display: flex;
		flex-direction: column;
		margin: 0.75em 0;
	}
	
	label > * {
		margin: 0.25em 0;	
	}
	
	label.inline {
		flex-direction: row;
		align-items: baseline;	
	}

	label.inline > * {
		margin: 0 0.25em;
	}
	
	input[type=text],input[type=password],input[type=number],input[type=time],
	input[type=email],input[type=tel],textarea,select,input[name=date]+span {
		padding: 1em;
		border: none;
		border-bottom: 2px solid var(--theme);
		background-color: #0000000a;
		user-select: text;	
	}
	
	input[name=date]+span, label .date {
		font-size: smaller;
		color: var(--theme);
		font-weight: bold;
		line-height: 2;	
	}
	
	label .date {
		font-size: unset;	
	}
	
	textarea {
		height: 20em;
		resize: none;
		width: 100%;	
	}
	
	.search {
		flex-direction: row;
	}

	.search input {
		border: 1px solid var(--theme);
		border-radius:10px;
		padding: 0.3em 1em;
		margin: 0 0.25em;
		flex-grow: 1;	
	}
	
	input[disabled] {
		color: grey;
		font-style: italic;	
	}
	
	input:focus, textarea:focus {
		outline: none;
		border-color: #e0a8e4;
	}
	
	.pop-item:not(.capture) {
		padding-bottom: 10em;	
	}
}