:root {
	--text: #666;
	--light: #999;
	--dimmed: #ccc;
	--faded: #ddd;
	--emphasis: #333;
	--highlight: #88c33c;
	--inverse: #fff;
	--tablebg: #efefef;
}

.is-admin {
	--highlight: #e43722;
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	font-size: 14px;
	font-family: sans-serif;
	line-height: 1.5;
}

body * {
	color: var(--text);
}

h1, h2, h3 {
	font-size: inherit;
	color: var(--emphasis);
}

a {
	color: var(--highlight);
	border-bottom: 1px transparent solid;
	text-decoration: none;
}

a:hover {
	border-bottom-color: var(--highlight);
}

time {
	font-weight: normal;
}

abbr {
	color: inherit;
}

input[type="text"],
input[type="email"],
input[type="date"],
input[type="number"],
input[type="password"],
textarea {
	border: 1px var(--dimmed) solid;
	padding: 5px;
	border-radius: 3px;
	background-color: transparent;
	color: var(--emphasis);
	font-size: 20px;
	font-family: inherit;
}

input[type="text"]:not([disabled]):active,
input[type="text"]:not([disabled]):focus,
input[type="email"]:not([disabled]):active,
input[type="email"]:not([disabled]):focus,
input[type="date"]:not([disabled]):active,
input[type="date"]:not([disabled]):focus,
input[type="number"]:not([disabled]):active,
input[type="number"]:not([disabled]):focus,
input[type="password"]:not([disabled]):active,
input[type="password"]:not([disabled]):focus,
textarea:not([disabled]):active,
textarea:not([disabled]):focus {
	background-color: rgba(0, 0, 0, 0.1);
	border-color: #aaa;
}

input[disabled],
textarea[disabled] {
	color: var(--light);
	cursor: not-allowed;
}

.container {
	max-width: 960px;
	margin-left: auto;
	margin-right: auto;
	padding: 10px 20px;
}

.newline {
	margin-top: 1em;
}

address {
	font-style: normal;
}

@media screen and (min-width: 680px) {
	.container {
		padding: 25px 50px;
	}

	.split {
		display: flex;
	}

	.split .first {
		order: -1;
	}

	.horizontal {
		align-content: space-between;
		justify-content: space-between;
		align-items: center;
	}

	.split.top {
		align-items: flex-start;
	}
}

.content .headline {
	margin-bottom: 20px;
}

.separator-headline {
	font-size: 20px;
	font-weight: normal;
	padding-bottom: 10px;
	margin-bottom: 10px;
	padding-top: 10px;
	border-bottom: 1px var(--faded) solid;
}

/* .left {
	float: left;
}

.right {
	float: right;
} */

.header {
	--text: #fff;
	--highlight: #fff;
	--emphasis: #fff;
	--dimmed: #fff;
	--inverse: #88c33c;
	background: #88c33c;
}

.header .container {
	padding-top: 5px;
	padding-bottom: 5px;
}

.is-admin .header {
	--inverse: #e43722;
	background: #e43722;
}

.logo-wrapper {
	position: relative;
}

.logo-link {
	display: flex;
	align-items: flex-end;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
	background-color: #fff;
	padding: 10px;
	border-radius: 4px;
}

.logo-img {
	display: block;
	width: 80px;
}

.logo-title {
	color: #333;
	max-width: 140px;
	margin-left: 20px;
}

button::-moz-focus-inner {
    border: 0;
    padding: 0;
}

.btn {
	border: 1px var(--dimmed) solid;
	color: var(--text);
	background-color: #efefef;
	border-radius: 3px;
	font-family: inherit;
	padding: 3px 10px;
	cursor: pointer;
	display: inline-block;
	font-size: inherit;
	line-height: inherit;
	margin: 2px 0;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
	border-color: rgba(0, 0, 0, 0.1);
}

.btn:not([disabled]):hover {
	/* background-color: var(--emphasis); */
	/* color: var(--inverse); */
	/* border-color: var(--emphasis); */
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	transform: translateY(-1px);
	text-decoration: none;
	border-color: rgba(0, 0, 0, 0.1);
}

.btn:not([disabled]):active {
	/* background-color: var(--emphasis); */
	/* color: var(--inverse); */
	/* border-color: var(--emphasis); */
	box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
	transform: translateY(1px);
}

.btn[disabled] {
	opacity: 0.5;
	cursor: default;
}

.btn.highlighted {
	border: 1px transparent solid;
	background-color: var(--highlight);
	color: var(--inverse);
}

.btn.emphasized {
	border: 1px transparent solid;
	background-color: var(--emphasis);
	color: var(--inverse);
}

.btn-group {
	border: 1px var(--dimmed) solid;
	border-radius: 3px;
	/* overflow: hidden; */
	display: flex;
	align-content: space-between;
	justify-content: space-between;
	align-items: center;
}

.btn-group > :not(.btn) {
	padding: 3px 10px;
}

.btn-group .btn {
	/* border-top: none;
	border-bottom: none; */
	border-radius: 0;
	margin: 0;
	top: -1px;
	position: relative;
	margin-bottom: -2px;
}

.btn-group .btn:first-child {
	/* border-left: none; */
	margin-left: -1px;
	border-bottom-left-radius: 3px;
	border-top-left-radius: 3px;
}

.btn-group .btn:last-child {
	/* border-right: none; */
	text-align: right;
	
	margin-right: -1px;
	border-bottom-right-radius: 3px;
	border-top-right-radius: 3px;
}

.btn-group > *:not(:first-child):not(:last-child) {
	text-align: center;
}

.inline {
	display: inline-block;
}

.form-item + .form-item,
.form-item input + label {
	margin-top: 15px;
}

.form-item label {
	display: block;
}

.form-item-error {
	display: block;
	color: var(--highlight);
}

.form input[type="text"],
.form input[type="email"],
.form input[type="password"],
.form textarea {
	min-width: 50%;
}

.form textarea {
	min-height: 140px;
}

.form .form-number-input {
	/* display: flex;
	justify-content: space-between;
	margin-bottom: 10px; */
}

.form .form-number-input input[type="number"] {
	max-width: 90px;
	text-align: right;
}



.nav {
	border-bottom: 1px var(--faded) solid;
	padding-bottom: 10px;
	text-align: center;
}

.nav + * {
	margin-top: 30px;
}

.nav-items {
	margin-left: auto;
	margin-right: auto;
	max-width: 860px;
	width: calc(100% - 40px);
}

.nav-item {
	display: inline-block;
	/* padding: 10px 15px; */
	/* color: var(--dimmed); */
	font-size: 18px;
	border: none;
	color: var(--light);
}

@media screen and (min-width: 680px) {
	.nav-item {
		/* font-size: 25px; */
		font-size: 20px;
	}

	.nav {
		text-align: left;
	}
}

.nav-item:hover {
	color: var(--emphasis);
}

.nav-item + .nav-item {
	margin-left: 10px;
}

.nav-item.is-active {
	/* color: var(--highlight); */
	font-weight: bold;
	color: var(--emphasis);
	/* font-weight: bold; */
}

.main-nav {
	background-color: #efefef;
	overflow: hidden;
	padding-bottom: 0;
	padding-top: 10px;
	padding-left: 5px;
	padding-right: 5px;
	border: none;
	position: relative;
}

.main-nav::before {
	content: '';
	width: 100%;
	height: 1px;
	background-color: var(--faded);
	position: absolute;
	bottom: 0;
	left: 0;
	display: block;
}

.main-nav .nav-item {
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 5px;
	position: relative;
	z-index: 2;
}

.main-nav .nav-item:first-child {
	margin-left: -10px;
}

.main-nav .nav-item.is-active {
	background-color: #fff;
	box-shadow: 0 2px 9px rgba(0, 0, 0, 0.2);
	position: relative;
	border-left: 1px var(--faded) solid;
	border-top: 1px var(--faded) solid;
	border-right: 1px var(--faded) solid;
}

.sub-nav {
	margin-top: 0;
	padding-top: 10px;
	padding-bottom: 5px;
}

.sub-nav .nav-item {
	font-size: 130%;
}

.heading {
	font-size: 20px;
	font-weight: normal;
	color: var(--emphasis);
	margin-top: 20px;
	/* margin-bottom: 10px; */
}

@media screen and (min-width: 680px) {
	.heading {
		margin-top: 0;
		/* margin-bottom: 0; */
	}
}

.split > .heading {
	flex-grow: 2;
}

.table {
	width: 100%;
	margin-bottom: 40px;
	border-collapse: collapse;
}

.table th {
	font-weight: normal;
	color: var(--emphasis);
}

.table th:empty {
	pointer-events: none;
}

.table[sortable] th[role="columnheader"] {
	cursor: pointer;
}

.table[sortable] th[role="columnheader"]:hover {
	background-color: #efefef;
}

.table[sortable] th[role="columnheader"]::after {
	content: '';
	width: 0.5em;
	text-align: center;
	display: inline-block;
	margin-left: 0.5em;
	font-weight: 120%;
}

.table[sortable] th[aria-sort="descending"]::after {
	content: '↓';
}

.table[sortable] th[aria-sort="ascending"]::after {
	content: '↑';
}

.table td,
.table th {
	padding: 5px;
	border-bottom: 1px var(--faded) solid;
	vertical-align: top;
	padding-top: 10px;
}


.table tbody tr:nth-child(odd) {
	background: var(--tablebg);
}

.table td .btn,
.table th .btn {
	margin-bottom: 0;
	margin-top: -5px;
}

.table td:last-child {
	/* min-width: 250px; */
}

.table .center {
	text-align: center;
}

.table .right {
	text-align: right;
}

.table .left {
	text-align: left;
}

.table .btn {
	margin: 8px 0;
}

@media screen and (max-width: 680px) {
	.table {
		display: block;
		width: 100%;
	}

	.table tbody {
		display: block;
	}
	
	.table tr {
		display: block;
	}

	.table th {
		display: none;
	}
	
	.table td {
		display: block;
		color: var(--emphasis);
		text-align: left !important;
		padding: 25px;
	}
	.table td:not(.is-empty)::before {
		content: attr(data-heading);
		display: block;
		text-align: left;
		color: var(--text);
	}

	.table td.is-empty {
		display: none;
	}
}

.form .split .form-items {
	width: calc(50% - 40px);
}

.form-split {
	align-items: flex-start;
}

	.form-split-item {
		width: 50%;
	}
/* 
.order-form-item-content {
	display: flex;
	justify-content: space-between;
}

.order-form-item-content table {
	max-width: calc(100% - 240px);
} */

.is-in-past {
	opacity: 0.5;
}

@media screen and (min-width: 680px) {
	.week-nav p:first-child {
		margin-left: calc(33% + 72px);
	}
}

.thumbnail-link {
	display: inline-block;
	max-width: 200px;
}

.thumbnail-link img {
	display: block;
	max-width: 100%;
}

body .tippy-content {
	color: #fff;
}

.legend {
	margin-top: 2em;
}

.legend-items {
	margin-top: 1em;
}

.legend-items .form-item {
	width: 100%;
	margin-top: 0;
}

.legend .btn {
	margin-top: 2em;
}

.legend-items .form-item + .form-item {
	margin-top: 2em;
}

.legend-item {
	display: block;
	padding: 0.5em 0;
}

.legend-item:nth-child(even) {
	background-color: var(--tablebg);
}

.legend-item + .legend-item {
	border-top: 1px var(--faded) solid;
}

.legend-item:last-child {
	border-bottom: 1px var(--faded) solid;
}

.legend-title {
	display: inline-block;
	width: 2.5em;
	text-align: right;
	margin-right: 0.5em;
}

.legend-text {
	display: inline-block;
	max-width: calc(100% - 3em);
}

@media screen and (min-width: 680px) {
	.legend-items {
		display: flex;
	}

	.legend-items .form-item + .form-item {
		margin-top: 0;
		margin-left: 1em;
	}
}

.order-matrix input {
	max-width: 120px;
}

.checkbox-composer {
	display: flex;
}

.checkbox-composer .col {
	width: 25%;
}

.checkbox-composer .col + .col {
	margin-left: 10px;
}

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

.checkboxlist .checkboxlist-input-wrapper {
	background-color: var(--dimmed);
	padding: 5px;
}

.checkboxlist .checkboxlist-search-wrapper {
	display: flex;
}

.checkboxlist-input-label {
	display: flex;
	align-items: center;
}

.checkboxlist-input-wrapper input {
	/* margin-left: 10px; */
	display: block;
	width: 100%;
	max-width: calc(100% - 60px);
	border: 1px var(--dimmed) solid;
	border-radius: 2px;
	padding: 4px 8px;
	font-size: inherit;
	font-family: inherit;
}

.checkboxlist-input-wrapper input:focus {
	border: 1px var(--text) solid;
}

.checkboxlist-items {
	max-height: 420px;
	max-height: calc(100vh - 200px);
	overflow-y: auto;
	order: 2;
}

.checkboxlist-item {
	padding: 15px;
}

.checkboxlist-item.is-hidden {
	display: none;
}

.checkboxlist-item.is-inactive {
	opacity: 0.5;
	pointer-events: none;
	cursor: default !important;
}

.checkboxlist-item + .checkboxlist-item {
	border-top: 1px var(--light) solid;
}

.checkboxlist-item:nth-child(odd) {
	background: var(--tablebg);
}

.dish .tag {
	display: inline-block;
	margin-left: 2em;
}

.checkboxlist .tag-values-wrapper {
	/* display: flex; */
	margin-top: 10px;
}

.checkboxlist .tag-values {
	/* margin-left: 10px; */
	display: inline;
}

.checkboxlist .filter-label {
	display: inline-block;
	min-width: 58px;
	padding-top: 5px;
}

.checkboxlist .tag-values .btn {
	padding: 2px 4px;
}

.checkboxlist .tag-values .btn + .btn {
	margin-left: 5px;
}

.custom-summary-form {
	margin-bottom: 60px;
}

.custom-summary-form .form-items {
	display: flex;
	margin-bottom: 30px;
}

.custom-summary-form .form-item {
	width: 33.33%;
	margin-top: 0;
}

	.custom-summary-form .form-item h3 {
		margin-bottom: 10px;
	}

	.custom-summary-form .dropdown-container + .dropdown-container {
		margin-top: 15px;
	}

.custom-timeframe {
	display: none;
}

.custom-timeframe.is-visible {
	display: block;
}

.per-menu-table td {
	position: relative;
}

.per-menu-table td h3 {
	min-height: 3em;
	margin-bottom: 1em;
}

.per-menu-table .menu-display {
	/* margin-bottom: 10em; */
}

.per-menu-table .menu-wrapper {
	height: 100%;
	min-height: 380px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 0 10px;
}

.per-menu-table .menu-order {
	margin-top: 2em;

	/* position: absolute;
	left: 0;
	width: 100%;
	bottom: 10px;
	left: 0; */
}

.per-menu-table .menu-order textarea {
	/* height: 2em; */
	min-height: 3em;
	height: 3em;
	width: calc(100% - 15px);
	font-size: 12px;
}

.per-menu-table .menu-order p:last-child {
	margin-top: 1em;
}

.toggle-btn .is-hidden {
	display: none;
}

.toggleable {
	display: none;
}

.toggleable.is-visible {
	display: block;
}

.drag-drop-split {
	align-items: flex-start;
}
.drag-drop-split .table {
	max-width: calc(100% - 190px);
}

.drag-drop-split > *:last-child {
	width: 190px;
}

.dropzone,
.disabled-dropzone {
	/* background-color: red; */
	min-height: 100px;
	position: relative;
	border: 1px rgba(0, 0, 0, 0.1) solid;
	border-radius: 4px;
}

.meal-container .dropzone,
.meal-container .disabled-dropzone {
	height: 100px;
	width: 100px;
}

.dropzone.has-item {
	border-color: transparent;
}

.is-draggable {
	position: relative;
}

.dropzone .meal.gu-transit {
	background-color: #ddd;
	color: transparent;
	opacity: 1;
	border: 1px #ccc solid;
	box-shadow: 0 0 4px inset rgba(0, 0, 0, 0.4);
}

.dropzone .gu-transit .close-btn {
	display: none;
}

.dropzone.is-warning .gu-transit {
	background-color: gold;
}

.dropzone.is-warning .gu-transit::before {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	display: flex;
	align-items: center;
	content: 'WURDE SCHON BESTELLT';
	color: red;
	background-color: gold;
	font-weight: bold;
	text-align: center;
}

.dropzone .meal.gu-transit * {
	display: none;
}

.gu-mirror .close-btn {
	display: none;
}

.meal.gu-mirror,
.dish.gu-mirror {
	padding: 5px;
	overflow: hidden;
	border-radius: 3px;
}

.meal.gu-mirror {
	max-width: 100px;
	max-height: 100px;
}

.dropzone .close-btn {
	position: absolute;
	right: -15px;
	top: 10px;
	border-radius: 20px;
	display: none;
	/* display: flex; */
	padding: 8px;
	background-color: red;
	color: #fff;
	font-size: 20px;
	line-height: 0;
	width: 20px;
	height: 20px;
	justify-content: center;
	align-items: center;
	transform: translateX(-50%) translateY(-50%);
	cursor: pointer;
	z-index: 20;
}

.dropzone .close-btn:hover {
	transform: translateX(-50%) translateY(-50%);
}

.dropzone.has-item:hover .close-btn {
	display: flex;
}

.dropzone .is-draggable,
.disabled-dropzone .disabled-draggable {
	width: 100%;
	height: 100%;
	overflow: hidden;
	cursor: move;
	border-radius: 3px;
	border-color: 1px transparent solid;
	box-shadow: 0 0 3px transparent;
}

.disabled-dropzone .disabled-draggable {
	cursor: not-allowed;
}

.dropzone:hover .is-draggable {
	box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
	border-color: #ccc;
	background-color: #fff;
}

.dropzone .meal,
.dropzone .dish,
.disabled-dropzone .meal,
.disabled-dropzone .dish {
	padding: 5px;
	/* background-color:  */
}

.meal .meal-course-name {
	overflow: hidden;
	max-height: 1.5em;
	transition: all 0.1s ease;
}

.gu-mirror .meal-course-name,
.dropzone .meal-course-name,
.disabled-dropzone .meal-course-name {
	max-height: 0;
}

.gu-mirror .meal-course-dish,
.dropzone .meal-course-dish,
.disabled-dropzone .meal-course-dish {
	font-size: 80%;
}

.drag-fixed {
	position: fixed;
	top: 350px;
	height: calc(100vh - 360px);
	right: calc(calc(100vw - 920px) / 2);
}

.drag-fixed .checkboxlist-items {
	max-height: calc(100vh - 410px);
}

@media screen and (min-width: 1200px) {
	.drag-drop-split > :last-child {
		width: 330px;
	}
	
	.drag-fixed {
		top: 339px;
		height: calc(100vh - 340px);
		right: calc(calc(100vw - 1190px) / 2);
	}

	.drag-fixed .checkboxlist-items {
		max-height: calc(100vh - 469px);
	}
}

.meal-form .form-split-item {
	max-width: calc(50% - 80px);
}

.meal-form .checkboxlist-item.is-draggable {
	cursor: move;
}

.meal-form .dropzone {
	border-color: #ccc;
}

.meal-form .dropzone:hover .is-draggable {
	box-shadow: none;
}

.meal-form .dish {
	position: relative;
	overflow: visible;
	border-radius: 0;
}

.meal-form .dish:first-child {
	border-top-right-radius: 3px;
	border-top-left-radius: 3px;
}

.meal-form .dish:last-child {
	border-bottom: 1px #ccc solid;
}

.meal-form .dish:hover {
	/* box-shadow: none; */
	background-color: #efefef;
}

.meal-form .dish + .dish {
	border-top: 1px #ccc solid;
}

.meal-form .dish .close-btn {
	position: absolute;
	top: 50%;
	right: 5px;
	transform: translateY(-12px) !important;
}



.meal-form .dish:hover .close-btn {
	display: flex;
}

* + .pw-rules {
	margin-top: 1em;
}

.pw-rule {
	display: block;
}

.pw-rule.is-ok {
	margin-left: -2em;
	color: #88c33c;
}

.pw-rule.is-ok::before {
	content: '✓';
	color: #88c33c;
	display: inline-block;
	width: 2em;
	text-align: center;
}

.kitchenlist-table p + p {
	margin-top: 10px;
}

.meal-filter {
	background-color: var(--dimmed);
	padding: 5px;
	display: flex;
	margin-bottom: 20px;
}

.meal-filter + table tr.is-hidden {
	display: none;
}

.meal-filter label {
	display: flex;
	align-items: center;
}

.meal-filter input {
	display: block;
	width: 100%;
	max-width: 200px;
	border: 1px var(--dimmed) solid;
	border-radius: 2px;
	padding: 4px 8px;
	font-size: inherit;
	font-family: inherit;
	margin-left: 10px;
}

.meal-filter .btn {
	margin-left: 10px;
}