/*!
// Contents
// ------------------------------------------------

 1. Canvas
 2. Configurator
 3. Summary Buttons
 4. Catalog
 5. Navigation Control
 6. Utility Bar
 7. Spinner Loader
 8. Responsive Breakpoint

/*!---------- 1. CANVAS ----------*/ 

#desk-sx {
	height: 92vh;
	margin: 0;
	padding: 0;
	}
#desk-sx-side {
	height: 92vh;
	margin: 0;
	padding: 0;
	}
#desk-sx-back {
	height: 92vh;
	margin: 0;
	padding: 0;
	}
#desk-dx {
	height: 92vh;
	margin: 0;
	padding: 0;
	}
.tail { 
	height: 100%;
	overflow: hidden;	 
	position: relative;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
	}		   			   
.tail img {
	height: auto;
	position: absolute;
	padding: 0;
	margin: 0 auto;
	}
/*!---------- 2. CONFIGURATOR ----------*/  
#desk-dx-top {
	height: 92vh;
	margin: 0;
	padding: 0;
	position: relative;
	-webkit-box-shadow: -9px 2px 26px 0px rgba(201,201,201,1);
	-moz-box-shadow: -9px 2px 26px 0px rgba(201,201,201,1);
	box-shadow: -9px 2px 26px 0px rgba(201,201,201,1);
	}
.top-logo {
	text-align: center;
	height: auto;
	padding: 12px 0 6px;
	display: flex;
	justify-content: center;
	align-items: center;
	}
.top-nav {
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 1px;
	height: 70px;
	line-height: 70px;
	font-family: 'Muli', sans-serif;
	color: #222222;
	padding: 0;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	}	
#product:hover span {
	display:none;
	}
#product:hover:before {
	content:"Catalogo";
	}
.top-nav-name {
	text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;
    height: 70px;
    line-height: 70px;
    font-family: 'Muli', sans-serif;
	background-color: #333333;
	color: #fff;
	padding: 0;
	-webkit-transition:  .3s;
	-moz-transition: .3s;
	-o-transition: .3s;
	transition:  .3s;
	}
.top-nav-name:hover  {
	background-color: #e6e6e6;
	color: #333333;
	cursor: pointer;
	}
.push {
	-webkit-transition: background-color .5s ease;
	-moz-transition: background-color .5s ease;
	-o-transition: background-color .5s ease;
	transition: background-color .5s ease;
	cursor: pointer;
	}
.push:hover {
	background-color: rgba(225,225,225, 0.2);
	}
.push-active {
	background-color: #e6e6e6;
	-webkit-transition: background-color .5s ease;
	-moz-transition: background-color .5s ease;
	-o-transition: background-color .5s ease;
	transition: background-color .5s ease;
	cursor: pointer;
	box-shadow: 5px 10px 18px rgba(0,0,0, 0.2);
	-moz-transition: all 0.3s;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
	}
.push-active:hover {

	box-shadow: none;
	}
.push-box {
	background-color: #ffffff;
	-webkit-transition: background-color .5s ease;
	-moz-transition: background-color .5s ease;
	-o-transition: background-color .5s ease;
	transition: background-color .5s ease;
	cursor: pointer;
	}
.push-box:hover {
	background-color: #e6e6e6;
	box-shadow: none;
	}
.push-counter {
	background-color: #ffffff;
	cursor: pointer;
	}
.logo {
	height: 100%;
	}
.sub-top-nav {
	text-align: center;
	text-transform: none;
	letter-spacing: 0;
	height: 70px;
	line-height: 70px;
	font-family: 'Muli', sans-serif;
	color: #222222;
	border: 1px solid #fff;
	}
.top-nav-qty {
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 1px;
	height: 70px;
	line-height: 70px;
	font-family: 'Muli', sans-serif;
	color: #222222;
	padding: 0;
	}
.top-nav-qty>input {
	background-color: #ffffff;
	width: 100%;
	text-align: center;
	height: 70px;
	border: none;
	color: #222222;
	}
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
 text-align: center;
	text-transform: lowercase;
	letter-spacing: 0;
	height: 70px;
	line-height: 70px;
	font-family: 'Muli', sans-serif;
	color: #111;
	padding: 0;
}
::-moz-placeholder { /* Firefox 19+ */
  text-align: center;
	text-transform: lowercase;
	letter-spacing: 0;
	height: 70px;
	line-height: 70px;
	font-family: 'Muli', sans-serif;
	color: #111;
	padding: 0;
}
:-ms-input-placeholder { /* IE 10+ */
  text-align: center;
	text-transform: lowercase;
	letter-spacing: 0;
	height: 70px;
	line-height: 70px;
	font-family: 'Muli', sans-serif;
	color: #111;
	padding: 0;
}
:-moz-placeholder { /* Firefox 18- */
  text-align: center;
	text-transform: lowercase;
	letter-spacing: 0;
	height: 70px;
	line-height: 70px;
	font-family: 'Muli', sans-serif;
	color: #111;
	padding: 0;
}	
.list-group-item {
	font-family: 'Muli', sans-serif;
	text-transform: lowercase;
	height: 70px;
	line-height: normal;
	text-align: right;
	padding-right: 50px;
	background-color: transparent;
	color:#222222;
	border: 1px solid #fff;
	-moz-transition: all 0.3s;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
	letter-spacing: 1px;
	}
li.list-group-item:hover {
	cursor: pointer;	
	font-weight: bold;
	}
.list-group-summary {
	font-family: 'Muli', sans-serif;
	height: 70px;
	line-height: 20px;
	text-align: right;
	padding-right: 50px;
	padding-top: 15px;
	background-color: transparent;
	color:#222222;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	-moz-transition: all 0.3s;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
	}	
li.list-group-summary:hover {
	cursor: pointer;	
	color: rgba(51, 51, 51, 0.2);
	font-weight: bold;
	}
.activex {
	font-weight: bold;
	}
.list-group-code {
	font-size: 11px;
	}
p#product_code {
	font-size: 11px;
	}	
span.tab-space {
	padding-left:1.5em;
	}
.chat-img {
	padding-left: 1.5em;
	}	
.list-group-item:first-child {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
li.total.list-group-item {
	font-weight: bold;
	cursor: auto;
	}
li.total.list-group-item:hover {
	color: rgba(51, 51, 51, 0.2);
	}
li.total.list-group-summary {
	font-weight: bold;
	cursor: auto;
	}
li.total.list-group-summary:hover {
	color: rgba(51, 51, 51, 0.2);
	}
#count_tot { font-size: 18px; foent-weight: bold; font-family: 'Muli', sans-serif;}
/*!---------- 3. SUMMARY BUTTONS ----------*/  
.form-control {
	box-shadow: none!important;
	border-radius: 0!important;
	}
.btn {
	border-radius: 0!important;
	}
.btn:focus,.btn:active {
   outline: none !important;
   box-shadow: none;
}
/*!---------- 4. CATALOG ----------*/ 
.product-tail {
	background-color: #ffffff;
	}
.product-tail img {
	width: 95%;
	-moz-transition: all 0.3s;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
	}
.product-tail:hover img {
	-moz-transition: all 0.3s;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
	-moz-transform: scale(1.2);
	-webkit-transform: scale(1.2);
	transform: scale(1.2);
	cursor: pointer;
	}	
.frame {
	overflow: hidden!important;
	}
#catalog {
  display: none;
  text-align: center;
}	
/*!---------- 5. NAVIGATION CONTROLS ----------*/  	
.sidenav {
	height: 100%;
	width: 100%;
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	overflow-x: hidden;
	transition: 0.2s;
	background-color: #ffffff;
	}
.sidenav-2 {
	height: 100%;
	width: 0;
	position: absolute;
	z-index: 1;
	top: 0;
	right: 0;
	overflow-x: hidden;
	transition: 0.2s;
	background-color: #ffffff;
	}
.sidenav-3 {
	height: 100%;
	width: 0;
	position: absolute;
	z-index: 1;
	top: 0;
	right: 0;
	overflow-x: hidden;
	transition: 0.2s;
	background-color: #ffffff;
	}
.sidenav-4 {
	height: 100%;
	width: 0;
	position: absolute;
	z-index: 1;
	top: 0;
	right: 0;
	overflow-x: hidden;
	transition: 0.2s;
	background-color: #ffffff;
	}
.sidenav-5 {
	height: 100%;
	width: 0;
	position: absolute;
	z-index: 1;
	top: 0;
	right: 0;
	overflow-x: hidden;
	transition: 0.2s;
	background-color: #ffffff;
	}
.sidenav-6 {
	height: 100%;
	width: 0;
	position: absolute;
	z-index: 1;
	top: 0;
	right: 0;
	overflow-x: hidden;
	transition: 0.2s;
	background-color: #ffffff;
	}
.sidenav-7 {
	height: 100%;
	width: 0;
	position: absolute;
	z-index: 1;
	top: 0;
	right: 0;
	overflow-x: hidden;
	transition: 0.2s;
	background-color: #ffffff;
	}
.sidenav-12 {
	height: 100%;
	width: 0;
	position: absolute;
	z-index: 1;
	top: 0;
	right: 0;
	overflow-x: hidden;
	transition: 0.2s;
	background-color: #ffffff;
	}
.sidenav-13 {
	height: 100%;
	width: 0%;
	position: absolute;
	z-index: 1;
	top: 0;
	right: 0;
	overflow-x: hidden;
	transition: 0.2s;
	background-color: #ffffff;
	}
.sidenav-15 {
	height: 100%;
	width: 0%;
	position: absolute;
	z-index: 1;
	top: 0;
	right: 0;
	overflow-x: hidden;
	transition: 0.2s;
	background-color: #ffffff;
	}
/*!---------- 6. UTILITY BAR ----------*/ 
.animate {
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
.navbar-fixed-left {
	position: absolute;
	top: 0px;
	left: 0px;
	border-radius: 0px;
}
.navbar-minimal {
	width: 60px;		
	min-height: px;
	max-height: 100%;
	background-color: #ffffff;
	z-index: 1000;
	border: 0;
}
.navbar-minimal > .navbar-toggler {
	position: relative;
	min-height: 60px;
	z-index: 100;
	cursor: pointer;
}
.navbar-minimal.open > .navbar-toggler,
.navbar-minimal > .navbar-toggler:hover {
	background-color: #e6e6e6;
	border-radius: 150px;
}
.navbar-minimal > .navbar-toggler > span {
	position: absolute;
	top: 50%;
	right: 50%;
	margin: -8px -8px 0 0;
	width: 16px;
	height: 16px;
	background-repeat: no-repeat;
	background-position: 0 0;
	-webkit-transition: -webkit-transform .3s ease-out 0s;
	-moz-transition: -moz-transform .3s ease-out 0s;
	-o-transition: -moz-transform .3s ease-out 0s;
	-ms-transition: -ms-transform .3s ease-out 0s;
	transition: transform .3s ease-out 0s;
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	-ms-transform: rotate(0deg);
	transform: rotate(0deg);
}
.navbar-minimal > .navbar-menu {
	position: absolute;
	top: -1000px;
	left: 0px;
	margin: 0px;
	padding: 0px;
	list-style: none;
	z-index: 50;
	background-color: #ffffff;
	width: 100%;
	opacity: 0;
	transform: translateY(-10px);
	transition: opacity 0.25s ease, transform 0.25s ease;
}
[class^="ti-"], [class*=" ti-"] {
	color: #222222;
}
.navbar-minimal > .navbar-menu > li {
	margin: 10px 0px;
	padding: 0px;
	border-width: 0px;
	height: 60px;
}
.navbar-minimal > .navbar-menu > li > a {
	position: relative;
	display: inline;
	color: #222222;
	padding: 20px 23px;
	text-align: left;
	cursor: pointer;
	border-bottom: 0px solid rgb(81, 81, 81);
	width: 100%;
	text-decoration: none;
	margin: 0px;
}
.navbar-minimal > .navbar-menu > li > a:last-child {
	border-bottom-width: 0px;
}
.navbar-minimal > .navbar-menu > li > a:hover {
	background-color: #e6e6e6;
}
.navbar-minimal > .navbar-menu > li > a > .glyphicon {
	float: right;
}

.navbar-minimal.open {
	width: 60px;
}
.navbar-minimal.open > .navbar-toggler > span {
	background-position: 0 -16px;
	-webkit-transform: rotate(-225deg);
	-moz-transform: rotate(-225deg);
	-o-transform: rotate(-225deg);
	-ms-transform: rotate(-225deg);
	transform: rotate(-225deg);
}
.navbar-minimal.open > .navbar-menu {
	top: 80px;
	width: 100%;
	min-height: 100%;
	opacity: 1;
	transform: translateY(0);
}
@media (min-width: 768px) {
	.navbar-minimal.open {
		width: 60px;
	}
	.navbar-minimal.open > .navbar-menu {
		overflow: visible;
	}
}
/*!---------- 7. SPINNER LOADER ----------*/ 
.sk-circle {
	position: absolute;
	left: 50%;
	top: 50%;
	margin: -25px 0 0 -25px;
	width: 50px;
	height: 50px;
	}
.sk-circle .sk-child {
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	}
.sk-circle .sk-child:before {
	content: '';
	display: block;
	margin: 0 auto;
	width: 15%;
	height: 15%;
	background-color: #333;
	border-radius: 100%;
	-webkit-animation: sk-circleBounceDelay 1.2s infinite ease-in-out both;
	animation: sk-circleBounceDelay 1.2s infinite ease-in-out both;
	}
.sk-circle .sk-circle2 {
	-webkit-transform: rotate(30deg);
	-ms-transform: rotate(30deg);
	transform: rotate(30deg); 
	}
.sk-circle .sk-circle3 {
	-webkit-transform: rotate(60deg);
	-ms-transform: rotate(60deg);
	transform: rotate(60deg);
	}
.sk-circle .sk-circle4 {
	-webkit-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	transform: rotate(90deg);
	}
.sk-circle .sk-circle5 {
	-webkit-transform: rotate(120deg);
	-ms-transform: rotate(120deg);
	transform: rotate(120deg);
	}
.sk-circle .sk-circle6 {
	-webkit-transform: rotate(150deg);
	-ms-transform: rotate(150deg);
	transform: rotate(150deg);
	}
.sk-circle .sk-circle7 {
	-webkit-transform: rotate(180deg);
	-ms-transform: rotate(180deg);
	transform: rotate(180deg);
	}
.sk-circle .sk-circle8 {
	-webkit-transform: rotate(210deg);
	-ms-transform: rotate(210deg);
	transform: rotate(210deg);
	}
.sk-circle .sk-circle9 {
	-webkit-transform: rotate(240deg);
	-ms-transform: rotate(240deg);
	transform: rotate(240deg);
	}
.sk-circle .sk-circle10 {
	-webkit-transform: rotate(270deg);
	-ms-transform: rotate(270deg);
	transform: rotate(270deg);
	}
.sk-circle .sk-circle11 {
	-webkit-transform: rotate(300deg);
	-ms-transform: rotate(300deg);
	transform: rotate(300deg);
	}
.sk-circle .sk-circle12 {
	-webkit-transform: rotate(330deg);
	-ms-transform: rotate(330deg);
	transform: rotate(330deg);
	}
.sk-circle .sk-circle2:before {
	-webkit-animation-delay: -1.1s;
	animation-delay: -1.1s;
	}
.sk-circle .sk-circle3:before {
	-webkit-animation-delay: -1s;
	animation-delay: -1s;
	}
.sk-circle .sk-circle4:before {
	-webkit-animation-delay: -0.9s;
	animation-delay: -0.9s;
	}
.sk-circle .sk-circle5:before {
	-webkit-animation-delay: -0.8s;
	animation-delay: -0.8s;
	}
.sk-circle .sk-circle6:before {
	-webkit-animation-delay: -0.7s;
	  animation-delay: -0.7s;
	  }
.sk-circle .sk-circle7:before {
	-webkit-animation-delay: -0.6s;
	animation-delay: -0.6s;
	}
.sk-circle .sk-circle8:before {
	-webkit-animation-delay: -0.5s;
	animation-delay: -0.5s;
	}
.sk-circle .sk-circle9:before {
	-webkit-animation-delay: -0.4s;
	animation-delay: -0.4s;
	}
.sk-circle .sk-circle10:before {
	-webkit-animation-delay: -0.3s;
	animation-delay: -0.3s;
	}
.sk-circle .sk-circle11:before {
	-webkit-animation-delay: -0.2s;
	animation-delay: -0.2s;
	}
.sk-circle .sk-circle12:before {
	-webkit-animation-delay: -0.1s;
	animation-delay: -0.1s;
	}
@-webkit-keyframes sk-circleBounceDelay {
	0%, 80%, 100% {
	-webkit-transform: scale(0);
	transform: scale(0);
  } 40% {
	-webkit-transform: scale(1);
	transform: scale(1);
  }
}
@keyframes sk-circleBounceDelay {
	0%, 80%, 100% {
	-webkit-transform: scale(0);
	transform: scale(0);
  } 40% {
	-webkit-transform: scale(1);
	transform: scale(1);
  }
}
/*animation page content after spinner*/
.animate-bottom {
	position: relative;
	-webkit-animation-name: animatebottom;
	-webkit-animation-duration: 1s;
	animation-name: animatebottom;
	animation-duration: 1s
	}
@-webkit-keyframes animatebottom {
	from {
	opacity:0 } 
	to { opacity:1 }
}
@keyframes animatebottom { 
	from{ opacity:0 } 
	to{ opacity:1 }
}
/*!---------- 8. RESPONSIVE BREAKPOINT ----------*/ 
/*responsive controls navigation*/
@media all and (min-width: 50px)   {  .top-nav  { font-size: 0.8em; width: 100%; } .top-nav-name  { font-size: 0.8em; width: 100%; } .top-nav-qty  { font-size: 0.8em;} }
@media all and (min-width: 100px)  {  .top-nav  { font-size: 0.8em; width: 100%; } .top-nav-name  { font-size: 0.8em; width: 100%; } .top-nav-qty  { font-size: 0.8em;} }
@media all and (min-width: 200px)  {  .top-nav  { font-size: 0.8em; width: 100%; } .top-nav-name   { font-size: 0.8em; width: 100%; } .top-nav-qty  { font-size: 0.8em;} }
@media all and (min-width: 300px)  {  .top-nav  { font-size: 0.8em; width: 100%; } .top-nav-name   { font-size: 0.8em; width: 100%; } .top-nav-qty  { font-size: 0.8em;} }
@media all and (min-width: 400px)  {  .top-nav  { font-size: 0.8em; width: 50% } .top-nav-name   { font-size: 0.8em; width: 100%; } .top-nav-qty  { font-size: 0.8em;} }
@media all and (min-width: 500px)  {  .top-nav  { font-size: 0.8em; width: 50% } .top-nav-name   { font-size: 0.8em; width: 100%; } .top-nav-qty  { font-size: 0.8em;} }
@media all and (min-width: 600px)  {  .top-nav  { font-size: 0.8em; width: 50% } .top-nav-name   { font-size: 0.8em; width: 100%; } .top-nav-qty  { font-size: 0.8em;} }
@media all and (min-width: 700px)  {  .top-nav  { font-size: 0.8em; width: 50% } .top-nav-name   { font-size: 0.8em; width: 100%; } .top-nav-qty  { font-size: 0.8em;} }
@media all and (min-width: 800px)  {  .top-nav  { font-size: 0.8em; width: 50% } .top-nav-name   { font-size: 0.8em; width: 100%; } .top-nav-qty  { font-size: 0.8em;} }
@media all and (min-width: 900px)  {  .top-nav  { font-size: 0.8em; width: 100% } .top-nav-name   { font-size: 0.8em; width: 100%; } .top-nav-qty  { font-size: 0.8em;} }
@media all and (min-width: 1000px) {  .top-nav  { font-size: 0.8em; width: 100% } .top-nav-name   { font-size: 0.8em; width: 100%; } .top-nav-qty  { font-size: 0.8em;} }
@media all and (min-width: 1100px) {  .top-nav  { font-size: 0.8em; width: 100%; } .top-nav-name   { font-size: 0.8em; width: 100%; } .top-nav-qty  { font-size: 0.8em;} }
@media all and (min-width: 1200px) {  .top-nav  { font-size: 0.8em; width: 50%; } .top-nav-name   { font-size: 0.8em; width: 50%; } .top-nav-qty  { font-size: 0.8em;} }
@media all and (min-width: 1300px) {  .top-nav  { } }
@media all and (min-width: 1400px) {  .top-nav  { } }
@media all and (min-width: 1500px) {  .top-nav  { } }
@media all and (min-width: 1500px) {  .top-nav  { } }
@media all and (min-width: 1600px) {  .top-nav  { } }
@media all and (min-width: 1700px) {  .top-nav  { } }
/*responsive controls menu*/
@media all and (min-width: 50px)   {  .list-group-item { font-size: 1em; }}
@media all and (min-width: 100px)  {  .list-group-item { font-size: 1em; }}
@media all and (min-width: 200px)  {  .list-group-item { font-size: 1em; }}
@media all and (min-width: 300px)  {  .list-group-item { font-size: 1em; }}
@media all and (min-width: 400px)  {  .list-group-item { font-size: 1em; }}
@media all and (min-width: 500px)  {  .list-group-item { font-size: 1em; }}
@media all and (min-width: 600px)  {  .list-group-item { font-size: 1em; }}
@media all and (min-width: 700px)  {  .list-group-item { font-size: 1em; }}
@media all and (min-width: 800px)  {  .list-group-item { font-size: 1em; }}
@media all and (min-width: 900px)  {  .list-group-item { font-size: 1em; }}
@media all and (min-width: 1000px) {  .list-group-item { font-size: 1em; }}
@media all and (min-width: 1100px) {  .list-group-item { font-size: 1em; }}
@media all and (min-width: 1200px) {  .list-group-item { font-size: 1em; }}
@media all and (min-width: 1300px) {  .list-group-item { } }
@media all and (min-width: 1400px) {  .list-group-item { } }
@media all and (min-width: 1500px) {  .list-group-item { } }
@media all and (min-width: 1500px) {  .list-group-item { } }
@media all and (min-width: 1600px) {  .list-group-item { } }
@media all and (min-width: 1700px) {  .list-group-item { } }
/*responsive controls submenu*/
@media all and (min-width: 50px)   {  .text { font-size: 1em; width: 100%; }}
@media all and (min-width: 100px)  {  .text { font-size: 1em; width: 100%; }}
@media all and (min-width: 200px)  {  .text { font-size: 1em; width: 100%; }}
@media all and (min-width: 300px)  {  .text { font-size: 1em; width: 100%; }}
@media all and (min-width: 400px)  {  .text { font-size: 1em; width: 100%; }}
@media all and (min-width: 500px)  {  .text { font-size: 1em; width: 100%; }}
@media all and (min-width: 600px)  {  .text { font-size: 1em; width: 100%; }}
@media all and (min-width: 700px)  {  .text { font-size: 1em; width: 100%; }}
@media all and (min-width: 800px)  {  .text { font-size: 1em; width: 100%; }}
@media all and (min-width: 900px)  {  .text { font-size: 1em; width: 100%; }}
@media all and (min-width: 1000px) {  .text { font-size: 1em; width: 100%; }}
@media all and (min-width: 1100px) {  .text { font-size: 1em; width: 100%; }}
@media all and (min-width: 1200px) {  .text { font-size: 1em; width: 100%; }}
@media all and (min-width: 1300px) {  .text { } }
@media all and (min-width: 1400px) {  .text { } }
@media all and (min-width: 1500px) {  .text { } }
@media all and (min-width: 1500px) {  .text { } }
@media all and (min-width: 1600px) {  .text { } }
@media all and (min-width: 1700px) {  .text { } }


/*!---------- CONTEMPORARY UI REFRESH (non disruptive) ----------*/
body {
	background: linear-gradient(160deg, #3d59ad 0%, #054e7a 35%, #0c092f 100%);
	color: #1f2a37;
	font-family: 'Muli', 'Helvetica Neue', Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	height: 100vh;
}

#catalog {
	padding: 30px 30px;
}

#desk-sx,
#desk-sx-side,
#desk-sx-back {
	background: #ffffff;
	border-radius: 28px;
	box-shadow: 0 25px 60px rgba(15, 23, 42, 0.1);
	padding: 40px 30px;
}

#desk-dx {
	margin-left: 0;
}

.tail img {
	max-width: 90%;
	filter: drop-shadow(0 18px 35px rgba(15, 23, 42, 0.15));
}

#desk-dx-top {
	background: rgba(255,255,255,0.95);
	border-radius: 30px;
	box-shadow: 0 35px 70px rgba(15, 23, 42, 0.12);
	padding: 30px 28px 40px;
	border: 1px solid rgba(15, 23, 42, 0.05);
	overflow: auto;
}

.sidenav,
.sidenav-2,
.sidenav-3,
.sidenav-4,
.sidenav-5,
.sidenav-6,
.sidenav-7,
.sidenav-12,
.sidenav-13,
.sidenav-15 {
	background: transparent;
	overflow-y: hidden;
}

.sidenav-5,
.sidenav-6,
.sidenav-12,
.sidenav-15 {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.sidenav-5 .cta-row,
.sidenav-6 .cta-row,
.sidenav-12 .cta-row,
.sidenav-15 .cta-row {
	position: sticky;
	top: 0;
	z-index: 5;
	padding-top: 16px;
	padding-bottom: 12px;
	margin-bottom: 0;
	background: rgba(255,255,255,0.95);
	border-bottom: 1px solid rgba(15,23,42,0.05);
}

.sidenav-5 .list-group,
.sidenav-6 .list-group,
.sidenav-12 .list-group,
.sidenav-15 .list-group {
	flex: 1;
	overflow-y: auto;
	padding: 5px 20px 20px;
	margin-bottom: 0;
	scrollbar-width: thin;
}

.sidenav-5 .list-group::-webkit-scrollbar,
.sidenav-6 .list-group::-webkit-scrollbar,
.sidenav-12 .list-group::-webkit-scrollbar,
.sidenav-15 .list-group::-webkit-scrollbar {
	width: 6px;
}

.sidenav-5 .list-group::-webkit-scrollbar-thumb,
.sidenav-6 .list-group::-webkit-scrollbar-thumb,
.sidenav-12 .list-group::-webkit-scrollbar-thumb,
.sidenav-15 .list-group::-webkit-scrollbar-thumb {
	background: rgba(15,23,42,0.15);
	border-radius: 6px;
}

.top-logo {
	text-align: left;
  margin-bottom: 0px;
  padding: 20px 30px;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}

.top-logo .logo {
	max-width: 280px;
	width: 100%;
	height: auto;
	object-fit: contain;
}


.top-nav,
.top-nav-name,
.push,
.push-active {
	color: #101828;
	font-weight: 600;
	border: none;
	letter-spacing: 0.08em;
}

.top-nav-name {
	background: #e4ebff;
	border-radius: 999px;
	color: #2f55e7;
}

.product-heading {
	text-align: left;
	background: transparent;
	height: auto;
	line-height: 1.4;
	width: max-content;
	padding-left: 15px;
}

.product-heading .heading-label {
	display: block;
	font-size: 0.85em;
	text-transform: uppercase;
	letter-spacing: 0.25em;
	color: #98a2b3;
}

.product-heading .product-name {
	display: block;
	font-size: 1.3em;
	font-weight: 700;
	color: #10204d;
	margin-top: 6px;
}

.top-description {
	font-size: 0.95em;
	color: #475467;
	margin: 6px 0 4px;
	line-height: 1.5;
	padding: 10px 15px 40px;
  text-align: left;
}

.push {
	border-radius: 16px;
}

.push-active {
	background: #101828;
	color: #f8fafc;
	border-radius: 16px;
	box-shadow: none;
}

.top-nav.push-active span,
.top-nav.push-active [class^="ti-"],
.top-nav.push-active [class*=" ti-"] {
	color: #f8fafc;
}


	.navbar-fixed-left {
  left: 25px;
  top: 40px;
}


.navbar-minimal {
	background: rgba(15,23,42,0.08);
	border-radius: 150px;
}

.navbar-menu li a {
	background: transparent;
	color: #0f172a;
	border-radius: 18px;
}

.navbar-menu li a:hover,
.navbar-menu li a.activefront,
.navbar-menu li a.activeside,
.navbar-menu li a.activetop {
	background: #adadad;
  color: #f8fafc;
  box-shadow: 0 8px 18px rgba(87, 87, 87, 0.35);
}

.list-group {
	padding-left: 0;
	margin-top: 20px;
}

.list-group-item {
	border-radius: 20px !important;
	border: 1px solid rgba(15, 23, 42, 0.05) !important;
	background-color: rgba(248, 250, 252, 0.95) !important;
	margin-bottom: 12px;
	padding: 18px 26px;
	font-size: 1.05em;
	color: #111827;
	display: flex;
	align-items: center;
	justify-content: space-between;
	transition: all 0.2s ease;
}

.list-group-item .chat-img {
	margin-right: 14px;
	border-radius: 16px;
	background: #fff;
	padding: 6px;
}

.list-group-item .chat-img img {
	width: 42px;
	height: 42px;
}

.list-group-item span {
	letter-spacing: 0.03em;
	display: inline-flex;
	align-items: center;
}

.list-group-item .ti-angle-right,
.list-group-item .ti-pencil {
	color: #9ca3af;
	font-size: 0.95em;
}

.selection-group {
	display: flex;
	align-items: center;
	gap: 16px;
}

.selection-copy {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.selection-label {
	font-weight: 600;
	color: #0f172a;
	font-size: 1.05em;
	text-transform: initial;
}

.selection-value {
	font-size: 0.73em;
	color: #0f2a63;
	text-transform: capitalize;
	background: rgba(41,82,228,0.12);
	padding: 6px 12px;
	border-radius: 999px;
	border: 1px solid rgba(41,82,228,0.25);
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 600;
	min-height: 30px;
	max-width: 100%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.selection-value::before {
	content: '';
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #1f4be0;
	display: inline-block;
}

.selection-value.selection-empty {
	background: rgba(15,23,42,0.05);
	border-color: rgba(15,23,42,0.1);
	color: #6b7280;
	font-weight: 500;
}

.inline-selection .selection-label {
	font-size: 0.95em;
	text-transform: none;
	color: #1f2937;
	white-space: nowrap;
	margin-right: 8px;
}

.inline-selection .selection-value {
	font-size: 0.65em;
	padding: 4px 10px;
	min-height: 26px;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}

.inline-selection .selection-copy {
	flex-direction: row;
	align-items: center;
	gap: 8px;
}

.selection-value::before {
	content: '';
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #1f4be0;
	display: inline-block;
}

.list-group-item:hover,
.list-group-item.activex {
	background: #e7edff !important;
	border-color: rgba(41, 82, 228, 0.45) !important;
	box-shadow: 0 18px 30px rgba(23, 41, 109, 0.18);
	color: #142f66;
	transform: translateY(-2px);
}

.text.list-group-item {
	text-transform: capitalize;
}

li.total.list-group-item {
	background: #162541 !important;
	color: #f8fafc !important;
}

.cta-row {
	display: flex;
	gap: 14px;
	margin: 20px 0 30px;
  padding: 0 15px;
}

.cta-row .top-nav-name,
.cta-row .top-nav {
	flex: 1;
	height: auto;
	line-height: 1.2;
	padding: 16px;
	border-radius: 18px;
	text-align: center;
	float: none;
	width: auto;
	margin: 0;
}

.cta-row .top-nav-name {
	background: #ffffff;
	border: 1px solid rgba(15, 23, 42, 0.08);
	color: #0f172a;
	box-shadow: 0 8px 18px rgba(15,23,42,0.08);
}

.cta-row .top-nav.push-active {
	background: linear-gradient(135deg, #234c8b, #101949);
	color: #f8fafc;
	box-shadow: 0 15px 30px rgba(44, 91, 201, 0.33)
}

.cta-row.secondary-actions {
  margin-top: 120px;
}

.cta-row.secondary-actions .top-nav {
	background: #f8fafc;
	border: 1px solid rgba(15,23,42,0.08);
	color: #0f172a;
	box-shadow: 0 6px 14px rgba(15,23,42,0.08);
	text-transform: uppercase;
	letter-spacing: 0;
  font-size: 0.80em;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

.share-cta {
	background: #e0ecff !important;
	border-color: rgba(59,130,246,0.3) !important;
	color: #1d4ed8 !important;
}

.reseller-cta {
	background: #fef6d8 !important;
	border-color: rgba(251,191,36,0.4) !important;
	color: #a16207 !important;
}

.catalog-actions {
	margin-bottom: 18px;
}

.catalog-actions .push-active {
	background: linear-gradient(135deg, #0f172a, #1d4ed8);
	color: #f8fafc;
	box-shadow: 0 15px 30px rgba(15,23,42,0.35);
}

.catalog-actions .top-nav-name {
	background: #ffffff;
	border: 1px solid rgba(15,23,42,0.08);
	color: #0f172a;
	box-shadow: 0 12px 22px rgba(15,23,42,0.12);
}

.product-disabled {
	opacity: 0.6;
	cursor: no-drop;
}

.product-disabled img.image-responsive {
  cursor: no-drop;
}

.sk-circle .sk-child:before {
	background-color: #1f4be0;
}







@media screen and (max-width: 991px) {
	body {
		background: linear-gradient(160deg, #3d59ad 0%, #054e7a 35%, #0c092f 100%);
    font-size: 16px;
    height: auto;
	}
	#catalog {
		padding: 0px 20px 72px;
	}
	#catalog > .row {
		margin-left: 0;
		margin-right: 0;
		display: flex;
		flex-direction: column;
		gap: 28px;
		margin-top: -28px;
	}
	#catalog > .row > * {
		float: none;
	}
	.navbar-fixed-left {
		position: static;
		margin-bottom: 12px;
		left: auto;
		top: auto;
		width: 100%;
		order: 3;
	}
	.navbar-minimal {
		width: 100%;
		background: transparent;
		box-shadow: none;
	}
	.navbar-menu {
		display: flex !important;
		justify-content: flex-start;
		flex-wrap: wrap;
		gap: 12px;
		padding: 0;
	}
	
	.navbar-menu li a {
		display: inline-flex;
		width: 46px;
		height: 46px;
		align-items: center;
		justify-content: center;
		background: rgb(245, 245, 245);
		color:#fff;
	}
	.navbar-minimal > .navbar-toggler {
		display: none;
	}
	.navbar-minimal > .navbar-menu {
		position: static;
		top: auto;
		left: auto;
		width: 100%;
		opacity: 1;
		transform: none;
		min-height: auto;
		margin: 0;
		background: transparent;
	}
	#desk-sx,
	#desk-sx-side,
	#desk-sx-back {
		height: auto;
		min-height: 320px;
		padding: 10px 0 20px;
		order: 2;
	}
	.box-view {
		order: 2;
	}
	#desk-dx {
		margin-left: 0;
		margin-top: 0;
		padding: 0;
		width: 100%;
		order: 1;
	}
	#desk-dx-top {
		padding: 28px 20px 34px;
		border-radius: 26px;
	}
	
	.top-logo {
  text-align: center;
  margin-bottom: 0px;
  padding: 0 0 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}
	.top-logo img {
		max-width: 160px;
	}
	.top-nav,
	.top-nav-name {
		font-size: 1rem;
		width: 100%;
		padding: 16px 18px;
		line-height: 1.4;
		border-radius: 18px;
	}
	.cta-row {
		flex-direction: column;
		gap: 12px;
		padding: 0;
	}
	.sidenav{
		padding: 20px 10px;
	}
	.sidenav-7 {
		padding: 0;
	}
	.sidenav-7.is-open {
		padding: 20px 10px;
	}
	.sidenav-13 {
		padding: 0;
		overflow-y: hidden;
	}
	.sidenav-13.is-open {
		padding: 18px 12px 32px;
		overflow-y: hidden;
	}
	.sidenav-13::-webkit-scrollbar {
		width: 6px;
	}
	.sidenav-13::-webkit-scrollbar-thumb {
		background: rgba(15,23,42,0.15);
		border-radius: 6px;
	}
	.sidenav-13 .catalog-actions {
		position: sticky;
		top: 0;
		z-index: 2;
		padding: 12px 12px 10px;
		margin-bottom: 18px;
		background: rgba(255,255,255,0.98);
		border-radius: 20px;
		box-shadow: 0 10px 18px rgba(15,23,42,0.12);
	}
	.list-group {
		margin-top: 24px;
	}
	.list-group.row {
		margin-right: -25px;
  margin-left: -15px;
	}

	.list-group-item {
		font-size: 0.9em;
	}
	
	#mySidenav .list-group-item {
		border-radius:0px!important;
	}
}

@media screen and (min-width: 992px) {
	#desk-dx {
		width: calc(33.33333333% - 30px);
		margin-left: 30px;
	}
}
#zoomIn [class^="ti-"],
#zoomOut [class^="ti-"] {
	color: #222222;
	transition: color 0.2s ease;
}

#zoomIn:hover [class^="ti-"],
#zoomOut:hover [class^="ti-"] {
	color: #0f172a;
}