@font-face {
  font-family: 'proxima_nova_rgregular';
  src: url('https://litmus.com/fonts/Emails/proximanova-regular-webfont.eot');
  src: url('https://litmus.com/fonts/Emails/proximanova-regular-webfont.eot?#iefix')
      format('embedded-opentype'),
    url('https://litmus.com/fonts/Emails/proximanova-regular-webfont.woff')
      format('woff'),
    url('https://litmus.com/fonts/Emails/proximanova-regular-webfont.ttf')
      format('truetype'),
    url('https://litmus.com/fonts/Emails/proximanova-regular-webfont.svg#proxima_nova_rgregular')
      format('svg');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'proxima_nova_rgbold';
  src: url('https://litmus.com/fonts/Emails/proximanova-bold-webfont.eot');
  src: url('https://litmus.com/fonts/Emails/proximanova-bold-webfont.eot?#iefix')
      format('embedded-opentype'),
    url('https://litmus.com/fonts/Emails/proximanova-bold-webfont.woff')
      format('woff'),
    url('https://litmus.com/fonts/Emails/proximanova-bold-webfont.ttf')
      format('truetype'),
    url('https://litmus.com/fonts/Emails/proximanova-bold-webfont.svg#proxima_nova_rgbold')
      format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Indie Flower';
  src: url('../../font/IndieFlower-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}
.indie-flower-regular {
  font-family: "Indie Flower", cursive;
  font-weight: 400;
  font-style: normal;
}

*,
*:before,
*:after {
  box-sizing: border-box;
}
/* :any-link{
    font-size: 200%;
  } */
:root {
  accent-color: var(--clr-accent);
  /* Icons */
  /* Default global color */
  --icon-color-global: var(--clr-primary);

  --icon-base: url('../../img/accordion-tri.svg'); /* Base icon */
  --icon-question-closed: url('/shared/online/img/question-closed-b.svg');
  --icon-question-open: url('/shared/online/img/question-open-b.svg');

  --icon-slideshow: url('/shared/online/img/slideshow.svg'); 
  
  --icon-course: url('/shared/online/img/education.svg'); 
  --icon-conditional: url('/shared/online/img/conditional.svg'); 
  --icon-lesson: url('/shared/online/img/test.svg'); 
  --icon-reminder: url('/shared/online/img/reminder.svg'); 
  --icon-formula: url('/shared/online/img/formula.svg'); 
  --icon-puzzle: url('/shared/online/img/puzzle.svg'); 
  --icon-survey: url('/shared/online/img/survey.svg'); 
  --icon-pause: url('/shared/online/img/pause.svg'); 
  --icon-think: url('/shared/online/img/think.svg'); 

  --icon-alert: url('/shared/online/img/alert.svg');
  --icon-success: url('/shared/online/img/success.svg');
  --icon-info: url('/shared/online/img/info.svg');
  --icon-warning: url('/shared/online/img/warning.svg');
  --icon-self-reflection: url('/shared/online/iimg/self-reflection.svg');
  --icon-reflection-w: url('/shared/online/img/reflection-w.svg');
  --icon-reflection-b: url('/shared/online/img/reflection-b.svg');
  --icon-final-w: url('/shared/online/img/final-w.svg');
  --icon-final-b: url('/shared/online/img/final-b.svg');
  --icon-case: url('/shared/online/img/case.svg');
  --icon-food: url('/shared/online/img/food-for-thought.svg');
  --icon-knowledge: url('/shared/online/img/knowledge.svg');
  --icon-journal: url('/shared/online/img/journal.svg');
  --icon-quiz: url('/shared/online/img/quiz.svg');
  --icon-none: url('/shared/online/img/none.svg');
  --icon-activity: url('/shared/online/img/activity.svg');
  --icon-assignment: url('/shared/online/img/assignment.svg');
  --icon-discInfo: url('/shared/online/img/discInfo.svg');
  --icon-self: url('/shared/online/img/self-discovery.svg');
  --icon-assessment: url('/shared/online/img/assessment.svg');
  --icon-practice: url('/shared/online/img/practice.svg');
  --icon-mastery-b: url('/shared/online/img/mastery-b.svg');
  --icon-mastery-w: url('/shared/online/img/mastery-w.svg');
  --icon-question-w: url('/shared/online/img/question-w.svg');
  --icon-question-b: url('/shared/online/img/question-b.svg');
  --case-icon: url('/shared/online/img/case.svg');
  /* Colours */
  --clr-font: #212121;
  --clr-primary: #212121;
  --clr-secondary: #434343;
  --clr-tertiary: #d6d9db;
  --clr-inst: rgb(0, 158, 15);
  --clr-id: rgb(13, 144, 183);
  --clr-dev: rgb(255, 0, 255);
  --clr-light-grey: #aaa;

  /* Accent colour used for buttons and any accent shapes */
  --clr-accent: #dd2938;
  /* light accent */
  --clr-accent-light: #dd293826;
  --clr-accent-10: rgba(221, 41, 56, 0.2);
  --clr-accent-2: #bfdfe8;
  --clr-select: #bc222f;
  --clr-highlight: #c3f2f3;
  --clr-button-hover: #992e30;
  --clr-white: #fff;

  --clr-background: #fdfdfd;
  --clr-boarder: #e9e9e9;
  --clr-lesson: #ff0794;
  --clr-self: #b680d6;
  --clr-self-reflection: #00ad7c;
  --clr-reflection: #ffe600;
  --clr-final: #73a800;
  --clr-case: #212121;
  --clr-knowledge: #fbaf00;
  --clr-journal: #0eddd9;
  --clr-quiz: #7c00a8;
  --clr-activity: #252525;
  --clr-assignment: #75c2e9;
  --clr-discInfo: #f56d32;
  --clr-mastery: #1d4e89;
  --clr-food: #ec6aab;
  --clr-think-about: #f5e20f;
  /* --clr-think-about: #1d1d2c; */
  --clr-pause: #116a73;
  --clr-survey: #7635bb;
  /* --clr-pause: #2f97a2; */
  --clr-course: #83530c;
  /* --clr-course: #9c691c; */
  --clr-puzzle: #2e602f;
  --clr-formula: #a0215a;
  --clr-reminder: #2f4eac;
  --clr-conditional: #a86ab9;
  --clr-assessment: #459ced;
  --clr-practice: #fe6448;
  --clr-red: #e40c2b;
  --clr-copy: #131313;
  --clr-alert: #fe3e28;
  --clr-success: #99cc33;
  --clr-info: #5594f1;
  --clr-warning: #ffcc00;
  --clr-off-white: #f7f4e9;
  /* Custom Colours START */

  /* Table Colour */
  --clr-table-yellow: #fcf4a8;
  --clr-table-orange: #fca580;

  --clr-yellow-light: #fded5e;
  --clr-yellow: #fbaf00;
  --clr-yellow-dark: #83530c;

  --clr-green-light: #83e1ac;
  --clr-green: #73a800;
  --clr-green-dark: #2e602f;

  --clr-black: #212121;

  --clr-blue-light: #d9ecf6;
  --clr-blue: #459ced;
  --clr-blue-dark: #1d4e89;

  --clr-orange-light: #ca8216;
  --clr-orange: #f56d32;
  --clr-orange-dark: #fe6448;

  --clr-pink-light: #ffb6c1;
  --clr-pink: #ff0794;
  --clr-pink-dark: #a0215a;

  --clr-purple-light: #b680d6;
  --clr-purple: #7635bb;
  --clr-purple-dark: #7c00a8;

  --clr-peach: #f6b89e;

  /* --clr-pink: #FFB6C1; */

  /* APP CPOLOURS START */

  /* Plain Colour BG END */

  /* Custom Colours END */
  /* Soft Alert boxes */
  /* Info / Note */
  --clr-note-bg: #d9ecf6;
  --clr-note-text: #0d48a0;
  --clr-note-line: #5594f1;
  /* Alert */
  --clr-alert-bg: #fddfdf;
  --clr-alert-text: #8c2318;
  --clr-alert-line: #fe3e28;
  /* Warning */
  --clr-warning-bg: #fdf7df;
  --clr-warning-text: #5d460e;
  --clr-warning-line: #ffcc00;
  /* Success */
  --clr-success-bg: #c1f0c1;
  /* --clr-success-bg: #e1fddf; */
  --clr-success-text: #455819;
  --clr-success-line: #99cc33;
  --clr-sticky-note: #fdfd96;

  --clr-tab-bg: #f5f3f3;
  --clr-btn1: #438945;
  --clr-btn2: #c38322;
  --clr-btn3: #477ea0;
  --clr-btn4: #31a2af;
  --clr-link-visited: #a5c300;
  --font-weight-normal: 400;
  --font-weight-bold: 'proxima_nova_rgbold', sans-serif;
  --font-weight-100: 100;
  --font-weight-200: 200;
  --font-weight-300: 300;
  --font-weight-400: 400;
  --font-weight-500: 500;
  --font-weight-600: 600;
  --font-weight-700: 700;
  --font-weight-800: 800;
  --font-weight-900: 900;
  --font-h1: "proxima_nova_rgbold", sans-serif;
  --font-body: "proxima_nova_rgregular", sans-serif;
  --font-body-bold: 'proxima_nova_rgbold', sans-serif;
  --font-h3: "proxima_nova_rgregular";
  --font-blockquote: "Roboto";
  --font: "proxima_nova_rgregular", serif;
  --font-lead: "proxima_nova_rgregular";
  --mfont: 1.25em;
  /* --mfont: 1.25em; */
  --xxlfont: calc(var(--mfont) + 3px);
  --xxsfont: calc(var(--mfont) - 3px);
}
/*! Text color utility classes ********/
.clr-txt-font {
  color: var(--clr-font);
}
.clr-txt-primary {
  color: var(--clr-primary);
}
.clr-txt-secondary {
  color: var(--clr-secondary);
}
.clr-txt-tertiary {
  color: var(--clr-tertiary);
}
.clr-txt-inst {
  color: var(--clr-inst);
}
.clr-txt-id {
  color: var(--clr-id);
}
.clr-txt-dev {
  color: var(--clr-dev);
}
.clr-txt-light-grey {
  color: var(--clr-light-grey);
}

.clr-txt-accent {
  color: var(--clr-accent);
}
.clr-txt-accent-light {
  color: var(--clr-accent-light);
}
.clr-txt-accent-10 {
  color: var(--clr-accent-10);
}
.clr-txt-accent-2 {
  color: var(--clr-accent-2);
}
.clr-txt-select {
  color: var(--clr-select);
}
.clr-txt-highlight {
  color: var(--clr-highlight);
}
.clr-txt-button-hover {
  color: var(--clr-button-hover);
}
.clr-txt-white {
  color: var(--clr-white);
}

.clr-txt-background {
  color: var(--clr-background);
}
.clr-txt-boarder {
  color: var(--clr-boarder);
}
.clr-txt-lesson {
  color: var(--clr-lesson);
}
.clr-txt-self {
  color: var(--clr-self);
}
.clr-txt-self-reflection {
  color: var(--clr-self-reflection);
}
.clr-txt-reflection {
  color: var(--clr-reflection);
}
.clr-txt-final {
  color: var(--clr-final);
}
.clr-txt-case {
  color: var(--clr-case);
}
.clr-txt-knowledge {
  color: var(--clr-knowledge);
}
.clr-txt-journal {
  color: var(--clr-journal);
}
.clr-txt-quiz {
  color: var(--clr-quiz);
}
.clr-txt-activity {
  color: var(--clr-activity);
}
.clr-txt-assignment {
  color: var(--clr-assignment);
}
.clr-txt-discInfo {
  color: var(--clr-discInfo);
}
.clr-txt-mastery {
  color: var(--clr-mastery);
}
.clr-txt-food {
  color: var(--clr-food);
}
.clr-txt-think-about {
  color: var(--clr-think-about);
}
.clr-txt-pause {
  color: var(--clr-pause);
}
.clr-txt-survey {
  color: var(--clr-survey);
}
.clr-txt-course {
  color: var(--clr-course);
}
.clr-txt-puzzle {
  color: var(--clr-puzzle);
}
.clr-txt-formula {
  color: var(--clr-formula);
}
.clr-txt-reminder {
  color: var(--clr-reminder);
}
.clr-txt-conditional {
  color: var(--clr-conditional);
}
.clr-txt-assessment {
  color: var(--clr-assessment);
}
.clr-txt-practice {
  color: var(--clr-practice);
}
.clr-txt-red {
  color: var(--clr-red);
}
.clr-txt-copy {
  color: var(--clr-copy);
}
.clr-txt-alert {
  color: var(--clr-alert);
}
.clr-txt-success {
  color: var(--clr-success);
}
.clr-txt-info {
  color: var(--clr-info);
}
.clr-txt-warning {
  color: var(--clr-warning);
}
.clr-txt-off-white {
  color: var(--clr-off-white);
}

.clr-txt-table-yellow {
  color: var(--clr-table-yellow);
}
.clr-txt-table-orange {
  color: var(--clr-table-orange);
}

.clr-txt-yellow-light {
  color: var(--clr-yellow-light);
}
.clr-txt-yellow {
  color: var(--clr-yellow);
}
.clr-txt-yellow-dark {
  color: var(--clr-yellow-dark);
}

.clr-txt-green-light {
  color: var(--clr-green-light);
}
.clr-txt-green {
  color: var(--clr-green);
}
.clr-txt-green-dark {
  color: var(--clr-green-dark);
}

.clr-txt-black {
  color: var(--clr-black);
}

.clr-txt-blue-light {
  color: var(--clr-blue-light);
}
.clr-txt-blue {
  color: var(--clr-blue);
}
.clr-txt-blue-dark {
  color: var(--clr-blue-dark);
}

.clr-txt-orange-light {
  color: var(--clr-orange-light);
}
.clr-txt-orange {
  color: var(--clr-orange);
}
.clr-txt-orange-dark {
  color: var(--clr-orange-dark);
}

.clr-txt-pink-light {
  color: var(--clr-pink-light);
}
.clr-txt-pink {
  color: var(--clr-pink);
}
.clr-txt-pink-dark {
  color: var(--clr-pink-dark);
}

.clr-txt-purple-light {
  color: var(--clr-purple-light);
}
.clr-txt-purple {
  color: var(--clr-purple);
}
.clr-txt-purple-dark {
  color: var(--clr-purple-dark);
}

.clr-txt-peach {
  color: var(--clr-peach);
}

.clr-txt-note-bg {
  color: var(--clr-note-bg);
}
.clr-txt-note-text {
  color: var(--clr-note-text);
}
.clr-txt-note-line {
  color: var(--clr-note-line);
}

.clr-txt-alert-bg {
  color: var(--clr-alert-bg);
}
.clr-txt-alert-text {
  color: var(--clr-alert-text);
}
.clr-txt-alert-line {
  color: var(--clr-alert-line);
}

.clr-txt-warning-bg {
  color: var(--clr-warning-bg);
}
.clr-txt-warning-text {
  color: var(--clr-warning-text);
}
.clr-txt-warning-line {
  color: var(--clr-warning-line);
}

.clr-txt-success-bg {
  color: var(--clr-success-bg);
}
.clr-txt-success-text {
  color: var(--clr-success-text);
}
.clr-txt-success-line {
  color: var(--clr-success-line);
}

.clr-txt-tab-bg {
  color: var(--clr-tab-bg);
}

.clr-txt-btn1 {
  color: var(--clr-btn1);
}
.clr-txt-btn2 {
  color: var(--clr-btn2);
}
.clr-txt-btn3 {
  color: var(--clr-btn3);
}
.clr-txt-btn4 {
  color: var(--clr-btn4);
}

.clr-txt-link-visited {
  color: var(--clr-link-visited);
}
/* APP CPOLOURS END */
/* Plain Colour BG START */

.clr-yellow-light {
  background-color: var(--clr-yellow-light);
}
.clr-yellow {
  padding: 0 5px;
  background-color: var(--clr-yellow);
}
.clr-yellow-dark {
  padding: 0 5px;
  background-color: var(--clr-yellow-dark);
}
.clr-green-light {
  padding: 0 5px;
  background-color: var(--clr-green-light);
}
.clr-green {
  padding: 0 5px;
  background-color: var(--clr-green);
}
.clr-green-dark {
  padding: 0 5px;
  background-color: var(--clr-green-dark);
  color: var(--clr-white);
}
.clr-black {
  padding: 0 5px;
  background-color: var(--clr-black);
  color: var(--clr-white);
}
.clr-blue-light {
  padding: 0 5px;
  background-color: var(--clr-blue-light);
}
.clr-blue {
  padding: 0 5px;
  background-color: var(--clr-blue);
  color: var(--clr-white);
}
.clr-blue-dark {
  padding: 0 5px;
  background-color: var(--clr-blue-dark);
  color: var(--clr-white);
}
.clr-orange-light {
  padding: 0 5px;
  background-color: var(--clr-orange-light);
  color: var(--clr-white);
}
.clr-orange {
  padding: 0 5px;
  background-color: var(--clr-orange);
  color: var(--clr-white);
}
.clr-orange-dark {
  padding: 0 5px;
  background-color: var(--clr-orange-dark);
  color: var(--clr-white);
}
.clr-pink-light {
  padding: 0 5px;
  background-color: var(--clr-pink-light);
}
.clr-pink {
  padding: 0 5px;
  background-color: var(--clr-pink);
}
.clr-pink-dark {
  padding: 0 5px;
  background-color: var(--clr-pink-dark);
  color: var(--clr-white);
}
.clr-purple-light {
  padding: 0 5px;
  background-color: var(--clr-purple-light);
}
.clr-purple {
  padding: 0 5px;
  background-color: var(--clr-purple);
  color: var(--clr-white);
}
.clr-purple-dark {
  padding: 0 5px;
  background-color: var(--clr-purple-dark);
  color: var(--clr-white);
}
.clr-accent {
  color: var(--clr-accent);
}
/* Aligning Text START */
.txt-center {
  display: block;
  text-align: center;
}
.txt-left {
  display: block;
  text-align: left;
}
.txt-right {
  display: block;
  text-align: right;
}
/* Aligning Text END */

/* Centering Elements START */
.elm-cen-h {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.elm-cen-v {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
}

.elm-cen {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
/* Float image right START */
.float-right{
  float: right;
}
/* Float image right END */
/* Centering Elements END */
/* Base Styles for Button Links START */
.center {
  display: block;
  /* max-width: fit-content; */
  margin-left: auto;
  margin-right: auto;
}
.p-center {
  text-align: center;
}
.UNB-card {
  background-color: #ffffff;
  color: var(--clr-primary);
  border-radius: 5px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  padding: 20px;
}
.UNB-figure-caption {
  padding-top: 5px;
  text-align: center;
  font-size: 9pt;
  color: var(--clr-primary);
}
.UNB-header {
  color: var(--clr-accent);
}
.UNB-grey-boarder-thin {
  border-style: solid;
  border-width: 1px;
  border-color: var(--clr-boarder);
  padding: 10px;
}
.UNB-grey-boarder-thin  p,
.UNB-grey-boarder-thin img {
  padding: 10px;
}
/* UNB TABLE STYLES START */
.UNB-box-white-drop-down {
  width: auto;
  padding-left: 20px;
  padding-right: 20px;
  margin: auto;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.15), 0px 8px 20px rgba(0, 0, 0, 0.15);
}
/* Colours */
.UNB-bg-darkgrey {
  background-color: #242424;
}
.UNB-white {
  color: white;
}

.UNB-text-center {
  text-align: center;
}

.UNB-light-grey-boarder-thin {
  border-style: solid;
  border-width: 1px;
  border-color: #8e8e8e;
}

.UNB-padding-bottom-1 {
  padding-bottom: 25px;
}
.UNB-padding-bottom-2 {
  padding-bottom: 50px;
}
.UNB-font-large {
  font-size: 2em;
}
.UNB-box-white {
  background-color: #ffffff;
  color: #000000;
  width: auto;
  padding: 0px;
  margin: auto;
}

.UNB-flex-container {
  display: flex;

  align-items: stretch;
}
.UNB-flex-left {
  flex: 1;
}
.UNB-flex-right {
  flex: 1;
}
.UNB-flex-center2 {
  flex: 1;
}
.UNB-flex-container2 {
  display: flex;

  align-items: stretch;
}
.UNB-flex-left {
  flex: 1;
}
.UNB-flex-right {
  flex: 1;
}
.UNB-flex-center2 {
  flex: 1;
}
.UNB-flex-container2 {
  display: flex;

  align-items: stretch;
}
.UNB-flex-left2 {
  flex: 1;
}
.UNB-flex-right2 {
  flex: 1;
}
/* 1) make each flex‐column a column‐direction flex container */
.UNB-flex-left,
.UNB-flex-center2,
.UNB-flex-right {
  display: flex;
  flex-direction: column;
}

/* 2) allow the list‐box to stretch to fill the column */
.UNB-light-grey-boarder-thin {
  flex: 1;
}
/* Media  */
@media (max-width: 576px) {
  .UNB-font-large {
    font-size: 1.15em;
  }
  .UNB-flex-container-instructor {
    flex-direction: column;
  }
  .UNB-flex-container {
    flex-direction: column;
  }
  .UNB-flex-container2 {
    flex-direction: column;
  }
  .UNB-flex-center {
    padding-top: 0px;
  }
  .UNB-flex-center-instructor {
    padding-top: 0px;
  }
  .UNB-instructor-name {
    font-size: 10pt;
  }
  .UNB-h1-aside {
    text-align: center;
  }
  .UNB-padding-top {
    padding-top: 0px;
  }
  .UNB-padding-left-80 {
    padding-left: 0px;
  }
  .UNB-image-half-div {
    width: 90%;
    height: auto;
  }

  .UNB-h1-font {
    text-align: center;
  }
  .UNB-flex-left-title {
    padding-bottom: 20px;
  }
  .UNB-flex-center-title {
    flex: 1;
    justify-content: center;
    padding-top: 0px;
    border-bottom: 2px solid rgba(0, 0, 0, 0.1);
  }
  .UNB-flex-right-title {
    padding-top: 20px;
  }
  .line-flip1 {
    border-bottom: 2px solid rgba(0, 0, 0, 0.1);
    width: 100%;
  }
}
/*For Header text in a grid */
@media (min-width: 576px) {
  .line-flip2 {
    border-left: 1px solid rgba(0, 0, 0, 0.1);
    overflow: visible;
  }

  /* 3 Column Grid USE THIS ONE For Text Headers */
  .grid-chart-3col-text {
    display: grid;
    grid-template-columns: 0.5fr 0.25fr 1fr;
    grid-template-rows: auto;
  }
}

/*FLIPPABLE LINE PHONE */

@media (max-width: 576px) {
  .UNB-padding-right-10 {
    padding-right: 0px;
  }
  .UNB-padding-left-10 {
    padding-top: 20px;
    padding-left: 0px;
  }
  .line-flip2 {
    border-bottom: 2px solid rgba(0, 0, 0, 0.1);
  }
  .line-flip1 {
    border-bottom: 0px solid rgba(0, 0, 0, 0.1);
  }
  .grid-chart-3col-text {
    grid-auto-columns: 0.5fr 0.25fr 1fr;
  }
  .UNB-text-center-vert {
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .UNB-text-center {
    text-align: center;
  }
}
/* UNB TABLE STYLES END */
/* Text Alignment START */
.align-text-left {
  text-align: left !important;
}
.align-text-center {
  text-align: center !important;
}
.align-text-right {
  text-align: right !important;
}
.align-text-justify {
  text-align: justify !important;
}
/* Text Alignment END */
/* Centre Vertically */

/* Centre Vertically End*/
.button-custom,
.button-custom-a,
.button-custom-b,
.button-custom-c {
  display: block;
  color: var(--clr-white);
  background-color: var(--clr-accent);
  text-decoration: none;
  padding: 5px 15px;
  border-radius: 25px;
  transition: all 0.2s ease-in-out;
  box-sizing: border-box;
  width: fit-content;
  word-wrap: break-word;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.2), 0px 8px 20px rgba(0, 0, 0, 0.26);
}
/* Boxes with colours START */
.box-blue-light :is(h2, h3, h4, h5, h6) {
  color: var(--clr-primary);
}
.box-blue-light {
  /* background-color: #007fa3; */
  background-color: var(--clr-blue-light);
  color: var(--clr-primary);
  width: auto;
  padding: 20px;
  margin: auto;
  border-radius: 5px;
}
/* Boxes with colours END */
/* Colours */
.text-accent {
  color: var(--clr-accent);
}

/* Specific Styles for .button-custom-a */

.button-custom-a {
  background-color: var(--clr-primary);
}
.button-custom-b {
  background-color: var(--clr-tertiary);
}

/* Hover Effects */
.button-custom:hover,
.button-custom-a:hover,
.button-custom-b:hover,
.button-custom-c:hover {
  color: var(--clr-white);
  transform: scale(0.99);
  background-color: var(--clr-button-hover);
  box-shadow: 0px 2px 18px rgba(255, 0, 0, 0.2);
  /* text-shadow: 0 0 20px #fed80089, 0 0 30px #ff0000, 0 0 20px #000000, 0px 2px 5px rgba(0, 0, 0, 0.3); */
}

/* Optional: Active State for Better User Feedback */
.button-custom:active,
.button-custom-a:active,
.button-custom-b:active,
.button-custom-c:active {
  transform: scale(0.98);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Optional: Focus States for Accessibility */
.button-custom:focus,
.button-custom-a:focus,
.button-custom-b:focus,
.button-custom-c:focus {
  /* outline: 2px solid var(--clr-focus);
  outline-offset: 2px; */
}
section {
  padding: 20px;
}

/* Optional: Active State for Better User Feedback */
.button-custom:active,
.button-custom-a:active,
.button-custom-b:active,
.button-custom-c:active {
  transform: scale(0.98);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
textarea {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* Responsive Adjustments */
/* @media (max-width: 768px) {
  .button-custom,
  .button-custom-a,
  .button-custom-b,
  .button-custom-c {
    max-width: 90%;
    padding: 8px 12px;
  
  }
} */

@media (max-width: 768px) {
  .button-custom,
  .button-custom-a,
  .button-custom-b,
  .button-custom-c {
    border-radius: 100px;
    padding: 20px 25px;
    text-align: center;
  }
}
/* Base Styles for Button Links END */
html {
  background-color: var(--clr-background);
  background-repeat: repeat;
  scroll-behavior: smooth;
}
body {
  color: var(--clr-font);
  background-color: var(--clr-white);
  font-family: var(--font-body);
  font-weight: var(--font-weight-normal);
  font-size: var(--mfont);
  line-height: 1.5;
  margin: auto;
  padding-left: 10px;
  padding-right: 10px;
  transition: opacity 250ms ease-in, 400ms ease-in;
  animation: fadeInAnimation ease 3s 1;
  animation-fill-mode: forwards;
  max-width: 1080px;
}

img {
  max-width: 100%;
  height: auto;
}

img.displayed {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
textarea {
  width: 100%;
  height: 100px;
  padding: 0px 10px;

  box-sizing: border-box;
  border-style: none;
  border-radius: 5px;
  resize: none;
}
.aside-accent {
  font-weight: 500;
  line-height: 130%;
  text-align: left;
  font-size: 18pt;
  color: var(--clr-accent);
  padding-top: 25px;
  padding-bottom: 25px;
  border-top: 2px solid var(--clr-accent);
  border-bottom: 2px solid var(--clr-accent);
  margin-bottom: 1.0em;
  margin-top: 1.0em;
  margin: auto;
  width: 100%;
}
.instructor {
  max-width: 25%;
  height: auto;
}
.endFlourish {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--clr-light-grey);
  font-size: 24px;
}

.endFlourish::before,
.endFlourish::after {
  content: '';
  flex: 1;
  margin: 0 10px;
  height: 2px;
}

.endFlourish::before {
  background: linear-gradient(
    to right,
    var(--clr-background),
    var(--clr-white),
    var(--clr-light-grey)
  );
}

.endFlourish::after {
  background: linear-gradient(
    to left,
    var(--clr-background),
    var(--clr-white),
    var(--clr-light-grey)
  );
}

.endFlourish img {
  display: block;
  max-height: 24px;
}
/* Flourish Footer Image */

/* Ensure the image is full width */
.endFlourishImage .logo img {
  display: none;
}

/* Set the container to hold the image and text */
.endFlourishImage {
  position: relative;
  width: 100%;

  display: block;
  margin-top: 0;

  padding-top: 25%; /* Adjust based on image's aspect ratio (e.g., 25% for 4:1) */
  height: 0;
}

/* Remove the lines and set the background image */
.endFlourishImage::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('../../img/00-interface-images/footerImage.png');
  background-size: contain;
  background-position: center top;
  background-repeat: no-repeat;
  z-index: 1;
}

/* Text overlay on the left-hand side of the image */
.endFlourishImage .overlayText {
  position: absolute;
  left: 20px;
  color: var(--clr-white);
  font-size: 14px;
  z-index: 2;
}

/* Center the first overlay text vertically */
.endFlourishImage .overlayText:first-child {
  top: 50%;
  transform: translateY(-50%);
}

/* Position the second overlay text below the first */
.endFlourishImage .overlayText:nth-child(2) {
  top: 65%;
  transform: translateY(-50%);
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  .endFlourishImage {
    padding-top: 30%;
  }

  .endFlourishImage .overlayText {
    left: 10px;
    font-size: 12px;
  }

  .endFlourishImage .overlayText:first-child {
    top: 45%;
  }

  .endFlourishImage .overlayText:nth-child(2) {
    top: 60%;
  }
}

@media (max-width: 480px) {
  .endFlourishImage {
    padding-top: 50%;
  }

  .endFlourishImage .overlayText {
    left: 5px;
    font-size: 10px;
  }

  .endFlourishImage .overlayText:first-child {
    top: 40%;
  }

  .endFlourishImage .overlayText:nth-child(2) {
    top: 55%;
  }
}
/* End Flourish Image END */
body[contenteditable="true"] *,
body[contenteditable="true"]::before,
body[contenteditable="true"]::after {
  opacity: 1 !important;
  animation: none !important;
}
/* p {
  padding-left: 10px;
} */
/* Drop Cap */
/* div:not([class]) > p:first-of-type::first-letter {
    float: left;
    font-size: 3em;
    font-weight: bold;
    line-height: 1;
    margin-right: 0.1em;
   
  } */
.sub-title {
  /* text-decoration: 2px underline var(--clr-accent); */
}
@keyframes fadeInAnimation {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

#iframe-container {
  width: 100%;
  height: 100%;
  position: relative;
  margin-left: auto;
}
/* Custom table START */
.grid {
  overflow: hidden;
}
/* 2 Column Grid START */
.grid-chart-2col {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: auto;
}
/* 2 Column Grid END */
.grid-chart-3col .UNB-text-left {
  text-align: left;
}
.grid-chart-3col .UNB-text-right {
  text-align: right;
}
.grid-chart-3col {
  display: grid;
  grid-template-columns: 3fr 1fr 2fr;
  /*grid-template-columns: repeat(3, 1fr);*/
  grid-template-rows: auto;
}

/* UNB CSS Custom Styles */
.UNB-hide {
  display: none;
}

/* UNB Grid Colours */
.UNB-row-white {
  border: 1px solid rgba(0, 0, 0, 0.1);
  text-align: center;
  background-color: #ffffff;
  padding: 0.5rem;
}
.UNB-row-red {
  border: 1px solid rgba(0, 0, 0, 0.1);
  text-align: center;
  background-color: #ba0003;
  padding: 0.5rem;
}
.UNB-row-orange {
  border: 1px solid rgba(0, 0, 0, 0.1);
  text-align: center;
  background-color: #ffb905;
  padding: 0.5rem;
}
.UNB-row-yellow {
  border: 1px solid rgba(0, 0, 0, 0.1);
  text-align: center;
  background-color: #ffdd6f;
  padding: 0.5rem;
}
.UNB-row-green {
  border: 1px solid rgba(0, 0, 0, 0.1);
  text-align: center;
  background-color: #85cc3e;
  padding: 0.5rem;
}

.UNB-row-blue {
  border: 1px solid rgba(0, 0, 0, 0.1);
  text-align: center;
  background-color: #007fa3;
  padding: 0.5rem;
}
.UNB-row-grey {
  border: 1px solid rgba(0, 0, 0, 0.1);
  text-align: center;
  background-color: #f2f2f2;
  padding: 0.5rem;
}
.UNB-row-dark-grey {
  border: 1px solid rgba(0, 0, 0, 0.1);
  text-align: center;
  color: white;
  background-color: #2e3338;
  padding: 0.5rem;
}
.UNB-row-white_l {
  border: 1px solid rgba(0, 0, 0, 0.1);
  text-align: left;
  background-color: #ffffff;
  padding: 0.5rem;
  text-indent: 0.5rem;
}
.UNB-row-grey_l {
  border: 1px solid rgba(0, 0, 0, 0.1);
  text-align: left;
  background-color: #f2f2f2;
  padding: 0.5rem;
  text-indent: 0.5rem;
}
.UNB-row-dark-grey_l {
  border: 1px solid rgba(0, 0, 0, 0.1);
  text-align: left;
  color: white;
  background-color: #2e3338;
  padding: 0.5rem;
  text-indent: 0.5rem;
}
.UNB-row-dark-grey-center {
  border: 1px solid rgba(0, 0, 0, 0.1);
  text-align: center;
  color: white;
  background-color: #2e3338;
  padding: 0.5rem;
}
/* Custom table END */

/* Card START */
.card {
  background-color: #ffffff;
  color: #000000;
  border-radius: 5px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  padding: 10px;
}
/* Card END */

.h5p-container {
  width: 80%;
  max-width: 800px;
  margin: 0 auto;
}

.h5p-container iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 1088 / 637;
}
.h5p-full {
  width: 100% !important;

  object-fit: contain;
}
.h5p-full-max {
  width: 100% !important;
  height: 70vh !important;
  min-height: 450px !important;
  max-height: 800px !important;
  object-fit: contain;
} 
/* OLD */
/* .h5p-full {
  width: 100% !important;
  height: 70vh !important;
  min-height: 450px !important;
  max-height: 800px !important;
  object-fit: contain;
} */
.h5p-full-0 {
  width: 100% !important;
  object-fit: contain;
}
/* .h5p-full {
  width: 100%;
  padding: 20px;
 

} */
/* .h5p-full {
  width: 80%;
  height: 80%;
  margin: 0 auto;
} */
.h5p-full-10 {
  width: 90%;
  /* height: 90%; */
  margin: 0 auto;
}
.h5p-full-20 {
  width: 80%;
  /* height: 80%; */
  margin: 0 auto;
}
.h5p-full-30 {
  width: 70%;
  /* height: 70%; */
  margin: 0 auto;
}
.h5p-full-40 {
  width: 60%;
  /* height: 60%; */
  margin: 0 auto;
}
.h5p-full-50 {
  width: 50%;
  /* height: 50%; */
  margin: 0 auto;
}
.h5p-full-60 {
  width: 40%;
  /* height: 40%; */
  margin: 0 auto;
}
.h5p-full-70 {
  width: 30%;
  /* height: 30%; */
  margin: 0 auto;
}
.h5p-full-80 {
  width: 20%;
  /* height: 20%; */
  margin: 0 auto;
}
.h5p-full-90 {
  width: 10%;
  /* height: 10%; */
  margin: 0 auto;
}

.h5p-full iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 1088 / 637;
}

.embed-responsive {
  position: relative;
  width: 100%;
  padding-bottom: calc(317 / 544 * 100%);
  height: 0;
  overflow: hidden;
}
.embed-responsive iframe,
.embed-responsive .h5p-iframe-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

body div iframe {
  overflow: auto;
}
body iframe {
  background-color: #fff;
}
iframe {
  display: block;
}

/* Code snipit START */
pre.code-snippet {
  background-color: #28282c;
  color: #e0e0e0;
  border: 1px solid #333;
  border-radius: 4px;
  padding: 16px;
  overflow-x: auto;
  font-family: Consolas, Monaco, "Courier New", monospace;
  font-size: 14px;
  line-height: 1.5;
  white-space: pre-wrap;
  margin: 1em 0;
}

/* Optionally, style the code element too */
code {
  display: block;
}
/* Code snipit END */
/* p img {
  display: block;
  max-width: 100%;
  height: auto;
} */

/* Table START */
/* ! Interactive table START */
.interactive-table th.clickable-header {
    cursor: pointer;
    position: relative;
  }
  
  /* .interactive-table th.clickable-header:hover {
    background-color: #f0f0f0;
  } */
  
  .interactive-table th.clickable-header::after {
    content: "";
    font-size: 0.8em;
    opacity: 0.5;
  }
  
  /* Hidden content styling */
  .strain-index-content {
    display: none;
    padding: 15px;
    margin-top: 10px;
    border: 1px solid #ddd;
    /* background-color: #f9f9f9; */
    border-radius: 4px;
    /* max-width: 800px; */
    margin: 10px auto;
  }
  
  .strain-index-content.active {
    display: block;
  }
/* ! Interactive table END */
/* General table styles */


/* Apply styles to ALL tables EXCEPT those with .table-reset */

table:not(.table-reset) {
  width: 100%;
  border-collapse: collapse;
  border: 2px solid var(--clr-secondary) !important;
  color: var(--clr-primary);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 6px 20px rgba(0, 0, 0, 0.1);
}

table:not(.table-reset) th,
table:not(.table-reset) td {
  border: 1px solid var(--clr-secondary) !important;
  padding: 10px;
}

table:not(.table-reset) tr:first-child th,
table:not(.table-reset) tr:first-child td {
  background-color: var(--clr-secondary);
  color: var(--clr-white);
  text-align: center;
}

table:not(.table-reset) tbody tr:nth-child(even):not(:first-child) {
  background-color: var(--clr-background);
}

table:not(.table-reset) tbody tr:nth-child(odd):not(:first-child) {
  background-color: var(--clr-accent-10);
}

table:not(.table-reset) tbody tr td {
  color: var(--clr-primary);
}

table:not(.table-reset) th {
  background-color: var(--clr-secondary);
  color: var(--clr-white);
  text-align: left;
}

/* And similarly for any other table selectors */
table:not(.table-reset) tr:first-child th,
table:not(.table-reset) tr:first-child td,
table:not(.table-reset) th {
  border: 1px solid var(--clr-white) !important;
}

table:not(.table-reset) tr:first-child th + th,
table:not(.table-reset) tr:first-child td + td,
table:not(.table-reset) th + th {
  border-left: 1px solid var(--clr-white) !important;
}


/* Override for green-themed form */
.form-yellow {
  --clr-accent-10: var(--clr-table-yellow);

  /* You can override additional variables if needed, e.g.:
  --clr-secondary: #2E8B57;
  */
}

/* Override for blue-themed form */
.form-blue {
  --clr-accent-10: var(--clr-blue-light);
}

/* Override for red-themed form */
.form-red {
  color: white;
  --clr-accent-10: var(--clr-table-orange);
}
.form-red table tbody tr:nth-child(odd):not(:first-child) td {
  color: var(--clr-primary);
}
/* Make borders white when on secondary background */
table tr:first-child th,
table tr:first-child td,
table th {
  border: 1px solid var(--clr-white) !important;
}

/* Fix internal borders between adjacent header cells */
table tr:first-child th + th,
table tr:first-child td + td,
table th + th {
  border-left: 1px solid var(--clr-white) !important;
}
/* Table END */

/* Custom Table START */
.c-table {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 6px 20px rgba(0, 0, 0, 0.1);
}
.c-c-short {
  max-width: 20ch; /* Limit to 20 characters */
  white-space: nowrap; /* Prevent text wrapping */
  overflow: hidden; /* Hide overflow text */
  text-overflow: ellipsis; /* Add ellipsis for overflowed text */
}
/* Column classes with internal borders */
.c-col-1,
.c-col-2,
.c-col-3,
.c-col-4,
.c-col-5,
.c-col-6 {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
}

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

.c-col-3 {
  grid-template-columns: repeat(3, 1fr);
}

/* Repeat for .c-col-4, .c-col-5, and .c-col-6 similarly */

/* Add borders between columns */
.c-col-2 > div,
.c-col-3 > div,
.c-col-4 > div,
.c-col-5 > div,
.c-col-6 > div {
  border-right: 1px solid var(--clr-secondary);
}

/* Remove right border from last column */
.c-col-2 > div:last-child,
.c-col-3 > div:last-child,
.c-col-4 > div:last-child,
.c-col-5 > div:last-child,
.c-col-6 > div:last-child {
  border-right: none;
}

/* Title styling with rounded top corners */
.c-t-title {
  background-color: var(--clr-secondary);
  color: var(--clr-white);
  padding: 0.25rem;
  text-align: center;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

/* Alternating row colors */
.c-table > div:nth-child(odd):not(.c-t-title) {
  background-color: var(--clr-tertiary);
  color: var(--clr-primary);
  border: 1px solid var(--clr-secondary);
}

.c-table > div:nth-child(even):not(.c-t-title) {
  background-color: var(--clr-background);
  color: var(--clr-primary);
  border: 1px solid var(--clr-secondary);
}

/* Round bottom corners of the last row */
.c-table > div:last-child {
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

.c-table p {
  margin: 0;
  padding: 0.25rem;
}

/* Table reset */
/* .table-reset,
.table-reset * {
  all: revert !important;   
} */

/* Custom Table END */

/* Light coloured background */
.bg-light-accent {
  background-color: var(--clr-accent-light);
}

/* Adjust the size of Videos START */

/* Reset box-sizing globally */
*,
*::before,
*::after {
  box-sizing: border-box;
}
.img-shadow {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), 0 6px 20px rgba(0, 0, 0, 0.19);
}

/* YouTube Videos */
iframe[src*="youtube"],
p iframe[src*="youtube"],
div iframe[src*="youtube"] {
  width: 100% !important;
  max-width: 800px !important;
  height: auto !important;
  display: block !important;
  margin: 0 auto !important;
  border: 1px solid var(--clr-primary);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), 0 6px 20px rgba(0, 0, 0, 0.19);
  aspect-ratio: 16 / 9 !important;
}
/* UNB Library */
iframe[src*="hil.unb.ca"],
p iframe[src*="hil.unb.ca"] {
  display: block;
  max-width: 660px;
  width: 660px;
  height: 550px;
  border: 1px solid var(--clr-primary) !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), 0 6px 20px rgba(0, 0, 0, 0.19) !important;
  overflow: hidden;
  margin: 0 auto;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

/* NFB */
div iframe[src*="nfb"],
p iframe[src*="nfb"] {
  width: 90% !important;
  height: auto !important;
  display: block !important;
  margin-left: auto !important;
  margin-right: auto !important;
  border: 1px solid var(--clr-primary) !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), 0 6px 20px rgba(0, 0, 0, 0.19) !important;
  aspect-ratio: 16 / 9;
}

/* Override divs with inline padding for Vimeo embeds */
div[style*="padding:53.65% 0 0 0"] {
  position: relative !important;
  width: 90% !important;
  max-width: 900px !important;
  margin: 0 auto !important;
  padding-top: 56.25% !important;
  border: none !important;
  box-shadow: none !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Ensure Vimeo iframes fill their parent divs and have appropriate styles */
div > iframe[src*="vimeo"],
p > iframe[src*="vimeo"] {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  margin: 0 !important;
  border: 1px solid var(--clr-primary) !important; /* Add border to iframe */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), 0 6px 20px rgba(0, 0, 0, 0.19) !important; /* Add box-shadow to iframe */
  /* aspect-ratio: none !important; */ /* Removed invalid value */
}
iframe[src*="vimeo"],
p > iframe[src*="vimeo"] {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  margin: 0 !important;
  border: 1px solid var(--clr-primary) !important; /* Add border to iframe */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), 0 6px 20px rgba(0, 0, 0, 0.19) !important; /* Add box-shadow to iframe */
  /* aspect-ratio: none !important; */ /* Removed invalid value */
}

/* Optional: Remove any additional padding from iframes */
/* iframe[src*="vimeo"],
iframe[src*="hil.unb.ca"],
iframe[src*="youtube"] {
  padding: 0 !important;
  margin: 0 !important;
} */

/*  */
/*  */
/*! Only for Nikki course */

/* The wrapper that has the inline padding:... from Vimeo */
.vimeo-small[style*="padding:"],
.vimeo-small div[style*="padding:"] {
  position: relative !important;
  width: 60% !important;
  max-width: 640px !important;          /* use a pixel cap or remove */
  margin: 0 auto !important;
  padding-top: 56.25% !important;        /* ensure 16:9 */
  overflow: hidden !important;
  box-sizing: border-box !important;

  /* Move border + shadow to the wrapper */
  border: 1px solid var(--clr-primary) !important;
  box-shadow: 0 4px 8px rgba(0,0,0,.2), 0 6px 20px rgba(0,0,0,.19) !important;

  line-height: 0;                         /* avoid baseline gaps in some layouts */
}

/* Let the iframe just fill the wrapper with no border */
.vimeo-small > iframe[src*="vimeo"],
.vimeo-small div > iframe[src*="vimeo"] {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  margin: 0 !important;
  border: 0 !important;                   /* was 1px; remove to prevent the “gap” look */
  box-shadow: none !important;
}



/*  */
/*  */
/* Hide iframe titles if needed */
.hide-title {
  display: none;
}

/* Adjust the size of Videos END */

.embed-container {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  max-width: 100%;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.embed-container iframe,
.embed-container object,
.embed-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.iframe-holder {
  animation: none;
  max-width: 100%;
  /* height: auto; */
  overflow: visible;
  box-sizing: border-box;
}
.iframe-holder-full {
  animation: none;
  width: 100%;
  overflow: visible;
  box-sizing: border-box;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

hr {
  display: block;
  border: 0;
  border-top: 2px solid var(--clr-accent);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  /* line-height: 130%; */
  margin-block-start: 0.5rem;
  margin-block-end: 1rem;
  font-family: var(--font-body);
  font-weight: var(--font-weight-bold);
  line-height: 1.2;
  color: inherit;
}
h4,
h5,
h6 {
  padding-top: 15px;
}

.test2 h2 {
  padding: 5px 0;
  margin-top: 40px;
  margin-bottom: 40px;
  font-family: var(--font-h1);
  font-size: 2em;
  font-weight: bold;
  background: linear-gradient(
    90deg,
    var(--clr-background),
    var(--clr-tertiary),
    var(--clr-tertiary),
    var(--clr-background)
  );
  color: var(--clr-primary);
  text-align: center;
}

.test h2 {
  padding: 5px 0;
  margin-top: 40px;
  margin-bottom: 40px;
  font-family: var(--font-body);
  font-weight: var(--font-weight-bold);
  font-size: 2em;
  font-weight: bold;
  background: var(--clr-primary);
  color: var(--clr-white);
  text-align: center;
  border-left: 5px solid var(--clr-accent);
  border-right: 5px solid var(--clr-accent);
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

h2 {
  padding-top: 50px;
  margin: 30px 0 1em 0;
  font-family: var(--font-h1);
  font-size: 1.6em;
  font-weight: bold;
  border-bottom: 3px solid var(--clr-primary);
  color: var(--clr-accent);
  text-align: center;
  -webkit-background-clip: text;
}

h2:first-of-type {
  padding-top: 0;
}

h3 {
  margin-left: 0;
  padding-top: 1.5%;
  color: var(--clr-accent);
  text-align: left;
  text-decoration-color: var(--clr-primary);
  font-family: var(--font-body-bold);
  font-size: 1.25em;
}
h3 a {
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-all;
  white-space: normal;
}
h4 {
  margin: 10px 0;
  color: var(--clr-accent);
  text-align: left;
  text-decoration-color: var(--clr-accent);
  font-size: 1.1em;
}

h5 {
  margin: 10px 0;
  color: var(--clr-accent);
  text-align: left;
  font-size: 1.0em;
}
h6 {
  margin: 10px 0;
  font-family: var(--font-h3);
  color: var(--clr-accent);
  text-align: left;
  font-size: 1em;
}

button {
  font-size: var(--mfont);
  color: white;
  background-color: var(--clr-accent);
  /* border: 2px solid var(--clr-accent); */
  border: none;
  border-radius: 5px;
  padding: 5px 10px;
  margin: 5px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
}
/* video or image behind text START */
.img-BG,
.video-BG {
  position: relative;
  padding: 20px;
  color: white;
  overflow: hidden;
  height: auto;
  z-index: 1;
}

.img-BG::before,
.video-BG::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 253, 253, 0.80);
  z-index: -1;
  pointer-events: none;
}

.video-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
  overflow: hidden;
}

#background-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  position: absolute;
}
.UNB-rounded-box-white  hr {
  border-top: 2px solid var(--clr-tertiary);
}
/* Instructor Aside text Start */
.instructor-aside {
  font-weight: 500;
  line-height: 130%;
  text-align: left;
  font-size: 18pt;
  color: var(--clr-accent);
  padding-top: 25px;
  padding-bottom: 25px;
  border-top: 2px solid var(--clr-accent);
  border-bottom: 2px solid var(--clr-accent);
  margin-bottom: 1.0em;
  margin-top: 1.0em;
  margin: auto;
  width: 100%;
}
/* Aside text END */
/* Instructor Box Start */
.UNB-rounded-box-white {
  background-color: var(--clr-white);
  color: var(--clr-primary);
  width: auto;
  padding: 20px;
  margin: auto;
  border-radius: 5px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
/* Instructor Box END */

/* Text Pull START */
.text-pull {
  display: grid;
  grid-template-columns: 1fr auto 3fr;
  align-items: center;

  border-top: 1px solid var(--clr-tertiary);
  border-bottom: 1px solid var(--clr-tertiary);

  padding: 0.5em 1em;
  gap: 1em;
}

.text-pull__left {
  color: var(--clr-accent);
  text-align: center;
}
.text-pull__right {
  text-align: left;
}

.text-pull__divider {
  width: 1px;
  height: 4em;
  background: var(--clr-tertiary);
}

/* Text Pull END */

/* video or image behind text END */

/* OL and il list styles START */

::marker {
  color: var(--clr-accent);
  font-weight: 700;
}

/* === NUMERIC ORDERED LISTS (Default) === */
/* ol.numeric,
ol:not(.alphabetical) {
  list-style: none;
  counter-reset: num-counter;
}
ol.numeric > li,
ol:not(.alphabetical) > li {
  position: relative;
  padding-left: .5em;
}
ol.numeric > li::before,
ol:not(.alphabetical) > li::before {
  font-family: 'proxima_nova_rgbold', sans-serif !important;
  font-weight: 700 !important;
  color: var(--clr-accent);
  counter-increment: num-counter;
  content: counter(num-counter) ". ";
  position: absolute;
  left: -1.25em;
  top: 0em;
  text-align: right;
  display: inline-block;
  width: 2ch;
} */

/* === ALPHABETICAL ORDERED LISTS === */
/* ol.alphabetical {
  list-style: none;
  counter-reset: alpha-counter;
}
ol.alphabetical > li {
  position: relative;
  padding-left: 2em;
}
ol.alphabetical > li::before {
  font-family: 'proxima_nova_rgbold', sans-serif !important;
  font-weight: 700 !important;
  color: var(--clr-accent);
  counter-increment: alpha-counter;
  content: counter(alpha-counter, lower-alpha) ". ";
  position: absolute;
  left: -2em;
  top: -0.2em;
  width: 2em;
  text-align: right;
  display: inline-block;
} */

/* === UNORDERED LISTS (BULLETS) === */
/* ul {
  list-style: none;
}
ul li {
  position: relative;
  padding-left: 1.5em;
}
ul li::before {
  color: var(--clr-accent);
  content: "\2022";
  display: inline-block;
  width: 1em;
  margin-left: -1em;
  position: absolute;
  top: 0em;
} */

/* OL and il list styles go here END */

/* Universal Icon Controls START */
[class^="icon-"] {
  width: 30px;
  height: 30px;
  display: inline-block;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-color: var(--icon-color, var(--clr-primary));
  mask-image: var(--icon-mask);
  -webkit-mask-image: var(--icon-mask);
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
}
.file-icon {
  margin-right: 5px;
  vertical-align: middle;
  position: relative;
  width: 30px;
  height: 30px;
}

/* Apply this to all icons by default */
/* .icon {
    background-color: var(--icon-color-global);
  } */

/* Example of overriding the global color for individual icons */
/* .icon-self {
    background-color: var(--icon-color);
  } */

/* Universal Icon Controls END */

/* Remove animation and ensure visibility when inside details, table, or .tabcontent */
iframe,
.iframe-embeds,
details ul,
details ol,
table ul,
table ol,
button,
button ol,
.base-accordion ul,
.base-accordion ol,
.base-accordion-title ul,
.base-accordion-title ol,
.tabcontent ul,
.tabcontent ol,
details ul li,
details ol > li,
table ul li,
table ol > li,
.base-accordion div > ul > li,
.base-accordion div > ol > li,
.base-accordion ul > li,
.base-accordion ol > li,
.base-accordion-title ul > li,
.base-accordion-title ol > li,
button ul > li,
button ol > li,
.tabcontent ul li,
.tabcontent ol > li,
details ul li::before,
details ol > li::before,
table ul li::before,
table ol > li::before,
.base-accordion ul li::before,
.base-accordion ol > li::before,
.base-accordion-title ul li::before,
.base-accordion-title ol > li::before,
button ul li::before,
button ol > li::before,
.tabcontent ul li::before,
.tabcontent ol > li::before {
  animation: none !important;
  transition: none !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Additional specificity to ensure list items inside .base-accordion-title are targeted */
/* Remove animation and ensure visibility for list items in base-accordion */
.iframe-embeds,
.iframe-embeds div > ul > li,
.iframe-embeds div > ol > li,
.iframe-embeds ul > li,
.iframe-embeds ol > li,
.base-accordion div > ul > li,
.base-accordion div > ol > li {
  animation: none !important;
  transition: none !important;
  visibility: visible !important;
  opacity: 1 !important;
  transform: none !important;
}
.iframe-embeds {
  overflow: hidden;
}

/* List and Ordered List END */

/* .outer-list,
.inner-list {
  counter-reset: my-counter;
} */

p {
  /* padding-top: 9px;
  padding-bottom: 9px; */
  text-wrap: pretty;
}

/* Fixes long links */

p a[data-icon-added] {
  display: flex;
  align-items: baseline;
  text-align: left;
}

p a[data-icon-added] img {
  top: .75em;
  flex-shrink: 0;
  margin-right: 8px;
}

p a[data-icon-added] span {
  display: inline;
  overflow-wrap: break-word;
  word-wrap: break-word;
}
/* strong {
  
  font-family: var(--font-weight-bold);
} */
/* b {
  color: var(--clr-primary);
  font-family: var(--font-weight-bold);
} */

i {
  font-style: italic;
  color: var(--clr-primary);
}

/* em {
    color: var(--clr-primary);
  } */
.inst {
  color: var(--clr-inst);
}
.id {
  color: var(--clr-id);
}
.dev {
  color: var(--clr-dev);
}
.inst-hide {
  color: var(--clr-inst);
  display: none;
}
.id-hide {
  color: var(--clr-id);
  display: none;
}
.dev-hide {
  color: var(--clr-dev);
  display: none;
}
.accordion-button:not(.collapsed) {
  box-shadow: none;
}

.nav .nav-link {
  color: var(--clr-black);
}
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
  color: var(--clr-accent);
}

::-moz-selection {
  color: var(--clr-primary);
  background: var(--clr-highlight);
}

::selection {
  color: var(--clr-primary);
  background: var(--clr-highlight);
}
.d-flex {
  display: flex;
}
.justify-content-center {
  justify-content: center;
}
.col-md {
  justify-content: center;
}

/* Two column layout Start */
.columns {
  columns: 200px 2;
  column-rule: 1px solid var(--clr-accent);
  gap: 3em;
}
.intro {
  column-span: all;
}
/* Two column layout END*/
/* column layout Start */
.col-2 {
  columns: 200px 2;
  column-gap: 3em;
  column-rule: none;
  position: relative;
}
.col-2::after {
  /* ← always visible */
  content: '';
  position: absolute;
  inset: 0;
  left: 50%;
  width: 1px;
  background: var(--clr-accent);
  transform: translateX(-.5px);
  pointer-events: none;
}

.col-3 {
  columns: 200px 3;
  column-rule: 1px solid var(--clr-accent);
  gap: 3em;
}
.col-4 {
  columns: 200px 4;
  column-rule: 1px solid var(--clr-accent);
  gap: 3em;
}
.columns,
.col-2,
.col-3,
.col-4 {
  margin: 0;
  padding: 0;
}
.columns ol,
.col-2 ol,
.col-3 ol,
.col-4 ol {
  margin: 0;
  padding: 0;
  padding-left: 25px;
}

.columns li,
.col-2 li,
.col-3 li,
.col-4 li {
  margin: 0;
  padding-left: 15px;
}
/* column layout END*/

/* Text wrap around Image START */
.text-image-wrapper.bg-primary,
.text-image-wrapper.bg-secondary,
.text-image-wrapper.bg-tertiary,
.text-image-wrapper.bg-accent {
  padding: 20px;
}
.text-image-wrapper.text-image-wrapper-left ul,
.text-image-wrapper.text-image-wrapper-left ol {
  transform: translateX(20px) !important;
  margin-right: -20px !important;
  padding-right: 37px;
}
.text-image-wrapper.text-image-wrapper-left {
  overflow-x: hidden;
}

.text-image-wrapper-left figure {
  float: left;
  margin-right: 10px;
  margin-bottom: 10px;
  padding-right: 25px;
  padding-left: 10px;
  padding-top: 15px;
}

.text-image-wrapper-right figure {
  float: right;
  margin-left: 10px;
  margin-bottom: 10px;
  padding-left: 25px;
  padding-top: 10px;
}
/* .text-image-wrapper-right figure .scale-image-33 {
  float: right;
  margin-left: 10px;
  margin-bottom: 10px;
  padding-left: 25px;
  width: 33.33%;
  height: auto; 
  
} */
/* img.scale-image-33 {
  width: 33.33%;
  height: auto; 
} */

/* General styles for figure within the text-image-wrapper */
.text-image-wrapper figure img {
  height: auto;
}

/* Figcaption style only within the text-image-wrapper */
.text-image-wrapper figure figcaption {
  font-size: 0.9rem;
  color: var(--clr-secondary);
  text-align: center;
  margin-top: 5px;
}
figure figcaption {
  font-size: 1.25rem; 
  /* font-size: 0.875rem;  OLD SIZE*/
  line-height: 1.4;
  color: var(--clr-secondary);
  text-align: center;
  margin-top: 5px;
}

.text-image-wrapper {
  overflow: auto;
}
/* Text wrap around Image END */
/* Remove icons on Start */

.homePage-main {
  max-width: fit-content;
  margin-left: 20px;
  margin-right: auto;
}
.homePage {
  /* Stuff */
  width: 100%;
  background-color: var(--clr-background);
}

/* —–––––––––– Wide screens: two columns + centered red line —–––––––––– */
@media (min-width: 600px) {
  .homePage .col-2 {
    column-count: 2;
    column-gap: 3em;
    column-rule: none;
    position: relative;
  }
  .homePage .col-2::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    background-color: var(--clr-accent);
    transform: translateX(-50%);
    pointer-events: none;
  }
}

/* —–––––––––– Narrow screens: single column, hide the line —–––––––––– */
@media (max-width: 599px) {
  .homePage .col-2 {
    column-count: 1 !important;
    column-gap: 0 !important;
  }
  .homePage .col-2::after {
    display: none;
width: 0;
  }
  .col-2::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 0px;
    background-color: var(--clr-accent);
    transform: translateX(-50%);
    pointer-events: none;
  }
}

/* Remove icons on END */
/* Colour Grid */
.color-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  padding: 10px;
}

.color-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 150px;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
  overflow: hidden;
}

.color-sample {
  position: relative;
  flex: 1;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: bold;
  border-radius: 8px 8px 0 0;
  transition: background-color 0.3s ease;
}

.color-sample[data-hex="#212121"] {
  background-color: var(--clr-primary);
}

.color-sample[data-hex="#2f2f2f"] {
  background-color: var(--clr-secondary);
}

.color-sample[data-hex="#d6d9db"] {
  background-color: var(--clr-tertiary);
}

.color-sample[data-hex="#dd2938"] {
  background-color: var(--clr-accent);
}

.color-sample[data-hex="#bfdfe8"] {
  background-color: var(--clr-accent-2);
}

.color-sample[data-hex="#704cac"] {
  background-color: var(--clr-self);
}

.color-sample[data-hex="#1d1d2c"] {
  background-color: var(--clr-think-about);
}

.color-sample[data-hex="#31a2af"] {
  background-color: var(--clr-pause);
}
.color-sample[data-hex="#7635BB"] {
  background-color: var(--clr-survey);
}
.color-sample[data-hex="#9C691C"] {
  background-color: var(--clr-course);
}

.color-sample[data-hex="#2E602F"] {
  background-color: var(--clr-puzzle);
}
.color-sample[data-hex="#2E602F"] {
  background-color: var(--clr-formula);
}

.color-sample[data-hex="#CA8216"] {
  background-color: var(--clr-reminder);
}

.color-sample[data-hex="#A86AB9"] {
  background-color: var(--clr-conditional);
}

.color-sample[data-hex="#3b4b7d"] {
  background-color: var(--clr-assessment);
}

.color-sample[data-hex="#439897"] {
  background-color: var(--clr-practice);
}

.color-sample[data-hex="#f44336"] {
  background-color: var(--clr-alert);
}

.color-sample[data-hex="#5BA467"] {
  background-color: var(--clr-success);
}

.color-sample[data-hex="#5594F1"] {
  background-color: var(--clr-info);
}

.color-sample[data-hex="#eba948"] {
  background-color: var(--clr-warning);
}

.color-sample::after {
  content: attr(data-hex);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  background-color: rgba(0, 0, 0, 0.7);
  padding: 5px 10px;
  border-radius: 5px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.color-sample:hover::after {
  opacity: 1;
}
.color-sample:hover {
  cursor: pointer;
}

.color-sample[data-copied="true"]::after {
  content: 'Copied';
  opacity: 1;
}

.color-name {
  border-top: 2px solid var(--clr-white);
  width: 100%;
  text-align: center;
  padding: 10px 0;
  background-color: #707070;
  color: white;
  font-weight: bold;
  border-radius: 0 0 8px 8px;
}

/* adjusting the callout and alert boxes when inside Accordions START */

/* Ensure styles are only applied inside <details> tags */
/* Callout Boxes Start */

details .box-primary-f,
details .box-secondary-f,
details .box-tertiary-f,
details .box-accent-f,
details .box-alert-f,
details .box-success-f,
details .box-info-f,
details .box-warning-f,
details .box-conditional-fb,
details .box-lesson-fb,
details .box-final-thought-fb,
details .box-think-fb,
details .box-pause-fb,
details .box-survey-fb,
details .box-course-fb,
details .box-puzzle-fb,
details .box-formula-fb {
  padding-left: 80px;
  padding-right: 20px;
  position: relative;
  display: block;
}

/* Positioning icons only inside <details> tags */
details .box-conditional-fb::before,
details .box-lesson-fb::before,
details .box-final-thought-fb::before,
details .box-think-fb::before,
details .box-pause-fb::before,
details .box-survey-fb::before,
details .box-survey-fb::before,
details .box-course-fb::before,
details .box-formula-fb::before,
details .box-puzzle-fb::before {
  content: '';
  background-size: contain;
  background-repeat: no-repeat;
  width: 50px;
  height: 50px;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  background-position: center;
}

/* Callout Boxes END */
/* Positioning icons only inside <details> tags */
details .box-primary-f::before,
details .box-secondary-f::before,
details .box-tertiary-f::before,
details .box-accent-f::before,
details .box-alert-f::before,
details .box-success-f::before,
details .box-info-f::before,
details .box-warning-f::before {
  content: '';
  background-size: contain;
  background-repeat: no-repeat;
  width: 50px;
  height: 100%;
  position: absolute;
  left: 20px;
  top: 50%;
  bottom: 0;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Specific styles for callout boxes to ensure text doesn't overlap icons */
details .box-primary-f p,
details .box-secondary-f p,
details .box-tertiary-f p,
details .box-accent-f p,
details .box-alert-f p,
details .box-success-f p,
details .box-info-f p,
details .box-warning-f p,
details .box-conditional-fb p,
details .box-lesson-fb p,
details .box-final-thought-fb p,
details .box-think-fb p,
details .box-pause-fb p,
details .box-survey-fb p,
details .box-course-fb p,
details .box-formula-fb p,
details .box-puzzle-fb p {
  padding-left: 80px;
  margin: 0;
  line-height: normal;
}

/* Specific icon settings for callout types inside <details> tags */
details .box-lesson-fb::before {
  background-image: url('../../img/test.svg');
  background-color: var(--clr-lesson);
}
details .box-final-thought-fb::before {
  background-image: url('../../img/final.svg');
  background-color: var(--clr-final);
}
details .box-conditional-fb::before {
  background-image: url('../../img/conditional.svg');
  background-color: var(--clr-conditional);
}
details .box-think-fb::before {
  background-image: url('../../img/think.svg');
  background-color: var(--clr-think-about);
  --text-color: var(--clr-primary);
  --icon-color: var(--clr-primary);
}
details .box-pause-fb::before {
  background-image: url('../../img/pause.svg');
  background-color: var(--clr-pause);
}
details .box-survey-fb::before {
  background-image: url('../../img/survey.svg');
  background-color: var(--clr-survey);
}
details .box-course-fb::before {
  background-image: url('../../img/education.svg');
  background-color: var(--clr-course);
}
details .box-puzzle-fb::before {
  background-image: url('../../img/puzzle.svg');
  background-color: var(--clr-puzzle);
}
details .box-formula-fb::before {
  background-image: url('../../img/formula.svg');
  background-color: var(--clr-formula);
}
/* adjusting the callout and alert boxes when inside Accordions END */

/* Colours END */

/* Callouts */
/* Callout icons */
.callout-other h2 {
 
  padding-top: 20px;
  padding-left: 5px;
  font-family: var(--font-h1);
  font-size: 1.75em;
  font-weight: bold;
  color: var(--clr-accent);
  background-color: var(--clr-white);
  text-align: left;
  border: none;
  box-shadow: none;
  margin: 0;
  line-height: 1;
}
/* .callout-other h2 {
  margin: 0;
  padding-top: 20px;
  padding-left: 5px;
  font-family: var(--font-h1);
  font-size: 1.75em;
  font-weight: bold;
  line-height: .5px;
  color: var(--clr-accent);
  background-color: var(--clr-white);
  text-align: left;
  border-bottom: 0px solid var(--clr-accent);
  border-left: 0px solid var(--clr-accent);
  border-right: 0px solid var(--clr-accent);
  box-shadow: 0 4px 0px 0 rgba(0, 0, 0, 0.0), 0 0px 0px 0 rgba(0, 0, 0, 0.0);
} */
.callout-other h3 {
  color: var(--clr-accent);
  background-color: var(--clr-white);
  padding-left: 15px;
  margin: 0;
  line-height: 1.5;
}

.callout-other[data-type="call-think"] {
  --callout-icon: url('../../img/think.svg');
  --callout-bg-color: var(--clr-think-about);
  --text-color: var(--clr-primary);
  --icon-color: var(--clr-primary);
}

.callout-other[data-type="call-pause"] {
  --callout-icon: url('../../img/pause.svg');
  --callout-bg-color: var(--clr-pause);
}
.callout-other[data-type="call-survey"] {
  --callout-icon: url('../../img/survey.svg');
  --callout-bg-color: var(--clr-survey);
}
.callout-other[data-type="call-course"] {
  --callout-icon: url('../../img/education.svg');
  --callout-bg-color: var(--clr-course);
}

.callout-other[data-type="call-puzzle"] {
  --callout-icon: url('../../img/puzzle.svg');
  --callout-bg-color: var(--clr-puzzle);
}
.callout-other[data-type="call-formula"] {
  --callout-icon: url('../../img/formula.svg');
  --callout-bg-color: var(--clr-formula);
}
.callout-other[data-type="call-reminder"] {
  --callout-icon: url('../../img/reminder.svg');
  --callout-bg-color: var(--clr-reminder);
  /* --callout-border-color: var(--clr-reminder); */
}
.callout-other[data-type="call-conditional"] {
  --callout-icon: url('../../img/conditional.svg');
  --callout-bg-color: var(--clr-conditional);
}
.callout-other[data-type="call-conditional-widget"] {
  --callout-icon: url('../../img/conditional-widget.svg');
  --callout-bg-color: var(--clr-conditional);
}

/* Alert Callouts */
.callout-other[data-type="call-alert"] {
  --callout-icon: url('../../img/alert.svg');
  --callout-bg-color: var(--clr-alert);
}
.callout-other[data-type="call-success"] {
  --callout-icon: url('../../img/success.svg');
  --callout-bg-color: var(--clr-success);
}
.callout-other[data-type="call-info"] {
  --callout-icon: url('../../img/info.svg');
  --callout-bg-color: var(--clr-info);
}
.callout-other[data-type="call-warning"] {
  --callout-icon: url('../../img/warning.svg');
  --callout-bg-color: var(--clr-warning);
}
.callout-other[data-type="call-copy"] {
  --callout-icon: url('../../img/copy.svg');
  --callout-bg-color: var(--clr-copy);

  --icon-color: var(--clr-white);
}
/* Alert Boxes Start */
.alert {
  border: 3px solid var(--alert-bg-color);
  background-color: var(--clr-white);
  margin-bottom: 20px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 6px 20px 0 rgba(0, 0, 0, 0.05);
}

.alert > div {
  padding: 20px 45px;
}

.alert-title {
  background-color: var(--alert-bg-color);
  color: var(--clr-primary);
  cursor: default;
  position: relative;
  padding: 15px 45px;
  font-size: var(--font-weight-bold);
  font-family: sans-serif;
  font-weight: bolder;
  display: flex;
  align-items: center;
}
.alert-title::before {
  content: '';
  display: block;
  background-color: currentColor;
  mask: var(--alert-icon) no-repeat center;
  -webkit-mask: var(--alert-icon) no-repeat center;
  background-size: 30px 30px;
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
}
.alert-title-white {
  background-color: var(--alert-bg-color);
  color: var(--clr-white);
  cursor: default;
  position: relative;
  padding: 15px 45px;
  font-size: var(--font-weight-bold);
  font-family: sans-serif;
  font-weight: bolder;
  display: flex;
  align-items: center;
}

.alert-title-white::before {
  content: '';
  display: block;
  background-color: currentColor;
  mask: var(--alert-icon) no-repeat center;
  -webkit-mask: var(--alert-icon) no-repeat center;
  background-size: 30px 30px;
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  --icon-color: var(--clr-white);
}

/* CSS variables for each type of alert */
.alert[data-type="call-alert"] {
  --alert-icon: url('../../img/alert.svg');
  --alert-bg-color: var(--clr-alert);
}

.alert[data-type="call-success"] {
  --alert-icon: url('../../img/success.svg');
  --alert-bg-color: var(--clr-success);
}

.alert[data-type="call-info"] {
  --alert-icon: url('../../img/info.svg');
  --alert-bg-color: var(--clr-info);
}

.alert[data-type="call-warning"] {
  --alert-icon: url('../../img/warning.svg');
  --alert-bg-color: var(--clr-warning);
}
.alert[data-type="call-copy"] {
  --alert-icon: url('../../img/copy.svg');
  --alert-bg-color: var(--clr-copy);

  --icon-color: var(--clr-white);
}

/* Alert Boxes END */
/* Icon Header START */
/* IconHead Styles */
.iconHead,
.iconHead-outline,
.iconHead-alerts {
  display: flex;
  align-items: flex-start;
  padding: 0 4px;
  height: auto;
  width: 100%;
  border-radius: 1px;
  background: var(--clr-white);
  position: relative;
  overflow: hidden;
  /* border-top: 2px solid var(--callout-bg-color);
    border-bottom: 2px solid var(--callout-bg-color); */
}

.iconHead::before,
.iconHead-alerts::before,
.iconHead-outline::before {
  content: '';
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--callout-bg-color);
  border-radius: 50%;
  mask-image: var(--callout-icon);
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-image: var(--callout-icon);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  background-size: 100%;
  height: 45px;
  width: 45px;
  margin-right: 10px;
  box-sizing: border-box;
  flex-shrink: 0;
  padding-top: 50px;
  /* align-self: flex-start; */
}

.iconHead p,
.iconHead-outline p,
.iconHead-alerts p {
  margin-left: 10px;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  flex: 1;
}

/* CSS variables for each type of iconHead */
.iconHead[data-type="call-alert"] {
  --callout-icon: url('../../img/alert.svg');
  --callout-bg-color: var(--clr-alert);
  --icon-color: var(--clr-white);
}

.iconHead[data-type="call-success"] {
  --callout-icon: url('../../img/success.svg');
  --callout-bg-color: var(--clr-success);
  --icon-color: var(--clr-white);
}

.iconHead[data-type="call-info"] {
  --callout-icon: url('../../img/info.svg');
  --callout-bg-color: var(--clr-info);
  --icon-color: var(--clr-white);
}

.iconHead[data-type="call-warning"] {
  --callout-icon: url('../../img/warning.svg');
  --callout-bg-color: var(--clr-warning);
  --icon-color: var(--clr-white);
}
.iconHead[data-type="call-copy"] {
  --callout-icon: url('../../img/copy.svg');
  --callout-bg-color: var(--clr-copy);
  --icon-color: var(--clr-white);
}

.iconHead[data-type="call-reminder"] {
  --callout-icon: url('../../img/reminder.svg');
  --callout-bg-color: var(--clr-reminder);
  --icon-color: var(--clr-white);
}

.iconHead[data-type="call-think"] {
  --callout-icon: url('../../img/think.svg');
  --callout-bg-color: var(--clr-think-about);
  --icon-color: var(--clr-primary);
  --text-color: var(--clr-primary);
}

.iconHead[data-type="call-pause"] {
  --callout-icon: url('../../img/pause.svg');
  --callout-bg-color: var(--clr-pause);
  --icon-color: var(--clr-white);
}
.iconHead[data-type="call-survey"] {
  --callout-icon: url('../../img/survey.svg');
  --callout-bg-color: var(--clr-survey);
  --icon-color: var(--clr-white);
}

.iconHead[data-type="call-course"] {
  --callout-icon: url('../../img/education.svg');
  --callout-bg-color: var(--clr-course);
  --icon-color: var(--clr-white);
}

.iconHead[data-type="call-puzzle"] {
  --callout-icon: url('../../img/puzzle.svg');
  --callout-bg-color: var(--clr-puzzle);
  --icon-color: var(--clr-white);
}
.iconHead[data-type="call-formula"] {
  --callout-icon: url('../../img/formula.svg');
  --callout-bg-color: var(--clr-formula);
  --icon-color: var(--clr-white);
}

.iconHead[data-type="call-conditional"] {
  --callout-icon: url('../../img/conditional.svg');
  --callout-bg-color: var(--clr-conditional);
  --icon-color: var(--clr-white);
}
/* Icon Header END */

/* Callout round START */
.iconHeadR,
.iconHeadR-outline,
.iconHeadR-alerts {
  display: flex;
  align-items: flex-start;
  padding: 0 8px;
  height: auto;
  width: 100%;
  border-radius: 1px;
  background: var(--clr-white);
  position: relative;
  overflow: hidden;
  /* border-right: 4px solid var(--callout-bg-color); */
}
.iconHeadR > p,
.iconHeadR-outline > p,
.iconHeadR-alerts > p {
  padding: 20px;
  margin: 10px;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.1), 0 0 8px rgba(0, 0, 0, 0.05);
  /* background-color: hsl(0, 0%, 90%); */

  /* border-bottom: 4px solid var(--callout-bg-color); */
  /* border-right: 4px solid var(--callout-bg-color); */
}

.iconHeadR::before,
.iconHeadR-alerts::before,
.iconHeadR-outline::before {
  content: '';
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--callout-bg-color);
  border-radius: 50%;
  height: 50px;
  width: 50px;
  margin-right: 10px;
  /* margin-top: 10px; */
  box-sizing: border-box;
  flex-shrink: 0;
  align-self: flex-start;
  position: relative;
}

.iconHeadR::after,
.iconHeadR-alerts::after,
.iconHeadR-outline::after {
  content: '';
  display: block;
  background-color: var(--icon-color);
  mask-image: var(--callout-icon);
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-image: var(--callout-icon);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  background-size: 50%;
  height: 35px;
  width: 35px;
  position: absolute;
  top: 8px;
  left: 16px;
  box-sizing: border-box;
  flex-shrink: 0;
}

.iconHeadR p,
.iconHeadR-outline p,
.iconHeadR-alerts p {
  margin-left: 10px;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  flex: 1;
}
/* Define CSS variables for each type of iconHeadR */
.iconHeadR[data-type="call-alert"] {
  --callout-icon: url('../../img/alert.svg');
  --callout-bg-color: var(--clr-alert);
  --icon-color: var(--clr-primary);
}

.iconHeadR[data-type="call-success"] {
  --callout-icon: url('../../img/success.svg');
  --callout-bg-color: var(--clr-success);
  --icon-color: var(--clr-primary);
}

.iconHeadR[data-type="call-info"] {
  --callout-icon: url('../../img/info.svg');
  --callout-bg-color: var(--clr-info);
  --icon-color: var(--clr-primary);
}

.iconHeadR[data-type="call-warning"] {
  --callout-icon: url('../../img/warning.svg');
  --callout-bg-color: var(--clr-warning);
  --icon-color: var(--clr-primary);
}
.iconHeadR[data-type="call-copy"] {
  --callout-icon: url('../../img/copy.svg');
  --callout-bg-color: var(--clr-copy);
  --icon-color: var(--clr-white);
}

.iconHeadR[data-type="call-reminder"] {
  --callout-icon: url('../../img/reminder.svg');
  --callout-bg-color: var(--clr-reminder);
  --icon-color: var(--clr-white);
}

.iconHeadR[data-type="call-think"] {
  --callout-icon: url('../../img/think.svg');
  --callout-bg-color: var(--clr-think-about);
  --icon-color: var(--clr-primary);
}

.iconHeadR[data-type="call-pause"] {
  --callout-icon: url('../../img/pause.svg');
  --callout-bg-color: var(--clr-pause);
  --icon-color: var(--clr-white);
}
.iconHeadR[data-type="call-survey"] {
  --callout-icon: url('../../img/survey.svg');
  --callout-bg-color: var(--clr-survey);
  --icon-color: var(--clr-white);
}

.iconHeadR[data-type="call-course"] {
  --callout-icon: url('../../img/education.svg');
  --callout-bg-color: var(--clr-course);
  --icon-color: var(--clr-white);
}

.iconHeadR[data-type="call-puzzle"] {
  --callout-icon: url('../../img/puzzle.svg');
  --callout-bg-color: var(--clr-puzzle);
  --icon-color: var(--clr-white);
}
.iconHeadR[data-type="call-formula"] {
  --callout-icon: url('../../img/formula.svg');
  --callout-bg-color: var(--clr-formula);
  --icon-color: var(--clr-white);
}

.iconHeadR[data-type="call-conditional"] {
  --callout-icon: url('../../img/conditional.svg');
  --callout-bg-color: var(--clr-conditional);
  --icon-color: var(--clr-white);
}

/* Callout round END */

/* Callout Short START */
.chipB,
.chip-outlineB,
.chip-alertsB {
  display: flex;
  align-items: center;
  padding: 0 25px;
  height: 40px;
  /* font-style: italic; */
  /* width: 50%; */
  border-radius: 5px;
  color: var(--clr-white);
  background: var(--clr-primary);
  /* transition: .7s ease-in-out; */
  position: relative;
}
.chipB::before {
  content: '';
  display: block;
  background-image: var(--callout-icon);
  background-size: 65%;
  background-position: center;
  background-repeat: no-repeat;
  background-color: var(--callout-bg-color);
  margin-left: -35px;
  height: 50px;
  width: 50px;
  border-radius: 50%;
  padding: 10px;
  box-sizing: border-box;
  flex-shrink: 0;
  transition: 0.3s;
}
.chip-alertsB::before {
  content: '';
  display: block;
  background-image: var(--callout-icon);
  background-size: 75%;
  background-position: center;
  background-repeat: no-repeat;
  background-color: var(--callout-bg-color);
  margin-left: -35px;
  margin-right: 10px;
  height: 50px;
  width: 50px;
  border: solid 2px var(--clr-background);
  border-radius: 50%;
  padding: 10px;
  box-sizing: border-box;
  flex-shrink: 0;
  transition: 0.3s;
}
.chip-outlineB::before {
  content: '';
  display: block;
  background-image: var(--callout-icon);
  background-size: 65%;
  background-position: center;
  background-repeat: no-repeat;
  background-color: var(--callout-bg-color);
  margin-left: -35px;
  height: 50px;
  width: 50px;

  border-radius: 50%;
  border: 2px solid var(--callout-border-color);
  padding: 10px;
  box-sizing: border-box;
  flex-shrink: 0;
  transition: 0.3s;
}
.chipB:hover::before,
.chip-outlineB:hover::before {
  transform: rotate(-15deg);
  background-size: 70%;
  height: 55px;
  width: 55px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 6px 20px 0 rgba(0, 0, 0, 0.05);
}
.chip-alertsB:hover::before {
  transform: rotate(-15deg);
  background-size: 85%;
  height: 55px;
  width: 55px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 6px 20px 0 rgba(0, 0, 0, 0.05);
}

.chipB p,
.chip-outlineB  p {
  margin-left: 10px;
}
/* -- */
/* -- */
.chip,
.chip-outline,
.chip-alerts {
  display: flex;
  align-items: center;
  padding: 0 25px;
  height: 40px;
  font-style: italic;
  /* width: 50%; */
  border-radius: 5px;
  margin-bottom: 20px;
  background: linear-gradient(
    to right,
    var(--clr-tertiary),
    var(--clr-white),
    var(--clr-white)
  );
  /* transition: .7s ease-in-out; */
  position: relative;
}

.chip::before {
  content: '';
  display: block;
  background-image: var(--callout-icon);
  background-size: 65%;
  background-position: center;
  background-repeat: no-repeat;
  background-color: var(--callout-bg-color);
  margin-left: -35px;
  height: 50px;
  width: 50px;
  border-radius: 50%;
  border: solid 2px var(--clr-background);
  padding: 10px;
  box-sizing: border-box;
  flex-shrink: 0;
  transition: 0.3s;
}
.chip-alerts::before {
  content: '';
  display: block;
  background-image: var(--callout-icon);
  background-size: 75%;
  background-position: center;
  background-repeat: no-repeat;
  background-color: var(--callout-bg-color);
  border: solid 2px var(--clr-background);
  margin-left: -35px;
  margin-right: 10px;
  height: 50px;
  width: 50px;

  border-radius: 50%;
  padding: 10px;
  box-sizing: border-box;
  flex-shrink: 0;
  transition: 0.3s;
}
.chip-outline::before {
  content: '';
  display: block;
  background-image: var(--callout-icon);
  background-size: 65%;
  background-position: center;
  background-repeat: no-repeat;
  background-color: var(--callout-bg-color);
  margin-left: -35px;
  height: 50px;
  width: 50px;
  border-radius: 50%;
  border: solid 2px var(--clr-background);

  padding: 10px;
  box-sizing: border-box;
  flex-shrink: 0;
  transition: 0.3s;
}
.chip:hover::before,
.chip-outline:hover::before {
  transform: rotate(-15deg);
  background-size: 70%;
  height: 55px;
  width: 55px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 6px 20px 0 rgba(0, 0, 0, 0.05);
}
.chip-alerts:hover::before {
  transform: rotate(-15deg);
  background-size: 85%;
  height: 55px;
  width: 55px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 6px 20px 0 rgba(0, 0, 0, 0.05);
}

.chip p,
.chip-outline  p {
  margin-left: 10px;
}
/* Callout Short END */

/* UNB Flex grid START */
/* 1. Make the container a flexbox grid */
.UNB-flex-grid {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

/* 2. Each direct child becomes one “cell” */
.UNB-flex-grid > div {
  flex: 1 0 33%;
  display: flex;
  align-items: center;
  padding: 0.5rem;
}

/* 3. Alignment modifiers based on your classes */
.UNB-flex-left {
  justify-content: flex-start;
}
.UNB-flex-center {
  justify-content: center;
}
.UNB-flex-right {
  justify-content: flex-end;
}

/* 4. Make images responsive */
.UNB-flex-grid img {
  max-width: 100%;
  height: auto;
  display: block;
}
/* UNB Flex grid END */

/* Base Accordion Styles */
.base-accordion {
  border: 1px solid #fff;
  margin-bottom: 1px;
  width: 100%;
}
.base-accordion h2 {
  margin: 0;
  padding-top: 20px;
  padding-left: 5px;
  font-family: var(--font-h1);
  font-size: 1.75em;
  font-weight: bold;
  line-height: .5px;
  color: var(--clr-accent);
  background-color: var(--clr-white);
  text-align: left;
  border-bottom: 0px solid var(--clr-accent);
  border-left: 0px solid var(--clr-accent);
  border-right: 0px solid var(--clr-accent);
  box-shadow: 0 4px 0px 0 rgba(0, 0, 0, 0.0), 0 0px 0px 0 rgba(0, 0, 0, 0.0);
}
.base-accordion h3 {
  color: var(--clr-accent);
  background-color: var(--clr-white);
  padding-left: 15px;
  margin: 0;
  line-height: 1.5;
}

.base-accordion-title,
.base-accordion-title-button {
  background-color: var(--clr-accent);
  color: var(--clr-white);
  padding: 10px;
  cursor: pointer;
  position: relative;
  padding-left: 40px;
  transition: all 0.3s ease-in-out;
}
.question-accordion .base-accordion-title {
  padding-left: 50px;
}
.question-accordion > div:nth-of-type(2) {
  /* padding-left: 50px; */
  box-sizing: border-box;
  height: auto;
}

/* .question-accordion > div:nth-of-type(2) * {
    border: 1px solid blue; 
    
  } */

.question-accordion > div:nth-of-type(2) p {
  padding-left: 7px;
  /* margin: 0; */
}
.question-accordion > div:nth-of-type(2) ul {
  padding-left: 55px;
  /* margin: 0; */
}
.question-accordion > div:nth-of-type(2) ol {
  padding-left: 55px;
  /* margin: 0; */
}
/* Accordion content panel */
.base-accordion > div {
  padding: 15px;
}
.base-accordion-title-button span {
  display: inline-block;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: break-word;
}

.base-accordion-title-button {
  width: 100%;
  padding: 15px;
  padding-left: 40px;
  background-color: #212121;
  color: #fff;
  border: none;
  cursor: pointer;
  text-align: left;
  white-space: normal;
  min-width: 0;
}
.cont-r .base-accordion {
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
}

.base-accordion > button {
  background-color: transparent;
  border: none;
  cursor: pointer;
  width: 100%;
  text-align: left;
  font: var(--font-body);
  font-weight: var(--font-weight-normal);
  margin-bottom: 0px;
  margin-left: 0;
}

.base-accordion .base-accordion-title::before {
  content: '';
  background-color: currentColor;
  mask: var(--icon-base);
  -webkit-mask: var(--icon-base);
  background-size: 40px 40px;
  position: absolute;
  left: 10px;
  top: 18px;
  width: 30px;
  height: 30px;
  transition: transform 0.3s ease-in-out;
}
.base-accordion .base-accordion-title-button::before {
  content: '';
  background-color: currentColor;
  mask: var(--icon-base);
  -webkit-mask: var(--icon-base);
  background-size: 40px 40px;
  position: absolute;
  left: 10px;
  top: 14px;
  width: 30px;
  height: 30px;
  transition: transform 0.3s ease-in-out;
}

.base-accordion .base-accordion-title + div,
.base-accordion .base-accordion-title-button + div {
  background-color: var(--clr-white);
  padding: 0 20px;
  border-top: 1px solid var(--clr-tertiary);
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 6px 20px 0 rgba(0, 0, 0, 0.05);
  overflow: hidden;
  height: 0;
  padding: 0 15px;
  transition: height 0.5s ease-out, padding 0.5s ease-out,
    box-shadow 0.5s ease-out;
}

.base-accordion.open .base-accordion-title + div,
.base-accordion.open .base-accordion-title-button + div {
  height: auto;
  /* padding: 20px 45px; */
  padding: 5px 15px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 6px 20px 0 rgba(0, 0, 0, 0.05);
  transition: height 0.5s ease-in, padding 0.5s ease-in, box-shadow 0.5s ease-in;
}

.base-accordion.open .base-accordion-title::before,
.base-accordion.open .base-accordion-title-button::before {
  transform: rotate(90deg);
}
.base-accordion.open .base-accordion-title + div p {
  margin: 0;
  padding-left: 15px;
}
/* Color classes */
.accordion-primary .base-accordion-title,
.accordion-primary .base-accordion-title-button {
  background-color: var(--clr-primary);
  color: var(--clr-white);
}

.accordion-secondary .base-accordion-title,
.accordion-secondary .base-accordion-title-button {
  background-color: var(--clr-secondary);
    color: var(--clr-white);
}

.accordion-tertiary .base-accordion-title,
.accordion-tertiary .base-accordion-title-button {
  background-color: var(--clr-tertiary);
  color: var(--clr-primary);
}

.accordion-accent .base-accordion-title,
.accordion-accent .base-accordion-title-button {
  background-color: var(--clr-accent);
    color: var(--clr-white);
}

/* List colors for accordion-accent */
.accordion-accent .base-accordion-title li::before,
.accordion-accent .base-accordion-title ul::before,
.accordion-accent .base-accordion-title ol::before {
  color: var(--clr-white);
}

/* Question Accordion Styles */
.question-accordion .base-accordion-title::before {
  content: '';
  background-color: currentColor;
  mask: var(--icon-question-closed);
  -webkit-mask: var(--icon-question-closed);
  background-size: 40px 40px;
  position: absolute;
  left: 10px;
  top: 35px;
  /* top: 18px; */
  width: 30px;
  height: 30px;
  transition: none;
}

.question-accordion.open .base-accordion-title::before {
  mask: var(--icon-question-open);
  -webkit-mask: var(--icon-question-open);
  transform: none; /* Ensure no rotation for open state */
}

/* Ensure text color is correct for tertiary background */
.question-accordion.accordion-tertiary .base-accordion-title {
  background-color: var(--clr-tertiary);
  color: var(--clr-primary); /* Text color when background is tertiary */
}

/* Question Accordion Styles End*/
/*Accordion Open one at a time START */
/* Open-all Icon for Accordions outside open-one */
/* Note: The parent's button has no title attribute now */
.open-all-icon {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  font-size: 1.2em;
}
.base-accordion:not(.open-one .base-accordion)
        .base-accordion-title-button
        .open-all-icon {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  font-size: 1.2em;
  padding: 5px;
}
/* Overlay Texture for Accordions in an "open-one" Container */
.open-one .base-accordion {
  position: relative;
}
/* .open-one .base-accordion::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-image: repeating-linear-gradient(-45deg, 
          rgba(255,255,255,.6), 
          rgba(255,255,255,.6) 1px, 
          transparent 1px, 
          transparent 6px);
        background-size: 4px 4px;
        pointer-events: none;
        z-index: 1;

        mask-image: linear-gradient(to left, black, transparent);
        -webkit-mask-image: linear-gradient(to left, black, transparent);
      } */

.open-one .base-accordion::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: repeating-linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.2) 0,
    rgba(255, 255, 255, 0.2) 1px,
    transparent 1px,
    transparent 3px
  );
  pointer-events: none;
  z-index: 1;
  mask-image: linear-gradient(to left, black, transparent);
  -webkit-mask-image: linear-gradient(to left, black, transparent);
}

/* 1) make the title-button a positioning‐context */
.open-one .base-accordion .base-accordion-title-button {
  position: relative;
  overflow: hidden;
}

/* 2) move the ::after onto the title-button, not the whole accordion */
.open-one .base-accordion .base-accordion-title-button::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: repeating-linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.2) 0,
    rgba(255, 255, 255, 0.2) 1px,
    transparent 1px,
    transparent 3px
  );
  pointer-events: none;
  z-index: 1;
  mask-image: linear-gradient(to left, black, transparent);
  -webkit-mask-image: linear-gradient(to left, black, transparent);
}

/* 3) remove (or override) your old accordion ::after */
.open-one .base-accordion::after {
  display: none;
}
/* 1) STOP drawing stripes on the entire accordion */
.open-one .base-accordion::after {
  content: none !important;
}

/* 2) CLIP your stripes to the header only */
.open-one .base-accordion-title-button {
  position: relative;
  overflow: hidden;
}

.open-one .base-accordion-title-button::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.2) 0,
    rgba(255, 255, 255, 0.2) 1px,
    transparent 1px,
    transparent 3px
  );
  pointer-events: none;
  z-index: 1;
  mask-image: linear-gradient(to left, black, transparent);
  -webkit-mask-image: linear-gradient(to left, black, transparent);
}

/*Accordion Open one at a time END */

/* Callout Expand START */
/* Callout Styles */
.callout {
  border: 1px solid var(--clr-tertiary);
  background-color: var(--clr-white);
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 6px 20px 0 rgba(0, 0, 0, 0.05);
  margin-bottom: 20px;
}

.callout > div {
  padding: 20px 45px;
}

.callout-title {
  background-color: var(--callout-bg-color);
  color: var(--clr-white);
  cursor: default;
  position: relative;
  padding: 15px 45px;
  font-size: var(--font-body);
  font-weight: var(--font-weight-normal);
  display: flex;
  align-items: center;
}

.callout-title::before {
  content: '';
  display: block;
  background-color: currentColor;
  mask-image: var(--callout-icon);
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-image: var(--callout-icon);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  background-size: 30px 30px;
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
}

/* CSS variables for each type of callout */
.callout[data-type="food"] {
  --callout-icon: url('../../img/food-for-thought.svg');
  --callout-bg-color: var(--clr-food);
}

.callout[data-type="think"] {
  --callout-icon: url('../../img/think.svg');
  --callout-bg-color: var(--clr-think-about);
  --text-color: var(--clr-primary);
  --icon-color: var(--clr-primary);
}
/* Explicitly ensure child elements use the custom text color */
.callout[data-type="think"] .callout-title,
.callout[data-type="think"] p {
  color: var(--text-color);
}

/* Example for an inline SVG icon that uses the icon color */
.callout[data-type="think"] .icon {
  width: 24px;
  height: 24px;
  fill: var(--icon-color);
}

.callout[data-type="pause"] {
  --callout-icon: url('../../img/pause.svg');
  --callout-bg-color: var(--clr-pause);
}
.callout[data-type="survey"] {
  --callout-icon: url('../../img/survey.svg');
  --callout-bg-color: var(--clr-survey);
}

.callout[data-type="course"] {
  --callout-icon: url('../../img/education.svg');
  --callout-bg-color: var(--clr-course);
}

.callout[data-type="puzzle"] {
  --callout-icon: url('../../img/puzzle.svg');
  --callout-bg-color: var(--clr-puzzle);
}
.callout[data-type="formula"] {
  --callout-icon: url('../../img/formula.svg');
  --callout-bg-color: var(--clr-formula);
}

.callout[data-type="reminder"] {
  --callout-icon: url('../../img/reminder.svg');
  --callout-bg-color: var(--clr-reminder);
}

/* Callout Expand END */

/* Decoritive Expand / Click to reveal Buttons START */
.hidden-div-source {
  display: none;
  margin-left: 10px;
  padding: 0px;
  box-sizing: border-box;

}
.hidden-div-source.is-visible {
  display: block; 
}
.hidden-div {
  display: none;
  margin-left: 40px;
  padding: 20px;
  box-sizing: border-box;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 6px 20px 0 rgba(0, 0, 0, 0.05);
}
.show-div {
  display: block !important;
}

.button-1 {
  background-color: var(--clr-primary);
  border-radius: 5px;
  border: 0;
}

.button-2 {
  background-color: var(--clr-secondary);
  border-radius: 5px;
  border: 0;
}

.button-3 {
  color: var(--clr-font);
  background-color: var(--clr-tertiary);
  border-radius: 5px;
  border: 0;
}

.button-4 {
  background-color: var(--clr-accent);
  border-radius: 5px;
  border: 0;
}
.button-1:hover,
.button-2:hover,
.button-3:hover,
.button-4:hover,
.button-5:hover {
  background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2));
}

.toggle-button {
  margin: 5px;
  padding: 8px 12px;
  cursor: pointer;
}
.toggle-button-image {
  /* margin: 5px; */
  /* padding: 5px; */
  cursor: pointer;
}

/* Click to reveal header START */
/* Wrap toggle headings */
.heading-toggle .toggle-heading {
  cursor: pointer;
  position: relative;
  padding-right: 1.5em; /* space for the icon */
}

/* Default collapsed state: right-pointing triangle */
.heading-toggle .toggle-heading::after {
  content: "▶"; /* Unicode triangle */
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.9em;
  transition: transform 0.2s ease;
  color: var(--clr-primary);
}

/* Expanded state: downward triangle */
.heading-toggle.open .toggle-heading::after {
  content: "▼";
  transform: translateY(-50%);
}

/* Content area */
.heading-toggle .heading-toggle-content {
  margin-top: 0.0em;
  padding-left: 1em; 
  padding-bottom: 1em; 
  
  border: 1px solid var(--clr-boarder);
  background-color: var(--clr-background);

/* border-left: 3px solid var(--clr-primary); */
  box-shadow:  
    0 2px 6px rgba(33, 33, 33, 0.05),   
    2px 0 6px rgba(33, 33, 33, 0.05), 
   -2px 0 6px rgba(33, 33, 33, 0.05); 

  display: none;
}

/* Click to reveal header END */

/* Clickable Image for text START */
.image-text-container {
  display: inline-block;
}

/* Ensure the image takes the desired width */
.image-text-container img {
  display: block;
  max-width: 100%;
  cursor: pointer;
  margin-bottom: 10px;
}

/* Hidden text container */
.hidden-text-image {
  width: 100%;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.5s ease-out, opacity 0.5s ease-out;
  padding: 0 20px;
  box-sizing: border-box;
  box-shadow: none;
}

/* When 'show' is added, we'll adjust max-height dynamically in JS */
.hidden-text-image.show {
  opacity: 1;
  margin-top: -30px;
  padding: 20px;
  background-color: var(--clr-white);
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 6px 20px 0 rgba(0, 0, 0, 0.05);
  margin-bottom: 40px;
}

/* Clicakable Image of text END */
/* New tabs START */
.tab {
  overflow: hidden;
  position: relative;
}

.tablinks {
  background-color: transparent;
  outline: none;
  cursor: pointer;
  padding: 10px 15px;
  margin-bottom: -1px;
  transition: border-color 0.15s ease-in-out;
  color: var(--clr-primary);
  position: relative;
  z-index: 1;
  font-size: var(--mfont);
}

.tabcontent h2 {
  margin: 0;
  padding-top: 20px;
  padding-left: 0px;
  font-family: var(--font-h1);
  font-size: 1.75em;
  font-weight: bold;
  line-height: 1px;
  color: var(--clr-accent);
  background-color: var(--clr-white);
  text-align: left;
  border-bottom: 0px solid var(--clr-accent);
}
.tabcontent h3 {
  color: var(--clr-accent);
  background-color: var(--clr-white);
  padding-left: 15px;
  margin: 0;
  line-height: 1.5;
}
.tabcontent {
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 20px;
  background-color: var(--clr-white);
  position: relative;
  z-index: 1;
  overflow: hidden;
}
/* Accesibility Section */
.tabcontent.active {
  display: block;
}
/* [aria-hidden="true"] {
  display: none;
} */
.tab-group {
  border: solid 1px var(--clr-accent);
  box-shadow: 2px 0 10px -4px rgba(163, 163, 164, 0.5),
    -2px 0 15px -4px rgba(163, 163, 164, 0.5);
  background-color: #eeeeee;
}
.tab-group button {
  border-radius: 0;
  margin: 0px;
}

.tablinks[aria-selected="true"] {
  font-weight: bold;
  color: var(--clr-accent);
  background-color: var(--clr-white);
}
/* new Tabs END */

/* Full colour BG Start */

.full-block-small,
.full-block-primary-small,
.full-block-secondary-small,
.full-block-tertiary-small,
.full-block-accent-small {
  position: relative;
  width: 100%;
  /* height: 650px; */
  padding: 10px;

  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: left;
  text-align: left;
}
.full-block,
.full-block-primary,
.full-block-secondary,
.full-block-tertiary,
.full-block-accent {
  position: relative;
  width: 100%;
  /* height: 650px; */
  padding: 100px 60px;

  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.text-align-left {
  text-align: left;
  align-items: start;
  justify-content: left;
  padding: 10px 10px;
}
.bg-primary,
.full-block-primary,
.full-block-primary-small {
  background-color: var(--clr-primary);
  color: var(--clr-white);
}
.bg-primary h3,
.bg-primary h4,
.bg-primary h5,
.bg-primary li,
.bg-primary ol,
.bg-primary ul,
.full-block-primary-small li,
.full-block-primary-small ol,
.full-block-primary-small ul,
.full-block-primary-small h3,
.full-block-primary-small h4,
.full-block-primary-small h5,
.full-block-primary li,
.full-block-primary ol,
.full-block-primary ul,
.full-block-primary h3,
.full-block-primary h4,
.full-block-primary h5 {
  color: var(--clr-white);
}
.bg-secondary,
.full-block-secondary,
.full-block-secondary-small {
  background-color: var(--clr-secondary);
  color: var(--clr-white);
}

.bg-tertiary,
.full-block-tertiary,
.full-block-tertiary-small {
  background-color: var(--clr-tertiary);
}
.full-block-tertiary-small figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  overflow: hidden;
}

.full-block-tertiary-small figcaption {
  font-size: 0.7em;
  color: var(--clr-primary);
  margin-top: 5px;
  text-align: center;
}

.bg-accent,
.full-block-accent,
.full-block-accent-small {
  background-color: var(--clr-accent);
  color: var(--clr-white);
}
.bg-accent h3,
.bg-accent h4,
.bg-accent h5,
.full-block-accent h3,
.full-block-accent h4,
.full-block-accent h5 {
  color: var(--clr-white);
}
/* Full colour BG END */
/* Line height for icon lists */
li.has-icon-link {
  line-height: 2 !important;
  /* or use margin for spacing between list items: */
  /* margin-bottom: 5px !important; */
}
/* Image card "Sexy philosophers" START */
/* Flex container for the image cards */
.image-card-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  row-gap: 8rem;
  max-width: 950px;
  justify-content: space-between;
  margin: 0 auto;
  padding: 1.25rem;
}

/* Each card styles */
.info-card {
  position: relative;
  width: calc(50% - 0.5rem);
  height: 275px;
  display: flex;
  align-items: center;
  border-radius: 1.25rem;
}

.info-card img {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  height: 21.875rem;
  transition: 0.5s;
}

.info-card:hover img {
  left: 70%;
  height: 25rem;
  transition: 0.5s;
}

.info-content {
  position: relative;
  width: 40%;
  left: 20%;
  color: white;
  text-transform: capitalize;
  opacity: 0;
  transition: all 0.5s ease;
}
.info-content a {
  display: inline-block;
  visibility: visible;
}

.info-card:hover .info-content {
  left: 5%;
  opacity: 1;
}

.info-card p {
  margin-bottom: 1.25rem;
  text-shadow: 0.05rem 0.05rem 0.5rem var(--clr-primary);
}
/* .info-card background gradient colours */
.bg-grade-accent-primary {
  background: linear-gradient(-45deg, var(--clr-primary), var(--clr-accent));
}
.bg-grade-secondary-primary {
  background: linear-gradient(-45deg, var(--clr-primary), var(--clr-secondary));
}
.bg-grade-tertiary-primary {
  background: linear-gradient(-45deg, var(--clr-primary), var(--clr-tertiary));
}
.bg-grade-tertiary-primary {
  background: linear-gradient(-45deg, var(--clr-primary), var(--clr-tertiary));
}

.info-card.bg-tertiary p {
  color: var(--clr-primary);
  margin-bottom: 1.25rem;
  text-shadow: 0rem 0rem 0rem var(--clr-primary);
}

.bg-tertiary .info-content .btn {
  position: relative;
  display: inline-block;
  color: #111;
  padding: 0.75rem 1.25rem;
  text-decoration: none;
  border-radius: 0.75rem;
  border: 0.15rem solid var(--clr-primary);
  background: none;
  color: var(--clr-primary);
  font-size: 1rem;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.5s;
  overflow: hidden;
}

.bg-tertiary .info-content .btn:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--clr-primary);
  z-index: -2;
  border-radius: 0 0 50% 50%;
  height: 0%;
  transition: all 0.5s;
}

.info-card.bg-tertiary a:hover {
  z-index: 2;
  color: var(--clr-white);
}

.info-content .btn {
  position: relative;
  display: inline-block;
  color: #111;
  padding: 0.75rem 1.25rem;
  text-decoration: none;
  border-radius: 0.75rem;
  border: 0.15rem solid white;
  background: none;
  color: white;
  font-size: 1rem;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.5s;
  overflow: hidden;
}

.info-content .btn:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: white;
  z-index: -2;
  border-radius: 0 0 50% 50%;
  height: 0%;
  transition: all 0.5s;
}

.info-content .btn:hover:before {
  height: 190%;
}

.info-card a:hover {
  z-index: 2;
  color: var(--clr-primary);
}

/* Image card "Sexy philosophers" END */

.open {
  display: block;
}

.card-body {
  background-color: var(--clr-primary);
  color: var(--clr-white);
  border-radius: 0px 5px 5px 0px;
}
.card-outline {
  border-left: 6px solid var(--clr-accent);
}
/* Blockquote 1 */
blockquote {
  color: var(--clr-accent);
  font-family: var(--font-blockquote);
  font-size: 1.25em;
  font-style: italic;
  line-height: 1.2;
  text-align: center;
  margin-bottom: 1em;
  break-inside: avoid;
  padding-top: 30px;
  padding-bottom: 30px;
}
blockquote footer {
  font-size: .75em;
}

blockquote::before,
blockquote::after {
  content: open-quote;
  content: close-quote;
}
/* Blockquote 2 */
blockquote.style2 {
  color: var(--clr-primary);
  font-family: var(--font-body);
  font-weight: 200;
  font-style: normal;
  text-align: left;
  margin-top: 10px;
  margin-bottom: 10px;
  margin-left: 50px;
  padding-left: 15px;
  border-left: 3px solid var(--clr-accent);
}
blockquote footer.style2 {
  font-size: .75em;
  text-align: right;
}
/* Blockquote 3 */
blockquote.style3 {
  color: var(--clr-white);
  font-family: var(--font-body);
  font-weight: 500;
  font-style: normal;
  text-align: left;
  padding: 50px 20px 50px;
  background-color: var(--clr-accent);
  margin: 5px;
  background-image: url(../../img/quote.svg);
  background-position: top left;
  background-repeat: no-repeat;
  background-size: 100px;
  text-indent: 23px;
}
blockquote.style3 span {
  display: block;
  /* background-image: url(../../img/quote.svg); */
  background-repeat: no-repeat;
  background-position: bottom right;
  background-size: 100px;
}
figcaption.style3 {
  color: var(--clr-white);
  font-size: .75em;
  text-align: right;
  padding-right: 20px;
}
/* Blockquote 4 */
figure.quote,
.quote {
  margin: 1em 0;
  background: var(--clr-tertiary);
  padding: 1em;
  border-radius: 1em;

  /* important overrides */
  float: none;
  clear: both;
}

.quote figcaption,
.quote blockquote {
  color: var(--clr-primary);
  text-align: justify;
  font-family: var(--font-body);
  font-weight: var(--font-weight-normal);
  font-style: normal;
  margin: 1em;
}

.quote figcaption {
  text-align: left;
}

/* Blockquote 5 */
blockquote.style5 {
  color: var(--clr-white);
  font-family: var(--font-body);
  font-weight: 200;
  font-style: italic;
  text-align: left;
  padding: 50px 20px 50px;
  background-color: var(--clr-primary);
  margin: 5px;
  /* background-image: url(../../img/quote.svg); */
  background-position: top left;
  background-repeat: no-repeat;
  background-size: 100px;
  text-indent: 23px;
}
blockquote.style5 span {
  display: block;
  /* background-image: url(../../img/quote.svg); */
  background-repeat: no-repeat;
  background-position: bottom right;
  background-size: 100px;
}
figcaption.style5 {
  color: var(--clr-white);
  font-size: .75em;
  font-style: normal;
  text-align: right;
  padding-right: 20px;
}
/* Quotes END */

/* ********************************** */
/* ! OHS Box Updates START */
/* ********************************** */
/* yellow rounded corner boxes
================================== */

.boxright {
  width: 40%;
  float: right;
  margin: 20px 20px 20px 20px;
  border: dashed #999;
  border-width: 2px;
     -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -khtml-border-radius: 5px;
    border-radius: 5px;
    background-color: var(--clr-white);
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
}


/* .boxright h4 {
  font-size:13px;
  color:#990000;
  padding: 0px 20px 0px 20px;
} */

.boxright p, .boxright h4, .boxright h5{
  padding: 0 20px 10px 20px;
}

.boxleft {
  width: 40%;
 
  /* background: #fff url(/shared/styles/images/bg-yellow-grad.jpg) repeat-x; */
  float: left;
  margin: 20px 20px 20px 20px;
  border: dashed #999;
  border-width: 2px;
     -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -khtml-border-radius: 5px;
    border-radius: 5px;
     background-color: var(--clr-white);
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
}
/* 
.boxleft h4 {
  font-size:13px;
  color:#990000;
  padding: 0px 20px 0px 20px;
} */

.boxleft p,.boxleft h4, .boxleft h5 {
  padding: 0 20px 10px 20px;
}

.boxyellow {
  max-width: 75%;

  /* background: #fff url(/shared/styles/images/bg-yellow-grad.jpg) repeat-x; */
 margin: 20px auto;
  padding: 10px 20px 10px 20px;
  border: dashed var(--clr-warning);
  border-width:2px;
     -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -khtml-border-radius: 5px;
    border-radius: 5px;
  
}

/* .boxyellow h4 {
  font-size:13px;
  color:#990000;
  padding: 0px 20px 0px 20px;
} */

/* .boxyellow p {
  font-size: 12px;
  
} */

.boxred {
  max-width: 75%;

  /* background: #fff url(/shared/styles/images/bg-red-grad.jpg) repeat-x; */
 margin: 20px auto;
  padding: 10px 20px 10px 20px;
  border: dashed var(--clr-alert);
  border-width: 2px;
     -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -khtml-border-radius: 5px;
    border-radius: 5px;
}
/* 
.boxred h4 {
  font-size:13px;
  color:#990000;
  padding: 0px 20px 0px 20px;
} */

/* .boxred p {
  font-size: 12px;
  
} */

.boxblue {
  max-width: 75%;
  /* font-size: 12px; */
  /* background: #fff url(/shared/styles/images/bg-blue-grad.jpg) repeat-x; */
  margin: 20px auto;
  padding: 10px 20px 10px 20px;
  border: dashed var(--clr-info);
  border-width: 2px;
     -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -khtml-border-radius: 5px;
    border-radius: 5px;
}

/* .boxblue h4 {
  font-size:13px;
  color:#990000;
  padding: 0px 20px 0px 20px;
} */

/* .boxblue p {
  font-size: 12px;
  
} */
/* ********************************** */
/* ! OHS Box Updates END */
/* ********************************** */


.grid-container {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  margin: 20px;
}

.grid-item {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  padding: 10px;
  border: 1px solid #ccc;
}

.material-icons {
  font-family: 'Material Icons';
  font-size: 24px;
  padding-right: 40px;
}

.formatted-text {
  color: #0000ff;
}

.icon-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 20px;
}

.left {
  grid-column: 1;
}

.right {
  grid-column: 2;
}

script,
link {
  display: none;
}
/* animate Highlight Start */
div > mark {
  padding: 0 5px !important;
  color: var(--clr-primary) !important;
  background-color: var(--clr-highlight) !important;
}

/* mark {
    position: relative;
    color: inherit;
    background-color: transparent;
  }
  
  mark::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    background-color: yellow;
    width: 100%;
    height: 100%;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 1s ease-in-out;
    z-index: -1;
  }
  
  mark.animate::before {
    transform: scaleX(1);
  } */

/* animate Highlight END */

.drop-cap::first-letter {
  -webkit-initial-letter: 2;
  initial-letter: 2;
  color: var(--clr-accent);
  font-weight: bold;
  font-size: 2em;
  margin-right: 0.1em;
}
/* Info Boxes Start */

.flex-self-reflection-container {
  background-color: var(--clr-self-reflection);
}
.flex-reflection-container {
  background-color: var(--clr-reflection);
}
.flex-final-container {
  background-color: var(--clr-final);
}
.flex-case-container {
  background-color: var(--clr-case);
}
.flex-knowledge-container {
  background-color: var(--clr-knowledge);
}
.flex-journal-container {
  background-color: var(--clr-journal);
}
.flex-quiz-container {
  background-color: var(--clr-quiz);
}
.flex-activity-container {
  background-color: var(--clr-activity);
}
.flex-assignment-container {
  background-color: var(--clr-assignment);
}
.flex-discInfo-container {
  background-color: var(--clr-discInfo);
}
.flex-food-container {
  background-color: var(--clr-food);
}
.flex-self-container {
  background-color: var(--clr-self);
}

.flex-assessment-container {
  background-color: var(--clr-assessment);
}

.flex-practice-container {
  background-color: var(--clr-practice);
}
.flex-mastery-container {
  background-color: var(--clr-mastery);
}

.flex-practice-container,
.flex-mastery-container,
.flex-self-container,
.flex-self-reflection-container,
.flex-reflection-container,
.flex-final-container,
.flex-case-container,
.flex-food-container,
.flex-knowledge-container,
.flex-journal-container,
.flex-quiz-container,
.flex-activity-container,
.flex-assignment-container,
.flex-discInfo-container,
.flex-assessment-container {
  display: flex;
  flex-wrap: wrap;
  font-size: 30px;
  text-align: center;
  padding: 10px;
  margin: -20px -20px 0 -20px;
}

.icon-self-reflection {
  mask-image: var(--icon-self-reflection);
  -webkit-mask-image: var(--icon-self-reflection);
  background-color: var(--clr-primary);
}
.icon-reflection-w {
  mask-image: var(--icon-reflection-w);
  -webkit-mask-image: var(--icon-reflection-w);
  background-color: var(--clr-primary);
}
.icon-reflection-b {
  mask-image: var(--icon-reflection-b);
  -webkit-mask-image: var(--icon-reflection-b);
  background-color: var(--clr-primary);
}
.icon-final-w {
  mask-image: var(--icon-final-w);
  -webkit-mask-image: var(--icon-final-w);
  background-color: var(--clr-primary);
}
.icon-final-b {
  background-image: var(--icon-final-b);
  -webkit-mask-image: var(--icon-final-b);
  background-color: var(--clr-primary);
}
.icon-case-b {
  background-image: var(--icon-case-b);
  -webkit-mask-image: var(--icon-case-b);
  background-color: var(--clr-primary);
}
.icon-food {
  background-image: var(--icon-food);
  -webkit-mask-image: var(--icon-food);
  background-color: var(--clr-primary);
}
.icon-knowledge {
  mask-image: var(--icon-knowledge);
  -webkit-mask-image: var(--icon-knowledge);
  background-color: var(--clr-primary);
}
.icon-journal {
  mask-image: var(--icon-journal);
  -webkit-mask-image: var(--icon-journal);
  background-color: var(--clr-primary);
}
.icon-quiz {
  mask-image: var(--icon-quiz);
  -webkit-mask-image: var(--icon-quiz);
  background-color: var(--clr-white);
}
.icon-none {
  mask-image: var(--icon-none);
  -webkit-mask-image: var(--icon-none);
  background-color: var(--clr-white);
}
.icon-activity {
  mask-image: var(--icon-activity);
  -webkit-mask-image: var(--icon-activity);
  background-color: var(--clr-white);
}
.icon-assignment {
  mask-image: var(--icon-assignment);
  -webkit-mask-image: var(--icon-assignment);
  background-color: var(--clr-primary);
}
.icon-discInfo {
  mask-image: var(--icon-discInfo);
  -webkit-mask-image: var(--icon-discInfo);
  background-color: var(--clr-primary);
}
.icon-self {
  mask-image: var(--icon-self);
  -webkit-mask-image: var(--icon-self);
  background-color: var(--clr-primary);
}
.icon-assessment {
  mask-image: var(--icon-assessment);
  -webkit-mask-image: var(--icon-assessment);
  background-color: var(--clr-primary);
}

.icon-practice {
  mask-image: var(--icon-practice);
  -webkit-mask-image: var(--icon-practice);
  background-color: var(--clr-primary);
}
.icon-mastery-w {
  mask-image: var(--icon-mastery-w);
  -webkit-mask-image: var(--icon-mastery-w);
  background-color: var(--clr-white);
}

.icon-left,
.icon-self,
.icon-self-reflection,
.icon-reflection-w,
.icon-reflection-b,
.icon-final-w,
.icon-final-b,
.icon-case-b,
.icon-food,
.icon-knowledge,
.icon-journal,
.icon-quiz,
.icon-activity,
.icon-assignment,
.icon-discInfo,
.icon-assessment,
.icon-mastery-b,
.icon-mastery-w,
.icon-practice {
  flex: 10%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  width: 100%;
  height: 50px;
}

.text-right {
  text-align: left;
  padding: 10px;
  padding-left: 25px;
  margin-left: -20px;
  flex: 90%;
  color: var(--clr-black);
}

.text-white {
  color: var(--clr-white);
}
.text-just-left {
  text-align: left;
}

.iconSelf {
  width: 35px;
}

/* Info Boxes End */

.cls-1 {
  fill: none;
  stroke: var(--clr-self);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cls-2 {
  fill: var(--clr-self);
  stroke-width: 0px;
}

.flex-pledge-container {
  display: flex;
  padding: 20px;
  flex-wrap: wrap;
}

.icon-right {
  flex: 15%;
}

.text-left {
  text-align: left;
  flex: 85%;
}
/* Image Sizing START */
.img-100 {
  width: 100%;
}
.img-95 {
  width: 95%;
}
.img-90 {
  width: 90%;
}
.img-85 {
  width: 85%;
}
.img-80 {
  width: 80%;
}
.img-75 {
  width: 75%;
}
.img-70 {
  width: 70%;
}
.img-65 {
  width: 65%;
}
.img-60 {
  width: 60%;
}
.img-55 {
  width: 55%;
}
.img-50 {
  width: 50%;
}
.img-45 {
  width: 45%;
}
.img-40 {
  width: 40%;
}
.img-35 {
  width: 35%;
}
.img-30 {
  width: 30%;
}
.img-25 {
  width: 25%;
}
.img-20 {
  width: 20%;
}
.img-15 {
  width: 15%;
}
.img-10 {
  width: 10%;
}
/* Make 20% bigger */
img.img-20-big {
  max-width: none;
  width: 40% !important;
}
p img.img-20-big.center {
  max-width: none;
  width: 50% !important;
}
.cont-r img.img-20-big {
  width: 110%;
  max-width: none;
}


.img-80 img {
  width: 80% !important;
  height: auto;
  margin-bottom: 5px;
}
.img-75 img {
  width: 75% !important;
  height: auto;
  margin-bottom: 5px;
}
.img-50 img {
  width: 50% !important;
  height: auto;
  margin-bottom: 5px;
}
.img-25 img {
  width: 25% !important;
  height: auto;
  margin-bottom: 5px;
}
.img-10 img {
  width: 10% !important;
  height: auto;
  margin-bottom: 5px;
}
/* Image Sizing END */
/* Two column START */
.col-grid-2 {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  padding: 20px 20px 0 0;
}

.col-grid-2 > * {
  flex: 1 1 calc(50% - 10px);
  min-width: 0;
}

/* Stack on smaller screens */
@media (max-width: 768px) {
  .col-grid-2 > * {
    flex: 1 1 100%;
  }
}
/* Two column END */
/* Universal Columns START */
/* 2 thirds left 1 third right */
.col2-1 {
  display: grid;
  grid-template-columns: 2fr 1fr;
  align-items: center;
  gap: 25px;
  justify-content: space-between;
  position: relative;
}

.col2-1 > * {
  width: 100%;
}

.col2-1 > *:first-child {
  order: 1;
}

.col2-1 > *:last-child {
  order: 2;
}

/* Add a vertical line between the columns (between 2fr and 1fr) */
.col2-1.lineV::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 66.66%;
  transform: translateX(-50%);
  width: 1px;
  background-color: var(--clr-accent);
}

/* Two equal columns with a 25px gap */
/* .cont-r {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 25px;
  position: relative;
} */
.homePage .cont-r {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
/* .cont-r {
  display: flex;
  flex-wrap: nowrap;
  gap: 25px;
  align-items: flex-start;
} */
[class^="box-"][class$="-b"] .cont-r {
  padding: 0 10px;
  box-sizing: border-box;
}
.cont-r {
  display: grid;
  gap: 25px;
  position: relative;
}
.cont-r > * {
  flex: 1 1 0;
  min-width: 0;
  align-self: flex-start;
}
.cont-r > div {
  margin: 0;
  padding: 0;
  align-self: flex-start;
}
.cont-r > div > p {
  margin-right: 20px;
}
.cont-r > div:not(.full-block) {
  margin: 0;
  padding: 0;
}
.cont-r > .full-block {
  padding: 100px 60px;
}
/* .cont-r p, .cont-r h3, .cont-r h4 {
    margin: 0;
    padding: 0;
  } */
.cont-r h3,
.cont-r h4 {
  margin: 0;
  padding: 0;
}
.cont-r img {
  display: block;
  margin-top: 30px;
}
.cont-img {
  display: flex;
  align-items: center;
  justify-content: center;
}
.vert-center {
  display: flex;
  align-items: center !important;
  justify-content: center;
  height: 100%;
}

.cont-r.vert-center > div:last-child {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Centered vertical line placed in the middle of the gap */
.cont-r.lineV::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  background-color: var(--clr-accent);
}

/* Left and right columns: force them to shrink and wrap text as needed */
.left-col,
.right-col {
  min-width: 0;
  overflow-wrap: break-word;
}

/* Vertical line column */
.lineV {
  display: flex;
  justify-content: center;
  position: relative;
}

/* Draw the vertical line in the center of the gap */
.lineV::after {
  content: "";
  display: block;
  width: 1px;
  background-color: var(--clr-accent);
  height: 100%;
  margin: auto;
}
.cont-r.lineV::after {
  /* Uncomment below to adjust the dividing line. */
  /* transform: translateX(-30px); */
}
/* Three Column Grid Start */
.cont-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
}

/* optionally override any .cont-r rules that conflict */
.cont-3 > * {
  margin: 0;
  padding: 0;
}
/* make your 3-col grid a positioning context */
.cont-3.lineV {
  position: relative;
}

/* draw two separators */
.cont-3.lineV::before,
.cont-3.lineV::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background-color: var(--clr-accent);
  pointer-events: none;
  /* override any old two-col rule at 50% */
  left: auto !important;
}

/* first line at one-third */
.cont-3.lineV::before {
  left: 33.3333% !important;
  transform: translateX(-50%);
}

/* second line at two-thirds */
.cont-3.lineV::after {
  left: 66.6667% !important;
  transform: translateX(-50%);
}

/* Three Column Grid END */
/* New Classes for top and bottom two rows */
.cont-t,
.cont-b {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.cont-t > *:first-child,
.cont-b > *:first-child {
  order: 1;
  text-align: center;
  width: 100%;
}

.cont-t > *:last-child,
.cont-b > *:last-child {
  order: 2;
  margin-top: 15px;
  text-align: center;
  width: 100%;
}

/* Media queries to stack the grid when the screen width is 600px or less */
@media (max-width: 768px) {
  /* Force the grid container to stack by overriding display and grid properties */
  .cont-r {
    display: block !important;
  }
  .cont-r > * {
    display: block !important;
    width: 100% !important;
    margin-bottom: 25px;
    order: unset !important;
    /* text-align: center !important; */
  }
  /* Hide the vertical line */
  .cont-r.lineV::after {
    display: none !important;
  }

  /* If you have top/bottom containers, stack them too */
  .cont-t,
  .cont-b {
    flex-direction: column !important;
  }
  .cont-t > *,
  .cont-b > * {
    order: unset !important;
    text-align: center !important;
  }
}

/* Universal Columns END */

/* ! Nested columns to be used with cont-r********** START */
/* Nested 2-Column Grid (Improved) */
.nested-col-2 {
  display: grid;
  /* auto-fit: Create as many columns as can fit.
    minmax(250px, 1fr): Each column must be AT LEAST 250px wide, 
                       but can grow to fill any extra space (1fr).
  */
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 15px;
  align-items: start;
}
/* Asymmetrical Nested Columns (Responsive) */
.nested-col-asym {
  display: grid;
  align-items: start;
  gap: 15px;
  /* On larger screens, create a 1-to-2 ratio */
  grid-template-columns: 1fr 2fr;
}

/* On screens 768px or less, stack them into a single column */
@media (max-width: 768px) {
  .nested-col-asym {
    grid-template-columns: 1fr;
  }
}

/* ! Nested columns to be used with cont-r********** END */

/* Two column text & image layouts - Start */
.img-text-container {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 15px;
}

/* .img-left .img,
  .img-left .text,
  .img-right .img,
  .img-right .text {
    order: unset;
    text-align: center;
  } */

.img-cap-container {
  grid-template-rows: auto auto;
}

.border-img {
  border: 2px solid var(--clr-secondary);
  box-sizing: border-box;
}
.case-secondary .border-img {
  border: 2px solid var(--clr-white);
  box-sizing: border-box;
}
.bg-secondary .border-img {
  border: 2px solid var(--clr-white);
  box-sizing: border-box;
}
/* For the layout with image on top and text on bottom */
.img-text-container.img-top {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.img-text-container.img-top .img {
  order: 1;
  text-align: center;
}

.img-text-container.img-top .text {
  order: 2;
  margin-top: 15px;
}
p .img-top {
  /* text-align: center; */
  display: block;
  margin-left: auto;
  margin-right: auto;
}
/* For the layout with text on top and image on the bottom */
.img-text-container.text-top {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.img-text-container.text-top .text {
  order: 1;
  margin-bottom: 15px;
  padding: 0;
}

.img-text-container.text-top .text ul {
  padding-left: 20px;
  margin: 0;
}

.img-text-container.text-top .text li {
  margin-bottom: 10px;
  padding-left: 0;
}

.img-text-container.text-top .img {
  order: 2;
  text-align: center;
}

/* Image left text right */
.img-left .img,
.img-right .img {
  display: block;
  max-width: 100%;
  height: auto;
}

.img-left {
  grid-template-columns: auto 1fr;
}

.img-right {
  grid-template-columns: 1fr auto;
}

.img-left .img {
  order: 1;
}

.img-left .text {
  order: 2;
}

.img-right .text {
  order: 1;
}

.img-right .img {
  order: 2;
}

/* Image Tilt */
.img-tilt-left,
.text-tilt-left,
.tilt-left {
  transform: rotate(-2deg);
}

.img-tilt-right,
.text-tilt-right,
.tilt-right {
  transform: rotate(2deg);
}

/* Image Round */
.img-round {
  border-radius: 50%;
}

/* Image Shadow */
.shadow-img {
  box-shadow: 0 0px 0px 0 rgba(0, 0, 0, 0.2);
}

.img-cap-container {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  justify-items: center;
}

.text-c,
.img-c {
  max-width: 800px;
  text-align: center;
  padding-left: 15px;
  padding-right: 15px;
}

.text-c {
  font-size: small;
  margin-top: -10px;
}

.text-img-right {
  margin-left: 20px;
}
.text-icon-right {
  margin-left: 10px;
}

.text-img-left {
  margin-right: 20px;
}
/* Sticky Note Start */
.sticky-note {
  position: relative;
  max-width: 350px;
  min-height: 200px;
  background-color: #fdfd96;
  padding: 20px;
  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);
  border-radius: 3px;
  transform: rotate(-2deg);
  box-sizing: border-box;
  margin-bottom: 20px;
  margin-left: 40px;
}
.sticky-note-long {
  position: relative;
  min-height: 200px;
  background-color: #fdfd96;
  padding: 20px;
  border-top: solid 4px #f1f171;
  border-bottom: solid 4px #f1f171;
  border-radius: 3px;
  box-sizing: border-box;
  margin-bottom: 20px;
  margin-left: 40px;
  margin-right: 40px;
}

.color-block {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 20px;
  background-color: #f1f171;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}

.note-text {
  margin-top: 30px;
  font-family: "Indie Flower", cursive;
}
.note-text  strong {
  margin-top: 30px;
  font-family: "Indie Flower", cursive;
  font-weight: 400;
  text-decoration: underline;
}

.note-text p {
  margin: 0;
  padding: 0;

  color: var(--clr-primary);
  word-wrap: break-word;
}
/* Sticky Note END */
figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  gap: 2px;
}
figcaption {
  font-size: 0.55em;
  color: var(--clr-primary);
  line-height: 1;
  text-align: center;
  /* margin-top: 8px;  */
}

.case-card figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.case-card figure figcaption {
  text-align: center;
  font-size: 0.8em;
  padding-bottom: 0px;
}
/* .cont-r img.img-round + figcaption{
  font-size: 0.55em;
  text-align: center;
   margin-top: 3px; 
   padding-bottom: 20px;
} */
img.img-round + figcaption {
  font-size: 0.55em;
  text-align: center;
  margin-top: 3px;
  /* padding-bottom: 18px; */
}
/* img.img-round + figcaption {
  margin-top: 8px;
  font-size: 0.55em;
  color: var(--clr-primary);
  text-align: center;
}
.cont-r  img.img-round + figcaption {
  margin-top: 8px;
  font-size: 0.55em;
  text-align: center;
} */

/* figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
}

.col-grid-2 > figure {
  display: flex;
  flex-direction: column;
}


.cont-r img.img-round + figcaption {
  margin-top: 3px; 
  font-size: 0.55em;
  text-align: center;
}
img.img-round + figcaption {
  margin-top: 3px; 
  font-size: 0.55em;
  text-align: center;
}

figcaption {
  font-size: 0.55em;
  color: var(--clr-primary);
  line-height: 1;
  margin-top: 0px;
  text-align: center;
}
/* Changes the colour of the text when on a coloured BG */
.bg-primary figcaption,
.bg-secondary figcaption,
.bg-accent figcaption {
  font-size: 0.7em;
  color: var(--clr-white);
  margin-top: 0px;
  text-align: center;
}
.bg-primary figure figcaption,
.bg-secondary figure figcaption,
.bg-accent figure figcaption {
  font-size: 0.7em;
  color: var(--clr-white);
  margin-top: 0px;
  text-align: center;
}
.case-primary  figure figcaption,
.case-secondary figure figcaption,
.case-accent figure figcaption {
  font-size: 0.7em;
  color: var(--clr-white);

  margin-top: 0px;
  text-align: center;
}
/* Examples */
.box-tertiary-b-dashed {
  border: 4px dashed var(--clr-tertiary) !important;
  margin-left: 30px;
  margin-right: 30px;
  margin-top: 10px;
  padding: 20px;
  box-shadow: inset 0 4px 8px 0 rgba(0, 0, 0, 0.04),
    inset 0 6px 20px 0 rgba(0, 0, 0, 0.04);
}

/* .box-tertiary-b {
  margin-left: 30px;
  margin-right: 30px;
  margin-top: 10px;
  padding-left: 20px;
} */
/* Examples */
/* Card */
.card-columns {
  outline-style: solid;
  outline-width: 4px;
  outline-color: rgba(255, 255, 255, 0.75);
  border: 2px solid rgba(0, 0, 0, 0.1);
  background-color: #fcffff;
  border-radius: 16px 16px 16px 16px;
  padding: 20px;
  transform: rotate(-.5deg);
  filter: drop-shadow(0.3rem 0.5rem 8px rgba(41, 41, 41, 0.35));
}

/* Universal Columns START */
/* 2 thirds left 1 third right */
.col2-1 {
  display: grid;
  grid-template-columns: 2fr 1fr;
  align-items: center;
  gap: 25px;
  justify-content: space-between;
  position: relative;
}

.col2-1 > * {
  width: 100%;
}

.col2-1 > *:first-child {
  order: 1;
}

.col2-1 > *:last-child {
  order: 2;
}

/* Add a vertical line between the columns (between 2fr and 1fr) */
.col2-1.lineV::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 66.66%;
  transform: translateX(-50%);
  width: 1px;
  background-color: var(--clr-accent);
}

/* New Classes for left and right two columns */

.cont-r,
.cont-l {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start !important;
  gap: 25px;
  justify-content: space-between;
  position: relative;
}

.cont-r > *,
.cont-l > * {
  width: 100%;
}

.cont-r > *:first-child,
.cont-l > *:first-child {
  order: 1;
}

.cont-r > *:last-child,
.cont-l > *:last-child {
  order: 2;
}

.cont-r .full-block {
  width: auto;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}
a[data-icon-added] {
  display: inline-flex;
  align-items: center;
}
.lineV::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  background-color: var(--clr-accent);
}
.lineV-img::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  background-color: var(--clr-accent);
}

/* Removes the line with full color BG */
.full-block .lineV::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0px;
  background-color: var(--clr-accent);
}

/* New Classes for top and bottom two rows */
.cont-t,
.cont-b {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.cont-t > *:first-child,
.cont-b > *:first-child {
  order: 1;
  text-align: center;
  width: 100%;
}

.cont-t > *:last-child,
.cont-b > *:last-child {
  order: 2;
  margin-top: 15px;
  text-align: center;
  width: 100%;
}

/* Media queries to stack the grid when the screen width is 600px or less */
@media (max-width: 768px) {
  .cont-r .full-block {
    padding: 10px;
    margin-bottom: 10px;
  }
  .cont-r,
  .cont-l {
    grid-template-columns: 1fr;
  }
  .cont-r > *,
  .cont-l > * {
    order: unset;
    /* text-align: center; */
    width: 100%;
  }
  .cont-r::after,
  .cont-l::after {
    display: none;
  }

  .cont-t,
  .cont-b {
    flex-direction: column;
  }
  .cont-t > *,
  .cont-b > * {
    order: unset;
    text-align: center;
  }
}

/* Universal Columns END */

/* Two column & image layout colour BG START */
.container-img {
  display: flex;
  align-items: center;
  position: relative;
}

.image-wrapper {
  position: relative;
  flex-shrink: 0;
  margin-right: -60px;
  z-index: 2;
  /* border: 1px solid black; */
}

.image-wrapper img {
  display: block;
  height: auto;
  width: 300px;
}
/* Image on the Right */
.container-reverse {
  display: flex;
  align-items: center;
  position: relative;
}
.text-wrapper,
.text-wrapper-reverse {
  background-color: var(--clr-accent);
  padding: 30px 30px 30px 60px;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  color: white;
}

.text-pad {
  padding: 40px;
  /* color: white; */
}

.image-wrapper-reverse {
  position: relative;
  flex-shrink: 0;
  margin-left: -60px;
  z-index: 2;
  /* border: 1px solid black; */
}

.image-wrapper-reverse img {
  display: block;
  height: auto;
  width: 300px;
}

@media (max-width: 650px) {
  .container-reverse {
    flex-direction: column-reverse;
    align-items: flex-start;
  }

  .text-wrapper-reverse {
    width: 100%;
    padding-left: 0px;
  }

  .image-wrapper-reverse {
    margin-left: 0;
    margin-top: 0px;
  }

  .image-wrapper-reverse img {
    width: auto;
    max-width: 100%;
  }
}

@media (max-width: 650px) {
  .container {
    flex-direction: column;
    align-items: flex-start;
  }

  .image-wrapper {
    margin-right: 0;
    margin-bottom: 0px;
  }

  .image-wrapper img {
    width: auto;
    max-width: 100%;
  }

  .text-wrapper {
    width: 100%;
    padding-left: 0px;
  }
}

/* Two column & image layout colour BG END */

.icon-box {
  width: 60px;
  background-color: var(--clr-secondary);
  padding: 5px;
  border-radius: 50px;
}

.boxpledge {
  color: #fff;
  border-radius: 5px;
  border: 2px solid var(--clr-boarder);
  padding: 20px;
  background-color: var(--clr-white);
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 6px 20px 0 rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

.pledgeborderbox {
  background-color: var(--clr-white);
  border: 2px dashed var(--clr-primary);
  border-radius: 5px;
  padding: 10px 15px;
  width: 80%;
  margin: 0 auto;
  color: var(--clr-primary);
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 6px 20px 0 rgba(0, 0, 0, 0.05);
}

.pledge-header {
  padding: 5px 5px 5px 20px;
  background-color: var(--clr-primary);
  font-size: 1.7em;
  line-height: 1.9em;
  color: var(--clr-white);
}

.pledge-header2 {
  font-size: 1.5em;
  line-height: 1.7em;
  padding-left: 20px;
  color: #fff;
}

.pledgebutton a:link,
.pledgebutton a:visited,
.pledgebutton a:hover {
  text-decoration: none;
  padding: 5px 10px;
  border-radius: 5px;
}

.pledgebutton a:link,
.pledgebutton a:hover {
  color: var(--clr-white);
  background-color: var(--clr-accent);
}
.pledgebutton a:visited {
  color: var(--clr-white);
  background-color: var(--clr-button-hover);
}

.pledgebutton2 a:link,
.pledgebutton2 a:visited,
.pledgebutton2 a:hover {
  text-decoration: none;
  padding: 10px 20px;
  border-radius: 5px;
}

.pledgebutton2 a:link {
  color: #fff;
  border: 2px solid black;
  background-color: #bfbfbf;
}
.pledgebutton2 a:visited,
.pledgebutton2 a:hover {
  color: #000;
  border: 2px solid red;
}

.pledge-content {
  visibility: hidden;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.pledge-content.show {
  visibility: visible;
  max-height: 1000px;
}
/* Callout Boxes */
.box-primary-b,
.box-secondary-b,
.box-tertiary-b,
.box-accent-b,
.box-alert-b,
.box-success-b,
.box-info-b,
.box-warning-b,
.box-self-b,
.box-self-reflection-b,
.box-reflection-b,
.box-final-b,
/* .box-case-b, */
  .box-food-b,
.box-knowledge-b,
.box-journal-b,
.box-quiz-b,
.box-activity-b,
.box-assignment-b,
.box-discInfo-b,
.box-assessment-b,
.box-practice-b,
.box-mastery-b {
  padding: 20px;
  background-color: var(--clr-white);
}
.box-primary-b img,
.box-secondary-b img,
.box-tertiary-b img,
.box-accent-b img,
.box-alert-b img,
.box-success-b img,
.box-info-b img,
.box-warning-b img,
.box-self-b img,
.box-self-reflection-b img,
.box-reflection-b img,
.box-final-b img,
.box-food-b img,
.box-knowledge-b img,
.box-journal-b img,
.box-quiz-b img,
.box-activity-b img,
.box-assignment-b img,
.box-discInfo-b img,
.box-assessment-b img,
.box-practice-b img,
.box-mastery-b img {
  margin: 20px;
}
/* Remove animation */
.box-primary-b ul > li,
.box-primary-b ol > li,
.box-secondary-b ul > li,
.box-secondary-b ol > li,
.box-tertiary-b ul > li,
.box-tertiary-b ol > li,
.box-accent-b ul > li,
.box-accent-b ol > li,
.box-alert-b ul > li,
.box-alert-b ol > li,
.box-success-b ul > li,
.box-success-b ol > li > li,
.box-info-b ul > li,
.box-info-b ol > li,
.box-warning-b ul > li,
.box-warning-b ol > li,
.box-self-b ul > li,
.box-self-b ol > li,
.box-self-reflection-b ul > li,
.box-self-reflection-b ol > li,
.box-reflection-b ul > li,
.box-reflection-b ol > li,
.box-final-b ul > li,
.box-final-b ol > li,
.box-food-b ul > li,
.box-food-b ol > li,
.box-knowledge-b ul > li,
.box-knowledge-b ol > li,
.box-journal-b ul > li,
.box-quiz-b ul > li,
.box-activity-b ul > li,
.box-assignment-b ul > li,
.box-journal-b ol > li,
.box-quiz-b ol > li,
.box-activity-b ol > li,
.box-assignment-b ol > li,
.box-discInfo-b ul > li,
.box-discInfo-b ol > li,
.box-assessment-b ul > li,
.box-assessment-b ol > li,
.box-practice-b ul > li,
.box-practice-b ol > li,
.box-mastery-b ul > li,
.box-mastery-b ol > li {
  animation: none !important;
  transition: none !important;
  visibility: visible !important;
  opacity: 1 !important;
  transform: none !important;
}
.box-primary-b {
  border: 6px solid var(--clr-primary);
}
.box-secondary-b {
  border: 6px solid var(--clr-secondary);
}
.box-tertiary-b {
  border: 6px solid var(--clr-tertiary);
}
.box-accent-b {
  border: 6px solid var(--clr-accent);
}
.box-alert-b {
  border: 6px solid var(--clr-alert);
}
.box-success-b {
  border: 6px solid var(--clr-success);
}
.box-info-b {
  border: 6px solid var(--clr-info);
}
.box-warning-b {
  border: 6px solid var(--clr-warning);
}

/* ------ */
/* Soft Alert Boxes START */
/* Depricated START */
div.note {
  color: var(--clr-note-text);
  background-color: var(--clr-note-bg);
  border-left: solid 4px var(--clr-note-line);
  /* mc-auto-number-format: '{b}Note: {/b}'; */
  overflow: hidden;
  padding: 12px;
}
div.warning {
  color: var(--clr-warning-text);
  background-color: var(--clr-warning-bg);
  border-left: solid 4px var(--clr-warning-line);
  /* mc-auto-number-format: '{b}Note: {/b}'; */
  overflow: hidden;
  padding: 12px;
}
/* Depricated END */
.note-box {
  color: var(--clr-note-text);
  background-color: var(--clr-note-bg);
  border-left: solid 4px var(--clr-note-line);
  /* mc-auto-number-format: '{b}Note: {/b}'; */
  overflow: hidden;
  padding: 12px;
}
.warning-box {
  color: var(--clr-warning-text);
  background-color: var(--clr-warning-bg);
  border-left: solid 4px var(--clr-warning-line);
  /* mc-auto-number-format: '{b}Note: {/b}'; */
  overflow: hidden;
  padding: 12px;
}
.alert-box {
  color: var(--clr-alert-text);
  background-color: var(--clr-alert-bg);
  border-left: solid 4px var(--clr-alert-line);
  /* mc-auto-number-format: '{b}Note: {/b}'; */
  overflow: hidden;
  padding: 12px;
}
.success-box {
  color: var(--clr-success-text);
  background-color: var(--clr-success-bg);
  border-left: solid 4px var(--clr-success-line);
  /* mc-auto-number-format: '{b}Note: {/b}'; */
  overflow: hidden;
  padding: 12px;
}

/* Soft Alert Boxes END */
/* ------ */
.box-self-b {
  border: 6px solid var(--clr-self);
}
.box-self-reflection-b {
  border: 6px solid var(--clr-self-reflection);
}
.box-reflection-b {
  border: 6px solid var(--clr-reflection);
}
.box-final-b {
  border: 6px solid var(--clr-final);
  border-radius: 10px 0;
}
.box-knowledge-b {
  border: 6px solid var(--clr-knowledge);
}
.box-journal-b {
  border: 6px solid var(--clr-journal);
}
.box-quiz-b {
  border: 6px solid var(--clr-quiz);
}
.box-quiz-b .text-right {
  color: var(--clr-white);
}
.box-activity-b {
  border: 6px solid var(--clr-activity);
}
.box-activity-b .text-right {
  color: var(--clr-white);
}
.box-assignment-b {
  border: 6px solid var(--clr-assignment);
}
.box-discInfo-b {
  border: 6px solid var(--clr-discInfo);
}
.box-food-b {
  border: 6px solid var(--clr-food);
}
.box-assessment-b {
  border: 6px solid var(--clr-assessment);
}
.box-practice-b {
  border: 6px solid var(--clr-practice);
}
.box-mastery-b {
  border: 6px solid var(--clr-mastery);
}
.box-mastery-b .text-right {
  color: var(--clr-white);
}
/*===================
 white behind a link START
====================== */
.box-primary-f a,
.box-secondary-f a,
.box-tertiary-f a,
.box-accent-f a,
.box-alert-f a,
.box-success-f a,
.box-info-f a,
.box-warning-f a {
  border-radius: 5px;
  background-color: white;
  padding: 2px 8px 4px 4px;
  display: inline-block;
  width: fit-content;
}
/*===================
 white behind a link END
====================== */
.box-primary-f,
.box-secondary-f,
.box-tertiary-f,
.box-accent-f,
.box-alert-f,
.box-success-f,
.box-info-f,
.box-warning-f {
  padding: 20px;
  position: relative;
  width: 100%;
}
.box-alert-f,
.box-success-f,
.box-info-f,
.box-warning-f {
  color: var(--clr-primary);
  background-color: rgb(255, 255, 255);
  padding-left: 80px;
}
.box-alert-f p {
  color: var(--clr-white);
}

/* Case Study Box START */
.case-card {
  border-radius: 10px;
  padding: 15px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  color: var(--text-color);
}

.case-primary {
  background-color: var(--clr-primary);
  --text-color: var(--clr-white);
  --case-icon: url('../../img/case.svg');
  --icon-color: var(--clr-white);
}

.case-secondary {
  background-color: var(--clr-secondary);
  --text-color: var(--clr-white);
  --case-icon: url('../../img/case.svg');
  --icon-color: var(--clr-white);
}

.case-tertiary {
  background-color: var(--clr-tertiary);
  --text-color: var(--clr-primary);
  --case-icon: url('../../img/case.svg');
  --icon-color: var(--clr-primary);
}

.case-accent {
  background-color: var(--clr-accent);
  --text-color: var(--clr-white);
  --case-icon: url('../../img/case.svg');
  --icon-color: var(--clr-white);
}

.card-header {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.icon-case {
  width: 50px;
  height: 50px;
  background-color: var(--icon-color);
  mask-image: var(--case-icon);
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-image: var(--case-icon);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  background-size: contain;
  margin-right: 10px;
  margin-left: 30px;
}

.case-title {
  margin: 0;
  font-size: 30px;
  padding-left: 20px;
  color: var(--text-color);
}

/* Case Study Box END */
/* Case Study Box Custom Colour START */
.case-card-clr {
  border-radius: 10px;
  padding: 15px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  color: var(--text-color);
}
.case-card-clr img {
  display: block;
  width: auto;
  border: 3px solid var(--clr-secondary);
}

.case-card-body-clr img {
  display: block;
  width: auto;
}

.case-primary {
  background-color: var(--clr-primary);
  --text-color: var(--clr-white);
  --case-icon: url('../../img/case.svg');
  --icon-color: var(--clr-white);
}

.case-secondary {
  background-color: var(--clr-secondary);
  --text-color: var(--clr-white);
  --case-icon: url('../../img/case.svg');
  --icon-color: var(--clr-white);
}

.case-tertiary {
  background-color: var(--clr-tertiary);
  --text-color: var(--clr-primary);
  --case-icon: url('../../img/case.svg');
  --icon-color: var(--clr-primary);
}

.case-accent {
  background-color: var(--clr-accent);
  --text-color: var(--clr-white);
  --case-icon: url('../../img/case.svg');
  --icon-color: var(--clr-white);
}
/* Custom colours START */
.case-pink {
  background-color: var(--clr-pink);
}
.case-peach {
  background-color: var(--clr-peach);
}
.case-yellow-light {
  background-color: var(--clr-yellow-light);
}
.case-yellow {
  background-color: var(--clr-yellow);
}
.case-yellow-dark {
  background-color: var(--clr-yellow-dark);
}
.case-green-light {
  background-color: var(--clr-green-light);
}
.case-green {
  background-color: var(--clr-green);
}
.case-green-dark {
  background-color: var(--clr-green-dark);
}
.case-black {
  background-color: var(--clr-black);
}
.case-blue-light {
  background-color: var(--clr-blue-light);
}
.case-blue {
  background-color: var(--clr-blue);
}
.case-blue-dark {
  background-color: var(--clr-blue-dark);
}
.case-orange-light {
  background-color: var(--clr-orange-light);
}
.case-orange {
  background-color: var(--clr-orange);
}
.case-orange-dark {
  background-color: var(--clr-orange-dark);
}
.case-pink-light {
  background-color: var(--clr-pink-light);
}
.case-pink {
  background-color: var(--clr-pink);
}
.case-pink-dark {
  background-color: var(--clr-pink-dark);
}
.case-purple-light {
  background-color: var(--clr-purple-light);
}
.case-purple {
  background-color: var(--clr-purple);
}
.case-purple-dark {
  background-color: var(--clr-purple-dark);
}

.case-icon-clr.case-blue-dark,
.case-black,
.case-pink-dark,
.case-purple-dark {
  --text-color: var(--clr-white);
  --case-icon: url('../../img/case.svg');
  --icon-color: var(--clr-white);
}
.case-icon-clr,
.case-peach,
.case-blue-light,
.case-yellow-light,
.case-yellow,
.case-blue,
.case-blue-light,
.case-yellow-dark,
.case-green-dark,
.case-green-light,
.case-green,
.case-yellow-light,
.case-yellow,
.case-orange,
.case-orange-light,
.case-orange-dark,
.case-pink,
.case-pink-light,
.case-purple,
.case-purple-light {
  --text-color: var(--clr-primary);
  --case-icon: url('../../img/case.svg');
  --icon-color: var(--clr-primary);
}
/* Custom colours END */
.card-header-clr {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.icon-case-clr {
  width: 50px;
  height: 50px;
  background-color: var(--icon-color);
  mask-image: var(--case-icon);
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-image: var(--case-icon);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  background-size: contain;
  margin-right: 10px;
  margin-left: 30px;
}

.case-title-clr {
  margin: 0;
  font-size: 30px;
  padding-left: 20px;
  color: var(--text-color);
}
.case-card-body-clr {
  padding: 15px;
  color: var(--clr-primary);
  background-color: var(--clr-white);
}

/* Case Study Box Custom Colour END */

/* Callout Boxes START */
.box-conditional-fb,
.box-lesson-fb,
.box-final-thought-fb,
.box-think-fb,
.box-pause-fb,
.box-survey-fb,
.box-course-fb,
.box-formula-fb,
.box-puzzle-fb {
  color: var(--clr-primary);
  padding: 5px;
  padding-left: 70px;
  position: relative;
  border-width: 4px;
  border-style: solid;
  display: block;
  height: auto;
}

.box-lesson-fb {
  border-color: var(--clr-lesson);
}
.box-final-thought-fb {
  border-color: var(--clr-final);
}
.box-conditional-fb {
  border-color: var(--clr-conditional);
}
.box-think-fb {
  border-color: var(--clr-think-about);
}
.box-pause-fb {
  border-color: var(--clr-pause);
}
.box-survey-fb {
  border-color: var(--clr-survey);
}
.box-course-fb {
  border-color: var(--clr-course);
}
.box-puzzle-fb {
  border-color: var(--clr-puzzle);
}
.box-formula-fb {
  border-color: var(--clr-formula);
}

.box-lesson-fb p,
.box-final-thought-fb p,
.box-conditional-fb p,
.box-think-fb p,
.box-pause-fb p,
.box-survey-fb p,
.box-course-fb p,
.box-formula-fb p,
.box-puzzle-fb p {
  background-color: var(--clr-white);
  padding-left: 5px;
  margin: 0;
}

.box-lesson-fb h3,
.box-final-thought-fb h3,
.box-conditional-fb h3,
.box-think-fb h3,
.box-pause-fb h3,
.box-survey-fb h3,
.box-course-fb h3,
.box-formula-fb h3,
.box-puzzle-fb h3 {
  color: var(--clr-accent);
  background-color: var(--clr-white);
  padding-left: 15px;
  margin: 0;
  line-height: 1.5;
}
.box-lesson-fb p,
.box-final-thought-fb p,
.box-conditional-fb p,
.box-think-fb p,
.box-pause-fb p,
.box-survey-fb p,
.box-course-fb p,
.box-formula-fb p,
.box-puzzle-fb p {
  color: var(--clr-primary);
  background-color: var(--clr-white);
  padding-left: 15px;
  margin: 0;
  line-height: 1.5;
}
.box-lesson-fb h2,
.box-final-thought-fb h2,
.box-conditional-fb h2,
.box-think-fb h2,
.box-pause-fb h2,
.box-survey-fb h2,
.box-course-fb h2,
.box-formula-fb h2,
.box-puzzle-fb h2 {
  margin: 0;
  padding-top: 10px;
  padding-left: 5px;
  font-family: var(--font-h1);
  font-size: 1.75em;
  font-weight: bold;
  line-height: normal;
  color: var(--clr-accent);
  background-color: var(--clr-white);
  text-align: left;
  border-bottom: 0px solid var(--clr-accent);
  border-left: 0px solid var(--clr-accent);
  border-right: 0px solid var(--clr-accent);
  box-shadow: 0 4px 0px 0 rgba(0, 0, 0, 0.0), 0 0px 0px 0 rgba(0, 0, 0, 0.0);
}

.box-lesson-fb::before,
.box-final-thought-fb::before,
.box-conditional-fb::before,
.box-think-fb::before,
.box-pause-fb::before,
.box-survey-fb::before,
.box-course-fb::before,
.box-formula-fb::before,
.box-puzzle-fb::before {
  content: '';
  background-size: 40px 40px;
  background-repeat: no-repeat;
  background-position: center;
  width: 65px;
  height: 100%;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

.box-lesson-fb::before {
  background-image: url('../../img/test.svg');
  background-color: var(--clr-lesson);
}
.box-final-thought-fb::before {
  background-image: url('../../img/final-w.svg');
  background-color: var(--clr-final);
}
.box-conditional-fb::before {
  background-image: url('../../img/conditional.svg');
  background-color: var(--clr-conditional);
}
.box-think-fb::before {
  background-image: url('../../img/think.svg');
  background-color: var(--clr-think-about);
  --text-color: var(--clr-primary);
  --icon-color: var(--clr-primary);
}
.box-pause-fb::before {
  background-image: url('../../img/pause.svg');
  background-color: var(--clr-pause);
}
.box-survey-fb::before {
  background-image: url('../../img/survey.svg');
  background-color: var(--clr-survey);
}
.box-course-fb::before {
  background-image: url('../../img/education.svg');
  background-color: var(--clr-course);
}
.box-puzzle-fb::before {
  background-image: url('../../img/puzzle.svg');
  background-color: var(--clr-puzzle);
}
.box-formula-fb::before {
  background-image: url('../../img/formula.svg');
  background-color: var(--clr-formula);
}

/* Callout Boxes END */

.box-primary-f {
  background-color: var(--clr-primary);
  color: var(--clr-white);
}
.box-secondary-f {
  background-color: var(--clr-secondary);
  color: var(--clr-white);
}
.box-tertiary-f {
  background-color: var(--clr-tertiary);
}
.box-accent-f {
  background-color: var(--clr-accent);
  color: var(--clr-white);
}
.box-alert-f {
  background-color: var(--clr-alert);
}
.box-success-f {
  background-color: var(--clr-success);
}
.box-info-f {
  background-color: var(--clr-info);
}
.box-warning-f {
  background-color: var(--clr-warning);
}
/*Figcaption & blockquote text colour START*/
.box-primary-f figcaption {
  color: var(--clr-white) !important;
}
.box-primary-f blockquote {
  color: var(--clr-white) !important;
}
.box-primary-f .base-accordion p {
  color: var(--clr-primary) !important;
}
/*Figcaption text colour END*/
/*  */

/* .box-alert-f::before {
  content: '';
  background-image: url('../../img/alert.svg');
  background-size: contain;
  background-repeat: no-repeat;
  width: 50px;
  height: 50px;
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
} */

/* =====================
Change the colour of the icon to white
============================*/
.box-alert-f::before {
  content: '';

  /* This now sets the icon's color to white */
  background-color: white;

  /* The SVG is now used as a mask (stencil) */
  mask-image: url('../../img/alert.svg');
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;

  /* Add vendor prefix for better browser compatibility */
  -webkit-mask-image: url('../../img/alert.svg');
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;

  /* Keep all original layout styles */
  width: 50px;
  height: 50px;
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
}
.box-success-f::before {
  content: '';
  background-image: url('../../img/success.svg');
  background-size: contain;
  background-repeat: no-repeat;
  width: 50px;
  height: 50px;
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
}
.box-info-f::before {
  content: '';
  background-image: url('../../img/info.svg');
  background-size: contain;
  background-repeat: no-repeat;
  width: 50px;
  height: 50px;
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
}
.box-warning-f::before {
  content: '';
  background-image: url('../../img/warning.svg');
  background-size: contain;
  background-repeat: no-repeat;
  width: 50px;
  height: 50px;
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
}

.box-purple-bf {
  color: #fff;
  background-color: #7d00d1;
}
.box-pledge-bf {
  background-color: #8cf3fe;
}
.box-border-pledge {
  background-color: #8cf3fe;
  border: 0px dashed #1d9bbf;
  padding: 10px 15px;
  width: 80%;
  margin: 0 auto;
}
.box-aque-bf {
  background-color: #78cbc4;
}
.box-white-bf {
  background-color: #ffffff;
  border-radius: 15px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

@media (prefers-reduced-motion: reduce) {
  body {
    animation: none;
  }
}

@media print {
  #printButton {
    display: none;
  }
  body {
    transition: opacity 1s;
    animation: fadeInAnimation ease 0s 1;
  }
  img {
    width: auto;
    height: auto;
    max-width: 100%;
  }
  img.displayed {
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Snackbar */
#snackbar {
  visibility: hidden;
  min-width: 250px;
  margin-left: -125px;
  background-color: #333;
  color: #fff;
  text-align: center;
  border-radius: 2px;
  padding: 16px;
  position: fixed;
  z-index: 1;
  left: 50%;
  bottom: 30px;
  font-size: 17px;
}

/* Video */
.video-container {
  position: relative;
  width: 100%;
  height: 500px;
  overflow: hidden;
}

.video-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  overflow: hidden;
  background-color: var(--clr-tertiary);
}
/* ! TESTING TURN BACK ON July 23 */
/* video {
  min-width: 100%;
  min-height: 100%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  box-shadow: 0 35px 80px rgba(0, 0, 0, 0.15);
} */

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.overlay-content {
  /* background: rgba(255, 255, 255, 0.5); */
  /* border-top: 2px solid white;
      border-bottom: 2px solid white; */
  background-color: hsl(0 0% 100% / .60);
  color: var(--clr-primary);
  padding: 20px;
  width: 100vw;
  text-align: center;
  backdrop-filter: blur(10px) brightness(105%) contrast(150%);
  -webkit-backdrop-filter: blur(10px) brightness(125%);
  border-radius: 0px;
}

/* Image hover and show text Start */

/* body .show-img {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    } */

.container1-img {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 100px 50px;
  padding: 100px 50px;
}

.container1-img .card-img {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  width: 350px;
  height: 300px;
  background-color: var(--clr-white);
  border-radius: 20px;
  box-shadow: 0 35px 80px rgba(0, 0, 0, 0.15);
  transition: height 0.5s, top 0.5s, transform 0.5s, box-shadow 0.5s;
  cursor: pointer;
}

.container1-img .card-img.expanded {
  height: 400px;
}

.container1-img .card-img .box-img {
  position: absolute;
  top: 20px;
  width: 300px;
  height: 220px;
  background: var(--clr-primary);
  border-radius: 12px;
  overflow: hidden;
  transition: top 0.5s, transform 0.5s, box-shadow 0.5s;
}

.container1-img .card-img.expanded .box-img {
  top: -100px;
  transform: scale(0.75);
  box-shadow: 0 35px 80px rgba(0, 0, 0, 0.2);
}

.container1-img .card-img .box-img img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.container1-img .card-img .content-img {
  position: absolute;
  top: 252px;
  width: 100%;
  height: 35px;
  padding: 0 30px;
  overflow: hidden;
  text-align: center;
  transition: top 0.5s, height 0.5s;
}

.container1-img .card-img.expanded .content-img {
  top: 125px;
  height: 250px;
}

/* Image hover and show text END */
/* Full-Screen Video Background START */
.video-container-main {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  z-index: -1;
}

#bg-video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100vw;
  min-height: 100vh;
  transform: translate(-50%, -50%);
}

.overlay-video {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1;
}

.content-main {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: white;
  /* min-height: 100vh; */
  padding: 20px;
}

/* Main Content */
.main-content {
  position: relative;
  max-width: 850px;
  text-align: center;
  transition: transform 0.5s ease, box-shadow 0.5s ease;
  /* Initially centered */
  transform: translateY(0);
}

/* Shadow effect added when main content "lifts" */
.main-content.lifted {
  transform: translateY(-30px);
  /* box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);  */
}

.main-content h1 {
  font-size: 5em;
  margin-bottom: 10px;
}

.main-content p {
  font-size: 1.5em;
  margin-bottom: 20px;
}

/* button {
  padding: 10px 20px;
  font-size: 1em;
  color: #fff;
  background-color: #e50914;
  border: none;
  cursor: pointer;
  border-radius: 4px;
}

button:hover {
  background-color: #f40612;
} */

/* Services Section */
.top-services {
  opacity: 0;
  background-color: #111;
  padding: 40px 20px;
  transform: translateY(50px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

/* When revealed, bring it into view */
.top-services.revealed {
  opacity: 1;
  transform: translateY(0);
}

.services-carousel {
  display: flex;
  gap: 20px;
  margin-top: 20px;
}

.service-card {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  flex: 1;
  min-width: 200px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.service-card img {
  width: 100%;
  height: auto;
}

.service-card:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.6);
}

.card-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  padding: 10px;
  color: #fff;
  transition: background 0.3s ease, transform 0.3s ease;
  transform: translateY(10px);
}

.service-card:hover .card-overlay {
  background: rgba(0, 0, 0, 0.8);
  transform: translateY(0);
}
/* Full-Screen Video Background END */

/* Printing */
@media print {
  #printButton {
    display: none;
  }

  body {
    transition: none;
    animation: none;
  }

  details {
    display: block;
  }

  details[open] .accordion-content,
  details[open] div {
    max-height: none;
    height: auto;
  }

  .container1-img .card-img.expanded .box-img {
    top: 20px;
    transform: none;
    box-shadow: none;
  }

  .container1-img .card-img .content-img {
    top: 20px;
    height: auto;
  }

  .container1-img .card-img.expanded .content-img {
    top: 125px;
    height: auto;
  }

  /* Ensure images maintain size when printing */
  .img-text-container img {
    width: 253px !important;
    height: auto !important;
    max-width: 100%;
    max-height: 100%;
  }

  /* Ensure background colors are printed */
  * {
    -webkit-print-color-adjust: exact;
    color-adjust: exact;
  }

  /* Specific adjustments for color grid */
  .color-sample {
    background-color: inherit !important;
  }

  /* Specific adjustments for accordions */
  .accordion-other-title,
  .accordion-other-content {
    background-color: inherit !important;
  }

  /* Ensure accordion background colors are printed */
  .accordion-other[data-type="reminder"] .accordion-other-title {
    background-color: var(--clr-reminder) !important;
    color: var(--clr-white) !important;
    -webkit-print-color-adjust: exact;
    color-adjust: exact;
  }
  .accordion-other[data-type="think"] .accordion-other-title {
    background-color: var(--clr-think-about) !important;
    color: var(--clr-primary) !important;
    -webkit-print-color-adjust: exact;
    color-adjust: exact;
  }

  .accordion-other[data-type="pause"] .accordion-other-title {
    background-color: var(--clr-pause) !important;
    color: var(--clr-white) !important;
    -webkit-print-color-adjust: exact;
    color-adjust: exact;
  }
  .accordion-other[data-type="survey"] .accordion-other-title {
    background-color: var(--clr-survey) !important;
    color: var(--clr-white) !important;
    -webkit-print-color-adjust: exact;
    color-adjust: exact;
  }

  .accordion-other[data-type="course"] .accordion-other-title {
    background-color: var(--clr-course) !important;
    color: var(--clr-white) !important;
    -webkit-print-color-adjust: exact;
    color-adjust: exact;
  }

  .accordion-other[data-type="puzzle"] .accordion-other-title {
    background-color: var(--clr-puzzle) !important;
    color: var(--clr-white) !important;
    -webkit-print-color-adjust: exact;
    color-adjust: exact;
  }
  .accordion-other[data-type="formula"] .accordion-other-title {
    background-color: var(--clr-formula) !important;
    color: var(--clr-white) !important;
    -webkit-print-color-adjust: exact;
    color-adjust: exact;
  }

  .accordion-other-content {
    background-color: var(--clr-white) !important;
    -webkit-print-color-adjust: exact;
    color-adjust: exact;
  }

  /* Specific adjustments for color samples */
  .color-sample[data-hex="#212121"] {
    background-color: #212121 !important;
  }

  .color-sample[data-hex="#2f2f2f"] {
    background-color: #2f2f2f !important;
  }

  .color-sample[data-hex="#d6d9db"] {
    background-color: #d6d9db !important;
  }

  .color-sample[data-hex="#dd2938"] {
    background-color: #dd2938 !important;
  }

  .color-sample[data-hex="#bfdfe8"] {
    background-color: #bfdfe8 !important;
  }

  .color-sample[data-hex="#704cac"] {
    background-color: #704cac !important;
  }

  .color-sample[data-hex="#1d1d2c"] {
    background-color: #1d1d2c !important;
  }

  .color-sample[data-hex="#31a2af"] {
    background-color: #31a2af !important;
  }

  .color-sample[data-hex="#9C691C"] {
    background-color: #9c691c !important;
  }

  .color-sample[data-hex="#2E602F"] {
    background-color: #2e602f !important;
  }

  .color-sample[data-hex="#CA8216"] {
    background-color: #ca8216 !important;
  }

  .color-sample[data-hex="#A86AB9"] {
    background-color: #a86ab9 !important;
  }

  .color-sample[data-hex="#3b4b7d"] {
    background-color: #3b4b7d !important;
  }

  .color-sample[data-hex="#439897"] {
    background-color: #439897 !important;
  }

  .color-sample[data-hex="#f44336"] {
    background-color: #f44336 !important;
  }

  .color-sample[data-hex="#5BA467"] {
    background-color: #5ba467 !important;
  }

  .color-sample[data-hex="#5594F1"] {
    background-color: #5594f1 !important;
  }

  .color-sample[data-hex="#eba948"] {
    background-color: #eba948 !important;
  }

  /* Ensure all tabs are shown */
  .tabcontent {
    display: block !important;
  }

  /* Ensure hidden divs are shown */
  .hidden-div {
    display: block !important;
  }
}
/* *************************** */
/* UPDATED TAB CONTENT --------- START */
/* *************************** */
.tabcontent {
      display: none !important;
      padding: 20px;
      background-color: #ffffff;
      border-left: 1px solid var(--clr-accent, #dd2938);
      border-right: 1px solid var(--clr-accent, #dd2938);
      border-bottom: 1px solid var(--clr-accent, #dd2938);
      position: relative;
      z-index: 1;
    }
    
    .tabcontent.active {
      display: block !important;
    }
    
    .tabcontent[aria-hidden="false"] {
      display: block !important;
    }
    
    .tabcontent[aria-hidden="true"] {
      display: none !important;
    }
    
    /* Tab button styling */
    .tab-group {
      border: solid 1px var(--clr-accent, #dd2938);
      box-shadow: 2px 0 10px -4px rgba(163, 163, 164, 0.5), -2px 0 15px -4px rgba(163, 163, 164, 0.5);
      background-color: #eeeeee;
      margin-bottom: 20px;
    }
    
    .tab {
      overflow: hidden;
      position: relative;
      background-color: #eeeeee;
    }
    
    .tablinks {
      background-color: transparent;
      outline: none;
      cursor: pointer;
      padding: 10px 15px;
      margin-bottom: -1px;
      transition: border-color 0.15s ease-in-out;
      color: var(--clr-primary, #1b365c);
      position: relative;
      z-index: 1;
      font-size: 1em;
      border: none;
      border-radius: 0;
      margin: 0px;
    }
    
    .tablinks.active,
    .tablinks[aria-selected="true"] {
      font-weight: bold;
      color: var(--clr-accent, #dd2938);
      background-color: #ffffff;
      border-bottom: 2px solid #ffffff;
    }
    
    .tablinks:hover {
      background-color: #f0f0f0;
    }
    
    .tabcontent h2, .tabcontent h3 {
      margin-top: 0;
      color: var(--clr-accent, #dd2938);
    }




/* *************************** */
/* UPDATED TAB CONTENT --------- END */
/* *************************** */
/* iframe header and footer */
.if-header {
  /* position: absolute; */
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
  display: none;
}
.if-footer {
  /* position: absolute; */
  top: 0;
  left: 0;
  width: 100%;
  height: 100px;
}
/* ==========================================
           UNIVERSAL SOURCE BUTTON
        ========================================== */
/* .universal-source-button {

  margin-top: 175px;
  margin: 5px;
  font-size: .85em;
    padding: 10px 15px;
      font-weight: 900;
  cursor: pointer;
    background-color: #333;
  color: var(--clr-white);
  border-radius: 5px;
  border: 0;
    text-align: center;
  transition: all 0.2s ease;
  --box-glow-color: rgba(33, 33, 33, 0.2);
} */
/* 
.universal-source-button:hover {
  background-color: var(--clr-accent);
} */
/* FORMAT FOR SOURCE TEXT; ALSO, DEACTIVATES HYPERLINKS WITHIN THE STYLE */
p .sourcetitle, p .universal-source-button  {
  line-height: 1.5em;
  font-size: .85em;
  margin-top: 175px;
  color: #fff;
  font-weight: 900;
  cursor: pointer;
  padding: 10px 15px;
  border-radius: 5px;
  background-color: #333;
  text-align: center;
  display: inline-block;
}
.sourcetitle, .universal-source-button  {
  line-height: 1.5em;
  font-size: .85em;
  margin-top: 175px;
  color: #fff;
  font-weight: 900;
  cursor: pointer;
  padding: 10px 15px;
  border-radius: 5px;
  background-color: #333;
  text-align: center;
  display: inline-block;
}

.sourcetitle:hover, .universal-source-button:hover {
  background-color: var(--clr-accent);
}

.source {
  font-size: 1em;
  color: #333;
  line-height: 1.2em;
  display: none;
}

.source > a:link,
.source > a:hover,
.source > a:active {
  color: #333 !important;
}

/* Side Nav */
.sideNav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #f6f5f5;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
  box-shadow: none;
}

.sideNav.active {
  width: 250px;
  box-shadow: inset -20px 0 30px rgba(0, 0, 0, 0.7);
}

.sideNav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: .75em;
  line-height: 1.25em;
  color: var(--clr-primary);
  display: block;
  transition: 0.3s;
}

.sideNav a:hover {
  color: var(--clr-accent);
}

.sideNav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: var(--mfont);
  margin-left: 50px;
  color: var(--clr-primary);
  cursor: pointer;
}

#main {
  transition: margin-left .5s;
  /* padding: 16px; */
}

.sideNavOpen {
  font-size: var(--mfont);
  cursor: pointer;
}

.sideNav ul {
  padding-left: 0;
  margin-left: 0;
}

.sideNav ul li {
  padding-left: 0;
  margin-left: 0;
}

.sideNav ul li::before {
  content: none !important;
  display: none !important;
}

.back-to-top {
  display: inline-block;
  margin-top: 20px;
  padding: 10px 15px;
  background-color: #111;
  color: white;
  text-decoration: none;
  border-radius: 5px;
  transition: background-color 0.3s;
  text-align: right;
}

.back-to-top-container {
  text-align: right;
}

.back-to-top:hover {
  background-color: #333;
}

/* Conversation START */

.convo-bg {
  background-color: var(--clr-primary);
  border-radius: 5px;
  padding: 30px;
}
.convo-l,
.convo-r {
  /* border: 2px solid #dedede; */
  background-color: #f1f1f1;
  border-radius: 15px;
  padding: 10px;
  margin: 10px 0;
}

.darker {
  /* border-color: #8aa9d0; */
  background-color: #b7d3f7;
}

.convo-l::after,
.convo-r::after {
  content: "";
  clear: both;
  display: table;
}

.convo-l img,
.convo-r img {
  float: left;
  max-width: 100px;
  width: 100%;
  margin-right: 20px;
  border-radius: 50%;
  border: 1px solid var(--clr-primary);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), 0 6px 20px rgba(0, 0, 0, 0.2);
}

.convo-r img {
  float: right;
  margin-left: 20px;
  margin-right: 0;
}
/* .convo img.right {
  float: right;
  margin-left: 20px;
  margin-right:0;
} */

.time-right {
  float: right;
  color: #aaa;
}

.time-left {
  float: left;
  color: #999;
}
/* Conversation END */

/* Colur Backgrounds START*/

.primary {
  color: var(--clr-white);
  background-color: var(--clr-primary);
}
.secondary {
  color: var(--clr-white);
  background-color: var(--clr-secondary);
}
.tertiary {
  color: var(--clr-primary);
  background-color: var(--clr-tertiary);
}
.accent {
  color: var(--clr-white);
  background-color: var(--clr-accent);
}
.green {
  color: var(--clr-white);
  background-color: var(--clr-final);
}
.padding-10 {
  padding: 10px;
}
.padding-20 {
  padding: 20px;
}
/* Colur Backgrounds END*/
/* Banner for Open Entry START */
.dishid {
  position: relative;
  overflow: hidden;
  max-width: 1080px;
  height: auto;
  margin: auto;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
}

.banner-image {
  grid-column: 1 / -1;
  grid-row: 1;
  width: 100%;
  height: auto;
  z-index: 1;
}

.grid-overlay {
  grid-column: 1 / -1;
  /* grid-column-gap: 5px; */
  grid-row: 1;
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: repeat(var(--total-pages), minmax(50px, 1fr));
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
  overflow-x: auto;
  white-space: nowrap;
}

.grid-cell {
  overflow: hidden;
  background-color: rgba(255, 255, 255, 0);
  transition: background-color 0.3s ease;
  position: relative;
  flex-shrink: 0;
  border: 1px solid rgb(255, 255, 255);
}

.textDropshadowBig {
  position: absolute;
  top: 10px;
  right: 10px;
  font-weight: bolder;
  font-size: 16px;
}

/* Future pages */
.future-page .textDropshadowBig {
  color: #dd2938;
}

/* Current and visited pages */
.visited-page .textDropshadowBig {
  color: #ffffff;
  text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.5);
}

/* Banner for Open Entry END */
/* Separate Progressive Banner  START*/
#separateProgBanner {
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
  justify-content: center;
  align-items: center;
  margin: 1em 0;
  overflow-x: auto;
}

/* make each step a flex item that can shrink */
#separateProgBanner .step {
  position: relative;
  flex: 1 1 auto;
  max-width: 120px;
}

/* fluid image with fade */
#separateProgBanner .step img {
  width: 100%;
  height: auto;
  opacity: 0.25;
  transition: opacity 0.25s ease-in-out;
}

/* full-opacity once visited */
#separateProgBanner .step.visited img {
  opacity: 1;
}

/* top-right number badge */
#separateProgBanner .step .step-number {
  position: absolute;
  top: 5px;
  right: 10px;
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  font-size: 0.75rem;
  font-weight: bold;
  color: white;
  background-color: var(--clr-primary);
  border-radius: 50%;
  pointer-events: none;
}

/* badge colour once visited */
#separateProgBanner .step.visited .step-number {
  background-color: var(--clr-accent);
}

/* Separate Progressive Banner  END*/
/* -- */
/* Timeline Banner based START */
.timeline-container-modules,
.timeline-container-alt {
  position: relative;
}

.background-line-modules,
.background-line-alt {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: 2px;
  background-color: #dd2938;
  z-index: 0;
}

.circle-modules,
.circle-alt {
  position: relative;
  z-index: 1;
}

.timeline-banner {
  position: relative;
  max-width: 1080px;
  margin: auto;
  display: block;
}

.image-overlay-tl {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(var(--grid-cols, 1), 1fr);
  pointer-events: none;
  z-index: 1;
}

.timeline-banner img {
  display: block;
  width: 100%;
  height: auto;
  z-index: 0;
}

.tl-grid-cell {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  font-size: 1rem;
  font-weight: bold;
  border: 1px solid var(--clr-off-white);
  padding: 10px;
  box-sizing: border-box;
  position: relative; /* Establish positioning context for pseudo-elements */
  transition: background-color 0.3s ease, color 0.3s ease, text-shadow 0.3s ease;
}

/* Overlay for the entire cell */
.tl-grid-cell::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  background-color: rgba(255, 255, 255, 0);
  transition: background-color 0.3s ease;
}

/* Circle behind the text */
.tl-grid-cell::before {
  content: '';
  position: absolute;
  top: 10px;
  right: 10px;
  width: 1.5em;
  height: 1.5em;
  border-radius: 50%;
  z-index: 1;
  transition: background-color 0.3s ease;
}

/* Overlay for completed cells */
.tl-grid-cell.completed::after {
  background-color: rgba(0, 0, 0, 0.1);
}

/* Circle for completed cells */
.tl-grid-cell.completed::before {
  background-color: var(--clr-accent);
}

/* Overlay for active cells */
.tl-grid-cell.active::after {
  background-color: rgba(255, 255, 255, 0.75);
}

/* Circle for active cells */
.tl-grid-cell.active::before {
  background-color: var(--clr-primary);
}

/* Text styling for completed cells */
.tl-grid-cell.completed span {
  color: white;
  /* text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.75); */
}

/* Text styling for active cells */
.tl-grid-cell.active span {
  color: var(--clr-white);
  text-shadow: none;
}

/* General text styling */
.tl-grid-cell span {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 1.5em;
  height: 1.5em;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.grayscale {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* Timeline Banner based END */
/* -- */
/* Timeline Term based START */

.timeline-image {
  position: relative;
  width: 100%;
  height: auto;
}

.timeline-sections {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
}

.timeline-sections .section {
  flex: 1;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid red;
}

.timeline-sections .section.visited {
  opacity: 1;
  background-color: lightgreen;
}

.timeline-sections .section.current {
  border: 2px solid red;
  opacity: 1;
  background-color: yellow;
}

.timeline-sections .section.upcoming {
  opacity: 0.5;
  background-color: lightgrey;
}
/* Open Entry Timeline START */
.timeline-container-alt {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  overflow-x: auto;
  white-space: nowrap;
  max-width: 1024px;
  margin: 0 auto;
}

.timeline-step-alt {
  position: relative;
  display: flex;
  align-items: center;
  flex-grow: 1;
  justify-content: center;
}

.circle-alt {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  font-size: 16px;
  color: #fff;
  background-color: #dd2938;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border: 2px solid transparent;
  z-index: 2;
  cursor: default;
}

.circle-alt:not(.current-page-alt):hover {
  transform: scale(1.1);
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
}

.circle-alt:not(.current-page-alt):hover::after {
  content: "";
  position: absolute;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid #dd2938;
  opacity: 0;
  animation: pulse 1.5s infinite ease-in-out;
  pointer-events: none;
}

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.25);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}

.current-page-alt {
  width: 40px;
  height: 40px;
  font-size: 18px;
  transform: scale(1.2);
  background-color: #ffffff;
  color: #dd2938;
  border: 2px solid #dd2938;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.25);
}

.visited-page-alt {
  background-color: #ffffff;
  color: #dd2938;
  border: 2px solid #dd2938;
}

.line-alt {
  flex-grow: 2;
  height: 2px;
  background-color: #dd2938;
  z-index: 1;
}

.background-line-alt {
  position: absolute;
  top: 50%;
  height: 2px;
  background-color: #dd2938;
  z-index: 0;
  transform: translateY(-50%);
}
/* Open Entry Timeline END */
/* Timeline One of START */
/* General container styling */
.module-progress-new {
  margin: 10px auto;
  padding: 5px 10px;
  background: #f0f0f0;
  border-radius: 8px;
  font-family: 'Arial', sans-serif;
  text-align: center;
  max-width: 600px;
  font-size: 14px;
}

/* Inline progress and proximity text */
.progress-line-new {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
}

.progress-text-new {
  font-weight: bold;
  font-size: 18px;
  color: #333;
}

.proximity-text-new {
  font-style: italic;
  color: #666;
}

/* Timeline One of END */
/* START */
.container-icon-box {
  position: relative;
  width: 650px;
  margin: 50px auto;
}
.box-title {
  font-size: larger;
  font-weight: bolder;
  text-align: left;
}
.box-subtitle {
  color: var(--clr-accent);
  text-align: left;
}
.content-box {
  background-color: #ffffff;
  border-radius: 40px;
  box-shadow: 0 0px 60px rgba(0, 0, 0, 0.3);
  padding: 30px;
  padding-left: 45px;

  text-align: left;
}
.content-box h3 {
  color: var(--clr-primary);
}

.icon-box {
  position: absolute;
  top: 50%;
  left: -10%;
  transform: translateY(-50%);
  background-color: #ffffff;
  border: 2px solid black;
  border-radius: 20px;
  width: 90px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

.icon {
  width: 50px;
  height: 50px;
}

/* END */

/* Module Timeline START */

/* Ensure the image is full width */
.banner-image {
  position: relative;
  margin: 0 auto;
}
.banner-image img {
  display: block;
  width: 100%;
  height: auto;
}
/* Banner Image with red bar START */
.banner-image h2 {
  border-bottom: 0px solid var(--clr-primary);
  position: absolute;
  top: 0px;
  left: 0;
  right: 0;
  margin: 0;
  padding: 0;
  background-color: var(--clr-accent);
  color: #fff;
  text-align: center;
  z-index: 2;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
  -webkit-background-clip: border-box;
}
/* Banner Image with red bar END */

/* Full-width timeline, centered */
.timeline-container-modules {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;

  padding-top: 0;
  padding: 0 0;
  width: 100%;
  box-sizing: border-box;
  flex-wrap: wrap;
  margin-top: -25px;
}

/* Ensure full-width alignment and add spacing between rows */
.timeline-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  position: relative;
  z-index: 2;
  flex-wrap: wrap;
  margin-bottom: 5px;
}

/* Step container */
.step-container {
  position: relative;
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Timeline circles */
.circle-modules {
  font-size: 16px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: var(--clr-accent);
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  position: relative;
  z-index: 2;
}

/* Line connecting to next circle */
.line-alt {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 2px;
  background-color: var(--clr-accent);
  transform: translateY(-50%);
  z-index: 1;
}

/* Hide line for last step */
.step-container:last-child .line-alt {
  display: none;
}

/* Highlight current step */
.current-module {
  width: 40px;
  height: 40px;
  font-size: 18px;
  background-color: white;
  color: var(--clr-accent);
  border: 2px solid var(--clr-accent);
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.25);
  transform: scale(1.1);
  z-index: 3;
}

/* Visited step */
.visited-module {
  background-color: #ffffff;
  color: var(--clr-accent);
  border: 2px solid var(--clr-accent);
}

/* Tooltip Styling */
.tooltip {
  visibility: hidden;
  background-color: var(--clr-primary, #2c3e50);
  color: white;
  text-align: center;
  padding: 5px;
  border-radius: 5px;
  border: 2px solid var(--clr-white, #ffffff);
  position: absolute;
  bottom: 110%;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 12px;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.circle-modules:hover .tooltip {
  visibility: visible;
  opacity: 1;
}

/* Module Timeline END */

/* Image filld width START */
.full-bleed-wrapper {
  position: relative !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  overflow: hidden;
}
/* Full-bleed image spanning the full viewport width */
.img-full-page {
  display: block;
  width: 100vw;
  height: auto;
  margin: 0;
  padding: 0;
  z-index: 0;
}
/* Overlay container with a 50% black background */
.img-full-txt-dark {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  /* display: flex; */
  align-items: center;
  justify-content: center;
  color: #fff;
  /* text-align: center; */
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  padding: 2rem;
  box-sizing: border-box;
  background-color: rgba(0, 0, 0, 0.5) !important;
}
.img-full-txt-light {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  /* display: flex; */
  align-items: center;
  justify-content: center;
  color: var(--clr-primary);
  /* text-align: center; */
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  padding: 2rem;
  box-sizing: border-box;
  background-color: rgba(255, 255, 255, 0.5) !important;
}
.blur-10 {
  filter: blur(10px);
  -webkit-filter: blur(10px);
}
/* Remove text-shadow if previously set */
.img-full-txt p {
  margin: 0;
  text-shadow: none;
}
/* Image filld width END */

/* Modal START */
/* Hide the modal content containers */
.hidden-modal {
  display: none !important;
}

/* Modal overlay covers the entire viewport */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(255, 255, 255, 0.75);
  z-index: 10000;
}

/* Modal container styling */
.modal-container {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  padding: 1rem;
  background: #fff;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.37);
  border-radius: 10px;
  border: 2px solid #212121;
  z-index: 9999;
}

/* Modal trigger styling (restore your theme's styling if desired) */
.open-modal {
  cursor: pointer;
}

/* Close button styling */
.modal-close {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background: transparent;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: #dd2938;
}
/* Modal END */

/* Adjustable column widths for .cont-r */
.col-l15-r85 {
  grid-template-columns: 15% 85%;
}
.col-l20-r80 {
  grid-template-columns: 20% 80%;
}
.col-l25-r75 {
  grid-template-columns: 25% 75%;
}
.col-l30-r70 {
  grid-template-columns: 30% 70%;
}
.col-l35-r65 {
  grid-template-columns: 35% 65%;
}
.col-l40-r60 {
  grid-template-columns: 40% 60%;
}
.col-l45-r55 {
  grid-template-columns: 45% 55%;
}
.col-l50-r50 {
  grid-template-columns: 50% 50%;
}
.col-l55-r45 {
  grid-template-columns: 55% 45%;
}
.col-l60-r40 {
  grid-template-columns: 60% 40%;
}
.col-l65-r35 {
  grid-template-columns: 65% 35%;
}
.col-l70-r30 {
  grid-template-columns: 70% 30%;
}
.col-l75-r25 {
  grid-template-columns: 75% 25%;
}
.col-l80-r20 {
  grid-template-columns: 75% 25%;
}
.col-l85-r15 {
  grid-template-columns: 75% 25%;
}

/* Red line */
.cont-r.lineV.col-l15-r85::after {
  left: calc(15% + 12.5px);
}
.cont-r.lineV.col-l20-r80::after {
  left: calc(20% + 12.5px);
}
.cont-r.lineV.col-l25-r75::after {
  left: calc(25% + 12.5px);
}
.cont-r.lineV.col-l30-r70::after {
  left: calc(30% + 12.5px);
}
.cont-r.lineV.col-l35-r65::after {
  left: calc(35% + 12.5px);
}
.cont-r.lineV.col-l40-r60::after {
  left: calc(40% + 12.5px);
}
.cont-r.lineV.col-l45-r55::after {
  left: calc(45% + 12.5px);
}
.cont-r.lineV.col-l50-r50::after {
  left: calc(50% + 12.5px);
}
.cont-r.lineV.col-l55-r45::after {
  left: calc(55% + 12.5px);
}
.cont-r.lineV.col-l60-r40::after {
  left: calc(60% + 12.5px);
}
.cont-r.lineV.col-l65-r35::after {
  left: calc(65% + 12.5px);
}
.cont-r.lineV.col-l70-r30::after {
  left: calc(70% + 12.5px);
}
.cont-r.lineV.col-l75-r25::after {
  left: calc(75% + 12.5px);
}
.cont-r.lineV.col-l80-r20::after {
  left: calc(80% + 12.5px);
}
.cont-r.lineV.col-l85-r15::after {
  left: calc(80% + 12.5px);
}

/* Homepage Columns START */
/* Homepage grid container – no extra horizontal padding */

.homePage .card-three .side-l img {
  width: 100% !important;
  height: 150px !important;
  object-fit: cover;
  object-position: center;
}
.homepage-col {
  display: grid;
  gap: 25px;
  padding: 0 15px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
}

/* Allow grid children to shrink */
.homepage-col > * {
  padding: 10px;
  min-width: 0;
}

.homepage-col.lineV::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background-color: var(--clr-accent);
}
/* .homepage-col > div {
            padding: 10px;
            border: 1px solid #ccc;
          } */
/* .homepage-col {
    display: flex;
    flex-wrap: nowrap; 
    gap: 25px;
  }
  
  .homepage-col > * {
    flex: 1 1 0;  
    min-width: 0; 
  } */
/* Homepage Columns END */
/* Red line Homepage*/

/* Adjustable column rules for homepage-col */

.homepage-col.lineV.col-l15-r85::after {
  left: calc(15% + 12.5px - 12px);
}
.homepage-col.lineV.col-l20-r80::after {
  left: calc(20% + 12.5px - 12px);
}
.homepage-col.lineV.col-l25-r75::after {
  left: calc(25% + 12.5px - 12px);
}
.homepage-col.lineV.col-l30-r70::after {
  left: calc(30% + 12.5px - 12px);
}
.homepage-col.lineV.col-l35-r65::after {
  left: calc(35% + 12.5px - 12px);
}
.homepage-col.lineV.col-l40-r60::after {
  left: calc(40% + 12.5px - 12px);
}
.homepage-col.lineV.col-l45-r55::after {
  left: calc(45% + 12.5px - 12px);
}
.homepage-col.lineV.col-l50-r50::after {
  left: calc(50% + 12.5px - 12px);
}
.homepage-col.lineV.col-l55-r45::after {
  left: calc(55% + 12.5px - 12px);
}
.homepage-col.lineV.col-l60-r40::after {
  left: calc(60% + 12.5px - 12px);
}
.homepage-col.lineV.col-l65-r35::after {
  left: calc(65% + 12.5px - 12px);
}
.homepage-col.lineV.col-l70-r30::after {
  left: calc(70% + 12.5px - 12px);
}
.homepage-col.lineV.col-l75-r25::after {
  left: calc(75% + 12.5px - 12px);
}
.homepage-col.lineV.col-l80-r20::after {
  left: calc(80% + 12.5px - 12px);
}
.homepage-col.lineV.col-l85-r15::after {
  left: calc(85% + 12.5px - 12px);
}

/* Slideshow START */
* {
  box-sizing: border-box;
}
body {
  font-family: Verdana, sans-serif;
  margin: 0;
}
/* Wrapper centers the slideshow and adds horizontal padding for arrows */
.slideshow-wrapper {
  position: relative;
  max-width: calc(1000px + 120px);
  margin: 0 auto;
  padding: 0 60px;
  overflow: visible;
}
/* The slideshow container is 1000px wide and clips slide overflow */
.slideshow-container {
  width: 1000px;
  position: relative;
  margin: auto;
  overflow: hidden;
}
/* Each slide is absolutely positioned within the container */
.simpleSlide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  visibility: hidden;
  transform: translateX(0);
  transition: transform 0.6s ease-in-out, opacity 0.6s ease-in-out;
  z-index: 0;
}
.simpleSlide.active {
  opacity: 1;
  visibility: visible;
  z-index: 1;
}
/* Navigation arrows as plain black text with explicit dimensions */
.prev,
.next {
  position: absolute;
  top: 50%;
  width: 30px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  font-size: 18px;
  color: var(--clr-accent);
  background: none;
  border: none;
  cursor: pointer;
  z-index: 10;
  user-select: none;
  transform: translateY(-50%);
}
/* Left arrow: positioned so its right edge is 20px left of the container */
.prev {
  left: 10px; /* Because wrapper padding is 60px, 60 - 20 - 30 = 10px */
}
/* Right arrow: positioned so its left edge is 20px right of the container */
.next {
  left: calc(60px + 1000px + 20px);
}
/* Dot indicators */
.dot {
  cursor: pointer;
  height: 10px;
  width: 10px;
  margin: 0 2px;
  background-color: var(--clr-accent-light);
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}
.dot.active,
.dot:hover {
  background-color: var(--clr-select);
}
/* Caption text */
/* .text {
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
} */
/* Number text */
.numbertext {
  position: absolute;
  top: 0;
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
}
@media only screen and (max-width: 300px) {
  .prev,
  .next,
  .text {
    font-size: 11px;
  }
}
/* Slideshow END */

/* link icons */
/* [href$=".html"]::after{
  content: url(/shared/online/img/icons/html.svg);
} */
/* Broken Links START */
.broken-link {
  outline: 3px solid red;
  animation: pulseOutline 1s infinite;
  padding: 5px;
}

@keyframes pulseOutline {
  0% {
    outline-color: red;
  }
  50% {
    outline-color: yellow;
  }
  100% {
    outline-color: red;
  }
}

/* Broken Links END */
/* Click text */
.text-click-reveal {
 
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  cursor: pointer;
  text-decoration: underline;
  color: #0000EE;
}

/* Optional: Hover effect */
.text-click-reveal:hover {
  text-decoration: none;
  color: #0000aa;
}
/* Click to reveal START */

/* Style for toggle links */
a.toggle-link {
  display: inline-block;
  margin: 1em 0;
  font-size: 1em;
  text-decoration: underline;
  cursor: pointer;
}

.toggle-link {
  display: inline-block;
  margin: 1em 0;
  font-size: 1em;
  text-decoration: underline;
  cursor: pointer;
}

/* Style for the hidden content panels */
.content-reveal {
  display: none;
  /* background-color: rgb(244, 249, 252); */
  padding: 1em;
  border: 1px dashed #a6a6a6;
  border-radius: 4px;
}

/* When aria-hidden="false", display the content */
.content-reveal[aria-hidden="false"] {
  display: block;
}
/* Click to reveal END */

/* Clicable image with text START */

/* 1) Center & establish the positioning context */
.image-clickable-wrapper {
  text-align: center;
  position: relative;
}

/* 2) The diagram + buttons container */
.container-clickable {
  position: relative;
  display: inline-block;
}
.container-clickable img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* 3) Hot-spot buttons (inline top/left) */
.button-clickable {
  position: absolute;
  width: 30px;
  height: 30px;
  background: #28a745;
  color: white;
  font-size: 1.2rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
}

/* 4) Pop-up panels: now positioned against the *wrapper* */
.content-clickable {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 1rem;
  width: 90%;
  max-width: 800px;
  background: rgba(255, 255, 255, 0.95);
  padding: 1rem;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
  z-index: 10;
  text-align: left;
}

.content-clickable .close {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background: transparent;
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  color: #555;
}
/* Clicable image with text END */
/* img, iframe {
  max-width: 100%;
  height: auto;
  display: block;
} */
/*! Video Chapter and Segment ************* START */

:root {
  --clr-text: #ffffff;
  --clr-text-muted: #a3a3a3;
  --clr-bg-overlay: rgba(0, 0, 0, 0.8);
  --clr-bg-subtle: rgba(0, 0, 0, 0.1);
  --border-radius: 8px;
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-lg: 16px;
  --spacing-xl: 24px;
  --transition: all 0.3s ease;
}

* {
  box-sizing: border-box;
}

/* body {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          Oxygen, Ubuntu, Cantarell, sans-serif;
        background: #f5f5f5;
        margin: 0;
        padding: var(--spacing-xl);
        line-height: 1.5;
      } */

.mvp-video-section {
  text-align: center;
  max-width: 700px;
  margin: 0 auto var(--spacing-xl) auto;
}

.mvp-video-section .mvp-video-container {
  margin-left: auto;
  margin-right: auto;
}

.mvp-video-container {
  position: relative;
  max-width: 640px;
  margin: 0 auto var(--spacing-xl) auto;
  background: white;
  border-radius: var(--border-radius);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
  overflow: hidden;
  transition: var(--transition);
}

.mvp-video-container:hover {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.mvp-player-wrapper {
  position: relative;
  background: var(--clr-primary);
  height: 360px;
}

.mvp-video-footer-bg {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0;
  background: linear-gradient(to top, var(--clr-bg-overlay), transparent);
  transition: var(--transition);
  z-index: 1;
  pointer-events: none;
}

.mvp-video-container:hover .mvp-video-footer-bg,
.mvp-video-container.mvp-show-content .mvp-video-footer-bg {
  height: 60px;
}

.mvp-video-overlay {
  position: absolute;
  bottom: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-lg);
  z-index: 2;
  pointer-events: none;
  gap: var(--spacing-md);
}

.mvp-playback-controls {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  position: relative;
}

.mvp-volume-control {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  opacity: 0;
  transition: var(--transition);
  pointer-events: none;
}

.mvp-video-container:hover .mvp-volume-control,
.mvp-video-container.mvp-show-content .mvp-volume-control {
  opacity: 1;
  pointer-events: all;
}

.mvp-volume-btn {
  width: 32px;
  height: 32px;
  border: none;
  background: var(--clr-primary);
  color: var(--clr-text);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  transition: var(--transition);
}

.mvp-volume-btn:hover {
  background: var(--clr-secondary);
  transform: scale(1.05);
}

.mvp-cc-btn {
  width: 32px;
  height: 32px;
  border: none;
  background: var(--clr-primary);
  color: var(--clr-text);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  opacity: 0;
  transition: var(--transition);
  pointer-events: none;
}

.mvp-cc-btn:hover {
  background: var(--clr-secondary);
  transform: scale(1.05);
}

.mvp-cc-btn.active {
  background: var(--clr-accent);
  color: white;
}

.mvp-video-container:hover .mvp-cc-btn,
.mvp-video-container.mvp-show-content .mvp-cc-btn {
  opacity: 1;
  pointer-events: all;
}

.mvp-volume-slider-container {
  position: relative;
  display: flex;
  align-items: center;
}

.mvp-volume-slider {
  width: 0;
  height: 4px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
  opacity: 0;
  transition: all 0.3s ease;
  -webkit-appearance: none;
  appearance: none;
  overflow: hidden;
}

.mvp-volume-control:hover .mvp-volume-slider {
  width: 60px;
  opacity: 1;
  margin-left: var(--spacing-xs);
}

.mvp-volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 12px;
  background: var(--clr-text);
  border-radius: 50%;
  cursor: pointer;
  transition: var(--transition);
}

.mvp-volume-slider::-webkit-slider-thumb:hover {
  background: var(--clr-accent);
  transform: scale(1.1);
}

.mvp-volume-slider::-moz-range-thumb {
  width: 12px;
  height: 12px;
  background: var(--clr-text);
  border-radius: 50%;
  cursor: pointer;
  border: none;
  transition: var(--transition);
}

.mvp-volume-slider::-moz-range-track {
  height: 4px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 2px;
  border: none;
}

.mvp-play-pause-btn {
  width: 40px;
  height: 40px;
  border: none;
  background: var(--clr-primary);
  color: var(--clr-text);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: var(--transition);
  pointer-events: none;
  font-size: 14px;
}

.mvp-play-pause-btn:hover {
  background: var(--clr-secondary);
  transform: scale(1.05);
}

.mvp-video-container:hover .mvp-play-pause-btn,
.mvp-video-container.mvp-show-content .mvp-play-pause-btn {
  opacity: 1;
  pointer-events: all;
}

.mvp-video-container:hover .video-overlay,
.mvp-video-container.mvp-show-content .mvp-video-overlay {
  pointer-events: all;
}

.mvp-custom-scrubber {
  flex: 1;
  margin-right: var(--spacing-lg);
  height: 6px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
  outline: none;
  cursor: pointer;
  opacity: 0;
  transition: var(--transition);
  pointer-events: none;
  -webkit-appearance: none;
  appearance: none;
}

.mvp-custom-scrubber::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  background: var(--clr-accent);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  transition: var(--transition);
}

.mvp-custom-scrubber::-webkit-slider-thumb:hover {
  transform: scale(1.1);
}

.mvp-custom-scrubber::-moz-range-thumb {
  width: 18px;
  height: 18px;
  background: var(--clr-accent);
  border-radius: 50%;
  cursor: pointer;
  border: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  transition: var(--transition);
}

.mvp-custom-scrubber::-moz-range-track {
  height: 6px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
  border: none;
}

.mvp-video-container:hover .mvp-custom-scrubber,
.mvp-video-container.mvp-show-content .mvp-custom-scrubber {
  opacity: 1;
  pointer-events: all;
}

.mvp-toggle-content {
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: 0.875rem;
  font-weight: 500;
  border: none;
  background: var(--clr-primary);
  color: var(--clr-text);
  border-radius: var(--spacing-xs);
  cursor: pointer;
  opacity: 0;
  transition: var(--transition);
  pointer-events: none;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.mvp-toggle-content:hover {
  background: var(--clr-secondary);
  border-color: var(--clr-accent);
}

.mvp-video-container:hover .mvp-toggle-content,
.mvp-video-container.mvp-show-content .mvp-toggle-content {
  opacity: 1;
  pointer-events: all;
}

.mvp-content-buttons {
  display: none;
  padding: var(--spacing-lg) var(--spacing-xl);
  background: white;
  border-top: 1px solid #e5e5e5;
  transition: var(--transition);
}

.mvp-video-container.mvp-show-content .mvp-content-buttons {
  display: block;
}

.mvp-content-button {
  margin: var(--spacing-xs) var(--spacing-sm) var(--spacing-xs) 0;
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: 0.875rem;
  font-weight: 500;
  border: 2px solid var(--clr-primary);
  background: white;
  color: var(--clr-primary);
  border-radius: var(--spacing-xs);
  cursor: pointer;
  transition: var(--transition);
  display: inline-block;
}

.mvp-content-button.active {
  background: var(--clr-accent);
  border-color: var(--clr-accent);
  color: white;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.mvp-content-button:hover {
  background: var(--clr-accent);
  border-color: var(--clr-accent);
  color: white;
  transform: translateY(-1px);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.mvp-content-button:active {
  transform: translateY(0);
}

.mvp-video-source {
  position: absolute;
  top: var(--spacing-md);
  left: var(--spacing-md);
  background: var(--clr-bg-overlay);
  color: var(--clr-text);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--spacing-xs);
  font-size: 0.75rem;
  font-weight: 500;
  opacity: 0;
  transition: var(--transition);
  z-index: 3;
}

.mvp-video-timestamp {
  position: absolute;
  bottom: var(--spacing-lg);
  left: var(--spacing-lg);
  right: calc(var(--spacing-lg) + 120px);
  text-align: center;
  background: rgba(0, 0, 0, 0.6);
  color: var(--clr-text);
  padding: var(--spacing-xs);
  border-radius: var(--spacing-xs);
  font-size: 0.75rem;
  font-weight: 500;
  opacity: 0;
  transition: var(--transition);
  font-family: monospace;
  white-space: nowrap;
  transform: translateY(12px);
}

.mvp-video-container:hover .mvp-video-source,
.mvp-video-container.mvp-show-content .mvp-video-source,
.mvp-video-container:hover .mvp-video-timestamp,
.mvp-video-container.mvp-show-content .mvp-video-timestamp {
  opacity: 1;
}

.mvp-platform-indicator {
  position: absolute;
  top: var(--spacing-md);
  right: var(--spacing-md);
  background: var(--clr-bg-overlay);
  color: var(--clr-text);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--spacing-xs);
  font-size: 0.75rem;
  font-weight: 500;
  opacity: 0;
  transition: var(--transition);
  z-index: 3;
}

.mvp-video-container:hover .mvp-platform-indicator,
.mvp-video-container.mvp-show-content .mvp-platform-indicator {
  opacity: 1;
}

.mvp-cc-feedback {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.9);
  color: var(--clr-text);
  padding: var(--spacing-md) var(--spacing-lg);
  border-radius: var(--spacing-sm);
  font-size: 0.875rem;
  font-weight: 500;
  z-index: 10;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  text-align: center;
  max-width: 300px;
  line-height: 1.4;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.mvp-cc-feedback.show {
  opacity: 1;
}

.mvp-cc-feedback.success {
  background: rgba(34, 197, 94, 0.9);
  border-color: rgba(34, 197, 94, 0.3);
}

.mvp-cc-feedback.error {
  background: rgba(239, 68, 68, 0.9);
  border-color: rgba(239, 68, 68, 0.3);
}

@media (max-width: 768px) {
  body {
    padding: var(--spacing-md);
  }

  .mvp-video-container {
    margin-bottom: var(--spacing-lg);
  }

  .mvp-video-overlay {
    padding: var(--spacing-md);
  }

  .mvp-custom-scrubber {
    margin-right: var(--spacing-md);
  }

  .mvp-content-buttons {
    padding: var(--spacing-md);
  }

  .mvp-content-button {
    display: block;
    width: 100%;
    margin: var(--spacing-xs) 0;
  }
}

.mvp-video-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 360px;
  background: var(--clr-primary);
  z-index: 0;
}

.mvp-toggle-content:focus,
.mvp-content-button:focus,
.mvp-custom-scrubber:focus {
  outline: 2px solid var(--clr-accent);
  outline-offset: 2px;
}

/* --- START: Local SVG Video Player Icons --- */

/* A generic class for all video icons to set size and color */
.video-icon {
  display: inline-block;
  width: 15px;
  height: 15px;
  background-color: white;

  /* The following properties use the SVG as a mask (stencil) */
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}

/* Specific classes that assign the correct SVG file to each icon */
.icon-play {
  mask-image: url('/shared/online/img/icons/play.svg');
  -webkit-mask-image: url('/shared/online/img/icons/play.svg');
}

.icon-pause {
  mask-image: url('/shared/online/img/icons/pause.svg');
  -webkit-mask-image: url('/shared/online/img/icons/pause.svg');
}

.icon-cc {
  mask-image: url('/shared/online/img/icons/closed-captioning.svg');
  -webkit-mask-image: url('/shared/online/img/icons/closed-captioning.svg');
}
.icon-volume-high {
  mask-image: url('/shared/online/img/icons/volume-high.svg');
  -webkit-mask-image: url('/shared/online/img/icons/volume-high.svg');
}

.icon-volume-xmark {
  mask-image: url('/shared/online/img/icons/volume-xmark.svg');
  -webkit-mask-image: url('/shared/online/img/icons/volume-xmark.svg');
}
/* --- END: Local SVG Video Player Icons --- */
/* --- START: FINAL TARGETED HOVER FIX --- */

/* 1. Force the controls to be invisible by default using !important */
/* We are excluding .mvp-volume-control because it already works correctly */
.mvp-video-container .mvp-play-pause-btn,
.mvp-video-container .mvp-cc-btn,
.mvp-video-container .mvp-custom-scrubber,
.mvp-video-container .mvp-toggle-content,
.mvp-video-container .mvp-video-source,
.mvp-video-container .mvp-platform-indicator,
.mvp-video-container .mvp-video-timestamp {
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.3s ease;
}

/* 2. Force the controls to be visible on hover */
.mvp-video-container:hover .mvp-play-pause-btn,
.mvp-video-container:hover .mvp-cc-btn,
.mvp-video-container:hover .mvp-custom-scrubber,
.mvp-video-container:hover .mvp-toggle-content,
.mvp-video-container:hover .mvp-video-source,
.mvp-video-container:hover .mvp-platform-indicator,
.mvp-video-container:hover .mvp-video-timestamp,
.mvp-video-container.mvp-show-content .mvp-play-pause-btn,
.mvp-video-container.mvp-show-content .mvp-cc-btn,
.mvp-video-container.mvp-show-content .mvp-custom-scrubber,
.mvp-video-container.mvp-show-content .mvp-toggle-content,
.mvp-video-container.mvp-show-content .mvp-video-source,
.mvp-video-container.mvp-show-content .mvp-platform-indicator,
.mvp-video-container.mvp-show-content .mvp-video-timestamp {
  opacity: 1 !important;
  pointer-events: all !important;
}
/* NEW */

.mvp-title-card-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 10;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.mvp-title-card-overlay.active {
  opacity: 1;
  visibility: visible;
}

.mvp-title-card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 0;
}

.mvp-title-card-controls {
  position: absolute;
  bottom: 16px; /* Bottom positioning */
  left: 16px; /* Left positioning */
  z-index: 11;
}

.mvp-title-card-play-btn {
  width: 30px;
  height: 30px;
  border: none;
  background: var(--clr-primary, rgba(0, 0, 0, 0.8));
  color: var(--clr-text, #ffffff);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  transition: all 0.2s ease;
  border: 2px solid var(--clr-accent);
}

.mvp-title-card-play-btn:hover {
  background: var(--clr-secondary, rgba(0, 0, 0, 0.9));
  transform: scale(1.1);
  border-color: var(--clr-accent, #ffffff);
}

/* Mobile responsive */
@media (max-width: 768px) {
  .mvp-title-card-controls {
    bottom: 12px;
    left: 12px;
  }

  .mvp-title-card-play-btn {
    width: 25px;
    height: 25px;
    font-size: 10px;
  }
}
/* Fullscreen button styling - matches your existing buttons exactly */
.mvp-fullscreen-btn {
  width: 32px;
  height: 32px;
  border: none;
  background: var(--clr-primary);
  color: var(--clr-text);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  opacity: 0;
  transition: var(--transition);
  pointer-events: none;
  font-family: monospace;
}

.mvp-fullscreen-btn:hover {
  background: var(--clr-secondary);
  transform: scale(1.05);
}

.mvp-fullscreen-btn span {
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ADD FULLSCREEN BUTTON TO YOUR EXISTING HOVER SYSTEM */
/* Find this section in your CSS and ADD .mvp-fullscreen-btn to it: */

.mvp-video-container .mvp-play-pause-btn,
.mvp-video-container .mvp-cc-btn,
.mvp-video-container .mvp-custom-scrubber,
.mvp-video-container .mvp-toggle-content,
.mvp-video-container .mvp-video-source,
.mvp-video-container .mvp-platform-indicator,
.mvp-video-container .mvp-video-timestamp,
.mvp-video-container .mvp-fullscreen-btn {
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.3s ease;
}

.mvp-video-container:hover .mvp-play-pause-btn,
.mvp-video-container:hover .mvp-cc-btn,
.mvp-video-container:hover .mvp-custom-scrubber,
.mvp-video-container:hover .mvp-toggle-content,
.mvp-video-container:hover .mvp-video-source,
.mvp-video-container:hover .mvp-platform-indicator,
.mvp-video-container:hover .mvp-video-timestamp,
.mvp-video-container:hover .mvp-fullscreen-btn,
.mvp-video-container.mvp-show-content .mvp-play-pause-btn,
.mvp-video-container.mvp-show-content .mvp-cc-btn,
.mvp-video-container.mvp-show-content .mvp-custom-scrubber,
.mvp-video-container.mvp-show-content .mvp-toggle-content,
.mvp-video-container.mvp-show-content .mvp-video-source,
.mvp-video-container.mvp-show-content .mvp-platform-indicator,
.mvp-video-container.mvp-show-content .mvp-video-timestamp,
.mvp-video-container.mvp-show-content .mvp-fullscreen-btn {
  opacity: 1 !important;
  pointer-events: all !important;
}

/* Fullscreen container and video scaling */
.mvp-video-container:fullscreen {
  width: 100vw !important;
  height: 100vh !important;
  max-width: none !important;
  margin: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  z-index: 9999 !important;
  background: #000 !important;
}

.mvp-video-container:fullscreen .mvp-player-wrapper {
  width: 100vw !important;
  height: 100vh !important;
  position: relative !important;
  display: block !important;
  overflow: hidden !important;
}

.mvp-video-container:fullscreen .mvp-player-wrapper iframe {
  width: 100vw !important;
  height: 100vh !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 1 !important;
  max-width: none !important;
  max-height: none !important;
  min-width: 100vw !important;
  min-height: 100vh !important;
  border: none !important;
  transform: none !important;
}

/* Force YouTube iframes specifically */
.mvp-video-container:fullscreen .mvp-player-wrapper iframe[src*="youtube.com"],
.mvp-video-container:fullscreen .mvp-player-wrapper iframe[src*="youtube-nocookie.com"] {
  width: 100vw !important;
  height: 100vh !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  max-width: none !important;
  max-height: none !important;
  min-width: 100vw !important;
  min-height: 100vh !important;
  border: none !important;
  transform: none !important;
}

/* WebKit fullscreen support */
.mvp-video-container:-webkit-full-screen {
  width: 100vw !important;
  height: 100vh !important;
  max-width: none !important;
  margin: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  z-index: 9999 !important;
  background: #000 !important;
}

.mvp-video-container:-webkit-full-screen .mvp-player-wrapper {
  width: 100vw !important;
  height: 100vh !important;
  position: relative !important;
  display: block !important;
  overflow: hidden !important;
}

.mvp-video-container:-webkit-full-screen .mvp-player-wrapper iframe {
  width: 100vw !important;
  height: 100vh !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 1 !important;
  max-width: none !important;
  max-height: none !important;
  min-width: 100vw !important;
  min-height: 100vh !important;
  border: none !important;
  transform: none !important;
}

/* Force YouTube iframes specifically - WebKit */
.mvp-video-container:-webkit-full-screen .mvp-player-wrapper iframe[src*="youtube.com"],
.mvp-video-container:-webkit-full-screen .mvp-player-wrapper iframe[src*="youtube-nocookie.com"] {
  width: 100vw !important;
  height: 100vh !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  max-width: none !important;
  max-height: none !important;
  min-width: 100vw !important;
  min-height: 100vh !important;
  border: none !important;
  transform: none !important;
}

/* Mozilla fullscreen support */
.mvp-video-container:-moz-full-screen {
  width: 100vw !important;
  height: 100vh !important;
  max-width: none !important;
  margin: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  z-index: 9999 !important;
  background: #000 !important;
}

.mvp-video-container:-moz-full-screen .mvp-player-wrapper {
  width: 100vw !important;
  height: 100vh !important;
  position: relative !important;
  display: block !important;
  overflow: hidden !important;
}

.mvp-video-container:-moz-full-screen .mvp-player-wrapper iframe {
  width: 100vw !important;
  height: 100vh !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 1 !important;
  max-width: none !important;
  max-height: none !important;
  min-width: 100vw !important;
  min-height: 100vh !important;
  border: none !important;
  transform: none !important;
}

/* Force YouTube iframes specifically - Mozilla */
.mvp-video-container:-moz-full-screen .mvp-player-wrapper iframe[src*="youtube.com"],
.mvp-video-container:-moz-full-screen .mvp-player-wrapper iframe[src*="youtube-nocookie.com"] {
  width: 100vw !important;
  height: 100vh !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  max-width: none !important;
  max-height: none !important;
  min-width: 100vw !important;
  min-height: 100vh !important;
  border: none !important;
  transform: none !important;
}

/* Hide content buttons in fullscreen UNLESS they're toggled on */
.mvp-video-container:fullscreen .mvp-content-buttons,
.mvp-video-container:-webkit-full-screen .mvp-content-buttons,
.mvp-video-container:-moz-full-screen .mvp-content-buttons {
  display: none !important;
}

/* BUT show them if the toggle is active */
.mvp-video-container:fullscreen.mvp-show-content .mvp-content-buttons,
.mvp-video-container:-webkit-full-screen.mvp-show-content .mvp-content-buttons,
.mvp-video-container:-moz-full-screen.mvp-show-content .mvp-content-buttons {
  display: block !important;
  position: absolute !important;
  bottom: 100px !important;
  left: 20px !important;
  right: 20px !important;
  background: rgba(0, 0, 0, 0.85) !important;
  padding: 20px !important;
  z-index: 15 !important;
  max-height: 40vh !important;
  overflow-y: auto !important;
  border-radius: 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

/* Custom scrollbar for fullscreen content buttons */
.mvp-video-container:fullscreen.mvp-show-content .mvp-content-buttons::-webkit-scrollbar,
.mvp-video-container:-webkit-full-screen.mvp-show-content .mvp-content-buttons::-webkit-scrollbar,
.mvp-video-container:-moz-full-screen.mvp-show-content .mvp-content-buttons::-webkit-scrollbar {
  width: 6px;
}

.mvp-video-container:fullscreen.mvp-show-content .mvp-content-buttons::-webkit-scrollbar-track,
.mvp-video-container:-webkit-full-screen.mvp-show-content .mvp-content-buttons::-webkit-scrollbar-track,
.mvp-video-container:-moz-full-screen.mvp-show-content .mvp-content-buttons::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
}

.mvp-video-container:fullscreen.mvp-show-content .mvp-content-buttons::-webkit-scrollbar-thumb,
.mvp-video-container:-webkit-full-screen.mvp-show-content .mvp-content-buttons::-webkit-scrollbar-thumb,
.mvp-video-container:-moz-full-screen.mvp-show-content .mvp-content-buttons::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.4);
  border-radius: 3px;
}

.mvp-video-container:fullscreen.mvp-show-content .mvp-content-buttons::-webkit-scrollbar-thumb:hover,
.mvp-video-container:-webkit-full-screen.mvp-show-content .mvp-content-buttons::-webkit-scrollbar-thumb:hover,
.mvp-video-container:-moz-full-screen.mvp-show-content .mvp-content-buttons::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.6);
}

/* Style the content buttons in fullscreen mode */
.mvp-video-container:fullscreen.mvp-show-content .mvp-content-button,
.mvp-video-container:-webkit-full-screen.mvp-show-content .mvp-content-button,
.mvp-video-container:-moz-full-screen.mvp-show-content .mvp-content-button {
  background: rgba(255, 255, 255, 0.08) !important;
  color: rgba(255, 255, 255, 0.9) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 8px !important;
  margin: 6px 8px 6px 0 !important;
  padding: 12px 16px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  transition: all 0.2s ease !important;
  backdrop-filter: blur(5px) !important;
  -webkit-backdrop-filter: blur(5px) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

.mvp-video-container:fullscreen.mvp-show-content .mvp-content-button:hover,
.mvp-video-container:-webkit-full-screen.mvp-show-content .mvp-content-button:hover,
.mvp-video-container:-moz-full-screen.mvp-show-content .mvp-content-button:hover {
  background: rgba(255, 255, 255, 0.15) !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
  color: white !important;
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

.mvp-video-container:fullscreen.mvp-show-content .mvp-content-button.active,
.mvp-video-container:-webkit-full-screen.mvp-show-content .mvp-content-button.active,
.mvp-video-container:-moz-full-screen.mvp-show-content .mvp-content-button.active {
  background: rgba(59, 130, 246, 0.9) !important;
  border-color: rgba(59, 130, 246, 1) !important;
  color: white !important;
  box-shadow: 0 4px 16px rgba(59, 130, 246, 0.4) !important;
  transform: scale(1.05) !important;
}

/* Add a subtle header for the content buttons in fullscreen */
.mvp-video-container:fullscreen.mvp-show-content .mvp-content-buttons::before,
.mvp-video-container:-webkit-full-screen.mvp-show-content .mvp-content-buttons::before,
.mvp-video-container:-moz-full-screen.mvp-show-content .mvp-content-buttons::before {
  content: attr(data-content-type);
  display: block;
  color: rgba(255, 255, 255, 0.7);
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Hide source details in fullscreen */
.mvp-video-container:fullscreen .mvp-video-source-details,
.mvp-video-container:-webkit-full-screen .mvp-video-source-details,
.mvp-video-container:-moz-full-screen .mvp-video-source-details {
  display: none !important;
}

/* Make controls more prominent in fullscreen */
.mvp-video-container:fullscreen .mvp-video-overlay,
.mvp-video-container:-webkit-full-screen .mvp-video-overlay,
.mvp-video-container:-moz-full-screen .mvp-video-overlay {
  padding: var(--spacing-xl);
  z-index: 10 !important;
}

.mvp-video-container:fullscreen .mvp-video-footer-bg,
.mvp-video-container:-webkit-full-screen .mvp-video-footer-bg,
.mvp-video-container:-moz-full-screen .mvp-video-footer-bg {
  height: 80px !important;
  z-index: 9 !important;
}

/* Force controls to be visible in fullscreen */
.mvp-video-container:fullscreen .mvp-play-pause-btn,
.mvp-video-container:fullscreen .mvp-cc-btn,
.mvp-video-container:fullscreen .mvp-custom-scrubber,
.mvp-video-container:fullscreen .mvp-toggle-content,
.mvp-video-container:fullscreen .mvp-video-source,
.mvp-video-container:fullscreen .mvp-platform-indicator,
.mvp-video-container:fullscreen .mvp-video-timestamp,
.mvp-video-container:fullscreen .mvp-fullscreen-btn,
.mvp-video-container:fullscreen .mvp-volume-control,
.mvp-video-container:-webkit-full-screen .mvp-play-pause-btn,
.mvp-video-container:-webkit-full-screen .mvp-cc-btn,
.mvp-video-container:-webkit-full-screen .mvp-custom-scrubber,
.mvp-video-container:-webkit-full-screen .mvp-toggle-content,
.mvp-video-container:-webkit-full-screen .mvp-video-source,
.mvp-video-container:-webkit-full-screen .mvp-platform-indicator,
.mvp-video-container:-webkit-full-screen .mvp-video-timestamp,
.mvp-video-container:-webkit-full-screen .mvp-fullscreen-btn,
.mvp-video-container:-webkit-full-screen .mvp-volume-control,
.mvp-video-container:-moz-full-screen .mvp-play-pause-btn,
.mvp-video-container:-moz-full-screen .mvp-cc-btn,
.mvp-video-container:-moz-full-screen .mvp-custom-scrubber,
.mvp-video-container:-moz-full-screen .mvp-toggle-content,
.mvp-video-container:-moz-full-screen .mvp-video-source,
.mvp-video-container:-moz-full-screen .mvp-platform-indicator,
.mvp-video-container:-moz-full-screen .mvp-video-timestamp,
.mvp-video-container:-moz-full-screen .mvp-fullscreen-btn,
.mvp-video-container:-moz-full-screen .mvp-volume-control {
  opacity: 1 !important;
  pointer-events: all !important;
  z-index: 11 !important;
}
/* FULLSCREEN CONTENT BUTTONS - ADD THIS TO YOUR CSS */
.mvp-video-container:fullscreen.mvp-show-content .mvp-content-buttons {
  display: block !important;
  position: absolute !important;
  bottom: 100px !important;
  left: 20px !important;
  right: 20px !important;
  background: rgba(0, 0, 0, 0.85) !important;
  padding: 20px !important;
  z-index: 15 !important;
  max-height: 40vh !important;
  overflow-y: auto !important;
  border-radius: 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  backdrop-filter: blur(10px) !important;
}

.mvp-video-container:fullscreen.mvp-show-content .mvp-content-button {
  background: rgba(255, 255, 255, 0.08) !important;
  color: rgba(255, 255, 255, 0.9) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 8px !important;
  margin: 6px 8px 6px 0 !important;
  padding: 12px 16px !important;
}
/* --- END: FINAL TARGETED HOVER FIX --- */
/*! Video Chapter and Segment ************* END */
/*!  */
/*!  */
/*!  */
/*!  */
/*!  */
/*!  */
/*!  */
/* ? Knowledge Check START */
.quiz-master-container {
  font-family: Arial, sans-serif;
  max-width: 800px;
  margin: 20px auto;
  padding: 20px;
  background-color: #f8f9fa;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
/* .quiz-master-container h2{
  color: #0000ff !important;
} */
.quiz-loading-state {
  text-align: center;
  padding: 40px;
  color: var(--clr-primary);
}

.quiz-error-state {
  text-align: center;
  padding: 40px;
  color: var(--clr-accent);
  background-color: #f8d7da;
  border-radius: 8px;
  border: 1px solid #f5c6cb;
}

.quiz-progress-indicator {
  width: 100%;
  height: 8px;
  background-color: #e9ecef;
  border-radius: 4px;
  margin-bottom: 30px;
  overflow: hidden;
}

.quiz-progress-fill {
  height: 100%;
  background-color: var(--clr-assessment);
  width: 0%;
  transition: width 0.3s ease;
}

.quiz-question-wrapper {
  background-color: var(--clr-white);
  border-radius: 8px;
  padding: 30px;
  margin-bottom: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.5s ease;
}

.quiz-question-wrapper.quiz-active {
  opacity: 1;
  transform: translateY(0);
}

.quiz-question-wrapper.quiz-fade-out {
  opacity: 0;
  transform: translateY(-20px);
}

.quiz-question-title {
  color: var(--clr-primary);
  font-size: 1.3em;
  font-weight: bold;
  margin-bottom: 20px;
  line-height: 1.4;
}

.quiz-options-container {
  margin-bottom: 25px;
}

.quiz-option-item {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  margin-bottom: 10px;
  border: 2px solid #dee2e6;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  background-color: var(--clr-white);
}

.quiz-option-item:hover {
  border-color: var(--clr-accent);
  background-color: #f8f9fa;
}

.quiz-option-item.quiz-selected {
  border-color: var(--clr-accent);
  background-color: #fff5f5;
}

.quiz-option-item.quiz-correct {
  border-color: #28a745;
  background-color: #d4edda;
}

.quiz-option-item.quiz-incorrect {
  border-color: var(--clr-accent);
  background-color: #f8d7da;
}

.quiz-option-input {
  margin-right: 12px;
}

.quiz-option-label {
  color: var(--clr-primary);
  cursor: pointer;
  flex-grow: 1;
}

.quiz-feedback-message {
  padding: 15px;
  border-radius: 6px;
  margin: 15px 0;
  font-weight: 500;
  opacity: 0;
  transform: translateY(-10px);
  transition: all 0.3s ease;
}

.quiz-feedback-message.quiz-show {
  opacity: 1;
  transform: translateY(0);
}

.quiz-feedback-correct {
  background-color: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}

.quiz-feedback-incorrect {
  background-color: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}

.quiz-action-button {
  background-color: var(--clr-accent);
  color: var(--clr-white);
  border: none;
  padding: 12px 24px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 1em;
  font-weight: 500;
  transition: all 0.2s ease;
  margin-right: 10px;
}

.quiz-action-button:hover {
  background-color: #c82333;
  transform: translateY(-1px);
}

.quiz-action-button:disabled {
  background-color: #6c757d;
  cursor: not-allowed;
  transform: none;
}

.quiz-results-summary {
  background-color: var(--clr-white);
  border-radius: 8px;
  padding: 30px;
  text-align: center;
  opacity: 0;
  transform: scale(0.9);
  transition: all 0.5s ease;
}

.quiz-results-summary.quiz-show {
  opacity: 1;
  transform: scale(1);
}

.quiz-completion-title {
  color: var(--clr-primary);
  font-size: 2em;
  margin-bottom: 20px;
}

.quiz-score-display {
  font-size: 1.5em;
  color: var(--clr-accent);
  margin-bottom: 30px;
  font-weight: bold;
}

.quiz-review-section {
  text-align: left;
  margin-top: 30px;
}

.quiz-review-item {
  background-color: #f8f9fa;
  border-radius: 6px;
  padding: 20px;
  margin-bottom: 15px;
  opacity: 0;
  transform: translateX(-20px);
  transition: all 0.3s ease;
}

.quiz-review-item.quiz-animate {
  opacity: 1;
  transform: translateX(0);
}

.quiz-review-question {
  font-weight: bold;
  color: var(--clr-primary);
  margin-bottom: 10px;
}

.quiz-review-answer {
  color: #28a745;
  font-weight: 500;
}

.quiz-restart-button {
  background-color: var(--clr-primary);
  color: var(--clr-white);
  border: none;
  padding: 15px 30px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 1.1em;
  font-weight: 500;
  margin-top: 20px;
  transition: all 0.2s ease;
}

.quiz-restart-button:hover {
  background-color: #333;
  transform: translateY(-1px);
}

@media (max-width: 600px) {
  .quiz-master-container {
    padding: 15px;
  }

  .quiz-question-wrapper {
    padding: 20px;
  }

  .quiz-question-title {
    font-size: 1.1em;
  }
  .quiz-master-container a {
    color: #007bff !important;
    text-decoration: underline !important;
    cursor: pointer !important;
  }

  .quiz-master-container a:hover {
    color: #0056b3 !important;
  }

  .question-html-content a,
  .quiz-review-answer a,
  .quiz-option-label a {
    color: #007bff !important;
    text-decoration: underline !important;
  }
  .quiz-header {
    padding-top: 50px;
    margin: 30px 0 1em 0;
    font-family: var(--font-h1);
    font-size: 1.6em;
    font-weight: bold;
    color: var(--clr-accent);
    text-align: center;
    -webkit-background-clip: text;
  }
  /* Slideshow Specific Styles */
  .quiz-instance .quiz-slideshow-container,
  .quiz-master-container .quiz-slideshow-container {
    background-color: #ffffff !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 8px !important;
    padding: 20px !important;
    margin-bottom: 20px !important;
    width: 100% !important;
    min-height: 350px !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
  }

  .quiz-instance .quiz-slide-content,
  .quiz-master-container .quiz-slide-content {
    flex: 1 !important;
    display: flex !important;
    align-items: stretch !important;
    gap: 20px !important;
    margin-bottom: 20px !important;
    min-height: 250px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .quiz-instance .quiz-slide-text,
  .quiz-master-container .quiz-slide-text {
    flex: 1 !important;
    font-size: 16px !important;
    line-height: 1.6 !important;
    color: #333 !important;
    display: flex !important;
    align-items: center !important;
    padding: 15px !important;
    box-sizing: border-box !important;
  }

  .quiz-instance .quiz-slide-image,
  .quiz-master-container .quiz-slide-image {
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 15px !important;
    box-sizing: border-box !important;
  }

  .quiz-instance .quiz-slide-image img,
  .quiz-master-container .quiz-slide-image img {
    max-width: 100% !important;
    max-height: 100% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    border-radius: 6px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
  }

  .quiz-instance .quiz-slide-navigation,
  .quiz-master-container .quiz-slide-navigation {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding-top: 15px !important;
    border-top: 1px solid #dee2e6 !important;
    flex-shrink: 0 !important;
  }

  .quiz-instance .quiz-slide-counter,
  .quiz-master-container .quiz-slide-counter {
    font-size: 14px !important;
    color: #6c757d !important;
  }

  .quiz-instance .quiz-slide-nav-button,
  .quiz-master-container .quiz-slide-nav-button {
    background-color: #dd2938 !important;
    color: white !important;
    border: none !important;
    padding: 10px 20px !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    font-size: 14px !important;
    transition: background-color 0.2s ease !important;
  }

  .quiz-instance .quiz-slide-nav-button:hover,
  .quiz-master-container .quiz-slide-nav-button:hover {
    background-color: #bc222f !important;
  }

  .quiz-instance .quiz-slide-nav-button:disabled,
  .quiz-master-container .quiz-slide-nav-button:disabled {
    background-color: #6c757d !important;
    cursor: not-allowed !important;
  }

  /* Layout-specific styles */
  .quiz-slide-content.text-only {
    justify-content: center !important;
    align-items: center !important;
  }

  .quiz-slide-content.text-only .quiz-slide-text {
    text-align: center !important;
    max-width: 800px !important;
  }

  .quiz-slide-content.image-only {
    justify-content: center !important;
    align-items: center !important;
  }

  .quiz-slide-content.image-only .quiz-slide-image {
    width: 100% !important;
    max-width: 600px !important;
  }

  .quiz-slide-content.image-left-text-right {
    flex-direction: row !important;
    align-items: stretch !important;
  }

  .quiz-slide-content.text-left-image-right {
    flex-direction: row !important;
    align-items: stretch !important;
  }

  /* Ensure equal width columns for side-by-side layouts */
  .quiz-slide-content.image-left-text-right .quiz-slide-image,
  .quiz-slide-content.image-left-text-right .quiz-slide-text,
  .quiz-slide-content.text-left-image-right .quiz-slide-image,
  .quiz-slide-content.text-left-image-right .quiz-slide-text {
    flex: 1 1 50% !important;
    min-width: 0 !important;
  }

  /* Mobile responsiveness */
  @media (max-width: 768px) {
    .quiz-slide-content.image-left-text-right,
    .quiz-slide-content.text-left-image-right {
      flex-direction: column !important;
      min-height: 400px !important;
    }

    .quiz-slide-content.image-left-text-right .quiz-slide-image,
    .quiz-slide-content.image-left-text-right .quiz-slide-text,
    .quiz-slide-content.text-left-image-right .quiz-slide-image,
    .quiz-slide-content.text-left-image-right .quiz-slide-text {
      flex: 1 1 auto !important;
      min-height: 150px !important;
    }

    .quiz-instance .quiz-slideshow-container,
    .quiz-master-container .quiz-slideshow-container {
      min-height: 450px !important;
    }

    .quiz-instance .quiz-slide-content,
    .quiz-master-container .quiz-slide-content {
      gap: 15px !important;
    }

    .quiz-instance .quiz-slide-text,
    .quiz-master-container .quiz-slide-text,
    .quiz-instance .quiz-slide-image,
    .quiz-master-container .quiz-slide-image {
      padding: 10px !important;
    }
  }
  .quiz-instance .quiz-slide-nav-button.quiz-restart-slide-button,
  .quiz-master-container .quiz-slide-nav-button.quiz-restart-slide-button {
    background-color: #73a800 !important;
  }

  .quiz-instance .quiz-slide-nav-button.quiz-restart-slide-button:hover,
  .quiz-master-container .quiz-slide-nav-button.quiz-restart-slide-button:hover {
    background-color: #5e8600 !important;
  }
}
/* ! Knowledge Check END */

/*! ========================================== */
/*! UNIVERSAL BOX SYSTEM START */
/*! ==========================================  */

/* Base universal box structure */
.universal-box {
  border: 6px solid var(--box-color, var(--clr-primary));
  background-color: var(--clr-white);
  margin-bottom: 20px;
  overflow: hidden;
}

/* Header with icon and title */
.universal-box-header {
  display: flex;
  align-items: center;
  background-color: var(--box-color, var(--clr-primary));
  color: var(--text-color, var(--clr-white));
  padding: 10px;
  font-size: 30px;
  text-align: left;
}

/* Icon in header */
.universal-box-icon {
  width: 50px;
  height: 50px;
  background-color: var(--icon-color, var(--clr-white));
  mask: var(--icon-mask, var(--icon-assessment)) no-repeat center;
  -webkit-mask: var(--icon-mask, var(--icon-assessment)) no-repeat center;
  mask-size: contain;
  -webkit-mask-size: contain;
  margin-right: 10px;
  margin-left: 30px;
  flex-shrink: 0;
}

/* Title text */
.universal-box-title {
  margin: 0;
  font-size: 30px;
  padding-left: 20px;
  color: inherit;
  flex: 1;
}

/* Content area */
.universal-box-content {
  padding: 15px;
  color: var(--clr-primary);
}

/* Remove animations for lists inside boxes */
.universal-box ul > li,
.universal-box ol > li {
  animation: none !important;
  transition: none !important;
  visibility: visible !important;
  opacity: 1 !important;
  transform: none !important;
}
/* ==========================================
   OVERLAPPING ICON BOX (Final)
========================================== */
/* Keep your original box + positioning */
.universal-container-icon-box {
  position: relative;
  width: 650px;
  max-width: 100%;
  margin: 50px auto;
}

.universal-icon-box {
  position: absolute;
  top: 50%;
  left: -10%;
  transform: translateY(-50%);
  background-color: #ffffff;
  border: 2px solid black;
  border-radius: 20px;
  width: 90px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1; /* sits above content to overlap */
}

/* NEW: generic inner icon, OR inner element with icon-universal-* (back-compat) */
.universal-icon-box > .universal-icon,
.universal-icon-box > [class*="icon-universal-"] {
  display: block;
  width: 50px;
  height: 50px;

  /* the icon uses the theme hue */
  color: var(--box-color, var(--clr-primary));
  background-color: currentColor;

  /* mask driven by --icon-mask variable */
  -webkit-mask: var(--icon-mask, var(--icon-assessment)) no-repeat center /
    contain;
  mask: var(--icon-mask, var(--icon-assessment)) no-repeat center / contain;
}

/* Your existing content box styles can stay as-is */
.universal-content-box {
  background-color: #ffffff;
  border-radius: 40px;
  box-shadow: 0 0px 60px rgba(0, 0, 0, 0.3);
  padding: 30px;
  padding-left: 45px;
  text-align: left;
}

/* ==========================================
          UNIVERSAL CASE STUDY
        ========================================== */

/* Base universal box structure */
.universal-case {
  border: 6px solid var(--box-color, var(--clr-primary));
  border-radius: 8px;
  background-color: var(--clr-white);
  margin-bottom: 20px;
  overflow: hidden;
}

/* Header with icon and title */
.universal-case-header {
  display: flex;
  align-items: center;
  background-color: var(--box-color, var(--clr-primary));
  color: var(--text-color, var(--clr-white));
  padding: 10px;
  font-size: 30px;
  text-align: left;
}

/* Icon in header */
.universal-case-icon {
  width: 50px;
  height: 50px;
  background-color: var(--icon-color, var(--clr-white));
  mask: var(--icon-mask, var(--icon-assessment)) no-repeat center;
  -webkit-mask: var(--icon-mask, var(--icon-assessment)) no-repeat center;
  mask-size: contain;
  -webkit-mask-size: contain;
  margin-right: 10px;
  margin-left: 30px;
  flex-shrink: 0;
}

/* Title text */
.universal-case-title {
  margin: 0;
  font-size: 30px;
  padding-left: 20px;
  color: inherit;
  flex: 1;
}

/* Content area */
.universal-case-content {
  padding: 15px;
  color: var(--clr-primary);
}

/* Remove animations for lists inside boxes */
.universal-case ul > li,
.universal-case ol > li {
  animation: none !important;
  transition: none !important;
  visibility: visible !important;
  opacity: 1 !important;
  transform: none !important;
}
/* ==========================================
           COLOR CLASSES - Dark backgrounds (white text)
        ========================================== */

.color-primary {
  --current-color: var(--clr-primary);
      --gradient-color: var(--current-color);
  --box-color: var(--clr-primary);
  --text-color: var(--clr-white);
  --icon-color: var(--clr-white);
}

.color-secondary {
  --current-color: var(--clr-secondary);
      --gradient-color: var(--current-color);
  --box-color: var(--clr-secondary);
  --text-color: var(--clr-white);
  --icon-color: var(--clr-white);
}

.color-accent {
      --current-color: var(--clr-accent);
      --gradient-color: var(--current-color);
  --box-color: var(--clr-accent);
  --text-color: var(--clr-white);
  --icon-color: var(--clr-white);
}

.color-black {
  --current-color: var(--clr-black);
      --gradient-color: var(--current-color);
  --box-color: var(--clr-black);
  --text-color: var(--clr-white);
  --icon-color: var(--clr-white);
}

.color-blue {
  --current-color: var(--clr-blue);
      --gradient-color: var(--current-color);
  --box-color: var(--clr-blue);
  --text-color: var(--clr-white);
  --icon-color: var(--clr-white);
}

.color-blue-dark {
    --current-color: var(--clr-blue-dark);
      --gradient-color: var(--current-color);
  --box-color: var(--clr-blue-dark);
  --text-color: var(--clr-white);
  --icon-color: var(--clr-white);
}

.color-green {
  --current-color: var(--clr-green);
      --gradient-color: var(--current-color);
  --box-color: var(--clr-green);
  --text-color: var(--clr-white);
  --icon-color: var(--clr-white);
}

.color-green-dark {
    --current-color: var(--clr-green-dark);
      --gradient-color: var(--current-color);
  --box-color: var(--clr-green-dark);
  --text-color: var(--clr-white);
  --icon-color: var(--clr-white);
}

.color-yellow-dark {
    --current-color: var(--clr-yellow-dark);
      --gradient-color: var(--current-color);
  --box-color: var(--clr-yellow-dark);
  --text-color: var(--clr-white);
  --icon-color: var(--clr-white);
}

.color-orange {
  --current-color: var(--clr-orange);
      --gradient-color: var(--current-color);
  --box-color: var(--clr-orange);
  --text-color: var(--clr-white);
  --icon-color: var(--clr-white);
}

.color-orange-dark {
    --current-color: var(--clr-orange-dark);
      --gradient-color: var(--current-color);
  --box-color: var(--clr-orange-dark);
  --text-color: var(--clr-white);
  --icon-color: var(--clr-white);
}

.color-pink {
  --current-color: var(--clr-pink);
      --gradient-color: var(--current-color);
  --box-color: var(--clr-pink);
  --text-color: var(--clr-white);
  --icon-color: var(--clr-white);
}

.color-pink-dark {
    --current-color: var(--clr-purple-dark);
      --gradient-color: var(--current-color);
  --box-color: var(--clr-pink-dark);
  --text-color: var(--clr-white);
  --icon-color: var(--clr-white);
}

.color-purple {
  --current-color: var(--clr-purple);
      --gradient-color: var(--current-color);
  --box-color: var(--clr-purple);
  --text-color: var(--clr-white);
  --icon-color: var(--clr-white);
}

.color-purple-dark {
    --current-color: var(--clr-purple-dark);
      --gradient-color: var(--current-color);
  --box-color: var(--clr-purple-dark);
  --text-color: var(--clr-white);
  --icon-color: var(--clr-white);
}

.color-quiz {
  --current-color: var(--clr-quiz);
      --gradient-color: var(--current-color);
  --box-color: var(--clr-quiz);
  --text-color: var(--clr-white);
  --icon-color: var(--clr-white);
}

.color-activity {
  --current-color: var(--clr-activity);
      --gradient-color: var(--current-color);
  --box-color: var(--clr-activity);
  --text-color: var(--clr-white);
  --icon-color: var(--clr-white);
}

.color-mastery {
  --current-color: var(--clr-mastery);
      --gradient-color: var(--current-color);
  --box-color: var(--clr-mastery);
  --text-color: var(--clr-white);
  --icon-color: var(--clr-white);
}

.color-alert {
    --current-color: var(--clr-alert);
      --gradient-color: var(--current-color);
  --box-color: var(--clr-alert);
  --text-color: var(--clr-white);
  --icon-color: var(--clr-white);
}

.color-practice {
    --current-color: var(--clr-practice);
      --gradient-color: var(--current-color);
  --box-color: var(--clr-practice);
  --text-color: var(--clr-white);
  --icon-color: var(--clr-white);
}

/* ==========================================
           COLOR CLASSES - Light backgrounds (dark text)
        ========================================== */

.color-tertiary {
  --current-color: var(--clr-tertiary, #f0f0f0);
      --gradient-color: var(--current-color);
  --box-color: var(--clr-tertiary);
  --text-color: var(--clr-primary);
  --icon-color: var(--clr-primary);
}

.color-blue-light {
  --current-color: var(--clr-blue-light, #add8e6);
      --gradient-color: var(--current-color);
  --box-color: var(--clr-blue-light);
  --text-color: var(--clr-primary);
  --icon-color: var(--clr-primary);
}

.color-green-light {
   --current-color: var(--clr-green-light, #90ee90);
      --gradient-color: var(--current-color);
  --box-color: var(--clr-green-light);
  --text-color: var(--clr-primary);
  --icon-color: var(--clr-primary);
}

.color-yellow {
  --current-color: var(--clr-yellow, #ffeb3b);
      --gradient-color: var(--current-color);
  --box-color: var(--clr-yellow);
  --text-color: var(--clr-primary);
  --icon-color: var(--clr-primary);
}

.color-yellow-light {
  --current-color: var(--clr-yellow-light, #ffff66);
      --gradient-color: var(--current-color);
  --box-color: var(--clr-yellow-light);
  --text-color: var(--clr-primary);
  --icon-color: var(--clr-primary);
}

.color-orange-light {
  --current-color: var(--clr-orange-light, #ffa500);
      --gradient-color: var(--current-color);
  --box-color: var(--clr-orange-light);
  --text-color: var(--clr-primary);
  --icon-color: var(--clr-primary);
}

.color-pink-light {
  --current-color: var(--clr-pink-light, #ffb6c1);
      --gradient-color: var(--current-color);
  --box-color: var(--clr-pink-light);
  --text-color: var(--clr-primary);
  --icon-color: var(--clr-primary);
}

.color-purple-light {
  --current-color: var(--clr-purple-light, #b19cd9);
      --gradient-color: var(--current-color);
  --box-color: var(--clr-purple-light);
  --text-color: var(--clr-primary);
  --icon-color: var(--clr-primary);
}

.color-peach {
  --current-color: var(--clr-peach, #ff9c71);
      --gradient-color: var(--current-color);
  --box-color: var(--clr-peach);
  --text-color: var(--clr-primary);
  --icon-color: var(--clr-primary);
}

.color-assignment {
  --current-color: var(--clr-assignment, #ff5733);
      --gradient-color: var(--current-color);
  --box-color: var(--clr-assignment);
  --text-color: var(--clr-primary);
  --icon-color: var(--clr-primary);
}

.color-journal {
  --current-color: var(--clr-journal, #ffb400);
      --gradient-color: var(--current-color); 
  --box-color: var(--clr-journal);
  --text-color: var(--clr-primary);
  --icon-color: var(--clr-primary);
}

.color-knowledge {
  --current-color: var(--clr-knowledge, #ff6f61);
      --gradient-color: var(--current-color); 
  --box-color: var(--clr-knowledge);
  --text-color: var(--clr-primary);
  --icon-color: var(--clr-primary);
}

.color-success {
    --current-color: var(--clr-success, #28a745);
      --gradient-color: var(--current-color);
  --box-color: var(--clr-success);
  --text-color: var(--clr-primary);
  --icon-color: var(--clr-primary);
}

.color-info {
    --current-color: var(--clr-info, #009ffd);
      --gradient-color: var(--current-color);
  --box-color: var(--clr-info);
  --text-color: var(--clr-primary);
  --icon-color: var(--clr-primary);
}

.color-warning {
    --current-color: var(--clr-warning, #f7a600);
      --gradient-color: var(--current-color);
  --box-color: var(--clr-warning);
  --text-color: var(--clr-primary);
  --icon-color: var(--clr-primary);
}
.color-food {
    --current-color: var(--clr-food, #ec6aab);
      --gradient-color: var(--current-color);
  --box-color: var(--clr-food, #ec6aab);
  --text-color: var(--clr-white);
  --icon-color: var(--clr-white);
}

.color-think-about {
    --current-color: var(--clr-think-about, #f5e20f);
      --gradient-color: var(--current-color);
  --box-color: var(--clr-think-about, #f5e20f);
  --text-color: var(--clr-primary);
  --icon-color: var(--clr-primary);
}

.color-pause {
    --current-color: var(--clr-pause, #116a73);
      --gradient-color: var(--current-color);
  --box-color: var(--clr-pause, #116a73);
  --text-color: var(--clr-white);
  --icon-color: var(--clr-white);
}

.color-survey {
    --current-color: var(--clr-survey, #7635bb);
      --gradient-color: var(--current-color);
  --box-color: var(--clr-survey, #7635bb);
  --text-color: var(--clr-white);
  --icon-color: var(--clr-white);
}

.color-course {
    --current-color: var(--clr-course, #83530c);
      --gradient-color: var(--current-color);
  --box-color: var(--clr-course, #83530c);
  --text-color: var(--clr-white);
  --icon-color: var(--clr-white);
}

.color-puzzle {
    --current-color: var(--clr-puzzle, #2e602f);
      --gradient-color: var(--current-color);
  --box-color: var(--clr-puzzle, #2e602f);
  --text-color: var(--clr-white);
  --icon-color: var(--clr-white);
}

.color-formula {
    --current-color: var(--clr-formula, #a0215a);
      --gradient-color: var(--current-color);
  --box-color: var(--clr-formula, #a0215a);
  --text-color: var(--clr-white);
  --icon-color: var(--clr-white);
}

.color-reminder {
  --current-color: var(--clr-reminder, #2f4eac);
      --gradient-color: var(--current-color);
  --box-color: var(--clr-reminder, #2f4eac);
  --text-color: var(--clr-white);
  --icon-color: var(--clr-white);
}

.color-lesson {
    --current-color: var(--clr-lesson, #ff0794);
      --gradient-color: var(--current-color);
  --box-color: var(--clr-lesson, #ff0794);
  --text-color: var(--clr-white);
  --icon-color: var(--clr-white);
}

.color-final {
    --current-color: var(--clr-final, #73a800);
  --gradient-color: var(--current-color);
  --box-color: var(--clr-final, #73a800);
  --text-color: var(--clr-white);
  --icon-color: var(--clr-white);
}

.color-conditional {
    --current-color: var(--clr-conditional, #a86ab9);
      --gradient-color: var(--current-color);
  --box-color: var(--clr-conditional, #a86ab9);
  --text-color: var(--clr-white);
  --icon-color: var(--clr-white);
}
/* gradient BG */
.color-bg-grad-light-blue {
  --box-color: linear-gradient(
    to bottom, 
    var(--clr-blue-light) 0%, 
    var(--clr-blue-light) 5%, 
    transparent 100%
  );
  --text-color: var(--clr-primary);
  --icon-color: var(--clr-primary);
}
/* Base gradient classes */
.grad-top {
  --box-color: linear-gradient(
    to bottom, 
    var(--current-color, var(--clr-primary)) 0%, 
    var(--current-color, var(--clr-primary)) 5%, 
    transparent 100%
  );
}

.grad-bottom {
  --box-color: linear-gradient(
    to top, 
    var(--current-color, var(--clr-primary)) 0%, 
    var(--current-color, var(--clr-primary)) 5%, 
    transparent 100%
  );
}

.grad-mid {
  --box-color: linear-gradient(
    to bottom, 
    transparent 0%, 
    var(--current-color, var(--clr-primary)) 45%, 
    var(--current-color, var(--clr-primary)) 55%, 
    transparent 100%
  );
}

/* ================================================================= */
/* UNIVERSAL ICON SYSTEM                                             */
/* ================================================================= */
.icon-universal-none {
  --icon-mask: var(--icon-none);
}
.icon-universal-slideshow {
  --icon-mask: var(--icon-slideshow);
}
.icon-universal-assessment {
  --icon-mask: var(--icon-assessment);
}
.icon-universal-quiz {
  --icon-mask: var(--icon-quiz);
}
.icon-universal-practice {
  --icon-mask: var(--icon-practice);
}
.icon-universal-activity {
  --icon-mask: var(--icon-activity);
}
.icon-universal-assignment {
  --icon-mask: var(--icon-assignment);
}
.icon-universal-journal {
  --icon-mask: var(--icon-journal);
}
.icon-universal-knowledge {
  --icon-mask: var(--icon-knowledge);
}
.icon-universal-mastery {
  --icon-mask: var(--icon-mastery-b);
}
.icon-universal-alert {
  --icon-mask: var(--icon-alert);
}
.icon-universal-success {
  --icon-mask: var(--icon-success);
}
.icon-universal-info {
  --icon-mask: var(--icon-info);
}
.icon-universal-warning {
  --icon-mask: var(--icon-warning);
}
.icon-universal-food {
  --icon-mask: var(--icon-food);
}
.icon-universal-think {
  --icon-mask: var(--icon-think);
}
.icon-universal-pause {
  --icon-mask: var(--icon-pause);
}
.icon-universal-survey {
  --icon-mask: var(--icon-survey);
}
.icon-universal-course {
  --icon-mask: var(--icon-course);
}
.icon-universal-puzzle {
  --icon-mask: var(--icon-puzzle);
}
.icon-universal-formula {
  --icon-mask: var(--icon-formula);
}
.icon-universal-reminder {
  --icon-mask: var(--icon-reminder);
}
.icon-universal-lesson {
  --icon-mask: var(--icon-lesson);
}
.icon-universal-final {
  --icon-mask: var(--icon-final-b);
}
.icon-universal-conditional {
  --icon-mask: var(--icon-conditional);
}

.icon-universal-case {
  --icon-mask: var(--icon-case);
}
.icon-universal-slideshow {
  --icon-mask: var(--icon-slideshow);
}
/* .icon-universal-slideshow {
  --icon-mask: var(--icon-slideshow);
} */

/* ==========================================
           UNIVERSAL TOGGLE BUTTON
        ========================================== */
.universal-toggle-button {
  margin: 5px;
  padding: 8px 12px;
  cursor: pointer;
  background-color: var(--box-color, var(--clr-primary));
  color: var(--text-color, var(--clr-white));
  border-radius: 5px;
  border: 0;
  transition: all 0.2s ease;
  --box-glow-color: rgba(33, 33, 33, 0.2);
}

.universal-toggle-button:hover {
  transform: scale(0.99);
  box-shadow: 0px 2px 18px var(--box-glow-color, rgba(33, 33, 33, 0.2));
}

/* ==========================================
           UNIVERSAL CALLOUT SYSTEM
        ========================================== */

/* Base callout structure */
.universal-callout {
  border: 1px solid var(--clr-tertiary);
  background-color: var(--clr-white);
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 6px 20px 0 rgba(0, 0, 0, 0.05);
  margin-bottom: 20px;
}

/* Callout header with icon and title */
.universal-callout-header {
  background-color: var(--box-color, var(--clr-primary));
  color: var(--text-color, var(--clr-white));
  position: relative;
  padding: 15px 45px;
  font-size: 1.25rem;
  font-weight: normal;
  display: flex;
  align-items: center;
}

/* Icon in callout header (positioned absolutely on left) */
.universal-callout-header::before {
  content: '';
  display: block;
  background-color: var(--icon-color, var(--clr-white));
  mask: var(--icon-mask, var(--icon-assessment)) no-repeat center;
  -webkit-mask: var(--icon-mask, var(--icon-assessment)) no-repeat center;
  mask-size: contain;
  -webkit-mask-size: contain;
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
}

/* Callout content area */
.universal-callout-content {
  padding: 20px 45px;
  color: var(--clr-primary);
  background-color: var(--clr-white);
}

/* ==========================================
   UNIVERSAL SIDEBAR BOX SYSTEM 
========================================== */

/* The main container: Has the solid background color and a fixed padding on the left. */
.universal-sidebar-box {
  position: relative;
  background: var(--box-color, var(--clr-primary));
  padding: 4px 4px 4px 65px;
  border: none;
  min-height: 60px;
}

/* The icon: Sits in the padded area on the left. */
.universal-sidebar-box::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 65px;
  height: 90%;
  background-color: var(--icon-color, var(--clr-white));

  /* The icon's shape is provided by the --icon-mask variable */
  mask-image: var(--icon-mask);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: 40px;
  -webkit-mask-image: var(--icon-mask);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: 40px;
}

.universal-sidebar-box:not([class*="icon-universal-"])::before {
  background-color: transparent;
}

.universal-sidebar-box > * {
  background: var(--clr-white);
  padding: 5px 15px;
  margin: 0 !important;
}

/* Add spacing for the first and last text elements */
.universal-sidebar-box > *:first-child {
  padding-top: 10px;
}
.universal-sidebar-box > *:last-child {
  padding-bottom: 10px;
}

.universal-sidebar-box h3,
.universal-sidebar-box h4,
.universal-sidebar-box h5,
.universal-sidebar-box h6 {
  color: var(--clr-accent);
  line-height: 1.5;
}

.universal-sidebar-box p {
  color: var(--clr-primary);
  line-height: 1.5;
}
/* ==========================================
   UNIVERSAL OUTLINE BOX SYSTEM 
========================================== */


.universal-outline-box {
  position: relative;
  padding: 4px;
  border: 6px solid var(--box-color, var(--clr-primary));
  min-height: 60px;
  color: var(--text-color, var(--clr-primary));
}

/* Inner wrapper */
.universal-outline-box-bg {
  padding: 25px;
  margin: 0 !important;
  color: inherit; 
}

.universal-outline-box p,
.universal-outline-box .universal-outline-box-bg p {
  color: inherit;
  line-height: 1.5;
}

.universal-outline-box[class*="color-"] {
  --text-color: unset; 
}
.universal-solid-box-bg p,
.universal-solid-box-bg li,
.universal-solid-box-bg span,
.universal-solid-box-bg em,
.universal-solid-box-bg strong {
  color: inherit;
}
.universal-solid-box .universal-solid-box-bg {
  color: inherit;
}
/* Ensure nested solid boxes use their own theme text colour */
.universal-solid-box .universal-solid-box {
  /* Re-root the text colour for any solid box inside another solid box */
  color: var(--text-color, var(--icon-color, var(--clr-white))) !important;
}

/* And make sure their inner wrapper + text just inherit from that */
.universal-solid-box .universal-solid-box .universal-solid-box-bg,
.universal-solid-box .universal-solid-box .universal-solid-box-bg *:not(h3):not(h4):not(h5):not(h6) {
  color: inherit !important;
}



.universal-solid-box .universal-outline-box p,
.universal-solid-box .universal-outline-box .universal-outline-box-bg p {
  color: inherit;
}
.universal-outline-box {
  border: 6px solid var(--outline-color, var(--text-color, var(--clr-primary))) !important;
}

.universal-outline-box[class*="color-"] {
  --outline-color: var(--box-color);
  --text-color: unset; 
}
.universal-outline-box {
  --list-color: var(--clr-accent);
}
.universal-outline-box .universal-outline-box-bg li::marker {
  color: var(--list-color) !important;
}

/* ==========================================
   UNIVERSAL SOLID BOX SYSTEM 
========================================== */

.universal-solid-box {
  position: relative;
  background: var(--box-color, var(--clr-primary));
   --text-color: var(--icon-color, var(--clr-white));
  color: var(--text-color);
  padding: 25px;
  border: none;
  min-height: 60px;
}
/* .universal-solid-box > * {
    background: var(--box-color, var(--clr-primary));
     padding: 25px;
    margin: 0 !important;
} */

.universal-solid-box p {
   color: inherit;
  line-height: 1.5;
}
.universal-solid-box p,
.universal-solid-box li,
.universal-solid-box .universal-solid-box-bg,
.universal-solid-box .universal-solid-box-bg *:not(h3):not(h4):not(h5):not(h6) {
  color: inherit;
}
.universal-solid-box h3,
.universal-solid-box h4,
.universal-solid-box h5,
.universal-solid-box h6 {
  /* color: var(--icon-color, var(--clr-white)); */
   background-color:var(--clr-white);
   padding: 5px 15px;
 
}
.universal-solid-box ul,
.universal-solid-box ol {
  padding-left: 55px;
}

.universal-solid-box li::marker {
  color: var(--icon-color, var(--clr-white));
}
/* ==========================================
   UNIVERSAL Full SOLID BOX SYSTEM 
========================================== */
.universal-full-block {
  background-color: var(--box-color, var(--clr-primary));
  color: var(--icon-color, var(--clr-white));
  position: relative;
  width: 100%;
  padding: 100px 60px;
  box-sizing: border-box;
}
.universal-full-block-c {
  background-color: var(--box-color, var(--clr-primary));
  color: var(--icon-color, var(--clr-white));
  position: relative;
  width: 100%;
  padding: 100px 60px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.universal-full-block {
  background: var(--box-color, var(--clr-primary));
  color: var(--icon-color, var(--clr-white));
}

.universal-full-block-c h3,
.universal-full-block-c h4,
.universal-full-block-c h5,
.universal-full-block h3,
.universal-full-block h4,
.universal-full-block h5 {
  /*color: var(--icon-color, var(--clr-white));*/
    background-color:var(--clr-white);
   padding: 5px 15px;
}
.universal-full-block-c li::marker,
.universal-full-block li::marker {
  color: var(--icon-color, var(--clr-white));
}

/* With images */
.universal-full-block-c figcaption,
.universal-full-block figcaption {
  font-size: 0.7em;
  color: var(--icon-color, var(--clr-white));
  margin-top: 5px;
  text-align: center;
}
.universal-full-block > .lineV::after,
.universal-full-block-c > .lineV::after {
  content: "";
  display: block;
  width: 1px;
  background-color: var(--text-color, var(--clr-accent));
  height: 100%;
  margin: auto;
}

/* ==========================================
   UNIVERSAL ALERT BOX 
========================================== */

.universal-alert-box {
  position: relative;
  padding: 20px;
  padding-left: 80px;
  margin-bottom: 20px;
  background: var(--box-color, var(--clr-primary));
  color: var(--text-color, var(--clr-white));
}

.universal-alert-box::before {
  content: '';
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
  background-color: var(--icon-color, var(--clr-white));
  mask: var(--icon-mask) no-repeat center;
  -webkit-mask: var(--icon-mask) no-repeat center;
  mask-size: contain;
  -webkit-mask-size: contain;
}

/* Hides the icon block when "No Icon" is selected */
.universal-alert-box:not([class*="icon-universal-"])::before {
  background-color: transparent;
}

/* All headings inside will also use the correct theme text color */
.universal-alert-box h2,
.universal-alert-box h3,
.universal-alert-box h4,
.universal-alert-box h5,
.universal-alert-box h6 {
  color: var(--text-color, var(--clr-white));
  margin-top: 0;
}

.universal-alert-box p:last-child {
  margin-bottom: 0;
}

/* ==========================================
           UNIVERSAL CHIP SYSTEM
        ========================================== */

/* Base chip structure - gradient background only */
.universal-chip {
  display: flex;
  align-items: center;
  padding: 0 25px;
  height: 40px;
  font-style: italic;
  border-radius: 5px;
  margin-bottom: 20px;
  margin-left: 40px;
  background: linear-gradient(
    to right,
    var(--clr-tertiary),
    var(--clr-white),
    var(--clr-white)
  );
  position: relative;
  color: var(--clr-primary);
}

/* Colored circle background */
.universal-chip::after {
  content: '';
  position: absolute;
  left: -35px;
  top: 50%;
  transform: translateY(-50%);
  height: 50px;
  width: 50px;
  border-radius: 50%;
  border: solid 2px var(--clr-background);
  background-color: var(--box-color, var(--clr-primary));
  z-index: 1;
  transition: 0.3s;
}

/* Icon with automatic color contrast */
.universal-chip::before {
  content: '';
  position: absolute;
  left: -35px;
  top: 50%;
  transform: translateY(-50%);
  height: 50px;
  width: 50px;
  z-index: 2;
  transition: 0.3s;

  /* Icon using mask for color control */
  background-color: var(--icon-color, var(--clr-white));
  mask: var(--icon-mask, var(--icon-assessment)) no-repeat center;
  -webkit-mask: var(--icon-mask, var(--icon-assessment)) no-repeat center;
  mask-size: 65%;
  -webkit-mask-size: 65%;
}

/* Hover effects */
.universal-chip:hover::before {
  transform: translateY(-50%) rotate(-15deg);
  mask-size: 70%;
  -webkit-mask-size: 70%;
  height: 55px;
  width: 55px;
}

.universal-chip:hover::after {
  transform: translateY(-50%) rotate(-15deg);
  height: 55px;
  width: 55px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 6px 20px 0 rgba(0, 0, 0, 0.05);
}

/* Text content in chips */
.universal-chip p {
  margin: 0;
  margin-left: 10px;
}
/* ==========================================
   UNIVERSAL FULL BLOCK SYSTEM —— START
========================================== */
.universal-full-block-primary li::marker,
.universal-full-block-primary-c li::marker {
  color: var(--icon-color, var(--clr-white));
}

.universal-full-block-primary {
  background: var(--box-color, var(--clr-primary));
  color: var(--icon-color, var(--clr-white));
  position: relative;
  width: 100%;
  /* height: 650px; */
  padding: 100px 60px;
  box-sizing: border-box;
}
.universal-full-block-primary-c {
  background: var(--box-color, var(--clr-primary));
  color: var(--icon-color, var(--clr-white));
  position: relative;
  width: 100%;
  /* height: 650px; */
  padding: 100px 60px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.universal-full-block-primary,
.universal-full-block-primary-c {
  background: var(--box-color, var(--clr-primary));
  color: var(--icon-color, var(--clr-white));
}
.universal-full-block-primary li,
.universal-full-block-primary ol,
.universal-full-block-primary ul,
.universal-full-block-primary h3,
.universal-full-block-primary h4,
.universal-full-block-primary h5,
.universal-full-block-primary-c li,
.universal-full-block-primary-c ol,
.universal-full-block-primary-c ul,
.universal-full-block-primary-c h3,
.universal-full-block-primary-c h4,
.universal-full-block-primary-c h5 {
  color: var(--icon-color, var(--clr-white));
}

/* ==========================================
   UNIVERSAL FULL BLOCK SYSTEM —— END
========================================== */

/* Universal Accordions ------- START */
.universal-base-accordion ul,
.universal-base-accordion ol,
.universal-base-accordion-title ul,
.universal-base-accordion-title ol,
.universal-base-accordion div > ul > li,
.universal-base-accordion div > ol > li,
.universal-base-accordion ul > li,
.universal-base-accordion ol > li,
.universal-base-accordion-title ul > li,
.universal-base-accordion-title ol > li,
.universal-base-accordion ul li::before,
.universal-base-accordion ol > li::before,
.universal-base-accordion-title ul li::before,
.universal-base-accordion-title ol > li::before {
  animation: none !important;
  transition: none !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.universal-base-accordion div > ul > li,
.universal-base-accordion div > ol > li {
  animation: none !important;
  transition: none !important;
  visibility: visible !important;
  opacity: 1 !important;
  transform: none !important;
}

.universal-base-accordion {
  /* background: var(--box-color, var(--clr-primary));
         color: var(--icon-color, var(--clr-white)); */
  /*border: 1px solid #fff;*/
  margin-bottom: 1px;
  width: 100%;
}
.universal-base-accordion h2 {
  margin: 0;
  padding-top: 20px;
  padding-left: 5px;
  font-family: var(--font-h1);
  font-size: 1.75em;
  font-weight: bold;
  line-height: -200px;
  color: var(--clr-accent);
  background-color: var(--clr-white);
  text-align: left;
  border-bottom: 0px solid var(--clr-accent);
  border-left: 0px solid var(--clr-accent);
  border-right: 0px solid var(--clr-accent);
  box-shadow: 0 4px 0px 0 rgba(0, 0, 0, 0.0), 0 0px 0px 0 rgba(0, 0, 0, 0.0);
}
.universal-base-accordion h3 {
  color: var(--clr-accent);
  background-color: var(--clr-white);
  padding-left: 15px;
  margin: 0;
  line-height: 1.5;
}
/* .universal-accordion-primary .universal-base-accordion-title,
.universal-accordion-primary .universal-base-accordion-title-button {
  background-color: var(--box-color, var(--clr-primary));
} */
.universal-base-accordion-title,
.universal-base-accordion-title-button {
  background-color: var(--box-color, var(--clr-primary));
  color: var(--icon-color, var(--clr-white));
  padding: 10px;
  cursor: pointer;
  position: relative;
  padding-left: 40px;
  transition: all 0.3s ease-in-out;
}
.universal-question-accordion .universal-base-accordion-title {
  padding-left: 50px;
}
.universal-question-accordion > div:nth-of-type(2) {
  /* padding-left: 50px; */
  box-sizing: border-box;
  height: auto;
}

/* .universal-question-accordion > div:nth-of-type(2) * {
    border: 1px solid blue; 
    
  } */

.universal-question-accordion > div:nth-of-type(2) p {
  padding-left: 7px;
  /* margin: 0; */
}
.universal-question-accordion > div:nth-of-type(2) ul {
  padding-left: 55px;
  /* margin: 0; */
}
.universal-question-accordion > div:nth-of-type(2) ol {
  padding-left: 55px;
  /* margin: 0; */
}
/* Accordion content panel */
.universal-base-accordion > div {
  padding: 15px;
}
.universal-base-accordion-title-button span {
  display: inline-block;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: break-word;
}

.universal-base-accordion-title-button {
  width: 100%;
  padding: 15px;
  padding-left: 40px;
  background-color: var(--box-color, var(--clr-primary));
  color: var(--icon-color, var(--clr-white));
  border: none;
  cursor: pointer;
  text-align: left;
  white-space: normal;
  min-width: 0;
}
.cont-r .universal-base-accordion {
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
}

.universal-base-accordion > button {
  background-color: none;
  border: none;
  cursor: pointer;
  width: 100%;
  text-align: left;
  font: var(--font-body);
  font-weight: var(--font-weight-normal);
  margin-bottom: 0px;
  margin-left: 0;
}

.universal-base-accordion .universal-base-accordion-title::before {
  content: '';
  background-color: currentColor;
  mask: var(--icon-base);
  -webkit-mask: var(--icon-base);
  background-size: 40px 40px;
  position: absolute;
  left: 10px;
  top: 18px;
  width: 30px;
  height: 30px;
  transition: transform 0.3s ease-in-out;
}
.universal-base-accordion .universal-base-accordion-title-button::before {
  content: '';
  background-color: currentColor;
  mask: var(--icon-base);
  -webkit-mask: var(--icon-base);
  background-size: 40px 40px;
  position: absolute;
  left: 10px;
  top: 14px;
  width: 30px;
  height: 30px;
  transition: transform 0.3s ease-in-out;
}

.universal-base-accordion .universal-base-accordion-title + div,
.universal-base-accordion .universal-base-accordion-title-button + div {
  background-color: var(--clr-white);
  padding: 0 20px;
  border-top: 1px solid var(--clr-tertiary);
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 6px 20px 0 rgba(0, 0, 0, 0.05);
  overflow: hidden;
  height: 0;
  padding: 0 15px;
  transition: height 0.5s ease-out, padding 0.5s ease-out,
    box-shadow 0.5s ease-out;
}

.universal-base-accordion.open .universal-base-accordion-title + div,
.universal-base-accordion.open .universal-base-accordion-title-button + div {
  height: auto;
  /* padding: 20px 45px; */
  padding: 5px 15px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 6px 20px 0 rgba(0, 0, 0, 0.05);
  transition: height 0.5s ease-in, padding 0.5s ease-in, box-shadow 0.5s ease-in;
}

.universal-base-accordion.open .universal-base-accordion-title::before,
.universal-base-accordion.open .universal-base-accordion-title-button::before {
  transform: rotate(90deg);
}
.universal-base-accordion.open .universal-base-accordion-title + div p {
  margin: 0;
  padding-left: 15px;
}
.universal-base-accordion:not(.open-one .universal-base-accordion)
        .universal-base-accordion-title-button
        .open-all-icon {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  font-size: 1.2em;
  padding: 5px;
}
/* Overlay Texture for Accordions in an "open-one" Container */
.open-one .universal-base-accordion {
  position: relative;
}
/* Question Accordion */
.universal-question-accordion .universal-base-accordion-title::before {
  content: '';
  background-color: var(--icon-color, var(--clr-white));
  mask: var(--icon-question-closed);
  -webkit-mask: var(--icon-question-closed);
  background-size: 40px 40px;
  position: absolute;
  left: 10px;
  top: 35px;
  width: 30px;
  height: 30px;
  transition: none;
}

.universal-question-accordion.open .universal-base-accordion-title::before {
  mask: var(--icon-question-open);
  -webkit-mask: var(--icon-question-open);
  transform: none;
}

/*Accordion Open one at a time START */
.open-one .universal-base-accordion::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: repeating-linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.2) 0,
    rgba(255, 255, 255, 0.2) 1px,
    transparent 1px,
    transparent 3px
  );
  pointer-events: none;
  z-index: 1;
  mask-image: linear-gradient(to left, black, transparent);
  -webkit-mask-image: linear-gradient(to left, black, transparent);
}

/* 1) make the title-button a positioning‐context */
.open-one .universal-base-accordion .universal-base-accordion-title-button {
  position: relative;
  overflow: hidden;
}

/* 2) move the ::after onto the title-button, not the whole accordion */
.open-one .universal-base-accordion .universal-base-accordion-title-button::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: repeating-linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.2) 0,
    rgba(255, 255, 255, 0.2) 1px,
    transparent 1px,
    transparent 3px
  );
  pointer-events: none;
  z-index: 1;
  mask-image: linear-gradient(to left, black, transparent);
  -webkit-mask-image: linear-gradient(to left, black, transparent);
}

/* 3) remove (or override) your old accordion ::after */
.open-one .universal-base-accordion::after {
  display: none;
}
/* 1) STOP drawing stripes on the entire accordion */
.open-one .universal-base-accordion::after {
  content: none !important;
}

/* 2) CLIP your stripes to the header only */
.open-one .universal-base-accordion-title-button {
  position: relative;
  overflow: hidden;
}

.open-one .universal-base-accordion-title-button::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.2) 0,
    rgba(255, 255, 255, 0.2) 1px,
    transparent 1px,
    transparent 3px
  );
  pointer-events: none;
  z-index: 1;
  mask-image: linear-gradient(to left, black, transparent);
  -webkit-mask-image: linear-gradient(to left, black, transparent);
}
.universal-question-accordion p,
.question-accordion p {
  padding-bottom: 1em;
}

.universal-question-accordion p:last-child,
.question-accordion p:last-child {
  margin-bottom: 0;
}
/*Accordion Open one at a time END */

/* ! Accordions with click to reveal START */
/* When any hidden div is visible inside an accordion */
.universal-base-accordion div[style*="display: block"],
.base-accordion div[style*="display: block"] {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}


.universal-base-accordion > div:has(div[style*="display: block"]),
.base-accordion > div:has(div[style*="display: block"]) {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}


.universal-base-accordion:has(div[style*="display: block"]),
.base-accordion:has(div[style*="display: block"]) {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}


.universal-base-accordion > div:has(.hidden-text-image.show),
.base-accordion > div:has(.hidden-text-image.show) {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}


.universal-base-accordion > div:has(.clickableImage + *[style*="display: block"]),
.base-accordion > div:has(.clickableImage + *[style*="display: block"]) {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}
/* Universal accordion fix - works with all types of revealed content */

  .universal-base-accordion:has(.strain-index-content.active),
  .base-accordion:has(.strain-index-content.active),
 
  .universal-base-accordion > div:has(.strain-index-content.active),
  .base-accordion > div:has(.strain-index-content.active),

  .universal-base-accordion:has(div[style*="display: block"]),
  .base-accordion:has(div[style*="display: block"]),
  .universal-base-accordion > div:has(div[style*="display: block"]),
  .base-accordion > div:has(div[style*="display: block"]),
  .universal-base-accordion > div:has(.hidden-text-image.show),
  .base-accordion > div:has(.hidden-text-image.show),
  .universal-base-accordion > div:has(.clickableImage + *[style*="display: block"]),
  .base-accordion > div:has(.clickableImage + *[style*="display: block"]) {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    transition: all 0.3s ease;
  }
/* ! Accordions with click to reveal END */
/* Universal Accordions ------- END */

/* ============================================ */
/* BLOCK QUOTE */
/* ============================================ */
/* Blockquote 1 */
/* Blockquote 1 — text-only theming via Universal variables */
blockquote.universal-style1 {
  /* Map to the theme hue (no backgrounds touched) */
  --quote-color: var(--box-color, var(--clr-accent));
  color: var(--quote-color);

  font-family: var(--font-blockquote);
  font-size: 1.25em;
  font-style: italic;
  line-height: 1.2;
  text-align: center;
  margin-bottom: 1em;
  break-inside: avoid;
  padding-block: 30px;

  /* Make sure we get curly quotes consistently */
  quotes: "“" "”" "‘" "’";
}

/* Ensure all nested bits follow the chosen text color */
blockquote.universal-style1 *,
blockquote.suniversal-style1 footer {
  color: inherit;
}

/* Correct pseudo-elements (no space) and match color to text */
blockquote.universal-style1::before {
  content: open-quote;
  color: inherit;
}
blockquote.universal-style1::after {
  content: close-quote;
  color: inherit;
}

/* Footer sizing stays as you had it */
blockquote footer {
  font-size: .75em;
}

/* Blockquote 2 */
blockquote.universal-style2 {
  --line-color: var(--box-color, var(--clr-accent));
  color: var(--clr-primary);
  font-family: var(--font-body);
  font-weight: 200;
  font-style: normal;
  text-align: left;

  /* spacing */
  margin-block: 10px;
  margin-inline-start: 50px;
  padding-inline-start: 15px;

  /* the actual line */
  border-inline-start: 3px solid var(--line-color);
}
blockquote footer.universal-style2 {
  font-size: .75em;
  text-align: right;
}
/* Blockquote 3 */
blockquote.universal-style3 {
  /* color: var(--clr-white); */
  font-family: var(--font-body);
  font-weight: 500;
  font-style: normal;
  text-align: left;
  padding: 50px 20px 50px;
  background-color: var(--box-color, var(--clr-accent));
  color: var(--icon-color, var(--clr-white));
  margin: 5px;
  background-image: url(../../img/quote.svg);
  background-position: top left;
  background-repeat: no-repeat;
  background-size: 100px;
  text-indent: 23px;
}
blockquote.universal-style3 span {
  display: block;
  /* background-image: url(../../img/quote.svg); */
  background-repeat: no-repeat;
  background-position: bottom right;
  background-size: 100px;
}
figcaption.universal-style3 {
  color: var(--clr-white);
  font-size: .75em;
  text-align: right;
  padding-right: 20px;
}
/* Blockquote 4 */
/* Quote component — Universal color aware */
figure.quote {
  margin: 0;
  background-color: var(--box-color, var(--clr-tertiary));
  padding: 1em;
  border-radius: 1em;
}

/* More specific than ".quote ..." to reliably override earlier rules */
figure.quote blockquote,
figure.quote figcaption {
  color: var(--text-color, var(--clr-primary));
  text-align: justify;
  font-family: var(--font-body);
  font-weight: var(--font-weight-normal);
  font-style: normal;
  margin: 1em;
}

figure.quote figcaption {
  text-align: left;
}

/* Make sure the <q> punctuation inherits the color too */
figure.quote q {
  color: inherit;
}
figure.quote q::before,
figure.quote q::after {
  color: inherit;
}

/* Blockquote 5 */
blockquote.universal-style5 {
  color: var(--clr-white);
  font-family: var(--font-body);
  font-weight: 200;
  font-style: italic;
  text-align: left;
  padding: 50px 20px 50px;
  background-color: var(--box-color, var(--clr-primary));
  margin: 5px;
  /* background-image: url(../../img/quote.svg); */
  background-position: top left;
  background-repeat: no-repeat;
  background-size: 100px;
  text-indent: 23px;
}
blockquote.universal-style5 span {
  display: block;
  /* background-image: url(../../img/quote.svg); */
  background-repeat: no-repeat;
  background-position: bottom right;
  background-size: 100px;
}
figcaption.universal-style5 {
  color: var(--text-color, var(--clr-white));
  font-size: .75em;
  font-style: normal;
  text-align: right;
  padding-right: 20px;
}
/* Quotes END */

/* ================================= */
/* UNIVERSAL STICKY NOTE */
/* ================================= */
/* Sticky Note Start */
.universal-sticky-note {
  position: relative;
  max-width: 350px;
  min-height: 200px;
  background-color: var(--box-color, var(--clr-sticky-note));
  /* background-color: #fdfd96; */
  padding: 20px;
  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);
  border-radius: 3px;
  transform: rotate(-2deg);
  box-sizing: border-box;
  margin-bottom: 20px;
  margin-left: 40px;
}
.universal-sticky-note-long {
  position: relative;
  min-height: 200px;
  background-color: var(--box-color, var(--clr-sticky-note));
  padding: 20px;
  border-top: solid 4px
    color-mix(in srgb, var(--box-color, var(--clr-sticky-note)) 80%, black);
  border-bottom: solid 4px
    color-mix(in srgb, var(--box-color, var(--clr-sticky-note)) 80%, black);

  border-radius: 3px;
  box-sizing: border-box;
  margin-bottom: 20px;
  margin-left: 40px;
  margin-right: 40px;
}

.universal-color-block {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 20px;
  background-color: rgba(0, 0, 0, 0.075);
  /* background-color: #f1f171; */
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}
.universal-note-text {
  margin-top: 30px;
  font-family: "Indie Flower", cursive;
}
.universal-note-text  strong {
  margin-top: 30px;
  font-family: "Indie Flower", cursive;
  font-weight: 400;
  text-decoration: underline;
}

.universal-note-text p {
  margin: 0;
  padding: 0;

  color: var(--text-color, var(--clr-primary));
  word-wrap: break-word;
}

/* ================================= */
/* CONVERSATION */
/* ================================= */
/* Conversation START */

.universal-convo-bg {
  background-color: var(--box-color, var(--clr-primary));
  border-radius: 5px;
  padding: 30px;
}
.universal-convo-l,
.universal-convo-r {
  /* border: 2px solid #dedede; */
  background-color: var(--box-color, #f1f1f1);
  /* background-color: #f1f1f1; */
  border-radius: 15px;
  padding: 10px;
  margin: 10px 0;
  color: var(--text-color, var(--clr-primary));
}

.universal-darker {
  /* border-color: #8aa9d0; */
  background-color: var(--box-color, #b7d3f7);
  /* background-color: #b7d3f7; */
}

.universal-convo-l::after,
.universal-convo-r::after {
  content: "";
  clear: both;
  display: table;
}

.universal-convo-l img,
.universal-convo-r img {
  float: left;
  max-width: 100px;
  width: 100%;
  margin-right: 20px;
  border-radius: 50%;
  border: 1px solid var(--clr-primary);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), 0 6px 20px rgba(0, 0, 0, 0.2);
}

.universal-convo-r img {
  float: right;
  margin-left: 20px;
  margin-right: 0;
}
/* .convo img.right {
  float: right;
  margin-left: 20px;
  margin-right:0;
} */

.universal-time-right {
  float: right;
  color: #aaa;
}

.universal-time-left {
  float: left;
  color: #999;
}
/* Conversation END */
/* Conversation v3 — Left IMG | Center TEXT | Right IMG (square) */
/* =========================== START ============================ */

.universal-convo-3 {
  --uc3-gap: 16px;
  --uc3-radius: 15px;            
  --uc3-pad: 14px 16px;         
  --uc3-shadow: 0 4px 8px rgba(0,0,0,.12), 0 6px 20px rgba(0,0,0,.10);
  --uc3-img-size: 84px;         
  --uc3-border: 1px solid var(--clr-primary);
  --uc3-bg: var(--box-color, #f1f1f1);
  --uc3-fg: var(--text-color, var(--clr-primary));
}

.universal-convo-3.universal-convo-bg {
  background-color: var(--box-color, #f1f1f1);
  border-radius: 5px;
  padding: 30px;
}

/* One message row */
.uc3-row {
  display: grid;
  grid-template-columns: auto 1fr auto; 
  align-items: center;
  gap: var(--uc3-gap);
  margin: 12px 0;
}

/* Left & right images */
.uc3-left img,
.uc3-right img {
  display: block;
  width: var(--uc3-img-size);
  height: var(--uc3-img-size);
  object-fit: cover;
  box-shadow: var(--uc3-shadow);
  border: var(--uc3-border);
}

/* Left image is ROUND */
.uc3-left img {
  border-radius: 50%;
}

/* Right image is NOT rounded (keep it square) */
.uc3-right img {
  border-radius: 0;              
}

/* Center bubble */
.uc3-center {
  background: var(--uc3-bg);
  color: var(--uc3-fg);
  padding: var(--uc3-pad);
  border-radius: var(--uc3-radius);
  box-shadow: var(--uc3-shadow);
  min-width: 0;                 
}

/* Optional “darker” variant for the bubble (keeps your class name) */
.uc3-center.universal-darker {
  background-color: var(--box-color, #b7d3f7);
}

/* Text elements inside the bubble inherit color and spacing */
.uc3-center p { 
  margin: 0 0 0.5em 0; 
}
.uc3-center p:last-child { 
  margin-bottom: 0; 
}

/* Timestamp helpers (if you want them) */
.universal-time-left  { float: left;  color: #999; font-size: .9em; }
.universal-time-right { float: right; color: #aaa; font-size: .9em; }

/* Responsive: stack gracefully on narrow screens */
@media (max-width: 700px) {
  .uc3-row {
    grid-template-columns: 1fr;     
    justify-items: center;
    text-align: left;
  }

  .uc3-left img,
  .uc3-right img {
    width: 64px;
    height: 64px;
  }

  /* Order: left img → text → right img */
  .uc3-left  { order: 1; }
  .uc3-center{ order: 2; width: 100%; }
  .uc3-right { order: 3; }
}

/* Tighten spacing when images are missing (optional nicety) */
.uc3-left:empty,
.uc3-right:empty {
  display: none;
}
.uc3-right {
  text-align: center;
}

.uc3-right figcaption {
  display: block;        
  margin-top: 6px;        
  line-height: 1.25;
  font-size: 0.6em;       
}
/* ============================ END ============================= */

/* ================================= */
/* Line splitting the Universal columns */
/* ================================= */
.lineV::after {
  content: "";
  display: block;
  width: 1px;
  background-color: var(--box-color, var(--clr-accent)) !important;
  height: 100%;
  margin: auto;
}
/* ================================================================= */
/* ! UNIVERSAL TAB SYSTEM START */
/* ================================================================= */
.universal-tab-group {
  /* This is the main theme color variable for the component. */
  /* It now inherits --box-color from any applied color-* class, with --clr-accent as a fallback. */
  --tab-theme-color: var(--box-color, var(--clr-accent));

  /* All other themeable properties are derived from this variable. */
  --universal-tab-border-color: var(--tab-theme-color);
  --universal-tab-active-text-color: var(--tab-theme-color);
  
  /* Static colors for the component structure */
  --universal-tab-bg: #f1f1f1;
  --universal-tab-text-color: #333;
  --universal-tab-hover-bg: #e7e7e7;
  --universal-tab-content-bg: #ffffff;
  --universal-tab-active-bg: var(--universal-tab-content-bg);
  --universal-tab-radius: 4px;
  
  border: 1px solid var(--universal-tab-border-color);
  border-radius: var(--universal-tab-radius);
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
  margin-bottom: 20px;
}

/* The container for the tab buttons */
.universal-tab-group .tab {
  overflow: hidden;
  background-color: var(--universal-tab-bg);
  border-bottom: 1px solid var(--universal-tab-border-color);
  border-radius: var(--universal-tab-radius) var(--universal-tab-radius) 0 0;
}

/* Individual tab buttons */
.universal-tab-group .tablinks {
  background-color: inherit;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 18px;
  transition: background-color 0.3s, color 0.3s;
  color: var(--universal-tab-text-color);
  font-size: 1em;
  margin: 0;
  border-radius: 0;
  border-right: 1px solid #ddd;
}

.universal-tab-group .tablinks:last-child {
  border-right: none;
}

/* Hover state for tab buttons */
.universal-tab-group .tablinks:hover {
  background-color: var(--universal-tab-hover-bg);
}

/* Active/selected tab button */
.universal-tab-group .tablinks[aria-selected="true"] {
  background-color: var(--universal-tab-active-bg);
  color: var(--universal-tab-active-text-color);
  font-weight: bold;
  border-bottom: 2px solid transparent; /* Hides the container border below the active tab */
  margin-bottom: -1px;
}

/* Tab content panel */
.universal-tab-group .tabcontent {
  background-color: var(--universal-tab-content-bg);
  padding: 20px;
  border: none; /* This resets any borders from more generic .tabcontent rules */
  display: none; /* Hidden by default */
  animation: fadeIn 0.5s;
}

/* Show active tab content */
.universal-tab-group .tabcontent[aria-hidden="false"] {
  display: block;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ? ----------------------------- */
/* ? Slodeshow -------------- START */
/* ? ----------------------------- */
/* Universal Slideshow Accordion Styles */
.slideshow-accordion-universal {
  border: 1px solid var(--box-color, var(--clr-tertiary));
  margin-bottom: 5px;
  overflow: hidden; 
  border-radius: 50px 10px 10px 50px;
  transition: border-radius 0.4s ease-in-out;
}

.slideshow-accordion-universal[open] {
  border-radius: 10px;
}

.slideshow-accordion-universal > summary {
  background-color: var(--box-color, var(--clr-tertiary));
  color: var(--icon-color, var(--clr-white));
  padding: 8px 0px 8px 55px; 
  /* padding: 15px 20px 15px 55px;  */
  cursor: pointer;
  position: relative;
  list-style: none; 
  transition: background-color 0.3s ease-in-out;
  font-size: 1em;
  font-weight: bold;
}

/* Hides the default arrow in Webkit browsers (Chrome, Safari) */
.slideshow-accordion-universal > summary::-webkit-details-marker {
  display: none;
}

.slideshow-accordion-universal > summary::before {
  content: '';
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  background-color: currentColor;
  mask: var(--icon-mask) no-repeat center / contain;
  -webkit-mask: var(--icon-mask) no-repeat center / contain;
  transition: transform 0.3s ease-in-out;
}

.slideshow-accordion-universal[open] > summary::before {
  transform: translateY(-50%) rotate(0deg);
}

.slideshow-accordion-universal > .accordion-panel {
  padding: 15px;
  background-color: var(--clr-white);
  border-top: 1px solid var(--box-color, var(--clr-tertiary));
}
/* OLD SLIDE SHOW */
  .slideshow { 
            flex-grow: 1; 
            position: relative; 
            display: flex; 
            justify-content: center; 
            align-items: center; 
            overflow: hidden; 
            min-height: 300px;
                        border: 1px solid #ccc;
            border-radius: 10px;
            background-color: #000; 
               box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        }

.slideshow-accordion {
  margin-bottom: 5px;
  border: 1px solid #ccc;
  border-radius: 8px;
  overflow: hidden; 
}

.slideshow-accordion summary {
  cursor: pointer;
  font-size: 1em;
  font-weight: bold;
  padding: 5px 10px;
  background-color: #f7f7f7;
  transition: background-color 0.2s ease-in-out;
  outline: none; 
}

.slideshow-accordion summary:hover {
  background-color: #e9e9e9;
}

.slideshow-accordion[open] > summary {
  border-bottom: 1px solid #ccc;
}

.slideshow-accordion summary::-webkit-details-marker {
  display: none;
}

.slideshow-accordion summary {
  list-style: none; 
}
/* ? ----------------------------- */
/* ? Slodeshow -------------- END */
/* ? ----------------------------- */

/* --------------------------- */
/* --------------------------- */
/* !  Accordion header colour*/
/* ! */
.universal-solid-box .universal-base-accordion .universal-base-accordion-title-button,
.universal-solid-box .base-accordion .base-accordion-title-button {
  color: var(--text-color, var(--clr-white)) !important;
}

/* Default (standalone / not in solid box) */
.universal-base-accordion > div,
.base-accordion > div {
  color: var(--clr-primary); 
}

.universal-base-accordion > div :where(ul, ol) > li::marker,
.base-accordion > div :where(ul, ol) > li::marker {
  color: currentColor; 
}
/* !! **********  */

/* !! **********  */
.universal-solid-box .universal-base-accordion > div,
.universal-solid-box .base-accordion > div {
  color: var(--text-color, var(--clr-white)); 
}
.universal-solid-box .universal-base-accordion > div :where(ul, ol) > li::marker,
.universal-solid-box .base-accordion > div :where(ul, ol) > li::marker {
  color: currentColor !important;          
}

.universal-solid-box {
  --text-color: var(--icon-color, var(--clr-white));
  color: var(--text-color);
}

.universal-solid-box p { color: inherit; }

.universal-base-accordion > div :where(ul, ol) > li::marker,
.base-accordion > div :where(ul, ol) > li::marker {
  color: var(--box-color, var(--clr-accent)) !important;
}

.universal-solid-box .universal-base-accordion > div :where(ul, ol) > li::marker,
.universal-solid-box .base-accordion > div :where(ul, ol) > li::marker {
  color: var(--box-color, var(--clr-accent)) !important;
}
:is(.universal-base-accordion, .base-accordion)
  :is(.universal-base-accordion-title,
      .universal-base-accordion-title-button,
      .base-accordion-title,
      .base-accordion-title-button)
  + div :is(ul, ol) > li::marker {
  color: var(--box-color, var(--clr-accent)) !important;
}

.universal-solid-box
  :is(.universal-base-accordion, .base-accordion)
  :is(.universal-base-accordion-title,
      .universal-base-accordion-title-button,
      .base-accordion-title,
      .base-accordion-title-button)
  + div :is(ul, ol) > li::marker {
  color: var(--box-color, var(--clr-accent)) !important;
}
.universal-outline-box :is(ul, ol) > li {
  color: inherit;               
}
.universal-outline-box :is(ul, ol) > li::marker {
  color: currentColor;   
}
.universal-outline-box {
  --outline-list-marker: var(--clr-accent);
}

/* If the outline itself has a color-* class, use its border hue */
.universal-outline-box[class*="color-"] {
  --outline-list-marker: var(--outline-color, var(--box-color, var(--clr-accent)));
}

/* When the outline sits on a coloured background (solid box),
   make markers follow the outline's text color for readability */
.universal-solid-box .universal-outline-box {
  --outline-list-marker: currentColor;
}

.universal-outline-box :is(ul, ol) > li { color: inherit; }
.universal-outline-box :is(ul, ol) > li::marker {
  color: var(--outline-list-marker) !important; 
}
/* ! */
/* ! */
/* --------------------------- */
/* ? Universal gradient backgrounds START */
/* Base gradient classes — DO NOT touch text colour here */
.grad-top {
  --box-color: linear-gradient(
    to bottom, 
    var(--gradient-color) 0%, 
    var(--gradient-color) 5%, 
    transparent 100%
  );
}

.grad-bottom {
  --box-color: linear-gradient(
    to top, 
    var(--gradient-color) 0%, 
    var(--gradient-color) 5%, 
    transparent 100%
  );
}

.grad-mid {
  --box-color: linear-gradient(
    to bottom, 
    transparent 0%, 
    var(--gradient-color) 45%, 
    var(--gradient-color) 55%, 
    transparent 100%
  );
}


/* Color classes */
.clr-light-blue {
  --current-color: var(--clr-blue-light);
  --gradient-color: var(--current-color);
}

/* Lightness modifiers */
.lighter {
  --gradient-color: color-mix(in srgb, var(--current-color) 100%, white);
   
}
.lighter-10 {
  --gradient-color: color-mix(in srgb, var(--current-color) 90%, white);
   
}
.lighter-15 {
  --gradient-color: color-mix(in srgb, var(--current-color) 85%, white);
   
}

.lighter-20 {
  --gradient-color: color-mix(in srgb, var(--current-color) 80%, white);
   
}
.lighter-25 {
  --gradient-color: color-mix(in srgb, var(--current-color) 75%, white);
   
}
.lighter-30 {
  --gradient-color: color-mix(in srgb, var(--current-color) 70%, white);
   
}
.lighter-35 {
  --gradient-color: color-mix(in srgb, var(--current-color) 65%, white);
   
}
.lighter-45 {
  --gradient-color: color-mix(in srgb, var(--current-color) 60%, white);
   
}
.lighter-50 {
  --gradient-color: color-mix(in srgb, var(--current-color) 50%, white);
   
}
.lighter-55 {
  --gradient-color: color-mix(in srgb, var(--current-color) 45%, white);
   
}
.lighter-60 {
  --gradient-color: color-mix(in srgb, var(--current-color) 40%, white);
   
}
.lighter-65 {
  --gradient-color: color-mix(in srgb, var(--current-color) 35%, white);
   
  
}
.lighter-70 {
  --gradient-color: color-mix(in srgb, var(--current-color) 30%, white);
   
}
.lighter-75{
  --gradient-color: color-mix(in srgb, var(--current-color) 25%, white);
   
}
.lighter-80{
  --gradient-color: color-mix(in srgb, var(--current-color) 20%, white);
   
}
.lighter-85{
  --gradient-color: color-mix(in srgb, var(--current-color) 15%, white);
   
}
.lighter-90{
  --gradient-color: color-mix(in srgb, var(--current-color) 10%, white);
   
}
.lighter-95{
  --gradient-color: color-mix(in srgb, var(--current-color) 5%, white);
   
}

/* darker variants - Not sure if this is needed but just incase adding it here to expand apon*/
.darker-25 {
  --gradient-color: color-mix(in srgb, var(--current-color) 75%, black);
}
/* ? Universal gradient backgrounds END */
/* --------------------------- */
/*! ========================================== */
/*! UNIVERSAL BOX SYSTEM END */
/*! ==========================================  */

/* ! Math equation override      START */

/* ========================================================= */
/* == NEUTRALIZE ANIMATIONS ON D2L FORMULA IMAGES == */
/* ========================================================= */

/* Targets any image D2L generates for formulas inside the table or paragraphs */
/* table td img,
p img,
img.d2l-equation {

    opacity: 1 !important;
    visibility: visible !important;

    animation: none !important;
    transition: none !important;

    transform: none !important;
    -webkit-transform: none !important;
} */

/* Also forces the MathML tags themselves to be visible as a fallback */
/* MATHJAX FORMULA FIX - Add this to your CSS */

/* Force MathJax elements to be visible */
/* CORRECTED MATHJAX FORMULA FIX - Replace your previous CSS with this */

/* Force MathJax containers to be visible but preserve their layout */
mjx-math,
mjx-math[aria-hidden="true"],
.MJX-TEX,
.mjx-chtml {
    visibility: visible !important;
    opacity: 1 !important;
    /* DON'T override display - let MathJax handle it */
}

/* Fix visibility for MathJax sub-elements without breaking layout */
mjx-math *,
.MJX-TEX *,
.mjx-chtml * {
    visibility: visible !important;
    opacity: 1 !important;
    /* DON'T force display: inline - this breaks the formula layout */
}

/* Specific fixes for MathJax containers */
mjx-container {
    visibility: visible !important;
    opacity: 1 !important;
}

/* Override any aria-hidden styling - but preserve display properties */
[aria-hidden="true"].MJX-TEX,
mjx-math[aria-hidden="true"] {
    visibility: visible !important;
    opacity: 1 !important;
}

/* Ensure parent elements don't hide formulas */
span[style*="font-size: 19px"] {
    visibility: visible !important;
    opacity: 1 !important;
}

/* Table cell fix for formulas */
table td {
    overflow: visible !important;
}
/* ! Math equation override      END */