html {
	font-feature-settings: "kern", "liga", "pnum";
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	
	scroll-behavior: smooth;
}

body {
	position: relative;
	min-height: 100vh;
	overflow-y: scroll;
}

::-moz-selection {
	color: theme("colors.white");
	background: theme("colors.blue");
	text-shadow: none;
}

::selection {
	color: theme("colors.white");
	background: theme("colors.blue");
	text-shadow: none;
}

svg[aria-hidden] {
	display: none;
}

.outer-container {
	@apply w-full mx-auto max-w-screen-xxxl;
}


/* .container {
	@apply mx-auto;
} */


.input-group {
	@apply block w-full;
}

.input-group label {
	@apply block w-full mb-2 text-base xl:text-lg;
}

.input-group label span {
	@apply text-red;
}

.input-group input,
.input-group textarea {
	@apply block w-full px-4 py-2 text-base bg-white border-none rounded focus:outline-none focus:ring-2 focus:ring-imperial xl:text-lg;
}

.input-group.grey-inputs input,
.input-group.grey-inputs textarea {
	@apply bg-grey;
}

details.hide-arrow summary::-webkit-details-marker {
	display: none;
}

details.hide-arrow summary {
	list-style: none;
}

ul.custom-marker {
	@apply pl-4 list-disc list-inside marker:text-imperial;
}

ul.custom-check li {
	@apply relative before:absolute before:left-0 before:top-0.5 before:h-6 before:w-6 before:bg-contain before:bg-no-repeat before:content-[''] pl-10;
}

ul.custom-check li::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22.884' height='22.884' viewBox='0 0 22.884 22.884'%3E%3Cpath id='Path_868' data-name='Path 868' d='M779.442,3221a11.442,11.442,0,1,0,11.442,11.442A11.455,11.455,0,0,0,779.442,3221m0,22A10.562,10.562,0,1,1,790,3232.442,10.574,10.574,0,0,1,779.442,3243m5.324-14.7-6.671,7.735-4.019-3.314a.426.426,0,0,0-.61.07.457.457,0,0,0,.068.629l4.341,3.579a.422.422,0,0,0,.271.1.428.428,0,0,0,.325-.15l6.945-8.053a.456.456,0,0,0-.036-.631.425.425,0,0,0-.613.037' transform='translate(-768 -3221)' fill='%23632b70'/%3E%3C/svg%3E%0A");
}

.childFull > * {
	@apply object-cover object-center w-full h-full;
}

:root::after {
	font-size: 8px;
	position: fixed;
	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
	user-select: none;
	pointer-events: none;
	z-index: 999999;
	top: 0;
	left: 10px;
	white-space: pre-wrap;
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
	background: rgba(0, 0, 0, 0.6);
	color: #fff;
	border-radius: 0 0 2px 2px;
	font-weight: normal;
	padding: 0.5em 1em;
	letter-spacing: 0.1em;
	line-height: 1.5;
	content: "base";
	
	@apply bg-red sm:bg-yellow-500 md:bg-yellow-300 lg:bg-green-500 xl:bg-blue xxl:bg-indigo-500 xxxl:bg-purple-500;
}

:root::after {
	content: "mobile";
}

@screen sm {
	:root::after {
		content: "sm: 480px";
	}
}
@screen md {
	:root::after {
		content: "md: 768px";
	}
}
@screen lg {
	:root::after {
		content: "lg: 1024px";
	}
}
@screen xl {
	:root::after {
		content: "xl: 1280px";
	}
}
@screen xxl {
	:root::after {
		content: "xxl: 1600px";
	}
}
@screen xxxl {
	:root::after {
		content: "xxxl: 1920px";
	}
}