notifications-admin/app/assets/stylesheets/views/dashboard.scss

.dashboard {

  th {
    font-weight: normal;
  }

  > .heading-medium:first-of-type {
    margin-top: govuk-spacing(3);
  }

}

.keyline-block {
  border-top: 1px solid $border-colour;
  padding-top: govuk-spacing(3);
}

.spark-bar {

  @include core-16;
  box-sizing: border-box;
  display: block;
  width: 100%;
  margin-bottom: govuk-spacing(3);
  height: govuk-spacing(3);
  color: $text-colour;
  text-align: left;

  &-bar {
    @include bold-27($tabular-numbers: true);
    box-sizing: border-box;
    display: inline-block;
    overflow: visible;
    background: $panel-colour;
    color: $black;
    padding: 10px 6px 8px 0;
    text-indent: 12px;
    text-align: right;
    margin: 2px 0 1px 0;
    transition: width 0.6s ease-in-out;
  }

}

.file-list {

  &-filename {
    @include bold-19;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-bottom: 30px;
    padding-top: 10px;
    margin-bottom: -30px;
    margin-top: -10px;
  }

  &-filename-large {
    @include bold-24;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-bottom: 30px;
    padding-top: 10px;
    margin-bottom: -30px;
    margin-top: -10px;
  }

  &-filename-unlinked {
    @include core-19;
  }

  &-hint {
    @include core-16;
    display: block;
    color: $secondary-text-colour;
    pointer-events: none;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 580px;
  }

  &-hint-large {
    @include core-19;
    display: block;
    color: $secondary-text-colour;
    pointer-events: none;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 580px;
  }

  &-status {
    text-align: right;
  }

}

/* The focus state for sibling links overlaps the hint so the hint's text colour needs to adapt */
.govuk-link:focus {
  &.file-list-filename,
  &.file-list-filename-large,
  & + .file-list-hint,
  & + .file-list-hint-large {
    /* link needs non-static position to overlap the cell border, hint so it isn't overlapped itself */
    position: relative;
  }

  &.file-list-filename,
  &.file-list-filename-large {
    /* override box-shadow to push underline down a bit */
    box-shadow: 0 -2px $govuk-focus-colour, 0 5px $govuk-focus-text-colour;
  }

  & + .file-list-hint,
  & + .file-list-hint-large {
    color: $govuk-focus-text-colour;
  }

}

.failure-highlight {
  @include bold-19;
  color: $error-colour;
}

.align-with-message-body {
  display: block;
  margin-top: govuk-spacing(5);
}