/* ************************************* */
/* *************  GENERAL  ************* */
/* ************************************* */

:root {
  interpolate-size: allow-keywords;

  /* --------------------------------------------------------------- */
  /* Site palette - mirrors the Elementor Pro global colours exactly. */
  /* No colour outside this list is introduced by the responsive CSS. */
  /* --------------------------------------------------------------- */
  --mastdlp-purple:        #5F3076;  /* Main purple / global "secondary"  */
  --mastdlp-purple-light:  #7D439A;
  --mastdlp-cream:         #FFFCF2;  /* Cream - page background          */
  --mastdlp-text:          #38302E;  /* Body text / global "primary"     */
  --mastdlp-white:         #FFFFFF;
  --mastdlp-lilac-light:   #EFDDF8;
  --mastdlp-lilac:         #DEB3F2;
  --mastdlp-cyan-pale:     #CBF3F9;
  --mastdlp-cyan:          #94EFFD;
  --mastdlp-teal:          #1888A3;
  --mastdlp-teal-dark:     #08678A;
}

.mastdlp_hidden {
    display: none !important;
}

.mastdlp_hidden_row {
    display: none !important;
}

html {
  scroll-behavior: smooth;
}

#toTopBtn {
  position: fixed;   
  bottom: 20px;
  right: 20px;
  z-index: 99;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s, visibility 0.5s; 
}

.scroll-trigger {
    position: absolute;
    top: 50vh;
    width: 1px;
    height: 1px;
    background-color: transparent;
    opacity: 0;
    pointer-events: none;
}

#toTopBtn.show {
  opacity: 1;
  visibility: visible;
}

/* ************************************* */
/* ************  TYPOGRAPHY  *********** */
/* ************************************* */

.mastdlp_grid_heading {
    font-weight: 600;
}

.gform_button, .gform_button_select_files, button.mastdlp_small_button, input[type=submit].mastdlp_small_button, .mastdlp_small_button {
    display: block !important;
    font-size: 1.1rem !important;
    font-weight: 500 !important;
    padding: 8px 16px !important;
    background-color: #5f3076 !important;
    color: #fff !important;
    border-radius: 24px !important;
    line-height: 100% !important;
    margin: 0 !important;
}

.gform_button:hover, .gform_button_select_files:hover, button.mastdlp_small_button:hover, input[type=submit].mastdlp_small_button:hover, .mastdlp_small_button:hover {
    background-color: #38302e !important;
}


button.mastdlp_tiny_button, input[type=submit].mastdlp_tiny_button {
    display: block !important;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    padding: 6px 12px !important;
    background-color: #5f3076 !important;
    color: #fff !important;
    border-radius: 24px !important;
    line-height: 100% !important;
    margin: 0 !important;
}

button.mastdlp_tiny_button:hover, input[type=submit].mastdlp_tiny_button:hover {
    background-color: #38302e !important;
}


/* *********************************************** */
/* *** GENERIC BLOCKS - USED ON MULTIPLE PAGES *** */
/* *********************************************** */

.mastdlp_full_page_wrapper {
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    width: 100% !important;
    padding: 40px 0 40px 0;
    background-color: #fffcf2;
} 

.mastdlp_page_container .transparent_box {
    width: 1100px;
    margin: 20px 0;
}


.mastdlp_page_container .shaded_box {
    width: 100% !important;
    background-color: #cbf3f9;
    border-radius: 20px;
    padding: 40px;
    margin: 20px 0;
}


#mastdlp_confirmation_message_box {
    position: relative;
    width: 100%;
    padding: 16px;
    border: 2px solid #efddf8;
    border-radius: 8px;
}

#mastdlp_confirmation_message_box.mastdlp_confirmation_type0 {
    /* This is a success */
    background-color: #efddf8;
}

#mastdlp_confirmation_message_box.mastdlp_confirmation_type1 {
    /* This is an error */
    background-color: #deb3f2;
}

#mastdlp_confirmation_message_box #mastdlp_confirmation_message_box_dismiss {
    display: block;
    position: absolute;
    top: 8px;
    right: 8px;
    margin: 0;
    color: #38302e;
    font-size: 1.3rem;
    line-height: 100%;
    cursor: pointer;
}

.safeguarding_text {
    display: grid;
    grid-template-columns: 60px 1fr;
    gap: 10px;
    align-items: center;
}

.safeguarding_text svg {
    width: 50px;
    height: 50px;
}

.safeguarding_text.safeguarding_noconcern svg path {
    fill: green;
}


.safeguarding_text.safeguarding_concern svg path {
    fill: red;
}

/* ************************************* */
/* ********* HEADER MENUS ********* */
/* ************************************* */


/* --- Hamburger button (hidden on desktop) --- */
button.mastdlp-menu-toggle {
    display: none;
    background: none;
    border: 0;
    cursor: pointer;
    padding: 20px 16px !important;  
    border-radius: 30px !important;
    color: inherit;
}

.mastdlp-hamburger,
.mastdlp-hamburger::before,
.mastdlp-hamburger::after {
    display: block;
    width: 24px;
    height: 2px;
    background: currentColor;
    transition: transform .2s ease, background .2s ease;
}
.mastdlp-hamburger { 
    position: relative; 
}
.mastdlp-hamburger::before,
.mastdlp-hamburger::after {
    content: "";
    position: absolute;
    left: 0;
}
.mastdlp-hamburger::before { 
    top: -7px; 
}
.mastdlp-hamburger::after  { 
    top:  7px; 
}

/* Morph into an X when open (optional but nice) */
.mastdlp-menu-toggle[aria-expanded="true"] .mastdlp-hamburger { background: transparent; }
.mastdlp-menu-toggle[aria-expanded="true"] .mastdlp-hamburger::before { transform: translateY(7px) rotate(45deg); }
.mastdlp-menu-toggle[aria-expanded="true"] .mastdlp-hamburger::after  { transform: translateY(-7px) rotate(-45deg); }

/* Container & List Setup */
.mastdlp_custom_menu_wrapper ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

/* Top-level Menu Items */
.mastdlp_custom_menu_wrapper ul li {
    position: relative; /* Required for absolute positioning of dropdowns */
}

.mastdlp_custom_menu_wrapper ul li:not(.mastdlp_menu_button) a {
    display: block;
    font-size: 1.2rem;
    font-weight: 600;
    padding: 15px 20px;
    text-decoration: none;
    color: #38302e;
}

.mastdlp_custom_menu_wrapper li.mastdlp_menu_button a {
    display: block;
    font-size: 1.2rem;
    font-weight: 600;
    padding: 10px 20px;
    text-decoration: none;
    color: #fff;
    background-color: #5f3076;
    border-radius: 24px;
}

.mastdlp_custom_menu_wrapper li.mastdlp_menu_button a:hover {
    text-decoration: none;
    color: #fff;
    background-color: #38302e;
}

/* Dropdown Menu (Secondary Level) */
.mastdlp_custom_menu_wrapper ul li:not(.mastdlp_menu_button) ul {
    position: absolute;
    top: 100%;
    left: 0;
    display: none; /* Hide by default */
    background-color: #fff;
    min-width: 200px;
    flex-direction: column; /* Stack sub-items vertically */
    z-index: 999;
}

/* Show Dropdown on Hover */
.mastdlp_custom_menu_wrapper ul li:hover > ul {
    display: flex;
}

/* Dropdown Item Styling */
.mastdlp_custom_menu_wrapper ul li ul li {
    display: block;
    width: 100%;
}
.mastdlp_custom_menu_wrapper ul li ul li a {

    font-weight: 500 !important;
    padding: 10px 15px;
}

.mastdlp_custom_menu_wrapper ul li ul li:last-child a {
    border-bottom: none;
}


/* Hover States */
.mastdlp_custom_menu_wrapper ul li ul li a:hover {
    text-decoration: none;
    background-color: #deb3f2;
    color: #38302e;
}

.mastdlp_custom_menu_wrapper ul li a:hover {
    text-decoration: underline;
    text-decoration-thickness: 3px;
    text-underline-offset: 6px;
    text-decoration-color: #38302e;

}

/* Add arrow to parent items */
.mastdlp_custom_menu_wrapper .menu-item-has-children > a::after {
    content: '▼';
    font-size: 12px;
    margin-left: 12px;
    vertical-align: middle;
    display: inline-block;
}


/* --- Mobile behaviour --- */
@media screen and (max-width: 767px) {

    button.mastdlp-menu-toggle {
        display: block;
        position: relative;
        right: 4px;
        z-index: 99;
        min-width: 44px;   /* accessible tap target */
        min-height: 44px;
        color: var(--mastdlp-text);
    }

    .mastdlp_custom_menu_wrapper .mastdlp_menu {
        display: none;              /* hidden until toggled */
        flex-direction: column;     /* each item on its own row */
        flex-wrap: nowrap;
        align-items: stretch;
        background-color: var(--mastdlp-white);
        width: 100%;
        margin: 0;
        padding: 0;
        gap: 0;                     /* override the 12px desktop gap */
        list-style: none;
    }

    .mastdlp_custom_menu_wrapper.is-open .mastdlp_menu {
        display: flex;
    }

    .mastdlp_custom_menu_wrapper .mastdlp_menu li {
        width: 100%;
        margin: 0;
    }

    .mastdlp_custom_menu_wrapper .mastdlp_menu > li:not(:last-child) {
        border-bottom: 1px solid var(--mastdlp-lilac-light);
    }

    .mastdlp_custom_menu_wrapper .mastdlp_menu li:not(.mastdlp_menu_button):hover {
        background-color: var(--mastdlp-lilac);
    }

    .mastdlp_custom_menu_wrapper .mastdlp_menu a {
        display: block;
        padding: 14px 16px;         /* >=44px tap target */
        text-align: center;
        overflow-wrap: anywhere;    /* long RO / KA labels must not overflow */
    }

    .mastdlp_custom_menu_wrapper .mastdlp_menu a:hover {
        text-decoration: none;
    }

    #mastdlp-menu {
        position: fixed;
        top: 60px;
        left: 0;
        right: 0;
        width: 100% !important;
        background-color: var(--mastdlp-white);
        border-top: 2px solid var(--mastdlp-purple);
        z-index: 98;
        height: auto;
        max-height: calc(100dvh - 60px);   /* long menus scroll rather than clip */
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 0 0 2em 0;
    }

    .mastdlp_custom_menu_wrapper li.mastdlp_menu_button a {
        width: auto !important;
        max-width: 90%;
        margin: 12px auto;
        text-align: center;
        padding: 14px 24px;
    }

    /*
     * Dropdown menus (secondary level).
     * There is no hover on touch devices, so a hidden sub-menu would be
     * permanently unreachable. On mobile they are shown inline, indented.
     */
    .mastdlp_custom_menu_wrapper ul li:not(.mastdlp_menu_button) ul {
        width: 100% !important;
        min-width: 0;
        position: static !important;
        display: flex !important;
        flex-direction: column;
        gap: 0;
        background-color: var(--mastdlp-cream) !important;
        z-index: auto;
    }

    .mastdlp_custom_menu_wrapper ul li ul li a {
        padding: 12px 16px;
        font-size: 1.1rem;
    }

    .mastdlp_custom_menu_wrapper ul li ul li:not(:last-child) {
        border-bottom: 1px solid var(--mastdlp-lilac-light);
    }

    /* The arrow implies a collapsed menu, which is no longer the case here. */
    .mastdlp_custom_menu_wrapper .menu-item-has-children > a::after {
        display: none;
    }

}


/* ************************************* */
/* ********* BREADCRUMBS ********* */
/* ************************************* */

#mastdlp_breadcrumbs {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: start;
    font-size: 1rem;
        font-weight: 500;
    margin-bottom: 2em;
}
#mastdlp_breadcrumbs a {
    font-size: 1rem !important;
    font-weight: 500;
    text-decoration: underline !important;
}


/* ************************************* */
/* ********* APPLICATION FORMS ********* */
/* ************************************* */

.mastdlp_application_form_box {
    padding: 40px 30px;
    background-color: #cbf3f9;
    border-radius: 16px;
}

.mastdlp_app_stages {
    display: grid;
    grid-template-columns: 12rch 1fr;
    gap: 6px;
}

/* ************************************* */
/* ********* ERROR PAGE ********* */
/* ************************************* */

#staff_page_container #staff_error_container {

    width: 600px;
    min-height: 60vh;
    padding: 80px 0 40px 80px;
    margin: 24px auto;
}

#staff_page_container #staff_error_container button {

    margin-top: 1em !important;
}

/* ************************************* */
/* ********* STUDENT DASHBOARD ********* */
/* ************************************* */

.mastdlp_page_container {
    display: flex;
    flex-direction: column;
    width: 1100px;
    height: auto;
    min-height: 800px !important;
    justify-content: start;
    align-items: start;
}

.mastdlp_page_container #student_page_header {
    display: grid;
    grid-template-columns: 100px 1fr;
    column-gap: 10px;
    row-gap: 20px;
    justify-content: start;
    align-items: center;
    margin: 20px 0 40px 0 ;
}

#mastdlp_student_dashboard #written_assignments_container, #mastdlp_student_dashboard #practical_assignments_container {
    width: 100%;
    margin-top: 40px;
}


#mastdlp_student_dashboard #written_assignments_container #wa_progress_table{
    border: 1px solid #ffffff;
    width: 100%;
}

#mastdlp_student_dashboard #written_assignments_container p {
    display: inline-block;
    margin-bottom: 0;
}

#mastdlp_student_dashboard #written_assignments_container p a, #mastdlp_student_dashboard #practical_assignments_container p a {
    font-weight: 500;
}


#mastdlp_student_dashboard #written_assignments_container p a:hover, #mastdlp_student_dashboard #practical_assignments_container p a:hover {
    text-decoration-line: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 2px;
    color: #38302e;
}

#mastdlp_student_dashboard #written_assignments_container .progress_table_row div p b {
    font-weight: 600 !important;
}

#mastdlp_student_dashboard #written_assignments_container .progress_table_row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    column-gap: 0;
    row-gap: 0;
}

#mastdlp_student_dashboard #written_assignments_container .progress_table_row.summary_row {
    display: grid;
    grid-template-columns: 3fr 1fr;
    column-gap: 0;
    row-gap: 0;
    background-color: #5f3076;
    color: #ffffff;
}

#mastdlp_student_dashboard #written_assignments_container .progress_table_row.summary_row div:first-of-type p {
    font-weight: 600;
}

#mastdlp_student_dashboard #written_assignments_container .progress_table_row.summary_row.course_grade {
    background-color: #5f3076;
}

#mastdlp_student_dashboard #written_assignments_container #wa_progress_table_header {
    background-color: #5f3076;
    border-left: 1px solid #5f3076;
    border-right: 1px solid #5f3076;
    
}

#mastdlp_student_dashboard #written_assignments_container #wa_progress_table_header div:not(:last-of-type) {
    border-right: 1px solid #ffffff;
}

#mastdlp_student_dashboard #written_assignments_container #wa_progress_table_header h3 {
    color: #ffffff;
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 0;
}

#mastdlp_student_dashboard #written_assignments_container .progress_table_row:not(#wa_progress_table_header) {
    border-left: 1px solid #5f3076;
    border-right: 1px solid #5f3076;
    border-bottom: 1px solid #5f3076;
}

#mastdlp_student_dashboard #written_assignments_container .progress_table_row div {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 20px;
}

#mastdlp_student_dashboard #written_assignments_container .progress_table_row div:not(:last-of-type) {
    border-right: 1px solid #5f3076;

} 


#mastdlp_student_dashboard #practical_assignments_container p {
    display: inline-block;
    margin-bottom: 0;
}

#mastdlp_student_dashboard #practical_assignments_container p a {
    font-weight: 500;
}
#mastdlp_student_dashboard #practical_assignments_container p a:hover {
    text-decoration-line: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 2px;
    color: #38302e;
}

#mastdlp_student_dashboard #practical_assignments_container .progress_table_row div p b {
    font-weight: 600 !important;
}

#mastdlp_student_dashboard #practical_assignments_container .progress_table_row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    column-gap: 0;
    row-gap: 0;
}

#mastdlp_student_dashboard #practical_assignments_container .progress_table_row.summary_row {
    display: grid;
    grid-template-columns: 3fr 1fr;
    column-gap: 0;
    row-gap: 0;
    background-color: #5f3076;
    color: #ffffff;
}

#mastdlp_student_dashboard #practical_assignments_container .progress_table_row.summary_row div:first-of-type p {
    font-weight: 600;
}

#mastdlp_student_dashboard #practical_assignments_container .progress_table_row.summary_row.course_grade {
    background-color: #5f3076;
}



#mastdlp_student_dashboard #practical_assignments_container #pa_progress_table {
    border: 1px solid #ffffff;
}


#mastdlp_student_dashboard #practical_assignments_container #pa_progress_table_header {
    background-color: #5f3076;
    border-left: 1px solid #5f3076;
    border-right: 1px solid #5f3076;
    
}

#mastdlp_student_dashboard #practical_assignments_container #pa_progress_table_header div:not(:last-of-type), #mastdlp_student_dashboard #practical_assignments_container .progress_table_row.summary_row div:not(:last-of-type) {
    border-right: 1px solid #ffffff;
}

#mastdlp_student_dashboard #practical_assignments_container #pa_progress_table_header h3 {
    color: #fff;
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 0;
}

#mastdlp_student_dashboard #practical_assignments_container .progress_table_row:not(#pa_progress_table_header) {
    border-left: 1px solid #5f3076;
    border-right: 1px solid #5f3076;
    border-bottom: 1px solid #5f3076;
}

#mastdlp_student_dashboard #practical_assignments_container .progress_table_row div {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 20px;
}

#mastdlp_student_dashboard #practical_assignments_container .progress_table_row div:not(:last-of-type) {
    border-right: 1px solid #5f3076;
}



/* ************************************* */
/* ********** STUDENT ACCOUNT ********** */
/* ************************************* */



/* ************************************* */
/* ********** HEADER BOXES ********** */
/* ************************************* */


#student_account_header {
    width: 100%;
}

#student_account_header .student_account_header_row {
    width: 100%;
}

#student_account_header .student_account_header_row {
    display: grid;
    grid-template-columns: 180px 1fr 200px;
    column-gap: 10px;
    row-gap: 0;
    justify-content: start;
    align-items: center;
    width: 100%;
    margin: 10px 0 10px 0 ;
    padding: 8px;
    border: 2px solid transparent;
}

#student_account_header .student_account_form_row {
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: 0;
    row-gap: 20px;
    justify-content: start;
    align-items: center;
    width: 100%;
    margin: 10px 0 10px 0;
    padding: 8px;
    border: 2px solid #5f3076;
    background-color: #efddf8;
    border-radius: 8px;

}

#student_account_header button, #student_account_header form input[type=submit] {
    align-self: start;
    justify-self: end !important;
}

#student_account_header form {
    display: grid;
    grid-template-columns: 180px 1fr 120px 1fr 100px;
    gap: 10px;
    justify-content: start;
    align-items: center;
    margin: 0 12px 0 0;
}

#student_account_header form .mastdlp_second_row_label {
    justify-self: end !important;
}

#student_account_header form #user_email {
    grid-column: span 3 !important;
}

#student_account_header .student_account_header_row #mastdlp_courses_list {
    align-self: start;
}

#student_account_header .student_account_header_row UL {
    padding-inline-start: 0;
    list-style-position: inside;
}

.student_account_header_row button {
    float: right;
}





/* ************************************* */
/* ********* ASSIGNMENT HEADER ********* */
/* ************************************* */

.mastdlp_page_container #assignment_header .assignment_header_row {
    display: grid;
    grid-template-columns: 150px 1fr 100px;
    column-gap: 10px;
    row-gap: 0;
    justify-content: start;
    align-items: center;
    width: 100%;
    margin: 0;
    padding: 4px;
    border: 2px solid transparent;
}

.mastdlp_page_container #assignment_header .assignment_header_row.assignment_grade_row {
    padding: 4px 8px;
    background-color: #cbf3f9;
    border-radius: 8px;
    column-gap: 6px;
}

.mastdlp_page_container #assignment_header .assignment_form_row {
    display: grid;
    grid-template-columns: 1fr 100px;
    column-gap: 0;
    row-gap: 20px;
    justify-content: start;
    align-items: center;
    width: 1100px;
    margin: 10px 0 10px 0;
    padding: 8px;
    border: 2px solid #5f3076;
    background-color: #efddf8;
    border-radius: 8px;

}


.mastdlp_page_container #assignment_header button, .mastdlp_page_container #assignment_header form input[type=submit] {
    justify-self: end !important;
}

.mastdlp_page_container #assignment_header form {
    display: grid;
    grid-template-columns: 150px 1fr 120px 1fr 100px;
    gap: 10px;
    justify-content: start;
    align-items: center;
}

.mastdlp_page_container #assignment_header form .mastdlp_second_row_label {
    justify-self: end !important;
}

.mastdlp_page_container #assignment_header form #user_email {
    grid-column: span 3 !important;
}

.mastdlp_page_container #assignment_header .assignment_header_row #mastdlp_courses_list {
    align-self: start;
}

.mastdlp_page_container #assignment_header .assignment_header_row UL {
    padding-inline-start: 0;
    list-style-position: inside;
}


/* ************************************* */
/* ********* FILE UPLOADS ********* */
/* ************************************* */

.mastdlp_page_container .file_uploads .file_uploads_row {
    display: grid;
    grid-template-columns: 150px 1fr 100px;
    column-gap: 10px;
    row-gap: 0;
    justify-content: start;
    align-items: center;
    width: 100%;
    margin: 0;
    padding: 4px;
    border: 2px solid transparent;
}

.mastdlp_page_container .file_uploads .file_uploads_row svg {
    width: 40px;
    height: 40px;
}

.mastdlp_page_container .file_uploads .mastdlp_supervision_file_grid {
    display: grid;
    grid-template-columns: 180px 30px 1fr 100px;
    column-gap: 10px;
    row-gap: 0;
    justify-content: start;
    align-items: center;
    width: 100%;
    margin: 0;
    padding: 4px;
    border: 2px solid transparent;
}

.mastdlp_page_container .file_uploads .mastdlp_supervision_file_grid svg {
    width: 30px;
    height: 30px;
}

.mastdlp_page_container p.file_uploads_text {
    margin-bottom: 16px !important;
    font-weight: 500;
}

.file_uploads_divider {
    border: none;
    height: 1px;
    background-color: #5f3076;
    margin: 12px 20px 12px 4px !important;
}

.gform_button_select_files {
    margin: auto !important;
}

/* ************************************* */
/* ********* COMMENTS ********* */
/* ************************************* */


.mastdlp_page_container #mastdlp_comments_section {
    margin-top: 60px;
}

.mastdlp_page_container .mastdlp_comment_form.mastdlp_new_message_form {
    margin-bottom: 2.5em;
}

.mastdlp_page_container .mastdlp_comment_form label {
    font-size: 1.3rem;
    font-weight: 500;
    margin-bottom: 8px;
}

.mastdlp_page_container .mastdlp_comment_form input {
    margin: 8px 0;
}


.mastdlp_page_container .mastdlp_comment_form textarea {
    margin: 0 0 12px 0;
}

.mastdlp_page_container .dlp_top_level_comment {
    padding: 36px;
    margin: 24px 0;
    border: 1px solid #5f3076;
    border-radius: 12px;
    background-color: #fffcf2;
}

.mastdlp_page_container .dlp_top_level_comment .dlp_top_level_comment_header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.mastdlp_page_container .dlp_top_level_comment .dlp_comment_text {
    margin: 12px 0;
    padding: 0 0 12px 0;
    border-bottom: 1px solid #5f3076;
}

.mastdlp_page_container .dlp_top_level_comment .dlp_reply_text {
    margin: 12px 0;
}

.mastdlp_page_container .dlp_top_level_comment .dlp_comment_reply_wrapper {
    margin: 20px 0 20px 0;
    padding-bottom: 0;

}
.mastdlp_page_container .dlp_top_level_comment .dlp_comment_reply_wrapper .dlp_comment_reply_link {
    font-weight: 500;
    text-decoration: underline;
    cursor: pointer;
} 

.mastdlp_page_container .dlp_top_level_comment .dlp_reply_wrapper {
    display: grid;
    grid-template-columns: 50px 1fr;
    justify-content: start;
    align-items: center;
    margin-top: 20px;
    padding: 12px;
    border-bottom: 1px solid #5f3076;
}


.mastdlp_page_container .mastdlp_comments_box svg {
  width: 30px;
  height: 30px;
  align-self: start;
  justify-self: center;
  margin-top: 30%;
}


.mastdlp_page_container .mastdlp_comments_box svg path {
  fill: #38302e;
}

.mastdlp_page_container .dlp_top_level_comment .dlp_comment_reply_box {
    display: grid;
    grid-template-columns: 100px 1fr;
    justify-content: start;
    align-items: center;
    margin: 12px 0 -12px 0;
}



.mastdlp_page_container#mastdlp_assignment_date_chooser form .form_row {
    width: 100%;
    display: flex;

    justify-content: start;
    align-items: center;
    column-gap: 10px;
    margin-bottom: 20px;
}

.mastdlp_page_container#mastdlp_assignment_date_chooser form .form_row .form_inputs {
    display: grid;
    grid-template-columns: 20ch auto;
    justify-content: start;
    align-items: center;
    border: 1px solid #5f3076;
    padding: 8px 18px 8px 12px;
    background-color: #cbf3f9;
    border-radius: 12px;
}
.mastdlp_page_container#mastdlp_assignment_date_chooser form input[type=date] {
    border-radius: 8px;
    padding: 4px 8px;
}

.mastdlp_page_container#mastdlp_assignment_date_chooser form input[type=submit] {
    margin-top: 32px;
}
.mastdlp_page_container#mastdlp_assignment_date_chooser form label {
    font-size: 1.15rem;
    font-weight: 500;
    margin: 0;
    line-height: 100%;
}

.mastdlp_page_container#mastdlp_assignment_date_chooser form p {
    margin: 0;
    line-height: 100%;
}

.comment_history_link {
    font-size: 1.2rem;
    font-weight: 600 !important;
    margin-bottom: 36px !important;

}

.comment_history_link a {
    font-weight: 600 !important;
    text-decoration: underline !important;
}

.comment_notification_indicator {
    display: block;
    position: absolute;
    top: 1px;
    right: 1px;
    width: 18px;
    height: 18px;
    border-radius: 16px;
    line-height: 0;
    padding: 4px;
    background-color: red;
    z-index: 0; 
}

.comment_notification_header_indicator {
    display: block;
    align-self: center;
    margin-left: 12px;
    width: 28px;
    height: 28px;
    border-radius: 20px;
    padding: 6px;
    line-height: 0;
    background-color: red;
}
.comment_notification_header_indicator svg, .comment_notification_indicator svg, .student_overview_comment_notification_indicator svg {
    fill: #fff;
}

.student_overview_comment_notification_indicator {
    display: block;
    align-self: center;
    margin-left: 12px;
    width: 24px;
    height: 24px;
    border-radius: 20px;
    padding: 5px;
    line-height: 0;
    background-color: red;
}

#student_dashboard_title {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.mast_has_mail {
    background-color: red !important;
}

.mast_has_mail > p a {
    color: #fff !important;
}

.mastdlp_unread_comment {
    background-color: #efddf8 !important;
}

.mastdlp_comments_box {
    position: relative;
}

.mastdlp_comments_wrapper {
    max-height: 9999px;
    height: auto;
    opacity: 1;
    overflow: hidden;
    transition: height 1s, opacity 1s;
}

.mastdlp_comments_wrapper.hide_comments_div {
    height: 0 !important;
    opacity: 0 !important;
    transition: height 1s, opacity 1s;
}

.mastdlp_show_hide_comments_div_link {
    display: block;
    position: absolute;
    top: 12px;
    right: 12px;
}


.mastdlp_comment_file_link {
    margin-top: 12px !important;
}

.mastdlp_comment_file_link {
    display: flex;
    flex-direction: row;
    gap: 8px;
    align-items: center;
    margin-top: 24px !important;
}

.mastdlp_comment_file_link svg {
    margin-top: 0 !important;
}

.mastdlp_comment_file_link a {
    font-weight: 600 !important;
}

/* ************************************* */
/* ********* SUPERVISION ********* */
/* ************************************* */



.mastdlp_page_container #mastdlp_supervision_question_box {
    margin-top: 20px;
}


.mastdlp_page_container #mastdlp_supervision_question_box h3 {
    margin-top: 2em;
}


.mastdlp_page_container #mastdlp_supervision_question_box .dlp_supervision_text_box {
    margin-top: 12px;
    padding-left: 24px;
}


.mastdlp_page_container #mastdlp_supervision_question_box .dlp_supervision_text {
    margin-top: 12px;
}

.mastdlp_page_container #mastdlp_supervision_question_box .dlp_comment_header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}


.mastdlp_page_container #mastdlp_supervision_question_box .dlp_comment_text {
    margin: 24px 0;
}


.mastdlp_page_container #mastdlp_supervision_question_box .dlp_reply_wrapper {
    display: grid;
    grid-template-columns: 50px 1fr;
    justify-content: start;
    align-items: center;
    margin: 30px 0;
}


.mastdlp_page_container #mastdlp_supervision_question_box #mastdlp_supervision_form {
    margin: 24px 0 24px 0;
}


.mastdlp_page_container #mastdlp_supervision_question_box #supervisor_response_form {
    margin: 24px 0 24px 0;
}




.mastdlp_page_container #mastdlp_supervision_question_box #mastdlp_supervision_form label {
    font-size: 1.3rem;
    font-weight: 500;
    margin-bottom: 8px;
}


.mastdlp_page_container #mastdlp_supervision_question_box #mastdlp_supervision_form input, .mastdlp_page_container #mastdlp_supervision_question_box #mastdlp_supervision_form  textarea {
    margin: 4px 0 24px 0;
}


.mastdlp_page_container #mastdlp_supervision_question_box svg {
  width: 30px;
  height: 30px;
  align-self: start;
  justify-self: center;
  margin-top: 30%;
}

.mastdlp_page_container #mastdlp_supervision_question_box svg path {
  fill: #38302e;
}





/* ************************************* */
/* ********* STAFF DASHBOARD ********* */
/* ************************************* */


.mastdlp_page_container#mastdlp_staff_dashboard #dlp_table_key p {
    display: flex;
    align-items: start;
    margin-bottom: 10px;
}

.mastdlp_page_container#mastdlp_staff_dashboard #dlp_table_key svg {
    margin-right: 4px;
}

.mastdlp_page_container#mastdlp_staff_dashboard h3 a {
    font-size: 1.5rem;
    font-weight: 500;
    color: #fff;
}
.mastdlp_page_container#mastdlp_staff_dashboard h3 a:hover {
    text-decoration-line: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 2px;
    color: #fff;
}

.mastdlp_page_container#mastdlp_staff_dashboard #progress_table {
    width: 100%;
    border-left: 2px solid #5f3076;
    border-right: 2px solid #5f3076;
    border-bottom: 2px solid #5f3076;
}

.mastdlp_page_container#mastdlp_staff_dashboard .student_name_row {
    display: grid;
    position: relative;
    align-items: center;
    grid-template-columns: 14fr 4fr;
    gap: 0;
    background-color: #5f3076;
    color: #fff !important;
    border-top: 2px solid #5f3076;
    padding: 0 0;
}

.mastdlp_page_container#mastdlp_staff_dashboard .student_name_row h3 { 
    margin: 10px 0;
    color: #fff !important;
}

.mastdlp_page_container#mastdlp_staff_dashboard .student_name_row div {
    padding-left: 8px;
    position: relative;
    display: flex;
    flex-direction: row;
}

.mastdlp_page_container#mastdlp_staff_dashboard .student_name_row .final_grade_box {
    display: flex;
    align-items: center;
}


.mastdlp_page_container#mastdlp_staff_dashboard .student_name_row .final_grade_box h4 {
    font-size: 1.4rem;
    margin: 0;
    color: #fff;
}

.mastdlp_page_container#mastdlp_staff_dashboard .student_name_row .final_grade_box h4 span {
    font-weight: 300;
}

.mastdlp_page_container#mastdlp_staff_dashboard .staff_progress_table_row {
    display: grid;
    position: relative;
    grid-template-columns: repeat(var(--cols, 18), minmax(0, 1fr));
    gap: 0;
}

.mastdlp_page_container#mastdlp_staff_dashboard .staff_progress_table_row div.assignment_cell {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: stretch;
    overflow: hidden;
    }

.mastdlp_page_container#mastdlp_staff_dashboard .staff_progress_table_row div.assignment_cell:not(:last-of-type) { 
        border-right: 1px solid #5f3076;
}

.mastdlp_page_container#mastdlp_staff_dashboard .staff_progress_table_row div.assignment_cell div {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 3em;
}

.mastdlp_page_container#mastdlp_staff_dashboard .staff_progress_table_row div.supervision_cell p {
    font-weight: 700;
}

.mastdlp_page_container#mastdlp_staff_dashboard .staff_progress_table_row p {
    font-size: 1.1rem;
    margin: 0;
}

.mastdlp_page_container#mastdlp_staff_dashboard .assignment_number {
    font-weight: 500;
    border-top: 1px solid #5f3076;
    border-bottom: 1px solid #5f3076;
    background-color: #fffcf2;
    position: relative;
    padding-top: 1em;
}


.mastdlp_page_container#mastdlp_staff_dashboard .marked {
    background-color: lightgreen;
}

.mastdlp_page_container#mastdlp_staff_dashboard .marked_fail {
    background-color: orange;
}

.mastdlp_page_container#mastdlp_staff_dashboard .submitted {
    background-color: lightgreen;
}


.mastdlp_page_container#mastdlp_staff_dashboard .overdue {
    background-color: orange;
}




.mastdlp_page_container#mastdlp_staff_dashboard #progress_table_header div:not(:last-of-type) {
    border-right: 1px solid #5f3076;
}

.mastdlp_page_container#mastdlp_staff_dashboard .progress_table_row:not(#progress_table_header) {
    border-left: 1px solid #5f3076;
    border-right: 1px solid #5f3076;
    border-bottom: 1px solid #5f3076;
}


.mastdlp_page_container#mastdlp_staff_dashboard .progress_table_row div {
    border-right: 1px solid #5f3076;

} 

.mastdlp_page_container#mastdlp_staff_dashboard .withdrawn_student_overlay {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #ffffff88;
    z-index: 10;
}



/* ********************************************* */
/* ***** STAFF INDIVIDUAL STUDENT OVERVIEW ***** */
/* ********************************************* */

.mastdlp_page_container#mastdlp_staff_student_overview #dlp_table_key p {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.mastdlp_page_container#mastdlp_staff_student_overview #dlp_table_key svg {
    margin-right: 4px;
}

.mastdlp_page_container#mastdlp_staff_student_overview #wa_progress_table {
    width: 100%;
    margin-bottom: 40px;
    border: 1px solid white;
}


.mastdlp_page_container#mastdlp_staff_student_overview p {
    /* display: inline-block; */
    margin-bottom: 0;
}

.mastdlp_page_container#mastdlp_staff_student_overview p a {
    font-weight: 500;
}
.mastdlp_page_container#mastdlp_staff_student_overview p a:hover {
    text-decoration-line: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 2px;
    color: #000;
}

.mastdlp_page_container#mastdlp_staff_student_overview .progress_table_row div p b {
    font-weight: 600 !important;
}

.mastdlp_page_container#mastdlp_staff_student_overview #wa_progress_table .progress_table_row {
    display: grid;
    grid-template-columns: 3fr 2fr 2fr 2fr;
    column-gap: 0;
    row-gap: 0;
}

.mastdlp_page_container#mastdlp_staff_student_overview #wa_progress_table .progress_table_row.summary_row {
    display: grid;
    grid-template-columns: 3fr 6fr;
    column-gap: 0;
    row-gap: 0;
    background-color: #5f3076;
    color: #fff;
}

.mastdlp_page_container#mastdlp_staff_student_overview .progress_table_row.summary_row div:first-of-type p {
    font-weight: 600;
}

.mastdlp_page_container#mastdlp_staff_student_overview .progress_table_row.summary_row.course_grade {
    background-color: #5f3076;
    color: #fff;
}

.mastdlp_page_container#mastdlp_staff_student_overview #wa_progress_table_header {
    background-color: #5f3076;
    border-left: 1px solid #5f3076;
    border-right: 1px solid #5f3076;
    
}

.mastdlp_page_container#mastdlp_staff_student_overview #wa_progress_table_header div:not(:last-of-type) {
    border-right: 1px solid white;
}

.mastdlp_page_container#mastdlp_staff_student_overview #wa_progress_table_header h3 {
    color: #fff;
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 0;
}

.mastdlp_page_container#mastdlp_staff_student_overview .progress_table_row:not(#progress_table_header) {
    border-left: 1px solid #5f3076;
    border-right: 1px solid #5f3076;
    border-bottom: 1px solid #5f3076;
}

.mastdlp_page_container#mastdlp_staff_student_overview .progress_table_row div {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 20px;
}

.mastdlp_page_container#mastdlp_staff_student_overview .progress_table_row div:not(:last-of-type) {
    border-right: 1px solid #5f3076;

} 


.mastdlp_page_container#mastdlp_staff_student_overview #pa_dlp_table_key p {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.mastdlp_page_container#mastdlp_staff_student_overview #pa_dlp_table_key svg {
    margin-right: 4px;
}

.mastdlp_page_container#mastdlp_staff_student_overview #pa_progress_table {
    width: 100%;
    margin-bottom: 40px;
    border: 1px solid white;
}


.mastdlp_page_container#mastdlp_staff_student_overview p {
    /* display: inline-block; */
    margin-bottom: 0;
}

.mastdlp_page_container#mastdlp_staff_student_overview p a {
    font-weight: 500;
}
.mastdlp_page_container#mastdlp_staff_student_overview p a:hover {
    text-decoration-line: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 2px;
    color: #38302e;
}

.mastdlp_page_container#mastdlp_staff_student_overview .progress_table_row div p b {
    font-weight: 600 !important;
}

.mastdlp_page_container#mastdlp_staff_student_overview .progress_table_row {
    display: grid;
    grid-template-columns: 3fr 2fr 2fr 2fr;
    column-gap: 0;
    row-gap: 0;
}

.mastdlp_page_container#mastdlp_staff_student_overview #pa_progress_table .progress_table_row.summary_row {
    display: grid;
    grid-template-columns: 3fr 6fr;
    column-gap: 0;
    row-gap: 0;
    background-color: #5f3076;
    color: #fff;
}

.mastdlp_page_container#mastdlp_staff_student_overview .progress_table_row.summary_row div:not(:last-of-type) {
    border-right: 1px solid #fff;
}


.mastdlp_page_container#mastdlp_staff_student_overview .progress_table_row.summary_row div:first-of-type p {
    font-weight: 600;
}

.mastdlp_page_container#mastdlp_staff_student_overview .progress_table_row.summary_row.course_grade {
    background-color: #5f3076;
}

.mastdlp_page_container#mastdlp_staff_student_overview #pa_progress_table_header {
    background-color: #5f3076;
    border-left: 1px solid #5f3076;
    border-right: 1px solid #5f3076;
    
}

.mastdlp_page_container#mastdlp_staff_student_overview #pa_progress_table_header div:not(:last-of-type) {
    border-right: 1px solid white;
}

.mastdlp_page_container#mastdlp_staff_student_overview #pa_progress_table_header h3 {
    color: #fff;
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 0;
}

.mastdlp_page_container#mastdlp_staff_student_overview .progress_table_row:not(#progress_table_header) {
    border-left: 1px solid #5f3076;
    border-right: 1px solid #5f3076;
    border-bottom: 1px solid #5f3076;
}

.mastdlp_page_container#mastdlp_staff_student_overview .progress_table_row div {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 20px;
}

.mastdlp_page_container#mastdlp_staff_student_overview .progress_table_row div:not(:last-of-type) {
    border-right: 1px solid #5f3076;

} 


.mastdlp_page_container#mastdlp_staff_student_overview #final_grade_box {
    border-radius: 16px;
}

.mastdlp_page_container#mastdlp_staff_student_overview #final_grade_box #final_grade_form_wrapper {
    margin: 20px 0;
    z-index: 9;
    border-radius: 12px;
}

.mastdlp_page_container#mastdlp_staff_student_overview #final_grade_box #final_grade_form {
    padding: 20px 10px;
}

.mastdlp_page_container#mastdlp_staff_student_overview #final_grade_box form {
    display: flex;
    flex-direction: row;
    gap: 20px;
    align-items: center;
    margin: 0;
}

.mastdlp_page_container#mastdlp_staff_student_overview #final_grade_box form select#submission_mark {
    width: 10ch;
    font-size: 1.3rem;
    padding: 4px 12px;
    border-radius: 10px;
    border: 2px solid #5f3076;
}

.mastdlp_page_container#mastdlp_staff_student_overview #final_grade_box input[type="submit"] {
    font-size: 1.2rem;
    padding: 8px 16px;
}







/* ********************************************* */
/* *****   STAFF ASSIGNMENT DETAIL PAGE   ****** */
/* ********************************************* */



.mastdlp_page_container .mastdlp_staff_assignment_submission_grid .mastdlp_staff_assignment_submission_grid_row {
    display: grid;
    width: 100%;
    grid-template-columns: 150px 1fr 100px;
    column-gap: 0;
    row-gap: 0;
    margin: 1em 0;
}

.mastdlp_page_container .mastdlp_staff_assignment_submission_grid .mastdlp_staff_assignment_submission_grid_row .grid_row_title {
    font-weight: 600;
}



.mastdlp_page_container .mastdlp_staff_assignment_submission_grid .mastdlp_staff_assignment_submission_grid_row .mastdlp_staff_assignment_submission_status_box {
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
}


.mastdlp_page_container #mastdlp_staff_grade_form {
    display: flex;
    flex-direction: row;
    gap: 20px;
    align-items: center;
    margin: 2em 0;
    padding: 0 0 0 1em;
}

.mastdlp_page_container #mastdlp_staff_grade_form label {
    font-weight: 600;
}

.mastdlp_page_container #mastdlp_staff_grade_form select {
    width: 10ch;
}



.mastdlp_page_container #mastdlp_resubmission_form {
    margin: 2em 0;
    padding: 0 0 0 1em;
}

.mastdlp_page_container #mastdlp_resubmission_form label {
    font-size: 1.1rem;
    font-weight: 500;
}

.mastdlp_page_container #mastdlp_resubmission_form .resubsmission_qs {
    display: flex;
    gap: 20px;
    align-items: center;
    margin-bottom: 16px;
}



.mastdlp_page_container #mastdlp_resubmission_form input[type=date] {
    width: 16ch;
    place-content: center;
    border-radius: 4px;
    border: none;
}

.mastdlp_page_container #mastdlp_resubmission_form input[type="submit"] {
    font-size: 1.2rem;
    padding: 8px 16px;
}



/* ********************************************* */
/* *****   STAFF PRACTICAL ASSIGNMENT   ****** */
/* ********************************************* */

.mastdlp_page_container #safeguarding_form form {
    margin: 10px 0 !important;
}

.mastdlp_page_container #safeguarding_form .mast_radio_button {
    display: flex;
    gap: 20px;
    align-items: center;
    margin-bottom: 16px;
}

.mastdlp_page_container #safeguarding_form  #safeguarding_qs label {
    font-size: 1.2rem;
}

.mastdlp_page_container #safeguarding_form  input[type=radio] {
    appearance: none;
    -webkit-appearance: none;
    color: #38302e;
    width: 28px;
    height: 28px;
    background-color: #fff;
    border: 2px solid #38302e;
    border-radius: 50%;
    display: grid;
    place-content: center;
}

.mastdlp_page_container #safeguarding_form  input[type=radio]::before {
    content: "";
    width: 14px;
    height: 14px;
    border-radius: 50%;
    transform: scale(0);
    transition: 120ms transform ease-in-out;
    box-shadow: inset 1em 1em;
}

.mastdlp_page_container #safeguarding_form  input[type=radio]:checked::before {
  transform: scale(1);
}

.mastdlp_page_container #safeguarding_form  input[type=radio]:hover {
  outline: 1px solid #253e4a;
  outline-offset: -3px;
}


.mastdlp_page_container #safeguarding_form  #safeguarding_desc {
    padding: 10px 0;
    display: none;
}

.mastdlp_page_container #safeguarding_form  #safeguarding_description_label {
    font-size: 1.2rem;
}

.mastdlp_page_container #safeguarding_form  #safeguarding_qs:has(#yes_concerns:checked) ~ #safeguarding_desc {
    display: block !important;
}




.mastdlp_page_container #mastdlp_users_evaluation_feedback {
    border: 1px solid #aaa;
    width: 100% !important;
}

.mastdlp_page_container #mastdlp_users_evaluation_feedback {
    font-size: 1rem !important;
    font-weight: 500 !important;
}

.mastdlp_page_container #mastdlp_users_evaluation_feedback .ginput_container_likert { 
    padding: 0 !important;
    border: 0 !important;
    margin: -13px !important;
    border: 0 !important;
}


.mastdlp_page_container #mastdlp_users_evaluation_feedback .ginput_container_likert table { 
    padding: 0 !important;
    border: none !important;
    margin-bottom: 0 !important;
    table-layout: fixed;
}

.mastdlp_page_container #mastdlp_users_evaluation_feedback .mastdlp_feedback_entry_field {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 0;

}


.mastdlp_page_container #mastdlp_users_evaluation_feedback .mastdlp_feedback_entry_field div {
    padding: 12px;
    border: 1px solid #aaa;
}

.mastdlp_page_container #mastdlp_users_evaluation_feedback .gsurvey-likert-selected {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-color: #efddf8;
}


.mastdlp_page_container #mastdlp_users_evaluation_feedback .gsurvey-likert-selected::before {
    content: "✓";
    line-height: 1;
    font-size: 20px;
}



/* ********************************************* */
/* *****   SUPERVISOR DASHBOARD   ****** */
/* ********************************************* */

#supervision_progress_table p {
    display: inline-block;
    margin-bottom: 0;
}

#supervision_progress_table .supervision_table_row div > div p {
    font-size: 1rem;
}

#supervision_progress_table p a:hover {
    text-decoration-line: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 2px;
    color: #38302e;
}

#supervision_progress_table .supervision_table_row {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    column-gap: 0;
    row-gap: 0;
}

#supervision_progress_table {
    width: 100%;
    border-top: 1px solid #5f3076;
}

#supervision_progress_table .supervision_table_name_header_row {
    display: grid;
    grid-template-columns: 1fr;
    column-gap: 0;
    row-gap: 0;
    background-color: #5f3076;
    border-left: 1px solid #5f3076;
    border-right: 1px solid #5f3076;
    border-bottom: 1px solid #5f3076;
    color: #ffffff;
    padding: 8px 12px;
}


#supervision_progress_table .supervision_table_row.title_row .supervision_box_header {
    background-color: #efddf8;
}
#supervision_progress_table .supervision_table_row.title_row .supervision_box_header.supervision_date_box {
    background-color: #deb3f2;
}

#supervision_progress_table .supervision_table_row.title_row .supervision_box_header p {
    font-size: 1.1rem;
    font-weight: 600;
}
#supervision_progress_table .supervision_table_row.title_row .supervision_box_header a {
    font-size: 1.1rem;
    font-weight: 600;
    background-color: transparent;
}

#supervision_progress_table .supervision_date_box {
    background-color: #deb3f2;
}
#supervision_progress_table .supervision_date_box p {
    font-weight: 500;
}

#supervision_progress_table .supervision_table_name_header_row h3 {
    color: #ffffff;
    font-weight: 500;
    margin-bottom: 0;
}

#supervision_progress_table #supervision_table_name_header_row {
    background-color: #5f3076;
    border-left: 1px solid #5f3076;
    border-right: 1px solid #5f3076;
    
}

#supervision_progress_table .supervision_table_row {
    border-left: 1px solid #5f3076;
}


#supervision_progress_table .supervision_table_row div > div {
    padding: 6px 4px 6px 4px;
    border-right: 1px solid #5f3076;
    border-bottom: 1px solid #5f3076;

} 




/* ********************************************* */
/* *****   RECRUITMENT DASHBOARD   ****** */
/* ********************************************* */

#mastdlp_recruitment_dashboard #recruitment_page_header {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 24px 0;
}

#mastdlp_recruitment_dashboard #recruitment_page_header .recruitment_page_header_row {
    display: grid;
    grid-template-columns: 28rch 1fr;
    gap: 12px;
}

#mastdlp_recruitment_dashboard #recruitment_page_header .recruitment_page_header_row.mastdlp_narrow {
    grid-template-columns: 16rch 1fr;
}

#mastdlp_recruitment_dashboard #recruitment_page_header .recruitment_page_header_row  .recruitment_header_header {
    font-weight: 500;
}

#mastdlp_recruitment_dashboard #recruitment_page_header .recruitment_page_header_row a {
    text-decoration: underline;
}



#mastdlp_recruitment_dashboard #recruitment_overview_filter {
    width: 100%;
    margin: 12px 0 6px 0;
}

#mastdlp_recruitment_dashboard #recruitment_overview_filter form {
    width: 30ch;
    float: right;
}


#mastdlp_recruitment_dashboard #recruitment_table {
    border: 1px solid white;
    margin: 0 0 24px 0;
}

#mastdlp_recruitment_dashboard #recruitment_table p {
    display: inline-block;
    margin-bottom: 0;
}

#mastdlp_recruitment_dashboard #recruitment_table p a {
    font-weight: 500;
}
#mastdlp_recruitment_dashboard #recruitment_table p a:hover {
    text-decoration-line: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 2px;
    color: #38302e;
}

#mastdlp_recruitment_dashboard #recruitment_table .recruitment_table_row div p b {
    font-weight: 600 !important;
}

#mastdlp_recruitment_dashboard #recruitment_table .recruitment_table_row {
    display: grid;
    grid-template-columns: 2fr 1fr 2fr 1fr;
    column-gap: 0;
    row-gap: 0;
}

#mastdlp_recruitment_dashboard #recruitment_table #recruitment_table_header {
    background-color: #5f3076;
    border-left: 1px solid #5f3076;
    border-right: 1px solid #5f3076;
    color: #fff;
    
}

#mastdlp_recruitment_dashboard #recruitment_table #recruitment_table_header div:not(:last-of-type) {
    border-right: 1px solid white;
}

#mastdlp_recruitment_dashboard #recruitment_table #recruitment_table_header h3 {
    color: #fff;
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 0;
}

#mastdlp_recruitment_dashboard #recruitment_table .recruitment_table_row:not(#recruitment_table_header) {
    border-left: 1px solid #5f3076;
    border-right: 1px solid #5f3076;
    border-bottom: 1px solid #5f3076;
}

#mastdlp_recruitment_dashboard #recruitment_table .recruitment_table_row div {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px;
}

#mastdlp_recruitment_dashboard #recruitment_table .recruitment_table_row div:not(:last-of-type) {
    border-right: 1px solid #5f3076;
}


#mastdlp_recruitment_dashboard #update_application_stage_form_div {
    width: 300px;
    display: flex;
    flex-direction: column;
}

#mastdlp_recruitment_dashboard #update_application_stage_form input[type="submit"] {
    margin-top: 12px !important;
}


#mastdlp_recruitment_dashboard #update_application_fees_form {
    width: 300px;
    display: flex;
    flex-direction: column;
}


#mastdlp_recruitment_dashboard #update_application_fees_form div {
    display: flex;
    flex-direction: row;
    gap: 12px;
    align-items: center;
}


#mastdlp_recruitment_dashboard #update_application_fees_form div span {
    font-weight: 500;
    font-size: 1.3rem;
}

#mastdlp_recruitment_dashboard #account_set_up_form #new_email_section {
    display: none;
}

#mastdlp_recruitment_dashboard #account_set_up_form #account_email_qs:has(#use_new_email:checked) ~ #new_email_section {
    display: block !important;
}

#mastdlp_recruitment_dashboard #account_set_up_form #new_email_section {
    margin-top: 12px;
}

#mastdlp_recruitment_dashboard #account_set_up_form input[type="submit"] {
    margin-top: 12px !important;
}


#mastdlp_recruitment_dashboard #account_set_up_form .mast_radio_button {
    display: flex;
    gap: 20px;
    align-items: center;
    margin-bottom: 16px;
}

#mastdlp_recruitment_dashboard #account_set_up_form input[type=radio] {
    appearance: none;
    -webkit-appearance: none;
    color: #38302e;
    width: 28px;
    height: 28px;
    background-color: #fff;
    border: 2px solid #38302e;
    border-radius: 50%;
    display: grid;
    place-content: center;
}

#mastdlp_recruitment_dashboard #account_set_up_form input[type=radio]::before {
    content: "";
    width: 14px;
    height: 14px;
    border-radius: 50%;
    transform: scale(0);
    transition: 120ms transform ease-in-out;
    box-shadow: inset 1em 1em;
}

#mastdlp_recruitment_dashboard #account_set_up_form input[type=radio]:checked::before {
  transform: scale(1);
}

#mastdlp_recruitment_dashboard #account_set_up_form input[type=radio]:hover {
  outline: 1px solid #38302e;
  outline-offset: -3px;
}

#mastdlp_recruitment_dashboard #account_set_up_form input[type=text] {
    max-width: 60rch;
}

.mastdlp_page_container #mastdlp_app_form_title_row {
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center !important;
    column-gap: 1em;
    margin-top: 2em;
    margin-bottom: 1em;
}

.mastdlp_page_container #mastdlp_app_form_title_row h2 {
    margin: 0 !important;
    line-height: 0;

}

.mastdlp_page_container #application_form_output {
    border: 1px solid #38302e;
    font-size: 1rem !important;
    overflow: hidden;
    max-height: 9999px;
    opacity: 1;
    transition: max-height 0.5s, opacity 0.5s;
}

.mastdlp_page_container #application_form_output.hide_app_form {
    max-height: 0 !important;
    opacity: 0 !important
}


.mastdlp_page_container #mastdlp_application_form a {
    font-size: 1rem !important;
}

.mastdlp_page_container #mastdlp_application_form .mastdlp_application_entry_field {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 0;
}
.mastdlp_page_container #mastdlp_application_form .mastdlp_application_entry_field  .mastdlp_application_entry_label {
    font-weight: 600;
}

.mastdlp_page_container #mastdlp_application_form .mastdlp_application_entry_field div {
    position: relative;
    padding: 12px;
    border: 1px solid #38302e;
}

.mastdlp_page_container #mastdlp_application_form .mastdlp_application_entry_field ul {
  padding-left: 20px; 
}

.mastdlp_page_container #mastdlp_application_form .mastdlp_application_entry_field ul li::marker {
  content: "✓ ";
  font-size: 20px;
  color: #38302e;
}
.mastdlp_page_container #mastdlp_application_form .mastdlp_application_entry_field .map-it-link {
    display: inline-block;
    background-color: #5f3076;
    color: white;
    padding: 8px 12px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
    position: absolute;
    top: 8px;
    right: 8px;
}


#mastdlp_recruitment_waiting #recruitment_page_header {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 24px 0;
}

#mastdlp_recruitment_waiting #recruitment_page_header .recruitment_page_header_row {
    display: grid;
    grid-template-columns: 38rch 1fr;
    gap: 12px;
}

#mastdlp_recruitment_waiting #recruitment_page_header .recruitment_page_header_row.mastdlp_narrow {
    grid-template-columns: 16rch 1fr;
}

#mastdlp_recruitment_waiting #recruitment_page_header .recruitment_page_header_row  .recruitment_header_header {
    font-weight: 500;
}

#mastdlp_recruitment_waiting #recruitment_page_header .recruitment_page_header_row a {
    text-decoration: underline;
}


#mastdlp_recruitment_waiting #waiting_list_table {
    border: 1px solid white;
    margin: 0 0 24px 0;
    width: 100% !important;
}

#mastdlp_recruitment_waiting #waiting_list_table p {
    display: inline-block;
    margin-bottom: 0;
}

#mastdlp_recruitment_waiting #waiting_list_table .waiting_list_table_row div p b {
    font-weight: 600 !important;
}

#mastdlp_recruitment_waiting #waiting_list_table .waiting_list_table_row {
    display: grid;
    grid-template-columns: 3fr 3fr 2fr;
    column-gap: 0;
    row-gap: 0;
}

#mastdlp_recruitment_waiting #waiting_list_table #waiting_list_table_header {
    background-color: #5f3076;
    border-left: 1px solid #5f3076;
    border-right: 1px solid #5f3076;
    
}

#mastdlp_recruitment_waiting #waiting_list_table #waiting_list_table_header div:not(:last-of-type) {
    border-right: 1px solid white;
}

#mastdlp_recruitment_waiting #waiting_list_table #waiting_list_table_header h3 {
    color: #fff;
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 0;
}

#mastdlp_recruitment_waiting #waiting_list_table .waiting_list_table_row:not(#waiting_list_table_header) {
    border-left: 1px solid #5f3076;
    border-right: 1px solid #5f3076;
    border-bottom: 1px solid #5f3076;
}

#mastdlp_recruitment_waiting #waiting_list_table .waiting_list_table_row div {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px;
}

#mastdlp_recruitment_waiting #waiting_list_table .waiting_list_table_row div:not(:last-of-type) {
    border-right: 1px solid #5f3076;

} 

























/* ******************************************************** */
/* ****************  TABLETS  768 - 1024px  *************** */
/* ******************************************************** */
/* Elementor viewport_md = 768, viewport_lg = 1025, so the    */
/* tablet band is 768px - 1024px inclusive.                   */

@media only screen and (min-width: 768px) and (max-width: 1024px) {

    .mastdlp_full_page_wrapper {
        padding: 30px 24px;
    }

    /* The three hard-coded 1100px widths would overflow the viewport. */
    .mastdlp_page_container,
    .mastdlp_page_container .transparent_box,
    .mastdlp_page_container #assignment_header .assignment_form_row {
        width: 100%;
        max-width: 100%;
    }

    /* Staff dashboard: wrap the assignment strip onto 8 columns per line. */
    .mastdlp_page_container#mastdlp_staff_dashboard .student_name_row {
        grid-template-columns: 1fr;
        padding: 10px 0;
    }

    .mastdlp_page_container#mastdlp_staff_dashboard .staff_progress_table_row {
        grid-template-columns: repeat(8, minmax(0, 1fr));
    }

    .mastdlp_page_container#mastdlp_staff_dashboard .staff_progress_table_row div.assignment_cell {
        border-bottom: 1px solid var(--mastdlp-purple);
    }

    /* Supervisor dashboard: 10 fixed columns is too many at this width. */
    #supervision_progress_table .supervision_table_row {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    /* Header label columns are sized in rch; trim them to buy content space. */
    #mastdlp_recruitment_dashboard #recruitment_page_header .recruitment_page_header_row {
        grid-template-columns: 20rch 1fr;
    }

    #mastdlp_recruitment_waiting #recruitment_page_header .recruitment_page_header_row {
        grid-template-columns: 26rch 1fr;
    }

    #student_account_header .student_account_header_row {
        grid-template-columns: 140px 1fr 130px;
    }

    /*
     * The 5-column edit form (180px 1fr 120px 1fr 100px) cannot shrink below
     * the intrinsic width of its two text inputs, so it pushes the adjacent
     * Cancel button off-screen at this width. Collapse it to label / input
     * pairs, matching the mobile treatment. Used by six templates.
     */
    #student_account_header .student_account_form_row {
        grid-template-columns: 1fr;
        row-gap: 12px;
    }

    #student_account_header form {
        grid-template-columns: minmax(0, 160px) minmax(0, 1fr);
        margin: 0;
    }

    #student_account_header form > div:empty {
        display: none;
    }

    #student_account_header form .mastdlp_second_row_label {
        justify-self: start !important;
    }

    #student_account_header form #user_email {
        grid-column: auto !important;
    }

    #student_account_header form input[type=text],
    #student_account_header form input[type=email],
    #student_account_header form input[type=tel] {
        width: 100%;
        min-width: 0;
    }

    #student_account_header button,
    #student_account_header form input[type=submit] {
        justify-self: start !important;
        align-self: center;
    }

    .mastdlp_page_container #assignment_header form {
        grid-template-columns: minmax(0, 150px) minmax(0, 1fr);
    }

    .mastdlp_page_container #assignment_header form > div:empty {
        display: none;
    }

    .mastdlp_page_container #assignment_header form #user_email {
        grid-column: auto !important;
    }

    .mastdlp_page_container #assignment_header form .mastdlp_second_row_label {
        justify-self: start !important;
    }

    .mastdlp_page_container #assignment_header .assignment_form_row {
        grid-template-columns: 1fr;
        row-gap: 12px;
    }

}


/* ******************************************************** */
/* ****************  MOBILES  up to 767px  **************** */
/* ******************************************************** */
/*
 * Typography note: this plugin declares no font-family anywhere, and
 * Elementor already publishes its mobile type scale globally
 * (body 1.125rem, h1 2.4rem, h2 2rem, h3 1.4rem, Montserrat / Nunito).
 * Below we therefore only re-scale the sizes the *plugin itself* pins,
 * so that headings and body copy stay identical to the rest of the site.
 */

@media only screen and (max-width: 767px) {

    /* ------------------------------------------------- */
    /* 1. PAGE SHELL                                     */
    /* ------------------------------------------------- */

    .mastdlp_full_page_wrapper {
        padding: 24px 16px;
    }

    .mastdlp_page_container {
        width: 100%;
        max-width: 100%;
        min-height: 60vh !important;      /* 800px leaves a huge empty gap on a phone */
        align-items: stretch;             /* children fill the width instead of hugging content */
        overflow-x: clip;                 /* belt-and-braces against stray overflow */
    }

    /* Nothing inside a flex/grid track may refuse to shrink. */
    .mastdlp_page_container * {
        min-width: 0;
    }

    /* Emails, filenames and URLs are the usual cause of sideways scroll. */
    .mastdlp_page_container p,
    .mastdlp_page_container a,
    .mastdlp_page_container li,
    .mastdlp_page_container h1,
    .mastdlp_page_container h2,
    .mastdlp_page_container h3,
    .mastdlp_page_container h4 {
        overflow-wrap: anywhere;
    }

    .mastdlp_page_container .transparent_box {
        width: 100%;
        max-width: 100%;
        margin: 16px 0;
    }

    .mastdlp_page_container .shaded_box {
        border-radius: 16px;
        padding: 20px 16px;
        margin: 16px 0;
    }

    #toTopBtn {
        bottom: 16px;
        right: 16px;
        padding: 10px 16px !important;
        font-size: 1rem !important;
    }

    /* ------------------------------------------------- */
    /* 2. BUTTONS & CONTROLS - 44px tap targets          */
    /* ------------------------------------------------- */

    .gform_button,
    .gform_button_select_files,
    button.mastdlp_small_button,
    input[type=submit].mastdlp_small_button,
    .mastdlp_small_button {
        padding: 14px 20px !important;    /* 17.6px text + 28px = 45.6px tall */
        width: auto;
        max-width: 100%;
    }

    button.mastdlp_tiny_button,
    input[type=submit].mastdlp_tiny_button {
        padding: 15px 18px !important;   /* 14.4px text + 30px = 44.4px tall */
    }

    /* Native controls: >=16px avoids the iOS auto-zoom on focus. */
    .mastdlp_page_container input[type=text],
    .mastdlp_page_container input[type=email],
    .mastdlp_page_container input[type=tel],
    .mastdlp_page_container input[type=number],
    .mastdlp_page_container input[type=date],
    .mastdlp_page_container select,
    .mastdlp_page_container textarea {
        width: 100%;
        max-width: 100%;
        font-size: 1.125rem;
        min-height: 44px;
    }

    .mastdlp_page_container textarea {
        min-height: 120px;
    }

    #mastdlp_course_presentation_chooser {
        width: 100%;
        max-width: 100%;
        min-height: 44px;
        padding: 10px 12px;
        font-size: 1.125rem;
        color: var(--mastdlp-text);
        background-color: var(--mastdlp-white);
        border: 2px solid var(--mastdlp-purple);
        border-radius: 8px;
    }

    /* ------------------------------------------------- */
    /* 3. BREADCRUMBS & CONFIRMATION MESSAGES            */
    /* ------------------------------------------------- */

    #mastdlp_breadcrumbs {
        display: block;               /* the trailing text node must be able to wrap */
        line-height: 1.4;
        margin-bottom: 1.5em;
    }

    #mastdlp_confirmation_message_box {
        padding: 16px 48px 16px 16px;  /* clear the dismiss control */
    }

    #mastdlp_confirmation_message_box h2 {
        font-size: 1.4rem;
    }

    #mastdlp_confirmation_message_box #mastdlp_confirmation_message_box_dismiss {
        top: 2px;
        right: 2px;
        padding: 11px 16px;
        font-size: 1.4rem;
    }

    /* ------------------------------------------------- */
    /* 4. PAGE HEADER / COURSE SELECTOR                  */
    /* ------------------------------------------------- */

    .mastdlp_page_container #student_page_header {
        grid-template-columns: 1fr;
        row-gap: 8px;
        margin: 12px 0 28px 0;
    }

    /* ------------------------------------------------- */
    /* 5. DATA TABLES -> STACKED CARDS                   */
    /* ------------------------------------------------- */
    /*
     * Each row becomes a self-contained card. The first cell is the card
     * header (the assignment title / person's name identifies the row, so
     * labelling it would read redundantly); every other cell carries a
     * data-label written by the template from mastdlp_progress_columns(),
     * the same translated array that produces the desktop header row.
     *
     * SPECIFICITY: the desktop rules that set `display: grid` on these rows
     * are written with the container ID in the path, e.g.
     *   #mastdlp_student_dashboard #written_assignments_container .progress_table_row
     * which scores (2,1,0). Selectors here must therefore carry the same
     * container ID, otherwise the grid wins and the labels get injected into
     * four squeezed columns instead of stacking. Every selector below is
     * deliberately anchored to its container for that reason.
     *
     * Labelled cells stay display:flex rather than becoming a 2-column grid,
     * because a cell may hold a <p> plus a notification <span> or an inline
     * status SVG. Under grid those would land in separate columns; under flex
     * the ::before label takes a fixed basis and the existing children flow
     * after it, so no inner markup had to change.
     */

    /* --- containers: drop the desktop frame --- */
    #mastdlp_student_dashboard #written_assignments_container #wa_progress_table,
    #mastdlp_student_dashboard #practical_assignments_container #pa_progress_table,
    .mastdlp_page_container#mastdlp_staff_student_overview #wa_progress_table,
    .mastdlp_page_container#mastdlp_staff_student_overview #pa_progress_table,
    #mastdlp_recruitment_dashboard #recruitment_table,
    #mastdlp_recruitment_waiting #waiting_list_table {
        width: 100%;
        max-width: 100%;
        border: none;
    }

    /* --- header rows: redundant, every cell carries its own label --- */
    #mastdlp_student_dashboard #written_assignments_container #wa_progress_table_header,
    #mastdlp_student_dashboard #practical_assignments_container #pa_progress_table_header,
    .mastdlp_page_container#mastdlp_staff_student_overview #wa_progress_table #wa_progress_table_header,
    .mastdlp_page_container#mastdlp_staff_student_overview #pa_progress_table #pa_progress_table_header,
    #mastdlp_recruitment_dashboard #recruitment_table #recruitment_table_header,
    #mastdlp_recruitment_waiting #waiting_list_table #waiting_list_table_header {
        display: none;
    }

    /* --- the card --- */
    #mastdlp_student_dashboard #written_assignments_container .progress_table_row:not(.summary_row),
    #mastdlp_student_dashboard #practical_assignments_container .progress_table_row:not(.summary_row),
    .mastdlp_page_container#mastdlp_staff_student_overview #wa_progress_table .progress_table_row:not(.summary_row),
    .mastdlp_page_container#mastdlp_staff_student_overview #pa_progress_table .progress_table_row:not(.summary_row),
    #mastdlp_recruitment_dashboard #recruitment_table .recruitment_table_row,
    #mastdlp_recruitment_waiting #waiting_list_table .waiting_list_table_row {
        display: block;
        min-width: 0;
        margin: 0 0 16px 0;
        padding: 0;
        border: 1px solid var(--mastdlp-purple);
        border-radius: 12px;
        overflow: hidden;
        background-color: var(--mastdlp-cream);
    }

    /* --- card header: the unlabelled first cell --- */
    #mastdlp_student_dashboard #written_assignments_container .progress_table_row:not(.summary_row) > div:not([data-label]),
    #mastdlp_student_dashboard #practical_assignments_container .progress_table_row:not(.summary_row) > div:not([data-label]),
    .mastdlp_page_container#mastdlp_staff_student_overview #wa_progress_table .progress_table_row:not(.summary_row) > div:not([data-label]),
    .mastdlp_page_container#mastdlp_staff_student_overview #pa_progress_table .progress_table_row:not(.summary_row) > div:not([data-label]),
    #mastdlp_recruitment_dashboard #recruitment_table .recruitment_table_row > div:not([data-label]),
    #mastdlp_recruitment_waiting #waiting_list_table .waiting_list_table_row > div:not([data-label]) {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
        width: auto;
        padding: 12px 14px;
        border: none;
        background-color: var(--mastdlp-cyan-pale);
    }

    /* --- labelled rows within the card --- */
    #mastdlp_student_dashboard #written_assignments_container .progress_table_row > div[data-label],
    #mastdlp_student_dashboard #practical_assignments_container .progress_table_row > div[data-label],
    .mastdlp_page_container#mastdlp_staff_student_overview #wa_progress_table .progress_table_row > div[data-label],
    .mastdlp_page_container#mastdlp_staff_student_overview #pa_progress_table .progress_table_row > div[data-label],
    #mastdlp_recruitment_dashboard #recruitment_table .recruitment_table_row > div[data-label],
    #mastdlp_recruitment_waiting #waiting_list_table .waiting_list_table_row > div[data-label] {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 4px 10px;
        width: auto;
        padding: 10px 14px;
        border: none;
        border-top: 1px solid var(--mastdlp-lilac-light);
    }

    #mastdlp_student_dashboard #written_assignments_container .progress_table_row > div[data-label]::before,
    #mastdlp_student_dashboard #practical_assignments_container .progress_table_row > div[data-label]::before,
    .mastdlp_page_container#mastdlp_staff_student_overview #wa_progress_table .progress_table_row > div[data-label]::before,
    .mastdlp_page_container#mastdlp_staff_student_overview #pa_progress_table .progress_table_row > div[data-label]::before,
    #mastdlp_recruitment_dashboard #recruitment_table .recruitment_table_row > div[data-label]::before,
    #mastdlp_recruitment_waiting #waiting_list_table .waiting_list_table_row > div[data-label]::before {
        content: attr(data-label);
        flex: 0 0 38%;
        font-weight: 600;
        color: var(--mastdlp-text);
    }

    /* --- values must be free to wrap, not locked to a desktop width --- */
    #mastdlp_student_dashboard #written_assignments_container .progress_table_row > div > p,
    #mastdlp_student_dashboard #practical_assignments_container .progress_table_row > div > p,
    .mastdlp_page_container#mastdlp_staff_student_overview #wa_progress_table .progress_table_row > div > p,
    .mastdlp_page_container#mastdlp_staff_student_overview #pa_progress_table .progress_table_row > div > p,
    #mastdlp_recruitment_dashboard #recruitment_table .recruitment_table_row > div > p,
    #mastdlp_recruitment_waiting #waiting_list_table .waiting_list_table_row > div > p {
        margin: 0;
        min-width: 0;
        overflow-wrap: anywhere;
    }

    /* --- inline status icons sit with the value, not on their own line --- */
    #mastdlp_student_dashboard .progress_table_row > div[data-label] svg,
    .mastdlp_page_container#mastdlp_staff_student_overview .progress_table_row > div[data-label] svg {
        width: 22px;
        height: 22px;
        flex: 0 0 22px;
    }

    /* --- summary rows are already label + value pairs, so no card --- */
    #mastdlp_student_dashboard #written_assignments_container .progress_table_row.summary_row,
    #mastdlp_student_dashboard #practical_assignments_container .progress_table_row.summary_row,
    .mastdlp_page_container#mastdlp_staff_student_overview #wa_progress_table .progress_table_row.summary_row,
    .mastdlp_page_container#mastdlp_staff_student_overview #pa_progress_table .progress_table_row.summary_row {
        min-width: 0;
        border-radius: 12px;
        margin-bottom: 16px;
    }

    #mastdlp_student_dashboard #written_assignments_container .progress_table_row.summary_row div,
    #mastdlp_student_dashboard #practical_assignments_container .progress_table_row.summary_row div,
    .mastdlp_page_container#mastdlp_staff_student_overview #wa_progress_table .progress_table_row.summary_row div,
    .mastdlp_page_container#mastdlp_staff_student_overview #pa_progress_table .progress_table_row.summary_row div {
        padding: 12px 14px;
    }

    /* ------------------------------------------------- */
    /* 6. STUDENT DASHBOARD                              */
    /* ------------------------------------------------- */

    #mastdlp_student_dashboard #written_assignments_container,
    #mastdlp_student_dashboard #practical_assignments_container {
        margin-top: 28px;
    }

    #mastdlp_student_dashboard .mast_has_mail {
        background-color: var(--mastdlp-cyan-pale) !important;
    }

    .comment_notification_header_indicator {
        width: 24px;
        height: 24px;
        padding: 5px;
        flex: 0 0 auto;
    }

    #student_dashboard_title {
        flex-wrap: wrap;
        gap: 8px;
    }
    /* ------------------------------------------------- */
    /* 7. STAFF DASHBOARD                                */
    /* ------------------------------------------------- */

    .mastdlp_page_container#mastdlp_staff_dashboard {
        width: 100%;
        background-color: var(--mastdlp-cream);
    }

    .mastdlp_page_container#mastdlp_staff_dashboard #dlp_table_key p {
        font-size: 1rem;
        align-items: center;
        gap: 6px;
    }

    .mastdlp_page_container#mastdlp_staff_dashboard #dlp_table_key svg {
        width: 24px;
        height: 24px;
        flex: 0 0 24px;
        margin-right: 4px;
    }

    .mastdlp_page_container#mastdlp_staff_dashboard #progress_table {
        width: 100%;
        border-left: 2px solid var(--mastdlp-purple);
        border-right: 2px solid var(--mastdlp-purple);
        border-bottom: 2px solid var(--mastdlp-purple);
    }

    .mastdlp_page_container#mastdlp_staff_dashboard .student_name_row {
        grid-template-columns: 1fr;
        padding: 10px 12px;
        margin-top: 0;
        row-gap: 6px;
    }

    .mastdlp_page_container#mastdlp_staff_dashboard .student_name_row div {
        padding-left: 0;
        flex-wrap: wrap;
    }

    .mastdlp_page_container#mastdlp_staff_dashboard .student_name_row h3 {
        font-size: 1.4rem;
        margin: 0;
    }

    .mastdlp_page_container#mastdlp_staff_dashboard h3 a {
        font-size: 1.4rem;
    }

    .mastdlp_page_container#mastdlp_staff_dashboard .student_name_row .final_grade_box h4 {
        font-size: 1.1rem;
    }

    /*
     * The assignment strip is a single row of up to 18 cells on desktop.
     * On a phone it wraps into a 3-per-line grid of small status tiles.
     */
    .mastdlp_page_container#mastdlp_staff_dashboard .staff_progress_table_row {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .mastdlp_page_container#mastdlp_staff_dashboard .staff_progress_table_row div.assignment_cell,
    .mastdlp_page_container#mastdlp_staff_dashboard .staff_progress_table_row div.assignment_cell:not(:last-of-type) {
        border-right: 1px solid var(--mastdlp-purple);
        border-bottom: 1px solid var(--mastdlp-purple);
    }

    .mastdlp_page_container#mastdlp_staff_dashboard .staff_progress_table_row div.assignment_cell div {
        border: none;
        height: 2.8em;
    }

    /*
     * Status icons only. The child combinators matter: the status SVG is a
     * direct child of the cell's inner div, whereas the notification badge's
     * envelope sits one level deeper inside a span. A descendant selector
     * here would resize the badge icon too and burst it out of its circle.
     */
    .mastdlp_page_container#mastdlp_staff_dashboard .staff_progress_table_row div.assignment_cell > div > svg {
        width: 22px;
        height: 22px;
    }

    .mastdlp_page_container#mastdlp_staff_dashboard .staff_progress_table_row p {
        font-size: 1rem;
        text-align: center;
        line-height: 1.2;
    }

    .mastdlp_page_container#mastdlp_staff_dashboard .assignment_number {
        background-color: var(--mastdlp-cyan-pale);
        padding-top: 0.75em;
    }

    .comment_notification_indicator {
        width: 16px;
        height: 16px;
        padding: 3px;
    }

    /* ------------------------------------------------- */
    /* 8. STAFF INDIVIDUAL STUDENT OVERVIEW              */
    /* ------------------------------------------------- */

    .mastdlp_page_container#mastdlp_staff_student_overview {
        width: 100%;
    }

    .mastdlp_page_container#mastdlp_staff_student_overview #dlp_table_key p,
    .mastdlp_page_container#mastdlp_staff_student_overview #pa_dlp_table_key p {
        font-size: 1rem;
        gap: 6px;
    }

    .mastdlp_page_container#mastdlp_staff_student_overview #dlp_table_key svg,
    .mastdlp_page_container#mastdlp_staff_student_overview #pa_dlp_table_key svg {
        width: 24px;
        height: 24px;
        flex: 0 0 24px;
    }

    .student_overview_comment_notification_indicator {
        width: 22px;
        height: 22px;
        padding: 4px;
        margin-left: 8px;
        flex: 0 0 auto;
    }

    .mastdlp_page_container#mastdlp_staff_student_overview #final_grade_box form {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .mastdlp_page_container#mastdlp_staff_student_overview #final_grade_box form select#submission_mark {
        width: 100%;
        font-size: 1.125rem;
    }

    .mastdlp_page_container#mastdlp_staff_student_overview #final_grade_box #final_grade_form {
        padding: 12px 0;
    }

    /* ------------------------------------------------- */
    /* 9. SUPERVISOR DASHBOARD                           */
    /* ------------------------------------------------- */

    #supervision_progress_table .supervision_table_row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #supervision_progress_table .supervision_table_name_header_row {
        padding: 10px 12px;
    }

    #supervision_progress_table .supervision_table_name_header_row h3 {
        font-size: 1.3rem;
    }

    #supervision_progress_table .supervision_table_row div > div {
        padding: 10px 8px;
    }

    #supervision_progress_table .supervision_table_row.title_row .supervision_box_header p,
    #supervision_progress_table .supervision_table_row.title_row .supervision_box_header a,
    #supervision_progress_table .supervision_table_row div > div p {
        font-size: 1rem;
        line-height: 1.3;
    }

    /* ------------------------------------------------- */
    /* 10. STUDENT ACCOUNT                               */
    /* ------------------------------------------------- */
    /*
     * Each display row is [ label | value | Edit button ].
     * On mobile the label and button share the first line and the value
     * runs full width beneath, so long emails never squeeze the button.
     */

    #student_account_header .student_account_header_row {
        grid-template-columns: 1fr auto;
        column-gap: 12px;
        row-gap: 4px;
        padding: 10px 0;
        border-bottom: 1px solid var(--mastdlp-lilac-light);
    }

    #student_account_header .student_account_header_row > *:nth-child(1) {
        grid-column: 1;
        grid-row: 1;
    }

    #student_account_header .student_account_header_row > *:nth-child(3) {
        grid-column: 2;
        grid-row: 1;
        justify-self: end;
    }

    #student_account_header .student_account_header_row > *:nth-child(2) {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    #student_account_header .student_account_header_row ul {
        margin: 0;
    }

    #student_account_header .student_account_form_row {
        position: static;
        grid-template-columns: 1fr;
        row-gap: 12px;
        padding: 16px 12px;
    }

    #student_account_header form {
        grid-template-columns: 1fr;
        gap: 6px;
        margin: 0;
    }

    /* Spacer cells exist only to fill the 5-column desktop grid. */
    #student_account_header form > div:empty,
    #student_account_header .student_account_header_row > div:empty {
        display: none;
    }

    #student_account_header form .mastdlp_second_row_label {
        justify-self: start !important;
        margin-top: 8px;
    }

    #student_account_header form #user_email {
        grid-column: auto !important;
    }

    /* The desktop rule pins Submit to the corner; in a stacked form it flows. */
    #student_account_header button,
    #student_account_header form input[type=submit] {
        position: static;
        justify-self: start !important;
        align-self: center;
        width: auto;
    }

    .student_account_header_row button {
        float: none;
    }

    /* ------------------------------------------------- */
    /* 11. ASSIGNMENT HEADER                             */
    /* ------------------------------------------------- */
    /*
     * Label above value. Label widths differ a lot between English,
     * Romanian and Georgian, so a fixed label column is not safe here.
     */

    .mastdlp_page_container #assignment_header {
        width: 100%;
        margin-bottom: 8px;
    }

    .mastdlp_page_container #assignment_header .assignment_header_row {
        grid-template-columns: 1fr;
        row-gap: 2px;
        padding: 8px 0;
        border-bottom: 1px solid var(--mastdlp-lilac-light);
    }

    .mastdlp_page_container #assignment_header .assignment_header_row > div:empty {
        display: none;
    }

    .mastdlp_page_container #assignment_header .assignment_header_row.assignment_grade_row {
        padding: 12px;
        border-bottom: none;
    }

    .mastdlp_page_container #assignment_header .assignment_form_row {
        width: 100%;
        grid-template-columns: 1fr;
        row-gap: 12px;
        padding: 16px 12px;
    }

    .mastdlp_page_container #assignment_header form {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .mastdlp_page_container #assignment_header form > div:empty {
        display: none;
    }

    .mastdlp_page_container #assignment_header form .mastdlp_second_row_label {
        justify-self: start !important;
        margin-top: 8px;
    }

    .mastdlp_page_container #assignment_header form #user_email {
        grid-column: auto !important;
    }

    .mastdlp_page_container #assignment_header button,
    .mastdlp_page_container #assignment_header form input[type=submit] {
        justify-self: start !important;
    }

    /* ------------------------------------------------- */
    /* 12. FILE UPLOADS                                  */
    /* ------------------------------------------------- */

    .mastdlp_page_container .file_uploads .file_uploads_row {
        grid-template-columns: 34px 1fr;
        column-gap: 10px;
        row-gap: 8px;
        padding: 8px 0;
    }

    .mastdlp_page_container .file_uploads .file_uploads_row svg {
        width: 30px;
        height: 30px;
    }

    /* The action button drops to its own full-width line. */
    .mastdlp_page_container .file_uploads .file_uploads_row > div:nth-child(3) {
        grid-column: 1 / -1;
        justify-self: start;
    }

    .mastdlp_page_container .file_uploads .mastdlp_supervision_file_grid {
        grid-template-columns: 30px 1fr;
        column-gap: 10px;
        row-gap: 8px;
        padding: 8px 0;
    }

    /* [ title ] / [ icon | filename ] / [ button ] */
    .mastdlp_page_container .file_uploads .mastdlp_supervision_file_grid > div:nth-child(1),
    .mastdlp_page_container .file_uploads .mastdlp_supervision_file_grid > div:nth-child(4) {
        grid-column: 1 / -1;
        justify-self: start;
    }

    .mastdlp_page_container .file_uploads .file_uploads_row a,
    .mastdlp_page_container .file_uploads .mastdlp_supervision_file_grid a {
        overflow-wrap: anywhere;
    }

    /* ------------------------------------------------- */
    /* 13. COMMENTS                                      */
    /* ------------------------------------------------- */

    .mastdlp_page_container #mastdlp_comments_section {
        margin-top: 40px;
    }

    /* Leave room for the absolutely positioned Show / Hide control. */
    .mastdlp_page_container .mastdlp_comments_box {
        padding-top: 64px;
    }

    .mastdlp_show_hide_comments_div_link {
        top: 16px;
        right: 16px;
    }

    .mastdlp_page_container .dlp_top_level_comment {
        padding: 20px 16px;
        margin: 16px 0;
    }

    .mastdlp_page_container .dlp_top_level_comment .dlp_top_level_comment_header,
    .mastdlp_page_container #mastdlp_supervision_question_box .dlp_comment_header {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }

    .mastdlp_page_container .dlp_comment_date {
        font-size: 1rem;
    }

    .mastdlp_page_container .dlp_top_level_comment .dlp_reply_wrapper,
    .mastdlp_page_container #mastdlp_supervision_question_box .dlp_reply_wrapper {
        grid-template-columns: 34px 1fr;
        column-gap: 8px;
        padding: 8px 0;
        margin-top: 16px;
        align-items: start;
    }

    .mastdlp_page_container .mastdlp_comments_box svg,
    .mastdlp_page_container #mastdlp_supervision_question_box svg {
        width: 24px;
        height: 24px;
        margin-top: 4px;
    }

    .mastdlp_page_container .dlp_top_level_comment .dlp_comment_reply_box {
        grid-template-columns: 1fr;
        row-gap: 8px;
        margin: 12px 0 0 0;
    }

    .mastdlp_page_container .mastdlp_comment_form label {
        font-size: 1.1rem;
        display: block;
    }

    .mastdlp_page_container .mastdlp_comment_form textarea {
        width: 100%;
    }

    .mastdlp_comment_file_link {
        flex-wrap: wrap;
        margin-top: 16px !important;
    }

    .comment_history_link {
        margin-bottom: 24px !important;
    }

    /* ------------------------------------------------- */
    /* 14. SUPERVISION                                   */
    /* ------------------------------------------------- */

    .mastdlp_page_container #mastdlp_supervision_question_box .dlp_supervision_text_box {
        padding-left: 0;
    }

    .mastdlp_page_container #mastdlp_supervision_question_box #mastdlp_supervision_form label {
        font-size: 1.1rem;
        display: block;
    }

    /* ------------------------------------------------- */
    /* 15. SESSION DATE CHOOSER                          */
    /* ------------------------------------------------- */

    .mastdlp_page_container#mastdlp_assignment_date_chooser form .form_row {
        flex-direction: column;
        align-items: stretch;
        row-gap: 8px;
        margin-bottom: 16px;
    }

    .mastdlp_page_container#mastdlp_assignment_date_chooser form .form_row .form_inputs {
        grid-template-columns: 1fr;
        row-gap: 10px;
        padding: 12px;
        border-radius: 12px;
    }

    .mastdlp_page_container#mastdlp_assignment_date_chooser form label {
        font-size: 1.1rem;
        line-height: 1.3;
    }

    .mastdlp_page_container#mastdlp_assignment_date_chooser form p {
        line-height: 1.3;
        font-size: 1rem;
    }

    .mastdlp_page_container#mastdlp_assignment_date_chooser form input[type=submit] {
        margin-top: 20px;
    }

    /* ------------------------------------------------- */
    /* 16. STAFF ASSIGNMENT DETAIL                       */
    /* ------------------------------------------------- */

    .mastdlp_page_container .mastdlp_staff_assignment_submission_grid .mastdlp_staff_assignment_submission_grid_row {
        grid-template-columns: 1fr;
        row-gap: 2px;
        margin: 0.75em 0;
        padding-bottom: 0.75em;
        border-bottom: 1px solid var(--mastdlp-lilac-light);
    }

    .mastdlp_page_container .mastdlp_staff_assignment_submission_grid .mastdlp_staff_assignment_submission_grid_row > div:empty {
        display: none;
    }

    .mastdlp_page_container #mastdlp_staff_grade_form {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding: 0;
        margin: 1.5em 0;
    }

    .mastdlp_page_container #mastdlp_staff_grade_form select {
        width: 100%;
    }

    .mastdlp_page_container #mastdlp_resubmission_form {
        padding: 0;
        margin: 1.5em 0;
    }

    .mastdlp_page_container #mastdlp_resubmission_form .resubsmission_qs {
        flex-wrap: wrap;
        gap: 12px;
    }

    .mastdlp_page_container #mastdlp_resubmission_form input[type=date] {
        width: 100%;
    }

    /* ------------------------------------------------- */
    /* 17. SAFEGUARDING                                  */
    /* ------------------------------------------------- */

    .safeguarding_text {
        grid-template-columns: 40px 1fr;
        gap: 8px;
    }

    .safeguarding_text svg {
        width: 34px;
        height: 34px;
    }

    .mastdlp_page_container #safeguarding_form .mast_radio_button,
    #mastdlp_recruitment_dashboard #account_set_up_form .mast_radio_button {
        gap: 12px;
        align-items: flex-start;
    }

    .mastdlp_page_container #safeguarding_form input[type=radio],
    #mastdlp_recruitment_dashboard #account_set_up_form input[type=radio] {
        flex: 0 0 28px;
        min-height: 28px;
        margin-top: 2px;
    }

    .mastdlp_page_container #safeguarding_form #safeguarding_qs label,
    .mastdlp_page_container #safeguarding_form #safeguarding_description_label {
        font-size: 1.1rem;
        line-height: 1.3;
    }

    /* ------------------------------------------------- */
    /* 18. FEEDBACK / LIKERT SUMMARY                     */
    /* ------------------------------------------------- */

    .mastdlp_page_container #mastdlp_users_evaluation_feedback .mastdlp_feedback_entry_field {
        grid-template-columns: 1fr;
    }

    .mastdlp_page_container #mastdlp_users_evaluation_feedback .mastdlp_feedback_entry_field div {
        padding: 10px;
    }

    /* Likert tables cannot compress below their column count. */
    .mastdlp_page_container #mastdlp_users_evaluation_feedback .ginput_container_likert {
        overflow-x: auto;
        margin: 0 !important;
    }

    /* ------------------------------------------------- */
    /* 19. RECRUITMENT DASHBOARD                         */
    /* ------------------------------------------------- */

    #mastdlp_recruitment_dashboard #recruitment_page_header,
    #mastdlp_recruitment_waiting #recruitment_page_header {
        gap: 0;
        margin: 16px 0;
    }

    #mastdlp_recruitment_dashboard #recruitment_page_header .recruitment_page_header_row,
    #mastdlp_recruitment_dashboard #recruitment_page_header .recruitment_page_header_row.mastdlp_narrow,
    #mastdlp_recruitment_waiting #recruitment_page_header .recruitment_page_header_row,
    #mastdlp_recruitment_waiting #recruitment_page_header .recruitment_page_header_row.mastdlp_narrow {
        grid-template-columns: 1fr;
        gap: 2px;
        padding: 8px 0;
        border-bottom: 1px solid var(--mastdlp-lilac-light);
    }

    #mastdlp_recruitment_dashboard #recruitment_overview_filter form {
        width: 100%;
        float: none;
    }

    #mastdlp_recruitment_dashboard #update_application_stage_form_div,
    #mastdlp_recruitment_dashboard #update_application_fees_form {
        width: 100%;
    }

    #mastdlp_recruitment_dashboard #update_application_fees_form div {
        flex-wrap: wrap;
        gap: 10px;
    }

    #mastdlp_recruitment_dashboard #update_application_fees_form div span {
        font-size: 1.2rem;
    }

    #mastdlp_recruitment_dashboard #update_application_fees_form input[type=number] {
        width: auto;
        flex: 1 1 8ch;
    }

    #mastdlp_recruitment_dashboard #account_set_up_form input[type=text] {
        max-width: 100%;
    }

    /* ------------------------------------------------- */
    /* 20. APPLICATION FORM OUTPUT                       */
    /* ------------------------------------------------- */

    .mastdlp_application_form_box {
        padding: 20px 16px;
        border-radius: 16px;
    }

    .mastdlp_app_stages {
        grid-template-columns: 1fr;
        gap: 2px;
    }

    .mastdlp_page_container #mastdlp_app_form_title_row {
        flex-wrap: wrap;
        row-gap: 12px;
        column-gap: 12px;
        margin-top: 1.5em;
    }

    .mastdlp_page_container #mastdlp_app_form_title_row h2 {
        line-height: 1.1;
    }

    .mastdlp_page_container #mastdlp_application_form .mastdlp_application_entry_field {
        grid-template-columns: 1fr;
    }

    .mastdlp_page_container #mastdlp_application_form .mastdlp_application_entry_field div {
        padding: 10px;
    }

    /* Absolute positioning would sit on top of the value in a narrow cell. */
    .mastdlp_page_container #mastdlp_application_form .mastdlp_application_entry_field .map-it-link {
        position: static;
        margin-top: 10px;
        font-size: 1rem;              /* 14px is off the site scale */
        padding: 14px 18px;           /* 16px text + 28px = 44px tap target */
    }

    /* ------------------------------------------------- */
    /* 21. WAITING LIST                                  */
    /* ------------------------------------------------- */

    /* ------------------------------------------------- */
    /* 22. ERROR PAGE                                    */
    /* ------------------------------------------------- */

    #staff_page_container #staff_error_container {
        width: 100%;
        max-width: 100%;
        min-height: 40vh;
        padding: 40px 16px;
        margin: 16px auto;
    }

}