/* ==========================================================================
Base colors
   ========================================================================== */
/**
 * Table of Contents:
 *
 *  1. Variables for colors
 *  2.
 *  3. 
 *  4.
 *  5.
 *  6.
 *  7.
 *  8.
 *  9.
 *  10. 
 *  11.
 *  12.
 *  13.
 *  14.
 *  15.
 *  16.
 *  17.
 *  18.
 *  19.
 *  20.
 *  21.
 *  22.
 *  23.
 *  24.
 */
/* 1. Variables for colors
   ========================================================================== */
/* ==========================================================================
Base Mixins
   ========================================================================== */
/**
 * Table of Contents:
 *
 *  1. Variables for colors
 *  2.
 *  3. 
 *  4.
 *  5.
 *  6.
 *  7.
 *  8.
 *  9.
 *  10. 
 *  11.
 *  12.
 *  13.
 *  14.
 *  15.
 *  16.
 *  17.
 *  18.
 *  19.
 *  20.
 *  21.
 *  22.
 *  23.
 *  24.
 */
/* 1. Mixins
   ========================================================================== */
/*when used ALLWAYS use in this order 
       @include phones {
                bottom: 117px;
            }

            @include tablets {
                bottom: 190px;
            }

            @include desktops {
                bottom: 300px;
            }
*/
/* ==========================================================================
Base colors
   ========================================================================== */
/**
 * Table of Contents:
 *
 *  1. Variables for colors
 *  2.
 *  3. 
 *  4.
 *  5.
 *  6.
 *  7.
 *  8.
 *  9.
 *  10. 
 *  11.
 *  12.
 *  13.
 *  14.
 *  15.
 *  16.
 *  17.
 *  18.
 *  19.
 *  20.
 *  21.
 *  22.
 *  23.
 *  24.
 */
/* 1. Variables for colors
   ========================================================================== */
/* ==========================================================================
Base utility
   ========================================================================== */
/**
 * Table of Contents:
 *
 *  1. Variables for font-family 
 *  2. Other variables
 *  3. Animations
 *  4. Shadows
 *  5.
 *  6.
 *  7.
 *  8.
 *  9.
 *  10. 
 *  11.
 *  12.
 *  13.
 *  14.
 *  15.
 *  16.
 *  17.
 *  18.
 *  19.
 *  20.
 *  21.
 *  22.
 *  23.
 *  24.
 */
/* 1. Variables for font-family
   ========================================================================== */
/* 2. Other variables
   ========================================================================== */
/*sizes*/
/*input, select*/
/*Buttons*/
/*$button-min-width: 50px;*/
/*$button-max-width: 130px;*/
/*$button-min-width-small: $input-select-height;*/ /*same as $button-min-height*/
/*$button-background-color: $blue;*/
/* 3. animations
   ========================================================================== */
/*Buttons*/
/* ==========================================================================
Base checkout
   ========================================================================== */
/**
 * Table of Contents:
 *
 *  1. checkout-steps
 *  2. page-content-wrapper-checkout
 *  3. profile-notification
 *  4. delivery-info-text  
 *  5. input-fields-checkout
 *  6. Map address
 *  7. base-basket-header  v2
 *  8. base-checkout v2
 *  9. base-promo-code
 *  10.base-basket-sum-up
 *  11.base-quick-basket
 *  12.
 *  13.
 *  14.
 *  15.
 *  16.
 *  17.
 *  18.
 *  19.
 *  20.
 *  21.
 *  22.
 *  23.
 *  24.
 */
/* 1. checkout-step
   ========================================================================== */
/*********used in the top of the page************/
.checkout-step {
  display: inline-block;
  text-align: center;
  width: 100%;
}
.checkout-step ul {
  margin-top: -5px;
  padding-left: 0;
}
.checkout-step ul li {
  display: inline;
  font-size: 1.286em;
  font-weight: 600;
  color: #999999;
}
@media only screen and (max-width: 767px) {
  .checkout-step ul li {
    display: inline-block !important;
    margin-top: 10px;
    text-align: center;
    width: 30px;
    margin-bottom: 25px;
  }
}
.checkout-step ul li i {
  border-radius: 100%;
  border: thin solid #999999;
  position: absolute;
  text-align: center;
  width: 25px;
  font-style: normal;
  height: 25px;
}
.checkout-step ul li span {
  margin-left: 30px;
  margin-right: 15px;
}
@media only screen and (max-width: 767px) {
  .checkout-step ul li span {
    display: none;
  }
}
.checkout-step ul .active-step i {
  background-color: #009fe3;
  border: none;
  color: white;
}
.checkout-step ul .active-step span {
  color: #009fe3;
}
.checkout-step ul .completed-step i {
  background-color: #0077aa;
  border: none;
  color: white;
}
.checkout-step ul .completed-step span {
  color: #0077aa;
}

/* 2. page-content-wrapper-checkout
   ========================================================================== */
.page-content-wrapper-checkout .checkout-flow .breadcrumb-base {
  float: left;
}
@media only screen and (max-width: 767px) {
  .page-content-wrapper-checkout .checkout-flow .breadcrumb-base {
    float: none;
  }
}
.page-content-wrapper-checkout .checkout-flow .need-help {
  float: right;
}
@media only screen and (max-width: 767px) {
  .page-content-wrapper-checkout .checkout-flow .need-help {
    float: left;
  }
}
.page-content-wrapper-checkout .checkout-flow .panel-top {
  padding-top: 19px;
  padding-bottom: 12px;
}
.page-content-wrapper-checkout .checkout-flow .panel-checkout {
  padding-top: 55px;
  background-color: #fff;
  padding-bottom: 55px;
  /*.border {
      margin-top: 10px;
  }*/
}
@media only screen and (max-width: 767px) {
  .page-content-wrapper-checkout .checkout-flow .panel-checkout {
    padding-bottom: 15px;
  }
}
.page-content-wrapper-checkout .checkout-flow .panel-checkout .panel-top {
  background-color: #fff;
}
.page-content-wrapper-checkout .checkout-flow .panel-checkout h2 {
  display: inline;
}
.page-content-wrapper-checkout .checkout-flow .panel-checkout .login-text {
  color: #333333;
  text-decoration: underline;
  float: right;
  margin-top: 11px;
}
.page-content-wrapper-checkout .checkout-flow .panel-checkout button {
  max-width: none;
  width: 100%;
}
.page-content-wrapper-checkout .checkout-flow .panel-checkout .radiobutton-wrapper {
  float: right;
}
@media only screen and (max-width: 767px) {
  .page-content-wrapper-checkout .checkout-flow .panel-checkout .radiobutton-wrapper {
    float: none;
  }
}
.page-content-wrapper-checkout .checkout-flow .panel-checkout .radiobutton-wrapper ul {
  margin-top: 20px;
  padding: 0;
}
@media only screen and (max-width: 767px) {
  .page-content-wrapper-checkout .checkout-flow .panel-checkout .radiobutton-wrapper ul {
    margin-top: 0;
    padding-left: 0px;
  }
}
@media only screen and (min-width: 768px) {
  .page-content-wrapper-checkout .checkout-flow .panel-checkout .radiobutton-wrapper ul {
    padding-left: 10px;
  }
}
@media only screen and (min-width: 992px) {
  .page-content-wrapper-checkout .checkout-flow .panel-checkout .radiobutton-wrapper ul {
    padding-left: 15px;
  }
}
@media only screen and (min-width: 1199px) {
  .page-content-wrapper-checkout .checkout-flow .panel-checkout .radiobutton-wrapper ul {
    padding-left: 0px;
  }
}
.page-content-wrapper-checkout .checkout-flow .panel-checkout .radiobutton-wrapper ul li {
  display: inline-block;
}
@media only screen and (max-width: 767px) {
  .page-content-wrapper-checkout .checkout-flow .panel-checkout .radiobutton-wrapper ul li {
    margin-top: 10px;
    display: block;
  }
}
.page-content-wrapper-checkout .checkout-flow .panel-checkout .radiobutton-wrapper ul li:last-child label {
  margin-right: 0;
}
.page-content-wrapper-checkout .checkout-flow .profile-notification {
  margin-top: 25px;
}

/* 3. profile-notification
   ========================================================================== */
.profile-notification {
  background-color: #dfe5e7;
  padding-top: 25px;
  padding-bottom: 25px;
}
.profile-notification img {
  margin-top: -45px;
  position: absolute;
  margin-left: 100px;
}
.profile-notification i {
  display: inline;
  float: left;
  margin-top: 3px;
}
.profile-notification p {
  margin-left: 20px;
}
@media only screen and (max-width: 767px) {
  .profile-notification p {
    margin: 0;
  }
}
.profile-notification .button-holder-pale .right {
  margin-left: 10px;
  float: right;
  min-width: 70px;
}
.profile-notification .button-holder-pale .right button {
  width: 100%;
  width: auto;
  float: right;
  margin-top: 5px;
}
.profile-notification .button-holder-pale .left {
  overflow: hidden;
}

/* 4. delivery-info-text
   ========================================================================== */
/*delivery-info-text*/
.delivery-info-text {
  margin-top: 15px;
  padding-bottom: 15px;
}
.delivery-info-text .fa-check {
  color: #339900;
}
.delivery-info-text img {
  margin-top: -3px;
}
.delivery-info-text a {
  color: #333333 !important;
  text-decoration: underline;
}
.delivery-info-text #deliveryInfo {
  margin-top: 5px;
}

/* 5. input-fields-checkout
   ========================================================================== */
.input-fields-checkout {
  margin-top: 10px;
}
@media only screen and (max-width: 767px) {
  .input-fields-checkout {
    min-height: 65px;
  }
}
.input-fields-checkout span {
  font-weight: 600;
  font-size: 1.143em;
}
.input-fields-checkout input {
  margin-top: 5px;
}
.input-fields-checkout input[type=text]:disabled, .input-fields-checkout input:hover:disabled, .input-fields-checkout input:focus:disabled {
  background: #e9e9e9;
  cursor: not-allowed;
  border-color: #e9e9e9 !important;
  color: #8d8d8d;
  box-shadow: none !important;
}
.input-fields-checkout input:hover:disabled {
  /*background: $grey-lighter;
  cursor:not-allowed;
  border-color:$grey-lighter;*/
}
.input-fields-checkout textarea {
  height: 70px;
  padding-top: 5px;
}

/* 6. Map address 
   ========================================================================== */
.select-address-map {
  margin-top: 15px;
}
@media only screen and (min-width: 768px) {
  .select-address-map .col-sm-4, .select-address-map .col-md-3 {
    padding-left: 0;
  }
  .select-address-map .col-sm-8, .select-address-map .col-md-9 {
    padding-right: 0;
  }
}
.select-address-map button {
  margin-top: 30px;
  margin-right: 25px;
  float: right;
  max-width: 370px;
  background-position: right 5px center;
}
@media only screen and (max-width: 767px) {
  .select-address-map button {
    margin-right: 0;
  }
}

/*.nav-header-checkout{
    border: none !important;
    float: right;
    margin-top: 73px;


    @include phones {
        padding: 0;
    }

    li {
        display: inline-block;
    }
}*/
/* 7. base-basket-header v2
   ========================================================================== */
.base-basket-header {
  background-color: lightgray;
}
.base-basket-header .base-basket-header-content {
  padding: 30px 0 10px 0;
  text-align: center;
  border-bottom: 1px solid grey;
}
.base-basket-header .base-basket-header-content h2 {
  margin: 0;
}
.base-basket-header .base-basket-actions {
  overflow: hidden;
  padding: 15px 0 15px 0;
}
.base-basket-header .base-basket-actions .align-left {
  float: left;
}
@media only screen and (min-width: 768px) {
  .base-basket-header .base-basket-actions .align-left {
    margin-left: 15px;
  }
}
.base-basket-header .base-basket-actions .align-right {
  float: right;
  text-align: right;
}
@media only screen and (min-width: 768px) {
  .base-basket-header .base-basket-actions .align-right {
    margin-right: 15px;
  }
}
@media only screen and (max-width: 767px) {
  .base-basket-header .base-basket-actions .align-left, .base-basket-header .base-basket-actions .align-right {
    padding-top: 10px;
    float: none;
    text-align: center;
    padding: 10px 15px 0 15px;
  }
}
@media only screen and (max-width: 767px) {
  .base-basket-header .base-basket-actions .align-left button, .base-basket-header .base-basket-actions .align-right button {
    width: 100%;
    max-width: 300px;
  }
}

/* 8. base-checkout v2
   ========================================================================== */
.base-basket {
  background: #fff;
  position: relative;
}
@media only screen and (max-width: 991px) {
  .base-basket {
    padding-bottom: 0px;
  }
}
.base-basket .top {
  text-align: right;
  /*background-color: $grey;*/
  padding-top: 15px;
}
@media only screen and (max-width: 991px) {
  .base-basket .top {
    display: none;
  }
}
.base-basket .top div {
  display: inline-block;
  text-align: right;
}
.base-basket .top .top-size {
  width: 83px;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
}
.base-basket .top .top-quantity {
  text-align: right;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
}
@media only screen and (min-width: 992px) {
  .base-basket .top .top-quantity {
    padding-right: 90px;
  }
}
@media only screen and (min-width: 1199px) {
  .base-basket .top .top-quantity {
    width: 168px;
  }
}
@media only screen and (min-width: 1400px) {
  .base-basket .top .top-quantity {
    width: 190px;
  }
}
.base-basket .top .top-price {
  width: 150px;
  padding-right: 15px;
}
.base-basket .media {
  border-bottom: 1px solid #cccccc;
  padding: 0;
}
@media only screen and (max-width: 991px) {
  .base-basket .media {
    /*padding-bottom: 40px;*/
    padding: 5px 0 25px 0;
    margin-top: 0;
  }
}
@media only screen and (max-width: 991px) {
  .base-basket .media .media-top {
    vertical-align: middle;
  }
}
@media only screen and (max-width: 991px) {
  .base-basket .media .media-top img {
    max-width: 250px;
  }
}
@media only screen and (max-width: 767px) {
  .base-basket .media .media-top img {
    max-width: 75px;
  }
}
.base-basket .media .media-left {
  padding-right: 0;
}
.base-basket .media .media-body {
  padding: 0 15px;
}
.base-basket .media .media-body .media-body-left {
  /*background-color: red;*/
  width: 30%;
  float: left;
}
@media only screen and (max-width: 991px) {
  .base-basket .media .media-body .media-body-left {
    max-width: none;
    float: none;
    width: 100%;
  }
}
.base-basket .media .media-body .media-body-left h3, .base-basket .media .media-body .media-body-left h4 {
  margin: 0;
  font-size: 1em;
}
@media only screen and (max-width: 991px) {
  .base-basket .media .media-body .media-body-left h3.basket-brand-name {
    display: inline;
  }
}
@media only screen and (max-width: 991px) {
  .base-basket .media .media-body .media-body-left h4 {
    display: inline;
  }
}
.base-basket .media .media-body .media-body-left p {
  margin-bottom: 0;
}
.base-basket .media .media-body .media-body-left-bottom {
  float: none;
  padding-top: 25px;
}
@media only screen and (max-width: 991px) {
  .base-basket .media .media-body .media-body-left-bottom {
    text-align: right;
    position: absolute;
    left: 15px;
    right: 15px;
    bottom: 5px;
    padding: 15px 30px 0 0;
  }
}
.base-basket .media .media-body .media-body-left-bottom span {
  text-decoration: none;
  cursor: pointer;
}
.base-basket .media .media-body .media-body-left-bottom span span {
  text-decoration: underline;
}
.base-basket .media .media-body .media-body-left-bottom span .edit-devider {
  text-decoration: none;
}
.base-basket .media .media-body .media-body-left-bottom span .edit-devider-hide {
  display: none;
}
@media only screen and (min-width: 992px) {
  .base-basket .media .media-body .media-body-left-bottom .edit-open {
    display: none;
  }
}
.base-basket .media .media-body .media-body-left-bottom .edit-remove {
  cursor: pointer;
}
.base-basket .media .media-body .media-body-right {
  /*background-color: green;*/
}
@media only screen and (max-width: 991px) {
  .base-basket .media .media-body .media-body-right {
    display: grid;
  }
}
@media only screen and (min-width: 992px) {
  .base-basket .media .media-body .media-body-right {
    display: -webkit-flex;
    display: flex;
    justify-content: space-between;
  }
}
@media only screen and (min-width: 992px) {
  .base-basket .media .media-body .media-body-right .selected-options {
    display: none;
  }
}
@media only screen and (min-width: 992px) {
  .base-basket .media .media-body .media-body-right .in-stock {
    width: 75%;
    -ms-flex: 1;
    -webkit-flex: 1;
    -webkit-flex: 1; /* Safari 6.1+ */
    -ms-flex: 1; /* IE 10 */
    flex: 1;
  }
}
@media only screen and (max-width: 991px) {
  .base-basket .media .media-body .media-body-right .basket-select-wrapper {
    display: none;
  }
}
@media only screen and (min-width: 992px) {
  .base-basket .media .media-body .media-body-right .basket-select-wrapper {
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;
    padding-right: 15%;
  }
}
@media only screen and (min-width: 992px) {
  .base-basket .media .media-body .media-body-right .basket-select-wrapper .basket-size {
    padding-right: 15px;
  }
}
.base-basket .media .media-body .media-body-right .basket-select-wrapper .basket-size select {
  padding-right: 20px;
  max-width: 100px;
}
@media only screen and (max-width: 991px) {
  .base-basket .media .media-body .media-body-right .basket-select-wrapper .basket-size select {
    max-width: none;
    margin-bottom: 5px;
  }
}
@media only screen and (min-width: 992px) {
  .base-basket .media .media-body .media-body-right .basket-select-wrapper .basket-quantity {
    -ms-flex: 1;
    -webkit-flex: 1;
    flex: 1; /*grow*/
  }
}
.base-basket .media .media-body .media-body-right .basket-select-wrapper .basket-quantity select {
  padding-right: 20px;
  max-width: 100px;
}
@media only screen and (max-width: 991px) {
  .base-basket .media .media-body .media-body-right .basket-select-wrapper .basket-quantity select {
    max-width: none;
  }
}
@media only screen and (max-width: 991px) {
  .base-basket .media .media-body .media-body-right .basket-select-wrapper-open {
    display: block;
  }
}
@media only screen and (min-width: 992px) {
  .base-basket .media .media-body .media-body-right .price-wrapper {
    width: 150px;
  }
}
.base-basket .media .media-body .media-body-right .price-wrapper div {
  text-align: right;
}
.base-basket .media .media-body .media-body-right .price-wrapper .price-vat-mobile {
  text-align: left;
}
@media only screen and (min-width: 992px) {
  .base-basket .media .media-body .media-body-right .price-wrapper .price-vat-mobile {
    display: none;
  }
}
.base-basket .media .media-body .media-body-right .price-wrapper .price-current-price {
  font-weight: 600;
}
@media only screen and (max-width: 991px) {
  .base-basket .media .media-body .media-body-right .price-wrapper .price-current-price {
    text-align: left;
    display: inline-block;
    padding-right: 10px;
  }
}
@media only screen and (max-width: 991px) {
  .base-basket .media .media-body .media-body-right .price-wrapper .price-vat {
    display: none;
  }
}
.base-basket .media .media-body .media-body-right .price-wrapper .price-old-price {
  text-decoration: line-through;
}
@media only screen and (max-width: 991px) {
  .base-basket .media .media-body .media-body-right .price-wrapper .price-old-price {
    text-align: left;
    display: inline-block;
  }
}

/* 9. base-promo-code
   ========================================================================== */
.base-promo-code {
  background-color: lightgrey;
  padding: 30px 30px 50px 30px;
  margin-top: 15px;
}
@media only screen and (max-width: 991px) {
  .base-promo-code {
    margin-top: 30px;
  }
}
@media only screen and (max-width: 767px) {
  .base-promo-code {
    background-color: #fff;
    margin-top: 0;
    padding: 15px 15px 30px 15px;
  }
}
.base-promo-code h3 {
  margin: 0;
}
.base-promo-code .input-group {
  z-index: 0;
}
@media only screen and (max-width: 767px) {
  .base-promo-code .input-group {
    max-width: 100%;
  }
}
/* 10. base-basket-sum-up
   ========================================================================== */
.base-basket-sum-up {
  margin-top: 15px;
  background-color: lightgray;
  padding: 15px;
}
@media only screen and (max-width: 991px) {
  .base-basket-sum-up {
    margin-top: 30px;
  }
}
@media only screen and (max-width: 767px) {
  .base-basket-sum-up {
    margin-top: 0;
    padding: 15px 15px 15px 15px;
  }
}
.base-basket-sum-up .base-basket-sum-up-content div {
  overflow: hidden;
}
.base-basket-sum-up .base-basket-sum-up-content div .align-left {
  float: left;
}
@media (max-width: 400px) {
  .base-basket-sum-up .base-basket-sum-up-content div .align-left {
    max-width: 175px;
  }
}
.base-basket-sum-up .base-basket-sum-up-content div .align-right {
  float: right;
}
.base-basket-sum-up .base-basket-sum-up-content .sum-up-total-price {
  font-weight: bold;
  padding-top: 5px;
}
.base-basket-sum-up .sum-up-button-wrapper {
  text-align: right;
  margin-top: 30px;
}
@media only screen and (max-width: 991px) {
  .base-basket-sum-up .sum-up-button-wrapper {
    margin-top: 15px;
  }
}
@media only screen and (max-width: 991px) {
  .base-basket-sum-up .sum-up-button-wrapper button {
    width: 100%;
  }
}

/* 11. base-quick-basket
   ========================================================================== */
.base-quick-basket {
  background-color: lightblue;
}
.base-quick-basket .media-body .media-body-left p {
  display: none;
}
.base-quick-basket .media-body .media-body-right .in-stock {
  /*display: none;*/
}
.base-quick-basket .media-body .media-body-left-bottom {
  position: relative;
  padding-top: 0;
}
.base-quick-basket .media-body .media-body-left-bottom .edit-add-to-favorites {
  display: none;
}
.base-quick-basket .media-body .media-body-left-bottom .edit-open {
  display: none;
}