:root {
	--body_background_color: #F5F5F5;
	--success: #4caf50;
	--warning: #ffeb3b;
	--error: #f44336;
}

html, body {
	min-height: 100%;
	height: 100%;
}

body {
	display: flex;
	background-color: var(--body_background_color);
	overflow: hidden;
}

/* Main */

main {
	position: relative;
	flex-grow: 1;
	flex-shrink: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	/*-webkit-overflow-scrolling: touch;*/
}

.material-icons {
	vertical-align: middle;
}

/* Rules for sizing the icon. */
.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }

/* Rules for using icons as black on a light background. */
.material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
.material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }

/* Rules for using icons as white on a dark background. */
.material-icons.md-light { color: rgba(255, 255, 255, 1); }
.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }

.cancel {
	color: var(--error);
}

.cancel:hover {
	color: var(--error);
}

.readonly * {
	pointer-events: none;
}

.readonly .prevent-readonly {
	pointer-events: all;
}

/* Alerts */

#alerts {
	position: fixed;
	right: 0.8rem;
	bottom: 0;
	max-width: calc(100% - 1.6rem);
	z-index: 300;
}

#alerts .alert {
	position: relative;
	display: flex;
	padding: 1.2rem;
	transition: all .2s ease-in-out;
	margin-bottom: 0.8rem;
	background-color: rgba(0,0,0,0.8);
	color: #fff;
	opacity: 0;
	top: 0.8rem;
}

#alerts .alert.show {
	opacity: 1;
	top: 0;
}

#alerts .alert .alert-icon {
	margin-right: 0.8rem;
}

#alerts .alert.alert-success .alert-icon {
	color: var(--success);
}

#alerts .alert.alert-error .alert-icon {
	color: var(--error);
}

#alerts .alert.alert-warning .alert-icon {
	color: var(--warning);
}

/* Cards */

.cards {
	position: relative;
	width: calc(100% + 2.4rem);
	left: -1.2rem;
	--cols: 3;
	--cols_xs: 2;
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
}

.cards[data-cols="2"] { --cols: 2; }
.cards[data-cols="1"] { --cols: 1; }
.cards[data-cols_xs="1"] { --cols_xs: 1; }

.cards .card {
	width: calc(100% - 2.4rem);
	margin-left: 1.2rem;
	margin-right: 1.2rem;
	margin-top: 3.2rem;
}

.card {
	background: #fff;
	padding: 1.6rem;
	box-shadow: 0 .1rem .1rem rgba(0,0,0,0.1);
	border-radius: .4rem;
}

.card .title {
	margin-top: 0;
}

.card .title a {
	text-decoration: none;
}


.card .title .icon {
	margin-right: 0.4rem;
}

.card > *:last-child {
	margin-bottom: 0;
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
	.cards .card {
		width: calc((100% - 2.4rem) / var(--cols_xs) - (2.4rem / var(--cols_xs) * (var(--cols_xs) - 1)));
	}
}

@media screen and (min-width: 1024px) {
	.cards .card {
		width: calc((100% - 2.4rem) / var(--cols) - (2.4rem / var(--cols) * (var(--cols) - 1)));
	}
}

/* Modal */

.modal {
	content: '';
	position: fixed;
	left: 0;
	top: 0;
	width: 100vw;
	height: 100vh;

	pointer-events: none;
	opacity: 0;

	will-change: transform, opacity;
	background: rgba(0,0,0,0.5);
	z-index: 600;

	-webkit-transform: scale(1.15);
	transform: scale(1.15);

	-webkit-transition:
		-webkit-transform 0.1s cubic-bezier(0.465, 0.183, 0.153, 0.946),
		opacity 0.1s cubic-bezier(0.465, 0.183, 0.153, 0.946);

	transition:
		transform 0.1s cubic-bezier(0.465, 0.183, 0.153, 0.946),
		opacity 0.1s cubic-bezier(0.465, 0.183, 0.153, 0.946);

}

.modal.visible {
	pointer-events: auto;
	opacity: 1;

	-webkit-transform: scale(1);
	transform: scale(1);

	-webkit-transition:
		-webkit-transform 0.1s cubic-bezier(0.465, 0.183, 0.153, 0.946),
		opacity 0.1s cubic-bezier(0.465, 0.183, 0.153, 0.946);

	transition:
		transform 0.1s cubic-bezier(0.465, 0.183, 0.153, 0.946),
		opacity 0.1s cubic-bezier(0.465, 0.183, 0.153, 0.946);

}

.modal > .message {
	position: fixed;
	z-index: 500;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 90%;
	max-width: 51.2rem;
}

/* Topbar */

.bar {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	left: 0;
	box-sizing: border-box;
	background: var(--primary_color);
	color: #fff;
	height: 5.6rem;
	padding: 1.2rem 0;
	z-index: 200;
	box-shadow: 0 .2rem .2rem 0 rgba(0, 0, 0, 0.14), 0 .3rem .1rem -.2rem rgba(0, 0, 0, 0.2),
		0 .1rem .5rem 0 rgba(0, 0, 0, 0.12);
}

.bar a {
	color: var(--inverse_text_color);
}

.bar .flex-bar {
	display: flex;
	justify-content: space-between;
}

.title-wrapper {
	display: flex;
	align-items: center;
}
.title-wrapper .title-icon {
	height: 3.2rem;
	width: auto;
	margin-right: 1.6rem;
}

.title-wrapper .title {
	font-size: 2.0rem;
}

.title-wrapper *:not(.title-icon) + .title {
	margin-left: 2.4rem;
}

.bar .bar-right {
	display: flex;
	align-items: center;
}

.bar .login-button {
	margin-right: 1.6rem;
}

/* Menu */

.menu-wrapper {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.menu-wrapper .menu-handler {
	cursor: pointer;
}

.link-icon {
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 50%;
	font-size: 2.4rem;
	width: 3.2rem;
	height: 3.2rem;
	margin: 0;
	cursor: pointer;
	outline: none;
}

.link-icon:hover {
	background-color: rgba(158, 158, 158, 0.2);
}

.link-icon:focus:not(:active) {
	background-color: rgba(0, 0, 0, 0.12);
}

.link-icon:active {
	background-color: rgba(158, 158, 158, 0.4);
}

.menu-wrapper .menu-list.visible {
	display: block;
}

.menu-list.right {
	left: inherit;
	right: 50%;
}

.menu-list.bottom {
	top: inherit;
	bottom: 50%;
}

.menu-list {
	list-style: none;
	display: none;
	position: absolute;
	top: 50%;
	left: 50%;
	background: #fff;
	box-shadow: 0 .2rem .2rem 0 rgba(0, 0, 0, 0.14), 0 .3rem .1rem -.2rem rgba(0, 0, 0, 0.2),
		0 .1rem .5rem 0 rgba(0, 0, 0, 0.12);
	padding: 0;
	margin: 0;
	/*padding: .8rem 0;*/
	z-index: 200;
}

.menu-list li {
	margin-bottom: 0;
}

.menu-list li>* {
	display: block;
	border: none;
	color: var(--primary_text_color);
	background-color: transparent;
	text-align: left;
	margin: 0;
	padding: 0 1.6rem;
	outline-color: #bdbdbd;
	position: relative;
	overflow: hidden;
	font-size: 1.4rem;
	font-weight: 400;
	letter-spacing: 0;
	text-decoration: none;
	cursor: pointer;
	height: 4.8rem;
	line-height: 4.8rem;
	white-space: nowrap;
}

.menu-list li>*:hover,
.menu-list li>*:focus {
	background-color: #eee;
}

.menu-list li>*:active {
	background-color: #d9d9d9;
}

.menu-list li[disabled]>* {
	color: #bdbdbd;
	background-color: transparent;
	cursor: auto;
	pointer-events: none;
}

.menu-list hr {
	height: 0;
	border: none;
	margin: 0;
	border-bottom: .1rem solid rgba(0, 0, 0, 0.12);
}

.menu-list .delete {
	color: var(--error);
}

.table-wrapper,
table.sortable thead *,
table.filterable thead * {
	pointer-events: all;
}

.no-margin {
	margin: 0;
}

.no-margin-bottom {
	margin-bottom: 0;
}

/* Personal */



/* Search */

#search {
	background: #fff;
}

#search .container {
	display: flex;
	align-items: center;
}

#search .icon {
	display: flex;
	padding:1.2rem;
	color: rgba(0, 0, 0, 0.38);
	text-decoration: none;
}

#search input {
	flex-grow: 1;
	border: none;
}



/* Information */

#information {
	position: sticky;
	-webkit-position: sticky;
	left: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	padding: 3.2rem 0;
	background: #ccc;
}

#information * {
	margin: 0;
}

.not-found {
	text-align: center;
}

/* Form */

form .row-input {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0.8rem 0;
	margin: 0;
	/*width: inherit;*/
}

form .row-input + .row-input {
	border-top: 1px solid rgba(0,0,0,0.08);
}

form .row-input.start {
	justify-content: flex-start;
}

form .row-input label {
	color: var(--secondary_text_color);
	margin-right: 0.8rem;
	font-weight: normal;
	margin-bottom: 0;
}

form .row-input:not(.start) label {
    width: 20.0rem;
}

form .row-input input[type='email'],
form .row-input input[type='number'],
form .row-input input[type='password'],
form .row-input input[type='search'],
form .row-input input[type='tel'],
form .row-input input[type='text'],
form .row-input input[type='url'],
form .row-input input[type='file'],
form .row-input textarea,
form .row-input select {
	flex-grow: 1;
	border-width: 0;
}

form .row-input input[type='checkbox'] {
	height: 3.8rem;
}

form .row-input input,
form .row-input textarea,
form .row-input select {
	margin-bottom: 0;
}

form .row-input input:not([readonly]),
form .row-input textarea:not([readonly]),
form .row-input select:not([readonly]) {
	background-color: #fff !important;
	border-width: 0.1rem !important;
}

form .row-input input + *,
form .row-input textarea + *,
form .row-input select + * {
	margin-left: 1.6rem;
}


form .row-input button,
form .row-input .button {
	padding-left: 1.2rem;
	padding-right: 1.2rem;
    margin-bottom: 0;
}

form .row-input .row-input-info {
	display: flex;
	align-items: center;
	min-height: 3.8rem;
}

form .buttons {
	margin-top: 2.4rem;
}

form .buttons .flex {
	display: flex;
}

form .buttons button,
form .buttons .button {
	width: 100%;
}

form hr {
	margin: 1.6rem 0;
	border-color: rgba(0,0,0,0.12);
}

form .buttons .flex button + button,
form .buttons .flex button + .button,
form .buttons .flex .button + .button,
form .buttons .flex .button + button {
	margin-left: 1.6rem;
}

form.data {
	margin-bottom: 0;
}

form .camera {
	display: flex;
	width: 64px;
	height: 38px;
	justify-content: center;
	align-items: center;
	color: rgba(0, 0, 0, 0.38);
	text-decoration: none;
	margin-left: 0 !important;
}

form .camera + * {
	margin-left: 0;
}

button.red,
.button.red {
	background: #f44336;
	border-color: #f44336;
	color: #000;
}

button.red:hover,
button.red:focus,
.button.red:hover,
.button.red:focus {
	background-color: #f22718;
	border-color: #f22718;
}

button.yellow,
.button.yellow {
	background: #ffeb3b;
	border-color: #ffeb3b;
	color: #000;
}

button.yellow:hover,
button.yellow:focus,
.button.yellow:hover,
.button.yellow:focus {
	background-color: #ffe608;
	border-color: #ffe608;
}

button.footer-button,
.button.footer-button {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    border-radius: 0;
}

//* Table */

.table-wrapper {	
	overflow-x: auto;
}

table {
	width: 100%;
	border-collapse: collapse;
}

table thead tr {
	background: var(--primary_color_darker);
}

table th {
	position: relative;
	color: var(--inverse_text_color);
	font-weight: normal;
	padding: 1.2rem 1.6rem;
	text-align: left;
}

td:first-child, th:first-child,
td:last-child, th:last-child {
	padding: 1.2rem 1.6rem;
}

table th + th {
	border-left: 1px solid var(--primary_color);
}

table tbody tr {
	border-bottom: 0.1rem solid #ccc;
}

table tbody tr:nth-child(odd) {
	background: #fff;
}

table td {
	padding: 1.2rem 1.6rem;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	max-width: 20.0rem;
}

table td + td {
	border-left: 1px solid #ccc;
}

table td.icon {
	width: 4.8rem;
	padding: 0;
	margin: 0;
	text-align: center;
	overflow: inherit;
}

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

table .bold {
	font-weight: 500;
}

table .highlighted {
	background: yellow;
}

table .border {
	border: 0.1rem solid #ccc;
}

table .full-cell {
	padding: 0;
}

table .full-cell > * {
	width: 100%;
	border: none;
	resize: vertical;
	vertical-align: middle;
	min-height: 0;
	height: inherit;
	margin: 0;
}

table.no-table-sticky thead th {
	position: static;
	top: inherit;
}

table tfoot tr,
.table-footer {
	background: #fff;
}

table tfoot td {
	position: -webkit-sticky;
	position: sticky;
	bottom: 0;
	background: #fff;
	box-shadow: 0 0 0 1px #ccc;
	z-index: 50;
}

table tfoot .pagination.current {
	background-color: var(--primary_color);
	color: var(--inverse_text_color);
	padding:0 0.4rem;
	border-radius: 50%;
	text-decoration: none;
	pointer-events: none;
}

table tfoot #rows{
	width: inherit;
	margin: 0;
	margin-left: 0.8rem;
}

.sortable .arrow {
	position: absolute;
	top: 0;
	right: 0.8rem;
	font-size: 2.4rem;
}

.sortable .filter {
	background-color: var(--primary_color);
	border-color: var(--primary_color);
	color: var(--inverse_text_color);
	font-size: 1.4rem;
	height: 2.4rem;
	padding-top: 0;
	padding-bottom: 0;
	width: 100%;
	margin: 0;
}

.sortable .filter::placeholder {
	color: var(--inverse_text_color);
}

.sortable .filter option {
	color: var(--primary_text_color);
}


/* Menu */

.readonly #menu * {
	pointer-events: all;
}

#menu .menu-item.dashboard a {
	height: 5.6rem;
	padding-top: 1.2rem;
	padding-bottom: 1.2rem;
	/*background-color: var(--primary_color_darker);
	color: var(--inverse_text_color);*/
}

#menu-checkbox {
	display: none;
}

#menu-checkbox:checked ~ #menu {
	display: flex;
}

#menu {
	height: 100vh;
	display: none;
	width: 24.0rem;
	background: var(--primary_color);
	flex-shrink: 0;
	overflow-y: auto;
	flex-direction: column;
	box-shadow: 0.2rem 0 0.2rem 0 rgba(0, 0, 0, 0.14), 0.3rem 0 0.1rem -0.2rem rgba(0, 0, 0, 0.2), 0.1rem 0 0.5rem 0 rgba(0, 0, 0, 0.12);
	position: relative;
	z-index: 250;
}

#menu, #menu ul, #menu ul ul, #menu ul li, #menu ul li a {
	font-size: 1.6rem;
}

#menu ul {
	margin: 0;
	padding-left: 0;
	list-style-type: none;
	background: var(--primary_color);
	z-index: 200;
	flex-grow: 1;
}

#menu-overlay {
	position: fixed;
	display: none;
	top: 0;
	left: 24.0rem;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.5);
	z-index: 100;
}

#menu-checkbox:checked ~ main #menu-overlay {
	display: block;
}

#menu .menu-item {
	position: relative;
	flex-direction: column;
	background: var(--primary_color);
	margin: 0;
}

#menu .menu-item-checkbox {
	display: none;
}

#menu .menu-item a,
#menu .menu-item label {
	align-items: center;
	color: rgba(255, 255, 255, 0.8);
	font-weight: normal;
	display: flex;
	padding: 1.6rem;
	height: 4.8rem;
	margin: 0;
	text-decoration: none;
}

#menu .menu-item .icon {
	margin-right: 1.6rem;
}

#menu .menu-item>ul {
	display: none;
	background: var(--primary_color_darker);
}

#menu .menu-item.active>ul,
#menu .menu-item>.menu-item-checkbox:checked ~ ul {
	display: block;
	padding-left: 1.6rem;
}

#menu .menu-item:hover>a,
#menu .menu-item.active>a,
#menu .menu-item>.menu-item-checkbox:checked ~ a,
#menu .menu-item:hover>label,
#menu .menu-item.active>label,
#menu .menu-item>.menu-item-checkbox:checked ~ label {
	background: var(--primary_color_darker);
	color: var(--inverse_text_color);
}

@media screen and (min-width: 768px) {
	/*#menu-label {
		display: none;
	}*/

	#menu.start-open {
		display: flex;
	}

	#menu-checkbox:checked ~ #menu {
		display: none;
	}

	#menu-checkbox:checked ~ #menu:not(.start-open) {
		display: flex;
	}

	/*#menu {
		display: flex;
	}*/

	/*#menu .menu-item:not(.active):hover>.menu-item-checkbox:not(:checked) ~ ul {
		display: block;
		position: absolute;
		top: 0;
		left: 100%;
		width: 100%;
		z-index: 500;
	}*/

	#menu-overlay {
		display: none;
	}

	main {
		flex-shrink: 1;
		width: calc(100% - 24.0rem);
	}

	#menu-checkbox:checked ~ main #menu-overlay {
		display: none;
	}

}



/* QR Code */

.video-wrapper {
	position: absolute;
	z-index: 99999;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: #222;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.video-wrapper.height {
	flex-direction: column;
}

.video-wrapper video {
	flex-grow: 1;
}

.video-wrapper #close {
	position:absolute;
	top: 0;
	right: 0;
	display: flex;
	padding:1.2rem;
	background: rgba(0, 0, 0, 0.38);
	color: #fff;
	text-decoration: none;
}

/* Logs */

#logs tr.true {
	border-color: #c8e6c9;
	background: #e8f5e9;
}

#logs tr.false {
	border-color: #ffcdd2;
	background: #ffebee;
}

#logs .logged {
	display: inline-block;
	border-radius: 2px;
	text-align: center;
	color: #fff;
	text-transform: uppercase;
	font-size: 12px;
	line-height: 16px;
	margin: 4px auto 0 auto;
	padding: 0 8px;
}

#logs .true .logged{
	background: var(--success);
}

#logs .false .logged {
	background: var(--error);
}

/* Map */

.pz1-marker {
	position: absolute;
}

.pz1-marker.new-marker{
	color: var(--error);
}

.pz1-marker.current-marker{
	color: blue;
}


.pz1-marker .clickable {
	display: flex;
	min-width: 2.4rem;
	height: 2.4rem;
	justify-content: center;
	align-items: center;
	border: .3rem solid;
	border-radius: .3rem;
	transform: translate(-50%, -50%);
	background: #fff;
	padding: 0 .4rem;
	font-size: inherit;
	width: inherit;
}

.pz1-marker .clickable .number {
	font-weight: bold;
	/*border-radius: 50%;*/
}

.pz1-marker .caption {
	position: absolute;
	display: inline-block;
	background: var(--inverse_text_color);
	color: var(--primary_color);
	font-weight: bold;
	text-align: center;
	transform: translate(-50%, 0%);
	z-index: 100;
	top: 100%;
	left: 50%;
	border: 1px solid;
	padding:0 2px;
}

.pz1-marker .icons {
	position: absolute;
	transform: translate(-50%, -50%);
	display: flex;
	height: 0;
	opacity: 0;
	z-index: -1;
	pointer-events: none;
	top: -5.0rem;
	box-shadow: 0 0 2px rgba(0,0,0,0.5);
}

.pz1-marker .icons a {
	display: flex;
	background: var(--inverse_text_color);
	color: var(--primary_color);
	text-decoration: none;
	padding: 1.2rem;
	border: 1px solid;
}

.pz1-marker .icons a:first-of-type {
	border-right-width: 0;
}

/*.pz1-marker.clicked {
	z-index:200;
}
.pz1-marker.clicked .icons {
	height: auto;
	opacity: 1;
	z-index: 300;
	pointer-events: auto;
	transition: opacity 0.25s ease-in-out;
}

.pz1-marker.clicked .icons a:hover {
	background: #f5f5f5;
	color: #000;
	transition: background,color 0.2s ease-in-out;
}

.pz1-marker .clickable i {
	display: block;
	font-size: 4.0rem;
	text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
}

.pz1-marker.current .clickable i {
	color: blue;
}

.pz1-marker.clicked .clickable i {
	color: #f44336;
}*/

.credits {
	/*text-align: center;*/
	margin: 3.2rem 0 1.6rem 0;
}

.credits img {
	width: 24px;
	height: auto;
	vertical-align: middle;
	margin: 0 0.4rem;
}

.about {
	background: var(--primary_color_darker);
	color: rgba(255,255,255,0.8);
	padding: 0.8rem;
	text-align: center;
	margin-bottom: 0;
}

.about a {
	color: var(--inverse_text_color);
}

#about {
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	min-height: calc(100vh - 5.6rem);
	flex-direction: column;
	background: var(--primary_color_darker);
	color: #fff;
	margin: 0 auto;
	padding: 3.2rem 0;
}

#about a {
	color: #f7981d;
}

#about a:hover {
	color: #c2720c;
}

#menu-list .category-checkbox {
	display: none;
}

#menu-list .menu-category .category-title {
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	padding: 1.6rem;
	background-color: #fff;
	cursor: pointer;
	font-weight: normal;
	margin: 0;
	border-bottom: 1px solid #ddd;
}

#menu-list .menu-category .category-title .category-right {
	display: flex;
	align-items: center;
}

#menu-list .menu-category .category-title .category-right > * + * {
	margin-left: .8rem;
}

#menu-list.accordion .menu-category .menu-dishes {
	max-height: 0;
	position: absolute;
	margin-bottom: 0;
	opacity: 0;
	pointer-events: none;
}

#menu-list .menu-category .category-checkbox:checked ~ .menu-dishes {
	max-height: 500px;
	position: inherit;
	opacity: 1;
	pointer-events: auto;
	transition: opacity .2s .1s ease-in-out, max-height .5s ease-in-out;
	box-shadow: inset 0 0 2px rgba(0,0,0,0.2);
}

#menu-list .menu-dish {
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1px solid #ddd;
	padding: 1.6rem;
}

#menu-list .dish-right {
	display: flex;
	align-items: center;
}

#menu-list .dish-right > * + * {
	margin-left: .8rem;
}

.inline-label input {
	height: inherit;
	background: #fff;
	margin: 0;
	padding-right: 0;
	width: 8.0rem;
}

#menu-list .menu-dish .dish-remove {
	margin: 0;
}

.inline-label {
	display: flex;
	align-items: stretch;
}

.inline-label input {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}

.inline-label label {
	display: flex;
    align-items: center;
	font-weight: normal;
	margin: 0;
	padding: 0 .8rem;
	border:.1rem solid #ddd;
	border-left: none;
	background: #eee;
	border-radius: .3rem;
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}








.media-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
	grid-auto-rows: 1fr;
	grid-gap: 1.6rem;
}

.media-grid:before {
  content: '';
  width: 0;
  padding-bottom: 100%;
  grid-row: 1 / 1;
  grid-column: 1 / 1;
}

.media-grid > *:first-child {
  grid-row: 1 / 1;
  grid-column: 1 / 1;
}

.media-grid .media {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: .3rem;
	cursor: pointer;
	overflow: hidden;
}

.media-grid .media img {
	max-width: 100%;
	max-height: 100%;
	padding: .8rem;
	border: .2rem solid var(--secondary_text_color);
}

.media-grid .media * {
	user-select: none;
}

.media-grid .media .select-checkbox {
/*	position: absolute;
	top: .8rem;
	left: .8rem;
	z-index: 7;*/
	display: none;
}

.media-grid .media .media-overlay {
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.0);
	transition: background .1s ease-in-out;
	z-index: 5;
	cursor: pointer;
	border: .2rem solid var(--secondary_text_color);
	padding: 0;
	margin: 0;
}

.media-grid .media .media-overlay .checkbox {
	position: absolute;
	top: .4rem;
	left: .4rem;
	opacity: 0;
	transition: all .1s ease-in-out;
}

.media-grid .media .media-overlay .remove.checkbox {
	color: var(--error);
}

.media-grid .media .media-overlay .select.checkbox {
	color: var(--success);
}

/*.media-grid .media .media-overlay .remove {
	opacity: 0;
	color: var(--error);
	transition: all .1s ease-in-out;
}*/

.media-grid .media:focus .media-overlay,
.media-grid .media:hover .media-overlay {
	background: rgba(0,0,0,0.1);
	border-width: .4rem;
	border-color: #222;
}

.media-grid .media.media-preview:focus .media-overlay,
.media-grid .media.media-preview:hover .media-overlay {
	background: rgba(0,0,0,0.5);
	border-width: .4rem;
}

.media-grid .media .select-checkbox:checked ~ .media-overlay {
	background: rgba(0,0,0,0.5);
	border-width: .4rem;
}

.media-grid .media.media-preview:focus .media-overlay.remove,
.media-grid .media.media-preview:hover .media-overlay.remove,
.media-grid .media .select-checkbox:checked ~ .media-overlay.remove {
	border-color: var(--error);
}

.media-grid .media.media-preview:focus .media-overlay.select,
.media-grid .media.media-preview:hover .media-overlay.select,
.media-grid .media .select-checkbox:checked ~ .media-overlay.select {
	border-color: var(--success);
}

.media-grid .media .select-checkbox:checked ~ .media-overlay .checkbox {
	opacity: 1;
}

.media-grid #media-preview {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-shrink: 0;
	width: 12rem;
	height: 12rem;
	border-radius: .3rem;
	overflow: hidden;
}

.media-grid #media-preview img {
	max-width: 100%;
	max-height: 100%;
}

.media-grid #media-file {
	display: none;
}

.media-grid #media-choose {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-shrink: 0;
	border-radius: .3rem;
	padding: .8rem;
	overflow: hidden;
	border: .2rem dashed var(--secondary_text_color);
	cursor: pointer;
	margin: 0;
	background: rgba(0,0,0,0.1);
	transition: all .1s ease-in-out;
}

.media-grid #media-choose:hover {
	background: rgba(0,0,0,0.3);
	border-width: .4rem;
	border-color: #222;
}




.popup {
	display: none;
}

.popup.visible {
	display: block;
}

.popup .popup-inner {
	position: absolute;
	z-index: 200;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 64.0rem;
	max-width: 100%;
	max-height: 100%;
}

.popup .popup-inner .card {
	position: relative;
	margin-bottom: 0;
}

.popup .popup-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.5);
	z-index: 100;
}

.popup .popup-content {
	background: var(--body_background_color);
	padding: 1.6rem;
	border: 1px solid #ccc;
	border-radius: .3rem;
	margin-bottom: 1.6rem;
	max-height: 32.0rem;
	overflow: auto;
}

.popup .popup-content>ul {
	list-style: none;
}

.popup .media-grid {
	grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
}

.popup .media-grid .media {
	background: #fff;
}

.popup #popup-close {
	position: absolute;
	right: 1.6rem;
	top: 1.6rem;
}

.popup .course-radio {
	display: none;
}

.popup .course-label {
	cursor: pointer;
	display: inline-block;
	padding: 0 .4rem;
}

.popup .course-radio:checked + .course-label {
	color: var(--primary_color);
	border: .1rem solid;
}

.map-row {
	width: 100%;
	display: flex;
	flex-grow: 1;
	align-items: center;
}

.map-row > * + * {
	margin-left: .8rem;
}

.map-row #media-preview {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-shrink: 0;
	width: 12rem;
	height: 12rem;
	border-radius: .3rem;
	overflow: hidden;
	border: 1px solid #ddd;
	padding: .8rem;
}

.map-row #media-preview img {
	max-width: 100%;
	max-height: 100%;
}

#legend ul {
	list-style: none;
}

#legend li.empty i, .pz1-marker.empty			{ color: #4CAF50; }
#legend li.booked i, .pz1-marker.booked			{ color: #5c6bc0; }
#legend li.waiting i, .pz1-marker.waiting		{ color: #ffeb3b; }
#legend li.eating i, .pz1-marker.eating			{ color: #ef5350; }
#legend li.conclusion i, .pz1-marker.conclusion	{ color: #ab47bc; }

#total {
	display: flex;
	justify-content: space-between;
	background: var(--warning);
	width: 100%;
	padding: 1.6rem;
	position: sticky;
	bottom: 0;
	box-shadow: 0px -.4rem 0.2rem -.2rem rgba(0, 0, 0, 0.1);
}

#total .total {

}