Alexey Boroda / bubochka

$border-basket: #b7b7b7;
$violetBasketColor: #87476a;
$greenColor: #59a926;
.style {
  width: 100%;
  float: left;
}
.new-basket-modal {
  position: absolute;
  width: 100% !important;
  left: 0;
  top: 0;
  z-index: 99998;
  margin-left: 0 !important;
  font-family: Arial;
  text-align: center;
  * {
    box-sizing: border-box;
  }
  .site {
    display: inline-block;
    text-align: left;
    position: relative;
    z-index: 3;
  }
}
.basket-close {
  z-index: 2;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}
#overlay {
  position: fixed;
  z-index: 999;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: 0.85;
  top: 0;
  left: 0;
}


.basket-modal-wr {
   padding: 27px 0 30px 0;
  background: #fff;
  border-radius: 4px;
}

.title-basket-modal{
  border-bottom: 1px solid $border-basket;
  font-size: 20px;
  font-weight: 700;
  padding: 0 20px;
  color: $violetBasketColor;
  padding-bottom: 14px;
}

.table-basket-wrapp {
  padding: 0 20px 0 20px;
}

.table-basket {
  font-size: 15px;
  width:100%;
  a {
    font-size: 15px;
  }
  tr {
    td {
      padding-top: 20px;
      padding-bottom: 20px;
      vertical-align: middle;
      border-bottom: 1px solid $border-basket;
      &.basket-modal-img {
        width: 120px;
        a {


        }
        img {
          max-width: 110px;
        }
      }

      &.b-price-item-total{
        text-align: right;
        font-weight: 700;
        color: $violetBasketColor;
        width: 180px;
      }
      &.basket-modal-count {
        width: 165px;
      }

    }
  }
  .fasovka {
    background: none;
    padding: 0;
    label {
      float: left;
    }
    input {
      float: left;
      margin-top: 3px;
    }
    .style {
      margin-top: 5px;
      &:first-child {
        margin-top: 0;
      }
    }
  }
}


.b-cat-title {
 a {
   color: $greenColor;
   font-weight: 700;
   text-decoration: none;
   &:hover {
     text-decoration: underline;
   }
 }
}

.b-count-txt {
  float: left;
  color: $violetBasketColor;
  font-size: 14px;
  font-weight: 700;
  line-height: 31px;
}
.input-count-wrapp {
  position: relative;
  width: 72px;
  margin-left: 10px;
  float: left;
  input {
    width: 100%;
    height: 31px;
    padding-right: 22px;
    padding-left: 14px;
    border: 1px solid $border-basket;
    border-radius: 4px;
    outline: none !important;
  }
  div {
    position: absolute;
    top: 0;
    right: 0;
    width: 22px;
    height: 100%;
  }
  span {
    display: block;
    position: absolute;
    right: 5px;
    top: 6px;
    width: 12px;
    background-image: url("../img/basket/arrows-b-p.png");
    background-repeat: no-repeat;
    background-position: 50% 0;
    background-size: 8px 4px;
    height: 10px;
    cursor: pointer;
    &.plus {

      border-bottom: 1px solid $border-basket;
    }
    &.minus {
      background-image: url("../img/basket/arrows-b-m.png");
      top: auto;
      bottom: 6px;
      height: 4px;
    }
  }
}
.b-cat {
  color: #464646;

}

.b-price-item {
  color: $violetBasketColor;
  margin-top: 3px;
}

.remove-wrapp {
  margin-top: 26px;
  span {
    position: relative;
    padding-left: 24px;
    font-size: 13px;
    cursor: pointer;
    b {

      color: #464646;
      text-decoration: underline;
      font-weight: normal;
    }
    &:before {
      width: 15px;
      height: 16px;
      position: absolute;
      left: 0;
      top: 50%;
      margin-top: -8px;
      content: '';
      background: url("../img/basket/ico-remove-b.jpg") 50% 50% no-repeat;
    }
    &:hover {
      b {
        text-decoration: none;
      }
    }
  }
}


.b-total-price-block-txt {
  float: left;
  color: #db1111;
  font-size: 13px;
  line-height: 16px;
  padding-top: 28px;
}

.b-total-price-block-num {
  float: right;
  color: $violetBasketColor;
  font-size: 20px;
  padding-top: 27px;
}

.buttons-b-wr {
  margin-top: 4px;
  a {
    margin-top: 15px;
    padding: 0 15px;
    margin-left: 15px;
    float: right;
    display: block;
    height: 31px;
    border: 1px solid $greenColor;
    text-align: center;
    line-height: 31px;
    font-size: 15px;
    text-transform: uppercase;
    border-radius: 3px;
    text-decoration: none !important;
    color: $greenColor;
    &.link-to-basket {
      background: $greenColor;
      color: #fff;
    }
    &:hover {
     color: #f1bc2e;
    }
  }
}

.hidden {
  display: none !important;
}

@media (max-width: 767px) {
  .visible-xs {
    display: block !important;
  }
  .hidden-xs {
    display: none !important;
  }
  .table-basket {

    tr {
      td {
        display: block;
        border-bottom: 0;

        width: 100% !important;
        float: left;
        text-align: center !important;
        padding-top: 0;
        &:last-child {
          border-bottom: 1px solid $border-basket;
        }
        &:first-child {
          margin-top: 20px;
        }
      }
    }
  }
  .b-total-price-block-txt, .b-total-price-block-num {
      text-align: center;
    width: 100%;
  }
  .buttons-b-wr {
    text-align: center;
    a {
      margin-left: 7px;
      margin-right: 7px;
      display: inline-block;
      float: none;
    }
  }
  .basket-modal-wr {
      border-radius: 0;
  }
  .table-basket {
    .fasovka {
      .style {
        text-align: center;
        div {
          display: inline-block;
        }
      }
    }
  }
}