/* /**
* Frontend Style.
*
* @package  step-skin-for-wp-configurator-pro/assets/css/
* @since  1.0
* @version  1.0
*/

*,
*:before,
*:after {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
}

.pswp,.mfp-hide {
   display: none;
}

body.wpc-step-single-configurator{
   margin: 0px;
   background: var(--wpc-body-bg);
   font-family: var(--wpc-secondary-font);
}

h1,
h2,
h3,
h4,
h5,
h6 {
   font-family: var(--wpc-primary-font);
}


.wpc-step-skin .wpc-single-menu ul.sub-menu {
   right: 0;
}

.wpc-step-skin .wpc-configurator-view .wpc-carousel-dots {
   bottom: 0px;
}

.wpc-step-skin .wpc-show-details {
   left: 30px;
   bottom: 25px;
   z-index: 8;
}

.wpc-step-skin .wpc-setup-skin-controls-inner {
   background: #fff;
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 20px 25px 35px;
   border-bottom: 4px solid var(--wpc-step-skin-control-header-bottom-border-color);
   position: relative;
}

.wpc-step-skin .wpc-setup-skin-controls-inner .main-title {
   margin: 0;
   font-size: 14px;
   text-transform: uppercase;
   letter-spacing: 0.5px;
   color: var(--wpc-step-skin-control-header-title-color);
}

.wpc-step-skin .wpc-controls-parent-wrap .wpc-topbar {
   position: absolute;
   width: 50%;
   height: 4px;
   background: var(--wpc-step-skin-control-header-topbar-color);
   top: -4px;
   left: 0;
   transition: all ease-in-out 0.5s;
}

.wpc-step-skin .wpc-header-parent-wrap {
   display: inline-block;
   margin: 0;
   width: 100%;
   padding: 15px 30px;
}

.wpc-step-skin .wpc-controls-parent-wrap {
   position: fixed;
   right: 0;
   top: 130px;
   z-index: 1;
   width: 430px;
   height: 100%;
   border-top: 4px solid var(--wpc-step-skin-control-header-topbar-bg-color);
}

.wpc-step-skin .wpc-parent-control {
   padding: 50px 35px;
   position: absolute;
   top: 0;
   width: 100%;
   z-index: 9;
   background: var(--wpc-step-skin-control-parent-bg);
   display: none;
   overflow-y: auto;
   height: 100%;
    margin-left: -1px;
}

.wpc-step-skin .wpc-parent-control.active {
   height: calc(100% - 130px);
}

.wpc-step-skin .wpc-parent-control .wpc-icon {
   position: absolute;
   right: 15px;
   top: 15px;
   cursor: pointer;
   color: var(--wpc-step-skin-control-parent-icon-close-color);
}

.wpc-step-skin .wpc-parent-control.active {
   display: block;
}

.wpc-step-skin .wpc-parent-control .wpc-control-lists-inner {
   padding: 0;
   list-style: none;
   margin: 0;
}

.wpc-step-skin .wpc-parent-control .wpc-layer-title-wrap {
   display: flex;
   align-items: center;
}

.wpc-step-skin .wpc-parent-control .wpc-layer-title-wrap .wpc-layer-img {
   margin-right: 20px;
   display: flex;
}

.wpc-step-skin .wpc-parent-control .wpc-layer-title-wrap .wpc-layer-title-inner .wpc-layer-title {
   margin: 0;
   font-size: 18px;
   font-weight: 600;
   color: var(--wpc-step-skin-control-parent-item-color);
}

.wpc-step-skin .wpc-parent-control .wpc-layer-title-wrap .wpc-layer-description {
   margin: 0;
   font-size: 12px;
}

.wpc-step-skin .wpc-parent-control li {
   margin-bottom: 25px;
   cursor: pointer;
}

.wpc-step-skin .wpc-parent-control li:last-child {
   margin-bottom: 0px;
}

.wpc-step-skin .wpc-setup-skin-controls-right {
   display: flex;
   align-items: center;
}

.wpc-step-skin .wpc-sub-control {
   display: none;
}

.wpc-step-skin .wpc-sub-control.wpc-current-opened-group {
   display: block;
}

.wpc-step-skin .wpc-sub-controls {
   overflow-y: auto;
   height: calc(100vh - 305px);
  
   background: #fff;
}

.wpc-step-skin .wpc-sub-controls {
   height: calc(100vh - 370px);
}

.wpc-step-skin .wpc-sub-controls .wpc-control-lists-inner {
   padding: 0;
   margin: 0;
   list-style: none;
   display: flex;
   flex-wrap: wrap;
}

.wpc-step-skin .wpc-sub-controls .wpc-control-lists-inner li {
   height: 140px;
   width: 33.3333%;
   max-width: 166.667px;
   border-right: 1px solid var(--wpc-step-skin-control-item-border-color);
   border-bottom: 1px solid var(--wpc-step-skin-control-item-border-color);
   cursor: pointer;
   color: var(--wpc-step-skin-control-item-color);
   margin-bottom: 0;
   position: relative;
   overflow: hidden;
   word-break: break-word;
}

.wpc-step-skin .wpc-sub-controls .wpc-control-lists-inner li .wpc-layer-title,
.wpc-step-skin .wpc-sub-controls .wpc-control-lists-inner li .wpc-control-item-name {
   margin: 0px;
   font-size: 12px;
   display: block;
   text-transform: uppercase;
   font-weight: 700;
   letter-spacing: 0.5px;
}

.wpc-step-skin .wpc-sub-controls .wpc-control-lists-inner li .wpc-layer-description {
   margin: 0;
   font-size: 12px;
   display: none;
}

.wpc-step-skin .wpc-sub-controls .wpc-control-lists-inner li .wpc-layer-title-wrap,
.wpc-step-skin .wpc-sub-controls .wpc-control-lists-inner li .wpc-controlitem-wrap {
   display: flex;
   padding: 10px;
   text-align: center;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   height: 100%;
}

.wpc-step-skin .wpc-sub-controls .wpc-control-lists-inner li .wpc-control-item-info-inner {
   display: flex;
   flex-direction: column;
}

.wpc-step-skin .wpc-sub-controls .wpc-control-lists-inner li .wpc-control-item-info-inner .amount,
.wpc-step-skin .wpc-sub-controls .wpc-control-lists-inner li .wpc-controlitem-wrap .wpc-icon-label .amount {
   font-size: 12px;
   color: var(--wpc-step-skin-control-item-price-color);
}


.wpc-step-skin .wpc-sub-controls .wpc-control-lists-inner li .wpc-imgwrap, 
.wpc-step-skin .wpc-sub-controls .wpc-control-lists-inner li .wpc-layer-img,
.wpc-step-skin .wpc-sub-controls .wpc-control-lists-inner li .wpc-controlitem-wrap .wpc-control-item-icon-wrap {
   display: inline-flex;
   margin-bottom: 5px;
   padding: 0;
   border: 3px solid var(--wpc-step-skin-control-item-box-border-color)
}

.wpc-step-skin .wpc-sub-controls .wpc-control-lists-inner li.wpc-icon-round .wpc-imgwrap .wpc-control-item-color,
.wpc-step-skin .wpc-sub-controls .wpc-control-lists-inner li.wpc-icon-round .wpc-imgwrap, 
.wpc-step-skin .wpc-sub-controls .wpc-control-lists-inner li.wpc-icon-round .wpc-layer-img,
.wpc-step-skin .wpc-sub-controls .wpc-control-lists-inner li.wpc-icon-round .wpc-controlitem-wrap .wpc-control-item-icon-wrap {
   border-radius: 50px;
}

.wpc-step-skin .wpc-sub-controls .wpc-control-lists-inner li.wpc-icon-round .wpc-imgwrap img, 
.wpc-step-skin .wpc-sub-controls .wpc-control-lists-inner li.wpc-icon-round .wpc-layer-img img,
.wpc-step-skin .wpc-sub-controls .wpc-control-lists-inner li.wpc-icon-round .wpc-controlitem-wrap .wpc-control-item-icon-wrap img {
   border-radius: 50px;
}

.wpc-step-skin .wpc-sub-controls .wpc-control-lists-inner li .wpc-controlitem-wrap .wpc-icon-label {
   display: block;
   margin: 0;
}

.wpc-step-skin .wpc-sub-controls .wpc-control-lists-inner li.wpc-control-type-inline-text .wpc-controlitem-wrap .wpc-control-item-info {
   display: none;
}

.wpc-step-skin .wpc-sub-controls .wpc-control-lists-inner li.wpc-layer-type-form {
   width: 100%;
   max-width: 100%;
   border: none;
   height: 100%;
}

.wpc-step-skin .wpc-sub-controls .wpc-control-lists-inner li.wpc-layer-type-form .wpc-controlitem-wrap {
   text-align: left;
   padding: 20px 25px;
}

.wpc-step-skin .wpc-control-item-label {
   margin: 0px;
}

.wpc-step-skin .wpc-sub-controls .wpc-control-lists-inner li .wpc-controlitem-wrap .wpc-control-item-info {
   margin: 0px;
}

.wpc-step-skin .wpc-hover-price .wpc-plus {
   display: none;
}

.wpc-step-skin .wpc-sub-controls .wpc-control-lists-inner li .wpc-control-item-color {
   width: var(--wpc-step-skin-icon-width);
   height: var(--wpc-step-skin-icon-height);
}


.wpc-step-skin .wpc-control-item-breadcrumbs {
   font-size: 10px;
   margin-top: 2px;
   color: var(--wpc-step-skin-control-header-breadcrumbs-color);
   font-weight: 600;
   text-transform: uppercase;
   position: absolute;
}

.wpc-step-skin .wpc-control-item-breadcrumbs > span {
   cursor: pointer;
}

.wpc-step-skin .wpc-control-item-breadcrumbs > span:last-child {
   cursor: default;
} 

.wpc-step-skin .wpc-control-item-breadcrumbs span + span:before {
   font-family: 'wp-configurator' !important;
   content: '\38';
   margin: 0px 1px 0px 2px;
}


.wpc-step-skin .wpc-control-item-filter {
   font-weight: 600;
   border-bottom: 1px solid  var(--wpc-step-skin-control-filter-border-color);
   padding: 15px 20px;
   display: flex;
}

.wpc-step-skin .wpc-control-item-filter > span {
   margin-right: 15px;
   font-size: 12px;
   text-transform: uppercase;
   font-weight: 600;
   cursor: pointer;
   color: var(--wpc-step-skin-control-filter-color);
}

.wpc-step-skin .wpc-control-item-filter > span:last-child {
   margin-right: 0px;
}

.wpc-step-skin .wpc-setup-skin-controls-inner .icon-bars .wpc-icon {
   font-size: 23px;
   display: flex;
   cursor: pointer;
}


.wpc-step-skin .wpc-setup-skin-controls-left-right > span {
   margin-right: 4px;
   display: flex;
   font-size: 13px;
   cursor: pointer;
}

.wpc-step-skin .wpc-setup-skin-controls-left-right > span:last-child {
   margin-right: 0;
}

.wpc-step-skin .wpc-setup-skin-controls-left-right {
   display: flex;
   align-items: center;
   margin-right: 10px;
}

.wpc-step-skin .wpc-setup-skin-content {
   width: calc(100% - 400px);
   padding: 0px;
}

.wpc-step-skin .step-skin .wpc-form.wpc-cart-form {
   margin: 0px;
}

.wpc-step-skin .step-skin .wpc-form.wpc-cart-form.cart .quantity,
.wpc-step-skin .step-skin .wpc-cart-form-wrapper [data-open-popup-id='cart-form-summary'],
.wpc-step-skin .step-skin.wpc-has-summary .wpc-form.wpc-cart-form.cart {
   display: none;
}

.wpc-step-skin .step-skin.wpc-has-summary .wpc-cart-form-wrapper [data-open-popup-id='cart-form-summary'] {
   display: block;
   height: auto;
   padding: 18px 20px;
   margin: 0px;
   text-align: center;
}

.wpc-step-skin .wpc-setup-skin-footer .wpc-quote-form-wrapper .wpc-primary-btn {
   display: block;
   height: auto;
   padding: 18px 20px;
   margin: 0px;
   text-align: center;
}

.wpc-step-skin .wpc-text-layer-input-group {
   height: 100%;
   width: 100%;
}

.wpc-step-skin .wpc-text-layer-color-preset > span {
   border-color:  #eaeaea;
}

.wpc-step-skin .wpc-control-lists-inner .wpc-control-item.wpc-layer-type-upload img {
   height: var( --wpc-step-skin-icon-height);
   width: var(--wpc-step-skin-icon-width);
   margin-bottom: 15px;
   box-shadow: 0px 0px 0px 4px #f4f4f4;;
}

.wpc-step-skin .wpc-control-lists-inner .wpc-control-item.wpc-layer-type-upload.wpc-icon-round img {
   border-radius: 50px;
}

.wpc-step-skin .wpc-upload-layer-input-wrap {
   margin: 0;
   flex-direction: column;
}

.wpc-step-skin .wpc-ciua-upload-file-btn {
   padding: 8px 12px;
   background: #00beff;
   color: #fff;
   border-color: #00a5dd;
}

.wpc-step-skin .wpc-text-layer-input-wrap label {
   color: #000;
   margin-bottom: 10px;
}

.wpc-step-skin .wpc-floating-icons {
   left: 35px;
   top: 130px;
   z-index: 2;
}

.wpc-step-skin .wpc-header-parent-wrap .wpc-header-element-right {
   display: flex;
}

.wpc-step-skin .wpc-control-next-previous {
   display: flex;
   color: var(--wpc-step-skin-control-header-previous-next-color);
}
.wpc-step-skin .wpc-control-next-previous > span {
   cursor: pointer;
   font-size: 33px;
   border-top: 1px solid var(--wpc-step-skin-control-item-border-color);
   border-right: 1px solid var(--wpc-step-skin-control-item-border-color);
   padding: 20px;
   width: 100%;
   background: #ffff;
   text-align: center;
}

.wpc-step-skin .wpc-control-next-previous span:last-child {
   margin-right: 0px;
   border-right: 0;
}

.wpc-setup-skin-footer .wpc-step-skin-footer-btn {
   display: flex;
   justify-content: center;
   height: auto;
}

.wpc-setup-skin-footer .wpc-step-skin-footer-btn .wpc-primary-btn {
   width: 100%;
    height: auto;
    text-align: center;
    padding: 20px;
}

.wpc-step-skin .wpc-control-next-previous span:hover, .wpc-setup-skin-controls-inner .icon-bars .wpc-icon:hover {
   color: #00beff;
}

.wpc-step-skin .wpc-control-next-previous .wpc-group-navigation-indexes,
.wpc-step-skin .wpc-control-next-previous .wpc-current-group-navigation,
.wpc-step-skin .wpc-control-next > span:not(.wpc-icon),
.wpc-step-skin .wpc-control-previous > span:not(.wpc-icon) {
   display: none;
}


.wpc-step-skin .wpc-control-next-previous .wpc-text-title {
   display: none;
}

.wpc-step-skin .wpc-setup-skin-controls-right .icon-bars {
   margin-left: 6px;
   color: var(--wpc-step-skin-control-header-menu-icon);
}

.wpc-step-skin .wpc-controls-wrap {
   border-left: 1px solid var(--wpc-step-skin-control-item-border-color);
   border-right: 1px solid var(--wpc-step-skin-control-item-border-color);
}

.wpc-step-skin .wpc-sub-controls .wpc-control-lists-inner li.image-loading:before { 
   margin-left: auto;
   margin-right: 5px;
   margin-top: 7px;
}

.wpc-step-skin .wpc-sub-controls .wpc-control-lists .wpc-control-lists-inner > li.current {
   border-color: var(--wpc-step-skin-control-item-border-color);
   box-shadow: inset 100vh 0em #f2f2f2;
}
 
/* Notice */
.wpc-step-skin .woocommerce-message {
   position: absolute;
   z-index: 999;
   left: 50%;
   text-align: center;
   background: #000;
   color: #fff;
   padding: 20px 40px;
   display: inline-block;
   transform: translateX(-50%) translateY(-150px);
   display: flex;
   align-items: center;
   flex-direction: row-reverse;
   animation: noticeAnimate 5s 1;
   animation-fill-mode: forwards;
   animation-delay: 0.5s;
}

.wpc-step-skin .woocommerce-message a {
   padding: 10px 20px;
   border-radius: 3px;
   text-transform: capitalize;
   font-size: 14px;
   font-weight: normal;
   border: none;
   background: #fff;
   color: #0d0d1a;
   display: inline-block;
   margin-left: 15px;
}

.wpc-step-skin .wpc-flyin-inspiration-parent-wrap
   .wpc-inspiration-lists
   .wpc-inspiration-list
   img {
   max-width: 100%;
}


.wpc-step-skin .wc-block-components-notice-banner {
   position: absolute;
   width: 50%;
   z-index: 9;
   margin: 0 auto !important;
   right: 0;
   left: 0;
}



 @keyframes noticeAnimate {
   0% {
       opacity: 1;
       animation-delay: 3s;
   }

   0% {
       opacity: 1;
       transform: translateX(-50%) translateY(-150px);
   }

   25% {
       opacity: 1;
       transform: translateX(-50%) translateY(0%);
   }

   75% {
       opacity: 1;
       transform: translateX(-50%) translateY(0%);
   }

   90% {
       opacity: 1;
       transform: translateX(-50%) translateY(0%);
   }

   100% {
       opacity: 0;
       display: none;
       z-index: -1;
       transform: translateX(-50%) translateY(-50%);
   }
}

.wpc-step-skin .wpc-arrow-left:before {
   content: "\6b";
}

.wpc-step-skin .wpc-arrow-right:before {
   content: "\6c";
}

 @media only screen and (max-width: 991px) {
   .wpc-step-skin body.custom-background.wpc-step-single-configurator {
      overflow: auto;
   }

   .wpc-step-skin .wpc-setup-skin-content {
      margin: 0 auto;
      padding: 0;
      width: calc(100% - 40%);
   }  

   .wpc-step-skin .wpc-controls-parent-wrap {
      position: relative;
      width: 100%;
      top: 0;
   }

   .wpc-step-skin .wpc-parent-control {
      position: relative;
   }

   .wpc-step-skin .wpc-sub-controls {
      overflow-y: auto;
      height: auto;
   }

   .wpc-step-skin .wpc-show-details {
      position: static;
      margin: 20px;
   }
}

@media only screen and (max-width: 768px) {
   
   .wpc-step-skin .wpc-setup-skin-content {
      margin: 0 auto;
      padding: 0;
      width: calc(100% - 30%);
   }
}


@media only screen and (max-width: 700px) {
   .wpc-step-skin .wpc-header-element-right .wpc-share-parent-wrap {
      display: none;
   }
}

.wpc-step-skin .wpc-sub-control .wpc-control-item.wpc-sm-disable-layer .wpc-controlitem-wrap {
   opacity: .5;
   cursor: not-allowed;
}

.wpc-step-skin .wpc-sub-controls .wpc-control-lists-inner li.wpc-layer-type-range {
   max-width: 420px;
   width: 100%;
}

.wpc-step-skin .wpc-sub-controls .wpc-control-lists-inner li.wpc-layer-type-range .wpc-range-layer-input-wrap {
   margin-bottom: 0;
}

.wpc-popup-initialized .wpc-header-parent-wrap {
  z-index: auto;
}