.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;

    button {
      &:first-child {
        margin-right: 15px;
      }
    }
  }

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

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

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

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

  &__host-count {
    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 {
    display: flex;
    flex-direction: row-reverse;

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

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

  &__toggle-view {
    .kolidecon {
      width: 24px;
      height: 24px;
      margin-left: 12px;
      fill: $accent-dark;
    }

    &--active {
      .kolidecon {
        fill: $link;
      }
    }
  }
}
