form {

  md-input-container {
    .md-input {
      border-bottom-color: $form-input-inactive-bottom-border;
      color: $font-color;
    }
  }

  & + beyond-card {

    & md-card {
      margin-top: 12px;
    }
  }

  .button-container {
    align-items: flex-end;
  }
}

md-input-container {

  &:not(.md-input-focused):not(.md-input-has-value):not(.md-input-has-placeholder):not(.md-input-invalid) {

    label:not(.md-no-float):not(.md-container-ignore),
    .md-placeholder,
    .md-select-placeholder span {
      color: $font-color;
      font-style: italic;
      font-weight: 100;
    }
  }

  &:not(.md-input-invalid) {

    & [ng-message] {
      display: none;
    }

    &.md-input-has-value {

      label {
        color: $font-color-disabled;
      }
    }

    &.md-input-focused {

      .md-input {
        border-color: $font-link-color;
      }

      .md-select-value {
        border-color: $font-link-color;
      }

      label {
        color: $font-color-disabled;
      }
    }
  }

  &.md-input-invalid {

    &.md-input-focused {

      label {
        color: $font-color-disabled;
      }

      .md-placeholder {
        opacity: 0;
      }
    }

    label:not(.md-no-float):not(.md-container-ignore) {
      transform: translate3d(0,6px,0) scale(0.75);
      opacity: 1;

      &.md-placeholder {
        transform: translate3d(0,0,0) scale(0.75);
      }
    }

    &[ng-message] {
      color: $textbox-border-invalid;
    }

    .md-input {
      border-bottom-width: 2px;
      border-bottom-color: $textbox-border-invalid;
    }

    md-select {

      .md-select-value {
        border-bottom-width: 2px;
        border-bottom-color: $textbox-border-invalid;
      }

      &:not([disabled]) {

        &:focus  {

          .md-select-value {
            border-bottom-width: 2px;
            border-bottom-color: $textbox-border-invalid;
          }
        }

        &.ng-invalid.ng-dirty {

          .md-select-value {
            border-bottom-width: 2px;
            border-bottom-color: $textbox-border-invalid !important;
          }
        }
      }
    }
  }

  &.md-input-focused {

    .hint {
      color: $font-color-disabled;
      font-size: 12px;
      font-size: 1.2rem;
      display: inline;
    }

    [ng-messages] {
      display: none;
    }

    .md-placeholder {
      opacity: 0;
    }
  }

  &.md-input-has-value {
    label {
      padding-top: 4px;
    }
  }

  &.md-input-has-placeholder {

    .md-placeholder,
    .md-select-placeholder span {
      color: $font-color;
      font-style: italic;
      font-weight: 100;
    }
  }

  .hint {
    display: none;
  }

  [ng-messages] {
    display: block;
  }

  .md-input {

    &[disabled] {
      background: none;
      color: $font-color;
      -webkit-text-fill-color: $font-color;
      -webkit-opacity: 1;
    }
  }

  md-select {

    &[disabled] {

      .md-select-value {
        background-image: none;
        border: none;
        color: $font-color;
        -webkit-text-fill-color: $font-color;
        -webkit-opacity: 1;

        .md-select-icon {
          display: none;
        }
      }
    }

    &:not([disabled]) {

      &:focus  {

        .md-select-value {
          border-bottom-width: 2px;
          border-bottom-color: $font-link-color;
        }
      }
    }
  }
}



@media (min-width: 960px) {
  md-card, beyond-modal-content {

    *:not(beyond-modal-header) {
      md-input-container {

        &:not(:last-child) {
          padding-right: 20px;
        }
      }
    }
  }

  beyond-modal-content {
    *:not(beyond-modal-header) {
      md-input-container {

        &.flex-50:first-child {
          padding-right: 10px;
        }
      }
    }
  }
}

.beyond-chips-container {
  display: inline-block;
  position: relative;
  padding: 2px;
  margin: 18px 0;
}
