html {
	--pad-top: max(1.3rem, calc(0.5rem + env(safe-area-inset-top, 0)));
	--pad-right: max(1.3rem, calc(0.5rem + env(safe-area-inset-right, 0)));
	--pad-bottom: max(1.3rem, calc(0.5rem + env(safe-area-inset-bottom, 0)));
	--pad-left: max(1.3rem, calc(0.5rem + env(safe-area-inset-left, 0)));
}

#Customization .promoBanner {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	color:var(--color-white);
	background-color: var(--color-aubergine);
	padding: 0.6rem 1rem;
	text-align: center;
}

#Customization ._columns {
	position: absolute;
	display: flex;
	flex-direction: row;
	padding:4rem;
	gap: 4rem;
	bottom:0;
	top:0;
	left: 0;
	right: 0;
	justify-content:stretch;
}

#Customization ._columns .logo-lenovoF1{
	top:0;
	left:0;
	background-position: left;
}

#Customization ._columns .logo-intel{
	top:0;
	right:0;
}

#Customization ._column._1 {
	flex: 1;
}

#Customization ._column._2 {
	width:16.5rem;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

#Customization ._text {
	margin-top:5rem;
}

.is-desktop #Customization .btn {
	padding: 0.6em 0.75em;
}

#Customization ._buttons {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

.is-desktop #Customization .icon-right {
	padding-right:2em;
	background-position:calc(100% - 0.75em) 50%;
}

#Customization p {
	margin: 0 0 1rem 0;
}

#Customization #ThreeDeeView {
	position: relative;
	left: 0;
	width: 100%;
	height: calc(100dvh - 20rem);
	pointer-events: none;
	/* background: linear-gradient(90deg, var(--color-background) 0, transparent 2rem, transparent calc(100% - 2rem), var(--color-background) 100%); */
	/* box-shadow: inset 0 0 1rem var(--color-background); */
	margin-top:-2rem;
}

.is-desktop #ThreeDeeView::after {
	content: "";
	position: absolute;
	bottom: 0;
	right: 0;
	width: 2rem;
	height: 100%;
	background: linear-gradient(to right, transparent 0, var(--color-background) );
}


#Customization ._instructions {
	position: absolute;
	right:0;
	top:2rem;
	color: var(--color-aubergine-50);
	font-size: 0.8rem;
		z-index:5;
}

#Customization .icon-3d {
	z-index:5;
	top:3.6rem;
}

#Customization ._instructions>div {
	display:inline-block;
}

#Customization .customizer-option p {
	color:var(--color-aubergine-50);
	font-size:0.8rem;
	margin:0 0 0.25rem 0;
}

.customizer-scroller-holder {
	/* background-color: darkorange; */
	width:100%;
}
.customizer-scroller {
	width:calc(100% + 1rem);
	overflow-y: auto;
	overflow-x: hidden;
	max-height:calc(50dvh - 10rem);
	/* margin-top: 1rem; */
	padding:1rem 1rem 1rem 0;
	scrollbar-color: white transparent;
  scrollbar-width: 0.2rem;
	scrollbar-gutter: stable;
}
.customizer-scroller-inner {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content:space-between;
	gap:0.5rem 0.25rem;
	min-width:16.5rem;
}
.customizer-scroller-top,
.customizer-scroller-bottom {
	content: "";
	position: absolute;
	left: 0;
	width: 100%;
	height: 1rem;
	background-color: aqua;
}
.customizer-scroller-top {
	top: 0;
	background:linear-gradient(to bottom, var(--color-background), transparent);
}
.customizer-scroller-bottom {
	bottom: 0;
	background:linear-gradient(to bottom, transparent, var(--color-background));
}
.customizer-scroller-bar {
	position: absolute;
	top: 1rem;
	right: -1rem;
	width: 0.2rem;
	height: calc(100% - 2rem);
	border-radius: 0.1rem;
	background-color: var(--color-white);

}

#Customization ._palette {
	display: flex;
	gap: 0.5rem;
	background-color:var(--color-white);
	padding: 0.5rem;
	border-radius: 0.25rem;	
	cursor: pointer;
}
#Customization ._palette.__selected {
	border: 0.125rem solid var(--color-aubergine);
	padding:0.375rem;
}

#Customization ._palette ._color {
	display: inline-block;
	width: 2rem;
	height: 2rem;
	border-radius: 0.25rem;
}

#Customization ._patternGroup {
	width:100%;
}

#Customization ._patternGroup ._title {
	font-size:0.8rem;
	font-weight:500;
	margin-bottom: 0.25rem;
}
#Customization ._patterns {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 0.5rem;
	justify-content: space-between;
	width:100%;

}
#Customization ._pattern {
	width:3.6rem;
	height:3.6rem;
	background-size: 3.6rem;
	background-position: center;
	background-repeat: no-repeat;
	border-radius: 0.25rem;
	overflow:hidden;
	border: 0;
	cursor: pointer;
	transition: border-color 0.2s ease-in-out;
}

#Customization ._pattern.__selected {
	border: 0.125rem solid var(--color-aubergine);
}

#DriverName-Option {
	position: absolute;
	bottom:0;
	width:100%;
	/* background: linear-gradient(transparent 0, var(--color-background) 55%); */
}


#DriverName-Error {
	position: absolute;
  right: 0;
  top: 5.5rem;
	display:none;
}

.__error #DriverName-Error {
	display:block;
}

#ThreeDeeHolder {
	position: absolute;
	top:11rem;
	left:0;
	width:100%;
	bottom: 2rem;
	overflow:hidden;
	/* background-color:cyan */
}

.is-desktop #ThreeDeeHolder {
	margin-left:-4rem;
	width: calc(100% + 4rem);
}

#ThreeDeeHolder canvas {
	position: absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}

/* mobile overrides */

.is-mobile #Customization ._columns {
	/* padding:max(1.3rem, calc(0.5rem + env(safe-area-inset-top, 0))) max(1.3rem, calc(0.5rem + env(safe-area-inset-right, 0))) max(1.3rem, calc(0.5rem + env(safe-area-inset-bottom, 0))) max(1.3rem, calc(0.5rem + env(safe-area-inset-left, 0))); */
	padding:0;
	gap: 1.3rem;
	flex-direction: column;
	min-height: 40rem;
	position: relative;
	height:100dvh;
}

.is-mobile #Customization ._column._2 {
	width:unset;
}

.is-mobile #Customization ._buttons {
	justify-content:stretch;
	gap:1rem;
	margin:0.5rem var(--pad-right) 0.5rem var(--pad-left);
}

.is-mobile #Customization .btn {
	font-size:1.2rem;
	/* padding:0.7rem 1.4rem; */
	width:unset;
	flex:1;
}

.is-mobile #Customization .btn.icon-right {
	/* padding-right:2.4em; */
	/* background-position:calc(100% - 1.1em) 50%; */
	flex:2;
}

.is-mobile #Customization ._columns .logo-intel{
	top: var(--pad-top);
	right: var(--pad-right);
	width: calc(100% - var(--pad-left) - var(--pad-right) - 8rem)
}

.is-mobile #Customization ._columns .logo-lenovoF1{
	top:unset;
	left:calc(50% - 7.85rem);
	background-position: center;
	position: relative;
	bottom:unset;
	display:inline-block;
	margin:2dvh 0 2.25rem 0;
}

#Customization .terms-and-conditions {
	margin: 0 var(--pad-left) 0.75rem var(--pad-right);
	text-align: center;
	bottom:0;
	position: absolute;
	left:0;
	right:0;
}

.is-mobile #Customization .customizer-option h4, 
.is-mobile #Customization .customizer-option p {
	display:inline-block;
	vertical-align: middle;
	/* line-height:1rem; */
	padding: 0 0.1rem 0 var(--pad-left);
}

.is-mobile #Customization #ThreeDeeView {
	margin-top:7.7rem;
	background:linear-gradient(to bottom, var(--color-background), transparent);
	height:4rem;
}

.is-mobile #Customization ._instructions {
	position: relative;
	text-align: right;
	padding:0.75rem var(--pad-right) 0.75rem var(--pad-left);
	font-size:min(1rem, 4dvw);
	top:0;
}

.is-mobile #Customization ._instructions > div {
  display: inline-block;
  height: 1.2rem;
  line-height: 1.2rem;
}

.is-mobile #Customization .icon-3d {
	width:2rem;
	height:2rem;
	top:2.2rem;
	right:var(--pad-right);
}

.is-mobile #ThreeDeeHolder {
	top:7.7rem;
	bottom:-3.5rem;
}

#ThreeDeeHolder::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 3.5rem;
	background: linear-gradient(transparent 0, var(--color-background) 75%);
}

.is-mobile #DriverName-Option {
	pointer-events: none;
	background:linear-gradient(to bottom, transparent 0, var(--color-background) 40% );
	background:transparent;
	position: absolute;
	top:3.75rem;
	/* left: var(--pad-left); */
	/* right:var(--pad-right); */
	width:100%;
}

.is-mobile #DriverName-Option input {
	margin-top:0.2rem ;
	left:var(--pad-left);
	width:calc(100% - var(--pad-left) - var(--pad-right));
	display: block;
	position: relative;
	pointer-events: auto;
}
.is-mobile #DriverName-Error {
	top: 2.3rem;
  right: 1rem;
  opacity: 0.5;
}


.is-mobile .customizer-scroller-holder {
	margin-top: 0.2rem;
	overflow: hidden;
}

.is-mobile .customizer-scroller {

		display: flex;
	flex-direction: row;

	overflow-y: hidden;
	overflow-x: auto;
	max-height: fit-content;
	padding:0 var(--pad-right) 0.6rem var(--pad-left);
	/* margin-left:-0.3rem; */
	scrollbar-color: white transparent;
  scrollbar-width: 0.2rem;
	scrollbar-gutter: stable;
	width: 100%;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scroll-padding-left: var(--pad-left);
	/* scroll-padding-right: var(--pad-right); */
	flex-wrap: nowrap;
	justify-content:space-between;
	gap: 0.5rem 0.75rem;
}
.is-mobile .customizer-scroller-inner {
	display: none;;
}

.is-mobile .customizer-scroller::-webkit-scrollbar-thumb {
	background-color: var(--color-white);
	border-radius: 0.1rem;
}
.is-mobile .customizer-scroller>div {
	scroll-snap-align: start;
}

.is-mobile .customizer-scroller-top,
.is-mobile .customizer-scroller-bottom {
	display: none;
	top:0;
	height: calc(100% - 0.5rem);
	width:0.31rem;
}

.is-mobile .customizer-scroller-top {
	left:-0.31rem;
	background:linear-gradient(to right, var(--color-background), transparent);
}
.is-mobile .customizer-scroller-bottom {
	right:-0.1rem;
	left:unset;
	background:linear-gradient(to right, transparent, var(--color-background));
}

.is-mobile #Customization ._palette {
	padding:0.3rem;
	gap:0.3rem;
}
.is-mobile #Customization ._palette.__selected {
  padding: 0.175rem;
}

.is-mobile #Customization ._palette ._color {
	width:2.25rem;
	height:2.25rem;
}

.is-mobile #Customization ._patternGroup ._title {
	position: sticky;
  font-weight: 400;
  left: 0;
  font-size:0.9rem;
  width: fit-content;
  padding-right: 0.1rem;
}
.is-mobile #Customization ._patterns {
  flex-wrap: nowrap;
	gap:0.75rem;
}

.is-mobile #Customization ._pattern {
	width:3rem;
	height:3rem;
	background-size: 3rem;
}