:root{--color-primary: #69bd45;--color-secondary: #007ab8;--color-tertiary: #1ea4a9;--color-state: #4b7e2b;--color-state-hover: #3c6721;--color-state-focus: #3c6721;--color-state-active: #30541a;--color-state-highlight: #f6f9d7;--color-state-highlight-neutral: var(--color-neutral-3);--color-state-disabled: var(--color-neutral-5);--color-neutral-1: #fff;--color-neutral-2: #fafafa;--color-neutral-3: #f7f7f7;--color-neutral-4: #e6e4e4;--color-neutral-5: #c7c7c7;--color-neutral-6: #767676;--color-neutral-7: #262626;--color-background: var(--color-neutral-1);--color-border: var(--color-neutral-5);--color-text: var(--color-neutral-7);--color-text-disabled: var(--color-neutral-5);--color-text-hint: var(--color-neutral-6);--link-color: var(--color-state);--link-color-hover: var(--color-state-hover);--nav-bg-color: #fff;--nav-text-color: var(--color-text);--footer-bg-color: #fff;--footer-text-color: var(--color-text);--footer-text-color-hover: var(--footer-text-color);--btn-accent-color: var(--color-state);--btn-accent-color-active: var(--color-state-active);--btn-accent-color-hover: var(--color-state-hover);--btn-accent-color-disabled: var(--color-state-disabled)}:root{--nav-bg-color: #00553d;--nav-text-color: #FFFFFF;--color-primary: #c2d0b7;--btn-prim-accent-color: #00553d;--btn-accent-color: #f8971d;--link-color: #00553d;--color-state: #00553d;--color-text: #262626;--footer-bg-color: #ffffff;--footer-text-color: #262626;--btn-prim-accent-color-focus: #004b33;--btn-prim-accent-color-active: #003a22;--btn-accent-color-focus: #ee8d13;--btn-accent-color-active: #dd7c02;--link-color-hover: #004b33;--color-state-hover: #004b33;--color-state-focus: #004b33;--color-state-active: #003a22;--footer-text-color-hover: #1c1c1c;}
/* Display breadcrumbs on main dashboard, including 'Turn editing on' button */
.path-totara-dashboard .container-fluid.breadcrumb-container {
  display: block;
}

/* ------------------------------------------------------------------------------------------------------------------------ */
/* This changes the design for the current learning tile on the Home Dashboard*/
#FeaturedCourses .block-totara-featured-links-course .block-totara-featured-links-content h3 {
  background-color: darkgreen;
  color: white;
  padding: 5px;
  margin-bottom: 0;
}

.block_current_learning-tile__content_description {
display: none;
}

.block_current_learning-tile__link_title {
  font-size: 1.2em !important;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.block_current_learning-tile__image {
  background-position: center; /* Center the image */
}

#block-region-main .block_totara_featured_links .block-content .block-totara-featured-links-tile,
#block-region-top .block_totara_featured_links .block-content .block-totara-featured-links-tile,
#block-region-bottom .block_totara_featured_links .block-content .block-totara-featured-links-tile {
    background-size: contain !important;
}

/*_________________________________________________________*/

/* Fixes the badge size on the homepage*/
.block_badges ul.badges li .badge-image {
    width: 40%;
    height: 40%;
}
.badges li .badge-name {
    display: block;
    padding: 5px;
    font-size: 90%;
}
#inst3890.block_badges .content.block-content {
    padding: 8px;
    padding-top: 16px;
}

/*_________________________________________________________*/

/*This is to fix the "infinite" badges block display */
.block_badges .block-content ul.badges {
    display: inline-block;
}

/*_________________________________________________________*/
/*This makes URLs look more clickable*/
.urlworkaround {
  background-color: #fff;
  border: 1 px solid #ccc;
  padding: 5px;
  border-radius: 3px;
  margin-bottom: 5px;
}

.urlworkaround a {
  color: #3366cc;
  text-decoration: none;
}

.urlworkaround a:hover {
  text-decoration: none;
}


/*_________________________________________________________*/

/* This is to make Activities look better to click */

.activityinstance {
 //* border: 1px solid #00553D;
  //*border-radius: 10px;
  padding: 5px;
  position: relative;
  display: flex;
  align-items: center;
  max-width: 100%;
 z-index: 1 !important; /* Lower than the menu */

}

.activityinstance .flex-icon {
  width: 50px;
  height: 50px;
  font-size: 32px;
  padding: 10px;

}

.section .activity .activityinstance {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-right: 5 px;
  position: relative; 
}

.section .activity .activityinstance:hover {
  background-color: #f2f2f2;
  white-space: normal;
  text-overflow: unset;
  padding-left: 5px;

}

.editing .section .activity .contentwithoutlink, .editing .section .activity .activityinstance {
    padding-right: 5px; 
}

.section .activity .activityinstance:hover::after {
  content: attr(title); /* Use the 'title' attribute to display the full text */
  position: absolute; /* Position the text absolutely */
  left: 0;
  right: 0;
  top: 100%;
  background-color: #fff; /* Adjust the background color as needed */
  padding: 5px; /* Add some padding around the text */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Add a shadow for better visibility */
  white-space: normal; /* Allow line breaks */
  z-index: 1; /* Ensure the text appears above other elements */
}

/* Media query for mobile devices */
@media screen and (max-width: 767px) {
.section .activity {
  position: relative;
  padding-right: 40px; /* Make room for the checkbox */
}  

.activityinstance {
    padding: 3px;
    border-radius: 20px;
    max-width: calc(100% - 40px); /* Adjust based on your layout */
  }

  .activityinstance .flex-icon {
    width: 30px;
    height: 30px;
    font-size: 18px;
    padding: 6px;
  }

  .section .activity .activityinstance {
    padding-right: 40px; /* Make room for the checkbox */
    font-size: 14px; /* Reduce font size */
  }
 
  .section .activity .activityinstance:hover::after {
    font-size: 14px;
    padding: 3px;
  }
}

/*_________________________________________________________*/

 /* This is to make Featured Links Block Tiles have a darker background under the title*/

.block_totara_featured_links .block-content .block-totara-featured-links-content { 
 background: var(--color-backdrop-standard);
font-size: var(--font-size-18);
}

/*_________________________________________________________*/


/* Hide Company Goals - Request by Nathalie Cooper to Helen Johnston */
#companygoals {
display: none;
}


/*_________________________________________________________*/


/* These are some additional styling options when writing in HTML */
/* Dashed border */
hr.dashed {
  border-top: 3px dashed #bbb;
}

/* Dotted border */
hr.dotted {
  border-top: 3px dotted #bbb;
}

/* Solid border */
hr.solid {
  border-top: 3px solid #bbb;
}

/* Rounded border */
hr.rounded {
  border-top: 8px solid #bbb;
  border-radius: 5px;
}


/*_________________________________________________________*/

/*This makes checkboxes larger and more obvious*/

/* Unchecked checkbox styles */
.completion-icon {
  position: relative;
  width: 24px;
  height: 24px;
  border: 2px solid #007bff;
  border-radius: 4px;
}

/* Add a red circle when the checkbox is unchecked */
.completion-icon:not(:checked)::before {
  content: "";
  position: absolute;
  top: -12px;
  left: -12px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 4px solid red;
  z-index: -1;
}
.completion-icon {
  position: relative;
  transform: translateY(-50%); /* Adjust vertical centering */
}

span.actions {
 padding: 20px; 
}

/* Media query for mobile devices */
@media screen and (max-width: 767px) {
  .completion-icon {
    width: 18px;
    height: 18px;
  }

  .completion-icon:not(:checked)::before {
   top: 50%;
    left: 50%;
    width: 36px;
    height: 36px;
    border-width: 3px;
transform: translate(-50%, -50%);
  }
}

/*_________________________________________________________*/



/*This makes topics look cleaner and more user-friendly*/

/* Remove default list styling and padding from the topics list */
.topics {
  list-style: none;
  padding: 0;
}

/* Style each topic section */
.topics > .section:not(#section-0){
  margin-bottom: 20px; /* Add margin at the bottom for spacing */
  border: 1px solid #ccc; /* Add a border around the section */
  border-radius: 5px; /* Round the corners of the section */
  padding: 20px; /* Add padding inside the section */
  background-color: #f9f9f9; /* Set a light background color */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Add a subtle box shadow */
 transition: transform 0.3s ease; /* Add a smooth transition effect */
  cursor: pointer; /* Change the cursor to a pointer on hover */
}

/* Add hover effect to the topic section */
.topics > .section:hover:not(#section-0) {
transform: translateY(-5px); /* Move the section slightly upward on hover */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Increase the box shadow on hover */
transition: background-color 0.3s ease; /* Add a smooth transition effect */
}

/* Style the section title */
.topics .section .section-title {
  font-size: 18px; /* Increase the font size */
  font-weight: bold; /* Make the title bold */
  margin-bottom: 10px; /* Add margin at the bottom for spacing */
}

/* Style the section title link */
.topics .section .section-title a {
  color: #333; /* Set a dark text color */
  text-decoration: none; /* Remove the default underline */
  position: relative; /* Set position to relative for pseudo-element */
}

/* Add an arrow icon after the section title link */
.topics .section .section-title a::after {
  content: "\2192"; /* Unicode character for right arrow */
  position: absolute; /* Position the arrow relative to the link */
  right: -20px; /* Adjust the distance of the arrow from the link */
  top: 50%; /* Center the arrow vertically */
  transform: translateY(-50%); /* Adjust the vertical positioning of the arrow */
  opacity: 0; /* Initially hide the arrow */
  transition: opacity 0.3s ease; /* Add a smooth transition effect */
}

/* Show the arrow icon on hover */
.topics .section:hover .section-title a::after {
  opacity: 1; /* Show the arrow on hover */
}

/* Add margin at the top of the summary text */
.topics .section .summarytext {
  margin-top: 10px;
}


/* Remove border, box shadow, and hover effects from nested sections */
.topics .section .section {
  border: none;
  box-shadow: none;
  transform: none;
  cursor: default;
}

/* Add this new rule to prevent hover effects on individual topic pages */
.topics > li.tw-formatTopics__topic {
  transform: none !important;
  box-shadow: none !important;
  cursor: default !important;
}

/* Prevent hover effects on child elements within individual topic pages */
.topics > li.tw-formatTopics__topic .section {
  transform: none !important;
  box-shadow: none !important;
  cursor: default !important;
}

/* Add hover effect to navigation links */
.section-navigation .mdl-left a:hover,
.section-navigation .mdl-right a:hover {
    font-size: 105%;
    text-shadow: 0 4px 8px rgba(0,0,0,0.2); /* Larger shadow for "lifted" effect */
    transition: all 0.3s ease;
}

/* Style the arrow icons in the navigation links */
.section-navigation .larrow,
.section-navigation .rarrow {
    font-weight: bold;
    margin: 0 5px;
}

/* Style the central section name */
.section-navigation h3.sectionname {
    flex: 1;
    text-align: center;
    margin: 0;
    font-weight: bold;
    padding: 30px;
    color: #444;
   text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
}

/*_________________________________________________________*/

/*To make hidden activities more obvious*/
.activityinstance a.dimmed {
    background-color: #f0f0f0;
    padding: 5px;
    opacity: 0.7;
    transition: all 0.3s ease;
}

.activityinstance a.dimmed:hover {
    opacity: 1;
}

.activityinstance a.dimmed .instancename {
    text-decoration: line-through;
    color: #888;
}

.activityinstance a.dimmed .flex-icon {
    filter: grayscale(100%);
}

.activityinstance a.dimmed::after{
    content: "🔒 ";
    margin-left: 5px;
}

/*_________________________________________________________*/

/* Make drop down menu items look better when hovering*/

.moodle-actionmenu .menu.align-tr-br li a:hover {
    background-color: #cdcdcd !important;
}

/*_________________________________________________________*/

/*Hides featured link block from certain dashboards on mobile phones*/
@media screen and (max-width: 767px) {
  /*home dash*/
#inst3914.block_totara_featured_links {
    display: none;
  }

/*retail apprenticeship dash*/
  #inst3962.block_totara_featured_links {
    display: none;
  }

/*nutrition champ dash*/
  #inst4220.block_totara_featured_links {
    display: none;
  }

/*fencing champ dash*/
  #inst4262.block_totara_featured_links {
    display: none;
  }
}
/*_________________________________________________________*/

/*Increases size of hamburger mobile navigation icon*/

.totaraNav_prim--toggleNav_target .totaraNav--icon_burger {
  font-size: 24px; /* Increase the icon size */
  font-weight: bold;
  padding: 10px; /* Add some padding around the icon */
}


/* For mobile devices */
@media screen and (max-width: 767px) {
  .totaraNav_prim--toggleNav_target .totaraNav--icon_burger {
    font-size: 30px; /* Even larger on mobile */
    padding: 12px;
    color: white;
  }
  
  .totaraNav_prim--toggleNav {
    min-width: 48px; /* Slightly larger touch target on mobile */
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}
}

.totaraNav_prim--list_close:focus, .totaraNav_prim--list_close:hover {
    font-size: 30px; /* Even larger on mobile */
    font-weight: bold;
    top: 5px;    
    bottom: -5px;    
    left: -5px;
    color: white;
    outline: none;
}


/*_________________________________________________________*/

/* Styles for all featured links tiles except the specific block */
.block_totara_featured_links .block-content .block-totara-featured-links-tile {
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    overflow: hidden;
}

.block_totara_featured_links .block-content .block-totara-featured-links-tile:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.block_totara_featured_links .block-content .block-totara-featured-links-content h3 {
    font-size: 18px;
    font-weight: bold;
    letter-spacing: 1px;
    margin-bottom: 10px;
}

/* Override styles for the specific block */
#inst3914.block_totara_featured_links .block-content .block-totara-featured-links-tile,
#inst3914.block_totara_featured_links .block-content .block-totara-featured-links-tile:hover {
    transform: none !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    overflow: visible !important;
    transition: none !important;
}

#inst3914.block_totara_featured_links .block-content .block-totara-featured-links-content h3 {
    font-size: inherit !important;
    font-weight: normal !important;
    letter-spacing: normal !important;
    margin-bottom: 0 !important;
}

/* Additional overrides for the slick slider within the specific block */
#inst3914 .block-totara-featured-links-gallery-subtiles.slick-slider,
#inst3914 .block-totara-featured-links-gallery-subtiles.slick-slider .block-totara-featured-links-tile {
    transform: none !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    overflow: visible !important;
    transition: none !important;
}

/* Styles for course tiles */
.block_totara_featured_links .block-content .block-totara-featured-links-tile:not(:empty) {
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    overflow: hidden;
}

.block_totara_featured_links .block-content .block-totara-featured-links-tile:not(:empty):hover {
    transform: scale(1.05);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

/* Styles for course tiles */
.block_totara_featured_links .block-content .block-totara-featured-links-tile:not(:empty) {
    border: 1px solid #e0e0e0 !important;
    border-radius: 4px !important;
    overflow: hidden !important;
}

.block_totara_featured_links .block-content .block-totara-featured-links-tile:not(:empty):hover {
    transform: scale(1.05) !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
    transition: all 0.3s ease !important;
}

/* Styles for blank filler tiles */
.block_totara_featured_links .block-content .block-totara-featured-links-tile:not(:has(*)) {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

.block_totara_featured_links .block-content .block-totara-featured-links-tile:not(:has(*)):hover {
    transform: none !important;
    box-shadow: none !important;
}

/* Styles for blank filler tiles */
.block_totara_featured_links .block-content .block-totara-featured-links-tile:not(:has(*)),
.block_totara_featured_links .block-content .block-totara-featured-links-tile:empty {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    transform: none !important;
    transition: none !important;
}

.block_totara_featured_links .block-content .block-totara-featured-links-tile:not(:has(*)):hover,
.block_totara_featured_links .block-content .block-totara-featured-links-tile:empty:hover {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    transform: none !important;
}

/* Styles for white filler tiles without content */
.block_totara_featured_links .block-content .block-totara-featured-links-tile[style*="background-color: #ffffff"]:not(:has(*)),
.block_totara_featured_links .block-content .block-totara-featured-links-tile[style*="background-color:#ffffff"]:not(:has(*)) {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    transform: none !important;
    transition: none !important;
}

.block_totara_featured_links .block-content .block-totara-featured-links-tile[style*="background-color: #ffffff"]:not(:has(*)):hover,
.block_totara_featured_links .block-content .block-totara-featured-links-tile[style*="background-color:#ffffff"]:not(:has(*)):hover {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    transform: none !important;
}

/* Ensure tiles with content (including those with background images) retain their styles */
.block_totara_featured_links .block-content .block-totara-featured-links-tile:has(*) {
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    overflow: hidden;
}

.block_totara_featured_links .block-content .block-totara-featured-links-tile:has(*):hover {
    transform: scale(1.05);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}


/*_______________________________________________________________________________*/

/* Reset styles for quiz edit mode */

/* Target activity instances within quizzes */
.mod-quiz-edit-content .activityinstance {
    all: revert;
}

/* Preserve styling for .flex-icon within .activityinstance for quizzes */
.mod-quiz-edit-content .activityinstance .flex-icon {
    all: revert;
}

/* Prevent hover effects */
.mod-quiz-edit-content .slot:hover,
.mod-quiz-edit-content .activityinstance:hover {
    transform: none !important;
    box-shadow: none !important;
}

#page-mod-quiz-edit ul.slots li.section li.activity .activityinstance {
    display: block;
    min-height: 1.7em;
    position: absolute;
    top: 0;
    left: 5em;
    width: 50%;
}

/*_________________________________________________________*/

/* Custom seminar event titles using class-based approach */
.mod_facetoface__eventinfo__content {
    position: relative;
}

.mod_facetoface__eventinfo__content h2 {
    position: relative;
    padding-bottom: var(--gap-4);
}

/* Use the session time as an identifier */
.mod_facetoface__eventinfo__content:has(.mod_facetoface__sessionlist__eventtime:contains("5 November 2024")) h2::after {
    content: "Kale & Rape Seed Session";
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    font-size: var(--font-size-13);
    color: var(--color-text-hint);
    background-color: var(--color-neutral-2);
    padding: var(--gap-2);
    border-radius: var(--border-radius-small);
    border-left: var(--border-width-thick) solid var(--color-primary);
    font-style: italic;
    margin-top: var(--gap-2);
}

/* Backup approach using attribute selectors */
.mod_facetoface__eventinfo__content[data-sessionid="2270"] h2::after {
    content: "Kale & Rape Seed Session";
    /* ... same styles as above ... */
}

/* Enhanced completion checkmark styles */
.autocompletion .flex-icon {
    font-size: 24px;
    width: 32px;
    height: 32px;
    transition: all 0.3s ease;
}

/* Completed state (checked) */
.autocompletion .flex-icon[data-flex-icon="core|i/completion-auto-y"] {
    color: #28a745;
}

/* Uncompleted state (unchecked) */
.autocompletion .flex-icon[data-flex-icon="core|i/completion-auto-n"] {
    color: #dc3545;
}

.autocompletion .flex-icon:hover {
    transform: scale(1.2);
}

/* Ensure proper alignment within text */
.autocompletion {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
}

/* Media query for mobile devices */
@media screen and (max-width: 767px) {
    .autocompletion .flex-icon {
        font-size: 20px;
        width: 28px;
        height: 28px;
    }
}

/*_______________________________________________________________________________*/

/* Change SCORM icon to play button */
[data-flex-icon="mod_scorm|icon"].flex-icon::before {
    content: "\25B6" !important; /* Unicode for play triangle */
}

[data-flex-icon="mod_scorm|icon"].flex-icon {
    content: "\25B6" !important; /* Unicode for play triangle */
}

/* Specific padding adjustment for SCORM icon */
.activityinstance [data-flex-icon="mod_scorm|icon"].flex-icon {
    padding-top: 8px !important;  /* top right bottom left */
}

/*_______________________________________________________________________________*/

/* Enhanced styling for progress indicators only */

/* Target only the last activity-count in each section (usually the Progress indicator) */
.section-summary-activities:last-child .activity-count {
  padding: 4px 10px;
  border-radius: 8px;
  background-color: #f0f0f0;
  border: 1px solid #d0d0d0;
  display: inline-block;
  font-weight: bold;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
  margin-left: 5px;
}

/* Hide 'View all events' for seminar activities on course pages */
.path-course-view a[href*="/mod/facetoface/view.php?f="] {
  display: none !important;
}

/* Seminar event activity: border + bottom spacing */
.path-course-view li.activity.modtype_facetoface {
    border: 3px solid #c2d0b7 !important;
    border-radius: 6px;
    margin-bottom: 10px !important;
}