/* GLOBAL VARIABLES FOR USE WITH THE BIKE IMAGE FOR CUSTOM KITS */
:root {
	--sizeratio: 1.0;
	--baselineoffset: 0px;
	--fontsizeoffset: 0px;
	--framebaselineoffset: 0px;
	--framefontsizeoffset: 0px;
	--forkbaselineoffset: 0px;
	--forkfontsizeoffset: 0px;

	--colorswatchsize: 16px;
}

:host,
.sl-theme-dark {
	--sl-color-primary-50: var(--sl-color-red-50);
	--sl-color-primary-100: var(--sl-color-red-100);
	--sl-color-primary-200: var(--sl-color-red-200);
	--sl-color-primary-300: var(--sl-color-red-300);
	--sl-color-primary-400: var(--sl-color-red-400);
	--sl-color-primary-500: var(--sl-color-red-500);
	--sl-color-primary-600: var(--sl-color-red-600);
	--sl-color-primary-700: var(--sl-color-red-700);
	--sl-color-primary-800: var(--sl-color-red-800);
	--sl-color-primary-900: var(--sl-color-red-900);
	--sl-color-primary-950: var(--sl-color-red-950);
  
	--sl-input-help-text-color: var(--sl-color-neutral-600);
	--sl-panel-background-color: var(--sl-color-neutral-300);
    --sl-panel-border-color: var(--sl-color-neutral-500);
}

/* The webkit autofill color looks bad as red (the primary color) so we're going to do it as yellow. */
sl-input::part(input):-webkit-autofill, sl-input::part(input):-webkit-autofill:hover, sl-input::part(input):-webkit-autofill:focus, sl-input::part(input):-webkit-autofill:active {
    -webkit-text-fill-color: var(--sl-color-yellow-600) ! important;
}

body,td,th {
	font-family:helvetica, sans-serif;
	font-size: 16px;
	color: #F2F2F2;
}
html, body {
	--mobile:false;
	background-color:#222222;
	background-image: URL("images/custom_bg.png");
	width:100%;
	height:100%;
	margin:0px;
	padding:0px;
	overflow:hidden;
	opacity:1.0;
	transition:opacity 0.3s ease-in;
}
body.loading {
	opacity:0.0;
}
a:link, a:visited {
	color: white;
	text-decoration:underline;
}
a:hover {
	color: #ffe4e1;
	text-decoration:underline;
}
.error {
	color: #FF1D00;
	border-color: #FF1D00;
	border-right-width:12px;
}
.red {
	color: #FF1D00;
}
.boldred {
	color: #FF1D00;
	font-weight: bold;
}
.boldredunderline {
	color: #FF1D00;
	font-weight: bold;
	text-decoration: underline;
}
.highlighter {
	border-bottom:1px #CCCCCC dotted;
	cursor:pointer;
}
.highlight {
	background-color: rgba(255, 255, 0, 0.4);
}
.dimmed {
	opacity:0.5;
	pointer-events:none;
}


.accessible-skip-header {
    position:fixed; 
    top:5px; 
    left:calc(35% - 15rem); 
    height:1.5rem; 
    line-height:1.5rem;
    width: 15rem;
    z-index:500;
    padding:4px;
    color:white ! important;
    text-align:center;
    outline: solid 2px rgba(255, 255, 255, 0.6);    
}
.accessible-skip-header:not(:focus-visible) {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    clip: rect(0px, 0px, 0px, 0px) !important;
    clip-path: inset(50%) !important;
    border: none !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    padding:0px ! important;
}



.reflx_admin_window,
.reflx_window {
	position:relative;
	margin:0px auto;
	width:1135px;
	height:100%;
}
.reflx_admin_window {
	width:1024px;
}
.reflx-admin-header,
.reflx-header {
	position:absolute;
	top:0px;
	left:0px;
	width:1135px;
	height:89px;
	padding:0px;
	background-color:#222222;
	/*border-bottom:2px solid #FF1D00;*/
	border-bottom:2px solid #777777;
	text-align:center;
}
.reflx-admin-header {
	overflow:visible;
	z-index:200;
	width:1024px;
}

div.screen-spacer {
	flex: 1 0 auto;
}
div.reflx-footer {
	position:relative;
	min-height:40px;
	padding:0px;
	margin:10px -10px 0px -10px;
	background-color: #222222;
	color:#AAAAAA;
	border-top:2px solid #777777;
	text-align:center;
	font-size:0.8em;
	white-space: nowrap;
	flex-shrink:0;
}
div.reflx-footer .foot-left {
	display:inline-block;
	vertical-align: top;
	text-align:left;
	width:50%;
	font-size:0.85em;
	padding:10px;
}
div.reflx-footer .foot-right {
	display:inline-block;
	vertical-align: top;
	width:50%;
	text-align:right;
	padding:10px;
}
div.reflx-footer .paypal {
	position:absolute;
	top:0px;
	left:calc(50% - 172px);
}

.reflx-header .logo,
.reflx-admin-header .logo {
	margin-left:0px;
}
.reflx-header .logo img,
.reflx-admin-header .logo img {
	max-height: 50px;
	margin-top: 20px;
	margin-bottom:10px;
	border:none;
	transform-origin:top center;
	transition:transform 10s ease-out;
}
.reflx-slideshow {
	margin: 0px -10px;
}
#slideshow {
	margin-bottom:30px ! important;
}
.slideshow_heading {
	color: #F2F2F2;
	font-weight: bold;
	font-size: 30px;
	text-transform:uppercase;
	padding-left: 5px;
	white-space:nowrap;
	text-shadow:1px 1px 2px rgba(0, 0, 0, 0.3), -1px -1px 2px rgba(242, 242, 242, 0.4);
	pointer-events:none;
}
.slideshow_subheading {
	color: #E2E2E2;
	font-size: 24px;
	white-space:nowrap;
	text-shadow:1px 1px 2px rgba(0, 0, 0, 0.3), -1px -1px 2px rgba(242, 242, 242, 0.4);
	pointer-events:none;
}

/* Site wide Menu and Cart */
#reflx_menu {
	position:absolute;
	top:20px;
	left:20px;
	z-index:8999;
}
#reflx_cart_container {
	position:absolute;
	top:20px;
	right:20px;
	z-index:9000;
	max-height: calc(100% - 40px - 32px);
}
#reflx_cart_counter {
	position:absolute;
	top:12px;
	right:12px;
	height:16px;
	width:auto;
	min-width:16px;
	color:white;
	background-color: #EC2E00;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#EC2E00), to(#BF2500));
	background-image: linear-gradient(to bottom, #EC2E00 0%, #BF2500 100%);
	font-family:sans-serif;
	font-size:12px;
	line-height:16px;
	padding:2px 4px;
	text-align:center;
	border:2px solid white;
	border-radius:16px;
	-webkit-box-shadow:1px 1px 2px rgba(0, 0, 0, 0.4);
	box-shadow:1px 1px 2px rgba(0, 0, 0, 0.4);
	z-index:9002;
}
.reflx-menu-container {
	text-align:left;
	color:#F2F2F2;
	padding:16px;
	border:1px solid transparent;
	border-radius:16px;
	background-color:black;
	overflow:hidden;
	height:18px;
	width:18px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;

	-webkit-transition:all 0.5s;
	transition:all 0.5s;
}
.reflx-menu-container.open {
	border:1px solid #BBBBBB;
	background-color:black;
	max-height:calc(100% - 64px);
	overflow-y:auto;
}

.reflx-menu-container .reflx-menu-thumb {
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);
	font-size:18px;
	display:block;
	position:absolute;
	height:20px;
	width:20px;
	text-align:center;
	-webkit-transition: opacity 0.25s 0.25s, -webkit-transform 0.5s;
	transition: opacity 0.25s 0.25s, -webkit-transform 0.5s;
	transition: opacity 0.25s 0.25s, transform 0.5s;
	transition: opacity 0.25s 0.25s, transform 0.5s, -webkit-transform 0.5s;
	cursor:pointer;
	z-index:9005;
}
.reflx-menu-container.left .reflx-menu-thumb {
	top:16px;
	left:16px;
	right:auto;
}
.reflx-menu-container.right .reflx-menu-thumb {
	top:16px;
	right:16px;
	left:auto;
}
.reflx-menu-container .reflx-closed-thumb:hover {
	-webkit-transform: scale(1.3, 1.3);
	transform: scale(1.3, 1.3);
}
.reflx-menu-container .reflx-closed-thumb {
	opacity:1.0;
	-webkit-transform: rotate(0deg);
	        transform: rotate(0deg);
}
.reflx-menu-container.open .reflx-closed-thumb {
	opacity:0.0;
	-webkit-transform:rotate(180deg);
	        transform:rotate(180deg);
}
.reflx-menu-container .reflx-open-thumb {
	opacity:0.0;
	-webkit-transform: rotate(180deg);
	        transform: rotate(180deg);
}
.reflx-menu-container.open .reflx-open-thumb {
	opacity:1.0;
	-webkit-transform: rotate(360deg);
	        transform: rotate(360deg);
}
.reflx-menu-container .reflx-menu-content {
	position:absolute;
	top:16px;
	right:16px;
	height:auto;
	width:auto;
	z-index:9004;
	padding-top:32px;
}
.reflx-menu-container.left .reflx-menu-content {
	top:16px;
	left:16px;
	right:auto;
}
.reflx-menu-content a {
	margin:8px 0px;
	font-size:20px;
	display:block;
	color:white;
	white-space:nowrap;
	text-decoration:none;
	cursor:pointer;
	border:2px solid transparent;
	border-radius:8px;
}
.reflx-menu-content a.current {
	color:white;
	text-shadow:0px -4px 4px rgba(255, 255, 255, 0.8), 0px 4px 4px rgba(255, 255, 255, 0.8);
	background-color:rgba(236, 46, 0, 0.3);
	pointer-events:none;
	cursor:not-allowed;
}

.reflx-menu-content a:hover,
.reflx-menu-content div.header span.title:hover,
.reflx-menu-content a:focus-visible,
.reflx-menu-content div.headser span.title:focus-visible {
	text-shadow:0px -4px 4px rgba(255, 255, 255, 0.8), 0px 4px 4px rgba(255, 255, 255, 0.8);
	outline:none;
}
.reflx-menu-content div.header {
	margin:8px 0px;
	font-size:20px;
	display:block;
	color:white;
	white-space:nowrap;
	text-decoration:none;
}
.reflx-menu-content div.header span.title {
	cursor:pointer;
}
.reflx-menu-content div.header i {
	-webkit-transform: rotate(0deg);
	transform: rotate(0deg);
	-webkit-transition: -webkit-transform 0.5s;
	transition: -webkit-transform 0.5s;
	transition: transform 0.5s;
	transition: transform 0.5s, -webkit-transform 0.5s;
	margin-left:10px;
}
.reflx-menu-content div.header.open a.submenu:first-of-type {
	margin-top:12px;
}
.reflx-menu-content div.header.open a.submenu:last-of-type {
	margin-bottom:12px;
}
.reflx-menu-content div.header.open i {
	-webkit-transform: rotate(90deg);
	transform: rotate(90deg);
}
.reflx-menu-content div.header a.submenu {
	display:none;
}
.reflx-menu-content div.header.open a.submenu {
	display:block;
	font-size:18px;
	padding-left:24px;
}

.reflx_content {
	position:absolute;
	left:0px;
	top:90px;
	width:calc(100% - 20px);
	padding:0px 10px;
	bottom:0px;
	overflow-y:auto;
	overflow-x:hidden;
	scroll-behavior:smooth;
	background-color:#424242;
	display:flex;
	flex-direction:column;
}
.reflx_navigation {
	float: right;
	margin: 10px;
	padding: 5px;
	vertical-align: middle;
	border: 1px solid #232323;
	border-radius: 8px;
	background-color: #636363;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#636363), to(#2E2E2E));
	background-image: linear-gradient(to bottom, #636363 0%, #2E2E2E 100%);
	font-size:0.8em;
	text-shadow:-1px -1px 2px rgba(0, 0, 0, 0.7), 1px 1px 2px rgba(255, 255, 255, 0.7);
}
.navitem {
	margin:0px 10px;
}
.navitem img {
	vertical-align:text-bottom;
	max-height:16px;
	border:none;
}
.navitem form {
	display:inline;
	margin:-5px 0px;
}
.navitem input {
	margin:-5px 0px;
}
.naviconitem {
	margin:0px 8px;
}
.naviconitem img {
	vertical-align:text-bottom;
	max-height:16px;
	border:none;
}
.navitem.parent {
	display:inline-block;
	position:relative;
	cursor:pointer;
}
.navitem.parent:hover {
	text-decoration:none;
}
.navitem.child {
	position:absolute;
	z-index:300;
	top:140%;
	left:-16px;
	padding:5px 10px 10px 10px;
	background-color: #424242;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#424242), to(#555555));
	background-image: linear-gradient(to bottom, #424242 0%, #555555 100%);
	color:white;
	text-align:left;
	border-left:1px solid black;
	border-right:1px solid black;
	border-bottom:1px solid black;
	-webkit-box-shadow:5px 5px 5px rgba(0, 0, 0, 0.4);
	        box-shadow:5px 5px 5px rgba(0, 0, 0, 0.4);
	border-bottom-left-radius:8px;
	border-bottom-right-radius:8px;
}
.navitem.child a.navitem {
	display:block;
	white-space:nowrap;
	margin-top:6px;
}
.navitem.child img {
	max-height:24px;
	max-width:24px;
	margin-left:20px;
	vertical-align:middle;
}
.carthud {
	margin: -5px 0px;
	padding: 5px 10px;
}

.carthud.disabled {
	background-color:transparent;
	cursor:inherit;
}
.carthud.disabled img {
	opacity: 0.3;
}
.carthud.enabled {
	opacity: 1.0;
	background-color:#AF0007;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#AF0007), to(#6A0006));
	background-image: linear-gradient(to bottom, #AF0007 0%, #6A0006 100%);
	cursor:pointer;
}
.carthud.enabled:hover {
	background-color:#DC000B;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#DC000B), to(#A0000A));
	background-image: linear-gradient(to bottom, #DC000B 0%, #A0000A 100%);
	text-decoration:underline;
}
.carthud.disabled .hideifdisabled {
	display:none;
}
.carthud.enabled .hideifdisabled {
	display:inline;
}
.cartsize {
	margin-left:10px;
}

.sitesearch {
	display:inline-block;
	margin-right:60px;
	margin-left:30px;
}
.sitesearch input {
	width:220px;
	font-size:1em;
}

.reflx-categories-header {
	text-align:center;
	font-size:1.2em;
	font-weight:bold;
}
.reflx-categories {
	margin-top:5px;
	padding-top:20px;
	border-top:2px solid #777777;
	text-align:center;
}
.reflx-roundbutton {
	position:relative;
	display:inline-block; 
	border:2px solid #b7b7b7; 
	border-radius:18px; 
	margin:10px; 
	padding:10px 5px; 
	vertical-align:middle;
	cursor:pointer;
	width:300px;
	height:112px;
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
	text-decoration:none ! important;
	overflow:hidden;
}
.reflx-roundbutton div.vertspacer {
	display:inline-block;
	vertical-align:middle;
	height:100%;
	width:190px;
}
.reflx-roundbutton img {
	height:102px;
	vertical-align:middle;
	-webkit-transition:height 0.5s ease-out;
	transition:height 0.5s ease-out;
	border:none;
}
.reflx-roundbutton span.label, reflx-brand-button span.label {
	display:inline-block;
	text-align:left;
	vertical-align:middle;
	margin-left:10px;
}
.reflx-roundbutton:hover, .reflx-brand-button:hover, .reflx-roundbutton:focus-visible, .reflx-brand-button:focus-visible  {
	text-decoration:none;
	color:white;
	background-color: #424242;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#424242), to(black));
	background-image: linear-gradient(to bottom, #424242 0%, black 100%);
}
.reflx-roundbutton:hover img, .reflx-roundbutton:focus-visible img, .reflx-brand-button:focus-visible img {
	height:116px;
	border:none;
}
.reflx-brand-button {
	color:white;
	background-color:#444444;
	padding:5px 2.5px;
	text-align:center;
	width:calc(50% - 3px);
	height:calc(50% - 3px);
	z-index:3000;	
	position:absolute;
	display:inline-flex;
	align-items:center;
	opacity:0;
	transform:scale(0.25);
	pointer-events:none;
	text-decoration:none ! important;

	transition:opacity 0.5s ease-in, transform 0.5s ease-in;
}
.reflx-brand-button.left1 {
	border-top-left-radius: 18px;
	border-top:2px solid #b7b7b7;
	border-left:2px solid #b7b7b7;
	border-bottom:1px solid #555555;
	border-right:1px solid #555555;
	bottom:50%;
	right:50%;
	transform-origin:right bottom;
}
.reflx-brand-button.left2 {
	border-bottom-left-radius: 18px;
	border-bottom:2px solid #b7b7b7;
	border-left:2px solid #b7b7b7;
	border-top:1px solid #555555;
	border-right:1px solid #555555;
	top:50%;
	right:50%;
	transform-origin:right top;
}
.reflx-brand-button.right1 {
	border-top-right-radius: 18px;
	border-top:2px solid #b7b7b7;
	border-right:2px solid #b7b7b7;
	border-bottom:1px solid #555555;
	border-left:1px solid #555555;
	bottom:50%;
	left:50%;
	transform-origin:left bottom;
}
.reflx-brand-button.right2 {
	border-bottom-right-radius: 18px;
	border-bottom:2px solid #b7b7b7;
	border-right:2px solid #b7b7b7;
	border-top:1px solid #555555;
	border-left:1px solid #555555;
	top:50%;
	left:50%;
	transform-origin:left top;
}
.reflx-brand-button img {
	max-height:48px;
	margin:0px 5px;
}
.reflx-brand-button.shown {
	pointer-events:auto;
	opacity:1;
	transform:scale(1.0);
}
.reflx-brand-button.dimmed.shown {
	pointer-events:none ! important;
	cursor: not-allowed ! important;
}
.reflx-brand-button.dimmed.shown img, 
.reflx-brand-button.dimmed.shown .label {
	opacity:0.5;
}

.reflx-stores {
	margin-top:20px;
	border-top:2px solid #777777;
	padding-top:20px;
	text-align:center;
	font-size:1.2em;
	font-weight:bold;
}
.reflx-stores-list {
	border-top:2px solid #777777;
	padding:0px;
	margin:20px -10px 0px -10px;
	height:108px;
}

div.thumbscroller {
	/*background-color:#484848;*/
	position:relative;
}
div.thumbscrollerprev {
	position:absolute;
	top:0px;
	left:0px;
	height:100%;
	width:36px;
	background-color:rgba(0, 0, 0, 0.5);
	color:white;
	z-index:2000;
	font-size:36px;
	text-align:center;
}
div.thumbscrollernext {
	position:absolute;
	top:0px;
	right:0px;
	height:100%;
	width:36px;
	background-color:rgba(0, 0, 0, 0.5);
	color:white;
	z-index:2000;
	font-size:36px;
	text-align:center;
}
div.thumbscrollernext.active,
div.thumbscrollerprev.active {
	color:#EC2E00;
}
div.thumbscrollerprev i,
div.thumbscrollernext i {
	position:absolute;
	display:inline-block;
	top:calc(50% - 18px);
	left:0px;
	width:100%;
}
div.thumbscrollerinterior {
	position:absolute;
	top:0px;
	left:0px;
	right:0px;
	bottom:0px;
	white-space: nowrap;
	overflow-x: auto;
	overflow-y: hidden;
}

div.storeelement {
	position:relative;
	display:inline-block;
	vertical-align:top;
	margin:4px;
	border:1px solid #777777;
	padding:4px;
	height:78px;
	border-radius:8px;
	text-align:center;
	background-color:white;
}
div.storeelement.noname {
	position:relative;
	display:inline-block;
	vertical-align:top;
	margin:4px;
	border:1px solid #777777;
	padding:20px 4px;
	height:46px;
	border-radius:8px;
	text-align:center;
	background:white;
}
div.storeelement div.storeimg {
	height:48px;
	margin-bottom:4px;
}
div.storeimg img {
	position:relative;
	max-height:48px;
	top:24px;
	-webkit-transform: translateY(-50%);
	    transform: translateY(-50%);
}
div.storeelement span {
	position:relative;
	top:6px;	
	color:black;
	font-size:0.8em;
}

div.reflx-fanpix {
	border-top:2px solid #777777;
	text-align:center;
}
div.reflx-fanpix-list {
	border-top:2px solid #777777;
	padding:0px;
	margin:20px -10px 0px -10px;
	height:200px;
}
div.reflx-fanpix-element {
	border:1px solid black;
	margin:0px 5px;
	padding:5px;
	background-color:white;
	display:inline-block;
}
div.reflx-fanpix-element img {
	max-height:150px;
	max-width:150px;
}
div.reflx-fanpix-notes {
	border-top:2px solid #777777;
	padding:10px;
	font-size:0.75em;
	font-weight:normal;
	color:#EEEEEE;
	text-align:center;
}

div.reflx-notice {
	border:2px solid #FF1D00;
	border-radius:1rem;
	padding:1rem;
	color: #FF1D00;
	margin: 1rem 0px;
}

div.breadcrumbs {
	padding:20px 60px;
	border-bottom:2px solid #5E5E5E;
}

.product-selector {
	flex: 1 0 auto;
}

.product-image-gallery {
	float:left;
	position:relative;
	margin:36px 0px 0px 0px;
	border:2px solid #b7b7b7;
	border-radius:12px;
	z-index:99;
	background-color:#424242;
	white-space:nowrap;
	text-align:left;
	max-width:460px;
	-webkit-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	user-select:none;
}
/*.product-image-gallery.no-thumbs {
}*/
.product-image-header, .product-navigator-header {
	padding:10px;
	text-align:left;
	border-bottom:2px solid #B7B7B7;
	border-top-left-radius:12px;
	border-top-right-radius:12px;
	overflow:hidden;
}
.product-image-header + .product-gallery-image {
	border-radius:0px;
}
.product-image-header + .product-gallery-image > img {
	border-radius:0px;
}
.product-image-header a, .product-navigator-header a {
	display:inline-block;
	height:100%;
	border: 1px solid #B7B7B7;
	border-radius:6px;
	padding:5px 20px;
	cursor:pointer;
	margin-right:20px;
}
.product-image-header a:hover, .product-navigator-header a:hover {
	color: #FF1D00;
	text-decoration:underline;
}
.product-image-navigator {
	position:absolute;
	top:-2px;
	left:-2px;
	right:-2px;
	bottom:-2px;
	border-radius:12px;
	border:2px solid #b7b7b7;
	z-index:100;
	overflow-x:hidden;
	overflow-y:auto;
	background-color:#333333;
	text-align:center;
	white-space:normal;
	max-width: 460px;
}
.product-overview-header {
	text-align:center;
	font-size:0.9em;
	font-weight:bold;
	border-bottom:1px solid rgba(255, 255, 255, 0.3);
	border-top:1px solid rgba(255, 255, 255, 0.3);
	color:white;
	padding:5px 0px;
	margin:10px 0px;
}
.product-category-image {
	position:relative;
	text-align:center;
	font-size:0.75em;
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
	margin:8px 8px 24px 8px;
	display:inline-block;
	vertical-align:top;
}
.product-category-image img {
	border-radius:6px;
	border: 1px solid #B7B7B7;	
	max-width:200px;
	max-height:200px;
	margin-bottom:5px;
	padding:4px;
	background-color:white;
}
.product-category-image img:hover {
	outline: 5px solid red;
}
.product-overview-image {
	position:relative;
	padding:4px;
	text-align:center;
	font-size:0.75em;
	border-radius:6px;
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
	margin:5px;
	border: 1px solid #B7B7B7;
	display:inline-block;	
}
.product-overview-image:hover {
	background-color:rgba(0, 0, 0, 0.4);
}
.product-overview-image img {
	max-width:168px;
	max-height:168px;
	margin-bottom:5px;
}

.product-gallery-image {
	display:inline-block;
	vertical-align:top;
	width:calc(460px * var(--sizeratio));
	height:calc(460px * var(--sizeratio));
	line-height:calc(460px * var(--sizeratio));
	max-width:460px;
	padding:0px;
	margin:0px auto;
	border-top-left-radius:10px;
	border-top-right-radius:10px;
	text-align:center;
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
	position:relative;
	background-color:black;
}
.product-gallery-image .image-overlay {
	position:absolute;
	top:0px;
	left:0px;
	width:calc(460px * var(--sizeratio));
	height:calc(460px * var(--sizeratio));
	line-height:calc(460px * var(--sizeratio));
	max-width:460px;
	padding:0px;
	margin:0px auto;
	text-align:center;
	z-index:601;
}
.product-gallery-image img {
	max-width:calc(460px * var(--sizeratio));
	max-height:calc(460px * var(--sizeratio));
	vertical-align:middle;
	border-top-left-radius:10px;
	border-top-right-radius:10px;
}
.product-gallery-image img.frontside {
	-webkit-backface-visibility: hidden;
	        backface-visibility: hidden;
	-webkit-transform: rotateY(0deg);
	        transform: rotateY(0deg);
	z-index: 500;
	-webkit-transition: -webkit-transform 1s;
	        transition:-webkit-transform 1s;
	        transition:transform 1s;
	        transition: transform 1s, -webkit-transform 1s;
}
.product-gallery-image img.frontside.flip {
	z-index:200;
	-webkit-transform:rotateY(180deg);
	        transform:rotateY(180deg);
}
.product-gallery-image img.backside {
	z-index:200;
	-webkit-backface-visibility: hidden;
	        backface-visibility: hidden;
	-webkit-transform:rotateY(180deg);
	        transform:rotateY(180deg);
	-webkit-transition: -webkit-transform 1s;
	        transition:-webkit-transform 1s;
	        transition:transform 1s;
	        transition: transform 1s, -webkit-transform 1s;
}
.product-gallery-image img.backside.flip {
	-webkit-transform:rotateY(0deg);
	        transform:rotateY(0deg);
	z-index:500;
}
.product-gallery-image a.frontbutton {
	position:absolute; 
	bottom:6px; 
	left:10px; 
	height:auto; 
	width:auto;
	line-height:normal;
	z-index:900;
}
.product-gallery-image a.backbutton {
	position:absolute;
	bottom:6px;
	right:10px;
	height:auto;
	width:auto;
	line-height:normal;
	z-index:900;
}
.product-gallery-image a {
	border: 1px solid #B7B7B7;
	border-radius:6px;
	padding:5px 20px;
	cursor:pointer;
}
.product-gallery-image a.selected {
	background-color: #39CE00;
	background-image: -webkit-gradient(linear, left bottom, left top, from(#30AD00), to(#39CE00));
	background-image: linear-gradient(to top, #30AD00 0%, #39CE00 100%);
	color:white ! important;
}
.product-gallery-image .gallerycaption {
	position:absolute;
	bottom:-6px;
	left:0px;
	right:0px;
	line-height:normal ! important;
	height:auto;
	padding:6px 0px;
	background-color:black;
	text-align:center;
	color:white;
	text-shadow:-1px -1px 2px rgba(0, 0, 0, 0.7), 1px 1px 2px rgba(255, 255, 255, 0.7);
}
.product-gallery-image .product-gallery-spinner {
	position:absolute;
	height:24px;
	width:24px;
	font-size:24px;
	background-color:rgba(0, 0, 0, 0.6);
	color:white;
	line-height:24px;
	border-radius:8px;
	top:calc(50% - 12px);
	left:calc(50% - 12px);
	text-align:center;
	padding:8px;
}

.product-gallery-colorpicker {
	height:34px;
	font-size:0.7em;
	/*background-color:#525252;*/
	border-top:2px solid #b7b7b7;
}
.coloritem {
	height:100%;
	width:40px;
	text-align:center;
	vertical-align:bottom;
	cursor:pointer;
}
.coloritem.selected {
	background-color: #EEEEEE;
	background-image: -webkit-gradient(linear, left bottom, left top, from(#555555), to(#ffffff));
	background-image: linear-gradient(to top, #555555 0%, #ffffff 100%);
}
.colorswatch {
	display:inline-block;
	width:var(--colorswatchsize);
	height:var(--colorswatchsize);
	border:1px solid #555555;
	margin:2px 8px -2px 8px;
	background-size:cover;
}
.smallselect {
	max-width:40%;
}
.product-gallery-thumbs {
	position:relative;
	height:24px;
	width:100%;
	text-align:center;
	padding:4px 0px;
	margin:0px;
	background-color:rgba(0, 0, 0, 0.2);
	overflow:hidden;
	line-height:26px;
}
.product-gallery-underthumbs {
	font-size:11px; 
	font-weight:normal; 
	font-style:italic; 
	color:rgba(255, 255, 255, 0.6); 
	display:flex;
	flex-flow:row nowrap;
	justify-content:space-between;
	align-items:center;
	padding:10px 0px 10px 0px; 

	& .left {
		padding-left:8px;
		flex:1 0 auto;
		text-align:left;
	}
	& .right {
		padding-right:8px;
		flex:1 1 auto;
		text-align:right;
	}

	& .ui-widget {
		font-size:11px;
	}
	& .ui-selectmenu-button {
		max-width:50%;
	}
}
.product-gallery-thumbs div.thumbcarousel {
	width:100%;
	height:100%;
}
.product-gallery-thumbs div.thumbimg {
	user-select:none;
	display:inline-block;
	height:8px;
	width:8px;
	margin:0px 5px;
	background-color:rgba(255, 255, 255, 0.6);
	border-radius:50%;
	line-height:24px;
	cursor:pointer;
	vertical-align:middle;
}
.product-gallery-thumbs div.thumbimg img {
	display:none;
}
.product-gallery-thumbs div.thumbimg.selected {
	background-color: #FFFF00;
}
.gallery-prev {
	position:absolute;
	top:5px;
	left:5px;
	color:white;
	background-color:transparent;
	font-size:20px;
	z-index:99;
	opacity:0.3;
	-webkit-transition:opacity 0.25s linear;
	transition:opacity 0.25s linear;
	cursor:pointer;
}
.gallery-next {
	position:absolute;
	top:5px;
	right:5px;
	color:white;
	background-color:transparent;
	font-size:20px;
	z-index:99;
	opacity:0.3;
	-webkit-transition:opacity 0.25s linear;
	transition:opacity 0.25s linear;
	cursor:pointer;
}
.gallery-prev:hover {
	opacity:0.9;
}
.gallery-next:hover {
	opacity:0.9;
}
.gallery-prev:active,
.gallery-next:active {
	color: #FFFF00;
}

.product-overview-chooser {
	padding:20px 0px 10px 480px;
	position:relative;
}
.product-overview-chooser .chooser-top-info {
	border-top:2px solid #b7b7b7;
	border-left:2px solid #b7b7b7;
	border-right:2px solid #b7b7b7;
	border-top-left-radius:12px;
	border-top-right-radius:12px;
	padding:10px 5px 5px 5px;
}
.product-overview-chooser .chooser-sub-top {
	background-color:#323232;
	border-top:1px solid #555555 !important;
	border-bottom:none;
	padding:10px 5px 5px 5px;
}
.product-overview-chooser .chooser-mid-info {
	border-top:none;
	border-left:2px solid #b7b7b7;
	border-right:2px solid #b7b7b7;
	border-bottom:none;
	padding:5px;
}
.product-overview-chooser .chooser-sub-mid {
	background-color:#323232;
	border-top:none;
	border-bottom:none;
	padding:5px;
}
.product-overview-chooser .chooser-bottom-info {
	border-bottom:2px solid #b7b7b7;
	border-left:2px solid #b7b7b7;
	border-right:2px solid #b7b7b7;
	border-bottom-left-radius:12px;
	border-bottom-right-radius:12px;
	padding:5px 5px 10px 5px;
}
.product-overview-chooser .chooser-sub-bottom {
	background-color:#323232;
	border-top:none;
	border-bottom:1px solid #555555 ! important;
	padding:5px 5px 10px 5px;
}
.product-overview-chooser .chooser-title {
	font-weight:bold;
	font-size:1.5em;
	padding:10px 0px;
}
.chooser-title img {
	max-height:28px;
	max-width:28px;
	vertical-align:middle;
	margin-right:8px;
}
.product-overview-chooser .chooser-price {
	font-size:1.2em;
	font-weight:bold;
	display:inline-block;
	vertical-align: middle;
	margin:10px 0px;
}
.product-overview-chooser .chooser-price-extra {
	margin-left:10px;
	font-size:0.9em;
	font-weight:normal;
	vertical-align: middle;
}
.product-overview-chooser .chooser-label {
	margin:15px 10px 5px 10px;
	display:inline-block;
	width:200px;
	vertical-align:middle;
}
.ui-accordion .ui-accordion-content {
    padding: 0px 1.5em;
}
.ui-accordion-content .chooser-label {
	vertical-align:top;
	margin-top:20px;
	width:180px;
}
.product-overview-chooser input,
.product-overview-chooser .chooser-input,
.product-overview-chooser select {
	display:inline-block;
	margin:10px 0px;
	vertical-align:middle;
	width:380px;
}
.ui-accordion-content .chooser-input, .bootstrap-tagsinput {
	width:340px;
	vertical-align:top;
	
}

.bootstrap-tagsinput {
    background-color:#222222;
    border: 1px solid #555555;
    border-radius:1px;
    padding:2px;
}
.bootstrap-tagsinput:focus-within {
    outline: -webkit-focus-ring-color auto 5px;
}
.bootstrap-tagsinput {
	line-height:1.3;
}
.bootstrap-tagsinput > input[type='text'] {
    border: none;
    outline: none;
    background-color: transparent;
    padding: 0;
    margin: 0;
    width: auto !important;
    max-width: inherit;
	color:#EEEEEE;
}
.bootstrap-tagsinput > input[type='text']:focus {
    border: none;
}
.bootstrap-tagsinput .tag {
    color: white;
    background-color:#666666;
    border-radius:8px;
	white-space:nowrap;
    padding:0px 4px;
	border:1px solid #BBBBBB;
}
.bootstrap-tagsinput [data-role="remove"] {
    margin-left: 8px;
    cursor: pointer;
    position:relative;
    top:1px;
}
.bootstrap-tagsinput .tag [data-role="remove"]:after {
    content: url("../images/closebutton.png");
    padding: 0px 0px 0px 10px;
    font-size:smaller;
	text-shadow: -1px -1px 0px rgba(0, 0, 0, 0.4), 1px 1px 0px rgba(255, 255, 255, 0.4);
}
.bootstrap-tagsinput .tag:hover {
    background-image:-webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.15)), to(rgba(0, 0, 0, 0.27)));
    background-image:linear-gradient(to bottom, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.27));
}
.bootstrap-tagsinput .tag:hover:active {
    background-image:-webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.30)), to(rgba(0, 0, 0, 0.42)));
    background-image:linear-gradient(to bottom, rgba(0, 0, 0, 0.30), rgba(0, 0, 0, 0.42));
}

.product-overview-chooser .chooser-description {
	margin:30px 5px 0px 5px;
	float:left;
	width:54%;
	font-size:0.85em;
	font-weight:lighter;
	line-height:1.2;
}
.product-overview-chooser .chooser-features {
	margin:30px 5px 0px 5px;
	float:left;
	width:42%;
	font-size:0.85em;
	font-weight:lighter;
	line-height:1.2;
}
.product-overview-chooser .chooser-features li {
	margin-bottom:5px;
}
.product-overview-chooser .chooser-subtitle {
	font-weight:bold;
	font-size:1.1em;
	padding-bottom:5px;
	margin-bottom:10px;
	text-align:left;
	/*border-bottom:1px solid #FF1D00;*/
	border-bottom:1px solid #777777;
}
.product-overview-chooser .chooser-callout {
	margin:30px 20px 20px 20px;
	border:1px solid #B7B7B7;
	background-color: #BB2714;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#FF1D00), to(#BB2714));
	background-image: linear-gradient(to bottom, #FF1D00 0%, #BB2714 100%);
	padding:10px;
	text-align:center;
	border-radius:8px;
	color:white;
}
.product-overview-chooser .chooser-callout a {
	text-decoration:none;
}
.product-overview-chooser .chooser-callout a:hover {
	text-decoration:none;
	color:white;
}

.chooser-bottom-note-right {
	clear:both; 
	padding:20px 0px; 
	text-align:right; 
	font-size:0.80em; 
	color:#999999;
}


#zoomingbikeimage {
	-webkit-transition:-webkit-transform 0.5s;
	transition:-webkit-transform 0.5s;
	transition:transform 0.5s;
	transition:transform 0.5s, -webkit-transform 0.5s;
	cursor: -webkit-zoom-in;
	cursor: zoom-in;

	&.thick {
		background-image: url("../images/bike_thickimg_bk_behind.png");
		background-size: 100% 100%;

		& .zoomingbike-image {
			mask-image:url("../images/bike_thickimg_bk_mask.png");
			mask-size:100% 100%;
			background-color:#888888;
			position:absolute;
			top:0px;
			left:0px;
			height:100%;
			width:100%;
		}
		& .zoomingbike-bevel {
			background-image:url("../images/bike_thickimg_bk_bevel.png");
			background-size: 100% 100%; 
			position:absolute;
			top:0px;
			left:0px;
			height:100%;
			width:100%;
		}

		& #toptubesample, & #toptubeclone {
			position:absolute;
			top:calc(227px * var(--sizeratio));
			left:calc(102px * var(--sizeratio));
			width:calc(256px * var(--sizeratio));
			height:calc(26px * var(--sizeratio));
			line-height:calc(26px * var(--sizeratio));
			font-size:calc((26px * var(--sizeratio)) + var(--framefontsizeoffset));
			color:#F80013;
			text-align:center;
			text-overflow:ellipsis;
			overflow:hidden;
			z-index:600;
			-webkit-clip-path:border-box;
			clip-path:border-box;
			-webkit-transform-origin:0px 0px;
					transform-origin:0px 0px;
			-webkit-transform: rotate(-20.2deg) translateY(var(--framebaselineoffset));
					transform: rotate(-20.2deg) translateY(var(--framebaselineoffset));
		}
		& #downtubesample, & #downtubeclone {
			position:absolute;
			top:calc(372px * var(--sizeratio));
			left:calc(161px * var(--sizeratio));
			width:calc(275px * var(--sizeratio));
			height:calc(28px * var(--sizeratio));
			line-height:calc(28px * var(--sizeratio));
			font-size:calc((26px * var(--sizeratio)) + var(--framefontsizeoffset));
			color:#F80013;
			text-align:center;
			text-overflow:ellipsis;
			overflow:hidden;
			z-index:600;
			-webkit-clip-path:border-box;
			clip-path:border-box;
			-webkit-transform-origin:0px 0px;
					transform-origin:0px 0px;
			-webkit-transform: rotate(-49.9deg) translateY(var(--framebaselineoffset));
					transform: rotate(-49.9deg) translateY(var(--framebaselineoffset));
		}
		& #forksample, & #forkclone {
			position:absolute;
			top:calc(192px * var(--sizeratio));
			left:calc(385px * var(--sizeratio));
			width:calc(159px * var(--sizeratio));
			height:calc(19px * var(--sizeratio));
			line-height:calc(19px * var(--sizeratio));
			font-size:calc((19px * var(--sizeratio)) + var(--forkfontsizeoffset));
			color:#F80013;
			text-align:center;
			text-overflow:ellipsis;
			overflow:hidden;
			z-index:600;
			-webkit-clip-path:border-box;
			clip-path:border-box;
			-webkit-transform-origin:0px 0px;
					transform-origin:0px 0px;
			-webkit-transform: rotate(69.7deg) translateY(var(--forkbaselineoffset));
					transform: rotate(69.7deg) translateY(var(--forkbaselineoffset));
		}
		& #extra1sample, & #extra1clone {
			position:absolute;
			top:calc(25px * var(--sizeratio));
			left:calc(145px * var(--sizeratio));
			width:calc(130px * var(--sizeratio));
			height:calc(20px * var(--sizeratio));
			line-height:calc(20px * var(--sizeratio));
			font-size:calc((20px * var(--sizeratio)) + var(--fontsizeoffset));
			color:#F80013;
			text-align:center;
			text-overflow:ellipsis;
			overflow:hidden;
			z-index:600;
			-webkit-clip-path:border-box;
			clip-path:border-box;
			-webkit-transform-origin:0px 0px;
					transform-origin:0px 0px;
			-webkit-transform: translateY(var(--baselineoffset));
					transform: translateY(var(--baselineoffset));
		}
		& #extra2sample, & #extra2clone {
			position:absolute;
			top:calc(55px * var(--sizeratio));
			left:calc(145px * var(--sizeratio));
			width:calc(130px * var(--sizeratio));
			height:calc(20px * var(--sizeratio));
			line-height:calc(20px * var(--sizeratio));
			font-size:calc((20px * var(--sizeratio)) + var(--fontsizeoffset));
			color:#F80013;
			text-align:center;
			text-overflow:ellipsis;
			overflow:hidden;
			z-index:600;
			-webkit-clip-path:border-box;
			clip-path:border-box;
			-webkit-transform-origin:0px 0px;
					transform-origin:0px 0px;
			-webkit-transform: translateY(var(--baselineoffset));
					transform: translateY(var(--baselineoffset));
		}
		& #extra3sample, & #extra3clone {
			position:absolute;
			top:calc(85px * var(--sizeratio));
			left:calc(145px * var(--sizeratio));
			width:calc(130px * var(--sizeratio));
			height:calc(20px * var(--sizeratio));
			line-height:calc(20px * var(--sizeratio));
			font-size:calc((20px * var(--sizeratio)) + var(--fontsizeoffset));
			color:#F80013;
			text-align:center;
			text-overflow:ellipsis;
			overflow:hidden;
			z-index:600;
			-webkit-clip-path:border-box;
			clip-path:border-box;
			-webkit-transform-origin:0px 0px;
					transform-origin:0px 0px;
			-webkit-transform: translateY(var(--baselineoffset));
					transform: translateY(var(--baselineoffset));
		}
		& #extra4sample, & #extra4clone {
			position:absolute;
			top:calc(115px * var(--sizeratio));
			left:calc(145px * var(--sizeratio));
			width:calc(130px * var(--sizeratio));
			height:calc(20px * var(--sizeratio));
			line-height:calc(20px * var(--sizeratio));
			font-size:calc((20px * var(--sizeratio)) + var(--fontsizeoffset));
			color:#F80013;
			text-align:center;
			text-overflow:ellipsis;
			overflow:hidden;
			z-index:600;
			-webkit-clip-path:border-box;
			clip-path:border-box;
			-webkit-transform-origin:0px 0px;
					transform-origin:0px 0px;
			-webkit-transform: translateY(var(--baselineoffset));
					transform: translateY(var(--baselineoffset));
		}
		& #extra5sample, & #extra5clone {
			position:absolute;
			top:calc(145px * var(--sizeratio));
			left:calc(145px * var(--sizeratio));
			width:calc(130px * var(--sizeratio));
			height:calc(20px * var(--sizeratio));
			line-height:calc(20px * var(--sizeratio));
			font-size:calc((20px * var(--sizeratio)) + var(--fontsizeoffset));
			color:#F80013;
			text-align:center;
			text-overflow:ellipsis;
			overflow:hidden;
			z-index:600;
			-webkit-clip-path:border-box;
			clip-path:border-box;
			-webkit-transform-origin:0px 0px;
					transform-origin:0px 0px;
			-webkit-transform: translateY(var(--baselineoffset));
					transform: translateY(var(--baselineoffset));
		}
		
	}

	&.thin {
		background-image: url("../images/bike_thinimg_bk_behind.png");
		background-size: 100% 100%;

		& .zoomingbike-image {
			mask-image:url("../images/bike_thinimg_bk_mask.png");
			mask-size:100% 100%;
			background-color:#888888;
			position:absolute;
			top:0px;
			left:0px;
			height:100%;
			width:100%;
		}
		& .zoomingbike-bevel {
			background-image:url("../images/bike_thinimg_bk_bevel.png");
			background-size: 100% 100%; 
			position:absolute;
			top:0px;
			left:0px;
			height:100%;
			width:100%;
		}

		& #toptubesample, & #toptubeclone {
			position:absolute;
			top:calc(222px * var(--sizeratio));
			left:calc(111px * var(--sizeratio));
			width:calc(254px * var(--sizeratio));
			height:calc(26px * var(--sizeratio));
			line-height:calc(26px * var(--sizeratio));
			font-size:calc((26px * var(--sizeratio)) + var(--framefontsizeoffset));
			color:#F80013;
			text-align:center;
			text-overflow:ellipsis;
			overflow:hidden;
			z-index:600;
			-webkit-clip-path:border-box;
			clip-path:border-box;
			-webkit-transform-origin:0px 0px;
					transform-origin:0px 0px;
			-webkit-transform: rotate(-13.9deg) translateY(var(--framebaselineoffset));
					transform: rotate(-13.9deg) translateY(var(--framebaselineoffset));
		}
		& #downtubesample, & #downtubeclone {
			position:absolute;
			top:calc(316px * var(--sizeratio));
			left:calc(159px * var(--sizeratio));
			width:calc(238px * var(--sizeratio));
			height:calc(26px * var(--sizeratio));
			line-height:calc(26px * var(--sizeratio));
			font-size:calc((26px * var(--sizeratio)) + var(--framefontsizeoffset));
			color:#F80013;
			text-align:center;
			text-overflow:ellipsis;
			overflow:hidden;
			z-index:600;
			-webkit-clip-path:border-box;
			clip-path:border-box;
			-webkit-transform-origin:0px 0px;
					transform-origin:0px 0px;
			-webkit-transform: rotate(-33.5deg) translateY(var(--framebaselineoffset));
					transform: rotate(-33.5deg) translateY(var(--framebaselineoffset));
		}
		& #forksample, & #forkclone {
			position:absolute;
			top:calc(227px * var(--sizeratio));
			left:calc(391px * var(--sizeratio));
			width:calc(133px * var(--sizeratio));
			height:calc(20px * var(--sizeratio));
			line-height:calc(20px * var(--sizeratio));
			font-size:calc((19px * var(--sizeratio)) + var(--forkfontsizeoffset));
			color:#F80013;
			text-align:center;
			text-overflow:ellipsis;
			overflow:hidden;
			z-index:600;
			-webkit-clip-path:border-box;
			clip-path:border-box;
			-webkit-transform-origin:0px 0px;
					transform-origin:0px 0px;
			-webkit-transform: rotate(75.3deg) translateY(var(--forkbaselineoffset));
					transform: rotate(75.3deg) translateY(var(--forkbaselineoffset));
		}
		& #extra1sample, & #extra1clone {
			/* TODO */
			position:absolute;
			top:calc(25px * var(--sizeratio));
			left:calc(145px * var(--sizeratio));
			width:calc(130px * var(--sizeratio));
			height:calc(20px * var(--sizeratio));
			line-height:calc(20px * var(--sizeratio));
			font-size:calc((20px * var(--sizeratio)) + var(--framefontsizeoffset));
			color:#F80013;
			text-align:center;
			text-overflow:ellipsis;
			overflow:hidden;
			z-index:600;
			-webkit-clip-path:border-box;
			clip-path:border-box;
			-webkit-transform-origin:0px 0px;
					transform-origin:0px 0px;
			-webkit-transform: translateY(var(--framebaselineoffset));
					transform: translateY(var(--framebaselineoffset));
		}
		& #extra2sample, & #extra2clone {
			/* TODO */
			position:absolute;
			top:calc(55px * var(--sizeratio));
			left:calc(145px * var(--sizeratio));
			width:calc(130px * var(--sizeratio));
			height:calc(20px * var(--sizeratio));
			line-height:calc(20px * var(--sizeratio));
			font-size:calc((20px * var(--sizeratio)) + var(--framefontsizeoffset));
			color:#F80013;
			text-align:center;
			text-overflow:ellipsis;
			overflow:hidden;
			z-index:600;
			-webkit-clip-path:border-box;
			clip-path:border-box;
			-webkit-transform-origin:0px 0px;
					transform-origin:0px 0px;
			-webkit-transform: translateY(var(--framebaselineoffset));
					transform: translateY(var(--framebaselineoffset));
		}
		& #extra3sample, & #extra3clone {
			/* TODO */
			position:absolute;
			top:calc(85px * var(--sizeratio));
			left:calc(145px * var(--sizeratio));
			width:calc(130px * var(--sizeratio));
			height:calc(20px * var(--sizeratio));
			line-height:calc(20px * var(--sizeratio));
			font-size:calc((20px * var(--sizeratio)) + var(--framefontsizeoffset));
			color:#F80013;
			text-align:center;
			text-overflow:ellipsis;
			overflow:hidden;
			z-index:600;
			-webkit-clip-path:border-box;
			clip-path:border-box;
			-webkit-transform-origin:0px 0px;
					transform-origin:0px 0px;
			-webkit-transform: translateY(var(--framebaselineoffset));
					transform: translateY(var(--framebaselineoffset));
		}
		& #extra4sample, & #extra4clone {
			position:absolute;
			top:calc(115px * var(--sizeratio));
			left:calc(145px * var(--sizeratio));
			width:calc(130px * var(--sizeratio));
			height:calc(20px * var(--sizeratio));
			line-height:calc(20px * var(--sizeratio));
			font-size:calc((20px * var(--sizeratio)) + var(--fontsizeoffset));
			color:#F80013;
			text-align:center;
			text-overflow:ellipsis;
			overflow:hidden;
			z-index:600;
			-webkit-clip-path:border-box;
			clip-path:border-box;
			-webkit-transform-origin:0px 0px;
					transform-origin:0px 0px;
			-webkit-transform: translateY(var(--baselineoffset));
					transform: translateY(var(--baselineoffset));
		}
		& #extra5sample, & #extra5clone {
			position:absolute;
			top:calc(145px * var(--sizeratio));
			left:calc(145px * var(--sizeratio));
			width:calc(130px * var(--sizeratio));
			height:calc(20px * var(--sizeratio));
			line-height:calc(20px * var(--sizeratio));
			font-size:calc((20px * var(--sizeratio)) + var(--fontsizeoffset));
			color:#F80013;
			text-align:center;
			text-overflow:ellipsis;
			overflow:hidden;
			z-index:600;
			-webkit-clip-path:border-box;
			clip-path:border-box;
			-webkit-transform-origin:0px 0px;
					transform-origin:0px 0px;
			-webkit-transform: translateY(var(--baselineoffset));
					transform: translateY(var(--baselineoffset));
		}
	}
}


#t_tshirt_img {
	width:calc(460px * var(--sizeratio));
	height:calc(241px * var(--sizeratio));
}
#t_front_sample {
	position:absolute;
	top:calc(192px * var(--sizeratio));
	left:calc(72px * var(--sizeratio));
	width:calc(94px * var(--sizeratio));
	height:calc(21px * var(--sizeratio));
	line-height:calc(21px * var(--sizeratio));
	font-size:calc(21px * var(--sizeratio));
	color:#C4C4C4;
	text-align:center;
	text-overflow:ellipsis;
	z-index:600;
	-webkit-transform-origin:0px 0px;
	        transform-origin:0px 0px;
}

#t_back_sample {
	position:absolute;
	top:calc(160px * var(--sizeratio));
	left:calc(297px * var(--sizeratio));
	width:calc(114px * var(--sizeratio));
	height:calc(24px * var(--sizeratio));
	line-height:calc(22px * var(--sizeratio));
	font-size:calc(18px * var(--sizeratio));
	color:#C4C4C4;
	text-align:center;
	text-overflow:ellipsis;
	overflow:hidden;
	z-index:600;
	-webkit-clip-path:content-box;
	clip-path:content-box;
	-webkit-transform-origin:0px 0px;
	        transform-origin:0px 0px;
}

#h_hoodie_img {
	width: calc(460px * var(--sizeratio));
	height:calc(460px * var(--sizeratio));
}
#h_front_sample {
	position:absolute;
	top:calc(180px * var(--sizeratio));
	left:calc(86px * var(--sizeratio));
	width:calc(105px * var(--sizeratio));
	height:calc(21px * var(--sizeratio));
	line-height:calc(21px * var(--sizeratio));
	font-size:calc(21px * var(--sizeratio));
	color:#C4C4C4;
	text-align:center;
	text-overflow:ellipsis;
	z-index:600;
	-webkit-transform-origin:0px 0px;
	        transform-origin:0px 0px;
}

#h_back_sample {
	position:absolute;
	top:calc(118px * var(--sizeratio));
	left:calc(275px * var(--sizeratio));
	width:calc(138px * var(--sizeratio));
	height:calc(24px * var(--sizeratio));
	line-height:calc(22px * var(--sizeratio));
	font-size:calc(18px * var(--sizeratio));
	color:#C4C4C4;
	text-align:center;
	text-overflow:ellipsis;
	overflow:hidden;
	z-index:600;
	-webkit-clip-path:content-box;
	clip-path:content-box;
	-webkit-transform-origin:0px 0px;
	        transform-origin:0px 0px;
}



.page-title {
	font-weight: bold;
	font-size: 1.5em;
	margin: 20px 10px;
	text-align: left;
}
.page-title + p {
	padding-bottom:20px;
	margin-bottom:20px;
	/*border-bottom:1px solid #FF1D00;*/
	border-bottom:1px solid #777777;
}

.media-container {
	float:left;
	margin:10px;
	text-align:center;
	padding-bottom:10px;
	height:auto;
	width:auto;
	border-bottom:1px solid #B7B7B7;
	background:black;
}
.media-container > .media-header {
	padding:10px 0px;
	background-color:black;
}

.resources_item {
	margin: 20px;
	padding: 20px;
	border-bottom: 1px solid #B7B7B7;
}
.resources_item img {
	float:left;
	vertical-align:top;
	margin-right:20px;
	max-width:100px;
	max-height:100px;
	border:2px solid white;
	background-color:white;
	vertical-align:top;
}


div.media-thumb {
	display:inline-block;
	text-align:left;
	padding:0px;
	background-image: URL("images/filmstrip-bg.png");
	background-repeat: no-repeat;
	background-size: contain;
	width:328px;
	min-height:149px;
	text-align:center;
	margin:10px;
}
div.media-thumb img {
	max-height:141px;
	max-width:256px;
	border:none;
	margin:0px;
	padding:5px 0px;
	cursor:pointer;
}
div.media-description {
	display:inline-block;
	margin:10px;
	text-align:left;
	vertical-align:top;
	width:calc(100% - 400px);
}
.description-header {
	margin-top:1.2em;
	font-weight:bold;
	text-shadow:-1px -1px 2px rgba(0, 0, 0, 0.3), 1px 1px 2px rgba(255, 255, 255, 0.3);
}


.gear-anim-header {
    margin:20px;
    text-align:center;
    font-size:3em;
    font-weight:bold;
    color:#FF1D00;
    -webkit-animation: marquee 5s infinite;
    animation: marquee 5s infinite;
}
.gear-lead-info {
    border-top:2px solid #b7b7b7;
    padding:20px;
}
.gear-grid {
    border-top:2px solid #b7b7b7;
    padding:10px;
    text-align:center;
}
.gear-grid-item {
    margin:10px;
    display:inline-block;
	position:relative;
    width:200px;
    height:200px;
    border-radius: 20px;
    border:4px solid #333333;
    text-align:center;
    background-color:white;
    color:#222222;
    font-size:1.2em;
    cursor:pointer;
}
.gear-grid-item img {
    max-width:160px;
    max-height:160px;
	position:absolute;
	top:4px;
	left:34px;
	border:none;
}
.gear-grid-item img.frontside {
	-webkit-backface-visibility: hidden;
	        backface-visibility: hidden;
	-webkit-transform:rotateY(0deg);
	        transform:rotateY(0deg);
	-webkit-transition: -webkit-transform 1s;
	        transition:-webkit-transform 1s;
	        transition:transform 1s;
	        transition: transform 1s, -webkit-transform 1s;
}
.gear-grid-item img.frontside.flip {
	-webkit-transform:rotateY(180deg);
	        transform:rotateY(180deg);
}
.gear-grid-item img.backside {
	-webkit-backface-visibility: hidden;
	        backface-visibility: hidden;
	-webkit-transform:rotateY(180deg);
	        transform:rotateY(180deg);
	-webkit-transition: -webkit-transform 1s;
	        transition:-webkit-transform 1s;
	        transition:transform 1s;
	        transition: transform 1s, -webkit-transform 1s;
}
.gear-grid-item img.backside.flip {
	-webkit-transform:rotateY(0deg);
	        transform:rotateY(0deg);
}
.gear-grid-item-name {
	position:absolute;
	bottom:4px;
	left:0px;
	right:0px;
	height:auto;
	text-align:center;
}
.gear-grid-popup {
	position:relative;
	height:516px;
	width:488px;
    color:#222222;
    font-size:1.2em;
}
.gear-grid-popup img {
	max-width:480px;
	max-height:480px;
	position:absolute;
	top:4px;
	left: 64px;
	border:none;
}


@-webkit-keyframes marquee {
    0% {-webkit-transform: scale(1.0);transform: scale(1.0);}
    50% {-webkit-transform: scale(1.1);transform: scale(1.1);}
    100% {-webkit-transform: scale(1.0);transform: scale(1.0);}
}
@keyframes marquee {
    0% {-webkit-transform: scale(1.0);transform: scale(1.0);}
    50% {-webkit-transform: scale(1.1);transform: scale(1.1);}
    100% {-webkit-transform: scale(1.0);transform: scale(1.0);}
}


/* Instagram Styles */
.ig-b- { display: inline-block; }
.ig-b- img { visibility: hidden; }
.ig-b-:hover { background-position: 0 -60px; }
.ig-b-:active { background-position: 0 -120px; }
.ig-b-48 { width: 48px; height: 48px; background: URL(http://badges.instagram.com/static/images/ig-badge-sprite-48.png) no-repeat 0 0; }

@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
	.ig-b-48 { background-image: URL(http://badges.instagram.com/static/images/ig-badge-sprite-48@2x.png); background-size: 60px 178px; }
}

.rightcell {
	padding:4px 20px;
	text-align:right;
}
.leftcell {
	width:120px;
	padding:4px 20px;
	text-align:left;
}

.ui-effects-transfer {
	background-color:rgba(255, 255, 255, 0.3);
	z-index:10000;
}

.reflx-tooltip {
	padding:20px;
	border:1px solid #666666 !important;
	border-radius:8px !important;
	background-color:#F4F4F4 !important;
	background-image:none !important;
	color:#666666 !important;
}


#cart_overlay {
	position:fixed;
	top:0px;
	left:0px;
	right:0px;
	bottom:0px;
	background-color:rgba(0, 0, 0, 0.1);
	z-index:8900;
	-webkit-backdrop-filter: blur(5px);
	backdrop-filter: blur(5px);
}

div#reflx_cart {
	font-size:14px;
	max-width:620px;
}
div#reflx_cart > .cart_header {
	padding:5px 0px;
	width:100%;
	border-bottom: 1px solid #b7b7b7;
	text-shadow:-1px -1px 2px rgba(0, 0, 0, 0.7), 1px 1px 2px rgba(255, 255, 255, 0.7);
	text-align:left;
	color: #F2F2F2;
}

div#reflx_cart > .cart_footer {
	padding:5px 0px;
	width:100%;
	border-top: 1px solid #b7b7b7;
	text-align:left;
	color: #F2F2F2;
	position:relative;

	& .discount-button {
		position:absolute;
		top:4px;
		right:4px;
		height:auto;
		width:auto;
		padding:4px 8px;
		font-size:12px;
		color:#F2F2F2;
		background-color:#444444;
		border: 1px solid #b7b7b7;
		border-radius:8px;
		cursor:pointer;
		&.cart_success {
			background-color:#419514;
		}
		&.cart_fail {
			background-color:#B70D0D;
		}
		& svg {
			height:14px;
			width:14px;
			fill:#F2F2F2;
			margin-right:5px;
            pointer-events: none;
		}

		& .discount-entry {
			position:absolute;
			right:calc(100% + 6px);
			top:50%;
			transform:translateY(-50%);
			display:none;
			opacity:0;
			transition:opacity 0.4s ease-out;
			padding:4px;
			background-color:#444444;
			border: 1px solid #b7b7b7;
			border-radius:8px;
			box-shadow:2px 2px 4px rgba(0, 0, 0, 0.4);
			z-index:9000;
			white-space:nowrap;

			&::after {
				content:"";
				position:absolute;
				height:0px;
				width:0px;
				z-index:9001;
				left:calc(100% + 1px);
				top: calc(50% - 5px);
				border-width:5px;
				border-style:solid;
				border-top-color:transparent;
				border-left-color:#B7B7B7;
				border-right-color:transparent;
				border-bottom-color:transparent;
			}
		}
	}
	& .discount-button:hover,
	& .discount-button:active {
		background-color:#556666;
		&.cart_success {
			background-color:#57C81B
		}
		&.cart_fail {
			background-color:#E51010;
		}
	}
}

div#reflx_cart > .cart_header > .cart_name {
	margin-left:5px;
	font-weight:bold;
	font-size:1.5em;
}

div#reflx_cart > .cart_header > .cart_close {
	float:right;
	cursor:pointer;
	margin-right:5px;
}
div#reflx_cart > .cart_header > .cart_close > img {
	vertical-align:middle;
	border:none;
}

div#reflx_cart table.cart_table {
	font-size:12px;
	width:100%;
	border:none;
	border-spacing:0px;
}

div#reflx_cart table.cart_table th {
	font-weight:bold;
	border-bottom: 1px solid #b7b7b7;
	padding:5px;
	background-color:#222222;
	color: #F2F2F2;
}

div#reflx_cart table.cart_table td {
	color:#F2F2F2;
	padding:5px;
}

div#reflx_cart table.cart_table tbody td {
	border-top:1px solid rgba(255, 255, 255, 0.3);
}
div#reflx_cart table.cart_table .desccell {
	vertical-align:top;
	text-align:left;
	padding-left:15px;
	text-indent:-15px;
	white-space:normal;
	word-break:break-all;
}
div#reflx_cart table.cart_table .desccell p {
	margin:3px;
}

div#reflx_cart table.cart_table .valcell {
	vertical-align:top;
	text-align:right;
	width:10%;
	white-space:nowrap;
}

.deleteimg {
	max-height:24px;
	max-width:24px;
	cursor:pointer;
}
.editimg {
	max-height:24px;
	max-width:24px;
	cursor:pointer;
}

div#reflx_cart table.cart_table .tinycell {
	width:24px;
	text-align:center;
	vertical-align:top;
}

div#reflx_cart table.cart_table tfoot td {
	background-color:#222222;
	color:#F2F2F2;
}

div#reflx_cart table.cart_table tfoot tr:first-of-type td {
	border-top:1px solid rgba(255, 255, 255, 0.3);
}

div#reflx_cart table.cart_table tfoot label {
	display:inline-block;
	margin-left:8px;
}

div#reflx_cart > .cart_footer .cart_footerline {
	padding:5px 10px;
	text-align:left;
}

div#reflx_cart > .cart_footer .cart_footerbuttons {
	padding:5px 10px;
	display:flex;
	justify-content:space-between;
	align-items:center;
	justify-items:center;

	& .explain {
		font-size:0.75rem;
		color:#CCCCCC;
	}
}

div#reflx_cart > .cart_footer #cart_checkout {
	font-weight:bold;
}

div#reflx_cart > .cart_footer .cart_couponlabel,
div#reflx_cart > .cart_footer .cart_footerlabel{
	margin-left:5px;
	font-weight:bold;
}
div#reflx_cart > .cart_footer .cart_couponwrapper,
div#reflx_cart > .cart_footer .cart_footerwrapper{
	position:relative;
	display:inline-block;
	margin-left:5px;
}
div#reflx_cart > .cart_footer #cart_coupon {
	margin:0px;
	padding:5px 5px;
	width:13em;
}

div#reflx_cart > .cart_footer #cart_couponvalidate {
    margin-left: -1px;
    padding:3px 8px;
}

div#reflx_cart > .cart_footer .cart_footernote {
	padding:10px 20px;
	text-align:center;
	font-size:1rem;
	font-weight:bold;
}

input.cart_success {
	background: #F0FEF0 url("images/tick.png") right no-repeat;
}

input.cart_fail {
	background: #FFF0F0 url("images/cross.png") right no-repeat;
}

#edit_overlay {
	position:fixed;
	top:0px;
	left:0px;
	right:0px;
	bottom:0px;
	background-color:rgba(0, 0, 0, 0.1);
	z-index:9499;
	-webkit-backdrop-filter: blur(5px);
	backdrop-filter: blur(5px);
}
.edit-wrapper {
	position:absolute;
	top:50%;
	height:0px;
	max-height:calc(100% - 32px);
	left:10px;
	width:calc(100% - 24px);
	z-index:9500;
	border:2px solid #b7b7b7;
	border-radius: 12px;
	transform:translateY(-50%);
	transition: height 0.25s ease-in-out;
	box-sizing:border-box;
}
#edit_iframe {
	height:100%;
	width:100%;
	border-radius:12px;
}
#edit_close {
	position:absolute;
	top:-10px;
	right:-10px;
	z-index:9501;
	cursor:pointer;
}



div.riders-header {
	position:relative;
	margin-top:30px;
	margin-bottom:30px;
	font-size:32px;
}

div.riders-callout {
	position:absolute;
	top:-5px;
	right:0px;
	height:auto;
	width:auto;
	border:1px solid #B7B7B7;
	background-color: #BB2714;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#FF1D00), to(#BB2714));
	background-image: linear-gradient(to bottom, #FF1D00 0%, #BB2714 100%);
	padding:8px;
	text-align:center;
	border-radius:8px;
	color:white;
	font-size:12px;
}
div.riders-callout a {
	text-decoration:none;
}
div.riders-callout a:hover {
	text-decoration:none;
	color:white;
}


div.riders_picbar{
	margin:10px auto 10px auto;
	text-align:center;
	white-space:nowrap;
}

div.riders_picbar div.rider {
	display:inline-block;
	margin:0px;
	padding:0px;
	text-align:center;
	vertical-align:bottom;
}
div.rider a {
	display:block;
	margin-top:10px;
}
div.rider div.rider3d {
    perspective:500px;
	perspective-origin:center;
	transform-style: preserve-3d;
	transform-origin:bottom center;
	position:relative;
	height:200px;
	width:150px;
	cursor:pointer;
}
img.riderimg {
	position:absolute;
	top:0px;
	left:50%;
	transform:translateX(-50%);
	max-height:200px;
	transform-style: preserve-3d;
}
img.front {
	translate:0px 0px 0px;
	filter:brightness(100%);
	z-index:0;
}
img.mid {
	translate:0px 0px -8px;
	filter:brightness(80%);
}
img.back {
	translate: 0px 0px -16px;
	filter:brightness(50%);
}

.riderspin {
	animation: riderspin 2s linear 5;
}

@keyframes riderspin {
    0% {transform: rotateY(0deg);}
	5% {transform: rotateY(9deg);}
	20%  {transform: rotateY(81deg);}
	25% {transform: rotateY(90deg);}
	30% {transform: rotateY(99deg);}
	45% {transform: rotateY(171deg);}
    50% {transform: rotateY(180deg);}
    55% {transform: rotateY(189deg);}
	70% {transform: rotateY(261deg);}
	75% {transform: rotateY(270deg);}
	80% {transform: rotateY(279deg);}
	95% {transform: rotateY(351deg);}
    100% {transform: rotateY(360deg);}
}

.spin {
	animation: spin 2s linear infinite;
}

@keyframes spin {
	0% { rotate: 0deg;}
	100% { rotate: 360deg; }
}

iframe.riders-insta {
	position:absolute;
	top:360px;
	left:0px;
	bottom:0px;
	right:0px;
	overflow:auto;
}


ul.privacy li {
	margin-top:12px;
}

#fontsampleimg {
	height:0px;
	width:0px;
	position:absolute;
	bottom:0px;
	right:0px;
	z-index:1000;
	-webkit-transition: height 0.5s ease-out, width 0.5s ease-out;
	transition: height 0.5s ease-out, width 0.5s ease-out;
}

#fontsampleimg.open {
	height:233px;
	width:640px;
	border:1px solid black;
	-webkit-box-shadow:2px 2px 4px rgba(0, 0, 0, 0.4);
	        box-shadow:2px 2px 4px rgba(0, 0, 0, 0.4);
}

.infobutton {
	position:relative;
	display:inline-block;
	height:18px;
	width:18px;
	line-height:18px;
	font-size:18px;
	text-align:center;
	font-weight:bold;
	padding:4px;
	border-radius:50%;
	background-color:white;
	color:black;
	cursor:pointer;
}

img.infopopup {
	position:absolute;
	z-index:1000;
	-webkit-box-shadow:2px 2px 4px rgba(0, 0, 0, 0.4);
	        box-shadow:2px 2px 4px rgba(0, 0, 0, 0.4);
}
img.infopopup.right {
	top:0px;
	right:0px;
}
img.infopopup.left {
	top:0px;
	left:0px;
}
img.paypal {
	height:auto;
	max-width:100%;
}

div.ui-dialog[aria-describedby='bgwarning'] {
	max-width:calc(100% - 0.4em);
}


.toggle-btn {
	width: 50px;
	height: 30px;
	margin-left: 10px;
	border-radius: 30px;
	border:1px solid #EEEEEE;
	display: inline-block;
	vertical-align:middle;
	position: relative;
	background-image:none;
	background-color:#AAAAAA;
	-webkit-box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.3);
	box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.3);
	cursor: pointer;
	-webkit-transition: background-color .40s ease-in-out;
	transition: background-color .40s ease-in-out;
	cursor: pointer;
}
.toggle-btn:hover {
	border: 1px solid #0b93d5;
	background-color:#777777;
}
/*.toggle-btn.active {
}*/
.toggle-btn.active .round-btn {
  left: 25px;
}
.toggle-btn .round-btn {
  width: 20px;
  height: 20px;
  background-color: #fff;
  border-radius: 50%;
  display: inline-block;
  position: absolute;
  left: 5px;
  top: 50%;
  margin-top: -10px;
  -webkit-transition: all .30s ease-in-out;
  transition: all .30s ease-in-out;
}
.toggle-btn .cb-value {
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 9;
  cursor: pointer;
}
.toggle-on {
	display:inline-block;
	vertical-align:middle;
	margin-left:10px;
	color:rgba(255, 255, 255, 0.5);
}
.toggle-off {
	display:inline-block;
	vertical-align:middle;
	margin-right:10px;
	color:rgba(255, 255, 255, 0.5);
	white-space:nowrap;
}
.toggle-on.active, .toggle-off.active {
	color:white;
}

.fontimg {
	max-height:40px;
}

.ui-selectmenu-icon.ui-icon {
    margin-top: 4px;
}
.ui-selectmenu-menu {
	max-height:calc(100% - 2px);
	overflow-y: auto;
	overflow-x: hidden;
}

#choosertabs {
	border: none;
	padding: 0px;
	background-image: none;
	background-color: transparent;
}
#choosertabs .ui-widget-header {
	border:none;
	background-image:none;
	background-color:transparent;
}

.warningimg {
	max-height:24px;
	float:right;
	margin-left:12px;
}

.ui-accordion-header-icon {
	margin-right:12px;
}
.docfilled::after {
	content: "\f15c";
	display:inline-block;
	margin-left:20px;
	font-size:20px;
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	color:white;
}
.bikefilled::after {
	content: "\f206";
	display:inline-block;
	margin-left:20px;
	font-size:20px;
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	color:white;
}
.zoominstructions {
	position:absolute;
	top:calc(100% + 8px);
	left:0px;
	width:100%;
	height:auto;
	text-align:center;
	background-color:transparent;
	font-weight: bold;
	pointer-events: none;
	color:white;
}

@-webkit-keyframes zoomfade {
	0% { opacity: 1.0; }
	100% { opacity: 0.0; }
}

@keyframes zoomfade {
	0% { opacity: 1.0; }
	100% { opacity: 0.0; }
}

.valueconfirm {
	display:inline-block;
	color:rgba(255, 255, 255, 0.4);
	margin-left:6px;
	font-size:14px;
}
.valueconfirm:not(:empty)::before {
	content: "(";
}
.valueconfirm:not(:empty)::after {
	content: ")";
}

.explain {
	cursor:pointer;
	border-bottom: 1px dotted white ! important;
	position:relative;
	overflow:visible;
}
.explainbubble {
	position:absolute;
	height:auto;
	width:auto;
	min-width:300px;
	padding:8px;
	border-radius:15px;
	background-color:white;
	color:black;
	z-index:5000;
	font-size:0.85rem;
	font-style:normal;
	font-weight:normal;
	box-shadow:2px 2px 8px rgba(0, 0, 0, 0.4);
	bottom:calc(100% + 10px);
	left:50%;
	transform:translateX(-50%);
	
}
.explainbubble::after {
	content:"";
	position:absolute;
	height:0px;
	width:0px;
	z-index:5001;
	top:calc(100% - 1px);
	left: calc(50% - 10px);
	border-width:10px;
	border-style:solid;
	border-top-color:white;
	border-left-color:transparent;
	border-right-color:transparent;
	border-bottom-color:transparent;
}

#crosssellpopup, [aria-describedby="crosssellpopup"] {
	max-width:500px;
}

.chevroncomplete {
	display:inline-block;
	text-align:center;
	vertical-align:middle;
}
.smallchevroncomplete {
	display:inline-block;
	text-align:center;
	vertical-align:middle;
	-webkit-transform: scale(0.5);
	        transform: scale(0.5);
	width:calc(100px * var(--sizeratio));
}
.tophalf {
	display:block;
	width:calc(200px * var(--sizeratio));
	height:calc(120px * var(--sizeratio));
	margin:calc(70px * var(--sizeratio)) auto;
}
.bottomhalf {
	display:block;
	width:calc(200px * var(--sizeratio));
	height:calc(132px * var(--sizeratio));
	margin:calc(70px * var(--sizeratio)) auto;
	-webkit-transform: rotate(180deg);
	        transform: rotate(180deg);
}
.colorrow {
	display:block;
	white-space:nowrap;
	line-height:calc(22px * var(--sizeratio));
	width:calc(200px * var(--sizeratio));
	height:calc(22px * var(--sizeratio));
	position:relative;
}
.color1up, .color2up, .color3up, .color4up, .color5up, .color6up {
	display:inline-block;
	height:calc(22px * var(--sizeratio));
	width:calc(100px * var(--sizeratio)); 
	-webkit-transform: skewY(-30deg);
	        transform: skewY(-30deg);
	/* border-top:1px solid #DDDDDD; */
	/* border-left:1px solid #DDDDDD; */
	/* border-bottom:1px solid #DDDDDD; */
	margin:0px;
	background-color:azure;
}
.color1dn, .color2dn, .color3dn, .color4dn, .color5dn, .color6dn {
	display:inline-block;
	height:calc(22px * var(--sizeratio));
	width:calc(100px * var(--sizeratio));
	-webkit-transform: skewY(30deg);
	        transform: skewY(30deg);
	/* border-top:1px solid #DDDDDD; */
	/* border-right:1px solid #DDDDDD; */
	/* border-bottom:1px solid #DDDDDD; */
	margin:0px;
	background-color:azure;
}

.dkredoverlay {
	position:fixed;
	top:90px;
	left:0px;
	right:0px;
	bottom:0px;
	background-color:rgba(100, 0, 0, 0.7);
	z-index:1000;
}
.dkredoverlay div {
	position:absolute;
	top:50%;
	left:0px;
	right:0px;
	height:auto;
	-webkit-transform:translateY(-50%);
	transform:translateY(-50%);
	font-size:48px;
	text-align:center;
	color:white;
	text-shadow:2px 2px 4px rgba(0, 0, 0, 0.6);
}


.sprocket_image {
	position:absolute;
	top:0px;
	left:0px;
	height:100%;
	width:100%;
	-webkit-mask-size:contain;
	mask-size:contain;
	mask-position:center center;
	mask-repeat:no-repeat;
}
.hat-bgimage {
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	background-size:contain;
	background-image:url('../images/product/hats/hatbg-black.png');
	background-repeat:no-repeat;
	background-position:center center;
	background-color:white;
	z-index:1;
}
.hat-graphic {
	position:absolute;
	z-index:100;
	top:calc(157px * var(--sizeratio));
	left:calc(115px * var(--sizeratio));
	height:calc(141px * var(--sizeratio));
	width:calc(227px * var(--sizeratio));
	background-position:center center;
	background-size:contain;
	background-repeat:no-repeat;
	background-color:transparent;
}
















/* Mobile Device Responsive Design */
/* NOTE:  all the classes in this media selector rely upon their "normal" */
/* definitions above.  The elements below are only the CHANGES required for */
/* display in mobile devices */
/* Portrait (vertical) design for mobile devices */
@media only screen and (max-width:1135px) and (orientation: portrait) {
	html, body {
		--mobile:true;
	}
	.reflx_window {
		width:100%;
	}
	.reflx-header {
		width:100%;
		height:60px;
	}
	.reflx-header .logo img {
		max-height: 40px;
		margin-top: 10px;
		margin-bottom:10px;
		border:none;
	}

	/* Site wide Menu and Cart */
	#reflx_menu {
		top:10px;
		left:10px;
	}
	#reflx_cart_container {
		top:10px;
		right:10px;
		max-height:calc(100% - 20px - 20px);
	}
	#reflx_cart_counter {
		top:4px;
		right:4px;
	}
	.reflx-menu-container {
		padding:10px;
	}
	.reflx-menu-container.open {
		max-height:calc(100% - 40px);
	}
	.reflx-menu-container.left .reflx-menu-thumb {
		top:10px;
		left:10px;
	}
	.reflx-menu-container.right .reflx-menu-thumb {
		top:10px;
		right:10px;
	}
	.reflx-menu-container .reflx-menu-content {
		top:10px;
		right:10px;
	}
	.reflx-menu-container.left .reflx-menu-content {
		top:10px;
		left:10px;
	}
	.admintitle {
		top:16px;
		left:10px;
	}
	.adminlogout {
		top: 10px;
		right: 10px;

		& svg {
			height:30px;
			width:30px;
			fill:#FFFFFF;
		}
	}

	div.reflx_content {
		top:62px;
	}
	.dkredoverlay {
		top:62px;
	}

	.slideshow_heading {
		font-size:18px;
	}
	.slideshow_subheading {
		font-size:14px;
	}
	.product-image-gallery {
		float:none;
		margin:0px -10px;
		border:none;
		border-top-left-radius:0px;
		border-top-right-radius:0px;
		width:calc(100% + 20px);
		text-align:center;
		max-width:none;
	}
	/*.product-image-gallery.no-thumbs {
	}*/
	.product-gallery-image {
		width:100vw;
		padding:0px;
		margin:0px;
		border-top-left-radius:0px;
		border-top-right-radius:0px;
	}
	.product-gallery-image img {
		border-top-left-radius:0px;
		border-top-right-radius:0px;
	}
	.product-gallery-thumbs {
		width:100vw;
	}
	
	/*.product-gallery-thumbs div.thumbcarousel {
	}
	.product-gallery-thumbs div.thumbimg {
	}
	.product-gallery-thumbs div.thumbimg img {
	}*/
	.product-gallery-underthumbs:not(:empty) {
		border-bottom:1px solid #b7b7b7;
	}
	.product-overview-chooser {
		padding:20px 0px 10px 0px;
		position:relative;
	}
	.product-overview-chooser .chooser-description {
		margin:10px 5px 0px 5px;
		float:none;
		width:100%;
	}
	.product-overview-chooser .chooser-features {
		margin:10px 5px 0px 5px;
		float:none;
		width:100%;
	}
	.product-overview-chooser .chooser-price {
		margin:10px 4px 10px 30px;
	}
	.product-overview-chooser .chooser-price-extra {
		margin-left:0px;
		font-size:0.75em;
	}
	.product-overview-chooser .chooser-label {
		margin:0px 10px 5px 10px;
		padding-top:15px;
		display:block;
		width:auto;
	}
	.product-overview-chooser .chooser-label:empty {
		display:none;
	}
	.ui-accordion .ui-accordion-content {
		padding: 0px .5em;
	}
	.ui-accordion-content .chooser-label {
		vertical-align:top;
		width:auto;
	}
	.ui-selectmenu-button.ui-button {
		margin:4px 10px;
		width:calc(100% - 60px);
		overflow:hidden;
	}
	.product-overview-chooser input, 
	.product-overview-chooser .chooser-input,
	.product-overview-chooser select {
		margin:4px 10px;
		width:calc(100% - 60px);
	}
	.ui-accordion-content input,
	.ui-accordion-content .chooser-input, 
	.bootstrap-tagsinput {
		margin:4px 10px;
		width:calc(100% - 20px);
		vertical-align:top;
	}
	.ui-accordion-content .chooser-input input {
		width:calc(100% - 40px);
	}
	.product-image-navigator {
		border-radius:0px;
		border:none;
		border-bottom:1px solid #b7b7b7;
		max-width: 100vw;
		top:61px;
		left:0px;
		right:0px;
		bottom:0px;
		position:fixed;
	}
	.product-image-header, .product-navigator-header {
		border-top-left-radius:0px;
		border-top-right-radius:0px;
		border-bottom-width:1px;
		padding:5px;
	}
	.product-image-header a, .product-navigator-header a {
		height: auto;
		border: none;
		border-radius:0px;
		padding:4px;
		cursor:pointer;
		margin-right:20px;
		text-decoration:none;
		font-weight:bold;
	}
	.product-image-header a::before {
		content: "<";
		margin-right:4px;
		
	}
	.product-category-image img {
		max-width:300px;
		max-height:300px;
	}
	.product-overview-image {
		padding:2px;
		margin:4px;
	}
	div.media-thumb {
		display:block;
		border-bottom:none;
	}
	div.media-description {
		display:block;
		border-bottom:none;
		width:auto;
	}
	div.riders-callout {
		position:static;
		margin:20px auto;
	}
	div.riders_picbar{
		margin:10px auto 10px auto;
		text-align:center;
	}
	div.riders_picbar div.rider {
		display:block;
		margin:0px;
		padding:0px;
		text-align:center;
	}
	div.rider div.rider3d {
		height:200px;
		width:150px;
	}
	img.riderimg {
		max-height:200px;
	}
	
	.edit-wrapper {
		position:absolute;
		top:50%;
		height:0px;
		max-height:100%;
		left:0px;
		width:100%;
		z-index:9500;
		border:none;
		border-radius: 0px;
		transform:translateY(-50%);
		transition: height 0.25s ease-in-out;
		box-sizing:border-box;
	}
	#edit_iframe {
		height:100%;
		width:100%;
		border-radius:0px;
	}
	#edit_close {
		position:absolute;
		top:0px;
		right:0px;
		z-index:9501;
		cursor:pointer;
	}

}

/* Mobile Device Responsive Design */
/* NOTE:  all the classes in this media selector rely upon their "normal" */
/* definitions above.  The elements below are only the CHANGES required for */
/* display in mobile devices */
/* landscape (horizontal) design for mobile devices */
/* NB: Setting "--mobile" to false will remove the augomagical resizing of the */
/*     product gallery images when the user scrolls the entry form */
@media only screen and (max-width:1135px) and (orientation: landscape) {
/*@media only screen and (max-height:460px) {*/
	html, body {
		--mobile:false;
	}
	.reflx_window {
		width:100%;
	}
	.reflx-header {
		width:100%;
		height:60px;
	}
	.reflx-header .logo img {
		max-height: 40px;
		margin-top: 10px;
		margin-bottom:10px;
		border:none;
	}

	/* Site wide Menu and Cart */
	#reflx_menu {
		top:10px;
		left:10px;
	}
	#reflx_cart_container {
		top:10px;
		right:10px;
		max-height:calc(100% - 20px - 20px);
	}
	#reflx_cart_counter {
		top:4px;
		right:4px;
	}
	.reflx-menu-container {
		padding:10px;
	}
	.reflx-menu-container.open {
		max-height:calc(100% - 40px);
	}
	.reflx-menu-container.left .reflx-menu-thumb {
		top:10px;
		left:10px;
	}
	.reflx-menu-container.right .reflx-menu-thumb {
		top:10px;
		right:10px;
	}
	.reflx-menu-container .reflx-menu-content {
		top:10px;
		right:10px;
	}
	.reflx-menu-container.left .reflx-menu-content {
		top:10px;
		left:10px;
	}
	.admintitle {
		top:16px;
		left:10px;
	}
	.adminlogout {
		top: 10px;
		right: 10px;

		& svg {
			height:30px;
			width:30px;
			fill:#FFFFFF;
		}
	}

	div.reflx-footer {
		display:none;
	}
	div.reflx_content {
		top:62px;
	}
	.dkredoverlay {
		top:62px;
	}
	.slideshow_heading {
		font-size:18px;
	}
	.slideshow_subheading {
		font-size:14px;
	}
	.product-image-gallery {
		position:fixed;
		padding-top:20px;
		margin:0px;
		max-width:calc(460px * var(--sizeratio));
		/*max-height:calc(460px * var(--sizeratio));*/
		border:none;
		border-radius:0px;
 	}
	 .product-gallery-image {
		padding:0px;
		margin:0px;
		border-radius:0px;
	}
	.product-gallery-image img {
		border-radius:0px;
	}
	.product-image-navigator {
		border-radius:0px;
		border:none;
		max-width:calc(460px * var(--sizeratio));
		top:0px;
		left:0px;
		right:0px;
		bottom:0px;
	}
	.product-image-header, .product-navigator-header {
		border-top-left-radius:0px;
		border-top-right-radius:0px;
	}
	.product-overview-image {
		padding:2px;
		margin:4px;
	}	
	.product-overview-chooser .chooser-label {
		margin:15px 10px 5px 10px;
		display:inline-block;
		width:120px;
		vertical-align:middle;
	}
	.ui-accordion .ui-accordion-content {
		padding: 0px .5em;
	}
	.ui-accordion-content .chooser-label {
		vertical-align:top;
		margin-top:20px;
		width:110px;
	}
	.product-overview-chooser input, 
	.product-overview-chooser .chooser-input,
	.product-overview-chooser select {
		width:calc(100% - 150px);
	}
	.product-overview-chooser .chooser-input input,
	.product-overview-chooser .chooser-input select {
		width:calc(100% - 10px);
	}
	.ui-accordion-content input,
	.ui-accordion-content .chooser-input
	{
		width:calc(100% - 180px);
		vertical-align:top;
	}

	div.rider div.rider3d {
		height:180px;
		width:120px;
	}
	img.riderimg {
		max-height:180px;
	}


	.edit-wrapper {
		position:absolute;
		top:50%;
		height:0px;
		max-height:100%;
		left:0px;
		width:100%;
		z-index:9500;
		border:none;
		border-radius: 0px;
		transform:translateY(-50%);
		transition: height 0.25s ease-in-out;
		box-sizing:border-box;
	}
	#edit_iframe {
		height:100%;
		width:100%;
		border-radius:0px;
	}
	#edit_close {
		position:absolute;
		top:0px;
		right:0px;
		z-index:9501;
		cursor:pointer;
	}
	
}

/* ADMINISTRATION PAGES */

/* utility classes, patterened after tailwind.css */
.text-right {
	text-align:right;
}
.text-left {
	text-align:left;
}
.text-center {
	text-align:center;
}
.space-all, .space-top {
	margin-top:1rem;
}
.space-all, .space-bottom {
	margin-bottom:1rem;
}
.space-all, .space-left {
	margin-left:1rem;
}
.space-all, .space-right {
	margin-right:1rem;
}
.font-large {
	font-size:1.5rem;
}
.font-normal {
	font-size:1rem;
}
.font-small {
	font-size:0.85rem;
}

.reflx-admin-header .logo.overspill img {
	transform: scale(500%);
}

.rx-loginform {
	width:50%;
	margin:1rem auto;
	padding:1rem;
	background-color: rgba(66, 66, 66, 0.9);
	border:1px solid var(--sl-color-neutral-500);
	border-radius:8px;
	z-index:600;
	position:relative;

	& label {
		display:inline-block;
		width:calc(30% - 1rem);
		margin-right:1rem;
	}

	& input {
		display:inline-block;
		width:calc(70% - 1rem);
		margin-bottom:1rem;
	}

	& .loginerror {
		border:1px solid #FF1D00;
		padding:0.5rem;
		font-size:1rem;
		font-weight:normal;
		color:#FF1D00;
		margin-bottom:1rem;
	}
}

.adminlogout {
	position:absolute;
	top: 30px;
	right: 30px;
	font-size:36px;
	color:white;
	height:auto;
	width:auto;
	& svg {
		height:36px;
		width:36px;
		fill:#FFFFFF;
	}
	&:hover svg {
		fill: #ffe4e1;
	}
}

.admintitle {
	position:absolute;
	top:32px;
	left:32px;
}

.admingrid {
	margin:1rem;
	display:grid;
	gap:1rem;
	grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
	grid-auto-flow:row;
	align-items:stretch;
	justify-content:center;

	& .admingriditem {
		position:relative;
		padding:1rem 0px;
		text-align:center;
		border:2px solid #b7b7b7; 
		border-radius:1rem; 
		cursor:pointer;
		text-decoration:none ! important;

		& svg {
			display:inline-block;
			vertical-align: middle;
			height:64px;
			width:64px;
			fill:#FFFFFF;
			transition: transform 0.25s ease-in-out;
			transform-origin:center center;
			margin-right:1rem;
		}

		&:hover {
			background-color: #424242;
			background-image: linear-gradient(to bottom, #424242 0%, black 100%);
		
			& svg {
				transform:scale(1.2);
			}
		}

		& span {
			display:inline-block;
			vertical-align:middle;
		}
	}

}

/* For the single-use codes list */
.code-success {
	border:1px solid #00CB00;
	background-color:#F0FEF0;
	color:#00A900;
	padding:1rem;

	& .display-and-copy {
		border:1px solid #00CB00;
		box-shadow:inset 2px 2px 4px rgba(0, 0, 0, 0.2);
		padding:1rem;
		background-color:#F2F2F2;
		color: #333333;
		display:flex;
		flex-flow:row nowrap;
		justify-content:space-between;
		justify-items:stretch;
		align-items:center;

		& .display-codes {
			flex:1 1 calc(100% - 1rem - 80px);
		}
		& .copy-button {
			text-align:center;
			flex:0 0 calc(80px);
			position:relative;
			& a.copied svg {
				fill:#00CB00 ! important;
			}
			& a svg {
				height:24px;
				width:24px;
				fill:#333333;
				transition: fill 0.25s ease-in-out;
			}
		}
	}
}
.codelist {
	width:100%;
	max-width:750px;
	margin:1rem auto;
    display:grid;
    grid-template-columns:auto 100px 100px 140px 32px 32px;
    justify-items:stretch;
    align-items:stretch;
    grid-auto-flow:row;
    border:1px solid #b7b7b7;
    user-select:none;
	position:relative;

	& .listheader {
		padding:8px;
		background-color:#9E9E9E;
		border-bottom:1px solid #b7b7b7;
		color:#F2F2F2;
		width:calc(100% - 16px);
		align-self:stretch;
	}
	& .row {
		display:contents;
	}
	& .row:hover span {
		background-color:#7F7F7F;
	}
	& .row.selected span {
		background-color:#A1A1A1;
	}
	& span {
		width:calc(100% - 16px);
		padding:12px 8px;
		display:inline-block;
		vertical-align:top;
		align-self:stretch;
		background-color:#747474;
	}
	& span.disabled {
		color:#D1D1D1;
		cursor:default;
		pointer-events:none;
	}
	& span.text {
		text-align:left;
	}
	& span.icon {
		text-align:center;
		cursor:pointer;
		position:relative;
	
		&.copied svg {
			fill:#00CB00 ! important;
		}
		& svg {
			height:20px;
			width:20px;
			fill:#F2F2F2;
			transition: fill 0.25s ease-in-out;
		}
		&:hover svg {
			fill: #ffe4e1;
		}
	}
	& span.number {
		text-align:right;
	}
}
.seeallswitch {
	float:right;
	height:calc(100% + 16px);
	line-height:calc(100% + 16px);
	width:auto;
	padding:0px 8px;
	background-color:rgba(0, 0, 0, 0.4);
	margin:-8px 0px;
}
.busy {
	position:absolute;
	top:30px;
	left:calc(50% - 24px);
	width:52px;
	height:52px;
	line-height:48px;
	font-size:48px;
	z-index:1000;
	--track-width:5px;
	--track-color:white;
	background-color:rgba(0, 0, 0, 0.5);
	border-radius:50%;
	border:2px solid rgba(0, 0, 0, 0.5);
}

sl-select small {
	font-size: var(--sl-font-size-medium);
	padding-block-end: var(--sl-spacing-medium);
}

.kit-grid {
	display:grid;
	border:1px solid #555555;
	gap:4px;
	background-color:#222222;
	justify-items:stretch;
	position:relative;

	& div.value {
		font-size:14px;
		text-align:center;
		color:#DDDDDD;
		border:1px solid #555555;
		background-color:#000000;

		&.just-added {
			animation: draw-attention 2s ease-in-out 10;
		}
	}
	& div.stylehead {
		font-size:14px;
		font-weight:bold;
		writing-mode:vertical-rl;
		text-orientation:mixed;
		color:white;
		border:1px solid #555555;
		text-align:right;
		position:relative;
		display:flex;
		
		& > div {
			flex:1 1 auto;
			align-self:center;
		}
	}
	& div.legend {
		font-size:14px;
		font-weight:bold;
		color:white;
		border:none;
		text-align:center;
		position:relative;
		display:flex;
		
		& > div {
			text-align:left;
			flex:1 1 auto;
			align-self:start;
			justify-self:start;
			padding:8px;
		}
	}
	& div.kithead {
		font-size:14px;
		font-weight:bold;
		color: white;
		border:1px solid #555555;
		text-align:left;
	}
	& div.rowhighlight {
		position:absolute;
		top:0px;
		left:0px;
		bottom:0px;
		right:0px;
		background-color:rgba(255, 255, 255, 0.2);
		grid-column-start:1;
		grid-column-end:-1;
		grid-row-start:1;
		grid-row-end:span 1;
		pointer-events:none;
		z-index:2000;
	}
	& div.colhighlight {
		position:absolute;
		top:0px;
		left:0px;
		bottom:0px;
		right:0px;
		background-color:rgba(255, 255, 255, 0.2);
		grid-row-start:1;
		grid-row-end:-1;
		grid-column-start:1;
		grid-column-end:span 1;
		pointer-events:none;
		z-index:2001;
	}
}
#kit_code-menu {
	& .ui-menu-item {
		margin-left:1rem;
	}
}

@keyframes draw-attention {
	0% { scale:1.0; color:#DDDDDD; border-color:#555555; background-color:#000000; }
	50% { scale: 1.5; color:#9cff2b; border-color:#44aa00; background-color:#666666; }
	100% { scale:1.0; color:#DDDDDD; border-color:#555555; background-color:#000000; }
}

.photo-upload {
    height:400px;
    width:100%;
    background-color:#555555;
	background-image:url('./../images/kit_upload_placeholder.png');
	background-size:contain;
	background-position:center center;
	background-repeat:no-repeat;
	border-radius:8px;
    border:1px solid #b7b7b7;
    box-shadow:inset -4px -4px 12px rgba(0, 0, 0, 0.5);
    position:relative;

	&::after {
		content:"Click or Drag Image Here";
		position:absolute;
		left:0px;
		bottom:5px;
		right:0px;
		height:auto;
		text-align:center;
		mix-blend-mode:difference;
		color:#EEEEEE;
		overflow:hidden;
		pointer-events:none;
	}
	& input[type=file] {
		position:absolute;
		top:0px;
		left:0px;
		opacity:0;
		height:100%;
		width:100%;
		cursor:pointer;
	}
	&.focused,
	&:focus-visible,
	&:focus-within {
		background-color:#A8CE8A;
	}
	& img {
		position:absolute;
		top:50%;
		left:50%;
		max-height:calc(100% - 16px);
		max-width:calc(100% - 16px);
		transform:translate(-50%, -50%);
	}
}
#upload_message {
	margin-left: 1rem;
	margin-top: 1rem;
	font-size:0.95rem;
	color:var(--sl-color-primary-700);
	display:inline-block;
}

.content-organizer {
	display:grid;
	grid-template-areas:"list1 list2";
	grid-template-columns: 1fr 1fr;
	margin:0px 0px 1rem 0px;
	gap:1rem;
	align-items:start;

	& .list1 {
		grid-area:list1;

		& .list1list {
			display:grid;
			grid-template-columns: 90px 90px auto 48px 48px;
			border:1px solid var(--sl-color-neutral-500);
			align-items:start;
			justify-items:stretch;
		}
	}
	& .list2 {
		grid-area:list2;

		& .list2list {
			display:grid;
			grid-template-columns: 90px 90px auto 48px 48px;
			border:1px solid var(--sl-color-neutral-500);
			align-items:start;
			justify-items:stretch;
		}
	}
}

.details-content {
	border:1px solid var(--sl-color-neutral-500);
	padding:1rem;
	display:flex;
	flex-flow:row wrap;
	gap:0px;
	align-items:center;
	justify-items:stretch;

	& .details-entry {
		position:relative;
		flex: 0 0 calc(100% - 20px);
		width:calc(100% - 20px);
		padding:8px;

	}
}

.listhead {
	border-bottom:1px solid var(--sl-color-neutral-500);
	background-color:var(--sl-color-neutral-200);
	font-weight:bold;
	padding:8px 4px;
	width:calc(100% - 8px);
	align-self:stretch;
}
.row {
	display:contents;
}
.cell {
	width:calc(100% - 8px);
	padding:4px;
	cursor:default;
	align-self:stretch;
}
.text {
	text-align:left;
}
.number {
	text-align:right;
}
.icon {
	cursor:pointer;
	text-align:center;
}
.row:hover .cell {
	background-color:var(--sl-color-primary-50);
}
.row.selected .cell {
	background-color:var(--sl-color-primary-200);
}

.priceconfirm {
	margin:2rem 0px;
	border:1px solid var(--sl-color-neutral-500);
	border-radius:1rem;
	background-color:var(--sl-color-neutral-300);
	padding:1rem;
}
.pricelabel {
	display:inline-block;
	vertical-align:top;
	width:8rem;
	margin-right:1rem;
}
.confirmprice {
	display:inline-block;
	vertical-align:top;
}
#details_dialog::part(footer) {
	display:flex;
	flex-flow:row nowrap;
	align-items:end;
	justify-content:space-between;
	width:100%;
}
.start-section {
	margin-top:1rem;
	padding-top:1.5rem;
	border-top:1px solid var(--sl-color-neutral-500);
}
sl-dropdown.styleset-kits a {
	font-size:1rem;
	min-height:auto;
	margin:0px;
	padding:0px;
	line-height:normal;
	font-weight:500;
	color:var(--sl-color-primary-700);
	cursor:pointer;
	text-decoration:underline;
	
	&:hover {
		color:var(--sl-color-primary-500);
	}
}
sl-dropdown.styleset-kits::part(panel) {
	background-color:transparent;
}
sl-dropdown.styleset-kits sl-menu {
	background-color:rgba(67, 67, 74, 0.9);
}
sl-dropdown.styleset-kits sl-menu-item {
	pointer-events:none;
}
sl-dropdown.styleset-kits sl-menu-item::part(base) {
	padding:0px;
}

.styleset-name {
	font-size:0.85rem;
	font-weight:normal;
	&::before {
		content: "(";
	}
	&::after {
		content: ")";
	}
	&:empty {
		display:none;
	}
}

sl-dialog.confirm-styleset-dlog::part(header) {
	border-top: 4px solid var(--sl-color-success-600);
 }
sl-dialog.confirm-styleset-dlog::part(close-button) {
	display:none;
}