@import 'variables';
.view-list-cart {
  .block-confirm {
    .jc-bs3-container {
      width: 100%;
      .jc-bs3-row {
        margin: auto;
        width: 100%;
        .jconfirm-box-container {
          width: 30%;
          left: 50%;
          transform: translateX(-50%)!important;
          .jconfirm-title {
            color: red;
            font-weight: @font-weight-bold;
          }
          @media (min-width: @screen-xxxs-min) and (max-width: @screen-xxxs-max) {
            width: 100%;
            margin: auto;
          }
          @media (min-width: @screen-xxs-min)  and (max-width: @screen-xxs-max) {
            width: 100%;
            margin: auto;
          }
          @media (min-width: @screen-xs-min)  and (max-width: @screen-xs-max) { // 600 ~ 768
            width: 100%;
            margin: auto;
          }
          @media (min-width: @screen-sm-min)  and (max-width: @screen-sm-max) { //768 ~992
            width: 50%;
          }
        }
      }
    }
  }
  .wrapper-button {
    margin-bottom: 30px;
  }
  .list-cart {
    background-color: @text-color-p6;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.15);
    margin-bottom: 20px;
    padding: 20px 5px 20px 5px;
    @media (min-width: @screen-xxxs-min) and (max-width: @screen-xxxs-max) { // 0 ~ 409
      position: relative;
    }

    @media (min-width: @screen-xxs-min)  and (max-width: @screen-xxs-max) { // 409 ~ 600
      position: relative;
    }

    @media (min-width: @screen-xs-min)  and (max-width: @screen-xs-max) { // 600 ~ 768
      position: relative;
    }
    @media (min-width: @screen-sm-min)  and (max-width: @screen-sm-max) { //768 ~992
      display: flex;
      flex-flow: row wrap;
      justify-content: center;
      align-items: center;
      .col-sm-2 {
        width: 30%;
        order: 1;
      }
      .col-sm-4 {
        width: 50%;
        order: 4;
        transform: translateX(20%);
      }
      .col-sm-5 {
        width: 50%;
        order: 2;
      }
      .col-sm-1 {
        width: 10%;
        order: 3;
      }
    }
    .check{
      display: flex;
      justify-content: space-between;
      align-items: center;
      @media (min-width: @screen-xxxs-min) and (max-width: @screen-xxxs-max) { // 0 ~ 409
        justify-content: flex-start;
      }

      @media (min-width: @screen-xxs-min)  and (max-width: @screen-xxs-max) { // 409 ~ 600
        flex-flow: column wrap;
        justify-content: center;
      }

      @media (min-width: @screen-xs-min)  and (max-width: @screen-xs-max) { // 600 ~ 768
        flex-flow: column wrap;
        justify-content: center;
      }

      .image{
        width: 110px;
        height: 130px;
        @media (min-width: @screen-xxxs-min) and (max-width: @screen-xxxs-max) { // 0 ~ 409
          margin-left: 70px;
        }

        @media (min-width: @screen-xxs-min)  and (max-width: @screen-xxs-max) { // 409 ~ 600
          margin-left: 30px;
        }

        @media (min-width: @screen-xs-min)  and (max-width: @screen-xs-max) { // 600 ~ 768
          margin-left: 30px;
        }

        @media (min-width: @screen-sm-min)  and (max-width: @screen-sm-max) { //768 ~992
          margin-left: 30px;
        }
        .img-block {
          width: 110px;
          height: 110px;
          div {
            width: 100%;
            height: 100%;
            padding-bottom: calc(100% * 1 / 1);
            position: relative;
            img {
              width: 100%;
              height: 100%;
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
              object-position: center;
              object-fit: cover;
            }
          }
        }
        p{
          font-size: @font-size-small;
          color: @text-color-2;
          margin-top: 5px;
          text-align: center;
        }
      }
    }

    .information{
      h4{
        font-weight: @font-weight-bold;
        color:@text-color-p7 ;
        line-height: @line-height-computed-h4;
        margin-bottom: 10px;
      }
      .employee-location{
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin-bottom: 10px;
        @media (min-width: @screen-xxxs-min) and (max-width: @screen-xxxs-max) { // 0 ~ 409
          flex-flow: column wrap;
          align-items: flex-start;
        }

        @media (min-width: @screen-xxs-min)  and (max-width: @screen-xxs-max) { // 409 ~ 600
          flex-flow: column wrap;
          align-items: flex-start;
        }

        @media (min-width: @screen-xs-min)  and (max-width: @screen-xs-max) { // 600 ~ 768
          flex-flow: column wrap;
          align-items: flex-start;
        }

        @media (min-width: @screen-sm-min)  and (max-width: @screen-sm-max) { //768 ~992
          flex-flow: column wrap;
          align-items: flex-start;
        }
        p {
          font-size: @font-size-h6;
          color: @text-color-2;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          i {
            color: @text-color-p7;
            margin-right: 10px;
          }
        }
        .employee-name{
          margin-right: 45px;
          @media (min-width: @screen-xxxs-min) and (max-width: @screen-xxxs-max) { // 0 ~ 409
            margin-right: 0;
            margin-bottom: 10px;
          }

          @media (min-width: @screen-xxs-min)  and (max-width: @screen-xxs-max) { // 409 ~ 600
            margin-right: 0;
            margin-bottom: 10px;
          }

          @media (min-width: @screen-xs-min)  and (max-width: @screen-xs-max) { // 600 ~ 768
            margin-right: 0;
            margin-bottom: 10px;
          }

          @media (min-width: @screen-sm-min)  and (max-width: @screen-sm-max) { //768 ~992
            margin-right: 0;
            margin-bottom: 10px;
          }
        }
      }
      p.date{
        i{
          margin-right: 10px;
          color: @text-color-p7;
        }
      }
      .service-name{
        font-weight: @font-weight-semibold;
        color: @text-color-1;
        margin-bottom: 10px;
      }
      .date, .employee-name{
        font-size: @font-size-h6;
        color: @text-color-2;
      }
    }

    .price-quantity-total{
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      height: 110px;
      @media (min-width: @screen-xxxs-min) and (max-width: @screen-xxxs-max) { // 0 ~ 409
        height: auto;
        margin-top: 20px;
      }

      @media (min-width: @screen-xxs-min)  and (max-width: @screen-xxs-max) { // 409 ~ 600
        height: auto;
        margin-top: 20px;
      }

      @media (min-width: @screen-xs-min)  and (max-width: @screen-xs-max) { // 600 ~ 768
        height: auto;
        margin-top: 20px;
      }

      @media (min-width: @screen-sm-min)  and (max-width: @screen-sm-max) { //768 ~992
        height: auto;
        margin-top: 20px;
      }
      .price{
        text-align: center;
        .price-title{
          font-weight: @font-weight-semibold;
          color: @text-color-1;
          margin-bottom: 30px;
          @media (min-width: @screen-xxxs-min) and (max-width: @screen-xxxs-max) { // 0 ~ 409
            margin-bottom: 20px;
          }

          @media (min-width: @screen-xxs-min)  and (max-width: @screen-xxs-max) { // 409 ~ 600
            margin-bottom: 20px;
          }

          @media (min-width: @screen-xs-min)  and (max-width: @screen-xs-max) { // 600 ~ 768
            margin-bottom: 20px;
          }

          @media (min-width: @screen-sm-min)  and (max-width: @screen-sm-max) { //768 ~992
            margin-bottom: 20px;
          }
        }
        .price-price{
          color: @text-color-2;
        }
      }
      .quantity{
        text-align: center;
        .quantity-title{
          font-weight: @font-weight-semibold;
          color: @text-color-1;
          margin-bottom: 30px;
          @media (min-width: @screen-xxxs-min) and (max-width: @screen-xxxs-max) { // 0 ~ 409
            margin-bottom: 20px;
          }

          @media (min-width: @screen-xxs-min)  and (max-width: @screen-xxs-max) { // 409 ~ 600
            margin-bottom: 20px;
          }

          @media (min-width: @screen-xs-min)  and (max-width: @screen-xs-max) { // 600 ~ 768
            margin-bottom: 20px;
          }

          @media (min-width: @screen-sm-min)  and (max-width: @screen-sm-max) { //768 ~992
            margin-bottom: 20px;
          }
        }
        .quantity-quantity{
          color: @text-color-2;
        }
      }
      .total{
        text-align: center;
        p{
          font-weight: @font-weight-semibold;
          color: @text-color-1;
          margin-bottom: 27px;
          @media (min-width: @screen-xxxs-min) and (max-width: @screen-xxxs-max) { // 0 ~ 409
            margin-bottom: 20px;
          }

          @media (min-width: @screen-xxs-min)  and (max-width: @screen-xxs-max) { // 409 ~ 600
            margin-bottom: 20px;
          }

          @media (min-width: @screen-xs-min)  and (max-width: @screen-xs-max) { // 600 ~ 768
            margin-bottom: 20px;
          }

          @media (min-width: @screen-sm-min)  and (max-width: @screen-sm-max) { //768 ~992
            margin-bottom: 20px;
          }
          &:last-child {
            font-size: @font-size-medium;
            color: @text-color-p7;
            font-weight: @font-weight-semibold;
            margin: 0;
          }
        }
      }

    }
      .delete{
      height: 130px;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      @media (min-width: @screen-xxxs-min) and (max-width: @screen-xxxs-max) { // 0 ~ 409
        position: absolute;
        top: 20px;
        right: 0;
        z-index: 1;
      }

      @media (min-width: @screen-xxs-min)  and (max-width: @screen-xxs-max) { // 409 ~ 600
        position: absolute;
        top: 20px;
        right: 0;
        z-index: 1;
      }

      @media (min-width: @screen-xs-min)  and (max-width: @screen-xs-max) { // 600 ~ 768
        position: absolute;
        top: 20px;
        right: 0;
        z-index: 1;
      }

      @media (min-width: @screen-sm-min)  and (max-width: @screen-sm-max) { //768 ~992
        height: auto;
      }
    }

  }
  .cart-totals{
    .detail-cart{
      h3{
        font-weight: @font-weight-bold;
        margin-bottom: 15px;
      }
      .block-payment-total, .block-shipping,.order_total_price {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 5px 0 17px;
        p {
          font-weight: @font-weight-semibold;
          color: @text-color-1;
        }
      }
      .block-payment-total {
        margin-bottom: 10px;
      }
      .order_total_price {
        padding: 5px 5px 5px 17px;
        background-color: @background-color-pink;
        margin-top: 20px;
        p {
          color: @text-color-4;
        }
      }
    }
    .checkout-cart{
      float: right;
      margin-top: 20px;
    }
  }
}