@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; }
	}
*/

header {
	background: #222222;
    background: -moz-linear-gradient(-45deg, #222222 0%, #000000 100%);
    background: -webkit-linear-gradient(-45deg, #222222 0%,#000000 100%);
    background: linear-gradient(135deg, #222222 0%,#000000 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#333333', endColorstr='#000000',GradientType=1 );
	padding: 0 0 0 0;
	color: #fff;
	margin-bottom: 1rem;
}

	@media (min-width: 500px) {
		header {
			margin-bottom: 0;
		}
	}

	header .wrap {
		z-index: 999999999;
	}

	header .logo.sknmtch {
		width: 4rem;
		height: 4rem;
		display: block;
		text-indent: -1000px;
		overflow: hidden;
		background: #000 url(img/Icon-White-Outlined.png) no-repeat center;
		background-size: contain;
		border: 1px solid #fff;
		border-radius: 15%;
		box-shadow: 0 0 1em rgba(0,0,0,0.3);
		margin-bottom: -2rem;
		transition: all 0.25s ease-in-out;
		z-index: 9;
		position: relative;
	}

		header .logo.sknmtch:hover {
			transform: scale(1.1);
			box-shadow: 0 0 2em rgba(0,0,0,0.4);
		}

		header .logo.sknmtch:active {
			transform: scale(0.95);
			box-shadow: none;
		}

		@media (min-width: 500px) {
			header .logo.sknmtch {
				/* width: 8rem;
				height: 2.5rem;
				display: block;
				text-indent: -1000px;
				overflow: hidden;
				background: url(img/logo-sknmtch.svg) no-repeat left;
				background-size: contain;

				border: 0;
				border-radius: 0;
				box-shadow: none;
				margin-bottom: 0; */
				margin-bottom: -3rem;
			}
		}

	header .logout {
		font-size: 12px;
		text-decoration: none;
		display: none;
	}

	header nav {
		position: absolute;
		bottom: -1px;
		left: 50%;
		transform: translateX(-50%);
		font-weight: 600;
	}

		header nav ul {
			display: flex;
			flex-flow: row wrap;
			min-width: 20rem;
			justify-content: center;
		}

			header nav ul li {
				color: #ccc;
				position: relative;
			}

				header nav ul li > a {
					display: block;
					margin: 0 ;
					padding: 1rem;
					text-decoration: none;
					border-radius: 3px 3px 0 0;
					cursor: pointer;
					transition: all 0.2s ease-out;
				}

				header nav ul li:hover > a,
				header nav ul li.is-open > a {
					background: rgba(255,255,255,0.1);
					background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 32%, rgba(255,255,255,0.1) 100%);
					background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 32%,rgba(255,255,255,0.1) 100%);
					background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 32%,rgba(255,255,255,0.1) 100%);
					filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#1affffff',GradientType=0 );
					color: #fff !important;
				}

				header nav ul li.active > a {
					background: #ffffff;
					background: -moz-linear-gradient(top, #f8f8f8 0%, #ffffff 50%);
					background: -webkit-linear-gradient(top, #f8f8f8 0%,#ffffff 50%);
					background: linear-gradient(to bottom, #f8f8f8 0%,#ffffff 50%);
					filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8f8f8', endColorstr='#ffffff',GradientType=0 );
					color: #222 !important;
				}

			@media (max-width: 749px) {
				header nav ul li.has-submneu:hover > a,
				header nav ul li.has-submenu.active > a {
					background: rgba(255,255,255,0.075);
					color: #fff !important;
				}

				header nav ul li ul {
					display: none;
					position: absolute;
					top:100%;
					margin-top: -1px;
					background: rgba(0,0,0,0.9) !important;
					box-shadow: 0 0 2em rgba(0,0,0,0.2);
					color: #000;
					border-radius: 0 0 3px 3px;
					z-index: 0;
					left: 50%;
					pointer-events: none;

					transition: all 0.2s ease-out;
					transform: translateX(-50%) ;
					min-width: 0;
				}

					header nav ul li ul li {

					}

						header nav ul li ul li a {
							border-radius: 0;
							margin: 0;
							border-bottom: 1px solid #555 !important;
							padding: 0.85em 1em;
							font-weight: 400;
						}

						header nav ul li ul li:last-child a {
							border-radius: 0 0 3px 3px;
							border-bottom: 0;
						}

						header nav ul li ul li:first-child a {
							border-radius: 3px 3px 0 0;
							border-bottom: 0;
						}

							header nav ul li ul li.active > a {
								background: #111;
								color: #fff !important;
							}

					header nav ul li.is-open ul {
						display: block;
						pointer-events: all;
						transform: translateX(-50%);
					}
			}

			@media (min-width: 750px) {
				header nav ul li.has-submenu > a {
					display: none;
				}

				header nav ul {
					min-width: 35rem;
				}

				header nav ul ul {
					border-left: 1px solid rgba(255,255,255,0.3);
					margin-left: 1rem;
					padding-left: 1rem;
					min-width: 0;
				}
			}

	.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;
	}

.smt-tag {
	font-size: 0.75em;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	width: 100%;
}

	.smt-tag a {
		text-decoration: none;
	}

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

.smt-tag .logout {
	float: right;
}

h1 {
	font-weight: 600;
	line-height: 120%;
	font-size: 1.6em;
	margin-bottom: 0.25em;
}

	@media (min-width: 600px) {
		h1 {
			font-size: 1.8em;
			line-height: 120%;
		}
	}

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

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

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

h2 {
	font-weight: 600;
	line-height: 120%;
	font-size: 1.3em;
	margin-bottom: 2em;
}

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

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

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

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: #AA003B; }
.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);
  }
}
*/

.columns {
	display: flex;
	/* flex-direction: row; */
	/* justify-content: space-between; */
	-webkit-flex-flow: row wrap;
	flex-flow: row wrap;
}

	.half {
		position: relative;
	}

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

	.profile-item {
		width: 50%;
		position: relative;
		display: block;
		/* padding: 1em; */
		background: #f8f8f8;
		border: 1px solid #fff;
		-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: #AA003B;
		}

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

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

		.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 3rem 1rem;
			height: 100%;
			text-align: center;
			text-decoration: none;
			font-weight: 600;
		}

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

		.profile-item:hover {
			color: #AA003B;
			-webkit-box-shadow: inset 0px -10px 0px -4px rgba(170,0,59,1);
			-moz-box-shadow: inset 0px -10px 0px -4px rgba(170,0,59,1);
			box-shadow: inset 0px -10px 0px -4px rgba(170,0,59,1);
		}

.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 #AA003B;
		}

	.form-field-wrap input.fancy-button {
		padding: 0;
		font-size: 1.625em;
		outline: none;
		background: transparent;
		border: 0;
		width: auto;
		font-weight: 600;
		color: #AA003B;
		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: #AA003B;
			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: #AA003B;
		}

			.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: #AA003B;
			-webkit-box-shadow: inset 0px -6px 0px -3px rgba(170,0,59,1);
			-moz-box-shadow: inset 0px -6px 0px -3px rgba(170,0,59,1);
			box-shadow: inset 0px -6px 0px -3px rgba(170,0,59,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: #AA003B;
			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: #AA003B;
	}

	.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 #AA003B;
	margin-bottom: 2em;
}

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

	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: #AA003B;
		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 #AA003B;
	}

		.js-checkbox-activator.checked::before {
			background: #AA003B;
			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: 60fr 40fr;
	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; }
}