@charset "utf-8";


/* --------------------------------------------------------------------------
   General
-------------------------------------------------------------------------- */

	img {
		border: none;
		max-width: 100%;
		height: auto;
	}

	a {
		text-decoration: none;
		color: #000;
		outline: none;
	}

	*:focus, *:invalid {
		outline: none;
		box-shadow: none;
	}

	body > #settings {
		display: none;
	}


/* --------------------------------------------------------------------------
   Inputs
-------------------------------------------------------------------------- */

	input::-moz-focus-inner,
	button::-moz-focus-inner {
		padding: 0 !important;
		border: none !important;
	}

	::placeholder {
		color: var(--grey-dc-color);
		opacity: .5;
	}


/* --------------------------------------------------------------------------
   Change the white to any color
-------------------------------------------------------------------------- */

	input:-webkit-autofill,
	input:-webkit-autofill:hover,
	input:-webkit-autofill:focus,
	input:-webkit-autofill:active {
		background-color: transparent !important;
		-webkit-background-clip: text;
		-webkit-text-fill-color: inherit;
		caret-color: inherit;
		box-shadow: none;
	}

	input[type="search"]::-webkit-search-cancel-button {
		display: none;
	}

	input[type="search"] {
		-webkit-appearance: none;
		appearance: none;
	}

	input[type="number"]::-webkit-outer-spin-button,
	input[type="number"]::-webkit-inner-spin-button {
		-webkit-appearance: none;
		margin: 0;
	}

	input[type="number"] {
		-moz-appearance: textfield;
	}

	input, textarea {

		outline: none;
		overflow: hidden;
		transition: var(--transition);
		border: var(--border-width) solid var(--grey-dc-color);
		border-radius: .25rem;
		background: none;
		color: var(--grey-28-color);
		height: 3rem;
		padding: .6875rem .875rem;
		font-size: 1rem;
		box-sizing: border-box;
		font-family: 'Inter', sans-serif;

		&:focus {
			border-color: var(--green-color);
			box-shadow: 0 0 0 .1875rem rgba(0, 150, 136, .08);
		}

		&::placeholder {
			color: var(--grey-b4-color);
		}

	}

	textarea {
		margin: 0;
		resize: none;
		height: 5rem;
	}


/* --------------------------------------------------------------------------
   Form
-------------------------------------------------------------------------- */

	form {

		display: flex;
		flex-direction: column;
		gap: 1.75rem;

		:where(input[disabled][type="text"], input[disabled][type="tel"], input[disabled][type="number"], input[disabled][type="email"], textarea[disabled]) {
			background: var(--grey-fo-color) !important;
			cursor: inherit;
			color: #000;
		}

		:where(input:focus, textarea:focus) {
			border: var(--border-width) solid var(--green-color);
		}

		label {

			&:has(.input-card) {

				position: relative;

				input {

					height: auto;
					padding-top: 2rem;
					font-size: 1.25rem;

					&:focus + span {
						color: var(--green-color);
					}

				}

				span {
					position: absolute;
					top: .5rem;
					left: .875rem;
					color: var(--grey-b4-color);
					font-size: .9rem;
				}

			}

			> span:first-child {
				margin-bottom: .625rem;
				display: flex;
				align-items: center;
				font-size: .9rem;
			}

			:where(textarea, input) {
				width: 100%;
			}


		}

		.double-field {

			display: flex;
			width: 100%;
			position: relative;

			> * {
				flex: 1;
				min-width: 0;
			}

			> *:first-child input {
				border-radius: .25rem 0 0 .25rem;
			}

			> *:last-child input {
				border-radius: 0 .25rem .25rem 0;
			}

			/* Use the first field border as the shared divider */
			> *:last-child:not(:focus-within):not(:has(.error)) input:not(.error) {
				border-left-color: transparent;
			}

			/* Let the second field draw the divider when active or invalid */
			&:has(> *:last-child:focus-within) > *:first-child input,
			&:has(> *:last-child.error) > *:first-child input,
			&:has(> *:last-child .error) > *:first-child input {
				border-right-color: transparent;
			}

		}

	}


/* --------------------------------------------------------------------------
   Form Errors
-------------------------------------------------------------------------- */

	.input-error {

		-webkit-appearance: none;
		border: var(--border-width) solid var(--red-color) !important;

		&[type="checkbox"]::before {
			background: var(--red-color);
		}

	}

	.error-block {
		color: var(--red-color);
		box-sizing: border-box;
		font-size: .875rem;
	}

	.target-error {
		border: var(--border-width) solid var(--red-color) !important;
	}


/* --------------------------------------------------------------------------
   Inline Edit
-------------------------------------------------------------------------- */

	span[data-role="inline-edit"] {

		position: relative;
		cursor: pointer;
		transition: var(--transition);
		border-radius: .25rem;
		padding: .375rem 1rem;
		margin: -.375rem -1rem;

		&:has(input.input-error) {
			background: var(--red-light-color);
		}

		&:focus-within, &:hover {
			background: var(--grey-e6-color);
		}

		input {
			height: inherit;
			border: none !important;
			padding: 0;
			box-shadow: inherit !important;
		}

	}


/* --------------------------------------------------------------------------
   Calendar and QR field and Loader
-------------------------------------------------------------------------- */

	label {

		&:has(> input.calendar),
		&:has(> input.barcode) {
			position: relative;
		}

		&:has(> input.calendar)::before,
		&:has(> input.barcode)::after {
			content: '';
			position: absolute;
			top: 50%;
			width: 2rem;
			height: 2rem;
			transform: translateY(-50%);
			pointer-events: none;
			z-index: 1;
			mask-repeat: no-repeat;
			mask-position: center;
			mask-size: contain;
		}

		&:has(> input.calendar) {

			&::before {
				left: .5rem;
				background-color: var(--grey-8c-color);
				mask-image: url('/i/frontend/employee/svg/singles/calendar.svg');
			}

			> input.calendar {
				cursor: pointer;
				padding-left: 3.2rem;
			}

		}

		&:has(> input.barcode):not(:has(.ui-autocomplete-loader)) {

			&::after {
				right: .5rem;
				background-color: var(--grey-dc-color);
				mask-image: url('/i/frontend/employee/svg/singles/qr-code.svg');
			}

			> input.barcode {
				padding-right: 3rem;
			}

		}

		&:has(.circle-loader.white) {
			background: none;
		}

		&:has(.circle-loader) input.barcode {
			background-image: none !important;
		}

	}


/* --------------------------------------------------------------------------
   Custom Input: CheckBox and radio
-------------------------------------------------------------------------- */

	label:where(.checkbox, .radio, .slider) {

		display: grid;
		grid-template-columns: 1.25rem minmax(0, 1fr);
		align-items: center;
		gap: .75rem;
		cursor: pointer;
		color: var(--grey-64-color);

		&:hover {

			span {
				color: #000 !important;
			}

			input:not(:disabled) {
				border-color: var(--green-color);
			}

			/*svg {
			color: var(--green-color) !important;
			}*/

		}

		svg, span, input {
			transition: var(--transition);
		}

		input {

			-webkit-appearance: none;
			appearance: none;
			margin: 0;
			padding: 0;
			width: 1.25rem;
			height: 1.25rem;
			display: grid;
			place-content: center;
			border-radius: .25rem;
			border: var(--border-width) solid var(--grey-b4-color);
			background: #FFF;
			cursor: pointer;
			box-sizing: border-box;

			&:focus-visible {
				outline: none;
				box-shadow: 0 0 0 .1875rem rgba(0, 150, 136, .1);
				border-color: var(--green-color);
			}

			&:disabled {
				cursor: not-allowed;
				background: var(--grey-fa-color);
				border-color: var(--grey-dc-color);
				opacity: .75;
			}

		}

	}


/* --------------------------------------------------------------------------
   Errors
-------------------------------------------------------------------------- */

	label:where(.checkbox, .radio) :where(input[type="checkbox"].checkbox-error, input[type="radio"].radio-error) {
		border-color: var(--red-color) !important;
		box-shadow: 0 0 0 .1875rem rgba(255, 82, 82, .08);
	}


/* --------------------------------------------------------------------------
   Custom Input: CheckBox
-------------------------------------------------------------------------- */

	label.checkbox {

		&.small {

			grid-template-columns: auto;

			:has(span) {
				grid-template-columns: auto auto;
			}

		}

		input {

			&::before {
				content: '';
				width: .625rem;
				height: .625rem;
				transform: scale(0);
				transition: var(--transition);
				box-shadow: inset 1rem 1rem #FFF;
				transform-origin: bottom left;
				clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
			}

			&:checked {

				border-color: var(--green-color);
				background: var(--green-color);

				&::before {
					transform: scale(1);
				}

			}

			&:disabled {

				&:checked {

					background: var(--grey-dc-color);
					border-color: var(--grey-dc-color);

					&::before {
						box-shadow: inset 1rem 1rem #FFF;
					}

				}

			}

		}

	}


/* --------------------------------------------------------------------------
   Custom Input: radio
-------------------------------------------------------------------------- */

	label.radio input {

		border-radius: 50%;

		&::before {
			content: '';
			width: .625rem;
			height: .625rem;
			border-radius: 50%;
			background: var(--green-color);
			transform: scale(0);
			transition: var(--transition);
		}

		&:checked {

			border-color: var(--green-color);

			&::before {
				transform: scale(1);
			}

		}

		&:disabled {

			&:checked {

				background: #FFF !important;
				border-color: var(--grey-dc-color);

				&::before {
					background: var(--grey-b4-color);
				}

			}

		}

	}


/* --------------------------------------------------------------------------
   Custom Input: Slider
-------------------------------------------------------------------------- */

	label.slider {

		grid-template-columns: max-content minmax(0, 1fr);
		gap: .75rem;

		&.small {

			grid-template-columns: auto;

			:has(span) {
				grid-template-columns: max-content auto;
			}

			input {

				width: 2rem;
				height: 1rem;

				&::before {
					width: .56rem;
					height: .56rem;
					left: .3rem;
				}

				&:checked::before {
					left: calc(100% - .56rem - .3rem);
				}

			}

		}

		&:hover span {
			color: #000;
		}

		span:first-child {
			margin-bottom: 0 !important;
		}

		input {

			position: relative;
			width: 2.75rem;
			height: 1.375rem;
			border: none;
			border-radius: 999rem;
			transform: translateY(0);
			background: var(--grey-dc-color);
			box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .04);
			transition: var(--transition);

			&::before {
				content: '';
				position: absolute;
				top: 50%;
				left: .4rem;
				z-index: 2;
				display: block;
				width: .825rem;
				height: .825rem;
				border-radius: 50%;
				background: #FFF;
				box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .18);
				transform: translate(0, -50%);
				transition: var(--transition);
			}

			&:checked {

				background: var(--green-color);
				box-shadow: 0 0 0 .1875rem rgba(0, 150, 136, .08);

				&::before {
					left: calc(100% - .825rem - .4rem);
				}

			}

			&:disabled {

				cursor: not-allowed;
				opacity: .7;

				&::before {
					background: #FFF;
					box-shadow: none;
				}

			}

		}

	}


/* --------------------------------------------------------------------------
   General elements
-------------------------------------------------------------------------- */

	/* Logo */

	.logo {

		display: inline-flex;
		align-items: center;
		font-size: 1.5rem;
		font-weight: 700;

		> span:nth-child(1) {
			display: none;
			color: var(--green-color);
		}

		> span:nth-child(2) {
			color: var(--green-color);
		}

		> span:last-child {
			color: #000;
		}

	}

	/* Buttons -> Default */

	.button {

		display: inline-flex;
		justify-content: center;
		align-items: center;
		gap: .5rem;
		height: 3rem;
		box-sizing: border-box;
		padding: .75rem 1.125rem;
		border-radius: .25rem;
		border: var(--border-width) solid var(--grey-e6-color);
		background: #FFF;
		color: var(--grey-64-color);
		text-align: center;
		text-decoration: none !important;
		font-size: 1rem;
		font-family: 'Inter', sans-serif;
		font-weight: 500;
		line-height: 1.2;
		cursor: pointer;
		transition: var(--transition);

		svg {
			width: 1.875rem;
			height: 1.875rem;
			color: currentColor;
			flex: 0 0 auto;
		}

		&:hover {
			border-color: var(--green-color);
			background: var(--green-light-color);
			color: var(--green-color);
		}

		&.disabled {
			pointer-events: none;
			cursor: default;
			opacity: .5;
			font-weight: 400;
		}

		/* Green Button */
		&.green {

			border-color: var(--green-color);
			background: var(--green-color);
			color: #FFF;

			&:hover {
				border-color: var(--green-color);
				background: var(--green-color);
				color: #FFF !important;
				box-shadow: 0 0 0 .1875rem rgba(0, 150, 136, .12);
			}

			&[data-action="completePrint"] {
				display: none;
				width: 100% !important;
			}

		}

		/* Title Green Button */
		&.green-title {

			background: var(--grey-fa-color);
			color: var(--green-color);
			border: var(--border-width) solid var(--grey-fo-color);

			&:hover {
				border-color: var(--green-color);
				background: var(--green-color);
				box-shadow: 0 0 0 .1875rem rgba(0, 150, 136, .12);
				color: #FFF;
			}

		}

		/* Grey Button */
		&.grey {

			border-color: var(--grey-e6-color);
			background: var(--grey-f5-color);
			color: var(--grey-64-color);

			&:hover {
				border-color: var(--grey-dc-color);
				background: var(--grey-fo-color);
				color: var(--grey-28-color) !important;
			}

		}

		/* With icon */
		&.with-icon {
			min-height: 2.5rem;
			padding: .5rem .75rem;
		}

	}

	/* Search block */

	label.search-field-block {

		display: block;
		position: relative;

		input {
			height: 2.75rem;
			background: var(--grey-fo-color);
			border: none;
			padding-left: 3.2rem;
			box-shadow: none;
		}

		input + svg {
			color: var(--grey-8c-color);
			position: absolute;
			left: .875rem;
			width: 1.875rem;
			height: 1.875rem;
			top: 50%;
			transform: translateY(-50%) scaleX(-1);
		}

	}

	/* Loader Circle */

	.circle-loader {

		width: 1.125rem;
		height: 1.125rem;
		border: .125rem solid var(--grey-e6-color);
		border-bottom-color: var(--green-color);
		border-radius: 50%;
		box-sizing: border-box;
		animation: rotation 1s linear infinite;
		margin: 0 auto;

		&.white {
			border: .125rem solid #FFF;
			border-bottom-color: var(--green-color);
		}

		&.auto-complete {
			position: absolute;
			right: 1rem;
			transform: translateY(-50%);
		}

	}


/* --------------------------------------------------------------------------
   Animations
-------------------------------------------------------------------------- */

	/* Loader Skeleton */

	[data-loader="skeleton"].loading {

		background: none !important;

		.control {
			display: none !important;
		}

		> * {
			position: relative;
			box-sizing: border-box;
			border: none !important;
		}

		.blur {
			width: 100%;
			height: 100%;
			position: absolute;
			left: 0;
			top: 0;
			z-index: 4;
			border-radius: .25rem;
			animation: skeleton 1s linear infinite alternate;
		}

	}

	/* Floating Message for notifications */

	#floating-message {

		position: fixed;
		z-index: 1000;
		box-sizing: border-box;
		bottom: 2.1875rem;
		left: 2.1875rem;
		width: fit-content;
		min-width: 12rem;
		max-width: min(32rem, calc(100vw - 4.375rem));
		padding: .875rem 1rem .875rem 1.5rem;
		background: #FFF;
		border-radius: .75rem;
		color: var(--grey-64-color);
		box-shadow: 0 .5rem 1.25rem rgba(0, 0, 0, .04);

		&::before {
			content: '';
			position: absolute;
			left: .625rem;
			top: .875rem;
			bottom: .875rem;
			width: .25rem;
			min-height: 1.5rem;
			border-radius: 999rem;
		}

		&.ok {

			background: var(--green-light-color);
			box-shadow: inset 0 0 0 1px rgba(0, 150, 136, .14),
				0 .5rem 1.25rem rgba(0, 0, 0, .035);

			&::before {
				background: var(--green-color);
			}

			header {
				color: var(--green-color);
			}

		}

		&.error {

			background: var(--red-light-color);
			box-shadow: inset 0 0 0 1px rgba(252, 85, 85, .14),
				0 .5rem 1.25rem rgba(0, 0, 0, .035);

			&::before {
				background: var(--red-color);
			}

			header {
				color: var(--red-color);
			}

		}

		> div {
			min-width: 0;
		}

		header {
			margin: 0 0 .25rem;
			font-size: .9375rem;
			font-weight: 600;
			line-height: 1.25;
		}

		section {

			margin: 0;
			color: var(--grey-64-color);
			font-size: .875rem;
			letter-spacing: .01rem;
			line-height: 1.35;

			ul {
				padding: 0;
				margin: .25rem 0 0;
				display: flex;
				flex-direction: column;
				gap: .25rem;
				list-style: none;
			}

		}

	}

	/* Dialog */

	dialog > section {

		width: 30rem;
		box-sizing: border-box;

		/* Header */
		> header {

			height: var(--dialog-header-height);
			width: 100%;
			font-weight: 600;
			font-size: 1.25rem;
			letter-spacing: .04rem;
			padding: .875rem 1.875rem;
			background: var(--dialog-header-background);
			border-top-left-radius: .5rem;
			border-top-right-radius: .5rem;
			display: grid;
			gap: 1rem;
			grid-template-columns: 1fr auto;
			align-items: center;
			box-sizing: border-box;

			> div {

				&:has(.status-block) {

					display: flex;
					gap: 1rem;
					overflow: inherit;
					text-overflow: inherit;
					white-space: inherit;

					> div:nth-child(1) {
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}

				}

				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;

			}

		}

		/* Bread Crumbs */
		.bread-crumbs {

			background: var(--grey-fa-color);
			padding: 0 1.875rem .875rem 1.875rem;
			display: flex;
			align-items: center;
			gap: .875rem;
			background: var(--dialog-header-background);

			> div {

				display: flex;
				align-items: center;
				gap: .5rem;
				font-size: .875rem;

				&.selected {

					span {

						&:first-child {
							color: #FFF !important;
							background: var(--green-color);
						}

						&:last-child {
							color: #000;
							display: flex;
						}

					}

				}

				&.done span {

					font-size: 0 !important;
					border: var(--border-width) solid rgba(0, 150, 136, .32);
					box-shadow: 0 .375rem 1rem rgba(0, 150, 136, .13),
						0 0 0 .25rem rgba(0, 150, 136, .06),
						inset 0 1px 0 rgba(255, 255, 255, .8);

					&::before {
						content: '';
						width: .75rem;
						height: .75rem;
						transform: scale(1);
						transition: var(--transition);
						box-shadow: inset 1rem 1rem var(--green-color);
						transform-origin: bottom left;
						clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
					}

				}

				span {

					&:first-child {
						display: flex;
						align-items: center;
						justify-content: center;
						width: 1.5rem;
						height: 1.5rem;
						font-size: .75rem;
						color: var(--grey-8c-color);
						background: var(--grey-fo-color);
						border-radius: 50%;
						font-weight: 600;
					}

					&:last-child {
						color: var(--grey-8c-color);
						display: none;
					}

				}

			}

			> span {
				height: var(--line-width);
				width: 1.5rem;
				margin-top: 1px;
				border-bottom: var(--border-width) dashed var(--grey-8c-color);
			}

		}

		/* Details */
		.details-in-header {

			display: grid;
			grid-template-columns: minmax(0, 1fr) auto;
			align-items: center;
			border-bottom: var(--border-width) solid var(--grey-e6-color);
			padding: 1rem 1.875rem;
			box-sizing: border-box;

			main {

				display: flex;
				flex-wrap: nowrap;
				gap: clamp(.5rem, 1.5vw, 1.875rem);
				align-items: center;
				overflow-x: auto;
				scrollbar-width: none;
				overscroll-behavior: contain;

				/* Hide scrollbar for Chrome, Safari and Opera */
				&::-webkit-scrollbar {
					display: none;
				}

				> div {

					min-width: 0;
					max-width: 16rem;
					position: relative;

					&:not(:last-child) {

						padding-right: 1.875rem;

						&::after {
							content: '';
							position: absolute;
							top: 50%;
							right: 0;
							transform: translateY(-50%);
							width: var(--line-width);
							height: 2.5rem;
							background: var(--grey-f5-color);
						}

					}

					header {
						text-transform: uppercase;
						font-size: .7rem;
						font-weight: 600;
						letter-spacing: .04em;
						color: var(--grey-8c-color);
						margin-bottom: .35rem;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}

					div, a {
						font-size: .875rem;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}

					a {
						color: var(--green-color);
					}

					span.kind {
						color: var(--grey-b4-color);
						padding-left: .5rem;
					}

					span.type::first-letter {
						text-transform: capitalize;
					}

				}

			}

		}

		/* Form */
		form {

			width: 100%;
			gap: 1.75rem;
			box-sizing: border-box;

			div.double {
				display: grid;
				grid-template-columns: repeat(2, 1fr);
				gap: 1.75rem;
				box-sizing: border-box;
			}

		}

		> section {

			margin: 1.25rem 1.875rem 1.875rem 1.875rem;
			box-sizing: border-box;

			aside {

				display: grid;
				grid-template-columns: max-content 1fr;
				row-gap: .625rem;
				column-gap: 1rem;
				margin-bottom: 1.75rem;
				align-items: center;

				header {
					color: var(--grey-b4-color);
				}

				div {

					color: #000;

					&:last-child::first-letter {
						text-transform: capitalize;
					}

				}

				.kind {
					color: var(--grey-b4-color) !important;
					margin-left: .5rem;
				}

				a {
					color: var(--green-color);
				}

			}

		}

		.description {
			line-height: 150%;
		}

	}

	/* General Menu */

	.general-menu {

		overflow-y: hidden;
		display: flex;
		flex-direction: column;
		flex-grow: 1;
		gap: .5rem;
		overscroll-behavior: contain;

		> div {

			&:not(.multi) {
				position: relative;
				display: flex;
				align-items: center;
			}

			padding-inline: .5rem;

			a {

				position: relative;
				display: flex;
				align-items: center;
				gap: 1.25rem;
				width: 100%;
				border-radius: .375rem;
				padding: .25rem .625rem;
				box-sizing: border-box;
				color: var(--grey-64-color);
				transition: var(--transition);

				&::before {
					content: "";
					position: absolute;
					left: 0;
					top: .5rem;
					bottom: .5rem;
					width: .1875rem;
					border-radius: 0 .25rem .25rem 0;
					background: var(--green-color);
					opacity: 0;
					transition: var(--transition);
				}

				&:hover,
				&.selected {

					background: #FFF;
					color: #000;

					svg:first-child {
						color: var(--green-color);
					}

				}

				&:hover {
					box-shadow: 0 .25rem .875rem rgba(0, 0, 0, .035);
				}

				&.selected {

					font-weight: 500;
					box-shadow: 0 .25rem .875rem rgba(0, 150, 136, .06);

					&::before {
						opacity: 1;
					}

				}

				span:not(.counter) {
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					display: flex;
					min-width: 0;
				}

				svg:first-child {
					width: 2.5rem;
					height: 2.5rem;
					color: var(--grey-b4-color);
					flex-shrink: 0;
					transition: var(--transition);
				}

			}

		}

		/* Multi */
		.multi {

			display: flex;
			flex-direction: column;
			border-radius: .5rem;
			gap: .3rem;

			&.opened {

				background: var(--grey-f5-color);
				margin-inline: .5rem;

				> a {

					display: flex;

					&:hover,
					&.selected {
						background: #FFF;
					}

					&:last-child {
						margin-bottom: .5rem;
					}

				}

				header {

					margin-inline: -.5rem;

					a {

						&:hover,
						&.selected {
							background: #FFF;
						}

						svg:first-child {
							color: var(--green-color);
						}

						svg.arrow {
							color: var(--green-color);
							transform: rotate(90deg);
						}

					}

				}

			}

			> a {
				display: none;
			}

			header a {

				span {
					color: inherit;
					font-weight: normal;
					flex-grow: 1;
				}

				span, svg.arrow {
					display: block;
				}

				&:hover {

					svg.arrow {
						color: var(--green-color);
					}

				}

			}

		}

	}

	/* Tabs menu */

	nav[data-tab="control"] {

		background: var(--grey-fo-color);
		overflow-x: auto;
		display: inline-flex;
		align-items: center;
		font-weight: 400;
		gap: 0;
		padding: 0 .5rem;
		border-radius: .375rem;
		box-sizing: border-box;

		a {

			position: relative;
			color: #000;
			display: flex;
			align-items: center;
			padding: .75rem .9rem;
			white-space: nowrap;
			border-radius: 0;
			background: transparent;
			transition: color .2s;

			&:hover {
				color: var(--green-color);
				background: transparent;
			}

			&[data-status="active"] {

				color: var(--green-color);
				background: transparent;
				font-weight: 500;

				&::after {
					content: "";
					position: absolute;
					left: .9rem;
					right: .9rem;
					bottom: 1px;
					height: .125rem;
					border-radius: 999px 999px 0 0;
					background: var(--green-color);
				}

			}

			span {
				color: var(--grey-b4-color);
			}

		}

	}

	[data-tab="pane"] {
		display: none;
	}

	[data-status="active"] {
		display: block;
	}

	/* Tabs filter */

	nav[data-tab="filter"] {

		--active-left: 0rem;
		--active-width: 0rem;
		position: relative;
		display: flex;
		width: max-content;
		align-items: center;
		font-weight: 400;
		gap: .25rem;
		padding: .25rem;
		border-radius: .375rem;
		box-sizing: border-box;
		border: var(--border-width) solid var(--grey-dc-color);

		&.no-animation::before {
			transition: none !important;
		}

		&::before {
			content: '';
			position: absolute;
			top: .25rem;
			left: 0;
			width: var(--active-width);
			height: calc(100% - .5rem);
			border-radius: .25rem;
			background: var(--green-light-color);
			transform: translateX(var(--active-left));
			transition: transform .28s ease, width .28s ease;
			z-index: 0;
		}

		a {

			position: relative;
			z-index: 1;
			color: var(--grey-8c-color);
			border-radius: .25rem;
			display: flex;
			align-items: center;
			padding: .5rem;
			background: transparent;
			transition: color .2s ease;

			&:hover {
				color: #000;
			}

			&[data-status="active"] {
				color: #000;
				background: transparent;
			}

		}

	}

	/* Buttons Pane in Form */

	form footer {

		width: 100% !important;
		display: flex;
		justify-content: space-between;
		gap: 3.5rem;

		a {

			color: var(--grey-e6-color);

			svg {
				width: 5rem;
				height: 5rem;
				color: var(--grey-e6-color);
				margin-right: 1rem;
			}

		}

	}

	/* List */

	.list {

		&:not(#list-messages, #list-users, .list-import, #list-news) {
			border: var(--border-width) solid var(--grey-dc-color);
			border-radius: .5rem;
		}

		&:not(#list-messages, #list-users, #list-news) section > :where(div, a) {
			display: grid;
			gap: 2rem;
			padding: 1rem 1.25rem;
			align-items: center;
			box-sizing: border-box;
			cursor: pointer;
			position: relative;
			border-bottom: var(--border-width) solid var(--grey-fa-color);
		}

		&:not(#list-messages, #list-users, #list-news) section > :where(div, a):last-child {
			border-bottom: none;
		}

		&:not(#list-messages, #list-users) .empty-list {
			margin: .25rem;
			border-radius: .375rem;
		}

		&.not-clickable section > div {
			background: none !important;
			cursor: default !important;
		}

		/* Header */
		header {

			height: 2.625rem;
			padding: 0 1.25rem;

			display: grid;
			align-items: center;
			gap: 2rem;

			position: sticky;
			top: 0;
			z-index: 1;

			box-sizing: border-box;
			border-bottom: var(--border-width) solid var(--grey-e6-color);
			border-top-left-radius: .5rem;
			border-top-right-radius: .5rem;

			background: var(--grey-fa-color);
			color: var(--grey-8c-color);

			font-size: .8rem;
			font-weight: 600;
			letter-spacing: .02em;
			text-transform: uppercase;

			> * {
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

		}

		/* List */
		section {

			font-variant-numeric: tabular-nums;

			> :where(div, a):hover {

				background: var(--grey-f5-color);
				transition: background .2s ease;

				/* Has control? and last right? */
				&:has(span.control) .right:nth-last-child(2) {
					padding-right: var(--control-dots-padding);
				}

				> span.control {
					display: flex;
				}

				.link {
					border: var(--border-width) solid var(--grey-e6-color);
					background: #FFF;
					padding: .5rem .875rem;
					margin: -.5rem -.875rem;
				}

			}

			> :where(div, a):not([style="display: none"]):last-child {
				border-bottom-left-radius: .5rem;
				border-bottom-right-radius: .5rem;
			}

			.avatar :where(img, svg) {
				width: 2.5rem;
				height: 2.5rem;
				color: var(--grey-40-color);
			}

			.link {

				border: var(--border-width) solid transparent;
				display: inline-flex;
				align-items: center;
				box-sizing: border-box;
				border-radius: .5rem;

				&:hover {
					color: var(--green-color);
				}

			}

			.main {
				font-weight: 500;
				color: #000 !important;
			}

			.rest {

				display: flex;
				flex-direction: column;
				gap: .25rem;
				align-self: flex-end;
				justify-content: center;
				height: 100%;

				span:nth-child(1) {
					text-align: right;
				}

			}

			.right {
				transform: var(--transition);
			}

			span:has(.kind) {

				display: inline-grid;
				gap: .875rem;
				grid-template-columns: auto 1fr;
				align-items: center;

				span.kind {
					display: inline-flex;
					align-items: center;
					box-sizing: border-box;
					padding: .25rem .75rem .3rem .75rem;
					border-radius: .375rem;
					border: var(--border-width) solid var(--grey-e6-color);
					background: var(--grey-fa-color);
					color: var(--grey-64-color);
					font-size: .875rem;
					font-weight: 400;
					line-height: 1.2;
					white-space: nowrap;
				}

				span:last-of-type {
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					display: inline;
				}

			}

			/* Loader */
			.loader {

				background: var(--grey-dc-color);
				border-radius: .125rem;
				height: .375rem;
				position: relative;
				display: inline-block;
				max-width: 10rem;
				min-width: 6rem;
				align-self: flex-end;

				span {

					border-radius: .125rem;
					position: absolute;
					height: .375rem;
					left: 0;
					display: inline-block;
					max-width: 100%;

					&.red {
						background: var(--red-color);
					}

					&.green {
						background: var(--green-color);
					}

					&.yellow {
						background: var(--yellow-color);
					}

				}

			}

			/* Status -> Dot */
			span.active, span.inactive, span.not-configured {

				display: flex;
				align-items: center;
				gap: .5rem;

				&::before {
					width: .5rem;
					height: .5rem;
					border-radius: 50%;
					content: '';
					display: block;
					margin-right: .5rem;
				}

				&.active::before {
					background: var(--green-color);
				}

				&.inactive::before {
					background: var(--red-color);
				}

				&.not-configured::before {
					background: var(--grey-b4-color);
				}

			}

			/* Control Icons */
			span.control {

				align-items: center;
				justify-content: center;
				gap: .5rem;
				position: absolute;
				right: .625rem;
				box-sizing: border-box;
				border-radius: .5rem;
				display: none;
				padding: .25rem .375rem;
				z-index: 10;
				background: var(--grey-fo-color);
				border: var(--border-width) solid var(--grey-e6-color);
				box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .025);

				&:hover {

					background: var(--grey-e6-color);
					border-color: var(--grey-dc-color);

					> span.dots span {
						background: var(--green-color);
					}

					> span:not(.dots) {
						display: flex;
					}

				}

				> span.dots {

					width: 1.25rem;
					height: 2rem;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					gap: .25rem;
					cursor: pointer;
					transition: var(--transition);

					span {
						width: .25rem;
						height: .25rem;
						border-radius: 50%;
						background: var(--grey-80-color);
						display: block;
						box-sizing: border-box;
						transition: var(--transition);
					}

				}

				> span:not(.dots) {

					background: #FFF;
					border: var(--border-width) solid var(--grey-e6-color);
					border-radius: .375rem;
					width: 2rem;
					height: 2rem;
					display: none;
					align-items: center;
					justify-content: center;
					box-sizing: border-box;
					cursor: pointer;
					transition: var(--transition);
					position: relative;

					&:hover {

						background: var(--green-light-color);
						border-color: var(--green-color);

						svg {
							color: var(--green-color);
						}

					}

					svg {
						transition: var(--transition);
						width: 1.4rem;
						height: 1.4rem;
						color: #000;
					}

				}

			}

			/* Lazy Load Button */
			a[data-role="lazy-load"] {

				display: flex !important;
				align-items: center;
				background: none !important;
				opacity: 1 !important;

				.circle-loader {
					width: 2rem;
					height: 2rem;
					border-width: .3rem;
				}

			}

		}

		/* Button in List */
		.button-in-list {

			width: 100%;
			background: #FFF;
			color: var(--green-color);
			padding: .625rem 1.25rem;
			border-radius: .5rem;
			border: none;
			cursor: pointer;
			font-size: 1rem;
			font-family: 'Inter', sans-serif;
			display: flex;
			justify-content: center;

			&:hover {
				color: #00B0A0;
			}

		}

	}

	/* Extend Fancybox */

	.f-button {

		display: none !important;

		&:last-child {
			display: block !important;
		}

	}

	/* Main Content -> Attention */

	.attention-block {

		position: relative;
		display: block;
		padding: 1rem 1.25rem 1rem 1.75rem;
		background: var(--yellow-light-color);
		border: var(--border-width) solid rgba(255, 190, 33, .28);
		border-radius: .5rem;
		color: var(--grey-64-color);
		line-height: 1.35;
		overflow-wrap: anywhere;
		box-shadow: 0 .5rem 1.25rem rgba(0, 0, 0, .035);

		&::before {
			content: '';
			position: absolute;
			left: .75rem;
			top: 1rem;
			bottom: 1rem;
			width: .25rem;
			min-height: .5rem;
			border-radius: 999rem;
			background: var(--yellow-color);
		}

		header {
			font-size: 1.25rem;
			line-height: 1.3;
			margin-bottom: .5rem;
			color: var(--grey-28-color);
			font-weight: 500;
		}

		a {

			color: var(--green-color);
			text-decoration: none;
			font-weight: 500;
			transition: var(--transition);

			&:hover {
				color: var(--green-color);
			}

		}

	}

	/* Main Content -> Empty Search Result */

	.empty-list {

		display: none;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		min-height: 9rem;
		padding: 1.75rem 1rem;
		gap: .5rem;
		box-sizing: border-box;
		border: none !important;
		border-radius: .75rem;
		background: radial-gradient(circle at 50% 0%, rgba(0, 150, 136, .055), transparent 44%),
			linear-gradient(180deg, #FFF 0%, var(--grey-fa-color) 100%);
		color: var(--grey-8c-color);
		text-align: center;

		&.visible {
			display: flex;
		}

		span {
			background-color: rgba(0, 150, 136, .055);
			border-radius: .875rem;
			width: 4rem;
			height: 4rem;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-bottom: .125rem;
		}

		svg {
			color: var(--grey-b4-color);
			width: 2.5rem;
			height: 2.5rem;
		}

		div {
			max-width: 80%;
			font-size: .9rem;
			line-height: 1.35;
		}

		div + div {
			color: var(--grey-8c-color);
			font-size: .8125rem;
			font-weight: 400;
		}

		a {
			margin-top: 1rem;
		}

	}

	/* Main Content -> Grey SVG Icon */

	.icon-grey {

		width: 1.875rem;
		height: 1.875rem;
		color: var(--grey-8c-color);
		cursor: pointer;
		transition: color 150ms ease-in-out;

		&:hover {
			color: var(--green-color);
		}

	}

	/* Statuses */

	.status-block {

		padding: .25rem .75rem .3rem .75rem;
		border-radius: .25rem;
		color: #FFF;
		font-weight: 500;
		font-size: .875rem;
		width: max-content;
		min-width: 6rem;
		line-height: 1.2;
		white-space: nowrap;
		text-align: center;

		&.green {
			background: var(--green-light-color);
			color: var(--green-color);
		}

		&.red {
			background: var(--red-light-color);
			color: var(--red-color);
		}

		&.grey {
			background: var(--grey-fo-color);
			color: var(--grey-80-color);
		}

		&.yellow {
			background: var(--yellow-light-color);
			color: var(--yellow-color);
		}

		&.yellow-partial {
			background: var(--yellow-partial-light-color);
			color: var(--yellow-partial-color);
		}

	}

	/* Counter in Header */

	:where(header#top-header, #menu) {

		.counter {
			top: .2rem;
			right: -1rem;
		}

		.counter.invisible {
			display: none;
		}

		a:hover .counter {
			opacity: 0;
			transform: scale(0);
		}

	}

	/* Counter in Top Header */

	header#top-header .counter {
		background: var(--red-light-color);
		color: var(--red-color);
	}

	/* Counter in Left Menu */

	#menu .general-menu .counter {
		top: inherit;
		right: .5rem;
		border: none;
	}

	/* Counter */

	span.counter {

		position: absolute;
		display: flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		height: 1.5rem;
		min-width: 2.3rem;
		padding: .25rem .5rem;
		border-radius: 2.875rem;
		border: .15rem solid #FFF;
		background: var(--green-light-color);
		color: var(--green-color);
		font-size: .8rem;
		font-weight: 700;
		line-height: 1;
		white-space: nowrap;
		transition: var(--transition);
		transform-origin: center;
		z-index: 2;

		&.invisible {
			display: none;
		}

		&:hover {
			background: #FFF;
			color: var(--green-color);
		}

	}

	/* UI holders */

	.ui-holder, .ui-holder-second, .ui-holder-third, .ui-holder-address {
		position: relative;
		display: block;
		overscroll-behavior: contain;
	}

	/* Arrow */

	.arrow {
		width: 1.5rem;
		height: 1.5rem;
		color: var(--grey-64-color);
		transform: rotate(180deg);
		flex-shrink: 0;
		transition: transform .2s ease, fill .2s ease;
	}

	/* Avatar */

	.avatar {

		display: flex;
		align-items: center;
		justify-content: center;
		color: var(--grey-64-color);
		font-weight: 500;
		width: 2.5rem;
		height: 2.5rem;
		border-radius: 50%;
		box-sizing: border-box;
		overflow: hidden;
		flex-shrink: 0;
		font-size: .875rem;
		border: var(--border-width) solid var(--grey-e6-color);

		&:has(svg) {
			padding: .2rem;
		}

		&:has(img) {
			border: none;
		}

	}

	/* Right */

	.right {
		display: flex;
		align-items: center;
		justify-content: end;
	}

	/* Stores */

	div#stores {

		display: flex;
		gap: 1.2rem;
		vertical-align: middle;
		padding-top: .25rem;

		a {

			&:hover {
				transform: translateY(-.125rem);
				box-shadow: var(--box-shadow);
			}

			align-items: center;
			padding: .5rem;
			display: grid;
			border-radius: .375rem;
			background: var(--grey-f5-color);
			transition: transform .16s ease, background .16s ease, box-shadow .16s ease;

			img {
				width: 1.5rem;
				height: auto;
			}

		}

	}

	div.double {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 1.75rem;
		box-sizing: border-box;
	}


/* --------------------------------------------------------------------------
   Mobile
-------------------------------------------------------------------------- */

	html[data-device="mobile"] {

		--dialog-top-padding: 5rem;
		--dialog-height: calc(100svh - var(--dialog-top-padding));
		--header-height: 4rem;
		--footer-height: 4rem;
		--footer-background: radial-gradient(circle at right bottom, rgba(0, 150, 136, .08), transparent 48%), #FFF;

		font-size: 14px;

		dialog {

			width: 100% !important;
			height: var(--dialog-height) !important;
			top: var(--dialog-top-padding);
			bottom: 0;
			padding: 0;
			box-shadow: none;
			overflow: hidden;
			position: fixed;
			border-radius: .5rem .5rem 0 0;

			> section {

				margin: 0 !important;
				box-sizing: border-box;
				width: 100% !important;
				height: 100%;
				display: flex;
				flex-direction: column;
				border-radius: 0;

				> header {
					padding-inline: var(--space-base) !important;
					box-sizing: border-box;
					border-bottom: none;
					padding-top: .2rem;
					height: var(--dialog-header-height) !important;
					border-radius: 0;
				}

				> section {
					padding: var(--space-base);
					margin: 0;
					overflow-y: auto;
					height: 100%;
					flex-grow: 1;

					> * {
						flex-shrink: 0;
					}

					> nav.menu {

						display: flex;
						flex-direction: column;
						flex-grow: 1;

						/* Secondary actions */
						> a {

							display: grid;
							align-items: center;
							grid-template-columns: 2rem minmax(0, 1fr) 1rem;
							gap: 1rem;
							padding: .875rem 1rem;
							background: var(--grey-fa-color) !important;
							color: var(--grey-64-color);
							border-radius: 0;
							border: none;
							box-sizing: border-box;
							transition: var(--transition);

							&::after {
								content: '';
								width: .45rem;
								height: .45rem;
								border-top: var(--border-width) solid var(--grey-b4-color);
								border-right: var(--border-width) solid var(--grey-b4-color);
								transform: rotate(45deg);
								justify-self: end;
								transition: var(--transition);
							}

							svg {
								width: 2rem;
								height: 2rem;
								color: var(--grey-b4-color);
								transition: var(--transition);
							}

							span {
								min-width: 0;
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
								font-weight: 500;
							}

						}

						> a + a {
							margin-top: 0;
							border-top: var(--border-width) solid var(--grey-e6-color);
						}

						> a:first-of-type {
							border-top-left-radius: .75rem;
							border-top-right-radius: .75rem;
						}

						> a:last-of-type {
							border-bottom-left-radius: .75rem;
							border-bottom-right-radius: .75rem;
						}

					}
				}

				/* Details */
				.details-in-header {

					padding: .875rem !important;
					display: block;

					main {

						flex-wrap: nowrap;
						overflow-y: scroll;
						scroll-snap-type: x mandatory;
						scroll-behavior: smooth;
						gap: 1rem;

						> div {

							scroll-snap-align: start;
							white-space: nowrap;
							max-width: inherit;
							width: 100%;
							min-width: inherit;
							padding-right: 1rem;

							header {
								overflow: inherit;
								text-overflow: inherit;
								white-space: inherit;
							}

							> div {
								overflow: inherit;
								text-overflow: inherit;
								white-space: inherit;
							}

						}

					}

				}
			}

		}

		dialog.mobile-sheet[open] {

			--sheet-handle-height: .75rem;
			left: 0;
			right: 0;
			top: auto;
			bottom: 0;
			width: 100%;
			max-width: 100%;
			margin: 0;
			padding: 0;
			border-radius: 1rem 1rem 0 0;
			overflow: hidden;
			transform: translateY(100%) translateZ(0);
			box-shadow: 0 -.25rem 1.5rem rgba(0, 0, 0, .12);
			transition: transform .25s ease;
			will-change: transform;
			backface-visibility: hidden;
			display: flex;
			flex-direction: column;

			&.is-open { transform: translateY(0) translateZ(0); }
			&.is-close { transform: translateY(100%) translateZ(0); }

			.dialog-sheet-handle {
				position: relative;
				flex: 0 0 var(--sheet-handle-height);
				width: 100%;
				height: var(--sheet-handle-height);
				background: linear-gradient(to left, var(--green-light-color), var(--grey-fa-color) 65%);
				border-top-left-radius: 1rem;
				border-top-right-radius: 1rem;
				box-sizing: border-box;
				pointer-events: none;
				z-index: 2;

				&::before {
					content: '';
					width: 3.5rem;
					height: .3125rem;
					border-radius: 999rem;
					background: var(--grey-b4-color);
					position: absolute;
					top: .5rem;
					left: 50%;
					transform: translateX(-50%);
				}
			}

			> section {
				z-index: 1;
				flex: 1 1 auto;
				min-height: 0;
				height: auto !important;
			}

			> section[data-type="pane"] {

				flex: 1 1 auto;
				min-height: 0;
				height: auto !important;
				display: flex;
				flex-direction: column;
				overflow: hidden;

				/* Header */
				> header {
					flex: 0 0 var(--header-height);
					height: var(--header-height) !important;
				}

				/* Filter */
				> #filter-form {

					flex: 1 1 auto;
					min-height: 0;
					margin: 0;
					padding: 0;
					display: flex;
					flex-direction: column;
					flex-wrap: nowrap;
					justify-content: flex-start;
					overflow: hidden;

					/* Scrollable Content */
					> main {
						flex: 1 1 auto;
						min-height: 0;
						overflow-x: hidden;
						overflow-y: auto;
						overscroll-behavior: contain;
					}

					/* Fixed Footer */
					> footer {
						flex: 0 0 auto;
					}

				}

			}

		}

		#app-download-dialog {

			position: fixed;
			z-index: 101;
			top: 1rem;
			left: 1rem;
			right: 1rem;
			display: grid;
			grid-template-columns: 3rem minmax(0, 1fr);
			gap: 1rem;
			box-sizing: border-box;
			padding: 1.25rem 3.25rem 1.25rem 1.25rem;
			background: #FFF;
			border-radius: .75rem;
			box-shadow: 0 0 2.5rem rgba(0, 0, 0, .08);

			> img {
				display: block;
				width: 3rem;
				height: 3rem;
				border-radius: .75rem;
				object-fit: cover;
			}

			> div {

				min-width: 0;
				display: flex;
				flex-direction: column;
				gap: .35rem;

				strong {
					color: #000;
					font-size: 1.125rem;
					font-weight: 500;
					line-height: 1.3;
				}

				span {
					color: var(--grey-64-color);
					font-size: .95rem;
					line-height: 1.5;
				}

			}

			footer {

				grid-column: 2;
				display: flex;
				margin-top: .25rem;

				#stores {

					display: flex;
					flex-wrap: wrap;
					align-items: center;
					gap: .5rem;
					padding: 0;

					a {

						display: flex;
						align-items: center;
						justify-content: center;
						gap: .6rem;
						min-height: 2.75rem;
						width: auto;
						max-width: 100%;
						padding: .55rem .8rem;
						box-sizing: border-box;
						border-radius: .65rem;
						border: var(--border-width) solid var(--grey-e6-color);
						background: #FFF;
						color: var(--grey-28-color);
						font-size: .9rem;
						font-weight: 500;
						line-height: 1.2;
						white-space: nowrap;
						box-shadow: none;
						transition: var(--transition);

						&:hover {
							transform: translateY(-.125rem);
							border-color: var(--green-color);
							background: var(--green-light-color);
							color: var(--green-color);
							box-shadow: 0 .375rem 1rem rgba(0, 150, 136, .08);
						}

						img {
							display: block;
							width: 1.45rem;
							height: 1.45rem;
							flex: 0 0 1.45rem;
							object-fit: contain;
						}

					}

					a[href*="apps.apple.com"]::after {
						content: 'Загрузить в App Store';
					}

					a[href*="play.google.com"]::after {
						content: 'Загрузить в Google Play';
					}

					a[href*="rustore.ru"]::after {
						content: 'Загрузить в RuStore';
					}

				}

			}

			.close {

				position: absolute;
				top: .75rem;
				right: .75rem;
				width: 2rem;
				height: 2rem;
				border-radius: 50%;
				transition: var(--transition);

				&:hover {
					background: var(--grey-f5-color);
				}

				&::before,
				&::after {
					content: '';
					position: absolute;
					top: 50%;
					left: 50%;
					width: 1rem;
					height: .125rem;
					background: var(--grey-8c-color);
					border-radius: 1rem;
				}

				&::before {
					transform: translate(-50%, -50%) rotate(45deg);
				}

				&::after {
					transform: translate(-50%, -50%) rotate(-45deg);
				}

			}

			&.ios {

				footer #stores {

					a[href*="play.google.com"],
					a[href*="rustore.ru"] {
						display: none;
					}

				}

			}

			&.android {

				footer #stores {

					a[href*="apps.apple.com"] {
						display: none;
					}

				}

			}

		}

		#menu-dialog {

			display: none;
			height: 100% !important;

			section {

				display: flex;
				flex-direction: column;
				padding: var(--space-base);
				box-sizing: border-box;
				margin: 0 !important;
				height: calc(100% - var(--dialog-header-height));

				aside {

					display: flex !important;
					flex-direction: column;
					margin-top: 2rem;
					margin-bottom: 0;

					span {
						color: var(--grey-b4-color);
						display: flex;
						border: none;
						font-weight: 500;
					}

					div#stores {

						display: flex;
						gap: 1rem;

						a {

							display: flex;
							align-items: center;

							img {
								height: 2rem;
								width: auto;
							}

						}

					}

				}

			}

		}

		#floating-message {

			width: 90%;
			left: 50%;
			top: 3%;
			bottom: inherit;
			transform: translateX(-50%);
			z-index: 1002;

		}

		body {

			padding-top: 0;
			padding-bottom: 0;

			.push-notice {

				display: grid;
				grid-template-columns: auto minmax(0, 1fr) auto;
				align-items: center;
				gap: .75rem;
				padding: .75rem;
				box-sizing: border-box;
				background: radial-gradient(circle at 100% 0%, rgba(216, 137, 0, .08), transparent 42%),
				#FFF8E8;
				box-shadow: 0 .375rem 1rem rgba(216, 137, 0, .075),
				0 .125rem .375rem rgba(0, 0, 0, .045);

				.push-notice-icon {

					width: 2.75rem;
					height: 2.75rem;
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: .75rem;
					background: var(--yellow-light-color);
					flex-shrink: 0;

					svg {
						width: 2rem;
						height: 2rem;
						color: var(--yellow-color);
					}

				}

				main {

					min-width: 0;
					display: flex;
					flex-direction: column;
					gap: .1875rem;

					header {
						color: #000;
						font-size: .9375rem;
						font-weight: 600;
						line-height: 1.2;
					}

					span {
						color: var(--grey-64-color);
						font-size: .8125rem;
						line-height: 1.3;
					}

				}

			}

			.create-button {

				&:has(.circle-loader) {

					&::after, &::before {
						display: none;
					}

				}

				height: 2.5rem;
				width: 2.5rem;
				border-radius: 50%;
				background: var(--green-color);
				position: relative;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 0;
				padding: 0;
				box-sizing: border-box;
				box-shadow: 0 .375rem 1rem rgba(0, 150, 136, .28),
				0 .125rem .375rem rgba(0, 0, 0, .16);

				&::after {
					content: '';
					display: block;
					position: absolute;
					background-color: #FFF;
					border-radius: .25rem;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
					width: 55%;
					height: .3rem;
				}

				&::before {
					content: '';
					display: block;
					position: absolute;
					background-color: #FFF;
					border-radius: .25rem;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
					width: .3rem;
					height: 55%;
				}

			}

			#landscape-layout {

				position: fixed;
				inset: 0;
				display: none;
				align-items: center;
				justify-content: center;
				background: var(--grey-fa-color);
				z-index: 9999;

				.rotate-card {

					width: 100%;
					padding: 1.7rem 1.5rem;
					text-align: center;

					.rotate-icon {

						width: 6rem;
						max-width: 10rem;
						aspect-ratio: 1/1;
						margin: 0 auto 1.2rem;
						border-radius: 1.5rem;
						display: flex;
						align-items: center;
						justify-content: center;
						background: radial-gradient(60% 60% at 30% 25%, rgba(37,194,163,.20), transparent 60%),
						radial-gradient(60% 60% at 70% 75%, rgba(37,194,163,.12), transparent 60%),
						linear-gradient(180deg, #ffffff, rgba(37,194,163,.06));
						box-shadow: 0 1.25rem 3rem rgba(37,194,163,.30),
						0 .5rem 1.2rem rgba(0,0,0,.08);
						animation: rotateHint 2.2s ease-in-out infinite;

						svg {
							width: 65%;
							height: 65%;
							color: var(--green-color);
						}

					}

					h1 {
						font-size: 2rem;
						font-weight: 600;
						color: #0f172a;
						margin-bottom: 1rem;
					}

					p {
						margin: 0;
						padding: 0;
						font-size: 1em;
						color: #64748b;
					}

				}

			}

			header#top-header {

				display: flex;
				justify-content: space-between;
				align-items: center;
				letter-spacing: .01rem;
				padding: .875rem var(--space-base);
				height: var(--header-height);
				box-sizing: border-box;
				margin-left: 0;
				border-bottom: none;
				position: fixed;
				width: 100%;
				top: 0;
				z-index: 100;
				background: rgba(255, 255, 255, .85);
				backdrop-filter: blur(.25em);
				border-bottom: var(--grey-dc-color) solid var(--border-width);

				> div {

					display: flex;
					gap: 1rem;
					align-items: center;

					/* Icons */
					a {

						position: relative;
						display: flex;
						align-items: center;
						justify-content: center;

						.counter {
							top: -.1rem;
							right: -.4rem;
							min-width: auto;
							border: none;
						}

						svg {
							width: 2.5rem;
							height: 2.5rem;
							color: var(--grey-b4-color);
						}

					}

					div.avatar {
						border-radius: 15%;
						margin-left: 2rem;
					}

				}

			}

			main[data-container="main"] {

				margin-top: calc(var(--header-height) + var(--space-base));

			}

		}

		@media screen and (min-device-aspect-ratio: 1/1) and (orientation: landscape) {

			#page {
				display: none;
			}

			#landscape-layout {

				background: var(--grey-fa-color);
				width: 100% !important;
				height: 100% !important;
				display: flex !important;
				align-items: center;
				justify-content: center;

				svg {
					width: 50%;
					height: 50%;
				}

			}

		}

	}


/* --------------------------------------------------------------------------
	Animation
-------------------------------------------------------------------------- */

	@keyframes rotateHint {

		0% {
			transform: rotate(0deg);
		}

		40% {
			transform: rotate(-14deg);
		}

		70% {
			transform: rotate(10deg);
		}

		100% {
			transform: rotate(0deg);
		}

	}

	@keyframes rotation {

		0% {
			transform: rotate(0deg);
		}

		100% {
			transform: rotate(360deg);
		}

	}

	@keyframes skeleton {

		0% {
			background-color: hsla(0, 0%, 86%, 1);
		}

		100% {
			background-color: hsla(0, 0%, 96%, 1);
		}

	}