.tui-formRow{margin-bottom:1.5rem}.tui-formField{padding-top:1.5rem}.tui-themeSettings__content{margin-top:var(--gap-8)}.tui-themeSettings__forms>*+*{margin-top:var(--gap-8)}.tui-themeTenants__content{margin-top:var(--gap-8)}.tui-themeTenants__section+.tui-themeTenants__section{margin-top:var(--gap-12)}.tui-themeTenants__section>*+*{margin-top:var(--gap-4)}:root{--nav-bg-color: #ffffff;--nav-text-color: #231f20;--color-primary: #00A499;--color-state: #00a9ce;--color-text: #231f20;--footer-bg-color: #ffffff;--footer-text-color: #231f20;--color-state-hover: #009fc4;--color-state-focus: #009fc4;--color-state-active: #008eb3;--footer-text-color-hover: #191516;}
/* -- Masum -- CLS report table -- */
#inst179, #inst180, #inst181{
    display:none;
}
#inst1716 .header {
    max-width: 20px;
}
/* -- Masum -- end -- */


/* --Absar -- Start Compliance Percentage Styling -- */
#inst263, #inst264, #inst265, #inst4774{
    display:none;
}

#cls_report_table_263_r0_c1_title h3,
#cls_report_table_264_r0_c1_title h3,
#cls_report_table_265_r0_c1_title h3
{
    font-size: 20px!important;
    text-align: left!important;
    padding: 8px;
    
}

.title-box-container {
    display: flex;
    align-items: center;
}

.percentage-box {
    color: white;
    font-weight: 500;
    width: 60px!important; /* Adjust width */
    height: 30px; /* Adjust height */
    border-style: solid;
    border-radius: 0.5rem; /* Adjust border radius */
    border-color: #026dc4;
    background: #0072CE;
    padding: 5px; /* Adjust padding */
    text-align: center;
    margin-left: auto;
}
/* --Absar -- END Compliance Percentage Styling -- */

/*--ED--START--CURVE ALL RAG BLOCKS--*/
.block-content .cls-cert-compl-box-block {
   border-radius: 20px!important; 
}
/*--ED--END--CURVE ALL RAG BLOCKS--*/

/*--ED-START--LOGIN PAGE CHANGES--*/
#page-login-index .tui-core_auth-loginNav .tui-core_auth-loginNav__image{
    height: 7rem;
}
.tui-core_auth-loginLayout__contentWrap img {
    margin-bottom: 30px;
}
#page-login-index .tui-core_auth-loginLayout__contentWrap > h2 {
    margin-bottom: 40px;
}
/*--ED-END--LOGIN PAGE CHANGES--*/

/*START************MM***************START*/
#page-totara-dashboard-4 table {
  border-collapse: collapse;
  width: 100%;
}
#page-totara-dashboard-4 td,
#page-totara-dashboard-4 th {
  border: 1px solid #dddddd;
  text-align: center;
  padding: 8px;
}

#page-totara-dashboard-4 .border-less {
   border-left:unset;
   border-top:unset;
}
#page-totara-dashboard-4 .table-header-mand-ess {
   background-color: #005eb8;
   color: white;
}
#inst747 {
  display: none;
}
/*END**************MM*****************END*/
.searchInput {
    color: black;
    border-radius: 20px;
    border: none;
    padding-left: 4px;
    margin-top: 2px;
}
.coursesearchbox {
    background-color: #425563;
    border-radius: 20px;        
}
#cls-container-nav #searchbtnform {
    background: none;
    padding-right: 4px;
}
.searchButton {
    margin-bottom: 4px;
}
#cls-course-search {
    margin-right: 7px;
}
.tfont-var-search {
    margin-bottom: 3px;
}
#page-totara-dashboard-4 .block_cls_report_table_222 .tfont-var-plus-square {
    font-size: 24px!important;
    color: #005eb8!important;
}
#page-totara-dashboard-4 .block_cls_report_table_222 .tfont-var-dash-square {
    font-size: 24px!important;
    color: #005eb8!important;
}
#page-totara-dashboard-4 .block_cls_report_table_205 .tfont-var-plus-square {
    font-size: 24px!important;
    color: #005eb8!important;
}
#page-totara-dashboard-4 .block_cls_report_table_205 .tfont-var-dash-square {
    font-size: 24px!important;
    color: #005eb8!important;
}
#page-totara-dashboard-4 #report_cls_certification_completion1 td.prog_proglinkicon{
  text-align: left!important; 
}
#page-totara-evidence-create .form-autocomplete-downarrow {
color: #00a9ce;
}
#page-totara-dashboard-42 .block_cls_report_table_3521 .tfont-var-plus-square {
    font-size: 24px!important;
    color: #005eb8!important;
}
#page-totara-dashboard-42 .block_cls_report_table_3521 .tfont-var-dash-square {
    font-size: 24px!important;
    color: #005eb8!important;
}
#page-totara-dashboard-42 .block_cls_report_table_3594 .tfont-var-plus-square {
    font-size: 24px!important;
    color: #005eb8!important;
}
#page-totara-dashboard-42 .block_cls_report_table_3594 .tfont-var-dash-square {
    font-size: 24px!important;
    color: #005eb8!important;
}
#page-login-index #toggle-login-form {
    font-weight: bold;
    font-size: var(--font-body-line-height);
    line-height: var(--font-body-line-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    color: unset;
    background: var(--color-neutral-10);
    border: var(--border-width-thin) solid var(--card-border-color);
    user-select: none;
    width: 400px;
    border-radius: 6px;
}
.tui-core_auth-stackChooser__option {
    background: #00A9CE;
    color: white;
    border-color: white;    
}
.tui-svgIcon--state-success {
    color: white;
}
.tui-core_auth-stackChooser__option:hover {
    color: white;
    border-color: white;    
}

/* --MR -- Start Compliance Percentage Styling on Dashboard 48-- */
#inst4094, #inst4095, #inst4096{
    display:none;
}

#cls_report_table_4094_r0_c1_title h3,
#cls_report_table_4095_r0_c1_title h3,
#cls_report_table_4096_r0_c1_title h3
{
    font-size: 20px!important;
    text-align: left!important;
    padding: 8px;
    
}

.title-box-container {
    display: flex;
    align-items: center;
}

.percentage-box {
    color: white;
    font-weight: 500;
    width: 60px!important; /* Adjust width */
    height: 30px; /* Adjust height */
    border-style: solid;
    border-radius: 0.5rem; /* Adjust border radius */
    border-color: #026dc4;
    background: #0072CE;
    padding: 5px; /* Adjust padding */
    text-align: center;
    margin-left: auto;
}
/* --MR -- END Compliance Percentage Styling on Dashboard 48 -- */


/* --MNAA -- Start Perfrom index-- */
#page-mod-perform-activity-index .tui-performUserActivityListTableItem__overview-created {
    display: none;
}
#page-mod-perform-activity-index .tui-performUserActivityList__priority {
    display: none;
}

/* --MNAA -- END Perform index -- */

/* --  --*/

#page-mod-perform-manage-participation-participant_instances  button[aria-label="Close all instances"] {
    display: none;
}
#page-mod-perform-manage-participation-subject_instances button[aria-label="Close all instances"] {
    display: none;
}
#page-mod-perform-manage-participation-participant_sections button[aria-label="Close all instances"] {
    display: none;
}



.mod_facetoface__sessionlist__actions{width:100%}
}

/* 50810 - Standardising column header width */

table[data-source="rb_source_user_certifications"] th {
max-width:150px !important;
}

table[data-source="rb_source_user_certifications"] th, 
table[data-source="rb_source_user_certifications"] td {
max-width:150px !important;
}

/* END - 50810 - Standardising column header width */


/* =========================================================
   RAG and pill status classes
   For SQL report HTML output and dashboard status labels
   Placement: keep once, in the user-created CSS block.
   ========================================================= */
.rag,
.pill {
    min-width: 6.5rem;
    border: 1px solid transparent;
    font-weight: 600;
    text-align: center;
    line-height: 1.25;
    white-space: nowrap;
}

.rag {
    display: inline-block;
    padding: 0.18rem 0.45rem;
    border-radius: 0.35rem;
}

.pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
}

.rag-green,
.pill-green,
.pill-success {
    background: #d7f2df;
    color: #005a30;
    border-color: #7bcf94;
}

.rag-amber,
.pill-amber,
.pill-warning {
    background: #fff3cd;
    color: #594300;
    border-color: #e0b84b;
}

.rag-red,
.pill-red,
.pill-danger {
    background: #f8d7da;
    color: #7a0011;
    border-color: #dc3545;
}

.pill-blue,
.pill-info {
    background: #e5f1fb;
    color: #003087;
    border-color: #7fb4dd;
}

.pill-grey,
.pill-neutral {
    background: #f0f4f5;
    color: #212b32;
    border-color: #d8dde0;
}

/* =========================================================
   Fire Safety course styling
   Scope: course 1086 and navigation block #inst5868.mse-fire-course-nav
   Placement: consolidated user-created CSS block.
   ========================================================= */
#inst5868.mse-fire-course-nav {
    background: #ffffff;
    border: 1px solid #d9e0ea;
    border-radius: 12px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    font-size: 0.9rem;
    line-height: 1.35;
}

#inst5868.mse-fire-course-nav .card,
#inst5868.mse-fire-course-nav .block,
#inst5868.mse-fire-course-nav .block-cards {
    border: 0;
    box-shadow: none;
}

#inst5868.mse-fire-course-nav .card-body,
#inst5868.mse-fire-course-nav .content,
#inst5868.mse-fire-course-nav .block-content {
    padding: 0.65rem 0.75rem;
}

body.course-1086 #page-header .page-header-headings h1,
body.course-1086 .page-header-headings h1 {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

body.course-1086 #page-header,
body.course-1086 .page-context-header,
body.course-1086 .page-header-headings {
    margin-bottom: 0.5rem !important;
    padding-bottom: 0 !important;
}

body.course-1086 .course-content {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

body.course-1086 .completionprogress,
body.course-1086 .course-progress,
body.course-1086 .progress,
body.course-1086 [aria-label="Your progress"] {
    display: none !important;
}

body.course-1086 .activity.modtype_label,
body.course-1086 .modtype_label,
body.course-1086 .modtype_label .activity-item,
body.course-1086 .modtype_label .contentwithoutlink,
body.course-1086 .modtype_label .no-overflow,
body.course-1086 .modtype_label .description,
body.course-1086 .modtype_label .activity-description,
body.course-1086 .fire-course-panel,
body.course-1086 .fire-course-panel > div,
body.course-1086 .fire-course-content,
body.course-1086 #module-3311 .fire-course-panel > div {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
}

body.course-1086 .activity.modtype_label,
body.course-1086 .modtype_label,
body.course-1086 .modtype_label .activity-item,
body.course-1086 .modtype_label .contentwithoutlink,
body.course-1086 .modtype_label .no-overflow,
body.course-1086 .modtype_label .description,
body.course-1086 .modtype_label .activity-description,
body.course-1086 .fire-course-panel {
    text-align: left !important;
}

body.course-1086 .sectionname,
body.course-1086 .format-tiles .sectionname,
body.course-1086 .format-topics .sectionname {
    display: none !important;
}

body.course-1086 #module-3311 .no-overflow {
    overflow: visible !important;
}

body.course-1086 #module-3311 .fire-course-panel > div > section {
    min-width: 0 !important;
}

body.course-1086 #module-3311 .fire-course-panel > div > aside {
    min-width: 200px !important;
}

@media (max-width: 900px) {
    body.course-1086 #module-3311 .fire-course-panel > div {
        display: block !important;
    }

    body.course-1086 #module-3311 .fire-course-panel > div > section,
    body.course-1086 #module-3311 .fire-course-panel > div > aside {
        width: 100% !important;
        margin-bottom: 1rem !important;
    }
}

/* =========================================================
   Compact branded Search Elevate block
   Scope: only blocks using custom class .elevate-search-compact
   ========================================================= */
.elevate-search-compact {
    max-width: 430px !important;
    margin: 0 0 1.25rem 0 !important;
}

.elevate-search-compact .card,
.elevate-search-compact .block,
.elevate-search-compact .block-content,
.elevate-search-compact .card-body {
    border-radius: 1rem !important;
    border: 1px solid #d8dde6 !important;
    background: #ffffff !important;
    box-shadow: 0 0.1rem 0.35rem rgba(0, 0, 0, 0.08);
}

.elevate-search-compact .card-body,
.elevate-search-compact .block-content {
    padding: 0.9rem 1rem !important;
}

.elevate-search-compact h2,
.elevate-search-compact .card-title,
.elevate-search-compact .block-title {
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: #003087 !important;
    margin-bottom: 0.5rem !important;
}

.elevate-search-compact form {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    margin: 0 !important;
}

.elevate-search-compact input[type="search"],
.elevate-search-compact input[type="text"] {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    height: 2.4rem !important;
    border: 2px solid #4b5563 !important;
    border-radius: 0.65rem !important;
    padding: 0.35rem 0.6rem !important;
    font-size: 0.95rem !important;
}

.elevate-search-compact button,
.elevate-search-compact input[type="submit"] {
    height: 2.4rem !important;
    border-radius: 0.65rem !important;
    background: #005eb8 !important;
    color: #ffffff !important;
    border: 2px solid #005eb8 !important;
    font-weight: 700 !important;
    padding: 0.35rem 0.85rem !important;
}

.elevate-search-compact button:hover,
.elevate-search-compact input[type="submit"]:hover {
    background: #003087 !important;
    border-color: #003087 !important;
}

.elevate-search-compact input:focus,
.elevate-search-compact button:focus {
    outline: 3px solid #ffdd00 !important;
    outline-offset: 2px !important;
}

.elevate-search-compact a {
    font-size: 0.85rem !important;
}

/* =========================================================
   NHS branded Course Completion Status block
   Scope: only blocks with custom class .nhs-completion-status
   ========================================================= */
.nhs-completion-status {
    --nhs-blue: #005EB8;
    --nhs-dark-blue: #003087;
    --nhs-grey-5: #F0F4F5;
    --nhs-grey-4: #D8DDE0;
    --nhs-text: #212B32;
    --nhs-yellow: #FFEB3B;

    max-width: 410px !important;
    border: 1px solid #D8DDE0 !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    color: #212B32 !important;
    box-shadow: none !important;
    overflow: hidden !important;
    margin: 0 0 1rem 0 !important;
    padding: 0 !important;
}

.nhs-completion-status .header,
.nhs-completion-status .card-header,
.nhs-completion-status .block-header,
.nhs-completion-status h2,
.nhs-completion-status h3,
.nhs-completion-status .title,
.nhs-completion-status .card-title,
.nhs-completion-status .block-title {
    background: #00A499 !important;
    color: #ffffff !important;
    padding: 0.38rem 0.75rem !important;
    margin: 0 !important;
    min-height: auto !important;
    line-height: 1.2 !important;
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    border: none !important;
}

.nhs-completion-status .header *,
.nhs-completion-status .card-header *,
.nhs-completion-status .block-header *,
.nhs-completion-status h2 *,
.nhs-completion-status h3 * {
    color: #ffffff !important;
    background: transparent !important;
}

.nhs-completion-status .content,
.nhs-completion-status .card-body,
.nhs-completion-status .contentwithoutlink {
    padding: 0.55rem 0.75rem 0.6rem 0.75rem !important;
    font-size: 0.9rem !important;
    line-height: 1.35 !important;
    background: #ffffff !important;
    color: #212B32 !important;
}

.nhs-completion-status p {
    margin: 0 0 0.35rem 0 !important;
    font-size: 0.9rem !important;
    line-height: 1.35 !important;
    color: #212B32 !important;
}

.nhs-completion-status .content p:first-of-type,
.nhs-completion-status .card-body p:first-of-type {
    background: #F0F4F5 !important;
    border-left: 4px solid #00A499 !important;
    border-radius: 6px !important;
    padding: 0.45rem 0.6rem !important;
    margin-bottom: 0.55rem !important;
}

.nhs-completion-status .content p:nth-of-type(2),
.nhs-completion-status .card-body p:nth-of-type(2),
.nhs-completion-status .content div:nth-of-type(2),
.nhs-completion-status .card-body div:nth-of-type(2) {
    display: none !important;
}

.nhs-completion-status table {
    display: block !important;
    width: 100% !important;
    margin: 0.25rem 0 0 0 !important;
    border: none !important;
    border-collapse: collapse !important;
}

.nhs-completion-status thead,
.nhs-completion-status tbody,
.nhs-completion-status tr,
.nhs-completion-status th,
.nhs-completion-status td {
    display: none !important;
}

.nhs-completion-status table::before,
.nhs-completion-status table::after {
    display: block !important;
    color: #212B32 !important;
    background: #ffffff !important;
    border: 1px solid #E8EDEE !important;
    border-radius: 6px !important;
    padding: 0.32rem 0.5rem !important;
    margin-bottom: 0.3rem !important;
    font-size: 0.88rem !important;
    line-height: 1.25 !important;
    font-weight: 600 !important;
}

.nhs-completion-status table::before {
    content: "❌  Fire Safety e-learning";
}

.nhs-completion-status table::after {
    content: "❌  Fire Alarm Training";
}

.nhs-completion-status a {
    color: #005EB8 !important;
    text-decoration: underline !important;
    font-weight: 600 !important;
    font-size: 0.9rem !important;
}

.nhs-completion-status a:hover {
    color: #003087 !important;
    text-decoration-thickness: 2px !important;
}

.nhs-completion-status a:visited {
    color: #330072 !important;
}

.nhs-completion-status a:focus,
.nhs-completion-status button:focus,
.nhs-completion-status [tabindex]:focus {
    outline: 3px solid #FFEB3B !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 2px #212B32 !important;
}

.nhs-completion-status hr,
.nhs-completion-status br,
.nhs-completion-status .content > a,
.nhs-completion-status .card-body > a,
.nhs-completion-status .contentwithoutlink > a,
.nhs-completion-status a[href*="completion"],
.nhs-completion-status a[href*="report"] {
    display: none !important;
}

/* =========================================================
   MSE Appraisal 2026 page styling
   Scope: only content wrapped in .mse-appraisal-community-page
   ========================================================= */
.mse-appraisal-community-page {
    --mse-nhs-blue: #005EB8;
    --mse-nhs-dark-blue: #003087;
    --mse-nhs-text: #212B32;
    --mse-nhs-muted: #425563;
    --mse-nhs-border: #D8DDE0;
    --mse-nhs-bg: #F0F4F5;
    --mse-nhs-focus: #FFEB3B;

    max-width: 52rem;
    margin: 0 auto;
    padding: 0 1rem 2rem 1rem;
    color: var(--mse-nhs-text);
    font-size: 18px;
    line-height: 1.6;
}

.mse-appraisal-hero {
    width: 100%;
    max-width: 52rem;
    margin: 0 0 1.25rem 0;
    overflow: hidden;
    border-radius: 0.65rem;
}

.mse-appraisal-hero__image {
    display: block;
    width: 100%;
    height: 11rem;
    object-fit: cover;
    object-position: center;
    border-radius: 0.65rem;
}

.mse-appraisal-content {
    max-width: 52rem;
    margin: 0;
}

.mse-appraisal-content h2 {
    margin: 0 0 1rem 0;
    color: var(--mse-nhs-text);
    font-size: 1.55rem;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.01em;
}

.mse-appraisal-content p {
    margin: 0 0 1.15rem 0;
    max-width: 72ch;
    font-size: 18px;
    line-height: 1.6;
    color: var(--mse-nhs-text);
}

.mse-appraisal-content li,
.mse-appraisal-content a {
    font-size: 18px;
    line-height: 1.6;
}

.mse-appraisal-links {
    max-width: 48rem;
    margin: 0.75rem 0 1.5rem 0;
    padding: 1rem 1.25rem;
    background: var(--mse-nhs-bg);
    border-left: 0.35rem solid var(--mse-nhs-blue);
    border-radius: 0.45rem;
}

.mse-appraisal-links ul {
    margin: 0;
    padding-left: 1.25rem;
}

.mse-appraisal-links li {
    margin: 0.4rem 0;
    padding-left: 0.15rem;
}

.mse-appraisal-community-page a {
    color: var(--mse-nhs-blue);
    text-decoration: underline;
    text-underline-offset: 0.15em;
    font-weight: 600;
}

.mse-appraisal-community-page a:hover {
    color: var(--mse-nhs-dark-blue);
    text-decoration-thickness: 0.15em;
}

.mse-appraisal-community-page a:focus {
    outline: 0.2rem solid var(--mse-nhs-focus);
    outline-offset: 0.15rem;
}

.mse-appraisal-next {
    margin-top: 1.5rem !important;
    padding-top: 1rem;
    border-top: 1px solid var(--mse-nhs-border);
    color: var(--mse-nhs-muted) !important;
}

.mse-appraisal-next strong {
    color: var(--mse-nhs-text);
}

.mse-appraisal-community-page img {
    max-width: 100%;
}

.mse-appraisal-community-page p:last-child {
    margin-bottom: 0;
}

@media (max-width: 768px) {
    .mse-appraisal-community-page {
        max-width: 100%;
        padding: 0 0.75rem 1.5rem 0.75rem;
        font-size: 18px;
    }

    .mse-appraisal-hero__image {
        height: 8.5rem;
        border-radius: 0.5rem;
    }

    .mse-appraisal-content h2 {
        font-size: 1.35rem;
    }

    .mse-appraisal-content p,
    .mse-appraisal-content li,
    .mse-appraisal-content a {
        font-size: 18px;
    }

    .mse-appraisal-links {
        padding: 0.9rem 1rem;
    }
}

/* =========================================================
   MSE New Starter Dashboard
   Scope: current HTML using .mse-ns-dashboard and .mse-ns-* selectors
   Placement: final user-created CSS block, after retained supplier/admin CSS.
   ========================================================= */
.mse-ns-dashboard {
    --mse-nhs-blue: #005eb8;
    --mse-nhs-dark-blue: #003087;
    --mse-card-green: rgba(0, 94, 73, 0.94);
    --mse-white: #ffffff;
    --mse-text: #212b32;
    --mse-muted: #4c6272;
    --mse-border: #d8dde2;
    --mse-focus: #ffdd00;
    --mse-radius-large: 1.5rem;
    --mse-radius-card: 1.25rem;
    --mse-shadow-soft: 0 8px 22px rgba(0, 0, 0, 0.14);
    --mse-shadow-hover: 0 12px 28px rgba(0, 0, 0, 0.2);
    --mse-gap: clamp(1rem, 2vw, 1.5rem);

    width: 100%;
    color: var(--mse-text);
    font-family: inherit;
    overflow: visible !important;
}

.mse-ns-dashboard *,
.mse-ns-dashboard *::before,
.mse-ns-dashboard *::after {
    box-sizing: border-box;
}

.mse-ns-dashboard__inner {
    max-width: 1040px;
    margin: 0 auto;
    padding: 1rem;
    overflow: visible !important;
}

.mse-ns-mobile-logo {
    display: none !important;
}

.mse-ns-dashboard .mse-ns-hero {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: clamp(9rem, 20vw, 13.5rem) !important;
    min-height: 0 !important;
    max-height: 13.5rem !important;
    margin: 0 0 clamp(1.25rem, 2.5vw, 2rem) !important;
    overflow: hidden !important;
    border: none !important;
    border-radius: var(--mse-radius-large) !important;
    background: var(--mse-nhs-blue) !important;
    box-shadow: none !important;
    color: var(--mse-white) !important;
    text-decoration: none !important;
    isolation: isolate;
}

.mse-ns-dashboard .mse-ns-hero > img {
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: contain !important;
    object-position: center center !important;
    transform: translateY(0.6rem) !important;
}

.mse-ns-hero::after {
    content: none !important;
    display: none !important;
}

.mse-ns-dashboard .mse-ns-hero__logo-badge {
    position: absolute !important;
    top: 0.25rem !important;
    right: 0 !important;
    left: auto !important;
    bottom: auto !important;
    z-index: 40 !important;
    width: 250px !important;
    height: 82px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    transform: none !important;
    pointer-events: none !important;
}

.mse-ns-dashboard .mse-ns-hero__logo-img {
    position: static !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    display: block !important;
    object-fit: contain !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.mse-ns-dashboard .mse-ns-hero__content {
    position: absolute !important;
    z-index: 20 !important;
    top: 50% !important;
    left: 47% !important;
    transform: translate(-50%, -50%) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    max-width: 52% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    color: #ffffff !important;
    text-align: center !important;
    pointer-events: none !important;
}

.mse-ns-hero__eyebrow,
.mse-ns-hero__action {
    display: block !important;
    width: auto !important;
    max-width: 100% !important;
    background: transparent !important;
    color: #ffffff !important;
    text-align: center !important;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.45);
}

.mse-ns-hero__eyebrow {
    font-size: clamp(0.85rem, 1.5vw, 1rem);
    line-height: 1.2;
    font-weight: 500;
}

.mse-ns-hero__action {
    margin-top: clamp(0.85rem, 2vw, 1.1rem);
    font-size: clamp(1.05rem, 2.2vw, 1.45rem);
    line-height: 1.2;
    font-weight: 700;
}

.mse-ns-card-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--mse-gap);
    overflow: visible !important;
}

.mse-ns-card {
    position: relative;
    display: block;
    min-height: 12rem;
    overflow: hidden;
    padding: 0 !important;
    border: 1px solid rgba(0, 94, 184, 0.12);
    border-radius: var(--mse-radius-card);
    background: #eef4f8;
    box-shadow: 0 5px 16px rgba(0, 0, 0, 0.12);
    text-decoration: none;
    color: var(--mse-white);
    --mse-img-hover-scale: 1;
}

.mse-ns-card:hover,
.mse-ns-card:focus-visible,
.mse-ns-hero:hover,
.mse-ns-hero:focus-visible {
    box-shadow: var(--mse-shadow-hover);
    transform: translateY(-1px);
    text-decoration: none !important;
}

.mse-ns-card--large {
    grid-column: span 3;
}

.mse-ns-card--small {
    grid-column: span 2;
}

@media (min-width: 641px) {
    .mse-ns-card-grid .mse-ns-card--large {
        aspect-ratio: 1 / 1 !important;
        min-height: 0 !important;
        width: 60% !important;
        justify-self: center !important;
    }

    .mse-ns-card-grid .mse-ns-card--small {
        aspect-ratio: 16 / 8 !important;
        min-height: 0 !important;
        width: 90% !important;
        justify-self: center !important;
    }
}

.mse-ns-card > img,
.mse-ns-card picture,
.mse-ns-card picture img {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: cover !important;
    object-position: center center !important;
    transform: none !important;
    transition: transform 180ms ease;
}

.mse-ns-card-grid .mse-ns-card--small > img {
    object-position: center top !important;
}

.mse-ns-card__title {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 5;
    min-height: 2.35rem !important;
    height: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0.4rem 0.75rem !important;
    background: var(--mse-card-green);
    color: var(--mse-white);
    font-weight: 700;
    line-height: 1.1 !important;
    text-align: center !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
}

.mse-ns-card--large .mse-ns-card__title {
    font-size: clamp(1rem, 1.3vw, 1.12rem) !important;
}

.mse-ns-card--small .mse-ns-card__title {
    font-size: clamp(0.9rem, 1.15vw, 1rem) !important;
}

@media (min-width: 641px) {
    .mse-ns-card--intranet .mse-ns-card__body {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 4 !important;
        display: block !important;
        padding: 0.9rem 1rem 4rem !important;
        color: #003087 !important;
        font-size: 0.95rem !important;
        line-height: 1.25 !important;
        font-weight: 700 !important;
        text-align: left !important;
        background: transparent !important;
        text-shadow: none !important;
    }
}

.mse-ns-hero:focus,
.mse-ns-hero:focus-visible,
.mse-ns-card:focus,
.mse-ns-card:focus-visible {
    outline: 4px solid #ffdd00 !important;
    outline-offset: 4px !important;
    box-shadow: 0 0 0 2px #212b32, 0 8px 20px rgba(33, 43, 50, 0.22) !important;
    text-decoration: none !important;
}

.mse-ns-hero:focus img,
.mse-ns-card:focus img,
.mse-ns-hero:focus-visible img,
.mse-ns-card:focus-visible img,
.mse-ns-card:focus .mse-ns-card__title,
.mse-ns-card:focus-visible .mse-ns-card__title {
    outline: none !important;
    box-shadow: none !important;
}

@media (max-width: 900px) {
    .mse-ns-dashboard__inner {
        max-width: 760px;
    }

    .mse-ns-card-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .mse-ns-card--large,
    .mse-ns-card--small {
        grid-column: span 1;
    }
}

@media (max-width: 640px) {
    .mse-ns-dashboard__inner {
        padding: 0.75rem;
    }

    .mse-ns-mobile-logo {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        margin: 0 0 0.65rem 0 !important;
        padding: 0 !important;
    }

    .mse-ns-mobile-logo img {
        display: block !important;
        width: 145px !important;
        max-width: 42% !important;
        height: auto !important;
        margin: 0 auto !important;
        padding: 0 !important;
        object-fit: contain !important;
    }

    .mse-ns-dashboard .mse-ns-hero {
        height: 5rem !important;
        min-height: 5rem !important;
        max-height: 5rem !important;
        margin-bottom: 1rem !important;
        border-radius: 1rem !important;
    }

    .mse-ns-dashboard .mse-ns-hero > img {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
        object-position: center center !important;
        transform: none !important;
    }

    .mse-ns-dashboard .mse-ns-hero__logo-badge {
        display: none !important;
    }

    .mse-ns-dashboard .mse-ns-hero__content {
        left: 47% !important;
        top: 50% !important;
        max-width: 52% !important;
        transform: translate(-50%, -50%) !important;
        text-align: center !important;
    }

    .mse-ns-dashboard .mse-ns-hero__eyebrow {
        display: none !important;
    }

    .mse-ns-dashboard .mse-ns-hero__action {
        display: block !important;
        margin: 0 auto !important;
        font-size: 0.82rem !important;
        line-height: 1.1 !important;
        font-weight: 700 !important;
        text-align: center !important;
        color: #ffffff !important;
        text-shadow: 0 2px 5px rgba(0, 0, 0, 0.45);
    }

    .mse-ns-card-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .mse-ns-card-grid .mse-ns-card--large {
        aspect-ratio: 1 / 1 !important;
        min-height: 0 !important;
        width: 80% !important;
        justify-self: center !important;
    }

    .mse-ns-card-grid .mse-ns-card--small {
        aspect-ratio: 14 / 7 !important;
        min-height: 0 !important;
        width: 80% !important;
        justify-self: center !important;
    }

    .mse-ns-card--intranet .mse-ns-card__body {
        display: none !important;
    }

    .mse-ns-card__title {
        min-height: 2.25rem !important;
        padding: 0.35rem 0.75rem !important;
        font-size: 0.95rem !important;
        line-height: 1.1 !important;
    }

    .mse-ns-card--large .mse-ns-card__title {
        font-size: 1rem !important;
    }

    .mse-ns-card--small .mse-ns-card__title {
        font-size: 0.92rem !important;
    }
}

@media (max-width: 390px) {
    .mse-ns-dashboard__inner {
        padding: 0.5rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mse-ns-hero,
    .mse-ns-card,
    .mse-ns-card img {
        transition: none !important;
        transform: none !important;
    }

    .mse-ns-card:hover img,
    .mse-ns-card:focus-visible img {
        transform: none !important;
    }
}
/* =========================================================
  VALUES IMAGE ROW — New Starter Dashboard
  Controls size and centring of the Excellent / Compassionate / Respectful image
  ========================================================= */

.values-row {
 width: 100% !important;
 max-width: 760px !important;
 display: flex !important;
 justify-content: center !important;
 align-items: center !important;
 margin: 1.5rem auto 0 auto !important;
 padding: 0 !important;
 text-align: center !important;
}

.values-row__image {
 display: block !important;
 width: 100% !important;
 max-width: 620px !important;
 height: auto !important;
 margin: 0 auto !important;
}
/* =========================================================
  MSE DESIGN SYSTEM — STAGE 2 GENERIC CLASS LAYER
  Added underneath existing custom CSS.
  This layer should not affect existing pages until the new
  .mse-* classes are applied in Totara HTML.
  ========================================================= */


/* =========================================================
  00. DESIGN TOKENS
  Shared MSE / NHS values used by the reusable classes.
  ========================================================= */

:root {
   --mse-blue: #005EB8;
   --mse-dark-blue: #003087;
   --mse-teal: #00A499;
   --mse-green: #007F3B;
   --mse-text: #212B32;
   --mse-muted: #425563;
   --mse-grey-5: #F0F4F5;
   --mse-grey-4: #D8DDE0;
   --mse-grey-3: #AEB7BD;
   --mse-white: #FFFFFF;
   --mse-focus: #FFDD00;

   --mse-radius-small: 0.45rem;
   --mse-radius-medium: 0.75rem;
   --mse-radius-large: 1.25rem;
   --mse-radius-pill: 999px;

   --mse-border-subtle: 1px solid var(--mse-grey-4);
   --mse-shadow-soft: 0 0.1rem 0.35rem rgba(0, 0, 0, 0.08);
   --mse-shadow-card: 0 5px 16px rgba(0, 0, 0, 0.12);
   --mse-shadow-card-hover: 0 10px 24px rgba(0, 0, 0, 0.18);

   --mse-space-xs: 0.25rem;
   --mse-space-sm: 0.5rem;
   --mse-space-md: 1rem;
   --mse-space-lg: 1.5rem;
   --mse-space-xl: 2rem;

   --mse-content-width: 52rem;
   --mse-dashboard-width: 1040px;
}


/* =========================================================
  01. BASE ACCESSIBILITY HELPERS
  Use sparingly inside custom MSE HTML.
  ========================================================= */

.mse-visually-hidden {
   position: absolute !important;
   width: 1px !important;
   height: 1px !important;
   padding: 0 !important;
   margin: -1px !important;
   overflow: hidden !important;
   clip: rect(0 0 0 0) !important;
   white-space: nowrap !important;
   border: 0 !important;
}

.mse-course a:focus,
.mse-dashboard a:focus,
.mse-panel a:focus,
.mse-search input:focus,
.mse-search button:focus,
.mse-card:focus,
.mse-card:focus-visible,
.mse-hero:focus,
.mse-hero:focus-visible {
   outline: 4px solid var(--mse-focus) !important;
   outline-offset: 3px !important;
   box-shadow: 0 0 0 2px var(--mse-text) !important;
}


/* =========================================================
  02. STATUS LABELS
  For ad-hoc database query HTML output and report labels.
  Example:
<span class="mse-status mse-status--success">Complete</span>
  ========================================================= */

.mse-status {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   min-width: 6.5rem;
   padding: 0.2rem 0.6rem;
   border: 1px solid transparent;
   border-radius: var(--mse-radius-pill);
   font-weight: 700;
   font-size: 0.9rem;
   line-height: 1.25;
   text-align: center;
   white-space: nowrap;
}

.mse-status--success {
   background: #D7F2DF;
   color: #005A30;
   border-color: #7BCF94;
}

.mse-status--warning {
   background: #FFF3CD;
   color: #594300;
   border-color: #E0B84B;
}

.mse-status--danger {
   background: #F8D7DA;
   color: #7A0011;
   border-color: #DC3545;
}

.mse-status--info {
   background: #E5F1FB;
   color: var(--mse-dark-blue);
   border-color: #7FB4DD;
}

.mse-status--neutral {
   background: var(--mse-grey-5);
   color: var(--mse-text);
   border-color: var(--mse-grey-4);
}

/* Optional squared RAG-style variant, only if needed */
.mse-status--rag {
   border-radius: var(--mse-radius-small);
}


/* =========================================================
  03. PANELS
  Reusable block/panel styling for course pages and dashboards.
  ========================================================= */

.mse-panel {
   background: var(--mse-white);
   color: var(--mse-text);
   border: var(--mse-border-subtle);
   border-radius: var(--mse-radius-medium);
   box-shadow: var(--mse-shadow-soft);
   overflow: hidden;
   margin: 0 0 var(--mse-space-md) 0;
}

.mse-panel__header {
   background: var(--mse-teal);
   color: var(--mse-white);
   padding: 0.45rem 0.75rem;
   font-weight: 700;
   line-height: 1.25;
}

.mse-panel__body {
   padding: 0.75rem;
}

/* Course navigation panel */
.mse-panel--nav {
   font-size: 0.9rem;
   line-height: 1.35;
}

/* Highlighted link panel */
.mse-panel--links {
   max-width: 48rem;
   padding: var(--mse-space-md) 1.25rem;
   background: var(--mse-grey-5);
   border-left: 0.35rem solid var(--mse-blue);
   border-radius: var(--mse-radius-small);
   box-shadow: none;
}

.mse-panel--links ul {
   margin: 0;
   padding-left: 1.25rem;
}

.mse-panel--links li {
   margin: 0.4rem 0;
   padding-left: 0.15rem;
}

/* Completion/status panel */
.mse-panel--status {
   max-width: 410px;
   padding: 0;
   box-shadow: none;
}

.mse-panel--status .mse-panel__header {
   background: var(--mse-teal);
}

.mse-panel--status .mse-panel__body {
   font-size: 0.9rem;
   line-height: 1.35;
}


/* =========================================================
  04. COURSE LAYOUTS
  Topic-format and Pathway-format course content wrappers.
  ========================================================= */

.mse-course {
   color: var(--mse-text);
   font-family: inherit;
   line-height: 1.6;
}

.mse-course *,
.mse-course *::before,
.mse-course *::after {
   box-sizing: border-box;
}

.mse-course--topic {
   width: 100%;
}

.mse-course--pathway {
   max-width: var(--mse-content-width);
   margin: 0 auto;
   padding: 0 1rem 2rem 1rem;
   font-size: 18px;
}

.mse-course-panel {
   width: 100%;
   max-width: none;
   margin: 0 0 var(--mse-space-lg) 0;
   padding: 0;
   box-sizing: border-box;
}

.mse-content {
   max-width: var(--mse-content-width);
   margin: 0;
   color: var(--mse-text);
}

.mse-content h2 {
   margin: 0 0 var(--mse-space-md) 0;
   color: var(--mse-text);
   font-size: 1.55rem;
   font-weight: 600;
   line-height: 1.25;
   letter-spacing: -0.01em;
}

.mse-content p {
   margin: 0 0 1.15rem 0;
   max-width: 72ch;
   color: var(--mse-text);
   font-size: inherit;
   line-height: 1.6;
}

.mse-content li,
.mse-content a {
   font-size: inherit;
   line-height: 1.6;
}

.mse-course a,
.mse-content a {
   color: var(--mse-blue);
   text-decoration: underline;
   text-underline-offset: 0.15em;
   font-weight: 600;
}

.mse-course a:hover,
.mse-content a:hover {
   color: var(--mse-dark-blue);
   text-decoration-thickness: 0.15em;
}

.mse-course img,
.mse-content img {
   max-width: 100%;
   height: auto;
}

.mse-next-step {
   margin-top: var(--mse-space-lg) !important;
   padding-top: var(--mse-space-md);
   border-top: 1px solid var(--mse-grey-4);
   color: var(--mse-muted) !important;
}

.mse-next-step strong {
   color: var(--mse-text);
}


/* =========================================================
  05. HERO / BANNER COMPONENTS
  Reusable course and dashboard hero areas.
  ========================================================= */

.mse-hero {
   position: relative;
   display: block;
   width: 100%;
   overflow: hidden;
   border-radius: var(--mse-radius-medium);
   background: var(--mse-blue);
   color: var(--mse-white);
   text-decoration: none;
}

.mse-hero--course {
   max-width: var(--mse-content-width);
   margin: 0 0 1.25rem 0;
}

.mse-hero--dashboard {
   margin: 0 0 clamp(1.25rem, 2.5vw, 2rem) 0;
   border-radius: var(--mse-radius-large);
}

.mse-hero__image {
   display: block;
   width: 100%;
   height: 11rem;
   object-fit: cover;
   object-position: center;
   border-radius: inherit;
}

.mse-hero__content {
   position: absolute;
   z-index: 2;
   top: 50%;
   left: 50%;
   max-width: 60%;
   transform: translate(-50%, -50%);
   color: var(--mse-white);
   text-align: center;
   pointer-events: none;
}

.mse-hero__eyebrow,
.mse-hero__action {
   display: block;
   color: var(--mse-white);
   text-align: center;
   text-shadow: 0 2px 5px rgba(0, 0, 0, 0.45);
}

.mse-hero__eyebrow {
   font-size: clamp(0.85rem, 1.5vw, 1rem);
   line-height: 1.2;
   font-weight: 500;
}

.mse-hero__action {
   margin-top: clamp(0.85rem, 2vw, 1.1rem);
   font-size: clamp(1.05rem, 2.2vw, 1.45rem);
   line-height: 1.2;
   font-weight: 700;
}

.mse-hero__logo {
   position: absolute;
   z-index: 3;
   top: 0.25rem;
   right: 0;
   width: 250px;
   height: 82px;
   display: flex;
   align-items: center;
   justify-content: center;
   pointer-events: none;
}

.mse-hero__logo-img {
   display: block;
   width: 100%;
   height: 100%;
   object-fit: contain;
}

/* =========================================================
  COURSE HERO — NATURAL IMAGE RATIO
  Use when a course banner image should fill the wrapper exactly
  and the wrapper should follow the image's own proportions.
  ========================================================= */

.mse-hero--image-banner {
   max-width: var(--mse-content-width) !important;
   margin: 0 0 1.25rem 0 !important;
   padding: 0 !important;
   background: transparent !important;
   border-radius: var(--mse-radius-medium) !important;
   overflow: hidden !important;
   line-height: 0 !important;
}

.mse-hero--image-banner .mse-hero__image {
   display: block !important;
   width: 100% !important;
   height: auto !important;
   max-width: 100% !important;
   margin: 0 !important;
   padding: 0 !important;
   object-fit: unset !important;
   object-position: center center !important;
   border-radius: inherit !important;
}
/* =========================================================
  06. DASHBOARDS, CARDS AND CARD GRIDS
  Dashboard wrappers and reusable linked cards.
  ========================================================= */

.mse-dashboard {
   width: 100%;
   color: var(--mse-text);
   font-family: inherit;
   overflow: visible !important;
}

.mse-dashboard *,
.mse-dashboard *::before,
.mse-dashboard *::after {
   box-sizing: border-box;
}

.mse-dashboard__inner {
   max-width: var(--mse-dashboard-width);
   margin: 0 auto;
   padding: var(--mse-space-md);
   overflow: visible !important;
}

.mse-dashboard__mobile-logo {
   display: none !important;
}

.mse-card-grid {
   display: grid;
   grid-template-columns: repeat(6, 1fr);
   gap: clamp(1rem, 2vw, 1.5rem);
   overflow: visible !important;
}

.mse-card {
   position: relative;
   display: block;
   min-height: 12rem;
   overflow: hidden;
   padding: 0 !important;
   border: 1px solid rgba(0, 94, 184, 0.12);
   border-radius: var(--mse-radius-large);
   background: #EEF4F8;
   box-shadow: var(--mse-shadow-card);
   text-decoration: none !important;
   color: var(--mse-white);
}

.mse-card:hover,
.mse-card:focus-visible,
.mse-hero:hover,
.mse-hero:focus-visible {
   box-shadow: var(--mse-shadow-card-hover);
   transform: translateY(-1px);
   text-decoration: none !important;
}

.mse-card--large {
   grid-column: span 3;
}

.mse-card--small {
   grid-column: span 2;
}

.mse-card__image,
.mse-card > img,
.mse-card picture,
.mse-card picture img {
   position: absolute !important;
   inset: 0 !important;
   display: block !important;
   width: 100% !important;
   height: 100% !important;
   min-width: 100% !important;
   min-height: 100% !important;
   max-width: none !important;
   max-height: none !important;
   margin: 0 !important;
   padding: 0 !important;
   object-fit: cover !important;
   object-position: center center !important;
}

.mse-card__title {
   position: absolute;
   right: 0;
   bottom: 0;
   left: 0;
   z-index: 2;
   min-height: 2.35rem !important;
   display: flex !important;
   align-items: center !important;
   justify-content: center !important;
   padding: 0.4rem 0.75rem !important;
   background: rgba(0, 94, 73, 0.94);
   color: var(--mse-white);
   font-weight: 700;
   line-height: 1.1 !important;
   text-align: center !important;
   white-space: normal !important;
   overflow-wrap: anywhere !important;
}

.mse-card--large .mse-card__title {
   font-size: clamp(1rem, 1.3vw, 1.12rem) !important;
}

.mse-card--small .mse-card__title {
   font-size: clamp(0.9rem, 1.15vw, 1rem) !important;
}

.mse-card--text-overlay .mse-card__body {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   z-index: 2;
   padding: 0.9rem 1rem 4rem;
   color: var(--mse-dark-blue);
   font-size: 0.95rem;
   line-height: 1.25;
   font-weight: 700;
   text-align: left;
}


/* =========================================================
Compact branded Search Elevate block
  Generic reusable version.
  Use block class: mse-search mse-search--compact
  If Totara only accepts one class, use: mse-search--compact
  ========================================================= */

.mse-search,
.mse-search--compact {
   background: var(--mse-white);
   color: var(--mse-text);
}

.mse-search--compact {
   max-width: 430px !important;
   margin: 0 0 1.25rem 0 !important;
}

.mse-search--compact .card,
.mse-search--compact .block,
.mse-search--compact .block-content,
.mse-search--compact .card-body {
   border-radius: 1rem !important;
   border: 1px solid #D8DDE6 !important;
   background: var(--mse-white) !important;
   box-shadow: var(--mse-shadow-soft);
}

.mse-search--compact .card-body,
.mse-search--compact .block-content {
   padding: 0.9rem 1rem !important;
}

.mse-search--compact h2,
.mse-search--compact .card-title,
.mse-search--compact .block-title {
   font-size: 1rem !important;
   font-weight: 700 !important;
   color: var(--mse-dark-blue) !important;
   margin-bottom: 0.5rem !important;
}

.mse-search--compact form {
   display: flex !important;
   align-items: center !important;
   gap: 0.5rem !important;
   margin: 0 !important;
}

.mse-search--compact input[type="search"],
.mse-search--compact input[type="text"] {
   flex: 1 1 auto !important;
   min-width: 0 !important;
   height: 2.4rem !important;
   border: 2px solid var(--mse-muted) !important;
   border-radius: 0.65rem !important;
   padding: 0.35rem 0.6rem !important;
   font-size: 0.95rem !important;
}

.mse-search--compact button,
.mse-search--compact input[type="submit"] {
   height: 2.4rem !important;
   border-radius: 0.65rem !important;
   background: var(--mse-blue) !important;
   color: var(--mse-white) !important;
   border: 2px solid var(--mse-blue) !important;
   font-weight: 700 !important;
   padding: 0.35rem 0.85rem !important;
}

.mse-search--compact button:hover,
.mse-search--compact input[type="submit"]:hover {
   background: var(--mse-dark-blue) !important;
   border-color: var(--mse-dark-blue) !important;
}

.mse-search--compact input:focus,
.mse-search--compact button:focus,
.mse-search--compact input[type="submit"]:focus {
   outline: 4px solid var(--mse-focus) !important;
   outline-offset: 3px !important;
   box-shadow: 0 0 0 2px var(--mse-text) !important;
}

.mse-search--compact a {
   font-size: 0.85rem !important;
   color: var(--mse-blue);
   text-decoration: underline;
   text-underline-offset: 0.15em;
   font-weight: 600;
}

.mse-search--compact a:hover {
   color: var(--mse-dark-blue);
   text-decoration-thickness: 0.15em;
}

/* =========================================================
  08. IMAGE ROWS
  For values images or other centred visual rows.
  ========================================================= */

.mse-image-row {
   width: 100% !important;
   max-width: 760px !important;
   display: flex !important;
   justify-content: center !important;
   align-items: center !important;
   margin: 1.5rem auto 0 auto !important;
   padding: 0 !important;
   text-align: center !important;
}

/* Values banner variant */
.mse-image-row--values {
   max-width: 760px !important;
}

.mse-image-row__image,
.mse-image-row img {
   display: block !important;
   width: 100% !important;
   max-width: 620px !important;
   height: auto !important;
   margin: 0 auto !important;
}

/* =========================================================
  09. RESPONSIVE RULES
  Generic responsive behaviour for new reusable classes.
  ========================================================= */

@media (min-width: 641px) {
   .mse-card-grid .mse-card--large {
       aspect-ratio: 1 / 1 !important;
       min-height: 0 !important;
       width: 60% !important;
       justify-self: center !important;
   }

   .mse-card-grid .mse-card--small {
       aspect-ratio: 16 / 8 !important;
       min-height: 0 !important;
       width: 90% !important;
       justify-self: center !important;
   }
}

@media (max-width: 900px) {
   .mse-dashboard__inner {
       max-width: 760px;
   }

   .mse-card-grid {
       grid-template-columns: repeat(2, 1fr);
   }

   .mse-card--large,
   .mse-card--small {
       grid-column: span 1;
   }
}

@media (max-width: 768px) {
   .mse-course--pathway {
       max-width: 100%;
       padding: 0 0.75rem 1.5rem 0.75rem;
       font-size: 18px;
   }

   .mse-hero--course .mse-hero__image {
       height: 8.5rem;
   }

   .mse-content h2 {
       font-size: 1.35rem;
   }

   .mse-panel--links {
       padding: 0.9rem 1rem;
   }
}

@media (max-width: 640px) {
   .mse-dashboard__inner {
       padding: 0.75rem;
   }

   .mse-dashboard__mobile-logo {
       display: flex !important;
       justify-content: center !important;
       align-items: center !important;
       width: 100% !important;
       margin: 0 0 0.65rem 0 !important;
       padding: 0 !important;
   }

   .mse-card-grid {
       grid-template-columns: 1fr;
       gap: 1rem;
   }

   .mse-card-grid .mse-card--large {
       aspect-ratio: 1 / 1 !important;
       min-height: 0 !important;
       width: 80% !important;
       justify-self: center !important;
   }

   .mse-card-grid .mse-card--small {
       aspect-ratio: 14 / 7 !important;
       min-height: 0 !important;
       width: 80% !important;
       justify-self: center !important;
   }

   .mse-card--text-overlay .mse-card__body {
       display: none !important;
   }

   .mse-card__title {
       min-height: 2.25rem !important;
       padding: 0.35rem 0.75rem !important;
       font-size: 0.95rem !important;
       line-height: 1.1 !important;
   }

   .mse-card--large .mse-card__title {
       font-size: 1rem !important;
   }

   .mse-card--small .mse-card__title {
       font-size: 0.92rem !important;
   }

   .mse-hero__content {
       max-width: 70%;
   }

   .mse-hero__eyebrow {
       display: none !important;
   }

   .mse-hero__action {
       margin: 0 auto !important;
       font-size: 0.85rem !important;
       line-height: 1.1 !important;
   }
}

@media (max-width: 390px) {
   .mse-dashboard__inner {
       padding: 0.5rem;
   }
}

@media (prefers-reduced-motion: reduce) {
   .mse-card,
   .mse-card:hover,
   .mse-card:focus-visible,
   .mse-hero,
   .mse-hero:hover,
   .mse-hero:focus-visible,
   .mse-card__image,
   .mse-card img {
       transition: none !important;
       transform: none !important;
   }
}


/* =========================================================
  10. TOTARA-SPECIFIC EXCEPTIONS — RESERVED
  Do not add anything here yet.
  This section will be used later only for unavoidable
  course IDs, module IDs, block IDs, or native Totara fixes.
  ========================================================= */
/* Pathway course heading spacing */
.mse-course--pathway .mse-content h2 {
 margin-top: 1.5rem;
 margin-bottom: 0.5rem;
}
.mse-course--pathway .mse-content h2:first-child {
 margin-top: 0;
}
/* Pathway course support panel */
.mse-course--pathway .mse-panel--links {
 border-top: 1px solid var(--mse-grey-3);
 border-right: 1px solid var(--mse-grey-3);
 border-bottom: 1px solid var(--mse-grey-3);
}
/* Reduce banner height at narrow viewport widths and higher zoom */
@media (max-width: 48rem) {
 .mse-course--pathway .mse-hero--image-banner .mse-hero__image {
   max-height: 18rem !important;
   object-fit: cover !important;
   object-position: center center !important;
 }
}
/* =========================================================
  TOPIC-FORMAT COURSE LAYOUT
  Generic replacement for Fire Safety course page/activity styling.
  Use inside HTML you control with:
  .mse-course .mse-course--topic
  ========================================================= */

.mse-course--topic {
   width: 100%;
   max-width: none;
   margin: 0;
   padding: 0;
   color: var(--mse-text);
   text-align: left;
}

.mse-course--topic .mse-course-panel {
   width: 100% !important;
   max-width: none !important;
   margin: 0 0 var(--mse-space-lg) 0 !important;
   padding: 0 !important;
   box-sizing: border-box !important;
   text-align: left !important;
}

.mse-course--topic .mse-content {
   width: 100%;
   max-width: none;
   margin: 0;
   color: var(--mse-text);
   text-align: left;
}

.mse-course--topic .mse-content h2 {
   margin: 0 0 var(--mse-space-md) 0;
   color: var(--mse-text);
   font-size: 1.55rem;
   font-weight: 600;
   line-height: 1.25;
}

.mse-course--topic .mse-content p {
   margin: 0 0 1rem 0;
   max-width: 72ch;
   color: var(--mse-text);
   font-size: 1rem;
   line-height: 1.6;
}

.mse-course--topic .mse-content ul,
.mse-course--topic .mse-content ol {
   margin: 0 0 1rem 1.25rem;
   padding-left: 1rem;
}

.mse-course--topic .mse-content li {
   margin: 0.35rem 0;
   line-height: 1.5;
}


/* =========================================================
  TOPIC-FORMAT TWO-COLUMN PANEL
  Use where a Topic-format course page needs main content
  and a right-hand guidance/action panel.
  ========================================================= */

.mse-course-layout {
   display: flex;
   gap: var(--mse-space-lg);
   align-items: flex-start;
   width: 100%;
   max-width: none;
}

.mse-course-layout__main {
   flex: 1 1 auto;
   min-width: 0;
}

.mse-course-layout__aside {
   flex: 0 0 260px;
   min-width: 220px;
}

@media (max-width: 900px) {
   .mse-course-layout {
       display: block;
   }

   .mse-course-layout__main,
   .mse-course-layout__aside {
       width: 100%;
       min-width: 0;
       margin-bottom: var(--mse-space-md);
   }
}


/* =========================================================
  TOPIC-FORMAT COURSE NAVIGATION PANEL
  Generic replacement for .mse-fire-course-nav.
  ========================================================= */

.mse-panel--course-nav,
.mse-panel--nav {
   background: var(--mse-white);
   border: 1px solid #D9E0EA;
   border-radius: var(--mse-radius-medium);
   box-shadow: var(--mse-shadow-soft);
   overflow: hidden;
   font-size: 0.9rem;
   line-height: 1.35;
}

.mse-panel--course-nav .card,
.mse-panel--course-nav .block,
.mse-panel--course-nav .block-cards,
.mse-panel--nav .card,
.mse-panel--nav .block,
.mse-panel--nav .block-cards {
   border: 0 !important;
   box-shadow: none !important;
}

.mse-panel--course-nav .card-body,
.mse-panel--course-nav .content,
.mse-panel--course-nav .block-content,
.mse-panel--nav .card-body,
.mse-panel--nav .content,
.mse-panel--nav .block-content {
   padding: 0.65rem 0.75rem !important;
}
/* =========================================================
  TOPIC-FORMAT COURSE NAV PANEL CONTENT
  Supports left-column course information/contact blocks.
  ========================================================= */

.mse-panel--course-nav .mse-panel__body,
.mse-panel--nav .mse-panel__body {
   padding: 0.75rem !important;
}

.mse-panel--course-nav p,
.mse-panel--nav p {
   margin: 0 0 0.75rem 0;
}

.mse-panel--course-nav p:last-child,
.mse-panel--nav p:last-child {
   margin-bottom: 0;
}

.mse-panel--course-nav img,
.mse-panel--nav img {
   display: block;
   max-width: 100%;
   height: auto;
   margin: 0 0 0.75rem 0;
   border-radius: var(--mse-radius-small);
}

.mse-panel--course-nav hr,
.mse-panel--nav hr {
   border: 0;
   border-top: 1px solid #D9E0EA;
   margin: 0.75rem 0;
}

.mse-panel--course-nav a,
.mse-panel--nav a {
   color: var(--mse-blue);
   text-decoration: underline;
   text-underline-offset: 0.15em;
   font-weight: 600;
}

.mse-panel--course-nav a:hover,
.mse-panel--nav a:hover {
   color: var(--mse-dark-blue);
   text-decoration-thickness: 0.15em;
}
 
/* =========================================================
  NEW STARTER DASHBOARD HERO LOGO FIX
  Keeps the white Trust logo fixed and contained in the
  top-right corner of the dashboard hero/banner.
  ========================================================= */

.mse-hero--new-starter {
   position: relative !important;
   height: clamp(9rem, 20vw, 13.5rem) !important;
   min-height: 0 !important;
   max-height: 13.5rem !important;
   overflow: hidden !important;
   border-radius: var(--mse-radius-large) !important;
   background: var(--mse-blue) !important;
}

.mse-hero--new-starter > .mse-hero__image,
.mse-hero--new-starter > img {
   position: absolute !important;
   inset: 0 !important;
   z-index: 1 !important;
   display: block !important;
   width: 100% !important;
   height: 100% !important;
   max-width: none !important;
   max-height: none !important;
   margin: 0 !important;
   padding: 0 !important;
   object-fit: contain !important;
   object-position: center center !important;
}

.mse-hero--new-starter .mse-hero__logo {
   position: absolute !important;
   top: 0.25rem !important;
   right: 0 !important;
   left: auto !important;
   bottom: auto !important;
   z-index: 4 !important;
   width: 250px !important;
   height: 82px !important;
   display: flex !important;
   align-items: center !important;
   justify-content: center !important;
   background: transparent !important;
   border-radius: 0 !important;
   padding: 0 !important;
   margin: 0 !important;
   box-sizing: border-box !important;
   transform: none !important;
   pointer-events: none !important;
}

.mse-hero--new-starter .mse-hero__logo-img,
.mse-hero--new-starter .mse-hero__logo img {
   position: static !important;
   display: block !important;
   width: 100% !important;
   height: 100% !important;
   max-width: 100% !important;
   max-height: 100% !important;
   min-width: 0 !important;
   min-height: 0 !important;
   margin: 0 !important;
   padding: 0 !important;
   object-fit: contain !important;
   object-position: center center !important;
   transform: none !important;
   opacity: 1 !important;
   visibility: visible !important;
}

/* Keep the logo hidden on mobile if you are using the separate mobile logo above the banner */
@media (max-width: 640px) {
   .mse-hero--new-starter {
       height: 5rem !important;
       min-height: 5rem !important;
       max-height: 5rem !important;
       margin-bottom: 1rem !important;
       border-radius: 1rem !important;
   }

   .mse-hero--new-starter .mse-hero__logo {
       display: none !important;
   }

   .mse-hero--new-starter .mse-hero__content {
       left: 47% !important;
       top: 50% !important;
       max-width: 52% !important;
       transform: translate(-50%, -50%) !important;
       text-align: center !important;
   }
}





/* =========================================================

   REQUIRED LEARNING DONUT — SAFE CENTRING AND ALIGNMENT

   Does not distort the canvas aspect ratio.

   ========================================================= */

#inst6677 {

    width: 100% !important;

    margin: 0 auto !important;

    padding: 0 !important;

    text-align: center !important;

}

/* Centre the block content */

#inst6677 .content,

#inst6677 .block-content,

#inst6677 center {

    width: 100% !important;

    margin-left: auto !important;

    margin-right: auto !important;

    padding: 0 !important;

    text-align: center !important;

}

/* Preserve the chart’s natural proportions */

#inst6677 canvas#CLSmyDonutChart6677 {

    display: block !important;

    width: auto !important;

    height: auto !important;

    max-width: 250px !important;

    max-height: 250px !important;

    margin: 0 auto !important;

    padding: 0 !important;

}

/* Move the whole block without resizing the chart */

#inst6677 {

    transform: translateY(2.25rem) !important;

}
 /* =========================================================
  REQUIRED LEARNING TITLE-ONLY HTML BLOCK
  ========================================================= */
.mse-donut-title-block {
   width: 100%;
   margin: 0 auto;
   padding: 0;
   text-align: center;
}
.mse-donut-title-block__heading {
   margin: 0 0 0rem !important;
   padding: 0 !important;
   color: #0072CE !important;
   font-family: inherit !important;
   font-size: 21px !important;
   font-weight: 600 !important;
   line-height: 1.3 !important;
   text-align: center !important;
   background: transparent !important;
   border: 0 !important;
   box-shadow: none !important;
}
/* =========================================================
  REQUIRED LEARNING — TITLE AND DONUT GROUP
  ========================================================= */
/* Remove internal spacing from the title-only HTML */
.mse-donut-title-block {
   width: 100% !important;
   margin: 0 !important;
   padding: 0 !important;
   text-align: center !important;
}
.mse-donut-title-block__heading {
   margin: 0 !important;
   padding: 0 !important;
   color: #0072CE !important;
   font-family: inherit !important;
   font-size: 21px !important;
   font-weight: 600 !important;
   line-height: 1.3 !important;
   text-align: center !important;
   border: 0 !important;
   background: transparent !important;
}
/* Remove the HTML block's outer spacing */
#inst6720 {
   margin-bottom: 0 !important;
   padding-bottom: 0 !important;
}
#inst6720 .content,
#inst6720 .block-content,
#inst6720 .card-body {
   margin-bottom: 0 !important;
   padding-top: 0 !important;
   padding-bottom: 0 !important;
}
/* Donut block */
#inst6677 {
   margin-top: 0 !important;
   padding-top: 0 !important;
}
#inst6677 .content,
#inst6677 .block-content,
#inst6677 .card-body,
#inst6677 center {
   margin-top: 0 !important;
   padding-top: 0 !important;
}
/* =========================================================
  ALIGN RIGHT-HAND COMPLIANCE COLUMN
  ========================================================= */
/* Centre blocks within the right-side region */
#block-region-side-post {
   display: flex !important;
   flex-direction: column !important;
   align-items: center !important;
}
/* Move the title and donut group down together */
#inst6720 {
   margin-top: 5rem !important;
}
/* =========================================================
  LEARNER HOMEPAGE PROTOTYPE
  MANDATORY STATUS + PRIORITY ACTIONS
  Consolidated replacement styling.
  Mandatory status block: #inst6678
  ========================================================= */

/* ---------------------------------------------------------
  SHARED SECTION HEADINGS
  --------------------------------------------------------- */
#inst6678 h1,
.mse-wireframe-actions__heading
 {
   margin: 0 0 0.875rem !important;
   padding: 0 !important;
   color: #0072CE !important;
   font-family: inherit !important;
   font-size: 21px !important;
   font-weight: 600 !important;
   line-height: 1.3 !important;
   text-align: center !important;
   background: transparent !important;
   border: 0 !important;
   box-shadow: none !important;
}

/* =========================================================
  MANDATORY COURSE COMPLETIONS
  ========================================================= */

/* Centre the three native status links as one group */
#inst6678 .content > div[style*="text-align: center"] {
   display: flex !important;
   flex-wrap: wrap !important;
   justify-content: center !important;
   align-items: stretch !important;
   gap: 0.75rem !important;
   width: 100% !important;
   margin: 0 auto !important;
   padding: 0 !important;
   text-align: center !important;
}

/* Outer native links */
#inst6678 #cls_exp_custom,
#inst6678 #cls_due_custom,
#inst6678 #cls_cert_custom {
   display: block !important;
   flex: 0 0 13.5rem !important;
   width: 13.5rem !important;
   min-width: 13.5rem !important;
   max-width: 13.5rem !important;
   margin: 0 !important;
   padding: 0 !important;
   color: #ffffff !important;
   text-decoration: none !important;
}

/* Visible status cards */
#inst6678 #cls_exp_custom .cls-cert-compl-box-block,
#inst6678 #cls_due_custom .cls-cert-compl-box-block,
#inst6678 #cls_cert_custom .cls-cert-compl-box-block {
   display: grid !important;
   place-items: center !important;
   width: 13.5rem !important;
   height: 4.5rem !important;
   min-height: 4.5rem !important;
   margin: 0 !important;
   padding: 0.75rem 1rem !important;
   border: 0 !important;
   border-radius: 0.5rem !important;
   color: #ffffff !important;
   font-family: inherit !important;
   font-size: 1rem !important;
   font-weight: 600 !important;
   line-height: 1.3 !important;
   text-align: center !important;
   text-indent: 0 !important;
   box-sizing: border-box !important;
   transition:
       transform 160ms ease,
       box-shadow 160ms ease,
       filter 160ms ease !important;
}

/* Remove any decorative dots or generated content */
#inst6678 .cls-cert-compl-box-block::before,
#inst6678 .cls-cert-compl-box-block::after {
   content: none !important;
   display: none !important;
}

/* Remove inherited spacing from nested content */
#inst6678 .cls-cert-compl-box-block > * {
   width: auto !important;
   margin: 0 !important;
   padding: 0 !important;
   color: inherit !important;
   font: inherit !important;
   line-height: inherit !important;
   text-align: center !important;
   text-indent: 0 !important;
}

/* NHS status colours */
#inst6678 #cls_exp_custom .cls-cert-compl-box-block {
   background-color: #DA291C !important;
}
#inst6678 #cls_due_custom .cls-cert-compl-box-block {
   background-color: #ED8B00 !important;
}
#inst6678 #cls_cert_custom .cls-cert-compl-box-block {
   background-color: #007F3B !important;
}

/* Status hover */
#inst6678 #cls_exp_custom:hover .cls-cert-compl-box-block,
#inst6678 #cls_due_custom:hover .cls-cert-compl-box-block,
#inst6678 #cls_cert_custom:hover .cls-cert-compl-box-block {
   transform: translateY(-1px) !important;
   box-shadow: 0 0.15rem 0.4rem rgba(0, 0, 0, 0.12) !important;
   filter: brightness(0.92) !important;
}

/* Status keyboard focus */
#inst6678 #cls_exp_custom:focus,
#inst6678 #cls_exp_custom:focus-visible,
#inst6678 #cls_due_custom:focus,
#inst6678 #cls_due_custom:focus-visible,
#inst6678 #cls_cert_custom:focus,
#inst6678 #cls_cert_custom:focus-visible {
   outline: 4px solid #FFDD00 !important;
   outline-offset: 3px !important;
   box-shadow: 0 0 0 2px #212B32 !important;
}

/* =========================================================
  PRIORITY ACTIONS
  ========================================================= */
.mse-wireframe-actions {
   width: 100% !important;
   margin: 1.5rem auto 0 !important;
   padding: 0 !important;
   box-sizing: border-box !important;
}

/* Four centred cards */
.mse-wireframe-actions__grid {
   display: grid !important;
   grid-template-columns: repeat(4, 13.5rem) !important;
   justify-content: center !important;
   align-items: stretch !important;
   gap: 0.75rem !important;
   width: 100% !important;
   margin: 0 auto !important;
   padding: 0 !important;
}

/* Individual priority card */
.mse-wireframe-action {
   display: flex !important;
   align-items: center !important;
   justify-content: center !important;
   width: 13.5rem !important;
   min-height: 5.4rem !important;
   padding: 0.75rem 1rem !important;
   background: #ffffff !important;
   border: 2px solid #005EB8 !important;
   border-radius: 0.5rem !important;
   color: #0072CE !important;
   font-family: inherit !important;
   font-size: 1rem !important;
   font-weight: 600 !important;
   line-height: 1.3 !important;
   text-align: center !important;
   text-decoration: none !important;
   box-shadow: none !important;
   box-sizing: border-box !important;
   transition:
       background-color 160ms ease,
       border-color 160ms ease,
       color 160ms ease,
       transform 160ms ease,
       box-shadow 160ms ease !important;
}

/* Priority-card hover */
.mse-wireframe-action:hover {
   background: #E8F1F8 !important;
   border-color: #003087 !important;
   color: #003087 !important;
   text-decoration: none !important;
   transform: translateY(-1px) !important;
   box-shadow: 0 0.15rem 0.4rem rgba(0, 0, 0, 0.10) !important;
}

/* Priority-card keyboard focus */
.mse-wireframe-action:focus,
.mse-wireframe-action:focus-visible {
   background: #ffffff !important;
   border-color: #003087 !important;
   color: #003087 !important;
   text-decoration: none !important;
   outline: 4px solid #FFDD00 !important;
   outline-offset: 3px !important;
   box-shadow: 0 0 0 2px #212B32 !important;
}

/* =========================================================
  RESPONSIVE LAYOUT
  ========================================================= */
@media (max-width: 1100px) {
   .mse-wireframe-actions__grid {
       grid-template-columns: repeat(2, 13.5rem) !important;
   }
}

@media (max-width: 760px) {
   #inst6678 .content > div[style*="text-align: center"] {
       flex-direction: column !important;
       align-items: center !important;
   }
   #inst6678 #cls_exp_custom,
   #inst6678 #cls_due_custom,
   #inst6678 #cls_cert_custom,
   #inst6678 #cls_exp_custom .cls-cert-compl-box-block,
   #inst6678 #cls_due_custom .cls-cert-compl-box-block,
   #inst6678 #cls_cert_custom .cls-cert-compl-box-block {
       width: min(100%, 22rem) !important;
       max-width: 22rem !important;
       min-width: 0 !important;
   }
}

@media (max-width: 620px) {
   .mse-wireframe-actions__grid {
       grid-template-columns: minmax(0, 1fr) !important;
   }
   .mse-wireframe-action {
       width: 100% !important;
       min-height: 4.75rem !important;
   }
}
/* Replace 6719 with the actual Priority actions block ID */
#inst6719 {
   margin-bottom: 1.5rem !important;
   padding-bottom: 0 !important;
}
#inst6719 .content,
#inst6719 .block-content,
#inst6719 .card-body {
   margin-bottom: 0 !important;
   padding-bottom: 0 !important;
}
margin-bottom: 1.5rem !important;

/* =========================================================

   LEARNER HOMEPAGE — HELP AND SUPPORT PANEL

   Secondary support component

   ========================================================= */

.mse-learner-help {

    position: relative;

    width: 100%;

    max-width: 22rem;

    margin: 0 auto;

    padding: 1.25rem 1.25rem 1.25rem 1.5rem;

    background: #E8F1F8;

    border: 1px solid #D8DDE0;

    border-left: 0.35rem solid #005EB8;

    border-radius: 0.5rem;

    text-align: left;

    box-sizing: border-box;

}


/* Panel heading */

.mse-learner-help__heading {

    margin: 0 0 0.5rem;

    padding: 0;

    color: #003087;

    font-family: inherit;

    font-size: 1.25rem;

    font-weight: 600;

    line-height: 1.3;

    text-align: left;

}


/* Supporting text */

.mse-learner-help__intro {

    margin: 0 0 1rem;

    padding: 0;

    color: #212B32;

    font-size: 0.95rem;

    font-weight: 400;

    line-height: 1.5;

}


/* Link group */

.mse-learner-help__links {

    display: flex;

    flex-direction: column;

    gap: 0.625rem;

    width: 100%;

    margin: 0;

    padding: 0;

}


/* Secondary support links */

.mse-learner-help__link {

    display: flex;

    align-items: center;

    justify-content: flex-start;

    width: 100%;

    min-height: 2.75rem;

    padding: 0.625rem 0.875rem;

    background: #FFFFFF;

    border: 1px solid #005EB8;

    border-radius: 0.5rem;

    color: #003087 !important;

    font-family: inherit;

    font-size: 0.95rem;

    font-weight: 600;

    line-height: 1.3;

    text-align: left;

    text-decoration: none !important;

    box-sizing: border-box;

    cursor: pointer;

    transition:

        background-color 160ms ease,

        border-color 160ms ease,

        transform 160ms ease,

        box-shadow 160ms ease;

}


/* Add a subtle directional cue */

.mse-learner-help__link::after {

    content: "›";

    margin-left: auto;

    color: #005EB8;

    font-size: 1.25rem;

    font-weight: 600;

    line-height: 1;

}


/* Hover */

.mse-learner-help__link:hover {

    background: #FFFFFF;

    border-color: #003087;

    color: #003087 !important;

    text-decoration: none !important;

    transform: translateY(-1px);

    box-shadow: 0 0.15rem 0.35rem rgba(0, 0, 0, 0.10);

}


/* Keyboard focus */

.mse-learner-help__link:focus,

.mse-learner-help__link:focus-visible {

    outline: 4px solid #FFDD00 !important;

    outline-offset: 3px;

    box-shadow: 0 0 0 2px #212B32 !important;

}


/* Responsive */

@media (max-width: 760px) {

    .mse-learner-help {

        max-width: none;

        margin-top: 1rem;

    }

}
 
/* =========================================================
  FINAL OVERRIDE — CENTRE MANDATORY PILL TEXT
  ========================================================= */
#inst6678 #cls_exp_custom .cls-cert-compl-box-block,
#inst6678 #cls_due_custom .cls-cert-compl-box-block,
#inst6678 #cls_cert_custom .cls-cert-compl-box-block {
   display: flex !important;
   align-items: center !important;
   justify-content: center !important;
   text-align: center !important;
   text-indent: 0 !important;
   padding-left: 0.75rem !important;
   padding-right: 0.75rem !important;
}
/* Remove any offset inherited by nested text elements */
#inst6678 .cls-cert-compl-box-block > * {
   width: 100% !important;
   margin: 0 !important;
   padding: 0 !important;
   text-align: center !important;
   text-indent: 0 !important;
}
.mse-learner-help__link:focus,

.mse-learner-help__link:focus-visible {

    outline: 4px solid #FFDD00 !important;

    outline-offset: 3px;

    box-shadow: 0 0 0 2px #212B32 !important;

}

@media (max-width: 760px) {

    .mse-learner-help {

        max-width: none;

        margin-top: 1rem;

    }

}
 /* =========================================================

   LEARNER HOMEPAGE — FINAL CENTRE-COLUMN LAYOUT

   Brings the centre-column controls closer to the donut.

   Uses a 2 × 2 Priority actions grid.

   Prevents horizontal scrolling.

   ========================================================= */


/* ---------------------------------------------------------

   MANDATORY COURSE COMPLETIONS

   --------------------------------------------------------- */

/* Align the whole block to the left of its column */

#inst6678 {

    width: 100% !important;

    max-width: none !important;

    margin-right: auto !important;

    margin-left: 0 !important;

    padding: 0 !important;

    transform: none !important;

}


/* Keep the heading centred above the three-card group */

#inst6678 h1 {

    width: calc((10.5rem * 3) + (0.625rem * 2)) !important;

    max-width: 100% !important;

    margin: 0 0 0.75rem 0 !important;

    padding: 0 !important;

    text-align: center !important;

}


/* Align the group to the left, while centring its card content */

#inst6678 .content > div[style*="text-align: center"] {

    display: flex !important;

    flex-wrap: wrap !important;

    justify-content: flex-start !important;

    align-items: stretch !important;

    gap: 0.625rem !important;

    width: max-content !important;

    max-width: 100% !important;

    margin-right: auto !important;

    margin-left: 0 !important;

    padding: 0 !important;

    text-align: center !important;

}


/* Outer native status links */

#inst6678 #cls_exp_custom,

#inst6678 #cls_due_custom,

#inst6678 #cls_cert_custom {

    flex: 0 0 10.5rem !important;

    width: 10.5rem !important;

    min-width: 10.5rem !important;

    max-width: 10.5rem !important;

    margin: 0 !important;

    padding: 0 !important;

}


/*

   Status-card height is approximately the visual thickness

   of the Required learning donut ring.

*/

#inst6678 #cls_exp_custom .cls-cert-compl-box-block,

#inst6678 #cls_due_custom .cls-cert-compl-box-block,

#inst6678 #cls_cert_custom .cls-cert-compl-box-block {

    display: grid !important;

    place-items: center !important;

    width: 10.5rem !important;

    height: 3rem !important;

    min-height: 3rem !important;

    margin: 0 !important;

    padding: 0.5rem 0.75rem !important;

    border-radius: 0.5rem !important;

    font-size: 1rem !important;

    font-weight: 600 !important;

    line-height: 1.2 !important;

    text-align: center !important;

    box-sizing: border-box !important;

}


/* ---------------------------------------------------------

   PRIORITY ACTIONS — TWO-BY-TWO GRID

   --------------------------------------------------------- */

.mse-wireframe-actions {

    width: max-content !important;

    max-width: 100% !important;

    margin: 1.25rem auto 0 0 !important;

    padding: 0 !important;

    transform: none !important;

}


/* Centre heading above the two-column card group */

.mse-wireframe-actions__heading {

    width: 100% !important;

    margin: 0 0 0.75rem !important;

    padding: 0 !important;

    text-align: center !important;

}


/* Two cards per row */

.mse-wireframe-actions__grid {

    display: grid !important;

    grid-template-columns: repeat(2, 12rem) !important;

    justify-content: start !important;

    align-items: stretch !important;

    gap: 0.75rem !important;

    width: max-content !important;

    max-width: 100% !important;

    margin: 0 !important;

    padding: 0 !important;

    overflow: visible !important;

}


/* Slightly narrower cards, but still generous touch targets */

.mse-wireframe-action {

    width: 12rem !important;

    min-width: 12rem !important;

    min-height: 4.25rem !important;

    padding: 0.75rem 1rem !important;

    border-radius: 0.5rem !important;

    font-size: 1rem !important;

    font-weight: 600 !important;

    line-height: 1.3 !important;

    box-sizing: border-box !important;

}


/* ---------------------------------------------------------

   RESPONSIVE BEHAVIOUR

   --------------------------------------------------------- */

@media (max-width: 900px) {

    #inst6678 h1 {

        width: 100% !important;

    }

    #inst6678 .content > div[style*="text-align: center"] {

        width: 100% !important;

        justify-content: center !important;

    }

    .mse-wireframe-actions {

        width: 100% !important;

        margin-right: auto !important;

        margin-left: auto !important;

    }

    .mse-wireframe-actions__grid {

        justify-content: center !important;

        margin-right: auto !important;

        margin-left: auto !important;

    }

}


@media (max-width: 620px) {

    #inst6678 .content > div[style*="text-align: center"] {

        flex-direction: column !important;

        align-items: center !important;

    }

    #inst6678 #cls_exp_custom,

    #inst6678 #cls_due_custom,

    #inst6678 #cls_cert_custom,

    #inst6678 #cls_exp_custom .cls-cert-compl-box-block,

    #inst6678 #cls_due_custom .cls-cert-compl-box-block,

    #inst6678 #cls_cert_custom .cls-cert-compl-box-block {

        width: min(100%, 20rem) !important;

        max-width: 20rem !important;

        min-width: 0 !important;

    }

    .mse-wireframe-actions__grid {

        grid-template-columns: minmax(0, 1fr) !important;

        width: 100% !important;

    }

    .mse-wireframe-action {

        width: 100% !important;

        min-width: 0 !important;

    }

}
 /* =========================================================
  LEARNER HOMEPAGE — FULL-WIDTH CENTRE COLUMN COMPONENTS
  Makes the Mandatory course completion cards and
  Priority action cards span the full width of the centre
  dashboard region.
  Paste at the absolute bottom of the custom CSS.
  ========================================================= */

/* ---------------------------------------------------------
  MANDATORY COURSE COMPLETIONS
  --------------------------------------------------------- */
/* Let the block use the full width of its Totara region */
#inst6678 {
   width: 100% !important;
   max-width: none !important;
   margin: 0 !important;
   padding: 0 !important;
   transform: none !important;
}

/* Centre the heading across the full card group */
#inst6678 h1 {
   width: 100% !important;
   max-width: none !important;
   margin: 0 0 0.75rem !important;
   padding: 0 !important;
   text-align: center !important;
}

/* Three equal columns spanning the full region */
#inst6678 .content > div[style*="text-align: center"] {
   display: grid !important;
   grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
   gap: 0.625rem !important;
   width: 100% !important;
   max-width: none !important;
   margin: 0 !important;
   padding: 0 !important;
   text-align: center !important;
}

/* Outer links fill their grid columns */
#inst6678 #cls_exp_custom,
#inst6678 #cls_due_custom,
#inst6678 #cls_cert_custom {
   display: block !important;
   width: 100% !important;
   min-width: 0 !important;
   max-width: none !important;
   margin: 0 !important;
   padding: 0 !important;
}

/* Visible status cards fill their columns */
#inst6678 #cls_exp_custom .cls-cert-compl-box-block,
#inst6678 #cls_due_custom .cls-cert-compl-box-block,
#inst6678 #cls_cert_custom .cls-cert-compl-box-block {
   display: grid !important;
   place-items: center !important;
   width: 100% !important;
   min-width: 0 !important;
   max-width: none !important;
   height: 3rem !important;
   min-height: 3rem !important;
   margin: 0 !important;
   padding: 0.5rem 0.75rem !important;
   border-radius: 0.5rem !important;
   text-align: center !important;
   box-sizing: border-box !important;
}

/* ---------------------------------------------------------
  PRIORITY ACTIONS
  --------------------------------------------------------- */
/* Let the complete component span the centre region */
.mse-wireframe-actions {
   width: 100% !important;
   max-width: none !important;
   margin: 1.25rem 0 0 !important;
   padding: 0 !important;
   transform: none !important;
   box-sizing: border-box !important;
}

/* Centre the title across the exact grid width */
.mse-wireframe-actions__heading {
   width: 100% !important;
   margin: 0 0 0.75rem !important;
   padding: 0 !important;
   text-align: center !important;
}

/* Two equal-width cards per row spanning the centre region */
.mse-wireframe-actions__grid {
   display: grid !important;
   grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
   gap: 0.75rem !important;
   width: 100% !important;
   max-width: none !important;
   margin: 0 !important;
   padding: 0 !important;
   overflow: visible !important;
}

/* Each card fills its grid column */
.mse-wireframe-action {
   width: 100% !important;
   min-width: 0 !important;
   max-width: none !important;
   min-height: 4.25rem !important;
   padding: 0.75rem 1rem !important;
   box-sizing: border-box !important;
}

/* ---------------------------------------------------------
  RESPONSIVE BEHAVIOUR
  --------------------------------------------------------- */
@media (max-width: 760px) {
   #inst6678 .content > div[style*="text-align: center"] {
       grid-template-columns: 1fr !important;
   }
   .mse-wireframe-actions__grid {
       grid-template-columns: 1fr !important;
   }
   #inst6678 #cls_exp_custom,
   #inst6678 #cls_due_custom,
   #inst6678 #cls_cert_custom,
   #inst6678 #cls_exp_custom .cls-cert-compl-box-block,
   #inst6678 #cls_due_custom .cls-cert-compl-box-block,
   #inst6678 #cls_cert_custom .cls-cert-compl-box-block,
   .mse-wireframe-action {
       width: 100% !important;
       max-width: none !important;
       min-width: 0 !important;
   }
}
/* =========================================================

   1. HELP AND SUPPORT — DISTINCT SECONDARY PANEL

   ========================================================= */

.mse-learner-help {

    display: block !important;

    width: 100% !important;

    max-width: none !important;

    margin: 0 !important;

    padding: 1.25rem 1.25rem 1.25rem 1.5rem !important;

    background-color: #E8F1F8 !important;

    border: 1px solid #D8DDE0 !important;

    border-left: 0.35rem solid #005EB8 !important;

    border-radius: 0.5rem !important;

    text-align: left !important;

    box-sizing: border-box !important;

}

.mse-learner-help__heading {

    margin: 0 0 0.5rem !important;

    padding: 0 !important;

    color: #003087 !important;

    font-family: inherit !important;

    font-size: 1.25rem !important;

    font-weight: 600 !important;

    line-height: 1.3 !important;

    text-align: left !important;

}

.mse-learner-help__intro {

    margin: 0 0 1rem !important;

    padding: 0 !important;

    color: #212B32 !important;

    font-size: 0.95rem !important;

    font-weight: 400 !important;

    line-height: 1.5 !important;

}

.mse-learner-help__links {

    display: flex !important;

    flex-direction: column !important;

    gap: 0.625rem !important;

    width: 100% !important;

    margin: 0 !important;

    padding: 0 !important;

}

.mse-learner-help__link {

    display: flex !important;

    align-items: center !important;

    justify-content: flex-start !important;

    width: 100% !important;

    min-height: 2.75rem !important;

    padding: 0.625rem 0.875rem !important;

    background: #FFFFFF !important;

    border: 1px solid #005EB8 !important;

    border-radius: 0.5rem !important;

    color: #003087 !important;

    font-size: 0.95rem !important;

    font-weight: 600 !important;

    line-height: 1.3 !important;

    text-align: left !important;

    text-decoration: none !important;

    box-sizing: border-box !important;

}

.mse-learner-help__link::after {

    content: "›" !important;

    margin-left: auto !important;

    color: #005EB8 !important;

    font-size: 1.25rem !important;

    font-weight: 600 !important;

    line-height: 1 !important;

}
 /* =========================================================
  2. PRIORITY ACTIONS — REDUCE VISUAL WEIGHT
  ========================================================= */
.mse-wireframe-action {
   min-height: 4rem !important;
   padding: 0.625rem 1rem !important;
}
/* =========================================================
  3. SPACE BETWEEN STATUS AND PRIORITY ACTIONS
  ========================================================= */
.mse-wireframe-actions {
   margin-top: 2rem !important;
}
/* =========================================================
  4. CONSISTENT HEADING-TO-CONTENT SPACING
  ========================================================= */
#inst6678 h1,
.mse-wireframe-actions__heading {
   margin-top: 0 !important;
   margin-bottom: 0.75rem !important;
}
/* =========================================================
  5. LOWER HELP AND SUPPORT PANEL
  ========================================================= */
.mse-learner-help {
   margin-top: 2rem !important;
}
/* =========================================================
  6. DONUT-TO-INSTRUCTION SPACING
  ========================================================= */
#inst6677 canvas#CLSmyDonutChart6677 {
   margin-bottom: 0.75rem !important;
}
/* =========================================================
  7. SPACE BEFORE RESUME LEARNING
  ========================================================= */
.block-totara-featured-links,
.block_current_learning,
.block_totara_current_learning {
   margin-top: 2rem !important;
}
#inst6682 {
   margin-top: 2rem !important;
}
/* =========================================================
  8. INTERACTION AND KEYBOARD ACCESSIBILITY
  ========================================================= */
.mse-wireframe-action,
.mse-learner-help__link {
   cursor: pointer !important;
}
.mse-wireframe-action:hover {
   background: #E8F1F8 !important;
   border-color: #003087 !important;
   color: #003087 !important;
   transform: translateY(-1px) !important;
   box-shadow: 0 0.15rem 0.4rem rgba(0, 0, 0, 0.10) !important;
}
.mse-learner-help__link:hover {
   background: #FFFFFF !important;
   border-color: #003087 !important;
   color: #003087 !important;
   transform: translateY(-1px) !important;
   box-shadow: 0 0.15rem 0.35rem rgba(0, 0, 0, 0.10) !important;
}
.mse-wireframe-action:focus,
.mse-wireframe-action:focus-visible,
.mse-learner-help__link:focus,
.mse-learner-help__link:focus-visible {
   outline: 4px solid #FFDD00 !important;
   outline-offset: 3px !important;
   box-shadow: 0 0 0 2px #212B32 !important;
}
/* =========================================================
  RESUME LEARNING TITLE — MATCH DASHBOARD HEADINGS
  Block instance: #inst6682
  ========================================================= */
/* Remove the native underline / divider */
#inst6682 .card-header,
#inst6682 .block-header,
#inst6682 .header {
   background: transparent !important;
   border-bottom: 0 !important;
   box-shadow: none !important;
}
/* Style the title to match the other dashboard headings */
#inst6682 .card-title,
#inst6682 .block-title,
#inst6682 .block-header h2,
#inst6682 .block-header h3,
#inst6682 .card-header h2,
#inst6682 .card-header h3 {
   margin: 0 0 0.75rem !important;
   padding: 0 !important;
   color: #0072CE !important;
   font-family: inherit !important;
   font-size: 21px !important;
   font-weight: 600 !important;
   line-height: 1.3 !important;
   text-align: left !important;
   background: transparent !important;
   border: 0 !important;
   box-shadow: none !important;
}
/* Remove pseudo-element lines */
#inst6682 .card-title::before,
#inst6682 .card-title::after,
#inst6682 .block-title::before,
#inst6682 .block-title::after,
#inst6682 .block-header h2::before,
#inst6682 .block-header h2::after,
#inst6682 .card-header h2::before,
#inst6682 .card-header h2::after {
   content: none !important;
   display: none !important;
}
/* Remove any remaining divider directly beneath the title */
#inst6682 hr,
#inst6682 .divider,
#inst6682 .border-bottom {
   display: none !important;
   border: 0 !important;
}
/* Reduce gap between Resume learning title and cards */
#inst6682 .card-title,
#inst6682 .block-title,
#inst6682 .block-header h2,
#inst6682 .block-header h3,
#inst6682 .card-header h2,
#inst6682 .card-header h3 {
   margin-bottom: 0rem !important;
}
/* Remove extra spacing inside the title/header container */
#inst6682 .card-header,
#inst6682 .block-header,
#inst6682 .header {
   margin-bottom: 0 !important;
   padding-bottom: 0 !important;
}
/* Pull the learning-card content upward */
#inst6682 .content,
#inst6682 .block-content,
#inst6682 .card-body {
   margin-top: 0 !important;
   padding-top: 0.25rem !important;
}
/* =========================================================
  RESUME LEARNING — PULL CARDS CLOSER TO TITLE
  Block instance: #inst6682
  ========================================================= */
/* Remove spacing from the block content wrappers */
#inst6682 .content,
#inst6682 .block-content,
#inst6682 .card-body {
   margin-top: 0 !important;
   padding-top: 0 !important;
}
/* Pull the first content element upwards */
#inst6682 .content > :first-child,
#inst6682 .block-content > :first-child,
#inst6682 .card-body > :first-child {
   margin-top: -1.5rem !important;
}
/* Remove any top spacing from the learning-card layout */
#inst6682 .row,
#inst6682 .grid,
#inst6682 .tiles,
#inst6682 .items,
#inst6682 ul {
   margin-top: 0 !important;
   padding-top: 0 !important;
}
/* =========================================================
  FINAL OVERRIDE — CENTRE MANDATORY PILL TEXT
  ========================================================= */
#inst6678 #cls_exp_custom .cls-cert-compl-box-block,
#inst6678 #cls_due_custom .cls-cert-compl-box-block,
#inst6678 #cls_cert_custom .cls-cert-compl-box-block {
   display: block !important;
   height: 3rem !important;
   min-height: 3rem !important;
   margin: 0 !important;
   padding: 0 !important;
   font-size: 1rem !important;
   font-weight: 600 !important;
   line-height: 3rem !important;
   text-align: center !important;
   text-indent: 0 !important;
   vertical-align: middle !important;
}
/* Remove offsets from any nested element */
#inst6678 .cls-cert-compl-box-block > * {
   display: inline !important;
   width: auto !important;
   margin: 0 !important;
   padding: 0 !important;
   line-height: inherit !important;
   text-align: center !important;
   vertical-align: middle !important;
}
/* ==========================================================
  CLS Cert & Prog Donut – Required Learning chart
  Replace #inst6724 with the block instance ID
  ========================================================== */
/* Remove unwanted default block-heading spacing */
#inst6724 .card-header {
   display: none !important;
}
/* ----------------------------------------------------------
  Chart title: "Safety Level"
  ---------------------------------------------------------- */
#inst6724 .highcharts-title {
   fill: #005EB8 !important;
   color: #005EB8 !important;
   font-family: Frutiger, "Frutiger W01", Arial, sans-serif !important;
   font-size: 1.25rem !important;
   font-weight: 600 !important;
   text-align: center !important;
   /* Move the title slightly upward */
   transform: translateY(-8px);
}
/* Highcharts may place the styling on an inner span */
#inst6724 .highcharts-title span {
   color: #005EB8 !important;
   font-family: Frutiger, "Frutiger W01", Arial, sans-serif !important;
   font-size: 1.25rem !important;
   font-weight: 600 !important;
}
/* ----------------------------------------------------------
  Footer: "Click to view required learning"
  ---------------------------------------------------------- */
#inst6724 .highcharts-subtitle,
#inst6724 .highcharts-caption {
   fill: #005EB8 !important;
   color: #005EB8 !important;
   font-family: Frutiger, "Frutiger W01", Arial, sans-serif !important;
   font-size: 1rem !important;
   font-weight: 600 !important;
   text-align: center !important;
   /* Move the label further below the doughnut */
   transform: translateY(18px);
}
#inst6724 .highcharts-subtitle span,
#inst6724 .highcharts-caption span {
   color: #005EB8 !important;
   font-family: Frutiger, "Frutiger W01", Arial, sans-serif !important;
   font-size: 1rem !important;
   font-weight: 600 !important;
}
/* Make the whole chart area slightly taller so the footer
  does not collide with the bottom of the block */
#inst6724 .highcharts-container,
#inst6724 .highcharts-root {
   overflow: visible !important;
}
#inst6724 .card-body,
#inst6724 .content {
   padding-top: 0.5rem !important;
   padding-bottom: 2rem !important;
   overflow: visible !important;
}
/* ==========================================================

   MSE Section Title

   ========================================================== */

.mse-section-title {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: .6rem;

    margin: 0 0 1rem;

}

.mse-section-accent {

    width: .7rem;

    height: .7rem;

    border-radius: 50%;

    background: #005EB8;

    flex-shrink: 0;

}

.mse-section-title h2 {

    margin: 0;

    font-family: Frutiger, "Frutiger W01", Arial, sans-serif;

    font-size: 1.6rem;

    font-weight: 600;

    line-height: 1.2;

    color: #005EB8;

}
 /* ==========================================================
  Required learning title
  ========================================================== */
.mse-required-learning-title {
   display: flex;
   align-items: center;
   justify-content: center;
   margin: 0 !important;
   padding: 0 !important;
}
.mse-required-learning-title h2 {
   margin: 0 !important;
   padding: 0 !important;
   color: #0072CE;
   font-family: Frutiger, "Frutiger W01", Arial, sans-serif;
   font-size: 1.25rem;
   font-weight: 200;
   line-height: 1.2;
   text-align: center;
}
/* Replace instTITLE with the HTML title block instance ID */
#inst6725 {
   margin-bottom: 0 !important;
   padding-bottom: 0 !important;
}
#inst6725 .card,
#inst6725 .card-body,
#inst6725 .content {
   margin-bottom: 0 !important;
   padding-top: 0 !important;
   padding-bottom: 0 !important;
   min-height: 0 !important;
}
/* Replace instACTIONS with the Priority actions block instance ID */
#inst6719 {
   margin-top: -0.5rem !important;
}
#inst6719 .card,
#inst6719 .card-body,
#inst6719 .content {
   padding-top: 0 !important;
}
.mse-required-learning-title {

    display: flex;

    align-items: center;

    justify-content: center;

    margin: 0 !important;

    padding: 0 !important;

}

/* ==========================================================
  Required learning title block – instance 6725
  ========================================================== */
#inst6725 {
   margin: 0 !important;
   padding: 0 !important;
   min-height: 0 !important;
}
#inst6725 .card,
#inst6725 .card-body,
#inst6725 .content,
#inst6725 .no-overflow,
#inst6725 .generated-content-user {
   margin: 0 !important;
   padding: 0 !important;
   min-height: 0 !important;
}
/* Title wrapper */
#inst6725 .mse-required-learning-title {
   display: flex !important;
   align-items: center !important;
   justify-content: center !important;
   margin: 0 !important;
   padding: 0.25rem 0 !important;
   min-height: 0 !important;
}
/* Force the actual heading styling */
#inst6725 .mse-required-learning-title h2,
#inst6725 .generated-content-user .mse-required-learning-title h2 {
   margin: 0 !important;
   padding: 0 !important;
   color: #0072CE !important;
   font-family: Frutiger, "Frutiger W01", Arial, sans-serif !important;
   font-size: 1.25rem !important;
   font-weight: 550 !important;
   line-height: 1.2 !important;
   text-align: center !important;
   letter-spacing: 0 !important;
}
#inst6724 canvas#CLSmDonutChart6724 {
   display: block !important;
   width: 230px !important;
   height: 230px !important;
   max-width: 230px !important;
   max-height: 230px !important;
   margin: 0 auto 1.25rem !important;
}
/* CLS Cert & Prog Donut – instance 6724 */
/* Increase the chart area height */
#inst6724 .charts__size-monitor,
#inst6724 .block-content,
#inst6724 .content {
   min-height: 330px !important;
}
/* Add space beneath the doughnut/footer area */
#inst6724 canvas#CLSmDonutChart6724 {
   margin-bottom: 1.25rem !important;
}
/* Ensure the block does not clip the extra spacing */
#inst6724,
#inst6724 .block-content,
#inst6724 .content {
   overflow: visible !important;
   padding-bottom: 0.75rem !important;
}
/* ==========================================================
  CLS Cert & Prog Donut – instance 6724
  Replace the canvas footer with a lower CSS footer
  ========================================================== */
#inst6724 .block-content {
   position: relative !important;
   padding-bottom: 2rem !important;
   overflow: visible !important;
}
/* Keep the chart centred */
#inst6724 canvas#CLSmDonutChart6724 {
   display: block !important;
   margin: 0 auto !important;
}
/* ==========================================================
  CLS Cert & Prog Donut – instance 6724
  Add visual space above the existing footer without masking
  ========================================================== */
#inst6724 .block-content {
   position: relative !important;
   overflow: visible !important;
   padding-bottom: 1rem !important;
}
/* Keep the whole canvas intact and move it slightly upward */
#inst6724 canvas#CLSmDonutChart6724 {
   display: block !important;
   margin: -0.75rem auto 0 !important;
}
/* Preserve enough height for the complete chart and footer */
#inst6724 .charts__size-monitor {
   min-height: 290px !important;
   overflow: visible !important;
}
/* ==========================================================
  REDUCE VERTICAL GAPS BETWEEN CENTRE BLOCKS
  ========================================================== */
/* Remove space below the Required Learning title */
#inst6725 {
   margin-bottom: 0 !important;
}
#inst6725 .content,
#inst6725 .no-overflow,
#inst6725 .generated-content-user,
#inst6725 .mse-required-learning-title {
   margin-bottom: 0 !important;
   padding-bottom: 0 !important;
}
/* Remove excess space below the doughnut block */
#inst6724 {
   margin-top: 0 !important;
   margin-bottom: 0rem !important;
}
#inst6724 .block-content,
#inst6724 .content {
   margin-bottom: 0 !important;
   padding-bottom: 0 !important;
   min-height: 0 !important;
}
/* Pull Priority actions upwards */
#inst6719 {
   margin-top: -0.5rem !important;
}
#inst6719 .content,
#inst6719 .no-overflow,
#inst6719 .generated-content-user {
   padding-top: 0 !important;
   margin-top: 0 !important;
}
/* ==========================================================
  Reduce gap between Welcome and Help and support
  Welcome: 6723
  Help:    6721
  ========================================================== */
/* Remove the default bottom spacing from the Welcome block */
#inst6723 {
   margin-bottom: 0 !important;
}
/* Remove internal spacing at the bottom of Welcome */
#inst6723 .block-content,
#inst6723 .content,
#inst6723 .no-overflow {
   margin-bottom: 0 !important;
   padding-bottom: 0 !important;
}
/* Pull Help and support closer to Welcome */
#inst6721 {
   margin-top: 0.75rem !important;
}
/* Remove unnecessary spacing at the top of Help and support */
#inst6721 .block-content,
#inst6721 .content,
#inst6721 .no-overflow,
#inst6721 .generated-content-user {
   margin-top: 0 !important;
   padding-top: 0 !important;
}
/* ==========================================================
  Reduce gap between Help and support and Resume learning
  Help:   6721
  Resume: 6682
  ========================================================== */
/* Remove space below Help and support */
#inst6721 {
   margin-bottom: 0 !important;
}
#inst6721 .block-content,
#inst6721 .content,
#inst6721 .no-overflow,
#inst6721 .generated-content-user {
   margin-bottom: 0 !important;
   padding-bottom: 0 !important;
}
/* Pull Resume learning upwards */
#inst6682 {
   margin-top: 2rem !important;
}
#inst6682 .block-content,
#inst6682 .content {
   margin-top: 0 !important;
   padding-top: 0 !important;
}
/* ==========================================================
  MSE Welcome/Profile block
  Instance: 6723
  Custom CSS class: mse-profile-card
  ========================================================== */

/* ----------------------------------------------------------
  1. OUTER CARD
  ---------------------------------------------------------- */
#inst6723.mse-profile-card {
   position: relative !important;
   overflow: visible !important;
   margin: 0 0 0.35rem !important;
   padding: 0 !important;
   background: #ffffff !important;
   border: 1px solid #d8dde3 !important;
   border-radius: 0.5rem !important;
   box-shadow: 0 1px 3px rgba(33, 43, 50, 0.12) !important;
}

/* ----------------------------------------------------------
  2. KEEP EDITING CONTROLS AND SETTINGS COG ACCESSIBLE
  ---------------------------------------------------------- */
#inst6723.mse-profile-card .header,
#inst6723.mse-profile-card .block-header,
#inst6723.mse-profile-card .card-header,
#inst6723.mse-profile-card .block-controls,
#inst6723.mse-profile-card .commands,
#inst6723.mse-profile-card .block_action,
#inst6723.mse-profile-card [data-region="block-actions"],
#inst6723.mse-profile-card .dropdown,
#inst6723.mse-profile-card .editing_move {
   position: relative !important;
   z-index: 50 !important;
   overflow: visible !important;
   visibility: visible !important;
   opacity: 1 !important;
}
/* Keep the editing header compact */
#inst6723.mse-profile-card .header,
#inst6723.mse-profile-card .block-header,
#inst6723.mse-profile-card .card-header {
   min-height: 0 !important;
   padding: 0 !important;
   background: transparent !important;
   border: 0 !important;
}

/* ----------------------------------------------------------
  3. MAIN CONTENT CONTAINER
  ---------------------------------------------------------- */
#inst6723.mse-profile-card .block-content {
   position: relative !important;
   overflow: hidden !important;
   margin: 0 !important;
   padding: 0 0.9rem 0.7rem !important;
   background: #ffffff !important;
   border-radius: 0.5rem !important;
}
/* Neutralise nested content containers */
#inst6723.mse-profile-card .content {
   position: static !important;
   margin: 0 !important;
   padding: 0 !important;
   background: transparent !important;
   overflow: visible !important;
}

/* ----------------------------------------------------------
  4. GREEN-TO-BLUE BANNER
  ---------------------------------------------------------- */
#inst6723.mse-profile-card .block-content::before {
   content: "" !important;
   display: block !important;
   width: 100% !important;
   height: 5rem;
   margin: 0 !important;
   background:
       linear-gradient(
           135deg,
           #00A499 0%,
           #0072CE 52%,
           #005EB8 100%
       ) !important;
border-radius: 0.5rem 0.5rem 0 0 !important;
   pointer-events: none !important;
}

/* ----------------------------------------------------------
  5. NHS LOGO
  Replace the URL below with the working hosted logo URL
  ---------------------------------------------------------- */
#inst6723.mse-profile-card .block-content::after {
   content: "" !important;
   display: block !important;
   position: absolute !important;
   top: 0.35rem !important;
   right: 0.5rem !important;
   width: 15rem !important;
   height: 4.25rem !important;
   background-color: transparent !important;
   background-image: url("https://elevate.mse.nhs.uk/draftfile.php/46454/user/draft/480725079/NHS%20logo%20white.png") !important;
   background-repeat: no-repeat !important;
   background-position: right center !important;
   background-size: contain !important;
   z-index: 10 !important;
   opacity: 1 !important;
   visibility: visible !important;
   pointer-events: none !important;
}

/* ----------------------------------------------------------
  6. PROFILE AREA
  ---------------------------------------------------------- */
#inst6723.mse-profile-card .clsuserprofileimage {
   position: relative !important;
   z-index: 15 !important;
   display: flex !important;
   flex-direction: column !important;
   align-items: center !important;
   margin: -3rem 0 0 !important;
   padding: 0 !important;
   text-align: center !important;
}

/* ----------------------------------------------------------
  7. PROFILE IMAGE
  ---------------------------------------------------------- */
#inst6723.mse-profile-card .clsuserprofileimage > a {
   display: block !important;
   margin: 0 !important;
   padding: 0 !important;
   background: transparent !important;
   border: 0 !important;
   border-radius: 0 !important;
   box-shadow: none !important;
}
#inst6723.mse-profile-card .clsuserprofileimage img {
   display: block !important;
   width: 5rem !important;
   height: 5rem !important;
   max-width: 5rem !important;
   max-height: 5rem !important;
   margin: 0 auto 0.45rem !important;
   object-fit: cover !important;
   background: #ffffff !important;
   border: 3px solid #ffffff !important;
   border-radius: 50% !important;
   box-shadow:
       0 0 0 1px #aeb7bd,
       0 2px 4px rgba(33, 43, 50, 0.18) !important;
}

/* ----------------------------------------------------------
  8. WELCOME MESSAGE
  ---------------------------------------------------------- */
#inst6723.mse-profile-card .clsuserprofileimage p {
   margin: 0 0 0.25rem !important;
   padding: 0 !important;
   color: #212b32 !important;
   font-family:
       Frutiger,
       "Frutiger W01",
       Arial,
       sans-serif !important;
   font-size: 1rem !important;
   font-weight: 400 !important;
   line-height: 1.25 !important;
   text-align: center !important;
}
/* Keep the learner's name slightly more prominent */
#inst6723.mse-profile-card .clsuserprofileimage p a,
#inst6723.mse-profile-card .clsuserprofileimage p strong,
#inst6723.mse-profile-card .clsuserprofileimage p b {
   color: #00A499 !important;
   font-weight: 500 !important;
   text-decoration: none !important;
}

/* ----------------------------------------------------------
  9. MANAGER DETAILS
  ---------------------------------------------------------- */
#inst6723.mse-profile-card .cls_Manager_show_user {
   margin: 0.1rem 0 0.45rem !important;
   padding: 0 0 0.45rem !important;
   color: #425563 !important;
   border-bottom: 1px solid #d8dde3 !important;
   font-family:
       Frutiger,
       "Frutiger W01",
       Arial,
       sans-serif !important;
   font-size: 0.9rem !important;
   font-weight: 400 !important;
   line-height: 1.3 !important;
   text-align: center !important;
}
#inst6723.mse-profile-card .cls_Manager_show_user p {
   margin: 0.1rem 0 !important;
   padding: 0 !important;
}

/* ----------------------------------------------------------
  10. ACTUAL PROFILE BUTTONS ONLY
  ---------------------------------------------------------- */
#inst6723.mse-profile-card input[type="button"],
#inst6723.mse-profile-card input[type="submit"],
#inst6723.mse-profile-card button.btn,
#inst6723.mse-profile-card a.btn {
   display: inline-flex !important;
   align-items: center !important;
   justify-content: center !important;
   min-height: 1.9rem !important;
   margin: 0.1rem !important;
   padding: 0.25rem 0.55rem !important;
   color: #005EB8 !important;
   background: transparent !important;
   border: 0 !important;
   border-radius: 0.25rem !important;
   box-shadow: none !important;
   font-family:
       Frutiger,
       "Frutiger W01",
       Arial,
       sans-serif !important;
   font-size: 0.82rem !important;
   font-weight: 500 !important;
   line-height: 1.2 !important;
   text-decoration: none !important;
}

/* ----------------------------------------------------------
  11. BUTTON HOVER AND FOCUS
  ---------------------------------------------------------- */
#inst6723.mse-profile-card input[type="button"]:hover,
#inst6723.mse-profile-card input[type="submit"]:hover,
#inst6723.mse-profile-card button.btn:hover,
#inst6723.mse-profile-card a.btn:hover {
   color: #003087 !important;
   background: #e8edee !important;
   border: 0 !important;
   box-shadow: none !important;
}
#inst6723.mse-profile-card input[type="button"]:focus-visible,
#inst6723.mse-profile-card input[type="submit"]:focus-visible,
#inst6723.mse-profile-card button.btn:focus-visible,
#inst6723.mse-profile-card a.btn:focus-visible,
#inst6723.mse-profile-card .clsuserprofileimage > a:focus-visible {
   outline: 3px solid #ffeb3b !important;
   outline-offset: 2px !important;
}

/* ----------------------------------------------------------
  12. DO NOT RESTYLE THE SETTINGS COG OR EDITING ICONS
  ---------------------------------------------------------- */
#inst6723.mse-profile-card .block-controls a,
#inst6723.mse-profile-card .commands a,
#inst6723.mse-profile-card .block_action a,
#inst6723.mse-profile-card [data-region="block-actions"] a,
#inst6723.mse-profile-card .dropdown a,
#inst6723.mse-profile-card .editing_move {
   display: initial !important;
   min-height: 0 !important;
   margin: 0 !important;
   padding: initial !important;
   color: inherit !important;
   background: transparent !important;
   border: 0 !important;
   border-radius: 0 !important;
   box-shadow: none !important;
   font-size: inherit !important;
   font-weight: inherit !important;
}

/* ----------------------------------------------------------
  13. MOBILE
  ---------------------------------------------------------- */
@media (max-width: 767px) {
   #inst6723.mse-profile-card .block-content {
       padding-right: 0.75rem !important;
       padding-left: 0.75rem !important;
   }
   #inst6723.mse-profile-card .block-content::before {
       width: calc(100% + 1.5rem);
       margin-right: -0.75rem;
       margin-left: -0.75rem;
   }
   #inst6723.mse-profile-card .block-content::after {
       right: 0.45rem !important;
       width: 4.75rem !important;
       height: 2rem !important;
   }
   #inst6723.mse-profile-card .clsuserprofileimage img {
       width: 4.5rem !important;
       height: 4.5rem !important;
       max-width: 4.5rem !important;
       max-height: 4.5rem !important;
   }
}
/* Safer removal of likely native divider */
#inst6723.mse-profile-card .block-footer,
#inst6723.mse-profile-card .card-footer,
#inst6723.mse-profile-card .footer,
#inst6723.mse-profile-card hr,
#inst6723.mse-profile-card .border-top {
   border-top: 0 !important;
   border-bottom: 0 !important;
   box-shadow: none !important;
   background: transparent !important;
}
#inst6723.mse-profile-card .block-content {
   border-bottom: 0 !important;
   box-shadow: none !important;
}
/* =========================================================
  REMOVE INTERNAL GREY LINE FROM PROFILE CARD
  Keep the outer card border intact
  ========================================================= */
#inst6723.mse-profile-card .clsuserprofileimage,
#inst6723.mse-profile-card .clsuserprofileimage > div,
#inst6723.mse-profile-card .clsuserprofileimage + div,
#inst6723.mse-profile-card .content > div,
#inst6723.mse-profile-card .block-content > div {
   border-bottom: 0 !important;
   border-top: 0 !important;
   box-shadow: none !important;
   background-image: none !important;
}
#inst6723.mse-profile-card .clsuserprofileimage::before,
#inst6723.mse-profile-card .clsuserprofileimage::after {
   content: none !important;
   display: none !important;
   border: 0 !important;
   box-shadow: none !important;
}
/* =========================================================
  LEARNER HOMEPAGE — CONSISTENT SPACING AND ALIGNMENT
  ========================================================= */
:root {
   --mse-dashboard-gap: 1.25rem;
   --mse-card-gap: 0.75rem;
}

/* ---------------------------------------------------------
  CONSISTENT VERTICAL BLOCK SPACING
  --------------------------------------------------------- */
/* Profile card to Help and support */
#inst6723.mse-profile-card {
   margin-bottom: var(--mse-dashboard-gap) !important;
}
/* Mandatory status to Priority actions */
.mse-wireframe-actions {
   margin-top: var(--mse-dashboard-gap) !important;
}
/* Help and support to the following block */
.mse-learner-help {
   margin-bottom: var(--mse-dashboard-gap) !important;
}
/* Resume learning separation */
#inst6682 {
   margin-top: var(--mse-dashboard-gap) !important;
}

/* ---------------------------------------------------------
  CONSISTENT INTERNAL CARD GAPS
  --------------------------------------------------------- */
#inst6678 .content > div[style*="text-align: center"] {
   gap: var(--mse-card-gap) !important;
}
.mse-wireframe-actions__grid {
   column-gap: var(--mse-card-gap) !important;
   row-gap: var(--mse-card-gap) !important;
}
.mse-learner-help__links {
   gap: var(--mse-card-gap) !important;
}
/* =========================================================
  ALIGN HELP PANEL BOTTOM WITH PRIORITY ACTIONS
  ========================================================= */
.mse-learner-help {
   display: flex !important;
   flex-direction: column !important;
   min-height: 11.5rem !important;
   box-sizing: border-box !important;
}
/* Keep the links grouped at the bottom of the panel */
.mse-learner-help__links {
   margin-top: auto !important;
}
@media (max-width: 900px) {
   .mse-learner-help {
       min-height: 0 !important;
   }
   #inst6723.mse-profile-card,
   .mse-wireframe-actions,
   .mse-learner-help,
   #inst6682 {
       margin-top: var(--mse-dashboard-gap) !important;
       margin-bottom: var(--mse-dashboard-gap) !important;
   }
}