@import "variables";
.view-training-form {
  width: 100%;
  .block-confirm {
    .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%;
          }
        }
      }
    }
  }
  .form-input-info {
    z-index: 9999;
    .form-input-info-dialog {
      margin-top: 100px;
      @media (min-width: @screen-xxxs-min) and (max-width: @screen-xxxs-max) { // 0 ~ 409
        width: 100%;
        margin-left: 0;
      }

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

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

      @media (min-width: @screen-sm-min)  and (max-width: @screen-sm-max) { //768 ~992
        width: 100%;
        margin-left: 0;
      }
      .form-input-info-content {
        padding: 20px;
        .form-input-info-header {
          position: relative;
          padding: 0;
          padding-bottom: @padding-block-base-vertical-small;
          h3 {
            font-family: @font-family-nunito-serif;
            font-size: @font-size-h3;
            font-weight: @font-weight-bold;
            color: @text-color-1;
            color: @background-color-pink;
          }
        }
        .form-input-info-body {
          padding: 0;
          .wrapper-service {
            display: flex;
            flex-flow: column wrap;
            justify-content: center;
            align-items: center;
            padding-top: @padding-block-base-vertical;
            padding-bottom: @padding-block-base-vertical;
            .img-box {
              width: 150px;
              height: 150px;
              border-radius: 50%;
              overflow: hidden;
              margin-bottom: @margin-base-block-medium;
              div {
                padding-bottom: calc(100% * 150 / 150);
                width: 100%;
                position: relative;
                img {
                  position: absolute;
                  top: 50%;
                  left: 50%;
                  transform: translate(-50%, -50%);
                  width: 100%;
                  height: 100%;
                  object-fit: cover;
                  object-position: center;
                }
              }
            }
            .service-name {
              font-family: @font-family-nunito-serif;
              font-size: @font-size-h4;
              font-weight: @font-weight-semibold;
              margin: 0;
            }
          }
          .detail-time-and-location {
            border-top: @border-gray;
            border-bottom: @border-gray;
            padding-top: @padding-block-base-vertical-xsmall;
            padding-bottom: @padding-block-base-vertical-xsmall;
            @media (min-width: @screen-xxxs-min) and (max-width: @screen-xxxs-max) { // 0 ~ 409
              padding-bottom: 0;
              div[class^="col-"] {
                margin-bottom: @margin-base-block-medium;
                &:last-child {
                  margin-bottom: @margin-bottom-block-large;
                }
              }
            }

            @media (min-width: @screen-xxs-min)  and (max-width: @screen-xxs-max) { // 409 ~ 600
              padding-bottom: 0;
              div[class^="col-"] {
                margin-bottom: @margin-base-block-medium;
                &:last-child {
                  margin-bottom: @margin-bottom-block-large;
                }
              }
            }

            @media (min-width: @screen-xs-min)  and (max-width: @screen-xs-max) { // 600 ~ 768
              div[class^="col-"] {
                margin-bottom: @margin-base-block-medium;
                &:last-child {
                  margin-bottom: @margin-bottom-block-large;
                }
              }
            }
            .column-title {
              margin-bottom: 10px;
              @media (min-width: @screen-xxxs-min) and (max-width: @screen-xxxs-max) { // 0 ~ 409
                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;
              }
              p {
                font-family: @font-family-nunito-serif;
                font-size: @font-size-medium;
                font-weight: @font-weight-semibold;
                margin-bottom: 0;
              }
            }
            .column-content {
              display: flex;
              justify-content: flex-start;
              align-items: center;
              .img-box-trainer {
                width: 30px;
                height: 30px;
                border-radius: 50%;
                margin-right: 10px;
                overflow: hidden;
                div {
                  width: 100%;
                  padding-bottom: calc(100% * 30 / 30);
                  position: relative;
                  img {
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    object-position: center;
                  }
                }
              }
              p {
                font-family: @font-family-nunito-serif;
                font-size: @font-size-base;
                font-weight: @font-weight-normal;
                color: @text-color-2;
                margin-bottom: 0;
              }
            }
          }
          .form-customer-info {
            padding-top: @padding-block-base-vertical;
            padding-bottom: @padding-block-base-vertical-xsmall;
            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-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;
              }
            }
            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;
                font-family: @font-family-nunito-serif;
                font-size: @font-size-base;
                &::placeholder {
                  font-size: @font-size-base;
                }
              }
            }
            .increment-button {
              .field-incrementnumber .counter-minus,.field-incrementnumber .counter-plus  {
                width: 12%;
                @media (min-width: @screen-xxxs-min) and (max-width: @screen-xxxs-max) { // 0 ~ 409
                  width: 17%;
                }

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

                @media (min-width: @screen-xs-min)  and (max-width: @screen-xs-max) { // 600 ~ 768
                  width: 17%;
                }
              }
              .field-incrementnumber .increment-number {

              }
            }
            .field-paymentsimage ul.list-payment {
              grid-template-columns: 1fr 1fr;
              @media (min-width: @screen-xxxs-min) and (max-width: @screen-xxxs-max) { // 0 ~ 409
                li .wrapper-payment .payment-image {
                  margin-left: @margin-block-medium;
                }
              }

              @media (min-width: @screen-xxs-min)  and (max-width: @screen-xxs-max) { // 409 ~ 600
                li .wrapper-payment .payment-image {
                  margin-left: @margin-block-medium;
                }
              }

              @media (min-width: @screen-xs-min)  and (max-width: @screen-xs-max) { // 600 ~ 768
                li .wrapper-payment .payment-image {
                  margin-left: @margin-block-medium;
                }
              }
              @media (min-width: @screen-sm-min)  and (max-width: @screen-sm-max) { //768 ~992
                li .wrapper-payment .payment-image {
                  margin-left: @margin-block-medium;
                }
              }
            }
          }
          .form-info-payment {
            .block-payment-item {
              p {
                font-family: @font-family-nunito-serif;
                font-size: @font-size-medium;
                font-weight: @font-weight-semibold;
                margin-bottom: @margin-base-block-xsmall;
                @media (min-width: @screen-xxxs-min) and (max-width: @screen-xxxs-max) { // 0 ~ 409
                  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-small;
                }
              }
              .detail-payment-item, .add-coupon {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 0 17px;
                span {
                  display: inline-block;
                  font-weight: @font-weight-semibold;
                  font-family: @font-family-nunito-serif;
                  font-size: @font-size-base;
                }
              }
              .total-cost {
                background-color: @background-color-pink;
                padding: @padding-label;
                margin-top: 15px;
                span {
                  color: @text-color-4;
                  font-family: @font-family-nunito-serif;
                  font-size: @font-size-base;
                  font-weight: @font-weight-semibold;
                }
              }
              .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;
                  }
                }
              }
            }
          }
        }
        .form-input-info-footer {
          display: flex;
          justify-content: flex-end;
          align-items: center;
          @media (min-width: @screen-xxxs-min) and (max-width: @screen-xxxs-max) { // 0 ~ 409
            justify-content: center;
          }

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

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

          @media (min-width: @screen-sm-min)  and (max-width: @screen-sm-max) { //768 ~992
            justify-content: center;
          }
          &.modal-footer {
            border-top: none;
            padding: 0;
            padding-top: @padding-block-base-vertical;
          }
          .btn-close-modal, .btn-booking-modal-now, .btn-add-to-cart {
            span {
              font-family: @font-family-nunito-serif;
              font-weight: @font-weight-semibold;
              font-size: @font-size-base;
            }
          }
        }
      }
    }
  }
  .basic {
    width: 100%;
    .wrapper-booking-training-form {
      width: 100%;
      padding: @padding-block-base-vertical-xxlg @padding-block-base-horizontal-xxlg;
      border: @border-pink;
      @media (min-width: @screen-xxxs-min) and (max-width: @screen-xxxs-max) { // 0 ~ 409
        padding: @padding-block-base-vertical;
        margin-bottom: @margin-bottom-block-large;
      }

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

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

      @media (min-width: @screen-sm-min)  and (max-width: @screen-sm-max) { //768 ~992
        padding: @padding-block-base-vertical;
        margin-bottom: @margin-bottom-block-large;
      }
      h1 {
        font-size: @font-size-h1;
        text-transform: uppercase;
        font-weight: @font-weight-bold;
        text-align: center;
        line-height: @line-height-computed-h1;
        letter-spacing: 0;
        margin-bottom: @margin-base-title-block;
        color: @text-color-p7 ;
        @media (min-width: @screen-xxxs-min) and (max-width: @screen-xxxs-max) { // 0 ~ 409
          font-size: @font-size-large;
          letter-spacing: unset;
        }

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

        @media (min-width: @screen-xs-min)  and (max-width: @screen-xs-max) { // 600 ~ 768
          font-size: @font-size-medium;
        }

        @media (min-width: @screen-sm-min)  and (max-width: @screen-sm-max) { //768 ~992
          font-size: @font-size-medium;
        }
      }
      .block-select-service, .block-select-location, .block-select-employee {
        width: 80%;
        margin: auto;
        margin-bottom: @margin-block-medium;
        @media (min-width: @screen-xxxs-min) and (max-width: @screen-xxxs-max) { // 0 ~ 409
          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
          width: 100%;
        }
        label {
          font-size: @font-size-large;
          font-weight: @font-weight-semibold;
          color: @text-color-1;
          @media (min-width: @screen-xxxs-min) and (max-width: @screen-xxxs-max) { // 0 ~ 409
            font-size: @font-size-medium;
          }

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

          @media (min-width: @screen-xs-min)  and (max-width: @screen-xs-max) { // 600 ~ 768
            font-size: @font-size-medium;
          }

          @media (min-width: @screen-sm-min)  and (max-width: @screen-sm-max) { //768 ~992
            font-size: @font-size-medium;
          }
        }
        .select2-container--default {
          &.select2-container {
            height: 40px;
          }
          .select2-selection--single {
            height: 100%;
            .select2-selection__rendered {
              line-height: 39px;
              padding-left: @padding-block-md-horizontal;
              font-weight: @font-weight-semibold;
              font-size: @font-size-medium;
              color: @text-color-2;
              @media (min-width: @screen-xxxs-min) and (max-width: @screen-xxxs-max) { // 0 ~ 409
                font-size: @font-size-base;
              }

              @media (min-width: @screen-xxs-min)  and (max-width: @screen-xxs-max) { // 409 ~ 600
                font-size: @font-size-base;
              }

              @media (min-width: @screen-xs-min)  and (max-width: @screen-xs-max) { // 600 ~ 768
                font-size: @font-size-base;
              }

              @media (min-width: @screen-sm-min)  and (max-width: @screen-sm-max) { //768 ~992
                font-size: @font-size-base;
              }
            }
            .select2-selection__arrow {
              height: 40px;
            }
          }
        }
      }
      .block-select-employee {
        margin-bottom: @padding-block-button;
      }
      .controllers {
        text-align: center;
      }
    }
  }

  .wrapper-service {
    .service-name {
      font-weight: bold;
      text-align: center;
      margin: 22px;
      font-size: 21px;
    }
  }
  .employee-cover {
    width: 50px;
    height: 50px;
    border-radius: 25px;
  }
  .wrapper-calendar {
    border-radius: 5px;
    background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
    background-size: 400% 400%;
    animation: gradientBG 15s ease infinite;
    padding: 30px 20px;
    max-height: 565px;
    min-height: 565px;
    @media (min-width: @screen-xxxs-min) and (max-width: @screen-xxxs-max) { // 0 ~ 409
      padding: 30px 10px;
    }

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

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

    @media (min-width: @screen-sm-min)  and (max-width: @screen-sm-max) { //768 ~992
      padding: 50px 30px;
    }
    .calendar {
      margin-bottom: 10px;
      .list-range-time {
        padding: 10px 5px;
        display: grid;
        grid-column-gap: @margin-base-block-small;
        grid-row-gap: @margin-base-block-small;
        grid-template-columns: 1fr 1fr 1fr;
        @media (min-width: @screen-xxxs-min) and (max-width: @screen-xxxs-max) { // 0 ~ 409
          grid-template-columns: 1fr;
        }

        @media (min-width: @screen-xxs-min)  and (max-width: @screen-xxs-max) { // 409 ~ 600
          grid-template-columns: 1fr;
        }

        @media (min-width: @screen-xs-min)  and (max-width: @screen-xs-max) { // 600 ~ 768
          grid-template-columns: 1fr 1fr ;
        }

        @media (min-width: @screen-sm-min)  and (max-width: @screen-sm-max) { //768 ~992
          grid-template-columns: 1fr 1fr 1fr;
        }
          .rate-item {
            button.time {
              display: flex;
              justify-content: flex-start;
              align-items: center;
              width: 100%;
              & >p {
                font-family: @font-family-nunito-serif;
                font-weight: @font-weight-semibold;
                font-size: @font-size-base;
                margin-left: 0;
                color: @text-color-4;
              }
            }
          }
      }
      .fa-check {
        display: none;
      }
      .active {
        .fa-check {
          display: inline-block;
          font-size: @font-size-base;
          margin-right: 10px;
        }
      }
      .ui-datepicker td span, .ui-datepicker td a {
        display: flex;
        justify-content: center;
        align-items: center;
        color: @text-color-4;
        margin: 4px auto;
        height: 40px;
        border: 1px solid #c0c0c0;
        border-radius: 50%;
        width: 40px;
        background: none;
        @media (min-width: @screen-xxxs-min) and (max-width: @screen-xxxs-max) { // 0 ~ 409
          width: 30px;
          height: 30px;
        }

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

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

        @media (min-width: @screen-sm-min)  and (max-width: @screen-sm-max) { //768 ~992
          width: 35px;
          height: 35px;
        }
        &:hover {
          border-color: #c69500;
          background: #c65c35;
        }
      }
      ui-state-active, .ui-widget-content .ui-state-active {
        border-color: #c69500;
        background: #c65c35;
      }
      .ui-datepicker th {
        font-size: 17px;
      }
      .ui-datepicker table {
        border: none;
      }
      .ui-widget.ui-widget-content {
        border: none;
        box-shadow: none;
        background: no-repeat;
        color: #fff;
      }
      .ui-datepicker th {
        color: #fff;
      }
      .ui-datepicker .ui-datepicker-header {
        color: #fff;
        position: relative;
        background: none;
        padding: .2em 0;
        border: none;
        .ui-datepicker-title {
          .ui-datepicker-month, .ui-datepicker-year {
            font-family: @font-family-nunito-serif;
            font-weight: @font-weight-bold;
            font-size: @font-size-medium;
          }
        }
      }
      .ui-datepicker-calendar {
        thead {
          th {
            background-color: transparent;
            font-family: @font-family-nunito-serif;
            font-weight: @font-weight-bold;
            font-size: @font-size-medium;
          }
        }
        tbody tr td:first-child {
          background: none;
        }
        tbody {
          tr {
            td {
              a, span {
                font-family: @font-family-nunito-serif;
                font-weight: @font-weight-normal;
                font-size: @font-size-base;
              }
            }
          }
        }
      }
    }
    .controllers {
      text-align: center;
      .btn-back {
        margin-right: 10px;
      }
      .btn-book-now, .btn-back {
        display: inline-block;
        span {
          display: inline-block;
        }
      }
    }
  }

  .ui-datepicker {
    width: 100%;
  }
}
