@import "variables";
.view-booking-thank {
  .wrapper-greeting-thank {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    .submit-done {
      width: 50px;
      height: 50px;
      margin-right: 10px;
      i {
        font-size: 50px;
        color: #6AC259;
      }
    }
    .greeting-thank {
      .greeting-thank-top {
        span {
          font-size: @font-size-medium;
          color: @text-color-1;
          &.customer-firstname {
            font-weight: @font-weight-semibold;
          }
        }
      }
      .greeting-thank-bottom {
        span {
          font-size: @font-size-base;
          color: #5e6d77;
          &.customer-email {
            color: @text-color-1;
            font-weight: @font-weight-semibold;
          }
        }
      }
    }
  }
  .wrapper-booking-info {
    padding-left: 30px;
    border-left: 3px solid #5191fa;
    margin-bottom: 45px;
    @media (min-width: 576px) and (max-width: 767.98px) {
      border-left: none;
      border-top: 3px solid #5191fa;
      margin-top: 20px;
      padding-left: 60px;
      padding-top: 20px;
    }
    @media (max-width: 575.98px) {
      border-left: none;
      border-top: 3px solid #5191fa;
      margin-top: 20px;
      padding-left: 60px;
      padding-top: 20px;
    }
    .booking-info-item {
      span {
        font-size: @font-size-base;
        &.info-item-title {
          font-weight: @font-weight-bold;
          color: @text-color-1;
        }
        &.info-item-content {
          color: #818181;
          font-weight: @font-weight-semibold;
        }
      }
    }
  }
  .wrapper-your-infomation {
    h4 {
      font-size: @font-size-h4;
      font-weight: @font-weight-semibold;
      color: @text-color-1;
      margin-bottom: 20px;
    }
    .table-information {
      width: 100%;
      border: @border-gray;
      padding: 20px;
      .tr-information-item {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        @media (max-width: 575.98px) {
          flex-flow: column;
          align-items: flex-start;
        }
        span {
          width: 50%;
          padding: 10px;
          font-size: @font-size-base;
          color: @text-color-2;
          @media (max-width: 575.98px) {
            width: 100%;
          }
          &:first-child {
            color: @text-color-1;
          }
        }
        &+ .tr-information-item {
          border-top: @border-gray;
        }
      }
    }
  }
  .wrapper-your-item {
    width: 100%;
    @media (min-width: 768px) and (max-width: 991.98px) {
      margin-top: 40px;
    }
    @media (min-width: 576px) and (max-width: 767.98px) {
      margin-top: 40px;
    }
    @media (max-width: 575.98px) {
      margin-top: 40px;
    }
    h4 {
      font-size: @font-size-h4;
      font-weight: @font-weight-semibold;
      color: @text-color-1;
      margin-bottom: 20px;
    }
    .block-your-item {
      width: 100%;
      border: @border-gray;
      border-radius: @border-radius-base;
      padding: 20px;
      .block-info-tour {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 20px;
        @media (max-width: 575.98px) {
          flex-flow: column;
          align-items: flex-start;
        }
        .block-info-tour-left {
          display: flex;
          flex-flow: column wrap;
          align-items: flex-start;
          width: 50%;
          @media (max-width: 575.98px) {
            width: 100%;
            margin-bottom: 20px;
          }
          span {
            font-size: @font-size-base;
            &.tour-name {
              font-weight: @font-weight-semibold;
              color: @text-color-1;
              margin-bottom: 10px;
            }
            &.destination {
              color: #5e6d77;
              display: -webkit-box;
              -webkit-line-clamp: 3;
              -webkit-box-orient: vertical;
              height: 60px;
              overflow: hidden;
              text-overflow: ellipsis;
            }
          }
        }
        .block-info-tour-right {
          width: 150px;
          height: 100px;
          @media (max-width: 575.98px) {
            width: 100%;
            height: 50%;
          }
          div {
            width: 100%;
            height: 100%;
            padding-bottom: calc(100% * 1 /1.5);
            position: relative;
            @media (max-width: 575.98px) {
              padding-bottom: calc(100% * 1 / 2);
            }
            img {
              width: 100%;
              height: 100%;
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
              object-position: center;
              object-fit: cover;
            }
          }
        }
      }
      .block-info-tour-booking {
        padding-top: 20px;
        padding-bottom: 20px;
        border-top: @border-gray;
        .block-info-tour-booking-item {
          display: flex;
          align-items: center;
          justify-content: flex-start;
          padding: 5px 0 5px 0;
          span {
            color: @text-color;
            font-size: 16px;
            display: inline-block;
            &:first-child{
              width: 60%;
            }
            &:last-child {
              width: 40%;
              color: #5e6d77;
            }
          }
        }
      }
      .block-info-tour-price{
        padding-top: 20px;
        padding-bottom: 20px;
        border-top: @border-gray;
        .block-info-tour-price-item{
          display: flex;
          align-items: center;
          justify-content: flex-start;
          padding: 5px 0 5px 0;
          span {
            color: @text-color;
            font-size: 16px;
            display: inline-block;
            &:first-child{
              width: 60%;
            }
            &:last-child {
              width: 40%;
              color: #5e6d77;
            }
          }
          &.payment-amount span{
            font-size: 18px;
            font-weight: @font-weight-semibold;
            color: #FB646F;
          }
        }

      }
    }
  }
}