@ministryofjustice/hmpps-digital-prison-reporting-frontend 3.7.5 → 3.7.7

package/dpr/all.scss

@@ -5,143 +5,147 @@ $govuk-assets-path: "/assets/govuk/";
 
 @import 'govuk/all';
 
-.accordion-section {
+.dpr-accordion-section {
   margin-bottom: govuk-spacing(6);
   position: relative;
-}
 
-.accordion-section-row {
-  position: relative;
-}
+  .accordion-section-row {
+    position: relative;
+  }
 
-.accordion-section-button {
-  min-width: 130px;
-  padding-right: govuk-spacing(3);
-}
+  .accordion-section-button {
+    min-width: 130px;
+    padding-right: govuk-spacing(3);
+  }
+
+  .accordion-details.disabled {
+    pointer-events: none;
 
-.accordion-details.disabled {
-  pointer-events: none;
-  .govuk-details__summary-text, .govuk-details__summary:before {
-    opacity: .5
+    .govuk-details__summary-text, .govuk-details__summary:before {
+      opacity: .5
+    }
   }
-}
 
-.accordion-details {
-  padding-top: govuk-spacing(2);
-  padding-bottom: govuk-spacing(1);
+  .accordion-details {
+    padding-top: govuk-spacing(2);
+    padding-bottom: govuk-spacing(1);
 
-  .govuk-details__text {
-    border-left: none;
-    border-bottom: 1px Solid govuk-colour("mid-grey");
-    padding: 15px 0px;
+    .govuk-details__text {
+      border-left: none;
+      border-bottom: 1px Solid govuk-colour("mid-grey");
+      padding: 15px 0;
+    }
   }
-}
 
-.accordion-section-header {
-  position: absolute;
-  width: calc(100% - 120px);
-  left: 120px;
-  top: 1px;
+  .accordion-section-header {
+    position: absolute;
+    width: calc(100% - 120px);
+    left: 120px;
+    top: 1px;
 
-  @media(max-width: 640px) {
+    @media(max-width: 640px) {
       top: -1px;
+    }
   }
-}
 
-.accordion-section-header-scroll {
-  width: auto;
-  position: relative;
-  overflow-x: scroll;
-  overflow-y: hidden;
-  white-space: nowrap;
-}
+  .accordion-section-header-scroll {
+    width: auto;
+    position: relative;
+    overflow-x: scroll;
+    overflow-y: hidden;
+    white-space: nowrap;
+  }
 
-.accordion-summary-remove-button {
-  display: inline-block;
-  padding: govuk-spacing(2);
-  background-color: transparent;
-  position: relative;
-  cursor: pointer;
-  text-decoration: underline !important;
-  text-underline-offset: 4px;
-  color: govuk-colour("blue");
-  text-decoration-color: govuk-colour("blue");
-  text-decoration-thickness: 1px !important;
-  box-shadow: none;
-
-  &:hover {
+  .accordion-summary-remove-button {
+    display: inline-block;
+    padding: govuk-spacing(2);
+    background-color: transparent;
+    position: relative;
+    cursor: pointer;
+    text-decoration: underline !important;
+    text-underline-offset: 4px;
+    color: govuk-colour("blue");
+    text-decoration-color: govuk-colour("blue");
+    text-decoration-thickness: 1px !important;
     box-shadow: none;
-    text-decoration: none;
-    color: govuk-colour("black");
+
+    &:hover {
+      background-color: #e8f1f8;
+      box-shadow: none;
+      text-decoration: none;
+      color: govuk-colour("black");
+    }
   }
-}
 
-.accordion-summary-remove-button:hover:after {
-  background-image: url(#{$dpr-images-path}icon-tag-remove-cross.svg);
-  content: "";
-  display: inline-block;
-  font-weight: bold;
-  height: 10px;
-  margin-left: 5px;
-  vertical-align: middle;
-  width: 10px;
-}
+  .accordion-summary-remove-button:hover:after {
+    background-image: url(#{$dpr-images-path}icon-tag-remove-cross.svg);
+    content: "";
+    display: inline-block;
+    font-weight: bold;
+    height: 10px;
+    margin-left: 5px;
+    vertical-align: middle;
+    width: 10px;
+  }
 
-.accordion-summary-remove-button:after {
-  display: none;
-}
+  .accordion-summary-remove-button:after {
+    display: none;
+  }
 
-.accordion-summary-show-accordion-button {
-  margin-right: 10px;
-}
+  .accordion-summary-show-accordion-button {
+    margin-right: 10px;
+  }
 
-.selected-accordion-button {
-  display: inline-block;
-}
+  .selected-accordion-button {
+    display: inline-block;
+  }
 
-@media print {
-  .accordion-section {
+  .govuk-details__summary-text {
+    text-underline-offset: 4px;
+  }
+
+  @media print {
     margin-bottom: govuk-spacing(3);
 
     .accordion-section-row--Columns {
       display: none;
     }
-  }
-  
-  .accordion-section-header {
-    position: relative;
-    left: 0;
-    margin-bottom: govuk-spacing(1);
-
-    .selected-accordion-button {
-      display: block;
-    }
 
-    a.govuk-button--inverse.accordion-summary-remove-button {
-      text-decoration: none !important;
-      color: black;
-      font-size: 14px;
+    .accordion-section-header {
       position: relative;
-      padding: 0 0 govuk-spacing(1);
+      left: 0;
+      margin-bottom: govuk-spacing(1);
+
+      .selected-accordion-button {
+        display: block;
+      }
+
+      a.govuk-button--inverse.accordion-summary-remove-button {
+        text-decoration: none !important;
+        color: black;
+        font-size: 14px;
+        position: relative;
+        padding: 0 0 govuk-spacing(1);
+      }
     }
   }
-}
 
-::-webkit-scrollbar {
-  height: 6px;
-  width: 0;
-}
+  ::-webkit-scrollbar {
+    height: 6px;
+    width: 0;
+  }
 
-/* Track */
-::-webkit-scrollbar-track {
-  background: none; 
-}
- 
-/* Handle */
-::-webkit-scrollbar-thumb {
-  background: govuk-colour("mid-grey"); 
+  /* Track */
+  ::-webkit-scrollbar-track {
+    background: none;
+  }
+
+  /* Handle */
+  ::-webkit-scrollbar-thumb {
+    background: govuk-colour("mid-grey");
+  }
 }
-.autocomplete-text-input {
+.dpr-autocomplete-text-input {
   position: relative;
 
   ul {
@@ -181,95 +185,75 @@ $govuk-assets-path: "/assets/govuk/";
 }
 
 // VARIANT 1 STYLES
+.dpr-card-group-v1 {
+  .card {
+    margin-bottom: 30px;
+    background: #fff;
+    border: 1px solid #d9dadb;
+    position: relative;
+    padding: 25px;
 
-.card {
-  margin-bottom: 30px;
-  background: #fff;
-  border: 1px solid #d9dadb;
-  position: relative;
-  padding: 25px;
-
-  @media(min-width: 769px) and (max-width: 1019px) {
-    margin-bottom: 10px;
-  }
+    @media(min-width: 769px) and (max-width: 1019px) {
+      margin-bottom: 10px;
+    }
 
-  @media(max-width: 768px) {
-    margin-bottom: 0px;
-    min-height: 0px !important;
-    a, p {
-      font-size: 18px !important;
+    @media(max-width: 768px) {
+      margin-bottom: 0;
+      min-height: 0 !important;
+      a, p {
+        font-size: 18px !important;
+      }
     }
   }
-}
 
-.card-wrapper {
-  position: relative;
-  height: 100%;
-}
+  .card-wrapper {
+    position: relative;
+    height: 100%;
+  }
 
-.card__heading {
-  margin-top: 0;
-  margin-bottom: 15px
-}
+  .card__heading {
+    margin-top: 0;
+    margin-bottom: 15px
+  }
 
-.card__description {
-  margin-bottom: 0
-}
+  .card__description {
+    margin-bottom: 0
+  }
 
-.card--clickable {
-  border-bottom-width: 5px
-}
+  .card--clickable {
+    border-bottom-width: 5px
+  }
 
-.card--clickable:hover,.card--clickable:active {
-  cursor: pointer
-}
+  .card--clickable:hover, .card--clickable:active {
+    cursor: pointer
+  }
 
-.card--clickable:hover .card__heading a,.card--clickable:hover .card__link,.card--clickable:active .card__heading a,.card--clickable:active .card__link {
-  color: #003078;
-  text-decoration: none
-}
+  .card--clickable:hover .card__heading a, .card--clickable:hover .card__link, .card--clickable:active .card__heading a, .card--clickable:active .card__link {
+    color: #003078;
+    text-decoration: none
+  }
 
-.card--clickable:hover .card__heading a:focus,.card--clickable:hover .card__link:focus,.card--clickable:active .card__heading a:focus,.card--clickable:active .card__link:focus {
-  outline: 3px solid transparent;
-  color: #0b0c0c;
-  background-color: #fd0;
-  box-shadow: 0 -2px #fd0,0 4px #0b0c0c;
-  text-decoration: none
-}
+  .card--clickable:hover .card__heading a:focus, .card--clickable:hover .card__link:focus, .card--clickable:active .card__heading a:focus, .card--clickable:active .card__link:focus {
+    outline: 3px solid transparent;
+    color: #0b0c0c;
+    background-color: #fd0;
+    box-shadow: 0 -2px #fd0, 0 4px #0b0c0c;
+    text-decoration: none
+  }
 
-.card--clickable:hover {
-  border-color: #b1b4b6
-}
+  .card--clickable:hover {
+    border-color: #b1b4b6
+  }
 
-.card--clickable:active {
-  border-color: #b1b4b6;
-  bottom: -1px
+  .card--clickable:active {
+    border-color: #b1b4b6;
+    bottom: -1px
+  }
 }
-
 // === END VARIANT 1 STYLES ===
 
 // === VARIANT 2 STYLES ===
-
-.dpr-card-group {
-  display: grid;
-  grid-template-columns: 1fr 1fr 1fr;
-  column-gap: 30px;
-  row-gap: 20px;
-
-  @media(min-width: 769px) and (max-width: 1019px) {
-    grid-template-columns: 1fr 1fr;
-  }
-
-  @media(max-width: 768px) {
-    grid-template-columns: 1fr;
-
-    a,
-    p {
-      font-size: 16px;
-    }
-  }
-
-
+.dpr-card-group-v2 {
   .dpr-card-group__item {
     min-height: 120px;
     position: relative;
@@ -296,207 +280,226 @@ $govuk-assets-path: "/assets/govuk/";
     }
   }
 }
-
 // === END VARIANT 2 STYLES ===
 
-.card-loading {
-  pointer-events: none;
-}
+.dpr-card-group {
+  .card-loading {
+    pointer-events: none;
+  }
 
-.card-disabled {
-  pointer-events: none;
-}
+  .card-disabled {
+    pointer-events: none;
+  }
+
+  .card-disabled:hover {
+    pointer-events: none;
+    border: 1px solid #d9dadb;
+    bottom: 0;
+  }
+
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  column-gap: 30px;
+  row-gap: 20px;
+
+  @media(min-width: 769px) and (max-width: 1019px) {
+    grid-template-columns: 1fr 1fr;
+  }
 
-.card-disabled:hover {
-  pointer-events: none;
-  border: 1px solid #d9dadb;
-  bottom: 0px;
+  @media(max-width: 768px) {
+    grid-template-columns: 1fr;
+
+    a,
+    p {
+      font-size: 16px;
+    }
+  }
 }
 #user-selected-columns-form {
   margin-left: govuk-spacing(2);
-}
 
-.columns-container {
-  position: relative;
-  
-  .govuk-checkboxes.govuk-checkboxes--small {
-    display: grid;
-    grid-template-columns: 1fr 1fr 1fr;
-    column-gap: 10px;
+  .columns-container {
+    position: relative;
 
-    @media(min-width: 769px) and (max-width: 1019px) {
+    .govuk-checkboxes.govuk-checkboxes--small {
+      display: grid;
+      grid-template-columns: 1fr 1fr 1fr;
+      column-gap: 10px;
+
+      @media(min-width: 769px) and (max-width: 1019px) {
         grid-template-columns: 1fr 1fr;
       }
-    
-    @media(max-width: 768px) {
-      grid-template-columns: 1fr;
+
+      @media(max-width: 768px) {
+        grid-template-columns: 1fr;
+      }
     }
   }
 }
 
-.columns-header {
-  padding-left: 10px;
-  padding-top: 10px;
-}
 // Cannibalised from MoJ sortable table
 
-.data-table-header-button {
-  background-color: transparent;
-  border-width: 0;
-  -webkit-box-decoration-break: clone;
-  box-decoration-break: clone;
-  -webkit-box-shadow: 0 0 0 0;
-  -moz-box-shadow: 0 0 0 0;
-  box-shadow: 0 0 0 0;
-  color: #005ea5;
-  cursor: pointer;
-  font-family: inherit;
-  font-size: 1em;
-  font-weight: inherit;
-  margin: 0;
-  padding: 0 10px 0 0;
-  position: relative;
-  text-align: inherit;
-  text-decoration: none;
-  white-space: nowrap;
-}
+.table-container {
+  .data-table-header-button {
+    background-color: transparent;
+    border-width: 0;
+    -webkit-box-decoration-break: clone;
+    box-decoration-break: clone;
+    -webkit-box-shadow: 0 0 0 0;
+    -moz-box-shadow: 0 0 0 0;
+    box-shadow: 0 0 0 0;
+    color: #005ea5;
+    cursor: pointer;
+    font-family: inherit;
+    font-size: 1em;
+    font-weight: inherit;
+    margin: 0;
+    padding: 0 10px 0 0;
+    position: relative;
+    text-align: inherit;
+    text-decoration: none;
+    white-space: nowrap;
+  }
 
-.data-table-header-button-sort-none:before {
-  content: " \25bc";
-  position: absolute;
-  right: -1px;
-  top: 9px;
-  font-size: 0.5em;
-}
+  .data-table-header-button-sort-none:before {
+    content: " \25bc";
+    position: absolute;
+    right: -1px;
+    top: 9px;
+    font-size: 0.5em;
+  }
 
-.data-table-header-button-sort-none:after {
-  content: " \25b2";
-  position: absolute;
-  right: -1px;
-  top: 1px;
-  font-size: 0.5em;
-}
+  .data-table-header-button-sort-none:after {
+    content: " \25b2";
+    position: absolute;
+    right: -1px;
+    top: 1px;
+    font-size: 0.5em;
+  }
 
-.data-table-header-button-sort-ascending:after {
-  content: " \25b2";
-  font-size: .8em;
-  position: absolute;
-  right: -5px;
-  top: 2px;
-}
+  .data-table-header-button-sort-ascending:after {
+    content: " \25b2";
+    font-size: .8em;
+    position: absolute;
+    right: -5px;
+    top: 2px;
+  }
 
-.data-table-header-button-sort-descending:after {
-  content: " \25bc";
-  font-size: .8em;
-  position: absolute;
-  right: -5px;
-  top: 2px;
-}
+  .data-table-header-button-sort-descending:after {
+    content: " \25bc";
+    font-size: .8em;
+    position: absolute;
+    right: -5px;
+    top: 2px;
+  }
 
-.data-table-cell-wrap-none {
-  white-space: nowrap;
-}
+  .data-table-cell-wrap-none {
+    white-space: nowrap;
+  }
 
-.data-table-cell-wrap-normal {
-  white-space: normal;
-}
+  .data-table-cell-wrap-normal {
+    white-space: normal;
+  }
 
-.data-table-cell-wrap-break-words {
-  word-break: break-all;
-}
+  .data-table-cell-wrap-break-words {
+    word-break: break-all;
+  }
 
-#pageSize {
-  min-width: 5em;
-}
+  #pageSize {
+    min-width: 5em;
+  }
 
-.govuk-table__cell--content {
-  text-align: center;
-}
+  .govuk-table__cell--content {
+    text-align: center;
+  }
 
-.data-table-empty-message {
-  text-align: center;
-  position: relative;
-}
+  .table-container {
+    position: relative;
+  }
 
-.table-container {
-  position: relative;
-}
+  a.disabled {
+    pointer-events: none;
+    cursor: default;
+    opacity: 0.5;
+  }
 
-a.disabled {
-  pointer-events: none;
-  cursor: default;
-  opacity: 0.5;
-}
+  .pagination {
+    overflow: auto;
+  }
 
-.pagination {
-  overflow: auto;
-}
+  .data-table-page-size-container {
+    height: 40px;
+  }
 
-.data-table-page-size-container {
-  height: 40px;
-}
+  .data-table-page-size {
+    float: right;
 
-.data-table-page-size {
-  float: right;
+    @media(max-width: 640px) {
+      width: 100%;
+    }
 
-  @media(max-width: 640px) {
-    width: 100%;
+    @media(max-width: 319px) {
+      .govuk-form-group {
+        margin-bottom: 0;
+      }
+      height: 72px;
+      margin-bottom: govuk-spacing(2);
+    }
   }
 
   @media(max-width: 319px) {
-    .govuk-form-group {
-      margin-bottom: 0;
+    #pageSize {
+      width: 100%;
     }
-    height: 72px;
-    margin-bottom: govuk-spacing(2);
   }
-}
 
-@media(max-width: 319px) {
-  #pageSize {
-    width: 100%;
+  .dpr-table-wrapper {
+    overflow: scroll;
   }
-}
 
-.dpr-table-wrapper {
-  overflow: scroll;
-}
+  .table-row-count {
+    color: govuk-colour("dark-grey");
+    font-weight: 100;
+    text-align: right;
+  }
 
-.table-row-count {
-  color: govuk-colour("dark-grey");
-  font-weight: 100;
-  text-align: right;
-}
+  .table-row--no-border {
+    border-bottom: none;
+  }
 
-.table-row--no-border {
-  border-bottom: none;
-}
+  .table-row-count--top {
+    padding-bottom: govuk-spacing(0);
+  }
 
-.table-row-count--top {
-  padding-bottom: govuk-spacing(0);
+  .table-row-count--bottom {
+    padding-top: govuk-spacing(2);
+    padding-bottom: govuk-spacing(2);
+  }
 }
 
-.table-row-count--bottom {
-  padding-top: govuk-spacing(2);
-  padding-bottom: govuk-spacing(2);
+.data-table-empty-message {
+  text-align: center;
+  position: relative;
 }
-.date-range {
+
+.date-range-date-range {
   .govuk-form-group {
-    margin-bottom: 0px;
+    margin-bottom: 0;
   }
-}
 
-.daterange-set-to-minmax {
-  cursor: pointer;
-  text-align: right;
-  margin-bottom: govuk-spacing(0);
-  margin-top: govuk-spacing(1);
+  .daterange-set-to-minmax {
+    cursor: pointer;
+    text-align: right;
+    margin-bottom: govuk-spacing(0);
+    margin-top: govuk-spacing(1);
 
-  &:hover {
-    color: govuk-colour("light-blue")
+    &:hover {
+      color: govuk-colour("light-blue")
+    }
   }
 }
-.dropdown-button {
+
+.dpr-dropdown-button {
   position: relative;
   float: right;
 
@@ -509,7 +512,7 @@ a.disabled {
     background-color: white;
     border-top: #b1b4b6 1px solid;
     display: none;
-    right: 0px;
+    right: 0;
     list-style-type: none;
     margin: 0;
     padding: 0;
@@ -625,149 +628,160 @@ a.disabled {
     color: black;
   }
 }
-.filter-container {
-  position: relative;
-  display: grid;
-  grid-template-columns: 1fr 1fr 1fr;
-  column-gap: govuk-spacing(3);
-  row-gap: govuk-spacing(3);
-
-  @media(min-width: 769px) and (max-width: 1019px) {
-    grid-template-columns: 1fr 1fr;
-  }
-  
-  @media(max-width: 768px) {
-    grid-template-columns: 1fr;
-  }
-}
+.dpr-filters {
+  .filter-container {
+    position: relative;
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    column-gap: govuk-spacing(3);
+    row-gap: govuk-spacing(3);
 
-.filter-item {
-  border-bottom: 2px Solid govuk-colour("mid-grey");
-  background-color: lighten(govuk-colour("light-grey"), 3%);
-  padding: govuk-spacing(4);
+    @media(min-width: 769px) and (max-width: 1019px) {
+      grid-template-columns: 1fr 1fr;
+    }
 
-  .govuk-form-group {
-    margin-bottom: govuk-spacing(2);
+    @media(max-width: 768px) {
+      grid-template-columns: 1fr;
+    }
   }
-}
 
-.govuk-details__summary-text {
-  text-underline-offset: 4px;
-}
-
-.filter-actions {
-  margin-top: 15px;
-  height: 40px;
+  .filter-item {
+    border-bottom: 2px Solid govuk-colour("mid-grey");
+    background-color: lighten(govuk-colour("light-grey"), 3%);
+    padding: govuk-spacing(4);
 
-  @media(max-width: 768px) {
-    height: 80px;
+    .govuk-form-group {
+      margin-bottom: govuk-spacing(2);
+    }
   }
 
-  .filter-actions-buttons {
-    float: right;
+  .filter-actions {
+    margin-top: 15px;
+    height: 40px;
 
     @media(max-width: 768px) {
-      width: 100%;
+      height: 80px;
+    }
+
+    .filter-actions-buttons {
+      float: right;
+
+      @media(max-width: 768px) {
+        width: 100%;
+      }
     }
   }
 }
-.loading-panel {
+
+.dpr-loading-panel {
   display: none;
   width: 100%;
   height: 100%;
   position: absolute;
-  top: 0px;
-  left: 0px;
+  top: 0;
+  left: 0;
   z-index: 2;
   justify-content: center;
   align-items: center;
-  background-color:   rgba(255,255,255,0.8);
-}
+  background-color: rgba(255, 255, 255, 0.8);
 
-.loading-panel.show {
-  display: flex;
+  &.show {
+    display: flex;
+  }
 }
 
 .dpr-loading-anim {
   display: none;
-}
 
-.dpr-loading-anim.show {
+  &.show {
     display: inline-block;
     position: relative;
     width: 80px;
     height: 80px;
   }
 
-.dpr-loading-anim.show div {
-  position: absolute;
-  width: 6px;
-  height: 6px;
-  background: govuk-colour("light-blue");
-  border-radius: 50%;
-  animation: dpr-loading-anim 1.2s linear infinite;
-}
+  &.show div {
+    position: absolute;
+    width: 6px;
+    height: 6px;
+    background: govuk-colour("light-blue");
+    border-radius: 50%;
+    animation: dpr-loading-anim 1.2s linear infinite;
+  }
 
-.dpr-loading-anim.show div:nth-child(1) {
-  animation-delay: 0s;
-  top: 37px;
-  left: 66px;
-}
-.dpr-loading-anim.show div:nth-child(2) {
-  animation-delay: -0.1s;
-  top: 22px;
-  left: 62px;
-}
-.dpr-loading-anim.show div:nth-child(3) {
-  animation-delay: -0.2s;
-  top: 11px;
-  left: 52px;
-}
-.dpr-loading-anim.show div:nth-child(4) {
-  animation-delay: -0.3s;
-  top: 7px;
-  left: 37px;
-}
-.dpr-loading-anim.show div:nth-child(5) {
-  animation-delay: -0.4s;
-  top: 11px;
-  left: 22px;
-}
-.dpr-loading-anim.show div:nth-child(6) {
-  animation-delay: -0.5s;
-  top: 22px;
-  left: 11px;
-}
-.dpr-loading-anim.show div:nth-child(7) {
-  animation-delay: -0.6s;
-  top: 37px;
-  left: 7px;
-}
-.dpr-loading-anim.show div:nth-child(8) {
-  animation-delay: -0.7s;
-  top: 52px;
-  left: 11px;
-}
-.dpr-loading-anim.show div:nth-child(9) {
-  animation-delay: -0.8s;
-  top: 62px;
-  left: 22px;
-}
-.dpr-loading-anim.show div:nth-child(10) {
-  animation-delay: -0.9s;
-  top: 66px;
-  left: 37px;
-}
-.dpr-loading-anim.show div:nth-child(11) {
-  animation-delay: -1s;
-  top: 62px;
-  left: 52px;
-}
-.dpr-loading-anim.show div:nth-child(12) {
-  animation-delay: -1.1s;
-  top: 52px;
-  left: 62px;
+  &.show div:nth-child(1) {
+    animation-delay: 0s;
+    top: 37px;
+    left: 66px;
+  }
+
+  &.show div:nth-child(2) {
+    animation-delay: -0.1s;
+    top: 22px;
+    left: 62px;
+  }
+
+  &.show div:nth-child(3) {
+    animation-delay: -0.2s;
+    top: 11px;
+    left: 52px;
+  }
+
+  &.show div:nth-child(4) {
+    animation-delay: -0.3s;
+    top: 7px;
+    left: 37px;
+  }
+
+  &.show div:nth-child(5) {
+    animation-delay: -0.4s;
+    top: 11px;
+    left: 22px;
+  }
+
+  &.show div:nth-child(6) {
+    animation-delay: -0.5s;
+    top: 22px;
+    left: 11px;
+  }
+
+  &.show div:nth-child(7) {
+    animation-delay: -0.6s;
+    top: 37px;
+    left: 7px;
+  }
+
+  &.show div:nth-child(8) {
+    animation-delay: -0.7s;
+    top: 52px;
+    left: 11px;
+  }
+
+  &.show div:nth-child(9) {
+    animation-delay: -0.8s;
+    top: 62px;
+    left: 22px;
+  }
+
+  &.show div:nth-child(10) {
+    animation-delay: -0.9s;
+    top: 66px;
+    left: 37px;
+  }
+
+  &.show div:nth-child(11) {
+    animation-delay: -1s;
+    top: 62px;
+    left: 52px;
+  }
+
+  &.show div:nth-child(12) {
+    animation-delay: -1.1s;
+    top: 52px;
+    left: 62px;
+  }
 }
+
 @keyframes dpr-loading-anim {
   0%, 20%, 80%, 100% {
     transform: scale(1);
@@ -776,7 +790,12 @@ a.disabled {
     transform: scale(1.5);
   }
 }
-  
+
 .report-list-container {
   position: relative;
-}
+
+  .columns-header {
+    padding-left: 10px;
+    padding-top: 10px;
+  }
+}