.view-checkout-default {
  ul.menu-tab-block {
    border-bottom: none;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    @media (max-width: 575.98px) {
      flex-flow: column;
    }

      li {
      margin: 0 0 0 20px;
      font-weight: bold;
      width: 270px;
      text-align: center;
      &:first-child {
        margin: 0;
        @media (max-width: 575.98px) {
          margin: 0 0 8px 0;
        }
      }
      &.active {
        a {
          background: #1d73ea;
          color: #fff5f5;
        }
      }
      @media (max-width: 575.98px) {
        width: 100%;
        margin: 0 0 8px 0;
        text-align: center;

      }
        @media (min-width: 576px) and (max-width: 767.98px) {
          width: unset;
        }

      a {
        border: 1px solid #c2c0c0f0;
        border-radius: 4px;
        @media (min-width: 768px) and (max-width: 991.98px) {
          font-size: 16px;
        }
        &:active {
          background-color: #ffffff;
        }
      }
    }
  }
  form[name="form-booking"] {
    .tab-content {
      padding: 50px 20px;
      #customer-info {
        .block-customer-info {
          .title {
            border-bottom: 1px solid #cacaca;
            padding-bottom: 10px;
            margin-bottom: 20px;
            h4 {
              font-size: 20px;
            }
          }
          .block-input {
            .first-name, .last-name, .email, .address, .post-code, .city, .company {
              input[type="text"] {
                height: 40px;
                border-radius: 4px;
                &:focus {
                  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
                  outline: none;
                }
                &:active {
                  outline: none;
                }
              }

            }
            .notice-error-1, .notice-error-2, .notice-error {
              font-style: italic;
              font-weight: normal;
              font-size: 16px;
              line-height: 22px;
              text-align: left;
              color: #FB646F;
              display: none;
              &.active {
                display: block;
              }
            }
          }
        }
        .block-info-booking {
          .block-booking-detail {
            margin-bottom: 30px;
            .title {
              border-bottom: 1px solid #cacaca;
              padding-bottom: 10px;
              margin-bottom: 20px;
              h4 {
                font-size: 20px;
              }
            }
            .booking-detail-info {
              & > p {
                display: flex;
                justify-content: space-between;
                align-items: center;
                span {
                  font-size: 16px;
                  &:last-child {
                    font-weight: bold;
                  }
                }
              }
              .content {
                display: flex;
                justify-content: flex-start;
                align-items: center;
                & > p {
                  &:first-child {
                    &::after {
                      content: '-';
                      display: inline-block;
                      margin: 0 10px;
                    }
                  }
                  span {
                    font-size: 16px;
                    &:first-child {
                      font-weight: bold;
                    }
                  }
                }
              }
            }
          }
          .block-room-type {
            margin-bottom: 30px;
            .title {
              border-bottom: 1px solid #cacaca;
              padding-bottom: 10px;
              margin-bottom: 20px;
              h4 {
                font-size: 20px;
              }
            }
            .block-item {
              .detail-roomtype {
                display: flex;
                justify-content: space-between;
                align-items: center;
                span {
                  font-size: 16px;
                  font-weight: bold;
                }
                .left {
                  display: flex;
                  justify-content: flex-end;
                  align-items: center;
                  span {
                    &:first-child {
                      &::after {
                        content:'\00D7';
                        display: inline-block;
                        margin: 0 10px;
                      }
                    }
                  }
                }
              }
              .number-person {
                .total-person {
                  span {
                    font-size: 16px;
                  }
                }
                .total-adult, .total-child {
                  display: flex;
                  justify-content: space-between;
                  align-items: center;
                  font-size: 16px;
                  .total-adult-item, .total-child-item {
                    display: flex;
                    justify-content: flex-end;
                    align-items: center;
                    span {
                      font-size: 16px;
                      &:first-child {
                        &::after {
                          content: '\00D7';
                          display: inline-block;
                          margin: 0 20px;
                        }
                      }
                    }
                  }
                }
              }
            }
          }
          .block-extra-service {
            margin-bottom: 30px;
            .title {
              border-bottom: 1px solid #cacaca;
              padding-bottom: 10px;
              margin-bottom: 20px;
              h4 {
                font-size: 20px;
              }
            }
            .block-item-service {
              .item {
                display: flex;
                align-items: center;
                justify-content: space-between;
                .left {
                  display: flex;
                  justify-content: flex-start;
                  align-items: center;
                  input[type="checkbox"] {
                    margin: 0 15px 0 0;
                    position: relative;
                    width: 20px;
                    height: 20px;
                    color: #363839;
                    border: 1px solid #bdc1c6;
                    border-radius: 4px;
                    appearance: none;
                    outline: 0;
                    cursor: pointer;
                    transition: background 175ms cubic-bezier(0.1, 0.1, 0.25, 1);
                    &::before {
                      position: absolute;
                      content: '';
                      display: block;
                      top: 2px;
                      left: 8px;
                      width: 8px;
                      height: 14px;
                      border-style: solid;
                      border-color: #fff;
                      border-width: 0 2px 2px 0;
                      transform: rotate(45deg);
                      opacity: 0;
                    }
                    &:checked {
                      color: #fff;
                      border-color: #1D72EA;
                      background: #1D72EA;
                      &::before {
                        opacity: 1;
                      }
                      ~ label::before {
                        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
                      }
                    }
                  }
                  label {
                    font-size: 16px;
                    margin-bottom: 0;
                  }
                }
                .right {
                  display: flex;
                  justify-content: flex-end;
                  align-items: center;
                  span {
                    font-size: 16px;
                    &:first-child {
                      &::after {
                        content:'\00D7';
                        display: inline-block;
                        margin: 0 10px;
                      }
                    }
                  }
                }
              }
            }
          }
          .coupon-wrap{
            .coupon{
              border-style: solid;
              border-width: 0.1rem;
              box-shadow: none;
              display: block;
              font-size: 1.6rem;
              letter-spacing: -0.015em;
              margin: 0;
              max-width: 100%;
              padding: 1.5rem 1.8rem;
              width: 100%;

            }
            .alert-success{
                display: none;
            &.active {
                display: block;
                height: 77px;
                font-size: 20px;
              }
            }
            .counpon{
              line-height: 0.25;
            }
          }
          .discount, .coupon, .subtotal{
            .label {
            font-size: 20px;
            color: #149a50;
            @media (max-width: 575.98px) {
              font-size: 18px;
              color: #149a50;
              }
            }
          }
          .block-total {
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-top: 1px solid #cacaca;
            padding-top: 20px;
            span {
              font-weight: bold;
              &:first-child {
                text-transform: uppercase;
                color: #5384C5;
                font-size: 20px;
                @media (max-width: 575.98px) {
                  font-size: 19px;
                }
              }
            }
          }
        }
        .wrapper-button {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-top: 50px;
          button {
            text-transform: uppercase;
            font-size: 18px;
            padding: 8px 16px;
            background: #ffffff;
            border-radius: 4px;
            font-weight: bold;

            @media (max-width: 575.98px) {
              font-size: 16px;
              padding: 5px 7px;
              margin-right: 8px;
            }
            &.btn-previous {
              border: 1px solid #CCCCCC;
              color: #CCCCCC;
              transition: 250ms all ease-in-out;
              &:hover {
                color: #333;
                background-color: #e6e6e6;
                border: 1px solid #adadad;
                text-decoration: none;
              }
            }
            &.btn-next {
              border: 1px solid #5381BA;
              color: #5381BA;
              transition: 250ms all ease-in-out;
              &:hover {
                background-color: #5381BA;
                border: 1px solid #5381BA;
                color: #fff;
                text-decoration: none;
              }
            }
          }
        }
      }
      #summary {
        table {
          &.table-1 {
            .info-booking{
              @media (min-width: 768px) and (max-width: 991.98px) {
                display: block ;
              }
            }
            @media (max-width: 575.98px) {
              table, thead, tbody, th, td, tr, span.check-in, span.check-out {
                display: block;
              }

              thead tr {
                position: absolute;
                top: -9999px;
                left: -9999px;
              }

              tr {
                border: 1px solid #ccc;
                .hollow {
                  height: 43px;
                }
              }

              td {
                border: none;
                border-bottom: 1px solid #eee;
                position: relative;
                padding-left: 50%;
                font-size: 15px;
                .info-booking {
                  width: 60%;
                }
              }

              td:before {
                position: absolute;
                top: 6px;
                left: 6px;
                width: 45%;
                padding-right: 10px;
                white-space: nowrap;
              }

              td:nth-of-type(1):before {
                content: "Booking hotels";
                font-weight: bold;
              }

              td:nth-of-type(2):before {
                content: "Billing address";
                font-weight: bold;
              }
            }
          }
          &.table-2 {
            td,th{
              &:last-child{
                @media (min-width: 576px) {
                  text-align: right;
                  width: 25%;
                }
              }
            }
            @media (max-width: 575.98px) {
              table, thead, tbody, th, td, tr, span.check-in, span.check-out {
                display: block;
              }

              thead tr {
                position: absolute;
                top: -9999px;
                left: -9999px;
              }

              tr {
                border: 1px solid #ccc;
              }

              td {
                border: none;
                border-bottom: 1px solid #eee;
                position: relative;
                padding-left: 50%;
                font-size: 15px;
                .info-booking {
                  width: 60%;
                }
                .detail-booking {
                }
              }

              td:before {
                position: absolute;
                top: 6px;
                left: 6px;
                width: 45%;
                padding-right: 10px;
                white-space: nowrap;
              }

              td:nth-of-type(1):before {
                content: "Room type";
                font-weight: bold;
              }

              td:nth-of-type(2):before {
                content: "Person";
                font-weight: bold;
              }

              td:nth-of-type(3):before {
                content: "Total";
                font-weight: bold;
              }
            }
          }
          &.table-3 {
            td,th{
              &:last-child{
                @media (min-width: 576px) {
                  text-align: right;
                  width: 25%;
                }
              }
            }
            @media (max-width: 575.98px) {
              table, thead, tbody, th, td, tr, span.check-in, span.check-out {
                display: block;
              }

              thead tr {
                position: absolute;
                top: -9999px;
                left: -9999px;
              }

              tr {
                border: 1px solid #ccc;
              }

              td {
                border: none;
                border-bottom: 1px solid #eee;
                position: relative;
                padding-left: 50%;
                font-size: 15px;
                .info-booking {
                  width: 60%;
                }
                .detail-booking {
                }
              }

              td:before {
                position: absolute;
                top: 6px;
                left: 6px;
                width: 45%;
                padding-right: 10px;
                white-space: nowrap;
              }

              td:nth-of-type(1):before {
                content: "Service";
                font-weight: bold;
              }

              td:nth-of-type(2):before {
                content: "Quantity";
                font-weight: bold;
              }

              td:nth-of-type(3):before {
                content: "Total";
                font-weight: bold;
              }
            }
          }
          &.table-4 {
            td,th{
              &:last-child{

                @media (min-width: 576px) {
                  text-align: right;
                  width: 25%;
                }
              }
            }
            tr {
              td {
                text-align: right;
                font-weight: bold;
              }
            }
          }
          thead {
            tr {
              th {
                padding: 8px;
                vertical-align: middle;
                font-size: 16px;

              }
            }
          }
          tbody {
            tr {
              td {
                padding: 8px;
                vertical-align: middle;
                font-size: 16px;

                @media (max-width: 575.98px) {
                  display: block;
                }
                .check-in, .check-out {
                  @media (min-width: 576px) and (max-width: 767.98px) {
                    display: block;
                  }
                  @media (min-width: 768px) and (max-width: 991.98px) {
                    display: block;

                  }
                }
                span:last-child {
                  @media (min-width: 576px) and (max-width: 767.98px) {
                    font-weight: 600;
                  }
                  @media (min-width: 768px) and (max-width: 991.98px) {
                    font-weight: 600;
                  }
                }
                span {
                  &.info-booking {
                    display: inline-block;
                    width: 120px;
                    @media (min-width: 576px) and (max-width: 767.98px) {
                      display: block;
                    }
                    @media (min-width: 576px) and (max-width: 767.98px) {
                      &::after {
                        content: ':';
                      }
                    }
                    @media (min-width: 768px) and (max-width: 991.98px) {
                      &::after {
                        content: ':';
                      }
                    }
                  }
                  &.detail-booking {
                    display: inline-block;
                    &::before {
                      content: ':';
                      display: inline-block;
                      margin: 0 10px;
                      @media (max-width: 575.98px) {
                        content: '';
                        margin: 0;
                      }
                      @media (min-width: 576px) and (max-width: 767.98px) {
                        content: '';
                        margin: 0;
                      }
                      @media (min-width: 768px) and (max-width: 991.98px) {
                        content: '';
                        margin: 0;
                      }
                    }
                  }
                }
                .number-person-1 {
                  display: flex;
                  justify-content: flex-start;
                  align-items: center;
                  @media (max-width: 575.98px) {
                    flex-flow: column;
                    align-items: flex-start;
                  }
                  @media (min-width: 576px) and (max-width: 767.98px) {
                    flex-flow: column;
                    align-items: flex-start;
                  }
                  @media (min-width: 768px) and (max-width: 991.98px) {
                    flex-flow: column;
                    align-items: flex-start;
                  }
                  .left {
                    &::after {
                      content: '-';
                      display: inline-block;
                      margin: 0 10px;
                      @media (max-width: 575.98px) {
                        content: '';
                      }
                      @media (min-width: 576px) and (max-width: 767.98px) {
                        content: '';
                      }
                      @media (min-width: 768px) and (max-width: 991.98px) {
                        content: '';
                      }
                    }
                  }
                  .right {
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                    @media (max-width: 575.98px) {
                      flex-flow: column;
                    }
                    @media (min-width: 576px) and (max-width: 767.98px) {
                      flex-flow: column;
                    }
                    @media (min-width: 768px) and (max-width: 991.98px) {
                      flex-flow: column;
                    }
                    p {
                      margin: 0;
                      &:first-child {
                        &::after {
                          content: '/';
                          display: inline-block;
                          margin: 0 10px;
                          @media (max-width: 575.98px) {
                            content: '';
                            display: block;
                          }
                          @media (min-width: 576px) and (max-width: 767.98px) {
                            content: '';
                            display: block;
                          }
                          @media (min-width: 768px) and (max-width: 991.98px) {
                            content: '';
                            display: block;
                          }
                        }
                      }
                      span {
                        font-size: 16px;
                        &:first-child {
                          &::after {
                            content: ':';
                            display: inline-block;
                            margin: 0 10px;
                          }
                        }
                      }
                    }
                  }
                }
                .number-person-2 {
                  display: flex;
                  justify-content: flex-start;
                  align-items: center;
                  @media (max-width: 575.98px) {
                    flex-flow: column;
                    align-items: flex-start;
                  }
                  @media (min-width: 576px) and (max-width: 767.98px) {
                    flex-flow: column;
                    align-items: flex-start;
                  }
                  @media (min-width: 768px) and (max-width: 991.98px) {
                    flex-flow: column;
                    align-items: flex-start;
                  }
                  .left {
                    &::after {
                      content: '-';
                      display: inline-block;
                      margin: 0 10px;
                      @media (max-width: 575.98px) {
                        content: '';
                      }
                      @media (min-width: 576px) and (max-width: 767.98px) {
                        content: '';
                      }
                      @media (min-width: 768px) and (max-width: 991.98px) {
                        content: '';
                      }
                    }
                  }
                  .right {
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                    @media (max-width: 575.98px) {
                      flex-flow: column;
                    }
                    @media (min-width: 576px) and (max-width: 767.98px) {
                      flex-flow: column;
                    }
                    @media (min-width: 768px) and (max-width: 991.98px) {
                      flex-flow: column;
                    }
                    p {
                      margin: 0;
                      &:nth-child(even) {
                        &::before {
                          content: '/';
                          display: inline-block;
                          margin: 0 10px;
                          @media (max-width: 575.98px) {
                            content: '';
                          }
                          @media (min-width: 576px) and (max-width: 767.98px) {
                            content: '';
                          }
                          @media (min-width: 768px) and (max-width: 991.98px) {
                            content: '';
                          }
                        }
                      }
                      span {
                        font-size: 16px;
                        &:first-child {
                          &::after {
                            content: ':';
                            display: inline-block;
                            margin: 0 10px;
                          }
                        }
                      }
                    }
                  }
                }
              }
            }
          }
        }
        .wrapper-button {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-top: 50px;
          button {
            text-transform: uppercase;
            font-size: 18px;
            padding: 8px 16px;
            background: #ffffff;
            border-radius: 4px;
            font-weight: bold;
            &.btn-previous {
              border: 1px solid #CCCCCC;
              color: #CCCCCC;
              transition: 250ms all ease-in-out;
              &:hover {
                color: #333;
                background-color: #e6e6e6;
                border: 1px solid #adadad;
                text-decoration: none;
              }
              @media (max-width: 575.98px) {
                font-size: 16px;
                padding: 5px 7px;
                margin-right: 8px;
              }
            }
            &.btn-confirm-booking {
              border: 1px solid #5381BA;
              color: #5381BA;
              transition: 250ms all ease-in-out;
              @media (max-width: 575.98px) {
                font-size: 16px;
                padding: 5px 7px;
                margin-right: 8px;
              }
              &:hover {
                background-color: #5381BA;
                border: 1px solid #5381BA;
                color: #fff;
                text-decoration: none;
              }
            }
          }
        }
      }
      #payment {
        .block-select-method {
          ul {
            li {
              @media (min-width: 576px) and (max-width: 767.98px) {

              }
              @media (min-width: 768px) and (max-width: 991.98px) {
                margin-top: 20px;
              }
              button {
                @media (max-width: 575.98px) {
                  margin-bottom: 8px;
                }
              }
            }
          }
        }
        .wrapper-button {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-top: 50px;
          button {
            text-transform: uppercase;
            font-size: 18px;
            padding: 8px 16px;
            background: #ffffff;
            border-radius: 4px;
            &.btn-previous {
              border: 1px solid #CCCCCC;
              color: #CCCCCC;
              transition: 250ms all ease-in-out;
              &:hover {
                color: #333;
                background-color: #e6e6e6;
                border: 1px solid #adadad;
                text-decoration: none;
              }
            }
          }
        }
      }
    }
  }
  .tab-content {
    .block-checkout {
      .hikashop_paypal_end {
        .hikashop_paypal_end_image {
          p {
            text-align: center;
            font-size: 16px;
          }
          .img-paypal {
            width: 300px;
            height: 200px;
            margin: 0 auto;
            div {
              width: 100%;
              height: 100%;
              padding-bottom: calc(100% * 200 / 300);
              position: relative;
              img {
                width: 100%;
                height: 100%;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                object-position: center;
                object-fit: cover;
                &.lazy {
                  background-image: url("../images/giphy.gif");
                  background-repeat: no-repeat;
                  background-position: 50% 50%;
                }
              }
            }
          }
          input#hikashop_paypal_button {
            border: 1px solid #5381BA;
            color: #5381BA;
            background-color: #ffffff;
            transition: 250ms all ease-in-out;
            border-radius: 4px;
            padding: 8px 16px;
            float: right;
            &:hover {
              background-color: #5381BA;
              border: 1px solid #5381BA;
              color: #fff;
              text-decoration: none;
            }
          }
        }
      }
      .content-cancel, .content-banktransfer {
        margin-top: 30px;
        padding: 20px;
        color: #a94442;
        background-color: #f2dede;
        border-color: #ebccd1;
        text-align: center;
      }
      .content-thanks {
        margin-top: 30px;
        padding: 20px;
        color: #ffffff;
        background-color: #79d389;
        border-color: #4db960;
        text-align: center;
        pre {
          width: 50%;
          background: no-repeat;
          color: #fff;
          text-align: center;
          font-size: 20px;
          margin: 0 auto;
        }
      }
    }
  }
}