@charset "UTF-8";

/* reset */
html, body, div, section, article, aside, header, hgroup, footer, nav, h1, h2, h3, h4, h5, h6, p, blockquote, address, time, span, em, strong, img, ol, ul, li, figure, canvas, video {
	margin: 0;
	padding: 0;
	border: 0;
}

article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
	display:block;
}

* {
	scrollbar-width: thin;
	scrollbar-color: var(--clr-gray) transparent;
}

*::-webkit-scrollbar {
	width: 6px;
}

*::-webkit-scrollbar-track {
	background: transparent;
}

*::-webkit-scrollbar-thumb {
	background-color: var(--clr-gray);
	border-radius: var(--rds-box);
	border: 0;
}

.hide {
	display: none !important;
}

.clear {
	display:block;
	height:1px;
	overflow:hidden;
	clear:both;
}

.prevent-select {
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.info.label,
.eventdet .info .cell .label {
	font-size: 12px;
	line-height: 20px;
	text-transform: uppercase;
	color: var(--clr-dark-gray);
}

.info.content,
.eventdet .info .cell {
	font-size: 15px;
	line-height: 24px;
	font-weight: var(--wht-semibold);
	color: var(--clr-black);
}

html, body {
	width: 100%;
	height: 100%;
	margin: 0px;
	padding: 0px;
	font-size: 14px;
	line-height: 20px;
	color: var(--clr-dark-gray);
	background: var(--clr-white);
	font-family: var(--fnt-main);
	font-optical-sizing: auto;
	font-weight: var(--wht-semibold);
	color: var(--clr-black);
	overflow:hidden;

	input, select, textarea, button, .customSelect .cswrp .csmainwrp {
		font-family: var(--fnt-main);
		color: var(--clr-black);
		font-weight: var(--wht-semibold);
	}

	input, select, button, textarea, .customSelect .cswrp .csmainwrp {
		display: block;
		width: 100%;
		height: 36px;
		font-size: 14px;
		line-height: 18px;
		padding: 8px 22px 8px 8px;
		box-sizing: border-box;
		border: solid 1px var(--clr-mid-gray);
		border-radius: var(--rds-inp);
		outline: none;
	}

	input, select, textarea, .customSelect {
		margin-bottom: var(--mrg-form-component);
	}

	#msg {
		position: fixed;
		height: 0;
		top: 0;
		right: 0;
		left: 0;
		z-index: 999;

		.msg {
			display: none;
			position: relative;
			top: var(--mrg-wrp-full);
			width: 100%;
			box-sizing: border-box;
			max-width: 512px;
			padding: 0 var(--mrg-wrp-full);
			margin: 0 auto var(--mrg-box-min);

			.wrp {
				display: block;
				box-sizing: border-box;
				background-color: var(--clr-white);
				padding: var(--mrg-box-min) var(--mrg-box-half);
				border-radius: var(--rds-btn);
				box-shadow: var(--shd-msg);
				overflow: hidden;
				border-top: solid 2px var(--clr-blue);
				font-size: 14px;
				line-height: 18px;

				.title {
					display: block;
					font-size: 16px;
					line-height: 22px;
					text-transform: uppercase;
					font-weight: var(--wht-extrabold);
					color: var(--clr-blue);
				}

				.clr {
					color: var(--clr-blue);
				}

				.close {
					cursor: pointer;
				}
			}
		}

		.msg.er .wrp {
			border-color: var(--clr-red);
			.clr { color: var(--clr-red); }
			.title { color: var(--clr-red); }
		}

		.msg.wr .wrp {
			border-color: var(--clr-orange);
			.clr { color: var(--clr-orange-600); }
			.title { color: var(--clr-orange-600); }
		}

		.msg.ok .wrp {
			border-color: var(--clr-green);
			.clr { color: var(--clr-green-600); }
			.title { color: var(--clr-green-600); }
		}

	}

	#lbox {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		box-sizing: border-box;
		background: none;
		background: rgba(0,0,0,0.2);
		z-index: 900;

		display: none;
		align-items: center;
		justify-content: center;

		.center {
			position: fixed;
			display: flex;
			justify-content: center;
			width: 100%;
			max-width: 720px;
			max-height: 100%;

			.wrp {
				margin: var(--mrg-lbx-half);
				box-sizing: border-box;
				background-color: var(--clr-white);
				box-shadow: var(--shd-box);
				border-radius: var(--rds-box);
				overflow: hidden;
				min-width: 376px;

				.top {
					display: block;
					position: relative;
					white-space: nowrap;
					overflow: hidden;
					width: 100%;
					margin: 0 auto;
					height: 48px;
					font-size: 16px;
					line-height: 32px;
					padding: 8px var(--mrg-lbx-half);
					text-transform: uppercase;
					border-bottom: solid 1px var(--clr-mid-gray);
					font-weight: var(--wht-extrabold);
					color: var(--clr-dark-gray);
					box-sizing: border-box;

					.close {
						position: absolute;
						display: block;
						width: 48px;
						height: 48px;
						top: 0;
						right: 0;
						background: var(--clr-white);
						box-shadow: -8px -8px 8px 0px var(--clr-white);

						.ui-btn {
							display: block;
							margin: 12px;
							padding: 0;
							border: none;

							i {
								display: block;
								width: 24px;
								height: 24px;
								margin: 0;
							}
						}
					}

					.close:hover {
						color: var(--clr-purple);
					}

				}
				.cont {
					display: block;
					width: 100%;
					margin: 0 auto;
					height: auto;
					max-height: calc(100% - 48px);
					box-sizing: border-box;
					overflow: hidden;
					overflow-y: auto;
					background-color: var(--clr-white);
					padding: var(--mrg-lbx-min);
					border: solid var(--mrg-lbx-min) var(--clr-white);
				}
			}
		}

		.lbox-buttons {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.right {
				display: flex;
				gap: 4px;
			}
		}

		.children-counter-wrapper {
			margin-top: 10px;
			padding-top: 10px;
			border-top: 1px solid #eee;
		}
		.counter-controls {
			display: flex;
			align-items: center;
			gap: 10px;
			margin-top: 5px;
		}
		.btn-decrease, .btn-increase {
			width: 32px;
			height: 32px;
			border-radius: 50%;
			font-size: 18px;
			background: #7c3aed;
			color: white;
			border: none;
			cursor: pointer;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 8px;
		}
		.btn-decrease:hover, .btn-increase:hover {
			background: #6d28d9;
		}
		.children-count {
			min-width: 20px;
			text-align: center;
		}
	}

	#lbox.on {
		display: flex;
	}

	#header {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		height: 72px;
		box-sizing: border-box;
		background: none;
		padding: 0 0 0 96px;
		z-index: 700;

		#logo {
			float: left;
			width: 96px;
			height: 72px;
			margin: 0 0 0 -96px;

			a {
				display: block;
				width: 60px;
				height: 40px;
				margin: 16px auto 0;
				color: var(--clr-purple);
			}
		}

		.title {
			display: block;
			margin: 12px 0 0;
			font-size: 14px;
			line-height: 20px;
			font-weight: var(--wht-bold);
			color: var(--clr-dark-gray);
			padding-left: var(--mrg-wrp-full);
			padding-right: 64px; /* <== espaço pro menu/hambúrguer */
			height: 100%;         /* <== deixa o conteúdo crescer */
			overflow: hidden;     /* <== impede transbordamento visual */
			transition: opacity 0.2s ease-out;
			white-space: nowrap;

			i {
				display: inline-block;
				width: 14px;
				height: 14px;
				vertical-align: text-bottom;
				color: var(--clr-mid-gray);
				padding-bottom: 2px;
			}

			a {
				color: var(--clr-purple);
			}

			h3 {
				font-size: 22px;
				line-height: 24px;
				font-weight: var(--wht-extrabold);
				color: var(--clr-dark-purple);
			}
		}

		@media (min-width: 1024px) {
			.title {
				float: left;
				height: 48px;
				padding-right: 0;
			}
		}
	}

	#submenu {
		position: absolute;
		top: 72px;
		right: 0;
		left: 96px;
		height: 0;
		z-index: 800;
		box-sizing: border-box;
		background: none;
		transition: opacity 0.2s ease-out;

		.wrp {
			display: block;
			position: relative;
			top: -72px;
			height: 72px;
			line-height: 70px;
			max-width: 100%;
			float: right;
			z-index: 899;
			background-color: var(--clr-white);
			box-shadow: -8px -8px 8px 0px var(--clr-white);
			padding-right: var(--mrg-wrp-full);
			text-align: right;
			white-space: nowrap;
			opacity: 0;

			.open {
				display: none;
				position: absolute;
				top: -72px;
				right: 0;
				width: 72px;
				height: 72px;
				padding: 0 var(--mrg-wrp-half) 0 0;
				background-color: var(--clr-white);
				box-shadow: -8px -8px 8px 0px var(--clr-white);
				cursor: pointer;

				i {
					display: block;
					height: 34px;
					width: 34px;
					padding: 3px;
					margin: 16px auto;
					border-radius: 50%;
					color: var(--clr-dark-purple);

					svg {
						display: block;
						height: 34px;
						width: 34px;
					}
				}
			}

			.items {
				.top {
					display: open;
				}

				.btn {
					display: inline-block;
					vertical-align: middle;
				}

				.top {
					display: inline-block;
					/* width: 112px; */
					height: 40px;
					vertical-align: middle;

					.ico {
						height: 40px;
						display: block;
						float: left;
						margin: 0 0 0 16px;
						color: var(--clr-dark-purple);
					}

					.ico:hover {
						color: var(--clr-purple);
					}
				}
			}
		}

		.blocker {
			display: none;
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			z-index: 801;
			border-top-left-radius: var(--rds-cont);
			background: rgba(0,0,0,0.2);
		}
	}

	#submenu.sub {
		.wrp {
			display: block;
			top: 0;
			right: 0;
			width: 100%;
			max-width: 256px;
			height: auto;
			box-shadow: none;
			padding: 0;
			background: none;

			.open {
				display: block;
			}

			.items {
				display: none;
				width: 100%;
				height: auto;
				max-width: 256px;
				box-sizing: border-box;
				padding: 72px 0 var(--mrg-wrp-full);
				position: relative;
				float: right;
				background: var(--clr-white);
				border-bottom-left-radius: var(--rds-box);
				box-shadow: var(--shd-box);
				overflow: hidden;

				.top {
					display: flex;
					justify-content: space-around;
					align-items: center;
					position: absolute;
					top: 0;
					width: 100%;
					height: 72px;
					border-top: solid 1px var(--clr-mid-gray);

					.ico {
						display: block;
						float: none;
						height: 40px;
					}
				}

				.btn {
					display: block;
					margin: 12px 12px 0;
				}

				.btn:first-child {
					margin-top: 0;
				}
			}
		}

		.blocker {
			display: none;
		}
	}

	#submenu.sub.on {
		height: initial;
		bottom: 0;

		.wrp {
			.open i {
				background-color: var(--clr-purple);
				color: var(--clr-white);
			}
			.items {
				display: block;
			}
		}
		.blocker {
			display: block;
		}
	}

	#menu {
		position: fixed;
		top: 72px;
		left: 0;
		box-sizing: border-box;
		background: none;
		width: 96px;
		height: 100%;
		z-index: 600;
		transition: opacity 0.2s ease-out;

		.btn {
			width: 76px;
			height: 54px;
			display: block;
			white-space: nowrap;
			text-decoration: none;
			text-align: center;
			font-size: 10px;
			line-height: 14px;
			font-weight: var(--wht-extrabold);
			margin: 16px auto 0;
			color: var(--clr-dark-purple);

			i {
				display: block;
				width: 76px;
				height: 40px;
				overflow: hidden;
				border-radius: 20px;
				margin: 0 auto;

				svg {
					width: 32px;
					height: 32px;
					display: block;
					margin: 4px auto;
				}
			}
		}

		.btn.on,
		.btn:hover {
			color: var(--clr-purple);
			i {
				color: var(--clr-white);
				background-color: var(--clr-purple);
				box-shadow: 0 1px 6px #7c24fc4d;
			}
		}

		.off {
			display: block;
			position: fixed;
			bottom: 0;
			width: 96px;
			height: 64px;

			.ui-btn {
				width: 40px;
				height: 40px;
				border: none;
				display: block;
				padding: 8px;
				margin: 12px auto 0;
				color: var(--clr-amber);

				i {
					width: 24px;
					height: 24px;
					display: block;
					margin: 0;
				}
			}

			.ui-btn:hover {
				color: var(--clr-purple);
			}
		}
	}

	#body {
		position: absolute;
		box-sizing: border-box;
		background: var(--clr-light-gray);
		top: 72px;
		right: 0;
		bottom: 0;
		left: 96px;
		overflow: hidden;
		padding: 0;
		border-top-left-radius: var(--rds-cont);
		border: solid 2px var(--clr-light-gray);
		border-right: none;
		border-left: none;
		z-index: 500;

		#wrp {
			overflow: hidden;
			overflow-y: auto;
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;

			#content {
				width: 100%;
				box-sizing: border-box;
				padding: var(--mrg-wrp-full) var(--mrg-wrp-half) 0;
				background: var(--clr-light-gray);
				transition: opacity 0.2s ease-out;

				.title {
					font-size: 22px;
					line-height: 36px;
					color: var(--clr-dark-purple);
					font-weight: var(--wht-extrabold);
					margin: 0 var(--mrg-wrp-half) var(--mrg-wrp-half);
					padding: 0;
				}

				.subtitle {
					font-size: 16px;
					line-height: 20px;
					color: var(--clr-dark-gray);
					font-weight: var(--wht-bold);
					margin: 0 var(--mrg-wrp-half) var(--mrg-wrp-half);
					padding: 0;
				}

				.row {
					box-sizing: border-box;
					margin: 0 var(--mrg-wrp-half) var(--mrg-wrp-full);
					padding: var(--mrg-box-half);

					.scroll{
						width: 100%;
						/* min-width: 1024px; */
						overflow: hidden;
						overflow-x: auto;
					}

					form {
						.irow {
							display: block;
							margin-bottom: var(--mrg-box-min);
							text-align: left;
							.msg {
								display: none;
								font-size: 12px;
								line-height: 15px;
								padding: 3px 0px;
								color: var(--clr-black);
							}
							.msg._on {
								display: block;
							}
							.msg._er {
								color: var(--clr-amber-600);
							}
							.msg._ok {
								color: var(--clr-green-700);
							}
						}

						.irow._title {
							font-weight: 16px;
							line-height: 24px;
							font-weight: var(--wht-extrabold);
							color: var(--clr-dark-gray);
							text-transform: uppercase;
						}

						.irow._right {
							text-align: right;
						}

						.irow:last-child {
							margin-bottom: 0;
						}

						label {
							display: block;
							padding: 3px 0;
							font-weight: var(--wht-bold);
							color: var(--clr-dark-gray);
							font-size: 14px;
							line-height: 18px;

							p {
								font-weight: var(--wht-semibold);
							}

							& .helper {
								display: block;
								color: var(--clr-mid-gray);
                                font-weight: var(--wht-regular);
								margin-bottom: var(--mrg-form-component);
							}

							&:has(.helper) input, &:has(.helper) textarea, &:has(.helper) select {
								margin-bottom: 0px;
							}

							&:has(input[type="checkbox"]:not(:has(.customSelect)),
							input[type="radio"]):not(:has(.note-editor)) {
								display: flex !important;
								align-items: center;
								margin-bottom: var(--mrg-form-component);
							}

							.required {
								color: var(--clr-red);
								font-weight: 900;
							}
						}

						input[type="checkbox"],
						input[type="radio"] {
                            display: inline-block;
                            width: 14px;
                            margin: 0px 4px 0px 0px;
                            height: 14px;
						}

						textarea {
							max-width: 100%;
							min-height: 36px;
							resize: vertical;
						}

						input._er, select._er {
							border-color: var(--clr-red-300);
						}

						input._ok, select._ok {
							border-color: var(--clr-green);
						}

						button:not(.note-palette .note-color-row button):not(.iti__selected-country) {
							display: inline-block;
							width: initial;
							text-transform: uppercase;
							font-weight: var(--wht-bold);
							color: var(--clr-white);
							background: var(--clr-purple);
							cursor: pointer;
							border: none;
							padding: 8px var(--mrg-box-half);
							box-shadow: var(--shd-glow-purple);
						}

						::placeholder {
							color: var(--clr-mid-gray);
						  }

					}
				}

				.row:last-child {
					margin-bottom: var(--mrg-wrp-full);
				}

				.row.box {
					margin: 0 var(--mrg-wrp-half) var(--mrg-wrp-full);
					border-radius: var(--rds-box);
					background-color: var(--clr-white);
					box-shadow: var(--shd-box);

					.top {
						display: block;
						height: 24px;
						margin: 0 0 var(--mrg-box-half);
						font-size: 16px;
						line-height: 24px;
						overflow: hidden;
						white-space: nowrap;
						text-transform: uppercase;
						font-weight: var(--wht-extrabold);
						color: var(--clr-dark-purple);
					}

					.top, .top-label {
						position: relative;
					}

					.top-label {
						padding-bottom: 2px;
					}

					.top .ui-btn, .top-label .ui-btn {
						position: absolute;
						top: 0;
						right: 0;
						padding-right: 0;
						line-height: 24px;
						box-shadow: none;
						border: none;
						border-radius: 0;
						font-weight: var(--wht-extrabold);
						color: var(--clr-purple);

						i {
							height: 22px;
							line-height: 22px;
							margin-right: 0;
							vertical-align: top;

							svg {
								vertical-align: bottom;
							}
						}
					}

					.top-label .ui-btn {
						font-size: 12px;
						line-height: 20px;

						i {
							height: 16px;
							line-height: 16px;
						}
					}

					.top .ui-btn:hover, .top-label .ui-btn:hover {
						color: var(--clr-blue);
					}
				}

				.row.full {
					margin: 0 var(--mrg-wrp-half) var(--mrg-wrp-full);
					padding: 0;
				}

				.row.box.full {
					margin: var(--mrg-wrp-half) 0;
					.top {
						margin: var(--mrg-wrp-half);
						margin-top: 0;
					}
				}

				.row.table-wrp {
					border-radius: 0;
					padding: 0;

					.top {
						margin: 0 var(--mrg-box-half) var(--mrg-box-half);
					}

					.footer {
						margin: 0 var(--mrg-box-half) 0 var(--mrg-box-half);
					}

					table {
						width: 100%;
						thead tr{
							th {
								font-size: 14px;
								line-height: 20px;
								font-weight: var(--wht-extrabold);
								padding: var(--mrg-tbl-quarter);
								color: var(--clr-dark-gray);
								text-transform: uppercase;

								a {
									text-decoration: none;
									color: var(--clr-dark-gray);
									white-space: nowrap;

									.order {
										display: inline-block;
										overflow: hidden;
										width: 14px;
										height: 17px;
										vertical-align: bottom;
										margin: 0 0 0 4px;
										color: var(--clr-mid-gray);

										i {
											display: block;
											width: 14px;
											height: 14px;
											overflow: hidden;

											svg {
												display: block;
												margin: 0;
											}
										}
									}

								}

								a:has(.order):hover {
									cursor: pointer;
								}

								a.asc, a.desc {
									color: var(--clr-dark-purple);
								}

								a.desc .order {
									color: var(--clr-amber);
									i svg{
										margin: -28px 0 0;
									}
								}

								a.asc .order {
									color: var(--clr-amber);
									i svg{
										margin: -14px 0 0;
									}
								}
							}

							th:first-child {
								padding-left: var(--mrg-tbl-half);
							}
							th:last-child {
								padding-right: var(--mrg-tbl-half);
							}
						}

						tbody {
							border-radius: var(--rds-box);
							box-shadow: var(--shd-box);

							tr {
								height: 64px;
								td {
									font-size: 14px;
									line-height: 20px;
									padding: var(--mrg-tbl-quarter);
									background-color: #FFF;
									border: solid 0 var(--clr-mid-gray);
									border-top-width: 1px;

									.line {
										white-space: nowrap;
									}

									.small {
										font-size: 12px;
										line-height: 18px;
									}

									a {
										text-decoration: underline;
										color: var(--clr-dark-purple);
										font-weight: var(--wht-extrabold);
										cursor: pointer;
									}

									a:hover {
										color: var(--clr-purple);
									}

									.highlight {
										color: var(--clr-dark-purple);
										font-weight: var(--wht-extrabold);
									}

									.actions {
										display: block;
										white-space: nowrap;
										width: 100%;
										height: 32px;
										text-align: right;

										a:has(._ico) {
											text-decoration: none;
										}

										.ui-btn {
											width: 24px;
											height: 24px;
											margin-right: 6px;
											text-align: center;
											padding: 3px;
											box-sizing: initial;

											i {
												display: block;
												width: 24px;
												height: 24px;
												margin: 0;

												svg {
													display: block;
													width: 24px;
													height: 24px;
												}
											}
										}

										.ui-btn:last-child {
											margin-right: 0;
										}
									}
								}

								td {
									/* white-space: nowrap; */

									&:first-child {
										padding-left: var(--mrg-tbl-half);
										border-left-width: 1px;
									}

									&:last-child {
										white-space: nowrap;
										padding-right: var(--mrg-tbl-half);
										border-right-width: 1px;
									}
								}
							}

							tr:first-child {
								td:first-child {
									border-top-left-radius: var(--rds-box);
									border-left-width: 1px;
								}
								td:last-child {
									border-top-right-radius: var(--rds-box);
									border-right-width: 1px;
								}
							}

							tr:last-child {
								td {
									border-bottom-width: 1px;
								}
								td:first-child {
									border-bottom-left-radius: var(--rds-box);
									border-left-width: 1px;
								}
								td:last-child {
									border-bottom-right-radius: var(--rds-box);
									border-right-width: 1px;
								}
							}
						}

						tfoot tr {
							td {
								padding: var(--mrg-tbl-quarter);

								button {
									width: 100%;
									margin-top: var(--mrg-form-component);
								}
							}

							td:first-child {
								padding-left: var(--mrg-tbl-half);
							}
							td:last-child {
								padding-right: var(--mrg-tbl-half);
							}
						}
					}

					.pagination {
						display: block;
						overflow: hidden;
						width: 100%;
						font-size: 14px;
						line-height: 32px;
						white-space: nowrap;
						text-align: right;
						padding: 8px 0;

						select {
							display: inline;
                            width: auto;
							border: none;
							background: none;
							outline: none;
							font-family: var(--fnt-main);
							text-align: center;
						}

						.actions {
							height: 32px;
							margin: 0 14px 0 12px;
							display: inline-block;
							white-space: nowrap;
							text-align: right;
							vertical-align: top;

							.ui-btn {
								width: 24px;
								height: 24px;
								margin-right: 6px;
								text-align: center;
								padding: 3px;
								box-sizing: initial;
								color: var(--clr-amber);

								i {
									display: block;
									width: 24px;
									height: 24px;
									margin: 0;

									svg {
										display: block;
										width: 24px;
										height: 24px;
									}
								}
							}

							.ui-btn:last-child {
								margin-right: 0;
							}

							.ui-btn:hover {
								color: var(--clr-purple);
							}

							.ui-btn.off, .ui-btn.off:hover {
								color: var(--clr-mid-gray);
                                cursor: inherit;
							}

						}
					}
				}

				.row.box.table-wrp {
					border-radius: var(--rds-box);
					padding: var(--mrg-box-half) 0;

					table tbody {
						border-radius: 0;
						tr td,
						tr:first-child td:first-child,
						tr:first-child td:last-child,
						tr:last-child td:first-child,
						tr:last-child td:last-child {
							border-radius: 0;
							border-right: none;
							border-left: none;
						}
					}

					.search, .progress {
						border-radius: var(--rds-box);
						overflow: hidden;
						background-color: var(--clr-white);
					}

					.search {
						position: sticky;
						top: 0;
					}

					.progress {
						position: sticky;
						display: none;
						bottom: 0;
					}
				}

				.group {
					display: flex;
					justify-content: space-between;
					align-items: normal;
					.row {
						display: inline-block;
						width: 	calc(50% - var(--mrg-wrp-half));
						min-height: 100%;
					}
				}

				#search {
					height: 36px;
					line-height: 36px;
					margin: 0 var(--mrg-wrp-half) var(--mrg-wrp-full);
					padding: 0;
					background: none;
					white-space: nowrap;

					form {
						display: block;
						padding: 0;
						margin: 0;
						height: 36px;
						width: 100%;
						float: left;

						input {
							width: 100%;
							height: 36px;
							font-size: 14px;
							font-weight: var(--wht-semibold);
							line-height: 20px;
							display: block;
							float: left;
							padding: 9px 36px 9px var(--mrg-box-half);
							box-sizing: border-box;
							border-radius: var(--rds-btn);
							border: solid 1px var(--clr-mid-gray);
						}

						button {
							width: 36px;
							height: 36px;
							background: none;
							border: none;
							box-sizing: border-box;
							float: left;
							margin: 0 0 0 -36px;
							padding: 0;
							border-radius: var(--rds-box);
							color: var(--clr-mid-gray);

							&:hover {
								cursor: pointer;
							}

							svg {
								width: 20px;
								height: 20px;
								margin: 8px;
							}
						}
					}

					.btns {
						height: 36px;
						display: block;
						float: left;
						white-space: nowrap;
						padding-left: 4px;
						display: none;
						opacity: 0;

						.ui-btn {
							margin: 0;
							/* border-radius: var(--rds-box); */
						}

						.ui-btn:first-child {
							margin-left: 0;
						}

						.ui-btn:last-child {
							margin-right: 0;
						}
					}

					.btns.tiny .ui-btn {
						padding: 0 1px;
						span {
							display: none;
						}
					}
				}

				.box.chartbox {
					position: relative;
					.wrp {
						position: relative;
						display: block;
						overflow: hidden;
						canvas {
							width: 100% !important;
							height: 100% !important;
						}
					}
				}

				.box.checkins-charts .wrp {
					display: block;
					overflow: hidden;
					.chart {
						display: flex;
						align-items: center;
						float: left;
						width: 50%;
						max-height: 180px;
						min-width: calc(250px - var(--mrg-box-min));
						box-sizing: border-box;
						/* background-color: #FFAAAA66; */
						padding-right: var(--mrg-box-min);
						.canvas {
							display: block;
							position: relative;
							width: 50%;
							min-width: 64px;
							max-height: 100%;
							box-sizing: border-box;
							padding-right: var(--mrg-box-half);
							/* background-color: #AAAAFF66; */

							canvas {
								min-width: 64px !important;
							}
							.total {
								display: flex;
								position: absolute;
								align-items: center;
								justify-content: center;
								top: 0;
								right: var(--mrg-box-half);
								bottom: 0;
								left: 0;
								div {
									display: block;
									text-align: center;
									font-size: 14px;
									line-height: 18px;
									font-weight: var(--wht-bold);
									color: var(--clr-dark-purple);
									b {
										display: block;
										font-size: 12px;
										line-height: 14px;
										text-transform: uppercase;
										color: var(--clr-dark-gray);
									}
								}
							}
						}
						.labels {
							display: block;
							width: 50%;
							/* background-color: #FFF; */
							color: var(--clr-dark-gray);

							div {
								display: block;
								font-size: 14px;
								line-height: 18px;
								font-weight: var(--wht-regular);
								padding: 3px 0;
								padding-left: 16px;
								span {
									display: block;
									width: 100%;
								}
								.txt {
									font-size: 12px;
									line-height: 14px;
									text-transform: uppercase;
									font-weight: var(--wht-bold);
								}
								b { color: var(--clr-dark-purple); }
							}

							div::before,
							.color {
								content: "";
								display: block;
								float: left;
								width: 8px;
								height: 8px;
								margin: 3px 0 0 -16px;
								border-radius: 4px;
								background-color: var(--clr-dark-gray);
							}

							div._green::before {
								background-color: var(--clr-green);
							}

							div._yellow::before {
								background-color: var(--clr-yellow);
							}

							div._purple::before {
								background-color: var(--clr-purple);
							}

						}
					}
					.chart:nth-child(2) {
						padding-right: 0;
						padding-left: var(--mrg-box-min);
						/* background-color: #AAFFAA66; */
						.canvas {
							padding-right: 0;
							padding-left: var(--mrg-box-half);
							.total {
								right: 0;
								left: var(--mrg-box-half);
							}
						}
						.labels {
							text-align: right;
							div {
								padding-left: 0;
								padding-right: 16px;
							}
							div::before {
								float: right;
								margin: 3px -16px 0 0;
							}
						}
					}
					.chart.line {
						width: 100%;
						padding: 0;
					}
				}

				.box.eventdet .wrp {
					display: flex;
					justify-content: space-between;
					align-items: start;
					.desc {
						width: 100%;
						max-width: 440px;
						box-sizing: border-box;
						padding-right: var(--mrg-box-half);
						/* background-color: #FFAAAA33; */
					}
					.info {
						display: grid;
						box-sizing: border-box;
						width: 100%;
						/* background-color: #AAFFAA33; */
						grid-template-columns: 23% 23% 23% 31%;
						grid-template-rows: auto auto;

						.cell {
							display: table-cell;
							width: auto;
							padding: 0 var(--mrg-box-min) var(--mrg-box-half);

							.label {
								position: relative;

								i {
									display: inline-block;
									margin: 0 2px 0 0;
									vertical-align: middle;
								}

								.ui-btn {
									display: block;
									position: absolute;
									width: 20px;
									height: 20px;
									top: 0;
									right: 0;
									margin: 0;
									padding: 0;
									border: none;
									i {
										display: block;
										width: 20px;
										height: 20px;
										margin: 0;
										padding: 0;
										color: var(--clr-mid-gray) !important;
									}
								}

								.ui-btn:hover i {
									color: var(--clr-purple) !important;
								}
							}

							a {
								color: var(--clr-dark-purple);
							}
						}

						.cell.tiny {
							font-size: 12px;
							line-height: 16px;
							font-weight: var(--wht-bold);
						}

						.cell._start {
							grid-row: 1;
							grid-column: 1;
							.label i { color: var(--clr-green); }
						}

						.cell._end {
							grid-row: 1;
							grid-column: 2;
							.label i { color: var(--clr-red); }
						}

						.cell._sts {
							grid-row: 1;
							grid-column: 3;
							.label i { color: var(--clr-green); }
							.ui-pill {
								vertical-align: baseline;
							}
						}

						.cell._addr {
							grid-row: 1;
							grid-column: 4;
							.label i { color: var(--clr-blue); }
						}

						.cell._type {
							grid-row: 2;
							grid-column: 1;
							padding-bottom: 0;
							.label i { color: var(--clr-blue); }
						}

						.cell._categ {
							grid-row: 2;
							grid-column: 2;
							padding-bottom: 0;
							.label i { color: var(--clr-green); }
						}

						.cell._pax {
							grid-row: 2;
							grid-column: 3;
							padding-bottom: 0;
							.label i { color: var(--clr-blue); }
						}

						.cell._hsite {
							grid-row: 2;
							grid-column: 4;
							padding-bottom: 0;
							.label i { color: var(--clr-green); }
						}

					}

				}

				.box.rsvp-chart {
					.wrp {
						display: block;

						.stats {
							position: relative;
							font-size: 16px;
							line-height: 24px;
							padding: var(--mrg-box-half) 0 0;

							.tit, .val {
								width: 50%;
								float: left;
							}
							.right {
								text-align: right;
								float: right;
							}
							.tit {
								font-weight: var(--wht-bold);
								color: var(--clr-dark-gray);
							}
							.right.tit {
								font-size: 14px;
								text-transform: uppercase;
							}
							.val {
								font-weight: var(--wht-regular);
								b { color: var(--clr-dark-purple); }
								._sep { color: var(--clr-mid-gray); }
							}
							.bar {
								padding: var(--mrg-box-min) 0;
								clear: both;
								.bg {
									display: block;
									width: 100%;
									height: 4px;
									border-radius: 4px;
									box-shadow: inset 0 1px 2px #b1aeb64d;
									clear: both;
									.ui-progress {
										width: 100%;
									}
								}
							}
						}

						.rsvp {
							display: flex;
							flex-wrap: wrap;
							clear: both;
							padding-top: var(--mrg-box-min);

							.label {
								display: block;
								width: 25%;
								height: 48px;
								white-space: nowrap;
								font-size: 14px;
								line-height: 20px;
								color: var(--clr-black);
								box-sizing: border-box;
								padding: 4px 4px 4px 50px;
								margin-top: var(--mrg-box-min);
								overflow: hidden;
								i {
									display: block;
									width: 40px;
									height: 40px;
									padding: 4px;
									float: left;
									margin: -4px 0 0 -50px;
									color: var(--clr-purple);
								}
								.tit {
									font-weight: var(--wht-bold);
									color: var(--clr-dark-gray);
								}
								._sep { color: var(--clr-mid-gray); }
							}

							.label._ok i { color: var(--clr-purple); }
							.label._yes i { color: var(--clr-green); }
							.label._mbe i { color: var(--clr-yellow); }
							.label._no i { color: var(--clr-red); }

						}

						.rsvp.half .label{
							width: 50%;
						}
					}
				}

				.box.tickets-table .wrp{
					.scroll {
						display: block;
						padding: 0 0 var(--mrg-box-half);
						overflow: hidden;
						overflow-x: auto;
						table {
							width: 100%;
							tr th {
								height: 20px;
								padding: 6px 16px 6px 6px;
								font-size: 12px;
								font-weight: var(--wht-bold);
								line-height: 20px;
								text-transform: uppercase;
								white-space: nowrap;

								span::before {
									content: "";
									display: inline-block;
									width: 8px;
									height: 8px;
									margin: 0 6px 0 0;
									border-radius: 4px;
									background-color: var(--clr-dark-gray);
								}

								span._red::before { background-color: var(--clr-red); }
								span._amber::before { background-color: var(--clr-amber); }
								span._orange::before { background-color: var(--clr-orange); }
								span._yellow::before { background-color: var(--clr-yellow); }
								span._lime::before { background-color: var(--clr-lime); }
								span._green::before { background-color: var(--clr-green); }
								span._turquise::before { background-color: var(--clr-turquise); }
								span._acqua::before { background-color: var(--clr-acqua); }
								span._blue::before { background-color: var(--clr-blue); }
								span._purple::before { background-color: var(--clr-purple); }
								span._violet::before { background-color: var(--clr-violet); }
								span._pink::before { background-color: var(--clr-pink); }

							}
							tr td {
								height: 20px;
								padding: 6px 16px 6px 6px;
								font-size: 14px;
								line-height: 20px;
								font-weight: var(--wht-regular);
								white-space: nowrap;
								color: var(--clr-black);
								border-bottom: solid 2px var(--clr-light-gray);

								.label {
									display: block;
									color: var(--clr-dark-gray);
									font-weight: bold;
								}

								span._sep {
									color: var(--clr-mid-gray);
								}
							}

							tr th:last-child(),
							tr td:last-child() {
								padding-right: 6px;
							}

							tr:last-child td {
								border-bottom: none;
							}
						}
					}

					.bar {
						display: block;
						padding: var(--mrg-box-min) 0;
						.grp {
							display: block;
							width: 100%;
							height: 4px;
							border-radius: 4px;
						}
					}
				}

				.empty {
					height: 320px;
					width: 100%;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					gap: 12px;

					span:first-child {
						height: 60%;
						color: var(--clr-purple);

						svg {
							width: 100%;
							height: 100%;
							object-fit: contain;
						}
					}

					span:last-child {
					}
				}

				.images-empty {
					height: 500px;
					width: 100%;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					gap: 12px;

					span:first-child {
						height: 60%;
						color: var(--clr-purple);

						svg {
							width: 100%;
							height: 100%;
							object-fit: contain;
						}
					}

					span:last-child {
					}
				}

				.clickable {
					cursor: pointer;
				}

				.ui-btn:disabled {
					cursor: not-allowed;
					opacity: .6;
				}

				.switch-wrapper {
					display: flex;
					align-items: center;
					gap: 8px;

					.switch {
						position: relative;
						width: 54px !important;
						height: 30px;

						padding: unset;
					}

					.switch input {
						opacity: 0;
						width: 0;
						height: 0;
					}

					.slider {
						position: absolute;
						cursor: pointer;
						top: 0;
						left: 0;
						right: 0;
						bottom: 0;
						background-color: #ccc;
						transition: 0.4s;
						border-radius: 34px;
					}

					.slider:before {
						position: absolute;
						content: "";
						height: 22px;
						width: 22px;
						left: 4px;
						bottom: 4px;
						background-color: white;
						transition: 0.4s;
						border-radius: 50%;
					}

					input:checked + .slider {
						background-color: var(--clr-green);
					}

					input:checked + .slider:before {
						transform: translateX(24px);
					}

					.switch-label {
						margin-bottom: var(--mrg-form-component);
						cursor: pointer;
					}
				}
			}

			#loader {
				display: none;
			}
		}
	}

	#body.htmx-request,
	#body.ajax-request {
		#wrp {
			#content {
				opacity: 0;
				transition: none;
			}

			#loader {
				display: block;
				position: absolute;
				top: 50%;
				right: 50%;
				margin: -32px -32px 0 0;
				width: 64px;
				height: 64px;
				color: var(--clr-mid-gray);
				animation: rotation 1s linear infinite;
			}

		}
	}
}

body.loading {
	#header .title { opacity: 0; }
	#menu { opacity: 0; }
	#submenu { opacity: 0; }
	#body #wrp #content { opacity: 0; }
}

body.raw {
	#menu { display: none; }
	#submenu { display: none; }
	#body {
		left: 0;
		bottom: 0;
		border-radius: 0;
	}
}

body#pglogin {
	#header .title {
		display: none;
	}

	#wrp #content {
		margin:0 auto;
		max-width: 768px;
		.row.loginbx {
			display: flex;
			align-items: center;
			margin: var(--mrg-box-full) 0 0;
			/* background-color: #FFF; */
			.img {
				width: 100%;
				max-width: 346px;
				/* min-width: 200px; */
				svg {
					width: 100%;
				}
			}

			.formwrp {
				display: block;
				width: 100%;
				min-width: 300px;
				box-sizing: border-box;
				form {
					width: 100%;
					box-sizing: border-box;
					padding: 0 var(--mrg-box-half) 0 32px;
					.irow {
						.pswhelp {
							display: block;
							float: left;
							cursor: pointer;
							white-space: nowrap;
							font-weight: var(--wht-bold);
							color: var(--clr-blue);
							text-decoration: underline;
							margin: 8px 8px 0 0;
						}
					}
					input {
						color: var(--clr-dark-purple);
					}
				}

				form#recoverform {
					display: none;
				}
			}
		}
	}

}

/* Margin */

.m-0 { margin: 0px !important; }
.mt-0 { margin-top: 0px !important; }
.mb-0 { margin-bottom: 0px !important; }
.ml-0 { margin-left: 0px !important; }
.mr-0 { margin-right: 0px !important; }

.m-2 { margin: 2px !important; }
.mt-2 { margin-top: 2px !important; }
.mb-2 { margin-bottom: 2px !important; }
.ml-2 { margin-left: 2px !important; }
.mr-2 { margin-right: 2px !important; }

.m-4 { margin: 4px !important; }
.mt-4 { margin-top: 4px !important; }
.mb-4 { margin-bottom: 4px !important; }
.ml-4 { margin-left: 4px !important; }
.mr-4 { margin-right: 4px !important; }

.m-6 { margin: 6px !important; }
.mt-6 { margin-top: 6px !important; }
.mb-6 { margin-bottom: 6px !important; }
.ml-6 { margin-left: 6px !important; }
.mr-6 { margin-right: 6px !important; }

.m-8 { margin: 8px !important; }
.mt-8 { margin-top: 8px !important; }
.mb-8 { margin-bottom: 8px !important; }
.ml-8 { margin-left: 8px !important; }
.mr-8 { margin-right: 8px !important; }

.m-10 { margin: 10px !important; }
.mt-10 { margin-top: 10px !important; }
.mb-10 { margin-bottom: 10px !important; }
.ml-10 { margin-left: 10px !important; }
.mr-10 { margin-right: 10px !important; }

.m-12 { margin: 12px !important; }
.mt-12 { margin-top: 12px !important; }
.mb-12 { margin-bottom: 12px !important; }
.ml-12 { margin-left: 12px !important; }
.mr-12 { margin-right: 12px !important; }

.m-16 { margin: 16px !important; }
.mt-16 { margin-top: 16px !important; }
.mb-16 { margin-bottom: 16px !important; }
.ml-16 { margin-left: 16px !important; }
.mr-16 { margin-right: 16px !important; }

.m-20 { margin: 20px !important; }
.mt-20 { margin-top: 20px !important; }
.mb-20 { margin-bottom: 20px !important; }
.ml-20 { margin-left: 20px !important; }
.mr-20 { margin-right: 20px !important; }

.m-24 { margin: 24px !important; }
.mt-24 { margin-top: 24px !important; }
.mb-24 { margin-bottom: 24px !important; }
.ml-24 { margin-left: 24px !important; }
.mr-24 { margin-right: 24px !important; }

.m-32 { margin: 32px !important; }
.mt-32 { margin-top: 32px !important; }
.mb-32 { margin-bottom: 32px !important; }
.ml-32 { margin-left: 32px !important; }
.mr-32 { margin-right: 32px !important; }

.m-64 { margin: 64px !important; }
.mt-64 { margin-top: 64px !important; }
.mb-64 { margin-bottom: 64px !important; }
.ml-64 { margin-left: 64px !important; }
.mr-64 { margin-right: 64px !important; }

.m-84 { margin: 84px !important; }
.mt-84 { margin-top: 84px !important; }
.mb-84 { margin-bottom: 84px !important; }
.ml-84 { margin-left: 84px !important; }
.mr-84 { margin-right: 84px !important; }

.m-128 { margin: 128px !important; }
.mt-128 { margin-top: 128px !important; }
.mb-128 { margin-bottom: 128px !important; }
.ml-128 { margin-left: 128px !important; }
.mr-128 { margin-right: 128px !important; }

/* Padding */

.p-0 { padding: 0px !important; }
.pt-0 { padding-top: 0px !important; }
.pb-0 { padding-bottom: 0px !important; }
.pl-0 { padding-left: 0px !important; }
.pr-0 { padding-right: 0px !important; }

.p-2 { padding: 2px !important; }
.pt-2 { padding-top: 2px !important; }
.pb-2 { padding-bottom: 2px !important; }
.pl-2 { padding-left: 2px !important; }
.pr-2 { padding-right: 2px !important; }

.p-4 { padding: 4px !important; }
.pt-4 { padding-top: 4px !important; }
.pb-4 { padding-bottom: 4px !important; }
.pl-4 { padding-left: 4px !important; }
.pr-4 { padding-right: 4px !important; }

.p-6 { padding: 6px !important; }
.pt-6 { padding-top: 6px !important; }
.pb-6 { padding-bottom: 6px !important; }
.pl-6 { padding-left: 6px !important; }
.pr-6 { padding-right: 6px !important; }

.p-8 { padding: 8px !important; }
.pt-8 { padding-top: 8px !important; }
.pb-8 { padding-bottom: 8px !important; }
.pl-8 { padding-left: 8px !important; }
.pr-8 { padding-right: 8px !important; }

.p-10 { padding: 10px !important; }
.pt-10 { padding-top: 10px !important; }
.pb-10 { padding-bottom: 10px !important; }
.pl-10 { padding-left: 10px !important; }
.pr-10 { padding-right: 10px !important; }

.p-12 { padding: 12px !important; }
.pt-12 { padding-top: 12px !important; }
.pb-12 { padding-bottom: 12px !important; }
.pl-12 { padding-left: 12px !important; }
.pr-12 { padding-right: 12px !important; }

.p-16 { padding: 16px !important; }
.pt-16 { padding-top: 16px !important; }
.pb-16 { padding-bottom: 16px !important; }
.pl-16 { padding-left: 16px !important; }
.pr-16 { padding-right: 16px !important; }

.p-20 { padding: 20px !important; }
.pt-20 { padding-top: 20px !important; }
.pb-20 { padding-bottom: 20px !important; }
.pl-20 { padding-left: 20px !important; }
.pr-20 { padding-right: 20px !important; }

.p-24 { padding: 24px !important; }
.pt-24 { padding-top: 24px !important; }
.pb-24 { padding-bottom: 24px !important; }
.pl-24 { padding-left: 24px !important; }
.pr-24 { padding-right: 24px !important; }

.p-32 { padding: 32px !important; }
.pt-32 { padding-top: 32px !important; }
.pb-32 { padding-bottom: 32px !important; }
.pl-32 { padding-left: 32px !important; }
.pr-32 { padding-right: 32px !important; }

.p-64 { padding: 64px !important; }
.pt-64 { padding-top: 64px !important; }
.pb-64 { padding-bottom: 64px !important; }
.pl-64 { padding-left: 64px !important; }
.pr-64 { padding-right: 64px !important; }

.p-84 { padding: 84px !important; }
.pt-84 { padding-top: 84px !important; }
.pb-84 { padding-bottom: 84px !important; }
.pl-84 { padding-left: 84px !important; }
.pr-84 { padding-right: 84px !important; }

.p-128 { padding: 128px !important; }
.pt-128 { padding-top: 128px !important; }
.pb-128 { padding-bottom: 128px !important; }
.pl-128 { padding-left: 128px !important; }
.pr-128 { padding-right: 128px !important; }

/* Alignment */
.txt-center {
	text-align: center;
}

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

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

/* Media */

@media (max-width: 1600px) {
	html, body {
		#body #wrp #content {
			.row.table-wrp {
				.cell-evt-client {
					max-width: 120px;
				}

				.cell-evt-location {
					max-width: 100px;
				}
			}
		}
	}
}

@media (max-width: 1500px) {
	html, body {
		#body #wrp #content {
			.row.table-wrp {
				.cell-evt-name {
					max-width: 150px;
				}
			}
		}
	}
}

@media (max-width: 1400px) {

	html, body {
		#body #wrp #content {
			.box.eventdet .wrp {
				.desc { max-width: 300px; }
				.info {
					grid-template-columns: 30% 30% 40%;
					grid-template-rows: auto auto auto;
					.cell._start { grid-row: 1; grid-column: 1; padding-bottom: var(--mrg-box-half); }
					.cell._end { grid-row: 1; grid-column: 2; padding-bottom: var(--mrg-box-half); }
					.cell._type { grid-row: 2; grid-column: 1; padding-bottom: var(--mrg-box-half); }
					.cell._sts { grid-row: 2; grid-column: 2; padding-bottom: var(--mrg-box-half); }
					.cell._categ { grid-row: 3; grid-column: 1; padding-bottom: 0;}
					.cell._pax { grid-row: 3; grid-column: 2; padding-bottom: 0;}
					.cell._addr { grid-row: 1; grid-column: 3; padding-bottom: var(--mrg-box-half); }
					.cell._hsite { grid-row: 2; grid-column: 3; padding-bottom: var(--mrg-box-half); }
				}
			}

			.row.table-wrp {
				.cell-evt-category {
					max-width: 100px;
				}
			}
		}
	}

}

@media (max-width: 1024px) {

	:root {
		--mrg-wrp-full: 24px;
		--mrg-wrp-half: 12px;

		--mrg-box-full: 32px;
		--mrg-box-half: 16px;
		--mrg-box-min: 8px;
	}

	.ui-steps .step .text {
		font-size: 14px;
	}

	html, body {

		#header {
			padding: 0 0 0 72px;

			#logo {
				width: 72px;
				margin-left: -72px;
			}
		}

		#submenu {
			left: 72px;
		}

		#menu	{
			width: 72px;

			.btn {
				width: 72px;
				i {
					width:52px;
				}
			}

			.off {
				width: 72px;
			}
		}

		#body	{
			left: 72px;

			#wrp #content {
				.row.box .top{
					font-size: 14px;
				}

				.row.table-wrp table {
					thead tr th._hide-1{ display: none; }
					tbody tr td._hide-1{ display: none; }
					tfoot tr td._hide-1{ display: none; }
				}

				.box.eventdet .wrp {
					display: block;
					.desc {
						display: block;
						width: auto;
						max-width: initial;
						padding: 0 0 var(--mrg-box-half);
					}
					.info {
						grid-template-columns: 23% 23% 23% 31%;
						grid-template-rows: auto auto;
						.cell._start { grid-row: 1; grid-column: 1; padding-bottom: var(--mrg-box-half); }
						.cell._end { grid-row: 1; grid-column: 2; padding-bottom: var(--mrg-box-half); }
						.cell._sts { grid-row: 1; grid-column: 3; padding-bottom: var(--mrg-box-half); }
						.cell._addr { grid-row: 1; grid-column: 4; padding-bottom: var(--mrg-box-half); }
						.cell._type { grid-row: 2; grid-column: 1; padding-bottom: 0; }
						.cell._categ { grid-row: 2; grid-column: 2; padding-bottom: 0; }
						.cell._pax { grid-row: 2; grid-column: 3; padding-bottom: 0; }
						.cell._hsite { grid-row: 2; grid-column: 4; padding-bottom: 0; }
					}
				}
			}
		}
	}

	body.raw #body {
		left: 0;
		bottom: 0;
		border-radius: 0;
	}

}

@media (max-width: 960px) {
	html, body {
		#body #wrp #content .group {
			display: block;
			justify-content: initial;
			align-items: initial;

			&.overflow {
				display: flex;
                flex-wrap: nowrap;
                overflow-y: auto;
			}

			.row {
				display: block;
				width: initial;
				height: initial;
				min-height: initial;
			}
		}
	}
}

@media (max-width: 870px) {

	html, body {
		#body #wrp #content .box.eventdet .wrp {
			.info {
				grid-template-columns: 30% 30% 40%;
				grid-template-rows: auto auto auto;
				.cell._start { grid-row: 1; grid-column: 1; padding-bottom: var(--mrg-box-half); }
				.cell._end { grid-row: 1; grid-column: 2; padding-bottom: var(--mrg-box-half); }
				.cell._type { grid-row: 2; grid-column: 1; padding-bottom: var(--mrg-box-half); }
				.cell._sts { grid-row: 2; grid-column: 2; padding-bottom: var(--mrg-box-half); }
				.cell._categ { grid-row: 3; grid-column: 1; padding-bottom: 0;}
				.cell._pax { grid-row: 3; grid-column: 2; padding-bottom: 0;}
				.cell._addr { grid-row: 1; grid-column: 3; padding-bottom: var(--mrg-box-half); }
				.cell._hsite { grid-row: 2; grid-column: 3; padding-bottom: var(--mrg-box-half); }
			}
		}
	}

}

@media (max-width: 640px) {

	:root {
		--mrg-wrp-full: 16px;
		--mrg-wrp-half: 8px;

		--mrg-box-full: 24px;
		--mrg-box-half: 12px;
		--mrg-box-min: 6px;
	}

	.ui-steps .step .text {
		display: none;
	}

	html, body {

		#header #logo a {
			margin: 16px 0 0 11px;
		}

		#submenu{
			left: 0;
			bottom: 72px;
			border-radius: 0;

			.blocker {
				border-radius: 0;
			}
		}

		#menu {
			width: 100%;
			height: 72px;
			line-height: 72px;
			top: initial;
			bottom: 0;
			text-align: center;

			.btn {
				display: inline-block;
				vertical-align: middle;
				width: 76px;
				margin: 0 12px;
				i {
					width:76px;
				}
			}

			.off {
				display: none;
			}
		}

		#body {
			top: 72px;
			right: 0;
			bottom: 72px;
			left: 0;
			border-radius: 0;

			#wrp #content {

				.row.table-wrp table {
					thead tr th._hide-2{ display: none; }
					tbody tr td._hide-2{ display: none; }
					tfoot tr td._hide-2{ display: none; }
				}

				.box.eventdet .wrp .info {
					grid-template-columns: 50% 50%;
					grid-template-rows: auto auto auto auto;
					.cell._start { grid-row: 1; grid-column: 1; padding-bottom: var(--mrg-box-half); }
					.cell._end { grid-row: 1; grid-column: 2; padding-bottom: var(--mrg-box-half); }
					.cell._type { grid-row: 2; grid-column: 1; padding-bottom: var(--mrg-box-half); }
					.cell._sts { grid-row: 2; grid-column: 2; padding-bottom: var(--mrg-box-half); }
					.cell._categ { grid-row: 3; grid-column: 1; padding-bottom: var(--mrg-box-half); }
					.cell._pax { grid-row: 3; grid-column: 2; padding-bottom: var(--mrg-box-half); }
					.cell._addr { grid-row: 4; grid-column: 1; padding-bottom: 0; }
					.cell._hsite { grid-row: 4; grid-column: 2; padding-bottom: 0; }
				}

				.progress {
					display: block !important;
				}
			}
		}

	}

	body.raw #body {
		left: 0;
		bottom: 0;
		border-radius: 0;
	}

	body#pglogin {

		#wrp #content {
			max-width: 384px;
			.row.loginbx {
				display: block;
				.img {
					display: none;
				}

				.formwrp {
					width: 100%;
					min-width: initial;
					form {
						width: 100%;
						padding: var(--mrg-box-half);
					}
				}
			}
		}
	}

}

@media (max-width: 432px) {

	html, body {

		#body #wrp #content {
			.box.eventdet .wrp .info {
				grid-template-columns: 50% 50%;
				grid-template-rows: auto auto auto auto auto;
				.cell._start { grid-row: 1; grid-column: 1; padding-bottom: var(--mrg-box-half); }
				.cell._end { grid-row: 1; grid-column: 2; padding-bottom: var(--mrg-box-half); }
				.cell._type { grid-row: 2; grid-column: 1; padding-bottom: var(--mrg-box-half); }
				.cell._sts { grid-row: 2; grid-column: 2; padding-bottom: var(--mrg-box-half); }
				.cell._categ { grid-row: 3; grid-column: 1; padding-bottom: var(--mrg-box-half); }
				.cell._pax { grid-row: 3; grid-column: 2; padding-bottom: var(--mrg-box-half); }
				.cell._addr { grid-row: 4; grid-column: 1 / span 2; padding-bottom: var(--mrg-box-half); }
				.cell._hsite { grid-row: 5; grid-column: 1 / span 2; padding-bottom: 0; }
			}
		}

		#lbox {
			.center {
				height: 100%;

				.wrp {
					margin: 0;
					height: 100%;
					border-radius: 0;

					.cont {
						height: calc(100% - 48px);
					}
				}
			}

			.lbox-buttons {
				flex-direction: column;
				align-items: unset;

				.right {
					flex-direction: column;
					margin-top: 16px;
				}
			}
		}
	}

}

@keyframes rotation {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

/* Página Event Check-in */

body#event_checkin #form_search > div {
    position: relative;

	[type="submit"] {
		position: absolute;
		top: 0;
		right: 0;
	}
}

body#event_checkin #btn_camera_scan,
body#event_checkin #btn_face_scan,
body#event_checkin #btn_qr_code {
	width: 100%;
}

body#event_checkin #tb_check_guest {
	width: 100%;

	b {
		display: block;
		border-bottom: 1px solid;
		border-color: var(--clr-mid-gray);
		margin-bottom: 4px;
	}

	tr:has(b):not(:first-child) b {
		margin-top: 8px;
	}
}

@media (min-width: 961px) {

	body#event_checkin #btn_camera_scan,
	body#event_checkin #btn_face_scan,
	body#event_checkin #btn_qr_code {
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		align-items: center;
		align-content: center;
		width: 100%;
		height: 184px;

		i {
			height: 84px;

			svg {
				width: 84px;
				height: 84px;
			}
		}

		span {
			display: block;
			font-size: 16px;
			text-align: center;
			width: 100%;
		}
	}

}

#form_add_plusone {

	.campos-adulto,
	.idade-field {
		width: 100%;
		opacity: 1;
		max-height: 500px;
		transition: opacity 0.3s ease-in-out, max-height 0.3s ease-in-out;
	}

	.campos-adulto.hidden,
	.idade-field.hidden {
		opacity: 0;
		max-height: 0;
	}
}