:root{
	interpolate-size: allow-keywords;

	--gradient-button: linear-gradient(to bottom, #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%);
	--gradient-button-green: linear-gradient(to bottom, #ffffff 0%,#f1fff1 50%,#e1ffe1 51%,#f6fff6 100%);
	--gradient-button-red: linear-gradient(to bottom, #ffffff 0%,#fff1f1 50%,#ffe1e1 51%,#fff6f6 100%);
	--gradient-button-yellow: linear-gradient(to bottom, #ffffff 0%,#fffff1 50%,#ffffaa 51%,#ffffCC 100%);
	--gradient-button-grey: linear-gradient(to bottom, #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%);

	--shadow-default: 0.2vmax 0.2vmax 0.5vmax rgb(0 0 0 / 25%);
	--shadow-highlight: 0.1vmax 0.1vmax 0.3vmax rgb(0 0 0 / 50%);
	
	--color-label-grey: rgb(200,200,200);
	--color-label-yellow: rgb(255,255,220);
	--color-label-yellow-brighter: rgb(255,255,240);
	--color-label-green: rgb(220,255,220);
	--color-label-green-brighter: rgb(240,255,240);
	--color-label-red: rgb(255,220,220);
	--color-label-red-brighter: rgb(255,240,240);
	--color-label-orange: rgb(255,200,180);
	--color-label-orange-brighter: rgb(255,240,220);
	--color-label-orange-white: rgb(255,255,255);

	--color-white-trans-low: rgba(255,255,255,0.75);
	--color-white-trans-med: rgba(255,255,255,0.5);
	--color-white-trans-high: rgba(255,255,255,0.25);
	
	/* Med to large items */
	--padding-default: clamp(12px, 1vmax, 20px);
	--padding-small: clamp(6px, 0.5vmax, 10px);
	--border-radius-default: clamp(12px, 1vmax, 20px);

	--z-index-tooltip: 1000;
	--z-index-cart-menu: 2000;
	--z-index-toast: 3000;

	--font-size-default: clamp(12px, 1vmax, 20px);
	--font-size-highlight: clamp(14px, 1.25vmax, 24px);
	--font-size-large: clamp(16px, 1.5vmax, 30px);
	--font-size-huge: clamp(20px, 2vmax, 40px);

}

body{
	margin: 0;
	padding: 0;
	font-family: Arial, Helvetica, sans-serif;
	line-height: 150%;
	font-size: var(--font-size-default);
}

p.clickMe{
	font-weight: bold;
	font-style: italic;
	margin-top: 1vmax;
}

*{
	position: relative;
}

/* HTML: <div class="loader"></div> */
.loaderWrap{
	display:inline-block;
}
.loader{
	width: 3vmax;
	aspect-ratio: 1;
	display: grid;
	border-radius: 50%;
	background:
		linear-gradient(0deg ,rgb(0 0 0/50%) 30%,#0000 0 70%,rgb(0 0 0/100%) 0) 50%/8% 100%,
		linear-gradient(90deg,rgb(0 0 0/25%) 30%,#0000 0 70%,rgb(0 0 0/75% ) 0) 50%/100% 8%;
	background-repeat: no-repeat;
	animation: l23 1s infinite steps(12);
}
.loader::before,
.loader::after {
   content: "";
   grid-area: 1/1;
   border-radius: 50%;
   background: inherit;
   opacity: 0.915;
   transform: rotate(30deg);
}
.loader::after {
   opacity: 0.83;
   transform: rotate(60deg);
}
@keyframes l23 {
  100% {transform: rotate(1turn)}
}

*.ttParent .tooltip{
	display: none;
	position: absolute;
	bottom:0;
	left:50%;
	transform:translate(-50%,100%);
	background:var(--color-white-trans-low);
	padding: var(--padding-default);
	border-radius: var(--border-radius-default);
	box-shadow: var(--shadow-default);
	z-index: var(--z-index-tooltip);
	pointer-events: none;

}
*.ttParent:hover .tooltip{
	display: block;
}

table tr.animBgGreen td,
*.animBgGreen{
	transition: background-color 0.5s ease-in;
}
table tr.animBgGreenTrig td,
*.animBgGreenTrig{
	background-color: var(--color-label-green) !important;
	transition:none;
}

#modal{
	/* Todo */
}

#modal > div.content{
	/* Todo */
}


/* Generic tr styles */
table tr.grey > td, td.red{ background: var(--color-label-grey) !important; }
table tr.orange > td, td.yellow{ background: var(--color-label-orange) !important; }
table tr.green > td, td.green{ background: var(--color-label-green) !important; }
table tr.white > td, td.white{ background: var(--color-label-white) !important; }
table tr.red > td, td.red{ background: var(--color-label-red) !important; }

*.defaultMarginBottom{ margin-bottom: var(--padding-default); }

textarea{
	box-sizing: border-box;
}
input[type=submit],
input[type=button],
*.button
{
	background: var(--gradient-button-green);
	border-radius: var(--border-radius-default);
	padding: 1vmax 2vmax; 
	font-weight: bold;
	color: #363;
	border: 0.2vmax solid #363;
	box-shadow: var(--shadow-default);
	font-size: var(--font-size-large);

}
a.button{
	text-decoration: none;
	display:block;
	text-align: center;
}
*.button:active,
input[type=submit]:not(:disabled):active,
input[type=button]:not(:disabled):active
{
	transform:scale(0.95);
}
*.button:hover,
input[type=submit]:not(:disabled):hover,
input[type=button]:not(:disabled):hover
{
	border-color: #AAA;
}
*.button:disabled,
input[type=submit]:disabled,
input[type=button]:disabled{
	background: var(--gradient-button-grey);
	color: #666;
	border: 0.2vmax solid #666;
	opacity: 0.5;
}
select{
	border-radius: var(--border-radius-default);
	box-shadow: var(--shadow-default);
}


@keyframes tutorial{
	from{
		box-shadow: 0 0 1vmax rgba(255,150,50, 1);
	}to{
		box-shadow: 0 0 0.2vmax rgba(255,150,50, 0.5);
	}
}
@keyframes tutorialArrow{
	from{
		transform:translate(-40%, -40%);
	}to{
		transform:translate(-50%, -50%);
	}
}
#tutorial{
	user-select: none;
	font-weight:bold;
	text-align: center;
	position:absolute;
	z-index: var(--z-index-tooltip);
	background: var(--color-label-orange);
	border-radius: var(--border-radius-default);
	font-size: var(--font-size-highlight);
	cursor: pointer;
	max-width: 20vw;
	min-width: 15vw;
	border: #FDA double 0.3vmax;
	animation: 1s tutorial alternate ease-in-out infinite;
	overflow:visible;
	transform:translate(-50%, -50%);
	color: #420;
	transition: 0.5s ease-in-out;
	transition-property: top, left;
}
#tutorial img.pointer{
	position: absolute;
	bottom:-6vmax;
	right:-5vmax;
	max-width:5vmax;
	animation: 0.5s tutorialArrow alternate ease-in-out infinite;
}
@keyframes tutorialProgress{
	from{ color: rgba(0,0,0,.5); }
	to{color: rgba(0,0,0,1);}
}
#tutorial > div.progress{
	font-weight: normal;
	color: rgba(0,0,0,.5);
	font-style: italic;
	font-size: calc(var(--font-size-highlight)*0.75);
	animation: tutorialProgress 0.5s alternate ease-in-out infinite;
}
#tutorial.autoWidth{
	max-width:none;
	padding: var(--padding-default);
}
#tutorial > div.content{
	margin: var(--padding-default);
}
#tutorial:hover{
	background: var(--color-label-orange-brighter);
}
#tutorial > div.arrow{
	width: 1vmax;
    height: 1vmax;
    transform: translate(-50%, -50%) rotate(45deg);
    border: 0.3vmax double #420;
    bottom: -1.5vmax;
    left: 50%;
    position: absolute;
    border-left: none;
    border-top: none;
}
#tutorial.Left > div.arrow{
	top:50%; bottom:auto;
	left:-0.15vmax;
	transform: translate(-50%, -50%) rotate(135deg);
}
#tutorial.Top > div.arrow{
	top:-0.15vmax; bottom:auto;
	transform: translate(-50%, -50%) rotate(225deg);
}
#tutorial.Right > div.arrow{
	top:50%; bottom:auto;
	right:-1.5vmax; left:auto;
	transform: translate(-50%, -50%) rotate(-45deg);
}
#tutorial.None > div.arrow{
	display: none;
}

*.hidden{
	display: none !important;
}
*.center{
	text-align: center;
}
.bold{
	font-weight: bold;
}

.clear{
	clear:both;
}

#toast{
	position:fixed;
	left: 50%;
	transform: translateX(-50%);
	top: 10vh;
	z-index: var(--z-index-toast);
	max-width: 40vw;
	min-width: 20vw;
}
#toast > div.line{
	outline: 0.2vmax solid #FFF;
	background: #FFA;
	padding: var(--padding-default);
	margin-bottom: 0.4vmax;
	border-radius: 0.5vmax;
	box-shadow: var(--shadow-default);
	font-size: var(--font-size-large);
	color: #660;
	text-align: center;
	cursor: default;
	user-select: none;
	transition: all 0.25s cubic-bezier(.55,1.8,.59,.73);
	line-height: 125%;
	font-style:italic;
	overflow:hidden;
	box-sizing: border-box;
}
#toast > div.line.hide{
	transition: all 0.5s ease-in;
}
#toast > div.line.show,
#toast > div.line.hide{
	height:0;
	padding-top: 0;
	padding-bottom: 0;
	opacity:0;
	margin-bottom: 0;
}

#wrap{
	position: fixed;
	overflow: auto;
	left:0; right:0;
	bottom:0; top:0;
	background: linear-gradient(to bottom, #eeeeee 0%,#eeeeee 100%);
}
#content.blur{
	filter: blur(1vmax);
	pointer-events: none;
}

#logo{
	position:fixed;
	bottom:1vmax;
	right:1vmax;
	width:15vmax;
	height:15vmax;
	max-width:294px;
	max-height:264px;
	background: url('/media/shibetek_icon.png') no-repeat bottom right;
	background-size: contain;
}
#logo_text{
	position:absolute;
	top:50%;
	transform:translateY(-50%);
	left:1vmax;
	width:20vw;
	height:100%;
	max-height:70px;
	background: url('/media/shibetek_text.png') no-repeat;
	background-position: center left;
	background-size: contain;
	pointer-events: none;
}

#menu{
	display: flex;
	position: absolute;
	top:0; left:0; right:0;
	text-align: center;
	justify-content: center;
	background: linear-gradient(to bottom, #ffffff64 0%,#f1f1f164 50%,#e1e1e164 51%,#f6f6f664 100%);
	box-shadow: 0 0 1vmax rgba(0,0,0,.25);
}
#menu > div{
	display:flex;	
}

#menu div.menuEntry {
	background: var(--gradient-button);
	padding: var(--padding-default);
	font-weight: bold;
	font-size: var(--font-size-large);
	cursor:pointer;
	color:#333;
}
#menu #cart{
	position: absolute;
	right:0;
	overflow:visible;
}
#menu #cart > div.text.items{
	background: var(--gradient-button-green);
}
#menu #cart > div.text{
	transition: transform 0.5s ease-out;
}
#menu #cart > div.text.items.invalid{
	background: var(--gradient-button-red);
}
#menu #cart > div.text.flash{
	transition: transform 0.1s ease-out;
	transform: translateX(-10%) scaleX(1.2);
}
#cart > div.overlay{
	position: absolute;
	bottom:0;
	right:0;
	transform:translateY(100%);
	border-bottom-left-radius: 1vmax;
	background:var(--color-white-trans-low);
	box-shadow: var(--shadow-default);
	display:none;
	font-weight: normal;
	font-size: var(--font-size-highlight);
	flex-basis: fit-content;
	flex-direction: column;
	z-index: var(--z-index-cart-menu);
	overflow:hidden;
	padding:0.5vmax;
}
#cart:hover > div.overlay.items{
	display:flex;
}
#cart > div.overlay > div{
	display:flex;
	flex-basis: fit-content;
	margin-bottom:0.2vmax;
	overflow:hidden;
	align-items: center;
}
#cart > div.overlay > div.webshop_cart_item,
#cart > div.overlay > div.checkout{
	background:#FFF;
	border-radius: 0.5vmax;
	box-shadow: var(--shadow-default);
	cursor: pointer;
}
#cart > div.overlay > div.webshop_cart_item.outOfStock{
	background:#FDD;
}
#cart > div.overlay > div.webshop_cart_item:hover{
	background:#DFD;
}
#cart > div.overlay > div.webshop_cart_item > *{
	display:block;
	white-space: nowrap;
	padding:0.5vmax;
	margin:0;
}
#cart > div.overlay > div.webshop_cart_item img{
	width:4vmax; height:4vmax;
	padding:0;
	object-fit: cover;
}
#cart > div.overlay > div.webshop_cart_item > div.name{
	font-weight:bold;
}
#cart > div.overlay > div.webshop_cart_item > div.name span.customizations{
	font-weight: normal;
	font-style: italic;
	color:rgba(0,0,0,.5);
	font-size: var(--font-size-default);
}
#cart > div.overlay > div.webshop_cart_item > div.name span.customizations.notInStock{
	font-weight: bold;
	color: #933;
}
#cart > div.overlay > div.webshop_cart_item > div.quant{
	font-style:italic;
}
#cart > div.overlay > div.webshop_cart_item > div.rem{
	font-weight:bold;
	color: #600;
}
#cart > div.overlay > div.webshop_cart_item > div.cost{
	font-weight:bold;
	color: #060;
}
#cart > div.overlay > div.shipping{
	justify-content: space-between;
	margin:1vmax 0;
}
#cart > div.overlay > div.checkout{
	font-weight: bold;
	text-align: center;
	justify-content: center;
	background: var(--gradient-button-yellow);
	border:0.2vmax solid #663;
	padding: var(--padding-default);
	color: #663;
}
#cart > div.overlay > div.checkout:hover{
	border-color: #993;
	color: #993;
	box-shadow: var(--shadow-highlight);
}



/* Generic opacity fader */
*.opacityFadeIn.opacityFadeInStart{
	opacity:0;
}
*.opacityFadeIn{
	opacity:1;
	transition: opacity 0.5s;
}


div.pagination{
	display: flex;
    justify-content: space-between;
	margin-top:0.5vmax;
}
div.pagination > *{
	cursor: pointer;
	font-weight: bold;
}
div.pagination > *:hover{
	color:#333;
}



#menu > div > div.menuEntry.active{
	background: linear-gradient(to bottom, #ffffff 0%,#fbe7e7 50%,#f6cccc 51%,#fcf0f0 100%);
}
#menu > div > div.menuEntry:hover{
	background: linear-gradient(to bottom, #ebebeb 0%,#dedede 50%,#cfcfcf 51%,#e2e2e2 100%);
}

#menu img{
	height:100%;
	margin:10px;
}



#content{
	margin: 5vmax;
	background:var(--color-white-trans-low);
	border-radius:0.5vmax;
	box-shadow: 0.5vmax 0.5vmax 2vmax rgba(0,0,0,.25);
	padding: 5vmax;
}

/* Index page */
	#content div[data-id=index] div.products > div.product{
		height:8vmax;
		padding: var(--padding-default);
		background-size: cover;
		background-position: center center;
		border-radius: var(--border-radius-default);
		box-shadow: var(--shadow-default);
		margin-bottom: var(--padding-default);
		cursor:pointer;
		user-select: none;
	}
	#content div[data-id=index] div.products > div.product.outOfStock div.oosText{
		position: absolute;
		top:0; left:0; right:0; bottom:0;
		backdrop-filter: blur(5px);
		background:rgba(255,255,255,.5);
	}
	#content div[data-id=index] div.products > div.product.outOfStock div.oosText > span{
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		font-weight: bold;
		font-size: var(--font-size-huge);
		color: var(--color-label-red);
	}
	
	#content div[data-id=index] div.products > div.product:hover{
		filter:brightness(110%);
		
	}
	#content div[data-id=index] div.products > div.product div.description,
	#content div[data-id=index] div.products > div.product div.title{
		position: absolute;
		background: var(--color-white-trans-low);
		backdrop-filter: blur(5px);
		font-size: var(--font-size-huge);
		top: 0;
		left: 0;
		border-bottom-right-radius: var(--border-radius-default);
		padding: var(--padding-default);
	}
	#content div[data-id=index] div.products > div.product div.description{
		top:auto;
		left:auto;
		border-bottom-right-radius: 0;
		border-top-left-radius: var(--border-radius-default);
		bottom:0; right:0;
		font-size: var(--font-size-default);
		color: rgba(0,0,0,.75);
		max-width: 75%;
		text-align:right;
		padding: calc(0.5*var(--padding-default));

	}


/* Contact page*/
	#emailForm{
		width:50%;
	}
	#emailForm input, #emailForm textarea, #emailForm select{
		width:90%;
		padding:1em;
	}
	#emailForm textarea{
		min-height:6em;
	}
	#emailForm > *{
		margin-bottom:0.5em;
	}

	#content div[data-id=contact] > div.success{
		background:rgba(200,255,200,.5);
		border: 1px solid #AFA;
		padding: 1em;
		font-size: var(--font-size-large);
		display:inline-block;
	}
/**/

/* Shared between orderConfirmation and checkout */

	table.cartItems,
	table.customerDetails{
		width:100%;
	}
	table.cartItems tr.total td {
		background: var(--color-label-green);
	}
	table.cartItems tr.invalid td {
		background: var(--color-label-red);
	}
	table.cartItems tr.orange td {
		background: var(--color-label-orange);
	}
	table.customerDetails tr.disabled td {
		background: var(--color-label-grey);
		opacity: 0.6;
	}
	table.cartItems td,
	table.customerDetails td,
	table.customerDetails th
	{
		padding:0.5vmax;
		background: var(--color-label-yellow);
		box-shadow: var(--shadow-default);
	}
	table.subsection td{
		background: var(--color-white-trans-high);
		box-shadow:none;
		padding:0 0.5vmax;
		border:1px dotted #FFF;
	}
	table.customerDetails td.clickable, 
	table.cartItems td.clickable{
		cursor:pointer;
	}
	table.customerDetails td.clickable:hover, 
	table.cartItems td.clickable:hover{
		background: var(--color-label-yellow-brighter);
	}
	
	table.cartItems td.icon > img{
		width:3vmax;
		height: 3vmax;
	}

	table.cartItems label{
		border-radius: var(--border-radius-default);
		box-shadow: var(--shadow-default);
		background: var(--color-white-trans-low);
		padding: var(--padding-small);
		margin-top: var(--padding-small);
	}

	table.customerDetails{
		text-align: left;
	}

	table.subsection td.miniThumb,
	td.miniThumb{
		padding:0;
	}
	td.miniThumb img{
		max-width:4vmax;
	}

/**/

/* Order confirmation */
	#content div[data-id=order] > div.content,
	#content div[data-id=index] > div.content,
	#content div[data-id=orderConfirmation] > div.content{
		display:flex;
		width:100%;
	}
	#content div[data-id=order] > div.content > div > h1,
	#content div[data-id=index] > div.content > div > h1,
	#content div[data-id=orderConfirmation] > div.content > div > h1{
		margin-top:0;
	}
	#content div[data-id=order] > div.content > div.left,
	#content div[data-id=index] > div.content > div.left,
	#content div[data-id=orderConfirmation] > div.content > div.left{
		width:49%;
		margin-right:0.5vmax;
		padding-right:1vmax;
		border-right: 1px dotted rgba(0,0,0,.1);
	}
	#content div[data-id=order] > div.content > div.right,
	#content div[data-id=index] > div.content > div.right,
	#content div[data-id=orderConfirmation] > div.content > div.right{
		width:49%;
		padding-left:1vmax;
	}
	#content div[data-id=order] > div.content > div.left div.orderStatus,
	#content div[data-id=orderConfirmation] > div.content > div.left > div{
		border-radius: var(--border-radius-default);
		box-shadow: var(--shadow-default);
		padding: var(--padding-default);
		background: var(--color-label-yellow);
	}
	#content div[data-id=order] > div.content > div.left > div.red,
	#content div[data-id=orderConfirmation] > div.content > div.left > div.red{
		background: var(--color-label-red);
	}
	#content div[data-id=order] > div.content > div.left > div.green,
	#content div[data-id=orderConfirmation] > div.content > div.left > div.green{
		background: var(--color-label-green);
	}
	#content div[data-id=order] div.status,
	#content div[data-id=orderConfirmation] div.status{
		text-align: center;
	}

	@keyframes swishCode{
		from{
			box-shadow: 0 0 1vmax #000;
		}
		to{
			box-shadow: 0 0 1vmax rgba(0,0,0,0.5);
		}
	}
	#content div[data-id=orderConfirmation] div.swishQR{

		background:var(--color-white-trans-low);
		padding: var(--padding-default);
		border-radius: var(--border-radius-default);
		display: inline-block;
		font-weight: bold;
		animation: swishCode 1s alternate ease-in-out infinite;

	}
	#content div[data-id=orderConfirmation] div.swishQR span{
		padding:calc(var(--padding-default)*0.5);
		background: var(--color-label-green);
		border-radius: calc(var(--border-radius-default)*0.5);
		box-shadow: var(--shadow-highlight);
	}
	
	
/* Adm inspect */
	#content div[data-id=order] > div.content > div.left select{
		font-size: var(--font-size-large);
		padding: var(--padding-default);
	}
	#content div[data-id=order] div.right > h3:first{
		margin-top:0;
	}
	#content div[data-id=order] div.left > div.progressBar {
		width:100%;
		border-radius: var(--border-radius-default);
		box-shadow: var(--shadow-default);
		background: var(--color-label-grey);
		overflow:hidden;
		text-align: center;
		height: 3vmax;
		margin-top:var(--padding-default);;
	}
	#content div[data-id=order] div.left > div.progressBar > div.bar{
		background: var(--gradient-button-green);
		height: 100%;
		left:0;
	}
	#content div[data-id=order] div.left > div.progressBar > div.text{
		position: absolute;
		top:50%;
		transform: translateY(-50%);
		width:100%;
		left:0;
		font-size: var(--font-size-large);
		font-weight: bold;
		
	}
	

	#content div[data-id=order] div.left > div.progressBar div > div.bar{
		margin-top:0;
	}

	#content div[data-id=order] textarea.notes{
		width:100%;
		min-height:6vmax;
		padding: var(--padding-default);
		font-size: var(--font-size-highlight);
		box-shadow: var(--shadow-default);
		margin-bottom: var(--padding-default);
	}

/* Checkout */
	#content div[data-id=checkout] > div.content{
		display:flex;
		width:100%;
	}
	#content div[data-id=checkout] > div.content > div > h1{
		margin-top:0;
	}
	#content div[data-id=checkout] > div.content > div.left{
		width:49%;
		margin-right:0.5vmax;
		padding-right:1vmax;
		border-right: 1px dotted rgba(0,0,0,.1);
	}
	#content div[data-id=checkout] > div.content > div.left label input,
	#content div[data-id=checkout] > div.content > div.left label select,
	#content div[data-id=checkout] > div.content > div.left label textarea{
		font-size: var(--font-size-large);
		font-weight: normal;
		padding:0.5vmax;
	}
	#content div[data-id=checkout] > div.content > div.left label{
		display:flex;
		margin-bottom:1px;
		background: var(--color-label-grey);
		box-shadow: var(--shadow-default);
		width: 100%;
		box-sizing: border-box;
		justify-content: space-between;
		padding: var(--padding-default);
		font-size: var(--font-size-large);
		align-items: center;
	}
	#content div[data-id=checkout] > div.content > div.left label:not(.paymentOpt) > *:last-child{
		width: 70%;
	}
	
	
	#content div[data-id=checkout] > div.content > div.left label.required{
		background: var(--color-label-yellow);
		font-weight: bold;
	}
	#content div[data-id=checkout] > div.content > div.left label.checked{
		background: var(--color-label-green);
	}
	#content div[data-id=checkout] > div.content > div.left label.hover:hover{
		cursor: pointer;
		background: var(--color-label-yellow-brighter);
	}
	#content div[data-id=checkout] > div.content > div.left label.checked.hover:hover{
		cursor: pointer;
		background: var(--color-label-green-brighter);
	}
	#content div[data-id=checkout] > div.content > div.left label span{
		font-weight: bold;
		vertical-align: middle;
	}
	#content div[data-id=checkout] > div.content > div.left label span.flag{
		width:3vmax;
		height:2vmax;
		display: inline-block;
		background-repeat: no-repeat;
		border-radius:0.5vmax;
		background-size:cover;
		background-position: center center;
	}
	
	#content div[data-id=checkout] > div.content > div.left div.submit{
		margin-top:1vmax;
	}
	#content div[data-id=checkout] > div.content > div.left div.submit input{
		font-size: var(--font-size-huge);
	}


	#content div[data-id=checkout] > div.content > div.right{
		width:49%;
		padding-left:1vmax;
	}

	
/**/
	
/* Prints designer */
	/* Templates */
	div.meshEditButton{	/* Button placed in the renderer */
		padding: 0.75vmax;
		margin-bottom: 4px;
		font-size: 0.85em;
		pointer-events: all;
		color: black;
		border-radius: 0.25vmax;
		background: linear-gradient(to bottom, rgba(255,255,255,0.7) 0%,rgba(240,240,240,0.7) 100%);
		box-shadow: var(--shadow-default);
		user-select: none;
		transition: all 0.25s ease-out;
	}
	div.meshEditButton.hover,
	div.meshEditButton:hover,
	div.meshEditButton.selected{
		outline: 0.2vmax solid #FFF;
		outline-offset: -0.2vmax;
		cursor: pointer;
		color: #3A3;
		background-color:#CFC;
	}
	div.meshEditButton.hover,
	div.meshEditButton:hover{
		outline-color: #8E8;
	}
	div.slot.meshEditButton.selected{
		transform:translateX(3%) scale(1.06, 1);
	}
	#content div[data-id=printDesigner] div.three > div.loading{
		position: absolute;
		top:0; right:0;
		bottom:0; left:0;
		background: rgba(0,0,0,0.5);
		backdrop-filter: blur(5px);
		font-weight: bold;
		font-size: var(--font-size-large);
		pointer-events: none;
	}
	#content div[data-id=printDesigner] div.three > div.loading > div.spinner > *{
		vertical-align: middle;;
	}
	#content div[data-id=printDesigner] div.three > div.loading > div.spinner{
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		background: var(--color-white-trans-low);
		padding: var(--padding-default);
		border-radius: var(--border-radius-default);
		box-shadow: var(--shadow-default);
	}

	#content div[data-id=printDesigner] div.three{
		height:75vh;
		margin-left: -5vmax;
		margin-right:-5vmax;
		margin-top: -5vmax;
		border-top-left-radius: 0.5vmax;
		border-top-right-radius: 0.5vmax;
		overflow:hidden;
	}
	#content div[data-id=printDesigner] div.three > div.webgl{
		top:0; left:0; bottom:0; right:0;
		position:absolute
	}

	#content div[data-id=printDesigner] > div.three > div.settings{
		position: absolute;
		top:0;
		left: 0;
		width: 80%;
		pointer-events: none;
		display:flex;
		flex-wrap: wrap;
	}
	#content div[data-id=printDesigner] > div.three > div.settings > div{
		max-width:49%;
	}
	#content div[data-id=printDesigner] > div.three > div.settings div.flexBlock{
		border-radius:var(--border-radius-default);
		backdrop-filter: blur(5px);
		margin:0.25vmax;
		background:var(--color-white-trans-high);
		padding:0.5vmax;
		pointer-events: all;
		margin-top: 0.5vmax;
	}
	#content div[data-id=printDesigner] > div.three > div.settings div.flexBlock > div.materials.content{
		max-width: 28vmax;	/* Ensures a cleaner wrap */
	}
	#content div[data-id=printDesigner] > div.three > div.settings div.flexBlock > div.content{
		align-items: center;
		height:100%;	
		display:flex;
		flex-wrap: wrap;
		align-content: center;
		justify-content: center;
	}
	#content div[data-id=printDesigner] > div.three > div.settings div.block.color{
		margin:0.1vmax;
	}
	#content div[data-id=printDesigner] > div.three > div.settings div.block{
		width:3vmax; height:3vmax;
		display:inline-block;
		margin:0.25vmax;
		cursor:pointer;
		pointer-events: all;
	}
	#content div[data-id=printDesigner] > div.three > div.settings div.block.big{
		width:5vmax; height:5vmax;
	}
	#content div[data-id=printDesigner] > div.three > div.settings div.block.noOverflow{
		overflow: hidden;
		border-radius:var(--border-radius-default);
	}
	#content div[data-id=printDesigner] > div.three > div.settings div.flexBlock div.title{
		position: absolute;
		font-weight: bold;
		text-transform: uppercase;
		top:-0.6vmax;
		left: 0; right: 0;
		text-align: center;
		color: rgba(0,0,0,.6);
		pointer-events: none;
	}
	#content div[data-id=printDesigner] > div.three > div.settings div.flexBlock div.subCustomization{
		margin-top:1vmax;
	}
	#content div[data-id=printDesigner] > div.three > div.settings div.flexBlock div.subCustomization > div.title{
		background: none;
		padding: 0;
		text-transform: none;
		font-style: italic;
		font-weight: bold;
		color: rgba(0, 0, 0, .2);
		top: -1vmax;
		bottom: auto;
		left: 0;
		right:0;
		text-align: center;;
	}
	#content div[data-id=printDesigner] > div.three > div.settings div.mat.block{
		margin: 0.5vmax 0.25vmax;
	}
	
	#content div[data-id=printDesigner] > div.three > div.settings div.block.mat img{
		object-fit: none;
		width:auto; height:auto;
	}

	#content div[data-id=printDesigner] > div.three > div.settings div.block img,
	#content div[data-id=printDesigner] > div.three > div.settings div.block video
	{
		object-fit: cover;
		width: 100%;
		height: 100%;
	}
	#content div[data-id=printDesigner] > div.three > div.settings div.case.block,
	#content div[data-id=printDesigner] > div.three > div.settings div.block div.bg{
		border-radius:var(--border-radius-default);
		border: 0.3vmax solid #DDD;
		box-shadow: var(--shadow-default);
		background: rgba(0,0,0,.75);
	}
	#content div[data-id=printDesigner] > div.three > div.settings div.block div.bg{
		background:url(media/checker.webp) repeat;
		overflow:hidden;
		top: 0; left: 0; right: 0; bottom: 0;
		position: absolute;
	}
	#content div[data-id=printDesigner] > div.three > div.settings div.block div.color{
		position: absolute;
		top: -1px; left: -1px; right: -1px; bottom: -1px;
	}

	#content div[data-id=printDesigner] > div.three > div.settings div.case.block:hover,
	#content div[data-id=printDesigner] > div.three > div.settings div.block:hover div.bg{
		border-color:#FFF;
	}

	#content div[data-id=printDesigner] > div.three > div.settings div.case.block.selected,
	#content div[data-id=printDesigner] > div.three > div.settings div.block.selected div.bg{
		border-color:#AFA;
	}

	#content div[data-id=printDesigner] > div.three > div.settings div.block > div.art{
		position:absolute;
		left:0; top:0; right:0; bottom:0;
		background-size:cover;
	}

	#content div[data-id=printDesigner] > div.three > div.settings div.block > span.sub.hoverOnly{
		display:none;
	}
	#content div[data-id=printDesigner] > div.three > div.settings div.block:hover > span.sub.hoverOnly{
		display:block;
	}
	#content div[data-id=printDesigner] > div.three > div.settings div.block > span.sub{
		position: absolute;
		top:0;
		left:50%;
		transform:translate(-50%,-60%);
		font-weight: bold;
		text-shadow: 1px 1px #fff, -1px 1px #fff, 1px -1px #fff, -1px -1px #fff;
		white-space:nowrap;
	}

	#content div[data-id=printDesigner] > div.three > div.slotSelect{
		position: absolute;
		left:0;
		bottom: 0;
		font-size: var(--font-size-large);
		text-align: right;
	}


	#content div[data-id=printDesigner] > div.three > div.settings > div.name.whole{
		font-weight: bold;
	}

	#content div[data-id=printDesigner] > div.three > div.utilityButtons{
		position: absolute;
		left:50%;
		transform:translateX(-50%);
		bottom:0;
	}
	#content div[data-id=printDesigner] > div.three > div.utilityButtons > div.meshEditButton{
		display:inline-block;
		font-size: var(--font-size-large);;
		width:6vmax;
		text-align: center;
		user-select: none;
	}

	#content div[data-id=printDesigner] > div.three > div.infoBox{
		position: absolute;
		right:1vmax;
		bottom:1vmax;
		padding:0 1vmax;
		background:rgba(255,255,255,.5);
		border-radius:var(--border-radius-default);
		max-width:20%;
		pointer-events: none;
	}

	#content div[data-id=printDesigner] > div.three > div.infoBox > div.caseInfo{
		border-bottom:1px solid #000;
	}

	#content div[data-id=printDesigner] > div.three > div.infoBox div.materialInfo p.materialDescription{
		font-style: italic;
	}

	#content div[data-id=printDesigner] > div.three > div.cost,
	#content div[data-id=printDesigner] > div.three > div.outOfStock{

		background: linear-gradient(to bottom, #f2fcf2 0%,#d2f4d2 49%,#d9f5d9 50%,#dff7df 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		position: absolute;
		font-weight: bold;
		color: #0A0;
		padding:0.5vmax 1vmax;
		border-bottom-left-radius:0.5vmax;
		top:0;
		right:0;
		border: 0.25vmax solid #FFF;
		border-top:none;
		border-right:none;
		font-size: var(--font-size-large);
		cursor:pointer;
		text-shadow: 0.1vmax 0.1vmax 0.2vmax #FFF;
		transition:transform 0.3s ease-out;
		transform-origin: top right;
		user-select: none;

	}
	#content div[data-id=printDesigner] > div.three > div.cost span.stock{
		color: #333;
		font-weight: normal;
		position: absolute;
		font-size: var(--font-size-default);
		left: 1vmax;
		bottom: 0;
		font-style: italic;
	}
	#content div[data-id=printDesigner] > div.three > div.cost.disabled{
		pointer-events: none;
		color: #AAA;
				background: linear-gradient(to bottom, #f2f2f2 0%,#d2d2d2 49%,#d9d9d9 50%,#dfdfdf 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

	}
	#content div[data-id=printDesigner] > div.three > div.cost:hover{
		border-color:#0A0;
		transform:scale(1.05);
		transition: none;
	}
	#content div[data-id=printDesigner] > div.three > div.cost:active{
		border-color:#FFF;
		box-shadow: 0 0 1vmax #FFF;
	}
	#content div[data-id=printDesigner] > div.three > div.cost img{
		width:2.5vmax; height:2.5vmax; 
		vertical-align: middle;
	}

	#content div[data-id=printDesigner] > div.three > div.outOfStock{
		color: #A00;
		background: linear-gradient(to bottom, #fcf2f2 0%,#f4d2d2 49%,#f5d9d9 50%,#f7dfdf 100%);
		border-color: #A00;
		pointer-events: none;

	}

	#content div[data-id=printDesigner] div.bottomText{
		display:flex;
		padding-top:1vmax;
	}
	#content div[data-id=printDesigner] div.bottomText > *{
		padding:0 1vmax;
		margin:1vmax 0;
	}
	#content div[data-id=printDesigner] div.bottomText > * > h1{
		margin-top:0;
	}
	#content div[data-id=printDesigner] div.bottomText > div.caseKits{
		width:40%;
		border-left: 1px dotted #DDD;

	}

	#content div[data-id=printDesigner] div.bottomText > div.caseKits > div.kits > div.kit{
		display: inline-block;
		margin: 0 1vmax 1vmax 0;
		padding:0;
		background: linear-gradient(to bottom, rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%);
	}
	#content div[data-id=printDesigner] > div.bottomText > div.caseKits > div.kits > div.kit img{
		width:8vmax;
		height:8vmax;
		display: block;
	}
	#content div[data-id=printDesigner] > div.bottomText > div.caseKits > div.kits > div.kit label{
		position: absolute;
		display: block;
		bottom:-0.5vmax; right:-0.5vmax;
		background:rgba(0,0,0,0.5);
		color: #FFF;
		font-weight: bold;
		padding:0.2vmax 0.5vmax;
		border-radius:0.5vmax;
		pointer-events: none;
	}

	#content div[data-id=printDesigner] > div.bottomText > div.modelDescription > p.subtitle{
		margin:0;
		font-style: italic;
	}
	#content div[data-id=printDesigner] > div.bottomText > div.modelDescription > h2{
		margin-bottom:0;
	}

	#content div[data-id=printDesigner] > div.bottomText > div.modelDescription > div.gallery > div{
		width:100%;
	}
	#content div[data-id=printDesigner] > div.bottomText > div.modelDescription > div.gallery > div > *{
		width:100%;
	}