@import 'variables';
.view-list-event {
  .block-alert {
    .jc-bs3-container {
      width: 100%;
      .jc-bs3-row {
        margin: auto;
        width: 100%;
        .jconfirm-box-container {
          width: 22%;
          left: 50%;
          transform: translateX(-50%)!important;
          .jconfirm-box {
            height: 150px;
            padding: 20px;
            position: relative;
            overflow: unset;
            .jconfirm-content-pane {
              height: 100% !important;
              margin-bottom: 0;
              .jconfirm-content {
                height: 100%;
                position: relative;
                & > div {
                  position: absolute;
                  width: 100%;
                  top: 50%;
                  left: 0;
                  transform: translateY(-50%);
                  .wrapper-alert {
                    width: 100%;
                    display: flex;
                    flex-flow: column wrap;
                    align-items: flex-start;
                    padding-left: 80px;
                    span.title-box {
                      color: #FB646F;
                      font-size: 20px;
                      font-weight: 600;
                      display: inline-block;
                      margin-bottom: 10px;
                    }
                    span.content-box {
                      color: #666666;
                      font-size: 16px;
                    }
                  }
                  i.icon-nb-hand {
                    position: absolute;
                    top: 50%;
                    left: 0;
                    transform: translateY(-50%) rotate(45deg);
                    color: #FB646F;
                    font-size: 56px;
                  }
                }
              }
            }
            .jconfirm-buttons {
              position: absolute;
              top: 50%;
              right: -21px;
              transform: translateY(-50%);
              width: 45px;
              height: 45px;
              button {
                border-radius: 50%;
                width: 45px;
                height: 45px;
                padding: 0;
                display: flex;
                align-items: center;
                justify-content: center;
                i {
                  font-size: 16px;
                }
              }
            }
          }
          @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: 60%;
            margin: auto;
          }
          @media (min-width: @screen-sm-min)  and (max-width: @screen-sm-max) { //768 ~992
            width: 40%;
          }
          @media (min-width: @screen-md-min)  and (max-width: @screen-md-max) { // 992 ~ 1200
            width: 36%;
          }
        }
      }
    }
  }
  .toolbar-filter {
    border: 1px solid #c69500;
    padding: 10px 17px 10px 9px;
    .calendar-filter-choose {
      .field-pickdatetimedropdown-time {
        width: 210px;
      }
    }
    .filter-item {
      margin-left: 20px;
    }
    .field-yesno-outdoor {
      margin-top: 5px;
    }
  }
  .wrapper-view-list-event {
    .event-item {
      background: @background-color-white;
      margin-bottom: @margin-bottom-block-large;
      padding: @padding-block-base-vertical @padding-block-base-horizontal;
      color: @text-color-1;
      font-size: @font-size-base;
      transition: all 0.3s ease;
      box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
      .sub-event-item-1 {
        overflow: hidden;
      }
      .date-event-double {
        display: flex;
        border: @border-gray;
        width: 100%;
        text-align: center;
        border-radius: @border-radius-base;
        overflow: hidden;
        @media (min-width: @screen-xxxs-min) and (max-width: @screen-xxxs-max) {
          width: 100%;
        }
        @media (min-width: @screen-xxs-min)  and (max-width: @screen-xxs-max) {
          width: 100%;
        }
        @media (min-width: @screen-xs-min)  and (max-width: @screen-xs-max) { // 600 ~ 768
          width: 100%;
        }
        @media (min-width: @screen-sm-min)  and (max-width: @screen-sm-max) { //768 ~992
          width: 50%;
        }
        .month, .m-month, .day, .d-day {
          padding: 5px;
        }
        & > div {
          width: 50%;
          .month,.day {
            text-align: center;
            font-weight: @font-weight-semibold;
            line-height: @line-height-computed;
            color: @text-color-4;
            background-color: @background-color-pink;
          }
          .m-month, .d-day {
            text-align: center;
            line-height: @line-height-computed;
            background-color: @background-color-white;
            padding-top: 8px;
            padding-bottom: 16px;
          }
        }
      }
      .date-event-single {
        width: 50%;
        border: @border-gray;
        border-radius: @border-radius-base;
        overflow: hidden;
        @media (min-width: @screen-xxxs-min) and (max-width: @screen-xxxs-max) {
          width: 50%;
        }
        @media (min-width: @screen-xxs-min)  and (max-width: @screen-xxs-max) { // 409 ~ 600
          width: 100%;
        }
        @media (min-width: @screen-xs-min)  and (max-width: @screen-xs-max) { // 600 ~ 768
          width: 100%;
        }
        @media (min-width: @screen-sm-min)  and (max-width: @screen-sm-max) { //768 ~992
          width: 25%;
        }
        .month {
          text-align: center;
          padding: 5px;
          color: @text-color-4;
          font-weight: @font-weight-semibold;
          background-color: @background-color-pink;
        }
        .m-month {
          text-align: center;
          padding: 5px;
          background-color: @background-color-white;
          padding-top: 8px;
          padding-bottom: 16px;
        }
      }
      .date-event-double > div:first-child {
        border-right: @border-gray;
      }
      .list-rate {
        margin: 0;
        padding: 0;
        display: inline-block;
        .rate-item {
          float: left;
          > span {
            display: inline-block;
            color: #333;
            border-radius: 4px;
            margin: 5px;
            padding: 5px;
            border: 1px solid #d4d4d4;
            &:hover {
              cursor: pointer;
              background: #9088e3;
              color: #fff;
            }
          }
        }
      }
      .row {
        &.main-event-item {
          cursor: pointer;
          margin-bottom: 15px;
          @media (min-width: @screen-xxxs-min) and (max-width: @screen-xxxs-max) {
            padding-bottom: @padding-base-vertical;
            display: flex;
            flex-flow: row wrap;
            justify-content: space-between;
            align-items: flex-start;
            .col-md-2 {
              order: 1;
              width: 49%;
              &:last-child {
                order: 2;
              }
            }
            .col-md-8 {
              order: 3;
              width: 100%;
            }
          }
          @media (min-width: @screen-xxs-min)  and (max-width: @screen-xxs-max) {
            padding-bottom: @padding-base-vertical;
            display: flex;
            flex-flow: row wrap;
            justify-content: space-between;
            align-items: flex-start;
            .col-md-2 {
              order: 1;
              width: 50%;
              &:last-child {
                order: 2;
              }
            }
            .col-md-8 {
              order: 3;
            }
          }
          @media (min-width: @screen-xs-min)  and (max-width: @screen-xs-max) { // 600 ~ 768
            padding-bottom: @padding-base-vertical;
            display: flex;
            flex-flow: row wrap;
            justify-content: space-between;
            align-items: flex-start;
            .col-md-2 {
              order: 1;
              width: 50%;
              &:last-child {
                order: 2;
              }
            }
            .col-md-8 {
              order: 3;
            }
          }
          @media (min-width: @screen-sm-min)  and (max-width: @screen-sm-max) { //768 ~992
            padding-bottom: @padding-base-vertical;
            display: flex;
            flex-flow: row wrap;
            justify-content: space-between;
            align-items: flex-start;
            .col-md-2 {
              order: 1;
              width: 50%;
              &:last-child {
                order: 2;
              }
            }
            .col-md-8 {
              order: 3;
            }
          }
          .wrapper-event-content {
            @media (min-width: @screen-xxxs-min) and (max-width: @screen-xxxs-max) {
              margin-top: @margin-block-medium;
            }
            @media (min-width: @screen-xxs-min)  and (max-width: @screen-xxs-max) { // 409 ~ 600
              margin-top: @margin-block-medium;
            }
            @media (min-width: @screen-xs-min)  and (max-width: @screen-xs-max) { // 600 ~ 768
              margin-top: @margin-block-medium;
            }
            @media (min-width: @screen-sm-min)  and (max-width: @screen-sm-max) { //768 ~992
              margin-top: @margin-block-medium;
            }
            &.active {
              margin-bottom: @margin-base-block-small;
            }
            .header-event-content {
              h5 {
                font-size: @font-size-h5;
                font-weight: @font-weight-semibold;
              }
            }
            .footer {
              margin-top: @margin-base-block-small;
              p {
                &:first-child {
                  margin-bottom: @margin-base-block-medium;;
                  @media (min-width: @screen-xxxs-min) and (max-width: @screen-xxxs-max) {
                    margin-bottom: 0;
                    display: flex;
                    flex-flow: column wrap;
                    justify-content: center;
                    align-items: flex-start;
                    & > span {
                      display: inline-block;
                      margin-bottom: @margin-base-block-small;
                    }
                  }
                  @media (min-width: @screen-xxs-min)  and (max-width: @screen-xxs-max) { // 409 ~ 600
                    margin-bottom: @margin-base-block-small;
                  }
                  @media (min-width: @screen-xs-min)  and (max-width: @screen-xs-max) { // 600 ~ 768
                    margin-bottom: @margin-base-block-small;
                  }
                  @media (min-width: @screen-sm-min)  and (max-width: @screen-sm-max) { //768 ~992
                    margin-bottom: @margin-base-block-xsmall;
                  }
                }
                &:last-child {
                  & > span {
                    &:first-child {
                      margin-right: 0;
                    }
                  }
                }
                span {
                  display: inline-block;
                  font-size: @font-size-small;
                  color: @text-color-2;
                  i {
                    font-size: @font-size-small;
                    margin-right: @margin-icon-text;
                    color: @text-color-p7;
                  }
                  &:first-child {
                    margin-right: @margin-base-title-block;
                  }
                }
              }
            }
          }
          .label-price {
            .sticky {
              color: @text-color-4;
              text-align: center;
              font-weight: @font-weight-semibold;
              font-size: @font-size-base;
            }
          }
        }
        &.row-button-action {
          .wrapper-button-action {
            border-top: 0.5px solid #999999 ;
            padding-top: 9px;
            &.active {
              border-bottom: 0.5px solid #999999 ;
            }
            .btn-booknow {
              width: 100%;
              text-align: center;
              cursor: pointer;
              transition: all 0.3s ease-in-out;
              display: flex;
              justify-content: center;
              align-items: center;
              &.hidden {
                display: none;
                transition: all 0.3s ease-in-out;
              }
              span {
                color: #FB646F;
                display: inline-block;
                margin-right: 10px;
              }
              i {
                color: #FB646F;
                font-size: 18px;
              }
            }
            .btn-cancel {
              width: 100%;
              text-align: center;
              display: none;
              cursor: pointer;
              transition: all 0.3s ease-in-out;
              &.shown {
                transition: all 0.3s ease-in-out;
                display: flex;
                justify-content: center;
                align-items: center;
                margin-bottom: 10px;
              }
              span {
                color: #888888;
                display: inline-block;
                margin-right: 10px;
              }
              i {
                color: #888888;
                font-size: 18px;
                transform: rotate(180deg);
              }
            }
          }
        }
        .event-item-description {
          width: 100%;
          padding-bottom: @padding-block-base-vertical;
          p {
            color: @text-color-1;
            padding-top: @padding-block-base-vertical;
            margin-bottom: @margin-base-block-small;
          }
          .img-box-event {
            width: 100%;
            padding-bottom: @padding-block-base-vertical;
            .img-box-event-item {
              display: inline-block;
              overflow: hidden;
              margin-bottom: @margin-base-block-small;
              width: 100%;
              height: 180px;
              @media (min-width: @screen-xxxs-min) and (max-width: @screen-xxxs-max) { // 0 ~ 409
                height: 300px;
              }

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

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

              @media (min-width: @screen-sm-min)  and (max-width: @screen-sm-max) { //768 ~992
                height: 200px;
              }
              & > div {
                width: 100%;
                height: 100%;
                padding-bottom: calc(100% * 168 /180);
                position: relative;
                img {
                  width: 100%;
                  height: 100%;
                  position: absolute;
                  top: 50%;
                  left: 50%;
                  transform: translate(-50%, -50%);
                  object-fit: cover;
                  object-position: center;
                }
              }
            }
          }
          .block-description-event {
            padding-top: @padding-block-base-vertical;
            h4 {
              font-size: @font-size-h4;
              font-weight: @font-weight-bold;
            }
          }
        }
        .block-order-event-item {
          padding-top: @padding-block-base-vertical;
          width: 100%;
          border-top: @border;
          display: block;
          .left-content-book {
            h4 {
              font-size: @font-size-h4;
              font-weight: @font-weight-bold;
              @media (min-width: @screen-xxxs-min) and (max-width: @screen-xxxs-max) { // 0 ~ 409
                margin-bottom: @margin-base-block-medium;
              }

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

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

              @media (min-width: @screen-sm-min)  and (max-width: @screen-sm-max) { //768 ~992
                margin-bottom: @margin-base-block-medium;
              }
            }
          }
          .right-content-book {
            p {
              font-weight: @font-weight-semibold;
              margin-bottom: @margin-base-block-small;
            }
          }
          .button-action {
            display: flex;
            justify-content: flex-start;
            flex-flow: column wrap;
            align-items: flex-start;
            height: 100%;
            @media (min-width: @screen-xxxs-min) and (max-width: @screen-xxxs-max) {
              margin-bottom: @margin-bottom-block-large;
            }
            @media (min-width: @screen-xxs-min)  and (max-width: @screen-xxs-max) { // 409 ~ 600
              margin-bottom: @margin-bottom-block-large;
            }
            @media (min-width: @screen-xs-min)  and (max-width: @screen-xs-max) { // 600 ~ 768
              margin-bottom: @margin-bottom-block-large;
            }
            @media (min-width: @screen-sm-min)  and (max-width: @screen-sm-max) { //768 ~992
              margin-bottom: @margin-bottom-block-large;
            }
            p {
              font-weight: @font-weight-semibold;
              margin-bottom: @margin-base-block-small;
            }
            .block-list-rate {
              width: 100%;
              margin-bottom: 20px;
            }
            .wrapper-button-counter {
              width: 100%;
              @media (min-width: @screen-sm-min)  and (max-width: @screen-sm-max) { //768 ~992
                width: 40%;
              }
              .increment-button {
                margin-right: 20px;
                @media (min-width: @screen-xxxs-min) and (max-width: @screen-xxxs-max) {
                  margin-right: 0;
                  margin: auto;
                }
                @media (min-width: @screen-xxs-min)  and (max-width: @screen-xxs-max) { // 409 ~ 600
                  margin-right: 0;
                  margin: auto;
                }
                @media (min-width: @screen-xs-min)  and (max-width: @screen-xs-max) { // 600 ~ 768
                  margin-right: 0;
                  margin: auto;
                }
              }
            }

          }
        }
        .wrapper-button-continue {
          text-align: center;
          margin-top: @margin-block-medium;
          @media (min-width: @screen-xxxs-min) and (max-width: @screen-xxxs-max) { // 0 ~ 409
            margin-top: 0;
          }
          @media (min-width: @screen-xxs-min)  and (max-width: @screen-xxs-max) { // 409 ~ 600
            margin-top: 0;
          }
          @media (min-width: @screen-xs-min)  and (max-width: @screen-xs-max) { // 600 ~ 768
            margin-top: 0;
          }
          @media (min-width: @screen-sm-min)  and (max-width: @screen-sm-max) { //768 ~992
            margin-top: 0;
          }
        }
        .wrapper-block-check-out {
          -webkit-transition: -webkit-transform 0.35s;
          transition: transform 0.35s;
          -webkit-transform: translate3d(0, 100%, 0);
          transform: translate3d(0, 100%, 0);
          width: 100%;
          padding: @padding-block-base-vertical @padding-block-base-horizontal 0 @padding-block-base-horizontal;
          background: @background-color-white;
          border-top: @border;
          display: none;
          h4 {
            font-size: @font-size-h4;
            font-weight: @font-weight-bold;
            @media (min-width: @screen-xxxs-min) and (max-width: @screen-xxxs-max) {
              margin-bottom: @margin-base-block-medium;
            }
            @media (min-width: @screen-xxs-min)  and (max-width: @screen-xxs-max) { // 409 ~ 600
              margin-bottom: @margin-base-block-medium;
            }
            @media (min-width: @screen-xs-min)  and (max-width: @screen-xs-max) { // 600 ~ 768
              margin-bottom: @margin-base-block-medium;
            }
            @media (min-width: @screen-sm-min)  and (max-width: @screen-sm-max) { //768 ~992
              margin-bottom: @margin-base-block-medium;
            }
          }
          .row {
            .infor-payment-left, .info-payment-right {
              width: 100%;
              display: flex;
              justify-content: flex-start;
              align-items: flex-start;
              margin-bottom: @margin-base-block-small;
              @media (min-width: @screen-xxxs-min) and (max-width: @screen-xxxs-max) {
                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
                display: grid;
                grid-column-gap: @margin-base-block-small;
                grid-row-gap: @margin-base-block-small;
                grid-template-columns: 2.5fr 1fr;
              }
              p {
                font-weight: @font-weight-semibold;
                color: @text-color-1;
                &:first-child {
                  margin-right: 30px;
                }
                @media (min-width: @screen-xxxs-min) and (max-width: @screen-xxxs-max) {
                  margin-right: 0;
                  margin-bottom: @margin-base-block-small;
                }
                @media (min-width: @screen-xxs-min)  and (max-width: @screen-xxs-max) { // 409 ~ 600
                  margin-right: 0;
                  margin-bottom: @margin-base-block-small;
                }
                @media (min-width: @screen-xs-min)  and (max-width: @screen-xs-max) { // 600 ~ 768
                  margin-right: 0;
                  margin-bottom: @margin-base-block-small;
                }
                @media (min-width: @screen-sm-min)  and (max-width: @screen-sm-max) { //768 ~992
                  margin-right: 0;
                }
              }
            }
            .infor-payment-left {
              p {
                &:first-child {
                  margin-right: 15px;
                  width: 50%;
                  @media (min-width: @screen-xxxs-min) and (max-width: @screen-xxxs-max) {
                    width: 100%;
                    margin-right: 0;
                  }
                  @media (min-width: @screen-xxs-min)  and (max-width: @screen-xxs-max) { // 409 ~ 600
                    width: 100%;
                    margin-right: 0;
                  }
                  @media (min-width: @screen-xs-min)  and (max-width: @screen-xs-max) { // 600 ~ 768
                    width: 100%;
                    margin-right: 0;
                  }
                  @media (min-width: @screen-sm-min)  and (max-width: @screen-sm-max) { //768 ~992
                    width: 100%;
                    margin-right: 0;
                  }
                }
              }
              @media (min-width: @screen-xxxs-min) and (max-width: @screen-xxxs-max) {
                margin-bottom: 0;
              }
              @media (min-width: @screen-xxs-min)  and (max-width: @screen-xxs-max) { // 409 ~ 600
                margin-bottom: 0;
              }
              @media (min-width: @screen-xs-min)  and (max-width: @screen-xs-max) { // 600 ~ 768
                margin-bottom: 0;
              }
            }
            .block-check-out {
              width: 100%;
              padding-bottom: @padding-block-base-vertical;
              p {
                font-family: @font-family-nunito-serif;
                font-size: @font-size-medium;
                font-weight: @font-weight-semibold;
                margin-bottom: @margin-base-block-small;
                @media (min-width: @screen-xxxs-min) and (max-width: @screen-xxxs-max) { // 0 ~ 409
                  margin-top: @margin-block-large;
                }

                @media (min-width: @screen-xxs-min)  and (max-width: @screen-xxs-max) { // 409 ~ 600
                  margin-top: @margin-block-medium;
                }

                @media (min-width: @screen-xs-min)  and (max-width: @screen-xs-max) { // 600 ~ 768
                  margin-top: @margin-block-medium;
                }
                @media (min-width: @screen-sm-min)  and (max-width: @screen-sm-max) { //768 ~992
                  margin-top: @margin-block-medium;
                }
              }
              label.error {
                font-family: @font-family-nunito-serif;
                font-size: @font-size-base;
                color: red;
                font-style: italic;
                margin-top: 5px;
              }
              .input-firstname, .input-lastname, .input-email, .input-phone {
                margin-bottom: @margin-base-block-medium;
                input[type="text"] {
                  border-radius: @border-radius-base;
                }
              }
            }
            .block-payment-item {
              h4 {
                font-size: @font-size-h4;
                font-weight: @font-weight-bold;
                margin-bottom: @margin-bottom-block-large;
                @media (min-width: @screen-xxxs-min) and (max-width: @screen-xxxs-max) {
                  margin-bottom: @margin-base-block-medium;
                }
                @media (min-width: @screen-xxs-min)  and (max-width: @screen-xxs-max) { // 409 ~ 600
                  margin-bottom: @margin-base-block-medium;
                }
                @media (min-width: @screen-xs-min)  and (max-width: @screen-xs-max) { // 600 ~ 768
                  margin-bottom: @margin-base-block-medium;
                }
                @media (min-width: @screen-sm-min)  and (max-width: @screen-sm-max) { //768 ~992
                  margin-bottom: @margin-base-block-medium;
                }
              }
              .detail-payment-item, .add-coupon {
                display: flex;
                justify-content: space-between;
                align-items: center;
                &:last-child {
                  margin-top: @margin-bottom-block-large;
                  @media (min-width: @screen-xxxs-min) and (max-width: @screen-xxxs-max) {
                    margin-top: @margin-base-block-small;
                  }
                  @media (min-width: @screen-xxs-min)  and (max-width: @screen-xxs-max) { // 409 ~ 600
                    margin-top: @margin-base-block-small;
                  }
                  @media (min-width: @screen-xs-min)  and (max-width: @screen-xs-max) { // 600 ~ 768
                    margin-top: @margin-base-block-small;
                  }
                  @media (min-width: @screen-sm-min)  and (max-width: @screen-sm-max) { //768 ~992
                    margin-top: @margin-base-block-small;
                  }
                }
                span {
                  display: inline-block;
                  padding: @padding-label;
                  font-weight: @font-weight-semibold;
                }
              }
              .total-cost {
                background-color: @background-color-pink;
                span {
                  color: @text-color-4;
                }
              }
              .add-coupon {
                margin-top: 16px;
                input[type="text"] {
                  width: 500px;
                  padding: 5px;
                  vertical-align: middle;
                  margin-right: -10px;
                }
                button {
                  padding: 5px 15px;
                  vertical-align: middle;
                  i {
                    font-size: 12px;
                  }
                }
              }
            }
            .wrapper-btn-checkout {
              display: flex;
              justify-content: center;
              align-items: center;
              @media (min-width: @screen-xxxs-min) and (max-width: @screen-xxxs-max) {
                flex-flow: column wrap;
                margin-top: @margin-block-large;
              }
              @media (min-width: @screen-xxs-min)  and (max-width: @screen-xxs-max) { // 409 ~ 600
                flex-flow: column wrap;
                margin-top: @margin-block-large;
              }
              @media (min-width: @screen-xs-min)  and (max-width: @screen-xs-max) { // 600 ~ 768
                flex-flow: column wrap;
                margin-top: @margin-block-large;
              }
              @media (min-width: @screen-sm-min)  and (max-width: @screen-sm-max) { //768 ~992
                margin-top: @margin-block-large;
              }
              .btn-cancel {
                transition: 250ms all ease-in-out;
                @media (min-width: @screen-xxxs-min) and (max-width: @screen-xxxs-max) {
                  width: 100%;
                }
                @media (min-width: @screen-xxs-min)  and (max-width: @screen-xxs-max) { // 409 ~ 600
                  width: 100%;
                }
                @media (min-width: @screen-xs-min)  and (max-width: @screen-xs-max) { // 600 ~ 768
                  width: 100%;
                }
                @media (min-width: @screen-sm-min)  and (max-width: @screen-sm-max) { //768 ~992
                }
                span {
                  font-weight: @font-weight-semibold;
                  font-size: @font-size-base;
                }

              }
              .btn-book-now, .btn-add-to-cart {
                margin-left: @margin-base-block-small;
                @media (min-width: @screen-xxxs-min) and (max-width: @screen-xxxs-max) {
                  width: 100%;
                  margin-left: 0;
                  margin-top: @margin-base-block-small;
                }
                @media (min-width: @screen-xxs-min)  and (max-width: @screen-xxs-max) { // 409 ~ 600
                  width: 100%;
                  margin-left: 0;
                  margin-top: @margin-base-block-small;
                }
                @media (min-width: @screen-xs-min)  and (max-width: @screen-xs-max) { // 600 ~ 768
                  width: 100%;
                  margin-left: 0;
                  margin-top: @margin-base-block-small;
                }
                span {
                  font-weight: @font-weight-semibold;
                  font-size: @font-size-base;
                }
              }
            }
          }
        }
      }
      &.booking-now {
        .wrapper-block-check-out {
          -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
        }
        .sub-event-item-1 {
          .block-order-event-item {
            display: none;
          }
          .wrapper-block-check-out {
            display: block;
          }
        }
      }
    }
  }
}