//==============================================
// Base/ forms
//==============================================

/*
*  VENDOR FORMS
*/

// Flex-form we use them in form selector and in modify forms
.flex-form-group-wrapper, .flex-form-group {
  select {
    border-radius: var(--flex-form-control-border-radius);
    padding: 0 0.8rem;
    text-indent: 1px;
    text-overflow: "";
    font-size: var(--form-control-font-size);
    height: var(--form-control-height);
    color: var(--form-control-color);
    background-color: var(--form-control-bg-color);
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    &:focus {
      outline: none;
      box-shadow: none;
      border: 0;
    }
  }
}

// Bootstrap forms we use them in complete page
.form-group {
  select {
    border: 1px solid var(--form-control-border-color);
    border-radius: var(--bootstrap-form-control-border-radius);
    box-shadow: none;
    display: inline-flex;
    padding: 0 0.8rem;
    font-size: var(--form-control-font-size);
    color: var(--form-control-color);
    height: var(--form-control-height);
    margin-top: 8px;
  }
}
.input-group > .form-control {
  height: var(--form-control-height);
}
.input-group-prepend > .input-group-text {
  border-radius: 0;
}

// jquery ui overrides
input[type="text"],
input[type="password"],
.ui-autocomplete-input,
textarea,
.uneditable-input {
  display: inline-flex;
  padding: 0 0.8rem;
  font-size: var(--form-control-font-size);
  line-height: 18px;
  color: var(--form-control-color);
  border: 1px solid var(--form-control-border-color);
  border-radius: var(--flex-form-control-border-radius);
  box-shadow: none;
}

input[type="text"],
input[type="password"],
.ui-autocomplete-input,
.uneditable-input {
  height: var(--form-control-height);
}

// Custom forms
.custom-form {
  input[type="text"],
  input[type="password"],
  .ui-autocomplete-input,
  textarea,
  .uneditable-input {
    border: 1px solid var(--form-control-border-color);
    border-radius: var(--bootstrap-form-control-border-radius);
  }
}

// Labels
label {
  position: relative;
}

// Custom icons
.custom-icon {
  position: absolute;
  font-size: 18px;
  color: var(--form-control-color);
  right: 8px;
  top: var(--form-control-height);
}

.custom-icon-select {
  @extend .custom-icon;
  top: 16px;
}

// Error styles
.form-reservation-error,
input.form-reservation-error {
  color: var(--error) !important;
  padding: 5px;
  font-size: 0.9rem;
}

// Form Dates
.custom-date-form {
  display: flex;
  select {
    padding-right: 30px !important;
  }
  .fas,
  .fa {
    margin-left: -20px;
  }
}

.custom-date-form > div:nth-child(2n) {
  margin: 0 5px;
}

.custom-date-item {
  display: flex;
  align-items: baseline;
  flex-grow: 1;
  select.form-control {
    margin-top: 0;
  }
}

// Extra inputs
.input-group > .form-control.extra-input {
  border-top: 1px solid var(--form-control-border-color);
  border-bottom: 1px solid var(--form-control-border-color);
}

// Disabled components
input[type="text"]:disabled,
select:disabled {
  background-color: var(--form-control-disabled);
}

// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) {
  .flex-form-group input.hasDatepicker {
    max-width: none;
  }
}

.flex-form-item.widget_pickup_place_group,
.flex-form-item.widget_return_place_group {
  flex-direction: column;
}
