.host-details,
.device-user {
  @include vertical-page-layout;
  @include color-contrasted-sections;

  .header {
    display: flex;
    flex-direction: column;
  }
  .card {
    .list {
      list-style: none;
      padding: 0;
      margin: 0;

      &__item {
        margin-bottom: 12px;
        display: flex;

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

    .results {
      margin: 0;
      width: 350px;

      &__header {
        margin: 0 0 $pad-medium 0;
        font-size: $small;
        color: $core-fleet-black;
        font-weight: $bold;
      }

      &__data {
        margin: 0;
        font-size: $x-small;
      }
    }
  }

  .title {
    flex-direction: row;
    justify-content: space-between;
    margin: 0;
    padding-bottom: 0;

    .display-name-container {
      display: flex;
      align-items: baseline; // Align text to bottom
    }

    .display-name {
      font-size: $large;
      font-weight: $bold;
      @include ellipse-text(300px);

      @media (min-width: $break-md) {
        @include ellipse-text(500px);
      }

      @media (min-width: $break-lg) {
        @include ellipse-text(800px);
      }

      @media (min-width: $break-xxl) {
        @include ellipse-text(1000px);
      }
    }
  }

  &__tab-nav,
  &__software-tab-nav {
    width: 100%;
  }

  .col-50 {
    flex: 2;
  }

  .col-25 {
    flex: 1;
  }

  .status {
    color: $core-fleet-black;
    text-transform: capitalize;

    &--online {
      &:before {
        background-color: $ui-success;
        border-radius: 100%;
        content: " ";
        display: inline-block;
        height: 8px;
        margin-right: $pad-small;
        width: 8px;
      }
    }

    &--offline {
      &:before {
        background-color: $ui-fleet-black-50;
        border-radius: 100%;
        content: " ";
        display: inline-block;
        height: 8px;
        margin-right: $pad-small;
        width: 8px;
      }
    }
  }

  .form-field--dropdown {
    margin: 0;
  }

  .buttons {
    display: flex;
    align-items: center;
    position: absolute;
    right: 25px;

    span {
      font-weight: $regular;
    }

    a {
      display: flex;
      align-items: center;
    }
  }

  .empty-table {
    &__container {
      margin: $pad-xxlarge 0; // Equal padding above and below empty states
      min-height: initial;
    }
  }
}
