: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-focus:var(--color-state-focus);--btn-accent-color-disabled:var(--color-state-disabled);--btn-prim-accent-color:var(--color-state);--btn-prim-accent-color-active:var(--color-state-active);--btn-prim-accent-color-focus:var(--color-state-focus);--btn-prim-accent-color-disabled:var(--color-state-disabled)}:root{--nav-bg-color: #183121;--nav-text-color: #ffffff;--color-primary: #6FA140;--btn-prim-accent-color: #00579C;--btn-accent-color: #00579C;--link-color: #00579C;--color-state: #00579C;--color-text: #231F20;--footer-bg-color: #c4c6cd;--footer-text-color: #262626;--btn-prim-accent-color-focus: #004d92;--btn-prim-accent-color-active: #003c81;--btn-accent-color-focus: #004d92;--btn-accent-color-active: #003c81;--link-color-hover: #004d92;--color-state-hover: #004d92;--color-state-focus: #004d92;--color-state-active: #003c81;--footer-text-color-hover: #1c1c1c;}
/*
    WARNING
    If you are making changes to these styles via the 'Custom CSS' section in theme settings,
    those changes will be lost with the next theme update! Please submit your changes to LW or LM to apply them here.

    README
    Styles in this file are used to make fine adjustments via the 'Additional CSS' field
    withing theme settings. This file has been added to this repository purely for
    version tracking purposes since it is related to this theme.
*/

/* FONT SIZES */
.font-xx-large {
  font-size: 32px !important;
}

.font-x-large {
  font-size: 24px !important;
}

.font-large {
  font-size: 18px !important;
}

.font-medium {
  font-size: 14px !important;
}

.font-small {
  font-size: 12px !important;
}

.font-x-small {
  font-size: 11px !important;
}

.font-xx-small {
  font-size: 10px !important;
}

/* FONT COLORS */
.color-toigrey {
  color: #5f6062 !important;
}

.color-toiblue {
  color: #00579c !important;
}

.color-toigreen {
  color: #6fa140 !important;
}

.color-toi#b00e2a {
  color: #b00e2a !important;
}

.color-toiorange {
  color: #faaf18 !important;
}

.color-toi#fff {
  color: #ffffff !important;
}

/* ONE OFFS --------------------------------------------------------------------------------- */

/* group selector width and height adjustment */
.fcontainer .fselect select[id*="group"] {
  max-width: 100%;
  width: 100%;
  height: 500px;
}

#nav-notification-popover-container {
  display: none;
}

/* remove nav selection highlight */
/* .totara-menu
  > .totara-menu-nav
  > .totara-menu-nav-list
  > .totara-menu-nav-item.selected
  > .totara-menu-nav-item-link {
  box-shadow: initial;
} */

/* hide horizontal scrollbar */
/* (possibly a bad idea) */
body {
  overflow-x: hidden;
}

/* content width */
/* .container-fluid {
  max-width: 1600px;
} */

/* .label has #fff assigned to text in roots theme */
/* this causes obvious issues... */
tbody .cell .label {
  color: inherit;
}

/* wider selects */
.addselect_wrapper > select {
  max-width: 100%;
}

/* marker block header fix - theme/roots/less/totara/blocks.less:245 selector too generic */
.block.block_marker table > thead > tr > th.header {
  padding: 8px;
  margin: inherit;
}

/* fix export_progress_for_template() bug where width is set to 0
and never changed @ course/classes/user_learning/item.php:265 */
.block_current_learning
  .block_current_learning-row-item__status
  > .progressbar_container {
  width: 100% !important;
}

.akatoi_green-heading > .header {
  background-color: #6fa140;
}

/* lesson activity true/false layout */
#page-mod-lesson-view fieldset.fgroup.answeroptiongroup {
  display: flex;
}
@media (min-width: 992px) {
  #page-mod-lesson-view .fitem > fieldset > legend {
    width: 100%;
  }
}
@media (min-width: 1200px) {
  #page-mod-lesson-view .fitem > fieldset > legend {
    float: left;
    width: 100%;
  }
}
/* ------------------------------------------------------------------------------------------- */

/* RECORD OF LEARNING */
/* hide the 'show/hide columns' button for table on 'Courses' tab */
#page-totara-plan-record-courses .rb-showhide {
  display: none;
}
/* hide 'Other evidence' tab on 'Record of learning' pages */
[id^="page-totara-plan-record"]
  .tabtree
  > ul
  > li
  > a[href*="/plan/record/evidence/"] {
  display: none;
}

/* COURSE SECTION START */

/* COLLAPSED TOPICS */
/* main section help element */
.path-course-view .completionprogress {
  margin-right: 25px;
  margin-top: 10px;
}
/* hide direct course link introduced in topcoll 3.2.1 */
.course-content ul.ctopics li.section .right a.cps_centre {
  display: none;
}
/* full-width section header & radius */
.course-content ul.ctopics li.section .content .toggle {
  width: calc(100% + (28px * 2));
  margin-left: -28px;
  border-radius: 12px 12px 0 0 !important;
  padding-bottom: 5px;
  padding-top: 5px;
  background: linear-gradient(90deg, #00579c, #347fae);
  background-color: #00579c !important;
}
body.editing .course-content ul.ctopics li.section .content > div.toggle {
  width: calc(100% + (40px * 2));
  margin-left: -40px;
}
body.editing
  .course-content
  ul.ctopics
  li.section
  .content
  .toggle
  span.the_toggle.tc-medium {
  padding-right: 44px;
}

/* 'hidden' section margin fix */
.course-content ul.ctopics li.section.hidden .content > div.toggle {
  margin-left: -28px;
}
/* section icon padding to match element */
.sectionhead span.the_toggle {
  background-origin: content-box;
}
.course-content ul.ctopics li.section .content .toggle:hover {
  background: linear-gradient(90deg, #347fae, #00579c);
}
.course-content ul.ctopics li.section.main .content,
.course-content ul.ctopics li.tcsection .content {
  margin: 0;
}
.course-content ul li.section.main {
  border: 1px solid #00579c;
  border-radius: 13px 13px 0 0 !important;
  /* box-shadow: 1px 1px 1px 1px #d6d6d6; -- removed 31/08/23 */
  margin-bottom: 30px !important;
}
/* TOPIC LAYOUT */
/* standard course layout to mimic collapsed topics */
.course-content #section-0 .summary {
  padding: 0 20px 0 20px;
}
.course-content .section-summary h3.section-title {
  border-radius: 12px 12px 0 0;
  margin: 0 0 20px 0;
  padding: 14px 24px 14px 24px;
  background-color: #00579c;
}
.course-content .section-summary h3.section-title > a {
  color: #fff;
}
/* second standard layout...? */
#completionprogressid {
  color: #fff;
}
.course-content ul.topics li.section.main .content #completionprogressid {
  color: #b00e2a;
}
.course-content ul.topics:not(.ctopics) li.section.main .content {
  padding: 20px;
}
.course-content ul.topics:not(.ctopics) .section.main .content > h3.sectionname,
.course-content
  ul.topics:not(.ctopics)
  .section.main
  .content
  h3.section-title {
  border-radius: 12px 12px 0 0;
  margin: -20px -20px 20px -20px;
  padding: 14px 24px 14px 24px;
  background-color: #00579c;
  color: #fff;
}

/* BLOCK START */
.block .block-title,
#dockeditempanel .dockeditempanel_content h2 {
  width: 100%;
  box-shadow: inset 0 0px 0 #00579c;
}
.block .block-header h2 {
  font-size: 15px;
  text-transform: uppercase !important;
}
.block {
  border-radius: 12px !important;
  box-shadow: 1px 1px 1px 1px #d6d6d6;
  border: 0px;
}
.block > .header {
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
  background: linear-gradient(90deg, #00579c, #347fae);
  color: #fff;
}
/* block background color in region on the right */
#block-region-side-post .block-header {
  background-color: #6fa140;
  color: #fff !important;
  background-image: none !important;
}

/* CONFIRMATION MODAL */
/* to appear like a block */
#notice {
  border-radius: 12px;
}
#notice .modal-content {
  border-radius: 12px;
}
#notice .modal-header {
  background-color: #00579c;
}
#notice .modal-header h4 {
  color: #fff;
}

/* SCORM PLAYER */
#page-mod-scorm-player #page-footer,
#page-mod-scorm-player #scormtop,
#page-mod-scorm-player .navbar,
    /* #page-mod-scorm-player #block-region-side-post, */
#page-mod-scorm-player .breadcrumb-container {
  display: none;
}
/* make player scale vertically */
#page-mod-scorm-player #scormpage #scorm_layout {
  height: 95vh;
  margin-bottom: 0;
}
/* make full width, mainly to accomodate Rise content since it's responsive html */
#page-mod-scorm-player #page.container-fluid {
  max-width: 100%;
}

/* FOOTER  */
.page-footer-nav > .page-footer-nav-list,
.progressbar__text,
.page-footer-powe#b00e2aby {
  display: none;
}

.block.chromeless .block-header {
  min-height: 0;
}
.block.chromeless .title.block-title {
  padding: 15px;
  box-shadow: none;
}
/* hide navbar menu separator */
.totara-menu
  > .totara-menu-nav
  > .totara-menu-nav-list
  > .totara-menu-nav-item {
  border-right: 0;
}

/* QUIZ */

/* hide review history in attempt */
#page-mod-quiz-review .history {
  display: none;
}

/* correct navigation buttons */
.path-mod-quiz .qnbutton.correct {
  background-color: #97d5af !important;
}

/* correct answer highlight */
.que.immediatefeedbackfromprevious.correct .info {
  background-color: #e2f3e8 !important;
}

/* incorrect answer highlight */
.que.incorrect .info {
  background-color: #f0d8d8;
}
/* partially correct answer highlight */
.que.partiallycorrect .info {
  background-color: #f0d8d8;
}
/* quiz review->navigation - partially correct answers same color as incorrect */
.path-mod-quiz .qnbutton.partiallycorrect {
  background-color: #fcc;
}
/* question background and border */
div.que[id^="q"]:not(.description) .qtext {
  background-color: #ebf6ff;
  margin: -15px -15px 0 -15px;
  padding: 15px;
  border: solid 2px #00579c;
}

/* comment area border color */
#manualgradingform .que .comment,
#page-mod-quiz-review .que .comment {
  border-color: #00579c;
}
#manualgradingform .que .comment {
  background-color: #ebf6ff;
}
/* prevent elements from changing layout */
@media (min-width: 992px) and (max-width: 9999px) {
  #manualgradingform.mform .fitem .felement {
    width: 100%;
  }
}

/* Quiz headers */
.que h4,
.que h2 {
  color: #00579c !important;
}

/* QUIZ RE-ATTEMPT */
/* navigation button highlights for correct and incorrect questions */
/* correct: */
#page-mod-quiz-attempt .qnbutton.complete {
  background-color: #e2f3e8;
}

/* SEARCH BLOCK LAYER ADJUST */
/* in case block does not get updated */
#search-block-string,
#search-block-submit {
  z-index: auto !important;
}

/* MARKING BLOCK */
/* hide user selector */
#page-mod-assign-grader [data-region="user-selector"] {
  display: none;
}

.cmid-49016 .modified {
  display: none;
}

.nx-theme-styles .nx-theme-page {
  background-color: #fff;
}

/* CHANGES POST-UPGRADE 2023 */

/* Image and banner styline */
.bannertext {
  position: absolute;
  top: 50%;
  left: 34%;
  transform: translate(-50%, -50%);
  width: calc(100% - 40%);
  word-wrap: normal;
}
.bannertext h4 {
  font-size: 30px !important;
  letter-spacing: 1px;
  color: #fff !important;
}
.bannertext h5 {
  font-size: 18px !important;
  letter-spacing: 1px;
  color: #fff;
}

/* Banner images */
.block_html .img-responsive {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
}

/* Banner Image responsiveness */
@media (max-width: 991px) {
  .bannertext h4 {
    font-size: 22px !important;
  }
}
@media (max-width: 991px) {
  .bannertext h5 {
    display: none;
  }
}
@media (max-width: 550px) {
  .bannertext h4 {
    font-size: 14px !important;
  }
}

/* Login page */
body#page-site-index .sitetopic .btn-primary {
  color: #fff !important;
}

body#page-site-index h2.sectionname {
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
  color: #fff;
  background-size: cover;
  padding: 15px;
  background: linear-gradient(90deg, #00579c, #347fae);
  background-color: #00579c;
}

body#page-site-index .sitetopic {
  border-radius: 12px !important;
  box-shadow: 1px 1px 1px 1px #d6d6d6;
}

#page-login-index .forgetpass a,
#page-site-index #inst6028 a:not(.btn-default),
#page-login-index #loginbtn {
  color: var(--btn-prim-text-color) !important;
  background-color: var(--btn-prim-bg-color);
  border-color: var(--btn-prim-border-color);
  font-weight: bold;
  margin: 0 0 3px 5px;
  padding: 6px 12px;
  border-radius: var(--btn-radius);
  display: block;
  text-align: center;
  width: 100%;
}

/* Hide Logo */
.masthead_logo {
  display: none !important;
}

/* Responsive logos */
@media (max-width: 991px) {
  .top-logos img {
    width: auto !important;
    height: 10vw !important;
  }
}

/* Text on Sliders */
.mb2slider-caption-content {
  max-width: 100% !important;
}

/* Fix slider dot display on course pages */
li.mb2slider-slide-item::marker {
  font-size: 0px !important;
}

/* main navunderline colour */
.totaraNav_prim--list_item_selected .totaraNav_prim--list_item_label::after {
  border-color: #c7c7c7 !important;
}

/* Fix converse upload bar */
.dndupload-progress-inner {
  max-height: 110px !important;
}

/* Fix selector width */
.select2-container--default {
  min-width: 300px !important;
  width: auto !important;
}

/* Fix atto textbox height */
.editor_atto_content {
  min-height: 68px !important;
}

/* alert colour */

.alert-info {
  border-color: #6fa140 !important;
}

.alert-info .alert-icon {
  background: #6fa140 !important;
}

.ft-state-info {
  color: #6fa140 !important;
}

/* Fix mark block initial spacing */
.initialbar a,
.initialbar strong {
  padding: 0px 3px !important;
}

/* Progress bar colours */
.bar {
  background-color: #00579c !important;
}

.progress {
  border: 1px solid #00579c !important;
}

/* Profile blocks */
body#page-user-profile .block_totara_user_profile {
  border: solid 1px #00579c !important;
  box-shadow: none !important;
}

/* Larger icons */
.section .flex-icon {
  font-size: 20px !important;
}

/* Comment link block display */
.commentlink {
  display: block !important;
}

.commentlink a {
  color: #00579c !important;
}

/* #fff icons in course sections */
body.path-course .section .tfont-var-arrows-move,
body.path-course .section_action_menu a {
  color: #fff;
}

/* Course search grid display
.course-search-result {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem;
}
body#page-course-search .courses > .paging {
  margin: 0;
  padding: 5px;
  text-align: center;
  position: absolute;
  transform: translateX(-100%);
  top: 1px;
  right: 0px;
} */

/* Category/Course browse grid display */
.course_category_tree .courses,
.course-search-result {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  align-items: normal;
}

.course-search-result > .paging,
.course_category_tree .courses > .paging {
  flex-basis: 100% !important;
}

@media (min-width: 992px) {
  .course_category_tree .courses .coursebox,
  .adaptive-column,
  .course-search-result .coursebox,
  .adaptive-column {
    width: 30.5%;
    margin: 10px;
  }
}

@media (min-width: 776px) and (max-width: 991px) {
  .course_category_tree .courses .coursebox,
  .adaptive-column,
  .course-search-result .coursebox,
  .adaptive-column {
    width: 46.5%;
    margin: 10px;
  }
}

@media (max-width: 775px) {
  .course_category_tree .courses .coursebox,
  .adaptive-column,
  .course-search-result .coursebox,
  .adaptive-column {
    width: 100%;
    margin: 10px;
  }
}

/* Quiz comment display */
.core_question__commentText p {
  display: block !important;
}

/* Essay answer border */
.qtype_essay_response.readonly {
  border: 1px solid #ddd;
  padding: 5px;
}

/* Trainee Progress Titles */
.traineereport h2 {
  font-size: 28px !important;
  margin-top: 30px !important;
}

/* Hide 'you are accessing...' alert for support courses */
body.path-course.category-7 .tw-containerCourse-enrolmentBanner.alert {
  display: none !important;
}

/* Nav bar */
.totaraNav {
  background: #347fae !important;
}

.totaraNav_prim {
  background: transparent !important;
}

/* Button colour */

.btn-primary,
.btn-secondary:not(.qnbutton),
input[type="submit"] {
  background-color: #00579c !important;
  border-color: #00579c !important;
  color: #fff !important;
}

/* Course headers green */
.course-content h6,
.course-content h5,
.course-content h4,
.course-content h3:not(.sectionname),
.course-content h2,
.course-content h1 {
  color: #00579c !important;
}

/* Custom icons */

span.tfont-var-file_earmark_pin:before {
  content: url("https://akatoi.careerforce.org.nz/assets/icons/assign-icon.png");
}

span.tfont-var-text_file_tick:before {
  content: url("https://akatoi.careerforce.org.nz/assets/icons/quiz-icon.png");
}

span.fa-comment-o:before {
  content: url("https://akatoi.careerforce.org.nz/assets/icons/converse-icon.png");
}

/* Hide accepted filetypes for assignments */
body.path-mod-assign .form-filetypes-descriptions {
  display: none !important;
}

body.path-mod-assign .ffilemanager p {
  display: none !important;
}

/* responsiveness for dashboard 32 html block */

.dashboard-video-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px;
  width: 67%;
}

@media (min-width: 1440px) {
  .dashboard-video-container {
    height: 620px;
  }
}

@media (min-width: 769px) and (max-width: 1439px) {
  .dashboard-video-container {
    height: 450px;
  }
}

@media (max-width: 768px) {
  .dashboard-video-container {
    height: 60vw;
    width: 100%;
  }
}

.dashboard-text-container {
  height: 100%;
  width: 33%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

@media (max-width: 768px) {
  .dashboard-text-container {
    width: 100%;
  }
}

.dashboard-outer-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 20px;
}

@media (max-width: 768px) {
  .dashboard-outer-container {
    flex-direction: column;
    padding: 5px;
  }
}

/* Hide username option from password reset page */
#page-login-forgot_password #id_searchbyusername {
  display: none !important;
}

/* Front page changes */

.front-page-button:hover {
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 10px;
}

/* block background color in region on the left for this page only */
#page-site-index #block-region-side-pre .block-header {
  background-color: #6fa140 !important;
  color: #fff !important;
  background-image: none !important;
}

#page-site-index .totaraNav_prim--list_item {
  display: none !important;
}

.rememberpass {
  margin: 10px 0;
}

#page-site-index .loginform {
  margin-bottom: 10px;
}

#page-site-index form input[type="text"],
#page-site-index form input[type="password"] {
  width: 100% !important;
}

/* SSO button customisation */
.potentialidplist {
  width: 100%;
  border-top: black solid thin;
  padding-top: 20px;
}

/* Hover effect on dashboard buttons */
.path-totara-dashboard .block-totara-featured-links-tile:hover,
.btn-primary:hover,
input[type="submit"]:hover {
  opacity: 0.8;
}

/* Assignment trainee view changes */
#page-mod-assign-view .submissionstatussubmitted,
#page-mod-assign-view .submissiongraded {
  background-color: transparent !important;
}


/* ACCESSIBILITY CAROUSEL */

.cf-carousel-container {
    position: relative;
    max-width: 800px;
    width: 100%;
    margin: 30px 0;
    overflow: hidden;
    border-radius: 10px;
    background: #f5f5f5;
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}

.cf-carousel-wrapper {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

.cf-carousel-slide {
    flex: 0 0 100%;
    width: 100%;
    box-sizing: border-box;
}

.cf-carousel-slide img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    max-height: 450px;
}

.cf-carousel-controls button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    width: 50px;
    height: 50px;
    font-size: 24px;
    font-family: sans-serif;
    transition: background 0.2s ease;
}

.cf-carousel-controls button:hover {
    background: rgba(0, 0, 0, 0.8);
}

.cf-carousel-controls .cf-prev {
    left: 15px;
}

.cf-carousel-controls .cf-next {
    right: 15px;
}

.cf-carousel-pagination {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 15px 0;
}

.cf-carousel-pagination .cf-dot {
    width: 12px;
    height: 12px;
    background: #bbb;
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.2s ease;
}

.cf-carousel-pagination .cf-dot.active {
    background: #00579c;
}


/* NEW CHANGES */

.cf-access-accordion {
    border: 1px solid #ddd;
    border-radius: 8px;
    margin-bottom: 20px;
    overflow: hidden; /* Ensures content stays within rounded corners */
}

/* The clickable summary (header) of the accordion */
.cf-access-accordion summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    list-style: none; /* Removes the default triangle marker */
    cursor: pointer;
    background: linear-gradient(90deg, #00579c, #347fae);
    color: #ffffff;
    padding: 12px 20px;
    font-size: 18px;
    font-weight: 600;
    transition: background-color 0.2s ease-in-out;
}

/* Remove the default arrow in WebKit browsers (Chrome, Safari) */
.cf-access-accordion summary::-webkit-details-marker {
    display: none;
}

/* Custom icon for open/closed state */
.cf-access-accordion summary::after {
    content: '+';
    font-size: 28px;
    font-weight: 300;
    transition: transform 0.2s ease-in-out;
}

/* Change icon when accordion is open */
.cf-access-accordion[open] > summary::after {
    content: '−'; /* Using a minus sign for the open state */
}

/* Panel content styling */
.cf-access-accordion-content {
    background: #fafafa;
    padding: 15px;
    border-top: 1px solid #ddd;
}

/* Styling for the resource links inside the accordion */
.cf-access-accordion-content a {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 135px;
    height: 112px;
    text-align: center;
    text-decoration: none;
    margin: 5px;
    vertical-align: top;
    padding: 8px;
    border-radius: 20px;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    box-shadow: none;
    transform: scale(1);
}

/* Hover effect for links, moved from inline JS to CSS for better practice */
.cf-access-accordion-content a:hover {
    transform: scale(1.03);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}


/* START ADDITIONAL CHANGES */

.cf-access-section {
    border: 1px solid #ddd;
    border-radius: 8px;
    margin-bottom: 20px;
    overflow: hidden;
}

/* The clickable summary (header) of the accordion */
.cf-access-section summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    list-style: none; /* Removes the default triangle marker */
    background: linear-gradient(90deg, #00579c, #347fae);
    color: #ffffff;
    padding: 12px 20px;
    font-size: 18px;
    font-weight: 600;
    transition: background-color 0.2s ease-in-out;
}

/* Panel content styling */
.cf-access-section-content {
    padding: 15px;
}

/* Styling for the resource links inside the accordion */
.cf-access-section-content a {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 135px;
    height: 135px;
    text-align: center;
    text-decoration: none;
    margin: 5px;
    vertical-align: top;
    padding: 8px;
    border-radius: 20px;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    box-shadow: none;
    transform: scale(1);
}

.cf-access-section-content a:hover {
    transform: scale(1.03);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

/* Panel content styling */
.cf-access-tool-content {
    padding: 15px;
}

/* Styling for the resource links inside the accordion */
.cf-access-tool-content a {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 157px;
    height: 130px;
    text-align: center;
    text-decoration: none;
    margin: 5px;
    vertical-align: top;
    padding: 8px;
    border-radius: 20px;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    box-shadow: none;
    transform: scale(1);
}

/* Hover effect for links, moved from inline JS to CSS for better practice */
.cf-access-tool-content a:hover {
    transform: scale(1.03);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

/* END ADDITIONAL CHANGES */

/* END ACCESSIBILITY CAROUSEL */

/* CopyLeaks - Hiding links in quiz settings*/

/* #page-mod-quiz-mod .form-group {
display: none;
} */