@import 'variables';
@tablet-down: ~'(max-width: 767px)';
@phone-down: ~'(max-width: 425px)';
.bread-crumb-payment{
  margin-left: 50px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  a{
    font-family: "Nunito", sans-serif;
    font-style: normal;
    font-weight: normal;
    font-size: 16px;
    letter-spacing: 0.02em;
    color: #B0B0B0;
    &:hover{
      color: #FB646F;
    }
  }
  i{
    color: #B0B0B0;
    font-size: 12px;
    transform: rotate(-90deg);
    margin-left: 10px;
    margin-right: 10px;
  }
  span{
    font-family: "Nunito", sans-serif;
    font-style: normal;
    font-weight: normal;
    font-size: 16px;
    letter-spacing: 0.02em;
    color: #B0B0B0;
  }
}
.title-payment{
  font-style: normal;
  font-weight: bold;
  font-size: 31px;
  line-height: 48px;
  letter-spacing: 0.03em;
  text-transform: capitalize;
  color: #666666;
  margin-left: 50px;
  margin-top: 60px;
}
.view-payment-paynow {
  width: 570px;
  margin: auto;
  -webkit-box-shadow: 0px 4px 10px rgba(0,0,0,.05), 0px -4px 10px rgba(0,0,0,.05);
  box-shadow: 0px 4px 10px rgba(0,0,0,.05), 0px -4px 10px rgba(0,0,0,.05);
  -webkit-border-radius: 10px;
  border-radius: 10px;
  background: #fff;
  padding: 30px;
  margin-top: 60px;
  margin-bottom: 60px;
  @media @tablet-down{
    width: 100%;
  }
  .view-list-paynow {
    .information{
      padding-bottom: 17px;
      border-bottom: 1px solid #e7e7e7;
      margin-bottom: 30px;
      display: flex;
      justify-content: space-between;

      @media (min-width: @screen-xxxs-min) and (max-width: @screen-xxxs-max) { // 0 ~ 409
        padding-bottom: 20px;
      }

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

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

      @media (min-width: @screen-sm-min)  and (max-width: @screen-sm-max) { //768 ~992
        padding-bottom: 20px;
      }
      h4{
        margin-bottom: 15px;
        font-weight: @font-weight-bold;
        color:@text-color-p7 ;
        font-size: @font-size-h4;
        line-height: @line-height-computed-h4;
      }
      .employee-location{
        display: flex;
        justify-content: flex-start;
        align-items: center;
        @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;
        }

        p{
          font-size: @font-size-h6;
          color: @text-color-2;
        }
        .employee-name{
          margin-right: 80px;
        }
      }
      p{
        margin-bottom: 10px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        i{
          padding-right: 10px;
          color: @text-color-p7;
        }
      }
      .service-name{
        font-weight: 700;
        font-size: 25px;
        line-height: 32px;
        color: #000;
        width: 50%;
        @media @phone-down{
          font-size: 22px;
        }
      }
      .price{
        text-align: right;
        margin-bottom: 10px;
        .icon-nb-price{
          box-shadow: 2px 2px 10px rgba(0,0,0,.1);
          border-radius: 10px;
          background: #fff;
          padding: 6px 12px 6px 12px;
          display: flex;
          justify-content: space-between;
          p{
            margin-bottom: 0;
            font-style: normal;
            font-weight: 600;
            font-size: 16px;
            line-height: 24px;
            letter-spacing: 0.02em;
            text-transform: capitalize;
            color: #666666;
          }
          i{
            width: 20px;
            height: 20px;
            background: #FB646F;
            border-radius: 50%;
            position: relative;
            margin: 2px 5px 2px 2px;
            &::before{
              color: #FFFFFF;
              position: absolute;
              left: 50%;
              top: 50%;
              transform: translate(-50%, -50%);
              font-size: 12px;
            }
          }
        }
      }
    }
    .list-cart {

      @media (min-width: @screen-xxxs-min) and (max-width: @screen-xxxs-max) { // 0 ~ 409
        flex-flow: column wrap;
        align-items: flex-start;
        div[class^="col-"] {
          width: 100%;
        }
      }

      @media (min-width: @screen-xxs-min)  and (max-width: @screen-xxs-max) { // 409 ~ 600
        flex-flow: column wrap;
        align-items: flex-start;
        div[class^="col-"] {
          width: 100%;
        }
      }

      @media (min-width: @screen-xs-min)  and (max-width: @screen-xs-max) { // 600 ~ 768
        flex-flow: column wrap;
        align-items: flex-start;
        div[class^="col-"] {
          width: 100%;
        }
      }

      @media (min-width: @screen-sm-min)  and (max-width: @screen-sm-max) { //768 ~992
        flex-flow: column wrap;
        align-items: flex-start;
        div[class^="col-"] {
          width: 100%;
        }
      }
      .check{
        width: 100%;
        height: 100%;
        @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;
        }
        .image{
          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-fit: cover;
            object-position: center;
          }
          p{
            margin-left: 32px;
            margin-top: 5px;
            margin-bottom: 16px;
          }
        }
        .icheckbox_square-red{
          margin-top: 82px;
          margin-left: 6px;
        }

      }


      .content-check{

        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        @media @tablet-down{
          display: block;
        }
        .check{
          width: 32%;
          margin-right: 26px;
          position: relative;
          height: 120px;
          @media @tablet-down{
            width: 100%;
            margin-right: 0;
          }
          img{
            position: absolute;
            -webkit-border-radius: 10px;
            border-radius: 10px;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            @media @tablet-down{
              width: 100%;
              height: auto;
            }
          }
          .recurring{
            position: absolute;
            right: 10px;
            bottom: 10px;
            color: #ffffff;
            font-size: 12px;
            padding: 2px 4px;
            background-color: #FB646F;
            border-radius: 3px;
          }
        }
        .text-content-check{

          p{
            color: #666666;
            font-size: 16px;
            line-height: 32px;
            i{
              margin-right: 10px;
              margin-top: 2px;
            }
          }
          p.location{
            i.icon-nb-location{
              margin-right: 6px;
              @media @tablet-down{
                margin-right: 5px;
              }
            }
          }
        }
      }

      .price-quantity-total{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-bottom: 10px;
        .price{
          text-align: center;
          .price-title{
            font-weight: 600;
            color: @text-color-1;
            margin-bottom: @margin-bottom-block-xlarge;
          }
          .price-price{
            color: @text-color-2;
          }
        }
        .quantity{
          text-align: center;
          .quantity-title{
            font-weight: 600;
            color: @text-color-1;
            margin-bottom: @margin-bottom-block-xlarge;
          }
          .quantity-quantity{
            color: @text-color-2;
          }
        }
        .total{
          text-align: center;
          p{
            font-weight: 600;
            color: @text-color-1;
            margin-bottom: @margin-bottom-block-xlarge;
          }
          h3{
            font-size: @font-size-medium;
            text-align: right;
            color: @text-color-p7;
            font-weight: @font-weight-semibold;
          }
        }

      }
      .delete{
        i{
          margin-top: 82px;
          margin-left: 48px;
        }
      }

    }
    .cart-totals{
      border-top: 1px solid #e7e7e7;
      margin-top: 21px;
      padding-top: 20px;
      .detail-cart{
        color: #222a3e;

        .block-payment-total{
          display: flex;
          justify-content: space-between;
          align-items: center;

          h3{
            width: 50%;
            font-weight: 600;
            font-size: 20px;
            line-height: 32px;
            color: #222a3e;
            letter-spacing: .02em;
            text-transform: capitalize;
          }
          p {
            width: 50%;
            text-align: right;
            font-weight: 600;
            font-size: 20px;
            line-height: 32px;
            color: #222a3e;
            letter-spacing: .02em;
            text-transform: capitalize;
          }
        }
        .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{
      font-family: Nunito,Sans-serif;
      font-size: 16px;
      position: relative;
      .hikashop_paypal_end {
        .hikashop_paypal_end_message {}
        #hikashop_paypal_form {
          #hikashop_paypal_end_image {
            input[type="submit"]#hikashop_paypal_button{
              padding: 10px;
              text-decoration: none;
              text-transform: capitalize;
              width: 100%;
              background: #fb878f;
              -webkit-border-radius: 10px;
              border-radius: 10px;
              height: 50px;
              border: none;
              color: #FFFFFF;
            }
            input[type="submit"]#hikashop_paypal_button:hover{
              background: #fb646f;
            }

          }
        }
      }
    }
  }
}