.manage-hosts {
  padding: $pad-base;
  min-height: 90vh;

  &__header {
    .ace-kolide {
      margin: 12px 0;
    }
  }

  &__title {
    .kolidecon {
      color: $text-light;
      margin-right: 15px;
    }

    .kolidecon-success-check {
      color: $success;
    }

    .kolidecon-offline {
      color: $alert;
    }

    .kolidecon-mia {
      color: $text-ultradark;
    }

    .kolidecon-clock {
      color: $warning;
    }
  }

  &__delete-label {
    float: right;
    margin-bottom: 15px;
  }

  &__description {
    line-height: 1.54;
    letter-spacing: 0.5px;
    margin: 0;

    h2 {
      text-transform: uppercase;
      color: $text-dark;
      font-weight: $light;
      font-size: 16px;
    }

    p {
      color: $text-medium;
      margin: 0;
      font-size: 13px;
    }
  }

  &__topper {
    @include display(flex);
    @include align-items(flex-end);
    border-bottom: solid 1px $accent-light;
    padding-bottom: 10px;
  }

  &__host-count {
    @include flex-grow(1);
    font-size: 14px;
    font-weight: $light;
    letter-spacing: 0.9px;
    color: $text-dark;
    margin: 0;
    display: inline-block;
  }

  &__modal {
    p {
      font-size: 16px;
    }
  }

  &__modal-buttons {
    @include display(flex);
    @include flex-direction(row-reverse);

    .button--alert {
      margin-left: 10px;
    }
  }

  &__list {
    &--grid {
      @include display(flex);
      @include justify-content(space-around);
      @include flex-wrap(wrap);
      @include align-content(center);
      margin: 0 auto;
    }
  }

  &__no-hosts {
    width: 440px;
    margin: 35px auto;
    font-size: 15px;
    font-weight: $normal;
    line-height: 2;
    letter-spacing: normal;
    color: rgba(32, 37, 50, 0.66);

    h1 {
      font-size: 32px;
      font-weight: $normal;
      line-height: normal;
      letter-spacing: normal;
      color: #48c586;
    }

    h2 {
      font-size: 16px;
      font-weight: $bold;
      line-height: 1.5;
      letter-spacing: -0.5px;
      color: rgba(32, 37, 50, 0.66);
    }

    ul {
      margin: 0;
      padding-left: 20px;
    }
  }

  &__no-hosts-contact {
    text-align: right;
    margin-top: 30px;

    p {
      margin: 0;
    }
  }

  &__invite-modal {
    .modal__header {
      span {
        color: #48c586;
      }
    }
  }
}
