* {
  box-sizing: border-box;
}
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

html, body{ overflow: hidden; }
body{
  font-family: HelveticaNeueLTPro-Md;  ;
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently*/
}
.b, { font-family: HelveticaNeueLTPro-Bd; } 
a{color: #000000}
.f-right{ float: right; } 
.text-right{ text-align: right; }
.container-title-step{ height: 45px; text-align: left; display: inline-block; width: 100%; padding-left: 30px; padding-right: 30px; padding-bottom: 10px; border-bottom: 1px solid #D9D9D9; float: left; }
.title-step{ padding-top: 15px; display: inline-block; } 
#inner-products{ overflow-y: auto; width: 100%; display: block; height: calc(100vh - 75px); padding-left: 15px; padding-right: 15px; }
.container-logo{ position: fixed; background-color: transparent; padding-top: 29px; top: 0; padding-left: 29px; left: 0; width: 100%;}
.header-logo{ position: relative; width: 290.44px; height:32px; background-image: url("../img/header-logo.png"); background-size: cover;} 
.header-text{ position: fixed; right: 30px; top: 30px;}
.text-uppercase{ text-transform: uppercase; }
.regular{ font-size: 13px; line-height: 16px; color: #767676 }
.bold{ font-size: 30px; line-height: 37px; color: #000000;}
.cont-step{ position:fixed; bottom: 0px; left: 0; width: 100%; z-index: 3; pointer-events: none;}
.item-product, .item-cls-part, .item-ins-part, .item-pattern, .btn{ pointer-events: all; cursor: pointer } 
#container-products{ z-index: 4; width: 100vw; height:100vh; position: fixed; background-color: #F2F2F2; display: none; top: 0; left: 0;}
#container-cls-parts{ display: block; }
.ui-tabs-nav{ background: rgba(240,240,240,0.90);  }
.container-ins-part, .container-pattern{ position: relative; float: left; }
.container-group{ padding-top: 26px; display: inline-block;  position: relative; padding-right: 40px; }
.container-ins-part.active, .container-pattern.active{ display: block; }
.container-ins-part-choose, .container-pattern-choose { padding-bottom: 11px; padding-left: 30px; padding-right: 40px; width: 228px;  float: left; background: rgb(250,250,250);
background: linear-gradient(180deg, rgba(250,250,250,0.95) 0%, rgba(250,250,250,0.95) 15%, rgba(230,230,230,0.95) 100%); }
.container-ins-part-to-choose, .container-pattern-to-choose { width: calc( 100vw - 228px); float: left; padding-left: 40px;  overflow-x: auto; display: block; white-space: nowrap; height: 117px; overflow-y: hidden;  }
.container-ins-part-to-choose, .container-pattern-to-choose, .container-ins-part-choose, .container-pattern-choose{ position: relative; padding-top: 26px; }
.container-ins-part-choose .title-option, .container-pattern-choose .title-pattern{ padding-left: 30px; }
.container-pattern.have-group .container-pattern-to-choose{ padding-top: 0px; }
.item-product{ width: 25%; padding-left: 15px; padding-right: 15px; text-align: center; }
.item-product.active .inner-item-product{ border:1px solid #000000; border-radius: 6px; }
.item-product:focus .inner-item-product, .item-product:hover .inner-item-product{ background-color: rgba(255,255,255,0.5); }
.item-product .img-prod, .item-product .name-prod{ position: absolute; }
.item-product .img-prod{ padding: 20px; top: 0; left: 50%; transform: translateX(-50%); max-width: 100%; max-height: calc(100% - 43px) }
.item-product .name-prod { font-size: 16px; padding: 11px; bottom: 0; width: 100%; text-align: center; display: block; }
.item-product .inner-item-product{ position: relative; }
.item-product .inner-item-product:after { content: ""; display: block;padding-bottom: 100%; }
.item-cls-part{ width: 150px; height: 132px; max-height: 132px; display: inline-block; margin-right: 0px; } 
.item-cls-part  a { display: block; height: 100%; width: 100%; }
.item{ position: relative; background-color: transparent; text-align: center; margin-right: -4px; }
.item a{ text-decoration: none; }
.item-ins-part{ width: 70px; height: 70px; border: 2px solid #E6E6E6; margin: 10px 10px 10px 0px; display: inline-block; border-radius: 8px; overflow: hidden;}
.item-ins-part img{ width: 66px; height: 66px; }
.item-ins-part.active, .item-ins-part-choose{ border-color: #000000;}
.item-pattern{ width: 70px; height: 70px; border: 2px solid transparent; padding:2px; margin: 10px 10px 10px 0px }
.item-pattern img{ height: 62px; width: 62px; }
.item-pattern-choose, .item-pattern{ border-radius: 100%; ; float: left;}
.item-pattern-choose, .item-ins-part-choose { width: 40px; height: 40px; border: 2px solid #FFFFFF; float: left; }
.item-ins-part-choose { border-radius: 6px; }
.item-pattern-choose img, .item-pattern img{  border-radius: 100%;}
.item-pattern-choose img, .item-ins-part-choose img { height: 36px; width: 36px; }
.item-pattern.active{ border-color: #000000; }
.item.active{ background-color: rgba(222,222,222,0.5)}
.img-item{ display: inline-block; max-height: 109px; height: 109px; width: auto; max-width: 100%; padding-top:13px; padding-bottom: 9px; float: none;   } 
.name-item{ font-size: 13px; height: 21px; max-height: 21px; padding-bottom: 7px; text-align: center; display: block; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-left: 5px; padding-right: 5px;} 


.ui-tabs-nav{ width: 100%; display: block; float: left; height: 131px; max-height: 131px; white-space: nowrap; overflow-x: auto; overflow-y: hidden; }
.inner-tab{ max-height: 0px; overflow: hidden; float: left; display: block; background: #FAFAFA; width: 100%;}
.container-tab{ display: none; /*max-height: 177px;*/ width: 100%; float: left;}
.container-tab.active{ display: block; }
.container-tab.open {/*height: 242px; max-height: 242px*/ }
.container-tab, .container-tab.open .item-cls-part, .container-tab.open .inner-tab, .container-tab.open .img-item , .container-tab.open .ui-tabs-nav, .container-tab.open .name-item,
.item-cls-part, .inner-tab, .img-item, .ui-tabs-nav, .name-item { transition: max-height 0.3s linear;  } 
.container-tab.open .item-cls-part, .container-tab.open .ui-tabs-nav { max-height: 80px;  } 
.container-tab.open .item.active{ background-color: rgba(250,250,250,0.95); }
.container-pattern-ins-part{ display: none; }
.container-pattern-ins-part.active{ display: block; } 
.container-tab.open .ui-tabs-nav{ background-color: rgba(240,240,240,0.95); }
.container-tab.open .name-item{ max-height: 0px; padding-bottom: 0px; }
.container-tab.open .inner-tab.active{ max-height: 118px; float: left; width: 100%; border-top: 1px solid transparent;} 
/*.container-tab.open .title-step{ display:none; }*/
.container-tab.open .ui-tabs-nav .img-item{ max-height: 80px; padding-top: 10px; padding-bottom: 10px;  }
.inner-container-ins-part, .inner-container-pattern{ padding-left: 30px; padding-right: 20px; }
.btn-back-cls-parts, .container-tab.open .btn-products{ display: none;  }
.container-tab.open  .btn-back-cls-parts, .btn-products{ display: block;  }
.title-product{ display: block; width:100%; padding: 30px 30px 20px 30px; font-size: 20px;}
.title-option{ width: 100%; } 
.title-option, .title-pattern, .title-group, .btn{ font-size: 15px; }
.title-pattern, .title-option, .title-group{ padding-top: 10px; width: 100%; display: block; position: absolute; top:0; left: 0px; }
.title-pattern, .title-option{ padding-left: 30px; position: relative; }
.btn{cursor: pointer; background-color: #000000; color: #FFFFFF; border-radius: 20px; padding:9px 20px 11px 20px; line-height: 1; }
.btn-products{ margin-top:10px; }
.btn-configure-pattern, .btn-configure-ins-part { position: relative; margin-top: 10px; padding: 15px; height: 70px; }
.btn-configure-pattern.disable, .btn-configure-ins-part.disable{ cursor: not-allowed; background-color: #BEBEBE;}
.text-btn{ padding-top: 13px; padding-left: 15px ; display: inline-block; }
.d-none{ display: none; }
#dat-gui{top: 120px!important;}

#Viewer3D{ height: 100vh; height: calc(var(--vh, 1vh) * 100); width: 100vw; }
#loaderContainer {
  position: fixed;
  z-index: 2;
  top:0;
  left: 0;
  background-color: rgb(240,240,240);
  height: 100vh; height: calc(var(--vh, 1vh) * 100);
  width: 100vw;
  /*top: 30%;
  left: 50%;
  */
}
.loader-container{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
#loadingLabel {
  color: rgb(65, 65, 65);
  font-size: 2rem;
  position: relative;
}
#loadingLabel img{
	display: block;
	margin: 0 auto;
	margin-bottom: 30px;
	max-width: 400px;
	height: auto;
}
.lds-roller {
  position: relative;
  width: 64px;
  height: 64px;
  z-index: 2; display: block; margin: 0 auto;
  margin-top: 30px;
}
.lds-roller div {
  animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  transform-origin: 32px 32px;
}
.lds-roller div:after {
  content: " ";
  display: block;
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #aaaaaa;
  margin: -3px 0 0 -3px;
}
.lds-roller div:nth-child(1) {
  animation-delay: -0.036s;
}
.lds-roller div:nth-child(1):after {
  top: 50px;
  left: 50px;
}
.lds-roller div:nth-child(2) {
  animation-delay: -0.072s;
}
.lds-roller div:nth-child(2):after {
  top: 54px;
  left: 45px;
}
.lds-roller div:nth-child(3) {
  animation-delay: -0.108s;
}
.lds-roller div:nth-child(3):after {
  top: 57px;
  left: 39px;
}
.lds-roller div:nth-child(4) {
  animation-delay: -0.144s;
}
.lds-roller div:nth-child(4):after {
  top: 58px;
  left: 32px;
}
.lds-roller div:nth-child(5) {
  animation-delay: -0.18s;
}
.lds-roller div:nth-child(5):after {
  top: 57px;
  left: 25px;
}
.lds-roller div:nth-child(6) {
  animation-delay: -0.216s;
}
.lds-roller div:nth-child(6):after {
  top: 54px;
  left: 19px;
}
.lds-roller div:nth-child(7) {
  animation-delay: -0.252s;
}
.lds-roller div:nth-child(7):after {
  top: 50px;
  left: 14px;
}
.lds-roller div:nth-child(8) {
  animation-delay: -0.288s;
}
.lds-roller div:nth-child(8):after {
  top: 45px;
  left: 10px;
}
@keyframes lds-roller {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@media screen and (max-width: 533px) {
	#loadingLabel img{
		max-width: 250px;
	}

	.title-product, .title-cls-part { display: none; }
	.title-pattern, .title-option, .title-group { padding-top:5px;}
	.name-item { font-size: 11px; max-height: 17px; height: 17px; }
	.title-option, .title-pattern, .btn, .title-group {font-size: 12px;}
	.btn{ border-radius: 20px; padding:8px 12px 8px 12px;} 
	.btn-configure-pattern, .btn-configure-ins-part{ padding: 7px; height: 42px; border-radius: 6px;}
	.item-pattern, .item-ins-part { width: 42px; height: 42px;}
	.item-pattern-choose, .item-ins-part-choose { width: 28px; height: 28px; }
	.item-ins-part-choose img, .item-pattern-choose img{ height: 24px; width: 24px; }
	.item-pattern{ margin-top:3px; margin-right: 2px; margin-bottom: 8px; }
	.item-ins-part{ border-radius: 6px; margin-top: 3px; margin-bottom: 8px; margin-right: 5px;}
	.item-ins-part img { width: 38px; height: 38px; border-radius: 6px;}
	.item-pattern img {width: 34px; height: 34px;}
	.item-pattern, .item-ins-part{ display: inline-block; float: none; vertical-align: top; }
	.container-group{ padding-top: 20px; padding-right: 20px; vertical-align: top; }
	.text-btn{ padding-top: 10px; padding-left: 10px; }
	#inner-products, .ui-tabs-nav{ height: 87px; max-height: 87px; }
	.item-cls-part{ width: 110px; height: 87px; max-height: 87px; }
	.container-tab.open .inner-tab {max-height: 73px;}
	.container-tab.open .item-cls-part, .container-tab.open .ui-tabs-nav {max-height: 44px; }

	.img-item { max-height: 65px; height: 65px; padding-top: 5px; padding-bottom: 0px; }
	.container-tab.open .ui-tabs-nav .img-item{ max-height: 44px; padding-top: 5px; padding-bottom: 5px; }
	.hidden-mobile{ display: none; }
	.container-title-step{ height: 38px; }

	.container-ins-part, .container-pattern{ overflow-x: auto; white-space: nowrap; width: 100%;}
	.container-ins-part-choose, .container-pattern-choose{ padding-top: 13px; width: 140px; padding-left: 15px; padding-right: 11px; background: transparent; display: inline-block; float: none; vertical-align: top; overflow: unset;}
	.text-btn{ padding-top: 7px; }
	.container-ins-part-to-choose, .container-pattern-to-choose { display: inline-block; min-width: calc( 100vw - 140px); width: auto; padding-left:10px; overflow: unset; float: none; }
	.title-pattern, .title-option { padding-left: 10px; }
	.container-ins-part-to-choose, .container-pattern-to-choose{max-height: 73px; padding-top: 20px;}

	.container-title-step { padding-left: 15px; padding-right: 15px; }
	.container-ins-part-choose .title-option, .container-pattern-choose .title-pattern{ padding-left: 15px; padding-top: 5px; }
	/*.choose-products.active, .choose-products-bg.active{ bottom: calc(25vw + 8px); }*/
	.choose-products, .choose-products-bg{ padding-left:5px; padding-right: 5px; padding-top: 10px; padding-bottom: 10px; /* height: calc(25vw - 10px); */ height: auto; bottom: 0px; }
	.product {
		display: block;
		float: left;
		/*
		width: calc(25vw - 12px);
		height: calc(25vw - 12px);
		*/
		width: calc(25% - 10px);
		padding-bottom: calc(25% - 10px);
		height: 0px;
		margin-left: 5px; 
		margin-right: 5px;
	}
	.container-logo{ position: absolute; padding-top: 14px; top: 0; padding-left:0px; left: 0; width: 100%; background-color: rgba(255,255,255,0.95); padding-bottom: 10px;}
	.header-logo { width: 190.6px; height: 21px; display: block; margin-left: 15px; background-color: #FFF;}
	.header-text{
		padding-top: 15px;
		width: 100%;
		text-align: center;
		border-top: 1px solid #E6E6E6;
		top: 45px;
		right: 0;
		text-align: right;
		padding-left: 15px;
	}
	.bold{ font-size: 21px; line-height: 25px }
	.regular{ font-size:11px line-height:13px; }
	#dat-gui{ top: 145px !important }
	/*.product.active::after{ width: 15px; height: 15px; }*/
}