@import "reset.css";
@import "fonts/Gotham.css";
@import "smt.css";
@import "select2.css?t=21";
@import "nouislider.css";
@import "tooltipster.bundle.min.css";
@import "plugins/tooltipster/sideTip/themes/tooltipster-sideTip-shadow.min.css";

* {
	box-sizing: border-box;
	-webkit-font-smoothing: antialiased;
	   -moz-font-smoothing: antialiased;
	        font-smoothing: antialiased;
}

body.preload * {
	animation-duration: 0s !important;
	-webkit-animation-duration: 0s !important;
	transition:background-color 0s, opacity 0s, color 0s, width 0s, height 0s, padding 0s, margin 0s !important;
}

a:link, a:visited, a:hover, a:focus {
	color: inherit;
}

html {
	-webkit-text-size-adjust: 100%; /* Prevent font scaling in landscape while allowing user zoom */
}

html, body {
	background: #fff;
	font-family: 'Gotham', Arial, sans-serif;
	font-size: 12px;
	color: #111;
	/* overflow-y: hidden; */
}

	@media (min-width: 600px) {
		html, body { font-size: 14px; }
	}

	@media (min-width: 800px) {
		html, body { font-size: 15px; }
	}

	@media (min-width: 1000px) {
		html, body { font-size: 16px; }
	}

	/*
@media (min-width: 1400px) {
		html, body { font-size: 18px; }
	}

	@media (min-width: 1850px) {
		html, body { font-size: 20px; }
	}
*/

/* The header is a white bar floating on a light ground, inset from the window, with the mark in its
   own cell behind a hairline — the ground continues down through the breadcrumb strip, so the two
   read as one region of chrome that ends where the white page begins.

   Everything below overrides a dark bar whose nav was absolutely centred and whose mark hung over
   the edge on a negative margin, so several rules exist only to unwind that. */
/* One ground under the bar and the trail: blush at the top, washing out to the page's white by the
   time the content starts. Carried by the wrapper rather than by each element, so there is no seam
   where the two meet. */
/* The two colour stops are registered custom properties, which is what makes them animatable —
   a gradient itself cannot be transitioned, but a colour held in a registered property can, and the
   gradient is recomputed as it moves. Browsers without @property simply keep the initial blue. */
@property --chrome-top {
	syntax: "<color>";
	inherits: false;
	initial-value: rgba(0, 147, 255, 0.16);
}

@property --chrome-mid {
	syntax: "<color>";
	inherits: false;
	initial-value: rgba(0, 147, 255, 0.06);
}

.chrome {
	background: linear-gradient(to bottom,
		var(--chrome-top) 0%,
		var(--chrome-mid) 52%,
		rgba(255, 255, 255, 1) 100%);
	/* Long enough that it is weather rather than an effect: nobody should catch it moving. */
	animation: chrome-drift 75s ease-in-out infinite;
}

/* Four blues around #0093ff — azure, sky, teal-leaning cyan, indigo — so the band changes
   temperature without ever leaving the family. */
@keyframes chrome-drift {
	0%, 100% {
		--chrome-top: rgba(0, 147, 255, 0.16);
		--chrome-mid: rgba(0, 147, 255, 0.06);
	}
	25% {
		--chrome-top: rgba(56, 189, 248, 0.18);
		--chrome-mid: rgba(56, 189, 248, 0.07);
	}
	50% {
		--chrome-top: rgba(45, 200, 205, 0.16);
		--chrome-mid: rgba(45, 200, 205, 0.06);
	}
	75% {
		--chrome-top: rgba(88, 110, 224, 0.17);
		--chrome-mid: rgba(88, 110, 224, 0.06);
	}
}

@media (prefers-reduced-motion: reduce) {
	.chrome { animation: none; }
}

/* The ground stays in the flow and scrolls away with the page; only the white bar travels. The
   header keeps the bar's height in reserve so nothing slides underneath it at rest. */
header {
	position: relative;
	background: transparent;
	padding: 1rem 1rem 0.875rem;
	min-height: calc(6rem + 1.875rem);
	margin-bottom: 0;
}

	/* The horizontal padding is the bar's resting inset, and it has to equal the inset it takes once
	   pinned, or the bar shifts sideways at the moment it detaches. */
	@media (min-width: 500px) {
		header {
			padding: 1.25rem 2rem 1rem;
			min-height: calc(6rem + 2.25rem);
		}
	}

	/* Fixed rather than sticky: sticky would carry the grey with it, and inside a non-sticky
	   ancestor it would stop travelling as soon as that ancestor scrolled past.
	   Out of the way on the way down, back the moment you head up — the nav is wanted when you are
	   looking for somewhere else to be, which is what scrolling up usually means. */
	/* In the flow to begin with — it is part of the header — and only detaches once the page has
	   scrolled past it. Capped to the page's own inner width so it lines up with the content: .wrap
	   is 1600px border-box with 1rem of padding, so its text edge sits 1rem in. */
	header .wrap {
		position: relative;
		max-width: calc(1600px - 2rem);
		margin: 0 auto;
		display: flex;
		align-items: stretch;
		min-height: 6rem;
		padding: 0;
		/* Glass. The tint is thin enough to read as a pane rather than a panel — most of what is
		   behind it survives, blurred and lifted. @supports keeps the fallback opaque, because at
		   this tint a browser without backdrop-filter would show nav text over raw content. */
		background: rgba(255, 255, 255, 0.96);
		border: 1px solid rgba(255, 255, 255, 0.7);
		border-radius: 16px;
		z-index: 500;
		transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
	}

		/* Promoted to its own layer only while detached: a blurred pane over moving content is
		   repainted constantly otherwise, which is what the roughness was. will-change is scoped to
		   that state rather than left on, since a permanent layer costs memory on every page. */
		header.is-pinned .wrap {
			will-change: transform;
			transform: translateZ(0);
		}

		@media (min-width: 500px) {
			header .wrap { max-width: calc(1600px - 4rem); }
		}

		/* At rest it sits on the gradient rather than over content, so it carries more of its own
		   white and casts less — the thin glass and the deeper shadow are for when it is floating
		   over something. */
		header:not(.is-pinned) .wrap {
			background: rgba(255, 255, 255, 0.9);
			box-shadow:
				0 1px 1px rgba(16, 14, 13, 0.04),
				0 4px 10px -4px rgba(16, 14, 13, 0.10),
				0 18px 40px -22px rgba(16, 14, 13, 0.15);
		}

		/* Detached. The header keeps its height in reserve, so nothing moves when this happens, and
		   `top` matches the header's own top padding so the fixed slot and the resting slot coincide
		   at the top of the page — that is what lets the bar hand back to the flow invisibly. */
		header.is-pinned .wrap {
			position: fixed;
			top: 1rem;
			left: 1rem;
			right: 1rem;
			/* Floating over content now, so it casts wide and soft rather than tight. */
			box-shadow:
				0 1px 1px rgba(16, 14, 13, 0.04),
				0 4px 10px -4px rgba(16, 14, 13, 0.10),
				0 18px 50px 0px rgba(16, 14, 13, 0.25);
		}

			@media (min-width: 500px) {
				header.is-pinned .wrap {
					top: 1.25rem;
					left: 2rem;
					right: 2rem;
				}
			}

		/* Nothing to cast onto once it is off the top of the window, and a 100px spread hanging below
		   a bar you cannot see would darken the content it is meant to have left. */
		header.is-pinned.is-tucked .wrap {
			transform: translate3d(0, calc(-100% - 1.5rem), 0);
			box-shadow: none;
		}

		/* Used for the single frame in which the bar changes between riding with the page and being
		   fixed. That change is a reposition, not a movement, and animating it is what produced the
		   flash at the handover. */
		header.is-instant .wrap {
			transition: none !important;
		}

		/* Only thin the tint where the blur will actually stand behind it. */
		@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
			header .wrap {
				background: rgba(255, 255, 255, 0.38);
				-webkit-backdrop-filter: saturate(2) blur(18px);
				backdrop-filter: saturate(2) blur(18px);
			}
		}

		@media (prefers-reduced-motion: reduce) {
			header .wrap { transition: none; }
		}

	/* Its own cell, divided off like the wordmark in a masthead. */
	header .logo.sknmtch {
		flex: 0 0 auto;
		width: 5.25rem;
		height: auto;
		display: block;
		text-indent: -1000px;
		overflow: hidden;
		background: url(img/solutions/inference-mark-light.png) no-repeat center;
		background-size: 3.5em;
		border: 0;
		border-right: 1px solid rgba(16, 14, 13, 0.08);
		border-radius: 0;
		box-shadow: none;
		margin: 0;
		z-index: 9;
		position: relative;
	}

		header .logo.sknmtch:hover {
			transform: none;
			box-shadow: none;
		}

		header .logo.sknmtch:active {
			transform: none;
			box-shadow: none;
		}

		@media (min-width: 500px) {
			header .logo.sknmtch {
				width: 5.75rem;
				margin-bottom: 0;
			}
		}

	header .logout {
		position: static;
		align-self: center;
		margin-left: auto;   /* overridden when the shortcut group is present, which claims it instead */
		padding: 0 1.25rem 0 1rem;
		font-size: 0.6875rem;
		font-weight: 600;
		letter-spacing: 0.1em;
		text-transform: uppercase;
		text-decoration: none;
		color: #a49c96;
		transition: color 0.2s ease;
	}

		header .logout:hover { color: #100e0d; }

	/* Centred in the bar rather than trailing the mark: absolutely, so the mark on one side and sign
	   out on the other cannot pull it off centre as their widths change. */
	header nav {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		display: flex;
		align-items: center;
		font-family: 'Bricolage Grotesque', 'Gotham', Arial, sans-serif;
		font-weight: 300;
		padding-left: 0;
	}

		/* A track holding the items, the way inferencebeauty.com groups its nav: the set reads as one
		   control, and the current section is a filled pill inside it rather than a mark on the bar. */
		header nav ul {
			display: flex;
			/* One row: the track is centred on the bar, so a second line grows the pill downward and
			   pushes it off centre rather than wrapping neatly. */
			flex-flow: row nowrap;
			align-items: center;
			min-width: 0;
			justify-content: flex-start;
			padding: 0.25rem 0.3rem;
			background: #f8f8f8;
			border-radius: 999px;
		}

		/* The outer list only: the nested one is a group inside this track, not a track of its own. */
		header nav > ul {
			border: 1px solid #ccc;
		}

			/* Above the pill, which is a sibling of the list and would otherwise paint over the labels
			   simply by coming later in the document. */
			header nav ul li {
				color: #6c6560;
				position: relative;
				z-index: 1;
			}

				header nav ul li > a {
					display: block;
					position: relative;
					z-index: 1;
					margin: 0;
					padding: 1.125rem 1.625rem;
					border-radius: 999px;
					font-size: 1rem;
					font-weight: 400;
					letter-spacing: normal;
					color: #6c6560;
					text-decoration: none;
					cursor: pointer;
					/* Paced to the pill's travel, not snapped: at 0.16s the label turned white long before
					   the pill arrived under it, leaving it briefly unreadable against the track. */
					transition: color 0.3s cubic-bezier(0.22, 1, 0.36, 1) 0.04s;
				}

				/* One pill for the whole track, moved to whichever item holds it, rather than one per
				   item fading in and out. The label under it is what changes, so the pill is a single
				   object that travels — which is also why it is a sibling of the list rather than a
				   background on any item. Positioned from JS; see _parts/header.php. */
				header nav .nav-pill {
					position: absolute;
					left: 0;
					top: 0;
					z-index: 0;
					border-radius: 999px;
					background: linear-gradient(135deg, #0093ff, #0080e6);
					opacity: 0;
					pointer-events: none;
					transition:
						transform 0.34s cubic-bezier(0.22, 1, 0.36, 1),
						width 0.34s cubic-bezier(0.22, 1, 0.36, 1),
						opacity 0.18s ease-out;
				}

					/* For the first placement, and after a resize: it should be where it belongs, not
					   travel there from the corner. */
					header nav .nav-pill.is-instant {
						transition: none;
					}

				/* The pointer's item takes the label colour; the current section keeps it only while
				   nothing else is hovered, since by then the pill has moved away. */
				header nav ul li:hover > a,
				header nav > ul:not(:hover) li.active > a,
				/* The directory chip is not a destination — the pill stays where it is while it is
				   hovered, so the current section has to stay white with it. */
				header nav > ul:has(> .nav-more:hover) li.active > a {
					color: #fff !important;
				}

	.breadcrumbs {
		display: none;
	}

	@media (min-width: 750px) {
		.breadcrumbs {
			display: inline-block;
		}
	}

.wrap {
	padding: 1rem;
	position: relative;
	max-width: 1600px;
	margin: 0 auto;
}

	@media (min-width: 500px) {
		.wrap {
			padding: 2rem;
		}
	}

	.wrap.noPaddingTop {
		padding-top: 0;
	}

	.gray {
		background: #efefef;
	}

.area {
	padding: 2rem 0;
}

	.area .wrap {
		padding-top: 0;
		padding-bottom: 0;
	}

	.area.area-light {
		background: #efefef;
	}

/* Present for screen readers, absent on screen. */
.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* ------------------------------------------------------------------ PROTOTYPE: all areas

   One chip at the end of the track opens a directory of everything the application holds. The four
   sections stay the whole bar; this is how the rest is reached, so the bar does not have to grow to
   hold twenty destinations.

   Delete this block with the markup in _parts/header.php. */

/* A circle holding a chevron. No label: the sections are named, and this is the way to everything
   else — the name lives in the title and in the screen-reader text. */
.nav-more > button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.125rem;
	height: 2.125rem;
	margin: 0;
	padding: 0;
	border: 1px solid #d8d3ce;
	border-radius: 999px;
	background: none;
	font: inherit;
	line-height: 1;
	color: #6c6560;
	cursor: pointer;
	transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

	/* The chevron is drawn rather than a glyph, so it can turn when the panel opens. */
	.nav-more > button i {
		width: 0.4375rem;
		height: 0.4375rem;
		margin-top: -0.1875rem;
		border-right: 1.5px solid currentColor;
		border-bottom: 1.5px solid currentColor;
		transform: rotate(45deg);
		transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1);
	}

	.nav-more:hover > button,
	.nav-more.is-open > button {
		border-color: #0093ff;
		background: rgba(0, 147, 255, 0.10);
		color: #0093ff;
	}

	.nav-more.is-open > button i { transform: rotate(-135deg) translate(-2px, -2px); }

	/* Beside the track, not in it. The nav is a flex row, so the chip simply follows the list. */
	.nav-more {
		position: relative;
		display: flex;
		align-items: center;
		margin-left: 0.625rem;
	}

/* ---------------------------------------------------------------- the directory */

.nav-areas {
	position: absolute;
	/* Centred on the chip it belongs to, and clear of the bar — which the chip sits inside, so the
	   offset has to cover the rest of the bar's height as well as the gap under it. */
	top: calc(100% + 2.5rem);
	left: 50%;
	transform: translateX(-50%);
	z-index: 10;
	display: grid;
	grid-template-columns: repeat(3, minmax(9.5rem, 1fr));
	gap: 1.875rem 2.75rem;
	width: 40rem;
	padding: 1.75rem 2rem 2rem;
	background: #fff;
	border: 1px solid #e6e1dd;
	border-radius: 16px;
	box-shadow:
		0 1px 2px rgba(16, 14, 13, 0.05),
		0 24px 50px -22px rgba(16, 14, 13, 0.5);
	font-family: 'Bricolage Grotesque', 'Gotham', Arial, sans-serif;
	text-align: left;
}

	.nav-areas[hidden] { display: none; }

	/* The panel hangs below the bar with a gap under it. Without something to travel across, moving
	   the pointer from the chip to the panel leaves the menu and closes it. */
	.nav-areas::before {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		top: -2.5rem;
		height: 2.5rem;
	}

	/* The heading is a heading, not a label: set at reading size with a rule under it, so each
	   column reads as its own short list rather than as one long one broken up by tags. */
	.nav-areas-group p {
		margin: 0 0 0.75rem;
		padding-bottom: 0.625rem;
		border-bottom: 1px solid #ece7e3;
		font-size: 0.9375rem;
		font-weight: 500;
		letter-spacing: -0.01em;
		color: #100e0d;
	}

	.nav-areas-group a {
		display: block;
		padding: 0.3125rem 0;
		font-size: 0.9375rem;
		font-weight: 300;
		line-height: 1.35;
		color: #6c6560;
		text-decoration: none;
		transition: color 0.16s ease;
	}

		.nav-areas-group a:hover { color: #0093ff; }

		/* Where you are. The dot sits in the gutter so the labels keep one left edge, and the weight
		   change alone would be too quiet to find in a list of eighteen. */
		.nav-areas-group a.is-current {
			position: relative;
			font-weight: 500;
			color: #100e0d;
		}

			.nav-areas-group a.is-current::before {
				content: "";
				position: absolute;
				left: -0.75rem;
				top: 50%;
				width: 5px;
				height: 5px;
				margin-top: -2.5px;
				border-radius: 999px;
				background: #0093ff;
			}

	/* No breakpoint hides this: it is the only way to most of the application, so it has to survive
	   every width the sections do. */

	/* Three columns while there is room for them, then two, then one. The panel is centred on the
	   chip until that would push it off the window, at which point it right-aligns instead — the
	   chip sits near the right, so that is the edge it runs out of. */
	@media (max-width: 1100px) {
		.nav-areas {
			left: auto;
			right: 0;
			transform: none;
			width: 32rem;
			grid-template-columns: repeat(2, minmax(9rem, 1fr));
		}
	}

	/* Narrow enough that anchoring to the chip is no help — the chip itself may be near or past the
	   window edge. Centred on the track instead, which is centred in the bar, so the panel lands in
	   the middle of the window whatever the chip is doing.

	   position: fixed is no use here: <nav> carries a transform to centre itself, and a transformed
	   ancestor becomes the containing block for fixed descendants, so the panel would be pinned to
	   the nav rather than to the window. */
	@media (max-width: 720px) {
		/* Dropping the chip out of positioned context hands the panel back to <nav>, which is centred
		   in the bar — so "centre on the chip" becomes "centre on the window", which is what is
		   wanted once the chip itself is squeezed against the edge. */
		.nav-more { position: static; }

		.nav-areas {
			left: 50%;
			right: auto;
			transform: translateX(-50%);
			width: min(calc(100vw - 2rem), 22rem);
			max-height: calc(100vh - 9rem);
			gap: 1.25rem 1.5rem;
			padding: 1.25rem 1.25rem 1.5rem;
			grid-template-columns: 1fr;
			overflow-y: auto;
		}

		/* The bridge is only needed while the panel hangs off the chip. */
		.nav-areas::before { content: none; }
	}


/* The band the trail sits on. Its own ground, so the chrome ends and the page begins on a visible
   line rather than on trust. */
/* Sits on the wrapper's gradient, so it needs no ground of its own. */
.crumb-band {
	background: transparent;
	margin-bottom: 2.5rem;
}

	.crumb-band .wrap {
		padding-top: 1rem;
		padding-bottom: 1rem;
	}

.smt-tag {
	display: block;
	font-family: 'Bricolage Grotesque', 'Gotham', Arial, sans-serif;
	font-size: 0.6875rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: #6c6560;
	width: 100%;
}

	.smt-tag a {
		text-decoration: none;
		color: #6c6560;
		transition: color 0.18s ease;
	}

	.smt-tag a:hover {
		color: #100e0d;
	}

	/* Slashes rather than em dashes: a dash reads as a break in a sentence, a slash as a path. */
	.smt-tag i {
		display: inline-block;
		margin: 0 0.5rem;
		font-style: normal;
		color: #bdb7b1;
	}

	/* The last crumb is where you are, so it is the one thing here in ink. */
	.smt-tag .breadcrumbs { color: #100e0d; }

h1 {
	font-family: 'Bricolage Grotesque', 'Gotham', Arial, sans-serif;
	font-weight: 600;
	letter-spacing: -0.025em;
	line-height: 1.1;
	/* Same fluid size as h2, just bold — the five em steps this used to climb through are what the
	   clamp replaces. */
	font-size: clamp(1.75rem, 3.2vw, 2.75rem);
	margin-bottom: 0.25em;
}

h2 {
	font-family: 'Bricolage Grotesque', 'Gotham', Arial, sans-serif;
	font-weight: 500;
	letter-spacing: -0.025em;
	line-height: 1.1;
	/* Fluid rather than a step at 800px: the page heading should read as the page's title at any
	   width, and at the old 1.3em it was barely above the body copy. */
	font-size: clamp(1.75rem, 3.2vw, 2.75rem);
	margin-bottom: 1.25em;
}

h2.thin,
h2 .thin {
	font-weight: 200;
}

h2.delete {
	display: inline-block;
	background-color: #d83c3c;
	color: #fff;
	padding: 0.25em 0.5em;
}

h3 {
	font-weight: 600;
	line-height: 120%;
	font-size: 1.1em;
	margin-top: 2em;
	margin-bottom: 1em;
}

	@media (min-width: 800px) {
		h3 {
			font-size: 1.2em;
			line-height: 120%;
		}
	}

	@media (min-width: 1000px) {
		h3 {
			font-size: 1.3em;
			line-height: 120%;
		}
	}

	@media (min-width: 1200px) {
		h3 {
			font-size: 1.4em;
			line-height: 120%;
		}
	}

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

p {
	line-height: 140%;
	font-weight: 400;
	margin-bottom: 1em;
}

.highlight { color: #0093ff; }
.styling-data .highlight { color: #0093FF; }

.legal-text {
	max-width: 1000px;
	margin: 5px auto;
	padding-left: 4em;
}

	.legal-text h1 {
		margin: 2em 0 1em 0;
	}

	.legal-text .num {
		position: absolute;
		text-align: right;
		transform: translateX(-75px);
		font-family: monospace;

		font-size: 1rem;
		width: 50px;
	}

	.legal-text ul {
		padding-left: 50px;
	}

	.legal-text ul.bullets {
		list-style-type: disc;
	}

		.legal-text ul li {
			margin: 1em 0;
			line-height: 140%;
		}

		.legal-text ul li .num {
			text-align: left;
			transform: translateX(-50px);
		}

.login-holder,
.activation-holder {
	background: #111;
	position: absolute;
	width: 100%;
	height: 100%;
	min-height: 700px;
	top: 0;
	left: 0;
}

.activation-holder {
	min-height: 450px;
}

	.activation-area {
		color: #fff;
		padding: 1em;
		width: 100%;
		max-width: 500px;
		position: absolute;
		z-index: 0;
		box-shadow: 0 0 3em rgba(0,0,0,0.2);
		top: 50%;
		left: 50%;
		transform: translateX(-50%) translateY(-50%);
	}

		@media (min-width: 400px) {
			.activation-area {
				padding: 1em;
				width: 85%;
			}
		}

		.activation-holder h2+h2 {
			margin-top: -1.5em;
		}

	.login-area,
	.signup-area {
		background: #444444;
/* 		border-radius: 1em; */
		padding: 3em;
		width: 85%;
		max-width: 500px;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translateX(-50%) translateY(-50%) scale(0.8);
		z-index: 0;
		box-shadow: 0 0 3em rgba(0,0,0,0.2);
		-webkit-transition: all 0.3s ease;
		-moz-transition: all 0.3s ease;
		-o-transition: all 0.3s ease;
		transition: all 0.3s ease;
	}

		.login-area {
			transform: translateX(-50%) translateY(-15%) scale(0.8);
		}

		.signup-area {
			transform: translateX(-50%) translateY(-38%) scale(0.8);
		}

		.login-area.active {
			transform: translateX(-50%) translateY(-50%) scale(1);
		}

		.signup-area.active {
			transform: translateX(-50%) translateY(-50%) scale(1);
		}

		@media (min-width: 650px) {
			.login-area {
				transform: translateX(-40%) translateY(-40%) scale(0.8);
			}

			.signup-area {
				transform: translateX(-40%) translateY(-40%) scale(0.8);
			}

			.login-area.active {
				transform: translateX(-60%) translateY(-50%) scale(1);
			}

			.signup-area.active {
				transform: translateX(-60%) translateY(-50%) scale(1);
			}
		}

		.login-area.active,
		.signup-area.active {
			background: #fff;
			z-index: 1;
		}

		.login-area .inner,
		.login-area .login-forgot-password-holder,
		.signup-area .inner {
			opacity: 0;
			pointer-events:none;
		}

		.login-area.active .inner,
		.login-area.active .login-forgot-password-holder,
		.signup-area.active .inner {
			opacity: 1;
			pointer-events:all;
		}

	.login-holder h2 {
		font-weight: normal;
	}

	.login-holder h2 .understate {
		color: #999;
	}

	.login-area .login-forgot-password-holder {
		margin-top: 3em;
	}

	.login-area .login-forgot-password {
		background: #f8f8f8;
		border-top: 1px solid #eee;
		position: absolute;
		width: 100%;
		left: 0;
		bottom: 0;
/* 		border-radius: 0 0 1em 1em; */
		padding: 1.5em 3em;
		color: #777;
	}

	.login-area .error-list,
	.signup-area .error-list {
		margin-bottom: 1em;
	}

	.login-area .error-list li,
	.signup-area .error-list li {
		border-bottom: 0;
		background: rgba(210, 35, 62, 0.15);
		color: #94040e;
		padding: 1em 3em;
		line-height: 120%;
		margin: 1px -3em 0 -3em;
		position: relative;
	}

		.login-area .error-list li::before,
		.signup-area .error-list li::before {
			content: "";
			position: absolute;
			left: 1em;
			width: 1em;
			height: 1em;
			top: 50%;
			transform: translateY(-50%);
			background: url(img/error-red.svg) no-repeat center center;
			background-size: contain;
		}

	/* SSO / Sign in with SSO */
	.sso-divider {
		text-align: center;
		margin: 1.5em 0;
		position: relative;
	}

	.sso-divider::before {
		content: '';
		position: absolute;
		top: 50%;
		left: 0;
		right: 0;
		height: 1px;
		background: #ccc;
	}

	.sso-divider span {
		background: #fff;
		padding: 0 1em;
		position: relative;
		color: #999;
		font-size: 0.875em;
	}

	.sso-button-wrap {
		text-align: center;
	}

	.sso-button {
		display: inline-flex;
		align-items: center;
		gap: 0.5em;
		padding: 0.6em 1.5em;
		border: 1px solid #ccc;
		border-radius: 4px;
		color: #333;
		text-decoration: none;
		font-size: 1em;
		font-weight: 500;
		transition: all 0.2s ease-in-out;
	}

	.sso-button:hover {
		background: #f8f8f8;
		border-color: #aaa;
	}

	.sso-button svg {
		flex-shrink: 0;
	}

	.signup-legal-accept {
		width: 100%;
		margin: 0.5em 0;
		display: flex;
		flex-flow: row wrap;
		justify-content: space-between;
	}

		.signup-legal-accept label {
			width: calc(100% - 2rem);
		}

		.signup-legal-accept a {
			text-decoration: underline;

		}
/*

.shake {
  animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
}

@keyframes shake {
  10%, 90% {
    transform: translate3d(-10px, 0, 0);
  }

  20%, 80% {
    transform: translate3d(20px, 0, 0);
  }

  30%, 50%, 70% {
    transform: translate3d(-40px, 0, 0);
  }

  40%, 60% {
    transform: translate3d(40px, 0, 0);
  }
}
*/

/* A launcher of twenty-odd destinations, so it is built like one: each thing is an icon on a raised
   chip with its name under it, floating on the page with room to breathe, rather than a box drawn
   around it. Sized by the grid itself, so the three width breakpoints it used to need are gone. */
.columns {
	display: flex;
	/* flex-direction: row; */
	/* justify-content: space-between; */
	-webkit-flex-flow: row wrap;
	flex-flow: row wrap;
	gap: 0.5rem;
}

	.half {
		position: relative;
	}

		@media (min-width: 600px) {
			.half {
				width: 50%;
				width: calc(50% - 15px);
			}
		}

	.profile-item {
		width: calc(50% - 0.25rem);
		position: relative;
		display: block;
		/* padding: 1em; */
		background: #f8f8f8;
		border: 1px solid #fff;
		border-radius: 1rem;
		-webkit-transition: all 0.3s ease-in-out;
		-moz-transition: all 0.3s ease-in-out;
		-o-transition: all 0.3s ease-in-out;
		transition: all 0.3s ease-in-out;
	}

		.profile-item.aside {
			background: #eee;
			color: #0093ff;
		}

		@media (min-width: 600px) {
			.profile-item {
				width: calc(33.333% - 0.3333rem);
			}
		}

		@media (min-width: 800px) {
			.profile-item {
				width: calc(25% - 0.375rem);
			}
		}

		@media (min-width: 1200px) {
			.profile-item {
				width: calc(20% - 0.4rem);
			}
		}

		/* Masked, not painted: the SVG supplies the shape and background-color supplies the colour,
		   which is the only way a black line icon can take the blush on hover. Every rule below sets
		   a mask rather than a background-image for the same reason. */
		.profile-item span {
			width: 4rem;
			height: 4rem;
			display: block;
			margin: 0 auto 1rem auto;
			background-size: contain;
			background-position: center;
			background-repeat: no-repeat;
		}

			.profile-item span.lifestyle { background-image: url(img/luggage.svg); }
			.profile-item span.look { background-image: url(img/pantone.svg); }
			.profile-item span.skincare { background-image: url(img/lotion.svg); }
			.profile-item span.basic { background-image: url(img/key.svg); }
			.profile-item span.location { background-image: url(img/position.svg); }
			.profile-item span.makeup { background-image: url(img/cosmetics.svg); }
			.profile-item span.product { background-image: url(img/pros-and-cons.svg); }
			.profile-item span.skintype { background-image: url(img/pimples.svg); }
			.profile-item span.allergies { background-image: url(img/biology.svg); }
			.profile-item span.hair { background-image: url(img/comb.svg); }
			.profile-item span.feedback { background-image: url(img/feedback.svg); }
			.profile-item span.contact { background-image: url(img/paper-plane.svg); }

			.profile-item span.manage-brand { background-image: url(img/manage-brand.svg); }
			.profile-item span.manage-high-prio { background-image: url(img/manage-high-prio.svg); background-size: 100%; background-position: top; }
			.profile-item span.manage-certifications { background-image: url(img/manage-certifications.svg); background-size: 100%; background-position: top; }
			.profile-item span.manage-retailer { background-image: url(img/manage-retailer.svg); }
			.profile-item span.manage-user { background-image: url(img/manage-user.svg); }
			.profile-item span.manage-api-users { background-image: url(img/manage-api-users.svg); }
			.profile-item span.manage-ingredient { background-image: url(img/manage-ingredient.svg); }
			.profile-item span.manage-translation { background-image: url(img/manage-translation.svg); }
			.profile-item span.manage-ean { background-image: url(img/manage-ean.svg); }
			.profile-item span.manage-labels { background-image: url(img/manage-labels.svg); }
			.profile-item span.manage-questionnaires { background-image: url(img/manage-questionnaires.svg); }
			.profile-item span.manage-explainers { background-image: url(img/manage-explainers.svg); }
			.profile-item span.manage-bulk-upload { background-image: url(img/manage-bulk-upload.svg); }
			.profile-item span.manage-stats { background-image: url(img/manage-stats.svg); }
			.profile-item span.manage-log { background-image: url(img/manage-log.svg); }
			.profile-item span.manage-inci-analyzer { background-image: url(img/manage-inci-analyzer.svg); }
			.profile-item span.fragrance-notes { background-image: url(img/fragrance-notes.svg); }

		.profile-item a {
			display: block;
			padding: 3rem 1rem 2.5rem 1rem;
			height: 100%;
			text-align: center;
			text-decoration: none;
			font-weight: 600;
		}

			/* The label rides in a bubble of its own rather than sitting flat on the tile, so it reads
			   as a tag on the icon. It is an element because the label used to be a bare text node,
			   which CSS cannot reach. */
			.profile-item .tile-label {
				display: inline-block;
				padding: 0.5rem 1.0625rem;
				background: #fff;
				border: 1px solid #ccc;
				border-radius: 999px;
				font-family: 'Bricolage Grotesque', 'Gotham', Arial, sans-serif;
				font-size: 0.9375rem;
				font-weight: 500;
				letter-spacing: -0.005em;
				line-height: 1.2;
				color: #100e0d;
				transition: border-color 0.3s ease-in-out, background 0.3s ease-in-out, color 0.3s ease-in-out;
			}

			/* Flat rather than the nav pill's gradient: `background` cannot interpolate from a solid
			   colour to a gradient, so the bubble would snap instead of fading in. */
			.profile-item:hover .tile-label {
				background: #0093ff;
				border-color: #0093ff;
				color: #fff;
			}

			@media (min-width: 500px) {
				.profile-item a {
					padding: 4rem 1rem 3.5rem 1rem;
				}
			}

		/* The crimson underscore was from the old palette and read as an alert next to the blush
		   chrome. The tile takes a light blush wash and comes forward instead. */
		/* A soft light blooming from under the icon and falling away to the tile's own grey. It lives
		   on a pseudo-element because one gradient cannot be transitioned into another — fading and
		   growing a layer is what makes it arrive rather than switch on. */
		.profile-item::after {
			content: "";
			position: absolute;
			inset: 0;
			z-index: 0;
			border-radius: inherit;
			background: radial-gradient(circle at 50% 42%,
				rgba(255, 255, 255, 1) 0%,
				rgba(255, 255, 255, 0.65) 42%,
				rgba(255, 255, 255, 0) 72%);
			opacity: 0;
			transform: scale(0.88);
			pointer-events: none;
			transition:
				opacity 0.35s ease-out,
				transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
		}

		.profile-item:hover {
			border-color: #fff;
		}

			.profile-item:hover::after {
				opacity: 1;
				transform: scale(1);
			}

		/* Above the glow. */
		.profile-item a {
			position: relative;
			z-index: 1;
		}

		@media (prefers-reduced-motion: reduce) {
			.profile-item::after { transition: none; }
		}

.leaf {
	position: absolute;
	height: auto;
	width: 100%;
	margin-top: -15em;
}

.signup-wrap {
	margin: 100px auto;
	width: 90%;
	max-width: 400px;
}

form {

}

	input:-webkit-autofill {
	    -webkit-box-shadow: 0 0 0px 1000px #fff inset;
	}

	.form-field-wrap.two-columns {
		border-bottom: 1px dotted #B3BFA2;
		padding: 2em 0;
	}

		#ingredients-holder .form-field-wrap.two-columns {
			padding: 0.5em 0;
		}

	.left-label {
		margin-bottom: 2em;
		font-weight: 600;
	}

	@media (min-width: 650px) {
		.form-field-wrap.two-columns {
			padding: 3em 0;
		}

		.left-label {
			width: 40%;
			float: left;
			padding-right: 3em;
			line-height: 130%;
			margin-bottom: 0;
		}

		.right-form-field {
			width: 60%;
			float: left;
		}

		#ingredients-holder .left-label {
			padding-right: 1.5em
		}
	}

	form.fancy-form {
		width: 100%;
	}

	.form-field-wrap input.text.fancy-field {
		padding: 0;
		font-size: 1.375em;
		outline: none;
		border: 0;
		padding: 0.25em 0;
		width: 100%;
		font-weight: 300;
		color: #111;
		border-bottom: 1px solid #ccc;
		margin-bottom: 2px;
		background: transparent;
		-webkit-transition: all 0.2s ease-in-out;
		-moz-transition: all 0.2s ease-in-out;
		-o-transition: all 0.2s ease-in-out;
		transition: all 0.2s ease-in-out;
	}

		.form-field-wrap input.text.fancy-field:focus {
			border-bottom: 1px solid #0093ff;
		}

	.form-field-wrap input.fancy-button {
		padding: 0;
		font-size: 1.625em;
		outline: none;
		background: transparent;
		border: 0;
		width: auto;
		font-weight: 600;
		color: #0093ff;
		cursor: pointer;
		-webkit-transition: all 0.2s ease-in-out;
		-moz-transition: all 0.2s ease-in-out;
		-o-transition: all 0.2s ease-in-out;
		transition: all 0.2s ease-in-out;
	}

		.form-field-wrap input.fancy-button:hover,
		.form-field-wrap input.fancy-button:focus {
			background-color: #0093ff;
			color: #fff;

		}

		input.fancy-button.disabled {
			pointer-events: none;
		}

	fieldset {
		border: 0;
		padding: 0;
	}

		.form-field-wrap {
			padding: 0.5em 0;
		}

		.form-field-wrap label {
			display: block;
			padding: 0 0 0.25em 0;
			line-height: 130%;
		}

		.form-field-wrap .form-field-hint {
			margin: 0;
			color: #777777;
			font-size: 0.875em;
			margin-bottom: 0.25em;
			font-weight: 400;
		}

		.form-field-wrap input.text,
		.form-field-wrap textarea.text,
		.form-field-wrap select.simple-text-select,
		.form-field-wrap input.text-button {
			width: 100%;
			padding: 0.6em;
			font: inherit;
			border: 1px solid #ccc;
			background: #fff;
			outline: none;
			border-radius: 0;
			-webkit-transition: all 0.2s ease-in-out;
			-moz-transition: all 0.2s ease-in-out;
			-o-transition: all 0.2s ease-in-out;
			transition: all 0.2s ease-in-out;
		}

		.form-field-wrap input.text:disabled,
		.form-field-wrap textarea.text:disabled {
			opacity: 0.6;
			background: #eee;
		}

		#ingredients-holder .form-field-wrap input.text:disabled {
			opacity: 1;
		}

		.icon-autoassigned {
			position: relative;
		}

		.icon-autoassigned input.text {
			padding-left: 2em;
			position: relative;
			color: #0093ff;
		}

			.icon-autoassigned::before {
				content: "";
				width: 0.9em;
				height: 0.9em;
				background: url(img/lightning.svg) no-repeat center;
				background-size: contain;
				position: absolute;
				left: 0.75em;
				top: 50%;
				transform: translateY(-50%);
				z-index: 9;
			}

		.form-field-wrap input.text:focus,
		.form-field-wrap textarea.text:focus,
		.form-field-wrap select.simple-text-select:focus {
			border-bottom-color: #0093ff;
			-webkit-box-shadow: inset 0px -6px 0px -3px rgba(0, 147, 255,1);
			-moz-box-shadow: inset 0px -6px 0px -3px rgba(0, 147, 255,1);
			box-shadow: inset 0px -6px 0px -3px rgba(0, 147, 255,1);
		}

		.form-field-wrap textarea {
			height: 10em;
			line-height: 130% !important;
		}

		.form-field-wrap select.simple-text-select {
			width: auto;
			-webkit-appearance:none;
			padding-right: 2.5em;
			position: relative;
			background-image:url(img/select-dropdown.png);
			background-position: right center;
			background-size: auto 55%;
			background-repeat: no-repeat;
		}

		.form-field-wrap input.text-button {
			width: auto;
			cursor: pointer;
			/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,eeeeee+100 */
background: rgb(255,255,255); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(238,238,238,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(238,238,238,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(238,238,238,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eeeeee',GradientType=0 ); /* IE6-9 */

		}

		input[type='submit'].button,
		a.submit.button {
			background: #0093ff;
			padding: 0.6em;
			color: #fff;
			border: 0;
			font: inherit;
			font-size: 1.4em;
			font-weight: 600;
			margin-right: 1em;
			cursor: pointer;
			-webkit-appearance: none;
			border-radius: 0;
			text-decoration: none;
			-webkit-transition: all 0.2s ease-in-out;
			-moz-transition: all 0.2s ease-in-out;
			-o-transition: all 0.2s ease-in-out;
			transition: all 0.2s ease-in-out;
		}

			input[type='submit']:disabled {
				background: #333;
				color: #666;
				pointer-events:none;
			}

			input[type='submit'].button:hover,
			input[type='submit'].button:focus,
			a.submit.button:hover,
			a.submit.button:focus {
				background: #cb054a
			}

			input[type='submit'].button:active,
			a.submit.button:active {
				background: #9b0338
			}

		.form-field-wrap.checkbox-wrap {
			padding: 0.25em 0;
		}

		.checkbox-wrap label {
			display: inline-block;
			margin-left: 0.4em;
		}

		#mapcanvas {
			height: 300px;
			width: 100%;
			background: #eee;

		}

.rows-form {
	width: 100%;
	margin: 0 0 3rem 0;
}

	.rows-form .form-row {
		border-bottom: 1px dotted rgba(0,0,0,0.2);
		display: flex;
		flex-flow: row wrap;
		align-items: center;
	}

		.rows-form .form-row:last-child {
			border-bottom: 0;
		}

	.rows-form .form-row label {
		width: 30%;
		display: block;
		max-width: 250px;
		text-align: left;
		padding: 1.5rem 0;
		border-right: 1px dotted rgba(0,0,0,0.15);
		padding-right: 1.25rem;
	}

	.rows-form .form-row.form-row-textfield input,
	.rows-form .form-row.form-row-textarea textarea,
	.rows-form .form-row.form-row-select select,
	.rows-form .form-row.form-row-submit input,
	.rows-form .form-row.form-row .value {
		margin-left: 0.5rem;
	}

	.rows-form .form-row.form-row .value {
		flex: 1;
	}

	.rows-form .form-row.form-row-textfield input,
	.rows-form .form-row.form-row-textarea textarea,
	.rows-form .form-row.form-row-select select {
		flex: 1;
		font: inherit;
		appearance: none;
		-webkit-appearance: none;
		outline: none;
		background: #eee;
		border: 2px solid #eee;
		padding: 0.75rem 1rem;
		border-radius: 0;
		line-height: 120%;
		transition: all 0.2s ease-in-out;
	}

	.rows-form .form-row.form-row-textfield input:focus,
	.rows-form .form-row.form-row-textarea textarea:focus,
	.rows-form .form-row.form-row-select select:focus {
		border-color: #0093ff;
	}

	.styling-data .rows-form .form-row.form-row-textfield input:focus,
	.styling-data .rows-form .form-row.form-row-textarea textarea:focus,
	.styling-data .rows-form .form-row.form-row-select select:focus {
		border-color: #0093ff;
	}

	.rows-form .form-row.form-row-submit input {
		font: inherit;
		appearance: none;
		-webkit-appearance: none;
		outline: none;
		padding: 0.75rem 2rem;
		border-radius: 4px;
		line-height: 120%;
		background: #000;
		border: 2px solid #000;
		color: #fff;
		font-weight: bold;
		transition: all 0.2s ease-in-out;
	}

	.styling-data .rows-form .form-row.form-row-submit input {
		background: #0093ff;
		border-color: #0093ff;
		background: linear-gradient(180deg, rgba(0,147,255,1) 0%, rgba(0,140,244,1) 100%);
	}

.pac-container {
	font-family: inherit;
}

	.pac-container .pac-item {
		font-size: 1rem;
		padding: 0.3em 0.6em;
	}

		.pac-container .pac-item .pac-icon {
			display: none;
		}

		.pac-container .pac-item .pac-item-query {
			font-size: inherit;
		}

#geolocate-btn {
	position: absolute;
	width: 1.5rem;
	height: 1.5rem;
	right: 0.5rem;
	top: 50%;
	transform: translateY(-50%);
	background: url(img/geolocate.svg) no-repeat center;
	background-size: contain;
	z-index: 99;
	display: block;
	overflow: hidden;
	text-indent: -1000px;
}

form.sectioned {
	max-width: 1000px;
}

form.sectioned fieldset {
	background: #f8f8f8;
	padding: 2em;
	border-left: 5px solid #0093ff;
	margin-bottom: 2em;
}

	form.sectioned .fieldset-title {
		color: #0093ff;
	}

	form.sectioned p.descr {

	}

ul.error-list {
	margin-bottom: 1em;
}

	ul.error-list li {
		border-bottom: 0;
		background: rgba(210, 35, 62, 0.15);
		color: #94040e;
		padding: 1em 1em 1em 3em;
		line-height: 120%;
		margin: 1px 0 0 0;
		position: relative;
	}

		ul.error-list li::before {
			content: "";
			position: absolute;
			left: 1em;
			width: 1em;
			height: 1em;
			top: 50%;
			transform: translateY(-50%);
			background: url(img/error-red.svg) no-repeat center center;
			background-size: contain;
		}

ul.response-list {
	margin-bottom: 1em;
}

	ul.response-list li {
		border-bottom: 0;
		background: rgba(35, 177, 209, 0.15);
		color: #046e94;
		padding: 1em 1em 1em 3em;
		line-height: 120%;
		margin: 1px 0 0 0;
		position: relative;
	}

		ul.response-list li::before {
			content: "";
			position: absolute;
			left: 1em;
			width: 1em;
			height: 1em;
			top: 50%;
			transform: translateY(-50%);
			background: url(img/check-blue.svg) no-repeat center center;
			background-size: contain;
		}

	.mandatory::after {
		content:" *";
		color: #ed2929;
	}

.hidden {
	display: none !important;
}

strong {
	font-weight: 600;
}

.clear {
	clear: both;
}

table {

}

table.simple {
	font-size: 0.875em;
	width: 100%;
}

	table.simple .bg-green {
		background: rgba(62, 185, 19, 0.27)
	}

	table.simple thead {
		border-bottom: 3px solid #ccc;
		text-align: left;
		white-space: nowrap;
	}

		table.simple thead tr th {
			padding: 0.5em 0;
			font-weight: 600;
		}

	table.simple tbody {

	}

	table.simple tbody tr:hover {
		background: #f8f8f8;
	}

	table.simple td {
		padding: 0.75em 1em 0.75em 0;
		text-align: left;
		border-bottom: 1px dotted #ccc;
	}

	table.simple {

	}

.button-selector {
	display: flex;
	flex-flow: row wrap;
	border: 1px solid #ccc;
	border-radius: 0.4rem;
	overflow: hidden;
	margin-top: -1rem;
}

	.button-selector .button-item {
		text-align: center;
		cursor: pointer;
		padding: 1rem;
		border-left: 1px dotted #ccc;
		-webkit-transition: all 0.3s ease-in-out;
		-moz-transition: all 0.3s ease-in-out;
		-o-transition: all 0.3s ease-in-out;
		transition: all 0.3s ease-in-out;
	}

		.button-selector .button-item:nth-child(1) {
			border-left: 0;
		}

	.button-selector .button-item:hover {
		background: #eee;
	}

	.button-selector .button-item.active {
		background: #B3BFA2;
		color: #fff;
	}

	.button-selector.four-options .button-item { width: 25%; }
	.button-selector.three-options .button-item { width: 33.33%; }
		@media (min-width: 650px) {
			.button-selector.three-options.shorter { width: 75%; }
		}

	.button-selector .button-item input {
		display: none;
	}

.haircolor-selector-wrapper {
	display: flex;
	flex-flow: row wrap;
	margin-bottom: 4em;
}

	.haircolor-selector-item {
		width: 50%;
		text-align: center;
		padding: 1rem;
		background: #fff;
		cursor: pointer;
		position: relative;
		-webkit-transition: all 0.3s ease-in-out;
		-moz-transition: all 0.3s ease-in-out;
		-o-transition: all 0.3s ease-in-out;
		transition: all 0.3s ease-in-out;
	}

		@media (min-width: 500px) {
			.haircolor-selector-item {
				width: 33.33%;
			}
		}

		@media (min-width: 700px) {
			.haircolor-selector-item {
				width: 25%;
			}
		}

		.haircolor-selector-item i.icon {
			width: 2em;
		    height: 2em;
		    border-radius: 100%;
		    display: block;
		    margin: 0 auto 1em auto;
		    background: #fff url(img/checkmark.png) no-repeat center;
		    box-shadow: 0 0 10px rgba(0,0,0,0.3);
		    background-size: 50%;
		    position: absolute;
		    left: -0.5em;
		    top: 50%;
		    margin-top: -1em;
		    transform: scale(0.6);
		    opacity: 0;
		    z-index: 9;
		    -webkit-transition: all 0.2s ease-in-out;
		    -moz-transition: all 0.2s ease-in-out;
		    -o-transition: all 0.2s ease-in-out;
		    transition: all 0.2s ease-in-out;
		}

			.haircolor-selector-item.active i.icon {
				opacity: 1;
				transform: scale(1);
			}

		.haircolor-selector-item .hair-image {
			width: 75%;
			background-size: 100% auto;
			background-position: center center;
			background-repeat: no-repeat;
			background-color: #fff;
			border-radius: 100%;
			margin: 0 auto;
			-webkit-transition: all 0.3s ease-in-out;
		    -moz-transition: all 0.3s ease-in-out;
		    -o-transition: all 0.3s ease-in-out;
		    transition: all 0.3s ease-in-out;
		}

			.haircolor-selector-item .hair-image::before {
				content: "";
				display: block;
				padding-top: 100%;
			}

			.haircolor-selector-item:hover .hair-image {

			}

			.haircolor-selector-item.active .hair-image {
				box-shadow: 0 0 1em rgba(0,0,0,0.1);
				transform: scale(0.875);

			}

		.haircolor-selector-item .hair-title {
			margin: 0;
		}

		.haircolor-selector-item:hover {
			box-shadow: 0 0 1em rgba(0,0,0,0.1);
			z-index: 9;
		}

		.haircolor-selector-item.active {
			box-shadow: 0 0 1em rgba(0,0,0,0.1);
			z-index: 9;
			background: rgb(252,252,252); /* Old browsers */
			background: -moz-linear-gradient(top,  rgba(252,252,252,1) 0%, rgba(248,248,248,1) 100%); /* FF3.6-15 */
			background: -webkit-linear-gradient(top,  rgba(252,252,252,1) 0%,rgba(248,248,248,1) 100%); /* Chrome10-25,Safari5.1-6 */
			background: linear-gradient(to bottom,  rgba(252,252,252,1) 0%,rgba(248,248,248,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfcfc', endColorstr='#f8f8f8',GradientType=0 ); /* IE6-9 */
		}

	@media (max-width: 499px) {
		.haircolor-selector-item {
			border-bottom: 1px dotted #ccc;
		}

		.haircolor-selector-item:nth-last-child(2),
		.haircolor-selector-item:nth-last-child(3) {
			border-bottom: none;
		}

		.haircolor-selector-item:nth-child(odd) {
			border-right: 1px dotted #ccc;
		}
	}

	@media (min-width: 500px) and (max-width: 699px) {
		.haircolor-selector-item:nth-child(1),
		.haircolor-selector-item:nth-child(2),
		.haircolor-selector-item:nth-child(3),
		.haircolor-selector-item:nth-child(4),
		.haircolor-selector-item:nth-child(5),
		.haircolor-selector-item:nth-child(6) {
			border-bottom: 1px dotted #ccc;
		}

		.haircolor-selector-item:nth-child(1),
		.haircolor-selector-item:nth-child(2),
		.haircolor-selector-item:nth-child(4),
		.haircolor-selector-item:nth-child(5),
		.haircolor-selector-item:nth-child(7),
		.haircolor-selector-item:nth-child(8) {
			border-right: 1px dotted #ccc;
		}
	}

	@media (min-width: 700px) {
		.haircolor-selector-item:nth-child(1),
		.haircolor-selector-item:nth-child(2),
		.haircolor-selector-item:nth-child(3),
		.haircolor-selector-item:nth-child(4) {
			border-bottom: 1px dotted #ccc;
		}

		.haircolor-selector-item:nth-child(1),
		.haircolor-selector-item:nth-child(2),
		.haircolor-selector-item:nth-child(3),
		.haircolor-selector-item:nth-child(5),
		.haircolor-selector-item:nth-child(6),
		.haircolor-selector-item:nth-child(7) {
			border-right: 1px dotted #ccc;
		}
	}

.skincolor-overview-item {
	width: 20%;
	padding: 1em;
	background: #eee;
	margin-bottom: 4em;
	cursor: pointer;
}

	.skincolor-overview-item:hover {
		background: #ccc;
	}

.skincolor-columns {
	display: flex;
	/* flex-direction: row; */
	/* justify-content: space-between; */
	-webkit-flex-flow: row wrap;
	flex-flow: row wrap;
	width: 95%;
	margin: 0em auto;
}

.skincolor-group {
	width: 16.66%;
	float: left;
	position: relative;
	padding: 0;
}

	.group-fair-red,
	.group-fair-neutral,
	.group-fair-yellow,
	.group-fair-deepyellow {
		display: block;
	}

	.group-fair-red {
		margin-left: 16.66%;
	}

		.group-fair-red .skincolor-item {
			position: absolute;
			bottom: 0;
			right: 0;
		}

	.group-brown-red {
		margin-left: 16.66%;
	}

	.group-fair-neutral {

	}

		.group-fair-neutral .skincolor-item:first-child {
			margin-left: 50%;
		}

	.group-dark-red {
		width: 33.32%;
		padding-left: 8.33%;
	}

		.group-dark-red .skincolor-item {
			width: 33.33%;
		}

	.group-bronze-deepred {
		width: 8.33%;
		margin-left: 8.33%;
	}

		.group-bronze-deepred .skincolor-item {
			width: 100%;
		}

	.xAxis-Scroll {
		background: #fff;
		box-shadow: 0 0 0 rgba(0,0,0,0.3);
		width: 100%;
		margin: 0 auto;
		position: fixed;
		padding: 0 32px;
		top: 0;
		z-index: 99;
		height: 4.5em;
		transform: translateY(-150%);
		-webkit-transition: all 0.3s ease-in-out;
		-moz-transition: all 0.3s ease-in-out;
		-o-transition: all 0.3s ease-in-out;
		transition: all 0.3s ease-in-out;
	}

		.xAxis-Scroll.show {
			transform: translateY(0);
			box-shadow: 0 0 1em rgba(0,0,0,0.3);
		}

		.xAxis-Scroll .xAxis {
			margin-top: 2em;
			margin-bottom: 2em;
			width: 79.1%;
			margin-left: 18.3%;
		}

	.xAxis {
		margin-top: 4em;
		margin-bottom: 4em;
		width: 83.34%;
		margin-left: 16.66%;
	}

		.xAxis i.icon-info {
			position: absolute;
			left: 50%;
			top: 50%;
			margin-top: -3em;
			margin-left: -1em;
			opacity: 1;
			z-index: 9;

		}

			.xAxis i.icon-info:hover {
				transform: scale(1.2);
			}

		.xAxis .half {
			width: 50%;
			float: left;
			position: relative;
		}

		.xAxis .label-yellow,
		.xAxis .label-red {
			width: 40%;
			float: left;
			position: relative;
			height: 5px;
			overflow: visible;
		}

		.xAxis .label-neutral {
			width: 20%;
			float: left;
			position: relative;
			height: 5px;
			overflow: visible;
		}

		.xAxis .label {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -55%);
			background: #fff;
			padding: 0.5em;
			cursor: pointer;
			text-align: center;
		}

		.xAxis .line {
			height: 1px;
			left: 0;
			margin-top: 1px;
			width: 100%;
			background: #ccc;
		}

			.xAxis .line::before {
				content: "";
				width: 1px;
				height: 31px;
				position: absolute;
				top: 0;
				background: #ccc;
				margin-top: -15px;
			}

			.xAxis .line::after {
				content: "";
				width: 1px;
				height: 31px;
				position: absolute;
				right: -1px;
				background: #ccc;
				margin-top: -15px;
			}

	.group-label {

	}

		.group-label .line {
			position: absolute;
			height: 100%;
			left: 30%;
			width: 1px;
			background: #ccc;
		}

			.group-label .line::before {
				content: "";
				width: 31px;
				height: 1px;
				position: absolute;
				top: 0;
				background: #ccc;
				margin-left: -15px;
			}

			.group-label .line::after {
				content: "";
				width: 31px;
				height: 1px;
				position: absolute;
				bottom: -1px;
				background: #ccc;
				margin-left: -15px;
			}

		.group-label .image {
			position: absolute;
			width: 60%;
			left: 30%;
			top: 50%;
			transform: translate(-50%, -55%);
			cursor: pointer;
		}

			.group-label .image img {
				width: 100%;
				height: auto;
				border-radius: 100%;
				border: 3px solid #fff;
				box-shadow: 0 0 1em rgba(0,0,0,0.2);
			}

		.group-label .label {
			position: absolute;
			width: 100%;
			height: 1.5em;
			line-height: 1.5em;
			background: #fff;
			text-align: center;
			margin-top: 0.5em;
		}

.skincolor-item {
	/* width: 100px; */
	text-align: center;
	width: 50%;
	float: left;
	position: relative;
	cursor: pointer;
	border-color: #fff;
	border: 1px solid #fff;
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
}

	.skincolor-item:before {
    	content: "";
	    float: left;

	    /* essentially the aspect ratio. 100% means the
	       div will remain 100% as tall as it is wide, or
	       square in other words.  */
	    padding-bottom: 100%;
	    cursor: pointer;
	}
	/* this is a clearfix. you can use whatever
	   clearfix you usually use, add
	   overflow:hidden to the parent element,
	   or simply float the parent container. */
	.skincolor-item:after {
	    content: "";
	    display: table;
	    clear: both;
	    cursor: pointer;
	}

	.skincolor-item:hover,
	.skincolor-item.active {
		transform:scale(1.5);
		z-index: 9;
		border: 2px solid #fff;
		cursor: pointer;
		box-shadow: 0 0 20px rgba(0,0,0,0.3);
		opacity: 1 !important;
	}

		.skincolor-item:hover {
			z-index: 20;
		}

		.skincolor-item.disabled {
			opacity: 0.6;
		}

		.skincolor-item.fully-disabled {
			opacity: 0.15;
			pointer-events: none;
		}

		.skincolor-item.fully-disabled:not(.active):hover {
			transform:scale(1);
			z-index: 0;
			border: 1px solid #fff;
			box-shadow: 0 0 0;
			opacity: 0.2 !important;
		}

		.skincolor-item.fully-disabled.active {
			pointer-events: all
		}

		.skincolor-item.fully-disabled.secondary-active,
		.skincolor-item.fully-disabled.active-skincolor.secondary-active,
		.skincolor-item.fully-disabled.active-tone.secondary-active {
			opacity: 1 !important;
		}

		.skincolor-item.fully-disabled.active-skincolor,
		.skincolor-item.fully-disabled.active-tone {
			opacity: 0.3 !important;
		}

	.skincolor-item-range {
		width: 100%;
		height: 100%;
		position: absolute;
		pointer-events:none;
		box-sizing: content-box;
		opacity: 0;
	}

		.skincolor-item:hover .skincolor-item-range {
			transform:scale(2.02);
			/* border: 1px solid #000; */
			box-shadow: 0 0 10px rgba(0,0,0,0.3);
		}

.step-description {
	margin-bottom: 4em;
	color: #666;
}

.skincare-need-item,
.hair-need-item {
	width: 50%;
	line-height: 140%;
	text-align: center;
	cursor: pointer;
	background: #fff;
	border: 1px solid #fff;
	border-bottom: 1px dotted #ccc;
	border-right: 1px dotted #ccc;
	font-weight: 400;
	position: relative;
	word-wrap: break-word;
	-ms-hyphens: auto;
	-moz-hyphens: auto;
	-webkit-hyphens: auto;
	hyphens: auto;
	color: #555;
	z-index: 0;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

	@media (max-width: 649px) {
		.skincare-need-item:nth-child(2n) {
			border-right: 0;
		}

		.skincare-need-item:nth-last-child(1),
		.skincare-need-item:nth-last-child(2) {
			border-bottom: none;
		}

		.hair-need-item:nth-child(2n) {
			border-right: 0;
		}

		.hair-need-item:nth-last-child(1) {
			border-bottom: none;
		}
	}

	@media (min-width: 650px) and (max-width: 999px) {
		.skincare-need-item,
		.hair-need-item {
			width: 33.33%;
		}

		.skincare-need-item:nth-child(3n) {
			border-right: 0;
		}

		.skincare-need-item:nth-last-child(1) {
			border-bottom: 0;
		}
		.skincare-need-item:nth-last-child(2) {
			border-bottom: 1px dotted #ccc;
		}

		.hair-need-item:nth-child(3n) {
			border-right: 0;
		}

		.hair-need-item:nth-last-child(1),
		.hair-need-item:nth-last-child(2) {
			border-bottom: 0;
		}

	}

	@media (min-width: 1000px) {
		.skincare-need-item {
			width: 25%;
		}

		.skincare-need-item:nth-child(4n) {
			border-right: 0;
		}

		.skincare-need-item:nth-last-child(1),
		.skincare-need-item:nth-last-child(2) {
			border-bottom: none;
		}

		.hair-need-item {
			width: 25%;
		}

		.hair-need-item:nth-child(4n) {
			border-right: 0;
		}

		.hair-need-item:nth-last-child(1),
		.hair-need-item:nth-last-child(2),
		.hair-need-item:nth-last-child(3) {
			border-bottom: none;
		}
	}

	/*
@media (min-width: 1400px) {
		.skincare-need-item {
			width: 20%;
		}

		.skincare-need-item:nth-child(5n) {
			border-right: 0;
		}

		.skincare-need-item:nth-last-child(1),
		.skincare-need-item:nth-last-child(2),
		.skincare-need-item:nth-last-child(3) {
			border-bottom: none;
		}
	}
*/

	.skincare-need-item:before,
	.hair-need-item:before {
    	content: "";
	    float: left;

	    /* essentially the aspect ratio. 100% means the
	       div will remain 100% as tall as it is wide, or
	       square in other words.  */
	    padding-bottom: 50%;
	    cursor: pointer;
	}
	/* this is a clearfix. you can use whatever
	   clearfix you usually use, add
	   overflow:hidden to the parent element,
	   or simply float the parent container. */
	.skincare-need-item:after,
	.hair-need-item:after {
	    content: "";
	    display: table;
	    clear: both;
	    cursor: pointer;
	}

	.skincare-need-item:hover,
	.hair-need-item:hover {
		background: #f8f8f8;
		/* z-index: 9; */
	}

	.skincare-need-item.active,
	.hair-need-item.active {
		color: #0093ff;
		z-index: 9;
		box-shadow: 0 0 1em rgba(0,0,0,0.1);
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#fcfcfc+0,f8f8f8+100 */
background: rgb(252,252,252); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(252,252,252,1) 0%, rgba(248,248,248,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(252,252,252,1) 0%,rgba(248,248,248,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(252,252,252,1) 0%,rgba(248,248,248,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfcfc', endColorstr='#f8f8f8',GradientType=0 ); /* IE6-9 */

	}

	.skincare-need-item input,
	.hair-need-item input {
		display: none;
	}

	.skincare-need-item i.icon,
	.hair-need-item i.icon {
		width: 2em;
		height: 2em;
		border-radius: 100%;
		display: block;
		margin: 0 auto 1em auto;
		background: #fff url(img/checkmark.png) no-repeat center;
		box-shadow: 0 0 10px rgba(0,0,0,0.3);
		background-size: 50%;
		position: absolute;
		left: -0.5em;
		top: 50%;
		margin-top: -1em;
		transform: scale(0.6);
		opacity: 0;
		z-index: 9;
		-webkit-transition: all 0.2s ease-in-out;
		-moz-transition: all 0.2s ease-in-out;
		-o-transition: all 0.2s ease-in-out;
		transition: all 0.2s ease-in-out;
	}

		.skincare-need-item.active i.icon,
		.hair-need-item.active i.icon {
			opacity: 1;
			transform: scale(1);
		}

		.skincare-need-item .inner,
		.hair-need-item .inner {
			position: absolute;
			top: 50%;
			width: 100%;
			text-align: center;
			left: 0;
			padding: 0 2em;
			transform: translate3d(0, -50%, 0);
		}

.default-ui.noUi-horizontal {
	height: 22px !important;
}

.default-ui .noUi-handle {
	width: 40px;
	height: 40px;
	top: -10px;
	left: -20px;
	border-radius: 100%;
	border: 2px solid #fff;
	box-shadow: none;
	box-shadow: 0 0 0.5em rgba(0,0,0,0.3);
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
}

	.default-ui .noUi-handle:before,
	.default-ui .noUi-handle:after {
		display: none;
	}

	.default-ui .noUi-handle.noUi-active {
		box-shadow: 0 0 1.5em rgba(0,0,0,0.2);
		transform: scale(1.2);
	}

.default-ui .noUi-connect {
	background: #B3BFA2;
}

.default-ui .noUi-marker-horizontal.noUi-marker {
	width: 1px;
}

#plane-slider-handles .noUi-handle {
	background: #fff url(img/plane_handle.png) no-repeat center;
	background-size: 70%;
}

#sun-slider-handles .noUi-handle {
	background: #fff url(img/sun_handle.png) no-repeat center;
	background-size: 70%;
}

#stress-slider-handles .noUi-handle {
	background: #fff url(img/stress_handle.png) no-repeat center;
	background-size: 70%;
}

#sleep-slider-handles .noUi-handle {
	background: #fff url(img/sleep_handle.png) no-repeat center;
	background-size: 80%;
}

.status {
	color: #333;
	background: #ccc;
	padding: 0.4em;
	border-radius: 3px;
	line-height: 90%;
	display: inline-block;
	font-size: 0.8em;
	font-weight: 600;
}

	.status.status-dot {
		padding: 0;
		border: 2px solid #fff;
		width: 12px;
		height: 12px;
		margin: 2px;
		border-radius: 100%;
	}

	@media (max-width: 1200px) {
		.status .status-label {
			display: none;
		}

		.status:hover .status-label {
			display: inline;
		}
	}

	a.status {
		text-decoration: none;
	}

	.status-submitted,
	a.status-submitted {
		color: #fff;
		background: #4d9acb;
	}

	.status-approved,
	.status-live,
	a.status-approved {
		color: #fff;
		background: #5ac675;
	}

	.status-edited,
	a.status-edited {
		color: #fff;
		background: #a3cd5f;
	}

	.status-created,
	a.status-created {
		color: #fff;
		background: #e49e12;
	}

	.status-inci-only,
	a.status-inci-only {
		color: #fff;
		background: #6f6f78;
	}

	.status-archived,
	a.status-rejected {
		color: #fff;
		background: #d03e54;
	}

	.status-permission-view {
		color: #fff;
		background: #4d9acb;
	}

	.status-permission-limited-upload {
		color: #fff;
		background: #a3cd5f;
	}

	.status-permission-upload {
		color: #fff;
		background: #5ac675;
	}

	.status-permission-translation {
		color: #fff;
		background: #ef6d53;
	}

	.status-permission-custom {
		color: #8f8f8f;
		background: #eee;
	}

.makeup-finish-item,
.makeup-coverage-item {
	width: 50%;
	margin-bottom: 4em;
	cursor: pointer;
}

	@media (min-width: 600px) {
		.makeup-finish-item,
		.makeup-coverage-item {
			width: 33.33%;
		}
	}

	@media (min-width: 1000px) {
		.makeup-finish-item,
		.makeup-coverage-item {
			width: 20%;
		}
	}

	.makeup-finish-item:hover,
	.makeup-coverage-item:hover {
		z-index: 10;
	}

	.makeup-finish-item.active,
	.makeup-coverage-item.active {
		z-index: 20;
	}

	.makeup-finish-image-holder,
	.makeup-coverage-image-holder {
		position: relative;
		-webkit-transition: all 0.3s ease-in-out;
		-moz-transition: all 0.3s ease-in-out;
		-o-transition: all 0.3s ease-in-out;
		transition: all 0.3s ease-in-out;
	}

	.makeup-finish-item img.makeup-finish,
	.makeup-coverage-item img.makeup-coverage {
		width: 80%;
		margin: 0 auto;
		height: auto;
		display: block;
		/* border-radius: 0.75em; */
		-webkit-transition: all 0.3s ease-in-out;
		-moz-transition: all 0.3s ease-in-out;
		-o-transition: all 0.3s ease-in-out;
		transition: all 0.3s ease-in-out;
	}

	.makeup-finish-item:hover .makeup-finish-image-holder,
	.makeup-coverage-item:hover .makeup-coverage-image-holder {
		/* transform: rotateX(5deg) rotateZ(5deg) scale(1.05) !important; */
		transform: scale(1.05) !important;
		z-index: 9;
		opacity: 1 !important;
	}

	.makeup-finish-item.active .makeup-finish-image-holder,
	.makeup-coverage-item.active .makeup-coverage-image-holder {
		transform: rotateX(5deg) rotateZ(-7deg) scale(1.2) !important;
		/* transform: scale(1.2) !important; */
	}

	.makeup-finish-item.disabled .makeup-finish-image-holder,
	.makeup-coverage-item.disabled .makeup-coverage-image-holder {
/* 		opacity: 0.5; */
		transform: scale(0.8);
	}

	.makeup-finish-item:hover img.makeup-finish,
	.makeup-finish-item.active img.makeup-finish,
	.makeup-finish-item:hover img.makeup-finish,
	.makeup-coverage-item.active img.makeup-coverage {
		box-shadow: 0 0 1em rgba(0,0,0,0.4);
	}

	.makeup-finish-item img.makeup-finish-skin-closeup {
		width: 60%;
		height: auto;
		display: block;
		border-radius: 100%;
		border: 3px solid #fff;
		box-shadow: 0 0 1em rgba(0,0,0,0.2);
		position: absolute;
		bottom: 0;
		left: 50%;
		margin-left: -30%;
		z-index: 9;
		transform: translate(0, 50%);
		background: #fff;
	}

	.makeup-finish-item h3.title,
	.makeup-coverage-item h3.title {
		font-weight: 700;
		font-size: 1em;
		text-align: center;
		z-index: 10;
		position: absolute;
		width: 80%;
		display: block;
		left: 10%;
		padding: 0.5em 0;
		margin: 0;
		/* border-radius: 0.75em 0.75em 0 0; */
		top: 0;
		background: rgba(255,255,255,0.4);
		color: #111;
	}

.eye-circle-wrapper {
	position: relative;
	width:100%;
	max-width: 400px;
	margin: 0 auto 4em auto;
}

	.eyecolor-closeup {
		position: absolute;
		width: 72%;
		height: 72%;
		left: 14%;
		top: 14%;
		border-radius: 100%;
		pointer-events:none;
		box-shadow: 0 0 2em rgba(0,0,0,0.4);
		border: 2px solid #fff;
		background: #fff;
	}

.hair-circle-wrapper {
	position: relative;
	width:100%;
	max-width: 400px;
	margin: 0 auto 4em auto;
}

	.haircolor-closeup {
		position: absolute;
		width: 72%;
		height: 72%;
		left: 14%;
		top: 14%;
		border-radius: 100%;
		pointer-events:none;
		box-shadow: 0 0 2em rgba(0,0,0,0.4);
		border: 2px solid #fff;
		background: #fff;
	}

@media (min-width: 700px) {
	.eye-circle-wrapper {
		width:45%;
		max-width: none;
		float:left;
		margin-bottom: 0;
	}

	.hair-circle-wrapper {
		width:45%;
		max-width: none;
		float:left;
		margin-left: 10%;
	}

	.color-wheel-wrap {
		max-width: 1000px;
		margin: 0 auto;
	}
}

.skintypemodel-holder {
	/* border-bottom: 1px solid #A26345; */
	position: relative;
	overflow: visible;
}

	.skintypemodel-holder img.model {
		width: 80%;
		height: auto;
		border-radius: 0 0 45% 45%;
	}

	@media screen and (min-width: 450px) {
		.skintypemodel-holder img.model {
			width: 50%;
		}
	}

	@media screen and (min-width: 600px) {
		.skintypemodel-holder img.model {
			width: 33.33%;
			float: left;
		}
	}

	.skintypemodel-holder img.mask {
		width: 80%;
		height: auto;
		position: absolute;
		left: 0;
		top: 0;
	}

	@media screen and (min-width: 450px) {
		.skintypemodel-holder img.mask {
			width: 50%;
		}
	}

	@media screen and (min-width: 600px) {
		.skintypemodel-holder img.mask {
			width: 33.33%;
		}
	}

	.skintypemodel-holder .columns {

	}

	@media screen and (min-width: 600px) {
		.skintypemodel-holder .columns {
			/* position: absolute; */
			float: right;
			width: 60%;
			top: 0;
			right: 0;
		}
	}

	@media screen and (min-width: 1000px) {
		.skintypemodel-holder .columns {
			/*
position: absolute;
			top: 0;
			right: 0;
*/
		}
	}

	@media screen and (min-width: 1200px) {
		.skintypemodel-holder .columns {
			width: 50%;
			/*
			top: 50%;
			transform: translateY(-50%);
			*/
		}
	}

.skintype-item {
	position: relative;
	font-size: 12px;
	width: 100%;
	cursor: pointer;
	padding: 1em 1em 1em 2.5em;
	background: #fff;
	margin: 0em 0;
	border-bottom: 1px dotted #ccc;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

	@media (min-width: 600px) {
		.skintype-item { font-size: 14px; }
	}

	@media (min-width: 800px) {
		.skintype-item { font-size: 15px; }
	}

	@media (min-width: 1000px) {
		.skintype-item { font-size: 16px; }
	}

	@media screen and (min-width: 790px) {
		.skintype-item {
			width: 50%;
		}

		.skintype-item:nth-child(2n-1) {
			border-right: 1px dotted #ccc;
		}
	}

	.skintype-item:last-child {
		border-bottom: 0;
	}

	.skintype-item:hover {
		box-shadow: 0 0 1em rgba(0,0,0,0.1);
		z-index: 10;
		opacity: 1 !important;
	}

	.skintype-item.active {
		/* transform: scale(1.1); */
		box-shadow: 0 0 1em rgba(0,0,0,0.1);
		z-index: 9;
		/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#fcfcfc+0,f8f8f8+100 */
background: rgb(252,252,252); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(252,252,252,1) 0%, rgba(248,248,248,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(252,252,252,1) 0%,rgba(248,248,248,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(252,252,252,1) 0%,rgba(248,248,248,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfcfc', endColorstr='#f8f8f8',GradientType=0 ); /* IE6-9 */
	}

	.skintype-item.disabled {
		opacity: 0.6;
	}

		.skintype-item.disabled p {
			color: #999;
		}

	.skintype-item h3 {
		margin-top: 1em;
		font-size: 1em;
	}

	.skintype-item p {
		margin-bottom: 1em;
		color: #555;
		font-size: 0.9em;
	}

	.skintype-item i.icon {
		width: 2em;
		height: 2em;
		border-radius: 100%;
		display: block;
		margin: 0 auto 1em auto;
		background: #fff url(img/checkmark.png) no-repeat center;
		box-shadow: 0 0 10px rgba(0,0,0,0.3);
		background-size: 50%;
		position: absolute;
		left: -0.5em;
		top: 50%;
		margin-top: -1em;
		transform: scale(0.6);
		opacity: 0;
		z-index: 9;
		-webkit-transition: all 0.2s ease-in-out;
		-moz-transition: all 0.2s ease-in-out;
		-o-transition: all 0.2s ease-in-out;
		transition: all 0.2s ease-in-out;
	}

		.skintype-item.active i.icon {
			opacity: 1;
			transform: scale(1);
		}

.product-preference-item {
	cursor: pointer;
	padding: 2em 1.5em 2em 1.5em;
	background: #fff;
	margin: 0em 0;
	position: relative;
	border-bottom: 1px dotted #ccc;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

	.product-preference-item:hover {
		box-shadow: 0 0 1em rgba(0,0,0,0.1);
		z-index: 10;
		opacity: 1 !important;
	}

	.product-preference-item.active {
		padding-left: 3em;
		box-shadow: 0 0 1em rgba(0,0,0,0.1);
		z-index: 9;
		/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#fcfcfc+0,f8f8f8+100 */
background: rgb(252,252,252); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(252,252,252,1) 0%, rgba(248,248,248,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(252,252,252,1) 0%,rgba(248,248,248,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(252,252,252,1) 0%,rgba(248,248,248,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfcfc', endColorstr='#f8f8f8',GradientType=0 ); /* IE6-9 */
	}

	.product-preference-item i.icon-active {
		width: 2em;
		height: 2em;
		border-radius: 100%;
		display: block;
		margin: 0 auto 1em auto;
		background: #fff url(img/checkmark.png) no-repeat center;
		box-shadow: 0 0 10px rgba(0,0,0,0.3);
		background-size: 50%;
		position: absolute;
		left: -0.5em;
		top: 50%;
		margin-top: -1em;
		transform: scale(0.6);
		opacity: 0;
		z-index: 9;
		-webkit-transition: all 0.2s ease-in-out;
		-moz-transition: all 0.2s ease-in-out;
		-o-transition: all 0.2s ease-in-out;
		transition: all 0.2s ease-in-out;
	}

		.product-preference-item.active i.icon-active {
			opacity: 1;
			transform: scale(1);
		}

	.product-preference-item h3 {
		margin-top: 0;
		margin-bottom: 0.5em;
	}

		.product-preference-item h3 .icon {
			margin-bottom: -0.3em;
			margin-left: 0.5em;
		}

	.product-preference-item p {
		margin-bottom: 0;
	}

.skintype-options {
	margin-top: -1px;
	border-top: 5px solid #eee;
	z-index: 1;
	    display: flex;
    /* flex-direction: row; */
    /* justify-content: space-between; */
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
}

.skintype-option-item {
	cursor: pointer;
	padding: 2em 1.5em 2em 2.5em;
	background: #fff;
	margin: 0em 0;
	position: relative;
	border-bottom: 1px dotted #ccc;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

	.skintype-option-item:last-child {
	    border-bottom: 0;
	}

	@media screen and (min-width: 790px) {
		.skintype-option-item {
			width: 50%;
		}

		.skintype-option-item:nth-child(2n-1) {
		    border-right: 1px dotted #ccc;
		}

		.skintype-option-item {
			border-bottom: 0;
		}
	}

	.skintype-option-item:hover {
		box-shadow: 0 0 1em rgba(0,0,0,0.1);
		z-index: 10;
		opacity: 1 !important;
	}

	.skintype-option-item.active {
		padding-left: 2.5em;
		/* box-shadow: 0 0 1em rgba(0,0,0,0.1); */
		z-index: 9;
		box-shadow: 0 0 1em rgba(0,0,0,0.1);
		z-index: 9;
		/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#fcfcfc+0,f8f8f8+100 */
background: rgb(252,252,252); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(252,252,252,1) 0%, rgba(248,248,248,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(252,252,252,1) 0%,rgba(248,248,248,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(252,252,252,1) 0%,rgba(248,248,248,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfcfc', endColorstr='#f8f8f8',GradientType=0 ); /* IE6-9 */

	}

	.skintype-option-item i.icon-active {
		width: 2em;
		height: 2em;
		border-radius: 100%;
		display: block;
		margin: 0 auto 1em auto;
		background: #fff url(img/checkmark.png) no-repeat center;
		box-shadow: 0 0 10px rgba(0,0,0,0.3);
		background-size: 50%;
		opacity: 0;
		position: absolute;
		left: -0.5em;
		top: 50%;
		margin-top: -1em;
		transform: scale(0.6);
		z-index: 9;
		-webkit-transition: all 0.2s ease-in-out;
		-moz-transition: all 0.2s ease-in-out;
		-o-transition: all 0.2s ease-in-out;
		transition: all 0.2s ease-in-out;
	}

		.skintype-option-item.active i.icon-active {
			opacity: 1;
			transform: scale(1);
		}

	.skintype-option-item h3 {
		margin-top: 0;
		font-size: 1em;
		margin-bottom: 1em;
		color: #111;
	}

		.skintype-option-item h3 .icon {
			margin-bottom: -0.3em;
			margin-left: 0.5em;
		}

	.skintype-option-item p {
		margin-bottom: 0;
		font-size: 0.9em;
		color: #555;
	}

	.skintype-option-item.active p {
		color: #555;
	}

i.icon-info {
	width: 2rem;
	height: 2rem;
	border-radius: 100%;
	display: inline-block;
	background: #fff url(img/icon_info.png) no-repeat center;
	box-shadow: 0 0 10px rgba(0,0,0,0.3);
	background-size: 50%;
	opacity: 1;
	z-index: 9;
	cursor: pointer;
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
}

	i.icon-info:hover {
		transform: scale(1.2);
	}

.monospace {
	font-family: monospace;
}

.brand-link {
	display: block;
    padding: 2em 1.5em 2em 0;
    background: #fff;
    margin: 0em 0;
    position: relative;
    border-bottom: 1px dotted #ccc;
    font-weight: 600;
    line-height: 120%;
    font-size: 1.4em;
    text-decoration: none;
    font-weight: normal;
}

	.brand-link a {
		text-decoration: none;
	}

	.brand-link:hover a {
		text-decoration: underline;
	}

.product-item {
	width: 100%;
	padding: 0;
	margin: 1em 0;
	z-index: 0;
	background: #fff;
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
}

	@media (min-width: 600px) {
		.product-item {
			width: 50%;
		}
	}

	@media (min-width: 1000px) {
		.product-item {
			width: 33.33%;
		}
	}

	@media (min-width: 1400px) {
		.product-item {
			width: 25%;
		}
	}

	.product-item:hover {
		transform: scale(1.2);
		box-shadow: 0 0 20px rgba(0,0,0,0.3);
		z-index: 9;
		position: relative;
	}

	.product-item.no-zoom:hover {
		transform: scale(1);
	}

	.product-item .color-check {
		display: none;
	}

	.product-item:hover .color-check {
		display: block;
	}

	.product-item:hover .color-check a {
		display: block;
		width: 1.5rem;
		height: 1.5rem;
		background: url(img/colorfan.svg) no-repeat center;
		background-size: contain;
		text-indent: -1000px;
		overflow: hidden;
	}

	.product-item .inner {
		height: 100%;
		padding: 1rem;
		z-index: 2;
		background: #fff;
		position: relative;
	}

	.product-item .status-dots {
		width: 100%;
		top: 170px;
		left: 0;
		display: flex;
		flex-flow: row wrap;
		justify-content: center;
	}

	.product-item .thumbnail {
		height: 150px;
		width: 100%;
		background-position: center;
		background-size: contain;
		background-repeat: no-repeat;
		margin-bottom: 1em;
	}

	.product-item .thumbnail.no-image {
		position: relative;
	}

	.product-item .thumbnail.no-image::before {
		content: "";
		display: block;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translateX(-50%) translateY(-50%);
		height: 80%;
		aspect-ratio: 1 / 1;
		border: 2px dashed #ccc;
		border-radius: 1em;
	}

	.product-item .title {
		text-align: center;
		line-height: 140%;
	}

	.product-item ul.variants {
		position: absolute;
		width: 100%;
		background: #eee;
		display: none;
		left: 0;
		box-shadow: 0 0 20px rgba(0,0,0,0.3);
		z-index: 1;
		font-size: 13px;
		color: #666;
	}

		.product-item:hover ul.variants {
			display: block;
		}

			.product-item ul.variants li {
				border-bottom: 1px dotted #ccc;
				padding: 0.5rem;
			}

			.product-item ul li .color-preview {
				display: inline-block;
				width: 1em;
				height: 1em;
				border-radius: 100%;
				background: #ccc;
				margin-right: 0.5em;
				margin-bottom: -0.1em;
			}

			.product-item ul li .weight {
				margin-left: 1em;
			}

			.product-item ul li .status {
				margin-left: 1em;
				font-family: monospace;
				float: right;
				position: absolute;
				right: 0.5em;
			}

			.product-item ul li .actions {
				float: right;
				text-align: right;
				opacity: 0;
			}

				.product-item ul li:hover {
					background: #f8f8f8;
				}

				.product-item ul li:hover .status {
					display: none;
				}

				.product-item ul li:hover .actions {
					opacity: 1;
				}

			.product-item ul li .icon {
				width: 1.2em;
				height: 1.2em;
				overflow: hidden;
				text-indent: -1000px;
				display: inline-block;
				background-repeat: no-repeat;
				background-position: center;
				background-size: 90% auto;
				margin-left: 0.5em;
			}

				.product-item ul li .icon.icon-edit { background-image: url(img/edit-mini.svg); }
				.product-item ul li .icon.icon-duplicate { background-image: url(img/duplicate-mini.svg); }
				.product-item ul li .icon.icon-delete { background-image: url(img/delete-mini.svg); }
				.product-item ul li .icon.icon-missing-ingredients { background-image: url(img/ingredients-mini.svg); }
				.product-item ul li .icon.icon-preview { background-image: url(img/preview-mini.svg); }
				.product-item ul li .icon.icon-insight { background-image: url(img/insight-mini.svg); }

.line-item {
	padding: 1.2em 1em;
	border-bottom: 1px dotted #ccc;
	z-index: 0;
	display: flex;
	flex-flow: row wrap;
	position: relative;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

	.line-item .group {
		margin-right: 1em;
	}

	.line-item:hover {
		z-index: 1;
		background: #f8f8f8;
	}

	.styling-data .line-item:hover {
		background: rgba(0, 147, 255, 0.1);
	}

	.line-item .ID {
		width: 4.5rem;
	}

	.line-item .questionnaire-icon-holder {
		width: 2.5rem;
	}

	.line-item .questionnaire-icon {
		width: 1.75rem;
		height: 1.75rem;
		font-size: 0.7rem;
		position: absolute;
		transform:translateY(-15%);
		border-radius: 0.15rem;
	}

	.line-item .title {
		font-weight: bold;
		flex: 1;
		line-height: 90%;
	}

	.line-item .fragrance-note-name,
	.line-item .fragrance-note-id,
	.line-item .fragrance-note-group,
	.line-item .fragrance-note-has-image,
	.line-item .fragrance-note-actions {
		flex: 2;
	}

	.line-item .fragrance-note-name {
		flex: 4;
	}

	.line-item .fragrance-note-has-image {
		flex: 1;
	}

	.line-item .fragrance-note-id {
		width: 4.5rem;
		flex: none;
	}

	.line-item .fragrance-note-actions {
		width: 5rem;
		flex: none;
		text-align: right;
	}

	.line-item .actions {
		text-align: right;
		width: 40%;
		position: absolute;
		top: 50%;
		right: 0;
		transform: translateY(-50%);
		padding: 0 1em;
	}

	.line-item .icon,
	.line-item .status-icon {
		width: 1.2em;
		height: 1.2em;
		overflow: hidden;
		text-indent: -1000px;
		display: inline-block;
		background-repeat: no-repeat;
		background-position: center;
		background-size: 90% auto;
		margin-left: 0.5em;
	}

		.line-item .status-icon {
			margin-left: 0;
			margin-right: 0.5em;
		}

		.line-item .icon.icon-edit { background-image: url(img/edit-mini.svg); }
		.line-item .icon.icon-duplicate { background-image: url(img/duplicate-mini.svg); }
		.line-item .icon.icon-delete { background-image: url(img/delete-mini.svg); }
		.line-item .icon.icon-missing-ingredients { background-image: url(img/ingredients-mini.svg); }
		.line-item .icon.icon-view { background-image: url(img/folder-mini.svg); }
		.line-item .icon.icon-user { background-image: url(img/user-mini.svg); }

		.line-item.is-processing .status-icon { background-image: url(img/loading.svg); }
		.line-item.status-added .status-icon { background-image: url(img/reasons-why-icons/check.svg); background-size: contain }
		.line-item.status-rejected .status-icon { background-image: url(img/reasons-why-icons/cross.svg); background-size: contain }

		.line-item.status-rejected {
			background: rgba(154, 54, 54, 0.1)
		}

		.list-loader {
			display: flex;
			align-items: center;
			display: block;
			padding-left: 1.7em;
			position: relative;
			margin-top: 1em;
		}

			.list-loader::before {
				content: "";
				display: block;
				position: absolute;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
				width: 1.7em;
				height: 1.7em;
				background-image: url(img/loading.svg);
				background-repeat: no-repeat;
				background-position: center;
				background-size: 100% auto;
			}

	.line-item.head-line {
		pointer-events: none;
		border-bottom: 1px solid #ccc;
		font-weight: bold;
		text-transform: uppercase;
		font-size: 0.75rem;
		letter-spacing: 0.1em;
	}

.account-legal-links {
	margin: 3em 0 0 0;
	padding: 3em 0 0 0;
	display: flex;
	flex-flow: row wrap;
	border-top: 1px solid #ccc;
}

	.account-legal-links a {
		display: inline-block;
		margin: 0 2em 0 0;
	}

		.account-legal-links a::before {
			content: "";

		}

.js-checkbox-activator {
	width: 1.2rem;
	height: 1.2rem;
	background: #fff;
	border: 2px solid #ccc;
	display: inline-block;
	cursor: pointer;
	position: relative;
	transition: all 0.1s ease-in-out;
}

	.js-checkbox-activator::before {
		content: "";
		position: absolute;
		top: 20%;
		left: 20%;
		width: 60%;
		height: 60%;
		background: #fff;
		background-size: contain;
		transition: all 0.1s ease-in-out;
		transform: scale(0);
	}

	.js-checkbox-activator.checked {
		border: 2px solid #0093ff;
	}

		.js-checkbox-activator.checked::before {
			background: #0093ff;
			transform: scale(1);
		}

	.js-checkbox-activator input {
		pointer-events: none;
		opacity: 0;
		cursor: pointer;
	}

.smt-preview {
	width: 100%;
	max-width: 800px;
	box-shadow: 0 0 1em rgba(0,0,0,0.3);
	border-radius: 0.5em;
	margin: 0 auto;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);
	z-index: 9;
	background: #fff;
	display: flex;
	flex-flow: row wrap;
}

	.smt-preview .smt-preview-product {
		width: 40%;
		padding: 2em;
	}

	.smt-preview .smt-preview-title {
		font-size: 1.2em;
		line-height: 120%;
		font-weight: 400;
		text-align: center;
		padding: 1em 0 0.5em 0;
	}

	.smt-preview .smt-preview-subtitle {
		color: #777;
		padding: 0;
		line-height: 120%;
		font-size: 1em;
		text-align: center;
	}

	.smt-preview .smt-preview-product-image {
		position: relative;
		display: block;
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center center;
	}

		.smt-preview .smt-preview-product-image::before {
			content: "";
			position: relative;
			display: block;
			padding-top: 66%;
		}

	.smt-preview .smt-preview-match {
		width: 60%;
		background: #f8f8f8;
		border-left: 1px solid #ccc;
		padding: 2em;
		border-radius: 0 0.5em 0.5em 0;
	}

		.smt-preview .smt-preview-match h4 {
			font-weight: bold;
		}

.smt-preview .smt-match-bar {
	margin: 2em 0 0.5em 0;
}

.smt-preview .smt-match-bar-label {
	padding: 0;
	position: relative;
	transform: none;
	top: 0;
	color: #333;
	background: transparent;
}

.smt-seal {
	width: 20em;
	height: 20em;
	top: -2em;
	right: -2em;
	border-radius: 100%;
	padding: 1px;
	opacity: 0.1;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateY(-100%);
	z-index: 0;
}

hr {
	height: 1px;
	width: 100%;
	margin: 1em 0;
	border: 0;
	background: #999;
}

.translation-source {
	color: #999;
	font-size: 12px;
	font-weight: 600;
}

.recent-activity { color: #000; }
.no-recent-activity { color: #999; }

.log-entry {
	border-bottom: 1px dotted #ccc;
	padding: 0.5rem 0 1rem 0;
	position: relative;
	padding-left: 170px;
	font-size: 0.9rem;
}

	.log-entry .log-meta {
		color: #999;
		font-family: monospace;
		font-size: 0.9rem;
		display: flex;
		margin-bottom: 0.5rem;
	}

		.log-entry .log-meta span {
			margin-right: 2rem;
		}

		.log-entry .log-meta span.date {
			position: absolute;
			left: 0;
		}

	.log-entry .log-data {
		display: flex;
	}

		.log-entry .log-data span {
			margin-right: 2rem;
		}

		.log-entry .log-data span.value {
			position: absolute;
			left: 0;
		}

			.log-entry .log-data span.value.value-deleted {
				color: #b93434;
			}

			.log-entry .log-data span.value.value-updated {
				color: #3267c1;
			}

			.log-entry .log-data span.value.value-created {
				color: #34b939;
			}

			.log-entry .log-data span.note {
				margin-right: 1rem;
			}

			.log-entry .log-data span.field {
				margin-right: 1rem;
				border: 1px solid #ccc;
				background: #eee;
				color: #777;
				font-size: 0.7rem;
				padding: 0.3rem;
				position: relative;
				margin-top: -0.3rem;
			}

				.log-entry .log-data span.field:empty {
					display: none;
				}

				.log-entry .log-data span.field::before {
					content:"db field: ";
					position: relative;
				}

/* Icons */
i.icon {
	width: 1em;
	height: 1em;
	display: inline;
	margin-right: 0.25em;
}

	i.icon::before {
		content: "";
		width: 1em;
		display: inline-block;
	}

i.icon.icon-back {
	background: url(img/back.svg) no-repeat center;
	background-size: 60% auto;
}

.pass-graybar {
	height:5px;
	background-color:#eee;
	width:100%;
	position:relative;
	margin-bottom: 5px;
	margin-top: -6px;
}

.pass-colorbar {
	height:5px;
	background-image:url(img/passwordstrength.jpg);
	position:absolute;
	top:0;left:0
}

.pass-percent,
.pass-text {
	margin: 0;
	color: #777777;
	font-size: 0.875em;
	margin-bottom: 0.25em;
	font-weight: 400;
}

.pass-text {
	min-height: 2.5rem;
	display: block;
}

.pass-percent {
	margin-right:5px
}

/* Insights */

.insight-title {
	font-weight: bold;
	margin: 2.5rem 0 1rem 0;
	text-transform: uppercase;
	font-size: 0.875rem;
	letter-spacing: 0.08em;
}

.insight-group {
	display: flex;
	flex-flow: row wrap;
	border-bottom: 1px dotted #ccc;
}

	.insight-item {
		width: 25%;
		border-right: 1px dotted #ccc;
		padding: 2rem 2rem 2rem 2rem;
		position: relative;
	}

	.insight-item.double {
		width: 50%;
	}

	.insight-item.full {
		width: 100%;
	}

	.insight-item.half {
		width: 50%;
	}

	.insight-item h6 {
		width: 100%;
		margin: 0 0 1em 0;
	}

	.insight-item:last-child {
		border-right: 0;
	}

	.insight-item:first-child {
		padding-left: 0;
	}

	.insight-item .value {
		font-weight: bold;
		font-size: 3.5rem;
		margin-bottom: 0.5rem;
	}

	.insight-item .label {
		font-weight: normal;
		font-size: 0.8rem;
		text-transform: uppercase;
		line-height: 120%;
	}

	.insight-item .direction {
		display: block;
		position: absolute;
		width: 2rem;
		height: 2rem;
		border-radius: 100%;
		right: 2rem;
		top: 2rem;
		background: #ccc url(img/arrow-insight.svg) no-repeat center;
		background-size: 50% auto;
	}

		.insight-item .direction.direction-none { background-color:#e49e12; }
		.insight-item .direction.direction-up { background-color:#5ac675; transform: rotate(-45deg); }
		.insight-item .direction.direction-down { background-color:#d03e54; transform: rotate(45deg); }

.flex {
	display: flex;
	flex-flow: row wrap;
}

.ingredients-by-group {
	width: 50%;
	padding-left: 2rem;
	padding-bottom: 2rem;
}

.questionnaire-preview {
	width: 100%;
	position: relative;
}

	.questionnaire-preview::before {
		content: "";
		display: block;
		padding-top: 56%;
	}

	.questionnaire-preview iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		box-shadow: 0 0 1rem rgba(0,0,0,0.2);
		transform: scale(0.6);
		transform-origin: top right
	}

.incianalyzer-holder {
	display: flex;
	flex-flow: row wrap;
	align-items: center;
	justify-content: center;
}

	.incianalyzer-preview {
		width: 100%;
		max-width: 1000px;
		display: block;
		padding: 2em;
	}

	@media (min-width: 500px) {
		.incianalyzer-preview {
			display: flex;
			flex-flow: row wrap;
		}
	}

		.incianalyzer-product-image {
			width: 70%;
			background-repeat: no-repeat;
			background-position: center;
			background-size: contain;
			background-color: #fff;
			border: 1em solid #fff;
			border-radius: 1em;
			box-shadow: 0 0 1em rgba(0,0,0,0.1);
			margin: 0 auto 2em auto;
		}

		@media (min-width: 500px) {
			.incianalyzer-product-image {
				width: 40%;
				max-width: 300px;
				border-radius: 2em;
				margin: 0 0 2em 0;
			}
		}

		.incianalyzer-product-image::before {
			content: "";
			display: block;
			padding-bottom: 100%;
		}

	.incianalyzer-product-info {
		width: 100%;
		display: block;
	}

		@media (min-width: 500px) {
			.incianalyzer-product-info {
				width: auto;
				flex: 1;
				padding: 0 1em;
			}
		}

		@media (min-width: 800px) {
			.incianalyzer-product-info {
				padding: 0 2em;
			}
		}

	.incianalyzer-product-info h2 {
		font-weight: normal;
	}

	.incianalyzer-product-info h3 {
		font-size: 1em;
	}

		.incianalyzer-product-info h2 + h3 {
			margin-top: -1em;
		}

	.incianalyzer-incilist {
		display: block;
		line-height: 130%;
		font-size: 14px;
	}

	.incianalyzer-product-info .label {
		line-height: 130%;
		font-size: 14px;
		display: block;
		margin-bottom: 0.25rem;
		padding-top: 2rem;
	}

		.incianalyzer-incilist .inci {
			position: relative;
			display: inline-block;
		}

			.incianalyzer-incilist .inci .info {

				display: none;
			}

			.tooltipster-show {
				/* display: block; */
				min-width: 350px;
			}

			.tooltipster-show .info {
				color: #111;
				padding: 0;
				padding: 0;
				min-width: 250px;
			}

				.tooltipster-show .info h3 {
					margin-top: 0;
					min-width: 250px;
				}

				.tooltipster-show .info p.descr {
					font-size: 14px;
					line-height: 130%;
					color: #888;
					font-style: italic;
					font-family: 'Georgia', serif;
				}

				.tooltipster-show .info p {
					font-size: 14px;
					line-height: 130%;
				}

				.tooltipster-show .info ul {
					/* padding-left: 20px;
					list-style-type: disc; */
					display: block;
					padding:  0;
				}

					.tooltipster-show .info ul li {
						color: #111;
						font-size: 13px;
						line-height: 120%;
						border-top: 1px solid #ccc;
						border-bottom: 1px solid #ccc;
						padding: 0.2em 0;
						margin-top: -1px;
					}

					.tooltipster-show .copyright {
						display: block;
						position: absolute;
						bottom: 12px;
						font-size: 10px;
						line-height: 120%;
						color: #777;
					}

		.inci.has-info {
			border-bottom: 1px dotted #1e9bd9;
			cursor: pointer;
			transition: all 0.1s ease-in-out;
		}

			.inci.has-info:hover {
				color: #1e9bd9;
				border-bottom: 1px solid #1e9bd9;
			}

.questionnaire-icon {
	width: 3.5rem;
	height: 3.5rem;
	border-radius: 0.25rem;
	font-weight: 400;
	text-transform: uppercase;
	font-size: 1.5rem;
	text-align: center;
	display: flex;
	overflow: hidden;
	box-shadow: 0 0 1rem rgba(0,0,0,0.2);
}

.questionnaire-icon span {
	display: block;
	width: 8%;
	height: 100%;
}

.questionnaire-icon span.letter {
	width: 68%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.tabs {
	display: flex;
	flex-flow: row wrap;
	border-bottom: 1px solid #111;
	margin-bottom: 1em;
}

	.tabs .tab {
		padding: 1em;
		border: 1px solid transparent;
		border-bottom-color: transparent;
		transform: translateY(1px);
		color: #666;
		cursor: pointer;
	}

	.tabs .tab.is-active {
		border: 1px solid #111;
		border-bottom-color: #fff;
		color: #111;
	}

	.tab-view {
		display: none;
	}

	.tab-view.is-active {
		display: block;
	}

.js-refresh {
	cursor: pointer;
	text-decoration: underline;
	background: url(img/refresh.svg) no-repeat center;
	background-size: contain;
	display: inline-block;
	width: 1.5em;
	height: 1.5em;
	text-indent: -1000px;
	overflow: hidden;
	opacity: 0.5;
	transition: 0.2s ease-out;
}

.download-csv {
	cursor: pointer;
	text-decoration: underline;
	background: url(img/download.svg) no-repeat center;
	background-size: contain;
	display: inline-block;
	width: 1.5em;
	height: 1.5em;
	text-indent: -1000px;
	overflow: hidden;
	opacity: 0.5;
	transition: 0.2s ease-out;
}

	.js-refresh:hover,
	.download-csv:hover {
		opacity: 1;
	}

.pagination ul {
	display: flex;
	flex-flow: row wrap;
	gap: 0.5em;
	justify-content: center;
	margin-top: 1.5em;
}

.pagination ul li {
	border: 1px solid #ccc;
	padding: 0.5em;
	border-radius: 0.25rem;
	min-width: 2em;
	text-align: center;
	cursor: pointer;
	/* box-shadow: 0 0.1em 0.2em rgba(0,0,0,0.2) */
}

	.pagination ul li.is-current {
		background: #111;
		color: #fff;
		border-color: #111;
	}

	.pagination ul li:not(.is-current):hover {
		background: #eee;
	}

	.pagination ul li.sep {
		border-color: transparent;
		color: #666;
		padding-left: 0;
		padding-right: 0;
		box-shadow: none;
	}

.tab-view select,
.tab-view input[type='text'],
.tab-view input[type='button'] {
	appearance: none;
	-webkit-appearance: none;
	outline: none;
	border: 1px solid #333;
	padding: 0.75em 1em 0.75em 1em;
	background: #f8f8f8;
	font: inherit;
	font-size: 0.8em;
	border-radius: 0.2em;
	box-shadow: 0 0.1em 0.2em rgba(0,0,0,0.2)
}

.tab-view input[type='button'] {
	font-weight: 700;
	background: #111;
	color: #fff;
	cursor: pointer;
}

.tab-view select {
	padding: 0.75em 2em 0.75em 1em;
	background-image: url(img/arrow-down.svg);
	background-position: center right 0.75em;
	background-size: 0.75em auto;
	background-repeat: no-repeat;
}

.tab-view select:hover {
	background-color: #fff;
}

.inci-source-holder {
	display: none;
	background: #fff;
	padding: 1em;
	border-radius: 0.5em;
	box-shadow: 0 0 0.3em rgba(0,0,0,0.2)
}

.js-checkbox-activator.checked ~ .inci-source-holder {
	display: block;
}

.inci-source-holder label span {
	font-size: 0.8em;
}

/* Bricolage Grotesque — self-hosted variable font (SIL OFL). Latin + latin-ext only; the
   vietnamese subset is skipped since this page runs in DE/FR/IT/EN. One file per subset covers
   weights 200-800 and the optical-size axis, so there are no separate weight requests. */
@font-face {
	font-family: 'Bricolage Grotesque';
	font-style: normal;
	font-weight: 200 800;
	font-display: swap;
	src: url('../fonts/bricolage-grotesque/bricolage-grotesque-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Bricolage Grotesque';
	font-style: normal;
	font-weight: 200 800;
	font-display: swap;
	src: url('../fonts/bricolage-grotesque/bricolage-grotesque-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* =========================================================================
   Auth (user/login)

   Asymmetric split: a bled portrait on the left, a precisely set column on the right.
   Everything is scoped under .auth, so the older .login-holder shell still used by
   forgotpassword, 2fa-verify, accept-terms and login-detour is untouched.

   The load is one short orchestrated sequence — the portrait un-masks and settles while the
   type staggers up — and then the page goes still. Motion after that is confined to the
   ambient drift on the photo and to direct responses to input. All of it is pure CSS with
   animation-delay, so no script is required to reveal anything: the form is usable the
   instant HTML parses, which matters more here than on any other page in the app.
   ========================================================================= */

/* The tokens are shared with the sign-out screen, which borrows the palette and the typeface without
   the split layout below. */
.auth,
.auth-exit {
	--ink: #100e0d;
	--ink-soft: #6c6560;
	--ink-faint: #a49c96;
	--paper: #ffffff;
	--shell: #f7f5f3;
	--line: #e6e1dd;
	--field-line: #c4bab2;
	--clay: #c68d80;
	--clay-deep: #ab6144;
	--clay-press: #94523a;
	--blush: #c28375;
	--blush-deep: #b07264;
	--mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
	--display: 'Bricolage Grotesque', 'Gotham', -apple-system, Arial, sans-serif;
	--ease: cubic-bezier(0.22, 1, 0.36, 1);

	background: var(--paper);
	color: var(--ink);
	font-family: var(--display);
}

.auth {
	position: fixed;
	inset: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	z-index: 1;
	animation: auth-in 0.45s ease both;
}

.auth ::selection { background: var(--clay); color: #fff; }

/* ---------------------------------------------------------------- sign out */

/* Not the split layout — this screen is on its own for about a second before the redirect. It takes
   the palette and the typeface only. The rule under the words runs for exactly that second, so the
   wait is visible rather than a pause with nothing happening in it. */
.auth-exit {
	position: fixed;
	inset: 0;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 2rem;
	text-align: center;
	animation: auth-in 0.45s ease both;
}

	.auth-exit .auth-exit-mark {
		display: block;
		width: 72px;
		height: auto;
		margin: 0 0 2rem;
		filter: brightness(2) contrast(0.78) drop-shadow(0 3px 8px rgba(16, 14, 13, 0.14));
	}

	.auth-exit h1 {
		margin: 0;
		font-size: clamp(1.75rem, 3.4vw, 2.25rem);
		line-height: 1.15;
		font-weight: 400;
		letter-spacing: -0.025em;
		color: var(--ink);
	}

	.auth-exit p {
		margin: 0.625rem 0 0;
		font-size: 1rem;
		line-height: 1.6;
		color: var(--ink-soft);
	}

	.auth-exit .auth-exit-bar {
		width: 160px;
		height: 2px;
		margin-top: 2.25rem;
		border-radius: 999px;
		background: var(--line);
		overflow: hidden;
	}

		.auth-exit .auth-exit-bar span {
			display: block;
			width: 100%;
			height: 100%;
			border-radius: 999px;
			background: var(--blush);
			transform-origin: 0 50%;
			animation: auth-exit-fill 1s linear both;
		}

@keyframes auth-exit-fill {
	from { transform: scaleX(0); }
	to   { transform: scaleX(1); }
}

/* ---------------------------------------------------------------- left: the portrait */

.auth-stage {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: flex-start;
	padding: 3rem;
	background: #15110f;
	overflow: hidden;
	isolation: isolate;
	container-type: inline-size;
}

	.auth-stage-photo {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: 50% 42%;
		z-index: -3;
	}

	.auth-stage-veil {
		position: absolute;
		inset: 0;
		z-index: -2;
		background: linear-gradient(to bottom,
			rgba(16, 14, 13, 0) 0%,
			rgba(16, 14, 13, 0) 50%,
			rgba(16, 14, 13, 0.80) 100%);
	}

	/* A whisper of grain. It stops the flat gradient from banding and gives the dark half a
	   printed quality rather than a screen one. */
	/* Sampling grid over the skin — a regular lattice of points that lights up around the
	   cursor. It is what the product actually does to a face, and it is image-agnostic, so the
	   photograph underneath can be swapped without touching it. Decorative: without JavaScript
	   the canvas stays empty and only the portrait shows. */
	.auth-stage-mesh {
		position: absolute;
		inset: 0;
		z-index: -1;
		mix-blend-mode: screen;
		width: 100%;
		height: 100%;
		pointer-events: none;
	}

	.auth-stage-grain {
		position: absolute;
		inset: -50%;
		z-index: -1;
		pointer-events: none;
		opacity: 0.035;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
	}

.auth-stage-say { color: #fff; }

	/* Each line rises on its own beat — the one deliberately theatrical moment on the page. */
	.auth-stage-headline {
		margin: 0;
		/* Fluid off the stage's own width. The vw line is the fallback for browsers without
		   container query units; the cqw line wins where they are supported and keeps the
		   headline in proportion to its column rather than to the whole window. */
		font-size: clamp(2rem, 4.4vw, 5rem);
		font-size: clamp(2rem, 7cqw, 5rem);
		line-height: 1.1;
		font-weight: 400;
		letter-spacing: -0.025em;
		font-variation-settings: "opsz" 96;
	}

	.auth-stage-headline .auth-line {
		display: block;
		white-space: nowrap;
	}

	/* Word by word on load: a short fade with a few pixels of lift, 70ms apart. Deliberately
	   small — the line-by-line version read as theatrical. */
	/* Word by word on load: a short fade with a few pixels of lift, 70ms apart. Deliberately
	   small — the line-by-line version read as theatrical. */
	.auth-stage-headline .auth-line span {
		display: inline-block;
		animation: auth-word 0.55s var(--ease) both;
		animation-delay: calc(0.3s + var(--i) * 0.07s);
	}


	/* The chrome mark, above the form. Sized in css px rather than rem so it does not track the
	   type scale, and pulled 3px left because its own bevel reads as padding.

	   The source render is dark chrome and sat heavy against the white column. Brightness alone
	   clips the highlights before it lifts the shadows, so contrast comes down with it — that
	   opens the dark passages into silver while keeping the highlight structure. The drop-shadow
	   is what stops the lightened mark from floating flat on the page. */
	.auth-mark {
		display: block;
		width: 90px;
		height: auto;
		margin: 0 0 2rem -3px;
		filter: brightness(2) contrast(0.78) drop-shadow(0 3px 8px rgba(16, 14, 13, 0.14));
	}


/* ---------------------------------------------------------------- right: the column */

/* Centred by auto margins on the inner rather than align-items, because this column scrolls: with
   align-items: center a form taller than the viewport is centred on the overflow too and the top of
   it — the mark and the title — ends up above the scroll origin, unreachable. Auto margins resolve
   to zero once the free space is negative, so the column simply starts at the top and scrolls. */
.auth-panel {
	position: relative;
	display: flex;
	padding: 3rem;
	overflow-y: auto;
	background: var(--paper);
}

	/* Hairline seam that fades out top and bottom rather than butting into the corners. */
	.auth-panel::before {
		content: "";
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		width: 1px;
		background: linear-gradient(to bottom, transparent, var(--line) 12%, var(--line) 88%, transparent);
	}

.auth-panel-inner {
	width: 100%;
	max-width: 24rem;
	margin: auto;
}

.auth-form { display: none; }

.auth-form.is-current {
	display: block;
	animation: auth-swap 0.4s var(--ease) both;
}

.auth .auth-title {
	margin: 0;
	font-size: 1.5rem;
	line-height: 1.2;
	font-weight: 500;
	letter-spacing: -0.02em;
	font-variation-settings: "opsz" 24;
	color: var(--ink);
}

.auth .auth-sub {
	margin: 0.4rem 0 0;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	color: var(--ink-soft);
}

/* ---------------------------------------------------------------- fields */

.auth-fields {
	display: block;
	margin-top: 2.25rem;
}

/* Filled boxes with the label floating up inside them: at rest the label sits on the value's own
   baseline as a placeholder, and on focus or fill it rises into the padding above. The field keeps
   one shape throughout — only its fill, border and the label move. */
.auth-field {
	position: relative;
	margin-bottom: 0.875rem;
}

	/* A field plus whatever hangs off it. The spacing moves to the stack so the meter is not pushed
	   away from the box it describes. */
	.auth-field-stack { margin-bottom: 0.875rem; }
	.auth-field-stack .auth-field { margin-bottom: 0; }

	.auth .auth-field input {
		display: block;
		width: 100%;
		box-sizing: border-box;
		padding: 1.6rem 1.1rem 0.6rem;
		border: 1px solid var(--line);
		border-radius: 4px;
		background: var(--shell);
		font: inherit;
		font-size: 1.0625rem;
		font-weight: 400;
		letter-spacing: -0.005em;
		color: var(--ink);
		transition: background 0.2s var(--ease), border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
	}

	.auth .auth-field input:hover { border-color: #d8d1cb; }

	.auth .auth-field input:focus {
		outline: none;
		background: var(--paper);
		border-color: var(--clay-deep);
		box-shadow: 0 0 0 3px rgba(160, 90, 73, 0.12);
	}

	.auth-field label {
		position: absolute;
		left: 1.1rem;
		top: 50%;
		font-size: 1.0625rem;
		font-weight: 400;
		letter-spacing: -0.005em;
		color: #857d77;
		pointer-events: none;
		transform: translateY(-50%);
		transform-origin: 0 0;
		transition: transform 0.22s var(--ease), color 0.22s var(--ease);
	}

	.auth .auth-field input:focus + label,
	.auth .auth-field input:not(:placeholder-shown) + label {
		transform: translateY(-1.42rem) scale(0.72);
	}

	.auth .auth-field input:focus + label { color: var(--clay-deep); }

/* ---------------------------------------------------------------- code boxes */

/* One box per digit, on the same fill, border and radius as the fields. Sized off the column rather
   than in fixed widths so six of them always divide the panel evenly. */
.auth-code {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 0.5rem;
}

	.auth .auth-code input {
		width: 100%;
		box-sizing: border-box;
		padding: 0.875rem 0;
		border: 1px solid var(--line);
		border-radius: 4px;
		background: var(--shell);
		font: inherit;
		font-size: 1.75rem;
		font-weight: 200;
		line-height: 1.2;
		letter-spacing: 0;
		text-align: center;
		color: var(--ink);
		font-variant-numeric: tabular-nums;
		transition: background 0.2s var(--ease), border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
	}

	.auth .auth-code input:hover { border-color: #d8d1cb; }

	.auth .auth-code input:focus,
	.auth .auth-code input:focus-visible {
		outline: none;
		background: var(--paper);
		border-color: var(--clay-deep);
		box-shadow: 0 0 0 3px rgba(160, 90, 73, 0.12);
	}

/* ---------------------------------------------------------------- actions */

/* Sign in and SSO are one row: two ways into the same account, not a first choice and a fallback
   under a divider. */
.auth-actions {
	display: flex;
	align-items: stretch;
	gap: 0.625rem;
	margin-top: 2.25rem;
}

.auth .auth-submit {
	position: relative;
	display: block;
	width: fit-content;
	min-width: 12.5rem;
	padding: 1.25rem 2.75rem;
	border: 0;
	border-radius: 999px;
	background: var(--blush);
	color: #fff;
	font: inherit;
	font-size: 1rem;
	font-weight: 500;
	letter-spacing: 0;
	/* Also worn by an <a> on the screens whose action is a link rather than a submit. */
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.22s var(--ease), transform 0.22s var(--ease), box-shadow 0.28s var(--ease);
}

	.auth .auth-submit:hover:not(:disabled) {
		background: var(--blush-deep);
		transform: translateY(-1px);
		box-shadow: 0 10px 26px -12px rgba(148, 82, 58, 0.55);
	}

	.auth .auth-submit:active:not(:disabled) {
		transform: translateY(0);
		box-shadow: none;
	}

	.auth .auth-submit:disabled {
		background: #f2efec;
		color: var(--ink-faint);
		box-shadow: inset 0 0 0 1px var(--line);
		cursor: not-allowed;
	}

/* Stacked and left-aligned rather than inline: each link keeps its own width so the underline that
   grows on hover stops at the end of the words. */
.auth-quiet-links {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.4375rem;
	margin-top: 1.25rem;
}

.auth .auth-quiet-link {
	display: inline-block;
	font-size: 0.875rem;
	color: var(--ink-soft);
	text-decoration: none;
	background-image: linear-gradient(var(--ink), var(--ink));
	background-size: 0% 1px;
	background-position: 0 100%;
	background-repeat: no-repeat;
	transition: background-size 0.3s var(--ease), color 0.22s var(--ease);
}

	.auth .auth-quiet-link:hover {
		color: var(--ink);
		background-size: 100% 1px;
	}

/* The primary's colour, drawn as an outline instead of a fill, so the pair reads as one control in
   two states. Hover only warms the fill to --shell: taking it to full blush made the two buttons
   swap places. */
.auth .auth-sso {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 1.25rem 2rem;
	border: 1.5px solid var(--blush);
	border-radius: 999px;
	background: var(--paper);
	color: var(--blush-deep);
	font-size: 1rem;
	font-weight: 500;
	letter-spacing: 0.01em;
	text-decoration: none;
	white-space: nowrap;
	transition: background 0.22s var(--ease), color 0.22s var(--ease), transform 0.22s var(--ease), box-shadow 0.28s var(--ease);
}

	.auth .auth-sso:hover {
		background: var(--shell);
		transform: translateY(-1px);
		box-shadow: 0 10px 26px -12px rgba(148, 82, 58, 0.55);
	}

	.auth .auth-sso:active {
		transform: translateY(0);
		box-shadow: none;
	}

.auth .auth-switch {
	margin: 2.5rem 0 0;
	font-size: 0.9375rem;
	color: var(--ink-soft);
}

	.auth .auth-switch a {
		color: var(--ink);
		font-weight: 500;
		text-decoration: none;
		background-image: linear-gradient(var(--clay), var(--clay));
		background-size: 100% 1px;
		background-position: 0 100%;
		background-repeat: no-repeat;
		transition: background-size 0.3s var(--ease);
	}

	.auth .auth-switch a:hover { background-size: 100% 2px; }

/* ---------------------------------------------------------------- terms, meter, errors */

.auth .auth-legal {
	display: flex;
	align-items: flex-start;
	gap: 0.875rem;
	margin: 1.75rem 0 0;
}

	.auth .auth-legal label {
		flex: 1;
		width: auto;
		font-size: 0.875rem;
		line-height: 1.5;
		color: var(--ink-soft);
	}

	.auth .auth-legal a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }

	/* The shared control fills a smaller square inside the box when checked. Here it draws a tick
	   instead — two borders on the pseudo-element, rotated — and the whole box fills with clay, so
	   the state reads at a glance rather than as a dot inside a dot. */
	/* Matched to the fields above — same fill, same border, same radius — so it reads as one more
	   input rather than a stray control. */
	.auth .js-checkbox-activator {
		flex-shrink: 0;
		width: 1.5rem;
		height: 1.5rem;
		border-radius: 6px;
		border-width: 1px;
		border-color: var(--line);
		background: var(--shell);
		transition: border-color 0.18s var(--ease), background 0.18s var(--ease);
	}

	.auth .js-checkbox-activator:hover { border-color: var(--field-line); }

	.auth .js-checkbox-activator.checked {
		border-color: var(--clay-deep);
		background: var(--clay-deep);
	}

		/* A tick, drawn as two borders of a rotated box. Centred from the box's middle rather than
		   with percentage insets: the rotation makes any inset-based placement drift with size.

		   The geometry is on the unchecked state too, and only opacity and scale change — the shared
		   control transitions `all`, so a tick that differed in position and size as well would be
		   animated across the box from the corner the base style parks it in. */
		.auth .js-checkbox-activator::before {
			top: 50%;
			left: 50%;
			width: 6px;
			height: 11px;
			background: none;
			border: 0;
			border-right: 2px solid #fff;
			border-bottom: 2px solid #fff;
			border-radius: 1px;
			opacity: 0;
			transform: translate(-50%, -58%) rotate(45deg) scale(0.7);
			transition: opacity 0.14s var(--ease), transform 0.14s var(--ease);
		}

		.auth .js-checkbox-activator.checked::before {
			opacity: 1;
			transform: translate(-50%, -58%) rotate(45deg) scale(1);
		}

/* Strength meter. Three segments rather than one continuous bar, because the score only ever
   resolves to three bands — a smooth bar would imply a precision the plugin does not have. The
   notches are painted over the fill, so the plugin can keep setting a single width in percent. */
.auth .pass-wrapper {
	margin-top: 0.6875rem;
}

.auth .pass-graybar {
	position: relative;
	height: 4px;
	margin: 0;
	border-radius: 999px;
	background: #ebe6e2;
	overflow: hidden;
}

	.auth .pass-graybar::after {
		content: "";
		position: absolute;
		inset: 0;
		background-image:
			linear-gradient(to right, transparent calc(33.333% - 1.5px), var(--paper) calc(33.333% - 1.5px) calc(33.333% + 1.5px), transparent calc(33.333% + 1.5px)),
			linear-gradient(to right, transparent calc(66.666% - 1.5px), var(--paper) calc(66.666% - 1.5px) calc(66.666% + 1.5px), transparent calc(66.666% + 1.5px));
	}

/* The fill is one hue family at a time — the band it is in, not a rainbow it happens to have
   reached. A red segment still showing under "Strong password" read as a warning about the very
   thing being praised. */
.auth .pass-colorbar {
	height: 4px;
	border-radius: 999px;
	background-color: transparent;
	background-image: linear-gradient(90deg, #c9c2bc, #a49c96);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	/* The plugin picks its colour by sliding a sprite up behind the bar — it writes an inline
	   background-position of 0px -<score>px, which drags the gradient clean out of a 4px-tall
	   element. Only !important outranks an inline style. */
	background-position: 0 0 !important;
	transition: width 0.28s var(--ease);
}

.auth .pass-wrapper.is-weak .pass-colorbar { background-image: linear-gradient(90deg, #ff7a6b, #ef3346); }
.auth .pass-wrapper.is-fair .pass-colorbar { background-image: linear-gradient(90deg, #ffd85c, #ff9d2e); }
.auth .pass-wrapper.is-strong .pass-colorbar { background-image: linear-gradient(90deg, #56d998, #12a566); }

.auth .pass-wrapper.is-weak .pass-text { color: #c93a4c; }
.auth .pass-wrapper.is-fair .pass-text { color: #b3762a; }
.auth .pass-wrapper.is-strong .pass-text { color: #1f9963; }

.auth .pass-text {
	display: block;
	min-height: 1.25rem;
	margin: 0.5rem 0 0;
	font-size: 0.8125rem;
	line-height: 1.4;
	color: var(--ink-soft);
}

/* No panel, no rule down the side — the message is short and the colour already says what it is. A
   small mark keeps it from reading as ordinary copy at a glance.

   The shared ul.error-list gives every item a red wash and insets an icon by 3em, so both are undone
   here; without that the item paints its own band inside whatever this rule sets. */
.auth .error-list {
	margin: 1.5rem 0 0;
	padding: 0.9375rem 1.125rem;
	list-style: none;
	border-radius: 10px;
	background: rgba(201, 58, 76, 0.07);
}

	.auth .error-list li {
		position: relative;
		margin: 0;
		padding: 0 0 0 1.625rem;
		background: none;
		font-size: 0.9375rem;
		line-height: 1.5;
		color: #c93a4c;
	}

	.auth .error-list li + li { margin-top: 0.5rem; }

	.auth .error-list li::before {
		content: "";
		position: absolute;
		left: 0;
		top: 0.16em;
		width: 1.0625rem;
		height: 1.0625rem;
		transform: none;
		background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23c93a4c' d='M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0zm.9 12.2H7.1v-1.8h1.8v1.8zm0-3.1H7.1V3.8h1.8v5.3z'/%3E%3C/svg%3E") no-repeat center center;
		background-size: contain;
	}

/* ---------------------------------------------------------------- focus, keyboard */

/* Note: no border-radius here. Setting one in a :focus-visible rule reshapes the element itself,
   not just the ring — it was squaring off the fields and flattening the pill button on focus. The
   outline follows whatever radius the element already has. */
.auth a:focus-visible,
.auth button:focus-visible,
.auth input:focus-visible {
	outline: 2px solid var(--clay-deep);
	outline-offset: 3px;
}

.auth .auth-field input:focus-visible { outline: none; }

/* ---------------------------------------------------------------- motion */

@keyframes auth-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes auth-word {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: none; }
}

@keyframes auth-swap {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: none; }
}

/* The column arrives in three beats — heading, the line under it, then the form — rather than as one
   block. 60ms apart and six pixels of lift: enough that the panel is not simply there when the page
   paints, not so much that it performs. The panel shakes as a whole on an error, which composes with
   this because the shake is on the parent and the lift on its children. */
.auth-form.is-current > .auth-title { animation: auth-swap 0.5s var(--ease) both; animation-delay: 0.06s; }
.auth-form.is-current > .auth-sub   { animation: auth-swap 0.5s var(--ease) both; animation-delay: 0.12s; }
.auth-form.is-current > form,
.auth-form.is-current > .error-list,
.auth-form.is-current > .auth-actions,
.auth-form.is-current > .auth-quiet-links { animation: auth-swap 0.5s var(--ease) both; animation-delay: 0.18s; }

@keyframes auth-shake {
	0%, 100% { transform: translateX(0); }
	20% { transform: translateX(-6px); }
	40% { transform: translateX(5px); }
	60% { transform: translateX(-3px); }
	80% { transform: translateX(2px); }
}

.auth-shake { animation: auth-shake 0.45s ease both; }

/* ---------------------------------------------------------------- narrow */

@media (max-width: 940px) {
	.auth {
		position: absolute;
		min-height: 100%;
		grid-template-columns: 1fr;
		grid-template-rows: 15rem 1fr;
	}

	.auth-stage {
		padding: 1.75rem;
		justify-content: space-between;
	}

	.auth-stage-photo { object-position: 50% 38%; }
	.auth-stage-headline { font-size: clamp(1.75rem, 7vw, 2.5rem); }
	.auth-stage-say { max-width: 22ch; }

	.auth-panel { padding: 2rem 1.5rem 2.5rem; }
	.auth-panel::before { display: none; }
	.auth-panel-inner { padding: 1.5rem 0 2.5rem; }
}

/* Laptops and half-height windows. The column fits at ~820px; below that it tightens rather than
   scrolls, since a login that needs scrolling to reach its own button reads as broken. */
@media (min-width: 941px) and (max-height: 820px) {
	.auth-panel { padding: 2.5rem 3rem; }
	.auth-mark { width: 64px; margin-bottom: 1.375rem; }
	.auth-fields { margin-top: 1.625rem; }
	.auth-actions { margin-top: 1.75rem; }
	.auth-quiet-links { margin-top: 1rem; }
	.auth .auth-switch { margin-top: 1.75rem; }
}

@media (prefers-reduced-motion: reduce) {
	.auth,
	.auth-exit,
	.auth-form.is-current,
	.auth-form.is-current > *,
	.auth-stage-headline .auth-line span { animation: none !important; }

	/* The bar keeps running: it is not decoration, it is how long the redirect takes. */
	.auth-exit .auth-exit-bar span { animation: auth-exit-fill 1s linear both; }

	.auth-shake { animation: none; }

	.auth .auth-field input,
	.auth-field label,
	.auth .auth-submit,
	.auth .auth-sso,
	.auth .auth-quiet-link,
	.auth .auth-switch a { transition: none; }
}