section#name {
	height: 100vh;
}

section#name article {
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	height: 100%;
}

section#name article>* {
	margin-bottom: 20px;
}

section#name article p {
	max-width: 600px;
}

section#name .background {
	background-image: url(/resources/backgrounds/background3.jpg);
}



section#blueprint {
	min-height: initial;
	padding-top: 80px;
	overflow: visible;
}

section#blueprint,
section#reservation {
	display: block;
}

section#reservation article {
	flex-direction: row;
	padding-top: 80px;
}


/* Blueprint */

.blueprint {
	position: relative;
	width: 100%;
	height: 0;
	padding-top: calc(1 / calc(var(--aspect)) * 100%);
}

.blueprint svg {
	fill: currentColor;
}

.blueprint .ground {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	fill: rgb(32, 32, 32);
	stroke: var(--main-color);
	stroke-width: 4;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.blueprint .ground-part {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.blueprint .ground-part,
.blueprint .item {
	position: absolute;
	width: var(--w);
	height: var(--h);
	left: var(--x);
	top: var(--y);
}

.blueprint .item>*:first-child {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}

/*.blueprint .item>svg:first-child {
	fill: white;
	stroke: black;
	stroke-width: 5px;
}*/

.blueprint .item>div:first-child {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	border-radius: 5px;
	border: 1px solid rgb(255, 255, 255, 0.5);
	transition: .25s z-index 0s;
	-webkit-transition: .25s z-index 0s;
}

.blueprint .item {
	opacity: 0.6;
	cursor: pointer;
	transition: .25s;
	-webkit-transition: .25s;
}

.blueprint .item:hover {
	opacity: 1;
}

.blueprint .item.active {
	opacity: 0.9;
	/*--border-thickness: 2px;
	--border-length: 15px;
	--border-color: white;
	border-color: transparent !important;
	background-image: linear-gradient(90deg, var(--border-color) 50%, transparent 50%), linear-gradient(90deg, var(--border-color) 50%, transparent 50%), linear-gradient(0deg, var(--border-color) 50%, transparent 50%), linear-gradient(0deg, var(--border-color) 50%, transparent 50%);
	background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
	background-size: var(--border-length) var(--border-thickness), var(--border-length) var(--border-thickness), var(--border-thickness) var(--border-length), var(--border-thickness) var(--border-length);
	background-position: left top, right bottom, left bottom, right top;
	animation: border-dance 1s infinite linear;
	-webkit-animation: border-dance 1s infinite linear;*/
}

/*.blueprint .item.active>div:first-child {
	border: none;
}*/

.blueprint .item.selected {
	opacity: 1;
}

.blueprint .item.selected>div:first-child {
	box-shadow: 0 0 20px 4px white;
	z-index: 50;
}

/* Dance Floor */
.blueprint .ground-part.DANCE_FLOOR {
	--grid-size: 15px;
	--grid-thickness: 0.7px;
	--grid-color: rgb(100, 135, 0, 0.5);
	border: 2px solid #4c4c4c;
}

.blueprint .ground-part.DANCE_FLOOR svg {
	height: 35%;
}

/* Bar */
.blueprint .ground-part.BAR {
	--grid-size: 15px;
	--grid-thickness: 0.7px;
	--grid-color: rgb(180, 90, 0, 0.5);
	border: 2px solid #4c4c4c;
}

.blueprint .ground-part.BAR svg {
	width: 50%;
}

/* VIP */
.blueprint .item .VIP {
	background-color: rgb(255, 255, 100, 0.5);
}

.blueprint .item .VIP svg {
	height: 30%;
}

.blueprint .item .VIP span {
	font-weight: 600;
}

/* Darts */
.blueprint .item .DARTS {
	background-color: rgb(110, 255, 110, 0.5);
}

.blueprint .item .DARTS svg {
	width: 70%;
}

/* Bowling */
.blueprint .item .BOWLING {
	background-color: rgb(30, 180, 185, 0.5);
}

.blueprint .item .BOWLING svg {
	height: 70%;
}

/* Billiard */
.blueprint .item .BILLIARD {
	background-color: rgba(0, 130, 220);
}

.blueprint .item .BILLIARD svg {
	height: 80%;
}

/* Boxes */
/*.blueprint .item .box1,
.blueprint .item .box2,*/
.blueprint .item .BOX {
	background-color: rgba(255, 140, 250, 0.5);
}

.blueprint .item .BOX svg {
	height: 90%;
	stroke: currentColor;
	stroke-width: 5px;
}

.blueprint #IM18.item .BOX svg,
.blueprint #IM19.item .BOX svg {
	width: 75%;
}

.blueprint #IM17.item .BOX svg {
	width: 60%;
}

/* Tables */
.blueprint .item .TABLE {
	background-color: rgba(255, 140, 184, 0.5);
}

.blueprint .item .TABLE svg {
	width: 80%;
	stroke: currentColor;
	stroke-width: 5px;
}

/* Preview */
.blueprint .item .preview,
.blueprint .ground-part .preview {
	position: absolute;
	left: 50%;
	top: -10px;
	width: 200px;
	opacity: 0;
	border-radius: 5px;
	box-shadow: 0 0 50px 0px #070707;
	background-color: var(--background-color);
	pointer-events: none;
	z-index: 52;
	transform: translate(-50%, -100%);
	transition: opacity 0.25s;
	-webkit-transition: opacity 0.25s;
}

.blueprint .item .preview::after,
.blueprint .ground-part .preview::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -5px;
	border-width: 5px;
	border-style: solid;
	border-color: var(--background-color) transparent transparent transparent;
}

.blueprint .item:hover .preview,
.blueprint .ground-part:hover .preview {
	opacity: 1;
}

.blueprint .item:hover,
.blueprint .ground-part:hover {
	z-index: 51;
	opacity: 1 !important;
}

.blueprint .item .preview .image,
.blueprint .ground-part .preview .image {
	width: 100%;
	height: 120px;
	border-radius: 5px 5px 0 0;
	background: var(--url);
	background-position: center;
	background-size: cover;
}

.blueprint .item .preview .description,
.blueprint .ground-part .preview .description {
	padding: 10px;
}

.blueprint .item .preview .description span,
.blueprint .ground-part .preview .description span {
	font-weight: 500;
}

.blueprint .item .preview .description p,
.blueprint .ground-part .preview .description p {
	margin-top: 2px;
	font-size: 14px;
	line-height: 18px;
}

@media screen and (max-width: 1024px) {

	.blueprint .item .preview,
	.blueprint .ground-part .preview {
		display: none !important;
	}
}

@media screen and (max-width: 768px) {
	.blueprint {
		transform: rotate(90deg) translateX(50%) scale(1.7);
		-webkit-transform: rotate(90deg) translateX(50%) scale(1.7);
	}

	.blueprint .item div:first-child>*,
	.blueprint .ground-part svg {
		transform: rotate(-90deg);
		-webkit-transform: rotate(-90deg);
	}

	.blueprint .item div:first-child {
		flex-direction: row;
		font-size: 8px;
		border-width: 0.5px;
		border-radius: 1.5px;
	}

	.blueprint .item.selected>div:first-child {
		box-shadow: 0 0 5px 1px white;
	}

	.blueprint .ground-part {
		border-width: 1px !important;
		--grid-size: 6px !important;
	}

	.blueprint .item.active {
		--border-thickness: 1px;
		--border-length: 5px;
	}
}

.checkout-overlay .login-section .login-note {
	margin-bottom: 20px;
	font-size: 15px;
	font-weight: 400;
	line-height: 24px;
	text-align: center;
}

.checkout-overlay .login-section .login-methods {
	align-items: center;
	margin: 10px 0 35px;
}

.checkout-overlay .login-section .basic-login .button.submit {
	width: 270px !important;
}


/* Grid */
.diagonal-grid {
	background-image: repeating-linear-gradient(45deg,
			var(--grid-color),
			var(--grid-color) var(--grid-thickness),
			transparent var(--grid-thickness),
			transparent var(--grid-size)),
		repeating-linear-gradient(-45deg,
			var(--grid-color),
			var(--grid-color) var(--grid-thickness),
			transparent var(--grid-thickness),
			transparent var(--grid-size));
}



/* Table */
.booktable {
	display: flex;
	flex-direction: column;
	/*justify-content: center;*/
	flex: 1;
	width: 100%;
	min-width: 0;
	height: 100%;
}

.booktable .reservation {
	display: flex;
	flex-direction: row;
	/*justify-content: center;*/
	flex: 1;
	width: 100%;
	min-width: 0;
	height: 100%;
}

.booktable .table {
	position: relative;
	overflow: none;
	overflow-x: auto;
}

.booktable .reservation table {
	border-collapse: collapse;
	border-spacing: 0;
	font-size: 14px;
	background-color: #131313;
}

.booktable .reservation table tr {
	transition: .25s;
	-webkit-transition: .25s;
}

.booktable .reservation table tr.active {
	background-color: var(--main-color);
}

.booktable .reservation table td,
.booktable .reservation table th {
	text-align: center;
	border: 1px solid rgba(255, 255, 255, 0.5);
}

.booktable .reservation table th {
	height: 30px;
}

.booktable .reservation table.items .empty {
	height: auto;
}

.booktable .reservation table td {
	height: 50px;
	padding: 0 15px;
	white-space: nowrap;
	cursor: pointer;
	box-shadow: inset 0 0 15px -5px black;
}

.booktable .reservation table tr:last-child td {
	height: 30px;
	padding: 0;
	font-size: 12px;
	font-weight: 400;
	background: none;
	cursor: auto;
}

.booktable .table table th,
.booktable .table table td {
	width: 50px;
	min-width: 50px;
	max-width: 50px;
}

.booktable .table table th {
	font-size: 14px;
	font-weight: 400;
}

.booktable .table table td,
.legend .color.available {
	cursor: pointer;
	background-color: #353142;
	transition: .125s;
	-webkit-transition: .125s;
}

.booktable .table table td.selected,
.legend .color.selected {
	background-color: var(--main-color);
}

.booktable .table table td.expired,
.legend .color.expired {
	cursor: default;
	background-color: #333333;
}

.booktable .table table td.booked,
.legend .color.booked {
	cursor: default;
	background-color: #e83a28;
}

.booktable .table table td.unavailable,
.legend .color.unavailable {
	cursor: default;
	background-color: #737373;
}

.booktable .tooltip {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	position: fixed;
	padding: 8px;
	font-size: 12px;
	border-radius: 5px;
	background-color: #383838;
	pointer-events: none;
	box-shadow: 0px 0px 25px -5px black;
	transform: translate3d(-50%, 30px, 0);
	-webkit-transform: translate3d(-50%, 30px, 0);
	transition: opacity .125s;
	-webkit-transition: opacity .125s;
}

.booktable .tooltip::after {
	content: "";
	position: absolute;
	bottom: 100%;
	left: 50%;
	margin-left: -5px;
	border-width: 5px;
	border-style: solid;
	border-color: transparent transparent #383838 transparent;
}

.booktable .tooltip .status {
	font-weight: 600;
	opacity: 0.8;
}

.booktable .table .swipe {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	height: 65%;
	background-image: url(/resources/swipe.png);
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
	pointer-events: none;
	filter: invert(1);
	-webkit-filter: invert(1);
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	transition: .5s;
	-webkit-transition: .5s;
}

/* Legend */
.legend {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	margin-top: 15px;
}

.legend .item {
	display: flex;
	flex-direction: row;
	align-items: center;
	margin-right: 15px;
	white-space: nowrap;
}

.legend .color {
	flex-shrink: 0;
	width: 15px;
	height: 15px;
	margin-right: 5px;
	border: 1px solid rgba(255, 255, 255, 0.25);
	box-shadow: inset 0 0 2px black;
}

.legend span {
	opacity: 1;
	font-size: 14px;
	font-weight: 300;
}

/* Info */
.booktable ul.info {
	margin-top: 40px;
	list-style-position: inside;
}

.booktable ul.info h4 {
	margin-left: 10px;
	margin-bottom: 10px;
	font-size: 26px;
}

.booktable ul.info li {
	padding-left: 30px;
	margin-bottom: 10px;
	font-weight: 400;
	font-size: 14px;
}



/* Aside */
aside {
	display: flex;
	flex-direction: column;
	width: 220px;
	margin-right: 20px;
}

/* DatePicker */
.datepicker .qs-datepicker-container {
	position: static;
	width: auto;
	font-family: inherit;
	border: none;
	background-color: #272727;
}

.datepicker * {
	color: var(--text-color);
}

.datepicker .qs-datepicker-container .qs-controls {
	background-color: var(--main-color);
}

.datepicker .qs-datepicker-container .qs-controls .qs-arrow {
	border-color: var(--text-color);
}

.datepicker .qs-datepicker-container .qs-controls .qs-arrow:hover {
	opacity: 0.8;
}

.datepicker .qs-datepicker-container .qs-controls .qs-arrow.qs-left:after {
	border-right-color: inherit;
}

.datepicker .qs-datepicker-container .qs-controls .qs-arrow.qs-right:after {
	border-left-color: inherit;
}

/*.datepicker .qs-datepicker-container .qs-controls .qs-arrow.qs-left:after, 
.datepicker .qs-datepicker-container .qs-controls .qs-arrow.qs-right:after {
	border-left-color: var(--text-color);
}*/

.datepicker .qs-datepicker-container .qs-square {
	width: 28px;
	height: 22px;
	margin: 1px;
	transition: .125s;
	-webkit-transition: .125s;
}

.datepicker .qs-datepicker-container .qs-current {
	font-weight: 600 !important;
	text-decoration: none;
	border: 1px solid var(--main-color);
	/*border-radius: 0;*/
}

.datepicker .qs-datepicker-container .qs-day {
	margin-bottom: 10px;
	font-weight: 500;
	font-size: 14px;
}

.datepicker .qs-datepicker-container .qs-num {
	font-weight: 400;
	font-size: 12px;
	opacity: 0.8;
}

.datepicker .qs-datepicker-container .qs-active {
	background-color: var(--main-color);
	border-radius: 2px;
	opacity: 1;
	/* pointer-events: none; */
}

.datepicker .qs-datepicker-container .qs-event::after {
	right: 2px;
	bottom: 2px;
	width: 5px;
	height: 5px;
	background-color: var(--main-color);
}

.datepicker .qs-datepicker-container .qs-active.qs-event::after {
	background-color: var(--text-color);
}

.datepicker .qs-datepicker-container .qs-square:not(.qs-empty):not(.qs-disabled):not(.qs-day):not(.qs-active):hover {
	background-color: transparent;
	color: var(--main-color);
	text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
	opacity: 1;
}

.datepicker .qs-datepicker-container .qs-disabled {
	cursor: default;
	opacity: 0.33;
}

.datepicker .qs-datepicker-container .qs-outside-current-month {
	opacity: 0.15;
}

/* Basket */
.basket {
	margin-top: 30px;
	margin-bottom: 50px;
	padding: 6px 3px;
	border-radius: 5px;
	background-color: #272727;
}

.basket .label {
	padding: 10px;
	font-size: 18px;
	font-weight: 700;
	text-align: center;
}

.basket .content {
	max-height: 300px;
	padding: 6px 4px 6px 6px;
	overflow: auto;
}

.basket .empty {
	font-size: 12px;
	text-align: center;
	opacity: 0.5;
}

.basket .item {
	margin-bottom: 10px;
	padding: 8px;
	border-radius: 3px;
	background: rgb(255, 255, 255, 0.0625);
}

.basket .group-name {
	margin-left: 5px;
}

.basket .item-name {
	font-weight: 600;
}

.basket .item-content {
	display: flex;
	flex-direction: row;
}

.basket .item-content .item-info {
	display: flex;
	flex-direction: column;
	justify-content: center;
	flex: 1;
	font-size: 14px;
	font-weight: 300;
	padding-left: 5px;
	opacity: 0.7;
}

.basket .item-content .item-control {
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
}

.basket .item-content .item-control .price {
	color: var(--main-color);
	font-style: italic;
}

.basket .item-content .item-control .remove {
	height: 20px;
	margin: 1px 0 0 10px;
	cursor: pointer;
	opacity: 0.75;
	transition: opacity .125s;
	-webkit-transition: opacity .125s;
}

.basket .item-content .item-control .remove:hover {
	opacity: 1;
}

.basket .checkout {
	display: flex;
	justify-content: center;
	margin: 14px 0 6px;
}


/* Checkout */
.checkout-overlay .overlay-content {
	display: flex;
	flex-direction: column;
	max-width: 1080px;
	max-height: 720px;
	padding: 40px;
	overflow: auto;
	border-radius: 10px;
	background-color: var(--background-color);
}

@supports ((-webkit-backdrop-filter: blur(20px)) or (backdrop-filter: blur(20px))) {
	@media screen and (min-width: 769px) {
		.checkout-overlay .overlay-content {
			border: 1px groove #8a8a8a2e;
			box-shadow: 0px 0px 40px -15px black;
			background: transparent;
			background-image: linear-gradient(150deg, var(--background-color), #3e3e3e6b);
			backdrop-filter: blur(20px);
			-webkit-backdrop-filter: blur(20px);
		}
	}
}

@media screen and (max-width: 768px) {
	.checkout-overlay .overlay-content {
		padding-bottom: 35vh !important;
	}
}

.checkout-overlay .overlay-content>*:not(:last-child) {
	margin-bottom: 20px;
}

.checkout-overlay .overlay-content .content {
	--margin: 120px;
	display: flex;
	flex-direction: row;
	flex: 1;
	opacity: 1;
}

.checkout-overlay .overlay-content .content>* {
	flex: 1;
}

.checkout-overlay .overlay-content .content h5 {
	margin-bottom: 40px;
}

.checkout-overlay .overlay-content .content .basket {
	display: flex;
	flex-direction: column;
	margin: 0 calc(var(--margin) / 2) 0 0;
	padding: 0;
	background: transparent;
}

.checkout-overlay .overlay-content .content .basket .inner {
	overflow: auto;
	height: 100%;
	padding: 0 10px;
}

.checkout-overlay .overlay-content .content .basket .remove {
	display: none;
}

.checkout-overlay .overlay-content .content .info {
	display: flex;
	flex-direction: column;
	margin: 0 0 0 calc(var(--margin) / 2);
}

/* .checkout-overlay .overlay-content .content .info .form-item {
	margin-bottom: 35px;
} */

.checkout-overlay .overlay-content .content .info .form-item.privacy {
	margin-top: -10px;
	margin-bottom: 20px;
}

.checkout-overlay .overlay-content .content .info .form-item.privacy label {
	margin: 0 5px;
	font-size: 14px;
	opacity: 0.9;
}

.checkout-overlay .overlay-content .content .info .notes label {
	display: block;
	margin-top: 10px;
}

.checkout-overlay .overlay-content .content .info .notes label small {
	/* opacity: 0.5; */
	font-weight: 200;
	font-size: 12px;
	letter-spacing: 0.8px;
	color: #bfbfbf;
}

.checkout-overlay .overlay-content .content .info input:not([type="checkbox"]) {
	width: 200px;
	height: 30px;
	font-size: 14px;
	border: none;
	border-bottom: 2px solid rgba(255, 255, 255, .1);
	background: transparent;
	transition: .25s ease-in-out;
	-webkit-transition: .25s ease-in-out;
}

.checkout-overlay .overlay-content .content .info input::-webkit-input-placeholder {
	color: rgba(255, 255, 255, 0.66);
}

.checkout-overlay .overlay-content .content .info input::-moz-placeholder {
	color: rgba(255, 255, 255, 0.66);
}

.checkout-overlay .overlay-content .content .info input:hover {
	border-color: var(--main-color);
}

.checkout-overlay .overlay-content .content .info input:focus {
	padding-left: 10px;
	border-color: var(--main-color);
	/*background-color: rgba(255, 255, 255, .075);*/
	box-shadow: 0 6px 10px -10px var(--main-color);
}

.checkout-overlay .overlay-content .buttons {
	margin-top: 20px;
	text-align: right;
	opacity: 1;
}

.checkout-overlay .overlay-content .buttons .button {
	width: 150px;
}

.checkout-overlay .overlay-content .buttons button {
	margin-left: 10px;
	border: none;
	background: none;
	cursor: pointer;
}

.checkout-overlay .overlay-content .result {
	flex-direction: column;
	align-items: center;
	text-align: center;
	justify-content: center;
	position: absolute;
	display: flex;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	pointer-events: none;
	transition: opacity .25s;
	-webkit-transition: opacity .25s;
}

.checkout-overlay .overlay-content .result .icon {
	width: 110px;
	height: 110px;
	position: relative;
}

.checkout-overlay .overlay-content .result .icon svg {
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	stroke: var(--color);
	stroke-width: 10px;
	stroke-dasharray: 1570;
	stroke-dashoffset: 1570;
	color: transparent;
	transition: stroke-dashoffset 2s, color .5s 1.8s, opacity .125s;
	-webkit-transition: stroke-dashoffset 2s, color .5s 1.8s, opacity .125s;
}

.checkout-overlay .overlay-content.response.success .result .icon svg.check {
	--color: var(--main-color);
	opacity: 1;
	stroke-dashoffset: 0;
	/*color: var(--color);*/
}

.checkout-overlay .overlay-content.response.failed .result .icon svg.error {
	--color: #ff2121;
	opacity: 1;
	stroke-dashoffset: 0;
	/*color: var(--color);*/
}

.checkout-overlay .overlay-content .result .label {
	margin-top: 40px;
	font-size: 28px;
	font-weight: 400;
	color: var(--text-color);
}

.checkout-overlay .overlay-content.response {
	overflow: hidden;
}

.checkout-overlay .overlay-content.response .result {
	opacity: 1;
}

.checkout-overlay .overlay-content.response .content {
	max-height: 0;
	max-width: 0;
	opacity: 0;
	pointer-events: none;
}

.checkout-overlay .overlay-content.response .buttons {
	max-height: 0;
	max-width: 0;
	opacity: 0;
	pointer-events: none;
}

.mobile-input-wrapper {
	position: relative;
	display: inline-block;
}

/* .mobile-input-wrapper .mobile-suggestions.visible {
	opacity: 1;
	pointer-events: all;
} */

.mobile-input-wrapper .mobile-suggestions {
	display: flex;
	position: absolute;
	width: 100%;
	background-color: #2f2f2f;
	z-index: 1;
	padding: 5px 8px;
	border-radius: 0 0 5px 5px;
	min-height: 65px;
	max-height: 200px;
	overflow: auto;
	opacity: 0;
	pointer-events: none;
	transition: opacity .25s;
	-webkit-transition: opacity .25s;
}

.mobile-input-wrapper input:placeholder-shown~.mobile-suggestions:not(:empty) {
	opacity: 1;
	pointer-events: all;
	/* display: none; */
}

.checkout-overlay:not(.active) .mobile-input-wrapper .mobile-suggestions {
	display: none;
}

.mobile-input-wrapper .mobile-suggestions .item {
	cursor: pointer;
	margin: 2px 0;
	background-color: #252525;
	padding: 5px 9px;
	border-radius: 3px;
	transition: background-color .125s;
	-webkit-transition: background-color .125s;
}

.mobile-input-wrapper .mobile-suggestions .item:hover {
	background-color: #505050;
}

.mobile-input-wrapper .mobile-suggestions .item.exact {
	border: 1px solid var(--main-color);
}

.mobile-input-wrapper .mobile-suggestions .item .name {
	font-size: 14px;
	font-weight: 400;
}

.mobile-input-wrapper .mobile-suggestions .item .mobile {
	font-size: 13px;
	opacity: 0.8;
	font-weight: 300;
}

.mobile-input-wrapper .mobile-suggestions .loader {
	width: 35px;
	height: 35px;
	margin: 10px auto;
	border-width: 5px;
}

.mobile-input-wrapper .mobile-suggestions .empty {
	text-align: center;
	font-size: 13px;
	opacity: 0.8;
	font-weight: 400;
	margin: 7px 0;
}


/* Dashboard Modifications */

.booktable .legend span.staff {
	text-decoration: underline;
	cursor: pointer;
	color: white;
	transition: .25s;
	-webkit-transition: .25s;
}

.booktable .legend span.staff.active {
	text-shadow: 0 0 10px #ffffff;
	font-weight: 600;
}

.booktable .legend span.staff:hover {
	color: var(--main-color);
}

.checkout-overlay .staff-notice {
	display: flex;
	align-items: start;
	margin: 0 0 0 5px;
	font-size: 13px;
	font-weight: 300;
}

.checkout-overlay .staff-notice.severity-info {
	color: #a5ff4c;
}

.checkout-overlay .staff-notice.severity-warn {
	color: #ff4f3e;
	font-weight: 600;
}

.checkout-overlay .staff-notice span {}

.checkout-overlay .staff-notice .icon {
	display: flex;
	width: 16px;
	height: 16px;
	margin: 1.5px 5px 0 0;
}

.checkout-overlay .staff-notice .icon svg {}



.booktable .dashboard {
	display: none;
}

.booktable .dashboard.staff {
	display: block;
	margin: 50px 0 20px;
}

.booktable .dashboard .search {
	width: 100%;
	margin-bottom: 10px;
}

.booktable .dashboard .search input[type="text"] {
	flex: 1;
	margin-right: 5px;
}

.booktable .dashboard .search input[type="button"].clear {
	width: 26px;
	height: 26px;
	cursor: pointer;
}

.booktable .dashboard table {
	width: 100%;
	border-collapse: collapse;
	border-spacing: 0;
}

.booktable .dashboard table th,
.booktable .dashboard table td {
	padding: 2px 5px;
	font-size: 14px;
	border: 1px solid #505050;
}

.booktable .dashboard table th {
	background-color: rgb(31, 31, 31);
	font-weight: 500;
}

.booktable .dashboard table td {
	background-color: rgb(42, 42, 42);
	color: rgba(255, 255, 255, 0.75);
	font-weight: 300;
	cursor: alias;
}

.booktable .dashboard table td.no-pick {
	cursor: default;
}

.booktable .dashboard table tr.disabled td {
	background-color: rgb(50, 35, 35);
}

.booktable .dashboard table tr:hover td {
	background-color: rgb(50, 50, 50);
}

.booktable .dashboard table td .remove {
	display: block;
	width: 16px;
	margin: 0 auto;
	cursor: pointer;
}

@media screen and (min-width: 1025px) {
	.basket .content::-webkit-scrollbar {
		width: 5px;
		height: 5px;
	}

	.basket .content {
		scrollbar-width: thin;
		scrollbar-color: var(--main-color) transparent;
	}

	.basket .content::-webkit-scrollbar-track {
		background: transparent;
	}

	.basket .content::-webkit-scrollbar-thumb {
		background-color: var(--main-color);
	}

	.basket .content::-webkit-scrollbar-thumb:active {
		background-color: rgba(var(--main-color-rgb), .8);
	}
}

@media screen and (max-width: 1024px) {
	section#reservation article {
		flex-direction: column;
	}

	section#reservation article aside {
		flex-direction: row;
		justify-content: space-around;
		width: 100%;
	}

	section#reservation article aside .datepicker {
		width: 40%;
	}

	section#reservation article aside .basket {
		width: 40%;
		margin: 0;
	}

	/* Datepicker */
	.datepicker .qs-datepicker-container .qs-controls {
		height: 50px;
		padding: 0 5px;
	}

	.datepicker .qs-datepicker-container .qs-controls .qs-arrow {
		width: 40px;
		height: 40px;
	}

	.datepicker .qs-datepicker-container .qs-controls .qs-month-year {
		font-size: 18px;
	}

	.datepicker .qs-datepicker-container .qs-square {
		/* 7 days - 1px margin for two sides */
		width: calc(100% / 7 - 1px * 2);
		height: 30px;
	}

	.datepicker .qs-datepicker-container .qs-num {
		font-size: 14px;
	}

	.datepicker .qs-datepicker-container .qs-day {
		font-size: 16px;
	}

	.datepicker .qs-datepicker-container .qs-event::after {
		right: 3px;
		bottom: 3px;
		width: 7px;
		height: 7px;
	}

	section#reservation article .booktable {
		margin-top: 80px;
	}
}

@media screen and (max-width: 768px) {
	section#blueprint {
		padding-top: 80px;
	}

	section#blueprint article {
		height: 162vw;
		padding-top: 12vw;
	}

	section#reservation article aside {
		flex-direction: column;
	}

	section#reservation article aside .datepicker {
		width: 100%;
	}

	section#reservation article aside .basket {
		width: 100%;
		margin-top: 50px;
	}

	section#reservation article aside .basket .content {
		max-height: 250px;
	}

	.datepicker .qs-datepicker-container .qs-event::after {
		right: 18%;
	}

	.booktable ul.info h4 {
		text-align: center;
		margin-bottom: 10px;
	}

	.booktable ul.info li {
		padding: 0 10px;
	}

	.legend {
		flex-direction: column;
	}

	.legend .color {
		border-width: 0.5px;
	}

	.basket .checkout a {
		width: 100%;
		margin: 0 10px;
	}


	.checkout-overlay .overlay-content {
		padding: 25px;
	}

	.checkout-overlay .overlay-content .content {
		--margin: 0;
		display: block;
		/* flex-direction: column; */
		height: auto;
	}

	.checkout-overlay .overlay-content .content .basket {
		max-height: 80vh;
		margin-bottom: 80px;
	}

	.checkout-overlay .overlay-content .content .basket .inner,
	.checkout-overlay .overlay-content .content .info .form-item {
		padding: 0 10px;
	}

	.checkout-overlay .overlay-content .buttons {
		/* display: flex; */
		/* flex-direction: column-reverse; */
		margin-top: 40px;
	}

	.checkout-overlay .overlay-content .buttons * {
		width: 100% !important;
		margin-left: 0 !important;
		margin-bottom: 10px;
	}
}

@media screen and (max-width: 370px) {
	/*section#blueprint article {
		height: 150vw;
	}*/

	.datepicker .qs-datepicker-container .qs-event::after {
		right: 3px;
	}
}