/*--- standard variables ---*/
/* @fontFamily1:        'PT Sans', sans-serif;*/
/*--- product item ratio (thumb + content) ---*/
/*--- media queries. When using responsive ---*/
/*--- media queries. When not using responsive ---
@useResponsive:			false;

@breakPointLargePhone:	~"only screen and (min-width : 1px)";
@breakPointTablet:		~"only screen and (min-width : 1px)";
@breakPointDesktop:		~"only screen and (min-width : 1px)";

@breakPointUpToTablet:	~"only screen and (max-width: 1px)";
@breakPointUpToTabletLand:~"only screen and (max-width: 1023px)";
@breakPointUpToDesktop:	~"only screen and (max-width: 1px)";
*/
/*--- media queries. When using responsive: only mobile & desktop ---
@useResponsive:			false;
@breakPointLargePhone:	~"only screen and (min-width : 480px) and (max-width: 768px )";
@breakPointTablet:		~"only screen and (min-width : 999999999px)";
@breakPointDesktop:		~"only screen and (min-width : 768px)";

@breakPointUpToTablet:	~"only screen and (max-width: 768px)";
@breakPointUpToDesktop:	~"only screen and (max-width: 768px)";
*/
/*--- custom class functions ---*/
/*----- Default functions -----*/
/*----- LESS functions -----*/
/* ++ Dashboard Page ++ */

table.orders {
  margin-bottom: 20px;
}
/* -- Dashboard Page -- */

/* ++ Order Page ++ */

.orderStatus + .orderStatus {
  margin-top: 30px;
}
.horizontal-scroll {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
.orderStatus > * {
  min-width: 600px;
}
/* -- Order Page -- */

.account dd,
.account dt {
  width: 50%;
}
.account .valMessage {
  float: left;
  width: 100%;
  color: tomato;
}
.account #agreeCondition input {
  margin-top: 7px;
}
.account #agreeCondition label {
  padding-left: 0;
}
.summary {
  line-height: 24px;
  margin-bottom: 15px;
}
.tableList tbody tr td {
  padding: 5px;
}
.tableList tbody tr:nth-child(odd) td {
  background: white;
}
.tableList tbody tr:nth-child(even) td {
  background: #ececec;
}
.addressPanel {
  border-right: 0;
  margin-top: 15px;
  border-top: 1px solid #dedede;
  padding: 15px 0;
}
@media only screen and (min-width : 768px) {
  .addressPanel {
    border-top: 0;
  }
}
@media only screen and (min-width : 1024px) {
  .addressPanel {
    padding: 0;
  }
}
.addressPanel .currentAddresses .bttn.add {
  margin: 15px 0;
}
.loyaltyPointsPanel {
  background: white;
  text-align: center;
  padding: 15px;
  margin-top: 15px;
  border: 0;
}
.loyaltyPointsPanel .innerPanel {
  background-color: #f1f1f1;
  padding: 15px;
}
.loyaltyPointsPanel .bttn.link {
  text-transform: none;
}
.loyaltyPointsPanel .nameTitle {
  font-weight: 700;
}
.loyaltyPointsPanel h3 {
  font-size: 24px;
  font-weight: 400;
  line-height: 30px;
  margin: 0;
}
.loyaltyPointsPanel h3 + h3 {
  margin-bottom: 15px;
}
.accountPanel .summary .panel dl dt,
.accountPanel .summary .panel dl dd {
  float: left;
  margin: 0;
}
.account-interests .row.type-radio .optionWrap span input,
.account-interests .row.type-radio .optionWrap span label {
  float: left;
  line-height: 28px;
  height: 28px;
}
.account-interests .row.type-radio .optionWrap span input {
  clear: both;
}
.account-interests .row.type-checkbox > label {
  font-size: 14px;
  font-weight: bold;
}
.account-interests .row.type-checkbox .optionWrap span label {
  display: block;
  float: none;
  line-height: 28px;
}
.account-interests .row.type-checkbox .optionWrap span label input {
  margin: 0 2% 0 0;
}
@media only screen and (min-width : 1024px) {
  .addressList {
    width: 45%;
  }
}
.panelUSP {
  padding: 0;
  border: 0;
}
.account #localNav {
  float: left;
  width: 20%;
}
@media only screen and (max-width: 1023px) {
  .account #localNav {
    padding: 0 3% 3%;
    width: 100%;
  }
  .account #localNav li {
    float: left;
    width: 100%;
  }
  .account #localNav li a {
    float: left;
    width: auto;
  }
}
@media only screen and (max-width: 767px) {
  .account #localNav {
    border-bottom: solid 10px #f3f3f3;
  }
}
.account #localNav span {
  font-size: 18px;
  line-height: 24px;
  font-weight: 700;
}
.account #localNav ul li a {
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  display: block;
  padding: 9px 0;
  color: black;
}
.account #localNav ul li.active a {
  color: #4da851;
}
@media only screen and (min-width : 768px) {
  .accountRegister .panelUSP {
    padding-left: 15px;
  }
}
.accountRegister .panelUSP ul {
  list-style-type: none;
  margin-left: 0;
}
.accountRegister .panelUSP ul li {
  line-height: 30px;
}
.accountRegister .panelUSP ul li:before {
  color: #5cb85c;
  pointer-events: none;
  margin-right: 10px;
  content: '\f00c';
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: 14px;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  width: 15px;
  height: 15px;
  line-height: 15px;
}
.accountRegister .bttn {
  margin-bottom: 15px;
}
.account.myDetails *,
.account.dashboard *,
.account.orders *,
.account.addresses * {
  box-sizing: border-box;
}
.account.myDetails .summary,
.account.dashboard .summary,
.account.orders .summary,
.account.addresses .summary {
  float: left;
  margin: 0;
}
.account.myDetails .summary .innerPanel,
.account.dashboard .summary .innerPanel,
.account.orders .summary .innerPanel,
.account.addresses .summary .innerPanel {
  min-height: 175px;
}
.account.myDetails .panel,
.account.dashboard .panel,
.account.orders .panel,
.account.addresses .panel {
  float: left;
  border-right: none;
  width: 100%;
  margin: 0 0 30px 0;
  padding: 0;
  /*&.lastViewed {
            width: 100%;ss
            .innerLastViewed {
                float: left;
                width: 100%;
                border: solid 1px #eaf2ea;
                padding-top: 15px;
                .bttn {
                    float: left;
                    margin: 0 0 15px 15px;
                }
            }
        }*/

}
@media only screen and (min-width : 768px) {
  .account.myDetails .panel,
  .account.dashboard .panel,
  .account.orders .panel,
  .account.addresses .panel {
    width: 50%;
  }
  .account.myDetails .panel.accountDetails,
  .account.dashboard .panel.accountDetails,
  .account.orders .panel.accountDetails,
  .account.addresses .panel.accountDetails,
  .account.myDetails .panel.addressPanel,
  .account.dashboard .panel.addressPanel,
  .account.orders .panel.addressPanel,
  .account.addresses .panel.addressPanel,
  .account.myDetails .panel.generalPanel,
  .account.dashboard .panel.generalPanel,
  .account.orders .panel.generalPanel,
  .account.addresses .panel.generalPanel {
    padding-right: 15px;
  }
  .account.myDetails .panel.accountCredentials,
  .account.dashboard .panel.accountCredentials,
  .account.orders .panel.accountCredentials,
  .account.addresses .panel.accountCredentials,
  .account.myDetails .panel.loyaltyPointsPanel,
  .account.dashboard .panel.loyaltyPointsPanel,
  .account.orders .panel.loyaltyPointsPanel,
  .account.addresses .panel.loyaltyPointsPanel,
  .account.myDetails .panel.accountEmailCredentials,
  .account.dashboard .panel.accountEmailCredentials,
  .account.orders .panel.accountEmailCredentials,
  .account.addresses .panel.accountEmailCredentials {
    padding-left: 15px;
  }
}
.account.myDetails .panel.loyaltyPointsPanel .innerPanel .pointAmount p,
.account.dashboard .panel.loyaltyPointsPanel .innerPanel .pointAmount p,
.account.orders .panel.loyaltyPointsPanel .innerPanel .pointAmount p,
.account.addresses .panel.loyaltyPointsPanel .innerPanel .pointAmount p {
  font-size: 40px;
  margin: 50px 0;
}
.account.myDetails .panel.myOrders,
.account.dashboard .panel.myOrders,
.account.orders .panel.myOrders,
.account.addresses .panel.myOrders,
.account.myDetails .panel.orderStatus,
.account.dashboard .panel.orderStatus,
.account.orders .panel.orderStatus,
.account.addresses .panel.orderStatus {
  width: 100% !important;
}
.account.myDetails .panel.myOrders .innerPanel,
.account.dashboard .panel.myOrders .innerPanel,
.account.orders .panel.myOrders .innerPanel,
.account.addresses .panel.myOrders .innerPanel,
.account.myDetails .panel.orderStatus .innerPanel,
.account.dashboard .panel.orderStatus .innerPanel,
.account.orders .panel.orderStatus .innerPanel,
.account.addresses .panel.orderStatus .innerPanel {
  min-height: 0;
}
.account.myDetails .panel.myOrders .innerPanel table,
.account.dashboard .panel.myOrders .innerPanel table,
.account.orders .panel.myOrders .innerPanel table,
.account.addresses .panel.myOrders .innerPanel table,
.account.myDetails .panel.orderStatus .innerPanel table,
.account.dashboard .panel.orderStatus .innerPanel table,
.account.orders .panel.orderStatus .innerPanel table,
.account.addresses .panel.orderStatus .innerPanel table {
  margin: 0;
}
.account.myDetails .panel.myOrders .innerPanel table td,
.account.dashboard .panel.myOrders .innerPanel table td,
.account.orders .panel.myOrders .innerPanel table td,
.account.addresses .panel.myOrders .innerPanel table td,
.account.myDetails .panel.orderStatus .innerPanel table td,
.account.dashboard .panel.orderStatus .innerPanel table td,
.account.orders .panel.orderStatus .innerPanel table td,
.account.addresses .panel.orderStatus .innerPanel table td {
  padding: 7px;
  background: transparent;
}
.account.myDetails .panel.myOrders .innerPanel .bttn,
.account.dashboard .panel.myOrders .innerPanel .bttn,
.account.orders .panel.myOrders .innerPanel .bttn,
.account.addresses .panel.myOrders .innerPanel .bttn,
.account.myDetails .panel.orderStatus .innerPanel .bttn,
.account.dashboard .panel.orderStatus .innerPanel .bttn,
.account.orders .panel.orderStatus .innerPanel .bttn,
.account.addresses .panel.orderStatus .innerPanel .bttn {
  float: left;
  padding-right: 15px;
  padding-left: 15px;
  margin-top: 15px;
}
.account.myDetails .panel h2,
.account.dashboard .panel h2,
.account.orders .panel h2,
.account.addresses .panel h2 {
  float: left;
  width: 100%;
  padding: 5px 0;
  border-bottom: solid 2px #4ca950;
  color: black;
  font-weight: 400;
  margin: 0;
  text-align: left;
}
.account.myDetails .panel .innerPanel,
.account.dashboard .panel .innerPanel,
.account.orders .panel .innerPanel,
.account.addresses .panel .innerPanel {
  float: left;
  width: 100%;
  background-color: #f6f6f6;
  padding: 15px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  min-height: 175px;
}
.account.myDetails .panel .innerPanel dd,
.account.dashboard .panel .innerPanel dd,
.account.orders .panel .innerPanel dd,
.account.addresses .panel .innerPanel dd {
  font-weight: 600;
}
.account.myDetails .panel .bttn.accountDetailsEdit,
.account.dashboard .panel .bttn.accountDetailsEdit,
.account.orders .panel .bttn.accountDetailsEdit,
.account.addresses .panel .bttn.accountDetailsEdit,
.account.myDetails .panel .bttn.saveEmail,
.account.dashboard .panel .bttn.saveEmail,
.account.orders .panel .bttn.saveEmail,
.account.addresses .panel .bttn.saveEmail,
.account.myDetails .panel .bttn.savePassword,
.account.dashboard .panel .bttn.savePassword,
.account.orders .panel .bttn.savePassword,
.account.addresses .panel .bttn.savePassword,
.account.myDetails .panel .bttn.saveGeneral,
.account.dashboard .panel .bttn.saveGeneral,
.account.orders .panel .bttn.saveGeneral,
.account.addresses .panel .bttn.saveGeneral {
  float: left;
  width: auto;
  padding-right: 15px;
  padding-left: 15px;
  margin-top: 25px;
}
.account.addresses .panel {
  width: 49%;
}
.account.addresses .panel.deliveryAddresses {
  float: right;
}
.account.dashboard .accountDelivery .account_addresses.innerPanel {
  float: left;
  padding: 0;
  min-height: 0;
  background-color: transparent;
}
.account.dashboard .accountDelivery .account_addresses.innerPanel .bttn {
  min-width: 175px;
}
.account.dashboard .accountDelivery .account_addresses.innerPanel .currentAddresses .item {
  float: left;
  width: 100%;
  margin-bottom: 10px;
}
.account.dashboard .accountDelivery .account_addresses.innerPanel .currentAddresses .item .addressData,
.account.dashboard .accountDelivery .account_addresses.innerPanel .currentAddresses .item .addressControls {
  float: left;
  width: 50%;
}
.account.dashboard .accountDelivery .account_addresses.innerPanel .currentAddresses .item .addressControls {
  text-align: right;
}
.account.dashboard .accountDelivery + div {
  float: left;
}
.account.dashboard .accountDelivery + div .bttn {
  min-width: 175px;
}
.account .birthdate .inputWrapper {
  float: left;
  width: 98%;
  margin-bottom: 10px;
}
@media only screen and (min-width : 768px) {
  .account .birthdate .inputWrapper {
    width: calc(100% / 3 - 9px);
  }
  .account .birthdate .inputWrapper.month {
    padding: 0 8px;
  }
}
.account .birthdate .inputWrapper input {
  float: left;
  width: 100% !important;
  display: block !important;
}
.account .newsLetter {
  line-height: 12px !important;
}
.account .newsLetter label {
  line-height: 12px !important;
  padding-left: 0 !important;
}
.couponsPanel {
  width: 100% !important;
}
.couponsPanel .innerPanel h2 {
  display: none;
}
.couponsPanel .availableCoupons {
  display: inline-block;
  width: 100%;
  font-size: 13px;
  margin-top: 15px;
  margin-bottom: 0;
}
.couponsPanel .availableCoupons * {
  box-sizing: border-box;
}
.couponsPanel .availableCoupons .availableCouponList {
  float: left;
  width: 100%;
  margin: 0;
}
.couponsPanel .availableCoupons .availableCouponList li {
  float: left;
  width: 100%;
  margin-bottom: 10px;
  position: relative;
  list-style-type: none;
  height: 40px;
}
@media only screen and (min-width : 768px) {
  .couponsPanel .availableCoupons .availableCouponList li {
    height: 50px;
  }
}
.couponsPanel .availableCoupons .availableCouponList li:nth-child(even) {
  float: right;
}
@media only screen and (min-width : 768px) {
  .couponsPanel .availableCoupons .availableCouponList li {
    width: 49.5%;
  }
}
.couponsPanel .availableCoupons .availableCouponList li label {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 0 20px;
  text-align: center;
  background-color: white;
  border: dashed 1px #4ca950;
  -webkit-border-top-right-radius: 50px;
  -webkit-border-bottom-right-radius: 50px;
  -webkit-border-bottom-left-radius: 50px;
  -webkit-border-top-left-radius: 50px;
  -moz-border-radius-topright: 50px;
  -moz-border-radius-bottomright: 50px;
  -moz-border-radius-bottomleft: 50px;
  -moz-border-radius-topleft: 50px;
  border-top-right-radius: 50px;
  border-bottom-right-radius: 50px;
  border-bottom-left-radius: 50px;
  border-top-left-radius: 50px;
  -moz-background-clip: padding-box;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  height: 40px;
  line-height: 42px;
}
@media only screen and (min-width : 768px) {
  .couponsPanel .availableCoupons .availableCouponList li label {
    height: 50px;
    line-height: 52px;
  }
}
#extraInfo {
  width: 40px;
  height: 40px;
  position: absolute;
  padding: 0;
  font-size: 12px;
  text-align: center;
  line-height: 32px;
  background: rgba(255, 255, 255, 0.82);
  border-radius: 100%;
  top: 10px;
  right: 10px;
}
@media only screen and (min-width : 1280px) {
  #extraInfo {
    width: 50px;
    height: 50px;
    top: 20px;
    right: 20px;
  }
}
#extraInfo .favorite {
  color: #666666;
  font-size: 16px;
}
#extraInfo .favorite.favorite--delete:before {
  position: relative;
  content: "\f004";
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: 20px;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  width: 20px;
  height: 20px;
  line-height: 20px;
  color: #383838;
  vertical-align: middle;
  background-color: #f7f7f7;
  top: 3px;
}
@media only screen and (min-width : 1280px) {
  #extraInfo .favorite.favorite--delete:before {
    font-size: 20px;
    top: 8px;
  }
}
#extraInfo .favorite.favorite--add:before {
  position: relative;
  content: "\f08a";
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: 20px;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  width: 20px;
  height: 20px;
  line-height: 20px;
  color: #666666;
  vertical-align: middle;
  top: 3px;
}
@media only screen and (min-width : 1280px) {
  #extraInfo .favorite.favorite--add:before {
    font-size: 20px;
    top: 8px;
  }
}
#accountTabs .tabContentWrapper td input[type="text"],
#accountTabs .tabContentWrapper td input[type="email"],
#accountTabs .tabContentWrapper td input[type="password"],
#accountTabs .tabContentWrapper td input[type="submit"],
#accountTabs .tabContentWrapper td select,
#accountTabs .tabContentWrapper td textarea {
  margin: 2% 0;
}
#accountTabs .date {
  white-space: nowrap;
}
.account #orderItemContainer .item .total {
  bottom: 30%;
}
.mobileSubMenu {
  font-size: 14px;
  padding: 10px 0px;
  border-top: 1px solid #dedede;
}