added fixes to reduce error when calling module details and filtering of docs

styles/sass/welshgov/_application.scss

@@ -1274,41 +1274,7 @@ textarea,
     }
 }
 
-.documentList {
-    .govuk-summary-list__key:first-of-type {
-        width: 40%;
-    }
 
-    .govuk-summary-list__key:last-of-type {
-        width: 20%;
-    }
-
-    .govuk-summary-list__value {
-        position: relative;
-    }
-
-    .coverLoadingLink {
-        &.downloading {
-            background-color: transparent;
-            position: absolute;
-            /* display: block; */
-            width: 100%;
-            z-index: 200;
-            top: 0px;
-            left: 0px;
-            height: 100%;
-            opacity: 50%;
-            content: " ";
-            display: block;
-        }
-
-        .data-loading-icon {
-            left: calc(100% - 40px);
-            height: 20px;
-            top: calc(50% - 10px);
-        }
-    }
-}
 
 
 .progress-save {
@@ -1435,6 +1401,63 @@ textarea,
 //     width: 100%;
 // }
 
+
+.docResults {
+    @media screen and (min-width: 768px) {
+        padding-left: 20px
+    }
+
+
+}
+
+.documentList {
+
+
+
+    .govuk-summary-list__key:first-of-type {
+        width: 40%;
+    }
+
+    .govuk-summary-list__key:last-of-type {
+        width: 18%;
+    }
+
+    .govuk-summary-list__value {
+        position: relative;
+
+
+        @media screen and (min-width: 768px) {
+            &:last-of-type {
+                text-align: right;
+            }
+        }
+
+
+    }
+
+    .coverLoadingLink {
+        &.downloading {
+            background-color: transparent;
+            position: absolute;
+            /* display: block; */
+            width: 100%;
+            z-index: 200;
+            top: 0px;
+            left: 0px;
+            height: 100%;
+            opacity: 50%;
+            content: " ";
+            display: block;
+        }
+
+        .data-loading-icon {
+            left: calc(100% - 40px);
+            height: 20px;
+            top: calc(50% - 10px);
+        }
+    }
+}
+
 .appealModule {
     width: 94%;
     min-height: 20vh;
@@ -2777,4 +2800,108 @@ fade {
 .ql-toolbar.ql-snow,
 .ql-container.ql-snow {
     background-color: $white;
+}
+
+
+.docFilteringGroup {
+
+    @media screen and (min-width: 768px) {
+        display: flex;
+        margin-left: -15px;
+        margin-right: -15px;
+
+
+    }
+
+
+    .filterByGroup {
+        background: $lightgrey_offwhite;
+        border: 1px solid $darkgrey;
+        color: $black;
+        font-size: 16px;
+        padding: 15px;
+
+
+        #recordCountSelect {
+            text-align: left;
+
+            select {
+                min-width: 10rem;
+            }
+        }
+
+        .govuk-checkboxes {
+            background: $white;
+            padding: 15px;
+            margin-bottom: 15px;
+            height: 240px;
+            overflow: auto;
+            border: 1px solid $darkgrey;
+
+            &::-webkit-scrollbar {
+                width: 30px;
+            }
+
+            &::-webkit-scrollbar-track {
+                background: $lightgrey_semi;
+
+            }
+
+            &::-webkit-scrollbar-thumb {
+                background: $darkgrey;
+
+                max-height: 50px;
+                border: 6px solid $lightgrey_semi;
+
+            }
+
+            .govuk-checkboxes__item {
+                border-bottom: 1px solid $lightgrey_semi
+            }
+
+            &.govuk-checkboxes--small .govuk-checkboxes__item:hover .govuk-checkboxes__input:not(:disabled)+.govuk-checkboxes__label::before {
+                box-shadow: none;
+            }
+
+            .govuk-label-s {
+                font-size: 14px;
+            }
+        }
+
+
+
+
+        .govuk-button {
+            background: $black;
+            color: $white;
+            font-size: 16px;
+            font-weight: bold;
+            padding: 10px 20px !important;
+            margin-bottom: 15px;
+            width: 100%;
+        }
+
+    }
+
+
+    button {
+        border: 1px solid $red;
+        background: $white;
+        color: $red;
+        font-size: 14px;
+        font-weight: bold;
+        padding: 5px 10px;
+        margin-bottom: 15px;
+
+        &:hover {
+            border: 1px solid $red;
+            background: $red;
+            color: $white;
+            font-size: 14px;
+            font-weight: bold;
+            padding: 5px 10px;
+            margin-bottom: 15px;
+        }
+    }
+
 }