From ad113f8b0e567dfb548cd81b27c1a6f6228461d0 Mon Sep 17 00:00:00 2001
From: AnjuJose011 <154979799+AnjuJose011@users.noreply.github.com>
Date: Thu, 31 Jul 2025 08:49:19 +0100
Subject: [PATCH 1/3] upadtes-TD-5868

---
 .../ContributeProvideByTab.vue                |    2 +-
 .../Styles/sections/_all.scss                 | 1205 +++++++++--------
 2 files changed, 605 insertions(+), 602 deletions(-)

diff --git a/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/ContributeProvideByTab.vue b/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/ContributeProvideByTab.vue
index 3cf394ff8..30061f9a4 100644
--- a/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/ContributeProvideByTab.vue
+++ b/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/ContributeProvideByTab.vue
@@ -3,7 +3,7 @@
         <div class="lh-container-xl py-15">
             <div class="contribute contribute-providedby-tab">
                 <h2 id="licence-heading" class="nhsuk-heading-l pt-15">Content developed with</h2>
-                <p class="nhsuk-u-font-weight-normal">When applicable pease select the provider of this content. This will enable users to search for content produced by specific organisations.</p>
+                <p class="nhsuk-u-font-weight-normal">When applicable please select the provider of this content. This will enable users to search for content produced by specific organisations.</p>
                 <div class="my-3">
                     <input class="radio-button" name="resourceProviderId" type="radio" :value="0" v-model="resourceProviderId" @click="setResourceProvider($event.target.value)" />
                     <span class="span-provider nhsuk-u-font-weight-normal">Not applicable</span>
diff --git a/LearningHub.Nhs.WebUI/Styles/sections/_all.scss b/LearningHub.Nhs.WebUI/Styles/sections/_all.scss
index 03ad5dc3e..1f4748e76 100644
--- a/LearningHub.Nhs.WebUI/Styles/sections/_all.scss
+++ b/LearningHub.Nhs.WebUI/Styles/sections/_all.scss
@@ -5,421 +5,425 @@
 
 div.user-entry,
 article {
-  margin-left: 100px;
-  max-width: 1143px;
+    margin-left: 100px;
+    max-width: 1143px;
 
-  #{headings(1,6)} {
-    padding-top: 4rem;
-  }
+    #{headings(1,6)} {
+        padding-top: 4rem;
+    }
+
+    hr {
+        margin: 2rem 0 2rem 0;
+        color: $nhsuk-grey-light;
+    }
+
+    .heading-sm {
+        margin-top: 3.5rem;
+        font-size: 1.8rem !important;
+    }
 
-  hr {
-    margin: 2rem 0 2rem 0;
-    color: $nhsuk-grey-light;
-  }
+    .heading-xs {
+        padding-top: 1rem !important;
+    }
 
-  .heading-sm {
-    margin-top: 3.5rem;
-    font-size: 1.8rem !important;
-  }
+    p {
+        margin-top: 2rem;
+    }
 
-  .heading-xs {
-    padding-top: 1rem !important;
-  }
+    &.fullwidth {
+        max-width: 800px;
+        padding-bottom: 50px;
+        margin: auto;
 
-  p {
-    margin-top: 2rem;
-  }
+        @media(max-width: 768px) {
+            margin-left: 15px;
+        }
 
-  &.fullwidth {
-    max-width: 800px;
-    padding-bottom: 50px;
-    margin: auto;
+        &.whiteBG {
+            background-color: #fff;
+            border-top: 1px solid $nhsuk-grey-light;
+            padding-top: 1rem;
+            max-width: 100%;
 
-    @media(max-width: 768px) {
-      margin-left: 15px;
+            .whiteBGinner {
+                max-width: 800px;
+                margin: auto;
+            }
+        }
     }
 
-    &.whiteBG {
-      background-color: #fff;
-      border-top: 1px solid $nhsuk-grey-light;
-      padding-top: 1rem;
-      max-width: 100%;
+    ul {
+        margin-top: 2rem;
+        margin-bottom: 2.5rem;
 
-      .whiteBGinner {
-        max-width: 800px;
-        margin: auto;
-      }
-    }
-  }
-
-  ul {
-    margin-top: 2rem;
-    margin-bottom: 2.5rem;
-
-    li:not(:last-child) {
-      margin-bottom: 0.8rem;
-    }
-  }
-
-  div.accordion div.content {
-    margin-top: 20px;
-    margin-left: 25px;
-    max-width: 770px;
-  }
-
-  div.terms-and-conditions {
-    width: 100%;
-    max-height: 440px;
-    border: 2px solid $nhsuk-grey;
-    border-radius: 4px;
-    overflow-y: scroll;
-    padding: 5px 24px;
-    background-color: #fff;
-  }
-
-  button.button-processing {
-    background-color: $nhsuk-grey !important;
-    border-color: $nhsuk-grey !important;
-    cursor: not-allowed;
-    position: relative;
-
-    i {
-      position: absolute;
-      right: 13px;
-      top: 15px;
-    }
-  }
+        li:not(:last-child) {
+            margin-bottom: 0.8rem;
+        }
+    }
+
+    div.accordion div.content {
+        margin-top: 20px;
+        margin-left: 25px;
+        max-width: 770px;
+    }
+
+    div.terms-and-conditions {
+        width: 100%;
+        max-height: 440px;
+        border: 2px solid $nhsuk-grey;
+        border-radius: 4px;
+        overflow-y: scroll;
+        padding: 5px 24px;
+        background-color: #fff;
+    }
+
+    button.button-processing {
+        background-color: $nhsuk-grey !important;
+        border-color: $nhsuk-grey !important;
+        cursor: not-allowed;
+        position: relative;
+
+        i {
+            position: absolute;
+            right: 13px;
+            top: 15px;
+        }
+    }
 }
 
 div.user-entry,
 article,
 div.contribute {
-  div.accordion-arrow {
-    position: relative;
-    margin-left: 25px;
-    max-width: 770px;
-  }
-
-  a div.accordion-arrow::before {
-    content: url('/images/triangle-down.svg');
-    position: absolute;
-    left: -25px;
-    top: 0;
-  }
-
-  div.accordion {
-    p {
-      margin-left: 1rem;
-
-      .title {
-        font-weight: bold;
-      }
-    }
-  }
-
-  a.collapsed div.accordion-arrow::before {
-    content: url('/images/triangle-right.svg');
-    position: absolute;
-    top: 1px;
-    left: -25px;
-  }
-
-  a.text-decoration-skip {
-    text-decoration-skip-ink: none !important;
-  }
-
-  label.checkContainer {
-    font-family: $font-stack;
-    padding-top: 0;
-  }
-
-  .footer-text {
-    color: $nhsuk-grey;
-    margin-top: .5rem
-  }
-}
+    div.accordion-arrow {
+        position: relative;
+        margin-left: 25px;
+        max-width: 770px;
+    }
 
-div.contribute {
-  h2 {
-    .warningTriangle {
-      padding-left: 10px;
-      vertical-align: middle;
+    a div.accordion-arrow::before {
+        content: url('/images/triangle-down.svg');
+        position: absolute;
+        left: -25px;
+        top: 0;
     }
-  }
 
-  h3 {
-    .warningTriangle {
-      padding-left: 10px;
-      vertical-align: middle;
+    div.accordion {
+        p {
+            margin-left: 1rem;
+
+            .title {
+                font-weight: bold;
+            }
+        }
     }
-  }
 
-  div.common-content {
-    div.form-group {
-      margin-bottom: 0;
+    a.collapsed div.accordion-arrow::before {
+        content: url('/images/triangle-right.svg');
+        position: absolute;
+        top: 1px;
+        left: -25px;
     }
 
-    .bg-grey-white {
-      padding: 17px 25px 30px 25px;
-      color: $nhsuk-black;
+    a.text-decoration-skip {
+        text-decoration-skip-ink: none !important;
     }
-  }
 
-  div.white-background {
-    background-color: $nhsuk-white;
-    min-height: 420px;
-  }
+    label.checkContainer {
+        font-family: $font-stack;
+        padding-top: 0;
+    }
 
-  .limit-width {
-    width: 100%;
-    max-width: 850px;
-    margin-left: 40px;
-    padding-right: 50px;
-  }
+    .footer-text {
+        color: $nhsuk-grey;
+        margin-top: .5rem
+    }
+}
 
-  div.contribute-header {
-    .draftText {
-      color: $nhsuk-green; 
-      margin-top: 0;
+div.contribute {
+    h2 {
+        .warningTriangle {
+            padding-left: 10px;
+            vertical-align: middle;
+        }
     }
 
-    .error-message {
-      color: $nhsuk-red;
-      font-weight: bold;
+    h3 {
+        .warningTriangle {
+            padding-left: 10px;
+            vertical-align: middle;
+        }
     }
 
-    .warning-banner {
-      display: flex;
-      flex-flow: row;
-      justify-content: space-between;
-      padding: 1.5rem 1.5rem 0.8rem 1.5rem;
-      border-bottom: 1px solid $nhsuk-grey-light;
-      border-top: 1px solid $nhsuk-grey-light;
+    div.common-content {
+        div.form-group {
+            margin-bottom: 0;
+        }
 
-      div.warningTriangle {
-        font-size: 40px;
-      }
+        .bg-grey-white {
+            padding: 17px 25px 30px 25px;
+            color: $nhsuk-black;
+        }
+    }
 
-      div.info {
-        padding-left: 12px;
-      }
+    div.white-background {
+        background-color: $nhsuk-white;
+        min-height: 420px;
+    }
 
-      div.dismiss {
-        text-align: end;
-        padding-top: .5rem;
-        padding-right: 2rem;
+    .limit-width {
+        width: 100%;
+        max-width: 850px;
+        margin-left: 40px;
+        padding-right: 50px;
+    }
 
-        button {
-          font-size: 2.5rem;
-          color: $nhsuk-grey;
+    div.contribute-header {
+        .draftText {
+            color: $nhsuk-green;
+            margin-top: 0;
         }
-      }
 
-      .warning-banner-left {
-        display: flex;
-        justify-content: space-between;
-        width: 100%;
-        max-width: 800px;
-        margin-left: 40px;
-      }
-    }
-  }
-
-  .warningTriangle {
-    color: #ffb81c;
-    font-size: 2rem;
-
-    &.large {
-      font-size: 4rem !important;
-    }
-  }
-
-  button.delete-button {
-    text-decoration: none;
-    color: $nhsuk-grey-placeholder;
-    font-size: 1.6rem;
-
-    i {
-      margin-right: 4px;
-      font-size: 1.8rem;
-    }
-  }
-
-  button.publish-button {
-    color: $nhsuk-white;
-    background-color: $nhsuk-green;
-    font-size: 19px;
-    text-align: center !important;
-    border: 1px solid $nhsuk-green !important;
-    min-height: 50px;
-    min-width: 115px;
-    padding: 0px 25px 0px 25px;
-    border-radius: 5px;
-  }
-
-  button.publish-button:disabled {
-    background-color: $nhsuk-grey;
-    border-color: $nhsuk-grey !important;
-  }
-
-  button.btn-outline-custom:disabled {
-    color: $nhsuk-grey !important;
-    border-color: $nhsuk-grey !important;
-  }
-
-  button.btn-outline-custom:disabled:hover {
-    background-color: $nhsuk-white !important;
-  }
-
-  div.resource-area-container, div.common-content {
-    div.resource-area-header {
-      background-color: $nhsuk-grey;
-      color: $nhsuk-grey-white;
-      border-top-left-radius: .5rem;
-      border-top-right-radius: .5rem;
-      font-family: $font-stack-bold;
-      padding: 1.4rem 2rem 1.0rem 2rem;
-      display: flex;
-      justify-content: space-between;
-
-      a,
-      button {
+        .error-message {
+            color: $nhsuk-red;
+            font-weight: bold;
+        }
+
+        .warning-banner {
+            display: flex;
+            flex-flow: row;
+            justify-content: space-between;
+            padding: 1.5rem 1.5rem 0.8rem 1.5rem;
+            border-bottom: 1px solid $nhsuk-grey-light;
+            border-top: 1px solid $nhsuk-grey-light;
+
+            div.warningTriangle {
+                font-size: 40px;
+            }
+
+            div.info {
+                padding-left: 12px;
+            }
+
+            div.dismiss {
+                text-align: end;
+                padding-top: .5rem;
+                padding-right: 2rem;
+
+                button {
+                    font-size: 2.5rem;
+                    color: $nhsuk-grey;
+                }
+            }
+
+            .warning-banner-left {
+                display: flex;
+                justify-content: space-between;
+                width: 100%;
+                max-width: 800px;
+                margin-left: 40px;
+            }
+        }
+    }
+
+    .warningTriangle {
+        color: #ffb81c;
+        font-size: 2rem;
+
+        &.large {
+            font-size: 4rem !important;
+        }
+    }
+
+    button.delete-button {
         text-decoration: none;
-        font-size: 19px;
-        font-family: $font-stack;
-        color: $nhsuk-grey-white !important;
-        padding-top: 0;
+        color: $nhsuk-grey-placeholder;
+        font-size: 1.6rem;
 
         i {
-          margin-left: 4px;
+            margin-right: 4px;
+            font-size: 1.8rem;
         }
-      }
     }
 
-    div.resource-area-body {
-      background-color: $nhsuk-grey-white;
-      border-bottom-left-radius: .5rem;
-      border-bottom-right-radius: .5rem;
-      min-height: 300px;
-      padding: 20px 10px 20px 10px;
+    button.publish-button {
+        color: $nhsuk-white;
+        background-color: $nhsuk-green;
+        font-size: 19px;
+        text-align: center !important;
+        border: 1px solid $nhsuk-green !important;
+        min-height: 50px;
+        min-width: 115px;
+        padding: 0px 25px 0px 25px;
+        border-radius: 5px;
     }
 
-    .radio-options {
-      height: 12px !important;
-      width: 12px !important;
-      border: 1px solid $nhsuk-black;
-      color: $nhsuk-black;
+    button.publish-button:disabled {
+        background-color: $nhsuk-grey;
+        border-color: $nhsuk-grey !important;
     }
 
-    .radio-options-text {
-      margin-right: 20px;
+    button.btn-outline-custom:disabled {
+        color: $nhsuk-grey !important;
+        border-color: $nhsuk-grey !important;
     }
 
-    .author-details, .file-details, .licence-details {
-      display: flex;
-      justify-content: space-between;
-      background-color: $nhsuk-white;
-      border-radius: 5px;
-      padding: 25px;
+    button.btn-outline-custom:disabled:hover {
+        background-color: $nhsuk-white !important;
+    }
 
-      button,
-      a {
-        font-size: 16px;
-        color: $nhsuk-red;
-        text-decoration: none;
-        display: flex;
-        justify-content: space-between;
+    div.resource-area-container, div.common-content {
+        div.resource-area-header {
+            background-color: $nhsuk-grey;
+            color: $nhsuk-grey-white;
+            border-top-left-radius: .5rem;
+            border-top-right-radius: .5rem;
+            font-family: $font-stack-bold;
+            padding: 1.4rem 2rem 1.0rem 2rem;
+            display: flex;
+            justify-content: space-between;
 
-        i {
-          padding-left: 10px;
-          padding-top: 3px;
+            a,
+            button {
+                text-decoration: none;
+                font-size: 19px;
+                font-family: $font-stack;
+                color: $nhsuk-grey-white !important;
+                padding-top: 0;
+
+                i {
+                    margin-left: 4px;
+                }
+            }
         }
-      }
 
-      .divider {
-        color: $nhsuk-grey-light;
-      }
-    }
+        div.resource-area-body {
+            background-color: $nhsuk-grey-white;
+            border-bottom-left-radius: .5rem;
+            border-bottom-right-radius: .5rem;
+            min-height: 300px;
+            padding: 20px 10px 20px 10px;
+        }
+
+        .radio-options {
+            height: 12px !important;
+            width: 12px !important;
+            border: 1px solid $nhsuk-black;
+            color: $nhsuk-black;
+        }
 
-    .author-details {
-      border: solid 1px $nhsuk-grey-light;
-      padding: 22px 15px 10px 15px;
+        .radio-options-text {
+            margin-right: 20px;
+        }
 
-      i {
-        color: $nhsuk-grey;
-        margin-right: 1rem;
-      }
-    }
+        .author-details, .file-details, .licence-details {
+            display: flex;
+            justify-content: space-between;
+            background-color: $nhsuk-white;
+            border-radius: 5px;
+            padding: 25px;
+
+            button,
+            a {
+                font-size: 16px;
+                color: $nhsuk-red;
+                text-decoration: none;
+                display: flex;
+                justify-content: space-between;
+
+                i {
+                    padding-left: 10px;
+                    padding-top: 3px;
+                }
+            }
 
-    .keyword-container {
-      display: flex;
-      flex-wrap: wrap;
+            .divider {
+                color: $nhsuk-grey-light;
+            }
+        }
 
-      .keyword-tag {
-        background-color: $nhsuk-grey-white;
-        border-radius: 20px;
-        margin-bottom: 10px;
-        padding: 8px 10px 3px 15px;
+        .author-details {
+            border: solid 1px $nhsuk-grey-light;
+            padding: 22px 15px 10px 15px;
 
-        button {
-          color: $nhsuk-red;
-          font-size: 2rem;
+            i {
+                color: $nhsuk-grey;
+                margin-right: 1rem;
+            }
         }
-      }
-    }
 
-    span.optional {
-      font-family: $font-stack;
-    }
+        .keyword-label {
+            font-weight: normal;
+        }
 
-    textarea {
-      width: 100%;
+        .keyword-container {
+            display: flex;
+            flex-wrap: wrap;
+
+            .keyword-tag {
+                background-color: $nhsuk-grey-white;
+                border-radius: 20px;
+                margin-bottom: 10px;
+                padding: 8px 10px 3px 15px;
+
+                button {
+                    color: $nhsuk-red;
+                    font-size: 2rem;
+                }
+            }
+        }
+
+        span.optional {
+            font-family: $font-stack;
+        }
+
+        textarea {
+            width: 100%;
+        }
     }
-  }
 
-  .authored-date label {
-    font-size: 1.6rem;
-  }
+    .authored-date label {
+        font-size: 1.6rem;
+    }
 
-  div.publish-warning {
-    display: flex;
-    flex-direction: row;
+    div.publish-warning {
+        display: flex;
+        flex-direction: row;
 
-    .triangle {
-      margin-right: 10px;
-      display: flex;
-      align-items: center;
+        .triangle {
+            margin-right: 10px;
+            display: flex;
+            align-items: center;
 
-      i {
-        padding-top: 5px;
-      }
+            i {
+                padding-top: 5px;
+            }
+        }
     }
-  }
 
-  div.highlighted-info {
-    background-color: rgba(255, 184, 28, 0.05);
-    border: 1px solid #FFB81C;
-    padding: 15px 24px;
-    margin: 15px 15px 0 15px;
-  }
+    div.highlighted-info {
+        background-color: rgba(255, 184, 28, 0.05);
+        border: 1px solid #FFB81C;
+        padding: 15px 24px;
+        margin: 15px 15px 0 15px;
+    }
 }
 
 @media (max-width: 768px) {
-  div.contribute {
-    .limit-width {
-      max-width: 815px;
-      margin-left: 15px;
-      padding-right: 25px;
-    }
+    div.contribute {
+        .limit-width {
+            max-width: 815px;
+            margin-left: 15px;
+            padding-right: 25px;
+        }
 
-    div.contribute-header {
-      .warning-banner {
-        .warning-banner-left {
-          margin-left: 15px;
+        div.contribute-header {
+            .warning-banner {
+                .warning-banner-left {
+                    margin-left: 15px;
+                }
+            }
         }
-      }
     }
-  }
 }
 
 /* end contribute*/
@@ -600,330 +604,329 @@ div.catalogue-access-request {
 div.contribute,
 div.user-entry {
 
-  p {
-    margin-top: 1.6rem;
-  }
+    p {
+        margin-top: 1.6rem;
+    }
 
-  input[type="number"]:disabled {
-    border-color: $nhsuk-grey-light;
-  }
+    input[type="number"]:disabled {
+        border-color: $nhsuk-grey-light;
+    }
 
-  div.form-group {
-    margin-bottom: 1.5rem;
+    div.form-group {
+        margin-bottom: 1.5rem;
 
-    .child-form-group {
-      border-left: 3px solid $nhsuk-grey-light;
-      padding-left: 1rem;
+        .child-form-group {
+            border-left: 3px solid $nhsuk-grey-light;
+            padding-left: 1rem;
 
-      &.input-validation-error {
-        border-left: 3px solid $nhsuk-red;
-      }
+            &.input-validation-error {
+                border-left: 3px solid $nhsuk-red;
+            }
 
-      label {
-        padding-top: 0;
-      }
-    }
+            label {
+                padding-top: 0;
+            }
+        }
 
-    .validation-summary {
-      padding-top: 0;
+        .validation-summary {
+            padding-top: 0;
 
-      ul {
-        color: $nhsuk-red;
-        padding: 0;
-        margin: 0;
+            ul {
+                color: $nhsuk-red;
+                padding: 0;
+                margin: 0;
 
-        li {
-          list-style: none;
+                li {
+                    list-style: none;
+                }
+            }
         }
-      }
     }
-  }
 
-  div.form-group.input-validation-error, div.form-group.input-validation-error-force {
-    margin-left: 15px;
-    border-left: 3px solid $nhsuk-red;
-    padding: 0 1.5rem;
+    div.form-group.input-validation-error, div.form-group.input-validation-error-force {
+        margin-left: 15px;
+        border-left: 3px solid $nhsuk-red;
+        padding: 0 1.5rem;
 
-    label {
-      margin-bottom: 1rem;
+        label {
+            margin-bottom: 1rem;
+        }
+
+        div.error-text {
+            margin-bottom: 1.2rem;
+        }
+    }
+
+    .field-validation-error span {
+        color: $nhsuk-red !important;
     }
 
-    div.error-text {
-      margin-bottom: 1.2rem;
+    select.form-control,
+    input.form-control {
+        border: 2px solid $nhsuk-grey;
+        box-shadow: none;
     }
-  }
 
-  .field-validation-error span {
-    color: $nhsuk-red !important;
-  }
+    div.error-container {
+
+        div.form-group.input-validation-error label {
+            margin-bottom: 1.3rem;
+        }
 
-  select.form-control,
-  input.form-control {
-    border: 2px solid $nhsuk-grey;
-    box-shadow: none;
-  }
+        div.form-group.input-validation-error {
+            margin-left: 0;
+            border-left: none;
+        }
 
-  div.error-container {
+        select.form-control,
+        input.form-control {
+            border: 2px solid $nhsuk-red;
+        }
 
-    div.form-group.input-validation-error label {
-      margin-bottom: 1.3rem;
+        ul {
+            padding: 0;
+            margin: 0;
+        }
+
+        &.form-valid {
+            padding: 0;
+            border-left: inherit;
+
+            input {
+                border-color: inherit;
+            }
+        }
+
+        label {
+            margin-bottom: 5px;
+            padding-top: 0;
+        }
     }
 
-    div.form-group.input-validation-error {
-      margin-left: 0;
-      border-left: none;
+    child-form-control input.form-control:focus {
+        box-shadow: none;
     }
 
-    select.form-control,
-    input.form-control {
-      border: 2px solid $nhsuk-red;
+    label {
+        font-family: $font-stack-bold;
+        margin-bottom: 1.3rem;
+        padding-top: 1rem;
     }
 
-    ul {
-      padding: 0;
-      margin: 0;
+    label.disabled {
+        color: $nhsuk-grey-light;
     }
 
-    &.form-valid {
-      padding: 0;
-      border-left: inherit;
+    label + div,
+    label + div + div:not(.ck) {
+        margin-top: -8px;
+        padding-bottom: 9px;
+    }
 
-      input {
-        border-color: inherit;
-      }
+    div.validation-summary-errors ul {
+        padding-left: 0;
+        padding-bottom: 2rem;
     }
 
-    label {
-      margin-bottom: 5px;
-      padding-top: 0;
+    div.input-validation-error div.lh-datepicker input,
+    textarea.form-control.input-validation-error,
+    input.form-control.input-validation-error,
+    select.form-control.input-validation-error,
+    input.form-control.input-validation-error-force {
+        border-color: $nhsuk-red;
     }
-  }
 
-  child-form-control input.form-control:focus {
-    box-shadow: none;
-  }
+    div.lh-typeahead {
+        position: relative;
+
+        input {
+            padding-right: 32px;
+        }
+
+        .fa-times {
+            cursor: pointer;
+        }
+
+        i {
+            float: right;
+            position: absolute;
+            top: 13px;
+            right: 15px;
+            opacity: 0.4;
+        }
+
+        ul {
+            list-style: none;
+            position: absolute;
+            padding: 0;
+            margin-top: 0;
+            max-height: 350px;
+            min-width: 100%;
+            background-color: $nhsuk-white;
+            border: solid 1px $nhsuk-grey-light;
+            border-radius: 4px;
+            z-index: 1000;
+            overflow-y: auto;
+        }
 
-  label {
-    font-family: $font-stack-bold;
-    margin-bottom: 1.3rem;
-    padding-top: 1rem;
-  }
+        li {
+            padding: 5px 10px;
+            margin-bottom: 0;
+            border-bottom: 1px solid $nhsuk-grey-light;
+            cursor: pointer;
+            line-height: 1.3;
+            font-size: 1.6rem;
+
+            span.highlighted {
+                font-weight: bold;
+                display: inline;
+            }
+        }
 
-  label.disabled {
-    color: $nhsuk-grey-light;
-  }
+        li.active {
+            background-color: $nhsuk-blue;
+            color: white;
+        }
 
-  label + div,
-  label + div + div:not(.ck) {
-    margin-top: -8px;
-    padding-bottom: 9px;
-  }
+        li.active span {
+            color: white;
+        }
 
-  div.validation-summary-errors ul {
-    padding-left: 0;
-    padding-bottom: 2rem;
-  }
+        li:first-child {
+            border-top-left-radius: 4px;
+            border-top-right-radius: 4px;
+        }
 
-  div.input-validation-error div.lh-datepicker input,
-  textarea.form-control.input-validation-error,
-  input.form-control.input-validation-error,
-  select.form-control.input-validation-error,
-  input.form-control.input-validation-error-force {
-    border-color: $nhsuk-red;
-  }
+        li:last-child {
+            border-bottom-left-radius: 4px;
+            border-bottom-right-radius: 4px;
+            border-bottom: 0;
+        }
 
-  div.lh-typeahead {
-    position: relative;
+        span {
+            display: block;
+            color: #2c3e50;
+        }
+    }
 
-    input {
-      padding-right: 32px;
+
+    .btn-custom {
+        padding-left: 4rem;
+        padding-right: 4rem;
     }
 
-    .fa-times {
-      cursor: pointer;
+    .btn-custom:disabled {
+        background-color: $nhsuk-grey !important;
+        border-color: $nhsuk-grey !important;
     }
 
-    i {
-      float: right;
-      position: absolute;
-      top: 13px;
-      right: 15px;
-      opacity: 0.4;
+    .ck-editor__top {
+        border-top-left-radius: .25rem;
+        border-top-right-radius: .25rem;
+        border-top: solid 2px $nhsuk-grey;
+        border-left: solid 2px $nhsuk-grey;
+        border-right: solid 2px $nhsuk-grey;
     }
 
-    ul {
-      list-style: none;
-      position: absolute;
-      padding: 0;
-      margin-top: 0;
-      max-height: 350px;
-      min-width: 100%;
-      background-color: $nhsuk-white;
-      border: solid 1px $nhsuk-grey-light;
-      border-radius: 4px;
-      z-index: 1000;
-      overflow-y: auto;
-    }
-
-    li {
-      padding: 5px 10px;
-      margin-bottom: 0;
-      border-bottom: 1px solid $nhsuk-grey-light;
-      cursor: pointer;
-      line-height: 1.3;
-      font-size: 1.6rem;
-
-      span.highlighted {
-        font-weight: bold;
-        display: inline;
-      }
-    }
-
-    li.active {
-      background-color: $nhsuk-blue;
-      color: white;
-    }
-
-    li.active span {
-      color: white;
-    }
-
-    li:first-child {
-      border-top-left-radius: 4px;
-      border-top-right-radius: 4px;
-    }
-
-    li:last-child {
-      border-bottom-left-radius: 4px;
-      border-bottom-right-radius: 4px;
-      border-bottom: 0;
-    }
-
-    span {
-      display: block;
-      color: #2c3e50;
-    }
-  }
-
-
-  .btn-custom {
-    padding-left: 4rem;
-    padding-right: 4rem;
-  }
-
-  .btn-custom:disabled {
-    background-color: $nhsuk-grey !important;
-    border-color: $nhsuk-grey !important;
-  }
-
-  .ck-editor__top {
-    border-top-left-radius: .25rem;
-    border-top-right-radius: .25rem;
-    border-top: solid 2px $nhsuk-grey;
-    border-left: solid 2px $nhsuk-grey;
-    border-right: solid 2px $nhsuk-grey;
-  }
-
-  .ck-editor__main {
-    border-bottom-left-radius: .25rem;
-    border-bottom-right-radius: .25rem;
-    border-bottom: solid 2px $nhsuk-grey;
-    border-left: solid 2px $nhsuk-grey;
-    border-right: solid 2px $nhsuk-grey;
-  }
-
-  .ck.ck-editor__editable:focus {
-    outline: none !important;
-    box-shadow: none !important;
-    border-color: $nhsuk-grey-light;
-  }
-
-  .ck-editor__editable_inline {
-    min-height: 500px;
-  }
-
-  .article-content .ck-editor__editable_inline {
-    min-height: 550px;
-  }
-
-  .common-content .ck-editor__editable_inline {
-    min-height: 260px;
-  }
+    .ck-editor__main {
+        border-bottom-left-radius: .25rem;
+        border-bottom-right-radius: .25rem;
+        border-bottom: solid 2px $nhsuk-grey;
+        border-left: solid 2px $nhsuk-grey;
+        border-right: solid 2px $nhsuk-grey;
+    }
+
+    .ck.ck-editor__editable:focus {
+        outline: none !important;
+        box-shadow: none !important;
+        border-color: $nhsuk-grey-light;
+    }
+
+    .ck-editor__editable_inline {
+        min-height: 500px;
+    }
+
+    .article-content .ck-editor__editable_inline {
+        min-height: 550px;
+    }
+
+    .common-content .ck-editor__editable_inline {
+        min-height: 260px;
+    }
 }
 
 article.with-aside div.row {
-  margin-right: 0;
+    margin-right: 0;
 }
 
 .tray {
-  margin-right: 15px;
-  margin-left: 15px;
-
-  .navigation {
-    cursor: pointer;
-  }
-
-  .norecords {
-    border-radius: 8px;
-    background-color: $nhsuk-grey;
-    color: $nhsuk-white;
-    min-height: 180px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-
-  .card-list-move {
-    transition: transform 1s;
-  }
-
-  .fade-enter-active, .fade-leave-active {
-    transition: opacity .5s;
-  }
-
-  .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */
-  {
-    opacity: 0;
-  }
+    margin-right: 15px;
+    margin-left: 15px;
+
+    .navigation {
+        cursor: pointer;
+    }
+
+    .norecords {
+        border-radius: 8px;
+        background-color: $nhsuk-grey;
+        color: $nhsuk-white;
+        min-height: 180px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+
+    .card-list-move {
+        transition: transform 1s;
+    }
+
+    .fade-enter-active, .fade-leave-active {
+        transition: opacity .5s;
+    }
+
+    .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
+        opacity: 0;
+    }
 }
 
 .notifications-panel {
-  table td {
-    background-color: #F6F9FA;
-  }
-
-  .modal-dialog {
-    max-width: 450px !important;
-    margin-left: auto;
-    margin-right: auto;
-  }
+    table td {
+        background-color: #F6F9FA;
+    }
 
-  @media (max-width: 470px) {
     .modal-dialog {
-      margin: 0.5rem;
+        max-width: 450px !important;
+        margin-left: auto;
+        margin-right: auto;
+    }
+
+    @media (max-width: 470px) {
+        .modal-dialog {
+            margin: 0.5rem;
+        }
     }
-  }
 }
 
 @media (max-width: 768px) {
 
-  div.user-entry,
-  article {
-    margin: 0px;
-  }
+    div.user-entry,
+    article {
+        margin: 0px;
+    }
 
-  .device-check-banner {
-    padding-top: 35px !important;
+    .device-check-banner {
+        padding-top: 35px !important;
 
-    .lead-paragraph {
-      max-width: 567px;
+        .lead-paragraph {
+            max-width: 567px;
+        }
     }
-  }
 
-  .notifications-panel {
+    .notifications-panel {
 
-    .notifications-header {
-      min-height: 110px !important;
+        .notifications-header {
+            min-height: 110px !important;
+        }
     }
-  }
 }

From 8606a32b62ce54dfc763afefd89d6651eb90861f Mon Sep 17 00:00:00 2001
From: AnjuJose011 <154979799+AnjuJose011@users.noreply.github.com>
Date: Thu, 31 Jul 2025 08:52:57 +0100
Subject: [PATCH 2/3] Revert "upadtes-TD-5868"

This reverts commit ad113f8b0e567dfb548cd81b27c1a6f6228461d0.
---
 .../ContributeProvideByTab.vue                |    2 +-
 .../Styles/sections/_all.scss                 | 1205 ++++++++---------
 2 files changed, 602 insertions(+), 605 deletions(-)

diff --git a/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/ContributeProvideByTab.vue b/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/ContributeProvideByTab.vue
index 30061f9a4..3cf394ff8 100644
--- a/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/ContributeProvideByTab.vue
+++ b/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/ContributeProvideByTab.vue
@@ -3,7 +3,7 @@
         <div class="lh-container-xl py-15">
             <div class="contribute contribute-providedby-tab">
                 <h2 id="licence-heading" class="nhsuk-heading-l pt-15">Content developed with</h2>
-                <p class="nhsuk-u-font-weight-normal">When applicable please select the provider of this content. This will enable users to search for content produced by specific organisations.</p>
+                <p class="nhsuk-u-font-weight-normal">When applicable pease select the provider of this content. This will enable users to search for content produced by specific organisations.</p>
                 <div class="my-3">
                     <input class="radio-button" name="resourceProviderId" type="radio" :value="0" v-model="resourceProviderId" @click="setResourceProvider($event.target.value)" />
                     <span class="span-provider nhsuk-u-font-weight-normal">Not applicable</span>
diff --git a/LearningHub.Nhs.WebUI/Styles/sections/_all.scss b/LearningHub.Nhs.WebUI/Styles/sections/_all.scss
index 1f4748e76..03ad5dc3e 100644
--- a/LearningHub.Nhs.WebUI/Styles/sections/_all.scss
+++ b/LearningHub.Nhs.WebUI/Styles/sections/_all.scss
@@ -5,425 +5,421 @@
 
 div.user-entry,
 article {
-    margin-left: 100px;
-    max-width: 1143px;
+  margin-left: 100px;
+  max-width: 1143px;
 
-    #{headings(1,6)} {
-        padding-top: 4rem;
-    }
-
-    hr {
-        margin: 2rem 0 2rem 0;
-        color: $nhsuk-grey-light;
-    }
-
-    .heading-sm {
-        margin-top: 3.5rem;
-        font-size: 1.8rem !important;
-    }
+  #{headings(1,6)} {
+    padding-top: 4rem;
+  }
 
-    .heading-xs {
-        padding-top: 1rem !important;
-    }
+  hr {
+    margin: 2rem 0 2rem 0;
+    color: $nhsuk-grey-light;
+  }
 
-    p {
-        margin-top: 2rem;
-    }
+  .heading-sm {
+    margin-top: 3.5rem;
+    font-size: 1.8rem !important;
+  }
 
-    &.fullwidth {
-        max-width: 800px;
-        padding-bottom: 50px;
-        margin: auto;
+  .heading-xs {
+    padding-top: 1rem !important;
+  }
 
-        @media(max-width: 768px) {
-            margin-left: 15px;
-        }
+  p {
+    margin-top: 2rem;
+  }
 
-        &.whiteBG {
-            background-color: #fff;
-            border-top: 1px solid $nhsuk-grey-light;
-            padding-top: 1rem;
-            max-width: 100%;
+  &.fullwidth {
+    max-width: 800px;
+    padding-bottom: 50px;
+    margin: auto;
 
-            .whiteBGinner {
-                max-width: 800px;
-                margin: auto;
-            }
-        }
+    @media(max-width: 768px) {
+      margin-left: 15px;
     }
 
-    ul {
-        margin-top: 2rem;
-        margin-bottom: 2.5rem;
+    &.whiteBG {
+      background-color: #fff;
+      border-top: 1px solid $nhsuk-grey-light;
+      padding-top: 1rem;
+      max-width: 100%;
 
-        li:not(:last-child) {
-            margin-bottom: 0.8rem;
-        }
-    }
-
-    div.accordion div.content {
-        margin-top: 20px;
-        margin-left: 25px;
-        max-width: 770px;
-    }
-
-    div.terms-and-conditions {
-        width: 100%;
-        max-height: 440px;
-        border: 2px solid $nhsuk-grey;
-        border-radius: 4px;
-        overflow-y: scroll;
-        padding: 5px 24px;
-        background-color: #fff;
-    }
-
-    button.button-processing {
-        background-color: $nhsuk-grey !important;
-        border-color: $nhsuk-grey !important;
-        cursor: not-allowed;
-        position: relative;
-
-        i {
-            position: absolute;
-            right: 13px;
-            top: 15px;
-        }
-    }
+      .whiteBGinner {
+        max-width: 800px;
+        margin: auto;
+      }
+    }
+  }
+
+  ul {
+    margin-top: 2rem;
+    margin-bottom: 2.5rem;
+
+    li:not(:last-child) {
+      margin-bottom: 0.8rem;
+    }
+  }
+
+  div.accordion div.content {
+    margin-top: 20px;
+    margin-left: 25px;
+    max-width: 770px;
+  }
+
+  div.terms-and-conditions {
+    width: 100%;
+    max-height: 440px;
+    border: 2px solid $nhsuk-grey;
+    border-radius: 4px;
+    overflow-y: scroll;
+    padding: 5px 24px;
+    background-color: #fff;
+  }
+
+  button.button-processing {
+    background-color: $nhsuk-grey !important;
+    border-color: $nhsuk-grey !important;
+    cursor: not-allowed;
+    position: relative;
+
+    i {
+      position: absolute;
+      right: 13px;
+      top: 15px;
+    }
+  }
 }
 
 div.user-entry,
 article,
 div.contribute {
-    div.accordion-arrow {
-        position: relative;
-        margin-left: 25px;
-        max-width: 770px;
-    }
-
-    a div.accordion-arrow::before {
-        content: url('/images/triangle-down.svg');
-        position: absolute;
-        left: -25px;
-        top: 0;
-    }
-
-    div.accordion {
-        p {
-            margin-left: 1rem;
-
-            .title {
-                font-weight: bold;
-            }
-        }
-    }
-
-    a.collapsed div.accordion-arrow::before {
-        content: url('/images/triangle-right.svg');
-        position: absolute;
-        top: 1px;
-        left: -25px;
-    }
-
-    a.text-decoration-skip {
-        text-decoration-skip-ink: none !important;
-    }
-
-    label.checkContainer {
-        font-family: $font-stack;
-        padding-top: 0;
-    }
-
-    .footer-text {
-        color: $nhsuk-grey;
-        margin-top: .5rem
-    }
+  div.accordion-arrow {
+    position: relative;
+    margin-left: 25px;
+    max-width: 770px;
+  }
+
+  a div.accordion-arrow::before {
+    content: url('/images/triangle-down.svg');
+    position: absolute;
+    left: -25px;
+    top: 0;
+  }
+
+  div.accordion {
+    p {
+      margin-left: 1rem;
+
+      .title {
+        font-weight: bold;
+      }
+    }
+  }
+
+  a.collapsed div.accordion-arrow::before {
+    content: url('/images/triangle-right.svg');
+    position: absolute;
+    top: 1px;
+    left: -25px;
+  }
+
+  a.text-decoration-skip {
+    text-decoration-skip-ink: none !important;
+  }
+
+  label.checkContainer {
+    font-family: $font-stack;
+    padding-top: 0;
+  }
+
+  .footer-text {
+    color: $nhsuk-grey;
+    margin-top: .5rem
+  }
 }
 
 div.contribute {
-    h2 {
-        .warningTriangle {
-            padding-left: 10px;
-            vertical-align: middle;
-        }
-    }
-
-    h3 {
-        .warningTriangle {
-            padding-left: 10px;
-            vertical-align: middle;
-        }
+  h2 {
+    .warningTriangle {
+      padding-left: 10px;
+      vertical-align: middle;
     }
+  }
 
-    div.common-content {
-        div.form-group {
-            margin-bottom: 0;
-        }
-
-        .bg-grey-white {
-            padding: 17px 25px 30px 25px;
-            color: $nhsuk-black;
-        }
+  h3 {
+    .warningTriangle {
+      padding-left: 10px;
+      vertical-align: middle;
     }
+  }
 
-    div.white-background {
-        background-color: $nhsuk-white;
-        min-height: 420px;
+  div.common-content {
+    div.form-group {
+      margin-bottom: 0;
     }
 
-    .limit-width {
-        width: 100%;
-        max-width: 850px;
-        margin-left: 40px;
-        padding-right: 50px;
+    .bg-grey-white {
+      padding: 17px 25px 30px 25px;
+      color: $nhsuk-black;
     }
+  }
 
-    div.contribute-header {
-        .draftText {
-            color: $nhsuk-green;
-            margin-top: 0;
-        }
+  div.white-background {
+    background-color: $nhsuk-white;
+    min-height: 420px;
+  }
 
-        .error-message {
-            color: $nhsuk-red;
-            font-weight: bold;
-        }
+  .limit-width {
+    width: 100%;
+    max-width: 850px;
+    margin-left: 40px;
+    padding-right: 50px;
+  }
 
-        .warning-banner {
-            display: flex;
-            flex-flow: row;
-            justify-content: space-between;
-            padding: 1.5rem 1.5rem 0.8rem 1.5rem;
-            border-bottom: 1px solid $nhsuk-grey-light;
-            border-top: 1px solid $nhsuk-grey-light;
-
-            div.warningTriangle {
-                font-size: 40px;
-            }
+  div.contribute-header {
+    .draftText {
+      color: $nhsuk-green; 
+      margin-top: 0;
+    }
 
-            div.info {
-                padding-left: 12px;
-            }
+    .error-message {
+      color: $nhsuk-red;
+      font-weight: bold;
+    }
 
-            div.dismiss {
-                text-align: end;
-                padding-top: .5rem;
-                padding-right: 2rem;
+    .warning-banner {
+      display: flex;
+      flex-flow: row;
+      justify-content: space-between;
+      padding: 1.5rem 1.5rem 0.8rem 1.5rem;
+      border-bottom: 1px solid $nhsuk-grey-light;
+      border-top: 1px solid $nhsuk-grey-light;
 
-                button {
-                    font-size: 2.5rem;
-                    color: $nhsuk-grey;
-                }
-            }
+      div.warningTriangle {
+        font-size: 40px;
+      }
 
-            .warning-banner-left {
-                display: flex;
-                justify-content: space-between;
-                width: 100%;
-                max-width: 800px;
-                margin-left: 40px;
-            }
-        }
-    }
+      div.info {
+        padding-left: 12px;
+      }
 
-    .warningTriangle {
-        color: #ffb81c;
-        font-size: 2rem;
+      div.dismiss {
+        text-align: end;
+        padding-top: .5rem;
+        padding-right: 2rem;
 
-        &.large {
-            font-size: 4rem !important;
+        button {
+          font-size: 2.5rem;
+          color: $nhsuk-grey;
         }
-    }
+      }
 
-    button.delete-button {
+      .warning-banner-left {
+        display: flex;
+        justify-content: space-between;
+        width: 100%;
+        max-width: 800px;
+        margin-left: 40px;
+      }
+    }
+  }
+
+  .warningTriangle {
+    color: #ffb81c;
+    font-size: 2rem;
+
+    &.large {
+      font-size: 4rem !important;
+    }
+  }
+
+  button.delete-button {
+    text-decoration: none;
+    color: $nhsuk-grey-placeholder;
+    font-size: 1.6rem;
+
+    i {
+      margin-right: 4px;
+      font-size: 1.8rem;
+    }
+  }
+
+  button.publish-button {
+    color: $nhsuk-white;
+    background-color: $nhsuk-green;
+    font-size: 19px;
+    text-align: center !important;
+    border: 1px solid $nhsuk-green !important;
+    min-height: 50px;
+    min-width: 115px;
+    padding: 0px 25px 0px 25px;
+    border-radius: 5px;
+  }
+
+  button.publish-button:disabled {
+    background-color: $nhsuk-grey;
+    border-color: $nhsuk-grey !important;
+  }
+
+  button.btn-outline-custom:disabled {
+    color: $nhsuk-grey !important;
+    border-color: $nhsuk-grey !important;
+  }
+
+  button.btn-outline-custom:disabled:hover {
+    background-color: $nhsuk-white !important;
+  }
+
+  div.resource-area-container, div.common-content {
+    div.resource-area-header {
+      background-color: $nhsuk-grey;
+      color: $nhsuk-grey-white;
+      border-top-left-radius: .5rem;
+      border-top-right-radius: .5rem;
+      font-family: $font-stack-bold;
+      padding: 1.4rem 2rem 1.0rem 2rem;
+      display: flex;
+      justify-content: space-between;
+
+      a,
+      button {
         text-decoration: none;
-        color: $nhsuk-grey-placeholder;
-        font-size: 1.6rem;
+        font-size: 19px;
+        font-family: $font-stack;
+        color: $nhsuk-grey-white !important;
+        padding-top: 0;
 
         i {
-            margin-right: 4px;
-            font-size: 1.8rem;
+          margin-left: 4px;
         }
+      }
     }
 
-    button.publish-button {
-        color: $nhsuk-white;
-        background-color: $nhsuk-green;
-        font-size: 19px;
-        text-align: center !important;
-        border: 1px solid $nhsuk-green !important;
-        min-height: 50px;
-        min-width: 115px;
-        padding: 0px 25px 0px 25px;
-        border-radius: 5px;
-    }
-
-    button.publish-button:disabled {
-        background-color: $nhsuk-grey;
-        border-color: $nhsuk-grey !important;
+    div.resource-area-body {
+      background-color: $nhsuk-grey-white;
+      border-bottom-left-radius: .5rem;
+      border-bottom-right-radius: .5rem;
+      min-height: 300px;
+      padding: 20px 10px 20px 10px;
     }
 
-    button.btn-outline-custom:disabled {
-        color: $nhsuk-grey !important;
-        border-color: $nhsuk-grey !important;
+    .radio-options {
+      height: 12px !important;
+      width: 12px !important;
+      border: 1px solid $nhsuk-black;
+      color: $nhsuk-black;
     }
 
-    button.btn-outline-custom:disabled:hover {
-        background-color: $nhsuk-white !important;
+    .radio-options-text {
+      margin-right: 20px;
     }
 
-    div.resource-area-container, div.common-content {
-        div.resource-area-header {
-            background-color: $nhsuk-grey;
-            color: $nhsuk-grey-white;
-            border-top-left-radius: .5rem;
-            border-top-right-radius: .5rem;
-            font-family: $font-stack-bold;
-            padding: 1.4rem 2rem 1.0rem 2rem;
-            display: flex;
-            justify-content: space-between;
+    .author-details, .file-details, .licence-details {
+      display: flex;
+      justify-content: space-between;
+      background-color: $nhsuk-white;
+      border-radius: 5px;
+      padding: 25px;
 
-            a,
-            button {
-                text-decoration: none;
-                font-size: 19px;
-                font-family: $font-stack;
-                color: $nhsuk-grey-white !important;
-                padding-top: 0;
-
-                i {
-                    margin-left: 4px;
-                }
-            }
-        }
-
-        div.resource-area-body {
-            background-color: $nhsuk-grey-white;
-            border-bottom-left-radius: .5rem;
-            border-bottom-right-radius: .5rem;
-            min-height: 300px;
-            padding: 20px 10px 20px 10px;
-        }
-
-        .radio-options {
-            height: 12px !important;
-            width: 12px !important;
-            border: 1px solid $nhsuk-black;
-            color: $nhsuk-black;
-        }
+      button,
+      a {
+        font-size: 16px;
+        color: $nhsuk-red;
+        text-decoration: none;
+        display: flex;
+        justify-content: space-between;
 
-        .radio-options-text {
-            margin-right: 20px;
+        i {
+          padding-left: 10px;
+          padding-top: 3px;
         }
+      }
 
-        .author-details, .file-details, .licence-details {
-            display: flex;
-            justify-content: space-between;
-            background-color: $nhsuk-white;
-            border-radius: 5px;
-            padding: 25px;
-
-            button,
-            a {
-                font-size: 16px;
-                color: $nhsuk-red;
-                text-decoration: none;
-                display: flex;
-                justify-content: space-between;
-
-                i {
-                    padding-left: 10px;
-                    padding-top: 3px;
-                }
-            }
-
-            .divider {
-                color: $nhsuk-grey-light;
-            }
-        }
+      .divider {
+        color: $nhsuk-grey-light;
+      }
+    }
 
-        .author-details {
-            border: solid 1px $nhsuk-grey-light;
-            padding: 22px 15px 10px 15px;
+    .author-details {
+      border: solid 1px $nhsuk-grey-light;
+      padding: 22px 15px 10px 15px;
 
-            i {
-                color: $nhsuk-grey;
-                margin-right: 1rem;
-            }
-        }
+      i {
+        color: $nhsuk-grey;
+        margin-right: 1rem;
+      }
+    }
 
-        .keyword-label {
-            font-weight: normal;
-        }
+    .keyword-container {
+      display: flex;
+      flex-wrap: wrap;
 
-        .keyword-container {
-            display: flex;
-            flex-wrap: wrap;
-
-            .keyword-tag {
-                background-color: $nhsuk-grey-white;
-                border-radius: 20px;
-                margin-bottom: 10px;
-                padding: 8px 10px 3px 15px;
-
-                button {
-                    color: $nhsuk-red;
-                    font-size: 2rem;
-                }
-            }
-        }
+      .keyword-tag {
+        background-color: $nhsuk-grey-white;
+        border-radius: 20px;
+        margin-bottom: 10px;
+        padding: 8px 10px 3px 15px;
 
-        span.optional {
-            font-family: $font-stack;
+        button {
+          color: $nhsuk-red;
+          font-size: 2rem;
         }
+      }
+    }
 
-        textarea {
-            width: 100%;
-        }
+    span.optional {
+      font-family: $font-stack;
     }
 
-    .authored-date label {
-        font-size: 1.6rem;
+    textarea {
+      width: 100%;
     }
+  }
 
-    div.publish-warning {
-        display: flex;
-        flex-direction: row;
+  .authored-date label {
+    font-size: 1.6rem;
+  }
 
-        .triangle {
-            margin-right: 10px;
-            display: flex;
-            align-items: center;
+  div.publish-warning {
+    display: flex;
+    flex-direction: row;
 
-            i {
-                padding-top: 5px;
-            }
-        }
-    }
+    .triangle {
+      margin-right: 10px;
+      display: flex;
+      align-items: center;
 
-    div.highlighted-info {
-        background-color: rgba(255, 184, 28, 0.05);
-        border: 1px solid #FFB81C;
-        padding: 15px 24px;
-        margin: 15px 15px 0 15px;
+      i {
+        padding-top: 5px;
+      }
     }
+  }
+
+  div.highlighted-info {
+    background-color: rgba(255, 184, 28, 0.05);
+    border: 1px solid #FFB81C;
+    padding: 15px 24px;
+    margin: 15px 15px 0 15px;
+  }
 }
 
 @media (max-width: 768px) {
-    div.contribute {
-        .limit-width {
-            max-width: 815px;
-            margin-left: 15px;
-            padding-right: 25px;
-        }
+  div.contribute {
+    .limit-width {
+      max-width: 815px;
+      margin-left: 15px;
+      padding-right: 25px;
+    }
 
-        div.contribute-header {
-            .warning-banner {
-                .warning-banner-left {
-                    margin-left: 15px;
-                }
-            }
+    div.contribute-header {
+      .warning-banner {
+        .warning-banner-left {
+          margin-left: 15px;
         }
+      }
     }
+  }
 }
 
 /* end contribute*/
@@ -604,329 +600,330 @@ div.catalogue-access-request {
 div.contribute,
 div.user-entry {
 
-    p {
-        margin-top: 1.6rem;
-    }
+  p {
+    margin-top: 1.6rem;
+  }
 
-    input[type="number"]:disabled {
-        border-color: $nhsuk-grey-light;
-    }
+  input[type="number"]:disabled {
+    border-color: $nhsuk-grey-light;
+  }
 
-    div.form-group {
-        margin-bottom: 1.5rem;
+  div.form-group {
+    margin-bottom: 1.5rem;
 
-        .child-form-group {
-            border-left: 3px solid $nhsuk-grey-light;
-            padding-left: 1rem;
-
-            &.input-validation-error {
-                border-left: 3px solid $nhsuk-red;
-            }
-
-            label {
-                padding-top: 0;
-            }
-        }
+    .child-form-group {
+      border-left: 3px solid $nhsuk-grey-light;
+      padding-left: 1rem;
 
-        .validation-summary {
-            padding-top: 0;
-
-            ul {
-                color: $nhsuk-red;
-                padding: 0;
-                margin: 0;
+      &.input-validation-error {
+        border-left: 3px solid $nhsuk-red;
+      }
 
-                li {
-                    list-style: none;
-                }
-            }
-        }
+      label {
+        padding-top: 0;
+      }
     }
 
-    div.form-group.input-validation-error, div.form-group.input-validation-error-force {
-        margin-left: 15px;
-        border-left: 3px solid $nhsuk-red;
-        padding: 0 1.5rem;
+    .validation-summary {
+      padding-top: 0;
 
-        label {
-            margin-bottom: 1rem;
-        }
+      ul {
+        color: $nhsuk-red;
+        padding: 0;
+        margin: 0;
 
-        div.error-text {
-            margin-bottom: 1.2rem;
+        li {
+          list-style: none;
         }
+      }
     }
+  }
 
-    .field-validation-error span {
-        color: $nhsuk-red !important;
-    }
+  div.form-group.input-validation-error, div.form-group.input-validation-error-force {
+    margin-left: 15px;
+    border-left: 3px solid $nhsuk-red;
+    padding: 0 1.5rem;
 
-    select.form-control,
-    input.form-control {
-        border: 2px solid $nhsuk-grey;
-        box-shadow: none;
+    label {
+      margin-bottom: 1rem;
     }
 
-    div.error-container {
+    div.error-text {
+      margin-bottom: 1.2rem;
+    }
+  }
 
-        div.form-group.input-validation-error label {
-            margin-bottom: 1.3rem;
-        }
+  .field-validation-error span {
+    color: $nhsuk-red !important;
+  }
 
-        div.form-group.input-validation-error {
-            margin-left: 0;
-            border-left: none;
-        }
+  select.form-control,
+  input.form-control {
+    border: 2px solid $nhsuk-grey;
+    box-shadow: none;
+  }
 
-        select.form-control,
-        input.form-control {
-            border: 2px solid $nhsuk-red;
-        }
+  div.error-container {
 
-        ul {
-            padding: 0;
-            margin: 0;
-        }
-
-        &.form-valid {
-            padding: 0;
-            border-left: inherit;
-
-            input {
-                border-color: inherit;
-            }
-        }
-
-        label {
-            margin-bottom: 5px;
-            padding-top: 0;
-        }
+    div.form-group.input-validation-error label {
+      margin-bottom: 1.3rem;
     }
 
-    child-form-control input.form-control:focus {
-        box-shadow: none;
+    div.form-group.input-validation-error {
+      margin-left: 0;
+      border-left: none;
     }
 
-    label {
-        font-family: $font-stack-bold;
-        margin-bottom: 1.3rem;
-        padding-top: 1rem;
+    select.form-control,
+    input.form-control {
+      border: 2px solid $nhsuk-red;
     }
 
-    label.disabled {
-        color: $nhsuk-grey-light;
+    ul {
+      padding: 0;
+      margin: 0;
     }
 
-    label + div,
-    label + div + div:not(.ck) {
-        margin-top: -8px;
-        padding-bottom: 9px;
-    }
+    &.form-valid {
+      padding: 0;
+      border-left: inherit;
 
-    div.validation-summary-errors ul {
-        padding-left: 0;
-        padding-bottom: 2rem;
+      input {
+        border-color: inherit;
+      }
     }
 
-    div.input-validation-error div.lh-datepicker input,
-    textarea.form-control.input-validation-error,
-    input.form-control.input-validation-error,
-    select.form-control.input-validation-error,
-    input.form-control.input-validation-error-force {
-        border-color: $nhsuk-red;
+    label {
+      margin-bottom: 5px;
+      padding-top: 0;
     }
+  }
 
-    div.lh-typeahead {
-        position: relative;
-
-        input {
-            padding-right: 32px;
-        }
-
-        .fa-times {
-            cursor: pointer;
-        }
-
-        i {
-            float: right;
-            position: absolute;
-            top: 13px;
-            right: 15px;
-            opacity: 0.4;
-        }
-
-        ul {
-            list-style: none;
-            position: absolute;
-            padding: 0;
-            margin-top: 0;
-            max-height: 350px;
-            min-width: 100%;
-            background-color: $nhsuk-white;
-            border: solid 1px $nhsuk-grey-light;
-            border-radius: 4px;
-            z-index: 1000;
-            overflow-y: auto;
-        }
-
-        li {
-            padding: 5px 10px;
-            margin-bottom: 0;
-            border-bottom: 1px solid $nhsuk-grey-light;
-            cursor: pointer;
-            line-height: 1.3;
-            font-size: 1.6rem;
-
-            span.highlighted {
-                font-weight: bold;
-                display: inline;
-            }
-        }
-
-        li.active {
-            background-color: $nhsuk-blue;
-            color: white;
-        }
-
-        li.active span {
-            color: white;
-        }
-
-        li:first-child {
-            border-top-left-radius: 4px;
-            border-top-right-radius: 4px;
-        }
-
-        li:last-child {
-            border-bottom-left-radius: 4px;
-            border-bottom-right-radius: 4px;
-            border-bottom: 0;
-        }
+  child-form-control input.form-control:focus {
+    box-shadow: none;
+  }
 
-        span {
-            display: block;
-            color: #2c3e50;
-        }
-    }
+  label {
+    font-family: $font-stack-bold;
+    margin-bottom: 1.3rem;
+    padding-top: 1rem;
+  }
 
+  label.disabled {
+    color: $nhsuk-grey-light;
+  }
 
-    .btn-custom {
-        padding-left: 4rem;
-        padding-right: 4rem;
-    }
+  label + div,
+  label + div + div:not(.ck) {
+    margin-top: -8px;
+    padding-bottom: 9px;
+  }
 
-    .btn-custom:disabled {
-        background-color: $nhsuk-grey !important;
-        border-color: $nhsuk-grey !important;
-    }
+  div.validation-summary-errors ul {
+    padding-left: 0;
+    padding-bottom: 2rem;
+  }
 
-    .ck-editor__top {
-        border-top-left-radius: .25rem;
-        border-top-right-radius: .25rem;
-        border-top: solid 2px $nhsuk-grey;
-        border-left: solid 2px $nhsuk-grey;
-        border-right: solid 2px $nhsuk-grey;
-    }
+  div.input-validation-error div.lh-datepicker input,
+  textarea.form-control.input-validation-error,
+  input.form-control.input-validation-error,
+  select.form-control.input-validation-error,
+  input.form-control.input-validation-error-force {
+    border-color: $nhsuk-red;
+  }
 
-    .ck-editor__main {
-        border-bottom-left-radius: .25rem;
-        border-bottom-right-radius: .25rem;
-        border-bottom: solid 2px $nhsuk-grey;
-        border-left: solid 2px $nhsuk-grey;
-        border-right: solid 2px $nhsuk-grey;
-    }
+  div.lh-typeahead {
+    position: relative;
 
-    .ck.ck-editor__editable:focus {
-        outline: none !important;
-        box-shadow: none !important;
-        border-color: $nhsuk-grey-light;
+    input {
+      padding-right: 32px;
     }
 
-    .ck-editor__editable_inline {
-        min-height: 500px;
+    .fa-times {
+      cursor: pointer;
     }
 
-    .article-content .ck-editor__editable_inline {
-        min-height: 550px;
+    i {
+      float: right;
+      position: absolute;
+      top: 13px;
+      right: 15px;
+      opacity: 0.4;
     }
 
-    .common-content .ck-editor__editable_inline {
-        min-height: 260px;
-    }
+    ul {
+      list-style: none;
+      position: absolute;
+      padding: 0;
+      margin-top: 0;
+      max-height: 350px;
+      min-width: 100%;
+      background-color: $nhsuk-white;
+      border: solid 1px $nhsuk-grey-light;
+      border-radius: 4px;
+      z-index: 1000;
+      overflow-y: auto;
+    }
+
+    li {
+      padding: 5px 10px;
+      margin-bottom: 0;
+      border-bottom: 1px solid $nhsuk-grey-light;
+      cursor: pointer;
+      line-height: 1.3;
+      font-size: 1.6rem;
+
+      span.highlighted {
+        font-weight: bold;
+        display: inline;
+      }
+    }
+
+    li.active {
+      background-color: $nhsuk-blue;
+      color: white;
+    }
+
+    li.active span {
+      color: white;
+    }
+
+    li:first-child {
+      border-top-left-radius: 4px;
+      border-top-right-radius: 4px;
+    }
+
+    li:last-child {
+      border-bottom-left-radius: 4px;
+      border-bottom-right-radius: 4px;
+      border-bottom: 0;
+    }
+
+    span {
+      display: block;
+      color: #2c3e50;
+    }
+  }
+
+
+  .btn-custom {
+    padding-left: 4rem;
+    padding-right: 4rem;
+  }
+
+  .btn-custom:disabled {
+    background-color: $nhsuk-grey !important;
+    border-color: $nhsuk-grey !important;
+  }
+
+  .ck-editor__top {
+    border-top-left-radius: .25rem;
+    border-top-right-radius: .25rem;
+    border-top: solid 2px $nhsuk-grey;
+    border-left: solid 2px $nhsuk-grey;
+    border-right: solid 2px $nhsuk-grey;
+  }
+
+  .ck-editor__main {
+    border-bottom-left-radius: .25rem;
+    border-bottom-right-radius: .25rem;
+    border-bottom: solid 2px $nhsuk-grey;
+    border-left: solid 2px $nhsuk-grey;
+    border-right: solid 2px $nhsuk-grey;
+  }
+
+  .ck.ck-editor__editable:focus {
+    outline: none !important;
+    box-shadow: none !important;
+    border-color: $nhsuk-grey-light;
+  }
+
+  .ck-editor__editable_inline {
+    min-height: 500px;
+  }
+
+  .article-content .ck-editor__editable_inline {
+    min-height: 550px;
+  }
+
+  .common-content .ck-editor__editable_inline {
+    min-height: 260px;
+  }
 }
 
 article.with-aside div.row {
-    margin-right: 0;
+  margin-right: 0;
 }
 
 .tray {
-    margin-right: 15px;
-    margin-left: 15px;
-
-    .navigation {
-        cursor: pointer;
-    }
-
-    .norecords {
-        border-radius: 8px;
-        background-color: $nhsuk-grey;
-        color: $nhsuk-white;
-        min-height: 180px;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-    }
-
-    .card-list-move {
-        transition: transform 1s;
-    }
-
-    .fade-enter-active, .fade-leave-active {
-        transition: opacity .5s;
-    }
-
-    .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
-        opacity: 0;
-    }
+  margin-right: 15px;
+  margin-left: 15px;
+
+  .navigation {
+    cursor: pointer;
+  }
+
+  .norecords {
+    border-radius: 8px;
+    background-color: $nhsuk-grey;
+    color: $nhsuk-white;
+    min-height: 180px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .card-list-move {
+    transition: transform 1s;
+  }
+
+  .fade-enter-active, .fade-leave-active {
+    transition: opacity .5s;
+  }
+
+  .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */
+  {
+    opacity: 0;
+  }
 }
 
 .notifications-panel {
-    table td {
-        background-color: #F6F9FA;
-    }
+  table td {
+    background-color: #F6F9FA;
+  }
 
-    .modal-dialog {
-        max-width: 450px !important;
-        margin-left: auto;
-        margin-right: auto;
-    }
+  .modal-dialog {
+    max-width: 450px !important;
+    margin-left: auto;
+    margin-right: auto;
+  }
 
-    @media (max-width: 470px) {
-        .modal-dialog {
-            margin: 0.5rem;
-        }
+  @media (max-width: 470px) {
+    .modal-dialog {
+      margin: 0.5rem;
     }
+  }
 }
 
 @media (max-width: 768px) {
 
-    div.user-entry,
-    article {
-        margin: 0px;
-    }
+  div.user-entry,
+  article {
+    margin: 0px;
+  }
 
-    .device-check-banner {
-        padding-top: 35px !important;
+  .device-check-banner {
+    padding-top: 35px !important;
 
-        .lead-paragraph {
-            max-width: 567px;
-        }
+    .lead-paragraph {
+      max-width: 567px;
     }
+  }
 
-    .notifications-panel {
+  .notifications-panel {
 
-        .notifications-header {
-            min-height: 110px !important;
-        }
+    .notifications-header {
+      min-height: 110px !important;
     }
+  }
 }

From 04bc7b12ebd6e060cde363bb1ccc75b0401c4ae7 Mon Sep 17 00:00:00 2001
From: AnjuJose011 <154979799+AnjuJose011@users.noreply.github.com>
Date: Thu, 31 Jul 2025 08:53:49 +0100
Subject: [PATCH 3/3] upadtes-TD-5868

---
 .../Styles/sections/_all.scss                 | 422 +++++++++---------
 1 file changed, 213 insertions(+), 209 deletions(-)

diff --git a/LearningHub.Nhs.WebUI/Styles/sections/_all.scss b/LearningHub.Nhs.WebUI/Styles/sections/_all.scss
index 03ad5dc3e..bf2284134 100644
--- a/LearningHub.Nhs.WebUI/Styles/sections/_all.scss
+++ b/LearningHub.Nhs.WebUI/Styles/sections/_all.scss
@@ -140,268 +140,272 @@ div.contribute {
 }
 
 div.contribute {
-  h2 {
-    .warningTriangle {
-      padding-left: 10px;
-      vertical-align: middle;
-    }
-  }
-
-  h3 {
-    .warningTriangle {
-      padding-left: 10px;
-      vertical-align: middle;
-    }
-  }
-
-  div.common-content {
-    div.form-group {
-      margin-bottom: 0;
+    h2 {
+        .warningTriangle {
+            padding-left: 10px;
+            vertical-align: middle;
+        }
     }
 
-    .bg-grey-white {
-      padding: 17px 25px 30px 25px;
-      color: $nhsuk-black;
+    h3 {
+        .warningTriangle {
+            padding-left: 10px;
+            vertical-align: middle;
+        }
     }
-  }
 
-  div.white-background {
-    background-color: $nhsuk-white;
-    min-height: 420px;
-  }
-
-  .limit-width {
-    width: 100%;
-    max-width: 850px;
-    margin-left: 40px;
-    padding-right: 50px;
-  }
+    div.common-content {
+        div.form-group {
+            margin-bottom: 0;
+        }
 
-  div.contribute-header {
-    .draftText {
-      color: $nhsuk-green; 
-      margin-top: 0;
+        .bg-grey-white {
+            padding: 17px 25px 30px 25px;
+            color: $nhsuk-black;
+        }
     }
 
-    .error-message {
-      color: $nhsuk-red;
-      font-weight: bold;
+    div.white-background {
+        background-color: $nhsuk-white;
+        min-height: 420px;
     }
 
-    .warning-banner {
-      display: flex;
-      flex-flow: row;
-      justify-content: space-between;
-      padding: 1.5rem 1.5rem 0.8rem 1.5rem;
-      border-bottom: 1px solid $nhsuk-grey-light;
-      border-top: 1px solid $nhsuk-grey-light;
-
-      div.warningTriangle {
-        font-size: 40px;
-      }
-
-      div.info {
-        padding-left: 12px;
-      }
-
-      div.dismiss {
-        text-align: end;
-        padding-top: .5rem;
-        padding-right: 2rem;
-
-        button {
-          font-size: 2.5rem;
-          color: $nhsuk-grey;
-        }
-      }
-
-      .warning-banner-left {
-        display: flex;
-        justify-content: space-between;
+    .limit-width {
         width: 100%;
-        max-width: 800px;
+        max-width: 850px;
         margin-left: 40px;
-      }
+        padding-right: 50px;
     }
-  }
 
-  .warningTriangle {
-    color: #ffb81c;
-    font-size: 2rem;
+    div.contribute-header {
+        .draftText {
+            color: $nhsuk-green;
+            margin-top: 0;
+        }
 
-    &.large {
-      font-size: 4rem !important;
-    }
-  }
+        .error-message {
+            color: $nhsuk-red;
+            font-weight: bold;
+        }
 
-  button.delete-button {
-    text-decoration: none;
-    color: $nhsuk-grey-placeholder;
-    font-size: 1.6rem;
+        .warning-banner {
+            display: flex;
+            flex-flow: row;
+            justify-content: space-between;
+            padding: 1.5rem 1.5rem 0.8rem 1.5rem;
+            border-bottom: 1px solid $nhsuk-grey-light;
+            border-top: 1px solid $nhsuk-grey-light;
+
+            div.warningTriangle {
+                font-size: 40px;
+            }
 
-    i {
-      margin-right: 4px;
-      font-size: 1.8rem;
-    }
-  }
+            div.info {
+                padding-left: 12px;
+            }
 
-  button.publish-button {
-    color: $nhsuk-white;
-    background-color: $nhsuk-green;
-    font-size: 19px;
-    text-align: center !important;
-    border: 1px solid $nhsuk-green !important;
-    min-height: 50px;
-    min-width: 115px;
-    padding: 0px 25px 0px 25px;
-    border-radius: 5px;
-  }
+            div.dismiss {
+                text-align: end;
+                padding-top: .5rem;
+                padding-right: 2rem;
 
-  button.publish-button:disabled {
-    background-color: $nhsuk-grey;
-    border-color: $nhsuk-grey !important;
-  }
+                button {
+                    font-size: 2.5rem;
+                    color: $nhsuk-grey;
+                }
+            }
 
-  button.btn-outline-custom:disabled {
-    color: $nhsuk-grey !important;
-    border-color: $nhsuk-grey !important;
-  }
+            .warning-banner-left {
+                display: flex;
+                justify-content: space-between;
+                width: 100%;
+                max-width: 800px;
+                margin-left: 40px;
+            }
+        }
+    }
 
-  button.btn-outline-custom:disabled:hover {
-    background-color: $nhsuk-white !important;
-  }
+    .warningTriangle {
+        color: #ffb81c;
+        font-size: 2rem;
 
-  div.resource-area-container, div.common-content {
-    div.resource-area-header {
-      background-color: $nhsuk-grey;
-      color: $nhsuk-grey-white;
-      border-top-left-radius: .5rem;
-      border-top-right-radius: .5rem;
-      font-family: $font-stack-bold;
-      padding: 1.4rem 2rem 1.0rem 2rem;
-      display: flex;
-      justify-content: space-between;
+        &.large {
+            font-size: 4rem !important;
+        }
+    }
 
-      a,
-      button {
+    button.delete-button {
         text-decoration: none;
-        font-size: 19px;
-        font-family: $font-stack;
-        color: $nhsuk-grey-white !important;
-        padding-top: 0;
+        color: $nhsuk-grey-placeholder;
+        font-size: 1.6rem;
 
         i {
-          margin-left: 4px;
+            margin-right: 4px;
+            font-size: 1.8rem;
         }
-      }
     }
 
-    div.resource-area-body {
-      background-color: $nhsuk-grey-white;
-      border-bottom-left-radius: .5rem;
-      border-bottom-right-radius: .5rem;
-      min-height: 300px;
-      padding: 20px 10px 20px 10px;
+    button.publish-button {
+        color: $nhsuk-white;
+        background-color: $nhsuk-green;
+        font-size: 19px;
+        text-align: center !important;
+        border: 1px solid $nhsuk-green !important;
+        min-height: 50px;
+        min-width: 115px;
+        padding: 0px 25px 0px 25px;
+        border-radius: 5px;
     }
 
-    .radio-options {
-      height: 12px !important;
-      width: 12px !important;
-      border: 1px solid $nhsuk-black;
-      color: $nhsuk-black;
+    button.publish-button:disabled {
+        background-color: $nhsuk-grey;
+        border-color: $nhsuk-grey !important;
     }
 
-    .radio-options-text {
-      margin-right: 20px;
+    button.btn-outline-custom:disabled {
+        color: $nhsuk-grey !important;
+        border-color: $nhsuk-grey !important;
     }
 
-    .author-details, .file-details, .licence-details {
-      display: flex;
-      justify-content: space-between;
-      background-color: $nhsuk-white;
-      border-radius: 5px;
-      padding: 25px;
+    button.btn-outline-custom:disabled:hover {
+        background-color: $nhsuk-white !important;
+    }
 
-      button,
-      a {
-        font-size: 16px;
-        color: $nhsuk-red;
-        text-decoration: none;
-        display: flex;
-        justify-content: space-between;
+    div.resource-area-container, div.common-content {
+        div.resource-area-header {
+            background-color: $nhsuk-grey;
+            color: $nhsuk-grey-white;
+            border-top-left-radius: .5rem;
+            border-top-right-radius: .5rem;
+            font-family: $font-stack-bold;
+            padding: 1.4rem 2rem 1.0rem 2rem;
+            display: flex;
+            justify-content: space-between;
 
-        i {
-          padding-left: 10px;
-          padding-top: 3px;
+            a,
+            button {
+                text-decoration: none;
+                font-size: 19px;
+                font-family: $font-stack;
+                color: $nhsuk-grey-white !important;
+                padding-top: 0;
+
+                i {
+                    margin-left: 4px;
+                }
+            }
         }
-      }
 
-      .divider {
-        color: $nhsuk-grey-light;
-      }
-    }
+        div.resource-area-body {
+            background-color: $nhsuk-grey-white;
+            border-bottom-left-radius: .5rem;
+            border-bottom-right-radius: .5rem;
+            min-height: 300px;
+            padding: 20px 10px 20px 10px;
+        }
 
-    .author-details {
-      border: solid 1px $nhsuk-grey-light;
-      padding: 22px 15px 10px 15px;
+        .radio-options {
+            height: 12px !important;
+            width: 12px !important;
+            border: 1px solid $nhsuk-black;
+            color: $nhsuk-black;
+        }
 
-      i {
-        color: $nhsuk-grey;
-        margin-right: 1rem;
-      }
-    }
+        .radio-options-text {
+            margin-right: 20px;
+        }
 
-    .keyword-container {
-      display: flex;
-      flex-wrap: wrap;
+        .author-details, .file-details, .licence-details {
+            display: flex;
+            justify-content: space-between;
+            background-color: $nhsuk-white;
+            border-radius: 5px;
+            padding: 25px;
+
+            button,
+            a {
+                font-size: 16px;
+                color: $nhsuk-red;
+                text-decoration: none;
+                display: flex;
+                justify-content: space-between;
+
+                i {
+                    padding-left: 10px;
+                    padding-top: 3px;
+                }
+            }
 
-      .keyword-tag {
-        background-color: $nhsuk-grey-white;
-        border-radius: 20px;
-        margin-bottom: 10px;
-        padding: 8px 10px 3px 15px;
+            .divider {
+                color: $nhsuk-grey-light;
+            }
+        }
 
-        button {
-          color: $nhsuk-red;
-          font-size: 2rem;
+        .author-details {
+            border: solid 1px $nhsuk-grey-light;
+            padding: 22px 15px 10px 15px;
+
+            i {
+                color: $nhsuk-grey;
+                margin-right: 1rem;
+            }
         }
-      }
-    }
 
-    span.optional {
-      font-family: $font-stack;
-    }
+        .keyword-label {
+            font-weight: normal;
+        }
+
+        .keyword-container {
+            display: flex;
+            flex-wrap: wrap;
+
+            .keyword-tag {
+                background-color: $nhsuk-grey-white;
+                border-radius: 20px;
+                margin-bottom: 10px;
+                padding: 8px 10px 3px 15px;
+
+                button {
+                    color: $nhsuk-red;
+                    font-size: 2rem;
+                }
+            }
+        }
+
+        span.optional {
+            font-family: $font-stack;
+        }
 
-    textarea {
-      width: 100%;
+        textarea {
+            width: 100%;
+        }
     }
-  }
 
-  .authored-date label {
-    font-size: 1.6rem;
-  }
+    .authored-date label {
+        font-size: 1.6rem;
+    }
 
-  div.publish-warning {
-    display: flex;
-    flex-direction: row;
+    div.publish-warning {
+        display: flex;
+        flex-direction: row;
 
-    .triangle {
-      margin-right: 10px;
-      display: flex;
-      align-items: center;
+        .triangle {
+            margin-right: 10px;
+            display: flex;
+            align-items: center;
 
-      i {
-        padding-top: 5px;
-      }
+            i {
+                padding-top: 5px;
+            }
+        }
     }
-  }
 
-  div.highlighted-info {
-    background-color: rgba(255, 184, 28, 0.05);
-    border: 1px solid #FFB81C;
-    padding: 15px 24px;
-    margin: 15px 15px 0 15px;
-  }
+    div.highlighted-info {
+        background-color: rgba(255, 184, 28, 0.05);
+        border: 1px solid #FFB81C;
+        padding: 15px 24px;
+        margin: 15px 15px 0 15px;
+    }
 }
 
 @media (max-width: 768px) {