@import "variables";
.nb-woobooking-front-end {
  .block-searchmenu-default {
    margin-top: 50px;
    margin-bottom: 50px;
    .block-search {
      .tab-searchmenu {
        li {
          width: 150px;
          @media (min-width: @screen-xxxs-min) and (max-width: @screen-xxxs-max) { // 0 ~ 409
            width: 50%;
          }

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

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

          @media (min-width: @screen-sm-min)  and (max-width: @screen-sm-max) { //768 ~992
            width: 50%;
          }
          a {
            width: 100%;
            text-align: center;
            background-color: #EEEEEE;
            color: #838383;
          }
          &.active {
            a {
              background-color: #5678DA;
              color: #FFFFFF;
            }
          }
        }
      }
      .tab-searchmenu-content {
        #training {
          border-bottom: 1px solid #eaeaea;
          border-right: 1px solid #eaeaea;
          box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
          form {
            width: 100%;
            display: flex;
            flex-flow: row nowrap;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 0;
            @media (min-width: @screen-xxxs-min) and (max-width: @screen-xxxs-max) { // 0 ~ 409
              flex-flow: column wrap;
            }

            @media (min-width: @screen-xxs-min)  and (max-width: @screen-xxs-max) { // 409 ~ 600
              flex-flow: column wrap;
            }

            @media (min-width: @screen-xs-min)  and (max-width: @screen-xs-max) { // 600 ~ 768
              flex-flow: column wrap;
            }

            @media (min-width: @screen-sm-min)  and (max-width: @screen-sm-max) { //768 ~992
              flex-flow: column wrap;
            }
            .wrapper-list-duration, .wrapper-list-service, .wrapper-list-location, .wrapper-list-employee{
              width: 22%;
              height: 80px;
              display: flex;
              justify-content: center;
              align-items: center;
              background-color: #FFFFFF;
              border-left: 1px solid #eaeaea;
              @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%;
              }
              .select2-container--default {
                &.select2-container {
                  width: 100% !important;
                }
                .selection {
                  width: 100%;
                  .select2-selection--single {
                    width: 100%;
                    padding-left: 40px;
                    height: 80px;
                    border: none;
                    outline: none;
                    &:active {
                      outline: none;
                    }
                    .select2-selection__rendered {
                      width: 100%;
                      line-height: 80px;
                      color: #838383;
                      i {
                        margin-right: 10px;
                      }
                    }
                    .select2-selection__arrow {
                      display: none;
                    }
                  }
                }
              }
            }
            .wrapper-list-service, .wrapper-list-location, .wrapper-list-employee {
              .select2-container--default {
                .selection {
                  .select2-selection--single {
                    @media (min-width: @screen-xxxs-min) and (max-width: @screen-xxxs-max) { // 0 ~ 409
                      border-top: @border-gray;
                    }

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

                    @media (min-width: @screen-xs-min)  and (max-width: @screen-xs-max) { // 600 ~ 768
                      border-top: @border-gray;
                    }

                    @media (min-width: @screen-sm-min)  and (max-width: @screen-sm-max) { //768 ~992
                      border-top: @border-gray;
                    }
                  }
                }
              }
            }
            .wrapper-list-employee {
              .select2-container--default {
                .selection {
                  .select2-selection--single {
                    @media (min-width: @screen-xxxs-min) and (max-width: @screen-xxxs-max) { // 0 ~ 409
                      border-top: @border-gray;
                      border-bottom: @border-gray;
                    }

                    @media (min-width: @screen-xxs-min)  and (max-width: @screen-xxs-max) { // 409 ~ 600
                      border-top: @border-gray;
                      border-bottom: @border-gray;
                    }

                    @media (min-width: @screen-xs-min)  and (max-width: @screen-xs-max) { // 600 ~ 768
                      border-top: @border-gray;
                      border-bottom: @border-gray;
                    }

                    @media (min-width: @screen-sm-min)  and (max-width: @screen-sm-max) { //768 ~992
                      border-top: @border-gray;
                      border-bottom: @border-gray;
                    }
                  }
                }
              }
            }
            .wrapper-list-duration {
              #element_field_duration {
                width: 100%;
              }
            }
            .wrapper-list-service {
              .field-services {
                width: 100%;
              }
            }
            .wrapper-list-location {
              #element_field_location_id {
                width: 100%;
              }
            }
            .wrapper-list-employee {
              .field-employees {
                width: 100%;
              }
            }
            .button-search {
              padding: 0;
              width: 150px;
              height: 80px;
              @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;
              }

              @media (min-width: @screen-sm-min)  and (max-width: @screen-sm-max) { //768 ~992
                margin-top: @margin-block-medium;
              }
              .btn-search-training {
                width: 100%;
                height: 100%;
                background-color: #5678DA;
                border-radius: 0;
                span {
                  text-transform: uppercase;
                  font-weight: bold;
                }
              }
            }
          }
        }
        #event {
          border-bottom: 1px solid #eaeaea;
          border-right: 1px solid #eaeaea;
          box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
          form {
            display:flex;
            flex-flow: row nowrap;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            margin-bottom: 0;
            @media (min-width: @screen-xxxs-min) and (max-width: @screen-xxxs-max) { // 0 ~ 409
              flex-flow: column wrap;
            }

            @media (min-width: @screen-xxs-min)  and (max-width: @screen-xxs-max) { // 409 ~ 600
              flex-flow: column wrap;
            }

            @media (min-width: @screen-xs-min)  and (max-width: @screen-xs-max) { // 600 ~ 768
              flex-flow: column wrap;
            }

            @media (min-width: @screen-sm-min)  and (max-width: @screen-sm-max) { //768 ~992
              flex-flow: column wrap;
            }
            .wrapper-list-service, .wrapper-list-location, .wrapper-list-employee{
              width: 29%;
              height: 80px;
              display: flex;
              justify-content: center;
              align-items: center;
              background-color: #FFFFFF;
              border-left: 1px solid #eaeaea;
              @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%;
              }
              .select2-container--default {
                width: 100% !important;
                .selection {
                  width: 100%;
                  .select2-selection--single {
                    width: 100%;
                    padding-left: 40px;
                    height: 80px;
                    border: none;
                    outline: none;
                    &:active {
                      outline: none;
                    }
                    .select2-selection__rendered {
                      width: 100%;
                      line-height: 80px;
                      color: #838383;
                      i {
                        margin-right: 10px;
                      }
                    }
                    .select2-selection__arrow {
                      display: none;
                    }
                  }
                }
              }
            }
            .wrapper-list-location {
              .select2-container--default {
                .selection {
                  .select2-selection--single {
                    @media (min-width: @screen-xxxs-min) and (max-width: @screen-xxxs-max) { // 0 ~ 409
                      border-top: @border-gray;
                    }

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

                    @media (min-width: @screen-xs-min)  and (max-width: @screen-xs-max) { // 600 ~ 768
                      border-top: @border-gray;
                    }

                    @media (min-width: @screen-sm-min)  and (max-width: @screen-sm-max) { //768 ~992
                      border-top: @border-gray;
                    }
                  }
                }
              }
            }
            .wrapper-list-employee {
              .select2-container--default {
                .selection {
                  .select2-selection--single {
                    @media (min-width: @screen-xxxs-min) and (max-width: @screen-xxxs-max) { // 0 ~ 409
                      border-top: @border-gray;
                      border-bottom: @border-gray;
                    }

                    @media (min-width: @screen-xxs-min)  and (max-width: @screen-xxs-max) { // 409 ~ 600
                      border-top: @border-gray;
                      border-bottom: @border-gray;
                    }

                    @media (min-width: @screen-xs-min)  and (max-width: @screen-xs-max) { // 600 ~ 768
                      border-top: @border-gray;
                      border-bottom: @border-gray;
                    }

                    @media (min-width: @screen-sm-min)  and (max-width: @screen-sm-max) { //768 ~992
                      border-top: @border-gray;
                      border-bottom: @border-gray;
                    }
                  }
                }
              }
            }
            .wrapper-list-service {
              .field-services {
                width: 100%;
              }
            }
            .wrapper-list-location {
              #element_field_location_id {
                width: 100%;
              }
            }
            .wrapper-list-employee {
              .field-employees {
                width: 100%;
              }
            }
            .button-search {
              padding: 0;
              width: 150px;
              height: 80px;
              @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;
              }

              @media (min-width: @screen-sm-min)  and (max-width: @screen-sm-max) { //768 ~992
                margin-top: @margin-block-medium;
              }
              .btn-search-event {
                width: 100%;
                height: 100%;
                background-color: #5678DA;
                span {
                  text-transform: uppercase;
                  font-weight: @font-weight-semibold;
                  font-size: @font-size-medium;
                }
              }
            }
          }
        }
      }
    }
  }
}
