/************************ catalog *************************/
.productDetails {
  display: grid;
  overflow: hidden;
  grid-gap: 0 32px;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "productName productName" "favsContainer productLifeCycle" "productImages productOrderForm" "bundleProduct bundleProduct" "relatedProduct relatedProduct" "productDescription productDescription" "productDataSheet productDataSheet" "productArticleNo productArticleNo" "productRating productRating" "cetelemText cetelemCalc";
}
.productDetails .productName {
  grid-area: productName;
}
.productDetails #productImages {
  grid-area: productImages;
}
.productDetails .productLifeCycle {
  grid-area: productLifeCycle;
  justify-self: right;
  align-self: center;
  text-align: center;
  margin: 0;
  line-height: 0;
  min-height: 32px;
}
.productDetails .productLifeCycle .plcCenter {
  line-height: 45px;
}
.productDetails .productCompare {
  grid-area: productCompare;
}
.productDetails .productOrderForm {
  grid-area: productOrderForm;
}
.productDetails .bundleProduct {
  grid-area: bundleProduct;
}
.productDetails .relatedProduct {
  grid-area: relatedProduct;
}
.productDetails .cetelemText {
  grid-area: cetelemText;
  text-align: justify;
}
.productDetails .cetelemCalc {
  grid-area: cetelemCalc;
}
.productDetails .productDescription {
  grid-area: productDescription;
}
.productDetails .productDataSheet {
  grid-area: productDataSheet;
}
.productDetails .productArticleNo {
  grid-area: productArticleNo;
}
.productDetails .productRating {
  grid-area: productRating;
}
.productDetails h1 {
  margin: 0;
  text-align: center;
}
.productDetails .mainImg {
  max-height: 450px;
}
.productDetails .productVariantName {
  font-weight: bold;
  font-size: 0.8em;
  padding: 4px;
}
.productDetails .spinner {
  width: 100%;
}
.productDetails .spinner:focus-visible {
  border: none;
  outline: none;
}
.productOrderFormInner {
  padding: 16px;
  display: grid;
  grid-gap: 12px 16px;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "productPriceInfo productPriceInfo" "productStock productStock" "shippingText stockInfoButton" "productVariant productVariant" "productExtra productExtra" "productQuantity productQuantity" "quantityErr quantityErr" "productOrderFooter productOrderFooter";
}
.productOrderFormInner .productPriceInfo {
  grid-area: productPriceInfo;
  align-self: end;
}
.productOrderFormInner .productStock {
  grid-area: productStock;
}
.productOrderFormInner .productStock .stockInfo {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 8px;
  align-items: center;
  grid-template-areas: "stockIcon stockText" "deliveryText deliveryText";
}
.productOrderFormInner .productStock .stockInfo .onStock,
.productOrderFormInner .productStock .stockInfo .notOnStock {
  grid-area: stockIcon;
}
.productOrderFormInner .productStock .stockInfo .stockText {
  grid-area: stockText;
  line-height: 1;
}
.productOrderFormInner .productStock .stockInfo .deliveryText {
  grid-area: deliveryText;
  font-size: 0.9em;
  line-height: 1.2;
}
.productOrderFormInner .productQuantity {
  grid-area: productQuantity;
  align-self: end;
  display: grid;
  align-items: end;
  grid-template-columns: 1fr 1fr;
  gap: 0 16px;
  grid-template-areas: "quatnityContainer cart" ".  quote";
}
.productOrderFormInner .productQuantity .quatnityContainer {
  grid-area: quatnityContainer;
  align-items: center;
  column-gap: 8px;
}
.productOrderFormInner .productQuantity .productUnit {
  line-height: 40px;
}
.productOrderFormInner .productQuantity .cart {
  grid-area: cart;
  justify-self: stretch;
}
.productOrderFormInner .productQuantity .productInquiry {
  grid-area: 1/1/1/3;
}
.productOrderFormInner .soldOut {
  display: inline-block;
}
.productOrderFormInner .productVariant {
  grid-area: productVariant;
}
.productOrderFormInner .stockInfoButton {
  grid-area: stockInfoButton;
  align-self: end;
}
.productOrderFormInner .shippingText {
  grid-area: shippingText;
}
.productOrderFormInner .productOrderFooter {
  grid-area: productOrderFooter;
}
.productOrderFormInner .productOrderFooter .addToCartFonticon {
  max-width: 180px;
  margin: auto;
}
.productOrderFormInner .icon-w2cart {
  align-self: stretch;
  display: grid;
  grid-template-columns: 40px 1fr;
  grid-template-areas: " iconContainer iconText";
  gap: 16px;
  line-height: 0;
}
.productOrderFormInner .icon-w2cart .addToCart {
  display: none;
}
.productOrderFormInner .icon-w2cart::before {
  grid-area: iconContainer;
  font-size: 30px;
  line-height: 1;
  align-self: center;
}
.productOrderFormInner .icon-w2cart .addToCartText {
  grid-area: iconText;
  align-self: center;
  margin-top: 6px;
  line-height: 1;
}
.productOrderFormInner .addToCartFonticon {
  grid-area: cart;
}
.productOrderFormInner .askForQuoteFonticon {
  grid-area: quote;
}
.productOrderFormInner .addToCartFonticon .iconContainer,
.productOrderFormInner .askForQuoteFonticon .iconContainer {
  font-size: 36px;
}
.productOrderFormInner .productExtra {
  grid-area: productExtra;
}
.productOrderFormInner .priceLabel {
  font-weight: bold;
  font-size: 0.7em;
}
.productOrderFormInner .price {
  font-weight: bold;
}
.productOrderFormInner .discount {
  font-size: 0.8em;
}
.productOrderFormInner .vatText {
  font-size: 0.7em;
  line-height: 1.5;
}
.productOrderFormInner .quantityErr {
  grid-area: quantityErr;
  margin: 0;
}
.addToCartFonticon,
.askForQuoteFonticon {
  align-self: stretch;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: " iconContainer iconText";
  align-items: center;
  gap: 16px;
}
.addToCartFonticon .iconContainer,
.askForQuoteFonticon .iconContainer {
  grid-area: iconContainer;
  justify-self: center;
  line-height: 1;
}
.addToCartFonticon .iconText,
.askForQuoteFonticon .iconText {
  grid-area: iconText;
}
/********  price info  **********/
.productDetails .price {
  font-weight: bold;
}
.bruttoPriceBlock {
  font-size: 12px;
  line-height: 20px;
}
/*************  product life cycle *****************
.productDetails .productLifeCycle {
    float: right;
    margin-bottom:10px;
}*/
.cetelemText {
  background: #e4f1c9;
  border: 1px solid #a5bd71;
}
.cetelemText .cetelemTextContainer {
  padding: 8px;
}
/******************  Slideshow  ****************/
.productDetails .lpSlider {
  display: block;
  margin-bottom: 32px;
  position: relative;
}
/** magnifier **/
.productDetails .lpSlider .zoomBtn {
  position: absolute;
  right: 0;
  top: 0;
  padding: 8px;
  font-size: 40px;
}
.productDetails .lpSlider .zoomBtn {
  color: #ccc;
}
.productDetails .lpSlider .zoomBtn.on {
  color: #dd2020;
}
/*************** variants **************/
/*.productVariant .lpOptionGroup td .lpChk0,
.productVariant .lpOptionGroup td .lpChk1{
	margin-top:5px;
}*/
td.variantName {
  text-align: left;
}
td.variantPriceInstead {
  text-decoration: line-through;
  font-size: 0.8em;
  text-align: right;
  vertical-align: middle;
  padding: 5px 0;
}
.inactive td {
  color: #aaa;
  font-style: italic;
}
.inactive td .iconContainer.iDel {
  color: #aaa;
}
td.variantPrice {
  min-width: 120px;
  text-align: right;
}
.lpPopupContent .productDetails {
  text-align: center;
}
/**********  variant segments *********/
.variantContainer {
  display: grid;
  row-gap: 8px;
  grid-template-columns: 1fr;
  grid-template-areas: "item1" "item2" "item3";
}
.variantContainer.segmented .variantSelectors {
  padding: 16px;
}
.variantDisplay {
  min-height: 24px;
  font-weight: bold;
}
.variantDisplay .activeDisplay {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr min-content;
  grid-template-areas: "item1 item2";
  align-items: center;
}
.variantDisplay .activeDisplay .item2 {
  justify-self: right;
}
.variantDisplay .activeDisplayName {
  font-size: 14px;
}
.variantSelectors {
  display: inline-block;
  width: 100%;
}
.variantSelectors .resetPlaceHolder {
  min-height: 40px;
  float: right;
}
.productDetails .shippingInfoButton,
.productDetails .stockInfoButton {
  /*display:inline-block;
	padding:0px 0 0px 28px;
	line-height:24px;*/
  font-weight: bold;
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 8px;
  grid-template-areas: "iconContainer iconText";
}
.productDetails .shippingInfoButton .iconContainer,
.productDetails .stockInfoButton .iconContainer {
  grid-area: iconContainer;
}
.productDetails .shippingInfoButton .iconText,
.productDetails .stockInfoButton .iconText {
  grid-area: iconText;
  text-align: left;
}
.spAvailableMsg {
  font-size: 0.9em;
}
/*************** quantity *****************

.productDetails .quatnityContainer{
	margin:16px 0 4px 8px;
	float:left;
}
.productDetails .quatnityContainer input{
	float:left;
	width:45px;
}
.productDetails .productUnit{
	float:left;
	margin:18px 16px 0 4px;
}
/*****************  ws customer inquery ****************/
#customer_inquiry_block {
  display: block;
  float: left;
  clear: both;
}
#customer_inquiry_block .linkBtn {
  margin-left: 0px;
  margin-right: 0px;
}
#customer_inquiry_block .customerNotificationForm {
  display: grid;
  grid-template-columns: 1fr 2fr;
  padding: 0px;
}
#customer_inquiry_block .customerNotificationForm .customerNotificationFormLabel {
  line-height: 2;
}
#customer_inquiry_block .customerNotificationTerms {
  display: grid;
  grid-template-columns: 3fr 1fr;
  padding: 0px;
}
#customer_inquiry_block .customerNotificationTerms .customerNotificationFormLabel {
  line-height: 2;
}
#customer_inquiry_block .customerNotificationTerms .lpChkContainer {
  justify-self: end;
  margin: 0;
}
/*********   sold out product  ***********/
.productDetails .soldOut {
  font-size: 32px;
  font-weight: bold;
  margin-top: 4px;
}
/*******   delivery time text  	 *********/
.wsCart .openHoursMessage,
.productDetails .openHoursMessage {
  display: inline-block;
  text-align: center;
  margin: 20px auto;
  border-radius: 4px;
  padding: 16px;
}
/*.productDetails .openHoursMessage{
	width:80%;
}*/
.wsCart .openHoursMessage .openHourDisplayTime,
.productDetails .openHoursMessage .openHourDisplayTime {
  font-weight: bold;
  font-size: 1.5em;
  line-height: 2.5em;
}
.openHourLink .openHoursMore {
  text-decoration: underline;
}
.productArticleNo {
  color: #808080;
}
/*********** prodcut extra  *********/
.productSpecialPrice h3,
.productExtra h3 {
  margin-top: 10px;
  margin-bottom: 16px;
}
.productSpecialPrice,
.productExtra {
  display: inline-block;
  width: 100%;
  text-align: center;
}
/***********  quantity prices  *************/
.productSpecialPriceBlock {
  float: left;
  display: inline-block;
  margin: 6px;
  padding: 6px;
}
/********* prodcut extra, single  ********/
.productExtraSingle {
  float: left;
  display: inline-block;
  margin: 6px;
  padding: 6px;
}
/********* prodcut extra, multiple, table  ********/
.productExtraBlock {
  /*display:inline-block;
	float:left;
	margin-right:16px;*/
  display: inline-block;
  width: 100%;
  margin: auto;
  margin-bottom: 20px;
}
.productExtraBlock input {
  float: right;
}
.productExtraTable {
  background: #fff;
  border: 1px solid #ccc;
  width: 100%;
  table-layout: auto;
}
.productExtraTable tr:hover {
  background: #eee;
}
label.productExtraTitle {
  margin-right: 8px;
}
.productExtraRow {
  font-size: 14px;
  clear: both;
}
.productExtraOption {
  font-size: 14px;
  display: inline-block;
  float: left;
  margin-right: 16px;
}
.productExtraOption label {
  min-width: 135px;
}
.productExtraOption .lpChkContainer {
  float: left;
  width: auto;
}
.productExtraOption .productExtraVariant,
.productExtraOption .productExtraQuantity {
  float: left;
  min-width: 40px;
}
.productExtraOption .productExtraPrice {
  float: left;
  min-width: 40px;
  text-align: right;
}
.productExtraRow .productExtraVariant,
.productExtraRow .productExtraQuantity {
  float: left;
  min-width: 110px;
  text-align: right;
  margin-right: 10px;
}
.productExtraRow .productExtraPrice {
  float: left;
  min-width: 80px;
  text-align: right;
}
.extraContainer {
  width: 100%;
  display: inline-block;
  position: relative;
}
.extraContainer label {
  width: 100%;
  padding-right: 20px;
  text-align: left;
  margin: 0;
}
.extraContainer .lpChkContainer {
  position: absolute;
  right: 0;
  top: 0;
}
td.doubleQty .lpChkContainer {
  float: right;
}
td.extraPrice {
  text-align: right;
  font-size: 0.8em;
}
/******** product extra, select ********/
.productExtraSelectBlock {
  display: inline-block;
  width: 100%;
  text-align: left;
}
.productExtraSelectBlock .productExtraTitle {
  float: left;
  width: 50%;
  font-weight: bold;
}
.productExtraSelectBlock .selectContainer {
  float: left;
  width: 50%;
}
.productExtraSelectBlock .productExtraSelect {
  width: 270px;
  font-size: 12px;
  height: 20px;
}
.extraItem .selectValue {
  float: right;
}
.extraItem .itemPlaceholder {
  background: none;
}
/*.selectImg{
		display:block;
		width:60px;
		height:60px;
	}

/********* details table ***********/
.productDetails .propertyBlock {
  width: 100%;
  table-layout: auto;
}
.productDetails td.propertyName {
  font-weight: bold;
}
/********* floating explanation ***********/
.productDataSheet .showDetails {
  position: relative;
  display: inline;
}
.productDataSheet .details {
  position: absolute;
  visibility: hidden;
  opacity: 0;
  padding: 16px;
  z-index: 20;
  transition: 0.3s;
  left: 0;
  top: 0;
  min-width: 150px;
}
.productDataSheet .showDetails:hover .details {
  visibility: visible;
  opacity: 1;
}
.productDataSheet .iTrue {
  color: #20aa20;
}
/********* product technology  **********/
.productTechnologyItems {
  margin: 24px 0;
}
.productTechnologyItem {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: "item1" "item2" "item3" "item4";
}
.productTechnologyItem .imgContainer {
  height: 200px;
  padding: 16px;
}
.productTechnologyItem img {
  max-width: 100%;
  max-height: 100%;
  display: block;
  margin: 0 auto;
}
.productTechnologyItem .productTitle {
  font-weight: bold;
  padding: 0 16px;
}
.productTechnologyItem .introText {
  padding: 0 16px;
}
.productTechnologyItem .item4 {
  padding: 8px;
  justify-self: center;
  align-self: end;
}
.productTechnologyItem .item4 .sysPanel {
  margin: 0;
}
/*******  footer price info  *******/
.productDetails h2.goodPrice {
  font-size: 16px;
  color: #aaa;
  text-align: center;
  border-top: 1px solid #ccc;
  padding-top: 16px;
}
/*******  details popup  *******/
.productDetailsPopup {
  background: #f8f8f8;
  padding: 8px;
}
.productDetailsPopup .productName {
  text-align: center;
}
.productDetailsPopup .productQuantity {
  width: 100%;
  align-self: end;
  display: grid;
  align-items: end;
  grid-template-columns: 1fr 1fr;
  gap: 0 16px;
  grid-template-areas: "quatnityContainer cart";
}
.productDetailsPopup .productQuantity .quatnityContainer {
  grid-area: quatnityContainer;
}
.productDetailsPopup .productQuantity .productUnit {
  line-height: 40px;
}
.productDetailsPopup .productQuantity .cart {
  grid-area: cart;
  justify-self: stretch;
}
.productDetailsPopup .productQuantity .addToCartText {
  grid-area: addToCartText;
}
.productDetailsPopup .productQuantity .icon-w2cart {
  align-self: stretch;
  display: grid;
  grid-template-columns: 40px 1fr;
  grid-template-areas: " iconContainer addToCartText";
}
.productDetailsPopup .productQuantity .icon-w2cart::before {
  font-size: 30px;
  align-self: center;
}
.productDetailsPopup .productQuantity .addToCartText {
  margin-top: 6px;
  align-self: center;
}
.productDetailsPopup .spinner {
  width: 35px;
}
@media all and (max-width: 1024px) {
  .productDetails {
    grid-template-areas: "productName productName" "favsContainer productLifeCycle" "productImages productImages" "productOrderForm productOrderForm" "bundleProduct bundleProduct" "relatedProduct relatedProduct" "cetelemText cetelemText" "cetelemCalc cetelemCalc" "productDescription productDescription" "productDataSheet productDataSheet" "productArticleNo productArticleNo " "productRating productRating";
  }
}
@media (max-width: 760px) {
  td.variantPrice {
    min-width: 50px;
  }
  .productExtraBlock {
    margin-right: 0;
  }
  .productOrderFormInner {
    padding: 20px 8px;
  }
  .productArticle.articleName {
    padding-left: 8px;
  }
  .productExtraSelectBlock .selectContainer,
  .productExtraSelectBlock .productExtraTitle {
    width: 100%;
  }
  tr.propertyRow .propertyItem {
    display: inline-block;
    margin: 3px 6px 3px 0;
  }
}
@media (max-width: 500px) {
  .productOrderFormInner {
    margin-bottom: 20px;
    grid-template-columns: 1fr;
    grid-template-areas: "productPriceInfo" "productStock" "shippingText" "stockInfoButton" "productVariant" "productQuantity" "quantityErr" "productExtra" "productOrderFooter";
  }
  .productArticle {
    min-width: 120px;
  }
  .productExtraBlock {
    width: 100%;
  }
  .extraContainer label {
    margin-right: 0;
    width: auto;
  }
  .ui-selectmenu-button.ui-button {
    max-width: 90%;
  }
}
