bb-queue-concierge-add-customer-form {

  label {
    margin: 0;
  }

  input[type="checkbox"] {
    display: inline-block;
    margin: 0;
    width: 15px;
  }

  //typeahead overrides
  .dropdown-menu {
    border-top: 0;
    border-top: {
      left-radius: 0;
      right-radius: 0;
    }
    margin: 0;
    width: 75%;

    .active {
      background-color: $bb-studio-solitude-gray;
      color: $bb-dark-gray;
    }
  }

  //alert overrides
  studio-alert .studio-alert {
    margin-bottom: 0;
  }

  .add-customer-form {

    &__container {
      @include column-flex-container;
    }

    &__inputs,
    &__footer,
    &__tabs {
      @include column-flex-container;
      padding: spacing(20);
    }

    &__tabs {
      @include flex-row;
      padding-bottom: 0;
    }

    &__row {
      @include flex-row;
      margin-bottom: spacing(14);

      &:last-child {
        margin: 0;
      }
    }

    &__tab {
      background-color: white;
      border: {
        top: none;
        right: none;
        bottom: border(1);
        left: none;
      }
      min-width: spacing(95);
      padding: {
        top: spacing(5);
        right: spacing(15);
        bottom: spacing(5);
        left: spacing(15);
      }

      &--active {
        border-bottom: border(2, $studio-cyan-blue);
        z-index: 1000;
      }
    }

    &__column {
      @include flex-column(100%);
      margin-right: spacing(10);

      &:last-child {
        margin-right: 0;
      }

      &--right-align {
        @include flex-right-align-items;
      }

      &--secondary-footer-actions {
        @include flex-column(90%);
      }
    }

    &__no-margin {
      margin: 0;
    }

    &__alert {
      margin: {
        top: spacing(15);
      }
    }

    &__input {
      border: border(1);
      border-radius: 3px;
      font-size: 15px;
      min-height: spacing(42);
      padding: spacing(10);
      width: 100%;
    }

    &__input-field-label {
      display: block;
      font: {
        weight: $bb-queue-concierge-bold;
      }
      margin-bottom: spacing(8);
    }

    &__input-field {
      border: border(1);
      height: spacing(36);
      padding: {
        top: spacing(6);
        right: spacing(12);
        bottom: spacing(6);
        left: spacing(12);
      }
      width: 100%;
    }

    &_notes-field {
      height: spacing(73);
      resize: none;
    }

    &__GDPR-text {
      display: inline-block;
      font: {
        weight: normal;
      }
      margin-bottom: 0;
      padding-left: spacing(12);
      word-break: break-word;
      vertical-align: top;
      width: 95%;
    }

    &__footer {
      border-top: border(1);
    }

    &__primary-btn {
      @include concierge-btn;
      @include concierge-btn-primary;
      margin-left: spacing(10);
    }

    &__secondary-btn {
      @include concierge-btn;
      @include concierge-btn-secondary;
    }

    &__btn-margin-right {
      margin-right: spacing(5);
    }

    // typeahead results
    &__results-wrapper {
      border: {
        top: 0;
        right: border(1);
        bottom: border(1);
        left: border(1);
      }
      border-top: 0;
      cursor: pointer;
      font: {
        size: 15px;
      }
      padding: spacing(10);

      & > p {
        margin: 0;
      }
    }

    &__results {
      &--email,
      &--mobile,
      &--phone {
        color: $studio-raven-pale-gray;
      }
    }

    // client row scss
    &__queuer {
      @include column-flex-container;
      margin-top: spacing(15);
      width: 100%;

      &-details {
        @include flex-row;
        align-items: center;
        background-color: $bb-studio-solitude-gray;
        padding: spacing(10);
      }

      &-info {
        @include column-flex-container;
        flex-grow: 1;
        width: calc(100% - 85px);
      }

      &-name {
        color: $bb-dark-gray;
        margin: 0;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      &-contact-info {
        color: $studio-raven-pale-gray;

        p {
          margin: 0;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }

      &-remove {
        @include css-close-icon;
        background-color: transparent;

        &::before, &::after {
          background: $studio-cyan-blue;
        }
      }
    }
  }
}