﻿/*PC Builder*/

.ws_bulletGreen {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #72A133;
    color: #FFFFFF;
    font-size: 12px;
    font-weight: bold;

    padding: 1px 6px 1px 6px;
    margin: 5px;
}


.ws_contentPricePCBuilder { 
    border: 1px solid #DDDDDD;
}

    .ws_contentPricePCBuilder .ws_PricePCBuilder {
        background-color:#EEEEEE;
        padding: 15px 10px 10px 0; 
        font-size: 24px;
        font-weight: bold;
        text-align: right;
    }

.js-summary-conf .ws_PricePCBuilder p {
    width: 200px;
}

.ws_contentPricePCBuilder .ws_DetailPricePCBuilder {
    padding: 15px;
}

.ws_contentPricePCBuilder ul {
    padding: 8px;
}

.ws_contentPricePCBuilder h3 {
    font-size: 18px;
    margin: 0px;
    padding: 0px;
    font-weight: lighter;
}



/*Configurator*/
.configuratorCategories {
    background-color: #333333;
    width: 100%;
}

.scrollContainer {
    background-color: #363C4D;
    height: 40px;
    overflow-x: hidden;
    overflow-y: hidden;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
}

 .leftArrow,.rightArrow {
     color: white;
 }

 .ws_radioSelect {
     margin-top: 25px;
     text-align: center;
     position: relative;
     left: 15px;
 }

 .ws_submenu {


 }

 /*.ws_txtqty {
     width: 52%;
 }

 .ws_price{
     font-weight: bold;
 }*/

 /*.text-bold {
     font-weight: bold;
 }*/

 .buttonsConfigurator {
     margin-right: 0;
 }

 .ws_titleconfig {
     text-transform: capitalize;
 }

/* Step Tabs Setup */

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/*.stepItem {
    padding: 10px 15px;
    display: inline-block;
    color: White !important;
    cursor: pointer;
    text-decoration: none !important;
}

.stepItem:hover {
    padding: 10px 15px;
    color: #000000 !important ;
    background-color:#EEEEEE;
}

.selectedStepItem {
    padding: 10px 15px;
    background-color: #EEEEEE;
    color: #000000 !important ;
}*/

 

.nav-tabs-pagination {
  white-space: nowrap;
  overflow-x: hidden;
  overflow-y: hidden;
}
.nav-tabs-pagination > ul > li {
  float: none;
  display: inline-block;
}

.list {
    position:absolute;
    left:0px;
    top:0px;
  	min-width:3000px;
  	margin-left:12px;
    margin-top:0px;
}

.list li{
	display:table-cell;
    position:relative;
    text-align:center;
    cursor:grab;
    cursor:-webkit-grab;
    color:#efefef;
    vertical-align:middle;
}

.scroller {
  text-align:center;
  cursor:pointer;
  display:none;
  padding:7px;
  padding-top:11px;
  white-space:no-wrap;
  vertical-align:middle;
  background-color:#fff;
}

/* Responsive Setup */

.js-tit,.ws_BrandName,.ws_SKUname,.ws_SKUvalue {
    font-size: 12px;
}

 .title-row {
    margin-left: 1px !important;
    margin-right: 1px !important;
 }

 /* Setup Images in Configurator */

 .cf-image-container-review {
     max-height: 45px;
      display: block;
    margin-left: auto;
    margin-right: auto;
 }

 .cf-image-list {
     max-height: 90px !important;
       display: block;
    margin-left: auto;
    margin-right: auto;
 }

 /*Empty Helper*/
 .emptyHelper {
   height: 70px;
 }

 /*Pending Components Style*/
 .js-pending-components>span {
     color: black !important;
 }

  .js-pending-components>ul {
     color: black !important;
 }

  /* Cart Button*/
  .cs-cartButton {
    position: relative;
      width: 100%;
  }

  .js-qty-txt {
      text-align: right;
  }

  /* Arrow Button */

  .arrow_btn {
    position: relative;
    width: 40px;
    height: 42px;
    text-align: center;
    vertical-align: middle;
  }

  .arrow_btn>i {
      position: relative;
      margin-top: 5px;
  }


   .arrow_btn.ar_right {
    float: right;
    margin-top: -45px;
    margin-left: 20px;
    left: 20px;
  }

   /* Review Button */

   .review_tab {
        background-color: #EEE !important;
       margin-bottom: 20px;
   }

   .review_tab>a,.review_tab>a:hover,.review_tab>a:active {
       text-decoration: none;
       color: black !important;
       font-weight: bold;
   }

   /*Required Elements*/

   .js-toRequired {
       text-transform: capitalize;
   }

   .arrow_btn_left,.arrow_btn_right {
       height: 42px;
   }

   .arrow_icon {
       line-height: 25px;
   }

   .configurator-tab {
       position: relative;
        float: left;
        padding: 6px 12px;
        margin-left: -1px;
        line-height: 1.42857143;
        color: #337ab7;
        text-decoration: none !important;
        background-color: #fff;
        border: 1px solid #ddd;  
   }

   .configurator-tab:hover { 
       text-decoration: none !important;
       z-index: 2;
        color: #23527c;
        background-color: #eee;
        border-color: #ddd;
   }


   .configurator-tab.active {
       z-index: 3;
        text-decoration: none !important;
        color: #fff; 
        background-color: #337ab7;
        border-color: #337ab7;
   }

   .configurator-tab-rounded-right { 
       -ms-border-bottom-right-radius: 5px;
       border-bottom-right-radius: 5px;
       -ms-border-top-right-radius: 5px;
       border-top-right-radius: 5px;
   }

.configurator-tab-rounded-left {
       -ms-border-bottom-left-radius: 5px;
       border-bottom-left-radius: 5px;
       -ms-border-top-left-radius: 5px;
       border-top-left-radius: 5px;
   }

div[class*="swiper-prev"],
div[class*="swiper-next"]  { 
  position: absolute;
  top: 50%; 
  margin-top: -22px; 
  cursor: pointer; 
  opacity: .75; 
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block; 
}

div[class*="swiper-next"] {
    right: 0;
    left: auto;
}

div[class*="swiper-prev"] {
    left: 0;
    right: auto;
}

.configurator-badge {
    background-color: red !important;
    float: right;
    position: relative;
    z-index: 999;
    font-size: 12px;
    font-weight: lighter;
}

.configurator-badge.firefox {
    margin-top: -19px !important;
}

.big-arrow, .big-arrow-negative{

  background-color: #7F7F7F;
  padding: 20px;
  color: white;
  white-space: nowrap;
  position: relative;
  cursor: default;
  display: inline-block;
  font-weight: bold;
}

.big-arrow:after,.big-arrow:before {
   left: 100%;
	top: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none; 
}

.big-arrow:after {
    border-left-color: #7F7F7F;
	border-width: 30px;
	margin-top: -30px;
    z-index: 168;
}

.big-arrow:before { 
	border-left-color: white;
	border-width: 36px;
	margin-top: -36px;
     z-index: 168;
}

.big-arrow-negative>span {
    margin-left: 30px;
}

.big-arrow.disabled, .big-arrow-negative.disabled{
  color: #B1B1B3;
  cursor: pointer;
  font-weight: normal;
} 

.xs-arrow, .xs-arrow-negative{

  background-color: #7F7F7F;
  padding: 20px;
  color: white;
  white-space: nowrap;
  position: relative;
  cursor: default;
  display: inline-block;
  font-weight: bold;
}

.xs-arrow:after,.xs-arrow:before {
   left: 100%;
	top: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none; 
}

.xs-arrow:after {
    border-left-color: #7F7F7F;
	border-width: 30px;
	margin-top: -30px;
    z-index: 168;
}

.xs-arrow:before { 
	border-left-color: white;
	border-width: 36px;
	margin-top: -36px;
     z-index: 168;
}

.xs-arrow-negative>span {
    margin-left: 21px;
}

.xs-arrow.disabled, .xs-arrow-negative.disabled{
  color: #B1B1B3;
  cursor: pointer; 
} 

/** -- NEW CONFIGURATOR :D -- */

textarea, input { outline: none; }

.configurator-title {
    border: none;
    font-weight: bold;
}

.configurator-title:active,.configurator-title:focus,.configurator-title:focus-within {
    outline: none;  
}

.configurator-product-row {
    background-color: #fbfbfb;
    padding-top: 5px;
    padding-bottom: 5px;
}

.configurator-product-row>div>input[type="number"] {
    text-align: center;
}

.configurator-product-remove {
    color: red;
    margin-right: 3px;
    margin-top: 4px;
    float: right;
}

.configurator-pcqty{
    width:25px;
    text-align:center;
    font-weight:bold;
}

.configurator-error-border {
    border: 1px solid #dca7a7;
}

.js-configurator-product-qty {
    width: 30px;
}

.js-configurator-product-remove {
    cursor: pointer !important;
}

.configurator-panel-select {
    border: 1px solid #0383D1 !important;
        background-color: #d4d4d4 !important;
    font-weight: bold !important;
}

.js-configurator-titles {
    margin-top: -16px;
    font-size: 11px;
    margin-bottom: 1px;
}

.js-configurator-panel>.panel-body{
    padding-bottom: 0 !important;
}