grr-host-info {
  h1 {
    font-size: 30px;
    margin: 20px;

    span {
      font-size: 20px;
      color: $color-infoline-color;
      margin-left: 5px;
    }
  }

  div.client-actions {
    margin: -5px 30px 25px 20px;
    padding: 10px;
    background: $color-proto-background;
    height: auto !important;

    .btn-group {
      float: right;

      label {
        margin-top: 2px;
      }
    }
  }

  div.no-approval,
  div.new-ui-info {
    margin: 20px;
    height: auto !important;

    button,
    .btn {
      float: right;
      margin-top: -23px;
    }
  }

  table {
    td,
    th {
      vertical-align: top !important;
    }

    td.mac-address {
      font-family: $font-monospace;
    }
  }

  .client-info-wrapup {
    width: 225px;
    float: left;
    margin: 0 20px 20px 20px;
    background: $color-proto-background;
    padding: 10px 15px;
  }

  .client-info-details {
    margin-left: 265px;
    margin-top: 20px;

    section {
      border-bottom: 1px solid $color-section-separator;
      padding-bottom: 10px;
      box-shadow: 0 2px 6px $color-section-box-shadow;
      margin: 0 10px 20px 0;
      padding: 10px 20px;
      overflow-x: auto;

      table.full-section-info {
        width: 100%;

        th {
          padding: 10px 10px 10px 0;
        }

        td {
          padding: 5px 5px 5px 0;
        }

        td ul {
          margin: 0;
          padding: 0;
          list-style: none;
        }

        tr {
          border-bottom: 1px solid $color-notification-highlight-color;

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

      .no-section-info {
        font-size: 1.3em;
        color: $color-infoline-color;
        text-align: center;
        padding: 20px 0 10px 0;
      }

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

    span.time-since {
      color: $color-infoline-color;
      margin-left: 10px;
    }
  }

  .client-details {
    padding: 0 20px;
  }

  h2 {
    font-size: 18px;
    margin: -10px -20px 0 -20px;
    padding: 10px 20px;
    background: $color-proto-background;

    i {
      margin-top: 0;
      margin-right: 5px;
    }
  }

  table.properties {
    margin: 15px 0 0 0;

    td,
    th {
      padding-bottom: 10px;
    }

    td {
      padding-left: 20px;
    }
  }

  dd {
    margin-bottom: 10px;
    word-break: break-all;
  }

  ul.user-list {
    margin: 0;
    padding: 0;
    list-style: none;

    li {
      margin-bottom: 2px;
    }
  }

  ul.label-list {
    margin: 0;
    padding: 0;
    list-style: none;

    li {
      margin-bottom: 2px;
      float: left;
    }

    &::after {
      content: '';
      display: block;
      clear: both;
    }
  }

  grr-version-dropdown {
    display: inline-block;
    margin-top: 2px;
    margin-right: 10px;
    float: right;

    select.form-control {
      width: 200px;
      display: inline-block;
      margin-left: 10px;
    }
  }
}
